: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{transform:translateY(-3px);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:translateX(38px)}
.x-cta:hover .x-cta-arrow{transform:translateX(38px) rotate(-45deg)}
.x-cta:active .x-cta-bg-orb,.x-cta:active .x-cta-arrow{transition-duration:.14s;transform:translateX(26px)}
.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}
.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}
@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)}
.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:#e9f0fb}
.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}}
.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}
#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}}


/* The five steps, built the way the hero tiles are built: a lit panel with a
   working piece of the product inside, a sheen that crosses it, and motion that
   belongs to the content - the signature draws, the phase bar fills, the balance
   ticks, the payout tracker runs. Every figure is either measured or a rule. */
#answers{padding:clamp(44px,5vw,88px) 0;background:rgba(255,255,255,.55)}
#answers .jny-head{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(20px,3vw,48px);align-items:end;margin-bottom:clamp(26px,3vw,42px)}
#answers .jny-head h2{margin:.3em 0 0;font-size:clamp(28px,3.4vw,44px);line-height:1.05;letter-spacing:-1.3px}
#answers .jny-eyebrow{margin:0;font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--dv-blue)}
#answers .jny-lede{margin:0;font-size:16px;line-height:1.62;color:var(--ink-2)}
#answers .jny{display:grid;grid-template-columns:repeat(5,1fr);gap:14px}

#answers .jstep{position:relative;display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);
  border-radius:20px;overflow:hidden;opacity:0;transform:translateY(12px);
  box-shadow:0 10px 30px rgba(15,23,42,.06);
  transition:opacity .5s ease,transform .5s var(--ease-emphasis),box-shadow var(--dur-base),border-color var(--dur-base)}
#answers .jny.is-in .jstep{opacity:1;transform:none}
#answers .jny.is-in .jstep:nth-child(2){transition-delay:.1s}
#answers .jny.is-in .jstep:nth-child(3){transition-delay:.2s}
#answers .jny.is-in .jstep:nth-child(4){transition-delay:.3s}
#answers .jny.is-in .jstep:nth-child(5){transition-delay:.4s}
#answers .jstep:hover{transform:translateY(-4px);box-shadow:0 26px 54px rgba(15,23,42,.14);border-color:rgba(37,84,212,.24)}

/* ---- the panel ---- */
#answers .jmock{position:relative;height:148px;padding:16px 14px 14px;display:flex;flex-direction:column;justify-content:center;gap:9px;
  background:linear-gradient(168deg,#eef4ff 0%,#e4ecfa 62%,#dde7f8 100%);border-bottom:1px solid var(--line);overflow:hidden}
#answers .jmock::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.5;
  background-image:radial-gradient(circle, rgba(37,84,212,.16) 1px, transparent 1px);background-size:14px 14px;
  -webkit-mask-image:radial-gradient(120% 90% at 30% 0%,#000 20%,transparent 78%);mask-image:radial-gradient(120% 90% at 30% 0%,#000 20%,transparent 78%)}
#answers .jmock::after{content:"";position:absolute;inset:-40%;pointer-events:none;z-index:0;filter:blur(20px);
  background:radial-gradient(closest-side,var(--glow,rgba(79,125,240,.28)),transparent 72%);animation:j-glow 9s ease-in-out infinite}
@keyframes j-glow{0%,100%{transform:translate3d(-6%,-4%,0) scale(1)}50%{transform:translate3d(6%,4%,0) scale(1.06)}}
#answers .jstep--green .jmock{--glow:rgba(0,182,122,.26)}
#answers .jsheen{position:absolute;inset:0;z-index:2;pointer-events:none;overflow:hidden}
#answers .jsheen i{position:absolute;top:-40%;left:-45%;width:34%;height:180%;transform:rotate(16deg);
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.75),transparent);animation:j-sheen 8s var(--ease-emphasis) infinite}
@keyframes j-sheen{0%,74%{left:-45%}92%,100%{left:125%}}
#answers .jstep:hover .jsheen i{animation-duration:2.6s}

#answers .jrow{position:relative;z-index:1;display:flex;align-items:center;justify-content:space-between;gap:8px;
  background:rgba(255,255,255,.96);border:1px solid rgba(15,23,42,.07);border-radius:11px;padding:8px 10px;
  font-family:var(--font-mono);font-size:10.5px;color:var(--ink-3);box-shadow:0 8px 18px rgba(15,23,42,.07)}
#answers .jrow b{font-size:12.5px;color:var(--ink-1);font-weight:700;font-variant-numeric:tabular-nums}
#answers .jrow--tight{padding:7px 10px}
/* the same chip the product mocks use elsewhere on the page */
#answers .jpill{display:inline-flex;align-items:center;gap:6px;border-radius:var(--radius-pill);padding:5px 11px;
  background:#0d1424;color:#fff;font-family:var(--font-body);font-size:10px;font-weight:600;white-space:nowrap;
  box-shadow:0 10px 20px -10px rgba(7,12,22,.6)}
#answers .jpill--ok{background:#0a7d57}
#answers .jpill--blue{background:linear-gradient(180deg,#4f7df0,#2554d4)}
#answers .jpill i{width:6px;height:6px;border-radius:50%;background:#fff;opacity:.9;animation:pulse-live 2.4s ease-out infinite}
#answers .jcheck path{stroke:#fff}
#answers .jmeta{position:relative;z-index:1;display:flex;align-items:center;gap:7px;font-family:var(--font-mono);
  font-size:9.5px;letter-spacing:.06em;color:var(--ink-3)}
#answers .jmeta .dot{width:6px;height:6px;border-radius:50%;background:var(--dv-green)}

/* 01 - the tick draws itself once the tile is in view */
#answers .jcheck{width:14px;height:14px;flex:0 0 14px}
#answers .jcheck path{fill:none;stroke:#0e9c6f;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round;
  stroke-dasharray:22;stroke-dashoffset:22;transition:stroke-dashoffset .5s var(--ease-emphasis) .8s}
#answers .jstep.is-play .jcheck path{stroke-dashoffset:0}
/* 02 - the signature is written, then the seal presses in */
#answers .jsig{position:relative;z-index:1;height:30px;width:100%;margin-top:-2px}
#answers .jsigname{position:relative;z-index:1;display:flex;align-items:baseline;gap:7px;margin-top:-6px;
  padding-left:2px;font-family:var(--font-mono);font-size:9.5px;letter-spacing:.04em;color:var(--ink-4)}
#answers .jsigname b{font-family:var(--font-body);font-size:11.5px;font-weight:700;color:var(--ink-2);letter-spacing:0}
#answers .jsig path{fill:none;stroke:var(--dv-blue-deep);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;
  stroke-dasharray:620;stroke-dashoffset:620;transition:stroke-dashoffset 2.1s var(--ease-emphasis) .3s}
#answers .jstep.is-play .jsig path{stroke-dashoffset:0}
#answers .jseal{position:absolute;right:12px;bottom:10px;z-index:3;width:34px;height:34px;border-radius:50%;display:grid;place-items:center;
  color:#fff;background:linear-gradient(180deg,#4f7df0,#2554d4);box-shadow:inset 0 1px 0 rgba(255,255,255,.3),0 10px 20px rgba(37,84,212,.34);
  opacity:0;transform:scale(1.6) rotate(-12deg)}
#answers .jstep.is-play .jseal{animation:j-stamp .5s var(--ease-emphasis) 1.5s forwards}
#answers .jseal svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
@keyframes j-stamp{0%{opacity:0;transform:scale(1.6) rotate(-12deg)}60%{opacity:1;transform:scale(.92) rotate(-12deg)}100%{opacity:1;transform:scale(1) rotate(-12deg)}}
/* 03 - the phase bar fills and the day pips light up one by one */
#answers .jbar{position:relative;z-index:1;height:8px;border-radius:100px;background:rgba(15,23,42,.09);overflow:hidden}
#answers .jbar i{display:block;height:100%;width:0;border-radius:100px;background:linear-gradient(90deg,#4f7df0,#2554d4);
  transition:width 1.4s var(--ease-emphasis) .4s}
#answers .jstep.is-play .jbar i{width:var(--w,41%)}
#answers .jpips{display:flex;gap:4px;margin-left:auto}
#answers .jpips span{width:9px;height:4px;border-radius:2px;background:rgba(15,23,42,.14);transition:background .3s ease}
#answers .jstep.is-play .jpips span.on{background:var(--dv-green)}
#answers .jstep.is-play .jpips span.on:nth-child(1){transition-delay:.6s}
#answers .jstep.is-play .jpips span.on:nth-child(2){transition-delay:.75s}
#answers .jstep.is-play .jpips span.on:nth-child(3){transition-delay:.9s}
/* 04 - a small equity line under the balance */
#answers .jspark{position:relative;z-index:1;width:calc(100% - 8px);margin:0 4px;height:26px;display:block}
#answers .jspark .ln{fill:none;stroke:#2554d4;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;
  stroke-dasharray:190;stroke-dashoffset:190;transition:stroke-dashoffset 1.5s var(--ease-emphasis) .4s}
#answers .jspark .ar{fill:url(#jnyGrad);opacity:0;transition:opacity .8s ease .9s}
#answers .jstep.is-play .jspark .ln{stroke-dashoffset:0}
#answers .jstep.is-play .jspark .ar{opacity:1}
/* 05 - the payout tracker runs from requested to sent */
#answers .jtrack{position:relative;z-index:1;display:flex;align-items:center;gap:0;padding:2px 6px 0}
#answers .jtrack .node{width:9px;height:9px;border-radius:50%;background:rgba(15,23,42,.16);flex:0 0 9px;transition:background .3s ease,box-shadow .3s ease}
#answers .jtrack .line{flex:1 1 auto;height:2px;background:rgba(15,23,42,.12);position:relative;overflow:hidden}
#answers .jtrack .line i{position:absolute;inset:0;width:0;background:linear-gradient(90deg,#4f7df0,#00b67a);transition:width .8s var(--ease-emphasis)}
#answers .jstep.is-play .jtrack .node{background:var(--dv-green);box-shadow:0 0 0 3px rgba(0,182,122,.16)}
#answers .jstep.is-play .jtrack .node:nth-child(3){transition-delay:.9s}
#answers .jstep.is-play .jtrack .node:nth-child(5){transition-delay:1.4s}
#answers .jstep.is-play .jtrack .line:nth-child(2) i{width:100%;transition-delay:.5s}
#answers .jstep.is-play .jtrack .line:nth-child(4) i{width:100%;transition-delay:1s}
#answers .jtlabels{display:flex;justify-content:space-between;padding:0 2px;font-family:var(--font-mono);font-size:8.5px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--ink-4);padding-top:5px}

/* ---- the body ---- */
#answers .jbody{padding:16px 16px 18px;display:flex;flex-direction:column;gap:7px;flex:1}
#answers .jnum{position:absolute;top:10px;left:10px;z-index:3;width:24px;height:24px;border-radius:50%;display:grid;place-items:center;
  font-family:var(--font-mono);font-size:10px;font-weight:700;color:#fff;background:linear-gradient(180deg,#4f7df0,#2554d4);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.3),0 6px 14px rgba(37,84,212,.3)}
#answers .jstep--green .jnum{background:linear-gradient(180deg,#22c58e,#0e9c6f);box-shadow:inset 0 1px 0 rgba(255,255,255,.3),0 6px 14px rgba(14,156,111,.3)}
#answers .jstep h3{margin:0;font-size:16px;letter-spacing:-.2px}
#answers .jv{font-size:clamp(22px,2.2vw,30px);font-weight:800;letter-spacing:-1.1px;line-height:1.05;color:var(--dv-blue-deep);font-variant-numeric:tabular-nums}
#answers .jstep--green .jv{color:#0e9c6f}
#answers .jstep--plain .jv{color:var(--ink-1)}
#answers .jv small{font-size:14px;font-weight:700;color:var(--ink-3);letter-spacing:0;margin-left:3px}
#answers .jk{font-family:var(--font-mono);font-size:10px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;
  color:var(--dv-blue-deep);opacity:.8}
#answers .jstep p{margin:4px 0 0;font-size:13.5px;line-height:1.58;color:var(--ink-2)}
#answers .jny-foot{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;
  margin-top:clamp(22px,2.6vw,34px);padding-top:20px;border-top:1px solid var(--line)}
#answers .jny-foot p{margin:0;max-width:62ch;font-size:14px;line-height:1.6;color:var(--ink-3)}
@media (max-width:1200px){#answers .jny{grid-template-columns:repeat(3,1fr)}}
@media (max-width:820px){#answers .jny{grid-template-columns:repeat(2,1fr)}#answers .jny-head{grid-template-columns:1fr}}
@media (max-width:560px){#answers .jny{grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce){
  #answers .jstep{opacity:1;transform:none;transition:none}
  #answers .jsheen i,#answers .jmock::after{animation:none}
  #answers .jbar i{width:var(--w,41%);transition:none}
  #answers .jsig path,#answers .jspark .ln{stroke-dashoffset:0;transition:none}
  #answers .jspark .ar{opacity:1;transition:none}
  #answers .jseal{opacity:1;transform:rotate(-12deg);animation:none}
  #answers .jtrack .line i{width:100%;transition:none}
}


/* Xoala's stage, but the choices have to produce something you can look at. The
   right-hand panel is a live account card: venue, size, and the corridor the
   account is judged inside, drawn in the money that account actually risks. */
#compare{padding:clamp(40px,5vw,84px) 0}
#compare .cf-top{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(20px,3vw,48px);align-items:end;margin-bottom:clamp(22px,2.6vw,34px)}
#compare .cf-top h2{color:#fff;margin:.3em 0 0;font-size:clamp(28px,3.4vw,44px);line-height:1.06;letter-spacing:-1.2px}
#compare .cf-eyebrow{margin:0;font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#8fb2e6}
#compare .cf-lede{margin:0;font-size:15px;line-height:1.62;color:rgba(255,255,255,.66)}
#compare .cf-note{display:inline-flex;align-items:center;gap:9px;margin-top:14px;font-size:13px;color:rgba(255,255,255,.72)}
#compare .cf-note i{width:7px;height:7px;border-radius:50%;background:var(--dv-green);animation:pulse-live 2.4s ease-out infinite}

#compare .cf-panel{display:grid;grid-template-columns:1.2fr .8fr;gap:0;background:#fff;color:var(--ink-1);
  border-radius:22px;overflow:hidden;box-shadow:0 26px 60px rgba(4,8,18,.34)}
#compare .cf-build{padding:clamp(20px,2.4vw,30px)}
#compare .cf-sum{padding:clamp(20px,2.4vw,28px);background:linear-gradient(180deg,#f6f9fe,#eaf1fb);
  border-left:1px solid rgba(15,23,42,.08);display:flex;flex-direction:column;gap:14px}
#compare .cf-tabs{position:relative;display:flex;gap:6px;padding:5px;border-radius:100px;background:rgba(15,23,42,.05);
  margin-bottom:20px;flex-wrap:nowrap;overflow:hidden}
/* the active pill slides between markets instead of blinking on and off */
#compare .cf-thumb{position:absolute;top:5px;bottom:5px;left:0;width:0;border-radius:100px;pointer-events:none;
  background:linear-gradient(180deg,#4f7df0,#2554d4);box-shadow:inset 0 1px 0 rgba(255,255,255,.3),0 6px 16px rgba(37,84,212,.3);
  transform:translateX(0);transition:transform .42s var(--ease-emphasis),width .42s var(--ease-emphasis)}
@media (max-width:760px){#compare .cf-tabs{flex-wrap:wrap;overflow:visible}#compare .cf-thumb{display:none}}
#compare .cf-tab{flex:1 1 auto;display:inline-flex;align-items:center;justify-content:center;gap:8px;border:0;background:none;
  cursor:pointer;border-radius:100px;padding:9px 14px;font-family:var(--font-display);font-size:14px;font-weight:650;color:var(--ink-3);
  transition:color var(--dur-quick),background var(--dur-quick)}
#compare .cf-tab img{width:18px;height:18px;border-radius:50%;filter:grayscale(1);opacity:.55;transition:filter var(--dur-quick),opacity var(--dur-quick)}
#compare .cf-tab:hover{color:var(--ink-1)}
#compare .cf-tab:hover img{filter:none;opacity:.9}
#compare .cf-tab{position:relative;z-index:1}
#compare .cf-tab.is-on{color:#fff}
@media (max-width:760px){#compare .cf-tab.is-on{background:linear-gradient(180deg,#4f7df0,#2554d4);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.3),0 6px 16px rgba(37,84,212,.3)}}
#compare .cf-tab.is-on img{filter:none;opacity:1}
#compare .cf-row{margin-bottom:18px}
#compare .cf-row + .cf-row{border-top:1px solid rgba(15,23,42,.07);padding-top:16px}
#compare .cf-lbl{display:flex;align-items:baseline;justify-content:space-between;gap:10px;font-family:var(--font-mono);font-size:10px;
  letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);margin-bottom:9px}
