*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
    --card:rgba(74,59,105,.88);
    --title-pill:rgba(107,91,149,.60);
    --text:#fff;
    --text-secondary:rgba(255,255,255,.80);
    --text-muted:rgba(255,255,255,.55);
    --radius-card:24px;
    --radius-pill:999px;
    --btn-height:56px;
    --btn-radius:28px;
}
html{scroll-behavior:smooth}
body{
    font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
    background:#000;
    color:var(--text);
    line-height:1.5;
    -webkit-font-smoothing:antialiased;
    min-height:100svh;
}

/* ========================
   Landing
   ======================== */
.landing{
    min-height:100svh;
    min-height:100vh;
    position:relative;
    overflow:hidden;
    display:flex;
    align-items:center;
    justify-content:flex-start;
    padding:clamp(24px,5vw,80px);
    /* Static fallback, shown before playback and under reduced motion */
    background:url("assets/landing-poster.jpg") center 35% / cover no-repeat;
}

/* Animated background video */
.landing__video{
    position:absolute;inset:0;
    width:100%;height:100%;
    object-fit:cover;
    object-position:center 35%;
}

/* Single consolidated scrim for readability */
.landing__scrim{
    position:absolute;inset:0;
    z-index:1;
    pointer-events:none;
    background:
        linear-gradient(90deg,rgba(27,25,52,.80) 0%,rgba(27,25,52,.60) 40%,transparent 70%),
        linear-gradient(180deg,rgba(27,25,52,.35) 0%,transparent 25%),
        linear-gradient(0deg,rgba(27,25,52,.40) 0%,transparent 25%);
}

/* ========================
   Card
   ======================== */
.landing__card{
    position:relative;z-index:2;
    width:100%;
    max-width:480px;
    background:var(--card);
    border:1px solid rgba(255,255,255,.10);
    border-radius:var(--radius-card);
    padding:clamp(24px,4vw,40px);
    display:flex;
    flex-direction:column;
    align-items:center;
    text-align:center;
    gap:20px;
}

/* Brand pill */
.brand-pill{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:200px;
    height:50px;
    border-radius:var(--radius-pill);
    background:var(--title-pill);
    font-size:28px;
    font-weight:700;
    letter-spacing:-.01em;
}

/* Headline */
.landing__card h1{
    font-size:clamp(1.4rem,4vw,1.9rem);
    font-weight:600;
    line-height:1.35;
    max-width:400px;
}

/* Tagline */
.tagline{
    font-size:16px;
    color:var(--text-secondary);
    max-width:360px;
    line-height:1.5;
}

/* Store actions */
.store-actions{
    display:flex;
    flex-direction:column;
    gap:12px;
    width:100%;
    margin-top:4px;
}
.store-btn{
    display:inline-flex;
    align-items:center;
    gap:12px;
    width:100%;
    height:var(--btn-height);
    padding:0 20px;
    border-radius:var(--btn-radius);
    font-size:16px;
    font-weight:600;
    text-decoration:none;
    transition:all .2s ease;
}
.store-btn--soon{
    background:rgba(90,74,121,.50);
    border:1px solid rgba(255,255,255,.10);
    color:var(--text);
    cursor:default;
    opacity:.6;
}
.store-btn-icon{flex-shrink:0;opacity:.7}
.store-btn span{display:flex;flex-direction:column;line-height:1.25;text-align:left}
.store-btn small{
    font-size:12px;
    font-weight:400;
    color:var(--text-muted);
}

/* Legal nav */
.legal-nav{
    display:flex;
    gap:20px;
    margin-top:4px;
}
.legal-nav a{
    font-size:14px;
    color:var(--text-muted);
    text-decoration:none;
    transition:color .2s;
}
.legal-nav a:hover{color:var(--text)}

/* ========================
   Footer
   ======================== */
.footer{
    padding:32px 0;
    border-top:1px solid rgba(255,255,255,.10);
    margin-top:40px;
}
.footer-inner{
    max-width:960px;
    margin:0 auto;
    padding:0 20px;
    display:flex;
    justify-content:space-between;
    align-items:center;
    flex-wrap:wrap;
    gap:16px;
}
.footer-brand{display:flex;flex-direction:column;gap:4px}
.footer-brand strong{font-size:1.1rem}
.footer-copy{font-size:.85rem;color:var(--text-muted)}
.footer-links{display:flex;gap:20px}
.footer-links a{
    color:var(--text-muted);
    text-decoration:none;
    font-size:.9rem;
    transition:color .2s;
}
.footer-links a:hover{color:var(--text)}

