/* =========================================================================
   OZAV site — shared design system
   Lightspark.com structure/system replicated, OZAV black/neutral brand.
   Font: Geist (free, Suisse-Intl-adjacent). Used across all pages.
   ========================================================================= */
:root{
  --font:"Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --w-copy:300; --w-head:400; --w-nav:450; --w-strong:600;
  --track:-0.03em;

  /* OZAV neutrals */
  --bg:#f7f7f5; --bg-app:#f1f1ef;
  --ink:#0a0a0a; --ink-head:#161616; --ink-hero:#222; --muted:#6b6b66;
  --line:rgba(10,10,10,.10); --line-2:rgba(10,10,10,.06);
  --dark:#0a0a0a; --dark-2:#111114; --white:#fff;

  /* restrained accents (icons / data / mockups only) */
  --accent:#2f6bff; --accent-2:#11b886; --warn:#ff5a52; --gold:#e8c45a;

  --on-dark-90:rgba(255,255,255,.9); --on-dark-70:rgba(255,255,255,.66);
  --on-dark-50:rgba(255,255,255,.48); --on-dark-30:rgba(255,255,255,.3);
  --on-dark-12:rgba(255,255,255,.12);

  --header-h:64px; --maxw:1240px; --gutter:clamp(20px,5vw,48px);
  --r-sm:4px; --r-md:14px; --r-lg:20px; --r-pill:999px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  background:var(--bg); color:var(--ink); font-family:var(--font);
  font-weight:var(--w-copy); font-size:16px; line-height:1.5;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; overflow-x:clip;
}
.wrap{max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gutter)}
a{color:inherit; text-decoration:none}
img{max-width:100%; display:block}
::selection{background:var(--ink); color:#fff}

/* ---------- type ---------- */
h1,h2,h3,h4{font-weight:var(--w-head); letter-spacing:var(--track); color:var(--ink-head); line-height:1.06}
h1{font-size:clamp(42px,6.4vw,64px); color:var(--ink-hero)}
h2{font-size:clamp(28px,3.6vw,38px); line-height:1.16}
h3{font-size:clamp(20px,2.2vw,26px); line-height:1.2}
.eyebrow{font-size:13px; letter-spacing:.02em; color:var(--muted); font-weight:var(--w-nav)}
.lead{font-size:clamp(18px,1.5vw,21px); color:var(--muted); font-weight:var(--w-copy); line-height:1.45}
.dim{color:var(--muted)}

/* arrow link */
.link{display:inline-flex; align-items:center; gap:.45em; font-size:16px; color:var(--ink);
  transition:gap .2s}
.link svg{width:15px;height:15px; transition:transform .2s}
.link:hover{gap:.7em} .link:hover svg{transform:translateX(3px)}
.link.muted{color:var(--muted)}

/* buttons */
.btn{display:inline-flex; align-items:center; gap:.5em; background:var(--ink); color:#fff;
  border-radius:var(--r-pill); padding:12px 22px; font-size:14px; font-weight:var(--w-strong);
  transition:transform .18s ease, background .2s; border:1px solid var(--ink); cursor:pointer}
.btn:hover{background:#262626; transform:translateY(-1px)}
.btn.ghost{background:transparent; color:var(--ink)}
.btn.ghost:hover{background:rgba(10,10,10,.05)}
.btn.sm{padding:9px 16px; font-size:13px}

/* status tags — Disponível / Em breve / Beta (truthful product status) */
.stag{display:inline-flex; align-items:center; gap:5px; font-size:10px; font-weight:var(--w-nav); letter-spacing:.02em;
  padding:2px 8px; border-radius:var(--r-pill); line-height:1.6; vertical-align:middle; white-space:nowrap}
.stag::before{content:""; width:5px; height:5px; border-radius:50%; flex:none}
.stag-live{background:rgba(17,184,134,.14); color:#0a6f50} .stag-live::before{background:var(--accent-2)}
.stag-soon{background:rgba(10,10,10,.06); color:#6b6b66} .stag-soon::before{background:#9a9a93}
.stag-beta{background:rgba(47,107,255,.12); color:#1d4fd0} .stag-beta::before{background:var(--accent)}

/* =========================================================================
   HEADER + MEGA-MENUS
   ========================================================================= */
/* wrapper must not create a layout box, or the sticky header only sticks within it */
#site-header{display:contents}
header{position:sticky; top:0; z-index:60; height:var(--header-h); display:flex; align-items:center;
  backdrop-filter:saturate(180%) blur(14px);
  background:color-mix(in srgb, var(--bg) 72%, transparent);
  border-bottom:1px solid transparent; transition:border-color .3s, background .3s}
header.scrolled{border-color:var(--line)}
.nav{display:flex; align-items:center; justify-content:space-between; width:100%; gap:24px}
.brand{display:flex; align-items:center; gap:9px; font-size:20px; font-weight:var(--w-strong); letter-spacing:-.02em}
.brand .mark{width:22px;height:22px}
.nav-mid{display:flex; gap:6px; align-items:center}
.nav-trigger{font-size:14px; font-weight:var(--w-nav); color:var(--ink); padding:8px 12px; cursor:pointer;
  background:none; border:0; font-family:inherit; display:inline-flex; align-items:center; gap:5px; border-radius:var(--r-sm)}
.nav-trigger .chev{width:9px;height:9px; transition:transform .25s; opacity:.5}
.nav-item.open .nav-trigger .chev{transform:rotate(180deg)}
.nav-item.open .nav-trigger{color:var(--muted)}
.nav-right{display:flex; gap:22px; align-items:center}
.nav-right a{font-size:14px; font-weight:var(--w-nav)}
/* PT/EN language toggle */
.lang-toggle{display:inline-flex; align-items:center; border:1px solid var(--line); border-radius:999px; padding:2px; background:rgba(10,10,10,.02)}
.lang-toggle button{appearance:none; border:0; background:transparent; cursor:pointer; font:inherit;
  font-size:12px; font-weight:var(--w-nav); letter-spacing:.02em; color:var(--muted);
  padding:4px 9px; border-radius:999px; line-height:1; transition:background .18s, color .18s}
.lang-toggle button[data-active]{background:var(--ink); color:#fff}
.lang-toggle button:hover:not([data-active]){color:var(--ink)}
/* cookie banner removed 2026-06-08 — site sets no tracking cookies (only functional localStorage) */
.burger{display:none; width:34px; height:34px; flex-direction:column; justify-content:center; gap:5px;
  background:none; border:0; cursor:pointer; padding:6px; margin-left:2px}
.burger span{display:block; height:2px; width:20px; background:var(--ink); border-radius:2px; transition:transform .25s, opacity .2s}
.burger.open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.burger.open span:nth-child(2){opacity:0}
.burger.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* mobile drawer */
.mobilenav{position:fixed; left:0; right:0; top:var(--header-h); bottom:0; z-index:50; overflow-y:auto;
  background:var(--bg); padding:18px var(--gutter) 64px; -webkit-overflow-scrolling:touch}
.mobilenav[hidden]{display:none}
.mn-group{padding:14px 0; border-bottom:1px solid var(--line)}
.mn-h{font-size:11px; text-transform:uppercase; letter-spacing:.06em; color:var(--muted); margin-bottom:8px; font-weight:var(--w-nav)}
.mn-group a{display:inline-block; width:50%; font-size:19px; font-weight:var(--w-head); letter-spacing:-.02em; color:var(--ink-head); padding:8px 0; vertical-align:top}
.mn-group:first-child a{width:100%}

/* skip-to-content (a11y) */
.skip{position:fixed; left:10px; top:-56px; z-index:100; background:var(--ink); color:#fff; padding:10px 16px;
  border-radius:8px; font-size:14px; font-weight:var(--w-nav); transition:top .2s}
.skip:focus{top:10px}

/* ===== book-a-demo modal ===== */
.modal{position:fixed; inset:0; z-index:120; display:none; align-items:flex-start; justify-content:center;
  padding:clamp(16px,5vh,64px) 16px; overflow-y:auto; background:rgba(10,10,10,.5); backdrop-filter:blur(4px)}
.modal.open{display:flex}
.modal-card{background:var(--bg); border:1px solid var(--line); border-radius:var(--r-lg); width:100%; max-width:540px;
  box-shadow:0 40px 100px -30px rgba(0,0,0,.5); position:relative; padding:clamp(26px,4vw,40px)}
.modal-x{position:absolute; top:16px; right:16px; width:34px; height:34px; border-radius:50%; border:1px solid var(--line);
  background:var(--white); cursor:pointer; font-size:16px; color:var(--ink); display:grid; place-items:center; transition:.18s}
.modal-x:hover{background:var(--bg-app)}
.modal .eyebrow{margin-bottom:14px; display:inline-flex; align-items:center; gap:9px}
.modal h2{font-size:clamp(25px,3.2vw,31px); margin-bottom:8px}
.modal .msub{color:var(--muted); font-size:15.5px; max-width:42ch; margin-bottom:24px}
.mform{display:grid; grid-template-columns:1fr 1fr; gap:14px}
.field{display:flex; flex-direction:column; gap:6px}
.field.full{grid-column:1 / -1}
.field label{font-size:12px; color:var(--muted); font-weight:var(--w-nav)}
.field label .req{color:var(--warn)}
.field input, .field select, .field textarea{font-family:inherit; font-size:15px; color:var(--ink);
  border:1px solid var(--line); border-radius:10px; padding:11px 13px; background:var(--white); transition:border-color .18s; width:100%}
.field input:focus, .field select:focus, .field textarea:focus{outline:0; border-color:var(--ink)}
.field textarea{resize:vertical; min-height:74px}
.field.err input, .field.err select{border-color:var(--warn)}
.field .msg{font-size:11px; color:var(--warn); display:none}
.field.err .msg{display:block}
.phone-row{display:grid; grid-template-columns:130px 1fr; gap:8px}
.hp{position:absolute; left:-9999px; width:1px; height:1px; opacity:0}
.consent{display:flex; gap:10px; align-items:flex-start; margin-top:2px; font-size:12.5px; color:var(--muted); grid-column:1/-1}
.consent input{margin-top:2px; flex:none}
.consent a{color:var(--ink); text-decoration:underline}
.mform-actions{grid-column:1/-1; margin-top:8px}
.mform-actions .btn{width:100%; justify-content:center}
.modal-step2{text-align:center; padding:8px 0}
.modal-step2 .tick{width:54px;height:54px;border-radius:50%;background:var(--accent-2);color:#04231a;display:grid;place-items:center;margin:0 auto 18px;font-size:24px}
.modal-step2 h2{margin-bottom:10px}
.modal-step2 p{color:var(--muted); max-width:42ch; margin:0 auto 8px}
.modal-step2 .summary{margin-top:18px; border:1px solid var(--line); border-radius:var(--r-md); background:var(--white); padding:16px 18px; text-align:left; font-size:13.5px; color:var(--ink)}
.modal-step2 .summary span{color:var(--muted)}
.modal-step2 .sched-embed{margin-top:20px; border:1px solid var(--line); border-radius:var(--r-md); overflow:hidden; aspect-ratio:4/3}
.modal-step2 .sched-embed iframe{width:100%;height:100%;border:0}
.modal-note{font-size:11px;color:var(--muted);margin-top:18px}
@media(max-width:560px){.mform{grid-template-columns:1fr}}
@media(prefers-reduced-motion:no-preference){.modal.open .modal-card{animation:mrise .34s cubic-bezier(.2,.7,.2,1)}}
@keyframes mrise{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}

/* mega panel */
.nav-item{position:static}
.mega{position:absolute; left:0; right:0; top:var(--header-h); z-index:55;
  background:var(--bg); border-bottom:1px solid var(--line); box-shadow:0 30px 60px -30px rgba(0,0,0,.18);
  opacity:0; visibility:hidden; transform:translateY(-8px); pointer-events:none;
  transition:opacity .2s ease, transform .2s ease, visibility .2s}
.nav-item.open .mega{opacity:1; visibility:visible; transform:none; pointer-events:auto}
.mega-in{display:grid; grid-template-columns:1fr auto; gap:48px; padding-block:34px 40px; align-items:start}
.mega .eyebrow{grid-column:1; margin-bottom:22px}
.mega-cols{grid-column:1; grid-row:2; display:grid; grid-template-columns:1fr 1fr; gap:6px 56px; max-width:560px}
.mega-cols.one{grid-template-columns:1fr; max-width:280px}
/* grouped mega panel (capabilities + use cases) */
.mega-group{grid-column:1; max-width:560px}
.mega-group + .mega-group{margin-top:22px}
.mega-group .sub{font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); font-weight:var(--w-nav); margin-bottom:8px}
.mega-group .links{display:grid; grid-template-columns:1fr 1fr; gap:2px 56px}
.mega-group .links.three{grid-template-columns:repeat(3,1fr)}
.mega-link{font-size:21px; font-weight:var(--w-head); letter-spacing:-.02em; color:var(--ink-head);
  padding:7px 0; transition:color .18s; display:flex; align-items:center; gap:8px}
.mega-link:hover{color:var(--muted)}
.mega-link small{font-size:12px; color:var(--muted); font-weight:var(--w-nav)}
.mega-preview{grid-column:2; grid-row:1 / span 2; width:330px; align-self:stretch}

/* preview cards inside mega */
.pv{border-radius:var(--r-md); overflow:hidden; height:100%; min-height:215px; position:relative;
  display:flex; align-items:center; justify-content:center; padding:22px}
.pv-green{background:radial-gradient(120% 120% at 30% 0%, #1d5b43, #0c2a20)}
.pv-purple{background:radial-gradient(120% 120% at 70% 0%, #3a2c7a, #15102e)}
.pv-blue{background:radial-gradient(120% 120% at 50% 0%, color-mix(in srgb,var(--accent) 55%,#0a0a0a), #0a0a0a)}
.pv .cashcard{background:#0e0e10; border-radius:14px; padding:16px 18px; width:200px; color:#fff;
  box-shadow:0 24px 50px -20px rgba(0,0,0,.6)}
.pv .cashcard .lbl{font-size:11px; color:var(--on-dark-50)}
.pv .cashcard .amt{font-size:26px; font-weight:var(--w-strong); letter-spacing:-.02em; margin:4px 0 14px}
.pv .cashcard .btns{display:flex; gap:8px}
.pv .cashcard .mini-btn{flex:1; text-align:center; font-size:11px; padding:8px; border-radius:8px;
  background:rgba(255,255,255,.08); color:#fff}
.pv .arrow-to{position:absolute; right:18px; top:50%; transform:translateY(-50%); font-size:11px; color:var(--on-dark-70);
  display:flex; align-items:center; gap:6px}
.pv .pv-phone{width:150px; aspect-ratio:9/18; background:#0e0e10; border-radius:22px; padding:12px 11px;
  box-shadow:0 24px 60px -20px rgba(0,0,0,.6); color:#fff}
.pv .pv-phone .amt{font-size:21px; font-weight:var(--w-strong); letter-spacing:-.02em; margin-top:18px}
.pv .pv-phone .yield{display:inline-block; margin-top:10px; font-size:10px; padding:4px 9px; border-radius:99px;
  background:var(--accent-2); color:#04231a; font-weight:var(--w-strong)}
.pv .pv-phone .rowline{height:7px; border-radius:4px; background:rgba(255,255,255,.1); margin-top:9px}
.pv .pv-phone .rowline.s{width:60%}

@media(max-width:920px){
  .nav-mid{display:none} .burger{display:flex}
  .nav-right a.hide-sm{display:none}
}

/* =========================================================================
   CONNECTOR BAND (hero) — shared
   ========================================================================= */
.band{position:relative; border-radius:var(--r-md); overflow:hidden; min-height:460px;
  background:#08080a; color:#fff; isolation:isolate}
.band.light{color:var(--ink); border:1px solid var(--line);
  background:
    radial-gradient(58% 80% at 14% 4%, rgba(47,107,255,.07), transparent 56%),
    radial-gradient(56% 82% at 88% 98%, rgba(17,184,134,.06), transparent 56%),
    radial-gradient(48% 60% at 94% 8%, rgba(232,196,90,.06), transparent 55%),
    #fbfbfb}
/* atmospheric film grain (CSS-only, no external asset) */
.band:not(.light)::after{content:""; position:absolute; inset:-8%; z-index:0; pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:170px 170px; opacity:.07; mix-blend-mode:soft-light;
  animation:grain 7s steps(5) infinite}
@keyframes grain{0%{transform:translate(0,0)}20%{transform:translate(-3%,2%)}40%{transform:translate(2%,-3%)}60%{transform:translate(-2%,1%)}80%{transform:translate(3%,-1%)}100%{transform:translate(0,0)}}
@media(prefers-reduced-motion:reduce){.band:not(.light)::after{animation:none}}
.band-bg{position:absolute; inset:0; z-index:-2; transition:background .9s ease}
.band.light .band-bg{display:none}
.band-grid{position:absolute; inset:0; z-index:-1; opacity:.5;
  background-image:radial-gradient(rgba(255,255,255,.16) 1px,transparent 1px); background-size:22px 22px;
  -webkit-mask-image:radial-gradient(120% 90% at 50% 35%,#000 30%,transparent 75%);
          mask-image:radial-gradient(120% 90% at 50% 35%,#000 30%,transparent 75%)}
.band.light .band-grid{background-image:radial-gradient(rgba(10,10,10,.12) 1px,transparent 1px); opacity:.6}
.tabs{display:flex; flex-wrap:wrap; gap:6px 8px; padding:20px 22px; position:relative; z-index:3}
.tab{font-size:14px; color:var(--on-dark-50); padding:4px 12px; border-radius:var(--r-sm); cursor:pointer;
  transition:color .25s, background .25s; background:none; border:0; font-family:inherit}
.tab.active{color:#fff; background:rgba(255,255,255,.08)}
.tab:hover{color:var(--on-dark-90)}
.band.light .tab{color:var(--muted)} .band.light .tab.active{color:var(--ink); background:rgba(10,10,10,.06)}

.band-body{position:relative; z-index:2; display:grid; grid-template-columns:1fr auto 1fr;
  align-items:center; gap:18px; padding:0 26px 36px; height:430px; min-height:0}
/* connector SVG sits behind labels+phone, spanning full body */
.fan-svg{position:absolute; inset:0; width:100%; height:100%; z-index:1; pointer-events:none; overflow:visible}
.fan-svg path{fill:none; stroke:rgba(255,255,255,.16); stroke-width:1}
.band.light .fan-svg path{stroke:rgba(20,49,92,.5)}
.fan-svg .fdot{fill:rgba(255,255,255,.55)}
.fan-svg .fnode{fill:rgba(255,255,255,.95)}
.band.light .fan-svg .fdot{fill:rgba(20,49,92,.7)}
.band.light .fan-svg .fnode{fill:#14315c}

/* rails are vertical marquees; JS drives the scroll + connector lines in sync */
.rail{position:relative; z-index:2; align-self:stretch; overflow:hidden;
  -webkit-mask-image:linear-gradient(transparent, #000 9%, #000 91%, transparent);
          mask-image:linear-gradient(transparent, #000 9%, #000 91%, transparent)}
.rail-scroll{display:flex; flex-direction:column; gap:18px; padding-block:10px; will-change:transform}
.rail-left .rail-scroll{align-items:flex-start} .rail-right .rail-scroll{align-items:flex-end}
.rail span{font-size:clamp(13px,1.3vw,15px); font-weight:var(--w-nav); letter-spacing:-.01em;
  color:var(--on-dark-70); line-height:1; white-space:nowrap}
.band.light .rail span{color:var(--ink)}

.phone{width:188px; min-width:188px; aspect-ratio:9/18.5; background:#fff; border-radius:26px;
  box-shadow:0 30px 80px -20px rgba(0,0,0,.55), 0 0 0 7px #0c0c0e; padding:14px 13px; color:#0a0a0a;
  position:relative; overflow:hidden; z-index:2}
.phone .status{display:flex; justify-content:space-between; font-size:11px; color:#444; margin-bottom:14px}
.phone .ttl{font-size:15px; font-weight:var(--w-strong); margin-bottom:8px}
.phone .bal-l{font-size:11px; color:#888}
.phone .bal{font-size:26px; font-weight:var(--w-strong); letter-spacing:-.02em; margin-bottom:14px}
.phone .card{height:58px; border-radius:12px; background:linear-gradient(135deg,#14315c 0%,#0a0a0a 100%);
  color:#fff; padding:10px 12px; font-size:11px; display:flex; flex-direction:column; justify-content:space-between; margin-bottom:12px}
.phone .row{display:flex; justify-content:space-between; font-size:12px; padding:9px 0; border-top:1px solid #eee; color:#333}
.phone .row b{font-weight:var(--w-strong)} .phone .row .pos{color:var(--accent-2)}
/* keep the connector fan + rails on narrow/tablet widths (just scaled down) so it
   isn't a bare phone — only fully collapse on very small phones */
@media(max-width:760px){
  .band-body{grid-template-columns:1fr auto 1fr; gap:10px}
  .rail span{font-size:11.5px}
  .tabs{padding:16px 16px}
  .phone{width:150px; min-width:150px; padding:13px 12px}
  .phone .ttl{font-size:14px}
  .phone .bal{font-size:22px; margin-bottom:11px}
  .phone .card{height:52px; font-size:10.5px}
  .phone .row{font-size:11px; padding:8px 0}
}
@media(max-width:520px){
  .band-body{gap:6px}
  .rail span{font-size:10px}
  .rail-scroll{gap:14px}
  .tabs{padding:12px 12px; gap:5px 7px}
  .phone{padding:12px 11px}
  .phone .ttl{font-size:13px}
  .phone .bal-l{font-size:10px}
  .phone .bal{font-size:20px; margin-bottom:10px}
  .phone .card{height:50px; margin-bottom:9px}
  .phone .row{font-size:10.5px; padding:7px 0}
}

/* =========================================================================
   HERO (top of homepage / sub-pages)
   ========================================================================= */
.hero{padding:clamp(56px,9vw,104px) 0 0}
.hero-top{display:grid; grid-template-columns:1.5fr 1fr; gap:40px; align-items:start}
h1 .ico{display:inline-block; width:.86em;height:.86em; vertical-align:-.04em; margin-right:.18em}
.hero-aside{padding-top:14px}
.hero-aside .lead{margin-bottom:22px; max-width:34ch}
.band-mt{margin-top:clamp(40px,6vw,64px)}
@media(max-width:860px){.hero-top{grid-template-columns:1fr; gap:24px}}

/* sub-page hero (single column, multi-clause) */
.subhero{padding:clamp(48px,8vw,96px) 0 0}
.subhero h1{max-width:18ch}
.subhero .clause{color:var(--muted)} .subhero .clause b{color:var(--ink-hero); font-weight:var(--w-head)}
.subhero .cta-row{display:flex; gap:14px; flex-wrap:wrap; margin-top:30px}

/* =========================================================================
   EDITORIAL statement
   ========================================================================= */
.editorial{padding:clamp(80px,12vw,150px) 0}
.editorial p{font-size:clamp(28px,3.7vw,40px); font-weight:var(--w-head); letter-spacing:var(--track);
  line-height:1.16; max-width:20ch; color:var(--ink)}
/* ===== OZAV stack visual (homepage "why") — isometric 3D tower ===== */
.oz-why{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.04fr); gap:clamp(28px,5vw,64px); align-items:center}
.oz-why-copy{min-width:0}
.oz-why-copy p{max-width:none}
.oz-stack{display:flex; justify-content:center}
.oz-svg{width:100%; height:auto; max-width:480px; overflow:visible}
.oz-svg .oz-ic{stroke:#fff; fill:none; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; opacity:.95}
.oz-svg .oz-cn{stroke:var(--line); stroke-width:1.3; stroke-dasharray:2 3.2}
.oz-svg .oz-dot{fill:var(--accent)}
.oz-svg .oz-tx{fill:var(--ink); font-family:var(--font); font-size:13px; font-weight:var(--w-nav)}
.oz-svg .oz-tx-mut{fill:var(--muted)}
@media (max-width:920px){ .oz-why{grid-template-columns:1fr; gap:32px} .oz-svg{max-width:440px} }

/* =========================================================================
   PRODUCT ROWS (homepage)
   ========================================================================= */
.prod{display:grid; grid-template-columns:1fr 1.15fr; gap:clamp(28px,5vw,72px); align-items:center;
  padding:clamp(40px,6vw,76px) 0}
.prod.flip .copy{order:2}
.prod .pico{width:36px;height:36px; margin-bottom:18px}
.prod h3{margin-bottom:14px}
.prod .ptxt{font-size:clamp(20px,2vw,24px); font-weight:var(--w-head); letter-spacing:-.02em;
  line-height:1.25; margin-bottom:24px; max-width:30ch}
.prod .acts{display:flex; gap:24px; align-items:center}
.visual{border-radius:var(--r-md); aspect-ratio:16/11; position:relative; overflow:hidden;
  border:1px solid var(--line); box-shadow:0 30px 70px -42px rgba(0,0,0,.22);
  display:flex; align-items:center; justify-content:center; padding:26px}
.visual .dots{position:absolute; inset:0; opacity:.5;
  background-image:radial-gradient(rgba(10,10,10,.07) 1px,transparent 1px); background-size:22px 22px}
.v-grad-1{background:radial-gradient(120% 130% at 16% 0%, rgba(47,107,255,.10), transparent 56%), #fbfbfb}
.v-grad-2{background:radial-gradient(120% 130% at 84% 0%, rgba(17,184,134,.10), transparent 56%), #fbfbfb}
.v-grad-3{background:radial-gradient(120% 130% at 50% 0%, rgba(232,196,90,.13), transparent 56%), #f7f5ef}
.fan-mock{position:absolute; inset:0; display:flex; align-items:flex-end; justify-content:center; gap:14px; padding:0 8%}
.fan-mock .mini{width:23%; aspect-ratio:9/19; background:#fff; border-radius:14px 14px 0 0;
  box-shadow:0 20px 40px -16px rgba(0,0,0,.5); padding:9px; font-size:9px; color:#222; transform:translateY(14%)}
.fan-mock .mini:nth-child(2){transform:translateY(2%)} .fan-mock .mini:nth-child(3){transform:translateY(-6%)}
.fan-mock .mini:nth-child(4){transform:translateY(2%)}
.fan-mock .mini .mbal{font-size:14px; font-weight:600; margin-top:14px}
.fan-mock .mini .mline{height:6px; border-radius:3px; background:#eee; margin-top:7px}
.fan-mock .mini .mline.a{width:60%} .fan-mock .mini .mline.b{width:80%}
/* product sub-line — concrete, tangible features under a product card */
.prod .psub{display:flex; align-items:center; gap:9px; font-size:13.5px; color:var(--muted); margin:-8px 0 24px}
.prod .psub::before{content:""; width:16px; height:1px; background:var(--ink); opacity:.4; flex:none}
/* conversion mock — PIX ↔ stablecoin (no rate/spread shown) */
.fxmock{background:#fff; border:1px solid var(--line); border-radius:16px; width:min(360px,92%);
  box-shadow:0 20px 44px -24px rgba(0,0,0,.28); padding:22px; position:relative; z-index:1}
.fxmock .fx-row{display:flex; justify-content:space-between; align-items:center; gap:12px;
  padding:14px 16px; border:1px solid var(--line); border-radius:12px; background:var(--bg-app)}
.fxmock .fx-rail{font-size:12px; color:var(--muted)}
.fxmock .fx-amt{font-size:18px; font-weight:var(--w-strong); letter-spacing:-.02em; color:var(--ink)}
.fxmock .fx-row.out .fx-amt{color:var(--accent-2)}
.fxmock .fx-swap{display:flex; justify-content:center; margin:9px 0; color:var(--accent)}
.fxmock .fx-swap svg{width:22px; height:22px}
.fxmock .fx-cap{font-size:11px; color:var(--muted); text-align:center; margin-top:14px}
.fxmock .fx-chips{display:flex; flex-wrap:wrap; gap:6px; justify-content:center; margin-top:12px}
.fxmock .fx-chips span{font-size:10.5px; color:var(--ink); background:var(--bg-app);
  border:1px solid var(--line); border-radius:99px; padding:4px 10px}
@media(max-width:820px){.prod{grid-template-columns:1fr} .prod.flip .copy{order:0}}

/* =========================================================================
   PILLARS
   ========================================================================= */
.pillars{padding:clamp(60px,9vw,120px) 0; border-top:1px solid var(--line)}
.pillars h2{max-width:18ch; margin-bottom:clamp(40px,6vw,72px)}
.pgrid{display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(24px,3vw,48px)}
.pcard .pk{font-size:13px; font-weight:var(--w-nav); color:var(--ink); margin-bottom:14px; display:flex; align-items:center; gap:8px}
.pcard .pk::before{content:""; width:7px;height:7px; border-radius:2px; background:var(--ink)}
.pcard h3{font-size:21px; margin-bottom:10px}
.pcard p{color:var(--muted); font-size:15.5px}
@media(max-width:760px){.pgrid{grid-template-columns:1fr; gap:32px}}

/* =========================================================================
   TESTIMONIAL band
   ========================================================================= */
.quote{margin:clamp(20px,3vw,40px) 0; border-radius:var(--r-md); overflow:hidden;
  background:linear-gradient(120deg,var(--accent),#1f3bbf); color:#fff; position:relative}
.quote .dots{position:absolute; inset:0; opacity:.25; background-image:radial-gradient(rgba(255,255,255,.6) 1px,transparent 1px); background-size:22px 22px}
.quote-in{position:relative; display:grid; grid-template-columns:1.4fr 1fr; gap:40px; padding:clamp(40px,6vw,72px); align-items:center}
.quote h2{color:#fff; margin-bottom:22px; max-width:16ch}
.quote blockquote{font-size:17px; line-height:1.5; color:var(--on-dark-90); max-width:46ch; margin-bottom:16px}
.quote cite{font-style:normal; font-size:14px; color:var(--on-dark-70)}
.quote .tag{display:inline-block; margin-top:26px; font-size:13px; color:var(--on-dark-70); border:1px solid rgba(255,255,255,.25); border-radius:var(--r-pill); padding:6px 14px}
.quote .phold{font-size:11px; letter-spacing:.04em; text-transform:uppercase; color:var(--on-dark-50); margin-top:18px}
.qvisual{justify-self:end}
@media(max-width:820px){.quote-in{grid-template-columns:1fr} .qvisual{display:none}}

/* =========================================================================
   CTA
   ========================================================================= */
.cta{padding:clamp(80px,11vw,150px) 0}
.cta h2{max-width:22ch; color:var(--muted)} .cta h2 b{color:var(--ink); font-weight:var(--w-head)}
.cta .btn{margin-top:30px}

/* =========================================================================
   SUB-PAGE COMPONENTS
   ========================================================================= */
/* marquee chip row */
.marquee{overflow:hidden; border-block:1px solid var(--line); padding:18px 0; margin:clamp(40px,6vw,72px) 0}
.marquee-track{display:flex; gap:34px; width:max-content; animation:scrollx 32s linear infinite}
.marquee:hover .marquee-track{animation-play-state:paused}
@keyframes scrollx{to{transform:translateX(-50%)}}
.chip{display:inline-flex; align-items:center; gap:9px; font-size:15px; color:var(--ink); white-space:nowrap}
.chip i{width:16px;height:16px; border-radius:4px; display:inline-block}
.chip svg{height:20px; width:auto; flex:none; display:block}
.chip .flag{font-size:19px; line-height:1; flex:none}
.chip .lg-w{font-weight:800; font-style:italic; letter-spacing:-.02em; font-size:16px}

/* stats row */
.stats{display:grid; grid-template-columns:repeat(4,1fr); gap:24px; padding:clamp(40px,6vw,72px) 0; border-top:1px solid var(--line)}
.stat .n{font-size:clamp(40px,5vw,60px); font-weight:var(--w-head); letter-spacing:var(--track); line-height:1}
.stat .l{font-size:14px; color:var(--muted); margin-top:10px; max-width:18ch}
@media(max-width:680px){.stats{grid-template-columns:1fr 1fr; gap:32px}}

/* capability cards (numbered) */
.section{padding:clamp(56px,8vw,110px) 0}
.section-head{max-width:30ch; margin-bottom:clamp(36px,5vw,60px)}
.section-head h2{margin-bottom:14px}
.capgrid{display:grid; grid-template-columns:1fr 1fr; gap:24px}
.capcard{background:var(--white); border:1px solid var(--line); border-radius:var(--r-md); padding:30px; min-height:280px;
  display:flex; flex-direction:column; justify-content:space-between; overflow:hidden; position:relative}
.capcard .num{font-size:13px; color:var(--muted); font-weight:var(--w-nav); margin-bottom:16px}
.capcard h3{font-size:21px; margin-bottom:10px}
.capcard p{color:var(--muted); font-size:15px; max-width:34ch}
.capcard .mock{margin-top:26px}
@media(max-width:760px){.capgrid{grid-template-columns:1fr}}

/* mini cash card used in capability mocks */
.cashmock{background:#0e0e10; border-radius:12px; padding:14px 16px; color:#fff; width:210px; display:inline-block}
.cashmock .lbl{font-size:11px; color:var(--on-dark-50)}
.cashmock .amt{font-size:24px; font-weight:var(--w-strong); letter-spacing:-.02em; margin:4px 0 12px}
.cashmock .btns{display:flex; gap:8px}
.cashmock .mini-btn{flex:1; text-align:center; font-size:11px; padding:8px; border-radius:8px; background:rgba(255,255,255,.08)}

/* feature list (capability page) */
.flist{display:grid; grid-template-columns:1fr 1fr; gap:2px 48px}
.flist .fi{padding:18px 0; border-top:1px solid var(--line); display:flex; gap:14px; align-items:flex-start}
.flist .fi .fnum{font-size:13px; color:var(--muted); min-width:24px}
.flist .fi h4{font-size:17px; margin-bottom:5px}
.flist .fi p{font-size:14px; color:var(--muted); max-width:38ch}
@media(max-width:680px){.flist{grid-template-columns:1fr}}

/* token / network chips grid */
.tokrow{display:flex; flex-wrap:wrap; gap:10px; margin-top:18px}
.tok{font-size:14px; padding:8px 16px; border:1px solid var(--line); border-radius:var(--r-pill); color:var(--ink); background:var(--white)}

/* integration timeline */
.timeline{display:grid; grid-template-columns:repeat(5,1fr); gap:0; border-top:1px solid var(--line)}
.timeline .ti{padding:26px 22px 26px 0; border-right:1px solid var(--line)}
.timeline .ti:last-child{border-right:0}
.timeline .ti .tk{font-size:13px; color:var(--muted); margin-bottom:10px}
.timeline .ti p{font-size:14.5px; color:var(--ink-head)}
@media(max-width:860px){.timeline{grid-template-columns:1fr 1fr} .timeline .ti{border-right:0; border-bottom:1px solid var(--line)}}

/* business feature carousel (auto + manual) */
.carousel{margin:clamp(36px,5vw,56px) 0; border:1px solid var(--line); border-radius:var(--r-md); overflow:hidden; background:var(--white)}
.carousel-tabs{display:flex; flex-wrap:wrap; gap:4px; padding:14px; border-bottom:1px solid var(--line)}
.carousel-tab{font-size:14px; color:var(--muted); padding:6px 14px; border-radius:var(--r-pill); cursor:pointer; border:0; background:none; font-family:inherit}
.carousel-tab.active{background:var(--ink); color:#fff}
.carousel-stage{padding:clamp(28px,5vw,52px); display:grid; grid-template-columns:1fr 1fr; gap:40px; align-items:center; min-height:280px}
.carousel-stage .cs-copy h3{margin-bottom:12px} .carousel-stage .cs-copy p{color:var(--muted); max-width:36ch}
.carousel-stage .cs-vis{justify-self:center}
@media(max-width:760px){.carousel-stage{grid-template-columns:1fr}}

/* expandable feature cards (accordion) */
.accordion{border-top:1px solid var(--line)}
.acc-item{border-bottom:1px solid var(--line)}
.acc-head{width:100%; text-align:left; background:none; border:0; font-family:inherit; cursor:pointer;
  padding:24px 0; display:flex; justify-content:space-between; align-items:center; gap:20px}
.acc-head h4{font-size:clamp(18px,2vw,22px); color:var(--ink-head)}
.acc-head .plus{font-size:22px; color:var(--muted); transition:transform .25s; line-height:1}
.acc-item.open .acc-head .plus{transform:rotate(45deg)}
.acc-body{max-height:0; overflow:hidden; transition:max-height .3s ease}
.acc-body p{color:var(--muted); padding-bottom:24px; max-width:60ch; font-size:15.5px}

/* economics row */
.econ{display:grid; grid-template-columns:repeat(4,1fr); gap:24px; padding-top:36px}
.econ .ec{border-top:2px solid var(--ink); padding-top:18px}
.econ .ec .ek{font-size:15px; font-weight:var(--w-nav); margin-bottom:6px}
.econ .ec p{font-size:13.5px; color:var(--muted)}
.econ .ec .placeholder{font-size:11px; color:var(--accent); margin-top:8px}
@media(max-width:760px){.econ{grid-template-columns:1fr 1fr}}

/* developer code block */
.dev{display:grid; grid-template-columns:1fr 1.05fr; gap:clamp(28px,5vw,64px); align-items:center}
@media(max-width:820px){.dev{grid-template-columns:1fr}}
.codeblock{background:#0c0c0e; border:1px solid var(--on-dark-12); border-radius:var(--r-md); padding:22px 24px; overflow:auto;
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; font-size:13px; line-height:1.7; color:#e6e6e6}
.codeblock pre{margin:0; white-space:pre}
.codeblock .c-mut{color:#75757f} .codeblock .c-key{color:#7aa2ff} .codeblock .c-str{color:#7ee0b8} .codeblock .c-fn{color:#e8c45a}

/* layered stack diagram */
.stack{display:flex; flex-direction:column; gap:10px; max-width:560px}
.stack .layer{border:1px solid var(--line); border-radius:var(--r-md); padding:18px 20px; background:var(--white)}
.stack .layer.top{background:var(--ink); color:#fff; border-color:var(--ink)}
.stack .layer .lk{font-size:12px; color:var(--muted); margin-bottom:5px} .stack .layer.top .lk{color:var(--on-dark-50)}
.stack .layer h4{font-size:18px} .stack .layer.base{display:flex; flex-wrap:wrap; gap:8px; align-items:center}
.stack .arrow{align-self:center; color:var(--muted); font-size:18px; line-height:.4}

/* who-we-serve segments grid */
.segments{display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line); border:1px solid var(--line); border-radius:var(--r-md); overflow:hidden}
.segments .seg{background:var(--bg); padding:26px 24px}
.segments .seg h4{font-size:17px; margin-bottom:8px} .segments .seg p{font-size:14px; color:var(--muted); max-width:30ch}
.segments a.seg{text-decoration:none; color:inherit; display:block; transition:background .15s}
.segments a.seg:hover{background:var(--bg-app)}
.segments.flow{display:grid; grid-template-columns:repeat(3,1fr); gap:12px; background:none; border:none; border-radius:0; overflow:visible}
.segments.flow .seg{position:relative; border:1px solid var(--line); border-radius:var(--r-md); padding-right:44px; transition:border-color .15s, background .15s, transform .15s, box-shadow .15s}
.segments.flow .seg::after{content:"→"; position:absolute; right:18px; bottom:20px; color:var(--muted); font-size:16px; transition:transform .15s, color .15s}
.segments.flow a.seg:hover{background:var(--bg-app); border-color:var(--ink); transform:translateY(-2px); box-shadow:0 8px 24px rgba(10,10,10,.06)}
.segments.flow a.seg:hover::after{color:var(--ink); transform:translateX(3px)}
@media(max-width:860px){.segments.flow{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.segments.flow{grid-template-columns:1fr}}
/* ===== legal / institutional content pages ===== */
.legal h2{font-size:clamp(18px,2vw,22px); font-weight:var(--w-head); letter-spacing:-.02em; margin:38px 0 10px; scroll-margin-top:90px}
.legal h3{font-size:16px; font-weight:var(--w-strong); margin:22px 0 8px}
.legal h4{font-size:14px; font-weight:var(--w-strong); color:var(--muted); margin:16px 0 6px; text-transform:uppercase; letter-spacing:.04em}
.legal p,.legal li{font-size:15.5px; line-height:1.7; color:#3a3a38; max-width:74ch}
.legal ul{margin:8px 0 12px 20px; display:flex; flex-direction:column; gap:5px}
.legal a{color:var(--accent); text-decoration:underline}
.legal-note{font-size:13px; color:var(--muted); background:var(--bg-app); border:1px solid var(--line); border-radius:10px; padding:12px 16px; margin-bottom:8px}
.legal-toc{display:flex; flex-wrap:wrap; gap:8px; margin:16px 0 30px}
.legal-toc a{font-size:13px; color:var(--ink); background:var(--bg-app); border:1px solid var(--line); border-radius:99px; padding:6px 13px; text-decoration:none; transition:background .15s}
.legal-toc a:hover{background:#ededea}
.legal table{width:100%; border-collapse:collapse; margin:12px 0 18px; font-size:14.5px}
.legal th,.legal td{text-align:left; padding:11px 14px; border:1px solid var(--line); vertical-align:top; color:#3a3a38}
.legal th{background:var(--bg-app); font-weight:var(--w-strong); color:var(--ink)}
.flegal{display:flex; gap:18px; flex-wrap:wrap}
.flegal a{color:var(--on-dark-70); font-size:13px; text-decoration:none}
.flegal a:hover{color:#fff}
/* ===== FX Desk converter ===== */
.fxdesk{max-width:460px; background:#fff; border:1px solid var(--line); border-radius:18px; box-shadow:0 30px 70px -42px rgba(0,0,0,.22); padding:24px}
.fxdesk .fx-leg{border:1px solid var(--line); border-radius:14px; padding:14px 16px; background:var(--bg-app)}
.fxdesk .fx-lbl{font-size:12px; color:var(--muted); margin-bottom:6px}
.fxdesk .fx-in{display:flex; align-items:center; justify-content:space-between; gap:12px}
.fxdesk .fx-in input{border:none; background:none; font-size:26px; font-weight:var(--w-strong); letter-spacing:-.02em; color:var(--ink); width:58%; outline:none; padding:0}
.fxdesk select{border:1px solid var(--line); background:#fff; border-radius:99px; padding:9px 12px; font-size:14px; font-weight:var(--w-strong); color:var(--ink); cursor:pointer}
.fxdesk .fx-swap{display:flex; justify-content:center; margin:-9px 0; position:relative; z-index:1}
.fxdesk .fx-swap button{width:40px; height:40px; border-radius:50%; border:1px solid var(--line); background:#fff; color:var(--accent); cursor:pointer; box-shadow:0 6px 16px -8px rgba(0,0,0,.3); font-size:16px}
.fxdesk .fx-meta{display:flex; justify-content:space-between; font-size:13px; color:var(--muted); padding:8px 4px 0}
.fxdesk .fx-meta b{color:var(--ink); font-weight:var(--w-strong)}
.fxdesk .fx-go{margin-top:18px; width:100%; text-align:center}
/* ===== Knowledge Hub ===== */
.hub{display:grid; grid-template-columns:repeat(auto-fill,minmax(270px,1fr)); gap:12px}
.hub a{display:block; border:1px solid var(--line); border-radius:var(--r-md); padding:18px 20px; text-decoration:none; color:inherit; transition:background .15s}
.hub a:hover{background:var(--bg-app)}
.hub h3{font-size:16px; letter-spacing:-.01em; margin-bottom:6px; font-weight:var(--w-strong)}
.hub .ct{font-size:13px; color:var(--muted)}
.crumb{font-size:13px; color:var(--muted); margin-bottom:18px}
.crumb a{color:var(--accent); text-decoration:none} .crumb a:hover{text-decoration:underline}
.art-cta{margin-top:30px; padding-top:22px; border-top:1px solid var(--line)}
/* ===== availability (currencies & countries) ===== */
.avail-tabs{display:inline-flex; gap:4px; background:var(--bg-app); border:1px solid var(--line); border-radius:99px; padding:4px; margin-bottom:8px}
.avail-tabs button{border:none; background:none; font:inherit; font-size:13.5px; font-weight:var(--w-strong); color:var(--muted); padding:7px 16px; border-radius:99px; cursor:pointer; transition:.15s}
.avail-tabs button.on{background:var(--ink); color:#fff}
.avail-count{font-size:13px; color:var(--muted); margin:10px 0 18px}
.avail-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:10px}
.avail-cell{display:flex; align-items:center; gap:12px; border:1px solid var(--line); border-radius:12px; padding:12px 14px; background:var(--white)}
.avail-cell .fl{font-size:22px; line-height:1; flex:none}
.avail-cell .nm{font-size:14.5px; font-weight:var(--w-strong); color:var(--ink); line-height:1.2}
.avail-cell .sub{font-size:12px; color:var(--muted); margin-top:2px}
.avail-cell .right{margin-left:auto; text-align:right}
.avail-cell.soon{opacity:.72}
.avail-hide{display:none !important}
@media(max-width:860px){.segments{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.segments{grid-template-columns:1fr}}

/* capability chips with status */
.caps{display:flex; flex-wrap:wrap; gap:10px}
.caps .cap{display:inline-flex; align-items:center; gap:8px; border:1px solid var(--line); border-radius:var(--r-pill);
  padding:9px 16px; font-size:14px; background:var(--white); color:var(--ink)}

/* ---- 4-square motif (brand signature marker) ---- */
.motif{display:inline-grid; grid-template-columns:repeat(2,1fr); gap:2px; width:16px; height:16px; vertical-align:-3px; flex:none}
.motif i{border-radius:2px; display:block}
.motif i:nth-child(1){background:#2f6bff} .motif i:nth-child(2){background:#11b886}
.motif i:nth-child(3){background:#0a0a0a} .motif i:nth-child(4){background:#e8c45a}
.motif.lg{width:22px;height:22px;gap:3px}

/* ---- how it works (3 numbered steps) ---- */
.steps{display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(22px,3vw,44px)}
.step .sn{display:flex; align-items:center; gap:10px; margin-bottom:16px}
.step .sn b{font-size:13px; font-weight:var(--w-nav); color:var(--muted); letter-spacing:.02em}
.step h3{font-size:21px; margin-bottom:8px}
.step p{color:var(--muted); font-size:15.5px; max-width:34ch}
@media(max-width:760px){.steps{grid-template-columns:1fr; gap:28px}}

/* ---- differentiator strip ("not a separate product") ---- */
.diffs{display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line); border:1px solid var(--line); border-radius:var(--r-md); overflow:hidden}
.diffs .diff{background:var(--bg); padding:30px 26px}
.diffs .diff .motif{margin-bottom:16px}
.diffs .diff h3{font-size:19px; line-height:1.25; letter-spacing:-.02em}
.diffs .diff p{color:var(--muted); font-size:14.5px; margin-top:8px; max-width:34ch}
@media(max-width:760px){.diffs{grid-template-columns:1fr}}

/* ---- two ways to launch ---- */
.launch{display:grid; grid-template-columns:1fr 1fr; gap:20px}
.launch .lc{border:1px solid var(--line); border-radius:var(--r-md); padding:28px; background:var(--white)}
.launch .lc .lk{font-size:12px; color:var(--muted); margin-bottom:10px; font-weight:var(--w-nav); letter-spacing:.04em; text-transform:uppercase}
.launch .lc h3{font-size:22px; margin-bottom:8px} .launch .lc p{color:var(--muted); font-size:15px}
@media(max-width:680px){.launch{grid-template-columns:1fr}}

/* ---- rich light product mockups ---- */
.appcard{background:#fff; border:1px solid var(--line); border-radius:16px; box-shadow:0 20px 44px -24px rgba(0,0,0,.28);
  width:min(330px,82%); padding:20px 22px; position:relative; z-index:1}
.appcard .ac-top{display:flex; justify-content:space-between; align-items:center; font-size:12px; color:var(--muted); margin-bottom:16px}
.appcard .ac-brand{display:flex; align-items:center; gap:7px; font-weight:var(--w-strong); color:var(--ink); letter-spacing:-.01em}
.appcard .ac-bal-l{font-size:11px; color:var(--muted)}
.appcard .ac-bal{font-size:30px; font-weight:var(--w-strong); letter-spacing:-.02em; margin:2px 0 16px}
.appcard .ac-tabs{display:flex; gap:6px; margin-bottom:6px}
.appcard .ac-tab{font-size:11px; padding:5px 12px; border-radius:99px; background:var(--bg-app); color:var(--ink)}
.appcard .ac-tab.on{background:var(--ink); color:#fff}
.appcard .ac-row{display:flex; justify-content:space-between; font-size:12.5px; padding:10px 0; border-top:1px solid var(--line); color:#444}
.appcard .ac-row:first-of-type{margin-top:6px} .appcard .ac-row b{font-weight:var(--w-strong); color:var(--ink)}
.appcard .ac-row .pos{color:var(--accent-2)}
/* debit-card visual */
.cardviz{width:min(330px,82%); aspect-ratio:1.586; border-radius:16px; padding:20px; color:#fff; position:relative; z-index:1;
  background:linear-gradient(135deg,#1b1b1f,#3a3a42); box-shadow:0 24px 50px -24px rgba(0,0,0,.5); display:flex; flex-direction:column; justify-content:space-between}
.cardviz .cv-top{display:flex; justify-content:space-between; align-items:center}
.cardviz .cv-no{font-size:16px; letter-spacing:.14em} .cardviz .cv-b{font-size:12px; color:rgba(255,255,255,.7)}
.cardviz .cv-name{font-size:13px; letter-spacing:.04em}
.controls{display:flex; gap:8px; flex-wrap:wrap; margin-top:16px; justify-content:center}
.controls span{font-size:11px; padding:6px 11px; border-radius:99px; background:#fff; border:1px solid var(--line); color:var(--ink)}
/* code mock (light) */
.codemock{background:#0c0c0e; border-radius:14px; padding:18px 20px; width:min(360px,90%); color:#e6e6e6; position:relative; z-index:1;
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; font-size:12px; line-height:1.7; box-shadow:0 20px 44px -24px rgba(0,0,0,.4)}
.codemock .c-key{color:#7aa2ff} .codemock .c-str{color:#7ee0b8} .codemock .c-mut{color:#75757f} .codemock .c-fn{color:#e8c45a}

/* ---- metrics strip (honest stat callouts) ---- */
.metrics{border-top:1px solid var(--line); border-bottom:1px solid var(--line); background:var(--white)}
.metrics-in{display:grid; grid-template-columns:repeat(5,1fr)}
.metric{padding:30px clamp(20px,3vw,32px); border-right:1px solid var(--line)}
.metric:last-child{border-right:0}
.metric .v{font-size:clamp(28px,3.4vw,40px); font-weight:var(--w-head); letter-spacing:var(--track); line-height:1}
.metric .k{font-size:13.5px; color:var(--muted); margin-top:8px; max-width:22ch}
.metrics-note{font-size:11px; color:var(--muted); text-align:right; padding:8px clamp(20px,3vw,32px); border-top:1px solid var(--line)}
@media(max-width:680px){.metrics-in{grid-template-columns:1fr 1fr} .metric:nth-child(2){border-right:0}}

/* ---- concrete use-case scenarios ---- */
.scenarios{display:grid; grid-template-columns:repeat(2,1fr); gap:1px; background:var(--line); border:1px solid var(--line); border-radius:var(--r-md); overflow:hidden}
.scenarios .scn{background:var(--bg); padding:28px 26px}
.scenarios .scn h4{font-size:18px; margin-bottom:8px; display:flex; align-items:center; gap:9px}
.scenarios .scn p{color:var(--muted); font-size:14.5px; max-width:42ch}
@media(max-width:680px){.scenarios{grid-template-columns:1fr}}

/* ---- 2-column sub-page hero (copy + mock) ---- */
.subhero-grid{display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(28px,5vw,56px); align-items:center}
.subhero-grid .sh-visual{justify-self:center; width:100%}
@media(max-width:860px){.subhero-grid{grid-template-columns:1fr; gap:36px} .subhero-grid .sh-visual{display:none}}

/* configurable callout */
.cfg{display:flex; align-items:flex-start; gap:12px; border:1px solid var(--line); border-radius:var(--r-md);
  background:var(--white); padding:18px 22px; max-width:62ch}
.cfg .motif{margin-top:2px} .cfg p{font-size:15px; color:var(--ink)} .cfg p b{font-weight:var(--w-strong)}

/* =========================================================================
   FOOTER
   ========================================================================= */
footer{background:var(--dark); color:#fff; padding:clamp(56px,7vw,88px) 0 40px; position:relative; overflow:hidden}
footer::before{content:""; position:absolute; top:-20%; left:10%; width:50%; height:60%;
  background:radial-gradient(circle, rgba(47,107,255,.18), transparent 60%); filter:blur(40px)}
.fcols{display:grid; grid-template-columns:repeat(5,1fr); gap:26px; position:relative}
.fcol h4{font-size:13px; color:var(--on-dark-50); font-weight:var(--w-nav); margin-bottom:20px; letter-spacing:0}
.fcol a{display:block; font-size:15px; color:var(--on-dark-90); padding:6px 0; transition:color .2s}
.fcol a:hover{color:#fff}
.fcompliance{font-size:12.5px; color:var(--on-dark-50); position:relative; margin-top:4px}
.wordmark{font-size:clamp(72px,21vw,300px); font-weight:var(--w-head); letter-spacing:-.04em; line-height:.8; color:#fff;
  margin:clamp(40px,6vw,72px) 0 clamp(28px,4vw,48px); position:relative}
.fbottom{display:flex; justify-content:space-between; align-items:center; gap:16px; border-top:1px solid rgba(255,255,255,.1); padding-top:24px; position:relative; flex-wrap:wrap}
.fsocial{display:flex; gap:26px} .fsocial a{font-size:14px; color:var(--on-dark-70)} .fsocial a:hover{color:#fff}
.fbottom .cr{font-size:14px; color:var(--on-dark-50)}
@media(max-width:760px){.fcols{grid-template-columns:1fr 1fr; gap:28px}}

/* =========================================================================
   SCROLL REVEAL
   ========================================================================= */
.reveal{opacity:0; transform:translateY(22px); transition:opacity .8s cubic-bezier(.2,.7,.2,1), transform .8s cubic-bezier(.2,.7,.2,1)}
.reveal.in{opacity:1; transform:none}
@media(prefers-reduced-motion:reduce){.reveal{opacity:1; transform:none; transition:none}}

/* announcement bar (dismissible, top of page) */
.annc{background:var(--ink); color:var(--on-dark-90); font-size:13px}
.annc.hide{display:none}
.annc-in{display:flex; align-items:center; justify-content:center; gap:14px; padding:9px 16px; position:relative; text-align:center}
.annc-in b{color:#fff; font-weight:var(--w-nav)}
.annc-in a{color:#fff; text-decoration:underline; white-space:nowrap}
.annc-x{position:absolute; right:8px; top:50%; transform:translateY(-50%); background:none; border:0; color:var(--on-dark-50); cursor:pointer; font-size:13px; padding:4px 8px; line-height:1}
.annc-x:hover{color:#fff}
@media(max-width:620px){.annc{font-size:12px} .annc-in{padding-right:30px; gap:8px}}