#compare .cf-lbl .n{display:inline-flex;align-items:center;justify-content:center;width:17px;height:17px;border-radius:50%;
  margin-right:8px;font-size:9px;color:#fff;background:var(--dv-blue-deep)}
#compare .cf-lbl em{font-style:normal;letter-spacing:.04em;text-transform:none;font-size:11px;color:var(--ink-4)}
#compare .cf-opts{display:flex;flex-wrap:wrap;gap:8px}
#compare .cf-opt{position:relative;border:1px solid rgba(15,23,42,.12);background:#fff;border-radius:12px;padding:9px 14px;cursor:pointer;
  font-family:var(--font-display);font-size:13.5px;font-weight:650;color:var(--ink-2);
  transition:border-color var(--dur-quick),color var(--dur-quick),transform var(--dur-quick),box-shadow var(--dur-quick)}
#compare .cf-opt small{display:block;font-weight:500;font-size:11px;color:var(--ink-3);margin-top:2px}
#compare .cf-opt:hover{border-color:rgba(37,84,212,.4);transform:translateY(-1px);box-shadow:0 8px 18px rgba(15,23,42,.08)}
#compare .cf-opt.is-on{color:#fff;border-color:transparent;background:linear-gradient(180deg,#4f7df0,#2554d4);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.3),0 8px 20px rgba(37,84,212,.28)}
#compare .cf-opt.is-on small{color:rgba(255,255,255,.8)}
#compare .cf-opt b{color:#2554d4;font-weight:800}
#compare .cf-opt.is-on b{color:#fff}
#compare .cf-opt.is-minus b{color:#0e9c6f}
/* the platform row carries the real marks; the chip stays white in both states
   so a dark logo survives the blue selected fill */
#compare .cf-opts[data-opts="platform"] .cf-opt{display:flex;align-items:center;gap:11px;padding:8px 15px 8px 8px;text-align:left}
#compare .cf-plogo{flex:0 0 auto;display:grid;place-items:center;width:30px;height:30px;border-radius:10px;background:#fff;
  border:1px solid rgba(15,23,42,.10);box-shadow:0 1px 2px rgba(15,23,42,.06);
  transition:border-color var(--dur-quick),box-shadow var(--dur-quick),transform var(--dur-quick)}
#compare .cf-plogo img{width:20px;height:20px;object-fit:contain;display:block}
#compare .cf-opt:hover .cf-plogo{transform:scale(1.04)}
#compare .cf-opt.is-on .cf-plogo{border-color:transparent;box-shadow:0 3px 8px rgba(9,20,48,.22)}
#compare .cf-ptx{display:block;min-width:0}
@media (max-width:520px){#compare .cf-opts[data-opts="platform"] .cf-opt{width:100%}}
/* what every account carries, whatever the selection - fills the column and says
   the thing the price alone does not */
#compare .cf-incl{list-style:none;margin:26px 0 0;padding:18px 0 0;border-top:1px solid rgba(15,23,42,.08);
  display:grid;gap:10px}
#compare .cf-incl li{position:relative;padding-left:26px;font-size:13.5px;line-height:1.5;color:var(--ink-2)}
#compare .cf-incl li::before{content:"";position:absolute;left:0;top:2px;width:17px;height:17px;border-radius:50%;
  background:rgba(0,182,122,.12);border:1px solid rgba(0,182,122,.3)}
#compare .cf-incl li::after{content:"";position:absolute;left:5px;top:7px;width:7px;height:4px;
  border-left:2px solid #0e9c6f;border-bottom:2px solid #0e9c6f;transform:rotate(-45deg)}

/* ---- the live account card ----
   Same anatomy as the tiles in the payment-to-payout row: a pale panel with the
   product laid on white rows inside it. Only two accents on this page, the brand
   blue and the green - the corridor uses slate for the loss side rather than a
   red that appears nowhere else. */
#compare .cf-card{position:relative;overflow:hidden;border-radius:16px;padding:14px;
  background:linear-gradient(168deg,#eef4ff 0%,#e4ecfa 62%,#dde7f8 100%);border:1px solid rgba(15,23,42,.07);
  box-shadow:0 14px 30px rgba(15,23,42,.1)}
#compare .cf-card::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.5;
  background-image:radial-gradient(circle, rgba(37,84,212,.16) 1px, transparent 1px);background-size:14px 14px;
  -webkit-mask-image:radial-gradient(120% 90% at 25% 0%,#000 18%,transparent 78%);mask-image:radial-gradient(120% 90% at 25% 0%,#000 18%,transparent 78%)}
#compare .cf-sheen{position:absolute;inset:0;z-index:2;pointer-events:none;overflow:hidden}
#compare .cf-sheen i{position:absolute;top:-40%;left:-45%;width:34%;height:180%;transform:rotate(16deg);
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.75),transparent);animation:cf-sheen 9s var(--ease-emphasis) infinite}
@keyframes cf-sheen{0%,76%{left:-45%}94%,100%{left:125%}}
#compare .cf-card__h{position:relative;z-index:1;display:flex;align-items:center;gap:11px;
  background:rgba(255,255,255,.96);border:1px solid rgba(15,23,42,.07);border-radius:11px;padding:9px 11px;
  box-shadow:0 8px 18px rgba(15,23,42,.07)}
#compare .cf-card__h img{width:28px;height:28px;border-radius:50%}
#compare .cf-card__h b{display:block;font-size:14px;letter-spacing:-.2px;color:var(--ink-1)}
#compare .cf-card__h span{display:block;font-family:var(--font-mono);font-size:9.5px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--ink-3);margin-top:2px}
#compare .cf-corr{position:relative;z-index:1;margin-top:9px;background:rgba(255,255,255,.96);border:1px solid rgba(15,23,42,.07);
  border-radius:11px;padding:11px;box-shadow:0 8px 18px rgba(15,23,42,.07)}
#compare .cf-bar{position:relative;height:10px;border-radius:100px;background:rgba(15,23,42,.07);overflow:hidden;display:flex}
#compare .cf-bar i{display:block;height:100%;width:0;transition:width .7s var(--ease-emphasis)}
#compare .cf-bar .loss{background:linear-gradient(90deg,#33527d,#5b7aa8)}
#compare .cf-bar .gain{margin-left:auto;background:linear-gradient(90deg,#22c58e,#0e9c6f)}
#compare .cf-bar .daily{position:absolute;top:-3px;bottom:-3px;width:2px;background:var(--dv-blue-deep);border-radius:2px;
  left:0;transition:left .7s var(--ease-emphasis);box-shadow:0 0 0 3px rgba(51,82,125,.16)}
#compare .cf-corr__l{display:flex;justify-content:space-between;gap:8px;margin-top:10px;font-family:var(--font-mono);font-size:9.5px;
  letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3)}
#compare .cf-corr__l b{display:block;font-family:var(--font-body);font-size:12.5px;font-weight:700;letter-spacing:0;margin-top:3px;
  font-variant-numeric:tabular-nums;color:var(--ink-1)}
#compare .cf-corr__l .loss b{color:var(--dv-blue-deep)}
#compare .cf-corr__l .mid{text-align:center}
#compare .cf-corr__l .gain{text-align:right}
#compare .cf-corr__l .gain b{color:#0e9c6f}
#compare .cf-daily{position:relative;z-index:1;margin-top:9px;display:flex;align-items:center;justify-content:space-between;gap:8px;
  background:rgba(255,255,255,.96);border:1px solid rgba(15,23,42,.07);border-radius:11px;padding:9px 11px;
  font-family:var(--font-mono);font-size:10px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3);
  box-shadow:0 8px 18px rgba(15,23,42,.07)}
#compare .cf-daily b{font-family:var(--font-body);font-size:12.5px;color:var(--dv-blue-deep);letter-spacing:0;font-variant-numeric:tabular-nums}
#compare .cf-price{display:flex;align-items:baseline;gap:10px}
#compare .cf-price .v{font-size:clamp(32px,3.8vw,46px);font-weight:800;letter-spacing:-2px;line-height:1;font-variant-numeric:tabular-nums}
#compare .cf-price .o{font-size:13px;color:var(--ink-3)}
#compare .cf-kick{font-family:var(--font-mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3)}
#compare .cf-specs{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
#compare .cf-specs li{display:flex;align-items:baseline;justify-content:space-between;gap:12px;padding:8px 0;
  border-top:1px solid rgba(15,23,42,.08);font-size:13px;color:var(--ink-3)}
#compare .cf-specs li b{font-size:13.5px;font-weight:700;color:var(--ink-1);text-align:right;font-variant-numeric:tabular-nums}
#compare .cf-specs li b em{display:block;font-style:normal;font-family:var(--font-mono);font-size:10px;font-weight:500;color:var(--ink-3);margin-top:1px}
#compare .cf-specs li{opacity:0;transform:translateY(6px);animation:cf-rowin .42s var(--ease-emphasis) forwards}
#compare .cf-specs li:nth-child(1){animation-delay:.02s}
#compare .cf-specs li:nth-child(2){animation-delay:.06s}
#compare .cf-specs li:nth-child(3){animation-delay:.1s}
#compare .cf-specs li:nth-child(4){animation-delay:.14s}
#compare .cf-specs li:nth-child(5){animation-delay:.18s}
#compare .cf-specs li:nth-child(6){animation-delay:.22s}
#compare .cf-specs li:nth-child(7){animation-delay:.26s}
#compare .cf-specs li:nth-child(8){animation-delay:.3s}
#compare .cf-specs li:nth-child(9){animation-delay:.34s}
#compare .cf-specs li:nth-child(10){animation-delay:.38s}
@keyframes cf-rowin{to{opacity:1;transform:none}}
/* the panel keeps the height of its tallest combination, measured once, so the
   section does not jump when the market changes */
#compare .cf-panel{min-height:var(--cf-h,0px)}
#compare .cf-specs{min-height:var(--cf-sh,0px)}
#compare .cf-card{transition:box-shadow .4s ease}
#compare .cf-card.is-pulse{box-shadow:0 14px 30px rgba(15,23,42,.1),0 0 0 3px rgba(37,84,212,.16)}
#compare .cf-sum .x-cta{height:50px;padding:0 60px 0 24px;font-size:15px;margin-top:2px}
#compare .cf-fine{font-size:12px;line-height:1.55;color:var(--ink-3);margin:0}
@media (max-width:1000px){
  #compare .cf-top{grid-template-columns:1fr}
  #compare .cf-panel{grid-template-columns:1fr}
  #compare .cf-sum{border-left:0;border-top:1px solid rgba(15,23,42,.08)}
}
@media(prefers-reduced-motion:reduce){#compare .cf-sheen i{animation:none}#compare .cf-note i{animation:none}
  #compare .cf-specs li{opacity:1;transform:none;animation:none}#compare .cf-thumb{transition:none}}


#card{overflow:hidden}
#card .dcx-top{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(24px,4vw,64px);align-items:end}
#card .dcx-head h2{margin:.35em 0 0}
#card .dcx-intro{display:flex;flex-direction:column;align-items:flex-start;gap:22px;padding-bottom:6px}
#card .dcx-intro .lead{margin:0}
#card .dcx-cta{display:inline-flex;align-items:center;gap:9px;border:1px solid rgba(15,23,42,.18);border-radius:100px;padding:12px 22px;font-weight:650;font-size:15px;color:var(--ink-1);text-decoration:none;transition:background .2s,border-color .2s}
#card .dcx-cta:hover{background:rgba(15,23,42,.04);border-color:rgba(15,23,42,.32)}
#card .dcx-stage{display:grid;grid-template-columns:1fr minmax(340px,620px) 1fr;gap:clamp(18px,3vw,52px);align-items:center;margin-top:clamp(28px,4vw,54px)}
#card .dcx-col{display:flex;flex-direction:column;gap:clamp(30px,4vw,56px);justify-content:center}
#card .dcx-left{text-align:right}
#card .dcx-feat .t{font-weight:700;font-size:18px;color:var(--ink-1);letter-spacing:-.2px}
#card .dcx-feat .d{margin-top:7px;font-size:14.5px;line-height:1.5;color:rgba(15,23,42,.6)}
#card .dcx-cardwrap{position:relative;display:flex;align-items:center;justify-content:center;padding:14px 0}
#card .dcx-card{position:relative;z-index:2;width:100%;transform-style:preserve-3d;will-change:transform;
  transition:transform var(--dur-slow,.55s) var(--ease-emphasis,cubic-bezier(.22,1,.36,1))}
#card .dcx-card img{display:block;width:100%;height:auto;filter:drop-shadow(0 34px 46px rgba(15,23,42,.34))}
#card .dcx-banner{display:flex;align-items:center;gap:22px;margin-top:clamp(34px,4vw,56px);
  border:1px solid rgba(15,23,42,.1);border-radius:18px;padding:20px 24px;background:rgba(15,23,42,.022)}
#card .dcx-banner .b-badge{flex:0 0 auto;width:56px;height:56px;border-radius:14px;border:1px dashed rgba(15,23,42,.22);
  display:flex;align-items:center;justify-content:center;color:rgba(15,23,42,.4)}
#card .dcx-banner .b-badge svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.7}
#card .dcx-banner .b-body{flex:1 1 auto;min-width:0}
#card .dcx-banner .b-kick{display:inline-flex;align-items:center;gap:8px;font-size:11.5px;font-weight:700;
  letter-spacing:1.1px;text-transform:uppercase;color:#3550e6}
#card .dcx-banner .b-kick::before{content:"";width:7px;height:7px;border-radius:50%;background:#3550e6}
#card .dcx-banner .b-text{margin-top:6px;font-size:14.5px;line-height:1.5;color:rgba(15,23,42,.64)}
#card .dcx-banner .b-text b{color:var(--ink-1);font-weight:700}
#card .dcx-banner .b-cta{flex:0 0 auto;display:inline-flex;align-items:center;gap:8px;border:1px solid rgba(15,23,42,.18);
  border-radius:100px;padding:12px 22px;font-weight:650;font-size:14px;color:var(--ink-1);text-decoration:none;
  transition:background .2s,border-color .2s}
#card .dcx-banner .b-cta:hover{background:rgba(15,23,42,.04);border-color:rgba(15,23,42,.32)}
@media (max-width:720px){#card .dcx-banner{flex-direction:column;align-items:flex-start;gap:16px}
  #card .dcx-banner .b-cta{width:100%;justify-content:center}}
@media (max-width:900px){
  #card .dcx-top{grid-template-columns:1fr}
  #card .dcx-stage{grid-template-columns:1fr;gap:26px}
  #card .dcx-left{text-align:left}
  #card .dcx-col{gap:26px}
  #card .dcx-cardwrap{order:-1}
}


#card .dcx-cardwrap{overflow:visible}
#card .dcx-cardfloat{position:relative;animation:dcx-float 6s ease-in-out infinite;will-change:transform}
#card .dcx-card{position:relative;z-index:2;background:transparent!important}
#card .dcx-cur{position:absolute;z-index:3;display:grid;place-items:center;width:46px;height:46px;border-radius:14px;
  background:#fff;color:var(--dv-blue-deep);font-weight:800;font-size:20px;line-height:1;
  box-shadow:0 16px 34px -12px rgba(15,23,42,.32);border:1px solid rgba(15,23,42,.05)}
