/* ============================================================
   NFS — light banking theme · full site
   ============================================================ */

:root{
  --bg:        #EAF0F9;
  --bg-2:      #F4F8FE;
  --surface:   #FFFFFF;
  --ink:       #081634;
  --ink-2:     #4A5B83;
  --ink-3:     #8090B3;
  --line:      #E3EAF5;
  --teal:      #07BE8E;
  --blue:      #2E8FFF;
  --navy:      #081634;
  --grad:      linear-gradient(135deg,#07BE8E 0%,#2E8FFF 100%);
  --grad-soft: linear-gradient(135deg,rgba(7,190,142,.16),rgba(46,143,255,.16));
  --tint-teal: #E2F7F0;
  --tint-blue: #E7F1FF;

  --r-xl: 32px; --r-lg: 24px; --r-md: 16px; --r-sm: 12px;
  --sh-sm: 0 4px 14px rgba(8,22,52,.07);
  --sh:    0 16px 40px rgba(8,22,52,.10);
  --sh-lg: 0 36px 80px rgba(8,22,52,.18);
  --sh-brand: 0 18px 40px rgba(7,190,142,.34);

  --container: 1200px;
  --ease: cubic-bezier(.22,.61,.36,1);
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body{
  margin:0; color:var(--ink); line-height:1.5; overflow-x:hidden;
  font-family:'Manrope',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  -webkit-font-smoothing:antialiased;
  background:
    radial-gradient(1100px 560px at 82% -8%, #D6F4EA 0%, transparent 58%),
    radial-gradient(900px 560px at -8% 6%, #DBE9FF 0%, transparent 55%),
    var(--bg);
}
img,svg{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
ul{ margin:0; padding:0; list-style:none; }
button{ font-family:inherit; cursor:pointer; }

.container{ width:100%; max-width:var(--container); margin-inline:auto; padding-inline:20px; }
.grad-text{ background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent; }

/* ============ BUTTONS ============ */
.btn{ display:inline-flex; align-items:center; gap:.55em; font-weight:700; border:0;
  border-radius:999px; white-space:nowrap; transition:transform .25s var(--ease), box-shadow .25s var(--ease); }
.btn--sm{ padding:.62em 1.2em; font-size:.95rem; }
.btn--lg{ padding:1.05em 1.85em; font-size:1.08rem; }
.btn--primary{ color:#fff; background:var(--grad); box-shadow:var(--sh-brand); }
.btn--primary:hover{ transform:translateY(-2px); box-shadow:0 24px 52px rgba(7,190,142,.45); }
.btn--primary svg{ transition:transform .25s var(--ease); }
.btn--primary:hover svg{ transform:translateX(4px); }
.btn--ghost{ color:var(--ink); background:var(--surface); box-shadow:var(--sh-sm); border:1px solid var(--line); }
.btn--ghost:hover{ transform:translateY(-2px); box-shadow:var(--sh); }
.btn--white{ color:var(--navy); background:#fff; box-shadow:0 18px 40px rgba(0,0,0,.18); }
.btn--white:hover{ transform:translateY(-2px); }

/* ============ HEADER ============ */
.hdr{ position:sticky; top:0; z-index:50; padding:14px 0; transition:background .3s, box-shadow .3s; }
.hdr.is-stuck{ background:rgba(244,248,254,.84); backdrop-filter:saturate(180%) blur(16px); box-shadow:0 1px 0 var(--line); }
.hdr__inner{ display:flex; align-items:center; gap:24px; }

.brand{ display:inline-flex; align-items:center; gap:12px; }
.brand__mark svg{ filter:drop-shadow(0 8px 18px rgba(46,143,255,.32)); }
.brand__txt{ display:flex; flex-direction:column; line-height:1.05; }
.brand__txt strong{ font-size:1.3rem; font-weight:800; letter-spacing:.02em; }
.brand__txt small{ font-size:.68rem; font-weight:600; color:var(--ink-3); }

.nav{ display:flex; gap:6px; margin-left:auto; }
.nav a{ padding:.55em .9em; border-radius:999px; font-weight:600; font-size:.97rem; color:var(--ink-2); transition:color .2s, background .2s; }
.nav a:hover{ color:var(--ink); background:rgba(8,22,52,.05); }
.hdr__cta{ display:flex; align-items:center; gap:12px; margin-left:8px; }

.burger{ display:none; width:42px; height:42px; border:1px solid var(--line); background:var(--surface); border-radius:12px; padding:0; position:relative; }
.burger span{ position:absolute; left:11px; right:11px; height:2px; background:var(--ink); border-radius:2px; transition:transform .3s var(--ease), opacity .2s; }
.burger span:nth-child(1){ top:14px; } .burger span:nth-child(2){ top:20px; } .burger span:nth-child(3){ top:26px; }
.burger[aria-expanded="true"] span:nth-child(1){ transform:translateY(6px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.burger[aria-expanded="true"] span:nth-child(3){ transform:translateY(-6px) rotate(-45deg); }

/* ============ SECTION HEAD ============ */
.sec-head{ text-align:center; max-width:720px; margin:0 auto 48px; }
.sec-head__tag{ display:inline-block; font-weight:800; font-size:.82rem; letter-spacing:.1em; text-transform:uppercase; color:var(--teal); margin-bottom:14px; }
.sec-head__title{ margin:0; font-size:clamp(1.9rem,5vw,3rem); font-weight:800; letter-spacing:-.025em; line-height:1.08; }
.sec-head__sub{ margin:16px 0 0; font-size:1.1rem; color:var(--ink-2); font-weight:500; }
.sec-head__sub.light{ color:rgba(255,255,255,.72); }

/* ============ HERO ============ */
.hero{ position:relative; padding:46px 0 0; overflow:hidden; }
.hero__bg{ position:absolute; inset:0; z-index:0; pointer-events:none; }
.blob{ position:absolute; border-radius:50%; filter:blur(72px); opacity:.6; }
.blob--1{ width:520px; height:520px; right:-120px; top:-140px; background:radial-gradient(circle,#8defc9,#aed4ff 70%); animation:blob 16s ease-in-out infinite; }
.blob--2{ width:420px; height:420px; left:-120px; top:160px; background:radial-gradient(circle,#b6d4ff,#c8f3e4 70%); animation:blob 20s ease-in-out infinite reverse; }
.grid-fade{ position:absolute; inset:0; background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px); background-size:46px 46px; opacity:.55;
  -webkit-mask-image:radial-gradient(700px 400px at 70% 20%,#000,transparent 75%); mask-image:radial-gradient(700px 400px at 70% 20%,#000,transparent 75%); }
@keyframes blob{ 0%,100%{ transform:translate(0,0) scale(1);} 50%{ transform:translate(-30px,30px) scale(1.08);} }

.hero__grid{ position:relative; z-index:1; display:grid; grid-template-columns:1fr; gap:40px; padding-bottom:46px; }
.eyebrow{ display:inline-flex; align-items:center; gap:8px; padding:.5em 1em; border-radius:999px; background:var(--surface); box-shadow:var(--sh-sm); border:1px solid var(--line); font-weight:700; font-size:.84rem; color:var(--ink-2); }
.eyebrow .dot{ width:8px; height:8px; border-radius:50%; background:var(--teal); animation:pulse 2s infinite; }
@keyframes pulse{ 0%{ box-shadow:0 0 0 0 rgba(7,190,142,.5);} 70%{ box-shadow:0 0 0 10px rgba(7,190,142,0);} 100%{ box-shadow:0 0 0 0 rgba(7,190,142,0);} }

.hero__title{ margin:.5em 0 0; font-weight:800; letter-spacing:-.03em; line-height:1.02; font-size:clamp(2.5rem,7.5vw,4.4rem); }
.hero__title .line{ display:block; }
.hero__sub{ margin:1.1em 0 0; max-width:46ch; font-size:clamp(1.05rem,2vw,1.22rem); color:var(--ink-2); font-weight:500; }
.hero__actions{ display:flex; flex-wrap:wrap; gap:14px; margin-top:1.8em; }
.trust-pills{ display:flex; flex-wrap:wrap; gap:10px; margin-top:1.8em; }
.trust-pills li{ font-size:.86rem; font-weight:700; color:var(--ink-2); padding:.5em .95em; border-radius:999px; background:var(--surface); border:1px solid var(--line); box-shadow:var(--sh-sm); }

/* HERO VISUAL */
.hero__visual{ position:relative; display:flex; justify-content:center; }
.fx{ position:relative; z-index:2; width:100%; max-width:430px; background:var(--surface); border-radius:var(--r-xl); padding:26px; box-shadow:var(--sh-lg); overflow:hidden; }
.fx__glow{ position:absolute; width:240px; height:240px; right:-60px; top:-80px; border-radius:50%; background:var(--grad); filter:blur(60px); opacity:.18; }
.fx::before{ content:""; position:absolute; inset:0; border-radius:var(--r-xl); padding:1.5px; background:var(--grad); -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask-composite:exclude; opacity:.45; pointer-events:none; }
.fx__head{ position:relative; display:flex; align-items:center; justify-content:space-between; margin-bottom:18px; }
.fx__title{ font-weight:800; font-size:1.15rem; }
.fx__live{ display:inline-flex; align-items:center; gap:6px; font-size:.8rem; font-weight:700; color:var(--teal); }
.fx__live i{ width:7px; height:7px; border-radius:50%; background:var(--teal); animation:pulse 1.6s infinite; }
.fx__row{ position:relative; background:var(--bg-2); border:1px solid var(--line); border-radius:var(--r-md); padding:16px 18px; }
.fx__row--get{ background:var(--grad-soft); border-color:transparent; }
.fx__label{ font-size:.82rem; font-weight:600; color:var(--ink-3); }
.fx__amount{ display:flex; align-items:center; gap:10px; margin-top:8px; }
.coin{ width:34px; height:34px; border-radius:50%; display:grid; place-items:center; font-weight:800; font-size:1.15rem; color:#fff; flex:none; }
.coin--usdt{ background:#26A17B; } .coin--rub{ background:var(--blue); }
.fx__val{ font-size:1.7rem; font-weight:800; letter-spacing:-.02em; font-variant-numeric:tabular-nums; }
.fx__val--out{ background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent; }
.fx__cur{ margin-left:auto; font-weight:700; color:var(--ink-2); font-size:.95rem; }
.fx__bridge{ position:relative; height:70px; }
.fx__flow{ position:absolute; inset:0; width:100%; height:100%; }
.fx__rate{ position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); background:var(--surface); border:1px solid var(--line); box-shadow:var(--sh-sm); padding:.4em .8em; border-radius:999px; font-size:.82rem; font-weight:700; font-variant-numeric:tabular-nums; }
.fx__card{ margin-top:16px; height:64px; border-radius:14px; background:linear-gradient(120deg,#081634,#1c3b73); position:relative; overflow:hidden; color:#fff; display:flex; align-items:flex-end; padding:12px 16px; }
.fx__card::after{ content:""; position:absolute; top:-40%; left:-30%; width:60%; height:180%; background:linear-gradient(90deg,transparent,rgba(255,255,255,.25),transparent); transform:rotate(20deg); animation:shine 3.5s linear infinite; }
@keyframes shine{ 0%{ left:-40%;} 100%{ left:120%;} }
.fx__chip{ position:absolute; top:12px; left:16px; width:30px; height:22px; border-radius:5px; background:linear-gradient(135deg,#ffd479,#e0a23b); }
.fx__pan{ font-weight:700; letter-spacing:.08em; font-size:.92rem; }
.fx__brand{ margin-left:auto; font-weight:800; opacity:.8; font-size:.8rem; letter-spacing:.1em; }
.fx__foot{ display:flex; align-items:center; gap:8px; margin-top:16px; font-size:.82rem; font-weight:600; color:var(--ink-2); }
.fx__foot svg{ color:var(--teal); flex:none; }

.float-coin{ position:absolute; z-index:1; display:grid; place-items:center; border-radius:50%; font-weight:800; color:#fff; box-shadow:var(--sh); }
.float-coin--a{ width:56px; height:56px; font-size:1.5rem; background:#26A17B; top:-22px; left:0; animation:floaty 6s ease-in-out infinite; }
.float-coin--b{ width:48px; height:48px; font-size:1.3rem; background:var(--blue); bottom:30px; right:-18px; animation:floaty 7s ease-in-out infinite .5s; }
.float-coin--c{ width:40px; height:40px; font-size:1.1rem; background:var(--navy); bottom:-16px; left:40px; animation:floaty 5.5s ease-in-out infinite 1s; }
@keyframes floaty{ 0%,100%{ transform:translateY(0) rotate(-4deg);} 50%{ transform:translateY(-16px) rotate(4deg);} }

/* MARQUEE */
.marquee{ position:relative; z-index:1; overflow:hidden; padding:10px 0; background:var(--navy);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent); mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent); }
.marquee__track{ display:flex; align-items:center; white-space:nowrap; width:max-content; animation:marquee 38s linear infinite; }
.tick{ display:inline-flex; align-items:center; gap:9px; padding:0 22px; border-right:1px solid rgba(255,255,255,.09); font-size:.84rem; font-variant-numeric:tabular-nums; }
.tick b{ color:#fff; font-weight:700; letter-spacing:.03em; }
.tick__p{ color:rgba(255,255,255,.74); font-weight:600; }
.tick .up{ color:#2fe0a8; font-weight:700; }
.tick .down{ color:#ff5d6c; font-weight:700; }
@keyframes marquee{ from{ transform:translateX(0);} to{ transform:translateX(-50%);} }

/* ============ HOW IT WORKS ============ */
.how{ padding:84px 0 78px; }
.steps{ display:grid; gap:24px; grid-template-columns:1fr; }
.step{ position:relative; display:flex; flex-direction:column; align-items:center; }
.step__top{ display:flex; align-items:center; justify-content:center; margin-bottom:18px; text-align:center; }
.step__name{ margin:0; font-size:1.22rem; font-weight:800; letter-spacing:-.02em; }

.phone{ position:relative; margin:0 auto; width:100%; max-width:300px; aspect-ratio:300/610; background:var(--navy); border-radius:42px; padding:11px; box-shadow:var(--sh-lg), inset 0 0 0 2px rgba(255,255,255,.06); animation:phoneFloat 7s ease-in-out infinite; }
.step:nth-child(2) .phone{ animation-delay:.6s; } .step:nth-child(3) .phone{ animation-delay:1.2s; } .step:nth-child(4) .phone{ animation-delay:1.8s; }
@keyframes phoneFloat{ 0%,100%{ transform:translateY(0);} 50%{ transform:translateY(-12px);} }
.phone__notch{ position:absolute; top:11px; left:50%; transform:translateX(-50%); width:96px; height:24px; background:var(--navy); border-radius:0 0 16px 16px; z-index:3; }
.phone__screen{ position:relative; width:100%; height:100%; background:var(--bg-2); border-radius:32px; overflow:hidden; padding:30px 15px 16px; display:flex; flex-direction:column; justify-content:space-between; }
.phone__screen > :not(.mini-swap){ margin-block:0; }
.scr__glow{ position:absolute; width:200px; height:200px; left:50%; top:30%; transform:translateX(-50%); border-radius:50%; background:radial-gradient(circle,rgba(46,143,255,.35),transparent 70%); filter:blur(40px); pointer-events:none; }
.scr__glow--green{ background:radial-gradient(circle,rgba(7,190,142,.4),transparent 70%); }
.scr__bar{ position:relative; display:flex; justify-content:space-between; font-size:.72rem; font-weight:700; }
.scr__sig{ width:18px; height:11px; align-self:center; background:linear-gradient(90deg,var(--ink) 0 3px,transparent 3px 5px,var(--ink) 5px 8px,transparent 8px 10px,var(--ink) 10px 13px,transparent 13px 15px,var(--ink) 15px 18px); opacity:.85; }
.scr__title{ position:relative; font-weight:800; font-size:1.02rem; margin:14px 0 14px; }
.scr__title--c{ text-align:center; margin-top:8px; }
.scr__note{ position:relative; font-size:.8rem; color:var(--ink-2); font-weight:500; margin:10px 4px 0; text-align:center; }
.scr__note--mono{ font-variant-numeric:tabular-nums; }
.scr__btn{ position:relative; width:100%; padding:.85em; border-radius:14px; border:0; color:#fff; background:var(--grad); font-weight:800; font-size:.96rem; box-shadow:var(--sh-brand); }
.scr__btn--ghost{ color:var(--ink); background:var(--surface); border:1px solid var(--line); box-shadow:var(--sh-sm); }
.pay-row{ position:relative; display:flex; align-items:center; justify-content:space-between; padding:11px 14px; border-radius:12px; background:var(--surface); border:1px solid var(--line); box-shadow:var(--sh-sm); }
.pay-row__l{ font-size:.76rem; font-weight:600; color:var(--ink-3); }
.pay-row__card{ display:flex; align-items:center; gap:8px; font-size:.82rem; font-weight:800; letter-spacing:.04em; }
.pay-row__card i{ width:26px; height:17px; border-radius:4px; background:linear-gradient(135deg,#ffd479,#e0a23b); }
.send-amt{ position:relative; display:flex; align-items:center; justify-content:space-between; padding:12px 14px; border-radius:12px; background:var(--grad-soft); }
.send-amt span{ font-size:.76rem; font-weight:600; color:var(--ink-2); }
.send-amt b{ font-size:1.05rem; font-weight:800; font-variant-numeric:tabular-nums; }
.receipt__ok{ color:var(--teal); }

.mini-row{ position:relative; background:var(--surface); border:1px solid var(--line); border-radius:14px; padding:12px 14px; display:flex; align-items:center; justify-content:space-between; box-shadow:var(--sh-sm); }
.mini-row--accent{ background:var(--grad-soft); border-color:transparent; }
.mini-row__l{ font-size:.76rem; font-weight:600; color:var(--ink-3); }
.mini-row__v{ display:flex; align-items:baseline; gap:6px; }
.mini-row__v b{ font-size:1.22rem; font-weight:800; font-variant-numeric:tabular-nums; }
.mini-row__v em{ font-style:normal; font-size:.76rem; font-weight:700; color:var(--ink-2); }
.mini-swap{ width:34px; height:34px; margin:-8px auto; position:relative; z-index:2; border-radius:50%; background:var(--surface); border:1px solid var(--line); display:grid; place-items:center; color:var(--teal); box-shadow:var(--sh-sm); }
.rate-line{ position:relative; display:flex; justify-content:space-between; align-items:center; margin-top:14px; padding:10px 14px; border-radius:12px; background:var(--surface); border:1px solid var(--line); font-size:.78rem; }
.rate-line span{ color:var(--ink-3); font-weight:600; } .rate-line b{ font-variant-numeric:tabular-nums; }
.chips{ position:relative; display:flex; gap:6px; margin-top:12px; }
.chips span{ flex:1; text-align:center; font-size:.72rem; font-weight:700; color:var(--ink-2); padding:.6em .2em; border-radius:10px; background:var(--surface); border:1px solid var(--line); }

.kyc-shield{ position:relative; display:grid; place-items:center; margin:18px 0 4px; }
.check-list{ position:relative; display:flex; flex-direction:column; gap:8px; margin-top:16px; }
.check-list li{ display:flex; align-items:center; gap:10px; font-size:.82rem; font-weight:700; color:var(--ink); background:var(--surface); border:1px solid var(--line); border-radius:12px; padding:10px 12px; box-shadow:var(--sh-sm); }
.check-list i{ width:20px; height:20px; flex:none; border-radius:50%; background:var(--grad); position:relative; }
.check-list i::after{ content:""; position:absolute; left:6px; top:9px; width:5px; height:9px; border:2px solid #fff; border-top:0; border-left:0; transform:rotate(45deg); }

.qr{ position:relative; display:grid; place-items:center; margin:6px 0 12px; }
.qr__svg{ border-radius:14px; box-shadow:var(--sh); }
.qr__dots rect{ animation:qrBlink 2.5s ease-in-out infinite; }
@keyframes qrBlink{ 0%,100%{ opacity:.35;} 50%{ opacity:1;} }
.addr-row{ position:relative; display:flex; align-items:center; justify-content:center; gap:8px; font-size:.8rem; font-weight:700; color:var(--ink-2); background:var(--surface); border:1px solid var(--line); border-radius:10px; padding:8px 12px; margin:0 auto; }
.addr-row svg{ color:var(--teal); }
.net-pill{ position:relative; text-align:center; font-size:.72rem; font-weight:700; color:var(--ink-2); padding:.4em .8em; border-radius:999px; background:var(--surface); border:1px solid var(--line); margin:10px auto 0; }
.send-prog{ position:relative; height:8px; border-radius:999px; background:var(--surface); border:1px solid var(--line); overflow:hidden; margin:16px 0 0; }
.send-prog__bar{ display:block; height:100%; width:40%; border-radius:999px; background:var(--grad); animation:sendProg 2.6s var(--ease) infinite; }
@keyframes sendProg{ 0%{ width:8%;} 60%{ width:82%;} 100%{ width:96%;} }

.done-burst{ position:relative; display:grid; place-items:center; margin:18px 0 4px; }
.done-amount{ position:relative; text-align:center; font-size:1.7rem; font-weight:800; margin-top:6px; background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent; font-variant-numeric:tabular-nums; }
.receipt{ position:relative; margin-top:14px; display:flex; flex-direction:column; gap:6px; }
.receipt li{ display:flex; justify-content:space-between; font-size:.8rem; padding:9px 12px; border-radius:10px; background:var(--surface); border:1px solid var(--line); }
.receipt span{ color:var(--ink-3); font-weight:600; } .receipt b{ font-variant-numeric:tabular-nums; }
.done-card{ position:relative; margin:14px auto 0; width:82%; height:52px; border-radius:12px; background:linear-gradient(120deg,#081634,#1c3b73); overflow:hidden; display:flex; align-items:flex-end; padding:10px 14px; color:#fff; }
.done-card::after{ content:""; position:absolute; top:-40%; left:-30%; width:60%; height:180%; background:linear-gradient(90deg,transparent,rgba(255,255,255,.25),transparent); transform:rotate(20deg); animation:shine 3.5s linear infinite; }
.done-card__chip{ position:absolute; top:10px; left:14px; width:26px; height:19px; border-radius:4px; background:linear-gradient(135deg,#ffd479,#e0a23b); }
.done-card__pan{ font-weight:700; letter-spacing:.08em; font-size:.84rem; }
.scr-done > .scr__btn{ margin-top:16px; }

.step.in .kyc-prog{ animation:dash 1.3s var(--ease) forwards; }
.step.in .kyc-check{ animation:dash .7s var(--ease) .9s forwards; }
.step.in .done-check{ animation:dash .7s var(--ease) .3s forwards; }
.step.in .done-c2{ animation:pop .6s var(--ease) both; }
@keyframes dash{ to{ stroke-dashoffset:0; } }
@keyframes pop{ 0%{ transform:scale(.4); opacity:0;} 60%{ transform:scale(1.12);} 100%{ transform:scale(1); opacity:1;} }

/* ============ WHAT NFS DOES (dark) ============ */
.dark{ background:radial-gradient(900px 500px at 85% 0%, #123a6e 0%, transparent 60%), var(--navy); color:#fff; }
.flow{ padding:90px 0; }
.flow .sec-head__tag{ color:#3fe0b5; }
.flow__layout{ display:grid; grid-template-columns:1fr; gap:18px; align-items:stretch; }
.flow__hub{ position:relative; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:14px; padding:26px; border-radius:var(--r-lg); background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.1); }
.flow__hub-cap{ font-weight:700; font-size:1rem; color:rgba(255,255,255,.85); text-align:center; }
.do-grid{ display:grid; grid-template-columns:1fr; gap:14px; }
.do-card{ background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.1); border-radius:16px; padding:20px; transition:transform .3s var(--ease), background .3s; }
.do-card:hover{ transform:translateY(-4px); background:rgba(255,255,255,.09); }
.do-card__ic{ display:inline-grid; place-items:center; width:46px; height:46px; border-radius:13px; background:var(--grad); color:#fff; box-shadow:0 10px 24px rgba(7,190,142,.4); margin-bottom:13px; }
.do-card h3{ margin:0 0 6px; font-size:1.04rem; font-weight:800; color:#fff; }
.do-card p{ margin:0; font-size:.9rem; color:rgba(255,255,255,.66); font-weight:500; }
.hub{ width:100%; max-width:340px; overflow:visible; }
.hub__lines line{ animation:flowDash 1.4s linear infinite; }
@keyframes flowDash{ to{ stroke-dashoffset:-32; } }
.hub__node circle{ fill:rgba(255,255,255,.08); stroke:rgba(255,255,255,.2); stroke-width:1.5; }
.hub__node{ animation:nodeFloat 5s ease-in-out infinite; transform-box:fill-box; transform-origin:center; }
.hub__node:nth-child(5){ animation-delay:.4s; } .hub__node:nth-child(6){ animation-delay:.8s; }
.hub__node:nth-child(7){ animation-delay:1.2s; } .hub__node:nth-child(8){ animation-delay:1.6s; }
@keyframes nodeFloat{ 0%,100%{ transform:translateY(0);} 50%{ transform:translateY(-7px);} }
.hub__ring{ opacity:.5; transform-box:fill-box; transform-origin:center; animation:hubRing 3s ease-out infinite; }
.hub__ring--2{ animation-delay:1.5s; }
@keyframes hubRing{ 0%{ transform:scale(1); opacity:.5;} 100%{ transform:scale(1.9); opacity:0;} }
.hub__core{ filter:drop-shadow(0 14px 30px rgba(7,190,142,.5)); }
.hub__label{ fill:#fff; font-weight:800; font-size:30px; letter-spacing:.04em; }

/* ============ PARTNERS ============ */
.partner{ padding:90px 0; }
.bento{ display:grid; grid-template-columns:1fr; gap:18px; align-items:stretch; }
.bento__feature{ display:flex; flex-direction:column; justify-content:center; gap:16px; }
.bento__feature-cap{ font-size:.92rem; font-weight:600; color:var(--ink-2); text-align:center; max-width:520px; margin:0 auto; }
.browser{ border-radius:var(--r-lg); overflow:hidden; background:var(--surface); box-shadow:var(--sh-lg); border:1px solid var(--line); }
.browser__bar{ display:flex; align-items:center; gap:7px; padding:14px 18px; background:var(--bg-2); border-bottom:1px solid var(--line); }
.browser__bar i{ width:11px; height:11px; border-radius:50%; background:#d6deeb; }
.browser__bar i:nth-child(1){ background:#ff6058; } .browser__bar i:nth-child(2){ background:#ffbe2f; } .browser__bar i:nth-child(3){ background:#2bca44; }
.browser__url{ margin-left:14px; font-size:.82rem; font-weight:600; color:var(--ink-3); background:var(--surface); border:1px solid var(--line); border-radius:999px; padding:.35em 1em; }
.browser__body{ display:grid; grid-template-columns:64px 1fr; min-height:300px; }
.browser__side{ background:var(--bg-2); border-right:1px solid var(--line); padding:20px 14px; display:flex; flex-direction:column; gap:14px; }
.browser__side span{ height:10px; border-radius:6px; background:linear-gradient(90deg,#dde6f3,#eef3fb); }
.browser__side span:first-child{ background:var(--grad); }
.browser__main{ padding:26px; display:flex; flex-direction:column; gap:18px; align-items:center; }
.skeleton{ width:100%; display:flex; flex-direction:column; gap:10px; }
.sk{ height:12px; border-radius:7px; background:linear-gradient(90deg,#e7eef8,#f4f8fe,#e7eef8); background-size:200% 100%; animation:shimmer 2.2s linear infinite; width:100%; }
.sk--lg{ height:18px; width:60%; } .sk--sm{ width:40%; }
@keyframes shimmer{ 0%{ background-position:200% 0;} 100%{ background-position:-200% 0;} }
.embed-widget{ position:relative; width:100%; max-width:320px; background:var(--surface); border-radius:var(--r-lg); padding:20px; box-shadow:var(--sh); border:2px solid transparent; background-image:linear-gradient(#fff,#fff),var(--grad); background-origin:border-box; background-clip:padding-box,border-box; animation:widgetPop .8s var(--ease) both; }
@keyframes widgetPop{ 0%{ transform:scale(.9) translateY(10px); opacity:0;} 100%{ transform:none; opacity:1;} }
.embed-widget::after{ content:""; position:absolute; inset:-6px; border-radius:calc(var(--r-lg) + 6px); box-shadow:0 0 0 0 rgba(7,190,142,.4); animation:widgetGlow 2.6s ease-out infinite; pointer-events:none; }
@keyframes widgetGlow{ 0%{ box-shadow:0 0 0 0 rgba(7,190,142,.35);} 100%{ box-shadow:0 0 0 16px rgba(7,190,142,0);} }
.embed-widget__tag{ position:absolute; top:-12px; right:14px; font-size:.68rem; font-weight:800; color:#fff; background:var(--grad); padding:.3em .8em; border-radius:999px; box-shadow:var(--sh-brand); }
.ew-row{ display:flex; align-items:center; gap:10px; padding:12px 14px; border-radius:12px; background:var(--bg-2); border:1px solid var(--line); }
.ew-row b{ font-size:1.2rem; font-weight:800; font-variant-numeric:tabular-nums; } .ew-row em{ margin-left:auto; font-style:normal; font-weight:700; color:var(--ink-2); font-size:.85rem; }
.ew-row--get{ background:var(--grad-soft); border-color:transparent; }
.ew-arrow{ display:grid; place-items:center; color:var(--teal); margin:-6px 0; }
.ew-btn{ margin-top:14px; width:100%; padding:.85em; border-radius:12px; border:0; color:#fff; background:var(--grad); font-weight:800; box-shadow:var(--sh-brand); }

.card{ background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); padding:26px; box-shadow:var(--sh-sm); transition:transform .3s var(--ease), box-shadow .3s; }
.card:hover{ transform:translateY(-6px); box-shadow:var(--sh); }
.card__ic{ display:inline-grid; place-items:center; width:52px; height:52px; border-radius:15px; color:#fff; background:var(--grad); box-shadow:var(--sh-brand); margin-bottom:16px; }
.card h3{ margin:0 0 8px; font-size:1.14rem; font-weight:800; letter-spacing:-.01em; }
.card p{ margin:0; color:var(--ink-2); font-size:.94rem; font-weight:500; }
.card--accent{ background:var(--grad); border-color:transparent; color:#fff; box-shadow:var(--sh-brand); }
.card--accent h3{ color:#fff; } .card--accent p{ color:rgba(255,255,255,.92); }
.card__ic--ghost{ background:rgba(255,255,255,.2); box-shadow:none; }

/* ============ TRUST / ABOUT ============ */
.trust{ padding:88px 0; }
.stats{ display:grid; grid-template-columns:1fr; gap:20px; margin-bottom:34px; }
.stat{ background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); padding:30px; text-align:center; box-shadow:var(--sh-sm); }
.stat__num{ display:block; font-size:clamp(2.4rem,7vw,3.2rem); font-weight:800; letter-spacing:-.03em; line-height:1; background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent; font-variant-numeric:tabular-nums; }
.stat__cap{ display:block; margin-top:12px; color:var(--ink-2); font-weight:600; font-size:.95rem; }
.req{ display:grid; grid-template-columns:1fr; gap:1px; background:var(--line); border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden; }
.req__col{ background:var(--surface); padding:22px 24px; }
.req__k{ display:block; font-size:.78rem; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:var(--teal); margin-bottom:6px; }
.req__v{ font-weight:600; color:var(--ink); font-size:.98rem; }

/* ============ CTA (gradient) ============ */
.cta{ padding:20px 0 70px; }
.cta__inner{ background:var(--grad); border-radius:var(--r-xl); padding:64px 40px; text-align:center; color:#fff; box-shadow:var(--sh-brand); position:relative; overflow:hidden; }
.cta__inner::before{ content:""; position:absolute; inset:0; background:radial-gradient(500px 300px at 20% 0%,rgba(255,255,255,.25),transparent 60%); }
.cta__title{ position:relative; margin:0; font-size:clamp(1.8rem,5vw,2.8rem); font-weight:800; letter-spacing:-.02em; }
.cta__sub{ position:relative; margin:14px 0 0; font-size:1.12rem; opacity:.92; font-weight:500; }
.cta__actions{ position:relative; display:flex; flex-wrap:wrap; gap:18px; justify-content:center; align-items:center; margin-top:28px; }
.cta__mail{ font-weight:800; font-size:1.1rem; color:#fff; border-bottom:2px solid rgba(255,255,255,.5); padding-bottom:2px; }

/* ============ RISKS ============ */
.risks{ padding:0 0 64px; }
.risks__inner{ display:flex; gap:14px; align-items:flex-start; background:var(--surface); border:1px solid var(--line); border-left:4px solid #f0a020; border-radius:var(--r-md); padding:20px 24px; box-shadow:var(--sh-sm); }
.risks__inner svg{ color:#f0a020; flex:none; margin-top:2px; }
.risks__inner p{ margin:0; font-size:.92rem; color:var(--ink-2); font-weight:500; } .risks__inner b{ color:var(--ink); }

/* ============ DOCUMENTS ============ */
.docs{ padding:84px 0; }
.docs__grid{ display:grid; grid-template-columns:1fr; gap:18px; max-width:900px; margin:0 auto; }
.doc-card{ display:flex; align-items:flex-start; gap:18px; background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); padding:24px; box-shadow:var(--sh-sm); color:inherit; transition:transform .3s var(--ease), box-shadow .3s; }
.doc-card:hover{ transform:translateY(-4px); box-shadow:var(--sh); }
.doc-card__ic{ flex:none; width:50px; height:50px; border-radius:14px; display:grid; place-items:center; color:#fff; background:var(--grad); box-shadow:var(--sh-brand); }
.doc-card__body{ display:flex; flex-direction:column; flex:1; }
.doc-card h3{ margin:0 0 6px; font-size:1.08rem; font-weight:800; letter-spacing:-.01em; color:var(--ink); }
.doc-card p{ margin:0 0 14px; font-size:.92rem; color:var(--ink-2); font-weight:500; line-height:1.5; }
.doc-card__link{ display:inline-flex; align-items:center; gap:6px; margin-top:auto; font-weight:800; font-size:.92rem; color:var(--teal); }
.doc-card__link svg{ transition:transform .25s var(--ease); }
.doc-card:hover .doc-card__link svg{ transform:translateX(3px); }
@media (min-width:680px){ .docs__grid{ grid-template-columns:1fr 1fr; } }

/* ============ FAQ ============ */
.faq{ padding:84px 0; }
.faq__list{ display:flex; flex-direction:column; gap:14px; max-width:880px; margin:0 auto; }
.faq__item{ background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); box-shadow:var(--sh-sm); overflow:hidden; transition:box-shadow .3s; }
.faq__item[open]{ box-shadow:var(--sh); }
.faq__item summary{ list-style:none; cursor:pointer; display:flex; align-items:center; justify-content:space-between; gap:16px; padding:22px 26px; font-weight:800; font-size:1.08rem; color:var(--ink); }
.faq__item summary::-webkit-details-marker{ display:none; }
.faq__ic{ position:relative; flex:none; width:32px; height:32px; border-radius:50%; background:var(--grad-soft); transition:background .3s; }
.faq__ic::before,.faq__ic::after{ content:""; position:absolute; left:50%; top:50%; width:13px; height:2.5px; border-radius:2px; background:var(--teal); transform:translate(-50%,-50%); transition:transform .3s var(--ease), opacity .3s, background .3s; }
.faq__ic::after{ transform:translate(-50%,-50%) rotate(90deg); }
.faq__item[open] .faq__ic{ background:var(--grad); }
.faq__item[open] .faq__ic::before{ background:#fff; }
.faq__item[open] .faq__ic::after{ opacity:0; transform:translate(-50%,-50%) rotate(0); }
.faq__body{ padding:0 26px 24px; color:var(--ink-2); font-size:.98rem; font-weight:500; line-height:1.65; }
.faq__body p{ margin:0 0 12px; }
.faq__body h4{ margin:18px 0 10px; font-size:.96rem; font-weight:800; color:var(--ink); }
.faq__body > ul:not(.faq__countries){ list-style:none; padding:0; margin:0 0 12px; display:flex; flex-direction:column; gap:8px; }
.faq__body > ul:not(.faq__countries) li{ position:relative; padding-left:22px; }
.faq__body > ul:not(.faq__countries) li::before{ content:""; position:absolute; left:3px; top:9px; width:7px; height:7px; border-radius:2px; background:var(--grad); }
.faq__req{ display:flex; flex-direction:column; gap:6px; background:var(--bg-2); border:1px solid var(--line); border-radius:var(--r-md); padding:16px 18px; font-size:.94rem; color:var(--ink); }
.faq__req a{ color:var(--teal); font-weight:700; }
.faq__countries{ list-style:none; padding:0; margin:2px 0 12px; columns:2; column-gap:26px; }
.faq__countries li{ position:relative; break-inside:avoid; padding:5px 0 5px 18px; font-size:.92rem; color:var(--ink-2); }
.faq__countries li::before{ content:""; position:absolute; left:2px; top:12px; width:5px; height:5px; border-radius:50%; background:var(--ink-3); }
@media (min-width:680px){ .faq__countries{ columns:3; } }

/* ============ FOOTER (dark) ============ */
.footer{ background:var(--navy); color:#fff; padding:64px 0 30px; }
.footer__grid{ display:grid; grid-template-columns:1fr; gap:38px; }
.brand--light .brand__txt strong{ color:#fff; } .brand--light .brand__txt small{ color:rgba(255,255,255,.55); }
.footer__desc{ margin:18px 0 0; max-width:34ch; color:rgba(255,255,255,.6); font-size:.95rem; }
.footer__h{ display:block; font-size:.78rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:#3fe0b5; margin-bottom:16px; }
.footer__nav{ display:flex; flex-direction:column; gap:10px; }
.footer__nav a{ color:rgba(255,255,255,.78); font-weight:600; transition:color .2s; } .footer__nav a:hover{ color:#fff; }
.footer__req p{ margin:0 0 8px; color:rgba(255,255,255,.7); font-size:.92rem; }
.footer__req a{ color:#3fe0b5; font-weight:700; }
.footer__bottom{ display:flex; flex-wrap:wrap; gap:10px 24px; justify-content:space-between; margin-top:44px; padding-top:24px; border-top:1px solid rgba(255,255,255,.12); color:rgba(255,255,255,.5); font-size:.85rem; }

/* ============ REVEAL ============ */
.reveal{ opacity:0; transform:translateY(26px); transition:opacity .7s var(--ease), transform .7s var(--ease); }
.reveal.in{ opacity:1; transform:none; }

/* ============ RESPONSIVE ============ */
@media (min-width:680px){
  .steps{ grid-template-columns:repeat(2,1fr); gap:30px 24px; }
  .do-grid{ grid-template-columns:1fr 1fr; }
  .bento{ grid-template-columns:repeat(2,1fr); }
  .bento__feature{ grid-column:1 / -1; }
  .stats{ grid-template-columns:repeat(3,1fr); }
  .req{ grid-template-columns:repeat(2,1fr); }
}
@media (min-width:1024px){
  .hero{ padding-top:62px; }
  .hero__grid{ grid-template-columns:1.05fr .95fr; align-items:center; gap:56px; padding-bottom:62px; }
  .hero__visual{ justify-content:flex-end; }
  .steps{ grid-template-columns:repeat(4,1fr); gap:24px; }
  .phone{ max-width:none; }
  .flow__layout{ grid-template-columns:.82fr 1.18fr; gap:22px; }
  .do-grid{ grid-template-columns:1fr 1fr; }
  .bento{ grid-template-columns:repeat(3,1fr); grid-auto-rows:1fr; }
  .bento__feature{ grid-column:1 / 3; grid-row:1 / 3; }
  .footer__grid{ grid-template-columns:1.4fr 1fr 1.4fr; }
}

@media (max-width:1023px){
  .nav{ position:fixed; inset:64px 14px auto 14px; flex-direction:column; gap:4px; background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); box-shadow:var(--sh-lg); padding:14px; transform:translateY(-12px); opacity:0; pointer-events:none; transition:transform .3s var(--ease), opacity .3s; }
  .nav.open{ transform:none; opacity:1; pointer-events:auto; }
  .nav a{ font-size:1.05rem; padding:.8em 1em; }
  .burger{ display:block; }
}

@media (max-width:640px){
  .hero__title{ font-size:clamp(2rem,9vw,2.7rem); }
  .hdr__cta .btn--sm{ display:none; }
  .float-coin--c{ display:none; }
  .fx{ padding:18px; } .fx__row{ padding:14px; } .fx__val{ font-size:1.4rem; } .coin{ width:30px; height:30px; font-size:1rem; } .fx__cur{ font-size:.85rem; }
  .cta__inner{ padding:44px 24px; }
}

@media (prefers-reduced-motion:reduce){
  *{ animation:none !important; transition:none !important; }
  .reveal{ opacity:1; transform:none; }
}