:root{
  --bg:#0B1020; --surface:rgba(255,255,255,.06); --surface-2:rgba(255,255,255,.08);
  --brand:#2E7AFF; --accent:#7CFFB2; --text:#E6EAF2; --muted:#9AA3B2; --border:rgba(255,255,255,.18);
  --shadow:0 10px 30px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.06);
}

*{box-sizing:border-box}
html,body{height:100%}
html{scroll-behavior:smooth}
body{
  margin:0; font-family:Inter,system-ui,Segoe UI,Roboto,Apple Color Emoji,Segoe UI Emoji,sans-serif;
  color:var(--text); background-color:var(--bg);
  background-image: radial-gradient(60% 40% at 50% 0%, rgba(46,122,255,.22), transparent 70%),
                    radial-gradient(50% 30% at 50% 80%, rgba(124,255,178,.14), transparent 70%);
  background-attachment: fixed;
  padding-top: env(safe-area-inset-top);
}
.no-scroll{overflow:hidden}

.container{width:min(1200px, 92vw); margin-inline:auto;}
.section{ padding:56px 0; scroll-margin-top: 84px; }
.section h2{ font-size: clamp(24px, 4vw, 36px); margin:0 0 14px; color:#EAF2FF }

/* Header */
.header{
  position:sticky; top:0; z-index:100;
  backdrop-filter:saturate(120%) blur(10px);
  background:linear-gradient(180deg, rgba(11,16,32,.90), rgba(11,16,32,.55));
  border-bottom:1px solid var(--border);
}
.header-inner{display:flex; align-items:center; gap:12px; padding:10px 0;}
.logo-wrap{display:flex; align-items:center; gap:10px;}
.logo-badge{ display:inline-flex; align-items:center; justify-content:center; padding:1px 2px; border-radius:4px; box-shadow:0 4px 20px rgba(0,0,0,.25); }
.logo-badge img{height:60px; width:auto; display:block}
.nav-desktop{display:flex; gap:10px; margin-left:auto}
.nav-desktop a{ text-decoration:none }

/* Hamburger */
.menu-btn{
  appearance:none; margin-left:auto; border:none;
  background:linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.04));
  border:1px solid var(--border); color:var(--text);
  padding:10px 12px; border-radius:12px; display:none;
}
.menu-btn span{display:block; width:22px; height:2px; background:var(--text); margin:4px 0; border-radius:2px}

/* Drawer */
.drawer{
  position:fixed; inset:0; z-index:90; display:none;
  background:rgba(0,0,0,.3);
}
.drawer.open{display:block}
.drawer-panel{
  position:absolute; top:0; right:0; width:min(84vw, 360px); height:100%;
  background:linear-gradient(180deg, rgba(11,16,32,1), rgba(11,16,32,.9));
  border-left:1px solid var(--border); box-shadow: -20px 0 60px rgba(0,0,0,.35);
  transform:translateX(100%); transition:transform .22s ease;
  backdrop-filter: blur(10px);
  padding:18px;
}
.drawer.open .drawer-panel{transform:translateX(0)}
.drawer a{display:block; padding:12px 10px; margin:6px 0; border-radius:12px; border:1px solid var(--border);
  text-decoration:none; color:var(--text); background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));}

/* Buttons */
.btn{
  appearance:none; border:1px solid var(--border); color:var(--text);
  background:linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.04));
  border-radius:14px; padding:12px 18px; font-weight:600; letter-spacing:.2px;
  box-shadow:var(--shadow); transition:transform .12s ease, box-shadow .2s ease, border-color .2s; text-decoration:none; display:inline-block;
}
.btn:hover{ transform:translateY(-1px); border-color:rgba(255,255,255,.35); }
.btn-primary{
  background:linear-gradient(180deg, rgba(46,122,255,.92), rgba(46,122,255,.72));
  border-color:rgba(46,122,255,.6);
  box-shadow:0 10px 30px rgba(46,122,255,.35), inset 0 1px 0 rgba(255,255,255,.15);
}
.btn-primary:hover{ box-shadow:0 14px 36px rgba(46,122,255,.45), inset 0 1px 0 rgba(255,255,255,.2); }

