*{
    box-sizing:border-box;
}

html{
    min-height:100%;
    scroll-behavior:smooth;
    background:#001a42;

    /* Keep header/logo scale identical across short and long pages.
       Without this, Contact (no overflow) gains ~scrollbar width and the
       flex lockup renders slightly larger than Home/About. */
    scrollbar-gutter:stable;
}

body{
    margin:0;
    min-height:100vh;
    font-family:Arial,sans-serif;
    color:white;

    background:
        radial-gradient(
            ellipse at center 16%,
            rgba(130,210,255,.08) 0%,
            rgba(130,210,255,.03) 30%,
            transparent 60%
        ),
        linear-gradient(
            180deg,
            #2d8fd7 0%,
            #0a4f93 36%,
            #012d63 68%,
            #001a42 100%
        );

    background-attachment:fixed;
}

/* =====================================================
   HEADER
===================================================== */

.site-header{
    min-height:0;

    padding-top:8px;
    padding-bottom:8px;
    padding-left:max(34px,calc((100vw - 1180px) / 2));
    padding-right:max(34px,calc((100vw - 1180px) / 2));

    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:40px;

    background:#001a42;

    box-shadow:
        0 4px 14px rgba(0,0,0,.30);
}

.horizontal-lockup-link{
    display:block;
    flex:0 1 840px;
    text-decoration:none;
}

.horizontal-lockup{
    display:block;

    width:100%;
    max-width:840px;
    height:auto;
}

/* NAVIGATION */

.site-nav{
    display:flex;
    align-items:center;
    align-self:flex-end;
    justify-content:flex-end;
    gap:26px;

    flex-shrink:0;

    margin-bottom:18px;
}

.site-nav a{
    color:white;
    text-decoration:none;

    font-family:Montserrat,Arial,sans-serif;
    font-size:14px;
    font-weight:700;

    text-transform:uppercase;
    letter-spacing:1px;

    transition:color .15s ease;
}

.site-nav a:hover,
.site-nav a:focus-visible{
    color:#20dcff;
}

.site-nav a.is-active,
.site-nav a[aria-current="page"]{
    color:#20dcff;
}

/* =====================================================
   TAGLINE
===================================================== */

.tagline-band{
    width:100%;
    padding:12px 20px 8px;
    text-align:center;
}

.header-tagline{
    margin:0;

    white-space:nowrap;

    text-shadow:
        0 3px 8px rgba(0,0,0,.45);
}

.tagline-main{
    font-family:Montserrat,Arial,sans-serif;
    font-size:22px;
    font-weight:700;
    font-style:normal;
}

.tagline-frenzy{
    margin-left:5px;

    font-family:Montserrat,Arial,sans-serif;
    font-size:22px;
    font-weight:700;
    font-style:italic;
}

/* =====================================================
   PAGE
===================================================== */

.page-shell{
    width:min(1180px,96vw);
    margin:0 auto;
    padding:12px 0 24px;
    text-align:center;
}

/* =====================================================
   SECTION HEADERS
===================================================== */

.section-title{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:20px;

    margin:12px auto 18px;
}

.daily-title{
    margin-top:16px;
    margin-bottom:24px;

    scroll-margin-top:150px;
}

.fidget-title{
    margin-top:42px;
}

.section-title span{
    width:160px;
    max-width:20vw;
    height:2px;

    border-radius:999px;

    opacity:.55;

    background:
        linear-gradient(
            90deg,
            transparent,
            #00cfff,
            transparent
        );
}

.section-title h2{
    margin:0;

    font-family:Montserrat,Arial,sans-serif;
    font-size:18px;
    font-weight:700;

    text-transform:uppercase;
    letter-spacing:1.8px;
}

/* =====================================================
   HOMEPAGE LAUNCH EXPERIENCE
===================================================== */