/* ========================
   Powered by attribution
   ======================== */
.powered-by{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:10px;
    color:var(--text-muted);
    font-size:12px;
}
.powered-by a{
    display:inline-flex;
    align-items:center;
    border-radius:6px;
    transition:opacity .2s;
}
.powered-by a:hover{opacity:.85}
.powered-by img{
    width:20px;
    height:20px;
    max-width:20px;
    max-height:20px;
    display:block;
}
.powered-by a:focus-visible{
    outline:2px solid var(--text);
    outline-offset:4px;
}

/* Landing page: pin attribution to the bottom center */
.landing > .powered-by{
    position:absolute;
    left:50%;
    bottom:clamp(16px,3vh,32px);
    transform:translateX(-50%);
    z-index:2;
}

/* Legal pages: place attribution under the footer navigation */
.footer > .powered-by{
    margin-top:24px;
    padding:0 20px;
}

/* ========================
   Legal pages
   ======================== */
body.legal-page{
    background:linear-gradient(180deg,#1b1934 0%,#29233f 100%);
    min-height:100svh;
    min-height:100vh;
}
.legal{
    max-width:800px;
    margin:0 auto;
    padding:clamp(32px,6vw,80px) clamp(16px,4vw,40px);
}
.legal h1{
    font-size:clamp(1.8rem,4vw,2.2rem);
    margin-bottom:8px;
    font-weight:700;
}
.legal-updated{color:var(--text-muted);font-size:.9rem;margin-bottom:40px}
.legal h2{
    font-size:1.15rem;
    margin:28px 0 10px;
    color:var(--text);
    font-weight:600;
}
.legal p,.legal ul{color:var(--text-secondary);margin-bottom:14px;line-height:1.7}
.legal ul{padding-left:20px}
.legal li{margin-bottom:6px}
.legal a{color:var(--text)}
.legal a:hover{text-decoration:underline}
.legal nav{
    margin-bottom:36px;
    padding-bottom:16px;
    border-bottom:1px solid rgba(255,255,255,.10);
    display:flex;
    gap:20px;
}
.legal nav a{color:var(--text-muted);text-decoration:none;font-size:.9rem}
.legal nav a:hover{color:var(--text)}

/* ========================
   404
   ======================== */
.page-404{
    min-height:100svh;
    min-height:100vh;
    position:relative;
    overflow:hidden;
    display:flex;
    align-items:center;
    justify-content:center;
    text-align:center;
    padding:24px;
    background:url("assets/landing-poster.jpg") center 35% / cover no-repeat;
}
.page-404::before{
    content:"";
    position:absolute;inset:0;
    z-index:1;
    background:rgba(27,25,52,.70);
}
.page-404 .inner{position:relative;z-index:2}
.page-404 h1{font-size:clamp(2.5rem,8vw,4rem);margin-bottom:12px;font-weight:700}
.page-404 p{color:var(--text-secondary);font-size:1.1rem;margin-bottom:28px}
.page-404 a{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    height:var(--btn-height);
    padding:0 28px;
    border-radius:var(--btn-radius);
    background:rgba(90,74,121,.50);
    border:1px solid rgba(255,255,255,.10);
    color:var(--text);
    text-decoration:none;
    font-weight:600;
    font-size:16px;
    transition:all .2s;
}
.page-404 a:hover{
    background:rgba(123,107,158,.60);
    border-color:rgba(255,255,255,.20);
}

/* ========================
   Responsive
   ======================== */
@media(max-width:640px){
    .landing{
        justify-content:center;
        align-items:flex-start;
        padding-top:16vh;
        padding-bottom:96px;
        background-position:70% center;
    }
    .landing__video{
        object-position:70% center;
    }
    .landing__card{max-width:100%}
}
/* Short viewports: keep the card clear of the bottom attribution */
@media(max-height:560px){
    .landing{
        align-items:flex-start;
        padding-top:24px;
        padding-bottom:96px;
    }
}
@media(min-width:641px) and (max-width:1024px){
    .landing{padding:clamp(32px,5vw,60px)}
}

/* ========================
   Accessibility
   ======================== */
@media(prefers-reduced-motion:reduce){
    .landing__video{
        display:none;
    }
    *{transition:none!important}
}