:root {
  --ink: #050506;
  --ink-2: #0c0c0e;
  --glass: rgba(255, 255, 255, 0.07);
  --glass-strong: rgba(255, 255, 255, 0.12);
  --edge: rgba(255, 255, 255, 0.16);
  --edge-soft: rgba(255, 255, 255, 0.08);
  --text: #f3f3f4;
  --muted: #a6a6ad;
  --silver: linear-gradient(180deg, #ffffff 0%, #c9c9ce 45%, #7d7d84 100%);
  --ok: #8dffb0;
  --bad: #ff9a9a;
  --r-lg: 34px;
  --r-md: 22px;
  --r-pill: 999px;
  --font-display: "Anton", "Bebas Neue", Impact, "Arial Narrow", sans-serif;
  --font-body: "Manrope", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  min-height: 100vh;
  background: var(--ink);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.55;
  overflow-x: hidden;
}

/* Blurred monochrome backdrop, like an out-of-focus street at night */
.backdrop {
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(40vmax 30vmax at 12% 18%, rgba(255,255,255,.20), transparent 60%),
    radial-gradient(34vmax 40vmax at 88% 30%, rgba(200,200,205,.16), transparent 62%),
    radial-gradient(50vmax 36vmax at 50% 95%, rgba(255,255,255,.14), transparent 65%),
    linear-gradient(180deg, #151517 0%, #070708 55%, #101012 100%);
  filter: blur(22px) grayscale(1);
}
.backdrop::after {
  content: ""; position: absolute; inset: 0;
  background:
    repeating-linear-gradient(90deg, rgba(255,255,255,.05) 0 70px, transparent 70px 150px),
    repeating-linear-gradient(0deg, rgba(0,0,0,.35) 0 60px, transparent 60px 140px);
  mix-blend-mode: overlay; opacity: .55;
}

.shell {
  position: relative; z-index: 1;
  width: min(1120px, 100% - 28px);
  margin: 0 auto;
  padding: 16px 0 40px;
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(12, 1fr);
  grid-template-areas:
    "nav    nav    nav    nav    nav    nav    nav    nav    nav    nav    nav    nav"
    "hero   hero   hero   hero   hero   hero   hero   hero   status status status status"
    "pair   pair   pair   pair   pair   pair   pair   pair   links  links  links  links"
    "guide  guide  guide  guide  guide  guide  guide  guide  guide  guide  guide  guide"
    "contact contact contact contact contact contact contact contact contact contact contact contact"
    "cta    cta    cta    cta    cta    cta    cta    cta    cta    cta    cta    cta"
    "foot   foot   foot   foot   foot   foot   foot   foot   foot   foot   foot   foot";
}

.glass {
  background: linear-gradient(160deg, rgba(255,255,255,.10), rgba(255,255,255,.04) 60%, rgba(255,255,255,.07));
  border: 1px solid var(--edge);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.18), 0 24px 60px -24px rgba(0,0,0,.9);
  -webkit-backdrop-filter: blur(26px) saturate(120%);
  backdrop-filter: blur(26px) saturate(120%);
  border-radius: var(--r-lg);
}

a { color: inherit; text-decoration: none; }
:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }

