/* QIYP Landing — shared token system (matches dashboard) + upper sections */
:root {
  --font: "IBM Plex Sans", system-ui, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, monospace;
}
:root, html[data-theme="dark"] {
  --bg: oklch(0.155 0.006 95);
  --bg2: oklch(0.195 0.007 95);
  --panel: oklch(0.215 0.008 95);
  --fg: oklch(0.945 0.008 95);
  --mut: oklch(0.66 0.012 95);
  --faint: oklch(0.52 0.010 95);
  --line: oklch(0.30 0.008 95);
  --line2: oklch(0.255 0.007 95);
  --acc: oklch(0.80 0.13 150);
  --acc-dim: oklch(0.80 0.13 150 / 0.13);
  --up: oklch(0.80 0.14 150);
  --down: oklch(0.72 0.16 28);
  --warn: oklch(0.82 0.13 85);
  --topbar-bg: oklch(0.155 0.006 95 / 0.82);
  --shadow: none; --scan: 0.022;
}
html[data-theme="light"] {
  --bg: oklch(0.975 0.005 95);
  --bg2: oklch(0.955 0.006 95);
  --panel: oklch(1 0 0);
  --fg: oklch(0.225 0.010 95);
  --mut: oklch(0.46 0.012 95);
  --faint: oklch(0.605 0.010 95);
  --line: oklch(0.86 0.008 95);
  --line2: oklch(0.915 0.006 95);
  --acc: oklch(0.55 0.15 150);
  --acc-dim: oklch(0.55 0.15 150 / 0.10);
  --up: oklch(0.52 0.16 150);
  --down: oklch(0.55 0.20 28);
  --warn: oklch(0.56 0.13 70);
  --topbar-bg: oklch(0.975 0.005 95 / 0.82);
  --shadow: 0 1px 2px oklch(0.2 0.01 95 / 0.04), 0 10px 34px oklch(0.2 0.01 95 / 0.06);
  --scan: 0;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background-color: var(--bg); color: var(--fg); font-family: var(--font); font-size: 16px; line-height: 1.5;
  -webkit-font-smoothing: antialiased; letter-spacing: -0.006em; }
body::before { content:""; position: fixed; inset: 0; pointer-events: none; z-index: 0;
  background-image: linear-gradient(var(--line2) 1px, transparent 1px); background-size: 100% 5px; opacity: var(--scan); }
.mono { font-family: var(--mono); font-feature-settings: "tnum" 1, "zero" 1; }
.up { color: var(--up); } .down { color: var(--down); } .acc { color: var(--acc); }
a { color: inherit; text-decoration: none; }
.eyebrow { font-family: var(--mono); font-size: 12.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--acc); }

.section { position: relative; z-index: 1; max-width: 1120px; margin: 0 auto; padding: 0 28px; }
.section-pad { padding-top: 110px; }
.sec-title { font-size: clamp(28px, 4.4vw, 44px); font-weight: 600; letter-spacing: -0.025em; line-height: 1.08; max-width: 20ch; }
.sec-title em { font-style: normal; color: var(--acc); }
.sec-intro { color: var(--mut); font-size: 17px; max-width: 60ch; margin-top: 18px; line-height: 1.6; }

/* ---------- nav ---------- */
.nav { position: sticky; top: 0; z-index: 40; background: var(--topbar-bg); backdrop-filter: blur(12px); border-bottom: 1px solid var(--line2); }
.nav-in { max-width: 1120px; margin: 0 auto; padding: 16px 28px; display: flex; align-items: center; gap: 26px; }
.logo { font-family: var(--mono); font-weight: 600; font-size: 15px; letter-spacing: 0.16em; }
.logo .d { color: var(--acc); }
.nav-links { display: flex; gap: 4px; margin-left: 10px; }
.nav-links a { font-family: var(--mono); font-size: 12.5px; color: var(--mut); padding: 8px 12px; border-radius: 7px; }
.nav-links a:hover { color: var(--fg); background: var(--bg2); }
.nav-right { margin-left: auto; display: flex; align-items: center; gap: 14px; }
.nav-right .login { font-family: var(--mono); font-size: 13px; color: var(--mut); }
.nav-right .login:hover { color: var(--fg); }
@media (max-width: 720px) { .nav-links { display: none; } }

.theme-toggle { width: 34px; height: 34px; border-radius: 9px; border: 1px solid var(--line2); background: var(--bg2);
  color: var(--mut); cursor: pointer; display: grid; place-items: center; transition: color .15s, border-color .15s; }
.theme-toggle:hover { color: var(--fg); border-color: var(--line); }
.theme-toggle svg { width: 17px; height: 17px; }
.theme-toggle .moon { display: none; } html[data-theme="light"] .theme-toggle .moon { display: block; }
html[data-theme="light"] .theme-toggle .sun { display: none; }

/* ---------- buttons ---------- */
.btn { font-family: var(--mono); font-size: 13.5px; font-weight: 600; padding: 12px 20px; border-radius: 9px; cursor: pointer;
  border: 1px solid transparent; letter-spacing: 0.01em; display: inline-flex; align-items: center; gap: 8px; transition: filter .15s, border-color .15s, color .15s; }
