/* =========================================================================
   We Form Pay — design system v2
   Light, spacious, azuro.org-inspired: white + dotted grid, huge Poppins
   display type, deep-blue rounded panels, borderless shadow cards, pills.
   ========================================================================= */

/* ---------- Tokens ---------- */
:root{
  --bg:        #FFFFFF;
  --bg-soft:   #F3F5FB;
  --bg-softer: #F8F9FD;

  --ink:       #131B3A;
  --ink-2:     #2A3354;
  --muted:     #5C6684;
  --faint:     #8B93AD;

  --blue:      #2038E8;
  --blue-hov:  #1729C8;
  --blue-deep: #0A139B;
  --blue-mid:  #2E63F6;
  --blue-soft: #E3E8FF;
  --blue-text: #001FC1;
  --sky:       #58A9FF;
  --coral:     #FF725E;

  --grad-accent: linear-gradient(100deg,#58A9FF 0%,#2E63F6 55%,#2038E8 100%);
  --grad-panel:  linear-gradient(140deg,#0A139B 0%,#1428C8 45%,#2E63F6 100%);
  /* azuro-style band: vivid blue + light glow spots */
  --band-bg:
    radial-gradient(760px 520px at 12% 12%, rgba(125,175,255,.5), transparent 62%),
    radial-gradient(900px 640px at 88% 34%, rgba(90,140,255,.42), transparent 60%),
    radial-gradient(680px 480px at 45% 96%, rgba(70,120,255,.35), transparent 60%),
    linear-gradient(180deg, #2337E2 0%, #1A2BD0 52%, #101FB4 100%);

  --r:       18px;
  --r-lg:    28px;
  --r-panel: 44px;
  --r-pill:  999px;

  --shadow-card: 0 24px 60px -28px rgba(19,27,58,.22), 0 6px 18px -10px rgba(19,27,58,.08);
  --shadow-pop:  0 32px 80px -32px rgba(19,27,58,.3);
  --shadow-btn:  0 14px 30px -12px rgba(32,56,232,.55);

  --container: 1280px;
  --nav-h: 84px;

  --ease: cubic-bezier(.22,.61,.36,1);
  --ease-out: cubic-bezier(.16,1,.3,1);

  --font: "Poppins", system-ui, -apple-system, "Segoe UI", sans-serif;
}

/* ---------- Reset ---------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:calc(var(--nav-h) + 20px); }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }
body{
  margin:0;
  font-family:var(--font);
  background:var(--bg);
  color:var(--ink);
  line-height:1.65;
  font-size:16.5px;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
/* the azuro dotted field */
body::before{
  content:""; position:fixed; inset:0; z-index:-1; pointer-events:none;
  background-image:radial-gradient(rgba(19,27,58,.13) 1.1px, transparent 1.1px);
  background-size:26px 26px;
  opacity:.5;
}
h1,h2,h3,h4,h5{ font-weight:700; line-height:1.06; letter-spacing:-.03em; margin:0; color:var(--ink); }
p{ margin:0; }
a{ color:inherit; text-decoration:none; }
img,svg{ display:block; max-width:100%; }
button{ font-family:inherit; cursor:pointer; }
ul{ margin:0; padding:0; list-style:none; }
:focus-visible{ outline:3px solid rgba(32,56,232,.45); outline-offset:3px; border-radius:8px; }
::selection{ background:rgba(46,99,246,.2); }

/* ---------- Layout ---------- */
.container{ width:100%; max-width:var(--container); margin-inline:auto; padding-inline:28px; }
.section{ padding-block:clamp(72px,10vw,150px); position:relative; }
.section-tight{ padding-block:clamp(48px,6vw,90px); }
.center{ text-align:center; }

/* ---------- Type ---------- */
.eyebrow{
  display:inline-block; font-weight:600; font-size:13.5px;
  letter-spacing:.22em; text-transform:uppercase; color:var(--blue);
}
.display{
  font-size:clamp(2.9rem,7.6vw,6.6rem);
  font-weight:700; letter-spacing:-.045em; line-height:.98;
  text-transform:uppercase;
}
.h-giant{ font-size:clamp(2.4rem,5.6vw,4.6rem); text-transform:uppercase; letter-spacing:-.04em; }
.h-xl{ font-size:clamp(1.9rem,4vw,3.2rem); letter-spacing:-.035em; }
.h-lg{ font-size:clamp(1.5rem,2.6vw,2.2rem); }
.h-md{ font-size:clamp(1.2rem,1.8vw,1.5rem); }
.lead{ font-size:clamp(1.08rem,1.5vw,1.35rem); color:var(--muted); line-height:1.6; font-weight:400; }
.muted{ color:var(--muted); }
.faint{ color:var(--faint); }
.accent{
  font-style:italic;
  background:var(--grad-accent);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  padding-right:.06em; /* keep italic overhang */
}
.balance{ text-wrap:balance; }
.statement{
  font-size:clamp(1.7rem,3.4vw,2.9rem); font-weight:600; letter-spacing:-.03em; line-height:1.18;
}

.section-head{ max-width:860px; }
.section-head .eyebrow{ margin-bottom:22px; display:block; }
.section-head h2{ margin-bottom:20px; }
.section-head.center{ margin-inline:auto; }

/* ---------- Icons ---------- */
.ficon{ display:inline-flex; align-items:center; justify-content:center; width:24px; height:24px; flex:none; }
.ficon .ic{ width:100%; height:100%; }
.icon-round{
  width:64px; height:64px; border-radius:50%; flex:none;
  display:inline-flex; align-items:center; justify-content:center;
  background:var(--blue-soft); color:var(--blue);
}
.icon-round .ficon{ width:28px; height:28px; }

/* ---------- Buttons ---------- */
.btn{
  position:relative; display:inline-flex; align-items:center; justify-content:center; gap:10px;
  font-weight:600; font-size:15px; letter-spacing:.01em;
  padding:16px 30px; border-radius:var(--r-pill); border:0;
  color:var(--ink); background:transparent;
  transition:transform .2s var(--ease), box-shadow .25s var(--ease), background .2s, color .2s;
  white-space:nowrap; user-select:none;
}
.btn .ficon{ width:18px; height:18px; }
.btn-primary{
  color:#fff; background:var(--blue); font-weight:700; text-transform:uppercase; letter-spacing:.04em; font-size:14px;
  box-shadow:var(--shadow-btn);
}
.btn-primary:hover{ background:var(--blue-hov); transform:translateY(-2px); }
.btn-primary:active{ transform:translateY(1px); }
.btn-dark{
  color:#fff; background:var(--ink); font-weight:700; text-transform:uppercase; letter-spacing:.04em; font-size:14px;
}
.btn-dark:hover{ background:#0B1230; transform:translateY(-2px); }
.btn-soft{
  background:var(--blue-soft); color:var(--blue-hov); font-weight:600;
}
.btn-soft:hover{ background:#D6DDFE; transform:translateY(-2px); }
.btn-white{
  background:#fff; color:var(--blue-deep); font-weight:700; text-transform:uppercase; letter-spacing:.04em; font-size:14px;
  box-shadow:0 18px 44px -18px rgba(4,10,60,.55);
}
.btn-white:hover{ transform:translateY(-2px); }
.btn-ghost-dark{ background:transparent; color:var(--ink); font-weight:600; box-shadow:inset 0 0 0 1.5px rgba(19,27,58,.16); }
.btn-ghost-dark:hover{ box-shadow:inset 0 0 0 1.5px rgba(19,27,58,.4); transform:translateY(-2px); }
.btn:disabled{ opacity:.55; cursor:default; pointer-events:none; transform:none; }
.btn-lg{ padding:19px 38px; font-size:15px; }
.btn-sm{ padding:11px 20px; font-size:13px; }
.btn-arrow .arrow-svg{ transition:transform .25s var(--ease); }
.btn-arrow:hover .arrow-svg{ transform:translateX(4px); }
.arrow-svg{ width:17px; height:17px; flex:none; }

/* attention CTA: short expanding ring (transform+opacity — composited) */
.btn-pulse{ position:relative; }
.btn-pulse::before{
  content:""; position:absolute; inset:0; border-radius:inherit; z-index:-1;
  background:var(--blue); pointer-events:none;
  animation:cta-ping 2.4s cubic-bezier(.2,.6,.35,1) infinite;
}
@keyframes cta-ping{
  0%       { transform:scale(1);         opacity:.4; }
  70%,100% { transform:scale(1.09,1.32); opacity:0; }
}
@media (prefers-reduced-motion: reduce){ .btn-pulse::before{ animation:none; opacity:0; } }

/* hero CTA: glowing orbs orbiting the link on an elliptical "3D" path.
   Depth is faked with scale+opacity (small & dim behind, big & bright in front) —
   transform/opacity only, so it stays on the compositor. */
.orbit-host{ position:relative; --ox:clamp(150px,15vw,225px); --oy:clamp(30px,3.5vw,52px); }
.orbits{ position:absolute; inset:0; pointer-events:none; }
.orbits i{
  position:absolute; left:50%; top:50%; width:15px; height:15px; margin:-7.5px; border-radius:50%;
  background:radial-gradient(circle at 35% 30%, #fff 0%, #CFE2FF 55%, rgba(207,226,255,0) 78%);
  box-shadow:0 0 14px 3px rgba(255,255,255,.5);
  will-change:transform,opacity;
  animation:orbit 4.8s linear infinite;
}
.orbits i:nth-child(2){ width:10px; height:10px; margin:-5px; animation-duration:6.2s; animation-delay:-2.1s; }
.orbits i:nth-child(3){ width:7px;  height:7px;  margin:-3.5px; animation-duration:7.6s; animation-delay:-5s; }
@keyframes orbit{
  0%    { transform:translate(0, calc(var(--oy) * -1)) scale(.5);  opacity:.45; }
  12.5% { transform:translate(calc(var(--ox) * .707), calc(var(--oy) * -.707)) scale(.62); opacity:.6; }
  25%   { transform:translate(var(--ox), 0) scale(.85);            opacity:.8; }
  37.5% { transform:translate(calc(var(--ox) * .707), calc(var(--oy) * .707)) scale(1.1); opacity:1; }
  50%   { transform:translate(0, var(--oy)) scale(1.22);           opacity:1; }
  62.5% { transform:translate(calc(var(--ox) * -.707), calc(var(--oy) * .707)) scale(1.1); opacity:1; }
  75%   { transform:translate(calc(var(--ox) * -1), 0) scale(.85); opacity:.8; }
  87.5% { transform:translate(calc(var(--ox) * -.707), calc(var(--oy) * -.707)) scale(.62); opacity:.6; }
  100%  { transform:translate(0, calc(var(--oy) * -1)) scale(.5);  opacity:.45; }
}
@media (prefers-reduced-motion: reduce){ .orbits i{ animation:none; opacity:0; } }

/* big text-link like azuro's "BUILD →" */
.biglink{
  display:inline-flex; align-items:center; gap:16px;
  font-weight:700; text-transform:uppercase; letter-spacing:-.01em;
  font-size:clamp(1.6rem,3vw,2.6rem); color:#fff;
}
.biglink .arrow-svg{ width:.9em; height:.9em; transition:transform .25s var(--ease); }
.biglink:hover .arrow-svg{ transform:translateX(8px); }
.biglink.dark{ color:var(--ink); }

/* ---------- Nav ---------- */
.site-header{
  position:sticky; top:0; z-index:100; height:var(--nav-h);
  display:flex; align-items:center;
  transition:background .25s, box-shadow .25s;
  background:transparent;
}
.site-header.scrolled{ background:rgba(255,255,255,.9); backdrop-filter:blur(14px); box-shadow:0 10px 30px -18px rgba(19,27,58,.22); }
.nav{ display:flex; align-items:center; justify-content:space-between; width:100%; gap:24px; }
.brand{ display:inline-flex; align-items:center; gap:12px; font-weight:700; font-size:21px; letter-spacing:-.03em; color:var(--ink); }
.brand-mark{ width:36px; height:auto; flex:none; color:var(--blue); }
.brand-word b{ font-weight:700; color:var(--blue); }
/* on dark blue surfaces the mark flips to white, PAY to sky */
.site-footer .brand-mark, .reg-aside .brand-mark{ color:#fff; }
.site-footer .brand-word b, .reg-aside .brand-word b{ color:#9CC5FF; }
.nav-links{ display:flex; align-items:center; gap:4px; }
.nav-links a{
  padding:11px 20px; border-radius:var(--r-pill); font-size:15px; font-weight:500; color:var(--ink-2);
  transition:background .2s, color .2s;
}
.nav-links a:hover{ background:var(--blue-soft); color:var(--blue-hov); }
.nav-cta{ display:flex; align-items:center; gap:10px; }
.nav-toggle{
  display:none; background:var(--blue-soft); border:0; width:46px; height:46px; border-radius:var(--r-pill);
  color:var(--blue-hov); align-items:center; justify-content:center;
}

/* ---------- Hero shell ---------- */
.hero{ padding-top:clamp(36px,6vw,92px); }
.hero-title-wrap{ padding-inline:clamp(20px,2.5vw,40px); margin-bottom:clamp(30px,4.5vw,60px); }

/* deep blue panel (contained, e.g. NOW card / register aside) */
.panel-blue{
  position:relative; border-radius:var(--r-panel);
  background:var(--band-bg);
  color:#fff; overflow:hidden;
}
.panel-blue::before{ /* dots inside panel */
  content:""; position:absolute; inset:0; pointer-events:none;
  background-image:radial-gradient(rgba(255,255,255,.18) 1.1px, transparent 1.1px);
  background-size:26px 26px; opacity:.4;
}
.panel-blue > *{ position:relative; }
.panel-pad{ padding:clamp(36px,5.5vw,72px); }

/* ===== Full-bleed band — azuro sections span the whole viewport ===== */
.band{
  position:relative; color:#fff; overflow:hidden;
  background:var(--band-bg);
}
.band::before{ /* dot pattern */
  content:""; position:absolute; inset:0; pointer-events:none;
  background-image:radial-gradient(rgba(255,255,255,.2) 1.2px, transparent 1.2px);
  background-size:28px 28px; opacity:.35;
}
.band::after{ /* depth: darker toward the bottom, like azuro */
  content:""; position:absolute; inset:auto 0 0 0; height:44%; pointer-events:none;
  background:linear-gradient(to top, rgba(3,12,106,.5), transparent);
}
.band > *{ position:relative; z-index:1; }
.band-round-top{ border-radius:64px 64px 0 0; }
.band-round{ border-radius:64px; }
.band-pad{ padding-block:clamp(52px,7vw,104px); }

/* animated glow spots — transform-only travel (GPU-composited, no repaints) */
.band-animated{
  background:linear-gradient(180deg, #2337E2 0%, #1A2BD0 52%, #101FB4 100%);
}
.glows{
  position:absolute; inset:0; z-index:0; overflow:hidden; pointer-events:none;
}
.glows i{
  position:absolute; border-radius:50%;
  background:radial-gradient(circle, rgba(145,190,255,.62), rgba(135,180,255,.2) 45%, transparent 68%);
  will-change:transform;
  animation:glow-roam 8s ease-in-out infinite alternate;
}
.glows i:nth-child(1){ width:min(820px,90vw); height:min(820px,90vw); left:-8%;  top:-40%;    animation-duration:7s; }
.glows i:nth-child(2){ width:min(960px,110vw); height:min(960px,110vw); right:-16%; top:-12%; animation-duration:9.5s; animation-delay:-4s; animation-direction:alternate-reverse;
  background:radial-gradient(circle, rgba(105,155,255,.56), rgba(95,145,255,.18) 45%, transparent 66%); }
.glows i:nth-child(3){ width:min(700px,80vw); height:min(700px,80vw); left:26%; bottom:-48%;  animation-duration:8s; animation-delay:-6s;
  background:radial-gradient(circle, rgba(80,135,255,.52), rgba(70,125,255,.16) 45%, transparent 66%); }
/* travel across the surface — no scaling, big waypoints */
@keyframes glow-roam{
  0%  { transform:translate3d(-34%,-18%,0); }
  30% { transform:translate3d(32%,24%,0); }
  60% { transform:translate3d(-14%,50%,0); }
  100%{ transform:translate3d(44%,-12%,0); }
}
/* inside contained blue panels the spots are smaller so travel reads clearly */
.panel-blue .glows i:nth-child(1){ width:min(460px,80vw); height:min(460px,80vw); left:-14%; top:-22%; }
.panel-blue .glows i:nth-child(2){ width:min(520px,90vw); height:min(520px,90vw); right:-20%; top:8%; }
.panel-blue .glows i:nth-child(3){ width:min(420px,70vw); height:min(420px,70vw); left:16%; bottom:-24%; }
@media (prefers-reduced-motion: reduce){ .glows i{ animation:none; } }

/* ---------- Hero ---------- */
.mega{
  font-size:clamp(3rem,10vw,10.2rem);
  font-weight:700; letter-spacing:-.05em; line-height:.94;
  text-transform:uppercase; margin:0;
}
.mega span{ display:block; }
.hero-band .inner{ display:flex; align-items:center; justify-content:space-between; gap:clamp(28px,5vw,72px); }
.hero-band .sub{
  font-size:clamp(1.15rem,1.9vw,1.65rem); font-weight:500; line-height:1.5; max-width:620px; color:#fff;
}
.hero-band .sub b{ font-weight:700; }

/* ---------- Ticker ---------- */
.marquee{ overflow:hidden; padding-block:clamp(28px,4vw,44px);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent); }
.marquee-track{ display:flex; width:max-content; animation:marquee 40s linear infinite; }
.marquee:hover .marquee-track{ animation-play-state:paused; }
.marquee-track .mlogo{
  display:inline-flex; align-items:center; gap:13px;
  margin-right:clamp(44px,6.5vw,96px); white-space:nowrap;
}
.mlogo svg{ width:clamp(28px,3vw,38px); height:clamp(28px,3vw,38px); flex:none; color:var(--blue); }
.mlogo b{
  font-weight:700; font-size:clamp(1.35rem,2.4vw,2rem); letter-spacing:-.02em;
  text-transform:uppercase; color:var(--ink-2);
}
@keyframes marquee{ from{ transform:translateX(0) } to{ transform:translateX(-50%) } }

/* ---------- Cards (footer-blue band bg, white text — static, no animated details) ---------- */
.cards-3{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(18px,2.4vw,28px); }
.card{
  position:relative; --ox:205px; --oy:92px; /* hover-orbit radii */
  background:linear-gradient(180deg, #2337E2 0%, #1A2BD0 52%, #101FB4 100%); color:#fff;
  border-radius:var(--r-lg); padding:clamp(26px,3vw,38px);
  box-shadow:0 24px 60px -28px rgba(16,31,180,.5), 0 6px 18px -10px rgba(19,27,58,.12);
  display:flex; align-items:flex-start; justify-content:space-between; gap:20px;
  transition:transform .3s var(--ease), box-shadow .3s var(--ease);
}
.card:hover{ transform:translateY(-6px); box-shadow:0 32px 80px -30px rgba(16,31,180,.62); }
.card .txt h3{
  color:#fff;
  font-size:17px; font-weight:700; text-transform:uppercase; letter-spacing:.02em; margin-bottom:10px;
}
.card .txt p{ color:rgba(255,255,255,.78); font-size:15px; line-height:1.6; }
.card .icon-round{ order:2; background:#fff; color:var(--blue); }
/* orbiting dots appear on hover only (reuses the hero @keyframes orbit) */
.card .orbits i{ width:10px; height:10px; margin:-5px; box-shadow:0 0 10px 2px rgba(255,255,255,.45); animation:none; opacity:0; }
.card .orbits i:nth-child(2){ width:7px; height:7px; margin:-3.5px; }
.card .orbits i:nth-child(3){ width:5px; height:5px; margin:-2.5px; }
.card:hover .orbits i{ animation:orbit 5s linear infinite; }
.card:hover .orbits i:nth-child(2){ animation-duration:6.4s; animation-delay:-2.2s; }
.card:hover .orbits i:nth-child(3){ animation-duration:7.8s; animation-delay:-4.8s; }

/* ---------- Stat rows (blue panel, huge values) ---------- */
.stat-rows{ display:flex; flex-direction:column; }
.stat-row{
  display:flex; align-items:center; justify-content:space-between; gap:24px;
  padding-block:clamp(22px,3vw,36px);
}
.stat-row + .stat-row{ border-top:1px solid rgba(255,255,255,.18); }
.stat-row .lbl{ font-size:clamp(1.05rem,1.6vw,1.4rem); font-weight:500; color:rgba(255,255,255,.8); }
.stat-row .val{ font-size:clamp(1.7rem,4.2vw,3.4rem); font-weight:700; letter-spacing:-.03em; text-align:right; text-transform:uppercase; }

/* ---------- Split statement ---------- */
.split-cta{ display:flex; align-items:center; justify-content:space-between; gap:clamp(28px,5vw,72px); }
.split-cta .statement{ max-width:760px; }
/* HOW IT WORKS CTA: blue dots orbit AROUND the button at all times (like the
   hero Open account orbs). transform/opacity only — composited, no CPU load. */
.split-cta .btn-dark{ --ox:clamp(130px,14vw,185px); --oy:54px; }
.split-cta .btn-dark .orbits i{
  width:10px; height:10px; margin:-5px;
  background:radial-gradient(circle at 35% 30%, #9DB9FF 0%, #2E63F6 70%, rgba(46,99,246,0) 100%);
  box-shadow:0 0 10px 2px rgba(46,99,246,.35);
  animation:orbit 4.6s linear infinite;
}
.split-cta .btn-dark .orbits i:nth-child(2){ width:7px; height:7px; margin:-3.5px; animation-duration:6s; animation-delay:-2.1s; }
.split-cta .btn-dark .orbits i:nth-child(3){ width:5px; height:5px; margin:-2.5px; animation-duration:7.2s; animation-delay:-4.6s; }
/* on hover the button turns into the header OPEN ACCOUNT look: blue + pulse ring */
.split-cta .btn-dark:hover{ background:var(--blue); box-shadow:var(--shadow-btn); }
.split-cta .btn-dark:hover::before{
  content:""; position:absolute; inset:0; border-radius:inherit; z-index:-1;
  background:var(--blue); pointer-events:none;
  animation:cta-ping 2.4s cubic-bezier(.2,.6,.35,1) infinite;
}
@media (prefers-reduced-motion: reduce){
  .split-cta .btn-dark .orbits i{ animation:none; opacity:0; }
  .split-cta .btn-dark:hover::before{ animation:none; opacity:0; }
}

/* ---------- Now / Coming ---------- */
.duo{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(18px,2.4vw,28px); align-items:stretch; }
.panel-soft{
  background:var(--bg-soft); border-radius:var(--r-panel); padding:clamp(32px,4.5vw,56px);
}
.panel-title{
  font-size:clamp(1.5rem,2.4vw,2rem); font-weight:700; text-transform:uppercase; letter-spacing:-.02em;
  display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:clamp(20px,3vw,34px);
}
.chip{
  font-size:12px; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  padding:8px 16px; border-radius:var(--r-pill);
}
.chip.live{ background:rgba(255,255,255,.16); color:#fff; }
.chip.soon{ background:#fff; color:var(--blue-hov); box-shadow:var(--shadow-card); }
.plist li{
  display:flex; gap:16px; align-items:flex-start; padding-block:16px;
  font-size:clamp(1rem,1.4vw,1.15rem); font-weight:500; line-height:1.5;
}
.panel-blue .plist li + li{ border-top:1px solid rgba(255,255,255,.16); }
.panel-soft .plist li + li{ border-top:1px solid rgba(19,27,58,.09); }
.plist .ficon{ width:22px; height:22px; margin-top:3px; }
.panel-blue .plist .ficon{ color:#9DE8C9; }
.panel-soft .plist .ficon{ color:var(--blue); }
.panel-soft .plist li{ color:var(--ink-2); }
.plist li span small{ display:block; font-weight:400; font-size:.86em; opacity:.7; margin-top:2px; }

/* ---------- Steps strip ---------- */
.steps{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(24px,4vw,56px); }
.step .num{
  font-size:clamp(3rem,5.4vw,4.6rem); font-weight:700; letter-spacing:-.05em; line-height:1;
  background:var(--grad-accent); -webkit-background-clip:text; background-clip:text; color:transparent;
  margin-bottom:16px;
}
.step h3{ font-size:19px; text-transform:uppercase; letter-spacing:.01em; margin-bottom:10px; }
.step p{ color:var(--muted); font-size:15px; }

/* ---------- Use cases ---------- */
.uses{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(18px,2.4vw,28px); }
.use{ background:var(--bg-soft); border-radius:var(--r-lg); padding:clamp(26px,3vw,36px); position:relative; overflow:hidden; }
.use > *{ position:relative; z-index:1; }
.use::after{ /* big brand letter watermark: W / F / P */
  content:attr(data-letter); position:absolute; right:22px; bottom:-52px; z-index:0;
  font-size:185px; font-weight:700; line-height:1; letter-spacing:-.05em; pointer-events:none;
  background:linear-gradient(180deg, #2337E2 0%, #101FB4 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  opacity:.3;
}
.use .who{ font-size:13px; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:var(--blue); margin-bottom:14px; }
.use p{ font-size:16.5px; font-weight:500; line-height:1.55; color:var(--ink-2); }

/* ---------- CTA panel ---------- */
.cta-panel{ text-align:center; }
.cta-panel h2{ color:#fff; font-size:clamp(2.2rem,5.4vw,4.4rem); text-transform:uppercase; letter-spacing:-.04em; margin-bottom:18px; }
.cta-panel .lead{ color:rgba(255,255,255,.78); max-width:620px; margin:0 auto clamp(28px,4vw,44px); }
.cta-actions{ display:flex; gap:14px; justify-content:center; flex-wrap:wrap; }
.cta-mail{ margin-top:26px; font-size:14.5px; color:rgba(255,255,255,.6); }
.cta-mail a{ color:#fff; font-weight:600; text-decoration:underline; text-underline-offset:3px; }

/* ---------- Footer — azuro band: vivid blue, glow spots, sparse links ---------- */
.site-footer{
  margin-top:clamp(48px,7vw,96px);
  color:#fff;
  padding:clamp(64px,8vw,120px) 0 44px;
}
.footer-cta{
  text-align:center; margin-bottom:clamp(64px,9vw,140px);
}
.footer-cta h2{
  color:#fff; font-size:clamp(2.2rem,5.8vw,4.8rem); text-transform:uppercase; letter-spacing:-.04em; margin-bottom:18px;
}
.footer-cta .lead{ color:rgba(255,255,255,.75); max-width:600px; margin:0 auto clamp(28px,4vw,44px); }
.footer-grid{
  display:flex; justify-content:space-between; gap:clamp(32px,5vw,80px); align-items:flex-start;
  margin-bottom:clamp(56px,8vw,110px); flex-wrap:wrap;
}
.footer-brandcol .brand{ color:#fff; font-size:clamp(1.6rem,3vw,2.4rem); gap:16px; }
.footer-brandcol .brand .brand-mark{ width:clamp(44px,4.5vw,62px); height:auto; }
.footer-cols{ display:flex; gap:clamp(40px,7vw,110px); flex-wrap:wrap; }
.footer-col{ display:flex; flex-direction:column; }
.footer-col a{
  display:inline-flex; align-items:center; gap:7px;
  padding:11px 0; color:#ADD6FF; font-size:16px; font-weight:500; transition:color .2s;
}
.footer-col a:hover{ color:#fff; }
.footer-col a .out{ width:13px; height:13px; flex:none; opacity:.75; }
.footer-legal{
  display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap;
  color:rgba(214,230,255,.6); font-size:14px;
}
.footer-disclaimer{ color:rgba(214,230,255,.42); font-size:12.5px; line-height:1.75; margin-top:26px; max-width:80ch; }

/* ---------- Forms ---------- */
.field{ display:flex; flex-direction:column; gap:9px; }
.field label{ font-size:14px; font-weight:600; color:var(--ink); }
.input, .select, textarea.input{
  width:100%; padding:16px 20px; border-radius:16px; font-size:15.5px; color:var(--ink);
  background-color:var(--bg-soft); border:0;
  transition:box-shadow .2s, background-color .2s;
  font-family:inherit; font-weight:500;
}
.input::placeholder{ color:var(--faint); font-weight:400; }
.input:focus, .select:focus, textarea.input:focus{
  outline:none; box-shadow:0 0 0 3px rgba(32,56,232,.35); background-color:#fff;
}
.input.error{ box-shadow:0 0 0 3px rgba(255,90,70,.4); }
.field-msg{ font-size:13px; color:#E14934; min-height:17px; font-weight:500; }
.input-group{ position:relative; display:flex; align-items:center; }
.input-group .ficon{ position:absolute; left:18px; width:19px; height:19px; color:var(--faint); pointer-events:none; }
.input-group .input{ padding-left:50px; }
.select{ appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14' fill='none' stroke='%235C6684' stroke-width='1.6' stroke-linecap='round'%3E%3Cpath d='M3.5 5.5L7 9l3.5-3.5'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 18px center; padding-right:46px; }
.grid-2{ display:grid; grid-template-columns:1fr 1fr; gap:18px; }
@media (max-width:560px){ .grid-2{ grid-template-columns:1fr; } }

.cta-form{ display:flex; gap:10px; max-width:520px; margin:0 auto; }
.cta-form .input{ background:#fff; box-shadow:none; flex:1; }
.cta-form .input:focus{ box-shadow:0 0 0 3px rgba(255,255,255,.5); }
.cta-note{ margin-top:18px; font-size:13.5px; color:rgba(255,255,255,.6); }

/* ---------- Inner page hero ---------- */
.page-hero{ padding-top:clamp(40px,6vw,80px); padding-bottom:clamp(28px,4vw,52px); }
.page-hero .lead{ max-width:640px; margin-top:24px; }

/* ================= ONBOARDING ================= */
.ob-list{ max-width:980px; }
.ob-step{
  display:grid; grid-template-columns:minmax(110px,180px) 1fr; gap:clamp(20px,4vw,64px);
  padding-block:clamp(36px,5vw,64px);
}
.ob-step + .ob-step{ border-top:1px solid rgba(19,27,58,.1); }
.ob-num{
  font-size:clamp(3.4rem,7vw,6rem); font-weight:700; letter-spacing:-.05em; line-height:.9;
  background:var(--grad-accent); -webkit-background-clip:text; background-clip:text; color:transparent;
}
.ob-body h3{ font-size:clamp(1.4rem,2.4vw,2rem); text-transform:uppercase; letter-spacing:-.02em; margin-bottom:14px; }
.ob-body > p{ color:var(--muted); max-width:620px; font-size:16.5px; }
.ob-tags{ display:flex; gap:10px; margin-top:20px; flex-wrap:wrap; }
.tagpill{
  display:inline-flex; align-items:center; gap:8px; padding:9px 18px; border-radius:var(--r-pill);
  background:var(--blue-soft); color:var(--blue-hov); font-size:13.5px; font-weight:600;
}
.tagpill .ficon{ width:16px; height:16px; }
.ob-checks{ margin-top:22px; display:flex; flex-direction:column; gap:4px; }
.ob-checks li{ display:flex; gap:12px; align-items:center; padding-block:8px; color:var(--ink-2); font-weight:500; font-size:15.5px; }
.ob-checks .ficon{ width:18px; height:18px; color:var(--blue); }

/* FAQ — dividers only, no boxes */
.faq{ max-width:900px; }
.faq-item{ border-top:1px solid rgba(19,27,58,.12); }
.faq-item:last-child{ border-bottom:1px solid rgba(19,27,58,.12); }
.faq-q{
  width:100%; text-align:left; background:none; border:0; color:var(--ink);
  padding:26px 4px; display:flex; align-items:center; justify-content:space-between; gap:20px;
  font-size:clamp(1.05rem,1.7vw,1.35rem); font-weight:600; font-family:inherit; letter-spacing:-.015em;
}
.faq-q .chev{
  width:38px; height:38px; flex:none; display:grid; place-items:center; border-radius:50%;
  background:var(--blue-soft); color:var(--blue-hov); font-size:22px; font-weight:500;
}
.faq-q .chev i{ display:block; font-style:normal; line-height:1; transition:transform .3s var(--ease); }
.faq-item.open .faq-q .chev i{ transform:rotate(45deg); }
.faq-a{ max-height:0; overflow:hidden; transition:max-height .35s var(--ease); }
.faq-a .inner{ padding:0 4px 28px; color:var(--muted); font-size:15.5px; line-height:1.7; max-width:760px; }

/* ================= REGISTER ================= */
.reg-shell{ display:grid; grid-template-columns:420px 1fr; min-height:100dvh; background:#fff; }
.reg-aside{
  margin:16px 0 16px 16px; border-radius:var(--r-panel);
  background:var(--grad-panel); color:#fff;
  padding:44px 40px; display:flex; flex-direction:column; gap:40px;
  position:sticky; top:16px; height:calc(100dvh - 32px); overflow:hidden;
}
.reg-aside::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background-image:radial-gradient(rgba(255,255,255,.16) 1.1px, transparent 1.1px);
  background-size:26px 26px; opacity:.3;
}
.reg-aside > *{ position:relative; }
/* keep the drifting glows behind content (overrides the rule above) */
.reg-aside > .glows{ position:absolute; }
.reg-aside .glows i:nth-child(1){ width:420px; height:420px; left:-30%; top:-8%; }
.reg-aside .glows i:nth-child(2){ width:460px; height:460px; right:-40%; top:26%; }
.reg-aside .glows i:nth-child(3){ width:380px; height:380px; left:-10%; bottom:-10%; }
.reg-aside .brand{ color:#fff; font-size:20px; }
.reg-aside h2{ color:#fff; font-size:clamp(1.5rem,2vw,1.9rem); text-transform:uppercase; letter-spacing:-.02em; }
.reg-aside .sub{ color:rgba(255,255,255,.65); font-size:14px; margin-top:8px; }

.reg-progress{ display:flex; flex-direction:column; margin-top:4px; }
.reg-progress .p-step{ display:flex; gap:18px; align-items:flex-start; padding:15px 0; position:relative; opacity:.55; transition:opacity .3s; }
.reg-progress .p-step[hidden]{ display:none; }
.reg-progress .p-step.active, .reg-progress .p-step.done{ opacity:1; }
.reg-progress .p-dot{
  width:38px; height:38px; flex:none; border-radius:50%; display:grid; place-items:center;
  font-size:14px; font-weight:700;
  background:rgba(255,255,255,.14); color:#fff; transition:all .3s; z-index:2;
}
.reg-progress .p-step.active .p-dot{ background:#fff; color:var(--blue-deep); }
.reg-progress .p-step.done .p-dot{ background:rgba(255,255,255,.28); color:#fff; }
.reg-progress .p-dot .ficon{ width:16px; height:16px; }
.reg-progress .p-line{ position:absolute; left:18px; top:46px; bottom:-8px; width:2px; background:rgba(255,255,255,.2); z-index:1; }
.reg-progress .p-step:last-child .p-line{ display:none; }
.reg-progress .p-txt b{ display:block; font-size:15.5px; font-weight:600; color:#fff; }
.reg-progress .p-txt span{ font-size:13px; color:rgba(255,255,255,.6); }
.reg-aside-foot{ margin-top:auto; display:flex; flex-direction:column; gap:13px; }
.reg-assure{ display:flex; align-items:center; gap:11px; font-size:13px; color:rgba(255,255,255,.75); font-weight:500; }
.reg-assure .ficon{ width:17px; height:17px; color:#9DE8C9; }

.reg-main{ padding:clamp(28px,4vw,52px) clamp(24px,5vw,88px); display:flex; flex-direction:column; }
.reg-topbar{ display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; }
.reg-topbar .hint{ font-size:14.5px; color:var(--muted); }
.reg-topbar .hint a{ color:var(--blue); font-weight:600; }
.reg-mobilebar{ display:none; }
.reg-form-wrap{ width:100%; max-width:600px; margin:auto; padding-block:44px; }
.reg-step{ display:none; animation:fadeUp .5s var(--ease-out); }
.reg-step.active{ display:block; }
.reg-step h2{ font-size:clamp(1.7rem,3vw,2.5rem); letter-spacing:-.035em; margin-bottom:12px; }
.reg-step > .sub{ color:var(--muted); margin-bottom:36px; font-size:16px; }
.reg-fields{ display:flex; flex-direction:column; gap:22px; }
.reg-actions{ display:flex; align-items:center; justify-content:space-between; gap:14px; margin-top:40px; }
.reg-actions.solo{ justify-content:flex-end; }

/* choice cards — shadow, no border; blue ring when selected */
.choice-grid{ display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.choice{
  position:relative; cursor:pointer; padding:30px 28px; border-radius:var(--r-lg);
  background:#fff; box-shadow:var(--shadow-card);
  transition:transform .25s, box-shadow .25s;
  display:flex; flex-direction:column; gap:14px;
}
.choice:hover{ transform:translateY(-4px); box-shadow:var(--shadow-pop); }
.choice input{ position:absolute; opacity:0; inset:0; cursor:pointer; }
.choice .icon-round{ width:56px; height:56px; }
.choice h4{ font-size:18px; font-weight:700; text-transform:uppercase; letter-spacing:.01em; }
.choice p{ font-size:14px; color:var(--muted); line-height:1.55; }
.choice .check{
  position:absolute; top:20px; right:20px; width:26px; height:26px; border-radius:50%;
  background:var(--bg-soft); display:grid; place-items:center; color:transparent; transition:all .2s;
}
.choice .check .ficon{ width:14px; height:14px; }
.choice.selected{ box-shadow:0 0 0 3px var(--blue), var(--shadow-pop); }
.choice.selected .check{ background:var(--blue); color:#fff; }

/* code inputs */
.code-inputs{ display:flex; gap:12px; justify-content:center; margin:10px 0 4px; }
.code-inputs input{
  width:58px; height:68px; text-align:center; font-family:inherit; font-size:28px; font-weight:700;
  border-radius:18px; background:var(--bg-soft); border:0; color:var(--ink); transition:all .2s;
}
.code-inputs input:focus{ outline:none; box-shadow:0 0 0 3px rgba(32,56,232,.35); background:#fff; }
.code-inputs input.filled{ background:var(--blue-soft); color:var(--blue-hov); }
.resend{ text-align:center; margin-top:20px; font-size:14px; color:var(--muted); }
.resend button{ background:none; border:0; color:var(--blue); font-weight:600; font-family:inherit; font-size:14px; }

/* password meter */
.pw-meter{ display:flex; gap:6px; margin-top:12px; }
.pw-meter span{ height:6px; flex:1; border-radius:3px; background:var(--bg-soft); transition:background .3s; }
.pw-label{ font-size:13px; margin-top:9px; color:var(--faint); font-weight:500; }
.pw-reqs{ display:grid; grid-template-columns:1fr 1fr; gap:7px 18px; margin-top:14px; }
.pw-reqs li{ display:flex; align-items:center; gap:9px; font-size:13px; color:var(--faint); font-weight:500; transition:color .2s; }
.pw-reqs li .dotb{ width:17px; height:17px; border-radius:50%; background:var(--bg-soft); display:grid; place-items:center; }
.pw-reqs li .dotb .ficon{ width:10px; height:10px; color:transparent; }
.pw-reqs li.ok{ color:#0C9A6C; }
.pw-reqs li.ok .dotb{ background:#D8F5EA; }
.pw-reqs li.ok .dotb .ficon{ color:#0C9A6C; }

/* checkbox */
.check-row{ display:flex; gap:13px; align-items:flex-start; font-size:14px; color:var(--muted); line-height:1.55; }
.check-row input{
  appearance:none; width:22px; height:22px; flex:none; border-radius:7px;
  background:var(--bg-soft); margin-top:1px; position:relative; cursor:pointer; transition:all .2s;
}
.check-row input:checked{ background:var(--blue); }
.check-row input:checked::after{ content:""; position:absolute; left:7.5px; top:3.5px; width:5px; height:10px; border:solid #fff; border-width:0 2.2px 2.2px 0; transform:rotate(45deg); }
.check-row a{ color:var(--blue); font-weight:600; }

/* review list */
.review-list{ background:var(--bg-soft); border-radius:var(--r-lg); overflow:hidden; padding:6px 0; }
.review-list .rl{ display:flex; justify-content:space-between; gap:16px; padding:13px 24px; font-size:14.5px; }
.review-list .rl + .rl{ border-top:1px solid rgba(19,27,58,.07); }
.review-list .rl span{ color:var(--muted); }
.review-list .rl b{ font-weight:600; text-align:right; }

/* success */
.reg-success{ text-align:center; max-width:520px; margin:auto; }
.success-ring{
  width:96px; height:96px; margin:0 auto 30px; border-radius:50%; display:grid; place-items:center;
  background:var(--blue-soft);
}
.success-ring .inner{
  width:64px; height:64px; border-radius:50%; background:var(--blue); display:grid; place-items:center; color:#fff;
  box-shadow:var(--shadow-btn); animation:pop .5s var(--ease-out);
}
.success-ring .ficon{ width:30px; height:30px; }
@keyframes pop{ 0%{ transform:scale(.4); opacity:0 } 60%{ transform:scale(1.08) } 100%{ transform:scale(1); opacity:1 } }

/* ---------- Reveal ---------- */
[data-reveal]{ opacity:0; transform:translateY(26px); transition:opacity .7s var(--ease-out), transform .7s var(--ease-out); }
[data-reveal].in{ opacity:1; transform:none; }
[data-reveal-delay="1"]{ transition-delay:.08s; }
[data-reveal-delay="2"]{ transition-delay:.16s; }
[data-reveal-delay="3"]{ transition-delay:.24s; }
[data-reveal-delay="4"]{ transition-delay:.32s; }
@keyframes fadeUp{ from{ opacity:0; transform:translateY(14px) } to{ opacity:1; transform:none } }
@media (prefers-reduced-motion: reduce){
  [data-reveal]{ opacity:1 !important; transform:none !important; }
  .marquee-track{ animation:none !important; }
}

/* ---------- Mobile drawer ---------- */
.mobile-drawer{ position:fixed; inset:0; z-index:200; display:none; }
.mobile-drawer.open{ display:block; }
.mobile-drawer .scrim{ position:absolute; inset:0; background:rgba(11,17,48,.45); backdrop-filter:blur(3px); }
.mobile-drawer .panel{
  position:absolute; top:10px; right:10px; bottom:10px; width:min(340px,88vw);
  background:#fff; border-radius:var(--r-lg); padding:24px;
  display:flex; flex-direction:column; gap:6px;
  overflow-y:auto; overscroll-behavior:contain; box-shadow:var(--shadow-pop);
  animation:slideIn .3s var(--ease-out);
}
.mobile-drawer a:not(.btn){ padding:15px 14px; border-radius:14px; font-size:16.5px; font-weight:500; color:var(--ink-2); }
.mobile-drawer a:not(.btn):hover{ background:var(--blue-soft); color:var(--blue-hov); }
.mobile-drawer .close{
  align-self:flex-end; background:var(--blue-soft); border:0; width:44px; height:44px; border-radius:50%;
  color:var(--blue-hov); display:grid; place-items:center; margin-bottom:6px;
}
@keyframes slideIn{ from{ transform:translateX(105%) } to{ transform:none } }

/* ---------- Responsive ---------- */
@media (max-width:1080px){
  .cards-3,.uses{ grid-template-columns:1fr 1fr; }
  .steps{ grid-template-columns:1fr; gap:36px; }
}
@media (max-width:1000px){
  .nav-links{ display:none; }
  .nav-toggle{ display:inline-flex; }
}
@media (max-width:920px){
  .hero-band .inner{ flex-direction:column; align-items:flex-start; }
  .duo{ grid-template-columns:1fr; }
  .split-cta{ flex-direction:column; align-items:flex-start; }
  .reg-shell{ grid-template-columns:1fr; }
  .reg-aside{ display:none; }
  .reg-mobilebar{ display:flex; align-items:center; justify-content:space-between; margin-bottom:10px; }
  .reg-topbar{ display:none; }
  .footer-grid{ flex-direction:column; }
  .band-round-top{ border-radius:36px 36px 0 0; }
  .band-round{ border-radius:36px; }
  .ob-step{ grid-template-columns:1fr; gap:16px; }
}
@media (max-width:620px){
  .container{ padding-inline:18px; }
  /* mobile header: big logo + Login + Open account, no hamburger */
  .nav{ gap:8px; }
  .nav-toggle{ display:none; }
  .nav-cta{ gap:6px; }
  .nav-cta .btn{ padding:9px 11px; font-size:11.5px; }
  .nav-cta .btn-primary{ letter-spacing:.01em; }
  .brand{ gap:8px; font-size:17px; }
  .brand-mark{ width:28px; }
  .cards-3,.uses{ grid-template-columns:1fr; }
  .stat-row{ flex-direction:column; align-items:flex-start; gap:4px; }
  .stat-row .val{ text-align:left; }
  .choice-grid{ grid-template-columns:1fr; }
  /* email input + Get started stay on one line, like desktop */
  .cta-form{ gap:8px; }
  .cta-form .input{ min-width:0; padding:15px 16px; }
  .cta-form .btn{ padding:15px 18px; font-size:12.5px; flex:none; }
  .code-inputs input{ width:46px; height:58px; font-size:24px; }
  .reg-mobilebar .stepchip{ font-size:12.5px; }
}