#card .dcx-cur--usd{left:-5%;top:10%;animation:dcx-drA 7s ease-in-out infinite}
#card .dcx-cur--eur{left:0%;bottom:8%;animation:dcx-drB 8s ease-in-out infinite}
#card .dcx-cur--gbp{right:-4%;top:18%;animation:dcx-drB 6.5s ease-in-out infinite}
#card .dcx-cur--btc{right:0%;bottom:12%;color:#e0820a;animation:dcx-drA 7.5s ease-in-out infinite}
/* blue ledger button highlight */
#card .dcx-ledger{position:relative;border-radius:100px;animation:dcx-cta-pulse 2.8s ease-in-out infinite}
@keyframes dcx-cta-pulse{0%,100%{box-shadow:0 10px 26px rgba(37,84,212,.34)}50%{box-shadow:0 14px 36px rgba(37,84,212,.55),0 0 0 7px rgba(37,84,212,.10)}}
/* feature texts: pulsing accent + hover lift + colour shift */
#card .dcx-feat{transition:transform .25s var(--ease-emphasis,ease)}
#card .dcx-feat:hover{transform:translateY(-3px)}
#card .dcx-feat .t{transition:color .2s}
#card .dcx-feat:hover .t{color:#2554d4}
#card .dcx-feat .t::before{content:"";display:inline-block;width:7px;height:7px;margin-right:9px;border-radius:50%;background:#2554d4;vertical-align:middle;animation:dcx-dot 2.6s ease-out infinite}
#card .dcx-right .dcx-feat .t::before{background:#00b67a}
@keyframes dcx-dot{0%{box-shadow:0 0 0 0 rgba(37,84,212,.55)}70%{box-shadow:0 0 0 8px rgba(37,84,212,0)}100%{box-shadow:0 0 0 0 rgba(37,84,212,0)}}
#card .dcx-right .dcx-feat .t::before{animation-name:dcx-dot-g}
@keyframes dcx-dot-g{0%{box-shadow:0 0 0 0 rgba(0,182,122,.55)}70%{box-shadow:0 0 0 8px rgba(0,182,122,0)}100%{box-shadow:0 0 0 0 rgba(0,182,122,0)}}
@keyframes dcx-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}
@keyframes dcx-pulse{0%,100%{opacity:.55;transform:translate(-50%,-50%) scale(1)}50%{opacity:.9;transform:translate(-50%,-50%) scale(1.06)}}
@keyframes dcx-drA{0%,100%{transform:translateY(0)}50%{transform:translateY(-11px)}}
@keyframes dcx-drB{0%,100%{transform:translateY(0)}50%{transform:translateY(9px)}}
@media(prefers-reduced-motion:reduce){#card .dcx-cardfloat,#card .dcx-cur,#card .dcx-ledger,#card .dcx-feat .t::before{animation:none}}
@media(max-width:860px){#card .dcx-cur{display:none}}


/* ---- DRAMATIC DARK CARD SHOWCASE ---- */
#card{position:relative;overflow:hidden;color:#fff;
  background:radial-gradient(130% 100% at 50% -12%, #1a2c4f 0%, #0d1526 46%, #070a12 100%) !important}
/* ---- moving background (shared drift look, dark aurora) ---- */
#card .cardbg{position:absolute;inset:0;z-index:0;overflow:hidden}
#card .bg__canvas{position:absolute;inset:0;width:100%;height:100%;display:block;opacity:0;transition:opacity 1.1s ease}
#card .bg__canvas.is-live{opacity:1}
body.gl-on #card .bg__aurora{display:none}
#card .bg__aurora{position:absolute;inset:-25%;filter:blur(90px);opacity:.9}
#card .blob{position:absolute;border-radius:50%;mix-blend-mode:screen;will-change:transform}
#card .blob--a{width:64vmax;height:64vmax;left:-16%;top:-24%;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}
#card .blob--b{width:54vmax;height:54vmax;right:-14%;top:0%;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}
#card .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}
#card .blob--d{width:38vmax;height:38vmax;left:44%;top:22%;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}
#card .bg__grid{position:absolute;inset:0;background-image:radial-gradient(circle, rgba(255,255,255,.05) 1px, transparent 1px);background-size:24px 24px;-webkit-mask:radial-gradient(120% 80% at 50% 24%,#000 28%,transparent 74%);mask:radial-gradient(120% 80% at 50% 24%,#000 28%,transparent 74%)}
@media(prefers-reduced-motion:reduce){#card .blob{animation:none}}
#card > .wrap{position:relative;z-index:1}
/* text -> light */
#card .eyebrow{color:#8fb0da !important}
#card .dcx-top h2{color:#fff !important;font-size:clamp(36px,5vw,64px) !important;letter-spacing:-1.6px;line-height:1.02}
#card .dcx-intro .lead{color:rgba(255,255,255,.68) !important}
#card .dcx-feat .t{color:#fff !important;font-size:19px !important}
#card .dcx-feat .d{color:rgba(255,255,255,.6) !important}
/* banner -> dark */
#card .dcx-banner{background:rgba(255,255,255,.04) !important;border-color:rgba(255,255,255,.12) !important}
#card .dcx-banner .b-text{color:rgba(255,255,255,.62) !important}
#card .dcx-banner .b-text b{color:#fff !important}
#card .dcx-banner .b-badge{border-color:rgba(255,255,255,.22) !important;color:rgba(255,255,255,.55) !important}
#card .dcx-banner .b-cta{color:#fff !important;border-color:rgba(255,255,255,.24) !important}
#card .dcx-banner .b-cta:hover{background:rgba(255,255,255,.08) !important;border-color:rgba(255,255,255,.4) !important}
/* BIG card */
#card .dcx-stage{grid-template-columns:1fr minmax(460px,820px) 1fr !important;gap:clamp(16px,2.4vw,44px) !important}
#card .dcx-card{background:transparent !important}
#card .dcx-card img{filter:drop-shadow(0 50px 70px rgba(0,0,0,.65)) drop-shadow(0 0 30px rgba(60,110,240,.10)) !important}
/* BIG glow behind card (reads as light on dark, never a box) */
#card .dcx-glow{position:absolute;left:50%;top:50%;width:128%;height:118%;transform:translate(-50%,-50%);z-index:0;border-radius:50%;
  background:radial-gradient(closest-side, rgba(64,120,245,.5), rgba(37,84,212,.2) 44%, rgba(37,84,212,0) 72%);filter:blur(34px);
  animation:dcx-pulse 6s ease-in-out infinite}
#card .dcx-cardfloat{position:relative;animation:dcx-float 6s ease-in-out infinite;will-change:transform}
/* currency chips glow on dark */
#card .dcx-cur{box-shadow:0 18px 40px -10px rgba(0,0,0,.5),0 0 0 1px rgba(255,255,255,.06) !important}
/* feature hover on dark */
#card .dcx-feat:hover .t{color:#9db8e8 !important}
@keyframes dcx-pulse{0%,100%{opacity:.7;transform:translate(-50%,-50%) scale(1)}50%{opacity:1;transform:translate(-50%,-50%) scale(1.05)}}
@media(prefers-reduced-motion:reduce){#card .dcx-glow{animation:none}}
/* the drama grid above is !important; on narrow screens it has to fold back to one column */
@media(max-width:900px){#card .dcx-stage{grid-template-columns:1fr !important;gap:26px !important}#card .dcx-cardwrap{max-width:520px;margin:0 auto;width:100%}}


/* Why Dolvero. Xoala's bento: one dark hero tile, white tiles around it, an arrow in
   every corner, a chip row of facts under the headline. Every tile carries its own
   motion, started only when the section is on screen; nothing here is a stat the
   ledger section below already prints. */
#why .why-head{text-align:center;max-width:900px;margin:0 auto var(--space-9)}
#why .why-head h2{margin:var(--space-4) 0 0}
#why .why-head .lead{margin:var(--space-5) auto 0;max-width:66ch}
#why .why-chips{list-style:none;display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin:var(--space-7) 0 0;padding:0}
#why .why-chips .chip{font-size:13px;padding:8px 14px;opacity:0;transform:translateY(10px);transition:opacity .5s,transform .5s}
#why.is-in .why-chips .chip{opacity:1;transform:none}
#why.is-in .why-chips .chip:nth-child(2){transition-delay:.06s}#why.is-in .why-chips .chip:nth-child(3){transition-delay:.12s}
#why.is-in .why-chips .chip:nth-child(4){transition-delay:.18s}#why.is-in .why-chips .chip:nth-child(5){transition-delay:.24s}#why.is-in .why-chips .chip:nth-child(6){transition-delay:.3s}
#why .why-chips .chip svg{width:14px;height:14px;stroke:var(--dv-green);fill:none;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}

#why .why-bento{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));grid-auto-rows:minmax(200px,auto);gap:16px}
#why .wt{position:relative;background:#fff;border:1px solid var(--line);border-radius:var(--radius-xl);padding:24px;overflow:hidden;display:flex;flex-direction:column;gap:12px;min-width:0;
  box-shadow:0 22px 44px -34px rgba(15,23,42,.28);transition:transform .55s cubic-bezier(.2,.7,.2,1),box-shadow .55s}
#why .wt:hover{transform:translateY(-4px);box-shadow:0 34px 60px -34px rgba(15,23,42,.36)}
#why .wt::before{content:"";position:absolute;top:-40%;bottom:-40%;left:-30%;width:26%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.7),transparent);transform:skewX(-18deg) translateX(-160%);pointer-events:none;z-index:1;opacity:0}
#why.is-in .wt::before{animation:why-sweep 9s cubic-bezier(.4,0,.2,1) infinite;animation-delay:calc(var(--k,0)*1.1s)}
@keyframes why-sweep{0%{transform:skewX(-18deg) translateX(-160%);opacity:0}6%{opacity:1}22%{transform:skewX(-18deg) translateX(620%);opacity:0}100%{transform:skewX(-18deg) translateX(620%);opacity:0}}
#why .wt>*{position:relative;z-index:2}
#why .wt h3{font-family:var(--font-display);font-size:19px;font-weight:700;letter-spacing:-.01em;margin:0;color:var(--ink-1);padding-right:44px}
#why .wt p{margin:0;font-size:14px;line-height:1.55;color:var(--ink-2)}
#why .wt-arrow{position:absolute;top:18px;right:18px;width:34px;height:34px;border-radius:50%;border:1px solid var(--line);background:#fff;display:grid;place-items:center;color:var(--ink-1);transition:background .3s,color .3s,transform .3s}
#why .wt-arrow svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
#why .wt:hover .wt-arrow{background:var(--dv-blue);color:#fff;border-color:var(--dv-blue);transform:translate(2px,-2px)}
#why .wt-vis{margin-top:auto;position:relative}
#why .wt--spread .wt-vis{margin:auto 0;padding:26px 0 14px}
#why .wt--spread .sp-rows{gap:24px}
#why .wt--spread .sp-rows li i{height:12px}
#why .wt--spread .sp-rows li{font-size:14.5px}
#why .sp-strip{margin-top:auto;padding-top:16px;border-top:1px solid var(--line-2);overflow:hidden;-webkit-mask:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
#why .sp-strip ul{list-style:none;margin:0;padding:0;display:flex;gap:28px;width:max-content;animation:why-strip 38s linear infinite}
#why .sp-strip li{display:inline-flex;align-items:center;gap:8px;font-family:var(--font-mono);font-size:12px;color:var(--ink-3);white-space:nowrap}
#why .sp-strip li b{color:var(--ink-1);font-weight:600}#why .sp-strip li img{width:16px;height:16px}
@keyframes why-strip{to{transform:translateX(-50%)}}
@media(prefers-reduced-motion:reduce){#why .sp-strip ul{animation:none}}
#why .wt--dark{background:linear-gradient(160deg,#101c38 0%,#0b1120 70%);border-color:rgba(147,184,255,.18);color:#fff}
#why .wt--dark h3{color:#fff}#why .wt--dark p{color:rgba(255,255,255,.7)}
#why .wt--dark .wt-arrow{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.16);color:#fff}
#why .wt--spread::after{content:"";position:absolute;inset:auto -20% -40% auto;width:60%;aspect-ratio:1;border-radius:50%;background:radial-gradient(closest-side,rgba(74,111,165,.16),transparent);pointer-events:none}

/* tile placement */
#why .wt--spread{grid-column:span 7;grid-row:span 2}
#why .wt--backed{grid-column:span 5}
#why .wt--markets{grid-column:span 5}
#why .wt--platform,#why .wt--rules,#why .wt--venue{grid-column:span 4}
#why .wt--sign{grid-column:span 12;flex-direction:row;align-items:center;gap:28px;flex-wrap:wrap}
@media(max-width:1080px){#why .wt--spread{grid-column:span 12;grid-row:span 1}#why .wt--backed,#why .wt--markets{grid-column:span 6}#why .wt--platform,#why .wt--rules,#why .wt--venue{grid-column:span 4}}
@media(max-width:820px){#why .wt--platform,#why .wt--rules,#why .wt--venue{grid-column:span 6}}
@media(max-width:600px){#why .why-bento>.wt{grid-column:span 12}#why .wt--sign{flex-direction:column;align-items:flex-start}}

/* 1 · spreads: the number falls to the raw feed, the tape ticks, the bars fill */
#why .sp{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:28px;align-items:center}
@media(max-width:600px){#why .sp{grid-template-columns:1fr}}
#why .sp-big{display:flex;flex-direction:column;gap:6px;min-width:0;overflow:hidden}
#why .sp-num{font-family:var(--font-display);font-size:clamp(48px,6.2vw,92px);font-weight:700;letter-spacing:-.04em;line-height:.95;color:var(--dv-blue);font-variant-numeric:tabular-nums;white-space:nowrap}
#why .sp-num small{font-size:.32em;font-weight:600;letter-spacing:0;color:var(--ink-3);margin-left:8px}
#why .sp-sym{font-size:12px;letter-spacing:.11em;text-transform:uppercase;color:var(--ink-3);font-weight:600}
#why .sp-tape{display:inline-flex;align-items:center;gap:10px;margin-top:14px;padding:8px 12px;border-radius:var(--radius-pill);background:var(--dv-blue-soft);border:1px solid var(--line);font-family:var(--font-mono);font-size:13px;color:var(--ink-1);width:max-content;max-width:100%}
#why .sp-tape .b{color:var(--dv-blue)}#why .sp-tape .a{color:#0a7d57}
#why .sp-tape .live{display:inline-flex;align-items:center;gap:6px;white-space:nowrap;font-family:var(--font-body);font-size:11px;color:var(--ink-3);letter-spacing:.04em}
#why .sp-tape .live i{width:7px;height:7px;border-radius:50%;background:var(--dv-green);box-shadow:0 0 0 0 rgba(0,182,122,.6);animation:why-ping 1.8s infinite}
@keyframes why-ping{0%{box-shadow:0 0 0 0 rgba(0,182,122,.55)}100%{box-shadow:0 0 0 9px rgba(0,182,122,0)}}
#why .sp-rows{list-style:none;margin:0;padding:0;display:grid;gap:14px}
#why .sp-rows li{display:grid;grid-template-columns:68px 1fr 78px;align-items:center;gap:12px;font-size:13.5px;color:var(--ink-2)}
#why .sp-rows li span{font-family:var(--font-mono);font-weight:600;color:var(--ink-1)}
#why .sp-rows li i{display:block;height:8px;border-radius:3px;background:rgba(15,23,42,.07);overflow:hidden}
#why .sp-rows li i b{display:block;height:100%;width:0;border-radius:3px;background:linear-gradient(90deg,#2554d4,#4f7df0 60%,#8ec5ff);transition:width 1.1s cubic-bezier(.2,.7,.2,1)}
#why.is-in .sp-rows li i b{width:var(--w)}
#why.is-in .sp-rows li:nth-child(2) i b{transition-delay:.1s}#why.is-in .sp-rows li:nth-child(3) i b{transition-delay:.2s}#why.is-in .sp-rows li:nth-child(4) i b{transition-delay:.3s}#why.is-in .sp-rows li:nth-child(5) i b{transition-delay:.4s}
#why .sp-rows li em{font-style:normal;font-family:var(--font-mono);text-align:right;color:var(--ink-1)}
#why .sp-big{transition:opacity .3s,transform .3s}#why .sp-big.is-swap{opacity:0;transform:translateY(6px)}
#why .sp-tape img{width:18px;height:18px;margin-right:2px}
#why .sp-ribbon{width:100%;height:auto;display:block;margin-top:16px;border-radius:12px;background:var(--dv-blue-soft);border:1px solid var(--line-2)}
#why .sp-gapfill{fill:rgba(74,111,165,.22)}#why .sp-askline{stroke:#0a7d57;stroke-width:1.6;fill:none;stroke-linejoin:round}#why .sp-bidline{stroke:var(--dv-blue);stroke-width:1.6;fill:none;stroke-linejoin:round}
#why .sp-lbl{font:600 9px var(--font-mono);fill:var(--ink-3);letter-spacing:.06em}
#why .sp-tagbox{fill:#fff;stroke:rgba(74,111,165,.45)}#why .sp-tagtxt{font:600 9.5px var(--font-mono);fill:var(--dv-blue)}
#why .sp-rows li{transition:transform .4s}#why .sp-rows li.is-on{transform:translateX(4px)}#why .sp-rows li.is-on span,#why .sp-rows li.is-on em{color:var(--dv-blue)}#why .sp-rows li.is-on i b{box-shadow:0 0 0 3px rgba(74,111,165,.18)}
#why .wt-cert{display:inline-flex;align-items:center;gap:6px;width:max-content;font-size:11.5px;font-weight:600;color:#0a7d57;background:var(--dv-green-soft);border-radius:var(--radius-pill);padding:4px 10px}
#why .wt-cert svg{width:13px;height:13px;stroke:currentColor;fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
#why .sp-foot{margin-top:12px;font-size:12px;color:rgba(255,255,255,.55)}
#why .sp-foot b{color:rgba(255,255,255,.85);font-weight:600}

/* 2 · backed: flow runs brokerage → Dolvero ← hedge fund, pulses leave the centre */
#why .bk{margin-top:4px}
#why .bk svg{width:100%;height:auto;display:block;overflow:visible}
#why .bk-line{stroke:rgba(74,111,165,.35);stroke-width:2;fill:none}
#why .bk-flow{stroke:var(--dv-blue);stroke-width:2;fill:none;stroke-dasharray:6 10;stroke-linecap:round;animation:why-flow 1.6s linear infinite}
@keyframes why-flow{to{stroke-dashoffset:-32}}
#why .bk-node{fill:#fff;stroke:rgba(15,23,42,.14);stroke-width:1}
#why .bk-t{font:600 11px var(--font-body);fill:var(--ink-1)}
#why .bk-s{font:500 9.5px var(--font-body);fill:var(--ink-3)}
#why .bk-pulse{fill:none;stroke:var(--dv-blue);stroke-width:1.5;opacity:0;transform-origin:160px 62px;animation:why-pulse 2.8s ease-out infinite}
#why .bk-pulse:nth-of-type(2){animation-delay:1.4s}
#why .bk-core{transform-origin:160px 62px;animation:why-breathe 2.8s ease-in-out infinite}
@keyframes why-breathe{50%{transform:scale(1.045)}}
#why .bk-pkt{fill:var(--dv-blue)}#why .bk-pkt.alt{fill:var(--dv-green)}
@keyframes why-pulse{0%{transform:scale(.55);opacity:.55}100%{transform:scale(1.9);opacity:0}}

/* 3 · markets: the ring of instruments turns, the core names the market */
#why .mk{position:relative;display:grid;place-items:center;padding:6px 0 2px}
#why .mk-ring{position:relative;width:196px;height:196px;animation:why-spin 32s linear infinite}
#why .mk-ic{position:absolute;top:50%;left:50%;width:36px;height:36px;margin:-18px 0 0 -18px;border-radius:50%;background:#fff;border:1px solid var(--line);box-shadow:0 6px 14px -8px rgba(15,23,42,.3);display:grid;place-items:center;
  transform:rotate(calc(var(--i)*45deg)) translateX(84px) rotate(calc(var(--i)*-45deg))}
#why .mk-ic img{width:22px;height:22px;display:block;animation:why-unspin 32s linear infinite}
#why .mk-ic::after{content:"";position:absolute;inset:-4px;border-radius:50%;border:1.5px solid rgba(74,111,165,.45);opacity:0;animation:why-bob 3.2s ease-out infinite;animation-delay:calc(var(--i)*.4s)}
@keyframes why-bob{0%{transform:scale(.7);opacity:.8}60%{transform:scale(1.35);opacity:0}100%{opacity:0}}
@keyframes why-spin{to{transform:rotate(360deg)}}@keyframes why-unspin{to{transform:rotate(-360deg)}}
#why .mk-core{position:absolute;inset:50% auto auto 50%;transform:translate(-50%,-50%);width:112px;height:112px;border-radius:50%;background:linear-gradient(180deg,#4f7df0,#2554d4);color:#fff;display:grid;place-content:center;text-align:center;box-shadow:0 18px 30px -18px rgba(37,84,212,.7)}
#why .mk-core b{display:block;font-family:var(--font-display);font-size:17px;font-weight:700;letter-spacing:-.01em;transition:opacity .35s,transform .35s}
#why .mk-core small{display:block;font-size:10.5px;color:rgba(255,255,255,.75);margin-top:2px;transition:opacity .35s}
#why .mk-core.is-swap b{opacity:0;transform:translateY(6px)}#why .mk-core.is-swap small{opacity:0}
#why .mk-ring::before{content:"";position:absolute;inset:0;border-radius:50%;border:1px dashed rgba(74,111,165,.35)}

/* 4 · platform: the knob walks between our terminal and MT5 */
#why .pf-switch{position:relative;display:grid;grid-template-columns:1fr 1fr;border:1px solid var(--line);border-radius:var(--radius-pill);padding:5px;background:var(--dv-blue-soft)}
#why .pf-knob{position:absolute;top:5px;bottom:5px;left:5px;width:calc(50% - 5px);border-radius:var(--radius-pill);background:#fff;box-shadow:0 8px 18px -10px rgba(15,23,42,.35);transition:transform .6s cubic-bezier(.2,.7,.2,1)}
#why .pf-switch.is-mt5 .pf-knob{transform:translateX(100%)}
#why .pf-opt{position:relative;display:flex;align-items:center;justify-content:center;gap:8px;padding:9px 6px;font-size:13px;font-weight:600;color:var(--ink-3);transition:color .4s;white-space:nowrap}
#why .pf-opt img{width:20px;height:20px;transition:transform .5s}
#why .pf-switch:not(.is-mt5) .pf-opt:first-child img,#why .pf-switch.is-mt5 .pf-opt:last-child img{transform:scale(1.18)}
#why .pf-switch:not(.is-mt5) .pf-opt:first-child,#why .pf-switch.is-mt5 .pf-opt:last-child{color:var(--ink-1)}
#why .pf-line{margin-top:12px;font-size:13px;color:var(--ink-2);min-height:2.6em}
#why .pf-line span{display:block;transition:opacity .35s,transform .35s}#why .pf-line.is-swap span{opacity:0;transform:translateY(5px)}

/* 5 · rules: the equity line draws, a sample walks along it, the clock counts the minute */
#why .rl svg{width:100%;height:auto;display:block}
#why .rl-floor{stroke:var(--dv-red);stroke-width:1.2;stroke-dasharray:4 5;opacity:.7}
#why .rl-fl{font:600 9px var(--font-mono);fill:var(--dv-red)}
#why .rl-line{stroke:var(--dv-blue);stroke-width:2.2;fill:none;stroke-linecap:round;stroke-linejoin:round}
#why .rl-fill{fill:url(#why-rl-g);opacity:0;transition:opacity 1s .9s}#why.is-in .rl-fill{opacity:1}
#why .rl-dot{fill:#fff;stroke:var(--dv-blue);stroke-width:2.2}
#why .rl-ping{fill:none;stroke:var(--dv-blue);stroke-width:1.5;opacity:0}
#why .rl-meta{display:flex;align-items:center;gap:8px;margin-top:10px;font-size:12.5px;color:var(--ink-2);flex-wrap:wrap}
#why .rl-meta b{font-family:var(--font-mono);color:var(--ink-1);font-weight:600;min-width:2ch;display:inline-block;text-align:right}
#why .rl-ev{margin-left:auto;font-family:var(--font-mono);font-size:11px;color:var(--ink-3);white-space:nowrap}

/* 6 · venue: three rows, the event contract flips from its price to its settlement */
#why .vn-rows{list-style:none;margin:0;padding:0;display:grid;gap:8px}
#why .vn-rows li{display:grid;grid-template-columns:30px 1fr auto;align-items:center;gap:10px;padding:8px 10px;border:1px solid var(--line-2);border-radius:var(--radius-md);background:var(--dv-blue-soft);transition:background .5s,border-color .5s,transform .5s}
#why .vn-rows li.is-hot{background:#fff;border-color:rgba(74,111,165,.45);transform:translateX(4px)}
#why .vn-rows img{width:26px;height:26px;display:block}
#why .vn-rows b{display:block;font-size:13px;color:var(--ink-1)}#why .vn-rows small{display:block;font-size:11px;color:var(--ink-3)}
#why .vn-flip{position:relative;width:104px;height:26px;perspective:400px;font-family:var(--font-mono);font-size:11.5px}
#why .vn-flip i{position:absolute;inset:0;display:grid;place-items:center;border-radius:6px;font-style:normal;backface-visibility:hidden;transition:transform .7s cubic-bezier(.2,.7,.2,1)}
#why .vn-flip i:first-child{background:#fff;border:1px solid var(--line);color:var(--ink-1)}
#why .vn-flip i:last-child{background:var(--dv-green-soft);color:#0a7d57;transform:rotateX(180deg)}
#why .vn-flip.is-set i:first-child{transform:rotateX(-180deg)}#why .vn-flip.is-set i:last-child{transform:rotateX(0)}
#why .vn-tag{font-family:var(--font-mono);font-size:11px;color:var(--ink-3)}

/* 7 · sign: the signature writes itself, the stamp lands */
#why .sg{flex:0 0 280px;position:relative;height:92px;border:1px solid var(--line);border-radius:var(--radius-lg);background:#fff;overflow:hidden}
#why .sg-ink{position:absolute;inset:8px 24px 8px 18px;background:url(/assets/home/cert-signature-ink.png) left center/contain no-repeat;clip-path:inset(0 100% 0 0);transition:clip-path 1.7s cubic-bezier(.3,.6,.2,1) .2s}
#why.is-in .sg-ink{clip-path:inset(0 0 0 0)}
#why .sg.is-replay .sg-ink{clip-path:inset(0 100% 0 0);transition:none}
#why .sg.is-replay .sg-stamp{opacity:0;transform:rotate(-9deg) scale(1.8);transition:none}
#why .sg-rule{position:absolute;left:18px;right:18px;bottom:16px;border-top:1px solid var(--line)}
#why .sg-stamp{position:absolute;right:14px;top:12px;padding:4px 8px;border:2px solid var(--dv-blue);border-radius:6px;color:var(--dv-blue);font-family:var(--font-mono);font-size:10px;letter-spacing:.14em;font-weight:700;transform:rotate(-9deg) scale(1.8);opacity:0;transition:transform .45s cubic-bezier(.2,.9,.3,1.4) 1.9s,opacity .3s 1.9s}
#why.is-in .sg-stamp{transform:rotate(-9deg) scale(1);opacity:1}
#why .sg-copy{flex:1 1 320px;display:flex;flex-direction:column;gap:10px}
#why .sg-ctas{display:flex;gap:10px;flex-wrap:wrap;margin-left:auto}
@media(max-width:600px){#why .sg{flex-basis:auto;width:100%}#why .sg-copy{flex-basis:auto}#why .sg-ctas{margin-left:0}}
@media(prefers-reduced-motion:reduce){
  #why .mk-ring,#why .mk-ic img,#why .mk-ic::after,#why .bk-flow,#why .bk-pulse,#why .bk-core,#why .sp-tape .live i,#why.is-in .wt::before{animation:none}
  #why .rl-line{stroke-dashoffset:0;transition:none}#why .sg-ink{clip-path:none;transition:none}#why .sg-stamp{opacity:1;transform:rotate(-9deg);transition:none}
  #why .sp-rows li i b{width:var(--w);transition:none}#why .why-chips .chip{opacity:1;transform:none;transition:none}
}


/* Xoala's anatomy: one dark stage, eyebrow and headline left, the paragraph and
   the button right, a moving strip of facts under it, then a bento of white
   cards. What is different here is that the board is not a mock: the rows and
   the two figures are read from the public ledger when the section scrolls in. */
#transparency{padding:clamp(40px,5vw,84px) 0}
#transparency .tp-stage{position:relative;overflow:hidden;border-radius:28px;color:#fff;
  background:radial-gradient(120% 120% at 88% -14%, #16264a 0%, #0b1221 48%, #070b13 100%);
  padding:clamp(26px,3.4vw,52px) 0;box-shadow:0 30px 70px rgba(7,12,22,.28)}
#transparency .tp-pad{padding:0 clamp(22px,3.4vw,52px)}
/* the hero's ground, drifting behind the cards */
#transparency .tp-bg{position:absolute;inset:0;z-index:0;overflow:hidden;
  background:radial-gradient(120% 120% at 88% -14%, #16264a 0%, #0b1221 48%, #070b13 100%)}
#transparency .tp-bg .bg__canvas,#reviews .tp-bg .bg__canvas,#compare .tp-bg .bg__canvas{position:absolute;inset:0;width:100%;height:100%;display:block;opacity:0;transition:opacity 1.1s ease}
#transparency .tp-bg .bg__canvas.is-live,#reviews .tp-bg .bg__canvas.is-live,#compare .tp-bg .bg__canvas.is-live{opacity:1}
body.gl-on #transparency .tp-bg .bg__aurora,body.gl-on #reviews .tp-bg .bg__aurora,body.gl-on #compare .tp-bg .bg__aurora{display:none}
#transparency .tp-bg .bg__aurora,#reviews .tp-bg .bg__aurora,#compare .tp-bg .bg__aurora{position:absolute;inset:-25%;filter:blur(90px);opacity:.85}
#transparency .tp-bg .blob,#reviews .tp-bg .blob,#compare .tp-bg .blob{position:absolute;border-radius:50%;mix-blend-mode:screen;will-change:transform}
#transparency .tp-bg .blob--a,#reviews .tp-bg .blob--a,#compare .tp-bg .blob--a{width:60vmax;height:60vmax;left:-18%;top:-28%;background:radial-gradient(circle at 36% 36%, rgba(37,84,212,.62) 0%, rgba(37,84,212,.2) 42%, transparent 68%);animation:driftA 52s ease-in-out infinite}
#transparency .tp-bg .blob--b,#reviews .tp-bg .blob--b,#compare .tp-bg .blob--b{width:50vmax;height:50vmax;right:-16%;top:-6%;background:radial-gradient(circle at 60% 40%, rgba(79,125,240,.5) 0%, rgba(79,125,240,.14) 44%, transparent 70%);animation:driftB 64s ease-in-out infinite}
#transparency .tp-bg .blob--c,#reviews .tp-bg .blob--c,#compare .tp-bg .blob--c{width:46vmax;height:46vmax;left:22%;bottom:-30%;background:radial-gradient(circle at 50% 50%, rgba(0,182,122,.22) 0%, rgba(74,111,165,.1) 46%, transparent 72%);animation:driftC 46s ease-in-out infinite}
#transparency .tp-bg .blob--d,#reviews .tp-bg .blob--d,#compare .tp-bg .blob--d{width:34vmax;height:34vmax;left:46%;top:10%;background:radial-gradient(circle at 50% 50%, rgba(28,47,79,.7) 0%, rgba(28,47,79,.22) 50%, transparent 74%);animation:driftD 58s ease-in-out infinite}
#transparency .tp-bg .bg__grid,#reviews .tp-bg .bg__grid,#compare .tp-bg .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% 40%,#000 35%,transparent 78%);mask-image:radial-gradient(115% 85% at 50% 40%,#000 35%,transparent 78%)}
#transparency .tp-pad,#transparency .tp-rail{position:relative;z-index:1}
#transparency .tp-top{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(20px,3vw,48px);align-items:end}
#transparency .tp-top h2{color:#fff;margin:.3em 0 0;font-size:clamp(28px,3.4vw,44px);line-height:1.06;letter-spacing:-1.2px}
#transparency .tp-eyebrow{margin:0;font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#8fb2e6}
#transparency .tp-intro{display:flex;flex-direction:column;align-items:flex-start;gap:20px}
#transparency .tp-intro p{margin:0;font-size:15px;line-height:1.62;color:rgba(255,255,255,.66)}
#transparency .tp-intro .x-cta{height:48px;padding:0 58px 0 24px;font-size:15px}
/* the moving strip of facts, on the component the benefits rail already uses */
#transparency .tp-rail{margin:clamp(22px,2.6vw,34px) 0 clamp(20px,2.4vw,30px);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)}
#transparency .tp-rail .cfb-track{animation-duration:52s}
#transparency .tp-rail .cfb-item{display:inline-flex;align-items:center;gap:9px;white-space:nowrap;
  font-size:13.5px;font-weight:600;color:rgba(255,255,255,.82)}
#transparency .tp-rail .cfb-tick{display:grid;place-items:center;width:20px;height:20px;border-radius:50%;
  background:linear-gradient(180deg,#4f7df0,#2554d4);border:0;box-shadow:inset 0 1px 0 rgba(255,255,255,.35)}
#transparency .tp-rail .cfb-tick svg{width:11px;height:11px;fill:none;stroke:#fff;stroke-width:2.8;stroke-linecap:round;stroke-linejoin:round}
/* the bento */
#transparency .tp-bento{display:grid;grid-template-columns:repeat(12,1fr);gap:14px}
#transparency .tp-card{background:#fff;color:var(--ink-1);border-radius:20px;padding:20px 22px;
  box-shadow:0 18px 40px rgba(4,8,18,.28);min-width:0;display:flex;flex-direction:column;gap:12px}
#transparency .tp-card--ledger{grid-column:span 6;grid-row:span 2}
#transparency .tp-stat{grid-column:span 3}
#transparency .tp-methods{grid-column:span 6;justify-content:center;gap:14px}
#transparency .tp-head{display:flex;align-items:center;justify-content:space-between;gap:10px}
#transparency .tp-kick{display:inline-flex;align-items:center;gap:8px;font-family:var(--font-mono);font-size:10.5px;
  letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3)}
#transparency .tp-kick i{width:7px;height:7px;border-radius:50%;background:var(--dv-green);animation:pulse-live 2.4s ease-out infinite}
#transparency .tp-rows{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;justify-content:flex-start}
#transparency .tp-rows li{display:grid;grid-template-columns:1fr auto auto;align-items:center;gap:12px;
  padding:11px 0;border-top:1px solid var(--line);font-size:13.5px}
#transparency .tp-rows li:first-child{border-top:0}
#transparency .tp-rows .id{font-family:var(--font-mono);font-size:11.5px;color:var(--ink-3);overflow:hidden;text-overflow:ellipsis}
#transparency .tp-rows b{font-family:var(--font-mono);font-weight:700;color:var(--ink-1)}
#transparency .tp-rows .via{font-size:11px;font-weight:600;color:var(--ink-3);background:rgba(15,23,42,.05);
  border:1px solid rgba(15,23,42,.08);border-radius:100px;padding:3px 9px;white-space:nowrap}
#transparency .tp-note{margin-top:auto;padding-top:6px;font-size:12px;color:var(--ink-3)}
#transparency .tp-stat .k{font-size:12px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--ink-3)}
#transparency .tp-stat .v{font-size:clamp(28px,3vw,40px);font-weight:800;letter-spacing:-1.4px;line-height:1.05}
#transparency .tp-stat p{margin:0;font-size:13px;line-height:1.5;color:var(--ink-3)}
#transparency .tp-bar{display:flex;height:12px;border-radius:100px;overflow:hidden;background:rgba(15,23,42,.06)}
#transparency .tp-bar span{display:block;height:100%}
#transparency .tp-legs{display:flex;flex-wrap:wrap;gap:8px 18px;font-size:12.5px;color:var(--ink-3)}
#transparency .tp-leg{display:inline-flex;align-items:center;gap:7px}
#transparency .tp-leg i{width:9px;height:9px;border-radius:3px}
#transparency .tp-leg b{color:var(--ink-1);font-weight:700}
@media (max-width:1000px){
  #transparency .tp-top{grid-template-columns:1fr}
  #transparency .tp-card--ledger,#transparency .tp-methods{grid-column:span 12;grid-row:auto}
  #transparency .tp-stat{grid-column:span 4}
}
@media (max-width:640px){
  #transparency .tp-stat{grid-column:span 12}
  #transparency .tp-stage{border-radius:22px}
}
/* Each card carries its own figure drawn from the ledger, and each has its own
   colour: blue for money, green for speed, amber for the rails. The charts are
   real - the curve is what was actually paid month by month since launch, the
   histogram is how long those payouts actually took. */
#transparency .tp-kick--blue{color:#2554d4}
#transparency .tp-kick--green{color:#0e9c6f}
#transparency .tp-kick--amber{color:#b57905}
#transparency .tp-kick--blue::before,#transparency .tp-kick--green::before,#transparency .tp-kick--amber::before{
  content:"";width:7px;height:7px;border-radius:50%;background:currentColor}
/* the method on a ledger row is a small blue pill */
#transparency .tp-rows .via{color:#fff;font-weight:700;background:linear-gradient(180deg,#4f7df0,#2554d4);
  border:0;box-shadow:inset 0 1px 0 rgba(255,255,255,.28),0 4px 12px rgba(37,84,212,.28)}
#transparency .tp-rows .via--crypto{background:linear-gradient(180deg,#22c58e,#0e9c6f);box-shadow:inset 0 1px 0 rgba(255,255,255,.3),0 4px 12px rgba(14,156,111,.28)}
#transparency .tp-rows .via--wise{background:linear-gradient(180deg,#f9c04a,#d59206);color:#2b1c03;box-shadow:inset 0 1px 0 rgba(255,255,255,.4),0 4px 12px rgba(213,146,6,.26)}
#transparency .tp-rows .via--paypal{background:linear-gradient(180deg,#93b6ff,#5f86e6);box-shadow:inset 0 1px 0 rgba(255,255,255,.3),0 4px 12px rgba(95,134,230,.26)}
/* the cumulative curve under the money */
#transparency .tp-spark{display:block;width:100%;height:56px;margin-top:2px;overflow:visible}
#transparency .tp-spark .ln{fill:none;stroke:#2554d4;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;
  stroke-dasharray:var(--len);stroke-dashoffset:var(--len);transition:stroke-dashoffset 1.8s var(--ease-emphasis)}
#transparency .tp-spark .ar{fill:url(#tpGrad);opacity:0;transition:opacity 1s ease .5s}
#transparency .tp-spark .hd{fill:#2554d4;opacity:0;transition:opacity .4s ease 1.5s}
#transparency .tp-spark .hdr{fill:none;stroke:#2554d4;stroke-width:1.5;opacity:0}
#transparency .is-in .tp-spark .hdr{animation:tp-ping 2.6s ease-out infinite 1.6s}
@keyframes tp-ping{0%{r:3;opacity:.55}70%{r:9;opacity:0}100%{r:9;opacity:0}}
#transparency .is-in .tp-spark .ln{stroke-dashoffset:0}
#transparency .is-in .tp-spark .ar,#transparency .is-in .tp-spark .hd{opacity:1}
/* how long they took */
#transparency .tp-hist{display:flex;align-items:flex-end;gap:10px;height:62px;margin-top:4px}
#transparency .tp-hbar{position:relative;flex:1;display:flex;flex-direction:column;justify-content:flex-end;height:100%;gap:6px}
#transparency .tp-hbar i{display:block;height:var(--h);border-radius:7px 7px 3px 3px;background:rgba(0,182,122,.28);
  transform:scaleY(0);transform-origin:bottom;transition:transform .8s var(--ease-emphasis)}
#transparency .tp-hbar.is-mode i{background:linear-gradient(180deg,#22c58e,#0e9c6f)}
#transparency .tp-hbar em{font-style:normal;font-size:10.5px;font-weight:600;color:var(--ink-3);text-align:center;white-space:nowrap}
#transparency .tp-hbar:nth-child(2) i{transition-delay:.1s}
#transparency .tp-hbar:nth-child(3) i{transition-delay:.2s}
#transparency .tp-hbar:nth-child(4) i{transition-delay:.3s}
#transparency .is-in .tp-hbar i{transform:scaleY(1)}
/* the ledger card shows its own heartbeat: the line fills up to the next refresh */
/* the board runs like a feed: the rows climb continuously and loop, and stop
   under the cursor so a row can be read */
#transparency .tp-feed{position:relative;flex:1 1 auto;min-height:216px;overflow:hidden;
  -webkit-mask-image:linear-gradient(180deg,transparent,#000 12%,#000 88%,transparent);
  mask-image:linear-gradient(180deg,transparent,#000 12%,#000 88%,transparent)}
#transparency .tp-feed .tp-rows{position:absolute;inset:0 0 auto;animation:tp-climb 26s linear infinite}
#transparency .tp-card--ledger:hover .tp-feed .tp-rows{animation-play-state:paused}
@keyframes tp-climb{from{transform:translateY(0)}to{transform:translateY(-50%)}}
@media(prefers-reduced-motion:reduce){
  #transparency .tp-feed .tp-rows{animation:none}
  #transparency .tp-spark .ln{stroke-dashoffset:0}
  #transparency .tp-spark .ar,#transparency .tp-spark .hd{opacity:1}
  #transparency .tp-hbar i{transform:scaleY(1)}
  #transparency .is-in .tp-spark .hdr{animation:none}
}
/* movement: the cards lift under the cursor, the rows deal themselves in like a
   statement printing, the split bar grows from nothing and both figures count up */
#transparency .tp-card{transition:transform var(--dur-base) var(--ease-emphasis),box-shadow var(--dur-base)}
#transparency .tp-card:hover{transform:translateY(-4px);box-shadow:0 26px 54px rgba(4,8,18,.36)}
#transparency .tp-rows{transition:opacity .22s var(--ease-standard)}
#transparency .tp-rows.is-swapping{opacity:0}
#transparency .tp-rows.is-dealt li{opacity:0;transform:translateY(8px);animation:tp-deal .5s var(--ease-emphasis) forwards}
#transparency .tp-rows.is-dealt li:nth-child(1){animation-delay:.04s}
#transparency .tp-rows.is-dealt li:nth-child(2){animation-delay:.12s}
#transparency .tp-rows.is-dealt li:nth-child(3){animation-delay:.2s}
#transparency .tp-rows.is-dealt li:nth-child(4){animation-delay:.28s}
#transparency .tp-rows.is-dealt li:nth-child(5){animation-delay:.36s}
@keyframes tp-deal{to{opacity:1;transform:none}}
#transparency .tp-bar span{width:0;transition:width 1.1s var(--ease-emphasis)}
#transparency .tp-bar span:nth-child(2){transition-delay:.12s}
#transparency .tp-bar span:nth-child(3){transition-delay:.24s}
#transparency .tp-bar span:nth-child(4){transition-delay:.36s}
#transparency .tp-methods.is-in .tp-bar span{width:var(--w)}
@media(prefers-reduced-motion:reduce){
  #transparency .tp-rail .cfb-track{animation:none}#transparency .tp-kick i{animation:none}
  #transparency .tp-rows.is-dealt li{animation:none;opacity:1;transform:none}
  #transparency .tp-bar span{transition:none;width:var(--w)}
}


#payout-wall{position:relative;overflow:hidden;height:960px;font-family:Inter,system-ui,-apple-system,sans-serif;
  isolation:isolate;background:#070b13}
#payout-wall *{box-sizing:border-box}
/* The wall's own ground is the hero's: the shader sits BEHIND the scrolling
   certificates, so the drift shows in the space around the wall and through the
   gaps. Nothing of it is laid over the photographs. */
#payout-wall .pw-bg{position:absolute;inset:0;z-index:0;overflow:hidden;
  background:radial-gradient(120% 90% at 50% 2%, #101c31 0%, #0b1221 44%, #070b13 82%)}
#payout-wall .bg__canvas{position:absolute;inset:0;width:100%;height:100%;display:block;opacity:0;transition:opacity 1.1s ease}
#payout-wall .bg__canvas.is-live{opacity:1}
body.gl-on #payout-wall .bg__aurora{display:none}
#payout-wall .bg__aurora{position:absolute;inset:-25%;filter:blur(90px);opacity:.92}
#payout-wall .blob{position:absolute;border-radius:50%;mix-blend-mode:screen;will-change:transform}
#payout-wall .blob--a{width:64vmax;height:64vmax;left:-16%;top:-24%;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}
#payout-wall .blob--b{width:54vmax;height:54vmax;right:-14%;top:0%;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}
#payout-wall .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}
#payout-wall .blob--d{width:38vmax;height:38vmax;left:44%;top:22%;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}
@media(prefers-reduced-motion:reduce){#payout-wall .blob{animation:none}}
#payout-wall .pw-cols{position:absolute;inset:-80px 0;display:flex;gap:16px;justify-content:center}
#payout-wall .pw-col{display:flex;flex-direction:column;gap:16px;width:250px;flex:0 0 250px;
  animation-name:pw-scroll;animation-timing-function:linear;animation-iteration-count:infinite;will-change:transform}
@keyframes pw-scroll{from{transform:translateY(0)}to{transform:translateY(-50%)}}
#payout-wall .pw-card{flex:0 0 auto;border-radius:18px;overflow:hidden}
#payout-wall .pw-cert{border:1px solid rgba(120,150,210,.18);box-shadow:0 18px 44px rgba(0,0,0,.5)}
#payout-wall .pw-cert img{display:block;width:100%;height:auto}
#payout-wall .pw-card.pw-rev{background:#fff;border:0;padding:16px 16px 14px;display:flex;flex-direction:column;gap:9px;box-shadow:0 14px 34px rgba(0,0,0,.35)}
#payout-wall .pw-rev-stars{display:inline-flex;gap:2px}
#payout-wall .pw-rev-stars svg{width:13px;height:13px;fill:#00b67a}
#payout-wall .pw-rev-stars svg.off{fill:#d7dbe3}
#payout-wall .pw-rev-q{margin:0;font-size:12.5px;line-height:1.45;color:#1a2233;font-weight:500}
#payout-wall .pw-rev-by{display:flex;align-items:center;gap:8px;margin-top:auto;font-size:11.5px}
#payout-wall .pw-rev-by b{color:#0b1220;font-weight:700}
#payout-wall .pw-rev-by span{color:#6b7688}
#payout-wall .pw-rev-by span::before{content:"\00b7";margin-right:8px;color:#c2c8d2}
#payout-wall .pw-face{position:relative;height:250px;box-shadow:0 14px 34px rgba(0,0,0,.45)}
#payout-wall .pw-face img{width:100%;height:100%;object-fit:cover;object-position:center 28%;display:block}
#payout-wall .pw-face::after{content:"";position:absolute;inset:0;box-shadow:inset 0 0 0 1px rgba(255,255,255,.08);border-radius:18px}
#payout-wall::before{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
  background:radial-gradient(ellipse 540px 460px at 50% 50%, #080d1a 0%, #080d1a 48%, rgba(8,13,26,.9) 62%, rgba(8,13,26,.45) 80%, rgba(8,13,26,0) 100%)}
#payout-wall::after{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
  background:linear-gradient(90deg,rgba(6,9,15,.55) 0%,rgba(6,9,15,0) 14%,rgba(6,9,15,0) 86%,rgba(6,9,15,.55) 100%),
             linear-gradient(180deg,#080d18 0%,rgba(8,13,24,0) 12%,rgba(8,13,24,0) 88%,#06090f 100%)}
#payout-wall .pw-center{position:absolute;inset:0;z-index:3;display:flex;align-items:center;justify-content:center}
#payout-wall .pw-panel{text-align:center;max-width:620px;padding:0 24px}
/* A firm whose pitch is "on the record" should not claim it in a badge; it should
   show the record. This strip reads the public payout ledger at /transparency
   (same origin) once the section is in view and cycles the settled payouts it
   finds. If the read fails it keeps the plain claim, so nothing is ever invented. */
#payout-wall .pw-ledger{display:inline-flex;align-items:stretch;height:38px;margin-bottom:26px;border-radius:10px;
  background:#fff;border:1px solid rgba(255,255,255,.5);text-decoration:none;overflow:hidden;
  box-shadow:0 10px 28px rgba(4,8,18,.34)}
#payout-wall .pw-ledger:hover{box-shadow:0 12px 32px rgba(4,8,18,.42)}
#payout-wall .pw-ledger__live{display:inline-flex;align-items:center;gap:8px;padding:0 13px;
  font-family:var(--font-mono);font-size:10.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--dv-blue-deep);
  background:rgba(37,84,212,.07);border-right:1px solid rgba(15,23,42,.12)}
#payout-wall .pw-ledger__live i{width:7px;height:7px;border-radius:50%;background:var(--dv-green);animation:pulse-live 2.4s ease-out infinite}
#payout-wall .pw-ledger__feed{position:relative;display:flex;align-items:center;padding:0 15px;overflow:hidden;
  min-width:0;width:clamp(210px,34vw,330px)}
#payout-wall .pw-ledger__row{display:inline-flex;align-items:center;gap:10px;white-space:nowrap;
  font-family:var(--font-mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:rgba(15,23,42,.55);
  transition:transform .26s var(--ease-emphasis),opacity .26s var(--ease-standard)}
#payout-wall .pw-ledger__row b{color:var(--dv-blue-deep);font-weight:700;letter-spacing:.02em}
#payout-wall .pw-ledger__row.is-out{transform:translateY(-14px);opacity:0}
#payout-wall .pw-ledger__row.is-in{transform:translateY(14px);opacity:0;transition:none}
@media (max-width:820px){
  #payout-wall .pw-ledger__live span{display:none}
  #payout-wall .pw-ledger__live{padding:0 11px}
  #payout-wall .pw-ledger__feed{width:min(80vw,296px);padding:0 12px}
  /* the payment method is the first thing to drop when the phone runs out of room */
  #payout-wall .pw-ledger__row span:last-of-type{display:none}
}
@media (prefers-reduced-motion:reduce){#payout-wall .pw-ledger__live i{animation:none}}
#payout-wall .pw-h2{font-size:56px;line-height:1.04;font-weight:800;letter-spacing:-1.8px;color:#fff;margin:0}
#payout-wall .pw-h2 .pw-accent{color:#7ca3d9}
#payout-wall .pw-sub{font-size:18px;line-height:1.55;color:#a7b4cc;margin:22px auto 0;max-width:470px}
#payout-wall .pw-chips{position:relative;left:50%;transform:translateX(-50%);width:min(92vw,840px);
  display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin:28px 0 0}
/* The page already has one pill for this: glass, hairline, 100px, the same one
   the closing band uses. These four use it too; the only colour is the dot, so
   the row reads as one family with the rest of the site. */
/* White pills, the same fill as the button in the closing band. On white the dot
   can carry a proper colour instead of a pastel one. */
#payout-wall .pw-chip{--dot:#2554d4;display:inline-flex;align-items:center;gap:9px;font-size:13.5px;font-weight:600;
  color:var(--dv-blue-deep);background:#fff;border:1px solid rgba(255,255,255,.4);padding:9px 17px;border-radius:100px;
  box-shadow:0 6px 18px rgba(4,8,18,.28)}
#payout-wall .pw-chip::before{content:"";width:7px;height:7px;flex:0 0 7px;border-radius:50%;background:var(--dot)}
#payout-wall .pw-chip--green{--dot:#0e9c6f}
#payout-wall .pw-chip--blue{--dot:#2554d4}
#payout-wall .pw-chip--amber{--dot:#d89406}
#payout-wall .pw-chip--plain{--dot:#33527d}
#payout-wall .pw-chip b{color:var(--dv-blue-deep);font-weight:600}
#payout-wall .pw-cta{margin-top:34px}
#payout-wall .pw-cta .x-cta{height:54px;padding:0 66px 0 30px;font-size:16px}
#payout-wall .pw-cta .x-cta-bg-pill{box-shadow:0 16px 40px rgba(53,80,230,.4)}
#payout-wall .pw-cta .x-cta-bg-orb{width:40px;height:40px;margin-top:-20px;right:7px}
#payout-wall .pw-cta .x-cta-arrow{right:22px}
#payout-wall .pw-foot{margin-top:16px;font-size:13px;color:#7d89a1}
@media (max-width:820px){
  #payout-wall{height:820px}
  #payout-wall .pw-h2{font-size:38px;letter-spacing:-1.1px}
  #payout-wall .pw-sub{font-size:16px}
}
@media (prefers-reduced-motion:reduce){#payout-wall .pw-col{animation:none}}


/* The ask stands still on the left, the answers open on the right. Every row is
   numbered and tagged, and the open one lifts off the panel as a white card, so
   the list reads as a rulebook index rather than a stack of grey lines. */
#faq{padding:clamp(40px,5vw,84px) 0}
#faq .fq-stage{position:relative;overflow:hidden;border-radius:28px;padding:clamp(26px,3.4vw,54px);
  background:linear-gradient(180deg,#f7f9fe,#eaf0fa);border:1px solid rgba(15,23,42,.06)}
#faq .fq-stage::before{content:"";position:absolute;left:-10%;top:-40%;width:60%;height:120%;pointer-events:none;
  background:radial-gradient(closest-side,rgba(79,125,240,.16),transparent 72%)}
#faq .fq-grid{position:relative;display:grid;grid-template-columns:.86fr 1.14fr;gap:clamp(24px,4vw,64px);align-items:start}
#faq .fq-side{position:sticky;top:96px;display:flex;flex-direction:column;align-items:flex-start;gap:16px}
#faq .fq-kick{display:inline-flex;align-items:center;gap:8px;font-family:var(--font-mono);font-size:10.5px;
  letter-spacing:.14em;text-transform:uppercase;color:var(--dv-blue-deep);background:rgba(37,84,212,.08);
  border:1px solid rgba(37,84,212,.16);border-radius:100px;padding:7px 14px}
#faq .fq-side h2{margin:0;font-size:clamp(28px,3.4vw,44px);line-height:1.05;letter-spacing:-1.3px}
#faq .fq-side p{margin:0;font-size:15px;line-height:1.62;color:var(--ink-2);max-width:40ch}
/* a white action on a light panel, the way their secondary button works */
#faq .fq-btn{display:inline-flex;align-items:center;gap:14px;height:52px;padding:0 8px 0 24px;border-radius:100px;
  background:#fff;border:1px solid rgba(15,23,42,.1);color:var(--ink-1);text-decoration:none;
  font-family:var(--font-display);font-weight:650;font-size:15px;box-shadow:0 10px 26px rgba(15,23,42,.08);
  transition:transform var(--dur-quick) var(--ease-emphasis),box-shadow var(--dur-quick),border-color var(--dur-quick)}
