@font-face {
  font-family: "InterVar";
  src: url("./assets/fonts/InterVariable.ttf") format("truetype");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  --bg: #06080f;
  --bg-soft: #0d1220;
  --panel: rgba(12, 18, 31, 0.82);
  --panel-strong: rgba(19, 27, 46, 0.92);
  --line: rgba(255, 255, 255, 0.08);
  --text: #f5f7fb;
  --muted: #9aa7bf;
  --accent: #ff5c5c;
  --accent-soft: #ffc171;
  --cyan: #7ed7ff;
  --shadow: 0 24px 80px rgba(0, 0, 0, 0.35);
  --radius-xl: 32px;
  --radius-lg: 22px;
  --radius-md: 16px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  min-height: 100vh;
  font-family: "InterVar", "Segoe UI", sans-serif;
  background:
    radial-gradient(circle at top left, rgba(255, 92, 92, 0.18), transparent 34%),
    radial-gradient(circle at top right, rgba(126, 215, 255, 0.14), transparent 22%),
    linear-gradient(180deg, #09111d 0%, #05070d 45%, #030406 100%);
  color: var(--text);
}
a { color: inherit; text-decoration: none; }
button { font: inherit; }
.page-shell { position: relative; width: min(1280px, calc(100% - 40px)); margin: 0 auto; padding: 24px 0 48px; }
.page-noise {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,0.015) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.015) 1px, transparent 1px);
  background-size: 48px 48px;
  pointer-events: none;
  mask-image: linear-gradient(180deg, rgba(0,0,0,1), transparent);
}
.topbar,.hero-panel,.section-block,.footer { position: relative; z-index: 1; }
.topbar {
  display:flex; align-items:center; justify-content:space-between; gap:20px;
  padding:12px 16px; background:rgba(8,11,19,0.68); border:1px solid var(--line);
  border-radius:20px; backdrop-filter:blur(20px);
}
.brand { display:inline-flex; align-items:center; gap:14px; }
.brand-mark {
  display:inline-grid; place-items:center; width:42px; height:42px; border-radius:14px;
  background:linear-gradient(135deg, var(--accent), #ff8a56); color:#fff; font-size:1.1rem; font-weight:800;
  box-shadow:0 16px 32px rgba(255,92,92,0.25);
}
.brand-copy { display:inline-flex; flex-direction:column; gap:2px; }
.brand-copy strong { font-size:1rem; }
.brand-copy small { color:var(--muted); text-transform:uppercase; letter-spacing:0.08em; }
.top-actions { display:inline-flex; gap:12px; align-items:center; }
.ghost-button,.primary-button,.secondary-button {
  display:inline-flex; align-items:center; justify-content:center; min-height:46px; padding:0 18px;
  border-radius:999px; border:1px solid var(--line); transition:transform 180ms ease,border-color 180ms ease,background 180ms ease;
}
.ghost-button { background:rgba(255,255,255,0.03); color:var(--muted); }
.primary-button { background:linear-gradient(135deg,var(--accent),#ff8d5e); border-color:transparent; color:#fff; font-weight:700; }
.secondary-button { background:rgba(255,255,255,0.05); color:#fff; }
.ghost-button:hover,.primary-button:hover,.secondary-button:hover,.surface-nav:hover { transform:translateY(-1px); }
.hero-grid { display:grid; grid-template-columns:1.1fr 1fr; gap:26px; margin-top:28px; align-items:start; }
.hero-copy { padding:28px 10px 0 4px; }
.eyebrow {
  display:inline-flex; align-items:center; gap:10px; padding:10px 14px;
  border:1px solid rgba(255,193,113,0.18); background:rgba(255,193,113,0.08);
  border-radius:999px; color:#ffd598; text-transform:uppercase; letter-spacing:0.08em; font-size:0.78rem;
}
.eyebrow-dot { width:8px; height:8px; border-radius:50%; background:#ffd598; box-shadow:0 0 0 6px rgba(255,213,152,0.12); }
.hero-copy h1 { margin:18px 0 0; font-size:clamp(2.7rem, 5vw, 5rem); line-height:0.96; letter-spacing:-0.05em; }
.hero-lead { max-width:650px; margin:18px 0 0; font-size:1.05rem; line-height:1.7; color:var(--muted); }
.hero-cta { display:flex; flex-wrap:wrap; gap:14px; margin-top:24px; }
.hero-points { display:flex; flex-wrap:wrap; gap:12px; padding:0; margin:22px 0 0; list-style:none; color:#d3def1; }
.hero-points li { padding:10px 14px; border-radius:999px; border:1px solid var(--line); background:rgba(255,255,255,0.03); }
.hero-panel,.section-block,.footer {
  background:var(--panel); border:1px solid var(--line); border-radius:var(--radius-xl); box-shadow:var(--shadow); backdrop-filter:blur(22px);
}
.hero-panel { padding:20px; }
.hero-panel-head,.section-head,.footer { display:flex; align-items:center; justify-content:space-between; gap:16px; }
.hero-panel-head p,.section-head p { margin:0 0 6px; color:var(--muted); text-transform:uppercase; letter-spacing:0.08em; font-size:0.76rem; }
.hero-panel-head h2,.section-head h2 { margin:0; font-size:1.5rem; }
.status-pill { padding:10px 14px; border-radius:999px; background:rgba(126,215,255,0.1); border:1px solid rgba(126,215,255,0.18); color:#bdeeff; font-size:0.85rem; }
.hero-surface { display:grid; grid-template-columns:148px 1fr; gap:18px; margin-top:18px; }
.surface-sidebar,.surface-main,.metric-card,.board-card,.module-card,.choice-card { background:var(--panel-strong); border:1px solid var(--line); }
.surface-sidebar { border-radius:24px; padding:16px; display:flex; flex-direction:column; gap:10px; }
.surface-logo {
  width:56px; height:56px; display:grid; place-items:center; border-radius:18px;
  background:linear-gradient(135deg, rgba(255,92,92,0.22), rgba(255,193,113,0.18)); margin-bottom:10px; font-weight:800; font-size:1.15rem;
}
.surface-nav { border:0; text-align:left; padding:12px 14px; border-radius:14px; background:rgba(255,255,255,0.03); color:var(--muted); cursor:default; }
.surface-nav.active { background:linear-gradient(135deg, rgba(255,92,92,0.22), rgba(255,92,92,0.08)); color:#fff; }
.surface-main { border-radius:24px; padding:18px; }
.surface-strip { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; }
.metric-card,.board-card,.module-card,.choice-card { border-radius:20px; padding:18px; }
.metric-card span,.board-card p,.module-tag { display:block; color:var(--muted); text-transform:uppercase; letter-spacing:0.07em; font-size:0.74rem; }
.metric-card strong,.board-card h3,.module-card h3,.choice-card h3 { display:block; margin-top:10px; font-size:1.1rem; }
.metric-card small,.board-card span,.module-card p,.choice-card li { display:block; margin-top:10px; color:#cad6ea; line-height:1.6; }
.surface-board { display:grid; grid-template-columns:1.2fr 0.8fr; gap:12px; margin-top:12px; }
.board-card.accent { background:radial-gradient(circle at top left, rgba(255,92,92,0.16), transparent 50%), var(--panel-strong); }
.board-card.wide { grid-column:1 / -1; }
.section-block { padding:28px; margin-top:26px; }
.module-grid,.choice-grid { display:grid; gap:14px; margin-top:18px; }
.module-grid { grid-template-columns:repeat(4,1fr); }
.choice-grid { grid-template-columns:1.2fr 0.8fr; }
.choice-card ul { margin:12px 0 0; padding-left:18px; }
.choice-card.strong { background:radial-gradient(circle at top right, rgba(126,215,255,0.14), transparent 42%), var(--panel-strong); }
.footer { padding:20px 24px; margin-top:26px; }
.footer span { display:block; margin-top:4px; color:var(--muted); }
.footer-actions { display:inline-flex; gap:18px; }
.footer-actions a { color:#dbe6fb; }

@media (max-width:1120px) {
  .hero-grid,.hero-surface,.surface-board,.module-grid,.choice-grid { grid-template-columns:1fr; }
  .surface-strip { grid-template-columns:1fr; }
}
@media (max-width:760px) {
  .page-shell { width:min(100% - 24px, 1280px); padding-top:14px; }
  .topbar,.section-head,.footer,.hero-panel-head { flex-direction:column; align-items:flex-start; }
  .top-actions,.hero-cta,.footer-actions { width:100%; flex-wrap:wrap; }
  .ghost-button,.primary-button,.secondary-button { width:100%; }
  .hero-copy h1 { font-size:2.7rem; }
  .section-block,.hero-panel { padding:20px; }
}