/* Landing page styles — RSKX.io */
@import url('https://fonts.googleapis.com/css2?family=Inter+Tight:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap');

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { width: 100%; }
body {
  background: var(--c-bg);
  color: var(--c-text);
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  line-height: 1.5;
}
:root, :root[data-theme="dark"] {
  --c-bg:        #0B0D10;
  --c-bg-2:      #14171B;
  --c-bg-3:      #1A1E23;
  --c-bg-4:      #23282F;
  --c-border:    #1F242A;
  --c-border-2:  #2E343C;
  --c-text:      #E8EAED;
  --c-text-2:    #A8ADB5;
  --c-text-3:    #6E737B;
  --c-text-4:    #4C5158;
  --c-accent:    #4FA3FF;
  --c-buy:       #22D3A0;
  --c-sell:      #FF5470;
  --cold-color:  #1E2A38;
  --mid-color:   #7A5A32;
  --hot-color:   #C4331F;
  --font-sans:   'Inter Tight', 'Inter', system-ui, sans-serif;
  --font-mono:   'JetBrains Mono', ui-monospace, monospace;
}
button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; }
a { color: inherit; text-decoration: none; }

/* ============================================================
   STICKY NAV
   ============================================================ */
.nav {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(11, 13, 16, 0.85);
  border-bottom: 1px solid var(--c-border);
  backdrop-filter: blur(20px) saturate(1.4);
  -webkit-backdrop-filter: blur(20px) saturate(1.4);
}
.nav-inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 16px 28px;
  display: flex;
  align-items: center;
  gap: 32px;
}
.nav-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: -0.025em;
  color: var(--c-text);
}
.nav-brand .mark {
  width: 26px; height: 26px;
  background: var(--c-text);
  color: var(--c-bg);
  display: grid; place-items: center;
  font-weight: 800;
  font-size: 11px;
  letter-spacing: -0.04em;
  border-radius: 4px;
}
.nav-links { display: flex; gap: 24px; align-items: center; }
.nav-link {
  font-size: 13px;
  font-weight: 500;
  color: var(--c-text-3);
  transition: color 120ms;
}
.nav-link:hover { color: var(--c-text); }
.nav-cta-wrap { margin-left: auto; display: flex; gap: 10px; align-items: center; }
.nav-cta {
  padding: 8px 16px;
  background: var(--c-text);
  color: var(--c-bg);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: -0.005em;
  display: inline-flex; align-items: center; gap: 6px;
  transition: filter 120ms;
}
.nav-cta:hover { filter: brightness(0.92); }
.nav-ghost {
  padding: 8px 12px;
  font-size: 13px;
  font-weight: 500;
  color: var(--c-text-2);
}
.nav-status {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--c-text-3);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding-right: 12px;
  border-right: 1px solid var(--c-border);
  margin-right: 4px;
}
.nav-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--c-buy);
  animation: pulseLive 2s ease-in-out infinite;
}
@keyframes pulseLive {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.4; }
}

/* ============================================================
   HERO
   ============================================================ */
.hero {
  max-width: 1280px;
  margin: 0 auto;
  padding: 80px 28px 100px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: center;
}
.hero-left { display: flex; flex-direction: column; gap: 32px; }
.hero-tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--c-text-3);
  align-self: flex-start;
}
.hero-tag .dot {
  width: 6px; height: 6px;
  background: var(--c-accent);
  border-radius: 50%;
}
.hero-h1 {
  font-family: var(--font-sans);
  font-size: 64px;
  font-weight: 500;
  letter-spacing: -0.04em;
  line-height: 1;
  color: var(--c-text);
}
.hero-h1 .em {
  color: var(--c-text-3);
}
.hero-sub {
  font-size: 17px;
  font-weight: 400;
  line-height: 1.55;
  color: var(--c-text-2);
  max-width: 480px;
}
.hero-cta-row { display: flex; gap: 12px; align-items: center; margin-top: 12px; }
.hero-cta {
  padding: 14px 22px;
  background: var(--c-text);
  color: var(--c-bg);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.005em;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: filter 120ms;
}
.hero-cta:hover { filter: brightness(0.92); }
.hero-cta-ghost {
  padding: 14px 16px;
  color: var(--c-text-2);
  font-size: 14px;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.hero-cta-ghost:hover { color: var(--c-text); }
.hero-stats {
  display: flex;
  gap: 40px;
  padding-top: 24px;
  border-top: 1px solid var(--c-border);
  margin-top: 8px;
}
.hero-stat .v {
  font-family: var(--font-sans);
  font-size: 20px;
  font-weight: 600;
  color: var(--c-text);
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  display: block;
}
.hero-stat .k {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--c-text-3);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin-top: 4px;
  display: block;
}

