:root{
    --bg:#0b0b12;             /* deep space */
    --card:#121224;           /* panel */
    --txt:#e8e8ff;            /* soft white */
    --muted:#b6b6d6;          /* secondary text */
    --acc:#8a5cff;            /* galaxy violet */
    --acc2:#ff3565;           /* power pink/red */
    --ring:rgba(138,92,255,.35);
    --radius:18px;
    --shadow:0 10px 30px rgba(0,0,0,.45);
}

/* Base reset */
*,*::before,*::after{box-sizing:border-box}
html,body{height:100%}
body{
    margin:0;
    color:var(--txt);
    background:
            radial-gradient(1200px 700px at 10% -10%, rgba(138,92,255,.25), transparent 60%),
            radial-gradient(900px 600px at 110% 10%, rgba(255,53,101,.18), transparent 55%),
            var(--bg);
    font-family: system-ui, -apple-system, Segoe UI, Roboto, Inter, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji","Segoe UI Emoji", "Segoe UI Symbol";
    line-height:1.55;
    overflow-x:hidden;
}

/* Subtle animated stars */
.stars, .stars::after{
    position:fixed; inset:0; content:""; pointer-events:none; z-index:0;
    background-image:
            radial-gradient(2px 2px at 20% 30%, rgba(255,255,255,.9), transparent 60%),
            radial-gradient(1.5px 1.5px at 70% 60%, rgba(255,255,255,.7), transparent 60%),
            radial-gradient(1.2px 1.2px at 40% 80%, rgba(255,255,255,.6), transparent 60%),
            radial-gradient(1px 1px at 85% 25%, rgba(255,255,255,.65), transparent 60%),
            radial-gradient(1px 1px at 10% 75%, rgba(255,255,255,.55), transparent 60%);
    opacity:.35;
    animation: twinkle 9s linear infinite;
}
.stars::after{ animation-duration: 13s; opacity:.25; filter:blur(.3px); }
@keyframes twinkle { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-10px)} }

/* Container */
.wrap{max-width:1200px; margin:0 auto; padding:0 20px; position:relative; z-index:1}

/* Navbar */
.nav{
    position:sticky; top:0; z-index:10;
    backdrop-filter: blur(8px);
    background: linear-gradient(180deg, rgba(18,18,36,.85), rgba(18,18,36,.55));
    border-bottom:1px solid rgba(255,255,255,.06);
}
.nav-inner{display:flex; align-items:center; justify-content:space-between; gap:16px; padding:14px 0}
.brand{
    display:flex; align-items:center; gap:10px; text-decoration:none; color:var(--txt); font-weight:700; letter-spacing:.3px;
}
.brand .logo{
    width:34px; height:34px; border-radius:12px;
    background:
            conic-gradient(from 210deg at 50% 50%, var(--acc), var(--acc2), var(--acc));
    box-shadow: 0 0 0 3px rgba(255,255,255,.06), 0 6px 20px rgba(138,92,255,.35);
}
.brand .title{
    display:flex; flex-direction:column; line-height:1.1;
}
.brand .title small{
    color:var(--muted); font-weight:600; font-size:.72rem; letter-spacing:.6px; text-transform:uppercase;
}
.brand .title span{
    background: linear-gradient(90deg, #fff, #b9a9ff, #ff9fba);
    -webkit-background-clip:text; background-clip:text; color:transparent;
    font-size:1.05rem;
}
.menu{display:flex; align-items:center; gap:4px}
.menu a{
    color:var(--txt); text-decoration:none; font-weight:600; padding:10px 12px; border-radius:12px;
    border:1px solid transparent;
}
.menu a:hover{ border-color: rgba(255,255,255,.08); background:rgba(255,255,255,.04) }

.spacer{flex:1}

.login-btn{
    appearance:none; border:none; cursor:pointer; font-weight:700;
    padding:10px 14px; border-radius:14px; color:white;
    background: linear-gradient(90deg, var(--acc), var(--acc2));
    box-shadow: 0 8px 18px rgba(255,53,101,.25), inset 0 0 0 1px rgba(255,255,255,.08);
    text-decoration:none; display:inline-flex; align-items:center; gap:10px;
}
.login-btn:focus{ outline: 3px solid var(--ring); outline-offset:2px }

/* Mobile nav */
.burger{
    display:none; width:40px; height:40px; border-radius:12px;
    border:1px solid rgba(255,255,255,.12); background:rgba(255,255,255,.02); color:var(--txt);
    align-items:center; justify-content:center; cursor:pointer;
}
@media (max-width: 900px){
    .menu{ display:none; position:absolute; left:20px; right:20px; top:64px; padding:10px; flex-direction:column; background:rgba(18,18,36,.98); border:1px solid rgba(255,255,255,.08); border-radius:16px; box-shadow: var(--shadow) }
    .menu.show{ display:flex }
    .burger{ display:flex }
    .spacer{ display:none }
}

/* Sections */
section{ padding:72px 0 }
.hero{
    padding:90px 0 70px;
    display:grid; grid-template-columns:1.15fr .85fr; gap:24px; align-items:center;
}
.hero h1{
    margin:0 0 12px; font-size:clamp(1.7rem, 2.8vw, 3rem);
    line-height:1.05; letter-spacing:.2px;
    background: linear-gradient(90deg, #ffffff, #d4ccff 35%, #ffa6bc 80%);
    -webkit-background-clip:text; background-clip:text; color:transparent;
}
.kicker{color:var(--muted); font-weight:700; text-transform:uppercase; letter-spacing:.12em; font-size:.8rem; margin-bottom:10px}
.lead{color:#f1f1ff; font-size:1.05rem; margin:0 0 24px}
.cta-row{display:flex; gap:12px; flex-wrap:wrap}
.btn{
    display:inline-flex; align-items:center; gap:10px; text-decoration:none; font-weight:700;
    padding:12px 14px; border-radius:14px; border:1px solid rgba(255,255,255,.12); color:var(--txt);
    background:rgba(255,255,255,.03);
}
.btn.primary{ background:linear-gradient(90deg, var(--acc), var(--acc2)); color:#fff; border-color:transparent }
.card{
    background:var(--card); border:1px solid rgba(255,255,255,.08); border-radius:var(--radius); box-shadow: var(--shadow);
}
.panel{ padding:16px; }
.embed{ aspect-ratio:16/9; width:100%; border:0; border-radius:14px; overflow:hidden }
.hero .visual{ display:grid; gap:12px }
.badge{
    display:inline-flex; align-items:center; gap:8px; padding:8px 12px; border-radius:999px;
    background:rgba(138,92,255,.12); border:1px solid rgba(138,92,255,.35); color:#e9e3ff; font-weight:700; font-size:.85rem;
}

.grid{ display:grid; gap:16px }
.grid.cols-3{ grid-template-columns: repeat(3, 1fr) }
.grid.cols-2{ grid-template-columns: repeat(2, 1fr) }
@media (max-width: 900px){ .hero{grid-template-columns:1fr} .grid.cols-3{grid-template-columns:1fr} .grid.cols-2{grid-template-columns:1fr} }

.h2{font-size:1.6rem; margin:0 0 8px}
.sub{color:var(--muted); margin:0 0 18px}

.list{ display:grid; gap:10px }
.row{ display:flex; align-items:center; justify-content:space-between; gap:10px; padding:12px; border-radius:12px; background:rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.06) }
.row b{ font-size:.98rem }
.row span{ color:var(--muted) }

footer{ padding:40px 0 70px; color:var(--muted); text-align:center; font-size:.95rem }
a.inline{ color:#cbbdff }