/*******************************************************************************
 * The MIT License (MIT)
 *
 * Copyright (c) 2026, Jean-David Gadina - www.xs-labs.com
 *
 * Permission is hereby granted, free of charge, to any person obtaining a copy
 * of this software and associated documentation files (the Software), to deal
 * in the Software without restriction, including without limitation the rights
 * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 * copies of the Software, and to permit persons to whom the Software is
 * furnished to do so, subject to the following conditions:
 *
 * The above copyright notice and this permission notice shall be included in
 * all copies or substantial portions of the Software.
 *
 * THE SOFTWARE IS PROVIDED AS IS, WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
 * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
 * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
 * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
 * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
 * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 * THE SOFTWARE.
 ******************************************************************************/

/*******************************************************************************
 * Design tokens
 ******************************************************************************/

:root
{
    --bg:            #05070d;
    --bg-elevated:   #090c14;
    --panel:         #0e1420;
    --panel-2:       #111927;
    --border:        #1c2536;
    --border-strong: #28344a;

    --text:          #eef2f8;
    --text-dim:      #9aa6b8;
    --text-faint:    #66728a;

    --accent:        #3b82f6;
    --accent-bright: #5b9dff;
    --accent-soft:   rgba( 59, 130, 246, 0.12 );
    --accent-line:   rgba( 59, 130, 246, 0.30 );

    --radius:        16px;
    --maxw:          1180px;

    --font:          -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text",
                     "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    --mono:          "SF Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

/*******************************************************************************
 * Reset
 ******************************************************************************/

*
{
    box-sizing: border-box;
    margin:     0;
    padding:    0;
}

html
{
    scroll-behavior: smooth;
}

body
{
    background:               var( --bg );
    color:                    var( --text );
    font-family:              var( --font );
    line-height:              1.6;
    -webkit-font-smoothing:   antialiased;
    -moz-osx-font-smoothing:  grayscale;
    overflow-x:               hidden;
}

a
{
    color:           inherit;
    text-decoration: none;
}

img
{
    max-width: 100%;
    display:   block;
}

.wrap
{
    max-width: var( --maxw );
    margin:    0 auto;
    padding:   0 28px;
    position:  relative;
    z-index:   1;
}

/*******************************************************************************
 * Shared type helpers
 ******************************************************************************/

.eyebrow
{
    font-family:    var( --mono );
    font-size:      0.74rem;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color:          var( --accent-bright );
}

.section-head
{
    text-align: center;
    max-width:  640px;
    margin:     0 auto 56px;
}

.section-head h2
{
    font-size:      clamp( 1.7rem, 3.6vw, 2.5rem );
    font-weight:    700;
    letter-spacing: -0.02em;
    margin-bottom:  12px;
}

.section-head p
{
    color:     var( --text-dim );
    font-size: 1.05rem;
}

section
{
    position: relative;
    z-index:  1;
}

/*******************************************************************************
 * Icons
 ******************************************************************************/

.svg-icon
{
    display:   block;
    flex:      none;
    max-width: 100%;
}

/*******************************************************************************
 * Header bar
 ******************************************************************************/

.site-header
{
    position: relative;
    z-index:  20;
}

.site-header .wrap
{
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    gap:             18px;
    padding-top:     26px;
    padding-bottom:  26px;
}

.brand
{
    display:     flex;
    align-items: center;
    gap:         15px;
}

.brand img
{
    width:  54px;
    height: 54px;
    flex:   none;
    filter: drop-shadow( 0 6px 16px rgba( 0, 0, 0, 0.55 ) );
}

.brand .brand-name
{
    font-size:      1.4rem;
    font-weight:    700;
    letter-spacing: -0.01em;
    line-height:    1.15;
}

.brand .brand-tag
{
    font-size: 0.86rem;
    color:     var( --text-dim );
}

.github-link
{
    display:      inline-flex;
    align-items:  center;
    gap:          9px;
    font-size:    0.9rem;
    font-weight:  500;
    color:        var( --text );
    padding:      9px 17px;
    border-radius: 999px;
    border:       1px solid var( --border-strong );
    background:   rgba( 255, 255, 255, 0.02 );
    transition:   border-color 0.2s ease, background 0.2s ease, transform 0.2s ease;
}

.github-link:hover
{
    border-color: var( --accent-line );
    background:   var( --accent-soft );
    transform:    translateY( -1px );
}

.github-link .svg-icon
{
    width:  18px;
    height: 18px;
}

/*******************************************************************************
 * Hero
 ******************************************************************************/

.hero
{
    position: relative;
    padding:  40px 0 96px;
    overflow: hidden;
}

/* Nebula glow recreated with layered radial gradients */
.hero::before
{
    content:        "";
    position:       absolute;
    inset:          -140px -10% 0;
    z-index:        0;
    pointer-events: none;
    background:
        radial-gradient( 46% 60% at 72% 36%, rgba( 150, 70, 160, 0.30 ), transparent 70% ),
        radial-gradient( 40% 52% at 84% 30%, rgba( 196, 92, 110, 0.24 ), transparent 72% ),
        radial-gradient( 50% 58% at 60% 52%, rgba( 40,  86, 150, 0.30 ), transparent 72% ),
        radial-gradient( 38% 44% at 30% 24%, rgba( 46,  70, 132, 0.22 ), transparent 72% );
    filter:         blur( 6px );
    opacity:        0.9;
}

/* Twinkling, glowing star field */
.hero-stars
{
    position:       absolute;
    inset:          0;
    z-index:        0;
    overflow:       hidden;
    pointer-events: none;
}

.hero-star
{
    position:      absolute;
    border-radius: 50%;
    opacity:       var( --min );
    animation:     twinkle var( --dur ) ease-in-out var( --delay ) infinite;
}

/* Diffraction spikes on the brighter stars */
.hero-star.spikes::before,
.hero-star.spikes::after
{
    content:   "";
    position:  absolute;
    top:       50%;
    left:      50%;
    transform: translate( -50%, -50% );
}

.hero-star.spikes::before
{
    width:      750%;
    height:     1px;
    background: linear-gradient( to right, transparent, rgba( 255, 255, 255, 0.7 ), transparent );
}

.hero-star.spikes::after
{
    width:      1px;
    height:     750%;
    background: linear-gradient( to bottom, transparent, rgba( 255, 255, 255, 0.7 ), transparent );
}

@keyframes twinkle
{
    0%, 100%
    {
        opacity:   var( --min );
        transform: scale( 1 );
    }

    50%
    {
        opacity:   var( --max );
        transform: scale( 1.25 );
    }
}

.hero .wrap
{
    display:               grid;
    grid-template-columns: 1fr 1.12fr;
    align-items:           center;
    gap:                   56px;
}

.hero-copy h1
{
    font-size:      clamp( 2.3rem, 4.4vw, 3.4rem );
    font-weight:    800;
    letter-spacing: -0.025em;
    line-height:    1.04;
    margin-bottom:  22px;
}

.hero-copy p.lede
{
    font-size:     clamp( 1.02rem, 1.6vw, 1.18rem );
    color:         var( --text-dim );
    max-width:     460px;
    margin-bottom: 32px;
}

/* Buttons */
.btn-row
{
    display:   flex;
    flex-wrap: wrap;
    gap:       14px;
}

.btn
{
    display:       inline-flex;
    align-items:   center;
    gap:           11px;
    font-weight:   600;
    font-size:     0.98rem;
    padding:       0 22px;
    height:        52px;
    border-radius: 13px;
    transition:    transform 0.2s ease, background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.btn .svg-icon
{
    flex: none;
}

.btn-primary
{
    background: var( --accent );
    color:      #fff;
    box-shadow: 0 12px 30px -12px rgba( 59, 130, 246, 0.7 );
}

.btn-primary:hover
{
    background: var( --accent-bright );
    transform:  translateY( -2px );
}

.btn-appstore
{
    background: var( --panel-2 );
    color:      var( --text );
    border:     1px solid var( --border-strong );
}

.btn-appstore:hover
{
    border-color: var( --accent-line );
    background:    var( --panel );
    transform:     translateY( -2px );
}

.btn-appstore .store-label
{
    display:        flex;
    flex-direction: column;
    line-height:    1.1;
    text-align:     left;
}

.btn-appstore .store-label small
{
    font-size:      0.64rem;
    font-weight:    500;
    letter-spacing: 0.02em;
    color:          var( --text-dim );
}

.btn-appstore .store-label strong
{
    font-size:   1.02rem;
    font-weight: 600;
}

/* System requirements */
.sys-req
{
    display:     inline-flex;
    align-items: center;
    gap:         8px;
    margin-top:  22px;
    font-size:   0.86rem;
    color:       var( --text-faint );
}

.sys-req .svg-icon
{
    width:   15px;
    height:  15px;
    opacity: 0.8;
}

/* Hero screenshot */
.hero-shot
{
    position: relative;
}

.hero-shot .window-frame
{
    box-shadow:
        0 50px 120px -40px rgba( 0,   0,   0,   0.9 ),
        0 0    0     1px   rgba( 255, 255, 255, 0.03 );
}

/*******************************************************************************
 * Feature card grids (icon + title + text)
 ******************************************************************************/

.feature-section
{
    padding: 84px 0;
}

.card-grid
{
    display:               grid;
    grid-template-columns: repeat( 5, 1fr );
    gap:                   22px;
}

.feature-card
{
    text-align: center;
    padding:    8px 6px;
    position:   relative;
}

.feature-card .icon
{
    width:       64px;
    height:      64px;
    margin:      0 auto 20px;
    display:     grid;
    place-items: center;
    color:       var( --accent-bright );
}

.feature-card .icon .svg-icon
{
    width:  100%;
    height: 100%;
}

.feature-card h3
{
    font-size:     1.04rem;
    font-weight:   600;
    margin-bottom: 9px;
}

.feature-card p
{
    font-size:   0.9rem;
    color:       var( --text-dim );
    line-height: 1.55;
    max-width:   200px;
    margin:      0 auto;
}

.format-chips
{
    display:         flex;
    flex-wrap:       wrap;
    justify-content: center;
    align-content:   center;
    gap:             6px;
    width:           134px;
    height:          64px;
    margin:          0 auto 20px;
}

.format-chips span
{
    font-family:    var( --mono );
    font-size:      0.56rem;
    font-weight:    600;
    letter-spacing: 0.02em;
    padding:        3px 6px;
    border-radius:  5px;
    background:     var( --accent-soft );
    border:         1px solid var( --accent-line );
    color:          var( --accent-bright );
}

/* "Soon" badge */
.soon-badge
{
    display:        inline-block;
    margin:         11px 0 0;
    font-size:      0.62rem;
    font-weight:    700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color:          #fff;
    background:     var( --accent );
    padding:        3px 9px;
    border-radius:  999px;
}

/*******************************************************************************
 * Feature highlight blocks (title + text + screenshot placeholder)
 ******************************************************************************/

.highlights
{
    padding: 40px 0 96px;
}

.highlight
{
    display:               grid;
    grid-template-columns: 1fr 1.15fr;
    align-items:           center;
    gap:                   64px;
    padding:               48px 0;
}

.highlight + .highlight
{
    border-top: 1px solid var( --border );
}

.highlight.reverse .highlight-media
{
    order: -1;
}

.highlight-copy .eyebrow
{
    display:       block;
    margin-bottom: 14px;
}

.highlight-copy h3
{
    font-size:      clamp( 1.5rem, 3vw, 2.1rem );
    font-weight:    700;
    letter-spacing: -0.02em;
    margin-bottom:  14px;
}

.highlight-copy > p
{
    color:         var( --text-dim );
    font-size:     1.04rem;
    margin-bottom: 22px;
}

.highlight-list
{
    list-style: none;
    display:    grid;
    gap:        12px;
}

.highlight-list li
{
    display:     flex;
    gap:         12px;
    align-items: flex-start;
    color:       var( --text-dim );
    font-size:   0.96rem;
}

.highlight-list li .svg-icon
{
    flex:       none;
    width:      19px;
    height:     19px;
    margin-top: 2px;
    color:      var( --accent-bright );
}

.highlight-list li strong
{
    color:       var( --text );
    font-weight: 600;
}

/* macOS-style window frame used as a screenshot placeholder */
.window-frame
{
    border-radius: 14px;
    overflow:      hidden;
    border:        1px solid var( --border-strong );
    background:    var( --panel );
    box-shadow:
        0 40px 90px -40px rgba( 0,   0,   0,   0.9 ),
        0 0    0    1px   rgba( 255, 255, 255, 0.02 );
}

.window-frame .titlebar
{
    display:       flex;
    align-items:   center;
    gap:           8px;
    padding:       12px 15px;
    background:    var( --panel-2 );
    border-bottom: 1px solid var( --border );
}

.window-frame .titlebar i
{
    width:         12px;
    height:        12px;
    border-radius: 50%;
    display:       block;
}

.window-frame .titlebar i:nth-child( 1 )
{
    background: #ff5f57;
}

.window-frame .titlebar i:nth-child( 2 )
{
    background: #febc2e;
}

.window-frame .titlebar i:nth-child( 3 )
{
    background: #28c840;
}

/* Placeholder canvas inside the frame — swap for a real <img> later */
.shot-placeholder
{
    aspect-ratio: 16 / 10;
    display:      grid;
    place-items:  center;
    gap:          14px;
    text-align:   center;
    color:        var( --text-faint );
    background:
        radial-gradient( 60% 80% at 50% 40%, rgba( 59, 130, 246, 0.08 ), transparent 70% ),
        repeating-linear-gradient( 45deg, rgba( 255, 255, 255, 0.015 ) 0 14px, transparent 14px 28px ),
        var( --bg-elevated );
}

.shot-placeholder .svg-icon
{
    width:   46px;
    height:  46px;
    opacity: 0.45;
}

.shot-placeholder span
{
    font-family:    var( --mono );
    font-size:      0.72rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

/* When a real screenshot is dropped in */
.window-frame .shot-img
{
    width:   100%;
    display: block;
}

/*******************************************************************************
 * "Built by Astrophotographers" block
 ******************************************************************************/

.built
{
    padding: 40px 0 100px;
}

.built-panel
{
    display:               grid;
    grid-template-columns: auto 1fr;
    align-items:           center;
    gap:                   48px;
    padding:               48px 52px;
    border-radius:         var( --radius );
    border:                1px solid var( --border-strong );
    background:
        radial-gradient( 120% 140% at 0% 0%, rgba( 40, 86, 150, 0.18 ), transparent 55% ),
        linear-gradient( 180deg, var( --panel ), var( --bg-elevated ) );
    box-shadow:            0 30px 80px -50px rgba( 0, 0, 0, 0.9 );
}

.built-panel .app-icon
{
    width:  188px;
    height: 188px;
    flex:   none;
    filter: drop-shadow( 0 18px 40px rgba( 0, 0, 0, 0.6 ) );
}

.built-panel h2
{
    font-size:      clamp( 1.5rem, 3vw, 2.1rem );
    font-weight:    700;
    letter-spacing: -0.02em;
    margin-bottom:  14px;
}

.built-panel p
{
    color:     var( --text-dim );
    font-size: 1.06rem;
    max-width: 560px;
}

/*******************************************************************************
 * Footer
 ******************************************************************************/

.site-footer
{
    border-top: 1px solid var( --border );
    padding:    36px 0;
}

.site-footer .wrap
{
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    flex-wrap:       wrap;
    gap:             18px;
}

.footer-brand
{
    display:     flex;
    align-items: center;
    gap:         12px;
    font-weight: 600;
}

.footer-brand img
{
    width:  54px;
    height: 54px;
    flex:   none;
    filter: drop-shadow( 0 4px 12px rgba( 0, 0, 0, 0.5 ) );
}

.footer-brand .ft-sub
{
    font-weight: 400;
    font-size:   0.84rem;
    color:       var( --text-faint );
}

.footer-right
{
    display:     flex;
    align-items: center;
    gap:         22px;
}

.site-footer a.footer-gh
{
    display:     inline-flex;
    align-items: center;
    gap:         8px;
    font-size:   0.88rem;
    color:       var( --text-dim );
    transition:  color 0.2s ease;
}

.site-footer a.footer-gh:hover
{
    color: var( --text );
}

.site-footer a.footer-gh .svg-icon
{
    width:   17px;
    height:  17px;
    opacity: 0.62;
}

.site-footer .copyright
{
    font-size: 0.84rem;
    color:     var( --text-faint );
}

.site-footer .copyright a
{
    color:      var( --text-dim );
    transition: color 0.2s ease;
}

.site-footer .copyright a:hover
{
    color: var( --text );
}

/*******************************************************************************
 * Scroll reveal
 ******************************************************************************/

.reveal
{
    opacity:    0;
    transform:  translateY( 24px );
    transition: opacity 0.7s ease, transform 0.7s ease;
}

.reveal.in
{
    opacity:   1;
    transform: none;
}

/*******************************************************************************
 * Responsive
 ******************************************************************************/

@media ( max-width: 980px )
{
    .hero .wrap
    {
        grid-template-columns: 1fr;
        gap:                   44px;
    }

    .hero-copy
    {
        text-align: center;
    }

    .hero-copy p.lede
    {
        margin-left:  auto;
        margin-right: auto;
    }

    .btn-row
    {
        justify-content: center;
    }

    .card-grid
    {
        grid-template-columns: repeat( 3, 1fr );
        row-gap:               40px;
    }

    .highlight,
    .highlight.reverse
    {
        grid-template-columns: 1fr;
        gap:                   32px;
    }

    .highlight .highlight-media,
    .highlight.reverse .highlight-media
    {
        order: 0;
    }

    .built-panel
    {
        grid-template-columns: 1fr;
        text-align:            center;
        padding:               40px 32px;
    }

    .built-panel .app-icon
    {
        margin: 0 auto;
    }

    .built-panel p
    {
        margin-left:  auto;
        margin-right: auto;
    }
}

@media ( max-width: 620px )
{
    .wrap
    {
        padding: 0 20px;
    }

    .brand .brand-tag
    {
        display: none;
    }

    .github-link .gh-text
    {
        display: none;
    }

    .github-link
    {
        padding: 9px;
    }

    .card-grid
    {
        grid-template-columns: repeat( 2, 1fr );
    }

    .btn
    {
        width:           100%;
        justify-content: center;
    }

    .footer-right
    {
        flex-direction: column-reverse;
        align-items:    flex-start;
        gap:            12px;
    }
}

@media ( prefers-reduced-motion: reduce )
{
    html
    {
        scroll-behavior: auto;
    }

    .reveal
    {
        opacity:    1;
        transform:  none;
        transition: none;
    }

    .hero-star
    {
        animation: none;
        opacity:   var( --max );
    }

    .btn:hover,
    .github-link:hover
    {
        transform: none;
    }
}