:root{
  --bg:#000005;
  --fg:#f5f5f7;
  --muted:#86868b;
  --accent:#2bd4ff;      /* electric cyan — the ESD spark */
  --accent2:#6e7bff;
  --hair:rgba(255,255,255,.10);
  --font:-apple-system,BlinkMacSystemFont,"SF Pro Display","Segoe UI",Inter,Roboto,Helvetica,Arial,sans-serif;
}
*{margin:0;padding:0;box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  font-family:var(--font);
  background:var(--bg);
  color:var(--fg);
  min-height:100svh;
  display:flex;flex-direction:column;
  overflow-x:hidden;
  letter-spacing:-.01em;
  -webkit-font-smoothing:antialiased;
  position:relative;
}

/* ── ambient layers ── */
.glow{
  position:fixed;inset:0;z-index:-2;pointer-events:none;
  background:
    radial-gradient(60% 50% at 50% 18%, rgba(43,212,255,.16), transparent 70%),
    radial-gradient(50% 50% at 80% 90%, rgba(110,123,255,.14), transparent 70%),
    radial-gradient(40% 40% at 15% 80%, rgba(43,212,255,.08), transparent 70%);
  animation:breathe 12s ease-in-out infinite;
}
@keyframes breathe{0%,100%{opacity:.85}50%{opacity:1}}
.grain{
  position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:.035;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
#field{position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:.55}

/* ── top bar ── */
.topbar{
  display:flex;justify-content:space-between;align-items:center;
  padding:26px clamp(20px,5vw,60px);
}
.mark{font-size:23px;font-weight:600;letter-spacing:-.02em}
.mark .in{color:var(--accent)}
.logo-chip{display:inline-flex;align-items:center;background:#fff;border-radius:11px;padding:8px 13px;box-shadow:0 2px 18px rgba(0,0,0,.28)}
.logo-chip img{height:28px;width:auto;display:block}
.locale{font-size:13px;color:var(--muted);font-weight:500}

/* ── stage ── */
.stage{
  flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;padding:min(8vh,80px) clamp(20px,5vw,60px) 40px;gap:clamp(20px,3.5vh,38px);
}
.eyebrow{
  font-size:clamp(11px,2.6vw,13px);font-weight:600;letter-spacing:.16em;text-transform:uppercase;
  color:var(--accent);
}
.headline{
  font-size:clamp(34px,7vw,72px);font-weight:600;line-height:1.04;letter-spacing:-.03em;
  max-width:14ch;
}
.headline .muted{color:var(--muted)}

/* ── countdown ── */
.countdown{
  display:flex;align-items:flex-start;gap:clamp(6px,1.8vw,22px);
  padding:clamp(18px,3vh,30px) clamp(18px,4vw,44px);
  border:1px solid var(--hair);border-radius:24px;
  background:linear-gradient(180deg,rgba(255,255,255,.04),rgba(255,255,255,.015));
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
}
.unit{display:flex;flex-direction:column;align-items:center;gap:8px;min-width:clamp(58px,15vw,104px)}
.num{
  font-size:clamp(40px,11vw,88px);font-weight:600;line-height:1;
  font-variant-numeric:tabular-nums;font-feature-settings:"tnum";
  letter-spacing:-.04em;
  background:linear-gradient(180deg,#fff,#b9c6cc);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.lab{font-size:clamp(9px,2.2vw,12px);font-weight:600;letter-spacing:.13em;text-transform:uppercase;color:var(--muted)}
.sep{font-size:clamp(30px,8vw,64px);font-weight:300;color:rgba(255,255,255,.18);line-height:1.05;align-self:center;margin-top:-.5em}

/* ── event ── */
.event{display:flex;flex-direction:column;gap:7px}
.event-line{font-size:clamp(15px,3.4vw,20px);font-weight:500;display:flex;align-items:center;justify-content:center;gap:10px}
.event-line strong{font-weight:600}
.event-sub{font-size:clamp(12px,2.8vw,15px);color:var(--muted)}
.event-booth{font-size:clamp(11px,2.5vw,13px);color:var(--accent);font-weight:600;letter-spacing:.04em;margin-top:2px}
.dot{width:8px;height:8px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 0 rgba(43,212,255,.5);animation:pulse 2.4s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(43,212,255,.45)}70%{box-shadow:0 0 0 11px rgba(43,212,255,0)}100%{box-shadow:0 0 0 0 rgba(43,212,255,0)}}

/* ── notify ── */
.notify{display:flex;gap:8px;width:min(440px,90vw);margin-top:4px}
.notify input{
  flex:1;padding:14px 18px;border-radius:980px;border:1px solid var(--hair);
  background:rgba(255,255,255,.05);color:var(--fg);font-size:15px;font-family:inherit;outline:none;transition:border-color .2s,background .2s;
}
.notify input:focus{border-color:rgba(43,212,255,.6);background:rgba(255,255,255,.08)}
.notify input::placeholder{color:#6b6b70}
.notify button{
  padding:14px 22px;border-radius:980px;border:none;cursor:pointer;
  background:var(--fg);color:#000;font-size:15px;font-weight:600;font-family:inherit;
  display:flex;align-items:center;gap:7px;transition:transform .15s,opacity .2s;white-space:nowrap;
}
.notify button:hover{transform:scale(1.03)}
.notify button:active{transform:scale(.98)}
.arr{transition:transform .2s}
.notify button:hover .arr{transform:translateX(3px)}
.notify-msg{font-size:13px;color:var(--accent);min-height:18px;font-weight:500}

/* ── footer ── */
.foot{
  display:flex;justify-content:center;gap:10px;flex-wrap:wrap;
  padding:24px;font-size:12px;color:#5b5b61;
}
.sep-dot{color:#3a3a40}

/* ── reveal animation ── */
.reveal{opacity:0;transform:translateY(16px);animation:rise .9s cubic-bezier(.22,1,.36,1) forwards;animation-delay:var(--d,0s)}
@keyframes rise{to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){
  .reveal{animation:none;opacity:1;transform:none}
  .glow,.dot{animation:none}
  #field{display:none}
}
@media (max-width:520px){
  .sep{display:none}
  .countdown{gap:4px;padding:18px 12px;border-radius:20px}
  .unit{min-width:0;flex:1}
}