/* Bordr — getbordr.com
 *
 * ══ THE TOKENS ARE THE APP'S OWN, COPIED EXACTLY ════════════════════════════════════════════════
 * Every colour below is lifted verbatim from `public/index.html`, including the measured contrast
 * ratios in the comments. They are not a palette chosen for this site.
 *
 * This matters because of what happened the last time Bordr grew a second surface: an operator
 * console was built on its own origin with its own palette, and it was deleted on sight for "hue
 * misalignment". A marketing site that does not match the product is the same mistake wearing a
 * suit — a visitor clicks "Start a trial" and lands somewhere that looks like a different company.
 *
 * So: DO NOT introduce a colour here. If a shade is needed that the app does not have, add it to
 * the app first, measure it, and copy it down. The ratios below were measured against 26,901
 * elements for zero failures; a hand-picked near-miss re-opens that.
 */

:root {
  --o:#E8732C; --o2:#F4A460; --o3:#ff8c42; --o4:#FFB07C;
  --nk:#0D1520; --nv:#142130; --nl:#1E3044; --nl2:#28405A; --nl3:#344d65;
  --w:#FFFFFF; --tm:#94A7B8; --td:#9DAEC0;
  --g:#4CAF50; --r:#EF5350; --b:#2196F3; --gold:#F0B429; --pu:#9C27B0;
  /* a11y: text-on-dark variants — the same hues lifted until they clear 4.5 on every panel they
     actually land on, including the .12/.15 same-hue tints that chips composite over --nl. */
  --o-ink:#ED8F57; --r-ink:#F38280; --b-ink:#58B0F6; --pu-ink:#D37BE2; --g-ink:#7ED184;
  --r-fill:#D32F2F;
  --o-soft:rgba(232,115,44,.12);
  --o-glow:rgba(232,115,44,.5);
  --teal:#16C2A3; --indigo:#7C8AFF;
  --elev-1:0 2px 10px rgba(0,0,0,.35);
  --elev-2:0 12px 32px rgba(0,0,0,.45);
  --elev-3:0 24px 70px rgba(0,0,0,.6);
  --glow-o:0 0 32px rgba(232,115,44,.3);
  --grad-o:linear-gradient(135deg,#E8732C,#F4A460);
  --grad-mesh:radial-gradient(circle at 20% 20%,rgba(232,115,44,.14),transparent 45%),
              radial-gradient(circle at 80% 30%,rgba(33,150,243,.1),transparent 45%),
              radial-gradient(circle at 50% 90%,rgba(156,39,176,.1),transparent 45%);
  --ease:cubic-bezier(.16,1,.3,1);
  --hairline:1px solid rgba(255,255,255,.06);
  --maxw:1140px;
  --gut:24px;
}

* { margin:0; padding:0; box-sizing:border-box; }

html { scroll-behavior:smooth; }
/* An explicit background on BODY, not just on html — a page without one renders the browser's
   default white behind any area the layout does not cover, which on a dark site reads as a flash. */
body {
  background:var(--nk); color:var(--w);
  font-family:'DM Sans',sans-serif; font-size:16px; line-height:1.6;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  overflow-x:hidden;
}

h1,h2,h3,h4 { font-family:'Outfit',sans-serif; line-height:1.15; font-weight:800; }
a { color:var(--o-ink); text-decoration:none; }
a:hover { text-decoration:underline; }

/* ── focus: visible, and never removed ──────────────────────────────────────────────────────────
   A keyboard user must be able to see where they are. `:focus-visible` keeps it off mouse clicks,
   and the offset means the ring is never hidden by the element's own background. */
:focus-visible {
  outline:3px solid var(--o4);
  outline-offset:3px;
  border-radius:4px;
}

.wrap { width:100%; max-width:var(--maxw); margin:0 auto; padding:0 var(--gut); }

/* ── skip link ─────────────────────────────────────────────────────────────────────────────────── */
.skip {
  position:absolute; left:-9999px; top:0; z-index:200;
  background:var(--o); color:#12100E; padding:12px 20px; border-radius:0 0 10px 0; font-weight:600;
}
.skip:focus { left:0; text-decoration:none; }

/* ── header ────────────────────────────────────────────────────────────────────────────────────── */
header.site {
  position:sticky; top:0; z-index:100;
  background:rgba(13,21,32,.82); backdrop-filter:blur(14px);
  border-bottom:var(--hairline);
}
.navrow { display:flex; align-items:center; justify-content:space-between; gap:16px; height:68px; }
.brand { display:flex; align-items:center; gap:10px; font-family:'Outfit',sans-serif; font-weight:800; font-size:21px; color:var(--w); }
.brand:hover { text-decoration:none; }
.brand .mark {
  width:32px; height:32px; border-radius:9px; background:var(--grad-o);
  display:grid; place-items:center; font-size:17px; font-weight:900; color:var(--w);
  box-shadow:var(--glow-o);
}
nav.links { display:flex; align-items:center; gap:26px; }
nav.links a { color:var(--td); font-size:14.5px; font-weight:500; }
nav.links a:hover { color:var(--w); text-decoration:none; }

.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:12px 22px; border-radius:10px; border:none; cursor:pointer;
  font-family:'DM Sans',sans-serif; font-weight:600; font-size:14.5px;
  transition:transform .2s var(--ease), box-shadow .2s var(--ease), background .2s;
  text-decoration:none;
}
.btn:hover { text-decoration:none; transform:translateY(-1px); }
/* THE APP'S OWN PRIMARY BUTTON: solid --o with dark ink #12100E. The first version of this site put
   WHITE text on --grad-o, whose light end (#F4A460) measures 2.03:1 under white — every primary
   call to action on the site failed AA, and none of them matched the app it leads into. */
