/* ============================================================
   AVM FINANCIAL — core design system
   Palette: deep emerald / OLED green-black. Glassmorphic.
   ============================================================ */

/* ---------- 1. TOKENS ---------- */
:root{
  /* surfaces */
  --bg:#071C13;
  --bg-2:#0C2619;
  --bg-3:#123224;
  --panel:rgba(255,255,255,.05);
  --panel-2:rgba(255,255,255,.075);
  --hairline:rgba(255,255,255,.115);
  --hairline-strong:rgba(255,255,255,.19);
  /* --bg and --bg-2 as rgb triples. Every scrim that sits over photography
     mixes from these, so lifting the page lifts the images with it and the
     two never drift apart. */
  --ink:7,28,19;
  --ink-2:12,38,25;

  /* brand — green */
  --brand:#16C47F;
  --brand-soft:#3FE0A0;
  --brand-deep:#0B8F5B;
  --brand-ink:#052E1E;
  --glow:rgba(22,196,127,.42);
  --glow-soft:rgba(22,196,127,.14);

  /* text */
  --text:#EDF6F1;
  --text-2:#A9BEB4;
  --text-3:#87A093;

  /* accents */
  --gold:#D8C7A1;
  --danger:#F2705B;
  /* acid lime — the one bright note allowed against the emerald ground */
  --acid:#C8FF4D;
  --acid-glow:rgba(200,255,77,.42);
  --grad-acid:linear-gradient(43deg,var(--brand-deep) 0%,var(--brand) 46%,var(--acid) 100%);

  /* geometry */
  --r-xl:3.125rem;   /* 50px — pill-round card corners */
  --r-lg:1.35rem;
  --r-md:.9rem;
  --pad-shell:.5rem;

  /* motion */
  --ease:cubic-bezier(.32,.72,0,1);
  --ease-out:cubic-bezier(.22,1,.36,1);
  --dur:.7s;

  /* layout */
  --max:100%;
  --gut:clamp(1.15rem,3.5vw,4rem);
}

