@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,300..500&family=Inter:wght@400;500;600&display=swap');

:root{
  --ink:#0C0C0E;
  --ink-2:#17171A;
  --ink-soft:#2A2823;
  --cream:#F4EEE1;
  --cream-2:#EAE2D0;
  --paper:#FBF7EC;
  --sand:#DDD3BB;
  --champagne:#C6AE7E;
  --champagne-light:#E7D9BA;
  --copper:#A66B2B;
  --copper-soft:#B8823E;
  --muted:#58534A;
  --muted-2:#8E887C;
  --glass-light:rgba(251,247,236,.78);
  --glass-border:rgba(255,255,255,.65);
  --glass-dark:rgba(20,19,17,.72);
  --glass-border-dark:rgba(255,255,255,.12);
  --glass-blur:blur(18px) saturate(170%);
  --shadow-glass:0 16px 36px -10px rgba(12,12,14,.07),0 0 0 1px rgba(12,12,14,.04);
  --shadow-glass-dark:0 24px 48px -12px rgba(0,0,0,.5),0 0 0 1px rgba(255,255,255,.08);
  --line:rgba(12,12,14,.08);
  --line-strong:rgba(12,12,14,.16);
  --line-dark:rgba(255,255,255,.10);
  --line-dark-strong:rgba(255,255,255,.20);
  --shadow-sm:0 1px 3px rgba(12,12,14,.04),0 6px 24px rgba(12,12,14,.05);
  --shadow-md:0 2px 6px rgba(12,12,14,.05),0 24px 60px rgba(12,12,14,.08);
  --shadow-lg:0 4px 12px rgba(12,12,14,.06),0 48px 120px rgba(12,12,14,.14);
  --max:1280px;
  --gutter:clamp(24px,4vw,56px);
  --ease:cubic-bezier(.22,1,.36,1);
  --serif:'Fraunces','New York','Charter','Iowan Old Style',Georgia,serif;
  --sans:'Inter',-apple-system,BlinkMacSystemFont,'SF Pro Display','Helvetica Neue',Arial,sans-serif;
  --yellow:#FFC738;
  --yellow-deep:#E89400;

  /* Goyo App tokens (mirrors iOS Neobank theme + plan tiers) */
  --app-primary:#1F5CE0;
  --app-accent:#4FE1EB;
  --app-success:#45D19A;
  --app-warning:#FFC246;
  --app-error:#FF5E6E;
  --app-bg:#0A0D1E;
  --app-surface:#141830;
  --plan-yellow:#EBD035;
  --plan-yellow-soft:#FDD966;
  --plan-green-start:#29A684;
  --plan-green-end:#0D588E;
  --plan-gold-start:#D3B870;
  --plan-gold-end:#944E48
}

*{box-sizing:border-box}
html{background:var(--cream);scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0;
  font-family:var(--sans);
  font-feature-settings:'ss01','cv11';
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  color:var(--ink);
  background:var(--cream);
  overflow-x:hidden;
  font-size:16px;
  line-height:1.6
}
a{color:inherit;text-decoration:none}
button,select,input{font:inherit}
img,svg{max-width:100%;display:block}
::selection{background:var(--ink);color:var(--cream)}

/* ---------- HEADER ---------- */
.site-header{
  position:sticky;top:0;z-index:100;
  background:rgba(244,238,225,.72);
  color:var(--ink);
  border-bottom:1px solid transparent;
  -webkit-backdrop-filter:blur(20px) saturate(150%);
  backdrop-filter:blur(20px) saturate(150%);
  transition:border-color .3s var(--ease),background .3s var(--ease)
}
.site-header.scrolled{border-bottom-color:var(--line)}
.nav{
  width:min(calc(100% - var(--gutter)*2),var(--max));
  height:68px;margin:auto;
  display:flex;align-items:center;justify-content:space-between;gap:32px
}
.brand{display:flex;align-items:center;gap:12px}
.brand img{width:112px;height:auto;object-fit:contain;transition:transform .5s var(--ease)}
.brand:hover img{transform:translateY(-1px)}
.nav-links,.nav-actions{display:flex;align-items:center;gap:28px}
.nav-links a{
  font-size:14px;font-weight:450;
  color:var(--ink);opacity:.6;
  padding:8px 0;
  transition:opacity .2s var(--ease)
}
.nav-links a:hover,.nav-links a.active{opacity:1}
.nav-links a.active{position:relative}
.nav-links a.active:after{
  content:"";position:absolute;left:0;right:0;bottom:2px;
  height:1px;background:var(--copper)
}
.locale{
  height:34px;
  border-radius:999px;
  border:1px solid var(--line-strong);
  background:transparent;
  color:var(--ink);padding:0 12px;font-weight:450;font-size:13px;
  -webkit-appearance:none;appearance:none;cursor:pointer;
  transition:background .2s var(--ease),border-color .2s var(--ease)
}
.locale:hover{background:rgba(12,12,14,.04)}
.login{display:none!important}