.btn-primary { background:var(--o); color:#12100E; box-shadow:var(--glow-o); }
.btn-primary:hover { background:var(--o3); box-shadow:0 0 40px rgba(232,115,44,.45); }
.btn-ghost { background:rgba(255,255,255,.06); color:var(--w); border:1px solid var(--nl2); }
.btn-ghost:hover { background:rgba(255,255,255,.1); }
.btn-lg { padding:15px 30px; font-size:16px; border-radius:12px; }

/* ── hero ──────────────────────────────────────────────────────────────────────────────────────── */
.hero { position:relative; padding:clamp(56px,9vh,110px) 0 clamp(48px,7vh,90px); overflow:hidden; }
.hero::before {
  content:''; position:absolute; inset:0; background:var(--grad-mesh); pointer-events:none;
}
.hero .wrap { position:relative; }
.eyebrow {
  display:inline-flex; align-items:center; gap:9px;
  background:var(--o-soft); border:1px solid rgba(232,115,44,.3);
  color:var(--o-ink); padding:7px 15px; border-radius:999px;
  font-size:12.5px; font-weight:600; letter-spacing:.03em; text-transform:uppercase;
}
.hero h1 {
  font-size:clamp(34px,6.4vw,62px); font-weight:900; margin:22px 0 18px; max-width:17ch;
}
.hero h1 .grad {
  background:var(--grad-o); -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent;
}
.hero p.lede { font-size:clamp(16px,2.1vw,19.5px); color:var(--td); max-width:60ch; margin-bottom:30px; }
.hero .cta { display:flex; flex-wrap:wrap; gap:14px; align-items:center; }
.hero .fineprint { color:var(--tm); font-size:13.5px; margin-top:16px; }

/* ── sections ──────────────────────────────────────────────────────────────────────────────────── */
section { padding:clamp(52px,8vh,96px) 0; }
.sec-head { max-width:62ch; margin-bottom:40px; }
.sec-head h2 { font-size:clamp(26px,3.8vw,40px); margin-bottom:14px; }
.sec-head p { color:var(--td); font-size:17px; }
.kicker {
  color:var(--o-ink); font-size:12.5px; font-weight:700; letter-spacing:.09em;
  text-transform:uppercase; margin-bottom:12px;
}

/* ── cards ─────────────────────────────────────────────────────────────────────────────────────── */
.grid { display:grid; gap:20px; }
.g3 { grid-template-columns:repeat(auto-fit,minmax(290px,1fr)); }
.g2 { grid-template-columns:repeat(auto-fit,minmax(330px,1fr)); }

.card {
  background:linear-gradient(160deg,var(--nv),var(--nl));
  border:var(--hairline); border-radius:16px; padding:26px;
  box-shadow:var(--elev-1);
  transition:transform .25s var(--ease), box-shadow .25s var(--ease), border-color .25s;
}
.card:hover { transform:translateY(-3px); box-shadow:var(--elev-2); border-color:rgba(232,115,44,.25); }
.card .ico {
  width:44px; height:44px; border-radius:12px; background:var(--o-soft);
  border:1px solid rgba(232,115,44,.25);
  display:grid; place-items:center; font-size:21px; margin-bottom:16px;
}
.card h3 { font-size:19px; margin-bottom:9px; }
.card p { color:var(--td); font-size:15px; }

/* ── pricing ───────────────────────────────────────────────────────────────────────────────────── */
.toggles { display:flex; flex-wrap:wrap; gap:10px; margin-bottom:30px; }
.seg {
  display:inline-flex; background:var(--nv); border:1px solid var(--nl2);
  border-radius:11px; padding:4px; gap:4px;
}
.seg button {
  background:transparent; border:none; cursor:pointer; color:var(--td);
  font-family:'DM Sans',sans-serif; font-weight:600; font-size:13.5px;
  padding:9px 17px; border-radius:8px; transition:all .2s;
}
.seg button[aria-pressed="true"] { background:var(--o); color:#12100E; }   /* = the app's .seg button.active */
.seg button:hover:not([aria-pressed="true"]) { color:var(--w); }

.plans { display:grid; gap:20px; grid-template-columns:repeat(auto-fit,minmax(290px,1fr)); align-items:stretch; }
.plan {
  position:relative; display:flex; flex-direction:column;
  background:linear-gradient(160deg,var(--nv),var(--nl));
  border:var(--hairline); border-radius:18px; padding:28px;
  box-shadow:var(--elev-1);
}
.plan.featured { border-color:rgba(232,115,44,.4); box-shadow:var(--elev-2),0 0 0 1px rgba(232,115,44,.2); }
.plan .tag {
  position:absolute; top:-11px; left:28px;
  background:var(--o); color:#12100E;
  font-size:11.5px; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
  padding:5px 12px; border-radius:999px;
}
.plan h3 { font-size:21px; margin-bottom:6px; }
.plan .who { color:var(--tm); font-size:14px; min-height:44px; }
.plan .price { margin:18px 0 6px; font-family:'Outfit',sans-serif; font-weight:800; font-size:38px; }
.plan .per { color:var(--tm); font-size:14px; font-weight:400; font-family:'DM Sans',sans-serif; }
.plan .vat { color:var(--tm); font-size:13px; min-height:20px; }
.plan ul { list-style:none; margin:20px 0 24px; display:grid; gap:11px; }
.plan li { display:flex; gap:10px; align-items:flex-start; font-size:14.5px; color:var(--td); }
.plan li .tick { color:var(--g-ink); flex:0 0 auto; font-weight:700; }
.plan .foot { margin-top:auto; }
.plan .btn { width:100%; }

/* ── proof strip ───────────────────────────────────────────────────────────────────────────────── */
.stats { display:grid; gap:18px; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); }
.stat { background:var(--nv); border:var(--hairline); border-radius:14px; padding:22px; }
.stat .val { font-family:'Outfit',sans-serif; font-weight:800; font-size:30px; color:var(--w); display:block; }
.stat .lab { color:var(--tm); font-size:13.5px; margin-top:4px; }

/* ── callout ───────────────────────────────────────────────────────────────────────────────────── */
.callout {
  background:var(--o-soft); border:1px solid rgba(232,115,44,.28);
  border-left:3px solid var(--o); border-radius:12px; padding:20px 22px;
}
.callout h4 { font-size:16px; margin-bottom:7px; color:var(--w); }
.callout p { color:var(--td); font-size:14.5px; }

/* ── CTA band ──────────────────────────────────────────────────────────────────────────────────── */
.band {
  background:linear-gradient(135deg,rgba(232,115,44,.14),rgba(33,150,243,.08));
  border-top:var(--hairline); border-bottom:var(--hairline);
}
.band .inner { text-align:center; max-width:62ch; margin:0 auto; }
.band h2 { font-size:clamp(26px,3.6vw,38px); margin-bottom:14px; }
.band p { color:var(--td); margin-bottom:26px; font-size:17px; }

/* ── legal / prose pages ───────────────────────────────────────────────────────────────────────── */
.prose { max-width:76ch; }
.prose h1 { font-size:clamp(28px,4.4vw,42px); margin-bottom:10px; }
.prose .updated { color:var(--tm); font-size:14px; margin-bottom:34px; }
.prose h2 { font-size:22px; margin:34px 0 12px; }
.prose h3 { font-size:17px; margin:24px 0 8px; }
.prose p, .prose li { color:var(--td); font-size:15.5px; }
.prose p { margin-bottom:14px; }
.prose ul, .prose ol { margin:0 0 16px 22px; display:grid; gap:8px; }
.prose strong { color:var(--w); font-weight:600; }
.prose table { width:100%; border-collapse:collapse; margin:18px 0 22px; font-size:14.5px; }
.prose th, .prose td { text-align:left; padding:11px 13px; border-bottom:1px solid var(--nl2); color:var(--td); vertical-align:top; }
.prose th { color:var(--w); font-weight:600; background:var(--nv); }

/* ── footer ────────────────────────────────────────────────────────────────────────────────────── */
footer.site { border-top:var(--hairline); padding:44px 0 34px; background:var(--nv); }
.footrow { display:flex; flex-wrap:wrap; gap:30px; justify-content:space-between; }
footer.site h5 { font-family:'Outfit',sans-serif; font-size:13px; letter-spacing:.07em; text-transform:uppercase; color:var(--tm); margin-bottom:12px; font-weight:700; }
footer.site ul { list-style:none; display:grid; gap:9px; }
footer.site a { color:var(--td); font-size:14.5px; }
footer.site a:hover { color:var(--w); text-decoration:none; }
.footnote { margin-top:34px; padding-top:22px; border-top:var(--hairline); color:var(--tm); font-size:13.5px; display:flex; flex-wrap:wrap; gap:12px; justify-content:space-between; }

/* ── reveal on scroll ──────────────────────────────────────────────────────────────────────────────
   THE FAILSAFE IS THE IMPORTANT PART. An entrance animation that depends on JS leaves the page
   BLANK if the script fails, is blocked, or never sees an intersection — and a measurement taken
   mid-animation reads opacity 0, which looks exactly like a broken page. So:
     · the markup is visible by default and JS ADDS `.reveal` (never the other way round), so no-JS
       and CSP-blocked both render the finished page;
     · a 2.5s failsafe in site.js clears everything regardless;
     · `prefers-reduced-motion` disables the transform entirely. */
html.js-anim .reveal { opacity:0; transform:translateY(14px); }
html.js-anim .reveal.in { opacity:1; transform:none; transition:opacity .6s var(--ease), transform .6s var(--ease); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior:auto; }
  html.js-anim .reveal, html.js-anim .reveal.in { opacity:1 !important; transform:none !important; transition:none !important; }
  .card:hover, .btn:hover { transform:none; }
  * { animation-duration:.001ms !important; animation-iteration-count:1 !important; }
}