.flagship-hero{
    display:grid;
    grid-template-columns:minmax(0,1.15fr) minmax(260px,.9fr);
    align-items:center;
    gap:clamp(24px,4.5vw,60px);

    min-height:470px;
    padding:24px clamp(34px,6vw,76px);

    overflow:hidden;

    text-align:left;

    border:1px solid rgba(255,255,255,.14);
    border-radius:28px;

    background:
        radial-gradient(
            circle at 78% 42%,
            rgba(32,220,255,.17),
            transparent 34%
        ),
        linear-gradient(
            145deg,
            rgba(4,41,91,.90),
            rgba(0,15,39,.96)
        );

    box-shadow:
        0 18px 46px rgba(0,0,0,.25),
        inset 0 1px 0 rgba(255,255,255,.06);
}

.hero-copy{
    width:max-content;
    max-width:min(590px,100%);

    justify-self:center;
}

.hero-copy h1{
    margin:0;
    text-align:center;
}

.hero-product-logo{
    display:block;
    width:min(315px,100%);
    height:auto;
    margin-left:auto;
    margin-right:auto;
}

.hero-availability{
    /* wide enough to keep the status on one line at desktop/laptop */
    width:max-content;
    max-width:100%;
    min-height:18px;
    margin:18px auto 0;

    justify-content:center;
}

.product-status-line{
    display:flex;
    align-items:center;
    gap:10px;

    color:rgba(255,255,255,.70);

    font-family:Montserrat,Arial,sans-serif;
    font-size:12px;
    font-weight:700;

    text-transform:uppercase;
    letter-spacing:1.4px;
}

.product-status-line-centered{
    justify-content:center;
    margin-left:auto;
    margin-right:auto;
}

.product-status-line::before,
.product-status-line::after{
    content:"";

    width:36px;
    height:2px;

    flex:0 0 auto;

    background:#ffbf3f;
}

.hero-message{
    max-width:480px;
    margin:22px 0 0;

    color:rgba(255,255,255,.82);

    font-size:18px;
    line-height:1.55;
}

.hero-headline{
    margin:24px 0 0;

    color:white;

    font-family:Montserrat,Arial,sans-serif;
    font-size:32px;
    font-weight:700;
    line-height:1.18;
    text-align:center;
}

.hero-philosophy{
    margin:18px 0 0;

    color:rgba(255,255,255,.90);

    font-family:Montserrat,Arial,sans-serif;
    font-size:20px;
    font-weight:700;
    line-height:1.55;
    text-align:center;
}

.hero-closing{
    margin:18px 0 0;

    color:#20dcff;

    font-family:Montserrat,Arial,sans-serif;
    font-size:16px;
    font-weight:700;
    line-height:1.45;
}

.hero-actions{
    display:flex;
    align-items:center;
    flex-wrap:wrap;
    gap:16px 24px;

    margin-top:26px;
}

.store-cta{
    display:inline-flex;
    align-items:center;
    justify-content:center;

    min-height:46px;
    padding:0 22px;

    color:#00152f;
    text-decoration:none;

    border:1px solid rgba(255,255,255,.38);
    border-radius:999px;

    background:white;

    box-shadow:0 8px 22px rgba(0,0,0,.22);

    font-family:Montserrat,Arial,sans-serif;
    font-size:13px;
    font-weight:700;

    letter-spacing:.2px;
}

a.store-cta:hover,
a.store-cta:focus-visible{
    color:#00152f;
    border-color:#20dcff;
    box-shadow:0 10px 26px rgba(0,0,0,.28);
}

.store-cta-placeholder{
    cursor:default;
}

.learn-more-link{
    color:#20dcff;
    text-decoration:none;

    font-family:Montserrat,Arial,sans-serif;
    font-size:14px;
    font-weight:700;
}

.learn-more-link::after{
    content:" →";
}

.learn-more-link:hover,
.learn-more-link:focus-visible{
    color:white;
}

.hero-visual{
    display:flex;
    justify-content:center;
}

.framed-shot{
    display:block;
    width:100%;
    max-width:240px;
    height:auto;
    margin:0 auto;
}

.framed-shot-hero{
    max-width:262px;
}

.hero-device-link:focus-visible .framed-shot-hero{
    outline:2px solid #20dcff;
    outline-offset:6px;
}

