/* =========================================================
   AuroCard — Design System
   White theme · brand green #1fb86b · premium 3D fintech
   ========================================================= */

@import url('https://fonts.googleapis.com/css2?family=Onest:wght@400;500;600;700;800&family=Unbounded:wght@500;600;700&display=swap');

:root {
  /* Brand */
  --brand:        #1fb86b;
  --brand-600:    #16a25d;
  --brand-700:    #0f8a4e;
  --brand-deep:   #0b5e36;
  --brand-glow:   #38e08c;
  --brand-tint:   #eafaf1;
  --brand-tint-2: #f3fbf6;

  /* Ink / neutrals */
  --ink:        #0a1611;
  --ink-soft:   #1d2b24;
  --muted:      #5e6f66;
  --muted-2:    #8a988f;
  --line:       #e7ece9;
  --line-soft:  #eef2f0;
  --surface:    #ffffff;
  --bg:         #f6f8f7;
  --bg-2:       #eef4f0;

  /* Currency accents */
  --usd: #2f7d52;
  --eur: #2b66c2;
  --rub: #d98a2b;

  /* Radii */
  --r-sm: 12px;
  --r-md: 18px;
  --r-lg: 28px;
  --r-xl: 36px;
  --r-pill: 999px;

  /* Shadow */
  --sh-1: 0 1px 2px rgba(10,22,17,.04), 0 2px 8px rgba(10,22,17,.04);
  --sh-2: 0 8px 24px rgba(10,40,25,.07), 0 2px 6px rgba(10,40,25,.05);
  --sh-3: 0 24px 60px rgba(11,94,54,.14), 0 8px 20px rgba(11,94,54,.08);
  --sh-card: 0 40px 80px -20px rgba(11,94,54,.35), 0 18px 40px -12px rgba(10,22,17,.28);
  --sh-green: 0 14px 34px -8px rgba(31,184,107,.5);

  --maxw: 1200px;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: 'Onest', system-ui, -apple-system, sans-serif;
  color: var(--ink);
  background: var(--surface);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  line-height: 1.5;
  overflow-x: hidden;
}

h1, h2, h3, h4 { margin: 0; letter-spacing: -0.02em; line-height: 1.04; font-weight: 700; }
p  { margin: 0; }
a  { color: inherit; text-decoration: none; }
img, svg { display: block; max-width: 100%; }
button { font-family: inherit; cursor: pointer; border: none; background: none; }

.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 28px; }

/* Display type */
.display {
  font-family: 'Unbounded', 'Onest', sans-serif;
  font-weight: 600;
  letter-spacing: -0.03em;
}
.grad-text {
  background: linear-gradient(100deg, var(--brand-700), var(--brand) 60%, var(--brand-glow));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* Eyebrow */
.eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 13px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase;
  color: var(--brand-700);
  background: var(--brand-tint);
  border: 1px solid color-mix(in srgb, var(--brand) 18%, white);
  padding: 7px 14px; border-radius: var(--r-pill);
}
.eyebrow .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--brand);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--brand) 22%, transparent); }

/* Buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  font-weight: 600; font-size: 16px; line-height: 1;
  padding: 16px 26px; border-radius: var(--r-pill);
  transition: transform .25s cubic-bezier(.2,.8,.2,1), box-shadow .25s, background .2s;
  white-space: nowrap;
}
.btn svg { width: 18px; height: 18px; }
.btn-primary {
  color: #fff;
  background: linear-gradient(180deg, var(--brand-glow), var(--brand) 40%, var(--brand-600));
  box-shadow: var(--sh-green);
}
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 18px 40px -8px rgba(31,184,107,.6); }
.btn-ghost {
  color: var(--ink); background: #fff; border: 1.5px solid var(--line);
}
.btn-ghost:hover { border-color: var(--brand); color: var(--brand-700); transform: translateY(-2px); }
.btn-dark { color:#fff; background: var(--ink); }
.btn-dark:hover { transform: translateY(-2px); background:#0d1c15; }
.btn-lg { padding: 19px 34px; font-size: 17px; }

/* Section scaffolding */
section { position: relative; }
.section { padding: 100px 0; }
.section-head { max-width: 720px; margin-bottom: 56px; }
.section-head.center { margin-inline: auto; text-align: center; }
.section-title { font-size: clamp(30px, 4vw, 50px); font-weight: 700; letter-spacing: -.03em; }
.section-sub { margin-top: 18px; font-size: 19px; color: var(--muted); line-height: 1.5; }

/* Card surface */
.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-1);
}

/* =========================================================
   HEADER
   ========================================================= */
.site-header {
  position: sticky; top: 0; z-index: 80;
  background: color-mix(in srgb, white 80%, transparent);
  backdrop-filter: saturate(160%) blur(16px);
  border-bottom: 1px solid var(--line-soft);
}
.nav { display: flex; align-items: center; gap: 28px; height: 74px; }
.brand { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 20px; letter-spacing: -.02em; }
.brand .logo {
  width: 34px; height: 34px; border-radius: 10px;
  background: linear-gradient(145deg, var(--brand-glow), var(--brand-600));
  display: grid; place-items: center; color: #fff; box-shadow: var(--sh-green);
  position: relative; overflow: hidden;
}
.brand .logo::after { content:""; position:absolute; inset:0; background: linear-gradient(135deg, rgba(255,255,255,.5), transparent 45%); }
.brand .logo svg { width: 19px; height: 19px; position: relative; z-index: 1; }
.nav-links { display: flex; align-items: center; gap: 4px; margin-left: 14px; }
.nav-links a {
  font-size: 15px; font-weight: 500; color: var(--ink-soft);
  padding: 9px 14px; border-radius: var(--r-pill); transition: background .15s, color .15s;
}
.nav-links a:hover { background: var(--brand-tint); color: var(--brand-700); }
.nav-cta { margin-left: auto; display: flex; align-items: center; gap: 12px; }
.nav-login { font-weight: 600; font-size: 15px; color: var(--ink); padding: 10px 14px; }
.nav-login:hover { color: var(--brand-700); }
.burger { display: none; }

/* =========================================================
   3D VIRTUAL CARD
   ========================================================= */
.card3d-stage { perspective: 1600px; position: relative; }