/* ── phone ─────────────────────────────────────────────────────────────────────────────────────── */
@media (max-width:860px) {
  nav.links { display:none; }
  .navrow { height:62px; }
}
@media (max-width:600px) {
  :root { --gut:16px; }          /* the 16px side gutter the layout contract asks for */
  body { font-size:15.5px; }
  .hero { padding:38px 0 42px; }
  .hero h1 { max-width:none; }
  .hero .cta .btn { width:100%; }
  .plan, .card { padding:22px; }
  .footrow { gap:24px; }
  .footnote { flex-direction:column; gap:8px; }
}

/* Touch targets on a phone, MEASURED at 390px: footer links were 18px tall, the brand 34px and
   the pricing toggles 35px. Padding grows the hit area without changing the type or the layout
   on desktop, where a mouse is precise and the density is wanted. */
@media (pointer: coarse), (max-width: 600px) {
  .brand { min-height:44px; }
  footer.site ul { gap:2px; }
  footer.site a { display:inline-flex; align-items:center; min-height:44px; }
  .seg button { min-height:44px; padding:11px 16px; }
  .prose ul a, .footnote a { display:inline-flex; align-items:center; min-height:44px; }
  /* A paragraph that is ONLY a link ("Contact: support@...") is a control, not running text,
     so the inline-link exemption does not cover it. */
  .prose p > a:only-child { display:inline-flex; align-items:center; min-height:44px; }
  .btn { min-height:44px; }
}

