/* ══════════════════════════════════════════
   5PYAS — Wise Fintech Style (Blue/Red/White)
   ══════════════════════════════════════════ */

:root {
  --blue:       #003F87;
  --blue-mid:   #1E5FA8;
  --blue-light: #EEF4FF;
  --red:        #D4122A;
  --red-bright: #E8223C;
  --white:      #ffffff;
  --ash:        #e8ebe6;
  --cyan:       #ecf9f9;
  --ink:        #0e0f0c;
  --slate:      #454745;
  --muted:      #868685;
  --ghost:      #6a6c6a;
  --navy:       #000D1F;
  --shadow-sm:  rgba(14,15,12,0.08) 0 1px 0;
  --shadow-md:  rgba(0,0,0,0.08) 0 6px 20px;
  --shadow-xl:  rgba(0,0,0,0.12) 0 12px 40px, rgba(0,0,0,0.04) 0 2px 6px;
  --r-pill:     9999px;
  --r-card:     28px;
  --r-card-sm:  18px;
  --font:       'Inter', ui-sans-serif, system-ui, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
  font-family: var(--font);
  background: var(--white);
  color: var(--ink);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

/* ── Nav ── */
.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  background: rgba(255,255,255,0.94);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  box-shadow: var(--shadow-sm);
}
.nav-inner {
  max-width: 1160px;
  margin: 0 auto;
  padding: 0.85rem 1.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.nav-logo {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  text-decoration: none;
}
.nav-logo-mark {
  width: 36px; height: 36px;
  background: var(--red);
  border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.nav-logo-mark span { font-weight: 900; color: white; font-size: 1.05rem; letter-spacing: -1px; }
.nav-logo-text { font-weight: 900; font-size: 1.2rem; color: var(--blue); letter-spacing: -0.5px; }
.nav-right { display: flex; align-items: center; gap: 0.75rem; }
.badge-soon {
  background: var(--blue);
  color: white;
  font-weight: 700;
  font-size: 0.72rem;
  padding: 0.3rem 0.9rem;
  border-radius: var(--r-pill);
}

/* Language switcher */
.lang-wrap { position: relative; }
.lang-btn {
  display: flex; align-items: center; gap: 0.4rem;
  background: transparent;
  border: 1px solid var(--ash);
  border-radius: var(--r-pill);
  padding: 0.35rem 0.75rem;
  cursor: pointer;
  font-family: var(--font); font-size: 0.75rem; font-weight: 500;
  color: var(--slate);
  transition: border-color 0.2s, color 0.2s;
}
.lang-btn:hover { border-color: var(--blue); color: var(--ink); }
.lang-menu {
  position: absolute; top: calc(100% + 8px); right: 0;
  background: white;
  border: 1px solid var(--ash);
  border-radius: 16px;
  overflow: hidden; min-width: 168px;
  box-shadow: var(--shadow-xl);
  z-index: 999;
}
.lang-opt {
  display: flex; align-items: center; gap: 0.6rem;
  width: 100%; padding: 0.6rem 1rem;
  background: transparent; border: none; cursor: pointer;
  font-family: var(--font); font-size: 0.82rem; color: var(--slate);
  text-align: left; border-left: 2px solid transparent;
  transition: all 0.15s;
}
.lang-opt:hover { background: var(--ash); color: var(--ink); }
.lang-opt.active { background: var(--blue-light); border-left-color: var(--blue); color: var(--blue); font-weight: 600; }
.lang-code { font-size: 0.68rem; font-weight: 700; color: var(--muted); min-width: 20px; }

/* ── Hero ── */
.hero {
  padding: 8rem 1.5rem 5rem;
  background: var(--white);
  text-align: center;
  position: relative;
  overflow: hidden;
}
/* Subtle background blobs */
.hero::before {
  content: '';
  position: absolute;
  top: -80px; right: -100px;
  width: 500px; height: 500px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(0,63,135,0.06) 0%, transparent 70%);
  pointer-events: none;
}
.hero::after {
  content: '';
  position: absolute;
  bottom: -60px; left: -80px;
  width: 400px; height: 400px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(212,18,42,0.05) 0%, transparent 70%);
  pointer-events: none;
}
.hero-inner { max-width: 900px; margin: 0 auto; position: relative; z-index: 1; }

