/*
 * SkinsIQ marketing site — same design language as the terminal app
 * (@skiniq/ui tailwind-preset): flat near-black "Apex/Scan Eye" ink, ONE signal
 * green accent, Chakra Petch display + JetBrains Mono data. No gradients, no
 * glow — minimal fintech. Tokens mirror packages/ui/tailwind-preset.cjs.
 */

/* ---- self-hosted brand fonts (vendored from @skiniq/ui) ---- */
@font-face { font-family:"JetBrains Mono"; font-weight:400; font-display:swap; src:url("./fonts/jetbrains-mono-400.woff2") format("woff2"); }
@font-face { font-family:"JetBrains Mono"; font-weight:500; font-display:swap; src:url("./fonts/jetbrains-mono-500.woff2") format("woff2"); }
@font-face { font-family:"JetBrains Mono"; font-weight:700; font-display:swap; src:url("./fonts/jetbrains-mono-700.woff2") format("woff2"); }
@font-face { font-family:"Chakra Petch"; font-weight:500; font-display:swap; src:url("./fonts/chakra-petch-500.woff2") format("woff2"); }
@font-face { font-family:"Chakra Petch"; font-weight:600; font-display:swap; src:url("./fonts/chakra-petch-600.woff2") format("woff2"); }
@font-face { font-family:"Chakra Petch"; font-weight:700; font-display:swap; src:url("./fonts/chakra-petch-700.woff2") format("woff2"); }

:root {
  --bg:#090c12; --panel:#0e131c; --panel2:#151d29; --edge:#212c3b;
  --ink:#e6eaef; --dim:#8a9cb4; --muted:#5f7187;
  --accent:#5fbe8a; --accentDim:#36795a; --warm:#c9a24b; --bad:#e8615f;
  --mono:"JetBrains Mono",ui-monospace,monospace;
  --display:"Chakra Petch",ui-sans-serif,system-ui,sans-serif;
  --maxw:1080px;
  color-scheme:dark;
}

* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body {
  margin:0; background:var(--bg); color:var(--ink);
  font-family:var(--display); font-weight:500;
  -webkit-font-smoothing:antialiased; line-height:1.55;
}
a { color:inherit; text-decoration:none; }
.mono { font-family:var(--mono); font-variant-numeric:tabular-nums; }

.wrap { max-width:var(--maxw); margin:0 auto; padding:0 24px; }

/* micro-label: the "terminal" tell — mono, uppercase, tracked */
.kicker {
  font-family:var(--mono); font-size:11px; font-weight:500;
  letter-spacing:.18em; text-transform:uppercase; color:var(--accent);
}
.label {
  font-family:var(--mono); font-size:10.5px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--muted);
}

/* ---- nav ---- */
header.nav {
  position:sticky; top:0; z-index:20;
  background:rgba(9,12,18,.82); backdrop-filter:blur(8px);
  border-bottom:1px solid var(--edge);
}
.nav-row { display:flex; align-items:center; gap:24px; height:60px; }
.brand { display:flex; align-items:center; gap:10px; font-family:var(--display); font-weight:600; font-size:18px; letter-spacing:-.01em; }
.brand .iq { color:var(--accent); }
.nav-links { margin-left:auto; display:flex; align-items:center; gap:28px; }
.nav-links a { font-size:14px; color:var(--dim); }
.nav-links a:hover { color:var(--ink); }