/* ============================================================
   ANIMATED HEX MAP PREVIEW (hero right side)
   ============================================================ */
.hero-preview {
  position: relative;
  height: 480px;
  background: var(--c-bg-2);
  border: 1px solid var(--c-border);
  overflow: hidden;
}
.hero-preview svg.map {
  width: 100%;
  height: 100%;
  display: block;
}
.hp-overlay {
  position: absolute;
  pointer-events: none;
}
.hp-overlay.tl { top: 14px; left: 14px; }
.hp-overlay.br { bottom: 14px; right: 14px; }
.hp-pill {
  background: rgba(20, 23, 27, 0.92);
  border: 1px solid var(--c-border-2);
  padding: 8px 12px;
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--c-text-2);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.hp-pill .dot {
  width: 6px; height: 6px;
  background: var(--c-buy);
  border-radius: 50%;
  animation: pulseLive 2s ease-in-out infinite;
}
.hp-legend {
  background: rgba(20, 23, 27, 0.92);
  border: 1px solid var(--c-border-2);
  padding: 10px 12px;
  min-width: 180px;
}
.hp-legend .l-name {
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 600;
  color: var(--c-text);
  letter-spacing: -0.01em;
  margin-bottom: 6px;
  display: flex; align-items: center; gap: 6px;
}
.hp-legend .l-dot {
  width: 7px; height: 7px;
  background: var(--c-accent);
  border-radius: 50%;
}
.hp-legend .l-bar {
  height: 6px;
  background: linear-gradient(90deg, var(--cold-color), var(--mid-color), var(--c-accent));
  margin-bottom: 4px;
}
.hp-legend .l-scale {
  display: flex; justify-content: space-between;
  font-family: var(--font-mono);
  font-size: 9px;
  color: var(--c-text-3);
  font-variant-numeric: tabular-nums;
}
@keyframes hexBreathe {
  0%, 100% { opacity: 0.85; }
  50%      { opacity: 1; filter: brightness(1.2); }
}
.hp-hex {
  fill-opacity: 0.78;
  transition: fill 700ms ease, fill-opacity 700ms ease;
  stroke: rgba(255,255,255,0.08);
  stroke-width: 0.8;
}
.hp-hex.is-active {
  fill-opacity: 0.94;
  animation: hexHeartbeat 1.6s ease-in-out infinite;
}
@keyframes hexHeartbeat {
  0%, 100% { fill-opacity: 0.85; filter: brightness(0.98); }
  50%      { fill-opacity: 1;    filter: brightness(1.18); }
}
.hp-hex.is-pulse {
  animation: hexBreathe 1.4s ease-in-out infinite;
}
.hp-hex.is-pulse-2 {
  animation: hexBreathe 1.6s ease-in-out infinite 0.5s;
}
.hp-hex.is-pulse-3 {
  animation: hexBreathe 1.8s ease-in-out infinite 1.1s;
}

/* ============================================================
   TRUST STRIP
   ============================================================ */
.trust {
  border-top: 1px solid var(--c-border);
  border-bottom: 1px solid var(--c-border);
  background: var(--c-bg-2);
  padding: 20px 28px;
}
.trust-inner {
  max-width: 1280px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
}
.trust-label {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--c-text-3);
}
.trust-items {
  display: flex;
  gap: 32px;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--c-text-2);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

/* ============================================================
   HOW IT WORKS
   ============================================================ */