/* Slogan */
.hero-slogan {
  font-weight: 900;
  font-size: clamp(2.5rem, 7vw, 5.5rem);
  letter-spacing: -0.04em;
  line-height: 1;
  color: var(--ink);
  margin-bottom: 0.5rem;
}
.hero-slogan span { color: var(--blue); }

/* Globe */
/* ── Globe (Premium 3D) ── */
.globe-wrap {
  position: relative;
  width: clamp(300px, 84vw, 520px);
  height: clamp(300px, 84vw, 520px);
  margin: 0 auto;
}
.globe-sphere {
  position: absolute;
  top: 50%; left: 50%;
  width: clamp(188px, 48vw, 310px);
  height: clamp(188px, 48vw, 310px);
  transform: translate(-50%, -50%);
  border-radius: 50%;
  overflow: hidden;
  /* True 3D sphere: lit from upper-left, dark lower-right */
  background: radial-gradient(circle at 30% 26%,
    rgba(224,240,255,0.65) 0%,
    rgba(130,185,255,0.2)  18%,
    rgba(0,63,135,0.14)    42%,
    rgba(0,22,72,0.52)     76%,
    rgba(0,8,28,0.82)      100%
  );
  box-shadow:
    inset -14px -16px 36px rgba(0,0,0,0.48),
    inset   7px  7px 16px rgba(255,255,255,0.06),
    0 0 90px rgba(0,63,135,0.26),
    0 0 36px rgba(0,63,135,0.16),
    0 0 0 1.5px rgba(0,63,135,0.28),
    0 40px 100px rgba(0,0,0,0.14);
  z-index: 2;
}
.globe-svg-static { position: absolute; inset: 0; width: 100%; height: 100%; }
.globe-spin { position: absolute; inset: 0; animation: globeSpin 16s linear infinite; }
.globe-spin svg { width: 100%; height: 100%; }

.globe-logo-overlay {
  /* Sits INSIDE globe-sphere — gets clipped to the circle */
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  z-index: 8; pointer-events: none;
}
.globe-logo-img {
  width: 88%;
  display: block;
  /* screen mode: dark bg → transparent, colored logo → visible */
  mix-blend-mode: screen;
  opacity: 0.94;
}

/* Orbiting coin badges */
.orb-arm {
  position: absolute;
  top: 50%; left: 50%;
  width: 0; height: 0;
  animation: orbitSpin 9s linear infinite;
  z-index: 5;
}
.orb-badge {
  position: absolute;
  width: 42px; height: 42px;
  left: clamp(118px, 30vw, 212px);
  top: -21px;
  border-radius: 50%;
  /* Coin gradient — shiny top-left, muted bottom-right */
  background: linear-gradient(140deg,
    #ffffff   0%,
    #deeeff  35%,
    #b4d2f8  70%,
    #90baf0 100%);
  border: 2px solid rgba(0,63,135,0.2);
  box-shadow:
    0 6px 22px rgba(0,0,0,0.2),
    0 2px 6px  rgba(0,0,0,0.1),
    inset 0  1.5px 0 rgba(255,255,255,0.95),
    inset 0 -1.5px 0 rgba(0,63,135,0.14);
  display: flex; align-items: center; justify-content: center;
  font-weight: 900; font-size: 1rem;
  color: var(--blue);
  font-family: var(--font);
  letter-spacing: -0.5px;
}

@keyframes orbitSpin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
@keyframes globeSpin  { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }

/* Haitian flag circle */
.flag-circle {
  width: 20px; height: 20px;
  border-radius: 50%; overflow: hidden;
  border: 1.5px solid rgba(0,0,0,0.12);
  box-shadow: 0 1px 4px rgba(0,0,0,0.15);
  animation: flagSpin 5s linear infinite;
  flex-shrink: 0;
  display: flex; flex-direction: column;
}
.flag-top  { flex: 1; background: var(--blue); }
.flag-bottom { flex: 1; background: var(--red); }
@keyframes flagSpin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }

