/* ===== Fintent — site styles ===== */
:root {
  --ink:    #0B1220;
  --paper:  #F6F2EA;
  --signal: #2B4BFF;
  --n-100: #ECE7DC; --n-200: #D9D3C6; --n-300: #B8B2A4;
  --n-400: #908A7C; --n-500: #6B6657; --n-600: #4A4639;
  --n-700: #2E2B22; --n-800: #1B1A14;

  --sans: 'Geist', 'Söhne', -apple-system, system-ui, sans-serif;
  --mono: 'Geist Mono', 'JetBrains Mono', ui-monospace, monospace;

  --maxw: 1280px;
  --gutter: clamp(24px, 5vw, 88px);
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  font-family: var(--sans);
  background: var(--ink);
  color: var(--paper);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ---------- surfaces ---------- */
.sec { position: relative; overflow: hidden; }
.sec.ink   { background: var(--ink);   color: var(--paper); }
.sec.paper { background: var(--paper); color: var(--ink); }
.wrap { max-width: var(--maxw); margin: 0 auto; padding-inline: var(--gutter); }
.pad  { padding-block: clamp(88px, 12vw, 176px); }

/* precision grid overlay */
.grid-ovl { position: absolute; inset: 0; pointer-events: none; background-size: 80px 80px; z-index: 0; }
.ink   .grid-ovl { background-image:
  linear-gradient(rgba(246,242,234,0.05) 1px, transparent 1px),
  linear-gradient(90deg, rgba(246,242,234,0.05) 1px, transparent 1px); }
.paper .grid-ovl { background-image:
  linear-gradient(rgba(11,18,32,0.04) 1px, transparent 1px),
  linear-gradient(90deg, rgba(11,18,32,0.04) 1px, transparent 1px); }
.wrap { position: relative; z-index: 1; }

/* ---------- type ---------- */
.eyebrow {
  font-family: var(--mono); font-weight: 500; font-size: 13px;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--signal);
  display: inline-flex; align-items: center; gap: 12px; margin: 0 0 28px;
}
.eyebrow .arw { font-weight: 600; }

.display {
  font-family: var(--sans); font-weight: 400;
  font-size: clamp(46px, 7vw, 104px); line-height: 0.96; letter-spacing: -0.035em;
  text-wrap: balance; margin: 0;
}
.h2 {
  font-family: var(--sans); font-weight: 500;
  font-size: clamp(34px, 4.4vw, 62px); line-height: 1.04; letter-spacing: -0.025em;
  text-wrap: balance; margin: 0; max-width: 20ch;
}
.bodyL {
  font-family: var(--sans); font-weight: 400;
  font-size: clamp(18px, 1.5vw, 22px); line-height: 1.5; letter-spacing: 0;
  text-wrap: pretty; margin: 0;
}
.muted-ink   { color: var(--n-500); }
.muted-paper { color: rgba(246,242,234,0.62); }

.pullquote {
  font-family: var(--sans); font-weight: 500;
  font-size: clamp(28px, 3.6vw, 48px); line-height: 1.14; letter-spacing: -0.02em;
  text-wrap: balance; margin: 0; max-width: 24ch;
}

/* cursor block */
.cur {
  display: inline-block; width: 0.30em; height: 0.82em; background: var(--signal);
  vertical-align: -0.04em; margin-left: 0.06em;
}
@keyframes blink { 50% { opacity: 0; } }
.blink { animation: blink 1.2s steps(2) infinite; }
@media (prefers-reduced-motion: reduce) { .blink { animation: none; } }