/* Nothing may scroll the page sideways on a phone. */
@media (max-width:600px) {
  .wrap, section, .grid, .plans, .stats { max-width:100%; }
}

/* ═══════════════════════════════════════════════════════════════════════════════════════════════
   v6 — THE REDESIGNED HOME PAGE
   Seal brand, Lucide icons (the app's own family), photography, real product screens, motion.
   Still no new colours: every fill below is an existing token or a translucent white/black over
   one. Motion rules: entrances ≤ .7s and gated on html.js-anim (see the reveal note above);
   continuous motion (marquee, chain, floats) is transform/opacity only — no animated blur under
   a backdrop-filter, which measured 22 fps on a real GPU in another Korevra product — and all of
   it stops under prefers-reduced-motion.
   ═══════════════════════════════════════════════════════════════════════════════════════════════ */

/* ── icons ───────────────────────────────────────────────────────────────────────────────────── */
svg.i { width:1em; height:1em; display:inline-block; vertical-align:-.14em; flex-shrink:0;
  fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }

/* ── header ──────────────────────────────────────────────────────────────────────────────────── */
.brand-seal { width:34px; height:34px; border-radius:24%; display:block;
  box-shadow:0 0 0 1px rgba(255,255,255,.08), 0 6px 18px rgba(0,0,0,.35); }
.nav-cta { display:flex; align-items:center; gap:10px; }
.nav-cta .btn { padding:10px 18px; }
header.site { transition:box-shadow .3s var(--ease), background .3s; }
header.site.scrolled { background:rgba(13,21,32,.92); box-shadow:0 10px 30px rgba(0,0,0,.35); }
.center { text-align:center; }
.sec-head.center { margin-left:auto; margin-right:auto; }
.eyebrow svg.i { font-size:15px; }