/* ── Navigation ───────────────────────────────────────── */
.nav {
  grid-area: nav;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 14px 22px;
  border-radius: var(--r-pill);
  position: sticky; top: 10px; z-index: 20;
}
.nav-menu { display: none; background: none; border: 0; color: var(--text); cursor: pointer; padding: 4px; }
.nav-links { display: flex; gap: 30px; }
.nav-links a {
  font-weight: 600; font-size: 14px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--muted); padding: 4px 0; border-bottom: 2px solid transparent;
  transition: color .2s, border-color .2s;
}
.nav-links a:hover, .nav-links a.is-active { color: #fff; border-color: #fff; }
.nav-tag {
  font-size: 12px; font-weight: 700; letter-spacing: .5em; text-transform: uppercase;
  padding: 8px 26px 8px 30px; border-radius: var(--r-pill);
  background: rgba(0,0,0,.55); border: 1px solid var(--edge-soft);
}
.dots { display: flex; gap: 10px; }
.dots i { width: 20px; height: 20px; border-radius: 50%; background: rgba(255,255,255,.55); box-shadow: inset 0 -3px 6px rgba(0,0,0,.25); }

/* ── Hero ─────────────────────────────────────────────── */
.hero {
  grid-area: hero;
  position: relative; overflow: hidden;
  display: grid; grid-template-columns: 150px 1fr; gap: 26px;
  padding: 30px 34px; min-height: 340px;
  background-color: rgba(0,0,0,.62);
}
.hero-id { display: flex; flex-direction: column; align-items: center; gap: 16px; position: relative; z-index: 2; }
.avatar {
  position: relative; width: 120px; height: 120px; border-radius: 50%;
  display: grid; place-items: center;
  background: radial-gradient(circle at 30% 25%, #4a4a50, #121214 70%);
  border: 3px solid rgba(255,255,255,.55);
  box-shadow: 0 0 0 6px rgba(255,255,255,.07), 0 12px 30px rgba(0,0,0,.7);
  overflow: hidden;
  animation: float 4s ease-in-out infinite alternate;
  will-change: transform;
}
@keyframes float {
  from { transform: translateY(0) rotate(-1.5deg); box-shadow: 0 0 0 6px rgba(255,255,255,.07), 0 12px 30px rgba(0,0,0,.7); }
  to   { transform: translateY(-14px) rotate(1.5deg); box-shadow: 0 0 0 9px rgba(255,255,255,.10), 0 30px 44px rgba(0,0,0,.55); }
}
.avatar span { font-family: var(--font-display); font-size: 58px; line-height: 1; background: var(--silver); -webkit-background-clip: text; background-clip: text; color: transparent; }
.avatar img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 1; }
.social { display: flex; gap: 14px; list-style: none; }
.social a { display: grid; place-items: center; width: 34px; height: 34px; color: var(--text); opacity: .9; transition: transform .2s, opacity .2s; }
.social a:hover { transform: translateY(-2px); opacity: 1; }
.live { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: var(--muted); text-align: center; }
.live-dot { width: 9px; height: 9px; border-radius: 50%; background: #777; flex: none; }
.live.is-on .live-dot { background: var(--ok); box-shadow: 0 0 10px var(--ok); }
.live.is-on { color: var(--text); }
.live.is-off .live-dot { background: var(--bad); box-shadow: 0 0 10px var(--bad); }

.hero-copy { position: relative; z-index: 2; align-self: center; max-width: 520px; margin-left: auto; text-align: left; }
.metal, .metal-sm {
  font-family: var(--font-display); font-weight: 400;
  background: var(--silver); -webkit-background-clip: text; background-clip: text; color: transparent;
  text-shadow: none; letter-spacing: .01em;
}
.metal { font-size: clamp(54px, 9vw, 96px); line-height: .95; }
.metal-sm { font-size: clamp(30px, 4vw, 40px); line-height: 1.05; margin-bottom: 10px; }
.role { margin-top: 12px; font-size: 19px; font-weight: 600; }
.lede { margin-top: 12px; color: var(--muted); max-width: 44ch; }

.hero-figure {
  position: absolute; z-index: 1; left: 50%; bottom: 0; height: 112%; max-width: none;
  transform: translateX(-62%); object-fit: contain; pointer-events: none;
  -webkit-mask-image: linear-gradient(180deg, #000 70%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 70%, transparent 100%);
}

.pill-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 12px;
  margin-top: 22px; padding: 14px 26px;
  font: 700 14px/1 var(--font-body); letter-spacing: .12em; text-transform: uppercase;
  color: var(--text); cursor: pointer;
  border-radius: var(--r-pill);
  background: linear-gradient(180deg, rgba(255,255,255,.2), rgba(255,255,255,.07));
  border: 1px solid var(--edge);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.25), 0 10px 24px -10px rgba(0,0,0,.9);
  transition: background .2s, transform .15s;
}
.pill-btn:hover { background: linear-gradient(180deg, rgba(255,255,255,.3), rgba(255,255,255,.12)); }
.pill-btn:active { transform: translateY(1px); }
.pill-btn.wide { width: 100%; }
.pill-btn[disabled] { opacity: .6; cursor: progress; }

/* ── Status column ────────────────────────────────────── */
.status-col { grid-area: status; display: grid; gap: 16px; grid-template-rows: auto 1fr 1fr; }
.widget { padding: 18px 22px; border-radius: var(--r-md); }
.signal { display: flex; align-items: center; justify-content: space-between; border-radius: var(--r-pill); font-weight: 700; padding: 14px 26px; }
.stat { display: flex; flex-direction: column; justify-content: center; gap: 6px; }
.stat-label { color: var(--muted); font-size: 14px; font-weight: 600; }
.stat-value { font-family: var(--font-display); font-weight: 400; font-size: clamp(30px, 3.4vw, 40px); line-height: 1; letter-spacing: .02em; background: var(--silver); -webkit-background-clip: text; background-clip: text; color: transparent; font-variant-numeric: tabular-nums; }

/* ── Pair panel ───────────────────────────────────────── */
.pair {
  grid-area: pair;
  display: grid; grid-template-columns: 1fr 64px; gap: 22px;
  padding: 30px 28px 30px 34px;
}
.muted { color: var(--muted); }
.pair-main { max-width: 560px; }
.field-label { display: block; margin-top: 22px; font-weight: 700; font-size: 14px; }
.field {
  display: flex; align-items: center; gap: 6px; margin-top: 8px;
  padding: 0 18px; border-radius: var(--r-md);
  background: rgba(0,0,0,.5); border: 1px solid var(--edge);
}
.field:focus-within { border-color: #fff; }
.plus { color: var(--muted); font-size: 22px; font-weight: 600; }
.field input {
  flex: 1; min-width: 0; height: 58px; background: transparent; border: 0; outline: 0;
  color: var(--text); font: 600 22px/1 var(--font-body); letter-spacing: .08em;
  font-variant-numeric: tabular-nums;
}
.field input::placeholder { color: #5b5b62; }
.hint { margin-top: 8px; font-size: 13px; color: var(--muted); }
.error { margin-top: 8px; font-size: 14px; font-weight: 600; color: var(--bad); }

.result { margin-top: 26px; padding: 20px; border-radius: var(--r-md); background: rgba(0,0,0,.5); border: 1px solid var(--edge); }
.result-title { font-weight: 700; font-size: 14px; color: var(--muted); }
.code { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin: 14px 0 4px; }
.code .ch {
  width: 44px; height: 58px; display: grid; place-items: center;
  font-family: var(--font-display); font-size: 34px; line-height: 1; color: #fff;
  background: linear-gradient(180deg, rgba(255,255,255,.18), rgba(255,255,255,.06));
  border: 1px solid var(--edge); border-radius: 12px;
  animation: pop .35s cubic-bezier(.2,.9,.3,1.2) backwards;
}
.code .sep { width: 12px; height: 3px; border-radius: 2px; background: var(--muted); }
@keyframes pop { from { opacity: 0; transform: translateY(10px) scale(.9); } }
.result-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }
.ghost-btn {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 11px 20px; border-radius: var(--r-pill);
  font: 700 13px/1 var(--font-body); letter-spacing: .04em; color: var(--text); cursor: pointer;
  background: rgba(255,255,255,.07); border: 1px solid var(--edge);
  transition: background .2s;
}
.ghost-btn:hover { background: rgba(255,255,255,.16); }

/* Code-validity timer styled like the reference's vertical slider */
.timer { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 14px 0; border-radius: var(--r-pill); background: rgba(0,0,0,.45); border: 1px solid var(--edge-soft); }
.timer span { font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums; }
.timer-track { flex: 1; width: 14px; min-height: 150px; border-radius: 8px; background: rgba(255,255,255,.12); overflow: hidden; display: flex; align-items: flex-end; }
.timer-fill { width: 100%; height: 0%; background: linear-gradient(180deg, #fff, #9c9ca3); border-radius: 8px; transition: height 1s linear; }

/* ── Quick links ──────────────────────────────────────── */
.links-col {
  grid-area: links; display: grid; grid-template-columns: 1fr 1fr; gap: 14px;
  align-content: center; justify-items: center; padding: 22px; border-radius: var(--r-md);
}
.item { display: flex; flex-direction: column; align-items: center; gap: 8px; background: none; border: 0; color: var(--text); cursor: pointer; font: inherit; }
.item-label { font-size: 13px; font-weight: 600; color: var(--muted); }
.item:hover .round { transform: translateY(-2px); background: radial-gradient(circle at 35% 25%, rgba(255,255,255,.4), rgba(255,255,255,.12)); }
.round {
  width: 74px; height: 74px; border-radius: 50%; display: grid; place-items: center; cursor: pointer;
  color: var(--text); background: radial-gradient(circle at 35% 25%, rgba(255,255,255,.28), rgba(255,255,255,.07));
  border: 1px solid var(--edge); transition: transform .2s, background .2s;
}
.item.spin svg { animation: spin .7s linear; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ── Guide ────────────────────────────────────────────── */
.guide { grid-area: guide; padding: 30px 34px; }
.steps { list-style: none; display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; margin-top: 18px; }
.steps li { padding: 20px; border-radius: var(--r-md); background: rgba(0,0,0,.42); border: 1px solid var(--edge-soft); }
.step-n { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; font-weight: 800; font-size: 15px; color: #000; background: var(--silver); }
.steps h3 { margin: 14px 0 6px; font-size: 18px; }
.steps p { color: var(--muted); font-size: 14.5px; }
.note { margin-top: 20px; font-size: 14px; color: var(--muted); }

/* ── Contact / CTA / footer ───────────────────────────── */
.contact { grid-area: contact; padding: 30px 34px; }
.contact .muted { max-width: 62ch; }
.contact-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 18px; }
.cta {
  grid-area: cta; display: flex; align-items: center; justify-content: center; gap: 18px;
  padding: 22px; border-radius: var(--r-pill); background-color: rgba(0,0,0,.65);
  font-weight: 700; letter-spacing: .3em; text-transform: uppercase; font-size: 14px;
  transition: background .2s;
}
.cta:hover { background-color: rgba(30,30,34,.8); }
.foot { grid-area: foot; text-align: center; font-size: 13px; color: var(--muted); padding-top: 4px; }

/* ── Music button ─────────────────────────────────────── */
.music {
  position: fixed; z-index: 30; right: 16px; bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  width: 52px; height: 52px; padding: 0; border-radius: 50%;
  display: grid; place-items: center; cursor: pointer; color: var(--text);
}
.music .off { display: none; }
.music.is-muted .on { display: none; }
.music.is-muted .off { display: block; }

/* ── Responsive ───────────────────────────────────────── */
@media (max-width: 920px) {
  .shell {
    grid-template-columns: 1fr;
    grid-template-areas: "nav" "hero" "pair" "status" "links" "guide" "contact" "cta" "foot";
  }
  .status-col { grid-template-columns: 1fr 1fr; grid-template-rows: auto auto; }
  .signal { grid-column: 1 / -1; }
  .links-col { grid-template-columns: repeat(4, 1fr); }
  .round { width: 64px; height: 64px; }
  .steps { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 620px) {
  .nav { flex-wrap: wrap; border-radius: 28px; padding: 12px 18px; }
  .nav-menu { display: block; }
  .nav-tag { display: none; }
  .nav-links { display: none; width: 100%; flex-direction: column; gap: 6px; padding-top: 8px; order: 3; }
  .nav.is-open .nav-links { display: flex; }
  .dots { margin-left: auto; }
  .hero { grid-template-columns: 1fr; padding: 26px 22px; min-height: 0; }
  .hero-copy { margin: 0; }
  .hero-figure { opacity: .35; transform: translateX(-30%); }
  .pair { grid-template-columns: 1fr; padding: 24px 20px; }
  .timer { flex-direction: row; padding: 10px 18px; order: 2; }
  .timer-track { min-height: 0; height: 12px; width: auto; flex: 1; align-items: stretch; }
  .timer-fill { height: 100% !important; width: var(--w, 0%); transition: width 1s linear; }
  .code { gap: 5px; }
  .code .ch { width: 30px; height: 46px; font-size: 26px; border-radius: 9px; }
  .code .sep { width: 8px; }
  .steps { grid-template-columns: 1fr; }
  .guide, .contact { padding: 24px 22px; }
  .cta { letter-spacing: .14em; font-size: 13px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation: none !important; transition: none !important; }
}