/* ---------- nav ---------- */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 50;
  display: flex; align-items: center; justify-content: space-between;
  padding: 20px var(--gutter);
  border-bottom: 1px solid transparent;
  transition: background 0.4s var(--ease), border-color 0.4s var(--ease), padding 0.4s var(--ease);
}
.nav.solid {
  background: rgba(11,18,32,0.82);
  backdrop-filter: blur(14px);
  border-bottom-color: rgba(246,242,234,0.16);
  padding-block: 14px;
}
.lockup { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; }
.lockup svg { display: block; }
.lockup .wm {
  font-family: var(--sans); font-weight: 500; font-size: 24px;
  letter-spacing: -0.045em; color: var(--paper); line-height: 1;
}
.lockup .wm .us { color: var(--signal); }
.navlinks { display: flex; align-items: center; gap: 32px; }
.navlinks a {
  font-family: var(--mono); font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase;
  color: rgba(246,242,234,0.68); text-decoration: none; transition: color 0.25s var(--ease);
  white-space: nowrap;
}
.navlinks a:hover { color: var(--paper); }
.nav-cta {
  font-family: var(--mono); font-size: 13px; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--paper); background: var(--signal); text-decoration: none;
  padding: 12px 20px; display: inline-flex; align-items: center; gap: 10px;
  transition: transform 0.25s var(--ease), background 0.25s var(--ease);
}
.nav-cta .arw { transition: transform 0.25s var(--ease); }
.nav-cta:hover { background: #1f3ce6; }
.nav-cta:hover .arw { transform: translateX(4px); }
@media (max-width: 1100px) { .navlinks .hide-sm { display: none; } }

/* ---------- hero ---------- */
.hero { min-height: 100svh; display: flex; align-items: center; padding-top: 120px; }
.hero-grid {
  display: grid; grid-template-columns: 1.15fr 0.85fr; gap: clamp(40px, 6vw, 96px);
  align-items: center; width: 100%;
}
.hero .eyebrow { font-size: 14px; }
.hero-sub { margin-top: 32px; max-width: 34ch; }
.cta-row { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 44px; }
.btn {
  font-family: var(--mono); font-size: 14px; letter-spacing: 0.04em;
  text-decoration: none; padding: 17px 26px; display: inline-flex; align-items: center; gap: 12px;
  transition: transform 0.25s var(--ease), background 0.25s var(--ease), color 0.25s var(--ease);
}
.btn .arw { transition: transform 0.25s var(--ease); }
.btn:hover .arw { transform: translateX(5px); }
.btn-primary { background: var(--signal); color: var(--paper); }
.btn-primary:hover { background: #1f3ce6; }
.btn-ghost { border: 1px solid rgba(246,242,234,0.28); color: var(--paper); }
.btn-ghost:hover { border-color: var(--paper); }
.paper .btn-ghost { border-color: rgba(11,18,32,0.28); color: var(--ink); }
.paper .btn-ghost:hover { border-color: var(--ink); }

/* data stream device */
.stream { border: 1px solid rgba(246,242,234,0.16); background: rgba(246,242,234,0.02); }
.stream-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 20px; border-bottom: 1px solid rgba(246,242,234,0.16);
}
.stream-head .lbl {
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase;
  color: rgba(246,242,234,0.55);
}
.live { display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase;
  color: rgba(246,242,234,0.75); }
.live .dot { width: 7px; height: 7px; background: var(--signal); border-radius: 50%; }
@keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.25; } }
.live .dot { animation: pulse 1.6s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) { .live .dot { animation: none; } }
.stream-body {
  height: 300px; overflow: hidden; padding: 16px 20px;
  font-family: var(--mono); font-size: 13px; line-height: 1.95;
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 12%, #000 88%, transparent);
          mask-image: linear-gradient(180deg, transparent, #000 12%, #000 88%, transparent);
}
.stream-body .row { color: rgba(246,242,234,0.72); white-space: pre; }
.stream-body .row .pre { color: var(--signal); }
.stream-body .row .up { color: var(--signal); }

/* ---------- generic section header ---------- */
.sec-head { max-width: 30ch; }
.sec-head.wide { max-width: 24ch; }

/* ---------- arrow list ---------- */
.alist { list-style: none; margin: 44px 0 0; padding: 0; display: grid; gap: 4px; max-width: 940px; }
.alist li {
  display: grid; grid-template-columns: 40px 1fr; align-items: baseline;
  font-size: clamp(19px, 2vw, 26px); line-height: 1.4; letter-spacing: -0.005em;
  padding: 22px 0; text-wrap: pretty;
}
.alist li + li { border-top: 1px solid; }
.ink   .alist li + li { border-color: rgba(246,242,234,0.14); }
.paper .alist li + li { border-color: rgba(11,18,32,0.12); }
.alist li .arw { font-family: var(--mono); font-weight: 600; color: var(--signal); font-size: 0.9em; }

/* ---------- cards ---------- */
.cards { display: grid; gap: 1px; margin-top: 64px; }
.cards.c3 { grid-template-columns: repeat(3, 1fr); }
.cards.c4 { grid-template-columns: repeat(4, 1fr); }
.cards.c2 { grid-template-columns: repeat(2, 1fr); }
.ink   .cards { background: rgba(246,242,234,0.14); }
.paper .cards { background: rgba(11,18,32,0.12); }
.card { padding: 40px 36px 44px; }
.ink   .card { background: var(--ink); }
.paper .card { background: var(--paper); }
.card .cnum {
  font-family: var(--mono); font-weight: 500; font-size: 14px; letter-spacing: 0.12em;
  color: var(--signal); margin-bottom: 40px;
}
.card .ct {
  font-family: var(--sans); font-weight: 500; font-size: clamp(22px, 2.1vw, 30px);
  line-height: 1.1; letter-spacing: -0.015em; margin: 0 0 14px; text-wrap: balance;
}
.card .cb { font-size: clamp(16px, 1.4vw, 19px); line-height: 1.45; }
.ink   .card .cb { color: rgba(246,242,234,0.66); }
.paper .card .cb { color: var(--n-500); }

/* ---------- comparison ---------- */
.compare { display: grid; grid-template-columns: 1fr 1fr; margin-top: 56px; max-width: 940px;
  border: 1px solid rgba(246,242,234,0.16); }
.paper .compare { border-color: rgba(11,18,32,0.12); }
.compare .col { padding: 40px 44px; }
.compare .col + .col { border-left: 1px solid rgba(246,242,234,0.16); }
.paper .compare .col + .col { border-left-color: rgba(11,18,32,0.12); }
.compare .clabel {
  font-family: var(--mono); font-size: 13px; letter-spacing: 0.12em; text-transform: uppercase;
  margin-bottom: 18px; color: rgba(246,242,234,0.55);
}
.paper .compare .clabel { color: var(--n-500); }
.compare .cval {
  font-family: var(--mono); font-weight: 400; font-size: clamp(28px, 3.2vw, 46px);
  letter-spacing: -0.02em; line-height: 1.05; font-variant-numeric: tabular-nums;
}
.compare .cval.strike { text-decoration: line-through; text-decoration-thickness: 3px;
  color: rgba(246,242,234,0.5); }
.paper .compare .cval.strike { color: var(--n-400); }
.compare .cval.win { color: var(--signal); }

/* ---------- process steps ---------- */
.steps { display: grid; grid-template-columns: repeat(5, 1fr); gap: 1px; margin-top: 64px;
  background: rgba(11,18,32,0.12); }
.ink .steps { background: rgba(246,242,234,0.14); }
.step { padding: 36px 28px 44px; background: var(--paper); }
.ink .step { background: var(--ink); }
.step .snum {
  font-family: var(--mono); font-weight: 500; font-size: 14px; letter-spacing: 0.12em;
  color: var(--signal); margin-bottom: 32px;
}
.step .st { font-family: var(--sans); font-weight: 500; font-size: clamp(20px,1.9vw,26px);
  margin: 0 0 12px; letter-spacing: -0.015em; }
.step .sb { font-size: 16px; line-height: 1.4; color: var(--n-500); }
.ink .step .sb { color: rgba(246,242,234,0.66); }

/* ---------- stats + rows ---------- */
.stats { display: flex; flex-wrap: wrap; gap: clamp(48px, 8vw, 120px); margin-top: 56px; }
.stat .sv {
  font-family: var(--mono); font-weight: 400; font-size: clamp(72px, 10vw, 148px);
  line-height: 0.9; letter-spacing: -0.03em; color: var(--signal);
  font-variant-numeric: tabular-nums;
}
.stat .sl {
  font-family: var(--mono); font-size: 14px; letter-spacing: 0.12em; text-transform: uppercase;
  margin-top: 16px; color: rgba(246,242,234,0.62);
}
.crows { margin-top: 60px; max-width: 1040px; }
.crow { display: grid; grid-template-columns: 0.9fr 1.1fr; align-items: baseline;
  padding: 26px 0; font-size: clamp(19px, 2vw, 26px); letter-spacing: -0.005em; }
.crow + .crow { border-top: 1px solid rgba(246,242,234,0.14); }
.crow .ck { font-weight: 500; }
.crow .cd { color: rgba(246,242,234,0.66); }

/* ---------- closing ---------- */
.close-title { font-family: var(--sans); font-weight: 400;
  font-size: clamp(44px, 6.4vw, 96px); line-height: 0.98; letter-spacing: -0.035em;
  text-wrap: balance; margin: 0; max-width: 16ch; }
.contact { font-family: var(--mono); font-size: clamp(16px, 1.5vw, 20px); line-height: 1.9;
  letter-spacing: 0.01em; margin-top: 56px; }
.contact .lead { font-size: 13px; letter-spacing: 0.12em; text-transform: uppercase;
  color: rgba(246,242,234,0.55); margin-bottom: 14px; }
.contact a { color: var(--paper); text-decoration: none; border-bottom: 1px solid rgba(43,75,255,0.6); }
.contact a:hover { color: var(--signal); }

/* ---------- testimonials ---------- */
.testi-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; margin-top: 64px; background: rgba(246,242,234,0.14); }
.testi { margin: 0; padding: 44px 40px; background: var(--ink); }
.testi .tt { font-family: var(--sans); font-weight: 600; font-size: clamp(18px, 1.6vw, 21px);
  color: var(--paper); letter-spacing: -0.01em; margin: 0 0 20px; text-wrap: balance; }
