:root{
  --bg:#0b0c10;
  --fg:#e8e9ef;
  --muted:#a7abb8;
  --line:#171a23;
  --accent:#cfd2ff;
  --radius:18px;
  --shadow: 0 40px 120px rgba(0,0,0,0.55);
}

*{box-sizing:border-box}
html,body{height:100%}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--bg); color:var(--fg);
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Inter, 'Helvetica Neue', Arial;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
}

/* faint aura + grain */
body::before{
  content:""; position:fixed; inset:-15%;
  background:
    radial-gradient(38% 28% at 80% 8%, rgba(207,210,255,0.12), transparent 60%),
    radial-gradient(34% 26% at 14% 6%, rgba(207,210,255,0.08), transparent 70%);
  mix-blend-mode: screen; pointer-events:none; z-index:0;
}
body::after{
  content:""; position:fixed; inset:0; pointer-events:none; z-index:0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)' opacity='0.05'/%3E%3C/svg%3E");
  mix-blend-mode: overlay;
}

a{color:inherit}

/* Single CTA */
.x-link{
  position:fixed; top:20px; right:20px; z-index:10;
  display:inline-flex; align-items:center; gap:10px;
  text-decoration:none; font-weight:600; font-size:14px;
  padding:10px 14px; border-radius:999px;
  border:1px solid rgba(255,255,255,0.10);
  background: rgba(255,255,255,0.02);
  backdrop-filter: blur(6px);
  transition: transform .2s ease, border-color .2s ease, background .2s ease;
}
.x-link:hover{ transform: translateY(-1px); border-color: rgba(255,255,255,0.18); background: rgba(255,255,255,0.04) }
.x-icon{ width:14px; height:14px }

/* layout */
.wrap{ min-height:100svh; display:grid; place-items:center; padding: max(24px, 8vh) 20px; position:relative; z-index:1 }
.center{ width:min(900px, 92vw); display:grid; gap:24px; text-align:center }

.brand{ display:flex; align-items:center; justify-content:center; gap:10px; color:var(--muted) }
.brand .name{ letter-spacing:0.24em; text-transform:uppercase; font-weight:600; font-size:12px }
.brand .ticker{ letter-spacing:0.22em; text-transform:uppercase; font-size:11px; opacity:0.8; border-left:1px solid var(--line); padding-left:10px; margin-left:10px }

.h1{
  margin:0;
  font-size: clamp(34px, 7.2vw, 74px);
  line-height:1.02; letter-spacing:-0.02em;
  background: linear-gradient(90deg, #fff, #cfd2ff 40%, #fff);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.motto{ margin:0; color:#c9cdd8; font-size: clamp(13px, 1.3vw, 15px) }

.video{ border-radius: 18px; overflow:hidden; border:1px solid var(--line); box-shadow: var(--shadow) }
.video video{ width:100%; display:block; object-fit:cover; filter: contrast(105%) saturate(110%) }

/* TIMER */
.timer-block{ display:grid; gap:18px; justify-items:center; margin-top: 8px }
.timer-sub{ margin:0; font-size:11px; letter-spacing:0.24em; text-transform:uppercase; color:var(--muted) }

/* ring only */
.ring{ position:relative; width: 260px; height: 260px }
.ring svg{ position:absolute; inset:0; transform: rotate(-90deg) }
.ring .bg{ stroke: rgba(255,255,255,0.08); stroke-width: 10; fill: none }
.ring .fg{ stroke: var(--accent); stroke-width: 10; fill: none; stroke-linecap: round; filter: drop-shadow(0 0 8px rgba(207,210,255,0.35)); stroke-dasharray: 753.98; stroke-dashoffset: 753.98 }
.ring .dot{ fill: var(--accent); filter: drop-shadow(0 0 8px rgba(207,210,255,0.35)) }

/* CA */
.ca{ display:grid; gap:8px; justify-items:center; margin-top: 6px; border-top:1px solid var(--line); padding-top:14px }
.ca .label{ font-size:12px; letter-spacing:0.2em; text-transform:uppercase; color:var(--muted) }
.ca .value{
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
  font-size: clamp(14px, 1.6vw, 18px);
  user-select: all; cursor: copy; word-break: break-all;
  padding: 8px 12px; border-radius: 10px;
  background: rgba(255,255,255,0.02); border: 1px dashed rgba(255,255,255,0.12);
}
.ca .hint{ color:var(--muted); font-size:12px }

.footer{ margin-top: 8px; color: var(--muted); font-size:12px; text-align:center; opacity:0.8 }