/* ---------- 2. RESET ---------- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:6rem}
body{
  background:var(--bg);
  color:var(--text);
  font-family:"Plus Jakarta Sans",ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
  font-size:16px;line-height:1.65;
  font-feature-settings:"ss01","cv01";
  -webkit-font-smoothing:antialiased;
  /* The ambient orbs are wider than the viewport and sit outside the container
     on purpose. `hidden` masked the paint but still left the document
     horizontally scrollable, and mobile Chrome answers that by widening the
     layout viewport — which stretched the fixed nav past the screen and put
     the burger out of reach. `clip` removes the scrollable region outright,
     and unlike `hidden` it does not turn the body into a scroll container. */
  overflow-x:hidden;
  overflow-x:clip;
}
img,svg,video{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
ul,ol{list-style:none}
table{border-collapse:collapse;width:100%}
::selection{background:var(--brand);color:#071C13}

/* film grain — fixed, never on scroll containers */
body::after{
  content:"";position:fixed;inset:0;z-index:60;pointer-events:none;opacity:.035;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E");
}

/* ---------- 3. TYPE ---------- */
h1,h2,h3,h4,.display{
  font-family:"Space Grotesk",ui-sans-serif,system-ui,sans-serif;
  font-weight:500;line-height:1.02;letter-spacing:-.035em;
}
h1,.h1{font-size:clamp(2.9rem,7.2vw,5.6rem)}
h2,.h2{font-size:clamp(2.1rem,4.6vw,3.6rem);line-height:1.05}
h3,.h3{font-size:clamp(1.35rem,2.1vw,1.75rem);letter-spacing:-.025em;line-height:1.2}
h4,.h4{font-size:1.06rem;letter-spacing:-.015em;line-height:1.35}
p{color:var(--text-2)}
.lead{font-size:clamp(1.02rem,1.35vw,1.2rem);color:var(--text-2);max-width:58ch;line-height:1.75}
.muted{color:var(--text-3)}
.tabular{font-variant-numeric:tabular-nums}
em.hl{font-style:normal;color:var(--brand-soft)}
.grad{
  background:linear-gradient(96deg,var(--text) 30%,var(--brand-soft) 72%,var(--brand) 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}

/* ---------- 4. LAYOUT ---------- */
.container{width:100%;max-width:var(--max);margin-inline:auto;padding-inline:var(--gut)}
/* clip, not hidden: `overflow-x:clip` is the one value that pairs with a
   visible y-axis, so the orbs stop widening the document without the
   section turning into a scroll container. */
.section{padding-block:clamp(5.5rem,11vw,9.5rem);position:relative;overflow-x:clip}
.section--tight{padding-block:clamp(4rem,7vw,6rem)}
.stack-sm > * + *{margin-top:.85rem}
.stack > * + *{margin-top:1.5rem}
.stack-lg > * + *{margin-top:3rem}
.center{text-align:center;margin-inline:auto}
.center .lead{margin-inline:auto}

.sec-head{max-width:62ch}
.sec-head.center{text-align:center}

/* ambient mesh orbs */
.orb{position:absolute;border-radius:50%;pointer-events:none;z-index:0}
.orb--a{width:44rem;height:44rem;background:radial-gradient(circle,rgba(22,196,127,.20),rgba(22,196,127,.135) 30%,rgba(22,196,127,.055) 52%,rgba(22,196,127,.015) 68%,transparent 82%);top:-16rem;right:-14rem}
.orb--b{width:34rem;height:34rem;background:radial-gradient(circle,rgba(11,143,91,.16),rgba(11,143,91,.108) 30%,rgba(11,143,91,.045) 53%,rgba(11,143,91,.012) 70%,transparent 84%);bottom:-14rem;left:-12rem}
.orb--c{width:28rem;height:28rem;background:radial-gradient(circle,rgba(63,224,160,.10),rgba(63,224,160,.068) 30%,rgba(63,224,160,.028) 53%,rgba(63,224,160,.008) 70%,transparent 84%);top:40%;left:44%}
.container,.section > .container{position:relative;z-index:1}

/* hairline rule */
.rule{height:1px;background:linear-gradient(90deg,transparent,var(--hairline),transparent);border:0}

/* ---------- 6. DOUBLE-BEZEL SHELL ---------- */
.shell{
  background:var(--panel);
  border:1px solid var(--hairline);
  border-radius:var(--r-xl);
  padding:var(--pad-shell);
  /* neumorphic extrusion, inverted for a near-black ground: the "lit" side is
     a whisper of white rather than #fff, or it reads as a grey halo */
  box-shadow:
    18px 18px 38px rgba(0,0,0,.55),
    -18px -18px 38px rgba(255,255,255,.03);
  transition:border-color var(--dur) var(--ease),transform var(--dur) var(--ease),background var(--dur) var(--ease),box-shadow var(--dur) var(--ease);
}
.core{
  background:linear-gradient(168deg,rgba(255,255,255,.06),rgba(255,255,255,.018));
  border-radius:calc(var(--r-xl) - var(--pad-shell));
  box-shadow:inset 0 1px 1px rgba(255,255,255,.13);
  padding:clamp(1.5rem,2.6vw,2.1rem);
  height:100%;
  position:relative;overflow:hidden;
}
.shell:hover{
  border-color:rgba(22,196,127,.3);transform:translateY(-4px);
  box-shadow:22px 26px 46px rgba(0,0,0,.62),-18px -18px 38px rgba(255,255,255,.03);
}
.shell--flat:hover{transform:none}
.core--pad-lg{padding:clamp(1.9rem,3.4vw,3rem)}
.core--tint{background:linear-gradient(168deg,rgba(22,196,127,.14),rgba(22,196,127,.02))}
.core--dark{background:linear-gradient(168deg,rgba(var(--ink),.86),rgba(var(--ink-2),.64))}

/* ---------- 7. BUTTONS ---------- */
.btn{
  --btn-bg:var(--panel-2);--btn-fg:var(--text);--btn-bd:var(--hairline-strong);
  display:inline-flex;align-items:center;gap:.7rem;
  padding:.62rem .72rem .62rem 1.35rem;
  border-radius:999px;border:1px solid var(--btn-bd);
  background:var(--btn-bg);color:var(--btn-fg);
  font-size:.93rem;font-weight:600;letter-spacing:-.01em;cursor:pointer;
  transition:transform .45s var(--ease),background .45s var(--ease),border-color .45s var(--ease),box-shadow .45s var(--ease);
  white-space:nowrap;
}
.btn__ico{
  width:2rem;height:2rem;flex:0 0 2rem;border-radius:999px;
  display:grid;place-items:center;background:rgba(255,255,255,.10);
  transition:transform .5s var(--ease),background .5s var(--ease);
}
.btn__ico svg{width:14px;height:14px}
.btn:hover .btn__ico{transform:translate(3px,-1px) scale(1.06);background:rgba(255,255,255,.18)}
.btn:active{transform:scale(.98)}
.btn--primary{
  --btn-bg:linear-gradient(140deg,var(--brand-soft),var(--brand) 55%,var(--brand-deep));
  --btn-fg:#03150E;--btn-bd:transparent;
  box-shadow:0 12px 40px -14px var(--glow),inset 0 1px 0 rgba(255,255,255,.4);
}
.btn--primary .btn__ico{background:rgba(3,21,14,.14)}
.btn--primary:hover{transform:scale(1.02);box-shadow:0 20px 55px -16px var(--glow),inset 0 1px 0 rgba(255,255,255,.5)}
.btn--primary:active{transform:scale(.98)}
.btn--ghost{--btn-bg:rgba(22,196,127,.08);--btn-bd:rgba(22,196,127,.34)}
.btn--ghost .btn__ico{background:rgba(22,196,127,.18)}
.btn--ghost:hover{--btn-bd:rgba(22,196,127,.6);--btn-bg:rgba(22,196,127,.17);
  box-shadow:0 10px 30px -14px var(--glow)}
.btn--ghost:hover .btn__ico{background:rgba(22,196,127,.28)}
.btn--sm{padding:.45rem .5rem .45rem 1rem;font-size:.85rem}
.btn--sm .btn__ico{width:1.65rem;height:1.65rem;flex-basis:1.65rem}
.btn--block{width:100%;justify-content:center;padding-inline:1.35rem}
.btn-row{display:flex;flex-wrap:wrap;gap:.8rem;align-items:center}

.textlink{
  display:inline-flex;align-items:center;gap:.45rem;color:var(--brand-soft);
  font-weight:600;font-size:.92rem;
  transition:gap .4s var(--ease),color .4s var(--ease);
}
/* the inline SVG carries only a viewBox, so without this it falls back to the
   300x150 replaced-element default and stretches to whatever room the flex row has */
.textlink svg{width:16px;height:16px;flex:0 0 16px}
.textlink:hover{gap:.8rem;color:var(--brand)}

/* ---------- 8. NAV — floating capsule ---------- */
.nav-wrap{position:fixed;inset:0 0 auto;z-index:70;padding-top:1rem;pointer-events:none;transition:padding-top .6s var(--ease)}
.nav-wrap.is-stuck{padding-top:.5rem}
.nav{
  position:relative;
  pointer-events:auto;
  /* 66rem, not 64: Afrikaans labels are the longest set and overflowed the
     capsule even before FAQ joined the row. */
  width:min(66rem,calc(100% - 2*var(--gut)));
  margin-inline:auto;
  height:3.5rem;
  display:flex;align-items:center;justify-content:space-between;gap:.75rem;
  padding:.5rem .5rem .5rem 1rem;
  border-radius:999px;
  background:rgba(var(--ink),.90);
  border:1px solid var(--hairline);
  box-shadow:0 10px 26px -12px rgba(0,0,0,.7);
  transition:background .6s var(--ease),border-color .6s var(--ease),box-shadow .6s var(--ease);
}
.nav-wrap.is-stuck .nav{
  background:rgba(var(--ink),.94);border-color:var(--hairline-strong);
  box-shadow:0 16px 34px -14px rgba(0,0,0,.8);
}

.brand{display:flex;align-items:center;flex:0 0 auto}
.brand__logo{display:block;height:2.05rem;width:auto}
.brand__glyph{display:none;height:1.8rem;width:auto}
.footer__brand .brand__logo{height:2.5rem}

/* centre group */
.nav__links{display:flex;align-items:center;gap:.1rem;margin-inline:auto}
/* .nav is capped at 64rem; seven links only clear that capsule on the tighter
   horizontal padding — at .78rem the CTA spills past the rounded edge. */
.nav__links a{
  position:relative;padding:.45rem .58rem;border-radius:999px;
  font-size:.875rem;font-weight:500;color:var(--text-2);white-space:nowrap;
  transition:color .45s var(--ease),background .45s var(--ease);
}
.nav__links a:hover{color:var(--text);background:var(--panel-2)}
.nav__links a.is-active{color:var(--brand-soft);background:rgba(22,196,127,.16)}

/* right actions — one quiet, one loud, matching the capsule's 2.25rem rhythm */
.nav__cta{display:flex;align-items:center;gap:.35rem;flex:0 0 auto}
.nav .btn{height:2.25rem;padding:0 1.15rem;font-size:.85rem;font-weight:600;gap:0}
.nav .btn__ico{display:none}
.nav .btn--ghost{--btn-bd:transparent;color:var(--text-2);padding:0 .95rem}
.nav .btn--ghost:hover{--btn-bd:transparent;color:var(--text);background:var(--panel-2)}
.nav .btn--primary{box-shadow:0 6px 18px -8px var(--glow),inset 0 1px 0 rgba(255,255,255,.35)}
.nav .btn--primary:hover{transform:none;box-shadow:0 12px 28px -10px var(--glow),inset 0 1px 0 rgba(255,255,255,.5)}

.nav__burger{
  display:none;width:2.25rem;height:2.25rem;border-radius:999px;
  border:1px solid transparent;background:var(--panel);
  position:relative;cursor:pointer;flex:0 0 2.25rem;
  transition:background .4s var(--ease);
}
.nav__burger:hover{background:var(--panel-2)}
.nav__burger span{
  position:absolute;left:50%;top:50%;width:14px;height:1.5px;background:var(--text);border-radius:2px;
  transition:transform .6s var(--ease),opacity .35s var(--ease);
}
.nav__burger span:nth-child(1){transform:translate(-50%,-4.5px)}
.nav__burger span:nth-child(2){transform:translate(-50%,0)}
.nav__burger span:nth-child(3){transform:translate(-50%,4.5px)}
body.menu-open .nav__burger span:nth-child(1){transform:translate(-50%,0) rotate(45deg)}
body.menu-open .nav__burger span:nth-child(2){opacity:0;transform:translate(-50%,0) scaleX(.3)}
body.menu-open .nav__burger span:nth-child(3){transform:translate(-50%,0) rotate(-45deg)}

/* ---------- 8b. LANGUAGE PICKER ----------
   <details> rather than a scripted dropdown: it opens, closes and takes focus
   on its own, so the control still works if main.js never loads. English is
   the only locale today; the markup is a list so adding one is a new <a>. */
.lang{position:relative;flex:0 0 auto}
.lang__btn{
  display:inline-flex;align-items:center;gap:.35rem;cursor:pointer;list-style:none;
  height:2.25rem;padding:0 .7rem;border-radius:999px;
  border:1px solid transparent;background:var(--panel);
  font-size:.8rem;font-weight:600;letter-spacing:.04em;color:var(--text-2);
  transition:background .4s var(--ease),color .4s var(--ease);
}
.lang__btn::-webkit-details-marker{display:none}
.lang__btn:hover{background:var(--panel-2);color:var(--text)}
.lang[open] .lang__btn{background:var(--panel-2);color:var(--text)}
.lang__btn svg{width:15px;height:15px;flex:0 0 15px;stroke:currentColor;fill:none;stroke-width:1.6}
.lang__caret{width:11px;height:11px;flex:0 0 11px;transition:transform .35s var(--ease)}
.lang[open] .lang__caret{transform:rotate(180deg)}

.lang__pop{
  position:absolute;top:calc(100% + .55rem);right:0;z-index:5;
  min-width:11.5rem;padding:.4rem;
  border-radius:var(--r-md);border:1px solid var(--hairline-strong);
  background:rgba(var(--ink-2),.985);
  box-shadow:0 20px 40px -16px rgba(0,0,0,.7);
}
.lang__opt{
  display:flex;align-items:center;justify-content:space-between;gap:.8rem;width:100%;
  padding:.5rem .65rem;border-radius:calc(var(--r-md) - .3rem);border:0;background:none;
  font-size:.86rem;font-weight:500;color:var(--text-2);text-align:left;cursor:pointer;
  text-decoration:none;
  transition:background .3s var(--ease),color .3s var(--ease);
}
.lang__opt:hover{background:var(--panel-2);color:var(--text)}
.lang__opt.is-current{color:var(--brand-soft);cursor:default}
.lang__opt.is-current:hover{background:none}
.lang__opt svg{width:14px;height:14px;flex:0 0 14px;stroke:currentColor;fill:none;stroke-width:2.4}
/* in the footer the card clips anything above it, so the list drops and
   aligns to the control's left edge rather than the header's right */
.lang--foot .lang__pop{right:auto;left:0;min-width:100%}

/* in the overlay it is a plain row, not a popover — there is room.
   The nav list below styles every .menu a at 2.9rem; two classes here beat
   that one, the same trick .menu__foot .btn uses. */
.menu__lang{display:flex;align-items:center;flex-wrap:wrap;gap:.55rem .7rem;margin-top:2.5rem;
  padding-top:1.6rem;border-top:1px solid var(--hairline)}
.menu__lang > span{display:flex;flex:0 0 100%;align-items:center;gap:.45rem;
  margin-bottom:.15rem;
  font-size:.74rem;font-weight:600;text-transform:uppercase;
  letter-spacing:.18em;color:var(--text-3)}
.menu__lang .menu__langopt{
  display:inline-flex;align-items:center;
  font-family:"Plus Jakarta Sans",sans-serif;
  font-size:.86rem;font-weight:600;letter-spacing:-.01em;line-height:1.2;
  padding:.42rem .8rem;border-radius:999px;
  border:1px solid var(--hairline-strong);background:none;color:var(--text-2);
  text-decoration:none;
  transition:opacity .7s var(--ease),transform .7s var(--ease),
             background .3s var(--ease),border-color .3s var(--ease),color .3s var(--ease);
}
.menu__lang .menu__langopt:hover{background:var(--panel-2);border-color:var(--text-3);color:var(--text)}
.menu__lang .menu__langopt.is-current{color:var(--brand-soft);border-color:var(--brand-soft);
  background:var(--panel-2)}
.menu__lang svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:1.6}
.menu__lang + .menu__foot{margin-top:1.6rem}
/* The overlay's link styling is meant for the nav list only — left to cascade
   it blows the two CTAs up to 2.9rem, which overflows the pill and clips the
   first letter. Put them back on button metrics. */
.menu__foot .btn{
  display:inline-flex;
  flex:1 1 auto;
  justify-content:center;
  font-family:"Plus Jakarta Sans",sans-serif;
  font-size:.95rem;font-weight:600;letter-spacing:-.01em;line-height:1.2;
  padding:.8rem 1.35rem;
}
.menu__foot .btn:has(.btn__ico){padding-right:.7rem}
.menu__foot .btn .btn__ico{flex:0 0 2rem}
.menu__foot .btn:hover{color:var(--btn-fg)}
.menu__foot .btn--primary:hover{color:#03150E}

/* mobile overlay */
.menu{
  position:fixed;inset:0;z-index:65;
  background:rgba(var(--ink),.965);
  display:flex;flex-direction:column;justify-content:center;
  padding:6rem var(--gut) 3rem;
  opacity:0;visibility:hidden;
  transition:opacity .6s var(--ease),visibility .6s var(--ease);
}
body.menu-open .menu{opacity:1;visibility:visible}
.menu{overflow-y:auto}
.menu a{
  display:block;font-family:"Space Grotesk",sans-serif;font-size:clamp(1.9rem,8vw,2.9rem);
  letter-spacing:-.035em;padding:.28rem 0;color:var(--text);
  opacity:0;transform:translateY(2.6rem);
  transition:opacity .7s var(--ease),transform .7s var(--ease),color .4s var(--ease);
}
.menu a:hover{color:var(--brand-soft)}
body.menu-open .menu a{opacity:1;transform:translateY(0)}
body.menu-open .menu a:nth-child(1){transition-delay:.08s}
body.menu-open .menu a:nth-child(2){transition-delay:.13s}
body.menu-open .menu a:nth-child(3){transition-delay:.18s}
body.menu-open .menu a:nth-child(4){transition-delay:.23s}
body.menu-open .menu a:nth-child(5){transition-delay:.28s}
body.menu-open .menu a:nth-child(6){transition-delay:.33s}
body.menu-open .menu a:nth-child(7){transition-delay:.38s}
.menu__foot{margin-top:2.5rem;display:flex;gap:.7rem;flex-wrap:wrap}

/* ---------- 9. HERO ---------- */
.hero{position:relative;min-height:100dvh;display:flex;align-items:center;padding-top:9rem;padding-bottom:4rem;overflow:hidden}
.hero__grid{
  position:absolute;inset:0;z-index:0;opacity:.5;
  background-image:linear-gradient(var(--hairline) 1px,transparent 1px),linear-gradient(90deg,var(--hairline) 1px,transparent 1px);
  background-size:76px 76px;
  mask-image:radial-gradient(ellipse 90% 65% at 50% 35%,#000 20%,transparent 78%);
  -webkit-mask-image:radial-gradient(ellipse 90% 65% at 50% 35%,#000 20%,transparent 78%);
}
.hero__inner{display:grid;grid-template-columns:1.08fr .92fr;gap:clamp(2rem,5vw,4.5rem);align-items:center}
.hero h1{margin-block:0 1.6rem}
.hero .lead{max-width:46ch}
.hero__cta{margin-top:2.4rem}

.hero__inner > .shell{position:relative}
.hero__inner > .shell::before{
  content:"";position:absolute;inset:-22% -14% -10%;z-index:-1;pointer-events:none;
  background:radial-gradient(ellipse at 50% 42%,rgba(63,224,160,.30),rgba(63,224,160,.205) 22%,rgba(22,196,127,.12) 44%,rgba(22,196,127,.038) 60%,transparent 78%);
}

/* page hero (inner pages) */
.phero{position:relative;padding-top:11rem;padding-bottom:clamp(3rem,6vw,5rem);overflow:hidden}
.phero h1{font-size:clamp(2.5rem,5.6vw,4.3rem);margin-block:1.8rem 1.2rem}
.crumbs{display:flex;gap:.5rem;align-items:center;font-size:.8rem;color:var(--text-3);margin-top:1.6rem}
.crumbs a:hover{color:var(--brand-soft)}

/* ---------- 10. STAT STRIP ---------- */
.statband{position:relative;border-radius:var(--r-xl);overflow:hidden;border:1px solid var(--hairline);isolation:isolate}
.statband__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
/* heaviest where the copy sits, thinnest over the right of the frame */
.statband__scrim{position:absolute;inset:0;z-index:1;
  background:
    /* second pass: the stat row sits low and right, where the sweep is thinnest */
    linear-gradient(180deg,transparent 42%,rgba(var(--ink),.46)),
    linear-gradient(90deg,rgba(var(--ink),.90),rgba(var(--ink),.78) 42%,rgba(var(--ink),.40))}
.statband__inner{position:relative;z-index:2;display:flex;flex-direction:column;justify-content:center;
  min-height:25rem;padding:clamp(1.8rem,4vw,3rem)}
.statband__eyebrow{display:block;font-size:.76rem;font-weight:600;text-transform:uppercase;
  letter-spacing:.18em;color:var(--brand-soft);margin-bottom:.75rem}
.statband__inner > h2{max-width:20ch;margin:0}
.statband__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(1.4rem,2.6vw,2rem);
  margin-top:clamp(2.2rem,4.5vw,3.2rem)}
.statband__ico{width:3rem;height:3rem;border-radius:var(--r-md);display:grid;place-items:center;
  margin-bottom:.95rem;
  background:linear-gradient(140deg,var(--brand-soft),var(--brand) 60%,var(--brand-deep));
  box-shadow:0 10px 26px -12px var(--glow),inset 0 1px 0 rgba(255,255,255,.4)}
/* dark ink, not white: brand green is far lighter than the reference indigo */
.statband__ico svg{width:1.35rem;height:1.35rem;stroke:#03150E;fill:none}
.statband .num{font-family:"Space Grotesk",sans-serif;font-size:clamp(1.9rem,3.2vw,2.9rem);
  letter-spacing:-.04em;line-height:1.05;color:var(--text);font-variant-numeric:tabular-nums}
.statband .num em{font-style:normal;color:var(--brand-soft)}
.statband .lbl{font-size:.82rem;color:var(--text-2);margin-top:.45rem}

/* ---------- 10b. TRADINGVIEW MARKET OVERVIEW ---------- */
.tvw{
  border:1px solid var(--hairline);border-radius:var(--r-lg);
  background:var(--bg-2);padding:.9rem;
}
/* A fixed height forced the widget's own row list into a nested scroller,
   which then swallowed the page scroll whenever the pointer sat over it.
   Size to content instead and hand the chart a fixed slice: --tvw-chart-h
   inherits into the shadow root, where tv-widget.js reads it. min-height
   only reserves space until the widget paints. */
.tvw tv-market-overview{display:block;height:auto;min-height:34rem;--tvw-chart-h:340px}
/* the widget is a third-party island: don't let the reveal blur sit on it
   if the observer never fires (JS off, reduced motion handled below) */
.tvw.rv{transition-duration:.6s}
/* rows are the same height at every width, so only the chart gives ground */
@media (max-width:640px){
  .tvw{padding:.6rem}
  .tvw tv-market-overview{min-height:30rem;--tvw-chart-h:240px}
}

/* ---------- 10c. REEL — asymmetric header + full-bleed marquee ---------- */
.reel__head{display:grid;grid-template-columns:2fr 1fr;gap:2.5rem;align-items:end;margin-bottom:3rem}
.reel__eyebrow{display:block;font-size:.76rem;font-weight:600;text-transform:uppercase;
  letter-spacing:.18em;color:var(--brand-soft);margin-bottom:.9rem}
.reel__head h2{margin:0}
.reel__note{font-size:1.02rem;color:var(--text-2);line-height:1.7}

.reel__stats{display:grid;grid-template-columns:repeat(4,1fr);gap:2rem;margin-bottom:3rem}
.reel__stats .num{font-family:"Space Grotesk",sans-serif;font-size:clamp(1.5rem,2.2vw,2rem);
  letter-spacing:-.03em;color:var(--brand-soft);font-variant-numeric:tabular-nums;line-height:1.1}
.reel__stats .lbl{font-size:.8rem;color:var(--text-3);margin-top:.3rem}

/* full-bleed: the marquee escapes the container so slides run off both edges */
.reel__viewport{position:relative;overflow:hidden;
  width:100vw;margin-inline:calc(50% - 50vw)}
.reel__track{display:flex;gap:1.2rem;width:max-content;
  animation:reel-slide 46s linear infinite}
.reel__viewport:hover .reel__track,.reel.is-idle .reel__track{animation-play-state:paused}
@keyframes reel-slide{to{transform:translateX(-50%)}}

.reel__slide{position:relative;flex:0 0 auto;width:clamp(19rem,32vw,34rem);
  border-radius:var(--r-lg);overflow:hidden}
.reel__slide img{display:block;width:100%;height:clamp(15rem,24vw,25rem);object-fit:cover}
.reel__slide::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(to top,rgba(var(--ink),.88),rgba(var(--ink),.40) 28%,transparent 62%)}
.reel__cap{position:absolute;left:1.4rem;right:1.4rem;bottom:1.3rem;z-index:1}
.reel__cap span{display:block;font-size:.72rem;font-weight:600;text-transform:uppercase;
  letter-spacing:.16em;color:var(--brand-soft);margin-bottom:.35rem}
.reel__cap b{display:block;font-family:"Space Grotesk",sans-serif;font-size:1.08rem;
  font-weight:600;letter-spacing:-.02em;color:var(--text)}

.reel__foot{display:flex;justify-content:center;
  margin-top:3rem;padding-top:2rem;border-top:1px solid var(--hairline)}

@media (prefers-reduced-motion:reduce){.reel__track{animation-play-state:paused}}
@media (max-width:900px){
  .reel__head{grid-template-columns:1fr;gap:1.4rem;align-items:start}
  .reel__stats{grid-template-columns:repeat(2,1fr);gap:1.5rem}
}

/* ---------- 10d. INTRO SPLIT — asymmetric media, floating stat, checked list ---------- */
.introsplit{display:grid;grid-template-columns:7fr 5fr;
  gap:clamp(2.5rem,4.5vw,4.5rem);align-items:center}

.introsplit__media{position:relative}
/* the photo sits inside a brand-tinted mount rather than bleeding to the edge,
   so the frame reads as an object on the page and the stat card has something
   to overlap */
.introsplit__frame{position:relative;border-radius:var(--r-lg);padding:.65rem;
  background:linear-gradient(165deg,rgba(22,196,127,.18),rgba(22,196,127,.03));
  border:1px solid var(--hairline)}
.introsplit__frame img{display:block;width:100%;
  height:clamp(21rem,33vw,30rem);object-fit:cover;
  border-radius:calc(var(--r-lg) - .5rem);
  /* no colour cast — the photo is left as shot, only opened up a little */
  filter:contrast(1.06) brightness(1.06)}

.introsplit__eyebrow{display:block;font-size:.76rem;font-weight:600;text-transform:uppercase;
  letter-spacing:.18em;color:var(--brand-soft);margin-bottom:1rem}
/* the copy column is 5 of 12 — the section h2 scale would shred it */
.introsplit__body h2{font-size:clamp(1.9rem,2.9vw,2.6rem);margin:0 0 1.2rem}
.introsplit__body .lead{font-size:1rem;line-height:1.7;max-width:46ch}

.featlist{display:grid;gap:1.4rem;margin-top:2.2rem}
.featlist li{display:flex;align-items:flex-start;gap:1rem}
.featlist__tick{flex:0 0 auto;width:1.5rem;height:1.5rem;margin-top:.2rem;
  border-radius:50%;display:grid;place-items:center;
  background:linear-gradient(140deg,var(--brand-soft),var(--brand-deep));
  box-shadow:0 0 0 4px var(--glow-soft)}
.featlist__tick svg{width:.8rem;height:.8rem;stroke:var(--brand-ink);stroke-width:3.4}
.featlist h4{margin-bottom:.25rem}
.featlist p{font-size:.87rem;line-height:1.6}

@media (max-width:1080px){
  .introsplit{grid-template-columns:1fr;gap:clamp(3rem,7vw,4rem)}
  .introsplit__body h2{font-size:clamp(2.1rem,4.6vw,3.6rem)}
  .introsplit__body .lead{max-width:62ch}
}

/* ---------- 11. TICKER ---------- */
.ticker{border-block:1px solid var(--hairline);background:rgba(255,255,255,.02);overflow:hidden;padding-block:.9rem}
.ticker__track{display:flex;gap:2.6rem;width:max-content;animation:slide 46s linear infinite}
.ticker:hover .ticker__track,.ticker.is-idle .ticker__track{animation-play-state:paused}
@keyframes slide{to{transform:translateX(-50%)}}
.tick{display:flex;align-items:center;gap:.6rem;font-size:.85rem;font-variant-numeric:tabular-nums;white-space:nowrap}
.tick b{font-weight:600;letter-spacing:.02em}
.tick span{color:var(--text-3)}
.tick .up{color:var(--brand-soft)}
.tick .dn{color:var(--danger)}

/* ---------- 12. BENTO GRID ---------- */
.bento{display:grid;grid-template-columns:repeat(12,1fr);gap:1rem}
.c4{grid-column:span 4}.c5{grid-column:span 5}.c6{grid-column:span 6}
.c7{grid-column:span 7}.c8{grid-column:span 8}.c12{grid-column:span 12}
.grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:1rem}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}
.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem}
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,5vw,4.5rem);align-items:center}
.split--wide{grid-template-columns:1.15fr .85fr}
/* FAQ: the aside tracks the questions while the split has two columns. Its
   containing block is the whole grid, so once the split stacks the aside keeps
   sticking and rides down over the accordion below it — pin it only while
   there is a column for it to sit in, and send it under the questions after. */