section.section {
  max-width: 1280px;
  margin: 0 auto;
  padding: 100px 28px;
}
.sec-eyebrow {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--c-text-3);
  margin-bottom: 16px;
}
.sec-title {
  font-size: 40px;
  font-weight: 500;
  letter-spacing: -0.03em;
  line-height: 1.05;
  color: var(--c-text);
  max-width: 720px;
  margin-bottom: 16px;
}
.sec-sub {
  font-size: 17px;
  color: var(--c-text-2);
  max-width: 600px;
  margin-bottom: 56px;
  line-height: 1.55;
}
.how-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.how-card {
  padding: 28px;
  border: 1px solid var(--c-border);
  background: var(--c-bg-2);
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-height: 280px;
}
.how-num {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  color: var(--c-text-4);
  font-weight: 500;
}
.how-title {
  font-size: 19px;
  font-weight: 600;
  color: var(--c-text);
  letter-spacing: -0.015em;
  line-height: 1.25;
}
.how-desc {
  font-size: 14px;
  color: var(--c-text-2);
  line-height: 1.55;
  flex: 1;
}
.how-art {
  margin-top: auto;
  padding-top: 16px;
  border-top: 1px solid var(--c-border);
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--c-text-3);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0;
}

/* ============================================================
   PERSONAS — "Built for"
   ============================================================ */
.personas {
  background: var(--c-bg-2);
  border-top: 1px solid var(--c-border);
  border-bottom: 1px solid var(--c-border);
}
.personas-inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 100px 28px;
}
.persona-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.persona-card {
  background: var(--c-bg);
  border: 1px solid var(--c-border);
  padding: 28px;
  display: flex;
  flex-direction: column;
}
.persona-tag {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--c-accent);
  margin-bottom: 12px;
}
.persona-name {
  font-size: 22px;
  font-weight: 500;
  color: var(--c-text);
  letter-spacing: -0.02em;
  margin-bottom: 8px;
}
.persona-line {
  font-size: 14px;
  color: var(--c-text-2);
  line-height: 1.55;
  margin-bottom: 24px;
}
.persona-trade {
  margin-top: auto;
  padding-top: 20px;
  border-top: 1px solid var(--c-border);
}
.persona-trade-head {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--c-text-4);
  margin-bottom: 10px;
}
.persona-trade-row {
  display: flex;
  justify-content: space-between;
  padding: 7px 0;
  border-bottom: 1px solid var(--c-border);
  font-size: 13px;
}
.persona-trade-row:last-child { border-bottom: none; }
.persona-trade-row .k {
  color: var(--c-text-3);
}
.persona-trade-row .v {
  font-family: var(--font-mono);
  color: var(--c-text);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.005em;
}
.persona-trade-row .v.up { color: var(--c-buy); }

/* ============================================================
   MOBILE PREVIEW
   ============================================================ */
.mobile-section {
  display: grid;
  grid-template-columns: 1fr 380px;
  gap: 80px;
  align-items: center;
}
.mobile-left { display: flex; flex-direction: column; gap: 24px; }
.mobile-bullets {
  display: flex; flex-direction: column; gap: 18px;
  margin-top: 12px;
}
.mobile-bullet {
  display: flex;
  gap: 16px;
  align-items: flex-start;
}
.mobile-bullet .b-num {
  width: 24px; height: 24px;
  flex-shrink: 0;
  background: var(--c-bg-3);
  border: 1px solid var(--c-border-2);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  color: var(--c-text);
  display: grid; place-items: center;
  margin-top: 1px;
}
.mobile-bullet .b-body { display: flex; flex-direction: column; gap: 4px; }
.mobile-bullet .b-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--c-text);
  letter-spacing: -0.005em;
}
.mobile-bullet .b-desc {
  font-size: 13px;
  color: var(--c-text-2);
  line-height: 1.5;
}