/* Launch badge */
.launch-badge {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--ash);
  color: var(--ink);
  border-radius: var(--r-pill);
  padding: 0.4rem 1rem;
  font-size: 0.78rem; font-weight: 600;
  margin-bottom: 1.75rem;
}
.pulse-dot {
  width: 6px; height: 6px;
  background: var(--red-bright); border-radius: 50%;
  animation: pulse 2s infinite; flex-shrink: 0;
}
@keyframes pulse { 0%,100%{opacity:1} 50%{opacity:0.4} }

/* Headline after globe */
.hero-tagline {
  font-weight: 700;
  font-size: clamp(1.4rem, 3vw, 2.2rem);
  letter-spacing: -0.03em;
  color: var(--ink);
  margin-bottom: 0.75rem;
}
.hero-tagline .red { color: var(--red-bright); }

.hero-desc {
  font-size: clamp(0.95rem, 1.4vw, 1.1rem);
  line-height: 1.75;
  color: var(--slate);
  max-width: 560px;
  margin: 0 auto 2.5rem;
}
.hero-desc strong { color: var(--ink); font-weight: 600; }

/* Forms & Buttons */
.signup-row {
  display: flex; gap: 0.65rem; flex-wrap: wrap;
  justify-content: center;
  max-width: 430px; width: 100%; margin: 0 auto;
}
.email-in {
  flex: 1; min-width: 200px;
  padding: 0.85rem 1.25rem;
  font-size: 0.9rem; font-family: var(--font);
  background: white;
  border: 1px solid var(--ash);
  border-radius: var(--r-pill);
  color: var(--ink); outline: none;
  box-shadow: rgba(14,15,12,0.08) 0 0 0 1px;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.email-in::placeholder { color: var(--muted); }
.email-in:focus { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(0,63,135,0.1); }
.btn-cta {
  background: var(--red);
  color: white; border: none;
  border-radius: var(--r-pill);
  padding: 0.85rem 1.75rem;
  font-size: 0.9rem; font-weight: 700; font-family: var(--font);
  cursor: pointer; white-space: nowrap;
  transition: background 0.2s, transform 0.15s, box-shadow 0.2s;
  box-shadow: 0 4px 16px rgba(212,18,42,0.35);
}
.btn-cta:hover { background: var(--red-bright); transform: translateY(-1px); box-shadow: 0 6px 20px rgba(212,18,42,0.4); }
.btn-cta:active { transform: translateY(0); }
.success-msg { display:none; align-items:center; justify-content:center; gap:0.5rem; font-size:0.875rem; color:var(--blue); font-weight:500; margin-top:1rem; }
.success-msg.vis { display:flex; }

/* ── Section commons ── */
.section-label {
  font-size: 0.7rem; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--red); font-weight: 700; margin-bottom: 0.4rem;
}
.section-h {
  font-weight: 800;
  font-size: clamp(1.8rem, 3.5vw, 2.6rem);
  letter-spacing: -0.03em; line-height: 1.1;
  color: var(--ink);
}
.section-h .blue { color: var(--blue); }
.section-h .red  { color: var(--red-bright); }
.section-p { font-size: 0.95rem; color: var(--ghost); line-height: 1.7; }
.divider-h { height: 1px; background: linear-gradient(90deg, transparent, rgba(212,18,42,0.25), transparent); }

/* ── How It Works / Phones ── */
.how-section {
  background: white;
  padding: 5rem 1.5rem;
  border-top: 1px solid var(--ash);
}
.phones-wrap {
  display: flex; align-items: flex-start; justify-content: center;
  gap: 1.5rem; flex-wrap: wrap; margin-top: 3rem; margin-bottom: 5rem;
}
.phone-col { display:flex; flex-direction:column; align-items:center; gap:1rem; }
.step-pill {
  font-size: 0.62rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
  background: var(--ash); color: var(--slate);
  border-radius: var(--r-pill); padding: 0.3rem 0.85rem;
  border: 1px solid rgba(0,0,0,0.06);
}
.step-pill.active { background: var(--blue); color: white; border-color: var(--blue); }
.step-pill.done   { background: rgba(34,197,94,0.1); color: rgba(21,128,61,0.9); border-color: rgba(34,197,94,0.25); }

