:root{
     --bg:#0b0c10;
     --panel:#12141a;
     --text:#e7e9ee;
     --muted:#a6adbb;
     --brand:#6a64cc;
    /* primary */
     --brand-2:#3e2fa3;
    /* secondary */
     --outline:2px solid rgb(106 100 204 / 50%);
     --maxw:2160px;
     --radius:16px;
     --shadow:0 10px 30px rgba(0,0,0,.25);
     --iframe-min-h:clamp(560px,85vh,1200px) 
}

 *{
    box-sizing:border-box
}
 html,body{
    height:100%
}
 body{
     margin:0;
     font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,"Apple Color Emoji","Segoe UI Emoji";
     color:var(--text);
     background-color:var(--bg);
     min-height:100dvh;
     display:grid;
     grid-template-rows:auto 1fr auto 
}
/* Utilities */
 .container{
    width:min(100% - 2rem,var(--maxw));
    margin-inline:auto
}
 .visually-hidden{
    position:absolute;
    width:1px;
    height:1px;
    padding:0;
    margin:-1px;
    overflow:hidden;
    clip:rect(0,0,0,0);
    white-space:nowrap;
    border:0
}
 .card{
    background:var(--panel);
    border-radius:var(--radius);
    box-shadow:var(--shadow);
    border:1px solid rgba(255,255,255,.06)
}
/* Header / Nav */
 header{
    position:sticky;
    top:0;
    z-index:50;
    backdrop-filter:saturate(1.1) blur(10px);
    background:color-mix(in hsl,var(--panel) 85%,transparent);
    border-bottom:1px solid rgba(255,255,255,.08)
}
 .nav{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:.75rem;
    padding:.75rem 0
}
 .brand{
     display:flex;
     align-items:center;
     gap:.5rem;
    text-decoration:none;
    color:inherit;
    font-weight:700 
}
 .brand .logo{
     display:block;
     width:32px;
     height:32px;
     object-fit:contain;
}
 .links{
    display:flex;
    gap:1rem;
    align-items:center
}
 .links a{
    color:var(--text);
    text-decoration:none;
    opacity:.9
}
 .links a:hover,.links a:focus-visible{
    opacity:1;
    text-decoration:underline;
    text-underline-offset:3px
}
 .nav-cta{
    display:inline-flex;
    align-items:center;
    gap:.5rem;
    padding:.55rem .9rem;
    border-radius:999px;
    background:var(--brand);
    color:#fff;
    border:none;
    font-weight:600;
    text-decoration:none;
    box-shadow:var(--shadow)
}
 .menu-btn{
    display:none;
    appearance:none;
    border:none;
    background:transparent;
    color:inherit;
    padding:.5rem;
    border-radius:10px
}
 .menu-btn:focus-visible{
    outline:var(--outline)
}
 @media(max-width:840px){
     .menu-btn{
        display:inline-flex
    }
     .links{
        display:none
    }
     body.nav-open .links{
        display:flex;
        position:absolute;
        left:0;
        right:0;
        top:60px;
        padding:.75rem;
        flex-direction:column;
        background:var(--panel);
        border-bottom:1px solid rgba(255,255,255,.1)
    }
}
/* Main */
 main{
    padding:2rem 0 3rem
}
 .hero{
    display:grid;
    gap:1rem;
    padding:1.25rem;
    align-items:center;
    text-align:center
}
 .hero h1{
    margin:0;
    font-size:clamp(1.6rem,3vw + 1rem,2.6rem);
    letter-spacing:-.02em
}
 .hero p{
    margin:0;
    color:var(--muted);
    font-size:clamp(.95rem,.6vw + .7rem,1.05rem)
}
/* Footer */
footer {
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    background: color-mix(in hsl, var(--panel) 90%, transparent);
}

.foot {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.75rem;
    padding: 1.25rem 0;
}

.foot small {
    color: var(--muted);
}

.foot-links {
    display: flex;
    gap: 0.75rem;
    flex-wrap: nowrap;
}

.foot a {
    color: inherit;
    text-decoration: none;
    opacity: 0.85;
}

.foot a:hover,
.foot a:focus-visible {
    opacity: 1;
    text-decoration: underline;
    text-underline-offset: 3px;
}

 @media(prefers-reduced-motion:reduce){
    *{
        transition:none!important;
        animation:none!important
    }
}