:root{
  /* brand */
  --dv-blue:#4A6FA5; --dv-blue-deep:#33527d; --dv-blue-soft:#eef3f9;
  --dv-ink:#0f172a; --dv-black:#070c16; --dv-bg:#fff;
  --dv-green:#00b67a; --dv-green-soft:#e6f7f1;
  --dv-amber:#b45309; --dv-red:#b91c1c;
  --ink-1:rgba(15,23,42,1); --ink-2:rgba(15,23,42,.72); --ink-3:rgba(15,23,42,.55); --ink-4:rgba(15,23,42,.35);
  --line:rgba(15,23,42,.10); --line-2:rgba(15,23,42,.06);
  /* type */
  --font-display:"Poppins",system-ui,sans-serif;
  --font-body:"Plus Jakarta Sans",system-ui,-apple-system,sans-serif;
  --font-mono:"JetBrains Mono","SF Mono",ui-monospace,Menlo,monospace;
  --fs-display-lg:clamp(34px,5vw,60px);
  --fs-display-md:clamp(28px,4vw,46px);
  --fs-display-sm:clamp(22px,2.6vw + 8px,32px);
  /* space */
  --space-1:4px;--space-2:8px;--space-3:12px;--space-4:16px;--space-5:20px;--space-6:24px;
  --space-7:32px;--space-8:40px;--space-9:48px;--space-10:64px;--space-11:80px;--space-12:96px;--space-13:120px;
  --gutter:clamp(16px,4vw,56px); --content-max:1440px;
  /* shape */
  --radius-sm:8px;--radius-md:12px;--radius-lg:16px;--radius-xl:24px;--radius-2xl:32px;--radius-pill:999px;
  --section-radius:32px;
  /* motion */
  --ease-emphasis:cubic-bezier(.22,1,.36,1); --ease-standard:cubic-bezier(.4,0,.2,1);
  --dur-quick:200ms; --dur-base:300ms; --dur-slow:500ms;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:transparent;color:var(--ink-1);font-family:var(--font-body);font-size:16px;line-height:1.6;overflow-x:hidden}
img,svg{max-width:100%;display:block}
a{color:inherit}
.wrap{max-width:var(--content-max);margin:0 auto;padding-inline:var(--gutter)}
h1,h2,h3{font-family:var(--font-display);letter-spacing:-.02em;margin:0;text-wrap:balance}
h1{font-size:var(--fs-display-lg);line-height:1.08;font-weight:700}
h2{font-size:var(--fs-display-md);line-height:1.14;font-weight:700}
h3{font-size:var(--fs-display-sm);line-height:1.22;font-weight:600}
p{margin:0}
.num{font-family:var(--font-mono);font-variant-numeric:tabular-nums}
.eyebrow{font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--dv-blue)}
.lead{font-size:clamp(16px,1.2vw,18px);color:var(--ink-2);max-width:62ch}

/* ---------- topnav ---------- */
.topnav{position:sticky;top:0;z-index:20;background:rgba(255,255,255,.88);backdrop-filter:saturate(1.6) blur(14px);border-bottom:1px solid var(--line-2)}
.topnav-inner{display:flex;align-items:center;gap:var(--space-7);height:68px}
.brand{display:flex;align-items:center;gap:10px;font-family:var(--font-display);font-weight:700;letter-spacing:-.02em;font-size:18px;text-decoration:none}
.brand img{height:26px;width:auto;display:block}
.foot .brand img{height:44px;width:auto;filter:brightness(0) invert(1)}
.nav-links{display:none;gap:var(--space-6);margin-inline-start:var(--space-4)}
.nav-links a{font-size:14.5px;font-weight:500;color:var(--ink-2);text-decoration:none;padding:6px 0;position:relative;transition:color var(--dur-quick) var(--ease-standard)}
.nav-links a::after{content:"";position:absolute;left:0;right:100%;bottom:0;height:2px;background:var(--dv-blue);transition:right var(--dur-base) var(--ease-emphasis)}
.nav-links a:hover{color:var(--ink-1)} .nav-links a:hover::after{right:0}
.nav-cta{margin-inline-start:auto;display:flex;gap:var(--space-3);align-items:center}
.btn{display:inline-flex;align-items:center;gap:8px;font-family:var(--font-body);font-weight:600;font-size:14.5px;border-radius:var(--radius-pill);padding:11px 20px;text-decoration:none;border:1px solid transparent;cursor:pointer;transition:transform var(--dur-quick) var(--ease-emphasis),background var(--dur-quick),box-shadow var(--dur-quick)}
.btn-primary{background:var(--dv-blue);color:#fff;box-shadow:0 1px 0 rgba(15,23,42,.06)}
.btn-primary:hover{background:var(--dv-blue-deep);transform:translateY(-1px);box-shadow:0 8px 22px rgba(74,111,165,.28)}
.btn-ghost{border-color:var(--line);color:var(--ink-1);background:#fff}
.btn-ghost:hover{border-color:var(--dv-blue);color:var(--dv-blue)}
.btn .arw{transition:transform var(--dur-base) var(--ease-emphasis)}
.btn:hover .arw{transform:translateX(3px)}
.burger{display:none;width:40px;height:40px;border:1px solid var(--line);background:#fff;border-radius:10px;place-items:center;cursor:pointer}
@media(max-width:940px){ .nav-links{display:none} .burger{display:grid} .nav-cta .btn-ghost{display:none} }

/* ---------- hero ---------- */
.hero{padding:clamp(56px,7vw,104px) 0 var(--space-11);position:relative;overflow:hidden}
.hero::before{content:"";position:absolute;inset:-20% -10% auto;height:70%;background:radial-gradient(60% 60% at 50% 0,rgba(74,111,165,.14),transparent 70%);pointer-events:none}
.hero-grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(28px,5vw,72px);align-items:center;position:relative}
@media(max-width:980px){.hero-grid{grid-template-columns:1fr}}
.hero h1 .accent{background:linear-gradient(120deg,var(--dv-blue),var(--dv-blue-deep));-webkit-background-clip:text;background-clip:text;color:transparent}
.hero .lead{margin-top:var(--space-5)}
.hero-cta{display:flex;gap:var(--space-3);flex-wrap:wrap;margin-top:var(--space-8)}
.hero-note{margin-top:var(--space-5);font-size:13.5px;color:var(--ink-3);display:flex;align-items:center;gap:8px}
.dot-live{width:8px;height:8px;border-radius:50%;background:var(--dv-green);box-shadow:0 0 0 0 rgba(0,182,122,.5);animation:pulse-live 2.4s ease-out infinite}
@keyframes pulse-live{0%{box-shadow:0 0 0 0 rgba(0,182,122,.45)}70%{box-shadow:0 0 0 12px rgba(0,182,122,0)}100%{box-shadow:0 0 0 0 rgba(0,182,122,0)}}

/* stat strip */
.stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--radius-xl);overflow:hidden;margin-top:var(--space-10)}
@media(max-width:760px){.stats{grid-template-columns:repeat(2,1fr)}}
.stat{background:#fff;padding:var(--space-6) var(--space-5)}
.stat .v{font-family:var(--font-mono);font-size:clamp(20px,2.2vw,26px);font-weight:600;letter-spacing:-.02em}
.stat .k{font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3);font-weight:600;margin-top:6px}

