/* ============================================================
   COLDPOST — landing page styles
   Design DNA adapted from the provided Figma ("Premium SaaS")
   Inter type, near-black ink, gray support, electric green accent.
   ============================================================ */

:root {
  --ink:        #111827;   /* primary text / dark surfaces */
  --ink-2:      #1f2937;
  --ink-3:      #0c111b;   /* deepest band */
  --gray:       #4b5563;   /* body text */
  --gray-2:     #6b7280;
  --gray-3:     #9ca3af;   /* muted / captions */
  --line:       #e5e7eb;   /* hairline borders */
  --line-2:     #eef0f3;
  --bg:         #fafcfb;   /* page off-white */
  --bg-2:       #ffffff;
  --tint:       #f1fff8;   /* faint green wash */
  --accent:     #00ff87;   /* electric green — buttons, highlights */
  --accent-2:   #00e078;   /* hover */
  --accent-ink: #047a48;   /* legible green for text on white */
  --accent-deep:#053826;

  --radius:     16px;
  --radius-sm:  10px;
  --radius-xs:  8px;
  --shadow-sm:  0 1px 2px 0 rgba(0,0,0,.05);
  --shadow-md:  0 4px 16px -2px rgba(16,24,40,.08), 0 2px 6px -2px rgba(16,24,40,.05);
  --shadow-lg:  0 24px 60px -12px rgba(16,24,40,.18), 0 8px 24px -8px rgba(16,24,40,.10);
  --shadow-glow:0 20px 60px -16px rgba(0,255,135,.45);

  --maxw:       1216px;
  --ease:       cubic-bezier(.22,.61,.36,1);

  --sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --mono: "Geist Mono", "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

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

::selection { background: var(--accent); color: var(--ink); }

img { max-width: 100%; display: block; }

a { color: inherit; text-decoration: none; }

/* ---------- layout helpers ---------- */
.wrap { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 32px; }

.section { position: relative; }

.eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 13px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
  color: var(--accent-ink);
}
.eyebrow .dot { width: 7px; height: 7px; border-radius: 99px; background: var(--accent);
  box-shadow: 0 0 0 4px rgba(0,255,135,.18); }

h1,h2,h3 { margin: 0; letter-spacing: -.022em; color: var(--ink); text-wrap: balance; }

.h-section { font-size: clamp(30px, 3.4vw, 44px); font-weight: 800; line-height: 1.06; }
.sub-section { margin: 16px auto 0; max-width: 640px; font-size: 18px; line-height: 1.55;
  color: var(--gray); text-wrap: pretty; }