/* ---------- BUTTONS ---------- */
.btn,.pill{
  min-height:44px;
  border-radius:999px;
  display:inline-flex;align-items:center;justify-content:center;
  padding:0 22px;
  border:1px solid transparent;
  font-size:14px;font-weight:500;letter-spacing:.005em;
  cursor:pointer;
  position:relative;overflow:hidden;
  transition:transform .25s var(--ease),background .25s var(--ease),border-color .25s var(--ease),color .25s var(--ease),box-shadow .25s var(--ease)
}
.btn:after,.pill:after{
  content:"";position:absolute;top:-50%;left:-80%;
  width:50%;height:200%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.24),transparent);
  transform:rotate(25deg);
  pointer-events:none;
  opacity:0;
  transition:none
}
.btn:hover:after,.pill:hover:after{
  left:140%;
  opacity:1;
  transition:left .8s cubic-bezier(.16,1,.3,1),opacity .3s ease-in
}
.btn:hover,.pill:hover{transform:translateY(-1.5px)}
.btn:active,.pill:active{transform:translateY(0) scale(.98)}
.yellow:hover,.pill:hover{background:var(--copper);box-shadow:0 8px 20px -4px rgba(166,107,43,.32)}
.dark-btn:hover{background:var(--ink-2);box-shadow:0 8px 20px -4px rgba(12,12,14,.28)}
.yellow,.pill{
  background:var(--ink);color:var(--cream)
}
.yellow:hover,.pill:hover{background:var(--copper)}
.dark-btn{background:var(--ink);color:var(--cream)}
.dark-btn:hover{background:var(--ink-2)}
.light-btn{background:var(--cream);color:var(--ink);border-color:var(--line-strong)}
.ghost{background:transparent;border-color:var(--line-dark-strong);color:#fff}
.ghost:hover{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.32)}
.hero .btn.yellow{
  background:linear-gradient(155deg,#1C1A17 0%,#090908 100%);
  color:#FDFBF7;
  min-height:50px;padding:0 28px;font-size:15px;font-weight:600;
  box-shadow:0 14px 32px -8px rgba(12,12,14,.4),inset 0 1px 1px rgba(255,255,255,.15);
}
.hero .btn.yellow:hover{
  background:linear-gradient(155deg,#B87832 0%,#8E581F 100%);
  box-shadow:0 18px 40px -8px rgba(166,107,43,.5);
}
.hero .btn.ghost{
  background:rgba(255,255,255,.65);
  border:1px solid rgba(12,12,14,.14);
  color:#141210;
  -webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);
  min-height:50px;padding:0 26px;font-size:15px;font-weight:500;
  box-shadow:0 8px 24px -6px rgba(12,12,14,.06);
}
.hero .btn.ghost:hover{
  background:rgba(255,255,255,.95);
  border-color:rgba(12,12,14,.3);
  box-shadow:0 12px 30px -6px rgba(12,12,14,.12);
}
.ivory .btn.ghost,.white .btn.ghost,.final .btn.ghost,.sky .btn.ghost{
  background:transparent;border-color:var(--line-strong);color:var(--ink)
}
.ivory .btn.ghost:hover,.white .btn.ghost:hover,.final .btn.ghost:hover,.sky .btn.ghost:hover{
  background:rgba(12,12,14,.05);border-color:var(--ink)
}
.hero .eyebrow[style*="rgba(255,255,255"],
.ivory .eyebrow[style*="rgba(255,255,255"],
.white .eyebrow[style*="rgba(255,255,255"]{color:#6E685E!important}
.hero .eyebrow{
  color:var(--copper)!important;
  font-size:12px;letter-spacing:.20em;font-weight:700;text-transform:uppercase;
  display:inline-flex;align-items:center;gap:10px;
}
.hero .eyebrow:before{
  content:"";display:inline-block;width:24px;height:2px;background:var(--copper);border-radius:99px;
}

/* Yellow-class button on dark contexts becomes light (contrast) */
.dark .btn.yellow,.midnight .btn.yellow,.dark-page .btn.yellow,.brand-statement .btn.yellow,.sticky .btn.yellow{
  background:var(--cream);color:var(--ink)
}
.dark .btn.yellow:hover,.midnight .btn.yellow:hover,.dark-page .btn.yellow:hover,.brand-statement .btn.yellow:hover,.sticky .btn.yellow:hover{
  background:var(--champagne)
}

/* Currency card on light backgrounds */
.ivory .currency-card,.white .currency-card,.sky .currency-card{
  background:var(--paper);border:1px solid var(--line)
}
.ivory .currency-card:hover,.white .currency-card:hover,.sky .currency-card:hover{
  background:#fff;border-color:var(--copper);transform:translateY(-3px)
}
.ivory .currency-card span,.white .currency-card span,.sky .currency-card span{color:var(--muted)}
.ivory .currency-card strong,.white .currency-card strong,.sky .currency-card strong{color:var(--ink)}

/* Route-item on light backgrounds */
.ivory .route-item,.white .route-item{
  background:var(--paper);border:1px solid var(--line);color:var(--ink)
}
.ivory .route-item small,.white .route-item small{color:var(--muted)}

/* Info-row + fund-step on sky */
.sky .info-row,.sky .fund-step{background:var(--paper);border:1px solid var(--line)}
.soft-btn{background:transparent;color:var(--ink);border-color:var(--line-strong)}
.soft-btn:hover{background:rgba(12,12,14,.04)}

/* Text link (subtle CTA) */
.text-link{
  display:inline-flex;align-items:center;gap:6px;
  font-size:14px;font-weight:500;color:var(--copper);
  border-bottom:1px solid transparent;
  transition:border-color .2s var(--ease)
}
.text-link:hover{border-bottom-color:var(--copper)}

/* ---------- LAYOUT ---------- */
.wrap{width:min(calc(100% - var(--gutter)*2),var(--max));margin:auto}
.section{position:relative;overflow:hidden;padding:clamp(120px,11vw,180px) 0}
.section-large{padding:clamp(140px,13vw,200px) 0}
.dark{background:var(--ink);color:var(--cream)}
.midnight{
  background:var(--ink);
  color:var(--cream)
}
.ivory{background:var(--cream)}
.white{background:var(--paper)}
.sky{background:var(--cream-2)}
.center{text-align:center}

/* ---------- TYPOGRAPHY ---------- */
.eyebrow{
  margin:0 0 32px;
  display:inline-flex;align-items:center;gap:14px;
  font-size:11px;letter-spacing:.28em;text-transform:uppercase;
  color:var(--copper);font-weight:600;
  font-family:var(--sans)
}
.eyebrow:before{content:"";width:24px;height:1px;background:currentColor;opacity:.7}
.center .eyebrow{display:inline-flex;justify-content:center}
.dark .eyebrow,.midnight .eyebrow{color:var(--champagne)}

.display{
  margin:0;
  font-family:var(--serif);
  font-size:clamp(48px,6vw,96px);
  line-height:1.02;
  letter-spacing:-.035em;
  font-weight:380;
  font-variation-settings:'opsz' 144;
  max-width:16ch
}
.hero-title{
  font-size:clamp(52px,6.4vw,104px);
  line-height:1;
  letter-spacing:-.04em;
  font-weight:380;
  max-width:14ch
}
.section-title{
  margin:0;
  font-family:var(--serif);
  font-size:clamp(36px,4.2vw,64px);
  line-height:1.05;
  letter-spacing:-.028em;
  font-weight:400;
  font-variation-settings:'opsz' 144;
  max-width:18ch
}
.section-title.small{font-size:clamp(30px,3.2vw,48px)}
.center .section-title,.center .display{margin-left:auto;margin-right:auto}

.lead{
  margin:32px 0 0;max-width:520px;
  font-size:clamp(17px,1.2vw,20px);
  line-height:1.55;color:var(--muted);font-weight:400
}
.dark .lead,.midnight .lead,.page-hero.dark-page .lead{color:rgba(244,238,225,.65)}
.hero .lead{color:#36322D!important;font-size:clamp(18px,1.2vw,21px);line-height:1.6;margin-top:24px;max-width:520px;font-weight:450}
.copy{
  margin:22px 0 0;max-width:540px;
  font-size:clamp(16px,1.05vw,18px);
  line-height:1.65;color:var(--muted)
}
.center .copy,.center .lead{margin-left:auto;margin-right:auto}
.dark .copy,.midnight .copy{color:rgba(244,238,225,.65)}
.actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:40px;align-items:center}
.center .actions{justify-content:center}

/* Italic emphasis (editorial) */
.display em,.section-title em,.hero-title em{
  font-style:italic;
  font-variation-settings:'opsz' 144;
  color:var(--copper)
}

/* ---------- HERO ---------- */
.hero{
  min-height:calc(100svh - 68px);
  display:flex;align-items:center;
  background:radial-gradient(1200px 800px at 70% 35%, #FFFDF7 0%, #F6EFE2 55%, #EBE1D0 100%);
  color:var(--ink);overflow:hidden;
  position:relative;
  padding:0
}
.hero:before{
  content:"";position:absolute;inset:-10%;
  background:
    radial-gradient(900px 500px at 88% 40%,rgba(198,174,126,.26),transparent 65%),
    radial-gradient(700px 450px at 12% 85%,rgba(166,107,43,.14),transparent 65%),
    radial-gradient(600px 400px at 50% 10%,rgba(231,217,186,.20),transparent 60%);
  pointer-events:none;
  animation:heroAura 18s ease-in-out infinite alternate
}
@keyframes heroAura{
  0%{transform:scale(1) rotate(0deg)}
  50%{transform:scale(1.05) rotate(1.2deg) translate(1.5%, 1%)}
  100%{transform:scale(1) rotate(0deg)}
}
.hero-grid{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:64px;align-items:center;
  padding:80px 0 60px;position:relative;z-index:1
}
.product-stage{
  position:relative;min-height:580px;
  display:flex;align-items:center;justify-content:center;
  perspective:1200px;
}
.hero .product-stage{
  position:relative;min-height:600px;
  display:flex;align-items:center;justify-content:center;
  perspective:1200px;
}
.hero .phone{
  display:block!important;
  position:relative;
  right:auto;bottom:auto;
  width:290px;height:540px;
  border:8px solid #191714;
  border-radius:44px;
  background:linear-gradient(165deg,#1D1B17 0%,#0C0B0A 100%);
  box-shadow:
    0 40px 90px -16px rgba(12,12,14,.38),
    0 16px 36px -10px rgba(12,12,14,.22),
    0 0 0 1px rgba(255,255,255,.09) inset;
  padding:26px 20px;
  color:var(--cream);
  transform:rotateY(-7deg) rotateX(3deg) translateY(-8px);
  transition:transform .45s var(--ease);
  z-index:1;
}
.hero .card-visual{position:absolute!important}
.hero .mid-card{
  display:block!important;
  width:min(340px,85%);
  right:16px;
  bottom:95px;
  z-index:2;
  transform:rotate(-14deg) translateY(0) scale(.92);
  filter:drop-shadow(0 22px 45px rgba(0,0,0,.45));
  opacity:.86;
}
.hero .gold-card{
  display:block!important;
  width:min(360px,90%);
  right:-8px;
  bottom:25px;
  z-index:3;
  transform:rotate(-5deg) translateY(0);
  filter:drop-shadow(0 32px 64px rgba(12,12,14,.38));
}
.hero .float-note{
  display:block!important;
  position:absolute;
  left:-8px;
  top:65px;
  z-index:4;
  animation:floatBadge 6s ease-in-out infinite;
}
@keyframes floatBadge{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-9px)}
}

/* Card visuals — refined premium */
.card-visual{
  position:relative;
  width:min(440px,90%);
  aspect-ratio:1.586;
  border-radius:24px;
  padding:28px;
  box-shadow:
    0 34px 70px -12px rgba(12,12,14,.24),
    0 16px 32px -16px rgba(140,107,43,.25),
    0 0 0 1px rgba(255,255,255,.12) inset;
  overflow:hidden;
  transform-style:preserve-3d;
  transition:transform .4s var(--ease),box-shadow .4s var(--ease)
}
.card-visual:after{
  content:"";position:absolute;inset:-60%;
  background:radial-gradient(circle at var(--card-x, 48%) var(--card-y, 36%), rgba(255,255,255,.32) 0%, rgba(255,255,255,.06) 38%, transparent 65%);
  pointer-events:none;
  mix-blend-mode:overlay;
  opacity:.85;
  transition:opacity .4s var(--ease)
}
.card-visual:before{
  content:"";position:absolute;inset:0;
  background:
    radial-gradient(360px 200px at 15% -20%,rgba(255,255,255,.18),transparent 65%),
    radial-gradient(300px 200px at 100% 120%,rgba(0,0,0,.16),transparent 65%);
  pointer-events:none
}
.hero .card-visual{position:static}
.gold-card{
  background:linear-gradient(135deg,#F5EACF 0%,#D8B35A 32%,#B89243 65%,#8C6B2B 100%);
  color:var(--ink);
  transform:rotate(-6deg);
  box-shadow:
    0 34px 70px -12px rgba(12,12,14,.24),
    0 16px 32px -16px rgba(140,107,43,.35),
    inset 0 1px 1.5px rgba(255,255,255,.7),
    inset 0 -1.5px 2px rgba(0,0,0,.22)
}
.hero .gold-card{transform:rotate(-4deg) translateY(-8px)}
.mid-card{
  background:linear-gradient(145deg,#252320 0%,#11100E 100%);
  color:var(--cream);
  transform:rotate(-5deg);
  box-shadow:
    0 34px 70px -12px rgba(0,0,0,.5),
    0 16px 32px -16px rgba(0,0,0,.35),
    inset 0 1px 1.5px rgba(255,255,255,.2),
    inset 0 -1.5px 2px rgba(0,0,0,.6)
}
.card-logo{position:absolute;left:28px;top:28px;width:32px;object-fit:contain}
.gold-card .card-logo{filter:brightness(.55) saturate(.8)}
.mid-card .card-logo{filter:brightness(1.15)}
.chip{
  position:absolute;right:28px;top:28px;
  width:44px;height:34px;border-radius:6px;
  background:linear-gradient(135deg,#E8D8AC 0%,#B39257 55%,#80642F 100%);
  box-shadow:0 2px 5px rgba(0,0,0,.2),inset 0 1px 1px rgba(255,255,255,.45),inset 0 -1px 1px rgba(0,0,0,.3)
}
.chip:after{
  content:"";position:absolute;inset:5px;
  background:
    repeating-linear-gradient(90deg,rgba(0,0,0,.14) 0 5px,transparent 5px 9px),
    repeating-linear-gradient(0deg,rgba(0,0,0,.10) 0 5px,transparent 5px 9px);
  border-radius:3px
}
.card-wordmark{
  position:absolute;left:28px;bottom:24px;
  width:78px;height:auto;object-fit:contain;opacity:.92
}
.mid-card .card-wordmark{filter:invert(1) brightness(1.08)}
.card-digits{
  position:absolute;right:28px;bottom:24px;
  font-weight:500;font-size:13px;letter-spacing:.15em;
  font-variant-numeric:tabular-nums;opacity:.85
}

.float-note{
  position:absolute;left:0;top:60px;
  border:1px solid rgba(255,255,255,.65);
  background:rgba(251,247,236,.82);
  -webkit-backdrop-filter:blur(20px) saturate(180%);backdrop-filter:blur(20px) saturate(180%);
  border-radius:16px;padding:14px 18px;color:var(--muted);
  box-shadow:0 14px 34px -6px rgba(12,12,14,.08),0 0 0 1px rgba(12,12,14,.04);
  font-size:11px;letter-spacing:.14em;text-transform:uppercase;font-weight:500
}
.float-note b{
  display:block;color:var(--ink);font-size:20px;letter-spacing:-.02em;margin-top:4px;
  font-weight:500;font-family:var(--serif);font-style:normal;text-transform:none
}

/* Phone — used only in page-hero contexts / non-hero product stages */
.phone{
  position:absolute;
  right:calc(50% - 160px);bottom:20px;
  width:320px;height:600px;
  border:8px solid var(--ink);border-radius:48px;
  background:linear-gradient(160deg,#1F1D1A 0%,#0A0908 100%);
  box-shadow:var(--shadow-lg);
  padding:32px 24px;color:var(--cream)
}
.phone:before{
  content:"";position:absolute;top:14px;left:50%;transform:translateX(-50%);
  width:88px;height:24px;border-radius:99px;background:#000
}
.phone-head{
  margin-top:40px;display:flex;align-items:center;justify-content:space-between;
  font-family:var(--serif);font-style:italic;font-weight:400;font-size:16px
}
.avatar{
  width:38px;height:38px;border-radius:12px;
  background:rgba(198,174,126,.16);border:1px solid rgba(198,174,126,.20);
  display:grid;place-items:center;font-weight:500;font-size:13px;color:var(--champagne)
}
.phone-label{margin-top:60px;text-align:center;color:rgba(244,238,225,.5);font-size:12px;font-weight:500;letter-spacing:.12em;text-transform:uppercase}
.phone-amount{
  text-align:center;font-family:var(--serif);
  font-size:42px;font-weight:400;letter-spacing:-.03em;
  margin-top:8px;color:var(--cream)
}
.quick{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-top:36px}
.quick span{
  height:46px;border-radius:12px;
  background:rgba(244,238,225,.06);
  border:1px solid rgba(244,238,225,.09);
  display:grid;place-items:center;font-weight:500;font-size:15px;color:var(--cream)
}
.tx{
  display:flex;justify-content:space-between;gap:14px;
  padding:12px 14px;border-radius:12px;margin-top:8px;
  background:rgba(244,238,225,.04);
  font-weight:450;font-size:12px;color:rgba(244,238,225,.72)
}
.tx b{color:var(--champagne);font-weight:500;font-variant-numeric:tabular-nums}

/* ---------- MONEY / WALLET ---------- */
.money-layout{
  display:grid;grid-template-columns:.9fr 1.1fr;gap:80px;align-items:center
}
.wallet-board{
  border-radius:24px;
  background:rgba(251,247,236,.85);
  -webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);
  padding:26px;
  box-shadow:0 16px 36px -10px rgba(12,12,14,.06),0 0 0 1px rgba(12,12,14,.04);
  border:1px solid rgba(12,12,14,.07);
  display:grid;gap:12px
}
.total-panel{
  border-radius:18px;
  background:var(--ink);
  color:var(--cream);padding:32px;min-height:220px;
  display:flex;flex-direction:column;justify-content:space-between;
  position:relative;overflow:hidden
}
.total-panel:before{
  content:"";position:absolute;inset:0;
  background:radial-gradient(400px 200px at 100% 0%,rgba(198,174,126,.14),transparent 60%);
  pointer-events:none
}
.total-panel span{color:rgba(244,238,225,.55);font-size:11px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;position:relative}
.amount-xl{
  font-family:var(--serif);
  font-size:clamp(48px,4.6vw,76px);
  letter-spacing:-.03em;line-height:1;font-weight:400;
  position:relative
}
.wallet-row{
  display:grid;grid-template-columns:1fr auto;gap:16px;align-items:center;
  padding:20px 22px;border-radius:14px;background:var(--cream);
  border:1px solid var(--line)
}
.wallet-row strong{font-family:var(--serif);font-size:20px;letter-spacing:-.01em;font-weight:400}
.wallet-row b{font-size:15px;font-weight:500;color:var(--muted);font-variant-numeric:tabular-nums}

/* ---------- STICKY CURRENCIES ---------- */
.sticky{min-height:170vh;background:var(--ink);color:var(--cream)}
.sticky .sticky-inner{
  position:sticky;top:68px;
  min-height:calc(100svh - 68px);
  display:grid;align-items:center;
  padding:80px 0
}
.sticky .copy{color:rgba(244,238,225,.65)}
.currency-grid{
  margin-top:60px;display:grid;grid-template-columns:repeat(3,1fr);gap:16px
}
.currency-card{
  min-height:220px;border-radius:20px;padding:26px;
  background:rgba(244,238,225,.04);
  -webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);
  border:1px solid rgba(244,238,225,.09);
  display:flex;flex-direction:column;justify-content:space-between;
  transition:transform .35s var(--ease),background .35s var(--ease),border-color .35s var(--ease),box-shadow .35s var(--ease);
  position:relative
}
.currency-card:hover{
  transform:translateY(-4px);
  background:rgba(244,238,225,.07);
  border-color:rgba(198,174,126,.36);
  box-shadow:0 20px 40px -10px rgba(0,0,0,.45),0 0 24px rgba(198,174,126,.12)
}
.currency-card span{color:rgba(244,238,225,.5);font-weight:500;font-size:11px;letter-spacing:.14em;text-transform:uppercase}
.currency-card strong{font-family:var(--serif);font-size:clamp(36px,3.4vw,52px);letter-spacing:-.03em;font-weight:400}

/* ---------- STORY GRID ---------- */
.story-grid{
  display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:center
}
.cinema-card{
  min-height:520px;border-radius:28px;
  background:linear-gradient(155deg,#1B1917 0%,#0A0908 100%);
  position:relative;overflow:hidden;
  border:1px solid rgba(255,255,255,.04);
  display:flex;align-items:center;justify-content:center
}
.cinema-card .gold-card{
  width:min(400px,75%);
  transform:rotate(-4deg)
}
.route-list{display:grid;gap:10px;margin-top:36px}
.route-item{
  display:grid;grid-template-columns:1fr auto auto;gap:18px;align-items:center;
  padding:18px 22px;border-radius:14px;
  background:rgba(244,238,225,.04);
  border:1px solid rgba(244,238,225,.08);
  font-size:15px;font-weight:450
}
.route-item small{color:rgba(244,238,225,.55);font-size:12px;font-weight:450;display:block;margin-top:4px}
.route-item b{color:var(--champagne);font-weight:500;font-family:var(--serif);font-size:18px}
.check{
  color:var(--champagne);font-size:12px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;
  display:inline-flex;align-items:center;gap:6px
}
.check:before{
  content:"";display:inline-block;width:6px;height:6px;border-radius:999px;
  background:var(--champagne);box-shadow:0 0 8px var(--champagne);
  animation:statusDotPulse 2.4s ease-in-out infinite
}
@keyframes statusDotPulse{
  0%,100%{opacity:.6;transform:scale(.9)}
  50%{opacity:1;transform:scale(1.25);box-shadow:0 0 12px var(--champagne)}
}

/* ---------- PEOPLE ---------- */
.people-scene{
  margin-top:60px;display:grid;grid-template-columns:1fr auto 1fr;gap:28px;align-items:center
}
.person-card{
  min-height:320px;border-radius:24px;overflow:hidden;
  background:linear-gradient(155deg,#1B1917 0%,#0A0908 100%);
  color:var(--cream);padding:32px;
  display:flex;flex-direction:column;justify-content:flex-end;
  border:1px solid rgba(255,255,255,.06);
  box-shadow:var(--shadow-md)
}
.person-card.light-person{
  background:linear-gradient(155deg,#FBF7EC 0%,#E7D9BA 100%);
  color:var(--ink);
  border-color:var(--line)
}
.person-card h3{margin:0;font-family:var(--serif);font-size:30px;letter-spacing:-.03em;font-weight:400}
.person-card p{margin:8px 0 0;font-size:14px;opacity:.65}
.send-pill{
  border-radius:999px;background:var(--ink);color:var(--cream);
  padding:18px 26px;font-family:var(--serif);font-style:italic;font-size:19px;font-weight:400;
  white-space:nowrap;
  border:1px solid var(--line-dark);
  animation:sendPulse 3s ease-in-out infinite;
  cursor:pointer;
  transition:transform .35s var(--ease),box-shadow .35s var(--ease)
}
.send-pill:hover{
  transform:translateY(-2px) scale(1.05);
  box-shadow:0 12px 30px rgba(12,12,14,.35),0 0 24px rgba(198,174,126,.45)
}
@keyframes sendPulse{
  0%,100%{box-shadow:0 4px 16px rgba(12,12,14,.2),0 0 0 0 rgba(198,174,126,0)}
  50%{box-shadow:0 8px 24px rgba(12,12,14,.3),0 0 18px rgba(198,174,126,.35);transform:translateY(-1px) scale(1.015)}
}

/* ---------- CONVERTER ---------- */
.converter{
  margin-top:56px;display:grid;grid-template-columns:1fr auto 1fr;gap:16px;align-items:stretch
}
.convert-box{
  border-radius:22px;
  background:rgba(251,247,236,.85);
  -webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);
  padding:32px;
  box-shadow:0 14px 34px -8px rgba(12,12,14,.06);
  border:1px solid rgba(12,12,14,.07);
  text-align:left;display:flex;flex-direction:column;justify-content:center;
  transition:transform .3s var(--ease),box-shadow .3s var(--ease),border-color .3s var(--ease)
}
.convert-box:hover{
  transform:translateY(-2px);
  box-shadow:0 20px 40px -10px rgba(12,12,14,.09);
  border-color:rgba(166,107,43,.3)
}
.convert-box span{display:block;color:var(--muted);font-weight:500;font-size:11px;letter-spacing:.14em;text-transform:uppercase}
.convert-box strong{display:block;font-family:var(--serif);font-size:clamp(36px,4vw,60px);letter-spacing:-.03em;margin-top:14px;font-weight:400}
.arrow{
  font-size:28px;font-weight:300;color:var(--muted-2);display:grid;place-items:center;font-family:var(--serif);
  transition:transform .35s var(--ease),color .35s var(--ease)
}
.converter:hover .arrow{
  transform:translateX(8px) scale(1.18);
  color:var(--copper)
}

/* ---------- CHECKOUT ---------- */
.checkout{
  max-width:820px;margin:56px auto 0;
  border-radius:22px;
  background:rgba(251,247,236,.88);
  -webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);
  padding:36px;
  box-shadow:0 18px 42px -10px rgba(12,12,14,.07),0 0 0 1px rgba(12,12,14,.04);
  border:1px solid rgba(12,12,14,.07);
  text-align:left
}
.checkout-top{
  display:flex;align-items:center;justify-content:space-between;gap:24px;
  border-bottom:1px solid var(--line);padding-bottom:20px
}
.checkout-top strong{font-family:var(--serif);font-size:20px;font-weight:400;letter-spacing:-.02em}
.checkout-line{
  display:flex;justify-content:space-between;padding:16px 0;
  border-bottom:1px solid var(--line);font-size:15px
}
.checkout-line:last-child{border-bottom:none}
.checkout-line span{color:var(--muted)}
.checkout-line b{font-weight:500;font-variant-numeric:tabular-nums}

/* ---------- FUND FLOW ---------- */
.fund-flow{margin-top:56px;display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.fund-step{
  border-radius:22px;
  background:rgba(251,247,236,.82);
  -webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);
  padding:32px;min-height:200px;
  border:1px solid rgba(12,12,14,.07);
  position:relative;
  transition:transform .35s var(--ease),box-shadow .35s var(--ease),border-color .35s var(--ease)
}
.fund-step:hover{
  transform:translateY(-4px);
  box-shadow:0 18px 38px -10px rgba(12,12,14,.08);
  border-color:var(--copper)
}
.fund-step:before{
  content:"";position:absolute;left:32px;top:32px;
  width:6px;height:6px;border-radius:99px;background:var(--copper)
}
.fund-step h3{margin:24px 0 8px;font-family:var(--serif);font-size:26px;letter-spacing:-.02em;font-weight:400}
.fund-step p{margin:0;color:var(--muted);font-size:15px;line-height:1.55}

/* ---------- BRAND STATEMENT ---------- */
.brand-statement{
  min-height:70vh;display:grid;place-items:center;text-align:center;
  background:var(--ink);color:var(--cream);
  padding:100px 0;
  position:relative;overflow:hidden
}
.brand-statement:before{
  content:"";position:absolute;inset:0;
  background:radial-gradient(700px 400px at 50% 40%,rgba(198,174,126,.10),transparent 65%);
  pointer-events:none
}
.brand-statement .display{margin-left:auto;margin-right:auto;position:relative;max-width:22ch}
.brand-statement .lead{color:rgba(244,238,225,.68);position:relative}

/* ---------- SECURITY ---------- */
.security-composition{margin-top:56px;display:grid;grid-template-columns:1.1fr .9fr;gap:32px}
.security-panel{
  border-radius:24px;
  background:var(--ink);
  color:var(--cream);padding:40px;min-height:380px;
  display:flex;flex-direction:column;justify-content:space-between;
  border:1px solid var(--line-dark);
  box-shadow:var(--shadow-md)
}
.security-panel h3{margin:0;font-family:var(--serif);font-size:32px;letter-spacing:-.028em;font-weight:400}
.controls{display:grid;gap:8px}
.control{
  padding:16px 22px;border-radius:999px;
  background:rgba(244,238,225,.04);color:var(--cream);
  border:1px solid rgba(244,238,225,.08);
  font-weight:450;font-size:14px;
  display:flex;justify-content:space-between;align-items:center
}
.control b{color:var(--champagne);font-weight:500;font-size:13px;letter-spacing:.06em;text-transform:uppercase}

/* ---------- APP STRIP ---------- */
.app-strip{display:flex;gap:24px;justify-content:center;align-items:flex-end;margin-top:60px;flex-wrap:wrap}
.mini-phone{
  width:200px;height:400px;
  border:7px solid var(--ink);border-radius:38px;
  background:linear-gradient(160deg,#1F1D1A 0%,#0A0908 100%);
  padding:26px;color:var(--cream);
  position:relative;overflow:hidden
}
.mini-phone:before{
  content:"";position:absolute;top:10px;left:50%;transform:translateX(-50%);
  width:64px;height:18px;border-radius:99px;background:#000
}
.mini-phone:nth-child(1){animation:miniFloatA 5s ease-in-out infinite}
.mini-phone:nth-child(2){animation:miniFloatB 6s ease-in-out infinite .5s}
.mini-phone:nth-child(3){animation:miniFloatA 5.5s ease-in-out infinite 1s}
@keyframes miniFloatA{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-8px)}
}
@keyframes miniFloatB{
  0%,100%{transform:translateY(-24px)}
  50%{transform:translateY(-34px)}
}
.mini-phone h3{margin:40px 0 8px;font-family:var(--serif);font-size:22px;letter-spacing:-.02em;font-weight:400;color:var(--cream)}
.mini-phone p{margin:0;font-family:var(--serif);font-size:20px;font-weight:400;letter-spacing:-.02em;color:var(--champagne)}

/* ---------- FINAL CTA ---------- */
.final{
  min-height:70vh;display:grid;place-items:center;
  background:var(--cream);color:var(--ink);text-align:center;padding:100px 0;
  position:relative;overflow:hidden
}
.final:before{
  content:"";position:absolute;inset:0;
  background:radial-gradient(700px 400px at 50% 50%,rgba(198,174,126,.18),transparent 65%);
  pointer-events:none
}
.final .display{margin:auto;position:relative;max-width:20ch}
.final .copy{color:var(--muted);position:relative}
.final .actions{position:relative}

/* ---------- PAGE HERO (subpages) ---------- */
.page-hero{
  min-height:calc(64svh - 68px);
  display:grid;align-items:center;padding:88px 0;
  background:var(--cream);color:var(--ink)
}
.page-hero.dark-page{background:var(--ink);color:var(--cream)}
.page-hero.ivory-page{background:var(--paper)}
.page-grid{display:grid;grid-template-columns:.95fr 1.05fr;gap:64px;align-items:center}
.page-art{
  position:relative;min-height:440px;border-radius:28px;overflow:hidden;
  background:linear-gradient(148deg,var(--cream-2),var(--paper));
  border:1px solid var(--line);
  display:flex;align-items:center;justify-content:center
}
.dark-page .page-art{
  background:linear-gradient(148deg,#1B1917,#0A0908);
  border-color:rgba(255,255,255,.06)
}
.page-art .phone{right:calc(50% - 140px);bottom:-60px;transform:scale(.82)}
.page-art .gold-card{position:relative;width:min(360px,68%)}

/* ---------- INFO / HELP ---------- */
.info-list{display:grid;gap:12px;margin-top:44px}
.info-row{
  border-radius:20px;
  background:rgba(251,247,236,.82);
  -webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);
  padding:26px;
  border:1px solid rgba(12,12,14,.07);
  transition:transform .3s var(--ease),box-shadow .3s var(--ease),border-color .3s var(--ease)
}
.info-row:hover{
  transform:translateY(-3px);
  box-shadow:0 14px 32px -8px rgba(12,12,14,.07);
  border-color:rgba(166,107,43,.35)
}
.info-row h3{font-family:var(--serif);font-size:24px;letter-spacing:-.02em;margin:0 0 6px;font-weight:400}
.info-row p{margin:0;color:var(--muted);line-height:1.6;font-size:15px}
.dark .info-row,.midnight .info-row{
  background:rgba(244,238,225,.04);border:1px solid rgba(244,238,225,.08)
}
.dark .info-row p,.midnight .info-row p{color:rgba(244,238,225,.65)}

.help-search{
  height:58px;border-radius:999px;background:var(--paper);
  border:1px solid var(--line-strong);
  display:flex;align-items:center;padding:0 24px;color:var(--muted-2);
  font-size:16px;margin:40px auto 0;max-width:680px
}
.help-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:48px}

/* ---------- LEGAL ---------- */
.legal-shell{background:var(--paper);padding:96px 0}
.legal-layout{max-width:720px;margin:auto}
.legal-layout h1{font-family:var(--serif);font-size:clamp(40px,4.4vw,60px);line-height:1.02;letter-spacing:-.03em;font-weight:400}
.legal-layout h2{font-family:var(--serif);font-size:24px;margin-top:44px;letter-spacing:-.02em;font-weight:400}
.legal-layout p,.legal-layout li{font-size:16px;line-height:1.75;color:#4A4640}

/* ---------- FOOTER ---------- */
.footer{background:var(--cream);color:var(--ink);padding:96px 0 48px;border-top:1px solid var(--line)}
.footer-grid{
  width:min(calc(100% - var(--gutter)*2),var(--max));margin:auto;
  display:grid;grid-template-columns:1.6fr repeat(4,1fr);gap:44px
}
.footer-brand{display:flex!important;align-items:center;gap:12px}
.footer-brand img{width:122px;height:auto;object-fit:contain}
.footer a{display:block;margin:8px 0;color:var(--ink);opacity:.65;font-size:14px;transition:opacity .15s var(--ease)}
.footer a:hover{opacity:1}
.footer h3{font-size:11px;letter-spacing:.20em;text-transform:uppercase;margin:0 0 16px;color:var(--muted);font-weight:600}
.footer p{color:var(--muted);line-height:1.6;font-size:14px;margin:16px 0 0;max-width:32ch}
.legal-note{
  width:min(calc(100% - var(--gutter)*2),1120px);margin:56px auto 0;
  padding-top:32px;border-top:1px solid var(--line);
  font-size:11.5px;line-height:1.75;color:var(--muted)
}
.legal-note p{margin:0 0 14px;max-width:none}

/* ---------- REVEAL & ANIMATIONS ---------- */
.reveal{
  opacity:0;transform:translateY(24px) scale(.99);
  transition:opacity .85s var(--ease),transform .85s var(--ease);
  will-change:transform,opacity
}
.reveal.in{opacity:1;transform:none}

/* Staggered children */
.reveal-child{
  opacity:0;transform:translateY(18px) scale(.99);
  transition:opacity .75s var(--ease) var(--delay,0ms),transform .75s var(--ease) var(--delay,0ms);
  will-change:transform,opacity
}
.reveal-child.in{opacity:1;transform:none}

/* Split text word-by-word (headings) */
.hero-title .word,.display .word,.section-title .word{
  display:inline-block;
  opacity:0;
  transform:translateY(0.4em);
  transition:opacity .7s var(--ease),transform .7s var(--ease);
  transition-delay:calc(var(--i,0) * 55ms)
}
.reveal.in .hero-title .word,
.reveal.in .display .word,
.reveal.in .section-title .word,
.in > .hero-title .word,
.in > .display .word,
.in > .section-title .word{
  opacity:1;transform:none
}
/* Non-reveal containers get titles animated too */
.hero-title[data-split].in .word,
.display[data-split].in .word,
.section-title[data-split].in .word{opacity:1;transform:none}
/* Fallback when parent has no reveal wrapper */
section .hero-title[data-split] .word,
section .display[data-split] .word,
section .section-title[data-split] .word{opacity:0}
section .hero-title[data-split].in .word,
section .display[data-split].in .word,
section .section-title[data-split].in .word{opacity:1;transform:none;transition:opacity .7s var(--ease) calc(var(--i,0) * 55ms),transform .7s var(--ease) calc(var(--i,0) * 55ms)}

/* Scroll progress bar */
.scroll-progress{
  position:absolute;left:0;right:0;bottom:-1px;height:2.5px;
  background:linear-gradient(90deg,var(--copper),var(--champagne),var(--yellow));
  box-shadow:0 0 12px rgba(198,174,126,.65),0 0 3px rgba(255,199,56,.8);
  transform:scaleX(0);transform-origin:0 50%;
  transition:transform .08s linear;
  z-index:2
}

/* Header hide on down-scroll */
.site-header{transition:transform .35s var(--ease),background .3s var(--ease),border-color .3s var(--ease)}
.site-header.hide{transform:translateY(-100%)}

/* Card visual: smooth parallax reset */
.hero .product-stage{will-change:transform}
.hero .card-visual{transition:transform .5s var(--ease);will-change:transform}

/* Buttons get transform transition already; add willChange */
.btn,.pill{will-change:transform}

/* Subtle float animation for hero card */
@keyframes floatSlow{
  0%,100%{transform:translateY(0) rotate(-4deg)}
  50%{transform:translateY(-8px) rotate(-4deg)}
}
.hero .card-visual{animation:floatSlow 6s ease-in-out infinite}
@media (hover:hover){
  .hero .product-stage:hover .card-visual{animation:none}
}

/* Marquee for currencies-like strips (optional utility) */
.marquee{display:flex;overflow:hidden;gap:48px;mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);-webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}
.marquee-track{display:flex;gap:48px;animation:marquee 28s linear infinite;flex-shrink:0}
@keyframes marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* Number counter styling */
[data-count]{font-variant-numeric:tabular-nums}

/* Card hover lift */
.currency-card,.info-row,.fund-step,.wallet-row{transition:transform .35s var(--ease),box-shadow .35s var(--ease),background .35s var(--ease),border-color .35s var(--ease)}

/* Link hover underline animation */
.footer a,.nav-links a{position:relative}
.footer a:after,.nav-links a:hover:after{content:"";position:absolute;left:0;bottom:-2px;height:1px;background:currentColor;width:0;transition:width .35s var(--ease)}
.footer a:hover:after{width:100%}

/* ---------- PLAN STAGE (Plan Evolution) ---------- */
.plan-stage{background:var(--cream);position:relative}
.plan-stage-inner{position:relative}
.plan-stage-panel{
  min-height:100vh;
  display:grid;align-items:center;
  padding:120px 0;
  position:relative;overflow:hidden;
  border-top:1px solid var(--line)
}
.plan-stage-panel .wrap{position:relative;z-index:2;max-width:900px}
.plan-stage-panel .section-title{margin-top:8px}
.plan-stage-panel .copy{max-width:520px;margin-top:24px}
.plan-price{
  display:flex;align-items:baseline;gap:8px;margin-top:40px;
  font-family:var(--serif)
}
.plan-price-amount{font-size:clamp(56px,6vw,86px);letter-spacing:-.04em;font-weight:400;line-height:1}
.plan-price-cycle{font-size:20px;color:var(--muted)}
.plan-highlights{
  list-style:none;padding:0;margin:36px 0 0;
  display:grid;gap:12px;max-width:520px
}
.plan-highlights li{
  padding:16px 0;border-top:1px solid var(--line);
  font-size:16px;color:var(--ink);
  display:flex;align-items:center;gap:14px
}
.plan-highlights li:before{
  content:"";width:6px;height:6px;border-radius:99px;
  background:var(--copper);flex-shrink:0
}
.plan-stage-standard{background:var(--cream)}
.plan-stage-plus{
  background:var(--paper);
  color:var(--ink)
}
.plan-stage-plus:before{
  content:"";position:absolute;inset:0;
  background:radial-gradient(700px 400px at 85% 20%,rgba(198,174,126,.24),transparent 65%);
  pointer-events:none
}
.plan-stage-premium{
  background:var(--ink);color:var(--cream)
}
.plan-stage-premium:before{
  content:"";position:absolute;inset:0;
  background:
    radial-gradient(900px 500px at 78% 20%,rgba(255,212,74,.15),transparent 65%),
    radial-gradient(700px 400px at 15% 90%,rgba(198,174,126,.10),transparent 65%);
  pointer-events:none
}
.plan-stage-premium .copy,
.plan-stage-premium .plan-highlights li{color:rgba(244,238,225,.8)}
.plan-stage-premium .plan-highlights li{border-top-color:rgba(244,238,225,.10)}
.plan-stage-premium .plan-highlights li:before{background:var(--yellow)}
.plan-stage-premium .plan-price-cycle{color:rgba(244,238,225,.55)}
.plan-stage-premium .eyebrow{color:var(--yellow)}
.plan-stage-premium:after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(120deg,transparent 40%,rgba(255,212,74,.06) 50%,transparent 60%);
  animation:yellowLight 8s ease-in-out infinite;
  pointer-events:none;mix-blend-mode:screen
}

/* ---------- PLANS TABLE ---------- */
.plans-table{
  margin-top:56px;
  border-radius:20px;background:var(--paper);
  border:1px solid var(--line);
  overflow:hidden
}
.plans-table table{width:100%;border-collapse:collapse;font-size:15px}
.plans-table thead th{
  padding:22px 20px;text-align:left;
  font-family:var(--sans);font-weight:600;font-size:13px;
  letter-spacing:.14em;text-transform:uppercase;
  color:var(--muted);
  border-bottom:1px solid var(--line);
  background:var(--cream-2)
}
.plans-table thead th.col-premium{color:var(--copper)}
.plans-table tbody tr{border-bottom:1px solid var(--line)}
.plans-table tbody tr:last-child{border-bottom:none}
.plans-table tbody td{padding:18px 20px;vertical-align:middle;color:var(--ink)}
.plans-table tbody td:first-child{color:var(--muted);font-weight:450}
.plans-table tbody td:nth-child(2),
.plans-table tbody td:nth-child(3),
.plans-table tbody td:nth-child(4){font-weight:500;font-variant-numeric:tabular-nums}
.plans-table tbody tr.row-group td{
  background:var(--cream);color:var(--muted);
  font-family:var(--sans);font-weight:600;font-size:12px;
  letter-spacing:.16em;text-transform:uppercase;
  padding:14px 20px
}
.plans-table-note{
  padding:20px;font-size:13px;color:var(--muted);
  border-top:1px solid var(--line);background:var(--cream);margin:0;line-height:1.6
}
.plans-table-note a{color:var(--copper);border-bottom:1px solid transparent;transition:border-color .2s}
.plans-table-note a:hover{border-bottom-color:var(--copper)}

/* ---------- AVAILABILITY MATRIX ---------- */
.country-select-wrap{
  margin-top:44px;
  display:inline-flex;align-items:center;gap:14px;
  padding:14px 22px;
  background:var(--paper);border:1px solid var(--line-strong);border-radius:999px
}
.country-select-label{font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);font-weight:600}
.country-select{
  -webkit-appearance:none;appearance:none;
  border:none;background:transparent;
  font-family:var(--sans);font-size:15px;font-weight:500;color:var(--ink);cursor:pointer;
  padding-right:22px;
  background-image:linear-gradient(45deg,transparent 50%,var(--ink) 50%),linear-gradient(135deg,var(--ink) 50%,transparent 50%);
  background-position:calc(100% - 10px) 50%,calc(100% - 5px) 50%;
  background-size:5px 5px,5px 5px;background-repeat:no-repeat
}
.avail-matrix{
  border-radius:20px;background:var(--paper);
  border:1px solid var(--line);overflow:hidden
}
.avail-legend{
  padding:22px 24px;border-bottom:1px solid var(--line);
  display:flex;flex-wrap:wrap;gap:20px;
  background:var(--cream-2)
}
.avail-legend span{display:inline-flex;align-items:center;gap:8px;font-size:13px;color:var(--muted);font-weight:500}
.avail-legend .dot{width:8px;height:8px;border-radius:99px;display:inline-block}
.dot.av{background:#4CB782}
.dot.cs{background:var(--copper)}
.dot.pg{background:var(--champagne)}
.dot.na{background:#B8B4AA}
.avail-list{display:grid}
.avail-row{
  display:flex;align-items:center;justify-content:space-between;
  padding:20px 24px;border-bottom:1px solid var(--line);
  font-size:16px
}
.avail-row:last-child{border-bottom:none}
.avail-name{color:var(--ink);font-weight:450}
.avail-status{
  display:inline-flex;align-items:center;gap:10px;
  font-size:13px;font-weight:500;color:var(--muted)
}
.avail-status:before{content:"";width:8px;height:8px;border-radius:99px;background:currentColor}
.avail-status.av{color:#3F9E6E}
.avail-status.cs{color:var(--copper)}
.avail-status.pg{color:#8B6B2E}
.avail-status.na{color:#8A857A}

/* ---------- WAITLIST ---------- */
.waitlist-shell{min-height:calc(100svh - 68px);display:grid;place-items:center;padding:80px 0;background:var(--cream)}
.waitlist-wrap{width:min(calc(100% - var(--gutter)*2),640px);margin:auto}
.waitlist-wrap .display{font-size:clamp(52px,5vw,84px)}
.waitlist-form{
  margin-top:56px;
  background:var(--paper);border:1px solid var(--line);border-radius:24px;
  padding:36px;
  display:grid;gap:28px
}
.waitlist-step{display:grid;gap:10px}
.waitlist-label{font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);font-weight:600}
.waitlist-form select,
.waitlist-form input{
  width:100%;height:52px;padding:0 18px;
  border:1px solid var(--line-strong);border-radius:12px;
  background:var(--cream);color:var(--ink);
  font-family:var(--sans);font-size:16px;
  transition:border-color .2s var(--ease),background .2s var(--ease);
  -webkit-appearance:none;appearance:none
}
.waitlist-form select{
  background-image:linear-gradient(45deg,transparent 50%,var(--ink) 50%),linear-gradient(135deg,var(--ink) 50%,transparent 50%);
  background-position:calc(100% - 18px) 50%,calc(100% - 13px) 50%;
  background-size:5px 5px,5px 5px;background-repeat:no-repeat
}
.waitlist-form select:focus,
.waitlist-form input:focus{outline:none;border-color:var(--ink);background:#fff}
.waitlist-actions{display:grid;gap:16px;margin-top:8px}
.waitlist-actions .btn{width:100%;min-height:54px}
.waitlist-note{font-size:12.5px;color:var(--muted);line-height:1.6;margin:0}
.waitlist-success{display:none;text-align:center;padding:32px 0}
.waitlist-success.on{display:block}
.waitlist-form.done{display:none}

/* ==========================================================================
   GOYO MARKETING UI KIT — mirrors real iOS app (Neobank theme + tokens)
   ========================================================================== */

/* -- App-style Balance Card (used in marketing hero/compte mockups) -- */
.app-balance-card{
  width:min(360px,92%);
  border-radius:20px;padding:24px;
  background:
    radial-gradient(400px 200px at 80% 0%,rgba(79,225,235,.22),transparent 65%),
    linear-gradient(155deg,var(--app-primary) 0%,#0F3AAE 60%,#050B22 100%);
  color:#fff;
  box-shadow:0 32px 80px rgba(10,13,30,.35),inset 0 1px 0 rgba(255,255,255,.10);
  font-family:var(--sans);
  position:relative;overflow:hidden
}
.app-balance-card:before{
  content:"";position:absolute;top:-40%;right:-20%;width:280px;height:280px;
  background:radial-gradient(circle,rgba(255,255,255,.10),transparent 60%);
  pointer-events:none
}
.app-balance-card .label{
  display:flex;align-items:center;justify-content:space-between;
  font-size:13px;font-weight:500;color:rgba(255,255,255,.72);letter-spacing:.01em
}
.app-balance-card .label .cur-pill{
  display:inline-flex;align-items:center;gap:6px;
  background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.14);
  padding:5px 12px;border-radius:999px;font-size:12px;font-weight:600
}
.app-balance-card .label .cur-pill:after{content:"▾";opacity:.6;font-size:9px;margin-left:2px}
.app-balance-card .amount{
  margin-top:14px;
  font-size:44px;line-height:1;font-weight:700;letter-spacing:-.03em;
  font-variant-numeric:tabular-nums;
  font-family:'SF Pro Rounded','SF Rounded',var(--sans)
}
.app-balance-card .amount sub{
  font-size:60%;opacity:.72;font-weight:600;vertical-align:baseline
}
.app-balance-card .quick-row{
  margin-top:22px;display:grid;grid-template-columns:repeat(4,1fr);gap:10px
}
.app-balance-card .qa{
  display:flex;flex-direction:column;align-items:center;gap:6px;
  padding:10px 6px;border-radius:14px;
  background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.06);
  color:rgba(255,255,255,.94);font-size:10px;font-weight:600;letter-spacing:.01em;text-align:center
}
.app-balance-card .qa .qa-icon{
  width:28px;height:28px;border-radius:10px;
  background:linear-gradient(160deg,rgba(255,255,255,.20),rgba(255,255,255,.06));
  display:grid;place-items:center;font-size:14px;color:var(--app-accent);font-weight:700
}

/* -- App-style Transaction Row -- */
.app-tx{
  display:flex;align-items:center;gap:14px;
  padding:12px 14px;border-radius:16px;
  background:rgba(255,255,255,.14);
  border:1px solid rgba(255,255,255,.06);
  color:#fff;font-family:var(--sans);font-size:13px;
  transition:background .3s var(--ease),transform .3s var(--ease)
}
.app-tx .icon{
  width:38px;height:38px;border-radius:12px;
  background:linear-gradient(155deg,rgba(79,225,235,.34),rgba(255,255,255,.06));
  border:1px solid rgba(255,255,255,.14);
  display:grid;place-items:center;font-size:15px;font-weight:700;color:#fff;flex-shrink:0
}
.app-tx .main{flex:1;min-width:0}
.app-tx .title{font-size:14px;font-weight:600;line-height:1.2}
.app-tx .sub{display:flex;gap:8px;margin-top:3px;color:rgba(255,255,255,.62);font-size:11px}
.app-tx .sub .tag{padding:1px 7px;border-radius:99px;background:rgba(255,255,255,.10);font-weight:700;font-size:9.5px;letter-spacing:.05em;text-transform:uppercase}
.app-tx .amount{font-weight:700;font-size:14px;font-variant-numeric:tabular-nums;font-family:'SF Pro Rounded',var(--sans);white-space:nowrap}
.app-tx.credit .amount{color:var(--app-success)}
.app-tx.pending .amount{color:var(--app-warning)}
.app-tx.pending:after{
  content:"Attente";margin-left:6px;
  padding:2px 8px;border-radius:99px;background:rgba(255,194,70,.22);color:var(--app-warning);
  font-size:9.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase
}

/* -- App-style Smart Card, matched to the home hero card -- */
.app-card{
  width:min(360px,90%);aspect-ratio:1.586;border-radius:22px;
  padding:28px;color:var(--ink);position:relative;overflow:hidden;
  background:linear-gradient(140deg,#E7D9BA 0%,#C6AE7E 55%,#9B8358 100%);
  box-shadow:0 40px 80px rgba(12,12,14,.14),0 12px 28px rgba(12,12,14,.10),0 0 0 1px rgba(255,255,255,.04) inset;
  font-family:var(--sans)
}
.app-card:before{
  content:"";position:absolute;inset:0;
  background:
    radial-gradient(360px 200px at 15% -20%,rgba(255,255,255,.18),transparent 65%),
    radial-gradient(300px 200px at 100% 120%,rgba(0,0,0,.16),transparent 65%);
  pointer-events:none
}
.app-card:after{
  content:"";position:absolute;right:28px;top:28px;
  width:44px;height:34px;border-radius:6px;
  background:
    repeating-linear-gradient(90deg,rgba(0,0,0,.14) 0 5px,transparent 5px 9px),
    repeating-linear-gradient(0deg,rgba(0,0,0,.10) 0 5px,transparent 5px 9px),
    linear-gradient(135deg,#D9C89B 0%,#A88756 65%,#7A5E2E 100%);
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.15),inset 0 -1px 0 rgba(255,255,255,.18)
}
.app-card .app-card-logo{
  position:absolute;left:28px;top:28px;
  width:32px;height:auto;object-fit:contain;
  filter:brightness(.55) saturate(.8);
  opacity:.86
}
.app-card .app-card-wordmark{
  position:absolute;left:28px;bottom:24px;
  width:78px;height:auto;object-fit:contain;
  filter:none;opacity:.92
}
.app-card .status{
  display:none
}
.app-card .digits{
  position:absolute;right:28px;bottom:24px;
  font-family:var(--sans);font-size:13px;font-weight:500;letter-spacing:.15em;
  font-variant-numeric:tabular-nums;opacity:.85
}
.app-card .foot{
  display:none
}
.app-card.premium{background:linear-gradient(140deg,#E7D9BA 0%,#C6AE7E 55%,#9B8358 100%);color:var(--ink)}
.app-card.plus{background:linear-gradient(140deg,#E7D9BA 0%,#C6AE7E 55%,#9B8358 100%)}

/* -- App-style Wallet Chip (multi-currency) -- */
.wallet-chip{
  display:inline-flex;align-items:center;gap:12px;
  padding:14px 18px;border-radius:16px;
  background:var(--paper);border:1px solid var(--line);
  font-family:var(--sans);font-size:14px;font-weight:500;color:var(--ink)
}
.wallet-chip .cur{
  width:36px;height:36px;border-radius:12px;
  display:grid;place-items:center;
  font-family:var(--sans);font-weight:800;font-size:14px;color:#fff;
  background:linear-gradient(155deg,var(--app-primary),var(--app-accent))
}
.wallet-chip.wallet-usd .cur{background:linear-gradient(155deg,#1F5CE0,#4FE1EB)}
.wallet-chip.wallet-htg .cur{background:linear-gradient(155deg,#0A66C2,#173D86)}
.wallet-chip.wallet-eur .cur{background:linear-gradient(155deg,#5A2FB6,#9A6BFF)}
.wallet-chip .amount{font-variant-numeric:tabular-nums;font-weight:600;font-family:'SF Pro Rounded',var(--sans)}
.wallet-chip .status{margin-left:auto;font-size:11px;color:var(--muted);letter-spacing:.05em;text-transform:uppercase;font-weight:600}

/* -- App-style AvailabilityBadge -- */
.avail-badge{
  display:inline-flex;align-items:center;gap:6px;
  padding:3px 10px;border-radius:99px;
  font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase
}
.avail-badge.av{background:rgba(69,209,154,.14);color:#2C9970}
.avail-badge.cs{background:rgba(166,107,43,.14);color:var(--copper)}
.avail-badge.pg{background:rgba(198,174,126,.20);color:#8B6B2E}
.avail-badge.na{background:rgba(122,117,107,.14);color:var(--muted)}

/* ==========================================================================
   SIGNATURE ANIMATIONS
   ========================================================================== */

/* -- WALLET SPLIT — HTG central → USD + EUR reveal on scroll -- */
.wallet-split{
  position:relative;min-height:520px;
  display:grid;place-items:center
}
.wallet-split .ws-center{
  position:relative;z-index:3;
  transition:transform 1.1s var(--ease),opacity 1.1s var(--ease)
}
.wallet-split .ws-side{
  position:absolute;top:50%;
  transition:transform 1.1s var(--ease),opacity 1.1s var(--ease);
  opacity:0;z-index:2
}
.wallet-split .ws-usd{left:50%;transform:translate(-50%,-50%) scale(.85)}
.wallet-split .ws-eur{left:50%;transform:translate(-50%,-50%) scale(.85)}
.wallet-split.in .ws-center{transform:translateY(-8px) scale(.95)}
.wallet-split.in .ws-usd{opacity:1;transform:translate(calc(-50% - 220px),-50%) scale(.92)}
.wallet-split.in .ws-eur{opacity:1;transform:translate(calc(-50% + 220px),-50%) scale(.92)}
@media (max-width:720px){
  .wallet-split{min-height:600px}
  .wallet-split.in .ws-usd{transform:translate(-50%,calc(-50% - 200px)) scale(.85)}
  .wallet-split.in .ws-eur{transform:translate(-50%,calc(-50% + 200px)) scale(.85)}
}

/* -- MONEY LINE — SVG stroke draws + amount travels from sender to receiver -- */
.money-line{
  position:relative;padding:80px 0;
  display:grid;grid-template-columns:1fr auto 1fr;gap:32px;align-items:center;
  min-height:340px
}
.money-line .sender,.money-line .receiver{
  border-radius:20px;padding:22px;background:var(--paper);border:1px solid var(--line);
  min-height:200px;display:flex;flex-direction:column;justify-content:space-between
}
.money-line .avatar-lg{
  width:56px;height:56px;border-radius:99px;
  background:linear-gradient(160deg,var(--app-primary),var(--app-accent));
  color:#fff;display:grid;place-items:center;font-weight:800;font-size:22px
}
.money-line .name{font-family:var(--serif);font-size:26px;font-weight:400;letter-spacing:-.02em}
.money-line .status-line{font-size:13px;color:var(--muted);margin-top:6px}
.money-line .receiver.done .status-line{color:var(--app-success);font-weight:600}
.money-line .receiver.done .status-line:before{content:"✓ ";font-weight:800}
.money-line .track{
  position:relative;width:220px;height:3px;
  background:repeating-linear-gradient(90deg,var(--line-strong) 0 6px,transparent 6px 12px);
  border-radius:2px
}
.money-line .track:before{
  content:"";position:absolute;left:0;top:0;height:100%;width:0%;
  background:linear-gradient(90deg,var(--yellow),var(--copper));
  border-radius:2px;transition:width 1.6s var(--ease);
  box-shadow:0 0 12px rgba(255,199,56,.5)
}
.money-line.in .track:before{width:100%}
.money-line .traveler{
  position:absolute;left:0;top:50%;transform:translate(-50%,-50%);
  padding:9px 16px;border-radius:99px;background:var(--ink);color:var(--yellow);
  font-family:'SF Pro Rounded',var(--sans);font-weight:800;font-size:14px;
  letter-spacing:.01em;white-space:nowrap;
  box-shadow:0 8px 24px rgba(10,10,11,.28),0 0 0 2px rgba(255,199,56,.20);
  transition:left 1.6s var(--ease),opacity .4s var(--ease);
  opacity:0
}
.money-line.in .traveler{left:100%;opacity:1;transition:left 1.6s var(--ease) .1s,opacity .3s var(--ease) 0s}
.money-line.in .traveler.done{opacity:0;transition:opacity .3s var(--ease) 1.4s}
@media (max-width:720px){
  .money-line{grid-template-columns:1fr;gap:22px}
  .money-line .track{width:100%;height:2px}
  .money-line.in .traveler{left:100%}
}

/* -- BALANCE MORPH — amount cycles across HTG / USD / EUR characters -- */
.balance-morph{
  font-family:'SF Pro Rounded','SF Rounded',var(--sans);
  font-size:clamp(64px,7vw,120px);letter-spacing:-.04em;line-height:1;font-weight:700;
  font-variant-numeric:tabular-nums;
  display:inline-flex;align-items:baseline;gap:6px;
  color:var(--ink)
}
.balance-morph .cur{font-size:.5em;opacity:.6;font-weight:600}
.balance-morph .value{display:inline-block;min-width:6ch;transition:opacity .35s var(--ease),transform .35s var(--ease)}
.balance-morph.morphing .value{opacity:0;transform:translateY(-6px)}

/* -- PENDING → COMPLETED — transaction state visualization -- */
.pending-completed{
  display:grid;gap:16px;max-width:520px;margin:auto
}
.pc-state{
  padding:16px 20px;border-radius:16px;
  background:var(--paper);border:1px solid var(--line);
  display:flex;align-items:center;gap:14px;
  opacity:.4;transform:translateY(6px);
  transition:opacity .5s var(--ease),transform .5s var(--ease),background .5s var(--ease),border-color .5s var(--ease);
  font-family:var(--sans)
}
.pc-state .dot{
  width:14px;height:14px;border-radius:99px;
  background:var(--line);flex-shrink:0;
  transition:background .5s var(--ease),box-shadow .5s var(--ease)
}
.pc-state .lbl{flex:1;font-size:14px;font-weight:600;color:var(--muted)}
.pc-state .amt{font-family:'SF Pro Rounded',var(--sans);font-weight:600;font-variant-numeric:tabular-nums;font-size:14px}
.pc-state.on{opacity:1;transform:none}
.pc-state.on .lbl{color:var(--ink)}
.pc-state[data-state="available"].on .dot{background:var(--app-success);box-shadow:0 0 0 4px rgba(69,209,154,.14)}
.pc-state[data-state="pending"].on .dot{background:var(--app-warning);box-shadow:0 0 0 4px rgba(255,194,70,.16)}
.pc-state[data-state="pending"].on{background:rgba(255,194,70,.06);border-color:rgba(255,194,70,.30)}
.pc-state[data-state="completed"].on .dot{background:var(--app-success);box-shadow:0 0 0 4px rgba(69,209,154,.14)}
.pc-state[data-state="completed"].on .lbl:before{content:"✓ ";color:var(--app-success);font-weight:800}

/* -- SMART CARD FLOW — same card, 3 contexts stack -- */
.smart-card-flow{
  display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:44px
}
.scf-scene{
  padding:26px;border-radius:20px;background:var(--paper);border:1px solid var(--line);
  display:flex;flex-direction:column;gap:14px;
  transition:transform .35s var(--ease),box-shadow .35s var(--ease),border-color .35s var(--ease);
  position:relative;overflow:hidden
}
.scf-scene:before{
  content:"";position:absolute;inset:0;
  background:linear-gradient(120deg,transparent 30%,rgba(255,199,56,.10) 50%,transparent 70%);
  transform:translateX(-100%);
  transition:transform 1.2s var(--ease);
  pointer-events:none
}
.smart-card-flow.in .scf-scene:nth-child(1):before{animation:scfSweep 6s ease-in-out infinite 0s}
.smart-card-flow.in .scf-scene:nth-child(2):before{animation:scfSweep 6s ease-in-out infinite 2s}
.smart-card-flow.in .scf-scene:nth-child(3):before{animation:scfSweep 6s ease-in-out infinite 4s}
@keyframes scfSweep{
  0%,10%{transform:translateX(-100%)}
  40%,50%{transform:translateX(100%)}
  60%,100%{transform:translateX(100%)}
}
.scf-scene:hover{transform:translateY(-3px);box-shadow:var(--shadow-md);border-color:var(--copper)}
.scf-scene .context{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);font-weight:700}
.scf-scene .amount{
  font-family:'SF Pro Rounded',var(--sans);font-size:34px;font-weight:700;letter-spacing:-.03em;
  font-variant-numeric:tabular-nums;color:var(--ink)
}
.scf-scene .wallet-tag{
  display:inline-flex;align-items:center;gap:8px;
  padding:6px 12px;border-radius:99px;
  background:var(--cream);color:var(--ink);
  font-size:12px;font-weight:600;letter-spacing:.03em;width:fit-content
}
.scf-scene .wallet-tag:before{
  content:"";width:8px;height:8px;border-radius:99px;
  background:linear-gradient(155deg,var(--app-primary),var(--app-accent))
}
@media (max-width:720px){.smart-card-flow{grid-template-columns:1fr}}

/* -- CASH TO DIGITAL — abstract particle drift (subtle) -- */
.c2d{
  position:relative;height:180px;overflow:hidden;border-radius:20px;
  background:radial-gradient(600px 200px at 50% 100%,rgba(255,212,74,.10),transparent 65%),
             linear-gradient(180deg,var(--paper),var(--cream));
  border:1px solid var(--line);
  display:grid;place-items:center;font-family:var(--serif);font-size:26px;font-style:italic;color:var(--muted)
}
.c2d:after{
  content:"";position:absolute;inset:0;
  background:
    radial-gradient(4px 4px at 15% 80%,var(--yellow) 40%,transparent 41%),
    radial-gradient(3px 3px at 32% 60%,var(--copper) 40%,transparent 41%),
    radial-gradient(4px 4px at 55% 90%,var(--yellow) 40%,transparent 41%),
    radial-gradient(3px 3px at 78% 70%,var(--copper) 40%,transparent 41%),
    radial-gradient(4px 4px at 92% 88%,var(--yellow) 40%,transparent 41%);
  animation:c2dFloat 8s ease-in-out infinite;
  pointer-events:none
}
@keyframes c2dFloat{
  0%,100%{transform:translateY(0);opacity:.5}
  50%{transform:translateY(-24px);opacity:1}
}

/* ---------- HELP CENTER ---------- */
.help-search-box{
  position:relative;max-width:640px;margin:44px auto 0;
  background:var(--paper);border:1px solid var(--line-strong);
  border-radius:999px;
  transition:border-color .2s var(--ease),box-shadow .2s var(--ease)
}
.help-search-box:focus-within{border-color:var(--ink);box-shadow:var(--shadow-sm)}
.help-search-box input{
  width:100%;height:64px;padding:0 56px 0 26px;
  border:none;background:transparent;border-radius:999px;
  font-family:var(--sans);font-size:17px;color:var(--ink);
  outline:none
}
.help-search-icon{
  position:absolute;right:22px;top:50%;transform:translateY(-50%);
  font-size:22px;color:var(--muted);pointer-events:none
}
.help-search-hint{
  margin:16px auto 0;max-width:640px;text-align:center;font-size:13px;color:var(--muted)
}
.help-cats{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:44px}
.help-cat{
  padding:26px;border-radius:18px;background:var(--paper);
  border:1px solid var(--line);cursor:pointer;
  transition:transform .25s var(--ease),background .25s var(--ease),border-color .25s var(--ease)
}
.help-cat:hover{transform:translateY(-2px);border-color:var(--copper)}
.help-cat.on{background:var(--ink);color:var(--cream);border-color:var(--ink)}
.help-cat.on p{color:rgba(244,238,225,.68)}
.help-cat h3{font-family:var(--serif);font-size:22px;letter-spacing:-.02em;font-weight:400;margin:0}
.help-cat p{margin:6px 0 0;color:var(--muted);font-size:14px;line-height:1.5}
.help-articles{display:grid;gap:12px;margin-top:44px}
.help-article{
  display:block;padding:22px 24px;border-radius:14px;
  background:var(--paper);border:1px solid var(--line);
  cursor:pointer;
  transition:transform .2s var(--ease),background .2s var(--ease),border-color .2s var(--ease)
}
.help-article:hover{transform:translateY(-1px);background:#fff;border-color:var(--copper)}
.help-article h3{font-family:var(--serif);font-size:20px;letter-spacing:-.015em;font-weight:400;margin:0 0 6px}
.help-article p{margin:0;color:var(--muted);font-size:15px;line-height:1.55}
.help-article p a{color:var(--copper);border-bottom:1px solid transparent}
.help-article p a:hover{border-bottom-color:var(--copper)}
.help-article.hide{display:none}
.help-empty{text-align:center;color:var(--muted);margin-top:24px}

/* ---------- FEE TABLE (Tarification) ---------- */
.fee-table{display:grid;gap:24px}
.fee-cat{
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:20px;
  overflow:hidden
}
.fee-cat h3{
  margin:0;padding:20px 24px;
  font-family:var(--sans);font-size:12px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--muted);font-weight:600;
  background:var(--cream-2);
  border-bottom:1px solid var(--line)
}
.fee-row{
  display:flex;justify-content:space-between;align-items:center;gap:24px;
  padding:18px 24px;border-bottom:1px solid var(--line);font-size:15px
}
.fee-row:last-child{border-bottom:none}
.fee-row span:first-child{color:var(--muted);flex:1}
.fee-row span:last-child{color:var(--ink);text-align:right;font-variant-numeric:tabular-nums}
.fee-row b{color:var(--ink);font-weight:600}

/* ---------- HOMEPAGE PLANS TEASER ---------- */
.plans-teaser{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:56px}
.plans-teaser-card{
  padding:32px;border-radius:22px;
  background:rgba(251,247,236,.82);
  -webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);
  border:1px solid rgba(12,12,14,.07);
  display:flex;flex-direction:column;justify-content:space-between;
  min-height:280px;
  transition:transform .35s var(--ease),box-shadow .35s var(--ease),border-color .35s var(--ease)
}
.plans-teaser-card:hover{transform:translateY(-4px);box-shadow:0 18px 40px -10px rgba(12,12,14,.08);border-color:var(--copper)}
.plans-teaser-card.premium:hover{border-color:var(--yellow);box-shadow:0 22px 48px -10px rgba(0,0,0,.6),0 0 28px rgba(255,199,56,.14)}
.plans-teaser-card h3{font-family:var(--serif);font-size:32px;font-weight:400;letter-spacing:-.02em;margin:0}
.plans-teaser-card p{color:var(--muted);font-size:15px;line-height:1.55;margin:12px 0 0}
.plans-teaser-price{font-family:var(--serif);font-size:44px;font-weight:400;letter-spacing:-.03em;margin-top:32px;line-height:1}
.plans-teaser-price small{font-size:16px;color:var(--muted);margin-left:6px;font-family:var(--sans);letter-spacing:0}
.plans-teaser-card.premium{
  background:linear-gradient(155deg,#17171A 0%,#0C0C0E 100%);
  color:var(--cream);border:1px solid rgba(255,255,255,.10);position:relative;overflow:hidden;
  animation:borderGlowPulse 4.5s ease-in-out infinite
}
@keyframes borderGlowPulse{
  0%,100%{box-shadow:0 20px 48px -12px rgba(0,0,0,.6),0 0 0 1px rgba(255,212,74,.22),0 0 18px rgba(255,199,56,.06)}
  50%{box-shadow:0 24px 54px -10px rgba(0,0,0,.7),0 0 0 1.5px rgba(255,212,74,.48),0 0 32px rgba(255,199,56,.18)}
}
.plans-teaser-card.premium:before{content:"";position:absolute;inset:0;background:radial-gradient(400px 200px at 100% 0%,rgba(255,212,74,.15),transparent 60%);pointer-events:none}
.plans-teaser-card.premium p{color:rgba(244,238,225,.65)}
.plans-teaser-card.premium h3,.plans-teaser-card.premium .plans-teaser-price{position:relative}

/* ---------- YELLOW LIGHT (signature) ---------- */
@keyframes yellowLight{
  0%,100%{transform:translateX(-40%)}
  50%{transform:translateX(40%)}
}
.yellow-light{position:relative;overflow:hidden}
.yellow-light:before{
  content:"";position:absolute;inset:0;
  background:linear-gradient(115deg,transparent 40%,rgba(255,212,74,.14) 50%,transparent 60%);
  animation:yellowLight 7s ease-in-out infinite;
  pointer-events:none;mix-blend-mode:screen
}

/* ==========================================================================
   DARK THEME — aligné sur l'app Goyo (Neobank : midnight + cyan + yellow)
   Active via <body data-theme="dark">. Pour revenir au thème ivoire, retirer
   simplement l'attribut. Le fallback (pas d'attribut) reste l'ivoire premium.
   ========================================================================== */
body[data-theme="dark"]{
  color:#F4F0E4;
  background:#0A0D1E;
  /* Tokens propres au dark theme — champagne chaud + violet profond + cyan rare */
  --dk-bg:#0A0D1E;
  --dk-bg-2:#0D1024;
  --dk-surface:#14172E;
  --dk-surface-2:#1A1E3A;
  --dk-surface-3:#22264A;
  --dk-purple:#1A1745;
  --dk-blue-glow:rgba(31,92,224,.32);
  --dk-cyan-glow:rgba(79,225,235,.22);
  --dk-yellow-glow:rgba(255,199,56,.14);
  --dk-warm:#E8B978;       /* champagne chaud — équivalent copper de l'ivoire */
  --dk-copper:#C9946A;
  --dk-cyan-soft:#7BC8D2;
  --dk-line:rgba(244,240,228,.08);
  --dk-line-strong:rgba(244,240,228,.14);
  --dk-fg:#F4F0E4;
  --dk-fg-muted:rgba(244,240,228,.62);
  --dk-fg-dim:rgba(244,240,228,.42)
}
body[data-theme="dark"] .ivory{
  background:
    radial-gradient(900px 500px at 88% 10%,var(--dk-blue-glow),transparent 60%),
    radial-gradient(600px 400px at 8% 92%,var(--dk-yellow-glow),transparent 60%),
    var(--dk-bg);
  color:var(--dk-fg)
}
body[data-theme="dark"] .white{
  background:
    radial-gradient(800px 400px at 92% 0%,var(--dk-cyan-glow),transparent 60%),
    linear-gradient(180deg,var(--dk-surface) 0%,var(--dk-bg-2) 100%);
  color:var(--dk-fg)
}
body[data-theme="dark"] .sky{
  background:
    radial-gradient(700px 400px at 12% 10%,rgba(123,200,210,.16),transparent 60%),
    linear-gradient(180deg,var(--dk-surface) 0%,var(--dk-bg-2) 100%);
  color:var(--dk-fg)
}
body[data-theme="dark"] .dark{
  background:
    radial-gradient(1000px 500px at 78% 22%,var(--dk-blue-glow),transparent 60%),
    radial-gradient(700px 400px at 12% 85%,rgba(232,185,120,.10),transparent 65%),
    linear-gradient(180deg,#050813,var(--dk-purple));
  color:var(--dk-fg)
}
body[data-theme="dark"] .midnight{
  background:
    radial-gradient(900px 500px at 80% 20%,var(--dk-blue-glow),transparent 60%),
    radial-gradient(600px 400px at 15% 90%,rgba(232,185,120,.08),transparent 65%),
    #050813;
  color:var(--dk-fg)
}
body[data-theme="dark"] .copy,
body[data-theme="dark"] .lead{color:var(--dk-fg-muted)}
body[data-theme="dark"] .eyebrow{color:var(--dk-warm)}
body[data-theme="dark"] .dark .eyebrow,
body[data-theme="dark"] .midnight .eyebrow,
body[data-theme="dark"] .hero .eyebrow{color:var(--yellow)}
body[data-theme="dark"] .brand-statement .eyebrow{color:var(--yellow)}

body[data-theme="dark"] .site-header{
  background:rgba(10,13,30,.78);
  color:#F4F0E4;
  border-bottom-color:rgba(255,255,255,.06);
  -webkit-backdrop-filter:blur(24px) saturate(150%);
  backdrop-filter:blur(24px) saturate(150%)
}
body[data-theme="dark"] .site-header.scrolled{border-bottom-color:rgba(255,255,255,.10)}
body[data-theme="dark"] .brand,
body[data-theme="dark"] .footer-brand{color:#F4F0E4}
body[data-theme="dark"] .nav-links a{color:rgba(244,240,228,.6)}
body[data-theme="dark"] .nav-links a:hover,
body[data-theme="dark"] .nav-links a.active{color:#F4F0E4}
body[data-theme="dark"] .nav-links a.active:after{background:var(--yellow)}
body[data-theme="dark"] .locale{
  border-color:rgba(255,255,255,.18);
  color:#F4F0E4;
  background:rgba(255,255,255,.04)
}
body[data-theme="dark"] .locale:hover{background:rgba(255,255,255,.10)}

body[data-theme="dark"] .btn.yellow,
body[data-theme="dark"] .pill{
  background:var(--yellow);color:#0A0D1E;
  box-shadow:0 4px 18px rgba(255,199,56,.20)
}
body[data-theme="dark"] .btn.yellow:hover,
body[data-theme="dark"] .pill:hover{background:#FFD458;box-shadow:0 6px 24px rgba(255,199,56,.28)}
body[data-theme="dark"] .btn.dark-btn{background:#F4F0E4;color:#0A0D1E}
body[data-theme="dark"] .btn.dark-btn:hover{background:#fff}
body[data-theme="dark"] .btn.soft-btn{
  background:transparent;color:#F4F0E4;border-color:rgba(255,255,255,.22)
}
body[data-theme="dark"] .btn.soft-btn:hover{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.36)}
body[data-theme="dark"] .btn.ghost{color:#F4F0E4;border-color:rgba(255,255,255,.22);background:transparent}
body[data-theme="dark"] .btn.ghost:hover{background:rgba(255,255,255,.06)}
body[data-theme="dark"] .hero .btn.ghost,
body[data-theme="dark"] .ivory .btn.ghost,
body[data-theme="dark"] .white .btn.ghost,
body[data-theme="dark"] .final .btn.ghost,
body[data-theme="dark"] .sky .btn.ghost{color:#F4F0E4;border-color:rgba(255,255,255,.22)}
body[data-theme="dark"] .text-link{color:var(--yellow);border-bottom-color:transparent}
body[data-theme="dark"] .text-link:hover{border-bottom-color:var(--yellow)}

body[data-theme="dark"] .info-row,
body[data-theme="dark"] .fund-step,
body[data-theme="dark"] .fee-cat,
body[data-theme="dark"] .plans-teaser-card,
body[data-theme="dark"] .help-cat,
body[data-theme="dark"] .help-article,
body[data-theme="dark"] .avail-matrix,
body[data-theme="dark"] .plans-table,
body[data-theme="dark"] .waitlist-form,
body[data-theme="dark"] .checkout,
body[data-theme="dark"] .convert-box,
body[data-theme="dark"] .wallet-board{
  background:linear-gradient(160deg,var(--dk-surface) 0%,var(--dk-bg-2) 100%);
  border-color:var(--dk-line);
  color:var(--dk-fg);
  box-shadow:0 1px 0 rgba(255,255,255,.03) inset,0 24px 60px rgba(0,0,0,.35)
}
body[data-theme="dark"] .info-row p,
body[data-theme="dark"] .fund-step p,
body[data-theme="dark"] .plans-teaser-card p,
body[data-theme="dark"] .help-cat p,
body[data-theme="dark"] .help-article p{color:var(--dk-fg-muted)}
body[data-theme="dark"] .info-row:hover,
body[data-theme="dark"] .help-article:hover,
body[data-theme="dark"] .help-cat:hover,
body[data-theme="dark"] .plans-teaser-card:hover{
  border-color:var(--dk-warm);
  background:linear-gradient(160deg,var(--dk-surface-2) 0%,var(--dk-surface) 100%)
}
body[data-theme="dark"] .plans-teaser-card.premium{
  background:
    radial-gradient(400px 200px at 100% 0%,var(--dk-yellow-glow),transparent 60%),
    linear-gradient(155deg,var(--dk-surface-2),var(--dk-bg));
  border-color:rgba(255,199,56,.24)
}
body[data-theme="dark"] .plans-teaser-card.premium:hover{border-color:var(--yellow)}
body[data-theme="dark"] .plans-teaser-card h3{color:var(--dk-fg)}
body[data-theme="dark"] .plans-teaser-price{color:var(--dk-fg)}
body[data-theme="dark"] .plans-teaser-card.premium .plans-teaser-price{color:var(--yellow)}

body[data-theme="dark"] .plans-table thead th{
  background:#0A0D1E;color:rgba(244,240,228,.55);border-bottom-color:rgba(255,255,255,.08)
}
body[data-theme="dark"] .plans-table thead th.col-premium{color:var(--yellow)}
body[data-theme="dark"] .plans-table tbody tr{border-bottom-color:rgba(255,255,255,.06)}
body[data-theme="dark"] .plans-table tbody td{color:#F4F0E4}
body[data-theme="dark"] .plans-table tbody td:first-child{color:rgba(244,240,228,.55)}
body[data-theme="dark"] .plans-table tbody tr.row-group td{background:#0A0D1E;color:rgba(244,240,228,.45)}
body[data-theme="dark"] .plans-table-note{background:#0A0D1E;color:rgba(244,240,228,.55);border-top-color:rgba(255,255,255,.06)}
body[data-theme="dark"] .plans-table-note a{color:var(--yellow)}

body[data-theme="dark"] .plan-stage{background:var(--dk-bg)}
body[data-theme="dark"] .plan-stage-panel{border-top-color:var(--dk-line)}
body[data-theme="dark"] .plan-stage-standard{
  background:
    radial-gradient(700px 400px at 15% 90%,rgba(232,185,120,.10),transparent 65%),
    var(--dk-bg);
  color:var(--dk-fg)
}
body[data-theme="dark"] .plan-stage-plus{
  background:
    radial-gradient(800px 400px at 85% 15%,rgba(79,225,235,.18),transparent 65%),
    linear-gradient(155deg,var(--dk-surface) 0%,var(--dk-bg-2) 100%);
  color:var(--dk-fg)
}
body[data-theme="dark"] .plan-stage-plus:before{content:none}
body[data-theme="dark"] .plan-stage-plus .copy{color:var(--dk-fg-muted)}
body[data-theme="dark"] .plan-stage-plus .plan-highlights li{border-top-color:var(--dk-line-strong);color:var(--dk-fg)}
body[data-theme="dark"] .plan-stage-plus .plan-highlights li:before{background:var(--dk-cyan-soft)}
body[data-theme="dark"] .plan-stage-plus .plan-price-cycle{color:var(--dk-fg-muted)}
body[data-theme="dark"] .plan-stage-plus .eyebrow{color:var(--dk-cyan-soft)}
body[data-theme="dark"] .plan-stage-premium{
  background:
    radial-gradient(900px 500px at 78% 20%,var(--dk-yellow-glow),transparent 65%),
    radial-gradient(700px 400px at 15% 90%,rgba(232,185,120,.10),transparent 65%),
    linear-gradient(180deg,#050813,var(--dk-purple))
}
body[data-theme="dark"] .plan-stage-premium .plan-highlights li:before{background:var(--yellow)}
body[data-theme="dark"] .plan-highlights li{color:var(--dk-fg);border-top-color:var(--dk-line)}
body[data-theme="dark"] .plan-highlights li:before{background:var(--dk-warm)}

body[data-theme="dark"] .fee-cat h3{background:#0A0D1E;color:rgba(244,240,228,.55);border-bottom-color:rgba(255,255,255,.06)}
body[data-theme="dark"] .fee-row{border-bottom-color:rgba(255,255,255,.06)}
body[data-theme="dark"] .fee-row span:first-child{color:rgba(244,240,228,.55)}
body[data-theme="dark"] .fee-row span:last-child{color:#F4F0E4}

body[data-theme="dark"] .country-select-wrap{
  background:#141830;border-color:rgba(255,255,255,.10)
}
body[data-theme="dark"] .country-select{color:#F4F0E4;background-image:linear-gradient(45deg,transparent 50%,#F4F0E4 50%),linear-gradient(135deg,#F4F0E4 50%,transparent 50%)}
body[data-theme="dark"] .country-select-label{color:rgba(244,240,228,.55)}

body[data-theme="dark"] .avail-legend{background:#0A0D1E;border-bottom-color:rgba(255,255,255,.06)}
body[data-theme="dark"] .avail-legend span{color:rgba(244,240,228,.6)}
body[data-theme="dark"] .avail-row{border-bottom-color:rgba(255,255,255,.06)}
body[data-theme="dark"] .avail-name{color:#F4F0E4}

body[data-theme="dark"] .help-search-box{background:#141830;border-color:rgba(255,255,255,.10)}
body[data-theme="dark"] .help-search-box:focus-within{border-color:var(--yellow)}
body[data-theme="dark"] .help-search-box input{color:#F4F0E4}
body[data-theme="dark"] .help-search-box input::placeholder{color:rgba(244,240,228,.42)}
body[data-theme="dark"] .help-cat.on{background:var(--yellow);color:#0A0D1E;border-color:var(--yellow)}
body[data-theme="dark"] .help-cat.on p{color:rgba(10,13,30,.72)}

body[data-theme="dark"] .waitlist-shell{background:#0A0D1E}
body[data-theme="dark"] .waitlist-label{color:rgba(244,240,228,.55)}
body[data-theme="dark"] .waitlist-form select,
body[data-theme="dark"] .waitlist-form input{
  background:#0A0D1E;border-color:rgba(255,255,255,.14);color:#F4F0E4
}
body[data-theme="dark"] .waitlist-form select:focus,
body[data-theme="dark"] .waitlist-form input:focus{border-color:var(--yellow);background:#141830}
body[data-theme="dark"] .waitlist-note{color:rgba(244,240,228,.45)}

body[data-theme="dark"] .footer{background:#050815;color:#F4F0E4;border-top-color:rgba(255,255,255,.06)}
body[data-theme="dark"] .footer a{color:rgba(244,240,228,.7)}
body[data-theme="dark"] .footer a:hover{color:#F4F0E4}
body[data-theme="dark"] .footer h3{color:rgba(244,240,228,.45)}
body[data-theme="dark"] .footer p{color:rgba(244,240,228,.5)}
body[data-theme="dark"] .legal-note{color:rgba(244,240,228,.42);border-top-color:rgba(255,255,255,.08)}

body[data-theme="dark"] .final{background:#0A0D1E;color:#F4F0E4}
body[data-theme="dark"] .final .copy{color:rgba(244,240,228,.6)}
body[data-theme="dark"] .final:before{background:radial-gradient(700px 400px at 50% 50%,rgba(255,199,56,.10),transparent 65%)}
body[data-theme="dark"] .hero{
  background:
    radial-gradient(1000px 600px at 76% 20%,rgba(31,92,224,.35),transparent 60%),
    radial-gradient(700px 400px at 15% 85%,rgba(255,199,56,.10),transparent 60%),
    linear-gradient(180deg,#060916 0%,#0A1428 100%);
  color:#F4F0E4
}
body[data-theme="dark"] .brand-statement{
  background:
    radial-gradient(900px 500px at 50% 40%,var(--dk-yellow-glow),transparent 65%),
    radial-gradient(600px 400px at 15% 85%,var(--dk-cyan-glow),transparent 65%),
    linear-gradient(180deg,#050813,var(--dk-purple));
  color:var(--dk-fg)
}
body[data-theme="dark"] .brand-statement .lead{color:var(--dk-fg-muted)}
body[data-theme="dark"] .page-hero{background:var(--dk-bg);color:var(--dk-fg)}
body[data-theme="dark"] .page-hero.ivory-page{
  background:
    radial-gradient(900px 500px at 88% 10%,var(--dk-blue-glow),transparent 60%),
    radial-gradient(600px 400px at 8% 92%,var(--dk-yellow-glow),transparent 60%),
    var(--dk-bg)
}
body[data-theme="dark"] .page-hero.dark-page{
  background:
    radial-gradient(1000px 500px at 78% 22%,var(--dk-blue-glow),transparent 60%),
    radial-gradient(600px 400px at 15% 85%,rgba(232,185,120,.08),transparent 65%),
    #060916
}
body[data-theme="dark"] .avail-badge.av{background:rgba(69,209,154,.16);color:#7CE0B5}
body[data-theme="dark"] .avail-badge.cs{background:rgba(232,185,120,.18);color:var(--dk-warm)}
body[data-theme="dark"] .avail-badge.pg{background:rgba(198,174,126,.22);color:var(--dk-copper)}
body[data-theme="dark"] .avail-badge.na{background:rgba(255,255,255,.08);color:var(--dk-fg-dim)}

body[data-theme="dark"] .cinema-card{background:linear-gradient(155deg,#151830,#050815);border-color:rgba(255,255,255,.04)}
body[data-theme="dark"] .person-card{background:linear-gradient(155deg,#141830,#0A0D1E);color:#F4F0E4;border-color:rgba(255,255,255,.06)}
body[data-theme="dark"] .person-card.light-person{background:linear-gradient(155deg,#F4F0E4,#DDD3BB);color:#0A0D1E}
body[data-theme="dark"] .security-panel{background:linear-gradient(155deg,#151830,#0A0D1E);border-color:rgba(255,255,255,.06)}
body[data-theme="dark"] .currency-card,
body[data-theme="dark"] .ivory .currency-card,
body[data-theme="dark"] .white .currency-card{
  background:#141830;border-color:rgba(255,255,255,.06);color:#F4F0E4
}
body[data-theme="dark"] .currency-card span{color:rgba(244,240,228,.55)}
body[data-theme="dark"] .currency-card strong{color:#F4F0E4}
body[data-theme="dark"] .route-item,
body[data-theme="dark"] .ivory .route-item,
body[data-theme="dark"] .white .route-item{background:#141830;border-color:rgba(255,255,255,.06);color:#F4F0E4}
body[data-theme="dark"] .route-item small{color:rgba(244,240,228,.55)}
body[data-theme="dark"] .send-pill{background:var(--yellow);color:#0A0D1E;border:none;box-shadow:0 8px 24px rgba(255,199,56,.24)}
body[data-theme="dark"] .arrow{color:rgba(244,240,228,.55)}

body[data-theme="dark"] .checkout-top strong{color:#F4F0E4}
body[data-theme="dark"] .checkout-line{border-bottom-color:rgba(255,255,255,.06)}
body[data-theme="dark"] .checkout-line span{color:rgba(244,240,228,.55)}
body[data-theme="dark"] .checkout-line b{color:#F4F0E4}

body[data-theme="dark"] .wallet-row{background:#0A0D1E;border-color:rgba(255,255,255,.06);color:#F4F0E4}
body[data-theme="dark"] .wallet-row b{color:rgba(244,240,228,.55)}

body[data-theme="dark"] .wallet-chip{background:#141830;border-color:rgba(255,255,255,.06);color:#F4F0E4}
body[data-theme="dark"] .wallet-chip .status{color:rgba(244,240,228,.55)}

body[data-theme="dark"] .pc-state{background:#141830;border-color:rgba(255,255,255,.06);color:#F4F0E4}
body[data-theme="dark"] .pc-state .dot{background:rgba(255,255,255,.14)}
body[data-theme="dark"] .pc-state .lbl{color:rgba(244,240,228,.55)}
body[data-theme="dark"] .pc-state.on .lbl{color:#F4F0E4}
body[data-theme="dark"] .pc-state[data-state="pending"].on{background:rgba(255,199,56,.10);border-color:rgba(255,199,56,.28)}

body[data-theme="dark"] .money-line .sender,
body[data-theme="dark"] .money-line .receiver{background:#141830;border-color:rgba(255,255,255,.06);color:#F4F0E4}
body[data-theme="dark"] .money-line .status-line{color:rgba(244,240,228,.55)}
body[data-theme="dark"] .money-line .track{background:repeating-linear-gradient(90deg,rgba(255,255,255,.14) 0 6px,transparent 6px 12px)}
body[data-theme="dark"] .money-line .traveler{background:#F4F0E4;color:#0A0D1E;box-shadow:0 8px 24px rgba(0,0,0,.55),0 0 0 2px rgba(255,199,56,.30)}

body[data-theme="dark"] .scf-scene{background:#141830;border-color:rgba(255,255,255,.06);color:#F4F0E4}
body[data-theme="dark"] .scf-scene .wallet-tag{background:#0A0D1E;color:#F4F0E4}
body[data-theme="dark"] .scf-scene .wallet-tag:before{background:linear-gradient(155deg,var(--yellow),var(--app-accent))}
body[data-theme="dark"] .scf-scene .amount{color:#F4F0E4}
body[data-theme="dark"] .scf-scene .context{color:rgba(244,240,228,.55)}

body[data-theme="dark"] .c2d{background:radial-gradient(600px 200px at 50% 100%,rgba(255,199,56,.10),transparent 65%),linear-gradient(180deg,#141830,#0A0D1E);border-color:rgba(255,255,255,.06);color:rgba(244,240,228,.55)}

body[data-theme="dark"] .balance-morph{color:#F4F0E4}
body[data-theme="dark"] .balance-morph .cur{color:rgba(244,240,228,.55)}

body[data-theme="dark"] .avatar-lg{background:linear-gradient(160deg,var(--app-primary),var(--app-accent));color:#F4F0E4}

body[data-theme="dark"] .fund-step:before{background:var(--yellow)}
body[data-theme="dark"] .info-row h3 em{color:var(--yellow)}
body[data-theme="dark"] .display em,
body[data-theme="dark"] .section-title em,
body[data-theme="dark"] .hero-title em{color:var(--yellow)}

body[data-theme="dark"] ::selection{background:var(--yellow);color:#0A0D1E}

/* ---------- MOBILE MENU ---------- */
.menu-toggle{
  display:none;
  position:relative;
  width:40px;height:40px;
  border-radius:99px;
  border:1px solid var(--line-strong);
  background:transparent;
  cursor:pointer;padding:0;
  align-items:center;justify-content:center;
  gap:5px;flex-direction:column;
  transition:background .2s var(--ease),border-color .2s var(--ease)
}
.menu-toggle span{
  display:block;width:16px;height:1.5px;background:var(--ink);border-radius:2px;
  transition:transform .35s var(--ease),opacity .2s var(--ease)
}
.menu-toggle.is-open span:nth-child(1){transform:translateY(3.25px) rotate(45deg)}
.menu-toggle.is-open span:nth-child(2){transform:translateY(-3.25px) rotate(-45deg)}
.menu-toggle:hover{background:rgba(12,12,14,.04)}

.mobile-menu{
  position:fixed;inset:0;
  background:var(--cream);
  z-index:99;
  padding:80px var(--gutter) 40px;
  opacity:0;visibility:hidden;
  transform:translateY(-8px);
  transition:opacity .35s var(--ease),transform .35s var(--ease),visibility 0s .35s;
  overflow-y:auto
}
.mobile-menu.is-open{
  opacity:1;visibility:visible;transform:none;
  transition:opacity .35s var(--ease),transform .35s var(--ease),visibility 0s
}
.mobile-menu-inner{
  max-width:600px;margin:auto;
  display:flex;flex-direction:column;gap:40px
}
.mobile-menu .nav-links{
  display:flex!important;flex-direction:column;gap:0;align-items:flex-start
}
.mobile-menu .nav-links a{
  font-family:var(--serif);font-size:36px;font-weight:400;letter-spacing:-.02em;
  padding:14px 0;color:var(--ink);opacity:.9;
  border-bottom:1px solid var(--line);width:100%
}
.mobile-menu .nav-links a.active{color:var(--copper);opacity:1}
.mobile-menu .nav-actions{
  display:flex!important;flex-direction:column;align-items:stretch;gap:14px
}
.mobile-menu .locale{height:46px;font-size:15px;text-align:center}
.mobile-menu .login{display:none!important}
.mobile-menu .pill{width:100%;min-height:52px;font-size:15px}
body.menu-open{overflow:hidden}

/* ---------- RESPONSIVE ---------- */
@media(max-width:1060px){
  .menu-toggle{display:inline-flex}
  .nav{height:60px}
  .nav-links{display:none}
  .login{display:none}
  .locale{height:34px;font-size:12px}
  .pill{min-height:40px;padding:0 16px;font-size:13px}
  .hero{min-height:auto}
  .hero-grid,.money-layout,.story-grid,.page-grid,.security-composition{grid-template-columns:1fr}
  .hero-grid{padding:56px 0 32px;gap:32px}
  .money-layout,.story-grid{gap:44px}
  .display,.hero-title{font-size:clamp(44px,11vw,68px);line-height:1.02}
  .section-title{font-size:clamp(32px,8vw,48px)}
  .lead{font-size:17px}
  .product-stage{min-height:auto;padding:20px 0}
  .card-visual{width:min(360px,84%);border-radius:18px;padding:22px}
  .card-logo{left:22px;top:22px;width:26px}
  .chip{right:22px;top:22px;width:38px;height:28px}
  .card-wordmark,.card-digits{bottom:20px}
  .card-wordmark{left:22px;width:70px}
  .card-digits{right:22px}
  .section{padding:80px 0}
  .section-large{padding:96px 0}
  .currency-grid,.fund-flow,.help-grid{grid-template-columns:1fr}
  .route-item{grid-template-columns:1fr;font-size:15px}
  .people-scene,.converter{grid-template-columns:1fr}
  .send-pill{text-align:center;font-size:17px}
  .arrow{transform:rotate(90deg)}
  .app-strip{flex-direction:column;align-items:center}
  .mini-phone:nth-child(2){transform:none}
  .footer-grid{grid-template-columns:1fr 1fr;gap:32px}
  .page-art{min-height:340px}
  .page-art .phone{right:8px;transform:scale(.72)}
  .cinema-card{min-height:400px}
  .cinema-card .gold-card{width:min(300px,72%)}
}
body[data-theme="dark"] .menu-toggle{border-color:rgba(255,255,255,.20)}
body[data-theme="dark"] .menu-toggle span{background:#F4F0E4}
body[data-theme="dark"] .menu-toggle:hover{background:rgba(255,255,255,.06)}
body[data-theme="dark"] .mobile-menu{background:#0A0D1E}
body[data-theme="dark"] .mobile-menu .nav-links a{color:#F4F0E4;border-bottom-color:rgba(255,255,255,.08)}
body[data-theme="dark"] .mobile-menu .nav-links a.active{color:var(--yellow)}

/* ==========================================================================
   ULTRA-SMALL SCREENS (< 400px iPhone SE, mini) — mobile fine-tuning
   ========================================================================== */
@media(max-width:400px){
  :root{--gutter:16px}
  .site-header{background:rgba(244,238,225,.96)}
  body[data-theme="dark"] .site-header{background:rgba(10,13,30,.96)}
  .nav{height:56px}
  .brand{font-size:17px;gap:9px}
  .brand img{width:88px;height:auto}
  .footer-brand{font-size:22px}
  .footer-brand img{width:96px;height:auto}
  .pill{min-height:36px;padding:0 12px;font-size:12px}
  .hero-grid{padding:20px 0 32px;gap:20px}
  .hero-title{font-size:38px;line-height:1.02}
  .display{font-size:36px}
  .section-title{font-size:28px}
  .section-title.small{font-size:24px}
  .lead{font-size:15px;margin-top:16px}
  .copy{font-size:14px;line-height:1.55;margin-top:14px}
  .eyebrow{font-size:9.5px;margin-bottom:18px}
  .section{padding:52px 0}
  .section-large{padding:64px 0}
  .footer{padding:52px 0 24px}
  .app-balance-card{padding:20px;border-radius:18px}
  .app-balance-card .amount{font-size:36px}
  .app-balance-card .qa{padding:8px 4px;font-size:9px}
  .app-balance-card .qa .qa-icon{width:24px;height:24px;font-size:12px}
  .app-tx{padding:10px 12px;font-size:12px}
  .app-tx .icon{width:32px;height:32px;font-size:13px}
  .app-tx .title{font-size:13px}
  .app-tx .amount{font-size:13px}
  .app-card{width:100%;max-width:320px;border-radius:18px;padding:22px}
  .app-card:after{right:22px;top:22px;width:38px;height:30px}
  .app-card .app-card-logo{left:22px;top:22px;width:28px}
  .app-card .app-card-wordmark{left:22px;bottom:20px;width:72px}
  .app-card .digits{right:22px;bottom:20px;font-size:12px;letter-spacing:.14em}
  .wallet-chip{padding:12px 14px;font-size:13px;gap:10px}
  .wallet-chip .cur{width:30px;height:30px;font-size:12px}
  .plan-price-amount{font-size:48px}
  .plan-price-cycle{font-size:16px}
  .plan-highlights li{padding:12px 0;font-size:14px;gap:10px}
  .plans-table{border-radius:16px}
  .plans-table thead th,.plans-table tbody td{padding:12px 12px;font-size:12px}
  .plans-table tbody tr.row-group td{padding:10px 12px;font-size:10.5px}
  .plans-table-note{padding:16px;font-size:11.5px}
  .fee-cat{border-radius:16px}
  .fee-cat h3{padding:14px 16px;font-size:10.5px}
  .fee-row{padding:14px 16px;font-size:13px;gap:12px}
  .avail-matrix{border-radius:16px}
  .avail-legend{padding:16px 18px;gap:14px}
  .avail-legend span{font-size:11px}
  .avail-row{padding:14px 18px;font-size:14px;flex-direction:column;align-items:flex-start;gap:6px}
  .avail-status{font-size:11px}
  .country-select-wrap{margin-top:32px;padding:10px 16px;gap:10px}
  .country-select-label{font-size:11px}
  .country-select{font-size:13px}
  .money-line{padding:40px 0;min-height:auto;gap:18px}
  .money-line .avatar-lg{width:44px;height:44px;font-size:18px}
  .money-line .name{font-size:22px}
  .money-line .status-line{font-size:12px}
  .money-line .sender,.money-line .receiver{padding:16px;min-height:auto}
  .money-line .traveler{padding:6px 12px;font-size:12px}
  .pc-state{padding:14px 16px}
  .pc-state .lbl{font-size:13px}
  .pc-state .amt{font-size:13px}
  .balance-morph{font-size:52px}
  .send-pill{font-size:15px;padding:14px 20px}
  .waitlist-form{padding:24px;border-radius:20px;gap:22px}
  .waitlist-label{font-size:11px}
  .waitlist-form select,.waitlist-form input{height:46px;padding:0 14px;font-size:15px}
  .help-search-box{margin-top:28px}
  .help-search-box input{height:52px;padding:0 46px 0 20px;font-size:15px}
  .help-search-icon{right:16px;font-size:19px}
  .help-cat{padding:20px;border-radius:14px}
  .help-cat h3{font-size:19px}
  .help-cat p{font-size:13px}
  .help-article{padding:18px 20px;border-radius:12px}
  .help-article h3{font-size:17px}
  .help-article p{font-size:13px}
  .info-row h3{font-size:19px}
  .info-row p{font-size:14px}
  .fund-step h3{font-size:20px}
  .fund-step p{font-size:13px}
  .fund-step{padding:24px;min-height:auto}
  .plans-teaser-card{padding:24px;min-height:auto}
  .plans-teaser-card h3{font-size:26px}
  .plans-teaser-price{font-size:36px;margin-top:20px}
  .plan-stage-panel{padding:80px 0;min-height:auto}
  .plan-stage-panel .section-title{margin-top:6px}
  .plan-stage-panel .copy{margin-top:16px}
  .converter{gap:12px}
  .convert-box{padding:22px}
  .convert-box strong{font-size:32px;margin-top:8px}
  .arrow{font-size:22px}
  .avail-badge{font-size:9.5px;padding:2px 8px}
  .footer-grid{gap:24px}
  .legal-note{margin-top:36px;padding-top:22px;font-size:11px;line-height:1.6}
}
/* iPhone 12/13 mini and similar (≤ 375px) — tighten a bit more */
@media(max-width:375px){
  .hero-title{font-size:34px}
  .display{font-size:32px}
  .section-title{font-size:26px}
  .app-card{max-width:280px}
  .app-card .app-card-wordmark{width:66px}
  .app-card .digits{font-size:11px}
  .balance-morph{font-size:44px}
  .plans-teaser-price{font-size:32px}
  .plan-price-amount{font-size:42px}
}

@media(max-width:560px){
  :root{--gutter:20px}
  .site-header{background:rgba(244,238,225,.94)}
  .nav-actions{gap:8px}
  .nav-actions .locale{display:none}
  .brand{font-size:18px}
  .brand img{width:84px;height:auto}
  .pill{font-size:13px;padding:0 14px;min-height:38px}
  .actions{gap:10px;flex-direction:column;align-items:stretch}
  .center .actions{align-items:stretch}
  .btn{width:100%;min-height:50px;justify-content:center}
  .hero{min-height:auto}
  .hero-grid{padding:32px 0 40px;gap:28px}
  .hero-title{font-size:clamp(40px,10vw,52px);line-height:1.02}
  .display{font-size:clamp(38px,9.5vw,50px);line-height:1.03}
  .section-title{font-size:clamp(30px,8vw,42px)}
  .lead{font-size:16px;margin-top:22px}
  .copy{font-size:15px;margin-top:18px}
  .eyebrow{font-size:10px;margin-bottom:24px;letter-spacing:.24em}
  .section{padding:64px 0}
  .section-large{padding:76px 0}
  .footer{padding:64px 0 32px}
  .footer-grid{grid-template-columns:1fr;gap:32px}
  .footer h3{margin-bottom:10px}
  .card-visual{width:min(280px,90%);border-radius:16px;padding:20px}
  .card-logo{width:24px;left:20px;top:20px}
  .chip{width:34px;height:26px;right:20px;top:20px}
  .card-wordmark{left:20px;bottom:18px;width:62px}
  .card-digits{right:20px;bottom:18px;font-size:12px}
  .checkout,.convert-box,.fund-step,.info-row{padding:22px;border-radius:16px}
  .checkout-top{display:block}
  .checkout-top .btn{margin-top:14px;width:auto}
  .total-panel{padding:22px;min-height:180px;border-radius:14px}
  .amount-xl{font-size:44px}
  .wallet-row{padding:16px 18px;border-radius:14px}
  .wallet-row strong{font-size:17px}
  .wallet-row b{font-size:14px}
  .currency-card{min-height:180px;padding:22px;border-radius:16px}
  .person-card{min-height:240px;padding:24px;border-radius:20px}
  .person-card h3{font-size:26px}
  .security-panel{padding:28px;min-height:auto;border-radius:20px}
  .security-panel h3{font-size:26px}
  .mini-phone{width:180px;height:360px;border-radius:32px;padding:22px}
  .brand-statement{min-height:auto;padding:72px 0}
  .brand-statement .display{max-width:none}
  .final{min-height:auto;padding:72px 0}
  .final .display{font-size:clamp(40px,10vw,54px)}
  .page-hero{min-height:auto;padding:56px 0}
  .page-art{min-height:280px;border-radius:20px}
  .page-art .phone{transform:scale(.60);right:calc(50% - 96px);bottom:-90px}
  .page-art .gold-card{width:min(240px,80%)}
  .legal-shell{padding:64px 0}
  .legal-layout h1{font-size:clamp(34px,9vw,44px)}
  .cinema-card{min-height:320px;border-radius:22px}
  .cinema-card .gold-card{width:min(240px,78%)}
  .sticky{min-height:auto}
  .sticky .sticky-inner{position:static;padding:64px 0}
  .mobile-menu{padding-top:88px}
  .mobile-menu .nav-links a{font-size:28px;padding:10px 0}
  /* Nicer touch feedback */
  .btn:active,.pill:active,.info-row:active,.currency-card:active{transform:scale(.98)}
}
@media(prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  .reveal{opacity:1;transform:none}
}

/* ==========================================================================
   GOYO PREMIUM REFIT — visual-only layer
   Keeps page copy, product details, legal text, links, and SEO untouched.
   ========================================================================== */
:root{
  --premium-ivory:#F7F1E6;
  --premium-paper:#FFFDF7;
  --premium-night:#070707;
  --premium-charcoal:#12110F;
  --premium-line:rgba(12,12,14,.075);
  --premium-gold:#C9A75D;
  --premium-gold-2:#8F6E2F;
  --premium-radius:28px;
  --premium-shadow:0 34px 90px -36px rgba(12,12,14,.42),0 10px 32px -22px rgba(12,12,14,.30);
  --premium-shadow-soft:0 24px 70px -42px rgba(12,12,14,.34),0 1px 0 rgba(255,255,255,.68) inset
}

body{
  background:
    radial-gradient(900px 520px at 78% -10%,rgba(201,167,93,.18),transparent 62%),
    radial-gradient(760px 520px at -10% 18%,rgba(255,255,255,.64),transparent 58%),
    var(--premium-ivory);
}

.site-header{
  top:12px;
  width:min(calc(100% - 32px),1380px);
  margin:0 auto;
  border:1px solid rgba(12,12,14,.07);
  border-radius:999px;
  background:rgba(255,253,247,.70);
  box-shadow:0 18px 50px -34px rgba(12,12,14,.55);
}
.site-header.scrolled{
  background:rgba(255,253,247,.86);
  border-color:rgba(12,12,14,.10)
}
.nav{height:64px;width:100%;padding:0 22px}
.brand img{width:104px}
.nav-links{
  gap:8px;
  padding:5px;
  border-radius:999px;
  background:rgba(12,12,14,.035);
  border:1px solid rgba(12,12,14,.045)
}
.nav-links a{
  padding:8px 13px;
  border-radius:999px;
  opacity:.62;
  font-weight:560;
  letter-spacing:0
}
.nav-links a:hover,.nav-links a.active{
  background:rgba(255,253,247,.76);
  box-shadow:0 1px 0 rgba(255,255,255,.80) inset;
  opacity:1
}
.nav-links a.active:after{content:none}
.locale{
  background:rgba(255,253,247,.62);
  border-color:rgba(12,12,14,.09);
  box-shadow:0 1px 0 rgba(255,255,255,.65) inset
}
.pill,.btn{
  font-weight:650;
  box-shadow:0 12px 30px -18px rgba(12,12,14,.65)
}

.hero{
  min-height:calc(100svh - 12px);
  margin-top:-76px;
  padding-top:76px;
  background:
    radial-gradient(900px 560px at 72% 44%,rgba(201,167,93,.26),transparent 60%),
    radial-gradient(780px 520px at 16% 85%,rgba(255,255,255,.86),transparent 64%),
    linear-gradient(135deg,#FBF7EC 0%,#F4EEE1 52%,#E8DDC8 100%);
}
.hero:after{
  content:"";position:absolute;inset:auto 0 0;height:160px;
  background:linear-gradient(180deg,transparent,var(--premium-ivory));
  pointer-events:none
}
.hero-grid{min-height:calc(100svh - 76px);padding:118px 0 76px}
.display,.hero-title,.section-title{
  letter-spacing:-.02em;
  text-wrap:balance
}
.lead,.copy{text-wrap:pretty}
.hero .lead{color:rgba(12,12,14,.68)!important}

.section{
  background:var(--premium-ivory);
  border-top:1px solid rgba(12,12,14,.035)
}
.white{
  background:
    radial-gradient(780px 480px at 90% 10%,rgba(201,167,93,.12),transparent 62%),
    var(--premium-paper)
}
.ivory{
  background:
    radial-gradient(900px 520px at 8% 16%,rgba(255,255,255,.62),transparent 58%),
    var(--premium-ivory)
}
.sky{
  background:
    radial-gradient(760px 460px at 82% 12%,rgba(201,167,93,.15),transparent 62%),
    #EFE6D5
}
.dark,.midnight,.page-hero.dark-page,.brand-statement{
  background:
    radial-gradient(900px 520px at 78% 18%,rgba(201,167,93,.18),transparent 62%),
    radial-gradient(760px 440px at 10% 88%,rgba(255,255,255,.05),transparent 62%),
    linear-gradient(180deg,#12110F 0%,#070707 100%);
  color:#F7F1E6
}

.wallet-board,.checkout,.convert-box,.fund-step,.info-row,.plans-teaser-card,.help-cat,.help-article,.fee-cat,.plans-table,.avail-matrix,.waitlist-form,.scf-scene{
  border-radius:var(--premium-radius);
  background:rgba(255,253,247,.70);
  border:1px solid rgba(12,12,14,.075);
  box-shadow:var(--premium-shadow-soft);
  -webkit-backdrop-filter:blur(22px) saturate(145%);
  backdrop-filter:blur(22px) saturate(145%)
}
.dark .info-row,.midnight .info-row,.dark .route-item,.midnight .route-item,.dark .currency-card,.midnight .currency-card{
  background:rgba(255,255,255,.045);
  border-color:rgba(255,255,255,.10);
  box-shadow:0 24px 70px -42px rgba(0,0,0,.90),0 1px 0 rgba(255,255,255,.08) inset
}
.info-row:hover,.fund-step:hover,.plans-teaser-card:hover,.help-cat:hover,.help-article:hover,.scf-scene:hover,.currency-card:hover{
  transform:translateY(-5px);
  border-color:rgba(201,167,93,.46);
  box-shadow:0 38px 90px -44px rgba(12,12,14,.48),0 0 0 1px rgba(201,167,93,.08) inset
}

.card-visual,.app-card{
  border-radius:30px;
  background:
    linear-gradient(135deg,rgba(255,255,255,.28) 0%,transparent 28%),
    linear-gradient(135deg,#F7ECCD 0%,#D9B75F 36%,#B59043 68%,#7D6029 100%);
  box-shadow:
    0 50px 100px -42px rgba(12,12,14,.62),
    0 18px 42px -26px rgba(141,106,41,.54),
    inset 0 1px 1.5px rgba(255,255,255,.82),
    inset 0 -1.5px 2px rgba(0,0,0,.24)
}
.mid-card{
  background:
    linear-gradient(135deg,rgba(255,255,255,.08) 0%,transparent 34%),
    linear-gradient(145deg,#26231D 0%,#11100E 100%)
}
.app-card .app-card-logo,.gold-card .card-logo{
  filter:brightness(.46) saturate(.9);
  opacity:.75
}
.app-card .app-card-wordmark,.gold-card .card-wordmark{
  opacity:.94
}
.app-card .digits,.card-digits{
  color:rgba(12,12,14,.78);
  font-weight:650
}
.mid-card .card-digits{color:rgba(247,241,230,.82)}
.cinema-card{
  border-radius:36px;
  background:
    radial-gradient(520px 280px at 65% 42%,rgba(201,167,93,.14),transparent 65%),
    linear-gradient(155deg,#171613 0%,#050505 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06),var(--premium-shadow)
}

.page-hero{
  margin-top:-76px;
  padding-top:164px;
  min-height:76svh;
  background:
    radial-gradient(900px 520px at 78% 14%,rgba(201,167,93,.18),transparent 62%),
    var(--premium-ivory)
}
.page-art{
  border-radius:36px;
  box-shadow:var(--premium-shadow-soft)
}

.total-panel,.security-panel{
  border-radius:28px;
  background:
    radial-gradient(520px 280px at 88% 8%,rgba(201,167,93,.18),transparent 62%),
    linear-gradient(155deg,#161511 0%,#070707 100%);
  box-shadow:0 36px 86px -48px rgba(0,0,0,.82),inset 0 1px 0 rgba(255,255,255,.08)
}
.plans-teaser-card.premium{
  border-radius:30px;
  background:
    radial-gradient(520px 260px at 88% 0%,rgba(201,167,93,.18),transparent 62%),
    linear-gradient(155deg,#171613 0%,#070707 100%)
}

.footer{
  background:
    radial-gradient(700px 360px at 15% 0%,rgba(201,167,93,.10),transparent 62%),
    var(--premium-ivory);
  border-top-color:rgba(12,12,14,.06)
}

@media(max-width:900px){
  .site-header{
    top:8px;
    width:min(calc(100% - 20px),1380px)
  }
  .nav{height:58px;padding:0 14px}
  .nav-links{display:none}
  .menu-toggle{display:flex}
  .hero{margin-top:-66px;padding-top:66px}
  .hero-grid{min-height:auto;padding:104px 0 58px}
  .page-hero{margin-top:-66px;padding-top:120px}
}

@media(max-width:560px){
  .site-header{border-radius:24px;background:rgba(255,253,247,.88)}
  .brand img{width:90px}
  .hero-grid,.page-grid{gap:36px}
  .hero .product-stage{min-height:430px}
  .hero .phone{width:235px;height:440px;border-radius:38px;padding:22px 16px}
  .hero .gold-card{width:min(285px,88%);right:0;bottom:32px}
  .hero .mid-card{width:min(270px,84%);right:28px;bottom:98px}
  .app-card{border-radius:24px}
  .page-hero{min-height:auto}
}

/* ==========================================================================
   Real app mockups
   Visual-only overrides for the public site.
   ========================================================================== */
.hero .product-stage{
  min-height:640px;
  isolation:isolate
}

.hero .phone,.phone{
  background:
    radial-gradient(240px 210px at 22% 0%,rgba(108,151,226,.32),transparent 72%),
    radial-gradient(260px 220px at 92% 10%,rgba(94,125,196,.20),transparent 70%),
    linear-gradient(180deg,#274371 0%,#172D5B 35%,#0B1536 72%,#070B1F 100%);
  border-color:#060812;
  color:#F6F8FF;
  box-shadow:
    0 46px 92px -42px rgba(4,7,18,.92),
    0 18px 44px -28px rgba(24,45,91,.72),
    inset 0 1px 0 rgba(255,255,255,.14)
}
.hero .phone:before,.phone:before{
  background:#02030A;
  box-shadow:0 1px 0 rgba(255,255,255,.05)
}
.phone-head{
  font-family:var(--sans);
  font-style:normal;
  font-weight:700;
  color:#F8FAFF
}
.avatar{
  background:rgba(255,255,255,.13);
  border-color:rgba(255,255,255,.18);
  color:#F5C64D;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12)
}
.phone-label{
  color:rgba(246,248,255,.52)
}
.phone-amount{
  color:#F8FAFF;
  text-shadow:0 12px 34px rgba(0,0,0,.22)
}
.quick span,.tx{
  background:rgba(255,255,255,.075);
  border-color:rgba(255,255,255,.10);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08)
}
.tx b{color:#F2C95A}
.float-note{
  background:rgba(255,253,247,.88);
  border-color:rgba(255,255,255,.78);
  box-shadow:0 20px 42px -24px rgba(12,12,14,.24),0 0 0 1px rgba(12,12,14,.04)
}

.card-visual.gold-card,.app-card,.app-card.premium,.app-card.plus{
  background:
    radial-gradient(280px 190px at 82% 8%,rgba(108,151,226,.12),transparent 72%),
    radial-gradient(260px 180px at 4% 0%,rgba(255,255,255,.86),transparent 70%),
    linear-gradient(135deg,#FFFFFF 0%,#F7FAFE 48%,#E9F0F7 100%);
  color:#0A0D16;
  border:1px solid rgba(12,20,34,.10);
  box-shadow:
    0 42px 84px -42px rgba(4,7,18,.52),
    0 18px 34px -28px rgba(45,68,105,.36),
    inset 0 1px 1.5px rgba(255,255,255,.92),
    inset 0 -1px 2px rgba(12,20,34,.08)
}
.card-visual.gold-card:before,.app-card:before{
  background:
    linear-gradient(115deg,rgba(255,255,255,.72) 0%,rgba(255,255,255,0) 30%),
    radial-gradient(320px 190px at 100% 110%,rgba(18,36,76,.10),transparent 68%)
}
.card-visual.gold-card:after{
  opacity:.58;
  mix-blend-mode:soft-light
}
.gold-card .card-logo,.app-card .app-card-logo{
  filter:none;
  opacity:.16
}
.gold-card .card-wordmark,.app-card .app-card-wordmark{
  filter:none;
  opacity:.92
}
.gold-card .card-digits,.app-card .digits{
  color:rgba(10,13,22,.72);
  opacity:1
}
.card-visual.gold-card .chip,.app-card:after{
  background:
    repeating-linear-gradient(90deg,rgba(88,70,31,.16) 0 5px,transparent 5px 9px),
    repeating-linear-gradient(0deg,rgba(88,70,31,.11) 0 5px,transparent 5px 9px),
    linear-gradient(135deg,#E6D39A 0%,#C2A05A 58%,#8F6F34 100%);
  box-shadow:
    0 5px 12px rgba(35,27,12,.16),
    inset 0 1px 1px rgba(255,255,255,.58),
    inset 0 -1px 1px rgba(80,58,22,.22)
}

.card-visual.mid-card{
  background:
    radial-gradient(270px 190px at 82% 8%,rgba(108,151,226,.26),transparent 70%),
    linear-gradient(145deg,#263B69 0%,#121E43 58%,#070B22 100%);
  color:#F6F8FF;
  border:1px solid rgba(255,255,255,.08);
  box-shadow:
    0 44px 90px -44px rgba(4,7,18,.86),
    inset 0 1px 0 rgba(255,255,255,.10)
}
.mid-card .card-logo{
  filter:brightness(0) invert(1);
  opacity:.68
}
.mid-card .card-wordmark{
  filter:invert(1) brightness(1.08);
  opacity:.92
}
.mid-card .card-digits{
  color:rgba(246,248,255,.84)
}
.mid-card .chip{
  background:
    repeating-linear-gradient(90deg,rgba(255,255,255,.13) 0 5px,transparent 5px 9px),
    repeating-linear-gradient(0deg,rgba(255,255,255,.09) 0 5px,transparent 5px 9px),
    linear-gradient(135deg,#3D4A69 0%,#1F2947 100%);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.12)
}

.cinema-card,.app-balance-card,.mini-phone{
  background:
    radial-gradient(380px 260px at 22% 0%,rgba(108,151,226,.24),transparent 72%),
    linear-gradient(180deg,#253E70 0%,#12244E 45%,#070B1F 100%);
  border-color:rgba(255,255,255,.10);
  box-shadow:0 36px 82px -46px rgba(4,7,18,.90),inset 0 1px 0 rgba(255,255,255,.10)
}

@media(min-width:901px){
  .hero .phone{
    width:330px;
    height:620px;
    right:34px;
    bottom:22px
  }
  .hero .mid-card{
    width:min(360px,86%);
    right:92px;
    bottom:162px;
    transform:rotate(-8deg) scale(.92)
  }
  .hero .gold-card{
    width:min(410px,92%);
    right:-10px;
    bottom:44px;
    transform:rotate(-6deg)
  }
}

@media(max-width:900px){
  .hero .product-stage{min-height:560px}
  .hero .phone{
    width:300px;
    height:560px;
    right:calc(50% - 150px);
    bottom:0
  }
  .hero .mid-card{
    width:min(330px,86%);
    right:calc(50% - 102px);
    bottom:126px;
    transform:rotate(-8deg) scale(.90)
  }
  .hero .gold-card{
    width:min(360px,90%);
    right:calc(50% - 176px);
    bottom:34px;
    transform:rotate(-6deg)
  }
}

@media(max-width:560px){
  .hero .product-stage{min-height:455px}
  .hero .phone{
    width:235px;
    height:440px;
    right:calc(50% - 118px);
    bottom:0
  }
  .hero .mid-card{
    width:min(260px,82%);
    right:calc(50% - 72px);
    bottom:94px;
    transform:rotate(-8deg) scale(.88)
  }
  .hero .gold-card{
    width:min(285px,88%);
    right:calc(50% - 142px);
    bottom:26px;
    transform:rotate(-6deg)
  }
}