#faq .fq-btn:hover{transform:translateY(-2px);box-shadow:0 16px 34px rgba(15,23,42,.14);border-color:rgba(37,84,212,.35)}
#faq .fq-btn i{display:grid;place-items:center;width:36px;height:36px;border-radius:50%;
  background:linear-gradient(180deg,#4f7df0,#2554d4);box-shadow:inset 0 1px 0 rgba(255,255,255,.3)}
#faq .fq-btn i svg{width:14px;height:14px;fill:none;stroke:#fff;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;
  transition:transform var(--dur-base) var(--ease-emphasis)}
#faq .fq-btn:hover i svg{transform:translateX(2px)}
#faq .fq-support{display:inline-flex;align-items:center;gap:9px;font-size:13px;color:var(--ink-3)}
#faq .fq-support i{width:8px;height:8px;border-radius:50%;background:var(--dv-green);animation:pulse-live 2.4s ease-out infinite}

#faq .fq-list{display:flex;flex-direction:column;gap:2px}
#faq .fq{border-radius:16px;transition:background var(--dur-quick)}
#faq .fq + .fq{box-shadow:0 -1px 0 rgba(15,23,42,.09)}
#faq .fq:hover{background:rgba(255,255,255,.6)}
#faq .fq.is-open{background:#fff;box-shadow:0 18px 44px rgba(15,23,42,.12);
  box-shadow:0 18px 44px rgba(15,23,42,.12),0 -1px 0 transparent}