/* ---- buttons ---- */
.btn {
  display:inline-flex; align-items:center; gap:8px;
  font-family:var(--display); font-weight:600; font-size:14px;
  padding:10px 18px; border-radius:8px; border:1px solid transparent;
  cursor:pointer; transition:background .15s,border-color .15s,color .15s,transform .05s;
}
.btn:active { transform:translateY(1px); }
.btn-primary { background:var(--accent); color:#06140d; }
.btn-primary:hover { background:#74d3a0; }
.btn-ghost { border-color:var(--edge); color:var(--ink); background:transparent; }
.btn-ghost:hover { border-color:var(--accentDim); color:var(--accent); }
.btn-sm { padding:8px 14px; font-size:13px; }

/* ---- hero ---- */
.hero { position:relative; overflow:hidden; border-bottom:1px solid var(--edge); }
.hero-grid {
  display:grid; grid-template-columns:1.1fr .9fr; gap:56px; align-items:center;
  padding:84px 0 92px;
}
.hero h1 {
  font-family:var(--display); font-weight:700; font-size:clamp(34px,4.4vw,52px);
  line-height:1.07; letter-spacing:-.02em; margin:18px 0 18px; color:var(--ink);
}
.hero h1 .em { color:var(--accent); }
.hero p.lede { color:var(--dim); font-size:17px; max-width:30em; margin:0 0 28px; }
.cta-row { display:flex; gap:12px; flex-wrap:wrap; align-items:center; }
.hero-meta { margin-top:20px; color:var(--muted); font-size:12px; }
.hero-meta b { color:var(--dim); font-weight:500; }
/* faint brand watermark behind hero */
.hero-watermark { position:absolute; right:-60px; top:-40px; color:#0e131c; opacity:.6; pointer-events:none; }

/* ---- product glimpse card (offer) ---- */
.offer {
  background:var(--panel); border:1px solid var(--edge); border-radius:12px;
  box-shadow:0 1px 2px rgba(0,0,0,.25); padding:18px; width:100%;
}
.offer-head { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; margin-bottom:14px; }
.offer-name { font-family:var(--display); font-weight:600; font-size:16px; }
.offer-sub { color:var(--muted); font-size:12px; margin-top:2px; }
.chip {
  font-family:var(--mono); font-size:10.5px; letter-spacing:.04em; color:var(--rarity,#8847ff);
  border:1px solid #2a2350; background:#150f29; padding:3px 8px; border-radius:6px; white-space:nowrap;
}
.offer-rows { display:flex; flex-direction:column; gap:1px; background:var(--edge); border:1px solid var(--edge); border-radius:8px; overflow:hidden; }
.orow { display:flex; justify-content:space-between; align-items:baseline; gap:16px; background:var(--panel2); padding:10px 12px; }
.orow .k { font-family:var(--mono); font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); }
.orow .v { font-family:var(--mono); font-weight:500; font-size:14px; color:var(--ink); }
.orow .v.pos { color:var(--accent); }
.verdict {
  margin-top:14px; display:flex; align-items:center; justify-content:space-between;
  border:1px solid var(--accentDim); border-radius:8px; padding:10px 12px; background:rgba(95,190,138,.06);
}
.verdict .pill { font-family:var(--mono); font-weight:700; font-size:12px; letter-spacing:.16em; color:var(--accent); }
.verdict .why { color:var(--dim); font-size:12px; }

/* ---- section scaffolding ---- */
section { padding:76px 0; border-bottom:1px solid var(--edge); }
.sec-head { max-width:34em; margin-bottom:40px; }
.sec-head h2 { font-family:var(--display); font-weight:700; font-size:clamp(26px,3vw,34px); letter-spacing:-.015em; margin:12px 0 10px; }
.sec-head p { color:var(--dim); margin:0; font-size:16px; }

/* ---- features ---- */
.features { display:grid; grid-template-columns:repeat(2,1fr); gap:16px; }
.feat { background:var(--panel); border:1px solid var(--edge); border-radius:12px; padding:22px; }
.feat .fnum { font-family:var(--mono); font-size:11px; letter-spacing:.16em; color:var(--accentDim); }
.feat h3 { font-family:var(--display); font-weight:600; font-size:18px; margin:14px 0 8px; }
.feat p { color:var(--dim); font-size:14.5px; margin:0; }

/* ---- pricing ---- */
.price-wrap { display:grid; grid-template-columns:1fr 1fr; gap:40px; align-items:center; }
.plan { background:var(--panel); border:1px solid var(--edge); border-radius:14px; padding:30px; }
.plan.featured { border-color:var(--accentDim); box-shadow:0 0 0 1px rgba(95,190,138,.18); }
.plan .ptag { display:flex; align-items:center; justify-content:space-between; }
.price { display:flex; align-items:baseline; gap:8px; margin:18px 0 6px; }
.price .amt { font-family:var(--mono); font-weight:700; font-size:46px; letter-spacing:-.02em; }
.price .per { color:var(--muted); font-family:var(--mono); font-size:14px; }
.plan .trial { color:var(--dim); font-size:13px; margin:0 0 22px; }
.plan .btn { width:100%; justify-content:center; }
.flist { list-style:none; margin:24px 0 0; padding:0; display:flex; flex-direction:column; gap:11px; }
.flist li { display:flex; gap:11px; align-items:flex-start; font-size:14.5px; color:var(--ink); }
.flist svg { flex:0 0 auto; margin-top:3px; }
.flist .muted { color:var(--muted); }

/* ---- download ---- */
.dl { display:flex; gap:14px; flex-wrap:wrap; align-items:center; margin-top:6px; }
.dl-note { color:var(--muted); font-size:12.5px; margin-top:18px; }
.dl-note code { font-family:var(--mono); color:var(--dim); }
.soon { color:var(--muted); font-size:13px; margin-top:14px; }
.soon a { color:var(--accent); }
.soon a:hover { text-decoration:underline; }

/* ---- footer ---- */
footer { padding:40px 0 56px; }
.foot-row { display:flex; align-items:center; gap:18px; flex-wrap:wrap; color:var(--muted); font-size:13px; }
.foot-row .brand { font-size:16px; }
.foot-links { margin-left:auto; display:flex; gap:22px; }
.foot-links a:hover { color:var(--ink); }

/* ---- responsive ---- */
/* skinledger-style ambient glow in the hero corner */
.hero::before {
  content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(58% 62% at 80% 12%, rgba(95,190,138,.10), transparent 68%);
}

/* offer card: batch strip (sells the bulk-open angle) */
.batchbar {
  margin-top:12px; display:flex; align-items:center; justify-content:space-between;
  font-family:var(--mono); font-size:11px; letter-spacing:.05em; color:var(--muted);
  border-top:1px dashed var(--edge); padding-top:11px;
}
.batchbar b { color:var(--dim); font-weight:500; }
.batchbar .accept { color:var(--accent); }

/* ---- pricing-sources strip: a single readout line, not a logo cloud ---- */
.markets { border-bottom:1px solid var(--edge); padding:20px 0; }
.srcline { display:flex; align-items:baseline; flex-wrap:wrap; gap:6px 14px; }
.srcline .label { flex:0 0 auto; }
.srcs { font-size:13px; color:var(--dim); letter-spacing:.01em; }
.srcnote { color:var(--muted); font-size:12.5px; }

/* ---- the loop: one connected terminal rail, not three marketing cards ---- */
.flow {
  list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:repeat(3,1fr);
  border:1px solid var(--edge); border-radius:12px;
  background:var(--panel);
}
.flow > li { padding:26px 24px; position:relative; }
.flow > li + li { border-left:1px solid var(--edge); }
/* node chip straddling each divider — reads as a pipe between stages */
.flow > li + li::before {
  content:"→"; position:absolute; left:-11px; top:24px;
  width:22px; height:22px; display:flex; align-items:center; justify-content:center;
  font-family:var(--mono); font-size:12px; color:var(--accent);
  background:var(--panel2); border:1px solid var(--edge); border-radius:50%;
}
.flow-cmd {
  display:block; font-family:var(--mono); font-weight:500; font-size:14.5px;
  color:var(--ink); letter-spacing:.01em; margin-bottom:11px;
}
.flow-cmd .p { color:var(--accent); margin-right:7px; }
.flow > li p { color:var(--dim); font-size:14px; line-height:1.55; margin:0; }

/* ---- feature checklist (skinledger-style green ticks) ---- */
.checklist { display:grid; grid-template-columns:1fr 1fr; gap:18px 30px; margin:0; padding:0; list-style:none; }
.checklist li { display:flex; gap:12px; align-items:flex-start; }
.checklist .ic { flex:0 0 auto; margin-top:2px; }
.checklist h4 { font-family:var(--display); font-weight:600; font-size:15.5px; margin:0 0 3px; }
.checklist p { color:var(--dim); font-size:13.5px; margin:0; line-height:1.5; }

/* ---- FAQ accordion ---- */
.faq { border-top:1px solid var(--edge); }
.faq details { border-bottom:1px solid var(--edge); }
.faq summary {
  list-style:none; cursor:pointer; padding:18px 4px; display:flex; align-items:center;
  justify-content:space-between; gap:16px;
  font-family:var(--display); font-weight:600; font-size:16px; color:var(--ink);
}
.faq summary::-webkit-details-marker { display:none; }
.faq summary::after { content:"+"; font-family:var(--mono); color:var(--muted); font-size:20px; line-height:1; }
.faq details[open] summary::after { content:"\2013"; color:var(--accent); }
.faq details p { color:var(--dim); font-size:14.5px; margin:0 4px 20px; max-width:62ch; }

@media (max-width:880px) {
  .hero-grid, .price-wrap { grid-template-columns:1fr; gap:40px; }
  .features { grid-template-columns:1fr; }
  .checklist { grid-template-columns:1fr; }
  .flow { grid-template-columns:1fr; }
  .flow > li + li { border-left:none; border-top:1px solid var(--edge); }
  .flow > li + li::before { content:"\2193"; left:24px; top:-11px; }
  .nav-links { gap:18px; }
  .nav-links .hide-sm { display:none; }
  .hero-grid { padding:56px 0 64px; }
  .hero-watermark { display:none; }
}