.center { text-align: center; }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  font-family: var(--sans); font-size: 15px; font-weight: 600; line-height: 1;
  padding: 0 20px; height: 46px; border-radius: var(--radius-xs);
  border: 1px solid transparent; cursor: pointer; white-space: nowrap;
  transition: transform .18s var(--ease), box-shadow .25s var(--ease), background .2s, border-color .2s, color .2s;
}
.btn svg { width: 17px; height: 17px; }
.btn-primary { background: var(--accent); color: var(--ink); box-shadow: var(--shadow-sm); }
.btn-primary:hover { background: var(--accent-2); transform: translateY(-1px); box-shadow: var(--shadow-glow); }
.btn-primary .arrow { transition: transform .25s var(--ease); }
.btn-primary:hover .arrow { transform: translateX(3px); }
.btn-ghost { background: var(--bg-2); color: var(--ink); border-color: var(--line); box-shadow: var(--shadow-sm); }
.btn-ghost:hover { border-color: #d4d8df; transform: translateY(-1px); box-shadow: var(--shadow-md); }
.btn-dark { background: var(--ink); color: #fff; }
.btn-dark:hover { background: #000; transform: translateY(-1px); }
.btn-on-dark { background: var(--accent); color: var(--ink); }
.btn-on-dark:hover { background: var(--accent-2); transform: translateY(-1px); box-shadow: var(--shadow-glow); }
.btn-sm { height: 38px; font-size: 14px; padding: 0 16px; }

/* ---------- nav ---------- */
.nav {
  position: sticky; top: 0; z-index: 60;
  background: rgba(250,252,251,.78);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color .25s, background .25s, box-shadow .25s;
}
.nav.scrolled { border-color: var(--line); box-shadow: var(--shadow-sm); background: rgba(250,252,251,.9); }
.nav-inner { display: flex; align-items: center; justify-content: space-between; height: 68px; }
.nav-links { display: flex; align-items: center; gap: 30px; }
.nav-link { font-size: 14.5px; font-weight: 500; color: var(--gray); transition: color .18s; }
.nav-link:hover { color: var(--ink); }
.nav-cta { display: flex; align-items: center; gap: 10px; }
.nav-burger { display: none; align-items: center; justify-content: center; width: 42px; height: 42px;
  border: 1px solid var(--line); border-radius: 10px; background: var(--bg-2); color: var(--ink); cursor: pointer; flex: none; }
.nav-mobile { display: none; }

/* brand mark */
.brand { display: inline-flex; align-items: center; gap: 11px; }

/* COLDPOST wordmark — the two O's carry the brand story (typing + delivered/read) */
.brand-word { display: inline-flex; align-items: baseline; font-weight: 800; color: var(--ink);
  letter-spacing: .045em; line-height: 1; white-space: nowrap; }
.brand-word .bw-t { letter-spacing: .045em; }
.brand-word .bw-o { flex: none; display: inline-block; margin: 0 .04em; vertical-align: baseline; }
.brand-word .bw-o:nth-of-type(1) { margin-left: .03em; }
.brand-word .bw-o svg { display: block; width: 100%; height: 100%; }
.brand-word::after { content: "."; color: var(--accent); margin-left: .01em; }
@keyframes bwType { 0%, 75%, 100% { opacity: .28; } 38% { opacity: 1; } }
.brand-word .bw-d1 { animation: bwType 1.4s infinite ease-in-out; }
.brand-word .bw-d2 { animation: bwType 1.4s infinite ease-in-out .2s; }
.brand-word .bw-d3 { animation: bwType 1.4s infinite ease-in-out .4s; }
@media (prefers-reduced-motion: reduce) { .brand-word .bw-dot { animation: none; opacity: .92; } }

/* animated footer wordmark */
.bwa { position: relative; }
.bwa .bw-o .bwa-oi { display: block; width: 100%; height: 100%; }
.bwa .bw-o .bwa-oi svg { display: block; width: 100%; height: 100%; }
.bwa .bwa-let { display: inline-block; opacity: 0; transform: translateY(3px); transition-delay: 0s;
  transition: opacity .45s var(--ease), transform .45s var(--ease); }
.bwa.show-letters .bwa-let { opacity: 1; transform: none; }
.bwa.show-letters .bwa-l1 { transition-delay: .04s; }
.bwa.show-letters .bwa-l2 { transition-delay: .10s; }
.bwa.show-letters .bwa-l3 { transition-delay: .16s; }
/* the empty left O only appears as the pair separates */
.bwa .bwaO1 { opacity: 0; }
.bwa.show-letters .bwaO1 { opacity: 1; transition: opacity .5s var(--ease); }
.bwa::after { opacity: 0; transition: opacity .45s var(--ease) .15s; }
.bwa.show-letters::after { opacity: 1; }
.bwa .bwa-dot { opacity: 0; }
.bwa.typing .bwa-d1 { animation: bwType 1.25s infinite ease-in-out; }
.bwa.typing .bwa-d2 { animation: bwType 1.25s infinite ease-in-out .16s; }
.bwa.typing .bwa-d3 { animation: bwType 1.25s infinite ease-in-out .32s; }
.bwa .bwa-tickg { opacity: 0; }
.bwa.tick .bwa-tickg { opacity: 1; transition: opacity .3s var(--ease); }
.bwa.tick .bwa-oi-2 { animation: bwaPop .55s cubic-bezier(.3,1.5,.5,1); }
@keyframes bwaPop { 0% { transform: scale(1); } 38% { transform: scale(1.24); } 100% { transform: scale(1); } }

/* legacy brand mark — still used as the app icon inside the Integrations mockup */
.brand-mark {
  width: 34px; height: 34px; border-radius: 50%; flex: none; position: relative; overflow: hidden;
  background: var(--ink) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1024 1024'%3E%3Ccircle cx='512' cy='512' r='512' fill='%230c111b'/%3E%3Cpath fill='%2300ff87' d='M440.442566,613.556641 C425.227356,598.353210 410.181610,583.479187 395.328644,568.415100 C385.992706,558.946411 382.964600,547.537415 387.187103,534.878540 C391.061707,523.262634 399.357666,515.854309 411.483063,513.536804 C422.143982,511.499268 431.709076,514.360168 439.463531,522.059692 C457.785309,540.251709 476.081848,558.471741 494.184448,576.881165 C507.613678,590.537903 515.099731,590.420776 527.767944,575.927612 C568.319153,529.534729 608.919922,483.185028 649.486145,436.805206 C670.424072,412.866638 691.258240,388.836945 712.271851,364.965179 C728.980774,345.983673 757.297668,350.211029 766.647766,373.147675 C771.817078,385.828583 768.845764,397.343109 759.993042,407.454712 C735.859436,435.020020 711.637024,462.507507 687.524048,490.090759 C662.203796,519.054993 636.995544,548.117004 611.690613,577.094482 C587.266418,605.063416 562.823364,633.015869 538.306824,660.903687 C524.530518,676.574341 504.473053,677.278320 489.498993,662.531006 C473.120667,646.400757 456.953064,630.056641 440.442566,613.556641 z'/%3E%3Cpath fill='%2300ff87' d='M615.586060,353.184631 C635.078552,355.726501 649.217407,374.245300 642.648376,394.809204 C641.177917,399.412506 638.350952,403.903748 635.156189,407.585449 C601.538391,446.327148 567.761108,484.930786 533.930298,523.487000 C523.504150,535.369446 508.186676,538.223450 494.464264,531.244324 C481.860657,524.834167 474.368042,509.978333 478.396393,495.883911 C480.317078,489.163849 484.822449,482.748962 489.466888,477.315460 C510.463409,452.751312 531.940491,428.598236 553.218811,404.274658 C564.294922,391.613281 575.363464,378.944672 586.348999,366.204803 C593.962463,357.375488 603.117615,352.136139 615.586060,353.184631 z'/%3E%3Cpath fill='%2300ff87' d='M371.573303,582.427063 C383.851593,594.673889 396.131653,606.431030 407.840942,618.731506 C419.964386,631.467102 420.045959,649.575867 408.698151,662.181152 C396.325470,675.924866 376.174927,676.908936 362.847687,663.918030 C343.884003,645.432983 325.236389,626.623291 306.486023,607.919922 C292.924957,594.392761 279.206024,581.014893 265.945862,567.197632 C253.634888,554.369507 254.210281,534.304565 266.676666,522.172302 C279.501160,509.691559 298.708771,509.810547 311.985901,522.808655 C324.838928,535.391602 337.371979,548.300964 350.073364,561.039246 C357.127716,568.114075 364.238831,575.132263 371.573303,582.427063 z'/%3E%3C/svg%3E") center / 100% no-repeat;
}
.brand-mark i { display: none; }
.brand-mark::after {
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  background: linear-gradient(140deg, rgba(255,255,255,.12), transparent 55%);
}

/* logo-slot: if user drops a real logo, swap here */
.brand-logo { height: 26px; width: auto; }

/* ---------- generic card ---------- */
.card {
  background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}

/* pill / chip */
.pill {
  display: inline-flex; align-items: center; gap: 7px; height: 30px; padding: 0 13px;
  border-radius: 99px; background: var(--bg-2); border: 1px solid var(--line);
  box-shadow: var(--shadow-sm); font-size: 12.5px; font-weight: 500; color: var(--ink);
}
.pill svg { width: 13px; height: 13px; color: var(--accent-ink); }

/* feature icon tile */
.icon-tile {
  width: 48px; height: 48px; border-radius: 12px; background: var(--tint);
  border: 1px solid var(--line); display: grid; place-items: center; color: var(--ink);
}
.icon-tile svg { width: 22px; height: 22px; }

/* scroll-reveal */
.reveal { opacity: 0; transform: translateY(22px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.reveal.in { opacity: 1; transform: none; }
.reveal.d1 { transition-delay: .07s; }
.reveal.d2 { transition-delay: .14s; }
.reveal.d3 { transition-delay: .21s; }
.reveal.d4 { transition-delay: .28s; }
.reveal.d5 { transition-delay: .35s; }

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1 !important; transform: none !important; }
  * { scroll-behavior: auto; }
}

/* utility text */
.mono { font-family: var(--mono); }
.muted { color: var(--gray); }

/* ============================================================
   HERO
   ============================================================ */
.hero { position: relative; overflow: hidden; padding: 78px 0 90px; }
.hero-bg {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(680px 420px at 78% 8%, rgba(0,255,135,.16), transparent 60%),
    radial-gradient(520px 360px at 8% 30%, rgba(0,255,135,.07), transparent 55%);
}
.hero-grid-lines {
  position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: .5;
  background-image:
    linear-gradient(var(--line) 1px, transparent 1px),
    linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size: 56px 56px;
  -webkit-mask-image: radial-gradient(circle at 50% 22%, #000, transparent 72%);
          mask-image: radial-gradient(circle at 50% 22%, #000, transparent 72%);
}
.hero-inner { position: relative; z-index: 1; display: grid; grid-template-columns: 1fr 1.16fr;
  gap: 52px; align-items: center; }
@media (max-width: 980px){ .hero-inner { grid-template-columns: 1fr; gap: 40px; } }

.hero-badge {
  display: inline-flex; align-items: center; gap: 9px; height: 32px; padding: 0 8px 0 8px;
  border-radius: 99px; background: var(--bg-2); border: 1px solid var(--line);
  box-shadow: var(--shadow-sm); font-size: 13px; color: var(--gray); margin-bottom: 24px;
}
.hero-badge .tag {
  display: inline-flex; align-items: center; height: 20px; padding: 0 8px; border-radius: 99px;
  background: var(--tint); color: var(--accent-ink); font-weight: 700; font-size: 11.5px;
  letter-spacing: .03em; border: 1px solid rgba(4,122,72,.18);
}
.hero h1 {
  font-size: clamp(40px, 5.4vw, 66px); font-weight: 800; line-height: 1.02; letter-spacing: -.03em;
}
.hero h1 .hl { position: relative; white-space: nowrap; }
.hero h1 .hl::after {
  content: ""; position: absolute; left: -2px; right: -2px; bottom: .07em; height: .34em; z-index: -1;
  background: var(--accent); border-radius: 3px; opacity: .9;
  transform: scaleX(0); transform-origin: left; animation: underline 1s var(--ease) .5s forwards;
}
@keyframes underline { to { transform: scaleX(1); } }
.hero p.lead { margin: 24px 0 0; font-size: 19px; line-height: 1.55; color: var(--gray); max-width: 540px; text-wrap: pretty; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
.hero-reassure { display: flex; flex-wrap: wrap; gap: 18px; margin-top: 22px; }
.hero-reassure span { display: inline-flex; align-items: center; gap: 7px; font-size: 13.5px; color: var(--gray-2); }
.hero-reassure svg { width: 15px; height: 15px; color: var(--accent-ink); }

/* ============================================================
   LOGO STRIP
   ============================================================ */
.logos { padding: 30px 0 8px; }
.logos-label { text-align: center; font-size: 13px; font-weight: 500; color: var(--gray-2); letter-spacing: .02em; }
.logos-row { display: flex; align-items: center; justify-content: center; gap: 52px; flex-wrap: wrap;
  margin-top: 22px; opacity: .72; }
.logo-word { font-size: 20px; font-weight: 700; letter-spacing: -.02em; color: var(--gray); display:inline-flex; align-items:center; gap:9px; }
.logo-word .b { width: 16px; height: 16px; border-radius: 4px; background: var(--gray); display:inline-block; }
.logo-word.round .b { border-radius: 99px; }
.trust-badges { display: flex; align-items: center; justify-content: center; gap: 14px; flex-wrap: wrap; margin-top: 30px; }

/* ============================================================
   SECTION SHELL
   ============================================================ */
.block { padding: 92px 0; }
.block.tight { padding: 72px 0; }
.block-head { max-width: 720px; margin: 0 auto 56px; text-align: center; }
.block-head .eyebrow { margin-bottom: 16px; }

/* ============================================================
   FEATURE / SOLUTION CARDS
   ============================================================ */
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; }
@media (max-width: 900px){ .grid-3 { grid-template-columns: 1fr; } .grid-2 { grid-template-columns: 1fr; } }

.feature-card { padding: 30px; transition: transform .25s var(--ease), box-shadow .25s var(--ease), border-color .25s; }
.feature-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: #dfe3e9; }
.feature-card h3 { font-size: 20px; font-weight: 700; margin: 22px 0 8px; }
.feature-card p { margin: 0; color: var(--gray); font-size: 15.5px; line-height: 1.6; }
.feature-card .step-no { font-family: var(--mono); font-size: 12px; color: var(--accent-ink); font-weight: 600; }

/* ============================================================
   SPLIT (text + mockup) sections
   ============================================================ */
.split { display: grid; grid-template-columns: 1fr 1.08fr; gap: 60px; align-items: center; }
.split.rev { grid-template-columns: 1.08fr 1fr; }
@media (max-width: 940px){ .split, .split.rev { grid-template-columns: 1fr; gap: 36px; } }
.split h2 { font-size: clamp(26px, 2.8vw, 36px); font-weight: 800; line-height: 1.1; }
.split p.lead { margin: 16px 0 0; font-size: 17px; line-height: 1.6; color: var(--gray); }
.checks { list-style: none; padding: 0; margin: 26px 0 0; display: grid; gap: 14px; }
.checks li { display: flex; gap: 12px; align-items: flex-start; font-size: 15.5px; color: var(--ink); }
.checks .ck { flex: none; width: 22px; height: 22px; border-radius: 99px; background: var(--tint);
  border: 1px solid rgba(4,122,72,.2); display: grid; place-items: center; margin-top: 1px; }
.checks .ck svg { width: 12px; height: 12px; color: var(--accent-ink); }
.checks li b { font-weight: 600; }
.checks li span.cap { color: var(--gray); font-weight: 400; }

/* ============================================================
   DARK BAND (metrics)
   ============================================================ */
.dark { background: var(--ink-3); color: #fff; }
.dark .h-section, .dark h2, .dark h3 { color: #fff; }
.metrics { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
@media (max-width: 820px){ .metrics { grid-template-columns: repeat(2, 1fr); } }
.metric { padding: 30px 26px; text-align: center; border-radius: var(--radius);
  border: 1px solid rgba(255,255,255,.08); background: rgba(255,255,255,.02); }
.metric .ic { width: 40px; height: 40px; border-radius: 11px; background: rgba(0,255,135,.12);
  border: 1px solid rgba(0,255,135,.25); display: grid; place-items: center; margin: 0 auto 16px; color: var(--accent); }
.metric .ic svg { width: 19px; height: 19px; }
.metric .num { font-size: clamp(34px, 4vw, 48px); font-weight: 800; letter-spacing: -.02em; color: #fff; line-height: 1; }
.metric .num .u { color: var(--accent); }
.metric .lab { margin-top: 10px; font-size: 15px; font-weight: 600; color: #fff; }
.metric .cap { margin-top: 6px; font-size: 13px; color: rgba(255,255,255,.55); line-height: 1.45; }

/* ============================================================
   TESTIMONIALS
   ============================================================ */
.quote-card { padding: 30px; display: flex; flex-direction: column; }
.quote-card .stars { display: flex; gap: 3px; color: var(--accent-ink); margin-bottom: 18px; }
.quote-card .stars svg { width: 16px; height: 16px; }
.quote-card blockquote { margin: 0 0 22px; font-size: 16px; line-height: 1.6; color: var(--ink); font-weight: 450; }
.quote-card blockquote b { background: linear-gradient(transparent 62%, rgba(0,255,135,.4) 62%); font-weight: 700; }
.quote-card .who { display: flex; align-items: center; gap: 12px; margin-top: auto; }
.quote-card .avatar { width: 42px; height: 42px; border-radius: 99px; background: var(--ink); color: var(--accent);
  display: grid; place-items: center; font-weight: 700; font-size: 14px; flex: none; }
.quote-card .who .nm { font-size: 14.5px; font-weight: 600; }
.quote-card .who .rl { font-size: 13px; color: var(--gray-2); }

.stat-strip { display: grid; grid-template-columns: repeat(4,1fr); gap: 0; border-radius: var(--radius);
  overflow: hidden; background: var(--ink); }
@media (max-width: 820px){ .stat-strip { grid-template-columns: repeat(2,1fr); } }
.stat-strip .cell { padding: 28px; text-align: center; border-right: 1px solid rgba(255,255,255,.08); }
.stat-strip .cell:last-child { border-right: none; }
.stat-strip .v { font-size: 30px; font-weight: 800; color: #fff; letter-spacing: -.02em; }
.stat-strip .k { font-size: 13.5px; color: rgba(255,255,255,.6); margin-top: 4px; }

/* ============================================================
   FEATURE → BENEFIT TABLE
   ============================================================ */
.fbtable { width: 100%; border-collapse: separate; border-spacing: 0; }
.tbl-wrap { border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; background: var(--bg-2);
  box-shadow: var(--shadow-sm); }
.fbtable thead th { text-align: left; font-size: 12px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .07em; color: var(--gray-2); padding: 18px 24px; background: #fbfcfd; border-bottom: 1px solid var(--line); }
.fbtable tbody td { padding: 22px 24px; border-bottom: 1px solid var(--line-2); vertical-align: top; font-size: 15px; line-height: 1.55; }
.fbtable tbody tr:last-child td { border-bottom: none; }
.fbtable tbody tr { transition: background .18s; }
.fbtable tbody tr:hover { background: var(--tint); }
.fbtable .feat { width: 26%; }
.fbtable .feat .nm { font-weight: 700; color: var(--ink); display: flex; align-items: center; gap: 10px; }
.fbtable .feat .nm .fi { width: 30px; height: 30px; border-radius: 8px; background: var(--tint); border: 1px solid var(--line);
  display: grid; place-items: center; color: var(--accent-ink); flex: none; }
.fbtable .feat .nm .fi svg { width: 16px; height: 16px; }
.fbtable .feat .desc { color: var(--gray-2); font-size: 13px; margin-top: 6px; margin-left: 40px; }
.fbtable .cust { width: 40%; color: var(--gray); }
.fbtable .out { width: 34%; color: var(--ink); }
.fbtable .out b { color: var(--accent-ink); font-weight: 700; }
@media (max-width: 820px){
  .fbtable, .fbtable thead, .fbtable tbody, .fbtable th, .fbtable td, .fbtable tr { display: block; }
  .fbtable thead { display: none; }
  .fbtable tbody td { width: 100% !important; border: none; padding: 6px 22px; }
  .fbtable tbody tr { padding: 18px 0; border-bottom: 1px solid var(--line); }
  .fbtable .feat .desc, .fbtable .feat .nm { margin-left: 0; }
}

/* ============================================================
   FAQ
   ============================================================ */
.faq { max-width: 820px; margin: 0 auto; display: grid; gap: 0; border-top: 1px solid var(--line); }
.faq-item { border-bottom: 1px solid var(--line); }
.faq-q { width: 100%; text-align: left; background: none; border: none; cursor: pointer;
  padding: 24px 8px; display: flex; align-items: center; justify-content: space-between; gap: 20px;
  font-family: var(--sans); font-size: 17px; font-weight: 600; color: var(--ink); }
.faq-q:hover { color: var(--accent-ink); }
.faq-ic { flex: none; width: 26px; height: 26px; border-radius: 7px; border: 1px solid var(--line);
  display: grid; place-items: center; transition: transform .3s var(--ease), background .2s, border-color .2s; color: var(--gray); }
.faq-item.open .faq-ic { transform: rotate(45deg); background: var(--ink); border-color: var(--ink); color: var(--accent); }
.faq-ic svg { width: 14px; height: 14px; }
.faq-a { overflow: hidden; max-height: 0; transition: max-height .35s var(--ease); }
.faq-a .inner { padding: 0 8px 26px; color: var(--gray); font-size: 15.5px; line-height: 1.65; max-width: 680px; }
.faq-a .inner b { color: var(--ink); font-weight: 600; }

/* ============================================================
   FINAL CTA
   ============================================================ */
.cta-wrap { position: relative; overflow: hidden; border-radius: 28px; background: var(--ink-3);
  padding: 72px 40px; text-align: center; }
.cta-wrap .glow {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(520px 280px at 50% -10%, rgba(0,255,135,.30), transparent 60%),
    radial-gradient(360px 240px at 85% 120%, rgba(0,255,135,.14), transparent 60%);
}
.cta-wrap .gridlines {
  position: absolute; inset: 0; z-index: 0; opacity: .5;
  background-image: linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px);
  background-size: 48px 48px;
  -webkit-mask-image: radial-gradient(circle at 50% 30%, #000, transparent 75%);
          mask-image: radial-gradient(circle at 50% 30%, #000, transparent 75%);
}
.cta-wrap .inner { position: relative; z-index: 1; }
.cta-wrap h2 { font-size: clamp(30px, 4vw, 46px); font-weight: 800; color: #fff; letter-spacing: -.03em; line-height: 1.05; }
.cta-wrap p { margin: 18px auto 0; max-width: 520px; color: rgba(255,255,255,.7); font-size: 17px; line-height: 1.55; }
.cta-actions { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-top: 32px; }
.cta-fine { margin-top: 20px !important; font-size: 13.5px !important; color: rgba(255,255,255,.5) !important; }

/* ============================================================
   FOOTER
   ============================================================ */
.footer { background: var(--bg-2); border-top: 1px solid var(--line); padding: 64px 0 36px; }
.footer-top { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 32px; }
@media (max-width: 820px){ .footer-top { grid-template-columns: 1fr 1fr; gap: 28px; } }
.footer-about { max-width: 300px; }
.footer-about p { margin: 16px 0 0; color: var(--gray); font-size: 14.5px; line-height: 1.6; }
.footer-soc { display: flex; gap: 10px; margin-top: 20px; }
.footer-soc a { width: 34px; height: 34px; border-radius: 8px; border: 1px solid var(--line);
  display: grid; place-items: center; color: var(--gray); transition: all .18s; }
.footer-soc a:hover { color: var(--ink); border-color: #d4d8df; transform: translateY(-2px); }
.footer-soc svg { width: 16px; height: 16px; }
.footer-col h4 { margin: 0 0 16px; font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--ink); }
.footer-col a { display: block; font-size: 14.5px; color: var(--gray); margin-bottom: 11px; transition: color .15s; }
.footer-col a:hover { color: var(--ink); }
.footer-bottom { display: flex; align-items: center; justify-content: space-between; gap: 16px;
  margin-top: 48px; padding-top: 26px; border-top: 1px solid var(--line); flex-wrap: wrap; }
.footer-bottom .cp { font-size: 14px; color: var(--gray-2); }
.footer-status { display: inline-flex; align-items: center; gap: 9px; font-size: 14px; color: var(--gray); }
.footer-status .d { width: 8px; height: 8px; border-radius: 99px; background: var(--accent);
  box-shadow: 0 0 0 4px rgba(0,255,135,.18); }


/* ============================================================
   MOBILE — landing page
   ============================================================ */
@media (max-width: 860px) {
  .nav-links, .nav-cta { display: none; }
  .nav-burger { display: inline-flex; }
  .nav.menu-open { background: var(--bg-2); }
  .nav-mobile { display: block; border-top: 1px solid var(--line); background: var(--bg-2);
    padding: 14px 24px 20px; box-shadow: var(--shadow-md); }
  .nav-mobile a { display: block; padding: 14px 2px; font-size: 16px; font-weight: 600; color: var(--ink);
    border-bottom: 1px solid var(--line-2); }
  .nav-mobile a:last-of-type { border-bottom: none; }
  .nav-mobile-cta { display: flex; flex-direction: column; gap: 10px; margin-top: 14px; }
  .nav-mobile-cta .btn { width: 100%; height: 48px; }
}
@media (max-width: 600px) {
  .wrap { padding: 0 20px; }
  .hero-badge { width: 100%; max-width: 100%; margin-bottom: 20px; gap: 7px;
    font-size: 11px; height: 30px; padding: 0 7px; overflow: hidden; }
  .hero-badge .eyebrow-text { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .hero-badge .tag { font-size: 10px; height: 18px; padding: 0 7px; flex: none; }
  .hero { padding: 40px 0 56px; }
  .hero h1 { font-size: clamp(34px, 11vw, 46px); }
  .hero p.lead { font-size: 16.5px; }
  .hero-actions .btn { flex: 1; }
  .hero-reassure { flex-wrap: nowrap; gap: 12px; margin-top: 20px; overflow-x: auto;
    -webkit-overflow-scrolling: touch; scrollbar-width: none; }
  .hero-reassure::-webkit-scrollbar { display: none; }
  .hero-reassure span { font-size: 11.5px; white-space: nowrap; flex: none; gap: 5px; }
  .hero-reassure svg { width: 13px; height: 13px; }
}