#faq .fq.is-open + .fq{box-shadow:none}
#faq .fq-q{display:flex;align-items:center;gap:16px;width:100%;background:none;border:0;cursor:pointer;
  text-align:left;padding:20px;font-family:var(--font-display);color:var(--ink-1)}
#faq .fq-n{flex:0 0 auto;font-family:var(--font-mono);font-size:11px;color:var(--ink-3);letter-spacing:.06em;
  transition:color var(--dur-quick)}
#faq .fq.is-open .fq-n{color:var(--dv-blue-deep)}
#faq .fq-t{flex:1 1 auto;display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  font-size:clamp(15.5px,1.3vw,18px);font-weight:650;letter-spacing:-.2px;transition:color var(--dur-quick)}
#faq .fq-q:hover .fq-t{color:var(--dv-blue-deep)}
#faq .fq-tag{font-family:var(--font-mono);font-size:9.5px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;
  padding:4px 9px;border-radius:100px;border:1px solid currentColor;opacity:.85}
#faq .fq-tag--blue{color:#2554d4;background:rgba(37,84,212,.07)}
#faq .fq-tag--green{color:#0e9c6f;background:rgba(0,182,122,.08)}
#faq .fq-tag--amber{color:#b57905;background:rgba(251,191,36,.12)}
#faq .fq-tag--red{color:#b91c1c;background:rgba(185,28,28,.07)}
/* the same stroke language as the rest of the page: 24 grid, rounded caps, no fill */
#faq .fq-tag{display:inline-flex;align-items:center;gap:6px}
#faq .fq-tag svg,#faq .fq-kick svg{width:12px;height:12px;flex:0 0 12px;fill:none;stroke:currentColor;
  stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