/* Hero */
.hero{ position:relative; padding:72px 0 36px; background:url('./assets/hero_aura_bg.png') center/cover no-repeat; border-bottom:1px solid var(--border); }
.hero h1{
  font-size: clamp(30px, 8vw, 58px); margin: 0 0 10px;
  background:linear-gradient(90deg, #7CFFB2 0%, #2E7AFF 60%, #9AC2FF 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  letter-spacing:.2px; line-height:1.07;
}
.hero p{color:var(--muted); font-size:clamp(15px,2.6vw,18px); margin:0 0 10px}

.hero-grid{ display:grid; grid-template-columns:1.2fr .9fr; gap:24px; align-items:start }
@media (max-width: 860px){
  .nav-desktop{display:none}
  .menu-btn{display:inline-flex}
  .hero-grid{ grid-template-columns:1fr; gap:16px }
}

/* Countdown */
.countdown{ margin-top:18px; display:grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap:10px }
.count-box{ text-align:center; padding:14px; border-radius:16px; background:var(--surface); border:1px solid var(--border); box-shadow:var(--shadow); }
.count-box .num{ font-size: clamp(24px, 7vw, 42px); font-weight:800; letter-spacing:.5px; color:#EAF4FF; }
.count-box .label{color:var(--muted); font-size:11px; text-transform:uppercase; letter-spacing:1px; margin-top:4px}

@media (max-width: 540px){
  .countdown{ grid-template-columns: repeat(2, minmax(0,1fr)); }
  .count-box{ padding:14px }
  .hero{ padding-top:58px; }
}

/* KPI chips */
.kpis{ display:grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap:10px; margin-top:12px }
.kpi{ padding:10px 12px; border-radius:14px; border:1px solid var(--border); background:var(--surface); box-shadow:var(--shadow); text-align:center; color:#DCE6FF; }
.kpi small{color:var(--muted); display:block}
@media (max-width: 540px){ .kpis{ grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 360px){ .kpis{ grid-template-columns: 1fr; } }

/* Cards */
.card{
  padding:18px; border-radius:18px; border:1px solid var(--border);
  background: var(--surface);
  box-shadow: var(--shadow);
  position:relative; overflow:hidden;
}
.card::before{
  content:""; position:absolute; inset:-1px; border-radius:inherit; pointer-events:none;
  background: radial-gradient(80% 60% at 30% 0%, rgba(46,122,255,.25), transparent 60%);
  mix-blend-mode: screen; opacity:.6;
}
.card .title{ font-weight:700; font-size:18px; margin-bottom:6px; color:#EAF2FF }
.card p{ color:#9AA3B2; line-height:1.6 }

.highlight{ background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.04)); border:1px solid rgba(124,255,178,.35); box-shadow: 0 10px 30px rgba(124,255,178,.20), inset 0 1px 0 rgba(255,255,255,.08); }

/* Posts grid */
.post-grid{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px }
.post{ overflow:hidden; border-radius:16px; border:1px solid var(--border); background:var(--surface) }
.post img{ width:100%; height:auto; display:block }
@media (max-width: 540px){ .post-grid{ grid-template-columns:1fr } }

/* Footer */
.footer{ padding:22px 0; color:#CBD6E8; border-top:1px solid var(--border); background:linear-gradient(180deg, rgba(11,16,32,.4), rgba(11,16,32,.8)); }
.footer a{ color:#9AC2FF; text-decoration:none } .footer a:hover{ text-decoration:underline }
.help{ color:#9AC2FF; font-size:13px; opacity:.9 }
.help code{ padding:2px 6px; border-radius:6px; background:rgba(255,255,255,.06); border:1px solid var(--border) }
.small{ font-size:13px; color:#9AA3B2 }