.mode-showcase .framed-shot{
    max-width:220px;
}

.iphone-frame{
    width:min(242px,100%);
    padding:7px;

    border:1px solid rgba(255,255,255,.34);
    border-radius:34px;

    background:#020713;

    box-shadow:
        0 22px 44px rgba(0,0,0,.42),
        0 0 36px rgba(32,220,255,.10);
}

.iphone-frame img{
    display:block;
    width:100%;
    height:auto;

    border-radius:27px;
}

.mode-showcase .mdf{
    margin:0;
}

.home-section-divider{
    width:min(620px,70%);
    height:1px;
    margin:36px auto 32px;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(32,220,255,.48),
            transparent
        );
}

.showcase-status-line{
    margin:-4px auto 28px;

    color:rgba(255,255,255,.70);

    font-family:Montserrat,Arial,sans-serif;
    font-size:12px;
    font-weight:700;

    text-transform:uppercase;
    letter-spacing:1.4px;
}

.sidekick-showcase{
    margin-top:42px;
}

.mode-showcase-grid{
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:20px;
}

.mode-showcase{
    margin:0;
    padding:14px 14px 16px;

    display:flex;
    flex-direction:column;
    align-items:center;

    color:white;
    text-decoration:none;

    border:1px solid rgba(255,255,255,.13);
    border-radius:22px;

    background:
        linear-gradient(
            180deg,
            rgba(4,41,91,.70),
            rgba(1,20,52,.86)
        );

    box-shadow:0 10px 26px rgba(0,0,0,.20);

    transition:
        transform .15s ease,
        border-color .15s ease,
        box-shadow .15s ease;
}

a.mode-showcase:hover,
a.mode-showcase:focus-visible{
    transform:translateY(-3px);
    border-color:#20dcff;

    box-shadow:0 14px 30px rgba(0,0,0,.30);
}

.mode-showcase h3{
    margin:14px 0 0;

    font-family:Montserrat,Arial,sans-serif;
    font-size:17px;
}

.download-strip{
    margin:42px 0;
    padding:16px 24px;

    border-top:1px solid rgba(255,255,255,.11);
    border-bottom:1px solid rgba(255,255,255,.11);

    background:rgba(0,15,39,.22);
}

.download-message{
    margin:0 0 6px;

    color:white;

    font-family:Montserrat,Arial,sans-serif;
    font-size:18px;
    font-weight:700;

    line-height:1.35;
}

.download-brand{
    margin:0 0 12px;

    color:#20dcff;

    font-size:14px;
    font-weight:700;

    letter-spacing:.4px;
}

.portfolio-section{
    scroll-margin-top:24px;
}

.portfolio-grid{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:22px;

    max-width:900px;
    margin:24px auto 0;
}

.portfolio-card{
    position:relative;

    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;

    min-height:260px;
    padding:34px 28px 28px;

    color:white;
    text-decoration:none;

    border:1px solid rgba(255,255,255,.12);
    border-radius:18px;

    background:rgba(1,20,52,.56);

    box-shadow:0 7px 18px rgba(0,0,0,.16);

    opacity:.88;

    transition:
        transform .15s ease,
        border-color .15s ease,
        opacity .15s ease,
        box-shadow .15s ease;
}

a.portfolio-card:hover,
a.portfolio-card:focus-visible{
    transform:translateY(-3px);
    border-color:#20dcff;
    opacity:1;

    box-shadow:0 12px 28px rgba(0,0,0,.28);
}

.portfolio-card img{
    display:block;
    width:100%;
    max-width:170px;
    height:auto;
}

.portfolio-status{
    justify-content:center;
    margin:22px 0 0;
}

.hero-product-link{
    display:inline-block;
    text-decoration:none;
}

.hero-product-link:focus-visible .hero-product-logo{
    outline:2px solid #20dcff;
    outline-offset:6px;
}

.hero-device-link{
    display:inline-block;
    text-decoration:none;
}