.btn-primary { background: var(--acc); color: var(--bg); }
html[data-theme="light"] .btn-primary { color: #fff; }
.btn-primary:hover { filter: brightness(1.08); }
.btn-ghost { background: transparent; border-color: var(--line); color: var(--fg); }
.btn-ghost:hover { border-color: var(--acc); color: var(--acc); }
.btn-sm { padding: 9px 15px; font-size: 12.5px; }

/* ---------- hero ---------- */
.hero { position: relative; z-index: 1; max-width: 1120px; margin: 0 auto; padding: 70px 28px 30px;
  display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 54px; align-items: center; }
@media (max-width: 940px) { .hero { grid-template-columns: 1fr; gap: 38px; } }
.hero h1 { font-size: clamp(40px, 6.4vw, 72px); font-weight: 600; letter-spacing: -0.035em; line-height: 1.02; margin: 22px 0 0; }
.hero h1 em { font-style: normal; color: var(--acc); }
.hero .lead { color: var(--mut); font-size: 18px; line-height: 1.6; margin: 22px 0 0; max-width: 46ch; }
.hero .lead b { color: var(--fg); font-weight: 500; }
.hero-cta { display: flex; gap: 12px; margin-top: 28px; flex-wrap: wrap; }
.hero-meta { display: flex; align-items: center; gap: 14px; margin-top: 26px; font-family: var(--mono); font-size: 12.5px; color: var(--faint); flex-wrap: wrap; }
.hero-meta .dot-live { display: inline-flex; align-items: center; gap: 7px; color: var(--mut); }
.hero-meta .dot-live::before { content:""; width: 8px; height: 8px; border-radius: 50%; background: var(--up); box-shadow: 0 0 0 0 var(--up); animation: pulse 2.4s infinite; }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 color-mix(in oklch, var(--up) 55%, transparent); } 70% { box-shadow: 0 0 0 7px transparent; } 100% { box-shadow: 0 0 0 0 transparent; } }

/* ---------- hero briefing card ---------- */
.brief-card { background: var(--panel); border: 1px solid var(--line2); border-radius: 16px; overflow: hidden; box-shadow: var(--shadow); }
.bc-head { display: flex; align-items: center; gap: 10px; padding: 14px 18px; border-bottom: 1px solid var(--line2); background: var(--bg2); }
.bc-head .dot { width: 9px; height: 9px; border-radius: 50%; background: var(--acc); }
.bc-head .t { font-family: var(--mono); font-size: 12px; color: var(--mut); letter-spacing: 0.03em; }
.bc-head .live { margin-left: auto; font-family: var(--mono); font-size: 10.5px; color: var(--up); letter-spacing: 0.06em; }
.bc-body { padding: 8px 18px 18px; }
.bc-block { padding: 14px 0; border-bottom: 1px solid var(--line2); }
.bc-block:last-child { border-bottom: 0; }
.bc-label { font-family: var(--mono); font-size: 10px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--faint); }
.bc-regime { display: flex; align-items: center; gap: 10px; margin-top: 8px; }
.bc-regime .badge { font-family: var(--mono); font-weight: 600; font-size: 12px; color: var(--acc); background: var(--acc-dim);
  border: 1px solid color-mix(in oklch, var(--acc) 35%, transparent); padding: 4px 10px; border-radius: 6px; letter-spacing: 0.06em; }
.bc-regime .sub { font-family: var(--mono); font-size: 11.5px; color: var(--mut); }
.bc-sig { margin-top: 8px; }
.bc-sig .top { display: flex; align-items: center; gap: 10px; }
.bc-verd { font-family: var(--mono); font-size: 11px; font-weight: 600; padding: 4px 9px; border-radius: 6px; letter-spacing: 0.05em; }
.bc-verd.take { color: var(--up); background: color-mix(in oklch, var(--up) 15%, transparent); }
.bc-verd.cond { color: var(--warn); background: color-mix(in oklch, var(--warn) 16%, transparent); }
.bc-verd.pass { color: var(--down); background: color-mix(in oklch, var(--down) 14%, transparent); }
.bc-sig .nm { font-family: var(--mono); font-size: 16px; font-weight: 600; }
.bc-sig .ev { margin-left: auto; font-family: var(--mono); font-size: 13px; font-weight: 600; }
.bc-sig .levels { font-family: var(--mono); font-size: 11.5px; color: var(--mut); margin-top: 7px; line-height: 1.6; }
.bc-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--line2); border-top: 1px solid var(--line2); }
.bc-stat { background: var(--panel); padding: 13px 16px; }
.bc-stat .k { font-family: var(--mono); font-size: 9.5px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--faint); }
.bc-stat .v { font-family: var(--mono); font-size: 19px; font-weight: 600; margin-top: 3px; }

/* ---------- track strip ---------- */
.track-strip { border-top: 1px solid var(--line2); border-bottom: 1px solid var(--line2); margin-top: 50px; background: var(--bg2); }
.track-in { max-width: 1120px; margin: 0 auto; padding: 26px 28px; display: grid; grid-template-columns: repeat(4, 1fr) auto; gap: 28px; align-items: center; }
@media (max-width: 820px) { .track-in { grid-template-columns: repeat(2, 1fr); } }
.tstrip .k { font-family: var(--mono); font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.07em; color: var(--faint); }
.tstrip .v { font-family: var(--mono); font-size: 30px; font-weight: 600; margin-top: 3px; letter-spacing: -0.02em; }
.track-in .note { font-family: var(--mono); font-size: 11.5px; color: var(--faint); max-width: 22ch; line-height: 1.6; }
@media (max-width: 820px) { .track-in .note { grid-column: 1/-1; } }