/* Phone shell */
.phone {
  background: #0a1628;
  border-radius: 2.5rem;
  border: 2px solid rgba(255,255,255,0.07);
  box-shadow: 0 30px 70px rgba(0,0,0,0.15), rgba(14,15,12,0.1) 0 0 0 1px;
  position: relative; overflow: hidden; flex-shrink: 0;
}
.phone-sm { width: 190px; height: 390px; }
.phone-md {
  width: 205px; height: 420px;
  border-color: rgba(0,63,135,0.25);
  box-shadow: 0 40px 90px rgba(0,0,0,0.18), 0 0 0 1px rgba(0,63,135,0.1), 0 0 40px rgba(0,63,135,0.08);
  transform: scale(1.04);
}
.phone-notch {
  position: absolute; top: 10px; left: 50%; transform: translateX(-50%);
  width: 64px; height: 11px; background: #000; border-radius: 6px; z-index: 10;
}
.pi { padding: 34px 14px 16px; height: 100%; display: flex; flex-direction: column; gap: 9px; }
.pi-center { align-items: center; }

/* Phone internals */
.p-logo-wrap { display:flex; flex-direction:column; align-items:center; margin-bottom:2px; margin-top:4px; }
.p-logo-mark { width:32px;height:32px; background:var(--red); border-radius:9px; display:flex;align-items:center;justify-content:center; box-shadow:0 4px 12px rgba(212,18,42,0.4); margin-bottom:4px; }
.p-logo-mark span { font-weight:900; color:white; font-size:0.95rem; }
.p-brand { font-weight:700; color:white; font-size:0.78rem; letter-spacing:-0.02em; }
.p-sub   { font-size:0.54rem; color:rgba(255,255,255,0.3); margin-top:1px; }
.p-label { font-size:0.5rem; color:rgba(255,255,255,0.38); letter-spacing:0.06em; text-transform:uppercase; margin-bottom:3px; }
.p-row   { background:rgba(255,255,255,0.06); border:1px solid rgba(255,255,255,0.07); border-radius:8px; padding:6px 9px; display:flex; align-items:center; gap:6px; }
.p-row.hi-blue { border-color:rgba(0,63,135,0.4); }
.p-txt { font-size:0.54rem; color:rgba(255,255,255,0.55); }
.p-dots{ font-size:0.6rem; color:rgba(255,255,255,0.3); letter-spacing:3px; }
.p-online { width:5px;height:5px; background:#22c55e; border-radius:50%; margin-left:auto; }
.p-btn-red { background:var(--red); border-radius:9px; padding:8px; text-align:center; font-weight:700; font-size:0.66rem; color:white; }
.p-btn-ghost { background:rgba(255,255,255,0.04); border:1px solid rgba(255,255,255,0.06); border-radius:9px; padding:7px; text-align:center; display:flex;align-items:center;justify-content:center;gap:5px; }
.p-btn-ghost span { font-size:0.52rem; color:rgba(255,255,255,0.32); }
.p-or { display:flex;align-items:center;gap:5px; }
.p-or::before,.p-or::after { content:''; flex:1; height:1px; background:rgba(255,255,255,0.07); }
.p-or span { font-size:0.48rem; color:rgba(255,255,255,0.2); }
.p-footer { text-align:center; font-size:0.48rem; color:rgba(255,255,255,0.18); margin-top:auto; }
.p-link { color:#4A9EFF; }
.p-header { display:flex;align-items:center;justify-content:space-between;margin-bottom:1px; }
.p-screen-title { font-weight:700;font-size:0.68rem;color:white; }
.p-balance { background:rgba(0,63,135,0.14); border:1px solid rgba(0,63,135,0.25); border-radius:10px; padding:8px 10px; display:flex;align-items:center;justify-content:space-between; }
.p-amt { font-weight:700; font-size:0.88rem; color:white; }
.p-cur { font-size:0.54rem; color:rgba(255,255,255,0.4); }
.p-logo-sm { width:24px;height:24px; background:var(--red); border-radius:6px; display:flex;align-items:center;justify-content:center; }
.p-logo-sm span { font-weight:900;color:white;font-size:0.65rem; }
.p-tabs { display:flex;gap:3px; }
.p-tab { flex:1; background:rgba(255,255,255,0.04); border:1px solid rgba(255,255,255,0.06); border-radius:6px; padding:4px; text-align:center; font-size:0.5rem;font-weight:600;color:rgba(255,255,255,0.28); }
.p-tab.on { background:rgba(0,63,135,0.2); border-color:rgba(0,63,135,0.5); color:#4A9EFF; }
.p-fee { background:rgba(212,18,42,0.08); border:1px solid rgba(212,18,42,0.18); border-radius:7px; padding:5px 9px; display:flex;justify-content:space-between;align-items:center; }
.p-fee-val { font-weight:600;font-size:0.58rem;color:rgba(212,18,42,0.9); }
.p-note { background:rgba(255,255,255,0.04); border:1px solid rgba(255,255,255,0.06); border-radius:7px; padding:5px 9px; }
.p-send { background:var(--blue); border-radius:10px; padding:9px; text-align:center; display:flex;align-items:center;justify-content:center;gap:5px; margin-top:auto; box-shadow:0 4px 16px rgba(0,63,135,0.4); }
.p-send span { font-weight:700;font-size:0.66rem;color:white; }
.p-check-ring { width:52px;height:52px; background:rgba(34,197,94,0.1); border:2px solid rgba(34,197,94,0.3); border-radius:50%; display:flex;align-items:center;justify-content:center; margin:2px auto; }
.p-big-amt { font-weight:800;font-size:1rem;color:white; }
.p-receipt-rows { width:100%; display:flex;flex-direction:column;gap:3px; background:rgba(255,255,255,0.04); border-radius:8px; padding:6px 9px; }
.p-rrow { display:flex;justify-content:space-between;align-items:center; }
.p-rrow span:first-child { font-size:0.48rem;color:rgba(255,255,255,0.32); }
.p-rrow span:last-child  { font-size:0.5rem;color:rgba(255,255,255,0.7);font-weight:500; }
.p-green { color:#22c55e; }
.p-rrow-note { background:rgba(0,63,135,0.08); border:1px solid rgba(0,63,135,0.15); border-radius:6px; padding:4px 9px; width:100%; text-align:center; }
.p-rrow-note span { font-size:0.5rem;color:rgba(255,255,255,0.4); }
.p-done { background:rgba(255,255,255,0.06); border:1px solid rgba(255,255,255,0.08); border-radius:9px; padding:6px 20px; font-weight:600;font-size:0.58rem;color:rgba(255,255,255,0.5); width:100%;text-align:center;margin-top:auto; }

/* Phone arrows */
.phone-arrow { display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;padding-top:78px;flex-shrink:0; }
.arrow-lbl { font-size:0.54rem; color:var(--muted); }

/* Float anims */
.f1 { animation: flt 6s ease-in-out infinite; }
.f2 { animation: fltLg 6s ease-in-out 0.8s infinite; }
.f3 { animation: flt 6s ease-in-out 1.6s infinite; }
@keyframes flt   { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-10px)} }
@keyframes fltLg { 0%,100%{transform:scale(1.04) translateY(0)} 50%{transform:scale(1.04) translateY(-10px)} }

/* QR Showcase */
.qr-section { padding: 0 1.5rem 5rem; background: white; }
.qr-row { display:flex;justify-content:center;align-items:center;gap:2rem;flex-wrap:wrap; }
.qr-arrow { display:flex;flex-direction:column;align-items:center;gap:4px;flex-shrink:0; }
.qr-vf {
  width:96px;height:96px; background:rgba(255,255,255,0.04); border-radius:10px;
  margin:8px auto 0; position:relative; display:flex;align-items:center;justify-content:center; overflow:hidden;
}
.qc { position:absolute; width:13px;height:13px; border-color:var(--blue); border-style:solid; border-width:0; }
.qc.tl{top:5px;left:5px;border-top-width:2px;border-left-width:2px;border-top-left-radius:3px;}
.qc.tr{top:5px;right:5px;border-top-width:2px;border-right-width:2px;border-top-right-radius:3px;}
.qc.bl{bottom:5px;left:5px;border-bottom-width:2px;border-left-width:2px;border-bottom-left-radius:3px;}
.qc.br{bottom:5px;right:5px;border-bottom-width:2px;border-right-width:2px;border-bottom-right-radius:3px;}
.qr-scan-line {
  position:absolute;left:7px;right:7px;height:1.5px;
  background:linear-gradient(90deg,transparent,var(--blue),transparent);
  animation:scanLine 2s ease-in-out infinite;
}
@keyframes scanLine{0%{top:8px}100%{top:82px}}
.paid-pill { background:var(--blue); color:white; border-radius:var(--r-pill); padding:4px 10px; font-size:0.55rem;font-weight:700; display:flex;align-items:center;gap:4px; margin:6px auto 0; }
.qr-card { background:white; border:1px solid var(--ash); border-radius:var(--r-card); padding:1.5rem; display:flex;flex-direction:column;align-items:center;gap:0.5rem; box-shadow:var(--shadow-md); }
.qr-merch-label { font-size:0.68rem;font-weight:600;color:var(--muted);letter-spacing:0.08em;text-transform:uppercase; }
.qr-merch-name { font-size:0.9rem;font-weight:700;color:var(--ink); }
.qr-merch-sub { font-size:0.72rem;color:var(--ghost); }
.paid-card { background:var(--blue); border-radius:var(--r-card); padding:1.75rem 1.5rem; display:flex;flex-direction:column;align-items:center;gap:0.5rem; min-width:138px; }
.paid-ring { width:58px;height:58px; background:rgba(255,255,255,0.15); border-radius:50%; display:flex;align-items:center;justify-content:center; margin-bottom:4px; }
.paid-amt { font-size:1.4rem;font-weight:900;color:white;letter-spacing:-0.03em; }
.paid-sub { font-size:0.72rem;color:rgba(255,255,255,0.6); }
.paid-time { display:flex;align-items:center;gap:4px; background:var(--red); color:white; border-radius:var(--r-pill); padding:3px 10px;font-size:0.68rem;font-weight:700;margin:4px 0; }
.paid-det { font-size:0.68rem;color:rgba(255,255,255,0.5); }

/* ── Ticker ── */
.ticker { background:var(--red); padding:1rem 0; overflow:hidden; }
.mq-wrap { overflow:hidden; }
.mq-track { display:flex;animation:marquee 22s linear infinite;white-space:nowrap; }
@keyframes marquee{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}
.mq-item { font-weight:700;font-size:0.8rem;letter-spacing:0.12em;text-transform:uppercase;color:white;padding:0 1.2rem; }
.mq-dot  { color:rgba(255,255,255,0.4);font-size:0.65rem;padding:0 0.2rem;display:flex;align-items:center; }

/* ── Features ── */
.features { background:var(--ash); padding:5rem 1.5rem; }
.feat-grid { display:grid;grid-template-columns:repeat(1,1fr);gap:1.25rem;margin-top:3.5rem; }
@media(min-width:640px){.feat-grid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1024px){.feat-grid{grid-template-columns:repeat(3,1fr)}}
.feat-card {
  background:white; border-radius:var(--r-card); padding:1.75rem;
  box-shadow:var(--shadow-md); border:1px solid transparent;
  transition:transform 0.3s, box-shadow 0.3s, border-color 0.3s;
  opacity:0;
}
.feat-card:hover { transform:translateY(-4px); box-shadow:var(--shadow-xl); border-color:rgba(0,63,135,0.15); }
.feat-card.dark { background:var(--blue); }
.feat-card.dark .feat-title { color:white; }
.feat-card.dark .feat-desc  { color:rgba(255,255,255,0.6); }
.feat-icon { width:44px;height:44px; background:rgba(0,63,135,0.06); border:1px solid rgba(0,63,135,0.1); border-radius:12px; display:flex;align-items:center;justify-content:center; margin-bottom:1.2rem; }
.feat-card.dark .feat-icon { background:rgba(255,255,255,0.12); border-color:rgba(255,255,255,0.18); }
.feat-title { font-weight:700;font-size:1rem;color:var(--ink);margin-bottom:0.5rem; }
.feat-desc  { font-size:0.875rem;line-height:1.65;color:var(--slate); }
.feat-hl    { color:var(--red);font-weight:700; }

/* ── Security ── */
.security { background:white; padding:5rem 1.5rem; border-top:1px solid var(--ash); }
.sec-grid { display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1.25rem;margin-top:3.5rem; }
.sec-card { background:var(--ash); border-radius:var(--r-card); padding:1.75rem; display:flex;flex-direction:column;gap:1rem; }
.sec-card.blue { background:var(--blue); }
.sec-card.blue .sec-title { color:white; }
.sec-card.blue .sec-desc  { color:rgba(255,255,255,0.62); }
.sec-icon { width:48px;height:48px; background:var(--blue); border-radius:14px; display:flex;align-items:center;justify-content:center; flex-shrink:0; }
.sec-card.blue .sec-icon { background:rgba(255,255,255,0.15); }
.sec-title { font-weight:700;font-size:0.95rem;color:var(--ink); }
.sec-desc  { font-size:0.875rem;line-height:1.65;color:var(--slate); }

/* ── Diaspora ── */
.diaspora { background:var(--blue); padding:5rem 1.5rem; }
.diaspora-layout { max-width:1100px;margin:0 auto; display:flex;align-items:center;gap:3rem;flex-wrap:wrap; }
.diaspora-text { flex:1;min-width:260px; }
.diaspora-icon { width:50px;height:50px; background:rgba(255,255,255,0.1); border:1px solid rgba(255,255,255,0.2); border-radius:14px; display:flex;align-items:center;justify-content:center; margin-bottom:1.25rem; }
.diaspora-h { font-weight:900;font-size:clamp(1.8rem,3.5vw,2.5rem);color:white;letter-spacing:-0.03em;margin-bottom:1rem; }
.diaspora-p { font-size:1rem;line-height:1.7;color:rgba(255,255,255,0.6); }
.diaspora-p .accent { color:#E8223C; }
.diaspora-img { flex:1;min-width:260px; }
.family-img { width:100%; border-radius:24px; object-fit:cover; aspect-ratio:4/3; box-shadow:0 30px 80px rgba(0,0,0,0.3); border:2px solid rgba(255,255,255,0.08); }
@media(max-width:768px){ .diaspora-layout{flex-direction:column} .diaspora-img{order:-1} .diaspora-text{text-align:center} .diaspora-icon{margin:0 auto 1.25rem} }

/* ── CTA ── */
.cta-sec { background:var(--cyan); padding:5rem 1.5rem; text-align:center; }
.cta-h { font-weight:900;font-size:clamp(2rem,5vw,3rem);color:var(--ink);letter-spacing:-0.03em;margin-bottom:1rem;line-height:1.1; }
.cta-hl { background:rgba(0,63,135,0.08); color:var(--blue); padding:0 6px 2px; border-radius:6px; }
.cta-p { font-size:1rem;color:var(--ghost);margin-bottom:2rem;line-height:1.6; }
.cta-note { font-size:0.76rem;color:var(--muted);margin-top:1rem; }
.email-in-light {
  width:100%; padding:0.85rem 1.25rem; font-size:0.9rem; font-family:var(--font);
  background:white; border:1px solid var(--ash); border-radius:var(--r-pill);
  color:var(--ink); outline:none;
  box-shadow:rgba(14,15,12,0.08) 0 0 0 1px;
  transition:border-color 0.2s, box-shadow 0.2s;
}
.email-in-light::placeholder { color:var(--muted); }
.email-in-light:focus { border-color:var(--blue); box-shadow:0 0 0 3px rgba(0,63,135,0.1); }
.success-blue { color:var(--blue); }

/* ── Footer ── */
.footer { background:var(--navy); border-top:1px solid rgba(255,255,255,0.04); padding:2.5rem 1.5rem; }
.footer-inner { max-width:1100px;margin:0 auto; }
.footer-top { display:flex;justify-content:space-between;align-items:flex-start;flex-wrap:wrap;gap:2rem;margin-bottom:2rem; }
.footer-logo-row { display:flex;align-items:center;gap:0.6rem;margin-bottom:0.9rem; }
.footer-links { display:flex;flex-direction:column;gap:0.55rem; }
.footer-link { display:flex;align-items:center;gap:0.4rem;color:rgba(255,255,255,0.4);text-decoration:none;font-size:0.875rem;transition:color 0.2s; }
.footer-link:hover { color:var(--red-bright); }
.footer-dot { width:3px;height:3px;border-radius:50%;background:rgba(212,18,42,0.5);flex-shrink:0; }
.footer-tag { font-size:0.8rem;color:rgba(255,255,255,0.22);line-height:1.6;text-align:right;max-width:210px; }
.footer-div { height:1px;background:rgba(255,255,255,0.06);margin-bottom:1.25rem; }
.footer-bottom { display:flex;justify-content:space-between;flex-wrap:wrap;gap:0.5rem; }
.footer-copy { font-size:0.75rem;color:rgba(255,255,255,0.22); }
.footer-reg  { font-size:0.75rem;color:rgba(255,255,255,0.14); }
.footer-flag { text-align:center;margin-top:1.5rem;padding-top:1.25rem;border-top:1px solid rgba(255,255,255,0.04); display:flex;flex-direction:column;align-items:center;gap:0.5rem; }
.f-stripes { display:flex;gap:0.3rem; }
.f-stripe { height:2px;width:38px;border-radius:2px; }
.f-stripe.b { background:rgba(0,63,135,0.8); }
.f-stripe.r { background:rgba(212,18,42,0.8); }
.footer-motto { font-size:0.68rem;letter-spacing:0.15em;text-transform:uppercase;color:rgba(255,255,255,0.18);font-weight:500; }

/* ── Modals ── */
.modal-bg { position:fixed;inset:0;background:rgba(14,15,12,0.5);z-index:200;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px); }
.modal-box {
  position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);
  z-index:201;width:min(700px,95vw);max-height:85vh;
  background:white; border:1px solid var(--ash); border-radius:24px; overflow:hidden; box-shadow:var(--shadow-xl);
}
.modal-head { display:flex;align-items:center;justify-content:space-between;padding:1.25rem 1.75rem;border-bottom:1px solid var(--ash); }
.modal-title { font-weight:700;color:var(--ink);font-size:1rem; }
.modal-close { background:var(--ash);border:none;border-radius:8px;padding:0.35rem 0.7rem;color:var(--slate);cursor:pointer;font-size:0.78rem;font-family:var(--font);transition:all 0.15s; }
.modal-close:hover { background:var(--red);color:white; }
.modal-body { padding:1.75rem;overflow-y:auto;max-height:calc(85vh - 75px);font-size:0.875rem;line-height:1.75;color:var(--slate); }
.modal-body h3 { color:var(--ink);font-weight:700;font-size:0.9rem;margin:1.25rem 0 0.4rem; }
.modal-body a { color:var(--blue); }
.modal-body strong { color:var(--ink); }

/* ── Animations ── */
@keyframes fadeUp { 0%{opacity:0;transform:translateY(28px)} 100%{opacity:1;transform:translateY(0)} }
.ani { opacity:0; }
.a1 { animation:fadeUp 0.75s ease 0.1s  forwards; }
.a2 { animation:fadeUp 0.75s ease 0.25s forwards; }
.a3 { animation:fadeUp 0.75s ease 0.4s  forwards; }
.a4 { animation:fadeUp 0.75s ease 0.55s forwards; }

/* Scrollbar */
::-webkit-scrollbar { width:6px; }
::-webkit-scrollbar-track { background:var(--ash); }
::-webkit-scrollbar-thumb { background:var(--blue); border-radius:3px; }

/* Responsive */
@media(max-width:640px){
  .phones-wrap{gap:0}
  .phone-arrow{display:none}
  .phone-sm{width:160px!important;height:330px!important}
  .phone-md{width:175px!important;height:360px!important}
  .qr-arrow{display:none}
  .qr-row{gap:1rem}
  .globe-wrap{width:clamp(260px,90vw,380px);height:clamp(260px,90vw,380px)}
  .orb-badge{width:36px;height:36px;font-size:.88rem}
}