.site-footer{
    margin-top:42px;
    text-align:center;
}

.footer-line span:first-child{
    background:
        linear-gradient(
            90deg,
            transparent,
            #20dcff,
            #ffbf3f
        );
}

.footer-line span:last-child{
    background:
        linear-gradient(
            90deg,
            #ffbf3f,
            #20dcff,
            transparent
        );
}

/* =====================================================
   INTERIOR CONTENT PAGES
===================================================== */

.content-page,
.product-status-page{
    max-width:860px;
    margin:0 auto;
    text-align:left;
}

.content-hero,
.product-status-hero{
    margin:8px 0 36px;
    text-align:center;
}

.content-hero h1,
.product-status-hero h1{
    margin:0 0 18px;

    font-family:Montserrat,Arial,sans-serif;
    font-size:clamp(28px,4vw,40px);
    font-weight:700;

    letter-spacing:.4px;
}

.content-lead,
.product-positioning,
.product-status-note{
    margin:0 auto 22px;
    max-width:640px;

    color:rgba(255,255,255,.86);

    font-size:18px;
    line-height:1.55;
}

.content-section{
    margin:0 0 34px;
}

.content-section h2{
    margin:0 0 12px;

    font-family:Montserrat,Arial,sans-serif;
    font-size:18px;
    font-weight:700;

    text-transform:uppercase;
    letter-spacing:1.4px;
}

.content-section p{
    margin:0 0 14px;

    color:rgba(255,255,255,.84);

    font-size:17px;
    line-height:1.55;
}

.content-section ul{
    margin:0;
    padding-left:22px;

    color:rgba(255,255,255,.84);

    font-size:17px;
    line-height:1.7;
}

.app-family-tiles{
    display:grid;
    grid-template-columns:repeat(5,minmax(0,1fr));
    gap:14px;

    max-width:720px;
    margin:18px auto 0;
    padding:0;
    list-style:none;
}

.app-family-tiles a{
    display:flex;
    align-items:center;
    justify-content:center;

    aspect-ratio:1 / 1;
    min-height:0;
    padding:4px;

    color:white;
    text-decoration:none;
    text-align:center;

    border:1px solid rgba(255,255,255,.14);
    border-radius:16px;

    background:rgba(1,20,52,.45);

    transition:
        border-color .15s ease,
        background .15s ease,
        transform .15s ease;
}

.app-family-tiles a:hover,
.app-family-tiles a:focus-visible{
    border-color:#20dcff;
    background:rgba(1,20,52,.7);
    transform:translateY(-2px);
}

.app-family-tiles img{
    display:block;
    width:100%;
    height:auto;
    max-width:100%;
}

.contact-email-card{
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:10px;

    max-width:420px;
    margin:0 auto;
    padding:28px 24px;

    color:white;
    text-decoration:none;
    text-align:center;

    border:1px solid rgba(255,255,255,.14);
    border-radius:18px;

    background:rgba(1,20,52,.45);

    transition:
        border-color .15s ease,
        background .15s ease,
        transform .15s ease;
}

.contact-email-card + .content-section{
    margin-top:28px;
}

.contact-email-card:hover,
.contact-email-card:focus-visible{
    border-color:#20dcff;
    background:rgba(1,20,52,.7);
    transform:translateY(-2px);
}

.contact-email-label{
    font-family:Montserrat,Arial,sans-serif;
    font-size:12px;
    font-weight:700;

    text-transform:uppercase;
    letter-spacing:1.4px;

    color:rgba(255,255,255,.72);
}

.contact-email-address{
    color:#20dcff;

    font-size:17px;
    font-weight:700;

    word-break:break-word;
}

.contact-email-card:hover .contact-email-address,
.contact-email-card:focus-visible .contact-email-address{
    color:white;
}

.contact-social-note{
    margin:28px auto 0;
    max-width:520px;

    color:rgba(255,255,255,.78);

    font-size:15px;
    line-height:1.5;
    text-align:center;
}

.product-status-logo{
    display:block;
    width:min(240px,70vw);
    height:auto;
    margin:0 auto 20px;
}