.vcard {
  position: relative;
  width: 380px; aspect-ratio: 1.586/1;
  border-radius: 26px;
  transform-style: preserve-3d;
  color: #eafff4;
  box-shadow: var(--sh-card);
  overflow: hidden;
  background:
    radial-gradient(120% 140% at 12% 8%, #2fe089 0%, transparent 42%),
    radial-gradient(120% 130% at 88% 90%, #0b6e3e 0%, transparent 50%),
    linear-gradient(135deg, #14a35e 0%, #0e8a4e 48%, #0a5c37 100%);
}
.vcard.alt {
  background:
    radial-gradient(120% 140% at 85% 10%, #38e08c 0%, transparent 44%),
    linear-gradient(135deg, #0b3f28 0%, #0d6e44 60%, #0a4a30 100%);
}
.vcard::before { /* gloss sweep */
  content:""; position: absolute; inset: 0;
  background: linear-gradient(115deg, rgba(255,255,255,.32) 0%, rgba(255,255,255,0) 32%, rgba(255,255,255,0) 60%, rgba(255,255,255,.12) 100%);
  mix-blend-mode: screen;
}
.vcard::after { /* subtle noise/gloss top */
  content:""; position:absolute; inset:0;
  background: radial-gradient(80% 50% at 30% 0%, rgba(255,255,255,.18), transparent 60%);
}
.vcard-inner { position: relative; z-index: 2; height: 100%; padding: 26px 28px; display: flex; flex-direction: column; }
.vcard-top { display: flex; align-items: flex-start; justify-content: space-between; }
.vcard-brand { font-family:'Unbounded',sans-serif; font-weight:600; font-size: 19px; letter-spacing:-.02em; display:flex; align-items:center; gap:8px; }
.vcard-brand .mk { width:22px;height:22px;border-radius:7px;background:rgba(255,255,255,.16);display:grid;place-items:center;backdrop-filter:blur(2px); }
.vcard-brand .mk svg{width:13px;height:13px;}
.vcard-wifi { opacity:.85; }
.vcard-chip {
  margin-top: 22px; width: 46px; height: 35px; border-radius: 8px;
  background: linear-gradient(135deg, #f6d98a, #c79a3e 60%, #e7c876);
  box-shadow: inset 0 1px 2px rgba(255,255,255,.6), inset 0 -2px 4px rgba(0,0,0,.25);
  position: relative;
}
.vcard-chip::after{ content:""; position:absolute; inset:6px 8px; border-radius:3px;
  background-image: linear-gradient(90deg, rgba(0,0,0,.25) 1px, transparent 1px), linear-gradient(rgba(0,0,0,.25) 1px, transparent 1px);
  background-size: 11px 9px; opacity:.5;}
.vcard-num { margin-top: auto; font-size: 21px; letter-spacing: .14em; font-weight: 600; font-variant-numeric: tabular-nums; text-shadow: 0 1px 2px rgba(0,0,0,.25); display:flex; gap:14px; }
.vcard-num span { display:flex; gap:5px; }
.vcard-bottom { margin-top: 16px; display:flex; align-items:flex-end; justify-content: space-between; }
.vcard-bottom .lbl { font-size:9px; letter-spacing:.16em; text-transform:uppercase; opacity:.65; }
.vcard-bottom .val { font-size:14px; font-weight:600; letter-spacing:.04em; }
.vcard-mc { display:flex; }
.vcard-mc i { width: 30px; height:30px; border-radius:50%; display:block; }
.vcard-mc i:first-child{ background:#f25b48; }
.vcard-mc i:last-child{ background:#f7b500; margin-left:-13px; mix-blend-mode: hard-light; }

/* floating coins / glyphs */
.coin {
  position: absolute; border-radius: 50%;
  display: grid; place-items: center;
  font-family:'Unbounded',sans-serif; font-weight: 600;
  color: #fff;
  box-shadow: 0 18px 36px -10px rgba(10,40,25,.4), inset 0 2px 6px rgba(255,255,255,.5), inset 0 -4px 8px rgba(0,0,0,.18);
  transform-style: preserve-3d;
}
.coin::after{ content:""; position:absolute; inset:0; border-radius:50%; background:linear-gradient(135deg, rgba(255,255,255,.55), transparent 50%); }
.coin.usd { background: linear-gradient(150deg,#3ddd87,#159b56); }
.coin.eur { background: linear-gradient(150deg,#6aa6ff,#2b66c2); }
.coin.rub { background: linear-gradient(150deg,#ffce7a,#e08a2b); }
.coin span { position: relative; z-index:1; }

/* floating product widgets */
.hero-widget {
  position: absolute; z-index: 6;
  background: rgba(255,255,255,.82); backdrop-filter: saturate(160%) blur(14px);
  border: 1px solid rgba(255,255,255,.9);
  box-shadow: 0 18px 40px -12px rgba(10,40,25,.28), 0 2px 6px rgba(10,40,25,.06);
  border-radius: 18px; padding: 13px 15px;
}
.hw-toast { display: flex; align-items: center; gap: 12px; white-space: nowrap; }
.hw-toast .tk { width: 38px; height: 38px; border-radius: 12px; flex: none; display: grid; place-items: center;
  background: linear-gradient(160deg,var(--brand-glow),var(--brand-600)); color: #fff; box-shadow: var(--sh-green); }
.hw-toast .t-t { font-size: 14px; font-weight: 700; letter-spacing: -.01em; }
.hw-toast .t-s { font-size: 12px; color: var(--muted); margin-top: 1px; }
.hw-convert { min-width: 188px; }
.hw-convert .c-h { display: flex; align-items: center; justify-content: space-between; font-size: 11px; color: var(--muted); font-weight: 600; letter-spacing: .02em; }
.hw-convert .c-h .live { display: inline-flex; align-items: center; gap: 5px; color: var(--brand-700); }
.hw-convert .c-h .live i { width: 6px; height: 6px; border-radius: 50%; background: var(--brand); box-shadow: 0 0 0 3px color-mix(in srgb,var(--brand) 22%, transparent); animation: pulse 1.6s ease-in-out infinite; }
.hw-convert .c-row { display: flex; align-items: center; gap: 10px; margin-top: 9px; }
.hw-convert .c-amt { font-family: 'Unbounded', sans-serif; font-size: 18px; font-weight: 600; letter-spacing: -.02em; }
.hw-convert .c-amt small { font-size: 12px; font-weight: 500; color: var(--muted); font-family: 'Onest', sans-serif; }
.hw-convert .c-ar { color: var(--brand); flex: none; }
.hw-convert .c-out { color: var(--brand-700); }
.hw-convert .c-bar { height: 6px; border-radius: 4px; margin-top: 11px; background: var(--line);
  background-image: linear-gradient(90deg, var(--brand-glow), var(--brand-600)); background-repeat: no-repeat; background-size: 72% 100%; }

@keyframes pulse { 0%,100%{ opacity:1 } 50%{ opacity:.35 } }

/* glassy 3D currency glyphs (crystal/ice look) */
.glyph3d {
  position: absolute; z-index: 5; pointer-events: none; user-select: none;
  font-family: 'Unbounded', sans-serif; font-weight: 700; line-height: 1;
}
.glyph3d .face {
  display: block; position: relative;
  background: linear-gradient(150deg, #f6fffb 0%, #c4f3da 30%, #63d79c 62%, #11a25d 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  text-shadow:
    1px 1px 0 #8fe0bb, 2px 2px 0 #6dd3a4, 3px 3px 0 #4ec78d,
    4px 5px 0 #34ba79, 5px 6px 0 #1ea766, 6px 8px 0 #128c50,
    7px 10px 1px #0c6e3f, 8px 14px 20px rgba(11,94,54,.5);
}
.glyph3d::before {
  content: attr(data-c); position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(150deg, #9defc4, #1fb86b);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  filter: blur(15px); opacity: .55;
}
.glyph3d::after {
  content: attr(data-c); position: absolute; inset: 0;
  background: linear-gradient(155deg, rgba(255,255,255,.95) 0%, rgba(255,255,255,0) 40%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
.glyph3d.on-dark .face { text-shadow:
    1px 1px 0 #bdf3d6, 2px 2px 0 #8fe6ba, 3px 3px 0 #63d79c,
    4px 5px 0 #3fc888, 5px 6px 0 #22b270, 6px 8px 0 #149a5c,
    7px 10px 1px #0c7a46, 8px 14px 22px rgba(0,0,0,.4); }

/* float anim */
@keyframes floaty { 0%,100%{ transform: translateY(0) } 50%{ transform: translateY(-16px) } }
@keyframes floaty2 { 0%,100%{ transform: translateY(0) rotate(-8deg) } 50%{ transform: translateY(-22px) rotate(-2deg) } }
@keyframes spin3d { 0%{ transform: rotateY(0) } 100%{ transform: rotateY(360deg) } }

/* =========================================================
   HERO
   ========================================================= */
.hero { position: relative; padding: 64px 0 90px; overflow: hidden; }
.hero-bg {
  position: absolute; inset: 0; z-index:0; pointer-events:none;
  background:
    radial-gradient(50% 50% at 78% 28%, rgba(31,184,107,.16), transparent 70%),
    radial-gradient(40% 50% at 6% 4%, rgba(31,184,107,.10), transparent 70%);
}
.hero-grid-lines{ position:absolute; inset:0; z-index:0; opacity:.5;
  background-image: linear-gradient(var(--line-soft) 1px, transparent 1px), linear-gradient(90deg, var(--line-soft) 1px, transparent 1px);
  background-size: 64px 64px; mask-image: radial-gradient(70% 70% at 50% 30%, #000, transparent 80%);}
.hero-inner { position: relative; z-index: 2; display: grid; grid-template-columns: 1.04fr .96fr; gap: 40px; align-items: center; }
.hero h1 { font-size: clamp(34px, 5vw, 62px); font-weight: 700; letter-spacing:-.035em; line-height: 1.02; }
.hero h1 em { font-style: normal; }
.hero-lead { margin-top: 22px; font-size: 20px; color: var(--muted); max-width: 520px; line-height: 1.5; }
.hero-actions { margin-top: 32px; display: flex; gap: 14px; flex-wrap: wrap; align-items: center; }
.hero-actions .mini { font-size:14px; color: var(--muted); display:flex; align-items:center; gap:8px; }
.hero-actions .mini b{ color: var(--ink); font-weight:700; }

.hero-visual { position: relative; height: 500px; }
.hero-card-wrap { position: absolute; top: 50%; left: 50%; width: 366px; margin-left: -183px; margin-top: -70px; }
.hero-visual .vcard { width: 366px; }
.hero-visual .vcard.behind {
  position:absolute; top: -42px; left: 36px; width: 366px;
  transform: rotate(-9deg) scale(.92); filter: brightness(.92) saturate(.9); opacity:.85; z-index:-1;
}

/* service price chips orbit */
.svc-chip {
  position: absolute; z-index: 5;
  display: flex; align-items: center; gap: 10px;
  background: rgba(255,255,255,.86); backdrop-filter: blur(8px);
  border: 1px solid var(--line); border-radius: var(--r-pill);
  padding: 9px 15px 9px 9px; box-shadow: var(--sh-2);
  font-size: 14px; font-weight: 600; white-space: nowrap;
}
.svc-chip .ic { width: 30px; height: 30px; border-radius: 9px; display:grid; place-items:center; color:#fff; font-weight:700; font-size:13px; }
.svc-chip .px { color: var(--brand-700); font-weight: 700; }

/* =========================================================
   MARQUEE / TRUST
   ========================================================= */
.trust { padding: 18px 0; background: transparent; }
.trust-band { display:flex; align-items:center; justify-content:space-between; gap:40px; flex-wrap:wrap;
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); padding:26px 34px;
  box-shadow:var(--sh-1); position:relative; overflow:hidden; }
.tb-people{ display:flex; align-items:center; gap:18px; position:relative; z-index:2; }
.ava-stack{ display:flex; }
.ava{ width:46px;height:46px;border-radius:50%; border:3px solid var(--surface); display:grid; place-items:center;
  color:#fff; font-weight:700; font-size:16px; margin-left:-14px; box-shadow:0 4px 12px -3px rgba(10,40,25,.35); }
.ava:first-child{ margin-left:0; }
.ava-more{ background:var(--brand-tint); color:var(--brand-700); font-size:20px; }
.tb-rate{ display:flex; flex-direction:column; gap:3px; }
.tb-support-ic{ width:54px; height:54px; border-radius:16px; flex:none; display:grid; place-items:center;
  background:var(--brand-tint); color:var(--brand-700); }
.tb-support-ic svg{ width:28px; height:28px; }
.tb-online{ display:flex; align-items:center; gap:8px; font-size:18px; font-weight:700; color:var(--ink); }
.tg-ic{ width:22px;height:22px;border-radius:50%; flex:none; display:grid; place-items:center;
  background:linear-gradient(150deg,#37bdf6,#1e96d4); }
.tg-ic svg{ width:14px;height:14px; }
.live-dot{ width:9px;height:9px;border-radius:50%; background:var(--brand); position:relative; flex:none; }
.live-dot::after{ content:""; position:absolute; inset:-4px; border-radius:50%; background:var(--brand); opacity:.35; animation:livepulse 1.8s ease-out infinite; }
@keyframes livepulse{ 0%{ transform:scale(.6); opacity:.5; } 100%{ transform:scale(2.2); opacity:0; } }
.stars{ color:#f5b301; font-size:17px; letter-spacing:2px; line-height:1; }
.tb-rate-lbl{ font-size:13.5px; color:var(--muted); }
.tb-stats{ display:flex; align-items:center; gap:30px; position:relative; z-index:2; flex-wrap:wrap; }
.tb-stat .num{ font-family:'Unbounded',sans-serif; font-size:32px; font-weight:600; color:var(--ink); letter-spacing:-.02em; }
.tb-stat .lbl{ font-size:13.5px; color:var(--muted); line-height:1.3; margin-top:2px; }
.tb-div{ width:1px; height:46px; background:var(--line); }
@media (max-width:820px){
  .trust-band{ flex-direction:column; align-items:flex-start; gap:26px; padding:24px; }
  .tb-stats{ gap:20px; }
  .tb-stat .num{ font-size:26px; }
}

/* =========================================================
   FEATURE CARDS (4-up)
   ========================================================= */
.feat-grid { display:grid; grid-template-columns: repeat(4,1fr); gap: 20px; }
.feat {
  background: var(--surface); border:1px solid var(--line); border-radius: var(--r-lg);
  padding: 26px; box-shadow: var(--sh-1); transition: transform .3s, box-shadow .3s, border-color .3s;
  position: relative; overflow:hidden;
}
.feat:hover { transform: translateY(-6px); box-shadow: var(--sh-3); border-color: color-mix(in srgb,var(--brand) 35%, white); }
.feat .ficon {
  width: 52px; height: 52px; border-radius: 15px; display:grid; place-items:center;
  background: var(--brand-tint); color: var(--brand-700); margin-bottom: 20px;
}
.feat .ficon svg{ width:26px;height:26px; }
.feat-photo{ display:block; width:100%; height:158px; margin-bottom:20px; }
.feat h3 { font-size: 19px; font-weight: 700; margin-bottom: 8px; letter-spacing:-.02em;}
.feat p { font-size: 15px; color: var(--muted); line-height:1.45; }
.feat .tag { position:absolute; top:22px; right:22px; font-family:'Unbounded',sans-serif; font-size:13px; color: var(--brand); font-weight:600; }

/* =========================================================
   SPLIT SHOWCASE
   ========================================================= */
.split { display:grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items:center; }
.split.rev .split-media{ order: -1; }
.split-media {
  position: relative; border-radius: var(--r-xl);
  background: linear-gradient(160deg, var(--brand-tint-2), var(--brand-tint));
  border: 1px solid color-mix(in srgb,var(--brand) 12%, white);
  min-height: 420px; display:grid; place-items:center; overflow: hidden;
}
.split-media .deco-ring{ position:absolute; border-radius:50%; border:1.5px dashed color-mix(in srgb,var(--brand) 30%, white); }
.split-list { margin-top: 26px; display:flex; flex-direction:column; gap: 14px; }
.split-list li { display:flex; gap:12px; align-items:flex-start; list-style:none; font-size:16px; color: var(--ink-soft); }
.split-list .ck { flex:none; width:24px;height:24px;border-radius:50%; background:var(--brand); color:#fff; display:grid; place-items:center; margin-top:1px;}
.split-list .ck svg{width:13px;height:13px;}
.split ul{ padding:0; margin:0; }

/* QR card */
.qr-card{ background:#fff; border:1px solid var(--line); border-radius: var(--r-lg); padding:22px; box-shadow: var(--sh-2); display:flex; gap:18px; align-items:center; max-width:360px;}
.qr-card .qr{ width:92px; height:92px; border-radius:14px; background:
  repeating-conic-gradient(var(--ink) 0% 25%, #fff 0% 50%) 50%/12px 12px; flex:none; border:6px solid #fff; box-shadow: inset 0 0 0 1px var(--line);}
.qr-card .qr-t b{ display:block; font-size:16px; }
.qr-card .qr-t p{ font-size:13px; color:var(--muted); }

/* phone mock */
.phone {
  width: 280px; aspect-ratio: 9/18.5; background:#0a1611; border-radius:42px; padding:11px;
  box-shadow: 0 40px 80px -24px rgba(10,40,25,.5), inset 0 0 0 2px rgba(255,255,255,.08); position:relative;
}
.phone-screen{ width:100%;height:100%; background: linear-gradient(170deg,#f3fbf6,#eafaf1); border-radius:32px; overflow:hidden; position:relative; padding:18px 16px;}
.phone-notch{ position:absolute; top:11px; left:50%; transform:translateX(-50%); width:96px;height:24px;background:#0a1611; border-radius:14px; z-index:5;}
.phone .mini-card{ width:100%; aspect-ratio:1.586/1; border-radius:16px; margin-top:26px;
  background: linear-gradient(135deg,#14a35e,#0a5c37); box-shadow: var(--sh-2); position:relative;}
.phone .row{ display:flex; align-items:center; gap:10px; background:#fff; border-radius:14px; padding:11px 13px; margin-top:12px; box-shadow:var(--sh-1);}
.phone .row .av{ width:30px;height:30px;border-radius:9px; flex:none; }
.phone .row .ln{ height:8px; border-radius:5px; background:var(--line); }

/* =========================================================
   USE CASES (3-up image cards)
   ========================================================= */
.cases { display:grid; grid-template-columns: repeat(3,1fr); gap:22px; }
.case {
  position:relative; border-radius: var(--r-xl); overflow:hidden; min-height: 412px;
  padding: 28px; display:flex; flex-direction:column; justify-content:space-between; gap:16px;
  color:#eafff4; box-shadow: var(--sh-2);
  background: linear-gradient(160deg,#13a35e,#0a5c37);
}
.case:nth-child(2){ background: linear-gradient(160deg,#0e8a4e,#08402a);}
.case:nth-child(3){ background: linear-gradient(160deg,#1bbf72,#0c7042);}
.case .c-ic{ width:54px;height:54px;border-radius:16px; background:rgba(255,255,255,.16); display:grid; place-items:center; backdrop-filter:blur(4px);}
.case h3{ font-size:25px; font-weight:700; letter-spacing:-.02em; }
.case p{ font-size:15px; color: rgba(234,255,244,.78); margin-top:8px; max-width:240px;}
.case .c-deco{ position:absolute; right:-30px; bottom:-30px; width:180px; height:180px; border-radius:50%; background: radial-gradient(circle at 30% 30%, rgba(255,255,255,.22), transparent 60%); }

/* green 3D orbs behind cases */
.case-orb{ position:absolute; border-radius:50%; pointer-events:none; z-index:1;
  background:
    radial-gradient(circle at 34% 28%, rgba(255,255,255,.9), rgba(255,255,255,.32) 30%, rgba(180,255,219,.12) 52%, transparent 70%),
    radial-gradient(circle at 70% 80%, rgba(7,70,42,.5), transparent 55%);
  box-shadow: inset -6px -10px 22px rgba(7,60,36,.45), inset 8px 8px 20px rgba(255,255,255,.4);
  opacity:.5; }
.case-ring{ position:absolute; border-radius:50%; border:2px solid rgba(255,255,255,.22); pointer-events:none; z-index:1; }

/* glass service list inside case */
.svc-list{ position:relative; z-index:3; align-self:stretch;
  background: rgba(255,255,255,.13); border:1px solid rgba(255,255,255,.24);
  backdrop-filter: blur(10px); border-radius:18px; padding:7px; display:flex; flex-direction:column; gap:2px;
  box-shadow: 0 14px 30px -14px rgba(0,0,0,.4); }
.svc-row{ display:flex; align-items:center; gap:11px; padding:9px 10px; border-radius:12px; transition:background .15s; }
.svc-row:hover{ background: rgba(255,255,255,.13); }
.svc-logo{ width:30px;height:30px;border-radius:9px; flex:none; overflow:hidden; box-shadow:0 2px 7px rgba(0,0,0,.22); }
.svc-logo svg{ width:100%; height:100%; display:block; }
.svc-name{ font-size:14.5px; font-weight:600; color:#eafff4; letter-spacing:-.01em; }
.svc-price{ margin-left:auto; font-size:13.5px; font-weight:700; color:#fff; opacity:.9; font-variant-numeric:tabular-nums; }
.case-content{ position:relative; z-index:3; }
.case .case-art{ position:absolute; right:-14px; bottom:-14px; width:230px; height:230px; opacity:.16; color:#fff; pointer-events:none; }
.case .case-art svg{ width:100%; height:100%; }
.case-content{ position:relative; z-index:2; }
.case-grid-bg{ position:absolute; inset:0; opacity:.10; pointer-events:none;
  background-image: linear-gradient(rgba(255,255,255,.6) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.6) 1px, transparent 1px);
  background-size: 30px 30px; mask-image: radial-gradient(90% 90% at 80% 90%, #000, transparent 75%); }
.case .pill-badge{ position:absolute; z-index:3; display:flex; align-items:center; gap:8px;
  background:rgba(255,255,255,.16); backdrop-filter:blur(6px); border:1px solid rgba(255,255,255,.22);
  border-radius:999px; padding:7px 13px 7px 7px; font-size:13px; font-weight:600; color:#eafff4; white-space:nowrap; }
.case .pill-badge .pb-ic{ width:24px;height:24px;border-radius:7px; display:grid; place-items:center; color:#fff; font-weight:800; font-size:12px; flex:none; }

/* =========================================================
   STEPS
   ========================================================= */
/* =========================================================
   HOW IT WORKS — 3-step flow
   ========================================================= */
.flow-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
.flow-step { background:var(--surface); border:1px solid var(--line); border-radius:var(--r-xl);
  overflow:hidden; box-shadow:var(--sh-2); display:flex; flex-direction:column;
  transition:transform .3s, box-shadow .3s; }
.flow-step:hover { transform:translateY(-6px); box-shadow:var(--sh-3); }
.flow-media { position:relative; height:300px; overflow:hidden;
  background:linear-gradient(180deg,#f4faf6,#ffffff); border-bottom:1px solid var(--line-soft); }
.flow-phone { position:absolute; left:50%; top:30px; transform:translateX(-50%); width:62%; height:auto; }
.flow-num { position:absolute; top:18px; left:18px; z-index:2; font-weight:700; font-size:13px;
  color:var(--brand-700); background:#fff; padding:7px 14px; border-radius:999px; box-shadow:var(--sh-1); }
.flow-body { padding:24px 26px 28px; }
.flow-body h3 { font-size:22px; font-weight:700; letter-spacing:-.02em; }
.flow-body p { font-size:15px; color:var(--muted); margin-top:9px; line-height:1.45; }
@media (max-width: 860px){
  .flow-grid { grid-template-columns:1fr; max-width:440px; margin-inline:auto; }
}
.tg-grid { display:grid; grid-template-columns: repeat(4,1fr); gap:20px; align-items:stretch; }
.tg-card { position:relative; border-radius:var(--r-xl); overflow:hidden; height:430px;
  display:flex; flex-direction:column; box-shadow:var(--sh-2); transition:transform .3s, box-shadow .3s; }
.tg-card:hover { transform:translateY(-5px); box-shadow:var(--sh-3); }
.tg-card h3 { font-size:24px; font-weight:700; line-height:1.16; letter-spacing:-.02em; position:relative; z-index:2; }
.tg-sub { font-size:14.5px; line-height:1.42; margin-top:10px; max-width:90%; position:relative; z-index:2; }
.tg-green .tg-sub { color:rgba(255,255,255,.88); }

/* card 1 — brand green */
.tg-green { background:linear-gradient(165deg,#26c277,#15a25d 55%,#0c7a46); color:#fff; padding:26px 26px 0; }
.tg-logo { display:inline-flex; align-items:center; gap:9px; font-family:'Unbounded',sans-serif;
  font-size:21px; font-weight:600; letter-spacing:-.02em; margin-bottom:16px; }
.tg-logo svg { width:22px; height:22px; }
.tg-phone { position:absolute; left:50%; top:52%; transform:translateX(-50%) rotate(-3deg); transform-origin:top center;
  width:80%; height:auto; z-index:1; filter:drop-shadow(0 26px 44px rgba(4,40,24,.45)); }

/* card 2 & 4 — white */
.tg-white { background:var(--surface); border:1px solid var(--line); }
.tg-foot { margin-top:auto; padding:20px 26px 24px; position:relative; z-index:2; }
.tg-foot h3 { color:var(--ink); }
.tg-link { display:inline-block; margin-top:12px; font-size:15px; font-weight:700; color:var(--brand-700); }

/* card 2 — welcome phone at top, bleeds off bottom */
.tg-top { background:linear-gradient(180deg,#e7f1eb,#ffffff 50%); }
.tg-phone-top { position:absolute; left:50%; top:-30px; transform:translateX(-50%);
  height:300px; width:auto; z-index:1; filter:drop-shadow(0 28px 44px rgba(10,40,25,.24)); }

/* card 3 — dark, globe */
.tg-dark { background:linear-gradient(165deg,#16201b,#0a120d); color:#fff; padding:26px 26px 0; }
.tg-dark h3 { color:#fff; max-width:84%; }
.tg-globe { position:absolute; left:50%; bottom:-46px; transform:translateX(-50%); width:90%; height:auto; z-index:1; }

/* card 4 — crypto card top-right */
.tg-crypto { display:block; width:80%; margin:2px -8px 0 auto; height:auto;
  filter:drop-shadow(0 24px 40px rgba(10,40,25,.22)); }

@media (max-width: 1080px){
  .tg-grid { grid-template-columns: repeat(2,1fr); }
}
@media (max-width: 560px){
  .tg-grid { grid-template-columns: 1fr; max-width:420px; margin-inline:auto; }
}

/* =========================================================
   ADVANTAGES BENTO
   ========================================================= */
.bento { display:grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 192px; gap:18px; }
.bx { border-radius: var(--r-lg); border:1px solid var(--line); padding:26px; overflow:hidden; position:relative; background:var(--surface); box-shadow:var(--sh-1); display:flex; flex-direction:column; transition: transform .3s, box-shadow .3s; }
.bx:hover{ transform: translateY(-4px); box-shadow: var(--sh-3); }
.bx h4{ font-size:19px; font-weight:700; letter-spacing:-.02em; position:relative; z-index:3; }
.bx p{ font-size:14px; color:var(--muted); margin-top:6px; position:relative; z-index:3; max-width:300px;}
.bx.green{ color:#eafff4; background:linear-gradient(150deg,#15a85f,#0a5c37); border-color:transparent; }
.bx.green p{ color:rgba(234,255,244,.82);}
.bx.tint{ background: linear-gradient(160deg,var(--brand-tint-2),var(--brand-tint)); border-color: color-mix(in srgb,var(--brand) 14%, white); }
.bx.dark{ color:#eafff4; background: linear-gradient(160deg,#0c1c14,#08130d); border-color:transparent; }
.bx.dark p{ color:rgba(234,255,244,.72);}
.bx .b-ic{ width:48px;height:48px;border-radius:14px; display:grid; place-items:center; background:var(--brand-tint); color:var(--brand-700); margin-bottom:auto; position:relative; z-index:3;}
.bx.green .b-ic, .bx.dark .b-ic{ background:rgba(255,255,255,.16); color:#fff;}
.bx .bx-head{ margin-top:auto; }
.col-2{ grid-column: span 2; }
.row-2{ grid-row: span 2; }
.secure-card{ padding:0; overflow:hidden; }
.secure-copy{ position:relative; z-index:3; padding:30px 30px 0; max-width:58%; }
.secure-badge{ display:inline-flex; align-items:center; gap:7px; font-size:13px; font-weight:700;
  letter-spacing:.02em; color:#eafff4; background:rgba(255,255,255,.16); border:1px solid rgba(255,255,255,.22);
  padding:7px 13px; border-radius:999px; }
.secure-badge svg{ width:16px; height:16px; }
.secure-card h4{ font-size:27px; line-height:1.12; margin-top:20px; letter-spacing:-.02em; }
.secure-card p{ font-size:15px; margin-top:12px; max-width:none; }
.secure-img{ position:absolute; right:-26px; bottom:-30px; width:auto; height:90%;
  transform: rotate(7deg); transform-origin:bottom right;
  filter: drop-shadow(0 28px 46px rgba(4,40,24,.5)); z-index:2; pointer-events:none; }

/* live wallet control panel (dark card) */
.ctrl-card{ position:relative; overflow:hidden; }
.ctrl-card .bx-head{ max-width:44%; }
.ctrl-3d{ position:absolute; right:-30px; top:50%; transform:translateY(-50%); height:150%; width:auto;
  z-index:2; pointer-events:none; }

/* --- 3D decor objects --- */
.sphere{ position:absolute; border-radius:50%; pointer-events:none; z-index:1;
  background: radial-gradient(circle at 34% 26%, #ffffff 0%, #c4f3da 26%, #45c98b 58%, #0d8a4e 100%);
  box-shadow: inset -8px -12px 26px rgba(7,55,33,.42), inset 6px 8px 16px rgba(255,255,255,.5), 0 22px 40px -14px rgba(11,94,54,.5); }
.sphere.lite{ background: radial-gradient(circle at 34% 26%, #ffffff 0%, #e3fff1 28%, #9fe9c4 60%, #38c187 100%);
  box-shadow: inset -6px -10px 22px rgba(20,120,72,.3), inset 5px 7px 14px rgba(255,255,255,.7), 0 18px 34px -14px rgba(20,140,84,.4); }
.deco-3d{ position:absolute; pointer-events:none; z-index:2; filter: drop-shadow(0 18px 26px rgba(7,60,36,.4)); }
.deco-3d svg{ display:block; }
img.deco-3d{ display:block; height:auto; }

/* glass pay chips */
.pay{ display:inline-flex; align-items:center; gap:8px; background:#fff; border-radius:14px; padding:11px 15px;
  box-shadow:0 12px 26px -10px rgba(10,40,25,.4), 0 1px 2px rgba(10,40,25,.08); font-weight:700; font-size:15px; color:#15110f; position:relative; z-index:3; }
.pay svg{ width:22px; height:22px; }
.pay.glass{ background: rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.24); color:#fff; backdrop-filter: blur(8px); box-shadow:none; }

/* big 3D stat number */
.stat3d{ font-family:'Unbounded',sans-serif; font-weight:700; line-height:.9; letter-spacing:-.03em; position:relative; z-index:3;
  background:linear-gradient(150deg,#f6fffb,#63d79c 58%,#11a25d);
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:transparent;
  text-shadow:1px 1px 0 #8fe0bb,2px 2px 0 #5fd29f,3px 4px 0 #2db97a,4px 6px 0 #0f8a4e,5px 9px 14px rgba(11,94,54,.4); }
.stat3d.on-dark{ background:linear-gradient(150deg,#ffffff,#8fe6ba 55%,#22b270);
  -webkit-background-clip:text; background-clip:text;
  text-shadow:1px 1px 0 #bdf3d6,2px 2px 0 #6dd3a4,3px 4px 0 #2db97a,4px 6px 0 #0c7a46,5px 9px 14px rgba(0,0,0,.4); }

/* =========================================================
   PRICING
   ========================================================= */
.price-grid{ display:grid; grid-template-columns: repeat(3,1fr); gap:22px; align-items:stretch; }
.plan{ background:var(--surface); border:1px solid var(--line); border-radius:var(--r-xl); padding:30px; display:flex; flex-direction:column; box-shadow:var(--sh-2); position:relative; transition:transform .3s, box-shadow .3s;}
.plan:hover{ transform:translateY(-6px); box-shadow:var(--sh-3);}
.plan.featured{ border-color:transparent; background:linear-gradient(170deg,#0c1c14,#08130d); color:#eafff4; box-shadow:var(--sh-3);}
.plan .badge{ position:absolute; top:20px; right:20px; font-size:12px; font-weight:700; color:#fff; background:var(--brand); padding:6px 12px; border-radius:var(--r-pill); }
.plan .p-card{ width:100%; aspect-ratio:1.586/1; border-radius:18px; margin-bottom:22px; box-shadow:var(--sh-2); position:relative; overflow:hidden;}
.plan .p-name{ font-size:22px; font-weight:700; letter-spacing:-.02em; }
.plan .p-cur{ font-size:14px; color:var(--muted); margin-top:4px;}
.plan.featured .p-cur{ color:rgba(234,255,244,.6);}
.plan .p-feats{ list-style:none; padding:0; margin:22px 0; display:flex; flex-direction:column; gap:11px; }
.plan .p-feats li{ display:flex; gap:10px; font-size:14.5px; color:var(--ink-soft);}
.plan.featured .p-feats li{ color:rgba(234,255,244,.85);}
.plan .p-feats .ck{ flex:none; width:20px;height:20px;border-radius:50%; background:var(--brand-tint); color:var(--brand-700); display:grid; place-items:center;}
.plan.featured .p-feats .ck{ background:rgba(255,255,255,.14); color:var(--brand-glow);}
.plan .p-price{ margin-top:auto; display:flex; align-items:baseline; gap:10px;}
.plan .p-price .now{ font-family:'Unbounded',sans-serif; font-size:32px; font-weight:600; }
.plan .p-price .was{ font-size:18px; color:var(--muted-2); text-decoration:line-through;}
.plan .p-note{ font-size:13px; color:var(--muted); margin-top:4px;}
.plan.featured .p-note{ color:rgba(234,255,244,.6);}
.plan .btn{ margin-top:20px; width:100%; }

/* =========================================================
   FAQ
   ========================================================= */
.faq-wrap{ max-width:840px; margin-inline:auto; }
.faq-item{ border-bottom:1px solid var(--line); }
.faq-q{ width:100%; text-align:left; display:flex; align-items:center; gap:18px; padding:24px 6px; font-size:18px; font-weight:600; color:var(--ink); }
.faq-q .pm{ flex:none; margin-left:auto; width:32px;height:32px;border-radius:50%; border:1.5px solid var(--line); display:grid; place-items:center; transition:.25s; color:var(--brand-700);}
.faq-item.open .pm{ background:var(--brand); border-color:var(--brand); color:#fff; transform:rotate(45deg);}
.faq-a{ max-height:0; overflow:hidden; transition:max-height .4s ease, opacity .3s; opacity:0;}
.faq-item.open .faq-a{ opacity:1; }
.faq-a-inner{ padding:0 6px 26px; font-size:16px; color:var(--muted); line-height:1.6; max-width:680px;}

/* =========================================================
   CTA BANNER
   ========================================================= */
.cta-band{ position:relative; overflow:hidden; border-radius: var(--r-xl);
  background: linear-gradient(150deg,#0c1c14,#0a5c37 70%,#0f8a4e);
  padding: 64px; color:#eafff4; }
.cta-band h2{ font-size: clamp(28px,4vw,46px); font-weight:700; letter-spacing:-.03em; max-width:640px;}
.cta-band p{ margin-top:16px; font-size:18px; color:rgba(234,255,244,.78); max-width:520px;}
.cta-band .glow{ position:absolute; width:420px;height:420px; border-radius:50%; right:-80px; top:-120px; background:radial-gradient(circle, rgba(56,224,140,.4), transparent 65%);}
.cta-inner{ position:relative; z-index:2; display:grid; grid-template-columns: 1.1fr .9fr; gap:40px; align-items:center; }
.cta-img{ display:block; width:100%; max-width:520px; height:auto; justify-self:end; filter: drop-shadow(0 30px 50px rgba(0,0,0,.35)); }
@media (max-width: 820px){ .cta-inner{ grid-template-columns:1fr; } .cta-img{ max-width:380px; justify-self:start; } }

/* ===== Pay scene (Apple/Google Pay banner) ===== */
.payscene{ position:relative; margin-top:46px; height:560px; border-radius:40px;
  background: linear-gradient(180deg,#eef7f1,#e1f1e8);
  border:1px solid color-mix(in srgb,var(--brand) 10%, white); overflow:visible; }
.pay-phone{ position:absolute; left:50%; top:50%; transform:translate(-50%,-52%); width:286px; height:auto;
  filter: drop-shadow(0 40px 60px rgba(11,60,38,.3)); z-index:4; }
.payscene .glyph3d{ z-index:2; }
.pay-cluster{ position:absolute; z-index:5; }
.pay-chips{ left:7%; top:40%; display:flex; align-items:center; }
.paychip{ width:96px;height:96px;border-radius:50%; background:#fff; box-shadow:0 18px 40px -10px rgba(10,40,25,.28);
  display:flex; align-items:center; justify-content:center; gap:5px; font-weight:700; font-size:19px; color:#1a1f1c; }
.paychip:last-child{ margin-left:-22px; }
.paychip svg{ width:22px; height:22px; }
.card-chip{ left:3%; bottom:9%; display:flex; align-items:center; gap:14px;
  background:#fff; border-radius:18px; padding:14px 20px 14px 14px; box-shadow:0 18px 40px -10px rgba(10,40,25,.26); }
.card-chip .cc{ width:54px;height:36px;border-radius:7px; background:linear-gradient(135deg,#2fd483,#0a5c37); box-shadow:inset 0 1px 3px rgba(255,255,255,.4); position:relative; flex:none; }
.card-chip .cc::after{ content:""; position:absolute; left:7px; top:8px; width:13px;height:9px;border-radius:2px; background:#e7c876; }
.card-chip b{ font-size:18px; color:#0a1611; display:block; }
.card-chip .ccn{ font-size:12px; color:#8a988f; font-weight:600; letter-spacing:.05em; }
.svc-panel{ right:4%; top:50%; transform:translateY(-50%); background:#fff; border-radius:20px; padding:10px;
  box-shadow:0 22px 50px -12px rgba(10,40,25,.3); display:flex; flex-direction:column; gap:2px; min-width:230px; }
.svc-prow{ display:flex; align-items:center; gap:12px; padding:11px 14px; border-radius:13px; }
.svc-prow:hover{ background:#f3fbf6; }
.svc-prow .lg{ width:32px;height:32px;border-radius:9px; overflow:hidden; flex:none; box-shadow:0 2px 6px rgba(0,0,0,.15); }
.svc-prow .lg svg{ width:100%;height:100%; display:block; }
.svc-prow .nm{ font-size:15px; font-weight:600; color:#0a1611; }
.svc-prow .pr{ margin-left:auto; font-size:15px; font-weight:700; color:#5e6f66; }
@media (max-width:820px){
  .payscene{ height:auto; padding:30px 16px 40px; }
  .pay-phone{ position:static; transform:none; margin:0 auto 24px; display:block; }
  .pay-cluster{ position:static; margin:10px auto; }
  .pay-chips,.card-chip,.svc-panel{ position:static; transform:none; justify-content:center; margin:12px auto; }
  .payscene .glyph3d{ display:none; }
}

/* =========================================================
   FOOTER
   ========================================================= */
.footer{ background: var(--ink); color:#cfe3d8; padding: 72px 0 36px; margin-top: 0; }
.footer .ft-top{ display:grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap:40px; align-items:start; }
.footer .brand{ color:#fff; line-height:1; }
.footer h5{ font-size:13px; text-transform:uppercase; letter-spacing:.06em; color:#7f998c; margin:6px 0 16px; font-weight:600;}
.footer ul{ list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:11px;}
.footer ul a{ font-size:14.5px; color:#b6cdc0; transition:.15s;}
.footer ul a:hover{ color:#fff; }
.footer .ft-about{ font-size:14px; color:#8fab9d; line-height:1.6; max-width:300px; margin-top:16px;}
.footer .ft-bot{ margin-top:48px; padding-top:24px; border-top:1px solid rgba(255,255,255,.08); display:flex; justify-content:space-between; gap:20px; flex-wrap:wrap; font-size:13px; color:#7f998c;}
.footer .ft-bot a{ color:#9db8aa; }

/* reveal */
.reveal{ opacity:0; transform: translateY(26px); transition: opacity .7s cubic-bezier(.2,.8,.2,1), transform .7s cubic-bezier(.2,.8,.2,1); }
.reveal.in{ opacity:1; transform:none; }

/* =========================================================
   RESPONSIVE
   ========================================================= */
.hero-br{ display:none; }
@media (min-width: 921px){ .hero-br{ display:inline; } }

@media (max-width: 1080px){
  .price-grid{ grid-template-columns:1fr; max-width:460px; margin-inline:auto; }
}
@media (max-width: 1080px){
  .nav-links, .nav-login{ display:none; }
  .burger{ display:grid; }
}
@media (max-width: 920px){
  .hero-inner{ grid-template-columns:1fr; }
  .hero-visual{ height:440px; margin-top: 12px; }
  .split{ grid-template-columns:1fr; gap:34px; }
  .split.rev .split-media{ order:0; }
  .cases{ grid-template-columns:1fr; }
}
@media (max-width: 820px){
  .ctrl-card .bx-head{ max-width:100%; }
  .ctrl-3d{ position:static; transform:none; display:block; height:auto; width:100%; max-width:360px; margin:14px auto 0; }
}
@media (max-width: 620px){
  .wrap{ padding:0 18px; }
  .section{ padding:64px 0; }
  .feat-grid{ grid-template-columns:1fr; }
  .bento{ grid-template-columns:1fr; }
  .cta-band{ padding:36px 26px; }
  .hero-visual .vcard{ width: 320px; }
  .vcard{ width:320px; }
}

/* real LK screenshots inside step phone frame */
.flow-device{ position:absolute; left:50%; top:30px; transform:translateX(-50%);
  width:202px; height:372px; border-radius:34px; background:#0a1611; padding:8px; overflow:hidden;
  box-shadow:0 26px 44px -18px rgba(4,40,24,.45), inset 0 0 0 1.5px rgba(255,255,255,.06); }
.flow-device img{ width:100%; height:100%; object-fit:cover; object-position:top center; border-radius:23px; display:block; }

/* non-phone 3D illustration inside step media (steps 1 & 3) */
@keyframes floatcenter{ 0%,100%{ transform:translate(-50%,-50%) } 50%{ transform:translate(-50%,calc(-50% - 14px)) } }
.flow-art{ position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  width:208px; height:auto; pointer-events:none;
  filter:drop-shadow(0 24px 36px rgba(7,60,36,.30)); animation:floatcenter 6.5s ease-in-out infinite; }

.flow-art[src*="step-1.png"]{ width:252px; filter:drop-shadow(0 22px 34px rgba(10,40,25,.20)); }

/* custom CSS 3D objects for steps 1 & 3 (cohesive green glossy tiles) */
.flow-obj{ position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); z-index:2;
  animation:floatcenter 6s ease-in-out infinite; }
.flow-obj::before{ content:""; position:absolute; inset:-34px; border-radius:50%; z-index:-1;
  background:radial-gradient(circle, rgba(31,184,107,.28), transparent 66%); }
.fo-tile{ position:relative; width:150px; height:150px; border-radius:40px; display:grid; place-items:center;
  background:linear-gradient(155deg,#41e28e 0%,#1fb86b 46%,#0b7344 100%);
  box-shadow:0 32px 52px -16px rgba(11,94,54,.5), inset 0 3px 6px rgba(255,255,255,.6), inset 0 -12px 24px rgba(7,55,33,.45); }
.fo-tile::after{ content:""; position:absolute; left:11%; top:9%; right:11%; height:42%; border-radius:30px 30px 60% 60%;
  background:linear-gradient(180deg, rgba(255,255,255,.55), transparent); pointer-events:none; }
.fo-tile svg{ width:74px; height:74px; position:relative; z-index:1; color:#fff;
  filter:drop-shadow(0 3px 4px rgba(7,55,33,.4)); }
.fo-badge{ position:absolute; right:-8px; bottom:-8px; width:50px; height:50px; border-radius:50%;
  background:#fff; display:grid; place-items:center; z-index:3;
  box-shadow:0 12px 22px -6px rgba(11,94,54,.5), inset 0 0 0 1px rgba(11,94,54,.06); }
.fo-badge svg{ width:26px; height:26px; }

/* contain hero card within bounds on small screens */
@media (max-width:620px){ .hero-card-wrap{ width:320px; margin-left:-160px; margin-top:-101px; } }

/* ===== Step 1 — "Аккаунт создан" 3D card ===== */
.acc-obj{ width:160px; }
.acc-card{ position:relative; width:160px; height:198px; border-radius:26px; z-index:1;
  display:flex; flex-direction:column; align-items:center; padding:24px 18px 0;
  background:linear-gradient(157deg,#49e394 0%,#23b771 44%,#0c7344 100%);
  box-shadow:0 36px 56px -18px rgba(11,94,54,.5), inset 0 3px 6px rgba(255,255,255,.55), inset 0 -16px 30px rgba(7,55,33,.42); }
/* card thickness / back slab (bottom-left depth) */
.acc-card::before{ content:""; position:absolute; left:-11px; top:11px; width:100%; height:100%; border-radius:26px; z-index:-1;
  background:linear-gradient(157deg,#0f7d49,#0a5331); box-shadow:0 30px 44px -20px rgba(7,55,33,.6); }
/* top gloss */
.acc-card::after{ content:""; position:absolute; left:10%; top:6%; right:10%; height:34%; border-radius:22px 22px 60% 60%;
  background:linear-gradient(180deg, rgba(255,255,255,.42), transparent); pointer-events:none; }
.acc-ava{ width:62px; height:62px; border-radius:50%; background:#fff; display:grid; place-items:center; position:relative; z-index:2;
  box-shadow:0 10px 18px -5px rgba(7,55,33,.45), inset 0 -3px 6px rgba(11,94,54,.12); }
.acc-ava svg{ width:36px; height:36px; color:#159b56; }
.acc-line{ width:78%; height:9px; border-radius:6px; margin-top:18px; position:relative; z-index:2;
  background:rgba(255,255,255,.6); box-shadow:inset 0 1px 1px rgba(255,255,255,.5); }
.acc-line.short{ width:56%; margin-top:9px; background:rgba(255,255,255,.4); }
.acc-pill{ margin-top:auto; margin-bottom:22px; position:relative; z-index:2; white-space:nowrap;
  background:rgba(255,255,255,.18); border:1px solid rgba(255,255,255,.3); backdrop-filter:blur(4px);
  color:#fff; font-size:12.5px; font-weight:700; letter-spacing:-.01em; padding:8px 15px; border-radius:999px;
  box-shadow:0 8px 16px -5px rgba(7,55,33,.4); }
.acc-check{ position:absolute; right:-16px; bottom:6px; width:66px; height:66px; border-radius:50%; z-index:4;
  display:grid; place-items:center;
  background:linear-gradient(150deg,#43e08f 0%,#1cad66 55%,#0c8048 100%);
  box-shadow:0 18px 32px -8px rgba(11,94,54,.55), inset 0 3px 5px rgba(255,255,255,.6), inset 0 -7px 13px rgba(7,55,33,.42); }
.acc-check::after{ content:""; position:absolute; left:14%; top:10%; right:14%; height:40%; border-radius:50%;
  background:linear-gradient(180deg, rgba(255,255,255,.55), transparent); pointer-events:none; }
.acc-check svg{ width:32px; height:32px; position:relative; z-index:1; filter:drop-shadow(0 2px 2px rgba(7,55,33,.3)); }

/* fix: pill above the check badge, badge to the corner */
.acc-card{ height:216px; }
.acc-line{ margin-top:14px; }
.acc-pill{ margin-bottom:50px; }
.acc-check{ right:-18px; bottom:-16px; width:58px; height:58px; }
.acc-check svg{ width:28px; height:28px; }

/* softer float for the hero toast (less upward travel) */
@keyframes floaty-soft{ 0%,100%{ transform:translateY(0) } 50%{ transform:translateY(-6px) } }

/* ===== Step 1 — 3D perspective "Аккаунт создан" card ===== */
.acc-obj{ width:184px; }
.acc-obj .acc-card{ display:none; }
.acc3d{ position:relative; perspective:1100px; }
.acc3d::after{ content:""; position:absolute; left:8%; bottom:-2%; width:78%; height:22%; z-index:-1;
  background:radial-gradient(ellipse, rgba(7,55,33,.42), transparent 70%); filter:blur(10px); }
.acc3d-box{ position:relative; width:172px; height:214px; margin:0 auto; transform-style:preserve-3d;
  transform:rotateX(6deg) rotateY(-21deg) rotate(-1deg); }
.acc3d-front{ position:absolute; inset:0; border-radius:26px; overflow:hidden;
  display:flex; flex-direction:column; align-items:center; padding:26px 20px 0;
  background:linear-gradient(150deg,#63e7a6 0%,#2dbe79 46%,#0f7d49 100%);
  box-shadow:0 30px 42px -18px rgba(7,55,33,.45), inset 0 3px 6px rgba(255,255,255,.5), inset 0 -18px 32px rgba(7,55,33,.36); }
.acc3d-front::after{ content:""; position:absolute; left:9%; top:5%; right:9%; height:32%; border-radius:22px 22px 60% 60%;
  background:linear-gradient(180deg, rgba(255,255,255,.4), transparent); pointer-events:none; }
.acc3d-side{ position:absolute; top:10px; right:0; width:24px; height:calc(100% - 20px); border-radius:5px;
  background:linear-gradient(180deg,#10804b,#0a5331); transform-origin:left center; transform:translateX(100%) rotateY(90deg); }
.acc3d-front .acc-pill{ margin-top:auto; margin-bottom:26px; }
.acc-obj .acc-check{ right:-30px; bottom:36px; width:74px; height:74px; }
.acc-obj .acc-check svg{ width:36px; height:36px; }

/* fix: straight right "spine" instead of crooked 3D fold */
.acc3d{ perspective:none; }
.acc3d-box{ transform:rotate(-1.5deg); }
.acc3d-side{ top:7%; right:-9px; width:18px; height:86%; border-radius:11px; transform:none; z-index:-1;
  background:linear-gradient(180deg,#10804b 0%,#0a5331 100%); box-shadow:6px 9px 16px -6px rgba(7,55,33,.5); }

/* ===== Step 3 — 3D contactless card ===== */
.pay-obj{ width:206px; }
.pay-card{ position:relative; width:192px; aspect-ratio:1.585/1; border-radius:18px; margin:0 auto;
  transform:perspective(840px) rotateX(16deg) rotateZ(-6deg);
  color:#eafff4; padding:15px 17px;
  background:linear-gradient(140deg,#62e5a2 0%,#28ba74 48%,#0e7a47 100%);
  box-shadow:0 32px 42px -16px rgba(7,55,33,.5), inset 0 2px 4px rgba(255,255,255,.45), inset 0 -12px 22px rgba(7,55,33,.3); }
/* card thickness (bottom edge) */
.pay-card::before{ content:""; position:absolute; left:0; right:0; top:0; bottom:0; border-radius:18px; z-index:-1;
  background:linear-gradient(140deg,#0f7d49,#0a4a2e); transform:translateY(12px) translateX(2px); }
/* top gloss */
.pay-card::after{ content:""; position:absolute; left:6%; top:6%; right:6%; height:40%; border-radius:14px 14px 60% 60%;
  background:linear-gradient(180deg, rgba(255,255,255,.32), transparent); pointer-events:none; }
.pc-chip{ position:absolute; top:15px; left:17px; width:30px; height:23px; border-radius:5px; z-index:1;
  background:linear-gradient(135deg,#f6d98a,#c79a3e 60%,#e7c876); box-shadow:inset 0 1px 2px rgba(255,255,255,.6), inset 0 -2px 3px rgba(0,0,0,.2); }
.pc-brand{ position:absolute; left:17px; bottom:36px; z-index:1; font-family:'Unbounded',sans-serif; font-weight:600; font-size:15px; letter-spacing:-.02em; text-shadow:0 1px 2px rgba(0,0,0,.2); }
.pc-num{ position:absolute; left:17px; bottom:17px; z-index:1; font-size:12px; letter-spacing:.1em; font-weight:600; opacity:.96; text-shadow:0 1px 2px rgba(0,0,0,.2); }
.pc-mc{ position:absolute; right:15px; bottom:14px; z-index:1; display:flex; }
.pc-mc i{ width:23px; height:23px; border-radius:50%; }
.pc-mc i:first-child{ background:#f25b48; }
.pc-mc i:last-child{ background:#f7b500; margin-left:-10px; mix-blend-mode:hard-light; }
.pay-wave{ position:absolute; top:-2px; right:-6px; color:#22c07a; z-index:2; }
.pay-wave svg{ width:64px; height:64px; transform:rotate(-32deg); filter:drop-shadow(0 8px 12px rgba(7,55,33,.34)); }

/* ===== Steps: design icons placement (from handoff) ===== */
.flow-icon { position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:82%; height:auto; }
.flow-globe { width:68%; top:53%; }
.flow-issue { width:90%; }
.flow-acct { top:53%; width:84%; }

/* feat-1 — bolt panel instead of phone */
.feat-bolt{ display:flex; align-items:center; justify-content:center; height:158px; margin-bottom:20px;
  border-radius:16px; background:linear-gradient(160deg,#eafaf1,#f3fbf6); border:1px solid color-mix(in srgb,var(--brand) 8%, white); }
.feat-bolt img{ height:108px; width:auto; filter:drop-shadow(0 14px 20px rgba(7,60,36,.28)); }