.faq__aside{position:sticky;top:7rem}

/* feature card bits */
.ico{
  width:2.75rem;height:2.75rem;border-radius:.85rem;display:grid;place-items:center;
  background:var(--glow-soft);border:1px solid rgba(22,196,127,.2);color:var(--brand-soft);margin-bottom:1.15rem;
}
.ico svg{width:20px;height:20px}
.card-num{font-family:"Space Grotesk",sans-serif;font-size:.8rem;letter-spacing:.18em;color:var(--brand);margin-bottom:.9rem}

/* ---------- 13. PLAN CARDS ---------- */
.plan{display:flex;flex-direction:column;height:100%}
.plan__rate{font-family:"Space Grotesk",sans-serif;font-size:clamp(2.6rem,4.6vw,3.5rem);letter-spacing:-.045em;line-height:1;margin:.4rem 0 .2rem}
.plan__rate sup{font-size:.35em;vertical-align:super;margin-left:.15em;color:var(--brand)}
.plan__meta{font-size:.82rem;text-transform:uppercase;letter-spacing:.14em;color:var(--text-3)}
.plan ul{margin:1.6rem 0;display:grid;gap:.7rem}
.plan li{display:flex;gap:.65rem;font-size:.9rem;color:var(--text-2);align-items:flex-start}
.plan li svg{width:15px;height:15px;flex:0 0 15px;margin-top:.35rem;color:var(--brand)}
.plan .btn{margin-top:auto}
.plan--feat .core{background:linear-gradient(168deg,rgba(22,196,127,.16),rgba(22,196,127,.03))}
.plan--feat{border-color:rgba(22,196,127,.32)}
.tag-feat{position:absolute;top:1.1rem;right:1.1rem;font-size:9px;letter-spacing:.18em;text-transform:uppercase;color:var(--brand-ink);background:var(--brand);padding:.24rem .6rem;border-radius:999px;font-weight:700}