.product-status-actions{
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    gap:14px 22px;

    margin-top:28px;
}

.product-status-page .store-cta{
    margin-top:8px;
}

.text-link{
    color:#20dcff;
    text-decoration:none;

    font-family:Montserrat,Arial,sans-serif;
    font-size:14px;
    font-weight:700;
}

.text-link:hover,
.text-link:focus-visible{
    color:white;
}

.page-cta-row{
    margin-top:28px;
    text-align:center;
}

/* =====================================================
   APP CARDS
===================================================== */

.daily-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:14px;
}

.app-card{
    position:relative;

    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:space-between;

    min-height:220px;
    padding:34px 14px 14px;

    color:white;
    text-decoration:none;

    border:
        2px solid rgba(0,185,255,.35);

    border-radius:18px;

    background:
        linear-gradient(
            180deg,
            rgba(4,41,91,.82),
            rgba(1,20,52,.92)
        );

    box-shadow:
        0 6px 16px rgba(0,0,0,.22);

    transition:
        transform .15s ease,
        border-color .15s ease,
        opacity .15s ease,
        box-shadow .15s ease;
}

.app-card:hover,
.app-card:focus-visible{
    transform:translateY(-3px);
    border-color:#20dcff;

    box-shadow:
        0 10px 24px rgba(0,0,0,.30);
}

.app-card img{
    display:block;

    width:100%;
    max-width:135px;
}

.app-card p{
    margin:10px 0 0;

    color:#20dcff;

    font-size:16px;
    font-weight:700;
}

/* STATUS BADGES */

.status-badge{
    position:absolute;
    top:10px;
    right:10px;

    padding:5px 9px;

    border-radius:999px;

    font-family:Montserrat,Arial,sans-serif;
    font-size:11px;
    font-weight:700;

    line-height:1;

    text-transform:uppercase;
    letter-spacing:.6px;
}

.status-available{
    color:#052a16;
    background:#38d66b;
}

.status-coming{
    color:#3a2100;
    background:#ffbf3f;
}

.status-roadmap{
    color:#102040;
    background:#b8c2cc;
}

.roadmap{
    opacity:.72;
}

.roadmap:hover,
.roadmap:focus-visible{
    opacity:.9;
}

/* BONUS FRENZY */

.support-grid{
    display:flex;
    justify-content:center;
}

.support-card{
    width:240px;
    min-height:210px;
}

/* =====================================================
   FOOTER
===================================================== */

footer{
    margin-top:52px;
}

.footer-line{
    margin-top:18px;
    margin-bottom:12px;
}

.footer-line h2{
    font-size:20px;
}

.instagram-line{
    margin:6px 0;
    font-size:15px;
}

.footer-legal{
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    align-items:center;
    gap:10px 0;

    margin:14px 0 0;
}

.footer-legal a{
    color:rgba(255,255,255,.78);
    text-decoration:none;

    font-family:Montserrat,Arial,sans-serif;
    font-size:13px;
    font-weight:700;

    letter-spacing:.4px;
}

.footer-legal a:not(:last-child)::after{
    content:"·";
    margin:0 14px;
    color:rgba(255,255,255,.40);
    font-weight:700;
}

.footer-legal a:hover,
.footer-legal a:focus-visible{
    color:#20dcff;
}

.brand-footer{
    margin:8px 0 0;

    opacity:.8;

    font-size:14px;
}

/* =====================================================
   TABLET
===================================================== */

@media(max-width:1000px){

    .site-header{
        padding-left:28px;
        padding-right:28px;
        gap:24px;
    }

    .horizontal-lockup-link{
        flex-basis:620px;
    }

    .site-nav{
        gap:18px;
        margin-bottom:10px;
    }

    .site-nav a{
        font-size:13px;
    }

    .flagship-hero{
        grid-template-columns:minmax(0,1fr) 248px;
        gap:24px;

        min-height:440px;
        padding:22px 38px;
    }

    .mode-showcase-grid{
        grid-template-columns:repeat(2,minmax(0,1fr));
        max-width:720px;
        margin:0 auto;
        gap:24px;
    }

}

