/* ============================================================
   MCP WIKI — section & component styles
   ============================================================ */

/* ===================== NAV ===================== */
.nav {
  position: sticky; top: 0; z-index: 60;
  background: color-mix(in srgb, var(--bg) 82%, transparent);
  backdrop-filter: blur(14px) saturate(1.2);
  border-bottom: 1px solid transparent;
  transition: border-color .25s, background .25s;
}
.nav.scrolled { border-bottom-color: var(--line); }
.nav-inner { display: flex; align-items: center; gap: 28px; height: 70px; }
.brand { display: flex; align-items: center; gap: 10px; font-family: var(--serif); font-weight: 400; font-size: 22px; letter-spacing: -0.01em; white-space: nowrap; }

/* animated mark: trend line draws in, breakout dot pings */
.mark { width: 29px; height: 29px; flex: none; }
.mark rect { fill: var(--terra); transition: fill .2s; }
.mark .mk-line {
  fill: none; stroke: #FFF3E6; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 24; animation: mkdraw 1.5s .25s both cubic-bezier(.5,0,.2,1);
}
.mark .mk-dot { fill: #FFF3E6; transform-origin: 22.4px 6.6px; animation: mkping 3.2s 1.8s infinite; }
.brand:hover .mark rect { fill: var(--terra-deep); }
@keyframes mkdraw { from { stroke-dashoffset: 24; } to { stroke-dashoffset: 0; } }
@keyframes mkping {
  0%, 58% { transform: scale(1); opacity: 1; }
  74% { transform: scale(1.65); opacity: .45; }
  90%, 100% { transform: scale(1); opacity: 1; }
}
.nav-links { display: flex; align-items: center; gap: 4px; margin-left: 8px; }
.nav-links a {
  font-size: 15px; font-weight: 500; color: var(--ink-soft);
  padding: 8px 13px; border-radius: 9px; transition: background .15s, color .15s;
}
.nav-links a:hover { color: var(--ink); background: var(--bg-2); }
.nav-right { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.nav-right .login { font-size: 15px; font-weight: 500; padding: 8px 12px; color: var(--ink-soft); white-space: nowrap; }
.nav-right .login:hover { color: var(--ink); }
.nav-toggle { display: none; width: 42px; height: 42px; border-radius: 10px; border: 1px solid var(--line); align-items:center; justify-content:center; }
.nav-toggle span, .nav-toggle span::before, .nav-toggle span::after {
  content:""; display:block; width:17px; height:2px; background: var(--ink); border-radius:2px; position: relative;
}
.nav-toggle span::before { position:absolute; top:-5px; } .nav-toggle span::after { position:absolute; top:5px; }

/* ===================== HERO ===================== */
.hero { position: relative; padding: 72px 0 40px; }
.hero::before {
  content: ""; position: absolute; top: -140px; right: -180px; width: 620px; height: 620px;
  border-radius: 50%; pointer-events: none; z-index: -1;
  background: radial-gradient(circle, color-mix(in srgb, var(--terra) 20%, transparent), transparent 64%);
  filter: blur(46px);
  animation: heroglow 8s ease-in-out infinite alternate;
}
@keyframes heroglow { from { opacity: .45; transform: scale(.94); } to { opacity: 1; transform: scale(1.06); } }
.hero-grid {
  display: grid; grid-template-columns: 1.15fr 0.85fr; gap: 56px; align-items: center;
}
.hero-copy .badge {
  display:inline-flex; align-items:center; gap:8px;
  font-size:13px; font-family:var(--mono); letter-spacing:.02em;
  background: var(--surface-2); border:1px solid var(--line);
  padding:6px 12px 6px 8px; border-radius:8px; color: var(--ink-soft); margin-bottom: 26px; white-space: nowrap;
}
.hero-copy .badge b { color: var(--ink); font-weight:600; }
.hero-copy .badge .pill { background: var(--terra); color:#fff; font-weight:600; padding:2px 8px; border-radius:5px; font-size:11px; }
.hero h1 { margin: 6px 0 0; padding-bottom: .18em; }
.hero .lead { margin-top: 26px; }
.hero-cta { display: flex; align-items: center; gap: 14px; margin-top: 34px; flex-wrap: wrap; }
.hero-note { margin-top: 22px; font-size: 13.5px; color: var(--muted); display:flex; align-items:center; gap:8px; font-family: var(--mono); }
.hero-note svg { width:15px; height:15px; color: var(--olive); }

/* terminal card */
.terminal {
  background: #211C18;
  border-radius: 16px;
  border: 1px solid #3A332B;
  box-shadow: var(--shadow-lg);
  overflow: hidden;
  font-family: var(--mono);
  font-size: 13.5px;
  transform: rotate(.4deg);
}
.term-bar { display:flex; align-items:center; gap:8px; padding: 12px 16px; background:#1A1612; border-bottom:1px solid #322B24; }
.term-bar .tdot { width:11px; height:11px; border-radius:50%; }
.term-bar .tdot.r{ background:#E06A52;} .term-bar .tdot.y{ background:#E0B152;} .term-bar .tdot.g{ background:#7FAE5A;}
.term-bar .tlabel { margin-left: 10px; color:#897E70; font-size:12px; }
.term-bar .tcredit { margin-left:auto; color:#897E70; font-size:11.5px; }
.term-body { padding: 18px 20px 22px; color:#D9CFC1; line-height: 1.85; overflow-x:auto; }
.term-body .prompt { color:#C99; } /* unused fallback */
.term-body .cmd { color:#EDE3D5; }
.term-body .flag { color:#C8A06A; }
.term-body .str { color:#A9C08A; }
.term-body .key { color:#7FA6D6; }
.term-body .num { color:#E0A06A; }
.term-body .bool{ color:#C98AC0; }
.term-body .cm  { color:#6E6256; font-style: italic; }
.term-body .ok  { color:#7FAE5A; }
.term-line { white-space: pre; }
.term-typed { border-right: 2px solid #C8A06A; }

/* ===================== LIVE CONSOLE ===================== */
.console {
  background: #211C18;
  border-radius: 18px;
  border: 1px solid #3A332B;
  box-shadow: var(--shadow-lg);
  overflow: hidden;
  font-family: var(--mono);
  transform: rotate(.35deg);
}
.console-bar { display:flex; align-items:center; gap:12px; padding: 13px 18px; background:#1A1612; border-bottom:1px solid #322B24; font-size:12px; color:#897E70; }
.console-bar .live { display:inline-flex; align-items:center; gap:7px; color:#E0907A; font-weight:500; letter-spacing:.1em; }
.live-dot { width:8px; height:8px; border-radius:50%; background:#E0684E; box-shadow:0 0 0 0 rgba(224,104,78,.6); animation: livepulse 1.8s infinite; }
@keyframes livepulse { 0%{ box-shadow:0 0 0 0 rgba(224,104,78,.55);} 70%{ box-shadow:0 0 0 7px rgba(224,104,78,0);} 100%{ box-shadow:0 0 0 0 rgba(224,104,78,0);} }
.console-bar .console-title { letter-spacing:.02em; }
.console-bar .console-meta { margin-left:auto; }
.console-body { padding: 20px 20px 18px; }
.metric { display:grid; grid-template-columns: 1fr 220px; gap: 16px; align-items:center; padding-bottom: 20px; border-bottom:1px solid #322B24; }
.metric-label { color:#897E70; font-size:11.5px; letter-spacing:.04em; }
.metric-value { color:#F0E7D9; font-family:var(--serif); font-size: 46px; line-height:1; margin-top:8px; display:flex; align-items:baseline; gap:6px; }
.metric-value .metric-unit { font-family:var(--mono); font-size:13px; color:#897E70; }
.metric-delta { margin-top:10px; font-size:12.5px; color:#8FB36A; display:flex; align-items:center; gap:6px; }
.metric-delta .metric-base { color:#6E6256; }
.spark { width:220px; height:74px; }
.spark-line { stroke-dasharray: 600; stroke-dashoffset: 600; animation: draw 1.8s .3s ease forwards; }
.spark-area { opacity:0; animation: fadein .9s 1.4s ease forwards; }
@keyframes draw { to { stroke-dashoffset: 0; } }
@keyframes fadein { to { opacity:1; } }

.trend-head { display:flex; justify-content:space-between; font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; color:#6E6256; padding: 16px 2px 12px; }
.trend-list { display:flex; flex-direction:column; gap:11px; }
.trend-row { display:grid; grid-template-columns: 16px 1fr 64px; gap:12px; align-items:center; }
.trend-row .tr-rank { font-size:12px; color:#6E6256; }
.trend-row .tr-main { min-width:0; }
.trend-row .tr-tag { color:#E7DDCE; font-size:13.5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.trend-row .tr-sub { display:flex; align-items:center; gap:7px; margin-top:5px; }
.trend-row .tr-plat { font-size:10.5px; color:#897E70; }
.trend-row .tr-bar { flex:1; height:4px; border-radius:3px; background:#322B24; overflow:hidden; }
.trend-row .tr-bar i { display:block; height:100%; border-radius:3px; background: var(--terra); width:0; transition: width .9s cubic-bezier(.2,.7,.2,1); }
.trend-row .tr-vel { text-align:right; font-size:13px; color:#C8A06A; font-variant-numeric: tabular-nums; }
.trend-row .tr-vel .up { color:#8FB36A; } .trend-row .tr-vel .dn { color:#D08A72; }

/* ===================== NETWORKS MARQUEE ===================== */
.marquee-wrap { border-top:1px solid var(--line); border-bottom:1px solid var(--line); background: var(--surface); padding: 22px 0; overflow:hidden; }
.marquee-label { text-align:center; font-family:var(--mono); font-size:11.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); margin-bottom:16px; }
.marquee { position:relative; -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); }
.marquee-track { display:inline-flex; align-items:center; gap:26px; white-space:nowrap; animation: scrollx 32s linear infinite; will-change: transform; }
.marquee-track span { font-family:var(--serif); font-size:30px; color:var(--ink); letter-spacing:-.01em; }
.marquee-track span.d { color:var(--terra); font-family:var(--mono); font-size:18px; }
.marquee-wrap:hover .marquee-track { animation-play-state: paused; }
@keyframes scrollx { to { transform: translateX(-50%); } }

/* ===================== HERO RIGHT (config + console stacked) ===================== */
.hero-right { display:flex; flex-direction:column; gap: 16px; }
.hero-right .console { --rot: .3deg; transform: rotate(var(--rot)); animation: floaty 11s 1.4s ease-in-out infinite; }
.config-card { --rot: -.4deg; background:#211C18; border:1px solid #3A332B; border-radius:14px; overflow:hidden; box-shadow: var(--shadow); transform: rotate(var(--rot)); font-family: var(--mono); animation: floaty 9s ease-in-out infinite; }
@keyframes floaty {
  0%, 100% { transform: rotate(var(--rot)) translateY(0); }
  50% { transform: rotate(var(--rot)) translateY(-7px); }
}
.config-bar { display:flex; align-items:center; gap:10px; padding: 10px 14px; background:#1A1612; border-bottom:1px solid #322B24; font-size:11.5px; color:#897E70; }
.config-bar .ctag { color:#E0907A; font-weight:500; letter-spacing:.02em; }
.config-bar .cdot { width:7px; height:7px; border-radius:50%; background:#7FAE5A; }
.config-bar .cmeta { margin-left:auto; }
.config-body { padding: 14px 18px; font-size:12.5px; line-height:1.85; color:#D9CFC1; white-space:pre; overflow-x:auto; margin:0; }
.config-body .j-key { color:#7FA6D6; } .config-body .j-str { color:#A9C08A; } .config-body .j-punc { color:#897E70; }

/* ===================== STATS STRIP ===================== */
.stats { border-top:1px solid var(--line); border-bottom:1px solid var(--line); background: var(--bg-2); }
.stats-inner { display:grid; grid-template-columns: repeat(4, 1fr); }
.stat { padding: 30px 28px; border-right:1px solid var(--line); }
.stat:last-child { border-right:0; }
.stat .n { font-family: var(--serif); font-size: 44px; line-height:1; letter-spacing:-.02em; }
.stat .l { font-family: var(--mono); font-size:12px; letter-spacing:.08em; text-transform:uppercase; color: var(--muted); margin-top:9px; }

/* ===================== PRODUCTS ===================== */
.prod-head { display:grid; grid-template-columns: 1fr auto; gap: 24px; align-items:end; margin-bottom: 44px; }
.prod-head .lead { margin-top: 18px; }
.products { display:grid; grid-template-columns: repeat(3,1fr); gap: 20px; }
.prod {
  position: relative; padding: 28px 26px 26px;
  background: var(--surface); border:1px solid var(--line); border-radius: var(--r-lg);
  display:flex; flex-direction: column; min-height: 340px;
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s;
  overflow: hidden;
}
.prod::before {
  content:""; position:absolute; inset:0 0 auto 0; height:3px; background: var(--pa); opacity:.9;
}
.prod:hover { transform: translateY(-4px); box-shadow: var(--shadow); border-color: color-mix(in srgb, var(--pa) 40%, var(--line)); }
.prod .pico {
  width:46px; height:46px; border-radius:12px; display:flex; align-items:center; justify-content:center;
  background: color-mix(in srgb, var(--pa) 14%, var(--surface-2));
  color: var(--pa); border:1px solid color-mix(in srgb, var(--pa) 26%, transparent);
}
.prod .pico svg { width:24px; height:24px; }
.prod h3 { font-family: var(--serif); font-weight:400; font-size: 30px; letter-spacing:-.01em; margin: 20px 0 0; }
.prod .ptag { font-family:var(--mono); font-size:11.5px; letter-spacing:.1em; text-transform:uppercase; color: var(--pa); margin-top: 4px; }
.prod p { color: var(--ink-soft); font-size: 15.5px; margin-top: 12px; }
.prod .endpoints { margin-top: auto; padding-top: 18px; display:flex; flex-wrap:wrap; gap:7px; }
.prod .endpoints .e { font-family:var(--mono); font-size:11.5px; color: var(--ink-soft); background: var(--surface-2); border:1px solid var(--line); padding:4px 9px; border-radius:6px; }
.prod .plink { margin-top:18px; font-weight:600; font-size:14.5px; color: var(--pa); display:inline-flex; align-items:center; gap:7px; }
.prod .plink .arrow { transition: transform .2s; }
.prod:hover .plink .arrow { transform: translateX(4px); }

/* ===================== CAPABILITIES ===================== */
.caps { display:grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.cap {
  position:relative; padding: 30px 30px 28px;
  background: var(--surface); border:1px solid var(--line); border-radius: var(--r-lg);
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s;
  overflow:hidden;
}
.cap::after { content:""; position:absolute; left:0; top:0; bottom:0; width:3px; background:var(--terra); transform: scaleY(0); transform-origin: top; transition: transform .3s ease; }
.cap:hover { transform: translateY(-3px); box-shadow: var(--shadow); border-color: color-mix(in srgb, var(--terra) 35%, var(--line)); }
.cap:hover::after { transform: scaleY(1); }
.cap-ico { width:48px; height:48px; border-radius:13px; display:flex; align-items:center; justify-content:center; background: color-mix(in srgb, var(--terra) 12%, var(--surface-2)); color:var(--terra); border:1px solid color-mix(in srgb, var(--terra) 24%, transparent); transition: transform .25s ease; }
.cap:hover .cap-ico { transform: rotate(-4deg) scale(1.06); }
.cap-ico svg { width:25px; height:25px; }
.cap h3 { font-family:var(--serif); font-weight:400; font-size: 28px; letter-spacing:-.01em; margin: 12px 0 0; }
.cap h3 em { font-style: italic; color: var(--terra); }
.cap p { color: var(--ink-soft); font-size: 15.5px; margin-top: 11px; max-width: 46ch; }
.cap p b { color: var(--ink); font-weight:600; }
.cap-tool {
  display:inline-block; font-family:var(--mono); font-size:12.5px; color:var(--terra);
  background: color-mix(in srgb, var(--terra) 9%, var(--surface-2));
  border:1px solid color-mix(in srgb, var(--terra) 22%, transparent);
  padding:4px 10px; border-radius:6px; margin-top:18px; letter-spacing:.01em;
}
.cap-ask {
  margin-top:16px; font-family:var(--mono); font-size:13px; line-height:1.6; color:var(--ink-soft);
  border-left:2px solid color-mix(in srgb, var(--terra) 45%, var(--line));
  padding:5px 0 5px 14px;
}
.cap-ask::before { content:"› "; color:var(--terra); }

/* ===================== PRICING ===================== */
.pricing { background: var(--bg-2); border-top:1px solid var(--line); }
.pricing-top { text-align:center; display:flex; flex-direction:column; align-items:center; gap: 18px; margin-bottom: 40px; }
.pricing-top .lead { text-align:center; }

/* product selector tabs */
.selector { display:inline-flex; padding:5px; background: var(--surface-2); border:1px solid var(--line); border-radius: 999px; gap: 4px; }
.selector .tab {
  display:flex; align-items:center; gap:9px;
  font-size: 15px; font-weight:600; color: var(--ink-soft);
  padding: 10px 20px; border-radius:999px; transition: color .18s, background .18s;
  position: relative;
}
.selector .tab .tdot { width:9px; height:9px; border-radius:50%; background: currentColor; opacity:.5; }
.selector .tab[data-active="true"] { color:#fff; }
.selector .tab[data-active="true"].t-social { background: var(--terra); }
.selector .tab[data-active="true"].t-search { background: var(--olive); }
.selector .tab[data-active="true"].t-enrich { background: var(--indigo); }
.selector .tab[data-active="true"] .tdot { opacity:1; background:#fff; }

/* billing toggle */
.billing { display:inline-flex; align-items:center; gap:14px; font-size:14.5px; color: var(--ink-soft); }
.billing .sw { width:52px; height:30px; border-radius:999px; background: var(--line); position:relative; transition: background .2s; border:1px solid var(--line); }
.billing .sw::after { content:""; position:absolute; top:3px; left:3px; width:22px; height:22px; border-radius:50%; background: var(--surface-2); box-shadow: var(--shadow-sm); transition: transform .22s ease; }
.billing[data-annual="true"] .sw { background: var(--pa); }
.billing[data-annual="true"] .sw::after { transform: translateX(22px); }
.billing .save { font-family:var(--mono); font-size:11.5px; letter-spacing:.04em; color: var(--olive); background: color-mix(in srgb, var(--olive) 14%, var(--surface-2)); border:1px solid color-mix(in srgb,var(--olive) 30%, transparent); padding:3px 9px; border-radius:6px; }
.billing b { color: var(--ink); }

/* plan grid */
.plans { display:grid; grid-template-columns: repeat(4, 1fr); gap: 16px; align-items: stretch; }
.plans.plans-3 { grid-template-columns: repeat(3, 1fr); gap: 20px; max-width: 1040px; margin: 0 auto; }
.plan {
  background: var(--surface); border:1px solid var(--line); border-radius: 18px;
  padding: 26px 24px; display:flex; flex-direction:column;
  transition: border-color .2s, box-shadow .2s, transform .2s;
}
.plan.feature { background: var(--surface-2); border-color: color-mix(in srgb, var(--pa) 55%, var(--line)); box-shadow: var(--shadow); position: relative; }
.plan.feature::before {
  content: "Most popular"; position:absolute; top:-11px; left:24px;
  font-family:var(--mono); font-size:11px; letter-spacing:.08em; text-transform:uppercase;
  background: var(--pa); color:#fff; padding:4px 11px; border-radius:6px;
}
.plan .pname { font-family: var(--mono); font-size:12.5px; letter-spacing:.1em; text-transform:uppercase; color: var(--pa); }
.plan .pdesc { font-size:13.5px; color: var(--muted); margin-top:8px; min-height: 38px; }
.plan .price { display:flex; align-items:baseline; gap:6px; margin-top: 14px; }
.plan .price .cur { font-family:var(--serif); font-size:24px; align-self:flex-start; margin-top:8px; }
.plan .price .amt { font-family:var(--serif); font-size: 56px; line-height:1; letter-spacing:-.02em; }
.plan .price .per { font-size:13.5px; color: var(--muted); }
.plan .quota { margin-top:12px; font-size:14px; color: var(--ink-soft); }
.plan .quota b { color: var(--ink); font-weight:600; }
.plan .pcta { margin-top: 20px; }
.plan .pcta .btn { width:100%; justify-content:center; }
.plan ul { list-style:none; margin-top: 22px; display:flex; flex-direction:column; gap:11px; }
.plan ul li { display:flex; gap:10px; font-size:14.5px; color: var(--ink-soft); align-items:flex-start; }
.plan ul li svg { width:16px; height:16px; color: var(--pa); flex:none; margin-top:3px; }
.plan ul li.muted { color: var(--muted); } .plan ul li.muted svg { color: var(--muted); opacity:.6; }
.price-foot { text-align:center; margin-top: 26px; font-family:var(--mono); font-size:13px; color: var(--muted); }

/* ===================== FEATURES (numbered) ===================== */
.feat-grid { display:grid; grid-template-columns: repeat(3,1fr); gap: 0; border:1px solid var(--line); border-radius: var(--r-lg); overflow:hidden; background: var(--surface); }
.feat {
  padding: 34px 30px 36px; border-right:1px solid var(--line); border-bottom:1px solid var(--line);
  transition: background .2s;
}
.feat:hover { background: var(--surface-2); }
.feat-grid .feat:nth-child(3n) { border-right:0; }
.feat-grid .feat:nth-child(n+4) { } /* keep borders */
.feat .fnum { font-family: var(--mono); font-size:12.5px; color: var(--terra); letter-spacing:.06em; }
.feat h4 { font-family: var(--serif); font-weight:400; font-size: 26px; letter-spacing:-.01em; margin: 16px 0 0; }
.feat p { color: var(--ink-soft); font-size: 15px; margin-top: 10px; }
.feat .ftags { margin-top:16px; display:flex; flex-wrap:wrap; gap:6px; }
.feat .ftags span { font-family:var(--mono); font-size:11px; color: var(--muted); background: var(--bg-2); padding:3px 8px; border-radius:5px; }

/* ===================== FAQ ===================== */
.faq-grid { display:grid; grid-template-columns: 0.8fr 1.2fr; gap: 56px; }
.faq-list { display:flex; flex-direction:column; }
.faq-item { border-top:1px solid var(--line); }
.faq-item:last-child { border-bottom:1px solid var(--line); }
.faq-q { width:100%; text-align:left; display:flex; align-items:center; gap:18px; padding: 22px 4px; font-size:18px; font-weight:600; color: var(--ink); }
.faq-q .qmark { margin-left:auto; width:24px; height:24px; flex:none; position:relative; transition: transform .25s; }
.faq-q .qmark::before, .faq-q .qmark::after { content:""; position:absolute; background: var(--pa); border-radius:2px; }
.faq-q .qmark::before { top:11px; left:3px; right:3px; height:2px; }
.faq-q .qmark::after  { left:11px; top:3px; bottom:3px; width:2px; transition: opacity .25s, transform .25s; }
.faq-item[data-open="true"] .qmark::after { opacity:0; transform: rotate(90deg); }
.faq-a { max-height:0; overflow:hidden; transition: max-height .3s ease; }
.faq-a p { color: var(--ink-soft); font-size:15.5px; padding: 0 4px 24px; max-width: 60ch; }

/* ===================== CTA band ===================== */
.cta-band { background: var(--ink); color: var(--bg); border-radius: var(--r-lg); padding: 64px 56px; display:grid; grid-template-columns: 1.2fr auto; gap:36px; align-items:center; }
.cta-band h2 { font-family: var(--serif); font-weight:400; font-size: clamp(34px,4.4vw,56px); line-height:1.0; letter-spacing:-.015em; }
.cta-band h2 em { font-style:italic; color: var(--terra-deep); }
.cta-band p { color: #5C5244; margin-top: 16px; max-width: 46ch; }
.cta-band .actions { display:flex; flex-direction:column; gap:12px; }
.cta-band .btn-light { background: var(--bg); color: var(--ink); }
.cta-band .btn-line { border:1px solid #4A423A; color: var(--bg); }

/* ===================== FOOTER ===================== */
.footer { padding: 70px 0 40px; border-top:1px solid var(--line); }
.foot-grid { display:grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 40px; }
.foot-brand p { color: var(--ink-soft); font-size:14.5px; margin-top:16px; max-width: 34ch; }
.foot-col h5 { font-family:var(--mono); font-size:12px; letter-spacing:.1em; text-transform:uppercase; color: var(--muted); margin-bottom:16px; }
.foot-col a { display:block; color: var(--ink-soft); font-size:14.5px; padding:6px 0; transition: color .15s; }
.foot-col a:hover { color: var(--terra); }
.foot-bottom { display:flex; align-items:center; justify-content:space-between; gap:20px; margin-top: 54px; padding-top: 26px; border-top:1px solid var(--line); flex-wrap:wrap; }
.foot-bottom .legal { font-size:13.5px; color: var(--muted); }
.foot-status { font-family:var(--mono); font-size:12.5px; color: var(--muted); display:flex; align-items:center; gap:9px; }
.foot-status .pulse { width:8px; height:8px; border-radius:50%; background: var(--olive); box-shadow:0 0 0 0 color-mix(in srgb,var(--olive) 60%,transparent); animation: pulse 2.4s infinite; }
@keyframes pulse { 0%{ box-shadow:0 0 0 0 color-mix(in srgb,var(--olive) 55%,transparent);} 70%{ box-shadow:0 0 0 8px transparent;} 100%{ box-shadow:0 0 0 0 transparent;} }

/* ===================== reveal anim ===================== */
.reveal { opacity:0; transform: translateY(18px); transition: opacity .7s cubic-bezier(.2,.6,.2,1), transform .7s cubic-bezier(.2,.6,.2,1); }
.reveal.in { opacity:1; transform:none; }

/* ===================== reduced motion ===================== */
@media (prefers-reduced-motion: reduce) {
  .marquee-track { animation: none; }
  .spark-line { animation: none; stroke-dashoffset: 0; }
  .spark-area { animation: none; opacity: 1; }
  .live-dot { animation: none; }
  .reveal { transition: none; }
  .hero::before, .config-card, .hero-right .console { animation: none; }
  .mark .mk-line { animation: none; stroke-dashoffset: 0; }
  .mark .mk-dot { animation: none; }
}

/* ===================== RESPONSIVE ===================== */
@media (max-width: 960px) {
  .hero-grid { grid-template-columns: 1fr; gap: 40px; }
  .terminal { transform: none; }
  .products, .feat-grid { grid-template-columns: 1fr 1fr; }
  .caps { grid-template-columns: 1fr; }
  .plans.plans-3 { grid-template-columns: 1fr; max-width: 440px; }
  .feat-grid .feat:nth-child(3n) { border-right:1px solid var(--line); }
  .feat-grid .feat:nth-child(2n) { border-right:0; }
  .plans { grid-template-columns: 1fr 1fr; }
  .faq-grid { grid-template-columns: 1fr; gap: 28px; }
  .foot-grid { grid-template-columns: 1fr 1fr; gap: 32px; }
  .cta-band { grid-template-columns: 1fr; }
  .stats-inner { grid-template-columns: 1fr 1fr; }
  .stat:nth-child(2){ border-right:0; } .stat:nth-child(1),.stat:nth-child(2){ border-bottom:1px solid var(--line); }
}
@media (max-width: 720px) {
  .nav-links, .nav-right .login { display:none; }
  .nav-toggle { display:flex; }
  .wrap { padding: 0 20px; }
  .section { padding: 64px 0; }
  .products, .feat-grid, .plans { grid-template-columns: 1fr; }
  .metric { grid-template-columns: 1fr; }
  .spark { width:100%; }
  .feat-grid .feat { border-right:0 !important; }
  .prod-head { grid-template-columns: 1fr; }
  .selector { flex-wrap: wrap; justify-content:center; }
  .cta-band { padding: 40px 28px; }
}