.testi .tq { font-size: clamp(16px, 1.35vw, 18px); line-height: 1.6; color: rgba(246,242,234,0.72);
  margin: 0 0 28px; text-wrap: pretty; }
.testi .ta { font-family: var(--mono); font-size: 13px; letter-spacing: 0.1em; text-transform: uppercase;
  color: rgba(246,242,234,0.55); font-style: normal; }

/* ---------- FAQ accordion ---------- */
.faq-list { margin-top: 56px; max-width: 1080px; }
.faq-item { border-top: 1px solid rgba(11,18,32,0.12); }
.faq-item:last-child { border-bottom: 1px solid rgba(11,18,32,0.12); }
.faq-q {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 28px;
  background: none; border: none; padding: 30px 2px; margin: 0; cursor: pointer; text-align: left;
  font-family: var(--sans); color: var(--ink);
}
.faq-q span:first-child {
  font-weight: 500; font-size: clamp(18px, 1.8vw, 24px); letter-spacing: -0.01em; line-height: 1.3;
}
.faq-icon {
  font-family: var(--mono); font-size: 26px; line-height: 1; color: var(--signal); flex: 0 0 auto;
  transition: transform 0.3s var(--ease);
}
.faq-item.open .faq-icon { transform: rotate(45deg); }
.faq-a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.4s var(--ease); }
.faq-a > div { overflow: hidden; }
.faq-item.open .faq-a { grid-template-rows: 1fr; }
.faq-a p {
  margin: 0 0 34px; padding-right: clamp(0px, 8vw, 90px);
  font-size: clamp(16px, 1.4vw, 19px); line-height: 1.55; color: var(--n-500);
}

