/* Smooth accordion (open & close), mobile-friendly touch, theme transitions */
:root{
  --bg:#0c0f14;
  --text:#e7ecf3;
  --muted:#a6adbb;
  --line:#ffffff14;
  --accent:#2B6FFF;
  --accent2:#00C2A8;
  --ring:#1f6feb55;
  --panel:#12161de6;
  --panel2:#0f141bd9;
  --shadow:0 12px 40px rgba(0,0,0,.35);
  --radius:18px;
  --ease: cubic-bezier(.22,.61,.36,1);
  --t-fast: 150ms;
  --t-base: 260ms;
  --t-slow: 420ms;
}
[data-theme="light"]{
  --bg:#f4f6fb;
  --text:#0c0f14;
  --muted:#475167;
  --line:#00000014;
  --panel:#ffffffd9;
  --panel2:#ffffffc7;
  --shadow:0 12px 40px rgba(0,0,0,.12);
}
@media (prefers-color-scheme: light){
  [data-theme="auto"]{
    --bg:#f4f6fb;
    --text:#0c0f14;
    --muted:#475167;
    --line:#00000014;
    --panel:#ffffffd9;
    --panel2:#ffffffc7;
    --shadow:0 12px 40px rgba(0,0,0,.12);
  }
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{height:100%}
body{
  margin:0; display:flex; flex-direction:column; min-height:100vh;
  font-family:Inter, system-ui, -apple-system, "Segoe UI", Roboto, Arial;
  color:var(--text);
  background:
    radial-gradient(1000px 600px at 10% 0%, #1a224022 0%, transparent 60%),
    radial-gradient(900px 500px at 92% 6%, #10332a22 0%, transparent 60%),
    var(--bg);
  overflow-x:hidden; position:relative; z-index:0;
  transition: background-color var(--t-slow) var(--ease), color var(--t-slow) var(--ease);
}
a{color:inherit;text-decoration:none}
.wrap{max-width:980px;margin:0 auto;padding:0 16px}
.hdr-wrap{gap:12px}

/* Ambient layers */
.bg{position:fixed;inset:-10%;opacity:.38;pointer-events:none;z-index:-1;transition:opacity var(--t-base) var(--ease)}
.fx1{background:radial-gradient(700px 460px at 12% 10%, #1b2a5944 0%, transparent 60%)}
.fx2{background:radial-gradient(700px 460px at 92% 6%, #0d3a3044 0%, transparent 60%)}
.grain{position:fixed;inset:-10%;opacity:.16;mix-blend-mode:soft-light;pointer-events:none;z-index:-1;
  background-image:url('data:image/svg+xml;utf8,<svg xmlns=%22http://www.w3.org/2000/svg%22 width=%22100%22 height=%22100%22><filter id=%22n%22><feTurbulence type=%22fractalNoise%22 baseFrequency=%220.8%22 numOctaves=%222%22/></filter><rect width=%22100%25%22 height=%22100%25%22 filter=%22url(%23n)%22 opacity=%220.07%22/></svg>')}

/* Header */
.hdr{position:sticky;top:0;z-index:10;border-bottom:1px solid var(--line);
  background:linear-gradient(180deg, color-mix(in srgb, var(--bg) 90%, white 10%), color-mix(in srgb, var(--bg) 70%, transparent 30%));
  padding-top:env(safe-area-inset-top);
  transition: background-color var(--t-base) var(--ease), border-color var(--t-base) var(--ease);
}
.hdr .wrap{min-height:64px;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:10px;font-weight:800}
.logo{width:28px;height:28px}
.hdr-actions{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.link{opacity:.9;transition:opacity var(--t-fast) var(--ease)}
.link:hover{opacity:1}

/* Buttons */
.btn{background:linear-gradient(135deg, var(--accent), var(--accent2));border:none;border-radius:12px;padding:10px 14px;color:#fff;font-weight:800;cursor:pointer;box-shadow:var(--shadow);display:inline-block;min-height:40px;touch-action:manipulation;transition:transform var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease), background-color var(--t-fast) var(--ease)}
.btn:active{transform:translateY(1px)}
.btn.ghost{background:transparent;border:1px solid var(--line);color:var(--text)}
.btn.outline{background:transparent;border:1px solid #557bff;color:var(--text)}
.btn.xl{padding:14px 18px;border-radius:14px}
.btn.block{display:block;width:100%}

/* Main */
.main{display:grid;gap:16px;margin:24px auto 40px; position:relative; z-index:1; flex:1 0 auto}
.tile{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:22px;box-shadow:var(--shadow);transition:background-color var(--t-base) var(--ease), border-color var(--t-base) var(--ease)}
.hero h1{font-size:clamp(26px, 6vw, 48px);margin:0 0 6px}
.hero .accent{background:linear-gradient(90deg,var(--accent),var(--accent2));-webkit-background-clip:text;background-clip:text;color:transparent}
.sub{color:var(--muted);margin:8px 0 16px;transition:color var(--t-base) var(--ease)}

/* Countdown */
.countdown{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin:6px 0 14px}
.cd-box{background:var(--panel2);border:1px solid var(--line);border-radius:14px;padding:12px;text-align:center;transition:background-color var(--t-base) var(--ease), border-color var(--t-base) var(--ease)}
.cd-box span{display:block;font-size:clamp(20px,5.5vw,36px);font-weight:800}
.cd-box label{font-size:12px;color:var(--muted)}

/* CTA */
.cta-row{display:grid;grid-template-columns:repeat(2, minmax(0,1fr));gap:10px}
@media (max-width:520px){
  .cta-row{grid-template-columns:1fr}
}

/* Status */
.status{display:grid;gap:10px;margin-top:16px}
.status .dot{display:inline-block;width:10px;height:10px;border-radius:999px;background:var(--accent2);margin-right:6px;box-shadow:0 0 0 6px #00c2a833;transition:box-shadow var(--t-base) var(--ease), background-color var(--t-base) var(--ease)}
.status .sep{opacity:.6;margin:0 8px}
.progress{border-radius:12px;overflow:hidden;background:color-mix(in srgb, var(--bg) 88%, white 12%);border:1px solid #2b3444;height:16px;display:flex;align-items:center;transition:background-color var(--t-base) var(--ease), border-color var(--t-base) var(--ease)}
.bar{height:100%;width:var(--val);background:linear-gradient(90deg,var(--accent),var(--accent2));display:flex;align-items:center;justify-content:flex-end;padding-right:8px;font-size:12px;color:#fff;transition:width var(--t-base) var(--ease)}

/* Updates dropdown — smooth, JS-driven height */
.updates{position:relative; z-index:2}
.updates .drop{
  display:flex;align-items:center;justify-content:space-between;width:100%;
  background:transparent;border:1px solid #344055;border-radius:12px;padding:16px;
  color:var(--text);cursor:pointer;min-height:48px;touch-action:manipulation;
  -webkit-user-select:none; user-select:none;
  transition:border-color var(--t-base) var(--ease), background-color var(--t-base) var(--ease), color var(--t-base) var(--ease);
}
.updates .drop:focus-visible{outline: none; box-shadow:0 0 0 6px var(--ring)}
.updates .chev{transition:transform var(--t-base) var(--ease)}
.updates.open .chev{transform:rotate(180deg)}

/* The panel itself */
.drop-body{
  overflow:hidden;
  height:0;
  transition:height var(--t-slow) var(--ease);
}
/* When open ends, JS sets height:auto. No CSS rule here to avoid jumps. */

.updates ul{margin:8px 0 0 18px;color:var(--muted)}

/* Social */
.social .row{display:grid;grid-template-columns:repeat(2, minmax(0,1fr));gap:8px}
@media (max-width:480px){
  .social .row{grid-template-columns:1fr}
}
.sbtn{border:1px solid #2f3a4f;border-radius:12px;padding:12px 16px;background:var(--panel2);text-align:center;min-height:44px;transition:background-color var(--t-base) var(--ease), border-color var(--t-base) var(--ease)}

/* Footer */
.ftr{border-top:1px solid var(--line);background:color-mix(in srgb, var(--bg) 92%, white 8%); margin-top:auto;transition:background-color var(--t-base) var(--ease), border-color var(--t-base) var(--ease)}
.ftr .wrap{min-height:56px;display:flex;align-items:center;justify-content:space-between;color:var(--muted);flex-wrap:wrap;gap:8px}

/* Responsive */
@media (max-width:1024px){
  .wrap{max-width:820px}
}
@media (max-width:768px){
  .wrap{max-width:680px}
  .tile{padding:18px}
  :root{--radius:16px}
}
@media (max-width:520px){
  .wrap{max-width:100%}
  .tile{padding:16px;border-radius:14px}
  .hdr .wrap{padding-top:8px;padding-bottom:8px}
  .countdown{grid-template-columns:repeat(2,1fr)}
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  *{animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important; scroll-behavior:auto !important}
}