/* hero panel */
.hero-panel{border:1px solid var(--line);border-radius:var(--radius-2xl);background:#fff;box-shadow:0 30px 60px -32px rgba(15,23,42,.28);overflow:hidden}
.hp-head{display:flex;align-items:center;gap:10px;padding:14px 18px;border-bottom:1px solid var(--line-2);background:var(--dv-blue-soft)}
.hp-head .t{font-size:13px;font-weight:600;color:var(--ink-2)}
.hp-tabs{display:flex;gap:6px;margin-inline-start:auto}
.hp-tab{font-size:11.5px;font-weight:600;padding:5px 10px;border-radius:var(--radius-pill);color:var(--ink-3);background:#fff;border:1px solid var(--line)}
.hp-tab.on{background:var(--dv-blue);color:#fff;border-color:var(--dv-blue)}
.hp-rows{padding:6px 0}
.hp-row{display:grid;grid-template-columns:1fr auto auto;gap:14px;align-items:center;padding:12px 18px;border-bottom:1px solid var(--line-2);font-size:13.5px}
.hp-row:last-child{border-bottom:0}
.hp-row .m{color:var(--ink-2)}
.hp-row .p{font-family:var(--font-mono);font-weight:600}
.pill{font-size:11px;font-weight:700;padding:3px 9px;border-radius:var(--radius-pill);letter-spacing:.03em}
.pill-up{background:var(--dv-green-soft);color:#0a7d57}
.pill-dn{background:#fdeceb;color:var(--dv-red)}

/* ---------- marquee ---------- */
.marquee-wrap{padding:var(--space-9) 0;border-block:1px solid var(--line-2);background:linear-gradient(180deg,#fff,var(--dv-blue-soft))}
.marquee-label{text-align:center;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);font-weight:600;margin-bottom:var(--space-6)}
.marquee{overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.marquee-track{display:flex;width:max-content;gap:var(--space-3);animation:marquee-scroll 46s linear infinite}
.marquee:hover .marquee-track{animation-play-state:paused}
@keyframes marquee-scroll{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}}
.chip{display:inline-flex;align-items:center;gap:9px;white-space:nowrap;background:#fff;border:1px solid var(--line);border-radius:var(--radius-pill);padding:9px 18px;font-size:14px;font-weight:500;color:var(--ink-2)}
.chip b{font-family:var(--font-mono);font-weight:600;color:var(--ink-1);font-size:13px}
.chip .tick{width:6px;height:6px;border-radius:50%;background:var(--dv-blue)}
/* Symbol marks: flags for FX and index CFDs (two overlapping for a pair, the way
   a terminal shows them), the coin's own mark for crypto, a metal disc for gold
   and silver, and a glyph for futures and event contracts. Flags come from the
   MIT-licensed flag-icons set, coins from MIT cryptocurrency-icons. */
.chip .sym{width:22px;height:22px;flex:0 0 22px;display:block;border-radius:50%}

/* ---------- services row (mini-UI tiles) ---------- */
.svcs-wrap{padding:clamp(48px,6vw,88px) 0 clamp(56px,7vw,104px)}
.svcs-head{text-align:center;margin-bottom:var(--space-9)}
.svcs-head h2{max-width:20ch;margin:var(--space-4) auto 0}
.svcs{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:var(--space-4)}
@media(max-width:1180px){.svcs{grid-template-columns:repeat(3,1fr)}}
@media(max-width:820px){.svcs{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.svcs{grid-template-columns:1fr}}

.svc{background:#fff;color:var(--ink-1);border:1px solid var(--line);border-radius:22px;padding:10px 10px 20px;display:flex;flex-direction:column;transition:border-color var(--dur-base) var(--ease-standard),transform var(--dur-base) var(--ease-emphasis),box-shadow var(--dur-base)}
.svc:hover{border-color:var(--dv-blue);transform:translateY(-4px);box-shadow:0 22px 48px -28px rgba(74,111,165,.6)}
.svc-tile{position:relative;border-radius:16px;overflow:hidden;background:linear-gradient(160deg,var(--dv-blue) 0%,var(--dv-blue-deep) 100%);aspect-ratio:.9;display:grid;place-items:start center;padding:18px 18px 66px}
.svc-tile::before{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.07) 1px,transparent 1px);background-size:26px 26px;transform:rotate(-8deg) scale(1.5);pointer-events:none}

/* white title step, anchored to the tile's bottom-left */
.svc-label{position:absolute;left:14px;bottom:14px;background:#fff;padding:10px 16px;border-radius:12px;max-width:72%;box-shadow:0 10px 24px -12px rgba(7,12,22,.55)}
.svc-label::after{display:none}
.svc-label h3{font-size:16.5px;line-height:1.22;font-weight:600;letter-spacing:-.015em;color:var(--ink-1)}
.svc-arrow{position:absolute;right:14px;bottom:14px;width:34px;height:34px;border-radius:50%;background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.3);display:grid;place-items:center;color:#fff;text-decoration:none;transition:background var(--dur-quick),transform var(--dur-base) var(--ease-emphasis)}
.svc:hover .svc-arrow{background:#fff;color:var(--dv-blue-deep);transform:translate(2px,-2px)}
.svc-arrow svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.svc-desc{font-size:13.5px;line-height:1.5;color:var(--ink-2);padding:16px 8px 0}

/* the floating mockups */
.mock{position:relative;z-index:1;width:100%;background:#fff;color:var(--ink-1);border-radius:11px;box-shadow:0 14px 28px -14px rgba(7,12,22,.45);padding:11px;font-size:10.5px;line-height:1.35;align-self:start}
.mock + .mock{margin-top:7px}
.mock-stack{position:relative;z-index:1;width:100%;align-self:start}
.mk-row{display:flex;align-items:center;gap:7px}
.mk-ico{width:17px;height:17px;border-radius:50%;flex:none;display:grid;place-items:center;font-size:8px;font-weight:700;color:#fff;background:var(--dv-blue)}
.mk-ico.g{background:var(--dv-green)} .mk-ico.d{background:#1b2a45} .mk-ico.o{background:#b45309}
.mk-t{font-weight:600;font-size:11px}
.mk-s{color:var(--ink-4);font-size:9px;letter-spacing:.02em}
.mk-v{margin-inline-start:auto;font-family:var(--font-mono);font-weight:600;font-size:11px}
.mk-v.pos{color:#0a7d57}
.mk-btns{display:flex;gap:5px;margin-top:8px}
.mk-btn{flex:1;text-align:center;border:1px solid var(--line);border-radius:5px;padding:4px 0;font-size:8.5px;font-weight:600;color:var(--ink-3)}
.mk-btn.fill{background:var(--dv-blue);border-color:var(--dv-blue);color:#fff}
.mk-cap{font-size:8px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-4);font-weight:700;margin-bottom:8px}
.mk-field{display:flex;align-items:center;gap:8px;border:1px solid var(--line);border-radius:7px;padding:7px 9px;font-family:var(--font-mono);font-size:10px}
.mk-field .ex{margin-inline-start:auto;font-size:8px;color:var(--ink-4);font-family:var(--font-body);letter-spacing:.06em}
.mk-field .vs{font-family:var(--font-display);font-weight:700;font-style:italic;color:#1a1f71;font-size:11px}
.mk-pay{margin-top:8px;background:var(--dv-blue);color:#fff;border-radius:7px;text-align:center;padding:7px;font-size:10px;font-weight:600}
.mk-sec{margin-top:7px;text-align:center;font-size:8px;color:var(--ink-4)}
.mk-swap{width:26px;height:26px;border-radius:50%;background:#fff;border:1px solid var(--line);display:grid;place-items:center;margin:-13px auto;position:relative;z-index:2;color:var(--dv-blue);box-shadow:0 3px 8px rgba(7,12,22,.12)}
.mk-swap svg{width:12px;height:12px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.mk-big{font-family:var(--font-mono);font-size:15px;font-weight:600;margin-top:4px}
.mk-yes{margin-inline-start:auto;font-family:var(--font-mono);font-size:10px;font-weight:700;background:var(--dv-green-soft);color:#0a7d57;border-radius:4px;padding:2px 6px}
.mk-no{margin-inline-start:auto;font-family:var(--font-mono);font-size:10px;font-weight:700;background:#fdeceb;color:var(--dv-red);border-radius:4px;padding:2px 6px}
.mk-line{height:1px;background:var(--line-2);margin:8px 0}
.mk-card{width:100%;color:#fff;aspect-ratio:1.586;border-radius:10px;background:linear-gradient(135deg,#0d1424,#1b2a45 55%,#33527d);box-shadow:0 18px 32px -16px rgba(7,12,22,.75);padding:12px;display:flex;flex-direction:column;justify-content:space-between;transform:rotate(-7deg);position:relative;z-index:1;overflow:hidden}
.mk-card::after{content:"";position:absolute;inset:0;background:radial-gradient(110% 80% at 110% -10%,rgba(0,182,122,.4),transparent 58%)}
.mk-card .b{font-family:var(--font-display);font-weight:700;color:#fff;font-size:12px;letter-spacing:-.01em;position:relative}
.mk-card .n{font-family:var(--font-mono);color:rgba(255,255,255,.82);font-size:9px;letter-spacing:.1em;position:relative}
.mk-card .chip{width:20px;height:15px;border-radius:3px;background:linear-gradient(135deg,#e8d28a,#c8a955);position:relative}
.svc-badge{position:absolute;left:12px;top:12px;z-index:2;font-size:8.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;background:rgba(255,255,255,.18);border:1px solid rgba(255,255,255,.34);color:#fff;border-radius:var(--radius-pill);padding:3px 9px}

/* ---------- generic section ---------- */
.section{padding:clamp(56px,7vw,110px) 0}
.section-rise{background:#fff;border-radius:var(--section-radius) var(--section-radius) 0 0;transform-origin:top center;will-change:transform;position:relative;z-index:1}
.section-dark{background:var(--dv-black);color:#fff}
.section-dark h2,.section-dark h3{color:#fff}
.section-dark .lead{color:rgba(255,255,255,.66)}
.section-dark .eyebrow{color:#8fb0da}
.section-tint{background:var(--dv-blue-soft)}
.sec-head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.8fr);gap:clamp(20px,4vw,64px);align-items:end;margin-bottom:var(--space-10)}
@media(max-width:860px){.sec-head{grid-template-columns:1fr;gap:var(--space-4)}}
.sec-head .eyebrow{margin-bottom:var(--space-4)}

/* ---------- product cards ---------- */
.prods{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-5)}
@media(max-width:900px){.prods{grid-template-columns:1fr}}
.prod{border:1px solid var(--line);border-radius:var(--radius-xl);padding:var(--space-7);background:#fff;display:flex;flex-direction:column;gap:var(--space-5);transition:border-color var(--dur-base) var(--ease-standard),transform var(--dur-base) var(--ease-emphasis),box-shadow var(--dur-base)}
.prod:hover{border-color:var(--dv-blue);transform:translateY(-3px);box-shadow:0 20px 44px -26px rgba(74,111,165,.55)}
.prod-top{display:flex;align-items:flex-start;gap:var(--space-4)}
.prod-ico{width:44px;height:44px;border-radius:12px;background:var(--dv-blue-soft);color:var(--dv-blue-deep);display:grid;place-items:center;flex:none}
.prod-ico svg{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.prod h3{margin-bottom:4px}
.prod .venue{font-size:12.5px;color:var(--ink-3);font-weight:500}
.prod p{font-size:14.5px;color:var(--ink-2)}
.prod-specs{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--line-2);border:1px solid var(--line-2);border-radius:var(--radius-md);overflow:hidden;margin-top:auto}
.spec{background:#fff;padding:12px 14px}
.spec .k{font-size:10.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-4);font-weight:700}
.spec .v{font-family:var(--font-mono);font-size:15px;font-weight:600;margin-top:3px}
.prod-foot{display:flex;align-items:center;justify-content:space-between;gap:var(--space-4)}
.prod-foot .from{font-size:13px;color:var(--ink-3)}
.prod-foot .from b{font-family:var(--font-mono);color:var(--ink-1);font-size:15px}
.lnk{font-size:14px;font-weight:600;color:var(--dv-blue);text-decoration:none;display:inline-flex;gap:6px;align-items:center}
.lnk:hover{color:var(--dv-blue-deep)} .lnk .arw{transition:transform var(--dur-base) var(--ease-emphasis)}
.lnk:hover .arw{transform:translateX(3px)}

/* ---------- table ---------- */
.tablecard{border:1px solid var(--line);border-radius:var(--radius-xl);overflow:hidden;background:#fff}
.tscroll{overflow-x:auto}
table.cmp{width:100%;border-collapse:collapse;min-width:720px;font-size:14px}
table.cmp th,table.cmp td{padding:15px 18px;text-align:right;font-family:var(--font-mono);font-variant-numeric:tabular-nums;border-bottom:1px solid var(--line-2)}
table.cmp thead th{background:var(--dv-blue-soft);font-family:var(--font-body);font-size:12px;letter-spacing:.07em;text-transform:uppercase;font-weight:700;color:var(--dv-blue-deep);border-bottom:1px solid var(--line)}
table.cmp th.txt,table.cmp td.txt{text-align:left;font-family:var(--font-body)}
table.cmp tbody th.txt{font-weight:600;position:sticky;left:0;background:#fff}
table.cmp tbody tr:last-child td,table.cmp tbody tr:last-child th{border-bottom:0}
table.cmp tbody tr:hover td,table.cmp tbody tr:hover th{background:#fafbfd}
.cmp tbody td.txt{text-align:right}
table.cmp tbody tr.hl td,table.cmp tbody tr.hl th.txt{background:var(--dv-green-soft);color:#0a7d57;font-weight:700}
.tnote{padding:14px 18px;font-size:12.5px;color:var(--ink-3);border-top:1px solid var(--line-2);background:#fcfdfe}

/* ---------- card section ---------- */
.card-grid{display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);gap:clamp(28px,5vw,80px);align-items:center}
@media(max-width:940px){.card-grid{grid-template-columns:1fr}}
.dcard{position:relative;aspect-ratio:1.586;max-width:440px;border-radius:20px;padding:24px;color:#fff;background:linear-gradient(135deg,#1b2a45 0%,#33527d 46%,#4A6FA5 100%);box-shadow:0 34px 60px -28px rgba(15,23,42,.7);display:flex;flex-direction:column;justify-content:space-between;overflow:hidden;transform-style:preserve-3d;transition:transform var(--dur-slow) var(--ease-emphasis)}
.dcard::after{content:"";position:absolute;inset:0;background:radial-gradient(120% 80% at 110% -10%,rgba(0,182,122,.42),transparent 58%);pointer-events:none}
.dcard::before{content:"";position:absolute;left:-30%;top:-60%;width:80%;height:220%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.16),transparent);transform:rotate(18deg);pointer-events:none;animation:sheen 6.5s var(--ease-standard) infinite}
@keyframes sheen{0%,72%{left:-40%}100%{left:130%}}
.dcard .dc-top{display:flex;align-items:center;justify-content:space-between;position:relative;z-index:1}
.dc-brand{font-family:var(--font-display);font-weight:700;letter-spacing:-.01em;font-size:17px}
.dc-net{font-size:11px;letter-spacing:.16em;text-transform:uppercase;opacity:.72}
.dc-chip{width:42px;height:32px;border-radius:6px;background:linear-gradient(135deg,#e8d28a,#c8a955);position:relative;z-index:1;box-shadow:inset 0 0 0 1px rgba(0,0,0,.14)}
.dc-num{font-family:var(--font-mono);font-size:clamp(15px,2.4vw,19px);letter-spacing:.12em;position:relative;z-index:1}
.dc-bot{display:flex;align-items:flex-end;justify-content:space-between;position:relative;z-index:1}
.dc-bot .k{font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;opacity:.6}
.dc-bot .v{font-family:var(--font-mono);font-size:13px;margin-top:2px}
.card-feats{display:grid;gap:var(--space-4);margin-top:var(--space-7)}
.cf{display:flex;gap:var(--space-4);align-items:flex-start}
.cf-ico{width:34px;height:34px;border-radius:10px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14);display:grid;place-items:center;flex:none;color:#8fb0da}
.cf-ico svg{width:17px;height:17px;stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.cf .t{font-weight:600;font-size:15px}
.cf .d{font-size:13.5px;color:rgba(255,255,255,.62);margin-top:2px}
.concept-note{margin-top:var(--space-7);border:1px dashed rgba(255,255,255,.26);border-radius:var(--radius-md);padding:14px 16px;font-size:13px;color:rgba(255,255,255,.66)}
.concept-note b{color:#fff}

/* ---------- steps ---------- */
.steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--space-5)}
@media(max-width:940px){.steps{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.steps{grid-template-columns:1fr}}
.step{border-top:2px solid var(--dv-blue);padding-top:var(--space-5)}
.step .n{font-family:var(--font-mono);font-size:12px;font-weight:600;color:var(--dv-blue);letter-spacing:.1em}
.step h3{font-size:19px;margin:var(--space-3) 0 var(--space-2)}
.step p{font-size:14px;color:var(--ink-2)}

/* ---------- proof ---------- */
.proof{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-5)}
@media(max-width:860px){.proof{grid-template-columns:1fr}}
.pcard{border:1px solid rgba(255,255,255,.12);border-radius:var(--radius-lg);padding:var(--space-6);background:rgba(255,255,255,.04)}
.pcard .v{font-family:var(--font-mono);font-size:clamp(26px,3.4vw,38px);font-weight:600;letter-spacing:-.02em}
.pcard .k{font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.55);font-weight:600;margin-top:8px}
.pcard .d{font-size:13.5px;color:rgba(255,255,255,.5);margin-top:var(--space-4);line-height:1.55}

/* ---------- faq ---------- */
.faq{display:grid;gap:0;border-top:1px solid var(--line)}
.q{border-bottom:1px solid var(--line)}
.q summary{list-style:none;cursor:pointer;padding:var(--space-6) 0;display:flex;gap:var(--space-5);align-items:center;font-family:var(--font-display);font-weight:600;font-size:clamp(16px,1.4vw,19px);transition:color var(--dur-quick)}
.q summary::-webkit-details-marker{display:none}
.q summary:hover{color:var(--dv-blue)}
.q .qi{margin-inline-start:auto;width:28px;height:28px;border-radius:50%;border:1px solid var(--line);display:grid;place-items:center;flex:none;transition:transform var(--dur-base) var(--ease-emphasis),background var(--dur-quick),border-color var(--dur-quick)}
.q[open] .qi{transform:rotate(45deg);background:var(--dv-blue);border-color:var(--dv-blue);color:#fff}
.q .qi svg{width:13px;height:13px;stroke:currentColor;stroke-width:2;stroke-linecap:round}
.q .a{padding:0 0 var(--space-6);font-size:15px;color:var(--ink-2);max-width:78ch}
.q .a p + p{margin-top:var(--space-4)}

/* ---------- cta ---------- */
.cta{border-radius:var(--radius-2xl);background:linear-gradient(135deg,var(--dv-blue-deep),var(--dv-blue));color:#fff;padding:clamp(36px,5.5vw,76px);text-align:center;position:relative;overflow:hidden}
.cta::after{content:"";position:absolute;inset:auto -10% -60% -10%;height:110%;background:radial-gradient(50% 60% at 50% 100%,rgba(0,182,122,.34),transparent 70%);pointer-events:none}
.cta h2{position:relative}
.cta p{position:relative;color:rgba(255,255,255,.78);margin:var(--space-5) auto 0;max-width:56ch}
.cta .btn-white{background:#fff;color:var(--dv-blue-deep);position:relative}
.cta .btn-white:hover{background:#f2f6fb;transform:translateY(-1px)}
.cta-row{display:flex;gap:var(--space-3);justify-content:center;flex-wrap:wrap;margin-top:var(--space-8);position:relative}

/* ---------- footer ---------- */
.foot{background:var(--dv-black);color:rgba(255,255,255,.62);padding:var(--space-12) 0 var(--space-8);font-size:14px}
.foot-grid{display:grid;grid-template-columns:1.4fr repeat(3,1fr);gap:var(--space-8)}
@media(max-width:860px){.foot-grid{grid-template-columns:1fr 1fr}}
.foot h4{font-family:var(--font-display);font-size:13px;letter-spacing:.1em;text-transform:uppercase;color:#fff;margin:0 0 var(--space-4);font-weight:600}
.foot ul{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.foot a{text-decoration:none;transition:color var(--dur-quick)}
.foot a:hover{color:#fff}
/* Blue circles carry the channels, the same gradient the buttons use. */
.foot-socs{display:flex;gap:10px;margin-top:var(--space-5)}
.foot-soc{display:grid;place-items:center;width:38px;height:38px;border-radius:50%;
  background:linear-gradient(180deg,#4f7df0,#2554d4);box-shadow:inset 0 1px 0 rgba(255,255,255,.28),0 8px 20px rgba(37,84,212,.32);
  transition:transform var(--dur-quick) var(--ease-emphasis),box-shadow var(--dur-quick)}
.foot-soc:hover{box-shadow:inset 0 1px 0 rgba(255,255,255,.34),0 14px 28px rgba(37,84,212,.44)}
.foot-soc svg{width:17px;height:17px;fill:#fff}
.foot-bottom{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
.foot-bottom p{margin:0}
.foot-top{display:inline-flex;align-items:center;gap:10px;padding:7px 8px 7px 18px;border-radius:100px;
  border:1px solid rgba(255,255,255,.16);color:rgba(255,255,255,.8);font-size:13px;font-weight:600;
  transition:border-color var(--dur-quick),color var(--dur-quick)}
.foot-top:hover{border-color:rgba(120,150,210,.6);color:#fff}
.foot-top i{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;
  background:linear-gradient(180deg,#4f7df0,#2554d4)}
.foot-top i svg{width:13px;height:13px;fill:none;stroke:#fff;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;
  transition:transform var(--dur-base) var(--ease-emphasis)}
.foot-top:hover i svg{transform:translateY(-2px)}
@media(max-width:560px){.foot-bottom{flex-direction:column;align-items:flex-start}}
.foot .brand{color:#fff;margin-bottom:var(--space-4)}
.foot-strip{display:flex;justify-content:space-between;align-items:flex-start;gap:var(--space-8);flex-wrap:wrap;margin-top:var(--space-10);padding-top:var(--space-8);border-top:1px solid rgba(255,255,255,.1)}
.foot-badges{display:flex;gap:10px;flex-wrap:wrap}
.foot-badge{display:inline-block;line-height:0;border-radius:8px;opacity:.85;cursor:default;transition:opacity .3s,transform .3s}
.foot-badge:hover{opacity:1;transform:translateY(-2px)}
.foot-badge img{display:block;height:40px;width:auto}
.foot-soon{display:inline-flex;align-items:center;gap:8px;margin-top:12px;font-size:11.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:#9fb8e6}
.foot-soon i{width:7px;height:7px;border-radius:50%;background:#4f7df0;box-shadow:0 0 0 0 rgba(79,125,240,.6);animation:foot-ping 2s infinite}
@keyframes foot-ping{100%{box-shadow:0 0 0 8px rgba(79,125,240,0)}}
.foot ul.foot-paylist{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px;justify-content:flex-start}
.foot-strip,.foot-strip h4{text-align:left}
@media(min-width:761px){.foot-payments{text-align:right}.foot-payments h4{text-align:right}.foot ul.foot-paylist{justify-content:flex-end}}
.foot-pay{display:grid;place-items:center;height:40px;min-width:62px;padding:0 12px;border-radius:10px;background:#fff;box-shadow:0 8px 18px -12px rgba(0,0,0,.6);transition:transform .3s,box-shadow .3s}
.foot-pay:hover{transform:translateY(-3px);box-shadow:0 14px 26px -12px rgba(0,0,0,.7)}
.foot-pay img{display:block;height:20px;width:auto;max-width:64px}
.foot-pay--bitcoin img{height:24px}.foot-pay--amex img{height:26px}.foot-pay--mastercard img{height:24px}.foot-pay--sepa img{height:22px}.foot-pay--tether img{height:18px}
.foot-paynote{display:block;margin-top:12px;font-size:12px;color:rgba(255,255,255,.42)}
@media(max-width:760px){.foot-strip{flex-direction:column}}
@media(prefers-reduced-motion:reduce){.foot-soon i{animation:none}}
.disclaimer{margin-top:var(--space-8);padding-top:var(--space-6);border-top:1px solid rgba(255,255,255,.1);font-size:12.5px;line-height:1.65;color:rgba(255,255,255,.42)}
.disclaimer p + p{margin-top:var(--space-3)}

/* ---------- live mockups ---------- */
.mk-card{animation:card-float 9s var(--ease-standard) infinite}
@keyframes card-float{
  0%{transform:rotate(-7deg) translateY(0)}
  35%{transform:rotate(-2deg) translateY(-7px)}
  65%{transform:rotate(-11deg) translateY(4px)}
  100%{transform:rotate(-7deg) translateY(0)}}
.mk-card::before{content:"";position:absolute;left:-40%;top:-60%;width:55%;height:220%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.3),transparent);transform:rotate(18deg);animation:mk-sheen 5s var(--ease-standard) infinite}
@keyframes mk-sheen{0%,65%{left:-45%}100%{left:125%}}

.mk-paywrap{position:relative;margin-top:8px;height:26px}
.mk-paywrap > *{position:absolute;inset:0;border-radius:7px;display:grid;place-items:center;font-size:10px;font-weight:600}
.mk-paywrap .mk-pay{margin:0;background:var(--dv-blue);color:#fff;animation:pay-a 7s var(--ease-standard) infinite}
.mk-paywrap .mk-ok{background:var(--dv-green-soft);color:#0a7d57;gap:5px;grid-auto-flow:column;animation:pay-b 7s var(--ease-standard) infinite}
@keyframes pay-a{0%,46%{opacity:1}54%,94%{opacity:0}100%{opacity:1}}
@keyframes pay-b{0%,46%{opacity:0}54%,94%{opacity:1}100%{opacity:0}}
.mk-ok .tk{width:13px;height:13px;border-radius:50%;background:var(--dv-green);color:#fff;display:grid;place-items:center;font-size:8px}

.mk-swap{animation:swap-spin 6s var(--ease-emphasis) infinite}
@keyframes swap-spin{0%,55%{transform:rotate(0)}70%,100%{transform:rotate(180deg)}}

.mk-flash{animation:mk-flash .55s var(--ease-standard)}
@keyframes mk-flash{0%{background:rgba(74,111,165,.22)}100%{background:transparent}}
.mk-v,.mk-yes,.mk-no{border-radius:4px;padding-inline:3px;transition:color var(--dur-quick)}

.mk-bar{height:3px;border-radius:2px;background:var(--line-2);overflow:hidden;margin-top:7px}
.mk-bar span{display:block;height:100%;border-radius:2px;background:var(--dv-green);animation:mk-grow 6s var(--ease-standard) infinite}
@keyframes mk-grow{0%{width:18%}70%,100%{width:84%}}

@media(prefers-reduced-motion:reduce){
  .hero-beams,.hero-blob,.mk-card,.mk-card::before,.mk-swap,.mk-paywrap .mk-pay,.mk-paywrap .mk-ok,.mk-bar span{animation:none!important}
  .mk-paywrap .mk-ok{opacity:0}
}

/* ---------- pill nav + mega menu ---------- */
.topnav{position:sticky}
.navpill{display:flex;gap:2px;background:rgba(15,23,42,.055);border-radius:var(--radius-pill);padding:4px;margin-inline-start:var(--space-4)}
.np{font-family:var(--font-body);font-size:14px;font-weight:500;color:var(--ink-2);background:none;border:0;border-radius:var(--radius-pill);padding:8px 15px;cursor:pointer;display:inline-flex;align-items:center;gap:6px;text-decoration:none;transition:background var(--dur-quick),color var(--dur-quick),box-shadow var(--dur-quick)}
.np:hover,.np.on,.np[aria-expanded="true"]{background:#fff;color:var(--ink-1);box-shadow:0 1px 3px rgba(15,23,42,.12)}
.np .cv{width:10px;height:10px;stroke:currentColor;fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;transition:transform var(--dur-base) var(--ease-emphasis)}
.np[aria-expanded="true"] .cv{transform:rotate(180deg)}

.mega{position:absolute;left:0;right:0;top:100%;background:var(--dv-black);color:#fff;padding:var(--space-7) 0 var(--space-9);opacity:0;visibility:hidden;transform:translateY(-10px);transition:opacity var(--dur-base) var(--ease-standard),transform var(--dur-base) var(--ease-emphasis),visibility var(--dur-base);box-shadow:0 40px 70px -24px rgba(7,12,22,.55)}
.mega.open{opacity:1;visibility:visible;transform:none}
.mega-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--space-6)}
.mega-top .eyebrow{color:rgba(255,255,255,.44)}
.mega-top a{font-size:13px;font-weight:600;color:#fff;text-decoration:none;display:inline-flex;gap:6px;align-items:center}
.mega-top a:hover{color:#8fb0da}
.mega-cards{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:var(--space-4)}
.mega .svc{background:rgba(255,255,255,.04);border-color:rgba(255,255,255,.1);padding:8px 8px 16px;border-radius:18px}
.mega .svc:hover{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.26);box-shadow:none;transform:translateY(-3px)}
.mega .svc-tile{aspect-ratio:1.5;padding:14px}
.mega .svc-label{position:static;background:none;border-radius:0;padding:13px 8px 0;max-width:100%;box-shadow:none}
.mega .svc-label::after{display:none}
.mega .svc-label h3{color:#fff;font-size:15px;display:inline-flex;align-items:baseline;gap:6px}
.mega .svc-arrow{position:static;width:auto;height:auto;border:0;background:none;color:rgba(255,255,255,.55);display:inline-grid;border-radius:0}
.mega .svc:hover .svc-arrow{background:none;color:#fff;transform:translate(2px,-2px)}
.mega .svc-arrow svg{width:12px;height:12px}
.mega .svc-desc{color:rgba(255,255,255,.55);font-size:12.5px;padding:6px 8px 0}
.mega .svc-badge{font-size:8px}
.mega .mock{padding:9px}
@media(max-width:1180px){.mega{display:none}}

.mega-list{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--space-5)}
.ml{display:block;text-decoration:none;border:1px solid rgba(255,255,255,.1);border-radius:var(--radius-lg);padding:var(--space-5);transition:border-color var(--dur-quick),background var(--dur-quick)}
.ml:hover{border-color:rgba(255,255,255,.3);background:rgba(255,255,255,.05)}
.ml .t{font-family:var(--font-display);font-weight:600;font-size:16px;color:#fff;display:flex;align-items:center;gap:8px}
.ml .d{font-size:13px;color:rgba(255,255,255,.55);margin-top:6px}
.ml .m{font-family:var(--font-mono);font-size:11.5px;color:#8fb0da;margin-top:10px}
@media(max-width:940px){.navpill{display:none}}

/* ---------- Edge ground (board.dolvero.com / v2 sign-in), scoped to the hero ---------- */
.hero{background:transparent;color:#fff;isolation:isolate}
.hero .bg{position:absolute;inset:0;z-index:0;overflow:hidden;
  background:radial-gradient(120% 90% at 50% 8%, #101c31 0%, #0b1221 42%, #070b13 78%);
  -webkit-mask-image:linear-gradient(180deg,#000 0%,#000 66%,rgba(0,0,0,.35) 84%,transparent 100%);
  mask-image:linear-gradient(180deg,#000 0%,#000 66%,rgba(0,0,0,.35) 84%,transparent 100%)}
.hero .bg__canvas{position:absolute;inset:0;width:100%;height:100%;display:block;opacity:0;transition:opacity 1.1s ease}
.hero .bg__canvas.is-live{opacity:1}
body.gl-on .hero .bg__aurora{display:none}
.hero .bg__aurora{position:absolute;inset:-25%;filter:blur(90px);opacity:.92}
.hero .blob{position:absolute;border-radius:50%;mix-blend-mode:screen;will-change:transform;transform:translateZ(0);backface-visibility:hidden}
.hero .blob--a{width:68vmax;height:68vmax;left:-14%;top:-16%;background:radial-gradient(circle at 34% 34%, rgba(37,84,212,.92) 0%, rgba(37,84,212,.34) 42%, transparent 68%);animation:driftA 52s ease-in-out infinite}
.hero .blob--b{width:58vmax;height:58vmax;right:-12%;top:6%;background:radial-gradient(circle at 60% 40%, rgba(79,125,240,.78) 0%, rgba(79,125,240,.24) 44%, transparent 70%);animation:driftB 64s ease-in-out infinite}
.hero .blob--c{width:52vmax;height:52vmax;left:16%;bottom:-24%;background:radial-gradient(circle at 50% 50%, rgba(147,184,255,.44) 0%, rgba(74,111,165,.18) 46%, transparent 72%);animation:driftC 46s ease-in-out infinite}
.hero .blob--d{width:38vmax;height:38vmax;left:44%;top:26%;background:radial-gradient(circle at 50% 50%, rgba(28,47,79,.9) 0%, rgba(28,47,79,.3) 50%, transparent 74%);animation:driftD 58s ease-in-out infinite}
@keyframes driftA{0%,100%{transform:translate3d(0,0,0) scale(1)}33%{transform:translate3d(7vw,5vh,0) scale(1.12)}66%{transform:translate3d(-4vw,9vh,0) scale(.94)}}
@keyframes driftB{0%,100%{transform:translate3d(0,0,0) scale(1.04)}40%{transform:translate3d(-9vw,7vh,0) scale(.9)}70%{transform:translate3d(-3vw,-6vh,0) scale(1.16)}}
@keyframes driftC{0%,100%{transform:translate3d(0,0,0) scale(.98)}50%{transform:translate3d(9vw,-8vh,0) scale(1.18)}}
@keyframes driftD{0%,100%{transform:translate3d(0,0,0) scale(1)}45%{transform:translate3d(-8vw,4vh,0) scale(1.2)}80%{transform:translate3d(5vw,-5vh,0) scale(.92)}}
.hero .bg__grid{position:absolute;inset:0;background-image:radial-gradient(circle, rgba(255,255,255,.05) 1px, transparent 1px);background-size:22px 22px;
  -webkit-mask-image:radial-gradient(115% 85% at 50% 45%, #000 35%, transparent 78%);mask-image:radial-gradient(115% 85% at 50% 45%, #000 35%, transparent 78%)}
.hero .bg__scrim{position:absolute;inset:0;background:radial-gradient(56% 44% at 50% 46%, rgba(3,6,12,.72) 0%, rgba(3,6,12,.38) 46%, transparent 76%)}
.hero .bg__vignette{position:absolute;inset:0;background:radial-gradient(105% 75% at 50% 45%, transparent 40%, rgba(4,7,13,.72) 100%)}
/* melt the dark ground into the white page below it */
.hero .bg__hem{display:none}
.hero-mark{position:absolute;left:50%;top:-6%;width:min(620px,56vw);transform:translateX(-50%);opacity:.07;z-index:1}
@media(prefers-reduced-motion:reduce){.hero .blob{animation:none}}

/* hero content on the dark ground */
.hero .eyebrow{color:#93b8ff}
.hero h1{color:#fff}
.hero h1 .accent{background:linear-gradient(120deg,#93b8ff,#4f7df0);-webkit-background-clip:text;background-clip:text;color:transparent}
.hero .lead{color:rgba(255,255,255,.72)}
.hero-note{color:rgba(255,255,255,.55)}
.hero .btn-ghost{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.22);color:#fff}
.hero .btn-ghost:hover{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.4);color:#fff}
.hero .btn-primary{background:linear-gradient(180deg,#4f7df0,#2554d4);border-color:rgba(255,255,255,.14);box-shadow:inset 0 1px 0 rgba(255,255,255,.24),0 8px 24px rgba(37,84,212,.45)}
.hero .btn-primary:hover{box-shadow:inset 0 1px 0 rgba(255,255,255,.3),0 12px 30px rgba(37,84,212,.55)}

/* the terminal panel and the stat strip become Edge glass */
.hero-panel{background:rgba(11,17,32,.62);border-color:rgba(147,184,255,.16);
  -webkit-backdrop-filter:blur(18px) saturate(1.3);backdrop-filter:blur(18px) saturate(1.3);
  box-shadow:0 1px 0 0 rgba(255,255,255,.16) inset,0 30px 60px rgba(0,0,0,.45)}
.hp-head{background:rgba(255,255,255,.045);border-bottom-color:rgba(255,255,255,.08)}
.hp-head .t{color:rgba(255,255,255,.72)}
.hp-tab{background:rgba(255,255,255,.04);border-color:rgba(255,255,255,.12);color:rgba(255,255,255,.5)}
.hp-tab.on{background:linear-gradient(180deg,#4f7df0,#2554d4);border-color:rgba(255,255,255,.14);color:#fff}
.hp-row{border-bottom-color:rgba(255,255,255,.06)}
.hp-row .m{color:rgba(255,255,255,.72)}
.hp-row .p{color:#fff}
.pill-up{background:rgba(0,182,122,.16);color:#5ee0b0}
.pill-dn{background:rgba(239,68,68,.14);color:#fca5a5}
.stats{background:rgba(147,184,255,.14);border-color:rgba(147,184,255,.18);box-shadow:0 1px 0 0 rgba(255,255,255,.1) inset}
.stat{background:rgba(11,17,32,.5);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
.stat .v{color:#fff}
.stat .k{color:rgba(255,255,255,.5)}

/* nav rides transparent over the dark hero, then becomes the white bar */
.topnav{background:transparent;border-bottom-color:transparent;-webkit-backdrop-filter:none;backdrop-filter:none;
  transition:background var(--dur-base) var(--ease-standard),border-color var(--dur-base),backdrop-filter var(--dur-base)}
.topnav.scrolled{background:rgba(255,255,255,.88);border-bottom-color:var(--line-2);
  -webkit-backdrop-filter:saturate(1.6) blur(14px);backdrop-filter:saturate(1.6) blur(14px)}
.topnav:not(.scrolled) .brand img{filter:brightness(0) invert(1)}
.topnav:not(.scrolled) .navpill{background:rgba(255,255,255,.08)}
.topnav:not(.scrolled) .np{color:rgba(255,255,255,.66)}
.topnav:not(.scrolled) .np:hover,.topnav:not(.scrolled) .np.on,.topnav:not(.scrolled) .np[aria-expanded="true"]{background:rgba(255,255,255,.16);color:#fff;box-shadow:none}
.topnav:not(.scrolled) .btn-ghost{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.24);color:#fff}
.topnav:not(.scrolled) .btn-ghost:hover{border-color:rgba(255,255,255,.45);color:#fff}
.topnav:not(.scrolled) .btn-primary{background:linear-gradient(180deg,#4f7df0,#2554d4);border-color:rgba(255,255,255,.14)}
.topnav:not(.scrolled) .burger{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.22);color:#fff}

/* the bar floats over the hero rather than sitting on top of it, so the
   transparent state shows the Edge ground instead of the page's white body */
.topnav{position:fixed;top:0;left:0;right:0}
.hero{padding-top:calc(68px + clamp(56px,7vw,104px))}

/* ---------- centred hero, cards straddling the ground's edge ---------- */
.hero{padding-bottom:clamp(64px,7vw,112px);overflow:visible}
.hero .bg{border-radius:0 0 var(--section-radius) var(--section-radius)}
.hero .bg__hem{display:none}
.hero-mid{position:relative;z-index:1;max-width:960px;margin:0 auto;text-align:center;padding-bottom:clamp(40px,6vw,72px)}
.hero-mid h1{margin-inline:auto}
.hero-mid .lead{margin-inline:auto;max-width:60ch}
.hero-cta{justify-content:center}
.hero-note{justify-content:center}
.eyebrow-pill{display:inline-flex;align-items:center;gap:8px;font-size:12.5px;font-weight:600;letter-spacing:.02em;
  color:rgba(255,255,255,.82);background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.16);
  border-radius:var(--radius-pill);padding:7px 16px;margin-bottom:var(--space-6);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.hero-cards{position:relative;z-index:2}
.hero-cards .svcs{gap:var(--space-4)}
/* the logomark rides the top edge, cropped by the bar, instead of sitting behind the words */
.hero-mark{left:auto;right:-6%;top:auto;bottom:-14%;width:min(560px,44vw);transform:rotate(-12deg);opacity:.045;z-index:0}
.hero .stats{margin-top:var(--space-8);background:#fff;border-color:var(--line);box-shadow:0 20px 44px -30px rgba(15,23,42,.35)}
.hero .stat{background:#fff;-webkit-backdrop-filter:none;backdrop-filter:none}
.hero .stat .v{color:var(--ink-1)}
.hero .stat .k{color:var(--ink-3)}
@media(max-width:820px){.hero-mark{display:none}}

/* ---------- venue strip ---------- */
.venues{border-bottom:1px solid var(--line-2);padding:var(--space-8) 0}
.venues-in{display:flex;align-items:center;gap:clamp(20px,4vw,52px);flex-wrap:wrap;justify-content:center}
.venues-in .lbl{font-size:13px;color:var(--ink-3);font-weight:500}
.venue{font-family:var(--font-display);font-weight:700;font-size:clamp(15px,1.5vw,19px);letter-spacing:-.02em;color:var(--ink-1);opacity:.55;transition:opacity var(--dur-quick)}
.venue:hover{opacity:1}
.venue small{font-family:var(--font-body);font-weight:500;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-4);display:block;margin-top:1px}

/* ---------- dark feature panel (routes / compare) ---------- */
.panel{background:var(--dv-black);color:#fff;border-radius:var(--radius-2xl);padding:clamp(28px,4.5vw,64px);position:relative;overflow:hidden}
.panel::after{content:"";position:absolute;right:-10%;top:-40%;width:60%;height:170%;
  background:linear-gradient(100deg,transparent,rgba(147,184,255,.14),transparent);transform:rotate(14deg);pointer-events:none}
.panel-head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.9fr);gap:clamp(20px,4vw,56px);align-items:start;margin-bottom:var(--space-9);position:relative}
@media(max-width:860px){.panel-head{grid-template-columns:1fr}}
.panel h2{color:#fff}
.panel .lead{color:rgba(255,255,255,.62)}
.chip-dark{display:inline-flex;align-items:center;font-size:12px;font-weight:600;letter-spacing:.02em;color:rgba(255,255,255,.72);
  background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.14);border-radius:var(--radius-pill);padding:6px 14px;margin-bottom:var(--space-5)}
.routes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-4);position:relative}
@media(max-width:900px){.routes{grid-template-columns:1fr}}
.route{background:#fff;color:var(--ink-1);border-radius:20px;padding:10px 10px 22px;display:flex;flex-direction:column;transition:transform var(--dur-base) var(--ease-emphasis)}
.route:hover{transform:translateY(-4px)}
.route-tile{position:relative;border-radius:14px;overflow:hidden;background:linear-gradient(150deg,#101c31,#1c2f4f 70%,#2554d4);aspect-ratio:1.62;display:grid;place-items:center;padding:18px}
.route-tile::before{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.06) 1px,transparent 1px);background-size:24px 24px;transform:rotate(-9deg) scale(1.5)}
.route-arrow{position:absolute;right:-1px;bottom:-1px;width:42px;height:42px;background:#fff;border-radius:14px 0 0 0;display:grid;place-items:center;color:var(--dv-blue-deep)}
.route-arrow svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.route h3{font-size:18px;margin:var(--space-5) 8px var(--space-2)}
.route p{font-size:13.5px;color:var(--ink-2);margin-inline:8px}

/* ---------- comparison matrix, rebuilt ---------- */
.matrix{position:relative;border-radius:var(--radius-xl);overflow:hidden;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.1)}
.mscroll{overflow-x:auto}
table.mx{width:100%;border-collapse:collapse;min-width:760px;font-size:14px}
table.mx th,table.mx td{padding:0;text-align:right}
table.mx thead th{padding:18px 20px;background:rgba(255,255,255,.05);border-bottom:1px solid rgba(255,255,255,.12);
  font-family:var(--font-display);font-size:14px;font-weight:600;color:#fff;letter-spacing:-.01em;text-align:right}
table.mx thead th .sub{display:block;font-family:var(--font-body);font-size:10.5px;font-weight:500;letter-spacing:.09em;
  text-transform:uppercase;color:rgba(255,255,255,.4);margin-top:3px}
table.mx thead th:first-child{text-align:left}
table.mx tbody th{padding:15px 20px;text-align:left;font-family:var(--font-body);font-weight:500;font-size:13.5px;
  color:rgba(255,255,255,.62);border-bottom:1px solid rgba(255,255,255,.06);white-space:nowrap}
table.mx tbody td{padding:15px 20px;font-family:var(--font-mono);font-variant-numeric:tabular-nums;font-size:14px;
  color:#fff;border-bottom:1px solid rgba(255,255,255,.06)}
table.mx tbody td.txt{font-family:var(--font-body);font-size:13px;color:rgba(255,255,255,.8)}
table.mx tbody tr:last-child th,table.mx tbody tr:last-child td{border-bottom:0}
table.mx tbody tr:hover th,table.mx tbody tr:hover td{background:rgba(255,255,255,.035)}
table.mx tbody tr.hl th{color:#fff;font-weight:700}
table.mx tbody tr.hl td{background:rgba(0,182,122,.1);color:#5ee0b0;font-weight:700;font-size:15px}
table.mx tbody tr.hl:hover th,table.mx tbody tr.hl:hover td{background:rgba(0,182,122,.15)}
.mx-note{padding:15px 20px;font-size:12.5px;color:rgba(255,255,255,.42);border-top:1px solid rgba(255,255,255,.1)}
.na{color:rgba(255,255,255,.28)}

/* ---------- infrastructure ---------- */
.infra{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:clamp(28px,5vw,80px);align-items:center}
@media(max-width:980px){.infra{grid-template-columns:1fr}}
.ticks{list-style:none;margin:var(--space-7) 0 0;padding:0;display:grid;gap:var(--space-4)}
.ticks li{display:flex;gap:12px;align-items:flex-start;font-size:15px;color:var(--ink-2)}
.ticks .tk{width:20px;height:20px;border-radius:50%;background:var(--dv-green-soft);color:#0a7d57;display:grid;place-items:center;flex:none;margin-top:2px}
.ticks .tk svg{width:11px;height:11px;stroke:currentColor;fill:none;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.ticks b{color:var(--ink-1);font-weight:600}

/* ---------- feature grid ---------- */
.bigstats{display:flex;gap:clamp(28px,5vw,64px);flex-wrap:wrap;margin-bottom:var(--space-7)}
.bigstat .v{font-family:var(--font-display);font-size:clamp(38px,5.5vw,64px);font-weight:700;letter-spacing:-.03em;line-height:1;color:var(--dv-blue)}
.bigstat .k{font-size:12.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-3);font-weight:600;margin-top:8px}
.feats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-4)}
@media(max-width:980px){.feats{grid-template-columns:repeat(2,1fr)}}
@media(max-width:620px){.feats{grid-template-columns:1fr}}
.feat{border:1px solid var(--line);border-radius:var(--radius-xl);background:#fff;padding:var(--space-5);display:flex;flex-direction:column;gap:var(--space-5);transition:border-color var(--dur-base),box-shadow var(--dur-base),transform var(--dur-base) var(--ease-emphasis)}
.feat:hover{border-color:var(--dv-blue);transform:translateY(-3px);box-shadow:0 18px 40px -26px rgba(74,111,165,.55)}
.feat-vis{background:var(--dv-blue-soft);border-radius:var(--radius-md);padding:16px;min-height:132px;display:grid;place-items:center}
.feat h3{font-size:17px}
.feat p{font-size:13.5px;color:var(--ink-2);margin-top:6px}
.feat-vis .mock{box-shadow:0 8px 20px -10px rgba(15,23,42,.28)}
.fv-num{font-family:var(--font-display);font-size:40px;font-weight:700;color:var(--dv-blue-deep);letter-spacing:-.03em;line-height:1;text-align:center}
.fv-num small{display:block;font-family:var(--font-body);font-size:11px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--dv-blue);margin-top:8px}
.fv-code{font-family:var(--font-mono);font-size:11px;line-height:1.7;color:#cbd5e1;background:#0d1424;border-radius:9px;padding:12px 14px;width:100%}
.fv-code .k{color:#8fb0da} .fv-code .s{color:#5ee0b0} .fv-code .n{color:#fbbf24}
.fv-bars{width:100%;display:grid;gap:9px}
.fv-bar .r{display:flex;justify-content:space-between;font-size:11px;font-weight:600;color:var(--ink-2);margin-bottom:4px}
.fv-bar .t{height:6px;border-radius:3px;background:rgba(74,111,165,.18);overflow:hidden}
.fv-bar .t span{display:block;height:100%;border-radius:3px;background:var(--dv-blue)}
.fv-bar.g .t span{background:var(--dv-green)}
.fv-tabs{display:flex;gap:5px;flex-wrap:wrap;justify-content:center}
.fv-tab{font-size:11px;font-weight:600;background:#fff;border:1px solid var(--line);border-radius:var(--radius-pill);padding:5px 11px;color:var(--ink-2)}
.fv-tab.on{background:var(--dv-blue);border-color:var(--dv-blue);color:#fff}

/* ---------- reviews ---------- */
.tp-head{display:flex;align-items:center;gap:var(--space-5);flex-wrap:wrap;margin-bottom:var(--space-8)}
.tp-score{display:flex;align-items:baseline;gap:8px}
.tp-score .v{font-family:var(--font-display);font-size:40px;font-weight:700;letter-spacing:-.03em}
.tp-score .o{font-size:14px;color:var(--ink-3)}
.stars{display:inline-flex;gap:3px}
.stars svg{width:19px;height:19px;fill:#00b67a}
.stars.sm svg{width:14px;height:14px}
.stars .off{fill:rgba(15,23,42,.14)}
.tp-meta{font-size:13.5px;color:var(--ink-3)}
.reviews{columns:3;column-gap:var(--space-4)}
@media(max-width:980px){.reviews{columns:2}}
@media(max-width:640px){.reviews{columns:1}}
.rev{break-inside:avoid;border:1px solid var(--line);border-radius:var(--radius-lg);padding:var(--space-5);margin-bottom:var(--space-4);background:#fff}
.rev h4{font-family:var(--font-display);font-size:15px;font-weight:600;margin:var(--space-3) 0 var(--space-2)}
.rev p{font-size:13.5px;color:var(--ink-2);line-height:1.6}
.rev .who{display:flex;align-items:center;gap:9px;margin-top:var(--space-4);padding-top:var(--space-4);border-top:1px solid var(--line-2);font-size:12.5px;color:var(--ink-3)}
.rev .av{width:26px;height:26px;border-radius:50%;background:var(--dv-blue-soft);color:var(--dv-blue-deep);display:grid;place-items:center;font-size:11px;font-weight:700;flex:none}
.rev .who b{color:var(--ink-1);font-weight:600}
.rev .dt{margin-inline-start:auto;font-family:var(--font-mono);font-size:11px;color:var(--ink-4)}

/* ---------- certificates ---------- */
.certs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-4)}
@media(max-width:980px){.certs{grid-template-columns:repeat(2,1fr)}}
@media(max-width:620px){.certs{grid-template-columns:1fr}}
.cert{border:1px solid rgba(255,255,255,.12);border-radius:var(--radius-lg);background:linear-gradient(160deg,rgba(255,255,255,.06),rgba(255,255,255,.02));padding:var(--space-5);position:relative;overflow:hidden}
.cert::after{content:"";position:absolute;right:-30px;top:-30px;width:110px;height:110px;border-radius:50%;background:radial-gradient(circle,rgba(0,182,122,.18),transparent 70%)}
.cert .amt{font-family:var(--font-mono);font-size:26px;font-weight:600;letter-spacing:-.02em;color:#fff;position:relative}
.cert .nm{font-family:var(--font-display);font-size:15px;font-weight:600;color:#fff;margin-top:var(--space-4)}
.cert .pr{font-size:12.5px;color:rgba(255,255,255,.55);margin-top:3px}
.cert .vc{font-family:var(--font-mono);font-size:10.5px;color:rgba(255,255,255,.42);margin-top:var(--space-4);padding-top:var(--space-4);border-top:1px solid rgba(255,255,255,.1);display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap}
.cert .vc b{color:#5ee0b0;font-weight:600}
.roi{position:absolute;right:var(--space-5);top:var(--space-5);font-family:var(--font-mono);font-size:11px;font-weight:700;color:#5ee0b0;background:rgba(0,182,122,.12);border:1px solid rgba(0,182,122,.28);border-radius:var(--radius-pill);padding:3px 9px}

/* ---------- gooey CTA (the metaball pill Xoala uses in its bar) ---------- */
.x-cta{position:relative;z-index:1;display:inline-flex;align-items:center;height:42px;
  padding:0 54px 0 22px;font-family:var(--font-display);font-weight:600;font-size:14px;
  text-decoration:none;cursor:pointer;white-space:nowrap;border:0;background:none}
.x-cta:hover{z-index:2}
.x-cta-bg{position:absolute;inset:0;pointer-events:none;z-index:0;filter:url(#goo)}
.x-cta-bg-pill{position:absolute;inset:0;border-radius:100px}
.x-cta-bg-orb{position:absolute;top:50%;right:5px;width:32px;height:32px;margin-top:-16px;border-radius:50%;
  transform:translateX(0);transition:transform 1.1s var(--ease-emphasis);will-change:transform}
.x-cta-label{position:relative;z-index:1;line-height:1}
.x-cta-arrow{position:absolute;z-index:1;right:16px;top:50%;width:13px;height:13px;margin-top:-6.5px;
  transition:transform 1.1s var(--ease-emphasis)}
.x-cta-arrow svg{display:block;width:13px;height:13px;stroke:currentColor;fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.x-cta:hover .x-cta-bg-orb{transform:none}
.x-cta:hover .x-cta-arrow{transform:translateX(2px)}
.x-cta:active .x-cta-bg-orb{transition-duration:.14s;transform:none}
.x-cta:focus-visible{outline:none}
.x-cta:focus-visible .x-cta-bg-pill{box-shadow:0 0 0 3px rgba(79,125,240,.45)}
/* variants */
.x-cta--primary{color:#fff}
.x-cta--primary .x-cta-bg-pill,.x-cta--primary .x-cta-bg-orb{background:linear-gradient(180deg,#4f7df0,#2554d4)}
.x-cta--primary .x-cta-bg{filter:url(#goo)}
.x-cta--light{color:var(--dv-blue-deep)}
.x-cta--light .x-cta-bg-pill,.x-cta--light .x-cta-bg-orb{background:#fff}
/* secondary on a dark ground */
.x-cta--glass{color:#fff}
.x-cta--glass .x-cta-bg-pill{background:rgba(255,255,255,.12);box-shadow:inset 0 0 0 1px rgba(255,255,255,.26)}
.x-cta--glass .x-cta-bg-orb{background:rgba(255,255,255,.2)}
.x-cta--wico .x-cta-bg-orb{background:#fff}
.x-cta--wico .x-cta-arrow{color:#12203f}
/* secondary on a light ground: the disc stays put and only the arrow moves */
.x-cta--outline{color:var(--ink-1)}
.x-cta--outline .x-cta-bg{filter:none}
.x-cta--outline .x-cta-bg-pill{background:#fff;box-shadow:inset 0 0 0 1px rgba(15,23,42,.12),0 10px 26px rgba(15,23,42,.08)}
.x-cta--outline .x-cta-bg-orb{background:linear-gradient(180deg,#4f7df0,#2554d4);box-shadow:inset 0 1px 0 rgba(255,255,255,.3)}
.x-cta--outline .x-cta-arrow{color:#fff}
.x-cta--outline:hover .x-cta-bg-orb{transform:none}
.x-cta--outline:hover .x-cta-arrow{transform:translateX(2px)}
.x-cta--outline:hover .x-cta-bg-pill{box-shadow:inset 0 0 0 1px rgba(37,84,212,.35),0 16px 34px rgba(15,23,42,.14)}
/* The button is a struck seal: a lit top edge as if the pill were pressed out of
   metal, a shadow in its own colour rather than grey, and one sheen that crosses
   the face on hover. The orb and arrow keep the motion they already had. */
.x-cta--primary .x-cta-bg-pill{box-shadow:inset 0 1px 0 rgba(255,255,255,.3),0 10px 26px rgba(37,84,212,.34)}
.x-cta--light .x-cta-bg-pill{box-shadow:inset 0 -1px 0 rgba(15,23,42,.1),0 10px 26px rgba(6,10,22,.3)}
.x-cta-bg-pill{overflow:hidden}
.x-cta-bg-pill::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:linear-gradient(104deg,transparent 36%,rgba(255,255,255,.3) 50%,transparent 64%);
  transform:translateX(-130%);transition:transform .95s var(--ease-emphasis)}
.x-cta--light .x-cta-bg-pill::after{background:linear-gradient(104deg,transparent 36%,rgba(37,84,212,.14) 50%,transparent 64%)}
.x-cta:hover .x-cta-bg-pill::after{transform:translateX(130%)}
.x-cta-label{transition:transform .5s var(--ease-emphasis)}
.x-cta:hover .x-cta-label{transform:translateX(2px)}
.x-cta:active .x-cta-bg-pill{transform:scale(.985)}
.goo-defs{position:absolute;width:0;height:0;overflow:hidden}
@media(prefers-reduced-motion:reduce){
  .x-cta-bg-orb,.x-cta-arrow,.x-cta-label,.x-cta-bg-pill::after{transition:none}
  .x-cta:hover .x-cta-bg-pill::after{transform:translateX(-130%)}
  .x-cta:hover .x-cta-bg-orb{transform:translateX(2px)}
  .x-cta:hover .x-cta-arrow{transform:none}
}

/* ---------- locale + currency pickers ---------- */
.picks{display:flex;align-items:center;gap:6px}
.pick{position:relative}
.pick-btn{display:inline-flex;align-items:center;gap:7px;height:36px;padding:0 11px;border-radius:var(--radius-pill);
  border:1px solid var(--line);background:#fff;color:var(--ink-1);font-family:var(--font-body);font-size:13px;font-weight:600;
  cursor:pointer;transition:border-color var(--dur-quick),background var(--dur-quick),color var(--dur-quick)}
.pick-btn:hover{border-color:var(--dv-blue);color:var(--dv-blue)}
.pick-btn .fl{width:18px;height:13px;border-radius:2px;display:block;box-shadow:0 0 0 1px rgba(15,23,42,.12) inset}
.pick-btn .cv{width:9px;height:9px;stroke:currentColor;fill:none;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;opacity:.5;transition:transform var(--dur-base) var(--ease-emphasis)}
.pick-btn[aria-expanded="true"] .cv{transform:rotate(180deg)}
.topnav:not(.scrolled) .pick-btn{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.2);color:#fff}
.topnav:not(.scrolled) .pick-btn:hover{background:rgba(255,255,255,.16);border-color:rgba(255,255,255,.38);color:#fff}
.topnav:not(.scrolled) .pick-btn .fl{box-shadow:0 0 0 1px rgba(255,255,255,.3) inset}
.pick-menu{position:absolute;right:0;top:calc(100% + 8px);min-width:212px;background:#fff;border:1px solid var(--line);
  border-radius:var(--radius-md);box-shadow:0 22px 44px -18px rgba(15,23,42,.32);padding:6px;z-index:30;
  opacity:0;visibility:hidden;transform:translateY(-6px);transition:opacity var(--dur-quick),transform var(--dur-base) var(--ease-emphasis),visibility var(--dur-quick)}
.pick-menu.open{opacity:1;visibility:visible;transform:none}
.pick-menu a,.pick-menu button{display:flex;align-items:center;gap:10px;width:100%;padding:9px 10px;border:0;background:none;
  border-radius:8px;font-family:var(--font-body);font-size:13.5px;color:var(--ink-1);text-decoration:none;cursor:pointer;text-align:left}
.pick-menu a:hover,.pick-menu button:hover{background:var(--dv-blue-soft)}
.pick-menu .cur{margin-inline-start:auto;color:var(--dv-blue);font-weight:700;font-size:11px}
.pick-menu .code{margin-inline-start:auto;font-family:var(--font-mono);font-size:11px;color:var(--ink-4)}
.pick-menu .fl{width:20px;height:14px;border-radius:2px;flex:none;box-shadow:0 0 0 1px rgba(15,23,42,.12) inset}
.pick-note{padding:9px 11px 5px;font-size:11px;line-height:1.5;color:var(--ink-3);border-top:1px solid var(--line-2);margin-top:6px}
@media(max-width:1180px){.picks{display:none}}

/* ---------- LPMS-style feature grid (varied spans, mockup over copy) ---------- */
.lpms{padding:clamp(48px,6vw,96px) 0 clamp(56px,7vw,104px)}
.lpms-head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.92fr);gap:clamp(24px,4vw,64px);align-items:end;margin-bottom:var(--space-9)}
@media(max-width:900px){.lpms-head{grid-template-columns:1fr}}
.lgrid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:var(--space-4)}
.lcard{grid-column:span 2;display:flex;flex-direction:column;border:1px solid var(--line);border-radius:var(--radius-xl);
  background:#fff;color:var(--ink-1);padding:10px 10px 22px;overflow:hidden;
  transition:border-color var(--dur-base),box-shadow var(--dur-base),transform var(--dur-base) var(--ease-emphasis)}
.lcard:hover{border-color:var(--dv-blue);transform:translateY(-4px);box-shadow:0 22px 46px -28px rgba(74,111,165,.55)}
.lcard.w3{grid-column:span 3}
@media(max-width:1080px){.lcard,.lcard.w3{grid-column:span 3}}
@media(max-width:700px){.lgrid{grid-template-columns:1fr}.lcard,.lcard.w3{grid-column:span 1}}
.lvis{position:relative;flex:1 1 auto;border-radius:16px;overflow:hidden;background:linear-gradient(155deg,var(--dv-blue) 0%,var(--dv-blue-deep) 100%);
  min-height:206px;display:grid;place-items:center;padding:20px}
.lvis::before{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.07) 1px,transparent 1px);background-size:26px 26px;transform:rotate(-8deg) scale(1.5);pointer-events:none}
.lcopy{padding:var(--space-5) 10px 0}
.lcopy h3{font-size:17.5px;letter-spacing:-.015em}
.lcopy p{font-size:13.5px;color:var(--ink-2);margin-top:7px;max-width:44ch}

/* visuals inside the tiles */
.acct-list{position:relative;z-index:1;width:100%;display:grid;gap:7px;max-width:270px}
.acct{background:#fff;border-radius:10px;padding:9px 11px;box-shadow:0 10px 22px -12px rgba(7,12,22,.5);display:flex;align-items:center;gap:9px}
.acct .ic{width:20px;height:20px;border-radius:5px;flex:none;display:grid;place-items:center;font-size:8.5px;font-weight:700;color:#fff;background:var(--dv-blue)}
.acct .ic.g{background:var(--dv-green)} .acct .ic.d{background:#1b2a45} .acct .ic.o{background:#b45309}
.acct .t{font-size:11px;font-weight:600;line-height:1.25;color:var(--ink-1)}
.acct .s{font-family:var(--font-mono);font-size:8.5px;color:var(--ink-4);letter-spacing:.02em}
.acct .v{margin-inline-start:auto;font-family:var(--font-mono);font-size:11.5px;font-weight:600;color:var(--ink-1)}
.acct .v.pos{color:#0a7d57}
.rate-card{position:relative;z-index:1;background:#fff;border-radius:12px;padding:16px 18px;text-align:center;box-shadow:0 12px 28px -14px rgba(7,12,22,.5);min-width:200px}
.rate-card .lbl{font-size:9px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-4);font-weight:700}
.rate-card .big{font-family:var(--font-mono);font-size:27px;font-weight:600;letter-spacing:-.02em;margin-top:6px;color:var(--ink-1)}
.rate-card .sub{font-size:11px;color:var(--ink-3);margin-top:5px}
.rate-card .dot{display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--dv-green);margin-inline-end:5px;animation:pulse-live 2.4s ease-out infinite}
.bignum{position:relative;z-index:1;text-align:center;color:#fff}
.bignum .v{font-family:var(--font-display);font-size:clamp(46px,6vw,68px);font-weight:700;letter-spacing:-.04em;line-height:1}
.bignum .k{font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.62);font-weight:600;margin-top:10px}
.codeblk{position:relative;z-index:1;width:100%;max-width:330px;background:#0a1020;border-radius:11px;padding:14px 16px;
  font-family:var(--font-mono);font-size:11.5px;line-height:1.85;color:#cbd5e1;box-shadow:0 14px 30px -14px rgba(0,0,0,.7)}
.codeblk .k{color:#8fb0da} .codeblk .s{color:#5ee0b0} .codeblk .n{color:#fbbf24} .codeblk .c{color:#64748b}
.codeblk .hd{color:#fff;font-weight:600;margin-bottom:7px}
.sizes{position:relative;z-index:1;display:flex;gap:6px;flex-wrap:wrap;justify-content:center;max-width:290px}
.sizes span{font-family:var(--font-mono);font-size:12px;font-weight:600;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.2);
  color:rgba(255,255,255,.82);border-radius:var(--radius-pill);padding:6px 13px}
.sizes span.on{background:#fff;border-color:#fff;color:var(--dv-blue-deep)}
.evd{position:relative;z-index:1;background:#fff;border-radius:11px;padding:13px 15px;width:100%;max-width:290px;box-shadow:0 12px 28px -14px rgba(7,12,22,.5)}
.evd .top{display:flex;align-items:center;gap:9px;padding-bottom:10px;border-bottom:1px solid var(--line-2)}
.evd .av{width:24px;height:24px;border-radius:7px;background:#fdeceb;color:var(--dv-red);display:grid;place-items:center;font-size:11px;font-weight:700;flex:none}
.evd .ti{font-size:11.5px;font-weight:600;color:var(--ink-1)}
.evd .tm{margin-inline-start:auto;font-family:var(--font-mono);font-size:9.5px;color:var(--ink-4)}
.evd .rw{display:flex;justify-content:space-between;gap:12px;padding-top:8px;font-size:10.5px}
.evd .rw .k{color:var(--ink-4);letter-spacing:.05em;text-transform:uppercase;font-weight:700;font-size:9px}
.evd .rw .v{font-family:var(--font-mono);font-weight:600;color:var(--ink-1)}
.objs{position:relative;z-index:1;background:#fff;border-radius:11px;padding:14px 16px;width:100%;max-width:290px;box-shadow:0 12px 28px -14px rgba(7,12,22,.5);display:grid;gap:11px}
.obj .r{display:flex;justify-content:space-between;font-size:10.5px;font-weight:600;color:var(--ink-2);margin-bottom:5px}
.obj .r .n{font-family:var(--font-mono);color:var(--ink-1)}
.obj .t{height:5px;border-radius:3px;background:rgba(74,111,165,.16);overflow:hidden}
.obj .t span{display:block;height:100%;border-radius:3px;background:var(--dv-blue)}
.obj.g .t span{background:var(--dv-green)}
.obj.r2 .t span{background:var(--dv-amber)}

/* ---------- illustrated tiles (replaces the flat blue grid) ---------- */
.svc-tile{background:linear-gradient(158deg,#16233c 0%,#22406e 52%,#2554d4 100%)}
.svc-tile::before{background-image:none;background:
  radial-gradient(75% 60% at 18% 8%, rgba(147,184,255,.22), transparent 62%),
  radial-gradient(65% 55% at 92% 96%, rgba(0,182,122,.20), transparent 60%);
  transform:none;opacity:1}
.art{position:absolute;inset:0;z-index:0}
.art svg{width:100%;height:100%;display:block}
.art-fg{position:relative;z-index:1;width:100%}

/* candles behind the CFD ticket */
.cndl rect{opacity:.9}
.spark{fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

/* token orbs for crypto */
.orb{position:absolute;border-radius:50%;display:grid;place-items:center;font-family:var(--font-display);font-weight:700;color:#fff;
  box-shadow:0 10px 24px -10px rgba(0,0,0,.6);border:1px solid rgba(255,255,255,.22)}
.orb.btc{width:46px;height:46px;font-size:17px;left:7%;top:6%;background:linear-gradient(150deg,#f7931a,#b8690c);animation:bob 7s ease-in-out infinite}
.orb.eth{width:34px;height:34px;font-size:13px;right:9%;top:4%;background:linear-gradient(150deg,#6c7ae0,#3c4bb5);animation:bob 9s ease-in-out infinite reverse}
.orb.sol{width:27px;height:27px;font-size:10px;right:16%;bottom:22%;background:linear-gradient(150deg,#14f195,#0a9e63);animation:bob 8s ease-in-out infinite}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}

/* depth ladder for futures */
.ladder{position:relative;z-index:1;width:100%;max-width:230px;display:grid;gap:3px}
.lad{display:flex;align-items:center;gap:8px;font-family:var(--font-mono);font-size:9.5px;color:rgba(255,255,255,.8)}
.lad .bar{height:11px;border-radius:2px;flex:none}
.lad.b .bar{background:linear-gradient(90deg,rgba(0,182,122,.85),rgba(0,182,122,.25))}
.lad.s .bar{background:linear-gradient(90deg,rgba(239,68,68,.85),rgba(239,68,68,.25))}
.lad .px{margin-inline-start:auto;color:#fff;font-weight:600}
.lad.mid{color:#fff;font-weight:700;font-size:11px;padding:3px 0;border-block:1px solid rgba(255,255,255,.18);margin-block:3px}

/* probability curve for prediction */
.prob{position:absolute;inset:0;z-index:0;opacity:.85}

/* ---------- LPMS row: Xoala's light cards, equal squares in one row ---------- */
.lpms-head{display:block;text-align:center;max-width:760px;margin:0 auto var(--space-9)}
.lpms-head h2{margin:var(--space-4) auto 0}
.lpms-head .lead{margin:var(--space-6) auto 0;text-align:center}
.eyebrow-chip{display:inline-block;font-size:12px;font-weight:600;color:var(--dv-blue-deep);background:var(--dv-blue-soft);
  border:1px solid rgba(74,111,165,.22);border-radius:var(--radius-pill);padding:6px 15px}
.statbox{display:inline-flex;align-items:stretch;gap:0;border:1px solid var(--line);border-radius:var(--radius-lg);
  overflow:hidden;margin-top:var(--space-7);background:#fff;box-shadow:0 14px 34px -22px rgba(15,23,42,.4)}
.statbox > div{padding:14px 30px}
.statbox > div + div{border-left:1px solid var(--line)}
.statbox .v{font-family:var(--font-display);font-size:clamp(26px,3vw,34px);font-weight:700;letter-spacing:-.03em;line-height:1;color:var(--ink-1)}
.statbox .k{font-size:10.5px;letter-spacing:.11em;text-transform:uppercase;color:var(--ink-3);font-weight:600;margin-top:7px}
.lpms-cta{display:flex;gap:var(--space-3);justify-content:center;flex-wrap:wrap;margin-top:var(--space-7)}

.lrow-head{display:flex;justify-content:flex-end;gap:8px;margin-bottom:var(--space-5)}
.lnav{width:36px;height:36px;border-radius:50%;border:1px solid var(--line);background:#fff;display:grid;place-items:center;
  cursor:pointer;color:var(--ink-2);transition:border-color var(--dur-quick),color var(--dur-quick),background var(--dur-quick)}
.lnav:hover{border-color:var(--dv-blue);color:var(--dv-blue)}
.lnav:disabled{opacity:.35;cursor:default}
.lnav svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}

.lrow{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(252px,1fr);gap:var(--space-4);
  overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;padding-bottom:4px;
  scrollbar-width:none;-ms-overflow-style:none}
.lrow::-webkit-scrollbar{display:none}
.lcard{grid-column:auto;scroll-snap-align:start;display:flex;flex-direction:column;background:none;border:0;padding:0;border-radius:0}
.lcard.w3{grid-column:auto}
.lcard:hover{transform:none;box-shadow:none;border:0}
.lvis{position:relative;flex:none;aspect-ratio:1.18;border-radius:var(--radius-lg);overflow:hidden;
  background:linear-gradient(162deg,#f4f7fd 0%,#e9eff9 60%,#e2eaf7 100%);
  border:1px solid var(--line);display:grid;place-items:center;padding:18px;min-height:0;
  transition:border-color var(--dur-base),box-shadow var(--dur-base),transform var(--dur-base) var(--ease-emphasis)}
.lcard:hover .lvis{border-color:var(--dv-blue);transform:translateY(-4px);box-shadow:0 20px 42px -26px rgba(74,111,165,.5)}
.lvis::before{content:"";position:absolute;inset:0;
  background-image:radial-gradient(circle, rgba(74,111,165,.10) 1px, transparent 1px);background-size:20px 20px;
  -webkit-mask-image:radial-gradient(90% 80% at 50% 45%,#000,transparent 75%);mask-image:radial-gradient(90% 80% at 50% 45%,#000,transparent 75%)}
.lvis-arrow{position:absolute;right:10px;bottom:10px;z-index:2;width:28px;height:28px;border-radius:50%;
  background:#fff;border:1px solid var(--line);display:grid;place-items:center;color:var(--dv-blue);
  transition:transform var(--dur-base) var(--ease-emphasis),background var(--dur-quick),color var(--dur-quick)}
.lcard:hover .lvis-arrow{background:var(--dv-blue);color:#fff;transform:translate(2px,-2px)}
.lvis-arrow svg{width:12px;height:12px;stroke:currentColor;fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.lcopy{padding:var(--space-5) 2px 0}
.lcopy h3{font-size:16.5px;letter-spacing:-.015em}
.lcopy p{font-size:13px;color:var(--ink-2);margin-top:7px;line-height:1.55}

/* light-tile visuals */
.mini{position:relative;z-index:1;width:100%;background:#fff;border-radius:9px;padding:9px 10px;
  box-shadow:0 8px 20px -10px rgba(15,23,42,.3);border:1px solid rgba(15,23,42,.05);font-size:10px}
.mini + .mini{margin-top:5px}
.mini-stack{position:relative;z-index:1;width:100%}
.mrow{display:flex;align-items:center;gap:7px}
.mico{width:17px;height:17px;border-radius:4px;flex:none;display:grid;place-items:center;font-size:8px;font-weight:700;color:#fff;background:var(--dv-blue)}
.mico.g{background:var(--dv-green)} .mico.d{background:#1b2a45} .mico.o{background:#b45309} .mico.r{background:#b91c1c}
.mt{font-size:10.5px;font-weight:600;color:var(--ink-1);line-height:1.2}
.ms{font-family:var(--font-mono);font-size:8px;color:var(--ink-4)}
.mv{margin-inline-start:auto;font-family:var(--font-mono);font-size:10.5px;font-weight:600;color:var(--ink-1)}
.mv.pos{color:#0a7d57}
.chartbars{position:relative;z-index:1;display:flex;align-items:flex-end;gap:5px;height:88px;width:100%;max-width:200px}
.chartbars i{flex:1;border-radius:3px 3px 0 0;background:linear-gradient(180deg,#5a82b4,var(--dv-blue-deep))}
.ratepill{position:absolute;z-index:2;left:50%;top:52%;transform:translateX(-50%);background:#0d1424;color:#fff;
  border-radius:var(--radius-pill);padding:5px 12px;font-family:var(--font-mono);font-size:10px;white-space:nowrap;
  box-shadow:0 10px 22px -10px rgba(0,0,0,.6);display:flex;align-items:center;gap:6px}
.ratepill .dot{width:5px;height:5px;border-radius:50%;background:var(--dv-green)}
.globe{position:relative;z-index:1;display:grid;place-items:center;width:100%;height:100%}
.gnum{background:#0d1424;color:#fff;border-radius:11px;padding:11px 18px;text-align:center;box-shadow:0 12px 26px -12px rgba(0,0,0,.6)}
.gnum .v{font-family:var(--font-display);font-size:26px;font-weight:700;letter-spacing:-.03em;line-height:1}
.gnum .k{font-size:8.5px;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.55);font-weight:600;margin-top:5px}
.fbub{position:absolute;width:26px;height:26px;border-radius:50%;background:#fff;display:grid;place-items:center;
  box-shadow:0 6px 16px -6px rgba(15,23,42,.4);border:1px solid rgba(15,23,42,.06)}
.fbub svg{width:15px;height:11px;border-radius:1.5px}
.mcode{position:relative;z-index:1;width:100%;background:#0d1424;border-radius:9px;padding:11px 12px;
  font-family:var(--font-mono);font-size:9.5px;line-height:1.75;color:#cbd5e1;box-shadow:0 10px 24px -12px rgba(0,0,0,.65)}
.mcode .k{color:#8fb0da} .mcode .s{color:#5ee0b0} .mcode .n{color:#fbbf24} .mcode .c{color:#64748b}
.clrd{position:absolute;left:50%;transform:translateX(-50%);bottom:26px;z-index:2;white-space:nowrap;background:#0a7d57;color:#fff;border-radius:var(--radius-pill);
  padding:4px 11px;font-size:9.5px;font-weight:700;box-shadow:0 8px 18px -8px rgba(0,0,0,.5)}
.tiers{position:relative;z-index:1;width:100%;display:grid;gap:6px;max-width:190px}
.tier{background:#fff;border:1px solid rgba(15,23,42,.07);border-radius:8px;padding:8px 11px;font-size:10px;font-weight:600;color:var(--ink-2);
  box-shadow:0 6px 14px -8px rgba(15,23,42,.25)}
.tier.on{background:var(--dv-blue);border-color:var(--dv-blue);color:#fff}
.tier .r{margin-inline-start:auto;font-family:var(--font-mono);font-size:9px;opacity:.75}
.tier{display:flex;align-items:center}
.tag{position:absolute;left:50%;transform:translateX(-50%);bottom:22px;z-index:2;white-space:nowrap;background:#0d1424;color:#fff;border-radius:var(--radius-pill);
  padding:4px 11px;font-size:9.5px;font-weight:600}
.pbars{position:relative;z-index:1;width:100%;background:#fff;border-radius:9px;padding:11px 12px;display:grid;gap:9px;
  box-shadow:0 8px 20px -10px rgba(15,23,42,.3);border:1px solid rgba(15,23,42,.05)}
.pb .r{display:flex;justify-content:space-between;font-size:9.5px;font-weight:600;color:var(--ink-2);margin-bottom:4px}
.pb .r .n{font-family:var(--font-mono);color:var(--ink-1)}
.pb .t{height:4px;border-radius:2px;background:rgba(74,111,165,.16);overflow:hidden}
.pb .t span{display:block;height:100%;border-radius:2px;background:var(--dv-blue)}
.pb.g .t span{background:var(--dv-green)} .pb.a .t span{background:#b45309}

/* ---------- four markets, each tile alive ---------- */
.svcs{grid-template-columns:repeat(4,minmax(0,1fr))}
@media(max-width:1180px){.svcs{grid-template-columns:repeat(2,1fr)}}
@media(max-width:620px){.svcs{grid-template-columns:1fr}}

.svc-tile{aspect-ratio:.86;isolation:isolate}
.svc-tile > .art{z-index:0}
.svc-tile > .art-fg,.svc-tile > .ladder,.svc-tile > .orb,.svc-tile > .mk-card{z-index:2}
.svc-label,.svc-arrow,.svc-badge{z-index:3}

/* a slow aurora drifting behind every illustration, tinted per market */
.svc-tile::after{content:"";position:absolute;inset:-35%;z-index:0;pointer-events:none;
  background:radial-gradient(closest-side, var(--glow, rgba(147,184,255,.38)), transparent 72%);
  filter:blur(18px);animation:tile-drift 19s var(--ease-standard) infinite alternate}
@keyframes tile-drift{
  0%{transform:translate3d(-12%,-8%,0) scale(1)}
  50%{transform:translate3d(10%,6%,0) scale(1.18)}
  100%{transform:translate3d(-6%,12%,0) scale(.95)}}
.svc-tile.t-cfd{--glow:rgba(94,224,176,.34)}
.svc-tile.t-cry{--glow:rgba(247,147,26,.30)}
.svc-tile.t-fut{--glow:rgba(147,184,255,.40)}
.svc-tile.t-prd{--glow:rgba(0,182,122,.32)}

/* a light sweep, as if a screen were refreshing */
.sheen{position:absolute;inset:0;z-index:1;pointer-events:none;overflow:hidden}
.sheen i{position:absolute;top:-40%;left:-40%;width:38%;height:180%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.10),transparent);
  transform:rotate(16deg);animation:sheen-run 7.5s var(--ease-standard) infinite}
@keyframes sheen-run{0%,64%{left:-45%}100%{left:130%}}

/* CFD: the candles breathe and the line redraws */
.cndl rect,.cndl path{transform-box:fill-box;transform-origin:bottom center;animation:cndl-breathe 4.6s var(--ease-standard) infinite}
.cndl > g:nth-child(1) path{animation-delay:-.4s}
.cndl rect:nth-of-type(2){animation-delay:-.7s}
.cndl rect:nth-of-type(3){animation-delay:-1.4s}
.cndl rect:nth-of-type(4){animation-delay:-2.1s}
.cndl rect:nth-of-type(5){animation-delay:-2.8s}
.cndl rect:nth-of-type(6){animation-delay:-3.5s}
@keyframes cndl-breathe{0%,100%{transform:scaleY(1)}50%{transform:scaleY(1.22)}}
.spark{stroke-dasharray:420;stroke-dashoffset:420;animation:draw 6s var(--ease-standard) infinite}
@keyframes draw{0%{stroke-dashoffset:420}45%,88%{stroke-dashoffset:0}100%{stroke-dashoffset:-420}}

/* Crypto: the tide rolls */
.wave{animation:wave-roll 14s linear infinite}
@keyframes wave-roll{from{transform:translateX(0)}to{transform:translateX(-220px)}}

/* Futures: the book updates */
.lad .bar{transform-origin:left center;animation:lad-pulse 3.4s var(--ease-standard) infinite}
.lad:nth-child(1) .bar{animation-delay:-.2s} .lad:nth-child(2) .bar{animation-delay:-.9s}
.lad:nth-child(3) .bar{animation-delay:-1.5s} .lad:nth-child(5) .bar{animation-delay:-2.1s}
.lad:nth-child(6) .bar{animation-delay:-2.7s} .lad:nth-child(7) .bar{animation-delay:-3.1s}
@keyframes lad-pulse{0%,100%{transform:scaleX(1)}50%{transform:scaleX(1.55)}}
.lad.mid{position:relative;overflow:hidden}
.lad.mid::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(147,184,255,.22),transparent);
  animation:mid-run 4.5s linear infinite}
@keyframes mid-run{from{transform:translateX(-100%)}to{transform:translateX(100%)}}

/* Prediction: the curve settles, the marker walks it */
.prob .pcurve{stroke-dasharray:430;stroke-dashoffset:430;animation:draw 7.5s var(--ease-standard) infinite}
.prob .pdot{animation:pdot 7.5s var(--ease-standard) infinite}
@keyframes pdot{0%{opacity:0;transform:translate(0,0)}
  18%{opacity:1}
  45%,88%{opacity:1;transform:translate(96px,-88px)}
  100%{opacity:0;transform:translate(96px,-88px)}}

@media(prefers-reduced-motion:reduce){
  .svc-tile::after,.sheen i,.cndl rect,.cndl path,.spark,.wave,.lad .bar,.lad.mid::after,
  .prob .pcurve,.prob .pdot,.orb{animation:none}
  .spark,.prob .pcurve{stroke-dashoffset:0}
}

/* ---------- tiles: shorter, and nothing hugs the bottom edge ---------- */
.svc-tile{aspect-ratio:1.04;padding:18px 18px 82px;place-items:center}
.svc{padding:10px 10px 24px}
.svc-desc{padding:18px 8px 0}

/* CFD: a last-price marker riding the line */
.pxdot{transform-box:fill-box;transform-origin:center;animation:px-pulse 2.6s var(--ease-standard) infinite}
@keyframes px-pulse{0%,100%{r:4;opacity:1}50%{r:6.5;opacity:.65}}
.pxring{transform-box:fill-box;transform-origin:center;animation:px-ring 2.6s var(--ease-standard) infinite}
@keyframes px-ring{0%{r:4;opacity:.7}100%{r:15;opacity:0}}

/* Crypto: the tokens orbit a live position instead of bobbing in place */
.orbit{position:absolute;left:50%;top:44%;width:182px;height:182px;margin:-91px 0 0 -91px;z-index:1;
  animation:orbit-spin 30s linear infinite}
@keyframes orbit-spin{to{transform:rotate(360deg)}}
.orbit .ring{position:absolute;inset:0;border-radius:50%;border:1px dashed rgba(147,184,255,.28)}
.orbit .ring.in{inset:30px;border-style:solid;border-color:rgba(147,184,255,.14)}
.orb2{position:absolute;width:34px;height:34px;border-radius:50%;display:grid;place-items:center;
  box-shadow:0 10px 22px -10px rgba(0,0,0,.65);border:1px solid rgba(255,255,255,.24)}
.orb2 b{display:block;font-family:var(--font-display);font-weight:700;color:#fff;font-size:15px;line-height:1;
  animation:orbit-spin 30s linear infinite reverse}
.orb2.btc{left:50%;top:-17px;margin-left:-17px;background:linear-gradient(150deg,#f7931a,#b8690c)}
.orb2.eth{right:-15px;top:50%;margin-top:-15px;width:30px;height:30px;background:linear-gradient(150deg,#6c7ae0,#3c4bb5)}
.orb2.eth b{font-size:13px}
.orb2.sol{left:2%;bottom:6%;width:25px;height:25px;background:linear-gradient(150deg,#14f195,#0a9e63)}
.orb2.sol b{font-size:10px}
.pos-card{position:relative;z-index:2;background:#fff;border-radius:11px;padding:10px 12px;min-width:138px;max-width:150px;text-align:center;
  box-shadow:0 16px 34px -14px rgba(7,12,22,.7)}
.pos-card .sym{font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-4);font-weight:700}
.pos-card .pnl{font-family:var(--font-mono);font-size:19px;font-weight:600;letter-spacing:-.02em;color:#0a7d57;margin-top:4px}
.pos-card .met{display:flex;justify-content:space-between;gap:8px;margin-top:8px;padding-top:7px;border-top:1px solid var(--line-2);
  font-family:var(--font-mono);font-size:8.5px;white-space:nowrap;color:var(--ink-3)}
.pos-card .met b{color:var(--ink-1);font-weight:600}
.pos-card .spark2{margin-top:8px;height:22px;width:100%}
.pos-card .spark2 path{fill:none;stroke:#00b67a;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}

/* Futures: a depth ladder that actually moves, centred in the tile */
.ladder{max-width:216px;margin:0 auto}
.lad{position:relative;height:15px;display:flex;align-items:center;gap:8px;font-family:var(--font-mono);font-size:9.5px}
.lad .bar{position:absolute;left:0;top:2px;height:11px;border-radius:2px;
  transition:width .45s var(--ease-standard)}
.lad .qty{position:relative;z-index:1;color:rgba(255,255,255,.62);min-width:22px}
.lad .px{position:relative;z-index:1;margin-inline-start:auto;color:#fff;font-weight:600}
.lad.mid{height:22px;font-size:11px;font-weight:700;color:#fff;
  border-block:1px solid rgba(255,255,255,.2);margin-block:4px;padding-inline:2px}
.lad.mid .lbl{letter-spacing:.06em}
.lad.mid .px{font-size:12px}
.lad.mid .dir{margin-inline-start:6px;font-size:9px;opacity:.85;transition:opacity .2s}
.spread{text-align:center;font-family:var(--font-mono);font-size:8.5px;letter-spacing:.1em;text-transform:uppercase;
  color:rgba(255,255,255,.4);margin-top:9px}

/* Prediction: Yes and No resolve against each other */
.prob .ncurve{stroke-dasharray:430;stroke-dashoffset:430;animation:draw 7.5s var(--ease-standard) infinite}
.pc-legend{position:absolute;left:14px;top:14px;z-index:2;display:flex;gap:10px;font-family:var(--font-mono);font-size:9px}
.pc-legend span{display:flex;align-items:center;gap:5px;color:rgba(255,255,255,.72)}
.pc-legend i{width:12px;height:2px;border-radius:2px;display:block}

@media(prefers-reduced-motion:reduce){
  .orbit,.orb2 b,.pxdot,.pxring,.prob .ncurve{animation:none}
  .prob .ncurve{stroke-dashoffset:0}
}

/* ---------- the market cards cross the ground's bottom edge ----------
   A negative margin on the last child collapses out through .wrap and moves the
   gap below the hero instead of shortening it, so the ground ignored it. Stop
   the ground itself short instead: it ends `--tail` above the hero's bottom, and
   that tail is exactly the description block each card hangs onto the page. */
:root{--tail:104px}
/* .hero carried its own #070b13 as a safety ground, which filled the whole
   section regardless of where the .bg layer stopped. The ground has to come
   from .bg alone, or the tail can never show the page underneath. */
.hero{padding-bottom:0;background:transparent}
.hero .bg{inset:0 0 var(--tail) 0}
.hero-cards{position:relative;z-index:2}
.lpms{padding:clamp(48px,6vw,96px) 0 clamp(56px,7vw,104px);margin-top:0}
.lpms-head{margin:clamp(48px,6vw,88px) auto 0}
.lrow{position:relative;z-index:1}
@media(max-width:1180px){:root{--tail:124px}}
@media(max-width:620px){:root{--tail:96px}}

/* ---------- the feature row, sized for a real monitor ----------
   It was sitting a full screen below the fold and the tiles were nearly square,
   so the row read as small. Xoala lets this row break past the content column
   and keeps the tiles landscape; both of those are what make it fill a wide
   display. On 1440 and under the cards hold 216px and the row scrolls. */
.lpms{padding-top:clamp(26px,3vw,46px)}
.lpms > .wrap{max-width:1784px}
.lrow{grid-auto-columns:minmax(204px,1fr)}
.lvis{aspect-ratio:1.46}
.lrow-head{margin-bottom:var(--space-4)}
.lcopy{padding-top:var(--space-4)}
.lcopy h3{font-size:16px}
.lcopy p{font-size:12.5px}
.mini{font-size:9.5px;padding:8px 9px}
.mini + .mini{margin-top:4px}
.chartbars{height:74px;max-width:176px}
.gnum{padding:9px 15px}
.gnum .v{font-size:23px}
.mcode{font-size:9px;padding:10px 11px}
.tiers{max-width:172px;gap:5px}
.tier{padding:7px 10px;font-size:9.5px}
.pbars{padding:10px 11px;gap:8px}

/* ---------- the ground stops halfway down the market cards ----------
   A fixed `--tail` had to be re-guessed at every breakpoint, because the cards
   get taller as the grid drops to two columns and then one. Instead the cards
   themselves carry a full-bleed white sheet from their own midpoint down, so the
   cut lands at 50 % of whatever height they happen to be. */
.hero .bg{inset:0}
.hero-cards{position:relative;z-index:2}
.hero-cards::before{content:"";position:absolute;left:50%;width:100vw;transform:translateX(-50%);top:var(--cut,42%);bottom:-2px;
  background:var(--dv-bg);z-index:-1}
.lpms{padding-top:clamp(10px,1.6vw,26px)}

/* ---------- the feature row, closer to Xoala's own ----------
   Theirs has no border on the tile, a bare blue arrow rather than a bordered
   button, and mockups large enough to run off the tile's edges. */
.lpms{padding-top:0}
.lrow-head{margin-bottom:var(--space-3)}
.lvis{border:0;background:linear-gradient(168deg,#f7f9fe 0%,#eef2fb 55%,#e7edf8 100%);padding:16px}
.lvis::before{background-image:radial-gradient(circle, rgba(74,111,165,.07) 1px, transparent 1px);background-size:22px 22px}
.lcard:hover .lvis{border:0;box-shadow:0 22px 44px -26px rgba(74,111,165,.55)}
.lvis-arrow{right:12px;bottom:11px;width:auto;height:auto;background:none;border:0;border-radius:0;color:var(--dv-blue-deep)}
.lcard:hover .lvis-arrow{background:none;color:var(--dv-blue)}
.lvis-arrow svg{width:15px;height:15px;stroke-width:2.4}
/* the mockups sit larger and are allowed to run past the tile */
.mini{font-size:10px;padding:9px 11px}
.mini-stack{width:112%;margin-left:-6%}
.chartbars{height:86px;max-width:196px}
.mcode{font-size:9.5px;padding:12px 13px;width:112%}
.tiers{max-width:188px;width:104%}
.pbars{padding:12px 13px;width:110%}
.gnum{padding:10px 17px}
.gnum .v{font-size:25px}

/* ---------- the track drifts right to left on its own ---------- */
.lrow{scroll-snap-type:none;scroll-behavior:auto}
.lcard{scroll-snap-align:none}

/* ---------- tighten the hero so the feature row clears the fold ----------
   Measured at 1920x1000: the row started at 1085px, a full screen down. These
   trims take ~150px out without anything reading as cramped. */
.hero{padding-top:calc(68px + clamp(24px,2.6vw,48px))}
.hero-mid{padding-bottom:clamp(24px,3vw,44px)}
.hero h1{font-size:clamp(32px,4.4vw,54px)}
.hero .lead{margin-top:var(--space-4)}
.hero-cta{margin-top:var(--space-6)}
.svc-tile{aspect-ratio:1.16;padding:16px 16px 76px}
.svc-desc{padding-top:14px}
/* the orbit has to come in with the shorter tile or the tokens clip */
.orbit{width:158px;height:158px;margin:-79px 0 0 -79px}
.pos-card{min-width:132px;max-width:144px;padding:9px 11px}
.pos-card .pnl{font-size:17px}
.pos-card .spark2{height:18px;margin-top:6px}
.ladder{max-width:200px}

/* one more pass on the fold: the row now peeks with room to spare */
.hero{padding-top:calc(68px + clamp(20px,2vw,34px))}
.hero-mid{padding-bottom:clamp(20px,2.4vw,30px)}
.svc-tile{aspect-ratio:1.24;padding:16px 16px 68px}
.orbit{width:150px;height:150px;margin:-75px 0 0 -75px}
.pos-card{min-width:126px;max-width:138px}
.pos-card .pnl{font-size:16px}
.ladder{max-width:194px}
.lad{height:14px}
.lad .bar{height:10px}
.lad.mid{height:20px}

/* ---------- give the row back some height, and the hero some air ---------- */
.hero{padding-top:calc(68px + clamp(28px,2.8vw,48px))}
.hero-mid{padding-bottom:clamp(26px,3vw,40px)}
.lpms{padding-top:clamp(12px,1.6vw,26px)}
.lpms > .wrap{max-width:1880px}
.lrow{grid-auto-columns:minmax(238px,1fr)}
.lvis{aspect-ratio:1.34;padding:18px}
.lcopy h3{font-size:17px}
.lcopy p{font-size:13px}
/* the mockups scale back up with the larger tiles */
.mini{font-size:10.5px;padding:10px 12px}
.mini + .mini{margin-top:5px}
.chartbars{height:100px;max-width:214px}
.mcode{font-size:10px;padding:13px 15px}
.tiers{max-width:206px;gap:6px}
.tier{padding:8px 12px;font-size:10.5px}
.pbars{padding:13px 15px;gap:10px}
.gnum{padding:12px 20px}
.gnum .v{font-size:28px}
.fbub{width:29px;height:29px}
.fbub svg{width:17px;height:12px}

/* ---------- the row at Xoala's own measurements ----------
   Their card visual is 380 x 220 (measured off ga-svc-card-visual). The track
   is wider than any viewport at that size, which is why it scrolls on the
   arrows rather than drifting on its own. */
.lrow{grid-auto-columns:380px;gap:20px;scroll-snap-type:x proximity;scroll-behavior:auto}
.lcard{scroll-snap-align:start}
.lvis{aspect-ratio:38/22;padding:20px;border-radius:18px}
.lvis-arrow{right:14px;bottom:13px}
.lvis-arrow svg{width:16px;height:16px}
.lcopy{padding:var(--space-5) 2px 0}
.lcopy h3{font-size:19px}
.lcopy p{font-size:14px;max-width:38ch}
@media(max-width:520px){.lrow{grid-auto-columns:min(380px,84vw)}}

/* mockups sized for a 380 x 220 tile */
.mini{font-size:11.5px;padding:11px 13px;border-radius:10px}
.mini + .mini{margin-top:6px}
.mini-stack{width:104%;margin-left:-2%}
.mrow{gap:9px}
.mico{width:20px;height:20px;font-size:9px}
.mt{font-size:12px} .ms{font-size:9px} .mv{font-size:12px}
.chartbars{height:124px;max-width:268px;gap:7px}
.ratepill{font-size:11.5px;padding:6px 14px}
.gnum{padding:14px 24px;border-radius:13px}
.gnum .v{font-size:33px} .gnum .k{font-size:9.5px}
.fbub{width:33px;height:33px}
.fbub svg{width:19px;height:14px}
.mcode{font-size:11px;padding:15px 17px;width:100%;max-width:300px;border-radius:11px}
.tiers{max-width:262px;gap:7px;width:100%}
.tier{padding:10px 14px;font-size:11.5px;border-radius:9px}
.tier .r{font-size:10px}
.pbars{padding:15px 17px;gap:11px;max-width:300px;border-radius:11px}
.pb .r{font-size:11px;margin-bottom:5px}
.pb .t{height:5px}
.clrd{font-size:10.5px;padding:5px 13px;bottom:30px}
.tag{font-size:10.5px;padding:5px 13px;bottom:26px}

/* ---------- the row becomes a full-width grid ----------
   Seven cards at 380px is 2 700px of track, which is why it had to scroll. Laid
   out across the page instead they wrap to four and three, and each card ends up
   wider than 380 on a desktop rather than narrower. Nothing left to scroll, so
   the arrows go with it. */
.lpms > .wrap{max-width:2160px}
.lrow{display:grid;grid-auto-flow:row;grid-template-columns:repeat(4,minmax(0,1fr));
  grid-auto-columns:auto;gap:var(--space-8) 20px;overflow:visible;scroll-snap-type:none}
.lcard{scroll-snap-align:none}
.lrow-head{display:none}
@media(max-width:1280px){.lrow{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:900px){.lrow{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:600px){.lrow{grid-template-columns:1fr}}

.seal{position:absolute;right:16px;top:14px;z-index:2;width:34px;height:34px;border-radius:50%;
  background:#fff;display:grid;place-items:center;font-size:15px;
  box-shadow:0 8px 18px -8px rgba(15,23,42,.4);border:1px solid rgba(15,23,42,.06)}
a.lvis-arrow{text-decoration:none}

/* ---------- hero type, set the way Xoala sets theirs ----------
   Their .hero-title is Poppins at weight 400, not 700: the size does the work and
   the weight stays out of the way. One emphasis only - picking out `futures` while
   the other three markets stayed white read as an accident, because it was. The
   four markets now share one treatment and the accent lands on what actually
   separates us. Breaks are explicit so the three lines fall on the commas. */
.hero h1{font-family:var(--font-display);font-weight:400;font-size:clamp(30px,5.2vw,58px);
  line-height:1.06;letter-spacing:-.03em;text-wrap:balance}
.hero h1 .accent{font-weight:600;background:none;-webkit-background-clip:border-box;background-clip:border-box;color:#93b8ff}
@media(max-width:760px){.hero h1 br{display:none}}
.hero .lead{max-width:60ch;font-size:clamp(15px,1.15vw,17.5px);line-height:1.6;text-wrap:balance}

/* Two things separate us and the headline should carry both: holding all four
   markets at once, and that the capital is simulated. The four markets take the
   accent as ONE span rather than four blue islands; the second point is carried
   by weight alone, so the two emphases do not compete for the same colour. */
.hero h1 .accent2{font-weight:600;color:#fff}

/* ================= card scenes =================
   One system, not four one-offs. Every scene is a single white panel that the
   tile CROPS on at least one edge, so it reads as a window into a working
   product rather than a sticker floating in the middle. Every panel shares one
   surface (radius, hairline, one shadow, one light direction) and every tile
   carries exactly one dark chip sitting over the panel's edge - the detail that
   makes this family of cards read as designed rather than assembled. */

.lvis{overflow:hidden;background:linear-gradient(168deg,#f8faff 0%,#eff4fd 52%,#e6edf9 100%);isolation:isolate}
.lvis::before{content:"";position:absolute;inset:0;z-index:0;
  background-image:radial-gradient(circle, rgba(74,111,165,.09) 1px, transparent 1px);background-size:20px 20px;
  -webkit-mask-image:radial-gradient(85% 80% at 50% 40%,#000,transparent 78%);mask-image:radial-gradient(85% 80% at 50% 40%,#000,transparent 78%)}
/* atmosphere, deliberately faint - it should not tint the panel it sits behind */
.lvis::after{content:"";position:absolute;inset:-25%;z-index:0;pointer-events:none;
  background:radial-gradient(closest-side, var(--tglow,rgba(74,111,165,.20)), transparent 72%);
  filter:blur(30px);animation:sc-drift 24s var(--ease-standard) infinite alternate}
@keyframes sc-drift{0%{transform:translate3d(-12%,-8%,0) scale(1)}100%{transform:translate3d(10%,10%,0) scale(1.16)}}
.lcard:nth-child(1) .lvis{--tglow:rgba(74,111,165,.22)}
.lcard:nth-child(2) .lvis{--tglow:rgba(0,182,122,.16)}
.lcard:nth-child(3) .lvis{--tglow:rgba(28,47,79,.16)}
.lcard:nth-child(4) .lvis{--tglow:rgba(37,84,212,.18)}

.scene{position:absolute;inset:0;z-index:1}
.lvis-arrow{z-index:4}

/* the shared surface */
.pan{position:absolute;background:#fff;border:1px solid rgba(15,23,42,.07);border-radius:13px;
  box-shadow:0 20px 44px -22px rgba(15,23,42,.38), 0 2px 6px -3px rgba(15,23,42,.10);overflow:hidden}
.pan-h{display:flex;align-items:center;gap:7px;padding:9px 13px;border-bottom:1px solid rgba(15,23,42,.06)}
.pan-h .lbl{font-size:8.5px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--ink-3)}
.pan-h .rt{margin-inline-start:auto;font-family:var(--font-mono);font-size:9px;color:var(--ink-4)}
.live{width:6px;height:6px;border-radius:50%;background:var(--dv-green);flex:none;
  box-shadow:0 0 0 0 rgba(0,182,122,.5);animation:pulse-live 2.4s ease-out infinite}

/* the one chip per tile */
.chip-fg{position:absolute;z-index:3;display:inline-flex;align-items:center;gap:6px;
  background:#0d1424;color:#fff;border-radius:var(--radius-pill);padding:6px 13px;
  font-family:var(--font-body);font-size:10.5px;font-weight:600;white-space:nowrap;
  box-shadow:0 12px 24px -10px rgba(7,12,22,.65)}
.chip-fg b{font-family:var(--font-mono);font-weight:600}
.chip-fg.ok{background:#0a7d57}
.chip-fg .ic{width:13px;height:13px;stroke:currentColor;fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}

/* ---------- 1. accounts dashboard, cropped on the right ---------- */
.pan-acc{left:6%;right:6%;top:8%;bottom:-15%}
.acc-r{display:flex;align-items:center;gap:9px;padding:0 13px;height:30px;border-bottom:1px solid rgba(15,23,42,.045)}
.acc-r:last-child{border-bottom:0}
.acc-b{width:17px;height:17px;border-radius:5px;flex:none;display:grid;place-items:center;font-size:8px;font-weight:700;color:#fff}
.acc-b.c{background:#4A6FA5} .acc-b.p{background:#b45309} .acc-b.y{background:#00b67a} .acc-b.f{background:#1b2a45}
.acc-n{font-size:10.5px;font-weight:600;color:var(--ink-1);letter-spacing:-.01em;min-width:82px}
.acc-n i{display:block;font-style:normal;font-family:var(--font-mono);font-size:8px;color:var(--ink-4);font-weight:400;margin-top:1px}
.acc-s{width:54px;height:16px;flex:none}
.acc-s path{fill:none;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;
  stroke-dasharray:80;stroke-dashoffset:0;animation:sc-draw 2.4s var(--ease-standard)}
.acc-r:nth-child(3) .acc-s path{animation-delay:.18s}
.acc-r:nth-child(4) .acc-s path{animation-delay:.36s}
.acc-r:nth-child(5) .acc-s path{animation-delay:.54s}
@keyframes sc-draw{from{stroke-dashoffset:80}to{stroke-dashoffset:0}}
.acc-v{margin-inline-start:auto;font-family:var(--font-mono);font-size:10.5px;font-weight:600;color:var(--ink-1);
  font-variant-numeric:tabular-nums}
.acc-d{font-family:var(--font-mono);font-size:8.5px;color:#0a7d57;min-width:34px;text-align:right}
.acc-d.flat{color:var(--ink-4)}
.chip-acc{left:9%;bottom:9%}

/* ---------- 2. price chart, cropped on the left and bottom ---------- */
.pan-feed{left:6%;right:6%;top:9%;bottom:-17%}
.feed-px{margin-inline-start:auto;font-family:var(--font-mono);font-size:12px;font-weight:600;color:#0a7d57;
  font-variant-numeric:tabular-nums}
.feed-tag{font-size:8px;font-weight:700;letter-spacing:.1em;color:var(--dv-blue-deep);
  background:rgba(74,111,165,.12);border-radius:4px;padding:2px 6px}
.feed-body{position:relative;padding:10px 12px 0}
.feed-body svg{width:100%;height:96px;display:block;overflow:visible}
.fg-line{stroke:rgba(15,23,42,.055);stroke-width:1}
.feed-body .fl{fill:none;stroke:#4A6FA5;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;
  stroke-dasharray:700;stroke-dashoffset:700;animation:fl-draw 10s linear infinite}
@keyframes fl-draw{0%{stroke-dashoffset:700}52%,86%{stroke-dashoffset:0}100%{stroke-dashoffset:-700}}
.fm{fill:#4A6FA5;r:3.6;animation:fm-beat 2.4s var(--ease-standard) infinite}
.fh{fill:none;stroke:rgba(74,111,165,.55);stroke-width:1.4;animation:fm-halo 2.4s var(--ease-standard) infinite}
@keyframes fm-beat{0%,100%{r:3.6}50%{r:4.8}}
@keyframes fm-halo{0%{r:3.6;opacity:.7}100%{r:15;opacity:0}}
.fy{font-family:var(--font-mono);font-size:8px;fill:rgba(15,23,42,.32)}
.chip-feed{left:10%;top:26%}

/* ---------- 3. the agreement, cropped at the bottom ---------- */
.pan-doc{left:9%;right:20%;top:7%;bottom:-16%;transform:rotate(-3.2deg);padding:15px 16px;
  animation:doc-breathe 12s var(--ease-standard) infinite}
@keyframes doc-breathe{0%,100%{transform:rotate(-3.2deg) translateY(0)}50%{transform:rotate(-1.6deg) translateY(-6px)}}
.doc-g{position:absolute;inset:0;z-index:0;opacity:.3}
.doc-g svg{width:100%;height:100%}
.doc-in{position:relative;z-index:1}
.doc-t{font-size:9px;font-weight:700;letter-spacing:.11em;text-transform:uppercase;color:var(--ink-2)}
.doc-sub{font-family:var(--font-mono);font-size:7.5px;color:var(--ink-4);margin-top:3px}
.doc-l{height:3.5px;border-radius:2px;background:rgba(15,23,42,.085);margin-top:7px}
.doc-sig{margin-top:10px;height:30px;width:100%}
.doc-sig path{fill:none;stroke:#1b2a45;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;
  stroke-dasharray:270;stroke-dashoffset:0;animation:sign 2.6s var(--ease-standard) .3s}
@keyframes sign{from{stroke-dashoffset:270}to{stroke-dashoffset:0}}
.doc-rule{height:1px;background:rgba(15,23,42,.16);margin-top:2px}
.doc-cap{display:flex;justify-content:space-between;margin-top:5px;
  font-size:7px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-4);font-weight:700}
.seal2{position:absolute;z-index:3;right:13%;bottom:13%;width:64px;height:64px;border-radius:50%;
  background:linear-gradient(150deg,#1b2a45,#33527d);display:grid;place-items:center;color:#fff;
  box-shadow:0 16px 30px -12px rgba(7,12,22,.7);border:2px solid rgba(255,255,255,.2);
  opacity:1;animation:stamp .8s var(--ease-emphasis) 2.4s}
.seal2::after{content:"";position:absolute;inset:6px;border-radius:50%;border:1px dashed rgba(255,255,255,.32)}
.seal2 svg{width:23px;height:23px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
@keyframes stamp{0%{transform:scale(.42) rotate(-24deg);opacity:0}
  62%{transform:scale(1.12) rotate(5deg);opacity:1}
  100%{transform:scale(1) rotate(0);opacity:1}}
.chip-doc{left:9%;bottom:9%;opacity:1;animation:chip-in .5s var(--ease-emphasis) 3s}
@keyframes chip-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* ---------- 4. the ledger, cropped at the bottom ---------- */
.pan-lg{left:7%;right:7%;top:8%;bottom:-17%}
.lg-vp{height:112px;overflow:hidden;
  -webkit-mask-image:linear-gradient(180deg,transparent,#000 12%,#000 70%,transparent);
  mask-image:linear-gradient(180deg,transparent,#000 12%,#000 70%,transparent)}
.lg-tr{animation:lg-roll 16s linear infinite}
@keyframes lg-roll{from{transform:translateY(0)}to{transform:translateY(-50%)}}
.lg-r{display:flex;align-items:center;gap:8px;padding:0 13px;height:28px;font-family:var(--font-mono);font-size:9.5px;
  border-bottom:1px solid rgba(15,23,42,.045)}
.lg-r .id{color:var(--ink-4);font-size:8.5px;min-width:78px}
.lg-r .m{font-family:var(--font-body);font-size:8.5px;font-weight:600;color:var(--ink-3);
  background:rgba(15,23,42,.05);border-radius:4px;padding:1px 6px}
.lg-r .amt{margin-inline-start:auto;font-weight:600;color:#0a7d57;font-variant-numeric:tabular-nums}
.lg-r .hrs{color:var(--ink-4);font-size:8.5px;min-width:30px;text-align:right}
.chip-lg{right:10%;bottom:12%}

@media(prefers-reduced-motion:reduce){
  .lvis::after,.acc-s path,.fl,.fm,.fh,.doc-sig path,.pan-doc,.seal2,.chip-doc,.lg-tr,.live{animation:none}
  .acc-s path,.fl,.doc-sig path{stroke-dashoffset:0}
  .pan-doc{transform:rotate(-3.2deg)} .seal2,.chip-doc{opacity:1;transform:none}
}

/* ================= scenes, second pass =================
   Each of the three gains a real second layer and real content. A single flat
   panel is what made them read as mock-ups; depth plus figures that mean
   something is what makes them read as software. */

/* ---------- 2. price feed ---------- */
.pan-feed{left:6%;right:6%;top:6%;bottom:-21%}
.tfs{display:flex;gap:3px;margin-inline-start:2px}
.tf{font-family:var(--font-mono);font-size:8px;font-weight:600;color:var(--ink-4);
  border-radius:4px;padding:2px 5px;line-height:1.3}
.tf.on{background:rgba(74,111,165,.13);color:var(--dv-blue-deep)}
.feed-body{position:relative;padding:9px 40px 0 12px}
.feed-body svg.ch{width:100%;height:84px;display:block;overflow:visible}
.feed-ax{position:absolute;right:9px;top:9px;bottom:34px;width:30px;display:flex;flex-direction:column;
  justify-content:space-between;align-items:flex-end;font-family:var(--font-mono);font-size:7.5px;color:rgba(15,23,42,.3)}
.px-tag{position:absolute;right:4px;top:12px;background:#4A6FA5;color:#fff;border-radius:4px;
  padding:2px 5px;font-family:var(--font-mono);font-size:8px;font-weight:600;
  box-shadow:0 4px 10px -4px rgba(74,111,165,.8)}
.px-tag::before{content:"";position:absolute;left:-4px;top:50%;margin-top:-3px;
  border:3px solid transparent;border-right-color:#4A6FA5}
.vol{display:flex;align-items:flex-end;gap:2px;height:20px;margin:6px 40px 0 12px}
.vol i{flex:1;border-radius:1px;background:rgba(74,111,165,.22)}
.vol i.up{background:rgba(0,182,122,.34)}
.feed-foot{display:flex;gap:0;border-top:1px solid rgba(15,23,42,.06);margin-top:9px}
.feed-foot div{flex:1;padding:7px 10px;font-family:var(--font-mono);font-size:9px;
  display:flex;justify-content:space-between;border-right:1px solid rgba(15,23,42,.05)}
.feed-foot div:last-child{border-right:0}
.feed-foot .k{font-family:var(--font-body);font-size:7.5px;font-weight:700;letter-spacing:.09em;
  text-transform:uppercase;color:var(--ink-4)}
.feed-foot b{font-weight:600;color:var(--ink-1)}
.feed-foot .bid b{color:#0a7d57} .feed-foot .ask b{color:#b91c1c}

/* ---------- 3. the agreement ---------- */
.pan-doc{left:9%;right:17%;top:9%;bottom:-19%;padding:0}
.sheet-back{position:absolute;left:14%;right:12%;top:5%;bottom:-16%;background:#fff;border-radius:13px;
  border:1px solid rgba(15,23,42,.06);box-shadow:0 12px 26px -18px rgba(15,23,42,.4);
  transform:rotate(2.6deg);z-index:0}
.doc-top{display:flex;align-items:center;gap:7px;padding:10px 14px;border-bottom:1px solid rgba(15,23,42,.07);position:relative;z-index:1}
.doc-mk{width:16px;height:16px;border-radius:4px;background:linear-gradient(140deg,#33527d,#1b2a45);flex:none}
.doc-t{font-size:8.5px;font-weight:700;letter-spacing:.11em;text-transform:uppercase;color:var(--ink-2)}
.doc-v{margin-inline-start:auto;font-family:var(--font-mono);font-size:8px;color:var(--ink-4)}
.doc-body{padding:9px 14px 0;position:relative;z-index:1}
.cl{display:flex;align-items:center;gap:7px;font-size:9px;padding:3.5px 0}
.cl .n{font-family:var(--font-mono);font-size:7.5px;color:var(--ink-4);min-width:12px}
.cl .t{color:var(--ink-2)}
.cl .v{margin-inline-start:auto;font-family:var(--font-mono);font-size:9px;font-weight:600;color:var(--ink-1)}
.cl .tk{width:11px;height:11px;border-radius:50%;background:rgba(0,182,122,.14);display:grid;place-items:center;flex:none}
.cl .tk svg{width:7px;height:7px;stroke:#0a7d57;fill:none;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.doc-sigwrap{padding:0 14px 11px;position:relative;z-index:1}
.doc-sig{margin-top:5px;height:26px;width:66%}
.doc-cap{display:flex;justify-content:space-between;margin-top:4px;
  font-size:6.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-4);font-weight:700}
.doc-hash{margin-top:7px;padding-top:6px;border-top:1px solid rgba(15,23,42,.06);
  font-family:var(--font-mono);font-size:7px;color:rgba(15,23,42,.34);letter-spacing:.02em}
.seal2{right:5%;bottom:15%;width:58px;height:58px}
.seal2 svg{width:20px;height:20px}

/* ---------- 4. payouts ---------- */
.pan-lg{left:6%;right:6%;top:6%;bottom:-23%}
.lg-vp{height:96px}
.lg-r{height:26px}
.pan-st{position:absolute;left:8%;right:9%;bottom:6%;z-index:3;padding:10px 12px}
.st-h{display:flex;align-items:center;gap:6px;font-family:var(--font-mono);font-size:8.5px;color:var(--ink-4)}
.st-h b{font-family:var(--font-body);font-size:9.5px;font-weight:700;color:var(--ink-1);letter-spacing:-.01em}
.st-h .amt{margin-inline-start:auto;font-family:var(--font-mono);font-size:11px;font-weight:600;color:#0a7d57}
.steps3{display:flex;align-items:center;gap:0;margin-top:9px}
.stp{display:flex;align-items:center;flex:1}
.stp:last-child{flex:none}
.stp .d{width:9px;height:9px;border-radius:50%;background:#0a7d57;flex:none;position:relative}
.stp .d::after{content:"";position:absolute;inset:2.5px;border-radius:50%;background:#fff}
.stp .ln{height:2px;flex:1;background:rgba(0,182,122,.3);border-radius:1px;position:relative;overflow:hidden}
.stp .ln::after{content:"";position:absolute;inset:0;background:#0a7d57;transform-origin:left;
  animation:ln-fill 2.2s var(--ease-standard) both}
.stp:nth-child(2) .ln::after{animation-delay:.5s}
@keyframes ln-fill{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.stp-l{display:flex;justify-content:space-between;margin-top:6px;
  font-size:7px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-4);font-weight:700}
.chip-lg{right:7%;bottom:29%}

@media(prefers-reduced-motion:reduce){ .stp .ln::after{animation:none;transform:none} }

/* ================= 3. the agreement, built like the real one =================
   Mirrors app.dolvero.com/agreement: letterhead with the wordmark and the
   agreement number, the fixed-rules heading, the meta strip, and a signature
   block where Dolvero signs first and the trader second - carrying the real
   countersignature and the Dolvero Security Mark. */
.pan-doc{left:6%;right:6%;top:5%;bottom:-30%;padding:0}
.sheet-back{position:absolute;left:11%;right:9%;top:2%;bottom:-24%;background:#fff;border-radius:13px;
  border:1px solid rgba(15,23,42,.06);box-shadow:0 12px 26px -18px rgba(15,23,42,.4);
  transform:rotate(1.8deg);z-index:0}
.ra-lh{display:flex;align-items:flex-start;gap:10px;padding:11px 14px 9px;border-bottom:1px solid rgba(15,23,42,.08)}
.ra-lh img{height:15px;width:auto;flex:none;margin-top:1px}
.ra-lh .r{margin-inline-start:auto;text-align:right;font-family:var(--font-mono);font-size:7px;
  color:var(--ink-4);line-height:1.5}
.ra-lh .r b{color:var(--ink-2);font-size:7.5px}
.ra-h1{padding:9px 14px 0;font-family:var(--font-display);font-weight:600;font-size:10px;
  line-height:1.3;letter-spacing:-.01em;color:var(--ink-1);max-width:30ch}
.ra-meta{display:flex;margin:9px 14px 0;border:1px solid rgba(15,23,42,.09);border-radius:7px;overflow:hidden}
.ra-meta div{flex:1;padding:6px 8px;border-right:1px solid rgba(15,23,42,.07)}
.ra-meta div:last-child{border-right:0}
.ra-meta .k{font-size:6px;font-weight:700;letter-spacing:.11em;text-transform:uppercase;color:var(--ink-4)}
.ra-meta .v{font-family:var(--font-mono);font-size:8px;color:var(--ink-1);margin-top:2px;font-weight:600}
.ra-cl{padding:8px 14px 0}
.ra-cl .cl{padding:2.5px 0}

/* the signature block floats in front, the way it is the part that matters */
.pan-sig{position:absolute;left:11%;right:6%;bottom:11%;z-index:3;padding:10px 12px 9px}
.sig-row{display:flex;gap:12px}
.sig-c{flex:1;min-width:0}
.sig-k{font-size:6.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-4)}
.sig-pad{height:30px;position:relative;overflow:hidden;margin-top:2px}
.sig-pad img{position:absolute;left:0;bottom:2px;width:100%;height:auto;max-height:24px;object-fit:contain;object-position:left bottom}
.sig-pad svg{position:absolute;left:0;bottom:1px;width:86%;height:24px}
.sig-pad svg path{fill:none;stroke:#2b3a52;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;
  stroke-dasharray:190;stroke-dashoffset:0;animation:sign 2.4s var(--ease-standard) .5s}
@keyframes sign{from{stroke-dashoffset:190}to{stroke-dashoffset:0}}
.sig-ln{border-top:1px solid rgba(15,23,42,.2);margin-top:1px}
.sig-w{font-size:7.5px;font-weight:600;color:var(--ink-1);margin-top:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sig-t{font-size:6.5px;color:var(--ink-4);margin-top:1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dsm{display:flex;align-items:center;gap:6px;margin-top:8px;padding-top:7px;border-top:1px solid rgba(15,23,42,.07)}
.dsm .t{font-size:6.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-4)}
.dsm .id{margin-inline-start:auto;font-family:var(--font-mono);font-size:8px;font-weight:600;color:var(--dv-blue-deep);
  background:rgba(74,111,165,.1);border-radius:4px;padding:2px 6px}
.seal2{right:2%;bottom:47%;width:50px;height:50px}
.seal2 svg{width:18px;height:18px}
.chip-doc{left:7%;bottom:1%}

.pan-mk{width:13px;height:13px;object-fit:contain;flex:none;opacity:.9}

/* ---------- panels size to their content ----------
   Pinning both top and bottom stretched every panel to the tile and left a
   white void under the content - worst on the ledger, where 130px of rows was
   sitting in a 296px box. The panels are content-height now; where one ends
   short, what shows below is the tile's own ground, not empty panel. */
.pan-acc{left:6%;right:6%;top:7%;bottom:auto}
.acc-r{height:34px}
.pan-feed{left:6%;right:6%;top:7%;bottom:auto}
.feed-body svg.ch{height:126px}
.feed-ax{bottom:auto;height:126px;top:16px}
.vol{height:26px}
.pan-lg{left:6%;right:6%;top:7%;bottom:auto}
.lg-vp{height:132px}
.lg-r{height:30px}
.pan-doc{left:6%;right:6%;top:5%;bottom:auto}
.sheet-back{left:11%;right:9%;top:2%;bottom:auto;height:62%}
.chip-acc{left:9%;bottom:auto;top:76%}
.chip-lg{right:7%;bottom:auto;top:50%}

/* ---------- the orbit, matched to Xoala's own ----------
   Theirs is not a loop. `ga-stats-semi` runs the angle 0deg -> 180deg over 18s,
   so a disc sweeps from the far right, over the top, to the far left and starts
   again; ten discs offset by 1.8s keep the arc populated. The centre sits near
   the BOTTOM of the box (top: calc(100% - 50px)), rx 650 / ry 210, and the
   discs never change size - two masks composited together do all the fading,
   including a dip through the middle so nothing crosses the stat box. */
.gflags{position:absolute;z-index:-1;left:50%;top:0;width:1400px;height:290px;margin:0 0 0 -700px;
  pointer-events:none;
  -webkit-mask-image:linear-gradient(to right, #000 0%, #000 20%, rgba(0,0,0,.85) 26%, rgba(0,0,0,.6) 32%, rgba(0,0,0,.3) 38%, rgba(0,0,0,.1) 43%, rgba(0,0,0,.1) 57%, rgba(0,0,0,.3) 62%, rgba(0,0,0,.6) 68%, rgba(0,0,0,.85) 74%, #000 80%, #000 100%),linear-gradient(to bottom, #000 0%, #000 35%, rgba(0,0,0,.9) 50%, rgba(0,0,0,.65) 65%, rgba(0,0,0,.35) 75%, rgba(0,0,0,.1) 83%, rgba(0,0,0,.02) 90%, rgba(0,0,0,0) 100%);mask-image:linear-gradient(to right, #000 0%, #000 20%, rgba(0,0,0,.85) 26%, rgba(0,0,0,.6) 32%, rgba(0,0,0,.3) 38%, rgba(0,0,0,.1) 43%, rgba(0,0,0,.1) 57%, rgba(0,0,0,.3) 62%, rgba(0,0,0,.6) 68%, rgba(0,0,0,.85) 74%, #000 80%, #000 100%),linear-gradient(to bottom, #000 0%, #000 35%, rgba(0,0,0,.9) 50%, rgba(0,0,0,.65) 65%, rgba(0,0,0,.35) 75%, rgba(0,0,0,.1) 83%, rgba(0,0,0,.02) 90%, rgba(0,0,0,0) 100%);
  -webkit-mask-composite:source-in;mask-composite:intersect}
.gflag{position:absolute;left:50%;top:calc(100% - 50px);width:48px;height:48px;margin:-24px 0 0 -24px;
  border-radius:50%;overflow:hidden;background:#fff;
  border:1.5px solid rgba(74,111,165,.16);
  box-shadow:0 0 0 4px rgba(255,255,255,.92), 0 10px 22px rgba(37,84,212,.16), 0 0 20px rgba(74,111,165,.18);
  will-change:transform}
.gflag svg{display:block;width:100%;height:100%}
@media(max-width:1500px){.gflags{transform:scale(.78);transform-origin:50% 50%}}
@media(max-width:1180px){.gflags{display:none}}

.venues{border-bottom:1px solid var(--line-2);padding:var(--space-9) 0}
.venues-lbl{text-align:center;font-size:11.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-4);margin-bottom:var(--space-7)}
.venues-in{display:flex;align-items:flex-start;gap:clamp(24px,5vw,72px);flex-wrap:wrap;justify-content:center}
.venue{display:flex;flex-direction:column;align-items:center;gap:7px;opacity:.62;
  transition:opacity var(--dur-quick)}
.venue:hover{opacity:1}
.venue .vn{font-family:var(--font-display);font-weight:600;font-size:clamp(16px,1.5vw,20px);
  letter-spacing:-.02em;color:var(--ink-1);line-height:1}
.venue .vlogo{height:clamp(17px,1.6vw,21px);width:auto;display:block}
.venue small{font-family:var(--font-body);font-weight:500;font-size:11px;letter-spacing:.07em;
  text-transform:uppercase;color:var(--ink-4)}

.venues-in{gap:clamp(20px,3.4vw,54px) clamp(24px,4vw,58px)}
.venue.is-soon{opacity:.42}
.venue.is-soon:hover{opacity:.72}
.venue.is-soon .vn{color:var(--ink-2)}
.vsoon{font-family:var(--font-body);font-weight:700;font-size:9px;letter-spacing:.11em;text-transform:uppercase;
  color:var(--dv-blue-deep);background:rgba(74,111,165,.12);border:1px solid rgba(74,111,165,.2);
  border-radius:var(--radius-pill);padding:2px 9px}
.venue .vlogo[src$="fulllogo-dark.png"]{height:clamp(15px,1.4vw,18px)}

.venue{min-height:52px;justify-content:flex-start}
.venue .vlogo{width:auto;display:block;object-fit:contain}
.venue .vl-dv{height:clamp(19px,1.8vw,24px)}
.venue .vl-by{height:clamp(26px,2.4vw,32px)}

/* brand marks sit at one optical weight; the two that ship only a symbol get
   their name set beside it so the row stays readable */
.venue .vl-mt5{height:clamp(19px,1.8vw,24px)}
.venue .vl-tl{height:clamp(17px,1.6vw,22px)}
.vmark{display:flex;align-items:center;gap:8px}
.vmark img{height:clamp(19px,1.8vw,23px);width:auto;display:block}

/* live platforms carry their own colour with no hover needed; only the ones we
   have not shipped yet are held back, in grey, so the row says at a glance
   which is which */
.venue{opacity:1}
.venue:hover{opacity:1}
.venue.is-soon{opacity:.55;filter:grayscale(1)}
.venue.is-soon:hover{opacity:.85;filter:grayscale(.4)}
.venue.is-soon .vn{color:var(--ink-3)}

/* ================= funding routes, on Xoala's crypto-services layout =================
   Their .crypto-flat: a two-column head (pill + two-line title | lede + CTA), a
   masked marquee of ticked benefits, then a 4x2 grid whose areas make one 2x2
   hero tile and four small ones - the five windows. Ground is our Edge aurora
   rather than their flat purple. */
.cflat{position:relative;padding:clamp(48px,6vw,96px) 0 clamp(56px,7vw,104px);
  color:#fff;overflow:hidden;isolation:isolate;border-radius:var(--section-radius)}
.cflat .cbg{position:absolute;inset:0;z-index:0;overflow:hidden;
  background:radial-gradient(120% 90% at 50% 8%, #101c31 0%, #0b1221 42%, #070b13 78%)}
.cflat .cbg .blob{position:absolute;border-radius:50%;mix-blend-mode:screen;will-change:transform}
.cflat .cbg .b1{width:64vmax;height:64vmax;left:-16%;top:-22%;background:radial-gradient(circle at 36% 36%, rgba(37,84,212,.52) 0%, rgba(37,84,212,.18) 42%, transparent 68%);animation:driftA 52s ease-in-out infinite}
.cflat .cbg .b2{width:54vmax;height:54vmax;right:-14%;top:2%;background:radial-gradient(circle at 60% 40%, rgba(79,125,240,.4) 0%, rgba(79,125,240,.12) 44%, transparent 70%);animation:driftB 64s ease-in-out infinite}
.cflat .cbg .b3{width:50vmax;height:50vmax;left:18%;bottom:-26%;background:radial-gradient(circle at 50% 50%, rgba(147,184,255,.22) 0%, rgba(74,111,165,.1) 46%, transparent 72%);animation:driftC 46s ease-in-out infinite}
.cflat .cbg .cgrid{position:absolute;inset:0;background-image:radial-gradient(circle, rgba(255,255,255,.05) 1px, transparent 1px);background-size:22px 22px;
  -webkit-mask-image:radial-gradient(115% 85% at 50% 45%,#000 35%,transparent 78%);mask-image:radial-gradient(115% 85% at 50% 45%,#000 35%,transparent 78%)}
.cflat .cbg .cscrim{position:absolute;inset:0;background:radial-gradient(60% 48% at 50% 46%, rgba(3,6,12,.66) 0%, rgba(3,6,12,.34) 48%, transparent 78%)}
.cflat .cbg .cvig{position:absolute;inset:0;background:radial-gradient(108% 78% at 50% 45%, transparent 40%, rgba(4,7,13,.72) 100%)}
.cflat-inner{position:relative;z-index:1}

.cflat-head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(28px,5vw,80px);
  align-items:end;margin:0 0 clamp(26px,3vw,36px)}
@media(max-width:900px){.cflat-head{grid-template-columns:1fr;gap:var(--space-7);align-items:flex-start}}
.cflat-left{display:flex;flex-direction:column;align-items:flex-start;gap:clamp(18px,2.4vw,28px)}
.cflat-right{display:flex;flex-direction:column;align-items:flex-start;gap:var(--space-6)}
.cflat-pill{display:inline-flex;font-size:12px;font-weight:600;color:rgba(255,255,255,.8);
  background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.16);border-radius:var(--radius-pill);padding:6px 15px;
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.cflat h2{color:#fff;font-weight:400;font-size:clamp(28px,3.8vw,46px);line-height:1.08;letter-spacing:-.03em}
.cflat h2 b{font-weight:600}
.cflat-lede{color:rgba(255,255,255,.74);font-size:clamp(15px,1.1vw,17px);line-height:1.6;max-width:56ch}

/* the ticked benefits marquee */
.cflat-benefits{position:relative;margin:0 0 clamp(26px,3vw,40px);overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.cfb-track{display:flex;width:max-content;gap:var(--space-7);animation:cfb-run 42s linear infinite}
.cflat-benefits:hover .cfb-track{animation-play-state:paused}
@keyframes cfb-run{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}}
.cfb-item{display:inline-flex;align-items:center;gap:9px;white-space:nowrap;
  font-size:14px;font-weight:500;color:rgba(255,255,255,.74)}
.cfb-tick{width:18px;height:18px;border-radius:50%;background:rgba(0,182,122,.18);display:grid;place-items:center;flex:none}
.cfb-tick svg{width:10px;height:10px;stroke:#5ee0b0;fill:none;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}

/* the five windows */
.cflat-grid{display:grid;grid-template-columns:repeat(4,1fr);grid-template-rows:1fr 1fr;gap:var(--space-5);
  grid-template-areas:"hero hero a b" "hero hero c d"}
@media(max-width:1080px){.cflat-grid{grid-template-columns:repeat(2,1fr);grid-template-rows:auto;
  grid-template-areas:"hero hero" "a b" "c d"}}
@media(max-width:620px){.cflat-grid{grid-template-columns:1fr;grid-template-areas:"hero" "a" "b" "c" "d"}}
.cf-tile{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.12);border-radius:var(--radius-xl);
  padding:var(--space-5);display:flex;flex-direction:column;gap:var(--space-4);min-height:0;
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  transition:border-color var(--dur-base),background var(--dur-base),transform var(--dur-base) var(--ease-emphasis)}
.cf-tile:hover{border-color:rgba(147,184,255,.42);background:rgba(255,255,255,.08);transform:translateY(-3px)}
.cf-tile--hero{grid-area:hero;padding:var(--space-7)}
.cf-a{grid-area:a} .cf-b{grid-area:b} .cf-c{grid-area:c} .cf-d{grid-area:d}
.cf-k{font-size:10.5px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:#93b8ff}
.cf-t{font-family:var(--font-display);font-weight:600;letter-spacing:-.015em;font-size:17px;color:#fff}
.cf-tile--hero .cf-t{font-size:clamp(20px,2vw,26px)}
.cf-d2{font-size:13.5px;line-height:1.55;color:rgba(255,255,255,.68)}
.cf-tile--hero .cf-d2{font-size:15px;max-width:44ch}
.cf-big{font-family:var(--font-mono);font-size:clamp(22px,2.4vw,30px);font-weight:600;color:#fff;letter-spacing:-.02em}
.cf-foot{margin-top:auto;display:flex;align-items:center;gap:8px;font-family:var(--font-mono);font-size:11.5px;
  color:rgba(255,255,255,.5)}

/* the hero tile's phase mock */
.ph{display:grid;gap:12px;margin-top:auto}
.ph-r .l{display:flex;justify-content:space-between;font-size:12px;color:rgba(255,255,255,.74);margin-bottom:6px}
.ph-r .l b{font-family:var(--font-mono);color:#fff;font-weight:600}
.ph-r .t{height:6px;border-radius:3px;background:rgba(255,255,255,.12);overflow:hidden}
.ph-r .t span{display:block;height:100%;border-radius:3px;background:linear-gradient(90deg,#4f7df0,#93b8ff);
  transform-origin:left;animation:ph-fill 1.8s var(--ease-standard) both}
.ph-r.done .t span{background:linear-gradient(90deg,#0a7d57,#5ee0b0)}
.ph-r:nth-child(2) .t span{animation-delay:.45s}
@keyframes ph-fill{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.ph-chip{display:inline-flex;align-items:center;gap:6px;font-size:10.5px;font-weight:700;letter-spacing:.06em;
  background:rgba(0,182,122,.16);color:#5ee0b0;border-radius:var(--radius-pill);padding:3px 10px}
@media(prefers-reduced-motion:reduce){.cfb-track,.ph-r .t span,.cflat .cbg .blob{animation:none}.ph-r .t span{transform:none}}

/* the routes ground is the hero's, shader and all - one canvas per section,
   booted by the same script */
.cflat .cbg{position:absolute;inset:0;z-index:0;overflow:hidden;
  background:radial-gradient(120% 90% at 50% 8%, #101c31 0%, #0b1221 42%, #070b13 78%)}
.cflat .bg__canvas{position:absolute;inset:0;width:100%;height:100%;display:block;opacity:0;transition:opacity 1.1s ease}
.cflat .bg__canvas.is-live{opacity:1}
body.gl-on .cflat .bg__aurora{display:none}
.cflat .bg__aurora{position:absolute;inset:-25%;filter:blur(90px);opacity:.92}
.cflat .blob{position:absolute;border-radius:50%;mix-blend-mode:screen;will-change:transform}
.cflat .blob--a{width:64vmax;height:64vmax;left:-16%;top:-22%;background:radial-gradient(circle at 36% 36%, rgba(37,84,212,.7) 0%, rgba(37,84,212,.24) 42%, transparent 68%);animation:driftA 52s ease-in-out infinite}
.cflat .blob--b{width:54vmax;height:54vmax;right:-14%;top:2%;background:radial-gradient(circle at 60% 40%, rgba(79,125,240,.55) 0%, rgba(79,125,240,.16) 44%, transparent 70%);animation:driftB 64s ease-in-out infinite}
.cflat .blob--c{width:50vmax;height:50vmax;left:18%;bottom:-26%;background:radial-gradient(circle at 50% 50%, rgba(147,184,255,.3) 0%, rgba(74,111,165,.12) 46%, transparent 72%);animation:driftC 46s ease-in-out infinite}
.cflat .blob--d{width:38vmax;height:38vmax;left:44%;top:26%;background:radial-gradient(circle at 50% 50%, rgba(28,47,79,.8) 0%, rgba(28,47,79,.26) 50%, transparent 74%);animation:driftD 58s ease-in-out infinite}
.cflat .bg__grid{position:absolute;inset:0;background-image:radial-gradient(circle, rgba(255,255,255,.05) 1px, transparent 1px);background-size:22px 22px;
  -webkit-mask-image:radial-gradient(115% 85% at 50% 45%,#000 35%,transparent 78%);mask-image:radial-gradient(115% 85% at 50% 45%,#000 35%,transparent 78%)}

/* ================= the five windows, on Xoala's anatomy =================
   Card = dark visual panel (electric-blue glow, mock cropped by its edges,
   arrow bitten out of the bottom-right corner) with the title and copy BELOW
   it, not a flat glass rectangle with text in the middle. */
.cf-tile{background:none;border:1px solid rgba(255,255,255,.12);border-radius:20px;
  padding:10px 10px 20px;gap:0;-webkit-backdrop-filter:none;backdrop-filter:none;
  display:flex;flex-direction:column}
.cf-tile:hover{background:rgba(255,255,255,.04);border-color:rgba(147,184,255,.4);transform:translateY(-3px)}
.cf-tile--hero{padding:10px 10px 22px}

.cfv{position:relative;flex:1 1 auto;min-height:150px;border-radius:14px;overflow:hidden;
  background:radial-gradient(88% 78% at 26% 12%, rgba(37,84,212,.95) 0%, rgba(17,28,52,.97) 56%, #070b13 100%);
  display:grid;place-items:center;padding:18px}
.cf-tile--hero .cfv{min-height:260px}
.cfv::before{content:"";position:absolute;inset:0;
  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:28px 28px;transform:rotate(-8deg) scale(1.5);pointer-events:none}
/* the arrow is bitten out of the panel's corner, as theirs is */
.cfv-arw{position:absolute;right:0;bottom:0;z-index:3;width:38px;height:38px;border-radius:14px 0 0 0;
  background:var(--cf-card,#0a1020);display:grid;place-items:center;color:#7fa6ff;
  transition:color var(--dur-quick),background var(--dur-quick)}
.cf-tile:hover .cfv-arw{color:#fff}
.cfv-arw svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:2.1;stroke-linecap:round;stroke-linejoin:round}
.cfv-arw::before,.cfv-arw::after{content:"";position:absolute;width:12px;height:12px;background:var(--cf-card,#0a1020)}
.cfv-arw::before{right:38px;bottom:0;-webkit-mask:radial-gradient(circle at 0 0,transparent 12px,#000 12.5px);mask:radial-gradient(circle at 0 0,transparent 12px,#000 12.5px)}
.cfv-arw::after{right:0;bottom:38px;-webkit-mask:radial-gradient(circle at 0 0,transparent 12px,#000 12.5px);mask:radial-gradient(circle at 0 0,transparent 12px,#000 12.5px)}

.cf-copy{padding:var(--space-5) 8px 0}
.cf-t{font-family:var(--font-display);font-weight:600;letter-spacing:-.015em;font-size:18px;color:#fff;line-height:1.25}
.cf-tile--hero .cf-t{font-size:clamp(20px,1.9vw,24px)}
.cf-d2{font-size:13.5px;line-height:1.55;color:rgba(255,255,255,.6);margin-top:7px;max-width:40ch}

/* --- hero: the moment the evaluation clears --- */
.cfm{position:relative;z-index:1;width:100%;text-align:center;color:#fff}
.cfm-tick{width:74px;height:74px;margin:0 auto 18px;display:block}
.cfm-tick path{fill:none;stroke:#fff;stroke-width:9;stroke-linecap:round;stroke-linejoin:round;
  stroke-dasharray:60;stroke-dashoffset:0;animation:tick-draw 1.4s var(--ease-emphasis) .3s}
@keyframes tick-draw{from{stroke-dashoffset:60}to{stroke-dashoffset:0}}
.cfm-l1{font-size:15px;color:rgba(255,255,255,.66)}
.cfm-l2{font-family:var(--font-display);font-size:clamp(24px,2.6vw,32px);font-weight:600;letter-spacing:-.02em;margin-top:4px}
.cfm-l3{font-size:15px;color:rgba(255,255,255,.66);margin-top:4px}
.cfm-l3 b{color:#fff;font-weight:600}

/* --- one step: a single target ring --- */
.ring{position:relative;z-index:1;width:116px;height:116px}
.ring svg{transform:rotate(-90deg)}
.ring .tr{fill:none;stroke:rgba(255,255,255,.14);stroke-width:9}
.ring .va{fill:none;stroke:#7fa6ff;stroke-width:9;stroke-linecap:round;
  stroke-dasharray:314;stroke-dashoffset:50;animation:ring-go 1.8s var(--ease-standard) .3s}
@keyframes ring-go{from{stroke-dashoffset:314}to{stroke-dashoffset:50}}
.ring .mid{position:absolute;inset:0;display:grid;place-items:center;text-align:center}
.ring .mid b{font-family:var(--font-mono);font-size:20px;color:#fff;font-weight:600;display:block}
.ring .mid span{font-size:9px;letter-spacing:.11em;text-transform:uppercase;color:rgba(255,255,255,.5);font-weight:700}

/* --- instant: the checkout that ends in a live account --- */
.pay{position:relative;z-index:1;background:#fff;border-radius:12px;padding:14px 15px;width:100%;max-width:210px;
  box-shadow:0 18px 34px -16px rgba(0,0,0,.7);text-align:center}
.pay .ok{width:30px;height:30px;border-radius:50%;background:rgba(0,182,122,.16);display:grid;place-items:center;margin:0 auto 9px}
.pay .ok svg{width:15px;height:15px;stroke:#0a7d57;fill:none;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.pay .t{font-size:12.5px;font-weight:600;color:var(--ink-1)}
.pay .s{font-family:var(--font-mono);font-size:11px;color:var(--ink-3);margin-top:4px}
.pay .n{font-size:9.5px;color:var(--ink-4);margin-top:7px}

/* --- sizes: a stack of account chips, cropped like their wallet stack --- */
.stack{position:relative;z-index:1;width:100%;max-width:210px;margin-bottom:-26px}
.stack .s{display:flex;align-items:center;gap:9px;border-radius:10px;padding:9px 12px;margin-bottom:7px;
  font-family:var(--font-mono);font-size:11.5px;color:rgba(255,255,255,.72);
  background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14)}
.stack .s.on{background:linear-gradient(180deg,#4f7df0,#2554d4);border-color:rgba(255,255,255,.22);color:#fff;
  box-shadow:0 12px 24px -10px rgba(37,84,212,.8)}
.stack .s b{margin-inline-start:auto;font-weight:600}

/* --- split: three bars --- */
.splits{position:relative;z-index:1;width:100%;max-width:200px;display:grid;gap:11px}
.sp .l{display:flex;justify-content:space-between;font-size:11px;color:rgba(255,255,255,.66);margin-bottom:5px}
.sp .l b{font-family:var(--font-mono);color:#fff;font-weight:600}
.sp .t{height:6px;border-radius:3px;background:rgba(255,255,255,.13);overflow:hidden}
.sp .t span{display:block;height:100%;border-radius:3px;background:linear-gradient(90deg,#4f7df0,#93b8ff);
  transform-origin:left;animation:ph-fill 1.6s var(--ease-standard) both}
.sp:nth-child(2) .t span{animation-delay:.2s}
.sp:nth-child(3) .t span{animation-delay:.4s;background:linear-gradient(90deg,#0a7d57,#5ee0b0)}
@media(prefers-reduced-motion:reduce){.cfm-tick path,.ring .va,.sp .t span{animation:none}}

/* ================= tiles, second pass =================
   Everything loops now. Xoala's mocks never sit still - the convert card types
   its digits, the checkout lands, the wallet stack shuffles - so these do too,
   on long cycles that read as a product working rather than a banner blinking. */

/* --- hero: the evaluation clearing, on a loop --- */
.cfm{animation:cfm-cycle 11s var(--ease-standard) infinite}
@keyframes cfm-cycle{0%,4%{opacity:0;transform:translateY(10px)}12%,88%{opacity:1;transform:none}96%,100%{opacity:0;transform:translateY(-8px)}}
.cfm-tick path{stroke-dasharray:60;stroke-dashoffset:60;animation:tick-draw 11s linear infinite}
@keyframes tick-draw{0%,5%{stroke-dashoffset:60}14%,100%{stroke-dashoffset:0}}
.cfm-ring{position:absolute;left:50%;top:0;width:110px;height:110px;margin-left:-55px;border-radius:50%;
  border:2px solid rgba(255,255,255,.28);animation:cfm-pop 11s var(--ease-emphasis) infinite}
@keyframes cfm-pop{0%,6%{transform:scale(.5);opacity:0}16%{transform:scale(1.35);opacity:.5}26%,100%{transform:scale(1.7);opacity:0}}

/* --- one step: the ring sweeps, holds, resets --- */
.ring{width:128px;height:128px}
.ring svg{width:128px;height:128px;transform:rotate(-90deg)}
.ring .tr{fill:none;stroke:rgba(255,255,255,.14);stroke-width:8}
.ring .va{stroke:url(#ringg)}
.ring .va{stroke-dasharray:320;stroke-dashoffset:320;animation:ring-cycle 9s var(--ease-standard) infinite}
@keyframes ring-cycle{0%{stroke-dashoffset:320}38%,86%{stroke-dashoffset:51}100%{stroke-dashoffset:320}}
.ring .mid b{font-size:22px}
.ring .mid b i{font-style:normal}

/* --- instant: the account lands, on a loop --- */
.pay{animation:pay-cycle 9s var(--ease-emphasis) infinite}
@keyframes pay-cycle{0%,6%{opacity:0;transform:translateY(12px) scale(.96)}16%,84%{opacity:1;transform:none}94%,100%{opacity:0;transform:translateY(-8px) scale(.98)}}
.pay .ok svg{stroke-dasharray:34;stroke-dashoffset:34;animation:tickmini 9s linear infinite}
@keyframes tickmini{0%,10%{stroke-dashoffset:34}20%,100%{stroke-dashoffset:0}}

/* --- sizes: the highlight walks the ladder --- */
.stack .s{transition:background .5s var(--ease-standard),color .5s,border-color .5s,box-shadow .5s}
.stack .s.on{animation:none}
.stack[data-walk] .s{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.14);color:rgba(255,255,255,.72);box-shadow:none}
.stack[data-walk] .s.cur{background:linear-gradient(180deg,#4f7df0,#2554d4);border-color:rgba(255,255,255,.22);color:#fff;
  box-shadow:0 12px 24px -10px rgba(37,84,212,.8)}

/* --- split: bars fill, hold, reset --- */
.sp .t span{animation:sp-cycle 8s var(--ease-standard) infinite}
.sp:nth-child(2) .t span{animation-delay:.18s}
.sp:nth-child(3) .t span{animation-delay:.36s}
.sp:nth-child(4) .t span{animation-delay:.54s}
@keyframes sp-cycle{0%{transform:scaleX(0)}30%,86%{transform:scaleX(1)}100%{transform:scaleX(0)}}

@media(prefers-reduced-motion:reduce){
  .cfm,.cfm-tick path,.cfm-ring,.ring .va,.pay,.pay .ok svg,.sp .t span{animation:none}
  .cfm,.pay{opacity:1;transform:none}
  .cfm-tick path,.pay .ok svg{stroke-dashoffset:0}
  .ring .va{stroke-dashoffset:51}
  .cfm-ring{opacity:0}
}

/* ================= tile sequences =================
   Xoala's mocks run a long cycle cut into named phases - their convert card is
   18s of type -> swap -> convert -> success, their checkout 12s of pay -> addr
   -> done - with small always-on loops underneath (a 0.7s cursor, a 1.2s dot)
   so nothing is ever still. These follow the same shape. */

.ph-wrap{position:relative;z-index:1;width:100%;display:grid}
.ph-wrap > .phz{grid-area:1/1;opacity:0}

/* --- hero: 18s, phase 1 -> phase 2 -> funded --- */
.hz1{animation:hz1 18s ease-in-out infinite}
.hz2{animation:hz2 18s ease-in-out infinite}
.hz3{animation:hz3 18s ease-in-out infinite}
@keyframes hz1{0%{opacity:0;transform:translateY(8px)}4%,30%{opacity:1;transform:none}36%,100%{opacity:0;transform:translateY(-8px)}}
@keyframes hz2{0%,30%{opacity:0;transform:translateY(8px)}36%,62%{opacity:1;transform:none}68%,100%{opacity:0;transform:translateY(-8px)}}
@keyframes hz3{0%,62%{opacity:0;transform:translateY(10px) scale(.96)}70%,94%{opacity:1;transform:none}100%{opacity:0;transform:translateY(-8px)}}

.bar{height:7px;border-radius:4px;background:rgba(255,255,255,.14);overflow:hidden;margin-top:9px}
.bar span{display:block;height:100%;border-radius:4px;transform-origin:left;transform:scaleX(0);
  background:linear-gradient(90deg,#4f7df0,#93b8ff)}
.hz1 .bar span{animation:fill1 18s ease-in-out infinite}
.hz2 .bar span{animation:fill2 18s ease-in-out infinite}
@keyframes fill1{0%,3%{transform:scaleX(0)}26%,100%{transform:scaleX(1)}}
@keyframes fill2{0%,35%{transform:scaleX(0)}58%,100%{transform:scaleX(.62)}}
.hz-l{display:flex;justify-content:space-between;align-items:baseline;font-size:13px;color:rgba(255,255,255,.7)}
.hz-l b{font-family:var(--font-mono);color:#fff;font-weight:600;font-size:15px}
.hz-k{font-size:10px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#7fa6ff;margin-bottom:10px}

/* the phase-3 stamp */
.cfm-tick path{stroke-dasharray:60;stroke-dashoffset:60;animation:tick3 18s linear infinite}
@keyframes tick3{0%,64%{stroke-dashoffset:60}72%,100%{stroke-dashoffset:0}}
.cfm-ring{animation:ring3 18s var(--ease-emphasis) infinite}
@keyframes ring3{0%,64%{transform:scale(.5);opacity:0}72%{transform:scale(1.3);opacity:.45}82%,100%{transform:scale(1.7);opacity:0}}
.cfm{animation:none;opacity:1;transform:none}

/* --- instant: 12s, choose -> issuing -> issued --- */
.iz1{animation:iz1 12s ease-in-out infinite}
.iz2{animation:iz2 12s ease-in-out infinite}
.iz3{animation:iz3 12s ease-in-out infinite}
@keyframes iz1{0%{opacity:0}5%,27%{opacity:1}33%,100%{opacity:0}}
@keyframes iz2{0%,27%{opacity:0}33%,58%{opacity:1}64%,100%{opacity:0}}
@keyframes iz3{0%,58%{opacity:0;transform:scale(.96)}66%,94%{opacity:1;transform:none}100%{opacity:0}}
.pay{animation:none;opacity:1;transform:none}
.iz-line{height:4px;border-radius:2px;background:var(--line-2);overflow:hidden;margin-top:10px}
.iz-line span{display:block;height:100%;background:var(--dv-blue);transform-origin:left;transform:scaleX(0);
  animation:izfill 12s ease-in-out infinite}
@keyframes izfill{0%,30%{transform:scaleX(0)}56%,100%{transform:scaleX(1)}}
.dotp{display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--dv-blue);margin-inline-end:6px;
  animation:dotp 1.2s ease-in-out infinite}
@keyframes dotp{0%,100%{opacity:.35;transform:scale(.8)}50%{opacity:1;transform:scale(1.15)}}
.pay .ok svg{stroke-dasharray:34;stroke-dashoffset:34;animation:tickmini 12s linear infinite}
@keyframes tickmini{0%,60%{stroke-dashoffset:34}70%,100%{stroke-dashoffset:0}}

/* --- one step: 12s sweep, hold, chip, reset --- */
.ring .va{stroke-dasharray:320;stroke-dashoffset:320;animation:ringc 12s ease-in-out infinite}
@keyframes ringc{0%{stroke-dashoffset:320}34%,80%{stroke-dashoffset:51}92%,100%{stroke-dashoffset:320}}
.ring-chip{position:absolute;left:50%;bottom:-6px;transform:translateX(-50%);white-space:nowrap;
  font-size:9.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  background:rgba(0,182,122,.2);color:#5ee0b0;border-radius:var(--radius-pill);padding:3px 10px;
  opacity:0;animation:ringchip 12s ease-in-out infinite}
@keyframes ringchip{0%,36%{opacity:0;transform:translateX(-50%) translateY(6px)}44%,80%{opacity:1;transform:translateX(-50%)}88%,100%{opacity:0}}

/* --- sizes: the stack shuffles as well as highlighting --- */
.stack .s{animation:shuf 7.6s var(--ease-emphasis) infinite}
.stack .s:nth-child(2){animation-delay:-1.5s}
.stack .s:nth-child(3){animation-delay:-3s}
.stack .s:nth-child(4){animation-delay:-4.5s}
.stack .s:nth-child(5){animation-delay:-6s}
@keyframes shuf{0%,100%{transform:translateX(0)}50%{transform:translateX(7px)}}

/* --- split: the bars refill in sequence --- */
.sp .t span{animation:spc 12s ease-in-out infinite}
.sp:nth-child(1) .t span{animation-delay:0s}
.sp:nth-child(2) .t span{animation-delay:.5s}
.sp:nth-child(3) .t span{animation-delay:1s}
.sp:nth-child(4) .t span{animation-delay:1.5s}
@keyframes spc{0%{transform:scaleX(0)}22%,84%{transform:scaleX(1)}96%,100%{transform:scaleX(0)}}

@media(prefers-reduced-motion:reduce){
  .phz,.bar span,.cfm-tick path,.cfm-ring,.pay .ok svg,.iz-line span,.ring .va,.ring-chip,.stack .s,.sp .t span,.dotp{animation:none}
  .ph-wrap > .phz{opacity:0} .ph-wrap > .phz:last-child{opacity:1}
  .bar span,.iz-line span,.sp .t span{transform:scaleX(1)}
  .cfm-tick path,.pay .ok svg{stroke-dashoffset:0} .ring .va{stroke-dashoffset:51} .ring-chip{opacity:1}
}

/* ================= the four programs, on Xoala's section anatomy =================
   Split header - headline and lede on the left, a hairline-separated list with
   chevron buttons on the right - then cards whose light visual panel carries a
   floating mock, with the title and copy underneath it. */
.pg{padding:clamp(48px,6vw,96px) 0}
.pg-head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:clamp(30px,5vw,88px);
  align-items:start;margin-bottom:clamp(36px,4.5vw,64px)}
@media(max-width:940px){.pg-head{grid-template-columns:1fr;gap:var(--space-8)}}
.pg-head h2{font-size:clamp(28px,3.4vw,42px);line-height:1.1;letter-spacing:-.03em;font-weight:600;max-width:15ch}
.pg-head .lead{margin-top:var(--space-5)}
.pg-rows{display:grid}
.pg-row{padding:var(--space-6) 0;border-bottom:1px solid var(--line)}
.pg-row:first-child{padding-top:0}
.pg-row:last-child{border-bottom:0}
.pg-row-h{display:flex;align-items:center;gap:var(--space-4)}
.pg-row-h h3{font-size:clamp(17px,1.5vw,20px);font-weight:600;letter-spacing:-.02em}
.pg-chev{margin-inline-start:auto;width:32px;height:32px;border-radius:50%;border:1px solid var(--line);
  background:#fff;display:grid;place-items:center;flex:none;color:var(--ink-2);cursor:pointer;
  transition:border-color var(--dur-quick),color var(--dur-quick),transform var(--dur-base) var(--ease-emphasis)}
.pg-row:hover .pg-chev{border-color:var(--dv-blue);color:var(--dv-blue);transform:translateX(2px)}
.pg-chev svg{width:13px;height:13px;stroke:currentColor;fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.pg-row p{font-size:14.5px;line-height:1.6;color:var(--ink-2);margin-top:var(--space-3);max-width:58ch}

.pg-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--space-4)}
@media(max-width:1180px){.pg-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:620px){.pg-grid{grid-template-columns:1fr}}
.pgc{background:#fff;border:1px solid var(--line);border-radius:20px;padding:10px 10px 22px;
  display:flex;flex-direction:column;
  transition:border-color var(--dur-base),box-shadow var(--dur-base),transform var(--dur-base) var(--ease-emphasis)}
.pgc:hover{border-color:var(--dv-blue);transform:translateY(-4px);box-shadow:0 22px 46px -28px rgba(74,111,165,.55)}
.pgv{position:relative;border-radius:15px;overflow:hidden;min-height:168px;padding:16px;
  background:linear-gradient(166deg,#f5f8fe 0%,#eaf0fb 55%,#e2eaf7 100%);display:grid;place-items:center}
.pgv::before{content:"";position:absolute;inset:0;background-image:radial-gradient(circle, rgba(74,111,165,.09) 1px, transparent 1px);
  background-size:19px 19px;-webkit-mask-image:radial-gradient(84% 78% at 50% 42%,#000,transparent 76%);mask-image:radial-gradient(84% 78% at 50% 42%,#000,transparent 76%)}
.pgc-body{padding:var(--space-5) 8px 0}
.pgc-t{display:flex;align-items:baseline;gap:9px}
.pgc-t h3{font-size:19px;font-weight:600;letter-spacing:-.02em}
.pgc-v{font-size:11.5px;color:var(--ink-4);font-family:var(--font-mono)}
.pgc-d{font-size:13.5px;line-height:1.55;color:var(--ink-2);margin-top:8px}
.pgc-specs{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line-2);
  border:1px solid var(--line-2);border-radius:11px;overflow:hidden;margin-top:var(--space-5)}
.pgc-specs div{background:#fff;padding:9px 11px}
.pgc-specs .k{font-size:9px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-4)}
.pgc-specs .v{font-family:var(--font-mono);font-size:14px;font-weight:600;margin-top:3px}
.pgc-foot{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:var(--space-5);
  padding-top:var(--space-4);border-top:1px solid var(--line-2)}
.pgc-from{font-size:12.5px;color:var(--ink-3)}
.pgc-from b{font-family:var(--font-mono);color:var(--ink-1);font-size:13.5px}
.pgc-go{font-size:13px;font-weight:600;color:var(--dv-blue);text-decoration:none;display:inline-flex;gap:6px;align-items:center}
.pgc:hover .pgc-go{color:var(--dv-blue-deep)}
.pgc-go svg{width:12px;height:12px;stroke:currentColor;fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;
  transition:transform var(--dur-base) var(--ease-emphasis)}
.pgc:hover .pgc-go svg{transform:translateX(3px)}

/* the mocks that float in the light panels */
.pmk{position:relative;z-index:1;width:100%;max-width:210px;background:#fff;border-radius:10px;padding:10px 11px;
  border:1px solid rgba(15,23,42,.05);box-shadow:0 12px 26px -14px rgba(15,23,42,.4)}
.pmk + .pmk{margin-top:6px}
.pmk-r{display:flex;align-items:center;gap:8px}
.pmk-b{width:18px;height:18px;border-radius:5px;flex:none;display:grid;place-items:center;font-size:8px;font-weight:700;color:#fff}
.pmk-t{font-size:11px;font-weight:600;color:var(--ink-1)}
.pmk-s{font-family:var(--font-mono);font-size:8.5px;color:var(--ink-4)}
.pmk-v{margin-inline-start:auto;font-family:var(--font-mono);font-size:11px;font-weight:600}
.pmk-v.up{color:#0a7d57} .pmk-v.dn{color:#b91c1c}
.pmk-line{height:1px;background:var(--line-2);margin:7px 0}
.pmk-chip{display:inline-flex;font-family:var(--font-mono);font-size:9px;font-weight:600;background:rgba(74,111,165,.1);
  color:var(--dv-blue-deep);border-radius:4px;padding:2px 6px}
.pmk-cands{position:absolute;inset:0;z-index:0}
.pmk-cands svg{width:100%;height:100%}
.pdom{position:relative;z-index:1;width:100%;max-width:196px;font-family:var(--font-mono);font-size:9.5px}
.pdom .r{display:flex;align-items:center;gap:7px;height:15px;position:relative}
.pdom .r .bar{position:absolute;left:0;top:2px;height:11px;border-radius:2px}
.pdom .r .q{position:relative;z-index:1;color:var(--ink-3);min-width:20px}
.pdom .r .p{position:relative;z-index:1;margin-inline-start:auto;font-weight:600;color:var(--ink-1)}
.pdom .r.s .bar{background:linear-gradient(90deg,rgba(239,68,68,.34),rgba(239,68,68,.06))}
.pdom .r.b .bar{background:linear-gradient(90deg,rgba(0,182,122,.34),rgba(0,182,122,.06))}
.pdom .mid{height:20px;border-block:1px solid var(--line);margin-block:3px;font-weight:700;color:var(--ink-1)}

.pgc-t h3.obj{font-size:18px;line-height:1.3;font-weight:600;letter-spacing:-.015em;color:var(--ink-1)}
.pgc .live{width:6px;height:6px;border-radius:50%;background:var(--dv-green);flex:none;
  box-shadow:0 0 0 0 rgba(0,182,122,.5);animation:pulse-live 2.4s ease-out infinite}

/* ---------- reveal ---------- */
[data-rise]{opacity:0;transform:translateY(22px)}
.hero [data-rise]{opacity:1;transform:none}
.no-js [data-rise],.revealed[data-rise]{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition:none!important}
  [data-rise]{opacity:1!important;transform:none!important}
  .section-rise{transform:none!important}
}
:focus-visible{outline:2px solid var(--dv-blue);outline-offset:3px;border-radius:4px}


/* Konzistentni velikost karet napric VSEMI monitory (bez max-height media queries) -> stejny vzhled vsude; 8 karet mensi. */
.svc-tile{ aspect-ratio:1.5 !important; }
.lpms .lrow .lvis{ aspect-ratio:auto !important; height:clamp(172px,10.8vw,186px) !important; }
.hero-cards::before{ top:36% !important; }


/* The whole page now sits on the hero's ground. One fixed canvas in the light
   palette runs behind everything, and every white surface became translucent so
   the drift shows through; the dark sections keep their own dark canvas on top.
   One shared canvas rather than one per section - a WebGL context per band would
   run a browser out of them. */
html{background:#0b1221}
.pagebg{position:fixed;inset:0;z-index:-2;pointer-events:none;background:#e9f0fb}
/* the light palette is nearly white on its own; a little saturation is what makes
   the drift readable through the translucent white sections */
.pagebg canvas{position:absolute;inset:0;width:100%;height:100%;display:block;opacity:0;
  filter:saturate(2.1) contrast(1.06);transition:opacity 1.2s ease}
.pagebg canvas.is-live{opacity:1}
.section-rise{background:rgba(255,255,255,.6)}
#platform.lpms{background:#fff}
/* The platform strip is a footnote, not a section: plain white, one line, and
   about half the height it had. The label sits on the same row as the logos so
   the block stops eating a third of the fold. */
.venues.venues{background:#fff;border-bottom:0;border-top:0;padding:26px 0 16px}
.venues .wrap{display:flex;align-items:center;gap:clamp(16px,2.6vw,40px);flex-wrap:wrap;justify-content:center}
.venues-lbl.venues-lbl{margin:0;white-space:nowrap;color:var(--ink-4)}
.venues-in.venues-in{gap:clamp(16px,2.4vw,38px);flex:0 1 auto}
.venue{display:flex;flex-direction:column;align-items:center;gap:3px;line-height:1.2}
.venue small{margin-top:0;font-size:10px;letter-spacing:.07em}
.vlogo{height:clamp(15px,1.35vw,19px)}
.vl-mt5{height:clamp(17px,1.5vw,21px)}
@media (max-width:900px){.venues .wrap{gap:12px}.venues-lbl.venues-lbl{flex:1 0 100%;text-align:center}}
/* Every platform is a two-row grid: a fixed logo slot with the mark centred in
   it, then a fixed caption slot, so the captions and the Coming soon pills all
   sit on one line no matter how tall each logo file is. */
.venues-in.venues-in{align-items:flex-start}
.venue{display:grid;grid-template-rows:clamp(26px,2.4vw,32px) 22px;row-gap:6px;justify-items:center;align-items:center;min-height:0;gap:6px 0}
.venue > .vlogo,.venue > .vmark{align-self:center}
.venue small,.venue .vsoon{align-self:center;line-height:1.2;margin:0}
.section-tint{background:rgba(238,243,249,.72)}
.marquee-wrap{background:linear-gradient(180deg,rgba(255,255,255,.6),rgba(238,243,249,.6))}
#answers{background:rgba(255,255,255,.55)}
#faq .fq-stage{background:#fff;border:1px solid var(--line);box-shadow:0 30px 70px -46px rgba(15,23,42,.28)}
.venues{background:rgba(255,255,255,.6)}
/* cards, panels and anything carrying copy stay opaque so nothing has to be read
   through a moving background */
.lcard,.rvc,.tp-card,.cf-panel,.chip,.pcard,.cert,.rev,.step,.mx,.matrix,.dcx-card,.pos-card{background-color:#fff}
@media(prefers-reduced-motion:reduce){.pagebg canvas{opacity:.55}}


/* The dark blocks run the full width of the page rather than sitting in the light
   as rounded cards, so the ground behind them is one continuous surface. */
#transparency,#reviews,#compare{position:relative;overflow:hidden;color:#fff;
  background:radial-gradient(120% 120% at 18% -16%, #17294d 0%, #0b1221 52%, #070b13 100%)}
#transparency>.tp-bg,#reviews>.tp-bg,#compare>.tp-bg{position:absolute;inset:0;z-index:0;overflow:hidden;background:transparent}
#transparency>.wrap,#reviews>.wrap,#compare>.wrap{position:relative;z-index:1}
/* The card showcase is a dark block too, so it joins them flush: no rounded top
   and no rise-scale, which on a dark neighbour only exposed the light page round
   its edges. The two grounds then fade through one shared near-black so their
   glows meet without a seam. */
#card.section-rise{border-radius:0;transform:none!important}
#compare::after{content:"";position:absolute;left:0;right:0;bottom:0;height:160px;z-index:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(7,10,18,0) 0%,#070a12 100%)}
#card::after{content:"";position:absolute;left:0;right:0;top:0;height:160px;z-index:0;pointer-events:none;
  background:linear-gradient(180deg,#070a12 0%,rgba(7,10,18,0) 100%)}
#transparency .tp-stage.tp-stage,#reviews .rv-stage.rv-stage,#compare .cf-stage.cf-stage{
  background:none;box-shadow:none;border-radius:0;padding-left:0;padding-right:0;overflow:visible}
#transparency .tp-pad{padding:0}
#reviews .rv-top,#compare .cf-top{padding-left:0;padding-right:0}
@media (max-width:640px){#transparency .tp-stage,#reviews .rv-stage,#compare .cf-stage{padding-left:0;padding-right:0}}

/* ---------- Perps (28 Oct 2026): fifth market tile ---------- */
.svcs{grid-template-columns:repeat(5,minmax(0,1fr))}
@media(max-width:1180px){.svcs{grid-template-columns:repeat(3,1fr)}}
@media(max-width:820px){.svcs{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.svcs{grid-template-columns:1fr}}
.svc-tile.t-prp{--glow:rgba(167,139,250,.36)}
.svc-tile > .pp-fund,.svc-tile > .pp-card{z-index:2}
.t-prp .pp-mark{stroke-dasharray:420;stroke-dashoffset:420;animation:draw 6s var(--ease-standard) infinite}
.t-prp .pp-liq{animation:pp-liq 2.4s var(--ease-standard) infinite}
@keyframes pp-liq{0%,100%{opacity:.4}50%{opacity:1}}
.t-prp .pp-liq-l{font-family:var(--font-mono);font-size:9px;fill:rgba(252,165,165,.85);letter-spacing:.08em}
.pp-fund{position:absolute;right:14px;top:14px;width:58px;height:58px;display:grid;place-items:center}
.pp-fund svg{position:absolute;inset:0;width:100%;height:100%;transform:rotate(-90deg)}
.pp-fund circle{fill:none;stroke-width:5}
.pp-fund .bg{stroke:rgba(255,255,255,.14)}
.pp-fund .arc{stroke:#a78bfa;stroke-linecap:round;stroke-dasharray:264;stroke-dashoffset:132;transition:stroke-dashoffset 1s linear}
.pp-fund-t{position:relative;display:grid;text-align:center;line-height:1}
.pp-fund-t small{font-size:6.5px;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.62)}
.pp-fund-t b{font-family:var(--font-mono);font-size:11px;color:#fff;font-weight:600;margin-top:2px}
.pp-card{position:relative;background:#fff;border-radius:11px;padding:10px 12px;min-width:138px;max-width:156px;text-align:left;
  box-shadow:0 16px 34px -14px rgba(7,12,22,.7)}
.pp-card .sym{font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-4);font-weight:700;text-align:center}
.pp-card .row{display:flex;justify-content:space-between;gap:10px;font-family:var(--font-mono);font-size:9px;color:var(--ink-3);margin-top:6px;white-space:nowrap}
.pp-card .row:first-of-type{margin-top:8px;padding-top:7px;border-top:1px solid var(--line-2)}
.pp-card .row b{color:var(--ink-1);font-weight:600}
.pp-card .row b.g{color:#0a7d57}
.pp-card .row.liq b{color:#b91c1c}
.pp-card .row.liq{position:relative}
.pp-card .row.liq::before{content:"";position:absolute;left:-12px;right:-12px;top:-3px;bottom:-3px;border-radius:0 0 11px 11px;background:rgba(239,68,68,.07);animation:pp-liq 2.4s var(--ease-standard) infinite}
@media(prefers-reduced-motion:reduce){.t-prp .pp-mark,.t-prp .pp-liq,.pp-card .row.liq::before{animation:none}.t-prp .pp-mark{stroke-dashoffset:0}}