/* ---------- 14. TABLE ---------- */
.table-wrap{overflow-x:auto;border-radius:var(--r-lg);border:1px solid var(--hairline)}
table.data{min-width:640px;font-size:.9rem}
table.data th{
  text-align:left;padding:1rem 1.25rem;font-size:.72rem;text-transform:uppercase;letter-spacing:.15em;
  color:var(--text-3);font-weight:600;background:rgba(255,255,255,.035);border-bottom:1px solid var(--hairline);
}
table.data td{padding:1rem 1.25rem;border-bottom:1px solid var(--hairline);color:var(--text-2);font-variant-numeric:tabular-nums}
table.data tr:last-child td{border-bottom:0}
table.data tbody tr{transition:background .4s var(--ease)}
table.data tbody tr:hover{background:rgba(22,196,127,.05)}
table.data td strong{color:var(--text);font-weight:600}

/* ---------- 15. ACCORDION ---------- */
/* ---------- 17b. FAQ HEADER + CARD ACCORDION ---------- */
.faqhead{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,4vw,4rem);
  align-items:center;margin-bottom:clamp(2.5rem,5vw,4rem)}
.faqhead__eyebrow{display:block;font-size:.76rem;font-weight:600;text-transform:uppercase;
  letter-spacing:.18em;color:var(--brand-soft);margin-bottom:.9rem}