/* mobile mock — simple phone frame */
.phone-frame {
  width: 320px;
  height: 660px;
  margin: 0 auto;
  background: #0B0D10;
  border: 1px solid var(--c-border-2);
  border-radius: 38px;
  padding: 14px;
  position: relative;
  overflow: hidden;
}
.phone-frame::before {
  content: '';
  position: absolute;
  top: 14px;
  left: 50%;
  transform: translateX(-50%);
  width: 110px;
  height: 26px;
  background: #050608;
  border-radius: 13px;
  z-index: 2;
}
.phone-screen {
  background: var(--c-bg);
  width: 100%;
  height: 100%;
  border-radius: 26px;
  overflow: hidden;
  position: relative;
  padding: 50px 16px 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.phone-row { display: flex; }
.phone-id {
  font-family: var(--font-mono);
  font-size: 9px;
  color: var(--c-text-3);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.phone-peril {
  margin-left: auto;
  font-family: var(--font-sans);
  font-size: 9px;
  color: var(--c-text-2);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 600;
}
.phone-prob {
  font-family: var(--font-sans);
  font-size: 48px;
  font-weight: 500;
  letter-spacing: -0.04em;
  line-height: 0.95;
  color: var(--c-text);
  font-variant-numeric: tabular-nums;
  display: flex;
  align-items: baseline;
}
.phone-prob .pct { font-size: 16px; color: var(--c-text-3); margin-left: 2px; }
.phone-delta {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--c-buy);
  font-variant-numeric: tabular-nums;
}
.phone-spark {
  margin-top: 8px;
  padding-top: 12px;
  border-top: 1px solid var(--c-border);
  height: 60px;
  display: flex; align-items: center;
  color: var(--c-text-2);
}
.phone-stats {
  margin-top: 8px;
  display: flex; flex-direction: column; gap: 7px;
}
.phone-stat { display: flex; justify-content: space-between; align-items: baseline; font-size: 11px; }
.phone-stat .k { color: var(--c-text-2); }
.phone-stat .v { font-family: var(--font-mono); color: var(--c-text); font-variant-numeric: tabular-nums; font-weight: 500; }

.phone-actions {
  margin-top: auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
}
.phone-action {
  padding: 12px 0;
  text-align: center;
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: -0.005em;
}
.phone-action.buy {
  background: color-mix(in srgb, var(--c-buy) 16%, var(--c-bg));
  color: var(--c-buy);
}
.phone-action.sell {
  background: color-mix(in srgb, var(--c-sell) 16%, var(--c-bg));
  color: var(--c-sell);
}

/* ============================================================
   API / CODE SECTION
   ============================================================ */
.api-section {
  background: var(--c-bg-2);
  border-top: 1px solid var(--c-border);
  border-bottom: 1px solid var(--c-border);
}
.api-grid {
  max-width: 1280px;
  margin: 0 auto;
  padding: 100px 28px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: center;
}
.code-block {
  background: var(--c-bg);
  border: 1px solid var(--c-border);
  padding: 24px;
  font-family: var(--font-mono);
  font-size: 12.5px;
  line-height: 1.65;
  color: var(--c-text-2);
  overflow-x: auto;
  letter-spacing: 0;
}
.code-block .c-method { color: var(--c-accent); }
.code-block .c-key { color: var(--c-buy); }
.code-block .c-str { color: #FFB454; }
.code-block .c-num { color: #FFB454; }
.code-block .c-comment { color: var(--c-text-4); font-style: italic; }

/* ============================================================
   CTA strip
   ============================================================ */
.final-cta {
  border-top: 1px solid var(--c-border);
  padding: 120px 28px;
  text-align: center;
}
.final-cta-inner {
  max-width: 720px;
  margin: 0 auto;
}
.final-cta-h {
  font-size: 56px;
  font-weight: 500;
  letter-spacing: -0.04em;
  line-height: 1;
  color: var(--c-text);
  margin-bottom: 20px;
}
.final-cta-sub {
  font-size: 16px;
  color: var(--c-text-2);
  margin-bottom: 32px;
  line-height: 1.55;
}

/* ============================================================
   FOOTER
   ============================================================ */
.footer {
  border-top: 1px solid var(--c-border);
  background: var(--c-bg-2);
  padding: 40px 28px;
}
.footer-inner {
  max-width: 1280px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
  flex-wrap: wrap;
}
.footer-brand {
  display: flex; align-items: center; gap: 10px;
  font-family: var(--font-sans); font-weight: 700; font-size: 14px;
  letter-spacing: -0.025em;
}
.footer-meta {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--c-text-4);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.footer-links { display: flex; gap: 28px; }
.footer-links a {
  font-size: 13px;
  color: var(--c-text-3);
  font-weight: 500;
}
.footer-links a:hover { color: var(--c-text); }