/* ---------- footer ---------- */
.foot { border-top: 1px solid rgba(246,242,234,0.16); padding-block: 40px; }
.foot-in { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 20px; }
.foot .meta { font-family: var(--mono); font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase;
  color: rgba(246,242,234,0.5); }

/* ---------- scroll reveal ---------- */
[data-animate] { opacity: 0; transform: translateY(26px); transition: opacity 0.8s var(--ease), transform 0.8s var(--ease); transition-delay: var(--d, 0ms); }
[data-animate].in { opacity: 1; transform: none; }
.hairgrow { transform-origin: left center; }
@media (prefers-reduced-motion: reduce) {
  [data-animate] { opacity: 1 !important; transform: none !important; }
}

/* ---------- responsive ---------- */
@media (max-width: 960px) {
  .hero-grid { grid-template-columns: 1fr; }
  .stream { order: -1; }
  .stream-body { height: 220px; }
  .cards.c4 { grid-template-columns: repeat(2, 1fr); }
  .steps { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 620px) {
  .cards.c3, .cards.c4, .cards.c2, .testi-grid { grid-template-columns: 1fr; }
  .faq-q span:first-child { font-size: 18px; }
  .steps { grid-template-columns: 1fr; }
  .compare { grid-template-columns: 1fr; }
  .compare .col + .col { border-left: none; border-top: 1px solid rgba(246,242,234,0.16); }
  .crow { grid-template-columns: 1fr; gap: 6px; }
  .navlinks { gap: 20px; }
}