@media(max-width:900px){

    .horizontal-lockup-link{
        flex-basis:520px;
    }

    .daily-grid{
        grid-template-columns:repeat(2,1fr);
        max-width:620px;
        margin:0 auto;
    }

    .hero-product-logo{
        width:min(270px,100%);
    }

    .hero-availability{
        width:min(270px,100%);
    }

    .portfolio-grid{
        max-width:720px;
    }

    .app-family-tiles{
        grid-template-columns:repeat(3,minmax(0,1fr));
        max-width:480px;
    }

}

/* =====================================================
   MOBILE
===================================================== */

@media(max-width:700px){

    .site-header{
        height:auto;
        min-height:0;

        padding:10px 16px 14px;

        flex-direction:column;
        align-items:center;
        gap:8px;
    }

    .horizontal-lockup-link{
        width:min(480px,90vw);
        flex-basis:auto;
    }

    .site-nav{
        align-self:center;
        justify-content:center;
        flex-wrap:wrap;

        gap:12px 20px;

        margin-bottom:0;
    }

    .site-nav a{
        font-size:13px;
    }

    .tagline-band{
        padding:12px 18px 6px;
    }

    .header-tagline{
        white-space:normal;
    }

    .tagline-main,
    .tagline-frenzy{
        font-size:19px;
    }

    .flagship-hero{
        grid-template-columns:1fr;
        gap:30px;

        min-height:0;
        padding:34px 24px;

        text-align:center;
    }

    .hero-copy{
        width:auto;
        max-width:none;
        justify-self:stretch;
    }

    .hero-product-logo{
        margin:0 auto;
    }

    .hero-availability{
        justify-content:center;
        margin-left:auto;
        margin-right:auto;
    }

    .hero-message{
        margin-left:auto;
        margin-right:auto;
    }

    .hero-headline{
        font-size:28px;
    }

    .hero-philosophy{
        font-size:19px;
    }

    .hero-closing{
        margin-left:auto;
        margin-right:auto;
    }

    .hero-actions{
        justify-content:center;
    }

    .framed-shot-hero{
        width:min(300px,76vw);
        max-width:300px;
    }

    .mdf--hero{
        width:min(286px,76vw);
    }

    .iphone-frame{
        width:min(286px,76vw);
    }

    .home-section-divider{
        margin-top:32px;
        margin-bottom:28px;
    }

    .portfolio-grid{
        grid-template-columns:1fr;
        max-width:360px;
    }

}

@media(max-width:560px){

    .page-shell{
        width:min(94vw,420px);
    }

    .section-title{
        gap:12px;
    }

    .section-title span{
        width:60px;
    }

    .daily-grid{
        grid-template-columns:1fr;
    }

    .mode-showcase-grid{
        grid-template-columns:1fr;
        max-width:340px;
        gap:24px;
    }

    .app-family-tiles{
        grid-template-columns:repeat(2,minmax(0,1fr));
        max-width:320px;
        gap:12px;
    }

    .download-strip{
        margin:34px 0;
        padding-left:18px;
        padding-right:18px;
    }

    .support-card{
        width:100%;
    }

}

@media(max-width:390px){

    .horizontal-lockup-link{
        width:min(340px,90vw);
    }

    .site-nav{
        gap:10px 14px;
    }

    .site-nav a{
        font-size:12px;
    }

    .tagline-main,
    .tagline-frenzy{
        font-size:17px;
    }

    .flagship-hero{
        padding:28px 18px;
        border-radius:22px;
    }

    .hero-message{
        font-size:16px;
    }

    .hero-headline{
        font-size:24px;
        line-height:1.22;
    }

    .hero-philosophy{
        font-size:18px;
        line-height:1.5;
    }

    .hero-closing{
        font-size:15px;
    }

    .hero-actions{
        flex-direction:column;
        gap:18px;
    }

    .store-cta{
        width:100%;
        max-width:290px;
    }

}