#faq .fq-kick svg{width:13px;height:13px;flex:0 0 13px}
#faq .fq-i{flex:0 0 34px;width:34px;height:34px;border-radius:50%;display:grid;place-items:center;
  background:#fff;border:1px solid rgba(15,23,42,.12);color:var(--dv-blue-deep);
  transition:transform .45s var(--ease-emphasis),background var(--dur-quick),color var(--dur-quick),box-shadow var(--dur-quick)}
#faq .fq-i svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round}
#faq .fq.is-open .fq-i{transform:rotate(135deg);background:linear-gradient(180deg,#4f7df0,#2554d4);color:#fff;
  border-color:transparent;box-shadow:inset 0 1px 0 rgba(255,255,255,.3),0 8px 20px rgba(37,84,212,.3)}
#faq .fq-a{display:grid;grid-template-rows:0fr;transition:grid-template-rows .45s var(--ease-emphasis)}
#faq .fq.is-open .fq-a{grid-template-rows:1fr}
#faq .fq-inner{overflow:hidden;opacity:0;transform:translateY(-4px);transition:opacity .35s ease,transform .35s var(--ease-emphasis)}
#faq .fq.is-open .fq-inner{opacity:1;transform:none}
#faq .fq-inner p{margin:0 0 20px;padding:0 60px 0 56px;font-size:15px;line-height:1.7;color:var(--ink-2)}
@media (max-width:900px){
  #faq .fq-grid{grid-template-columns:1fr;gap:26px}
  #faq .fq-side{position:static}
  #faq .fq-stage{border-radius:22px;padding:22px 16px}
  #faq .fq-q{padding:18px 14px;gap:12px}
  #faq .fq-inner p{padding:0 14px 0 14px}
  #faq .fq-n{display:none}
}
@media(prefers-reduced-motion:reduce){
  #faq .fq-a,#faq .fq-inner,#faq .fq-i,#faq .fq-btn,#faq .fq-btn i svg{transition:none}
  #faq .fq-support i{animation:none}
}


#faq .fq-tag{display:inline-flex!important;align-items:center;gap:7px;background:none!important;padding:0!important;border:0!important;border-radius:0!important;font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--c)}
#faq .fq-ic{width:19px;height:19px;border-radius:50%;background:var(--c);display:grid;place-items:center;flex:0 0 19px;box-shadow:0 2px 6px -1px color-mix(in srgb,var(--c) 55%,transparent)}
#faq .fq-ic svg{width:11px;height:11px;stroke:#fff;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
#faq .fq-kick svg{fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
#faq .fq-more{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-top:10px;padding:16px 18px;
  border:1px dashed rgba(15,23,42,.16);border-radius:14px;text-decoration:none;color:var(--ink-2);font-size:14px;font-weight:600;
  transition:border-color .2s,background .2s}
#faq .fq-more:hover{border-color:rgba(37,84,212,.4);background:rgba(37,84,212,.03)}
#faq .fq-more b{color:var(--ink-1)}
#faq .fq-more i{flex:0 0 auto;display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:#2554d4;color:#fff}
#faq .fq-more i svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}


/* The page ends on one continuous ground: the closing call to action and the
   footer sit on a single canvas, so the animation runs from the white page all
   the way to the last line of legal text without a seam in the middle. */
.closing{position:relative;isolation:isolate;overflow:hidden;background:#070b13;color:#fff;
  border-radius:var(--section-radius) var(--section-radius) 0 0}