.faqhead__media{position:relative;border-radius:var(--r-lg);overflow:hidden}
.faqhead__media img{display:block;width:100%;height:clamp(16rem,21vw,20rem);object-fit:cover}
.faqhead__badge{position:absolute;left:1.4rem;bottom:1.4rem;padding:.85rem 1.15rem;
  border-radius:var(--r-md);border:1px solid var(--hairline);
  background:rgba(var(--ink),.84);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
.faqhead__badge b{display:block;font-family:"Space Grotesk",sans-serif;font-size:1.45rem;
  font-weight:600;letter-spacing:-.03em;color:var(--brand-soft)}
/* direct child only — the counter inside <b> is a span too */
.faqhead__badge > span{display:block;font-size:.78rem;color:var(--text-2);margin-top:.15rem}
.faqhead__badge b{white-space:nowrap}

/* card variant — index only; faq.html keeps the plain divided list */
.acc--cards{border-top:0;display:flex;flex-direction:column;gap:.75rem}
.acc--cards .acc__item{border-bottom:0;border:1px solid var(--hairline);
  border-radius:var(--r-md);background:var(--bg-2);overflow:hidden;
  transition:border-color .45s var(--ease),background .45s var(--ease)}
.acc--cards .acc__item:hover{border-color:rgba(22,196,127,.22)}
.acc--cards .acc__item.is-open{border-color:rgba(22,196,127,.34);background:var(--bg-3)}
.acc--cards .acc__btn{padding:1.25rem 1.4rem}
.acc--cards .acc__panel p{padding:0 1.4rem 1.35rem;max-width:80ch}
.acc--cards .acc__sign{width:2.4rem;height:2.4rem;flex-basis:2.4rem;
  border-color:transparent;background:var(--panel-2)}
.acc--cards .acc__item.is-open .acc__sign{background:var(--brand);color:#03150E;border-color:transparent}

@media (max-width:900px){
  .faqhead{grid-template-columns:1fr;gap:2rem}
  .faqhead__media{order:-1}
}

.acc{border-top:1px solid var(--hairline)}
.acc__item{border-bottom:1px solid var(--hairline)}
.acc__btn{
  width:100%;background:none;border:0;cursor:pointer;text-align:left;
  display:flex;align-items:center;justify-content:space-between;gap:1.5rem;
  padding:1.5rem .25rem;font-size:clamp(1rem,1.4vw,1.12rem);font-weight:600;letter-spacing:-.015em;
  transition:color .4s var(--ease);
}
.acc__btn:hover{color:var(--brand-soft)}
.acc__sign{width:1.9rem;height:1.9rem;flex:0 0 1.9rem;border-radius:999px;border:1px solid var(--hairline);display:grid;place-items:center;position:relative;transition:background .5s var(--ease),border-color .5s var(--ease),transform .6s var(--ease)}
.acc__sign::before,.acc__sign::after{content:"";position:absolute;background:currentColor;border-radius:2px;transition:transform .6s var(--ease),opacity .4s var(--ease)}
.acc__sign::before{width:11px;height:1.5px}
.acc__sign::after{width:1.5px;height:11px}
.acc__item.is-open .acc__sign{background:var(--glow-soft);border-color:rgba(22,196,127,.35);color:var(--brand);transform:rotate(90deg)}
.acc__item.is-open .acc__sign::after{opacity:0;transform:scaleY(.2)}
.acc__panel{overflow:hidden;height:0;transition:height .65s var(--ease)}
.acc__panel p{padding:0 3.5rem 1.7rem .25rem;max-width:78ch;font-size:.95rem}

/* ---------- 16. STEPS ---------- */
.steps{display:grid;gap:1rem;counter-reset:s}
.step{display:grid;grid-template-columns:auto 1fr;gap:1.5rem;align-items:start}
.step__n{
  width:3rem;height:3rem;flex:0 0 3rem;border-radius:999px;display:grid;place-items:center;
  font-family:"Space Grotesk",sans-serif;font-size:.95rem;
  background:var(--panel-2);border:1px solid var(--hairline);color:var(--brand-soft);
}

/* ---------- 16b. 3D STEP CARDS ----------
   Hover-tracked tilt: a 5x3 grid of invisible cells sits over each card and
   each cell hands the card its own rotateX/rotateY. Pure CSS, no listeners.
   Depth is real — the card is preserve-3d, so the badge and copy sit on
   their own Z planes rather than being painted flat. */
.steps{gap:1.15rem}
.step3d{
  position:relative;
  display:grid;
  grid-template-columns:repeat(5,1fr);
  grid-template-rows:repeat(3,1fr);
  perspective:1100px;
}
/* the bloom — acid gradient, blurred, sitting behind the card */
.step3d::before{
  content:'';position:absolute;inset:8% 3%;z-index:0;pointer-events:none;
  border-radius:var(--r-lg);
  background:radial-gradient(ellipse at 50% 50%,rgba(22,196,127,.55),rgba(11,143,91,.34) 46%,transparent 76%);
  opacity:.15;
  transition:opacity .55s var(--ease);
}
.step3d .tr{position:relative;z-index:3}
.step3d .tr-1{grid-row:1;grid-column:1}
.step3d .tr-2{grid-row:1;grid-column:2}
.step3d .tr-3{grid-row:1;grid-column:3}
.step3d .tr-4{grid-row:1;grid-column:4}
.step3d .tr-5{grid-row:1;grid-column:5}
.step3d .tr-6{grid-row:2;grid-column:1}
.step3d .tr-7{grid-row:2;grid-column:2}
.step3d .tr-8{grid-row:2;grid-column:3}
.step3d .tr-9{grid-row:2;grid-column:4}
.step3d .tr-10{grid-row:2;grid-column:5}
.step3d .tr-11{grid-row:3;grid-column:1}
.step3d .tr-12{grid-row:3;grid-column:2}
.step3d .tr-13{grid-row:3;grid-column:3}
.step3d .tr-14{grid-row:3;grid-column:4}
.step3d .tr-15{grid-row:3;grid-column:5}

.step3d__card{
  grid-area:1 / 1 / -1 / -1;
  position:relative;z-index:1;
  display:grid;grid-template-columns:auto 1fr;gap:1.4rem;align-items:start;
  padding:1.45rem 1.7rem;
  border-radius:var(--r-lg);
  border:1px solid var(--hairline);
  background:linear-gradient(168deg,rgba(255,255,255,.07),rgba(255,255,255,.016)),var(--bg-2);
  box-shadow:inset 0 1px 1px rgba(255,255,255,.12),14px 18px 34px rgba(0,0,0,.5);
  transform-style:preserve-3d;
  transition:transform .5s var(--ease),border-color .45s var(--ease),box-shadow .45s var(--ease);
}
/* acid hairline, revealed on hover — 1px gradient ring via mask-exclude */
.step3d__card::after{
  content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  padding:1px;
  background:var(--grad-acid);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
  mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  mask-composite:exclude;
  opacity:0;transition:opacity .45s var(--ease);
}
.step3d__card--tint{
  background:linear-gradient(168deg,rgba(200,255,77,.10),rgba(22,196,127,.05) 55%,rgba(255,255,255,.015)),var(--bg-2);
}
.step3d__n{
  width:3rem;height:3rem;flex:0 0 3rem;border-radius:999px;
  display:grid;place-items:center;
  font-family:"Space Grotesk",sans-serif;font-size:.95rem;font-weight:600;
  color:var(--brand-ink);
  background:var(--grad-acid);
  box-shadow:0 10px 24px -12px var(--acid-glow),inset 0 1px 0 rgba(255,255,255,.5);
  transform:translateZ(26px);
  transition:box-shadow .45s var(--ease);
}
.step3d__body{transform:translateZ(14px)}
.step3d__body h4{letter-spacing:-.02em}
.step3d__body p{font-size:.88rem;margin-top:.35rem;color:var(--text-2)}

@media (hover:hover) and (pointer:fine){
  .step3d:hover::before{opacity:.5}
  .step3d:hover .step3d__card{
    border-color:transparent;
    box-shadow:inset 0 1px 1px rgba(255,255,255,.16),18px 26px 46px rgba(0,0,0,.6);
  }
  .step3d:hover .step3d__card::after{opacity:.85}
  .step3d:hover .step3d__n{box-shadow:0 14px 30px -10px var(--acid-glow),inset 0 1px 0 rgba(255,255,255,.6)}
  .tr-1:hover ~ .step3d__card{transform:rotateX(9deg) rotateY(-13deg) scale(1.015)}
  .tr-2:hover ~ .step3d__card{transform:rotateX(9deg) rotateY(-6.5deg) scale(1.015)}
  .tr-3:hover ~ .step3d__card{transform:rotateX(9deg) rotateY(0deg) scale(1.015)}
  .tr-4:hover ~ .step3d__card{transform:rotateX(9deg) rotateY(6.5deg) scale(1.015)}
  .tr-5:hover ~ .step3d__card{transform:rotateX(9deg) rotateY(13deg) scale(1.015)}
  .tr-6:hover ~ .step3d__card{transform:rotateX(0deg) rotateY(-13deg) scale(1.015)}
  .tr-7:hover ~ .step3d__card{transform:rotateX(0deg) rotateY(-6.5deg) scale(1.015)}
  .tr-8:hover ~ .step3d__card{transform:rotateX(0deg) rotateY(0deg) scale(1.015)}
  .tr-9:hover ~ .step3d__card{transform:rotateX(0deg) rotateY(6.5deg) scale(1.015)}
  .tr-10:hover ~ .step3d__card{transform:rotateX(0deg) rotateY(13deg) scale(1.015)}
  .tr-11:hover ~ .step3d__card{transform:rotateX(-9deg) rotateY(-13deg) scale(1.015)}
  .tr-12:hover ~ .step3d__card{transform:rotateX(-9deg) rotateY(-6.5deg) scale(1.015)}
  .tr-13:hover ~ .step3d__card{transform:rotateX(-9deg) rotateY(0deg) scale(1.015)}
  .tr-14:hover ~ .step3d__card{transform:rotateX(-9deg) rotateY(6.5deg) scale(1.015)}
  .tr-15:hover ~ .step3d__card{transform:rotateX(-9deg) rotateY(13deg) scale(1.015)}
}
/* no hover to track — drop the cells so nothing sits over the card */
@media (hover:none),(pointer:coarse){
  .step3d .tr{display:none}
  .step3d{perspective:none}
  .step3d__n,.step3d__body{transform:none}
}
@media (prefers-reduced-motion:reduce){
  .step3d__card{transform:none !important}
}
@media (max-width:640px){
  .step3d__card{padding:1.2rem 1.25rem;gap:1rem}
  .step3d__n{width:2.6rem;height:2.6rem;flex-basis:2.6rem;font-size:.85rem}
}

/* ---------- 17. FORMS ---------- */
.field{display:block;margin-bottom:1.05rem}
.field > span{display:block;font-size:.76rem;text-transform:uppercase;letter-spacing:.14em;color:var(--text-3);margin-bottom:.5rem}
.input{
  width:100%;padding:.9rem 1.05rem;border-radius:var(--r-md);
  background:rgba(255,255,255,.04);border:1px solid var(--hairline);color:var(--text);
  font-size:.95rem;transition:border-color .45s var(--ease),background .45s var(--ease),box-shadow .45s var(--ease);
}
.input::placeholder{color:var(--text-3)}
.input:focus{outline:none;border-color:rgba(22,196,127,.5);background:rgba(22,196,127,.06);box-shadow:0 0 0 4px rgba(22,196,127,.09)}
textarea.input{resize:vertical;min-height:9rem}
select.input{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236F857A' stroke-width='1.5'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 1rem center;background-size:16px;padding-right:2.6rem}
.check{display:flex;gap:.7rem;align-items:flex-start;font-size:.85rem;color:var(--text-2);cursor:pointer}
.check input{width:1.05rem;height:1.05rem;margin-top:.25rem;accent-color:var(--brand);flex:0 0 auto}
.check a{color:var(--brand-soft);text-decoration:underline;text-underline-offset:3px}
.form-note{font-size:.78rem;color:var(--text-3);margin-top:1rem;line-height:1.6}

/* ---------- 18. CTA BAND ---------- */
.cta-band .core{
  padding:clamp(2.4rem,6vw,4.5rem);
  background:
    radial-gradient(120% 140% at 15% 0%,rgba(22,196,127,.26),transparent 58%),
    linear-gradient(168deg,rgba(255,255,255,.055),rgba(255,255,255,.012));
}

/* ---------- 19. FOOTER ---------- */
.footer{padding-block:clamp(3rem,6vw,5rem) 2rem;position:relative;overflow:hidden}
.footer__card{position:relative;border-radius:var(--r-xl);overflow:hidden;
  border:1px solid var(--hairline);background:var(--bg-2);isolation:isolate}
.footer__bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.34;z-index:0}
.footer__scrim{position:absolute;inset:0;z-index:1;
  background:linear-gradient(90deg,rgba(var(--ink-2),.94),rgba(var(--ink-2),.86) 45%,rgba(var(--ink-2),.62))}
.footer__inner{position:relative;z-index:2;padding:clamp(1.7rem,3.6vw,4rem)}

/* The footer is the site's one contact plate: brand + CTA, the direct lines,
   the site map, the registered address and the regulator documents sit in one
   rank of columns divided by hairlines — no separate band above it. */
.footer__cols{display:grid;
  grid-template-columns:minmax(14rem,1.1fr) repeat(3,minmax(0,1fr)) minmax(10.5rem,.8fr);
  padding-bottom:2.6rem;border-bottom:1px solid var(--hairline)}
.footer__col{min-width:0;padding-inline:clamp(1.1rem,2.2vw,2.4rem)}
.footer__col:first-child{padding-left:0}
.footer__col:last-child{padding-right:0}
.footer__col + .footer__col{border-left:1px solid var(--hairline)}

.footer__ctitle{font-size:.74rem;font-weight:700;text-transform:uppercase;
  letter-spacing:.16em;color:var(--text);margin:0 0 1.15rem}
.footer__ctitle--gap{margin-top:1.7rem}

.footer__col--brand{display:flex;flex-direction:column;align-items:flex-start;gap:1.5rem}
.footer__brand{min-width:0}
.footer__brand p{margin-top:1rem;font-size:.88rem;color:var(--text-2);max-width:27ch}
/* stacked, equal width — the pair reads as one control group under the mark */
.footer__col--brand .footer__cta{flex-direction:column;align-items:stretch;
  gap:.6rem;width:min(100%,14rem)}

.footer__nav ul{display:flex;flex-direction:column;gap:.78rem;list-style:none}
.footer__nav a{font-size:.9rem;font-weight:500;color:var(--text-2);
  transition:color .4s var(--ease)}
.footer__nav a:hover{color:var(--brand-soft)}

/* the number itself is the link; the country above it stays quiet */
.footer__lines{display:flex;flex-direction:column;gap:.9rem;list-style:none}
.footer__lines li{display:flex;flex-direction:column;gap:.1rem;min-width:0}
.footer__country{font-size:.88rem;color:var(--text-2)}
.footer__num{font-size:.9rem;font-weight:500;color:var(--brand-soft);
  text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px;
  transition:color .4s var(--ease)}
.footer__num:hover{color:var(--brand)}

.footer__addr{font-style:normal;font-size:.9rem;line-height:1.75;color:var(--text-2)}

.footer__col--meta{display:flex;flex-direction:column;align-items:flex-start}
.footer__col--meta .lang{width:min(100%,12rem)}
.footer__col--meta .lang__btn{width:100%;justify-content:center;
  height:2.5rem;border-color:var(--hairline);font-size:.88rem;letter-spacing:0}
/* the footer pill spells the language out, so the globe is redundant there */
.lang--foot .lang__btn svg:not(.lang__caret){display:none}
.footer__docs{display:flex;flex-direction:column;gap:.55rem;width:min(100%,12rem)}
.footer__docs .btn{justify-content:space-between;padding-inline:1rem .5rem;
  white-space:normal;text-align:left}

.footer__cta{display:flex;align-items:center;gap:.6rem;flex-wrap:wrap;flex:0 0 auto}
/* plain inline arrow, as in the reference — the circled variant costs ~30px of row */
.footer__cta .btn__ico{background:none;width:auto;height:auto;flex-basis:auto}
.footer__cta .btn__ico svg{width:16px;height:16px}
.footer__cta .btn:hover .btn__ico{background:none;transform:translateX(3px)}

/* two columns, then one — the hairlines follow the wrap so no column is ever
   crushed narrower than its longest phone number */
@media (max-width:1180px){
  .footer__cols{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:2.2rem}
  .footer__col:nth-child(odd){padding-left:0}
  .footer__col:nth-child(even){padding-right:0}
  .footer__col:nth-child(2n+1){border-left:0}
}
@media (max-width:680px){
  .footer__cols{grid-template-columns:minmax(0,1fr);row-gap:0}
  .footer__col{padding-inline:0}
  .footer__col + .footer__col{border-left:0;
    margin-top:1.7rem;padding-top:1.7rem;border-top:1px solid var(--hairline)}
}

.footer__mid{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:1.4rem;padding-top:2rem}
.footer__links{display:flex;flex-wrap:wrap;gap:.6rem 1.6rem;list-style:none}
.footer__links a{font-size:.82rem;color:var(--text-3);transition:color .4s var(--ease)}
.footer__links a:hover{color:var(--brand-soft)}

.footer__legal{font-size:.76rem;line-height:1.75;color:var(--text-3);
  margin-top:2rem;padding-top:1.8rem;border-top:1px solid var(--hairline)}
.footer__bottom{margin-top:1.8rem;padding-top:1.6rem;border-top:1px solid var(--hairline);
  text-align:center;font-size:.8rem;color:var(--text-3)}


/* ---------- 20. MISC ---------- */
.logo-row{display:flex;flex-wrap:wrap;gap:2.6rem;align-items:center;justify-content:center;opacity:.74}
.logo-row span{font-family:"Space Grotesk",sans-serif;font-size:1.02rem;letter-spacing:.02em;color:var(--text-2)}
.quote{font-family:"Space Grotesk",sans-serif;font-size:clamp(1.05rem,1.6vw,1.28rem);line-height:1.5;letter-spacing:-.02em;color:var(--text)}
/* ---------- 19b. ADVISOR CARDS ---------- */
.advisors{display:grid;grid-template-columns:repeat(3,1fr);gap:2rem;align-items:start}
.advisor{position:relative}
.advisor__frame{position:relative;border-radius:var(--r-lg);overflow:hidden;display:block}
.advisor__frame img{display:block;width:100%;aspect-ratio:3/4;max-height:34rem;object-fit:cover}
.advisor__frame::after{content:"";position:absolute;inset:0;
  background:linear-gradient(to top,rgba(var(--ink),.94),rgba(var(--ink),.28) 40%,transparent 72%)}
.advisor__plate{position:absolute;left:0;right:0;bottom:0;padding:1.1rem}
.advisor__card{background:var(--bg-3);border:1px solid var(--hairline);
  border-radius:var(--r-md);padding:1.05rem 1.1rem;
  /* parked low, rises into place on hover — as in the reference */
  transform:translateY(.9rem);transition:transform .45s var(--ease),border-color .45s var(--ease)}
.advisor:hover .advisor__card{transform:translateY(0);border-color:rgba(22,196,127,.28)}
.advisor__top{display:flex;align-items:flex-start;justify-content:space-between;gap:.6rem}
.advisor__name{font-family:"Space Grotesk",sans-serif;font-size:1.02rem;font-weight:600;letter-spacing:-.02em}
.advisor__role{color:var(--brand-soft);font-size:.79rem;font-weight:600;margin-top:.12rem}
.advisor__bio{font-size:.83rem;color:var(--text-2);margin-top:.6rem;line-height:1.55;
  display:-webkit-box;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.advisor__links{display:flex;gap:.4rem;flex:0 0 auto}
.advisor__links a{width:2rem;height:2rem;border-radius:999px;display:grid;place-items:center;
  background:var(--panel-2);transition:background .35s var(--ease)}
.advisor__links a:hover{background:var(--brand)}
.advisor__links svg{width:.95rem;height:.95rem;color:var(--text-2);transition:color .35s var(--ease)}
.advisor__links a:hover svg{color:#03150E}
/* the floating stagger from the reference */
@media (min-width:1151px){
  .advisors > :nth-child(2),.advisors > :nth-child(6){margin-top:3rem}
  .advisors > :nth-child(4){margin-top:-3rem}
}
@media (max-width:1150px){.advisors{grid-template-columns:repeat(2,1fr);gap:1.4rem}}
@media (max-width:640px){.advisors{grid-template-columns:1fr}}

.person{display:flex;align-items:center;gap:.85rem;margin-top:1.6rem}
.person__av{width:2.6rem;height:2.6rem;border-radius:999px;background:linear-gradient(140deg,var(--brand-soft),var(--brand-deep));display:grid;place-items:center;font-size:.82rem;font-weight:700;color:#04100B;flex:0 0 2.6rem}
.person b{display:block;font-size:.9rem;font-weight:600}
.person small{color:var(--text-3);font-size:.78rem}
.pill-row{display:flex;flex-wrap:wrap;gap:.5rem}
.pill{padding:.4rem .85rem;border-radius:999px;border:1px solid var(--hairline);background:var(--panel);font-size:.8rem;color:var(--text-2);transition:all .4s var(--ease)}
.pill:hover{border-color:rgba(22,196,127,.35);color:var(--brand-soft)}
.kv{display:flex;justify-content:space-between;gap:1rem;padding:.75rem 0;border-bottom:1px solid var(--hairline);font-size:.9rem}
.kv:last-child{border-bottom:0}
.kv span{color:var(--text-3)}
.kv b{font-weight:600;font-variant-numeric:tabular-nums}
.kv__note{display:block;font-style:normal;font-size:.66rem;font-weight:600;text-transform:uppercase;letter-spacing:.16em;color:var(--text-3);opacity:.7;margin-top:.2rem}
.kv__tel{font-weight:600;font-variant-numeric:tabular-nums;white-space:nowrap;
  transition:color .4s var(--ease)}
.kv__tel:hover{color:var(--brand-soft)}
.prose h2{margin-top:3rem;margin-bottom:1rem;font-size:clamp(1.5rem,2.4vw,2rem)}
.prose h3{margin-top:2rem;margin-bottom:.7rem;font-size:1.12rem}
.prose p,.prose li{font-size:.95rem;line-height:1.8;color:var(--text-2)}
.prose p + p{margin-top:1rem}
.prose ul{margin:1rem 0;display:grid;gap:.6rem}
.prose ul li{position:relative;padding-left:1.35rem}
.prose ul li::before{content:"";position:absolute;left:.25rem;top:.72rem;width:5px;height:5px;border-radius:50%;background:var(--brand)}
.prose strong{color:var(--text)}

/* ---------- 21. EXTRUDED CTA (layered 3D pill) ----------
   Six stacked layers fake a machined, physically thick button:
   drop shadow -> hard colour shadow -> outer bezel -> bottom
   highlight edge -> top dark edge -> lit top face. Geometry is
   the Uiverse proportions rewritten at final size instead of
   being drawn at 516x160 and scaled down.                      */
.btn3d{
  position:relative;z-index:0;          /* own stacking context for the negative layers */
  display:inline-block;width:17.5rem;height:5rem;
  cursor:pointer;text-decoration:none;
  transition:transform .28s var(--ease);
}
.btn3d > span{position:absolute;border-radius:999px}

.btn3d__shadow{left:.3rem;top:.55rem;width:16.9rem;height:4.3rem;
  box-shadow:0 1.9rem 2.6rem -.15rem rgba(0,0,0,.42)}
.btn3d__hard{left:.3rem;top:.5rem;width:16.9rem;height:4rem;z-index:-2;
  box-shadow:0 1.15rem .06rem 0 rgba(6,74,49,.95)}
.btn3d__ext{left:.3rem;top:.45rem;width:16.9rem;height:4.3rem;z-index:-1;
  background:linear-gradient(-5deg,var(--brand) 20%,#63E9B0 100%)}
.btn3d__edge-b{left:1.05rem;top:1.5rem;width:15.4rem;height:3.1rem;z-index:0;background:#D6FBEA}
.btn3d__edge-t{left:1.05rem;top:.92rem;width:15.4rem;height:3.1rem;z-index:1;background:#076B45}
.btn3d__face{left:1.05rem;top:1.35rem;width:15.4rem;height:3.1rem;z-index:2;
  background:linear-gradient(-5deg,var(--brand) 30%,#63E9B0 100%);
  box-shadow:-1px -5px 5px -4px rgba(255,255,255,.95) inset}
.btn3d__face::before{content:"";position:absolute;inset:0;border-radius:999px;
  box-shadow:12px 12px 5px -5px rgba(4,40,26,.22) inset}

.btn3d__label{
  position:absolute;inset:0;z-index:3;
  display:flex;align-items:center;justify-content:center;
  font-family:"Plus Jakarta Sans",sans-serif;font-size:1.1rem;font-weight:700;
  letter-spacing:.01em;color:#052E1E;
  text-shadow:0 1.5px 0 rgba(255,255,255,.75);
  user-select:none;pointer-events:none;
}
.btn3d__label .parSpan{
  display:block;opacity:0;white-space:pre;
  animation:btn3d-in .8s ease forwards calc(var(--i) * .03s);
}
.btn3d:hover{transform:translateY(-2px)}
.btn3d:hover .parSpan{opacity:1;animation:btn3d-wave .5s ease forwards calc(var(--i) * .02s)}
.btn3d:active{transform:translateY(2px) scale(.99)}
.btn3d:active .parSpan{opacity:1;animation:btn3d-wave .5s ease forwards calc(var(--i) * .03s)}
.btn3d:focus-visible{outline:2px solid var(--brand-soft);outline-offset:6px;border-radius:999px}

@keyframes btn3d-wave{
  30%{opacity:1;transform:translateY(4px)}
  50%{opacity:1;transform:translateY(-3px)}
  100%{opacity:1;transform:translateY(0)}
}
@keyframes btn3d-in{
  0%{opacity:0;transform:translateY(-20px) translateX(5px) rotate(-90deg);filter:blur(5px)}
  30%{opacity:1;transform:translateY(4px);filter:blur(0)}
  50%{opacity:1;transform:translateY(-3px)}
  100%{opacity:1;transform:translateY(0)}
}
@media (prefers-reduced-motion:reduce){
  .btn3d__label .parSpan{opacity:1;animation:none}
  .btn3d:hover .parSpan,.btn3d:active .parSpan{animation:none}
}
@media (max-width:640px){
  .btn3d{width:15.5rem;height:4.6rem}
  .btn3d__shadow{width:14.9rem;height:3.9rem}
  .btn3d__hard{width:14.9rem;height:3.6rem}
  .btn3d__ext{width:14.9rem;height:3.9rem}
  .btn3d__edge-b,.btn3d__edge-t,.btn3d__face{width:13.5rem;height:2.85rem}
}

/* ---------- 21. REVEAL ---------- */
.rv{opacity:0;transform:translateY(2.2rem);transition:opacity .9s var(--ease-out),transform .9s var(--ease-out)}
.rv.in{opacity:1;transform:none}
.rv[data-d="1"]{transition-delay:.08s}
.rv[data-d="2"]{transition-delay:.16s}
.rv[data-d="3"]{transition-delay:.24s}
.rv[data-d="4"]{transition-delay:.32s}
.rv[data-d="5"]{transition-delay:.4s}
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.001ms !important;transition-duration:.001ms !important}
  .rv{opacity:1;transform:none;filter:none}
}

/* ---------- 22. RESPONSIVE ---------- */
@media (max-width:1150px){
  .hero__inner{grid-template-columns:1fr;gap:3rem}
  .split,.split--wide{grid-template-columns:1fr;gap:2.5rem}
  .faq__aside{position:static;top:auto;order:2}
  .grid-3,.grid-4{grid-template-columns:repeat(2,1fr)}
  .c4,.c5,.c6,.c7,.c8{grid-column:span 12}
  .nav__links{display:none}
  .nav__cta .btn--ghost{display:none}
  .nav__cta .lang{display:none}
  .nav__burger{display:block}
  .nav__cta{gap:.35rem}
}
@media (max-width:1080px){
  .statband__grid{grid-template-columns:repeat(2,1fr)}
  .statband__inner{min-height:0}
}
@media (max-width:640px){
  :root{--r-xl:2.25rem;--pad-shell:.4rem}
  .section{padding-block:4.5rem}
  .grid-2,.grid-3,.grid-4{grid-template-columns:1fr}
  .statband__ico{width:2.6rem;height:2.6rem;margin-bottom:.7rem}
  .statband__scrim{background:linear-gradient(160deg,rgba(var(--ink),.88),rgba(var(--ink),.78))}
  .hero{padding-top:7.5rem;min-height:auto}
  .phero{padding-top:8.5rem}
  .footer__mid{flex-direction:column;align-items:flex-start}
  .footer__cta{width:100%}
  .btn{width:100%;justify-content:space-between}
  .nav .btn{width:auto;justify-content:center;padding:0 .8rem;font-size:.78rem}
  .nav{padding-left:.8rem;gap:.45rem}
  .brand__logo{height:1.75rem}
  .footer__brand .brand__logo{height:2.1rem}
  .btn-row{gap:.6rem}
  .acc__panel p{padding-right:1rem}
}
@media (max-width:380px){
  /* the mark alone still identifies the site, and it buys the CTA its room */
  .nav .brand__logo{display:none}
  .nav .brand__glyph{display:block}
}