/* ── hero ────────────────────────────────────────────────────────────────────────────────────── */
.hero2 { position:relative; padding:clamp(48px,8vh,96px) 0 clamp(64px,10vh,120px); overflow:hidden; }
.hero2-mesh { position:absolute; inset:0; pointer-events:none; background:var(--grad-mesh); }
.hero2-mesh::after {          /* a faint ruled grid, fading out — the ledger the product keeps */
  content:''; position:absolute; inset:0;
  background-image:linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px);
  background-size:56px 56px;
  -webkit-mask-image:radial-gradient(ellipse 70% 60% at 50% 30%,#000 30%,transparent 75%);
          mask-image:radial-gradient(ellipse 70% 60% at 50% 30%,#000 30%,transparent 75%);
}
.hero2-grid { position:relative; display:grid; grid-template-columns:1.05fr .95fr; gap:56px; align-items:center; }
.hero2 h1 { font-size:clamp(38px,5.6vw,68px); font-weight:800; letter-spacing:-.025em; line-height:1.04;
  margin:22px 0 20px; max-width:14ch; }
.grad { background:linear-gradient(120deg,#F4A460 0%,#E8732C 55%,#F4A460 100%); background-size:200% 100%;
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:transparent;
  animation:gradShift 9s ease-in-out infinite; }
@keyframes gradShift { 50% { background-position:100% 0; } }
.lede { font-size:clamp(16.5px,1.6vw,19px); color:var(--td); max-width:54ch; margin-bottom:30px; }
.cta { display:flex; flex-wrap:wrap; gap:14px; align-items:center; }
.hero2-facts { list-style:none; display:flex; flex-wrap:wrap; gap:10px 22px; margin-top:26px; }
.hero2-facts li { display:flex; align-items:center; gap:8px; color:var(--td); font-size:14px; }
.hero2-facts svg.i { color:var(--g-ink); }

/* word-by-word rise for the headline; site.js wraps the words, and only when it can animate */
.w { display:inline-block; }
html.js-anim [data-words] .w { opacity:0; transform:translateY(.42em); }
html.js-anim [data-words].in .w { opacity:1; transform:none;
  transition:opacity .55s var(--ease), transform .7s var(--ease); transition-delay:calc(var(--i) * 45ms); }

.hero2-visual { position:relative; }
.hero2-photo { position:relative; border-radius:24px; overflow:hidden; aspect-ratio:5/5.4;
  box-shadow:var(--elev-3), 0 0 0 1px rgba(255,255,255,.08); }
.hero2-photo img { width:100%; height:100%; object-fit:cover; object-position:64% 50%; display:block; }
.hero2-photo::after { content:''; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  background:linear-gradient(180deg,rgba(13,21,32,0) 55%,rgba(13,21,32,.35)); }

.glass { background:rgba(20,33,48,.88); border:1px solid rgba(255,255,255,.12); border-radius:16px;
  box-shadow:var(--elev-3); -webkit-backdrop-filter:blur(14px) saturate(140%); backdrop-filter:blur(14px) saturate(140%); }
.vote-card { position:absolute; left:-36px; bottom:-30px; width:min(310px,80%); padding:18px 18px 16px;
  animation:bob 7s ease-in-out infinite; }
.chain-card { position:absolute; right:-22px; top:28px; display:flex; align-items:center; gap:12px; padding:12px 16px 12px 12px;
  animation:bob 8s ease-in-out -3s infinite; }
@keyframes bob { 50% { transform:translateY(-7px); } }
.chain-card img { width:40px; height:40px; display:block; }
.cc-t { font-family:'Outfit',sans-serif; font-weight:600; font-size:14px; }
.cc-h { display:flex; align-items:center; gap:5px; font-family:'JetBrains Mono',monospace; font-size:12px; color:var(--g-ink); }
.vc-head { display:flex; align-items:center; justify-content:space-between; gap:10px; }
.vc-pill { display:inline-flex; align-items:center; gap:7px; font-size:12px; font-weight:600; color:var(--g-ink);
  background:rgba(76,175,80,.12); border:1px solid rgba(76,175,80,.3); padding:3px 10px; border-radius:999px; }
.live-dot { width:7px; height:7px; border-radius:50%; background:var(--g); position:relative; }
.live-dot::after { content:''; position:absolute; inset:-4px; border-radius:50%; border:2px solid var(--g);
  opacity:0; animation:ping 2s var(--ease) infinite; }
@keyframes ping { 0% { transform:scale(.5); opacity:.8; } 100% { transform:scale(1.6); opacity:0; } }
.vc-ref { font-family:'JetBrains Mono',monospace; font-size:12px; color:var(--tm); }
.vc-title { font-family:'Outfit',sans-serif; font-weight:600; font-size:15px; line-height:1.3; margin:12px 0 14px; }
.vc-bars { display:grid; gap:9px; }
.vc-row { display:grid; grid-template-columns:62px 1fr 18px; align-items:center; gap:10px; font-size:13px; color:var(--td); }
.vc-row b { color:var(--w); text-align:right; font-family:'Outfit',sans-serif; }
.bar { height:8px; border-radius:99px; background:rgba(255,255,255,.08); overflow:hidden; }
.bar i { display:block; height:100%; width:var(--w); border-radius:inherit; background:var(--g); }
.bar i.r { background:var(--r); } .bar i.n { background:var(--tm); }
html.js-anim .reveal .bar i { width:0; }
html.js-anim .reveal.in .bar i { width:var(--w); transition:width 1.1s var(--ease) .45s; }
.vc-foot { display:flex; align-items:center; gap:7px; margin-top:14px; padding-top:12px; border-top:var(--hairline);
  font-size:12.5px; color:var(--tm); }
.vc-foot svg.i { color:var(--o-ink); }

/* ── frameworks marquee ──────────────────────────────────────────────────────────────────────── */
.frameworks { padding:26px 0 30px; border-top:var(--hairline); border-bottom:var(--hairline); background:rgba(20,33,48,.55); }
.fw-label { text-align:center; color:var(--tm); font-size:12.5px; font-weight:600; letter-spacing:.1em; text-transform:uppercase; margin-bottom:14px; }
.marquee { overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent); }
.marquee-track { display:flex; width:max-content; animation:marquee 42s linear infinite; }
.marquee:hover .marquee-track { animation-play-state:paused; }
.marquee-track span { display:inline-flex; align-items:center; gap:22px; padding-right:22px; white-space:nowrap;
  font-family:'Outfit',sans-serif; font-weight:600; font-size:17px; color:var(--td); }
.marquee-track span::after { content:''; width:6px; height:6px; border-radius:50%; background:var(--o); opacity:.7; }
@keyframes marquee { to { transform:translateX(-50%); } }

/* ── product showcase ────────────────────────────────────────────────────────────────────────── */
.product { position:relative; }
.tabbar { display:flex; gap:4px; width:fit-content; max-width:100%; margin:0 auto 30px; padding:5px;
  background:var(--nv); border:1px solid var(--nl2); border-radius:999px; overflow-x:auto; scrollbar-width:none; }
.tabbar::-webkit-scrollbar { display:none; }
.tabbar button { flex:0 0 auto; background:transparent; border:none; cursor:pointer; color:var(--td);
  font-family:'DM Sans',sans-serif; font-weight:600; font-size:14px; padding:10px 18px; border-radius:999px;
  transition:background .25s var(--ease), color .25s; }
.tabbar button:hover { color:var(--w); }
.tabbar button[aria-selected="true"] { background:var(--o); color:#12100E; }
.stage { position:relative; max-width:1000px; margin:0 auto; }
.stage::before { content:''; position:absolute; inset:10% 8% -6%; border-radius:50%; pointer-events:none;
  background:radial-gradient(closest-side,rgba(232,115,44,.18),transparent); }
.browser { position:relative; border-radius:16px; overflow:hidden; background:var(--nv);
  border:1px solid rgba(255,255,255,.1); box-shadow:var(--elev-3); }
.browser-bar { display:flex; align-items:center; gap:7px; height:40px; padding:0 14px; background:var(--nk); border-bottom:var(--hairline); }
.browser-bar i { width:11px; height:11px; border-radius:50%; background:var(--nl2); flex:0 0 auto; }
.browser-bar span { margin:0 auto; transform:translateX(-24px); width:min(340px,60%); text-align:center;
  background:var(--nv); color:var(--tm); font-family:'JetBrains Mono',monospace; font-size:12px;
  padding:4px 14px; border-radius:7px; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
.screens { position:relative; aspect-ratio:16/10; background:var(--nk); }
.screens img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:top left; display:block;
  opacity:0; transform:scale(1.012); transition:opacity .55s var(--ease), transform .8s var(--ease); }
.screens img.on { opacity:1; transform:none; }
.phone { position:absolute; right:-34px; bottom:-48px; width:clamp(150px,19%,196px); padding:7px; border-radius:32px;
  background:linear-gradient(160deg,var(--nl2),var(--nk)); box-shadow:var(--elev-3), 0 0 0 1px rgba(255,255,255,.12); }
.phone img { display:block; width:100%; height:auto; border-radius:26px; }
.stage-note { text-align:center; color:var(--tm); font-size:13.5px; margin-top:22px; }

.features { margin-top:80px; }
.feature { background:linear-gradient(160deg,var(--nv),var(--nl)); border:var(--hairline); border-radius:18px; padding:26px;
  transition:transform .3s var(--ease), border-color .3s, box-shadow .3s var(--ease); }
.feature:hover { transform:translateY(-4px); border-color:rgba(232,115,44,.3); box-shadow:var(--elev-2); }
.feature .ico { width:46px; height:46px; border-radius:13px; display:grid; place-items:center; margin-bottom:18px;
  background:var(--o-soft); border:1px solid rgba(232,115,44,.28); color:var(--o-ink); }
.feature .ico svg.i { width:22px; height:22px; stroke-width:1.8; }
.feature h3 { font-size:18.5px; margin-bottom:8px; }
.feature p { color:var(--td); font-size:15px; }

/* ── story ───────────────────────────────────────────────────────────────────────────────────── */
.story { background:linear-gradient(180deg,transparent,rgba(20,33,48,.6) 30%,rgba(20,33,48,.6) 70%,transparent); }
.story-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
.story-card { margin:0; border-radius:20px; overflow:hidden; background:var(--nv); border:var(--hairline); box-shadow:var(--elev-1); }
.story-img { aspect-ratio:4/3; overflow:hidden; }
.story-img img { width:100%; height:100%; object-fit:cover; display:block; transition:transform 1.2s var(--ease); }
.story-card:hover .story-img img { transform:scale(1.045); }
.story-card figcaption { padding:22px 22px 26px; color:var(--td); font-size:15px; }
.story-card .step { display:block; font-family:'JetBrains Mono',monospace; font-size:12px; letter-spacing:.06em;
  text-transform:uppercase; color:var(--o-ink); margin-bottom:9px; }
.story-card strong { display:block; font-family:'Outfit',sans-serif; font-size:18.5px; font-weight:700; color:var(--w);
  line-height:1.25; margin-bottom:7px; }

/* ── the chain ───────────────────────────────────────────────────────────────────────────────── */
.chain-grid, .ai-grid { display:grid; grid-template-columns:1fr 1fr; gap:64px; align-items:center; }
.chainsec h2, .aisec h2, .cta2 h2 { font-size:clamp(26px,3.6vw,40px); margin-bottom:14px; }
.lede-sm { color:var(--td); font-size:17px; margin-bottom:22px; }
.ticks { list-style:none; display:grid; gap:12px; }
.ticks li { display:flex; gap:11px; align-items:flex-start; color:var(--td); font-size:15.5px; }
.ticks svg.i { color:var(--g-ink); margin-top:.28em; }
.textlink { display:inline-flex; align-items:center; gap:7px; margin-top:26px; font-weight:600; }
.textlink svg.i { transition:transform .25s var(--ease); }
.textlink:hover svg.i { transform:translateX(3px); }
.chain-visual { border-radius:24px; padding:18px; background:linear-gradient(160deg,var(--nv),var(--nk));
  border:var(--hairline); box-shadow:var(--elev-2); }
.chain-svg { display:block; width:100%; height:auto; }
.chain-svg #chainpath { animation:dash 3.5s linear infinite; }
@keyframes dash { to { stroke-dashoffset:-72; } }
.blk rect { fill:var(--nl); stroke:rgba(255,255,255,.12); }
.blk text { fill:#FFFFFF; font-family:'Outfit',sans-serif; font-weight:600; font-size:15px; }
.blk text.h { fill:var(--tm); font-family:'JetBrains Mono',monospace; font-weight:400; font-size:12px; }
.blk.ok rect { stroke:rgba(76,175,80,.55); }
.blk.ok text.h { fill:var(--g-ink); }
html.js-anim .chain-visual .blk { opacity:0; transform:translateY(10px); }
html.js-anim .chain-visual.in .blk { opacity:1; transform:none; transition:opacity .5s var(--ease), transform .6s var(--ease); }
html.js-anim .chain-visual.in .blk:nth-of-type(2) { transition-delay:.12s; }
html.js-anim .chain-visual.in .blk:nth-of-type(3) { transition-delay:.24s; }
html.js-anim .chain-visual.in .blk:nth-of-type(4) { transition-delay:.36s; }

/* ── AI ──────────────────────────────────────────────────────────────────────────────────────── */
.ai-photo { position:relative; }
.ai-photo > img { display:block; width:100%; aspect-ratio:4/3.3; object-fit:cover; border-radius:22px;
  box-shadow:var(--elev-3), 0 0 0 1px rgba(255,255,255,.08); }
.note-card { position:absolute; right:-28px; bottom:-34px; width:min(330px,82%); padding:18px;
  animation:bob 8s ease-in-out -2s infinite; }
.nc-k { display:flex; align-items:center; gap:7px; font-family:'JetBrains Mono',monospace; font-size:11.5px;
  letter-spacing:.06em; text-transform:uppercase; color:var(--o-ink); }
.note-card p { font-size:14px; color:var(--td); margin:10px 0 12px; line-height:1.55; }
.note-card p b { color:var(--w); font-weight:600; }
.nc-f { display:flex; align-items:center; gap:8px; font-size:12.5px; color:var(--tm); }
.nc-f::before { content:''; width:7px; height:7px; border-radius:50%; background:var(--gold); }
.callout-soft { margin-top:8px; padding:20px 22px; border-radius:14px; background:var(--nv); border:var(--hairline);
  border-left:3px solid var(--o); color:var(--td); font-size:15px; }
.callout-soft strong { display:block; font-family:'Outfit',sans-serif; font-size:16px; color:var(--w); margin-bottom:6px; }

/* ── facts ───────────────────────────────────────────────────────────────────────────────────── */
.facts { padding:24px 0 clamp(52px,8vh,96px); }
.g4 { grid-template-columns:repeat(4,1fr); }
.fact { padding:24px; border-radius:18px; background:var(--nv); border:var(--hairline); }
.fact svg.i { display:block; width:22px; height:22px; color:var(--o-ink); margin-bottom:14px; stroke-width:1.8; }
.fact b { display:block; font-family:'Outfit',sans-serif; font-weight:800; font-size:30px; line-height:1.1; }
.fact span { color:var(--tm); font-size:14px; }

/* ── pricing teaser ──────────────────────────────────────────────────────────────────────────── */
.pt-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }
.pt { display:flex; flex-direction:column; padding:24px; border-radius:18px; background:var(--nv); border:var(--hairline); }
.pt.feat { border-color:rgba(232,115,44,.45); box-shadow:var(--elev-2), 0 0 0 1px rgba(232,115,44,.18); }
.pt-n { font-size:12.5px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--tm); }
.pt-p { font-family:'Outfit',sans-serif; font-weight:800; font-size:30px; margin:8px 0 4px; }
.pt-d { color:var(--td); font-size:13.5px; }

/* ── closing CTA ─────────────────────────────────────────────────────────────────────────────── */
.cta2-grid { display:grid; grid-template-columns:1.05fr .95fr; align-items:stretch; border-radius:26px; overflow:hidden;
  background:linear-gradient(135deg,rgba(232,115,44,.14),rgba(33,150,243,.08)), var(--nv); border:var(--hairline); box-shadow:var(--elev-2); }
.cta2-grid > div:last-child { padding:clamp(28px,4vw,52px); align-self:center; }
.cta2-photo { min-height:340px; }
.cta2-photo img { width:100%; height:100%; object-fit:cover; display:block; }

/* ── responsive ──────────────────────────────────────────────────────────────────────────────── */
@media (max-width:1100px) {
  .phone { right:-8px; }
  .vote-card { left:-12px; }
  .chain-card { right:-8px; }
  .note-card { right:-8px; }
}
@media (max-width:900px) {
  .hero2-grid, .chain-grid, .ai-grid, .cta2-grid { grid-template-columns:1fr; }
  .hero2-grid { gap:40px; }
  .hero2 h1 { max-width:none; }
  .hero2-visual { max-width:560px; margin:0 auto 34px; width:100%; }
  .hero2-photo { aspect-ratio:4/3.4; }
  .story-grid { grid-template-columns:1fr; max-width:560px; margin:0 auto; }
  .g4, .pt-grid { grid-template-columns:repeat(2,1fr); }
  .ai-grid > :first-child { margin-bottom:34px; }
  .cta2-photo { min-height:0; aspect-ratio:16/9; }
}
@media (max-width:700px) {
  .phone { display:none; }
  .features { margin-top:52px; }
}
@media (max-width:600px) {
  .hide-sm { display:none; }
  .nav-cta .btn { padding:10px 14px; font-size:14px; }
  .brand { font-size:19px; }
  .hero2 { padding-top:34px; }
  .hero2 .cta .btn { width:100%; }
  .vote-card { left:10px; bottom:-26px; width:calc(100% - 64px); }
  .chain-card { right:10px; top:12px; }
  .note-card { position:relative; right:auto; bottom:auto; width:auto; margin:-46px 12px 0; }
  .g4 { grid-template-columns:1fr 1fr; gap:12px; }
  .fact { padding:18px; }
  .fact b { font-size:24px; }
  .pt-grid { grid-template-columns:1fr; }
  .tabbar { margin-left:0; border-radius:14px; }
  .tabbar button { min-height:44px; }
}

@media (prefers-reduced-motion: reduce) {
  .marquee-track { flex-wrap:wrap; justify-content:center; width:auto; row-gap:6px; }
  .marquee-track span[aria-hidden] { display:none; }
  .marquee { -webkit-mask-image:none; mask-image:none; }
  .feature:hover, .story-card:hover .story-img img { transform:none; }
  .screens img { transition:none; }
}

/* v6 review fixes: the caption cleared of the phone mock-up; the hero cards un-stacked on a phone
   (the "chain verified" card sat on top of the vote card); the closing buttons side by side. */
@media (min-width:701px) { .stage-note { padding:0 230px; } }
@media (max-width:1100px) and (min-width:701px) { .stage-note { padding:0 190px; } }
.cta2 .btn-lg { padding:14px 24px; }
@media (max-width:600px) {
  .hero2-photo { aspect-ratio:4/3.6; }
  .vote-card { position:relative; left:auto; bottom:auto; width:auto; margin:-64px 12px 0; }
  .chain-card { top:12px; right:12px; }
}

/* v6: pricing — the quoted plan spans the row instead of sitting alone under three; icon ticks */
.plan li svg.tick { color:var(--g-ink); margin-top:.3em; }
.plan.wide { grid-column:1 / -1; }
@media (min-width:901px) {
  .plan.wide { display:grid; grid-template-columns:1.1fr 1.3fr auto; column-gap:40px; align-items:center; }
  .plan.wide ul { margin:0; }
  .plan.wide .who { min-height:0; }
  .plan.wide .foot { margin-top:0; }
  .plan.wide .btn { width:auto; padding-left:30px; padding-right:30px; }
}
/* v6: security — icons on the section heads, and the four facts a reviewer looks for first */
.prose h2 { display:flex; align-items:center; gap:12px; }
.prose h2 svg.i { color:var(--o-ink); width:22px; height:22px; flex:0 0 auto; }
.sec-facts { display:grid; grid-template-columns:repeat(2,1fr); gap:14px; margin:26px 0 10px; }
.sec-facts .fact b { font-size:21px; margin-bottom:4px; }
.sec-facts .fact span { color:var(--td); font-size:14px; line-height:1.5; display:block; }
@media (max-width:600px) { .sec-facts { grid-template-columns:1fr; } }

/* v7 touch targets, measured at 390px by tools/ux-audit.py: the footer "Sign in" link was 43.9px
   wide (its word is short) and the "How the security works" text link 25px tall. */
@media (pointer: coarse), (max-width: 600px) {
  footer.site a { min-width:44px; }
  .textlink { min-height:44px; }
}