.closing .closing-bg{position:absolute;inset:0;z-index:0;overflow:hidden;
  background:radial-gradient(120% 70% at 50% 6%, #101c31 0%, #0b1221 44%, #070b13 80%)}
.closing .bg__canvas{position:absolute;inset:0;width:100%;height:100%;display:block;opacity:0;transition:opacity 1.1s ease}
.closing .bg__canvas.is-live{opacity:1}
body.gl-on .closing .bg__aurora{display:none}
.closing .bg__aurora{position:absolute;inset:-25%;filter:blur(90px);opacity:.92}
.closing .blob{position:absolute;border-radius:50%;mix-blend-mode:screen;will-change:transform}
.closing .blob--a{width:64vmax;height:64vmax;left:-16%;top:-30%;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}
.closing .blob--b{width:54vmax;height:54vmax;right:-14%;top:-8%;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}
.closing .blob--c{width:50vmax;height:50vmax;left:18%;bottom:-30%;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}
.closing .blob--d{width:38vmax;height:38vmax;left:44%;top:14%;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}
.closing .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% 30%,#000 35%,transparent 78%);mask-image:radial-gradient(115% 85% at 50% 30%,#000 35%,transparent 78%)}
.closing .bg__scrim{position:absolute;inset:0;background:radial-gradient(62% 34% at 50% 26%, rgba(3,6,12,.66) 0%, rgba(3,6,12,.34) 48%, transparent 78%)}
/* the footer keeps its type and spacing and loses only its own black */
.closing .foot{position:relative;z-index:1;background:none;border-top:1px solid rgba(255,255,255,.08)}
.cta-band{position:relative;z-index:1;background:none;color:#fff;text-align:center;
  padding:clamp(76px,9vw,136px) 0 clamp(72px,8vw,120px)}
.cta-band .wrap{position:relative;z-index:1}
/* Filled in the same blue as the buttons, with the same lit top edge and its own
   coloured shadow, just smaller: it labels the block, it does not compete with it. */
.cta-band .cta-eyebrow{display:inline-flex;align-items:center;gap:9px;font-size:12px;font-weight:700;letter-spacing:1.3px;
  text-transform:uppercase;color:#fff;background:linear-gradient(180deg,#4f7df0,#2554d4);border:0;
  padding:10px 20px;border-radius:100px;margin-bottom:24px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.3),0 8px 22px rgba(37,84,212,.32)}
.cta-band .cta-eyebrow::before{content:"";width:7px;height:7px;border-radius:50%;background:#fff;
  box-shadow:0 0 0 0 rgba(255,255,255,.6);animation:pulse-white 2.4s ease-out infinite}
@keyframes pulse-white{0%{box-shadow:0 0 0 0 rgba(255,255,255,.6)}70%{box-shadow:0 0 0 10px rgba(255,255,255,0)}100%{box-shadow:0 0 0 0 rgba(255,255,255,0)}}
@keyframes pulse-blue{0%{box-shadow:0 0 0 0 rgba(79,125,240,.5)}70%{box-shadow:0 0 0 12px rgba(79,125,240,0)}100%{box-shadow:0 0 0 0 rgba(79,125,240,0)}}
@media(prefers-reduced-motion:reduce){.cta-band .cta-eyebrow::before{animation:none}}
.cta-band h2{margin:0;color:#fff;font-size:clamp(32px,4.6vw,56px);line-height:1.04;letter-spacing:-1.6px}
.cta-band .cta-accent{color:#fff}
.cta-band p{margin:20px auto 0;max-width:56ch;color:rgba(255,255,255,.78)}
.cta-band .cta-chips{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin:26px auto 0;max-width:640px}
.cta-band .cta-chips span{font-size:13.5px;font-weight:600;color:var(--dv-blue-deep);
  background:#fff;border:1px solid rgba(255,255,255,.4);padding:9px 17px;border-radius:100px;
  box-shadow:0 6px 18px rgba(4,8,18,.26)}
.cta-band .cta-row{display:flex;gap:var(--space-3);justify-content:center;flex-wrap:wrap;margin-top:34px}
.cta-band .x-cta{height:52px;padding:0 64px 0 28px;font-size:15.5px}
.cta-band .x-cta-bg-orb{width:38px;height:38px;margin-top:-19px;right:7px}
.cta-band .x-cta-arrow{right:21px}

.cta-band .btn-ghost{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.28);color:#fff}
.cta-band .btn-ghost:hover{background:rgba(255,255,255,.12)}
@media(prefers-reduced-motion:reduce){.closing .blob{animation:none}}


.evt{position:relative;z-index:1;background:none;color:#fff;padding:clamp(46px,5.5vw,84px) 0 clamp(24px,3vw,40px)}
.evt-top{margin-bottom:clamp(22px,2.4vw,32px)}
.evt-kick{display:inline-flex;align-items:center;gap:9px;font-size:12px;font-weight:700;letter-spacing:1.4px;text-transform:uppercase;color:#9fb8e6}
.evt-kick i{width:8px;height:8px;border-radius:50%;background:#3ddc84;box-shadow:0 0 10px rgba(61,220,132,.8)}
.evt-top h2{margin:14px 0 0;color:#fff;font-size:clamp(28px,3.4vw,46px);letter-spacing:-1.3px;line-height:1.05}
.evt-banner{position:relative;display:block;border-radius:24px;overflow:hidden;min-height:clamp(260px,26vw,320px);
  background:#0a1430 center 42%/cover no-repeat;box-shadow:0 30px 70px -30px rgba(0,0,0,.7)}
.evt-banner::after{content:"";position:absolute;inset:0;
  background:linear-gradient(100deg, rgba(6,10,20,.96) 0%, rgba(6,10,20,.9) 30%, rgba(8,14,28,.55) 62%, rgba(8,14,28,.18) 100%),
             linear-gradient(0deg, rgba(6,10,20,.5) 0%, transparent 40%)}
.evt-in{position:relative;z-index:1;display:flex;align-items:center;gap:clamp(22px,2.6vw,44px);
  min-height:inherit;padding:clamp(26px,3vw,46px) clamp(28px,3.4vw,52px)}
.evt-date{flex:0 0 auto;text-align:center;padding-right:clamp(22px,2.6vw,42px);border-right:1px solid rgba(255,255,255,.16)}
.evt-date .d-num{display:block;font-size:clamp(38px,4.6vw,60px);font-weight:800;line-height:.95;letter-spacing:-1.5px;color:#fff}
.evt-date .d-mo{display:block;margin-top:8px;font-size:13px;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:#9fb8e6}
.evt-info{flex:1 1 auto;min-width:0;text-align:left}
.evt-tag{display:block;font-size:12px;font-weight:700;letter-spacing:1.2px;text-transform:uppercase;color:#7ea4e6;margin-bottom:10px}
.evt-info h3{margin:0;color:#fff;font-size:clamp(21px,2.2vw,30px);letter-spacing:-.5px;line-height:1.14;max-width:22ch}
.evt-where{display:flex;align-items:center;gap:8px;margin-top:14px;font-size:14.5px;color:rgba(255,255,255,.74)}
.evt-where svg{width:16px;height:16px;color:#9fb8e6;flex:0 0 auto}
.evt-go{flex:0 0 auto;align-self:center}
.evt-cta{display:inline-flex;align-items:center;gap:10px;font-weight:700;font-size:15px;color:#fff;text-decoration:none;
  background:linear-gradient(180deg,#4f7df0,#2554d4);padding:15px 26px;border-radius:100px;box-shadow:0 14px 32px rgba(37,84,212,.42);transition:transform .2s}
.evt-cta:hover{transform:translateY(-1px)}
.evt-cta svg{width:16px;height:16px}
@media(max-width:860px){
  .evt-in{flex-direction:column;align-items:flex-start;gap:18px;padding:24px}
  .evt-date{display:flex;align-items:baseline;gap:10px;padding:0 0 14px;border-right:0;border-bottom:1px solid rgba(255,255,255,.16);width:100%;text-align:left}
  .evt-date .d-mo{margin-top:0}
  .evt-go{width:100%}.evt-cta{width:100%;justify-content:center}
}


/* The expo banner is a rotator: every event Dolvero attends, in date order, the past ones
   dropped on load, the section gone when none is left. Two background layers crossfade,
   the content slides, the date flips; the cards under it are the schedule and the controls. */
.evt[hidden]{display:none}
.evt-banner{background-image:none!important}
.evt-bg{position:absolute;inset:0;background:center/cover no-repeat #0f1a33;opacity:0;transform:scale(1.06);transition:opacity .9s ease,transform 6.5s linear;z-index:0}
.evt-bg.is-on{opacity:1;transform:scale(1)}
.evt-bg.is-gradient{background-image:linear-gradient(135deg,#1a2d55 0%,#0f1a33 55%,#0b1120 100%)}
.evt-banner::after{z-index:1}
.evt-in{z-index:2}
.evt-in>*{transition:opacity .42s cubic-bezier(.2,.7,.2,1),transform .42s cubic-bezier(.2,.7,.2,1)}
.evt-in.is-out>*{opacity:0;transform:translateX(-28px)}
.evt-in.is-out .evt-go{transform:translateX(28px)}
.evt-in.is-prep>*{transition:none;opacity:0;transform:translateX(34px)}
.evt-in.is-prep .evt-go{transform:translateX(-34px)}
.evt-date .d-num{display:inline-block;transform-origin:50% 100%}
.evt-in.is-flip .d-num{animation:evt-flip .55s cubic-bezier(.2,.7,.2,1)}
@keyframes evt-flip{0%{transform:rotateX(90deg);opacity:0}100%{transform:rotateX(0);opacity:1}}
.evt-count{display:inline-flex;align-items:center;gap:7px;margin-top:12px;padding:6px 12px;border-radius:999px;background:#fff;color:#0f172a;font-size:11.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;box-shadow:0 8px 20px -10px rgba(0,0,0,.6)}
.evt-count::before{content:"";width:7px;height:7px;border-radius:50%;background:#3ddc84;box-shadow:0 0 0 0 rgba(61,220,132,.6);animation:evt-ping 1.8s infinite}
@keyframes evt-ping{100%{box-shadow:0 0 0 8px rgba(61,220,132,0)}}
.evt-next{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin-top:12px}
.evt-card{position:relative;display:grid;gap:4px;padding:14px 16px 16px;border-radius:16px;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.05);color:rgba(255,255,255,.72);text-align:left;cursor:pointer;overflow:hidden;transition:background .35s,color .35s,transform .35s,border-color .35s;font:inherit}
.evt-card b{font-family:var(--font-mono);font-size:12px;font-weight:600;letter-spacing:.04em;color:#9fb8e6}
.evt-card strong{font-size:14px;font-weight:700;color:#fff;letter-spacing:-.01em;line-height:1.2}
.evt-card small{font-size:12px;color:rgba(255,255,255,.55)}
.evt-card i{position:absolute;left:0;right:0;bottom:0;height:3px;background:rgba(255,255,255,.12)}
.evt-card i::after{content:"";position:absolute;inset:0;background:#4f7df0;transform:scaleX(0);transform-origin:left}
.evt-card.is-on{background:rgba(255,255,255,.1);border-color:rgba(159,184,230,.45);transform:translateY(-2px)}
.evt-card.is-on i::after{animation:evt-fill var(--evt-ms,5500ms) linear forwards}
.evt-card:hover{background:rgba(255,255,255,.12)}
@keyframes evt-fill{to{transform:scaleX(1)}}
.evt-dots{display:none}
.evt-credit{position:absolute;right:14px;bottom:10px;z-index:3;font-size:10px;color:rgba(255,255,255,.45);letter-spacing:.02em}.evt-credit:empty{display:none}
@media(max-width:900px){.evt-next{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:640px){.evt-date{flex-wrap:wrap;align-items:center}.evt-count{margin-top:0;margin-left:auto}.evt-next{grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce){.evt-bg{transition:none;transform:none}.evt-in>*{transition:none}.evt-in.is-flip .d-num{animation:none}.evt-card.is-on i::after{animation:none;transform:scaleX(1)}.evt-count::before{animation:none}}


/* Company panel: the Programs anatomy, each tile layered -- animated art, a mock with several
   moving parts, a floating badge. All loops, all off under prefers-reduced-motion. */
.mega .svc.cm{text-decoration:none;color:inherit;display:flex}
.mega .svc.cm .svc-tile{display:grid;place-items:start center;padding:10px 12px 34px}
.svc-tile.t-trn{--glow:rgba(94,224,176,.34)}
.svc-tile.t-blg{--glow:rgba(147,184,255,.40)}
.svc-tile.t-car{--glow:rgba(247,147,26,.30)}
.svc-tile.t-cnt{--glow:rgba(167,139,250,.34);background:linear-gradient(158deg,#16233c 0%,#2a3a6e 52%,#4c5fd8 100%)}
.svc-tile.t-chg{--glow:rgba(56,189,248,.34)}
.mega .svc.cm .mock{font-size:10px;padding:8px 9px}
.cm-tick{width:9px;height:9px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
/* shared */
.cm-live{display:flex;align-items:center;gap:6px;margin-bottom:6px}
.cm-live i{width:6px;height:6px;border-radius:50%;background:var(--dv-green);box-shadow:0 0 0 0 rgba(0,182,122,.5);animation:cm-ping 1.8s infinite}
.cm-live i.b{background:#38bdf8;box-shadow:0 0 0 0 rgba(56,189,248,.5)}
.cm-cap-r{margin-inline-start:auto;font-size:7.5px;letter-spacing:.1em;color:#0a7d57;background:var(--dv-green-soft);border-radius:4px;padding:2px 5px}
@keyframes cm-ping{100%{box-shadow:0 0 0 6px rgba(0,182,122,0)}}
.cm-float{position:absolute;z-index:3;display:inline-flex;align-items:center;gap:5px;font-size:8.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;border-radius:var(--radius-pill);padding:4px 9px;box-shadow:0 10px 22px -10px rgba(7,12,22,.7)}
/* rolling feeds: 26px rows + 5px gap, three visible, the tail repeats the head so the snap is invisible */
.cm-feed{height:70px;overflow:hidden;position:relative}
.cm-roll{display:grid;gap:5px}
.cm-feed .mk-row{height:26px}
.cm-feed .mk-row>span:nth-child(2){min-width:0;flex:1;display:grid}
.cm-feed .mk-t,.cm-feed .mk-s{line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cm-feed .mk-t{font-size:10.5px}
.cm-feed::before,.cm-feed::after{content:"";position:absolute;left:0;right:0;height:12px;pointer-events:none;z-index:1}
.cm-feed::before{top:0;background:linear-gradient(#fff,transparent)}.cm-feed::after{bottom:0;background:linear-gradient(transparent,#fff)}
.cm-feed--ledger .cm-roll{animation:cm-roll4 14s cubic-bezier(.2,.7,.2,1) infinite}
@keyframes cm-roll4{0%,20%{transform:translateY(0)}25%,45%{transform:translateY(-31px)}50%,70%{transform:translateY(-62px)}75%,95%{transform:translateY(-93px)}100%{transform:translateY(-124px)}}
.cm-feed--log .cm-roll{animation:cm-roll4 14s cubic-bezier(.2,.7,.2,1) infinite}
/* transparency */
.cm-bars rect{transform-origin:50% 100%;transform:scaleY(0);animation:cm-bar 9s var(--ease-standard) infinite}
.cm-bars rect:nth-child(2){animation-delay:.15s}.cm-bars rect:nth-child(3){animation-delay:.3s}.cm-bars rect:nth-child(4){animation-delay:.45s}.cm-bars rect:nth-child(5){animation-delay:.6s}.cm-bars rect:nth-child(6){animation-delay:.75s}.cm-bars rect:nth-child(7){animation-delay:.9s}
@keyframes cm-bar{0%{transform:scaleY(0)}12%,84%{transform:scaleY(1)}94%,100%{transform:scaleY(0)}}
.cm-trend{stroke-dasharray:4 3;animation:cm-dash 1.2s linear infinite}
@keyframes cm-dash{to{stroke-dashoffset:-14}}
.cm-st{position:relative;flex:none;width:50px;height:16px;font-size:7.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase}
.cm-st i,.cm-st b{position:absolute;inset:0;display:inline-flex;align-items:center;justify-content:center;gap:3px;border-radius:4px;font-style:normal}
.cm-st i{background:#eef2f7;color:var(--ink-3);animation:cm-st-a 7s infinite}
.cm-st b{background:var(--dv-green-soft);color:#0a7d57;animation:cm-st-b 7s infinite}
.cm-feed .mk-row:nth-child(2n) .cm-st i,.cm-feed .mk-row:nth-child(2n) .cm-st b{animation-delay:-3.5s}
@keyframes cm-st-a{0%,40%{opacity:1}52%,100%{opacity:0}}
@keyframes cm-st-b{0%,44%{opacity:0;transform:scale(.8)}56%,100%{opacity:1;transform:none}}
.cm-feed .mk-v{font-size:10px;margin-inline-start:0}
.cm-stamp{right:10px;bottom:8px;background:#fff;color:#0a7d57;transform-origin:100% 0;animation:cm-stamp 9s var(--ease-emphasis) infinite}
@keyframes cm-stamp{0%,52%{opacity:0;transform:scale(1.5) rotate(-6deg)}58%,88%{opacity:1;transform:none}94%,100%{opacity:0}}
/* blog */
.cm-lines rect{transform-origin:0 50%;animation:cm-type 8s var(--ease-standard) infinite}
.cm-lines rect:nth-child(2){animation-delay:.5s}.cm-lines rect:nth-child(3){animation-delay:1s}.cm-lines rect:nth-child(4){animation-delay:1.5s}
@keyframes cm-type{0%{transform:scaleX(0)}14%,80%{transform:scaleX(1)}92%,100%{transform:scaleX(0)}}
.mock-stack.cm-wrap{width:100%}
.cm-post--back{position:absolute;inset:6px -6px auto 6px;height:100%;opacity:.55;transform:translateY(8px) scale(.97);z-index:0}
.cm-post{position:relative;z-index:1}
.cm-thumb{position:relative;height:30px;border-radius:7px;background:linear-gradient(135deg,#22406e,#2554d4 60%,#5ee0b0);overflow:hidden;margin-bottom:7px}
.cm-thumb svg{position:absolute;inset:6px 10px 5px;width:calc(100% - 20px);height:calc(100% - 14px)}
.cm-spk{fill:none;stroke:rgba(255,255,255,.85);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:160;stroke-dashoffset:160;animation:cm-draw 8s var(--ease-standard) infinite}
@keyframes cm-draw{0%{stroke-dashoffset:160}25%,85%{stroke-dashoffset:0}95%,100%{stroke-dashoffset:160}}
.cm-thumb::after{content:"";position:absolute;left:-40%;top:-60%;width:50%;height:220%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.35),transparent);transform:rotate(18deg);animation:mk-sheen 5s var(--ease-standard) infinite}
.cm-tag{position:absolute;left:6px;top:6px;width:52px;height:14px}
.cm-tag i,.cm-title i{position:absolute;inset:0;opacity:0;font-style:normal;animation:cm-cyc3 12s var(--ease-standard) infinite}
.cm-tag i:nth-child(2),.cm-title i:nth-child(2){animation-delay:4s}.cm-tag i:nth-child(3),.cm-title i:nth-child(3){animation-delay:8s}
@keyframes cm-cyc3{0%{opacity:0;transform:translateY(4px)}4%,30%{opacity:1;transform:none}34%,100%{opacity:0;transform:translateY(-4px)}}
.cm-tag i{display:inline-flex;align-items:center;font-size:7.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;background:rgba(255,255,255,.92);color:var(--dv-blue-deep);border-radius:4px;padding:0 5px;width:max-content;height:14px}
.cm-title{position:relative;height:26px;font-weight:600;font-size:11px;line-height:1.2;color:var(--ink-1);margin-bottom:4px}
.cm-meta{display:flex;align-items:center;gap:6px}
.cm-av{width:16px;height:16px;border-radius:50%;background:var(--dv-blue);color:#fff;font-size:7px;font-weight:700;display:grid;place-items:center;flex:none}
.cm-newdot{margin-inline-start:auto;font-size:7.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:#0a7d57;background:var(--dv-green-soft);border-radius:4px;padding:2px 5px;animation:cm-blink 12s infinite}
@keyframes cm-blink{0%,3%{background:var(--dv-green);color:#fff}9%,100%{background:var(--dv-green-soft);color:#0a7d57}}
.cm-read span{background:var(--dv-blue);animation:cm-read 12s linear infinite}
@keyframes cm-read{0%{width:0}30%{width:100%}33.4%{width:0}63%{width:100%}66.7%{width:0}97%,100%{width:100%}}
.cm-langs{left:10px;bottom:8px;gap:3px;padding:3px;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.3);backdrop-filter:blur(6px)}
.cm-langs i{font-style:normal;padding:2px 7px;border-radius:999px;color:#fff;position:relative}
.cm-langs i::before{content:"";position:absolute;inset:0;border-radius:999px;background:#fff;opacity:0;z-index:-1}
.cm-langs i:nth-child(1)::before{animation:cm-lang 6s infinite}.cm-langs i:nth-child(2)::before{animation:cm-lang 6s infinite 3s}
.cm-langs i{mix-blend-mode:normal}
@keyframes cm-lang{0%,45%{opacity:1}50%,95%{opacity:0}100%{opacity:1}}
.cm-langs i:nth-child(1){animation:cm-langc 6s infinite}.cm-langs i:nth-child(2){animation:cm-langc 6s infinite 3s}
@keyframes cm-langc{0%,45%{color:var(--dv-blue-deep)}50%,95%{color:#fff}100%{color:var(--dv-blue-deep)}}
/* careers */
.cm-links path{animation:cm-dash 1.6s linear infinite}
.cm-nodes circle{animation:cm-node 5s infinite}
.cm-nodes circle:nth-child(2){animation-delay:1s}.cm-nodes circle:nth-child(3){animation-delay:2s}.cm-nodes circle:nth-child(4){animation-delay:3s}.cm-nodes circle:nth-child(5){animation-delay:4s}
@keyframes cm-node{0%,100%{opacity:.5;r:5}10%{opacity:1;r:7}20%{opacity:.5;r:5}}
.cm-hub{animation:cm-hub 2.4s ease-in-out infinite}
@keyframes cm-hub{0%,100%{r:9;opacity:.9}50%{r:11;opacity:1}}
.cm-jobs{display:grid;gap:4px}
.cm-tabs{position:relative;display:flex;gap:2px;margin-bottom:4px;padding:2px;background:#eef2f7;border-radius:6px}
.cm-tabs span{position:relative;z-index:1;flex:1;text-align:center;font-size:7.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3);padding:3px 0}
.cm-tabs i{position:absolute;top:2px;bottom:2px;left:2px;width:calc((100% - 4px)/3);border-radius:4px;background:#fff;box-shadow:0 2px 6px rgba(7,12,22,.12);animation:cm-tab 9s var(--ease-emphasis) infinite}
@keyframes cm-tab{0%,28%{transform:translateX(0)}33%,61%{transform:translateX(100%)}66%,94%{transform:translateX(200%)}100%{transform:translateX(0)}}
.cm-job{border-radius:6px;padding:3px 5px;margin:0 -5px;position:relative;height:24px}
.cm-job>span:first-child{display:grid;line-height:1.15}
.cm-job::before{content:"";position:absolute;inset:0;border-radius:6px;background:rgba(74,111,165,.14);opacity:0}
.cm-job:nth-child(2)::before{animation:cm-hl 6s infinite}.cm-job:nth-child(3)::before{animation:cm-hl 6s infinite 3s}
@keyframes cm-hl{0%,4%{opacity:0}10%,44%{opacity:1}52%,100%{opacity:0}}
.cm-open{position:relative;font-size:8px;padding:2px 6px 2px 12px}
.cm-open::before{content:"";position:absolute;left:5px;top:50%;width:4px;height:4px;margin-top:-2px;border-radius:50%;background:#0a7d57;animation:cm-ping 2.2s infinite}
.cm-remote{right:10px;bottom:8px;background:rgba(247,147,26,.92);color:#fff}
/* contact */
.cm-sonar circle{transform-origin:110px 100px;animation:cm-sonar 4.5s ease-out infinite}
.cm-sonar circle:nth-child(2){animation-delay:1.5s}.cm-sonar circle:nth-child(3){animation-delay:3s}
@keyframes cm-sonar{0%{transform:scale(.4);opacity:.9}100%{transform:scale(3.2);opacity:0}}
.cm-chat{position:relative;z-index:1;width:100%;display:grid;gap:5px;align-content:start;font-size:9.5px;line-height:1.3}
.cm-chead{display:flex;align-items:center;gap:6px;padding:0 2px 5px;border-bottom:1px solid rgba(255,255,255,.18);margin-bottom:2px;color:#fff}
.cm-chead>span:nth-child(2){display:flex;align-items:center;gap:4px;font-size:8.5px;color:rgba(255,255,255,.7)}
.cm-chead b{font-weight:600;color:#fff}
.cm-chead i{width:5px;height:5px;border-radius:50%;background:var(--dv-green);box-shadow:0 0 0 0 rgba(0,182,122,.5);animation:cm-ping 1.8s infinite}
.cm-av--d{background:#fff;color:var(--dv-blue-deep)}
.cm-time{margin-inline-start:auto;font-family:var(--font-mono);font-size:8px;color:rgba(255,255,255,.55)}
.cm-bub{position:relative;max-width:80%;padding:6px 8px 6px;border-radius:10px;box-shadow:0 10px 22px -12px rgba(7,12,22,.6);opacity:0}
.cm-bub em{display:block;font-style:normal;font-size:7px;opacity:.6;margin-top:2px;text-align:right;font-family:var(--font-mono)}
.cm-bub--in{background:#fff;color:var(--ink-1);border-bottom-left-radius:3px;justify-self:start;animation:cm-b1 12s var(--ease-standard) infinite}
.cm-bub--typing{background:#fff;justify-self:start;display:flex;gap:3px;padding:8px 9px;border-bottom-left-radius:3px;animation:cm-b2 12s var(--ease-standard) infinite;position:absolute;left:0;bottom:2px}
.cm-bub--typing i{width:5px;height:5px;border-radius:50%;background:var(--ink-4);animation:cm-dot 1s infinite}
.cm-bub--typing i:nth-child(2){animation-delay:.15s}.cm-bub--typing i:nth-child(3){animation-delay:.3s}
@keyframes cm-dot{0%,100%{transform:translateY(0);opacity:.5}50%{transform:translateY(-3px);opacity:1}}
.cm-bub--out{background:var(--dv-blue);color:#fff;border-bottom-right-radius:3px;justify-self:end;animation:cm-b3 12s var(--ease-standard) infinite}
.cm-ticks{color:rgba(255,255,255,.55);letter-spacing:-2px;animation:cm-ticks 12s infinite}
@keyframes cm-ticks{0%,62%{color:rgba(255,255,255,.55)}66%,100%{color:#5ee0b0}}
@keyframes cm-b1{0%{opacity:0;transform:translateY(8px)}6%,90%{opacity:1;transform:none}96%,100%{opacity:0}}
@keyframes cm-b2{0%,12%{opacity:0;transform:translateY(6px)}17%,44%{opacity:1;transform:none}49%,100%{opacity:0}}
@keyframes cm-b3{0%,48%{opacity:0;transform:translateY(8px) scale(.96)}54%,90%{opacity:1;transform:none}96%,100%{opacity:0}}
.cm-chans{right:10px;bottom:8px;gap:4px;padding:3px;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.3);backdrop-filter:blur(6px)}
.cm-chans i{width:20px;height:20px;border-radius:50%;display:grid;place-items:center;color:#fff;animation:cm-chan 6s infinite}
.cm-chans i:nth-child(2){animation-delay:2s}.cm-chans i:nth-child(3){animation-delay:4s}
.cm-chans svg{width:11px;height:11px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
@keyframes cm-chan{0%,28%{background:#fff;color:var(--dv-blue-deep)}34%,100%{background:transparent;color:#fff}}
/* changelog */
.cm-tl{animation:cm-tl 9s var(--ease-standard) infinite}
@keyframes cm-tl{0%{stroke-dashoffset:200}30%,88%{stroke-dashoffset:0}96%,100%{stroke-dashoffset:200}}
.cm-tldots circle{opacity:0;animation:cm-tldot 9s infinite}
.cm-tldots circle:nth-child(2){animation-delay:1s}.cm-tldots circle:nth-child(3){animation-delay:2s}
@keyframes cm-tldot{0%,8%{opacity:0;r:2}14%,86%{opacity:1;r:4}94%,100%{opacity:0}}
.cm-diff{margin-inline-start:auto;font-family:var(--font-mono);font-size:8px;display:inline-flex;gap:4px}
.cm-diff b{color:#0a7d57;font-weight:600}.cm-diff s{color:var(--dv-red);text-decoration:none}
.cm-ver{font-family:var(--font-mono);font-size:8.5px;font-weight:600;color:#38bdf8;background:rgba(56,189,248,.12);border-radius:4px;padding:2px 4px;flex:none}
.cm-cat{font-style:normal;font-size:7px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;border-radius:3px;padding:1px 4px;margin-right:4px}
.cm-cat--r{background:var(--dv-green-soft);color:#0a7d57}.cm-cat--p{background:#e8efff;color:#2554d4}.cm-cat--y{background:#fff4e0;color:#b45309}
.cm-new{font-size:8px;animation:cm-newflash 14s infinite}
@keyframes cm-newflash{0%,3%{background:var(--dv-green);color:#fff}10%,100%{background:var(--dv-green-soft);color:#0a7d57}}
.cm-toast{right:10px;bottom:8px;background:#fff;color:var(--ink-1);animation:cm-toast 14s var(--ease-emphasis) infinite}
.cm-toast .cm-tick{color:#0a7d57}
@keyframes cm-toast{0%,4%{opacity:0;transform:translateY(10px)}9%,34%{opacity:1;transform:none}40%,100%{opacity:0;transform:translateY(10px)}}
@media(prefers-reduced-motion:reduce){
  .cm-live i,.cm-roll,.cm-bars rect,.cm-trend,.cm-st i,.cm-st b,.cm-stamp,.cm-lines rect,.cm-spk,.cm-thumb::after,.cm-tag i,.cm-title i,.cm-newdot,.cm-read span,.cm-langs i,.cm-langs i::before,.cm-links path,.cm-nodes circle,.cm-hub,.cm-tabs i,.cm-job::before,.cm-open::before,.cm-sonar circle,.cm-chead i,.cm-bub,.cm-bub--typing i,.cm-ticks,.cm-chans i,.cm-tl,.cm-tldots circle,.cm-new,.cm-toast{animation:none}
  .cm-bars rect{transform:none}.cm-st b{opacity:0}.cm-stamp,.cm-toast,.cm-bub--in,.cm-bub--out,.cm-tldots circle{opacity:1}.cm-bub--typing{display:none}.cm-spk{stroke-dashoffset:0}.cm-tl{stroke-dashoffset:0}.cm-read span{width:60%}.cm-tag i:first-child,.cm-title i:first-child{opacity:1}.cm-sonar circle{transform:scale(1.6);opacity:.4}
}


#curMenu{min-width:372px;display:grid;grid-template-columns:1fr 1fr;gap:0 4px}
#curMenu .pick-note{grid-column:1/-1}
@media(max-width:480px){#curMenu{min-width:min(92vw,372px);grid-template-columns:1fr}}


/* dashboard mock rows never wrap: names ellipsise, sparkline gives way first */
.acc-r{flex-wrap:nowrap}.acc-n{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0;flex:1 1 auto}.acc-n i{white-space:nowrap}.acc-v,.acc-d{white-space:nowrap;flex:none}.acc-s{flex:0 4 54px;min-width:18px}.acc-r{gap:6px;padding:0 10px}
.svc-badge--soon{left:auto;right:12px;background:#fff;border-color:#fff;color:var(--dv-blue-deep)}
.soon-pill{display:inline-block;vertical-align:middle;margin-left:6px;font-style:normal;font-size:9px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;background:rgba(37,84,212,.14);color:#2554d4;border-radius:999px;padding:2px 7px;line-height:1.4}
.foot .soon-pill{background:rgba(255,255,255,.12);color:#9fb8e6}
.cf-tab .soon-pill{margin-left:4px;padding:1px 6px}
/* Widow control: headings balance, paragraphs wrap "pretty"; the script below also glues the last two words. */
h1,h2,h3,h4{text-wrap:balance}
p,li,.lead,.svc-desc,.jny-lede,.cf-lede,.pw-sub,.wt p,.fq-inner p,.disclaimer p{text-wrap:pretty}


/* Company is a narrow dropdown anchored under its button, not a full-width panel. */
.mega--menu{left:auto;right:auto;width:300px;top:calc(100% - 6px);padding:8px;border-radius:18px;border:1px solid rgba(255,255,255,.1);box-shadow:0 30px 60px -20px rgba(7,12,22,.7)}
.mega--menu .mm{display:grid;gap:2px;padding:10px 12px;border-radius:12px;text-decoration:none;color:#fff;transition:background var(--dur-quick)}
.mega--menu .mm:hover{background:rgba(255,255,255,.08)}
.mega--menu .mm b{font-size:14px;font-weight:600;letter-spacing:-.01em}
.mega--menu .mm span{font-size:12px;color:rgba(255,255,255,.5)}
.mega--menu .mm--cta{margin-top:6px;padding:11px 12px;display:flex;align-items:center;justify-content:space-between;border-top:1px solid rgba(255,255,255,.1);border-radius:0 0 12px 12px;font-size:13.5px;font-weight:600;color:#9fb8e6}
.mega--menu .mm--cta:hover{color:#fff;background:transparent}
.mega--menu .mm--cta svg{width:13px;height:13px}
/* grouped mobile drawer */
.nav-links .nl-h{font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:rgba(15,23,42,.42);padding:16px 0 6px}
.nav-links .nl-h:first-child{padding-top:8px}
.nav-links a{padding:9px 0}


/* Footer mirrors the live dolvero.com footer: five link columns, the newsletter form,
   trust badges, the Divitae group line and the legal texts. The nav gets a Company panel. */
.foot-grid{grid-template-columns:1.5fr repeat(5,minmax(0,1fr))}
.foot-grid>div:first-child{grid-column:1}
@media(max-width:1180px){.foot-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.foot-grid>div:first-child{grid-column:1/-1}}
@media(max-width:640px){.foot-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
.foot ul li a{color:rgba(255,255,255,.62);text-decoration:none;transition:color var(--dur-quick)}
.foot ul li a:hover{color:#fff}
.foot-news{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:var(--space-8);align-items:center;margin-top:var(--space-10);padding:28px 32px;border-radius:22px;border:1px solid rgba(255,255,255,.1);background:linear-gradient(135deg,rgba(37,84,212,.16),rgba(255,255,255,.03) 60%)}
.foot-news h4{margin-bottom:8px}
.foot-news p{margin:0;max-width:44ch}
.foot-news-form{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px;align-items:center}
.foot-news-form input{height:48px;border-radius:100px;border:1px solid rgba(255,255,255,.16);background:rgba(255,255,255,.06);color:#fff;padding:0 20px;font:inherit;font-size:14.5px;min-width:0;outline:0;transition:border-color var(--dur-quick),background var(--dur-quick)}
.foot-news-form input::placeholder{color:rgba(255,255,255,.4)}
.foot-news-form input:focus{border-color:#4f7df0;background:rgba(255,255,255,.09)}
.foot-news-form button{height:48px;display:inline-flex;align-items:center;gap:8px;border:0;border-radius:100px;padding:0 22px;background:var(--dv-blue,#2554d4);color:#fff;font:inherit;font-weight:650;font-size:14.5px;cursor:pointer;box-shadow:0 10px 26px rgba(37,84,212,.34);transition:transform var(--dur-quick),box-shadow var(--dur-quick)}
.foot-news-form button:hover{transform:translateY(-1px);box-shadow:0 14px 32px rgba(37,84,212,.5)}
.foot-news-form button svg{width:13px;height:13px}
.foot-news-note{grid-column:1/-1;margin:2px 0 0!important;font-size:12px!important;color:rgba(255,255,255,.42)!important}
.foot-news-note a{color:rgba(255,255,255,.62)}
.foot-news-note.is-ok{color:#3ddc84!important}.foot-news-note.is-err{color:#ff7a7a!important}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
@media(max-width:860px){.foot-news{grid-template-columns:1fr;padding:22px 20px}}
@media(max-width:480px){.foot-news-form{grid-template-columns:1fr}.foot-news-form button{justify-content:center}}
.foot-trustlist{display:flex;flex-wrap:wrap;gap:8px}
.foot-trustlist li{display:inline-flex;align-items:center;gap:8px;height:40px;padding:0 14px;border-radius:12px;border:1px solid rgba(79,125,240,.3);background:rgba(37,84,212,.12);color:#fff;font-size:12.5px;font-weight:600;white-space:nowrap}
.foot-trustlist li svg{width:15px;height:15px;fill:none;stroke:#4f7df0;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.foot-group{display:inline-flex;flex-wrap:wrap;align-items:center;gap:8px;font-size:11.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.4)}
.foot-group span{color:rgba(255,255,255,.22)}
.foot-group a{color:rgba(255,255,255,.7);text-decoration:none;letter-spacing:.06em}
.foot-group a:hover{color:#fff}
.disclaimer p b{color:rgba(255,255,255,.7);font-weight:600}
.mega-list--3{grid-template-columns:repeat(3,minmax(0,1fr))}
@media(max-width:940px){.mega-list--3{grid-template-columns:1fr}}