/* ============================================================
   Deni · лендинг — «УЧТИ Mono», строгий монохром, белый фон.
   Единственный цвет — деньги (доход зелёный / расход красный).
   Fonts: Geist (UI) + Geist Mono (числа) + Nunito (вордмарк).
   ============================================================ */

:root {
  /* ink scale (нейтральный серый) */
  --ink-0:#FFFFFF; --ink-25:#FAFAFA; --ink-50:#F4F4F5; --ink-100:#E9E9EB;
  --ink-200:#D9D9DD; --ink-300:#BFBFC4; --ink-400:#97979E; --ink-500:#6B6B72;
  --ink-600:#48484E; --ink-700:#2E2E33; --ink-800:#161618; --ink-900:#000000;

  /* деньги — единственный цвет */
  --income:#1DB36A; --expense:#F0524B;

  /* surfaces (холодный slate-недотон) */
  --bg:#FFFFFF; --bg-soft:#F7F8FB; --bg-elev-2:#F1F3F7; --bg-sunken:#EDF0F5;
  --fg1:#000000; --fg2:#686B74; --fg3:#93969E;
  --border:#E5E9F0; --border-strong:#D5DBE6;

  --accent:#000000; --accent-hover:#161618; --fg-on-accent:#FFFFFF;

  /* бренд-акценты (только брендовые поверхности) */
  --gold-1:#FFF0C4; --gold-2:#E8B33D; --gold-3:#8A5F16;

  /* radii */
  --r-sm:14px; --r-md:20px; --r-lg:26px; --r-xl:34px; --r-pill:999px;

  /* shadows — мягкие холодные */
  --sh-sm:0 1px 2px rgba(20,28,46,.05);
  --sh-md:0 6px 22px rgba(20,28,46,.08);
  --sh-lg:0 16px 40px rgba(20,28,46,.14);
  --sh-tile:0 1px 2px rgba(20,28,46,.05), 0 5px 14px rgba(20,28,46,.07);
  --sh-btn:0 2px 6px rgba(20,28,46,.12), 0 10px 24px rgba(20,28,46,.12);
  --sh-phone:0 40px 90px rgba(20,28,46,.22), 0 12px 30px rgba(20,28,46,.12);

  --fs:'Manrope', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --fm:'Geist Mono', ui-monospace, 'SF Mono', Menlo, monospace;
  --fb:'Nunito', var(--fs);

  --ease:cubic-bezier(.22,1,.36,1);
  --spring:cubic-bezier(.34,1.4,.5,1);
  --maxw:1160px;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
@media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto; } }
body{
  margin:0; background:var(--bg); color:var(--fg1);
  font-family:var(--fs); font-size:16px; line-height:1.55;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img,svg{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
.tnum{ font-variant-numeric:tabular-nums; font-feature-settings:"tnum" 1; }
.amt-income{ color:var(--income); } .amt-expense{ color:var(--expense); }

/* subtle page texture: barely-there radial, keeps white but adds depth */
body::before{
  content:""; position:fixed; inset:0; z-index:-1; pointer-events:none;
  background:
    radial-gradient(60% 45% at 78% -5%, rgba(20,28,46,.05), transparent 70%),
    radial-gradient(50% 40% at 8% 8%, rgba(20,28,46,.035), transparent 70%);
}

/* ============================== BUTTONS ============================== */
.btn{
  --pad:14px 22px;
  display:inline-flex; align-items:center; gap:9px; justify-content:center;
  font-family:var(--fs); font-weight:600; font-size:15px; letter-spacing:-.01em;
  padding:var(--pad); border-radius:var(--r-pill); border:1px solid transparent;
  cursor:pointer; white-space:nowrap; user-select:none;
  transition:transform .22s var(--spring), box-shadow .25s var(--ease),
             background .2s var(--ease), border-color .2s var(--ease);
  will-change:transform;
}
.btn:active{ transform:translateY(1px) scale(.985); }
.btn-sm{ --pad:9px 16px; font-size:14px; }
.btn-lg{ --pad:17px 30px; font-size:16.5px; }
.btn-primary{ background:var(--accent); color:var(--fg-on-accent); box-shadow:var(--sh-btn); }
.btn-primary:hover{ background:var(--accent-hover); transform:translateY(-2px); box-shadow:0 6px 14px rgba(20,28,46,.18), 0 18px 40px rgba(20,28,46,.18); }
.btn-ghost{ background:var(--bg); color:var(--fg1); border-color:var(--border-strong); box-shadow:var(--sh-sm); }
.btn-ghost:hover{ transform:translateY(-2px); border-color:var(--fg1); box-shadow:var(--sh-md); }
.tg-glyph{ width:18px; height:18px; fill:currentColor; }

/* ============================== NAV ============================== */
.nav{
  position:sticky; top:0; z-index:100;
  display:flex; align-items:center; gap:24px;
  padding:14px clamp(16px,4vw,40px);
  max-width:var(--maxw); margin:0 auto;
  transition:padding .3s var(--ease);
}
.nav::before{
  content:""; position:absolute; inset:0; z-index:-1;
  background:rgba(255,255,255,.72); backdrop-filter:blur(14px) saturate(1.4);
  -webkit-backdrop-filter:blur(14px) saturate(1.4);
  border-bottom:1px solid transparent; opacity:0; transition:opacity .3s var(--ease), border-color .3s var(--ease);
}
.nav.scrolled::before{ opacity:1; border-bottom-color:var(--border); }
.nav.scrolled{ padding-top:10px; padding-bottom:10px; }
.brand{ display:inline-flex; align-items:center; gap:10px; font-weight:800; }
.brand-mark{ width:30px; height:30px; color:var(--fg1); }
.brand-word{ font-family:var(--fb); font-weight:800; font-size:22px; letter-spacing:.01em; }
.nav-links{ display:flex; gap:6px; margin-left:auto; }
.nav-links a{
  padding:8px 14px; border-radius:var(--r-pill); font-size:14.5px; font-weight:500; color:var(--fg2);
  transition:color .2s, background .2s;
}
.nav-links a:hover{ color:var(--fg1); background:var(--bg-elev-2); }
.nav .btn-primary{ margin-left:4px; }

/* ============================== HERO ============================== */
.hero{
  max-width:var(--maxw); margin:0 auto;
  padding:clamp(40px,7vw,90px) clamp(16px,4vw,40px) clamp(30px,5vw,60px);
  display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(24px,4vw,56px); align-items:center;
}
.eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  font-size:13px; font-weight:600; color:var(--fg2);
  background:var(--bg-elev-2); border:1px solid var(--border);
  padding:7px 14px; border-radius:var(--r-pill); margin-bottom:22px;
}
.eyebrow .dot{ width:7px; height:7px; border-radius:50%; background:var(--income); box-shadow:0 0 0 3px rgba(29,179,106,.18); }
.hero-title{
  font-size:clamp(40px,6.4vw,72px); line-height:1.02; font-weight:800;
  letter-spacing:-.035em; margin:0 0 20px;
}
.accent-underline{ position:relative; white-space:nowrap; }
.accent-underline::after{
  content:""; position:absolute; left:0; right:0; bottom:.06em; height:.14em;
  background:var(--fg1); border-radius:3px; transform:scaleX(0); transform-origin:left;
  animation:underline 1s var(--ease) .5s forwards;
}
@keyframes underline{ to{ transform:scaleX(1); } }
.hero-sub{ font-size:clamp(16px,1.6vw,19px); line-height:1.6; color:var(--fg2); max-width:34ch; margin:0 0 30px; }
.hero-cta{ display:flex; flex-wrap:wrap; gap:12px; margin-bottom:34px; }
.hero-meta{ display:flex; gap:clamp(16px,3vw,32px); list-style:none; padding:0; margin:0; }
.hero-meta li{ font-size:13.5px; color:var(--fg3); font-weight:500; }
.hero-meta b{ display:block; font-size:26px; font-weight:800; color:var(--fg1); letter-spacing:-.02em; line-height:1.1; }

/* ---- hero phone stage ---- */
.hero-stage{ position:relative; display:flex; justify-content:center; align-items:center; min-height:520px; }
.glow{
  position:absolute; width:120%; height:80%; border-radius:50%;
  background:radial-gradient(closest-side, rgba(20,28,46,.10), transparent 72%);
  filter:blur(10px); z-index:0;
}
.chip{
  position:absolute; z-index:3; display:flex; flex-direction:column; align-items:flex-start;
  background:var(--bg); border:1px solid var(--border); border-radius:16px;
  padding:10px 14px; box-shadow:var(--sh-md); font-weight:700; font-size:16px;
}
.chip small{ font-size:11px; font-weight:600; color:var(--fg3); margin-top:1px; }
.chip-a{ top:12%; left:-2%; } .chip-b{ bottom:14%; right:-3%; }

/* ============================== PHONE ============================== */
.phone{
  position:relative; z-index:2; width:min(310px,78vw); aspect-ratio:305/620;
  background:#0b0c0f; border-radius:44px; padding:11px;
  box-shadow:var(--sh-phone), inset 0 0 0 1.5px rgba(255,255,255,.06);
}
.phone-notch{
  position:absolute; top:11px; left:50%; transform:translateX(-50%);
  width:120px; height:26px; background:#0b0c0f; border-radius:0 0 16px 16px; z-index:5;
}
.screen{
  position:relative; height:100%; background:var(--bg); border-radius:34px; overflow:hidden;
  display:flex; flex-direction:column;
}
.statusbar{ display:flex; justify-content:space-between; align-items:center; padding:12px 22px 6px; font-size:13px; font-weight:600; }
.sb-icons{ letter-spacing:2px; color:var(--fg2); font-size:11px; }
.app-head{ padding:12px 20px 16px; }
.app-head-row{ display:flex; justify-content:space-between; align-items:center; margin-bottom:8px; }
.app-title{ font-size:15px; font-weight:600; color:var(--fg2); }
.capital{ font-size:38px; font-weight:800; letter-spacing:-.03em; font-variant-numeric:tabular-nums; line-height:1.05; }
.capital-sub{ font-size:13px; color:var(--fg3); margin-top:4px; font-weight:500; }
.pill{ display:inline-flex; align-items:center; gap:6px; font-size:11px; font-weight:600; color:var(--fg2); background:var(--bg-elev-2); padding:5px 10px; border-radius:var(--r-pill); }
.pill-live i{ width:6px; height:6px; border-radius:50%; background:var(--income); animation:blink 1.8s var(--ease) infinite; }
@keyframes blink{ 0%,100%{ opacity:1; } 50%{ opacity:.35; } }

.acc-list{ padding:4px 12px; display:flex; flex-direction:column; gap:6px; }
.acc{ display:flex; align-items:center; gap:12px; padding:11px 12px; border-radius:16px; background:var(--bg); border:1px solid var(--border); box-shadow:var(--sh-tile); }
.acc-ic{ width:38px; height:38px; flex:0 0 38px; border-radius:12px; background:var(--c,#111); color:#fff; display:grid; place-items:center; font-weight:700; font-size:16px; }
.acc-main{ display:flex; flex-direction:column; min-width:0; }
.acc-name{ font-weight:600; font-size:14.5px; }
.acc-cur{ font-size:11.5px; color:var(--fg3); font-weight:500; }
.acc-bal{ margin-left:auto; font-weight:700; font-size:14.5px; }

/* (мёртвый .tabbar/.tab старого мокапа удалён — конфликтовал с реальным таббаром телефона) */

/* ============================== STRIP ============================== */
.strip{ border-block:1px solid var(--border); background:var(--bg-soft); }
.strip-in{
  max-width:var(--maxw); margin:0 auto; padding:16px clamp(16px,4vw,40px);
  display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:14px 22px;
}
.strip-item{ display:inline-flex; align-items:center; gap:8px; font-size:14px; font-weight:500; color:var(--fg2); }
.strip-item svg{ width:18px; height:18px; fill:none; stroke:var(--fg3); stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.strip-dot{ width:4px; height:4px; border-radius:50%; background:var(--border-strong); }
@media (max-width:640px){ .strip-dot{ display:none; } }

/* ============================== SECTIONS ============================== */
.section{ max-width:var(--maxw); margin:0 auto; padding:clamp(56px,9vw,120px) clamp(16px,4vw,40px); }
.section.pt0{ padding-top:0; }
.sec-head{ max-width:640px; margin:0 auto clamp(36px,5vw,64px); text-align:center; }
.kicker{ display:inline-block; font-size:13px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--fg3); margin-bottom:14px; }
.sec-head h2{ font-size:clamp(28px,4vw,44px); line-height:1.08; font-weight:800; letter-spacing:-.03em; margin:0 0 14px; }
.sec-head p{ font-size:clamp(15px,1.6vw,18px); color:var(--fg2); margin:0; }

/* ---- feature row ---- */
.feature{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(24px,5vw,72px); align-items:center; padding:clamp(28px,5vw,56px) 0; }
.feature-rev .feature-text{ order:2; }
.f-num{ display:inline-block; font-family:var(--fm); font-size:13px; font-weight:600; color:var(--fg3); letter-spacing:.1em; margin-bottom:14px; }
.feature-text h3{ font-size:clamp(24px,3.2vw,36px); line-height:1.1; font-weight:800; letter-spacing:-.025em; margin:0 0 16px; }
.feature-text p{ font-size:clamp(15px,1.6vw,18px); color:var(--fg2); margin:0 0 22px; max-width:44ch; }
.ticks{ list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:12px; }
.ticks li{ position:relative; padding-left:32px; font-size:15.5px; font-weight:500; color:var(--fg1); }
.ticks li::before{
  content:""; position:absolute; left:0; top:1px; width:21px; height:21px; border-radius:50%;
  background:var(--fg1);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round' d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/13px no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round' d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/13px no-repeat;
}
.feature-visual{ display:flex; justify-content:center; }

/* ---- generic UI card ---- */
.card-ui{ width:100%; max-width:400px; background:var(--bg); border:1px solid var(--border); border-radius:var(--r-xl); padding:26px; box-shadow:var(--sh-lg); }
.elevate{ position:relative; }
.cu-row{ display:flex; justify-content:space-between; align-items:center; margin-bottom:14px; }
.cu-label{ font-size:14px; font-weight:600; color:var(--fg2); }
.cu-big{ font-size:clamp(34px,4.6vw,46px); font-weight:800; letter-spacing:-.03em; line-height:1; }
.cu-bars{ display:flex; align-items:flex-end; gap:14px; height:120px; margin:26px 0 14px; padding-top:6px; }
.cu-bars .bar{ flex:1; position:relative; height:var(--h); min-height:26px; background:linear-gradient(180deg,var(--ink-800),var(--ink-900)); border-radius:12px 12px 8px 8px; display:flex; align-items:flex-end; justify-content:center; box-shadow:var(--sh-sm); }
.cu-bars .bar:nth-child(2){ background:linear-gradient(180deg,var(--ink-500),var(--ink-600)); }
.cu-bars .bar:nth-child(3){ background:linear-gradient(180deg,var(--ink-300),var(--ink-400)); }
.cu-bars .bar span{ position:absolute; bottom:8px; color:#fff; font-size:11px; font-weight:700; letter-spacing:.02em; }
.cu-foot{ font-size:13.5px; color:var(--fg3); font-weight:500; }

/* ---- donut ---- */
.donut-wrap{ display:flex; align-items:center; gap:22px; margin-top:22px; }
.donut{ width:130px; height:130px; flex:0 0 130px; transform:rotate(-90deg); }
.donut-ring{ fill:none; stroke:var(--bg-sunken); stroke-width:5; }
.donut-seg{ fill:none; stroke:var(--sc); stroke-width:5; stroke-linecap:round;
  stroke-dasharray:var(--seg) 100; stroke-dashoffset:calc(0 - var(--off)); }
.legend{ list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:9px; }
.legend li{ display:flex; align-items:center; gap:9px; font-size:13.5px; color:var(--fg2); font-weight:500; }
.legend i{ width:11px; height:11px; border-radius:4px; flex:0 0 11px; }
.legend b{ margin-left:auto; color:var(--fg1); font-variant-numeric:tabular-nums; }

/* ---- goal card ---- */
.goal-card{ padding:0; overflow:hidden; }
.goal-cover{ height:120px; background:linear-gradient(135deg,var(--ink-700),var(--ink-900)); display:flex; align-items:flex-end; padding:16px 20px; position:relative; }
.goal-cover::after{ content:""; position:absolute; inset:0; background:radial-gradient(120% 80% at 80% -10%, rgba(255,255,255,.14), transparent 60%); }
.goal-cover span{ position:relative; color:#fff; font-weight:700; font-size:18px; letter-spacing:-.01em; }
.goal-body{ display:flex; align-items:center; gap:20px; padding:22px 24px; }
.ring{ width:92px; height:92px; flex:0 0 92px; transform:rotate(-90deg); }
.ring-bg{ fill:none; stroke:var(--bg-sunken); stroke-width:5; }
.ring-fg{ fill:none; stroke:var(--fg1); stroke-width:5; stroke-linecap:round; stroke-dasharray:0 999; }
.goal-nums{ display:flex; flex-direction:column; }
.goal-pct{ font-size:34px; font-weight:800; letter-spacing:-.02em; line-height:1; }
.goal-line{ font-size:15px; font-weight:700; margin-top:6px; }
.goal-line span{ color:var(--fg3); font-weight:500; }
.goal-eta{ font-size:12.5px; color:var(--fg3); margin-top:4px; }

/* ============================== GRID TILES ============================== */
.grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(14px,2vw,22px); }
.tile{ background:var(--bg); border:1px solid var(--border); border-radius:var(--r-lg); padding:26px; box-shadow:var(--sh-tile);
  transition:transform .3s var(--spring), box-shadow .3s var(--ease), border-color .3s var(--ease); }
.tile:hover{ transform:translateY(-4px); box-shadow:var(--sh-lg); border-color:var(--border-strong); }
.tile-ic{ width:46px; height:46px; border-radius:14px; background:var(--fg1); display:grid; place-items:center; margin-bottom:18px; box-shadow:var(--sh-btn); }
.tile-ic svg{ width:24px; height:24px; fill:none; stroke:#fff; stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round; }
.tile h4{ font-size:18px; font-weight:700; letter-spacing:-.015em; margin:0 0 8px; }
.tile p{ font-size:14.5px; color:var(--fg2); margin:0; line-height:1.55; }

/* ============================== HOW ============================== */
.how{ background:var(--bg-soft); max-width:none; border-block:1px solid var(--border); }
.how > *{ max-width:var(--maxw); margin-inline:auto; }
.steps{ display:grid; grid-template-columns:1fr auto 1fr auto 1fr; align-items:start; gap:8px; }
.step{ text-align:center; padding:0 12px; }
.step-n{ width:52px; height:52px; margin:0 auto 18px; border-radius:50%; background:var(--fg1); color:#fff; display:grid; place-items:center; font-weight:800; font-size:22px; box-shadow:var(--sh-btn); }
.step h4{ font-size:19px; font-weight:700; margin:0 0 8px; letter-spacing:-.015em; }
.step p{ font-size:14.5px; color:var(--fg2); margin:0; max-width:24ch; margin-inline:auto; }
.step-line{ height:2px; margin-top:26px; background:linear-gradient(90deg,var(--border),var(--border-strong),var(--border)); border-radius:2px; min-width:30px; }

/* ============================== CTA BAND ============================== */
.cta-band{
  max-width:calc(var(--maxw) - 40px); margin:clamp(40px,7vw,90px) auto; text-align:center;
  padding:clamp(48px,7vw,84px) 24px; border-radius:var(--r-xl); color:#fff;
  background:radial-gradient(140% 120% at 50% -20%, #2E2E33, #000 70%);
  box-shadow:var(--sh-lg); position:relative; overflow:hidden;
}
.cta-band::after{ content:""; position:absolute; inset:0; background:radial-gradient(50% 60% at 50% 0%, rgba(255,255,255,.08), transparent 70%); pointer-events:none; }
.cta-mark{ width:64px; height:64px; margin:0 auto 22px; color:#fff; opacity:.95; }
.cta-band h2{ font-size:clamp(28px,4.4vw,46px); font-weight:800; letter-spacing:-.03em; margin:0 0 12px; }
.cta-band p{ font-size:clamp(15px,1.7vw,18px); color:rgba(255,255,255,.66); margin:0 0 30px; }
.cta-band .btn-primary{ background:#fff; color:#000; box-shadow:0 10px 30px rgba(0,0,0,.35); }
.cta-band .btn-primary:hover{ background:#f1f3f7; }

/* ============================== FAQ ============================== */
.faq-list{ max-width:760px; margin:0 auto; display:flex; flex-direction:column; gap:12px; }
.qa{ background:var(--bg); border:1px solid var(--border); border-radius:var(--r-md); box-shadow:var(--sh-sm); overflow:hidden; transition:border-color .2s, box-shadow .2s; }
.qa[open]{ border-color:var(--border-strong); box-shadow:var(--sh-md); }
.qa summary{ list-style:none; cursor:pointer; padding:20px 22px; font-size:16.5px; font-weight:600; display:flex; align-items:center; justify-content:space-between; gap:16px; }
.qa summary::-webkit-details-marker{ display:none; }
.qa summary i{ position:relative; width:16px; height:16px; flex:0 0 16px; }
.qa summary i::before,.qa summary i::after{ content:""; position:absolute; background:var(--fg2); border-radius:2px; transition:transform .25s var(--ease); }
.qa summary i::before{ inset:7px 0; height:2px; }
.qa summary i::after{ inset:0 7px; width:2px; }
.qa[open] summary i::after{ transform:scaleY(0); }
.qa-body{ padding:0 22px 20px; font-size:15px; color:var(--fg2); line-height:1.6; }

/* ============================== FOOTER ============================== */
.foot{ border-top:1px solid var(--border); background:var(--bg-soft); }
.foot-top{ max-width:var(--maxw); margin:0 auto; padding:40px clamp(16px,4vw,40px) 24px; display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap; }
.foot-links{ display:flex; gap:8px; flex-wrap:wrap; }
.foot-links a{ padding:8px 14px; border-radius:var(--r-pill); font-size:14.5px; color:var(--fg2); font-weight:500; transition:color .2s, background .2s; }
.foot-links a:hover{ color:var(--fg1); background:var(--bg-elev-2); }
.foot-bot{ max-width:var(--maxw); margin:0 auto; padding:18px clamp(16px,4vw,40px) 40px; display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap; border-top:1px solid var(--border); font-size:13.5px; color:var(--fg3); }
.foot-tag{ font-family:var(--fb); font-weight:700; }

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

.tilt{ transition:transform .4s var(--ease); transform-style:preserve-3d; }
.float{ animation:float 5.5s ease-in-out infinite; }
.chip-b.float{ animation-delay:-2.6s; }
@keyframes float{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-12px); } }

@media (prefers-reduced-motion:reduce){
  .reveal,.reveal.stagger>*{ opacity:1 !important; transform:none !important; transition:none !important; }
  .float,.pill-live i{ animation:none !important; }
  .accent-underline::after{ animation:none; transform:scaleX(1); }
  .tilt{ transform:none !important; }
}

/* ============================== RESPONSIVE ============================== */
@media (max-width:900px){
  .nav-links{ display:none; }
  .hero{ grid-template-columns:1fr; text-align:center; }
  .hero-sub{ margin-inline:auto; } .hero-cta{ justify-content:center; } .hero-meta{ justify-content:center; }
  .hero-stage{ min-height:480px; margin-top:10px; }
  .feature{ grid-template-columns:1fr; text-align:center; }
  .feature-rev .feature-text{ order:0; }
  .feature-text p{ margin-inline:auto; }
  .ticks{ display:inline-flex; text-align:left; }
  .grid{ grid-template-columns:1fr 1fr; }
  .steps{ grid-template-columns:1fr; gap:26px; }
  .step-line{ display:none; }
}
@media (max-width:560px){
  .grid{ grid-template-columns:1fr; }
  .chip-a{ left:0; } .chip-b{ right:0; }
  .donut-wrap{ flex-direction:column; align-items:center; }
  .foot-bot{ justify-content:center; text-align:center; }
}

/* ============================================================
   HERO v2 — cinematic / glassmorphism (light, immersive)
   ============================================================ */

/* glass secondary button */
.btn-glass{
  background:rgba(255,255,255,.55); color:var(--fg1);
  border:1px solid rgba(255,255,255,.8);
  backdrop-filter:blur(14px) saturate(1.5); -webkit-backdrop-filter:blur(14px) saturate(1.5);
  box-shadow:0 6px 20px rgba(20,28,46,.10), inset 0 1px 0 rgba(255,255,255,.9);
}
.btn-glass:hover{ transform:translateY(-2px); background:rgba(255,255,255,.75); box-shadow:0 12px 30px rgba(20,28,46,.14); }

/* ---- floating pill nav ---- */
.pill-nav{
  position:fixed; top:16px; left:50%; transform:translateX(-50%); z-index:200;
  display:flex; align-items:center; gap:8px;
  padding:8px 8px 8px 16px; border-radius:var(--r-pill);
  background:rgba(255,255,255,.62); border:1px solid rgba(255,255,255,.8);
  backdrop-filter:blur(18px) saturate(1.7); -webkit-backdrop-filter:blur(18px) saturate(1.7);
  box-shadow:0 10px 34px rgba(20,28,46,.12), inset 0 1px 0 rgba(255,255,255,.9);
  transition:box-shadow .3s var(--ease), top .3s var(--ease);
}
.pill-nav.scrolled{ top:10px; box-shadow:0 14px 40px rgba(20,28,46,.18); }
.pn-brand{ display:inline-flex; align-items:center; gap:9px; padding-right:6px; }
.pn-mark{ width:26px; height:26px; color:var(--fg1); }
.pn-word{ font-family:var(--fb); font-weight:800; font-size:19px; letter-spacing:.01em; }
.pn-links{ display:flex; gap:2px; }
.pn-links a{ padding:9px 14px; border-radius:var(--r-pill); font-size:14px; font-weight:500; color:var(--fg2); transition:color .2s, background .2s; }
.pn-links a:hover{ color:var(--fg1); background:rgba(20,28,46,.06); }
.pn-cta{
  display:inline-flex; align-items:center; padding:11px 20px; border-radius:var(--r-pill);
  background:var(--accent); color:var(--fg-on-accent); font-size:14px; font-weight:600;
  box-shadow:var(--sh-btn); transition:transform .25s var(--spring), background .2s;
}
.pn-cta:hover{ background:var(--accent-hover); }

/* бургер (только мобилка) */
.pn-burger{ display:none; flex-direction:column; justify-content:center; gap:5px;
  width:44px; height:44px; padding:0 12px; border:none; background:transparent; cursor:pointer; }
.pn-burger span{ display:block; width:20px; height:2px; border-radius:2px; background:var(--fg1);
  transition:transform .28s var(--ease), opacity .18s; }
.pill-nav.open .pn-burger span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.pill-nav.open .pn-burger span:nth-child(2){ opacity:0; }
.pill-nav.open .pn-burger span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

/* выпадающее меню (стекло как навбар) */
.pn-menu{ display:none; position:fixed; top:74px; left:50%; z-index:199;
  width:min(320px,90vw); flex-direction:column; gap:2px; padding:10px; border-radius:24px;
  background:rgba(255,255,255,.72); border:1px solid rgba(255,255,255,.85);
  -webkit-backdrop-filter:blur(20px) saturate(1.7); backdrop-filter:blur(20px) saturate(1.7);
  box-shadow:0 20px 50px rgba(20,28,46,.18), inset 0 1px 0 rgba(255,255,255,.9);
  opacity:0; pointer-events:none; transform:translateX(-50%) translateY(-10px);
  transition:opacity .26s var(--ease), transform .26s var(--ease); }
.pn-menu.open{ opacity:1; pointer-events:auto; transform:translateX(-50%) translateY(0); }
.pn-menu a{ padding:14px 16px; border-radius:15px; font-size:16px; font-weight:600; color:var(--fg1); }
.pn-menu a:active, .pn-menu a:hover{ background:rgba(20,28,46,.06); }
.pn-menu-cta{ margin-top:6px; text-align:center; background:var(--accent); color:var(--fg-on-accent) !important; font-weight:700 !important; }

/* CTA слайда — крупная ЯВНАЯ кнопка «в приложение». Отдельная понятная цель
   (не весь телефон/экран), чтобы пользователь не попал на неё случайно при
   скролле. Есть на каждом слайде, в колонке копии. */
.scene-cta{
  display:inline-flex; align-items:center; gap:10px; margin-top:34px;
  padding:15px 26px; border-radius:var(--r-pill);
  background:var(--accent); color:var(--fg-on-accent); font-size:16px; font-weight:600;
  box-shadow:var(--sh-btn); transition:transform .25s var(--spring), background .2s;
  cursor:pointer; text-decoration:none; white-space:nowrap;
}
.scene-cta:hover{ background:var(--accent-hover); transform:translateY(-2px); }
.scene-cta svg{ width:18px; height:18px; flex:none; }
.scene-cta .sc-note{ margin-left:2px; font-weight:600; font-size:13px; color:#3BD684; }
@media (max-width:900px){ .scene-cta{ margin-top:26px; } }

/* ---- hero shell ---- */
.h-hero{
  position:relative; min-height:100svh; overflow:hidden;
  display:flex; flex-direction:column; align-items:center; justify-content:flex-start;
  padding:clamp(96px,14vh,150px) 20px 0; text-align:center;
}

/* atmospheric background */
.h-bg{ position:absolute; inset:0; z-index:0; background:linear-gradient(180deg,#F4F6FA 0%, #FBFCFE 46%, #FFFFFF 100%); }
.h-blob{ position:absolute; border-radius:50%; filter:blur(60px); opacity:.9; }
.h-blob-1{ width:52vw; height:52vw; top:-16vw; left:-10vw; background:radial-gradient(closest-side, rgba(20,28,46,.10), transparent 72%); }
.h-blob-2{ width:46vw; height:46vw; top:-8vw; right:-12vw; background:radial-gradient(closest-side, rgba(20,28,46,.09), transparent 72%); }
.h-blob-3{ width:70vw; height:40vw; bottom:-18vw; left:15vw; background:radial-gradient(closest-side, rgba(120,132,158,.14), transparent 70%); }
.h-ring{
  position:absolute; width:min(58vw,760px); height:min(58vw,760px);
  top:50%; left:50%; transform:translate(-50%,-46%); color:rgba(20,28,46,.045);
  animation:spin 90s linear infinite;
}
@keyframes spin{ to{ transform:translate(-50%,-46%) rotate(360deg); } }
.h-grain{
  position:absolute; inset:0; opacity:.4; mix-blend-mode:soft-light; pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
}

/* hero copy */
.h-inner{ position:relative; z-index:2; max-width:820px; }
.h-badge{
  display:inline-flex; align-items:center; gap:8px; margin-bottom:26px;
  font-size:13px; font-weight:600; color:var(--fg2);
  background:rgba(255,255,255,.6); border:1px solid rgba(255,255,255,.8);
  backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
  padding:8px 16px; border-radius:var(--r-pill); box-shadow:0 4px 14px rgba(20,28,46,.08);
  opacity:0; animation:fadeUp .8s var(--ease) .1s forwards;
}
.h-badge .dot{ width:7px; height:7px; border-radius:50%; background:var(--income); box-shadow:0 0 0 3px rgba(29,179,106,.18); }
.h-title{ margin:0 0 22px; font-weight:800; letter-spacing:-.045em; line-height:.96;
  font-size:clamp(46px,8.5vw,104px); }
.h-title span{ display:block; }
.h-title .l1,.h-title .l2{ opacity:0; transform:translateY(28px); animation:fadeUp .9s var(--ease) forwards; }
.h-title .l1{ animation-delay:.18s; }
.h-title .l2{ animation-delay:.30s; color:var(--fg1); -webkit-text-stroke:0; }
.h-sub{ max-width:38ch; margin:0 auto 34px; font-size:clamp(16px,1.8vw,20px); line-height:1.55; color:var(--fg2);
  opacity:0; animation:fadeUp .9s var(--ease) .42s forwards; }
.h-cta{ display:flex; flex-wrap:wrap; gap:12px; justify-content:center;
  opacity:0; animation:fadeUp .9s var(--ease) .54s forwards; }
@keyframes fadeUp{ to{ opacity:1; transform:none; } }

/* ---- floating glass product cards ---- */
.h-stage{
  position:relative; z-index:1; display:flex; align-items:center; justify-content:center;
  margin-top:clamp(20px,4vw,46px); perspective:1300px; width:100%;
}
.g-card{
  position:relative;
  background:rgba(255,255,255,.55); border:1px solid rgba(255,255,255,.8);
  backdrop-filter:blur(24px) saturate(1.7); -webkit-backdrop-filter:blur(24px) saturate(1.7);
  border-radius:26px; padding:20px;
  box-shadow:0 24px 60px rgba(20,28,46,.16), 0 6px 16px rgba(20,28,46,.07), inset 0 1px 0 rgba(255,255,255,.85);
  transition:transform .55s var(--ease), opacity .7s var(--ease), box-shadow .3s var(--ease);
  opacity:0;
}
.h-stage.ready .g-card{ opacity:1; }
.gc-goal   { width:min(230px,42vw); z-index:1; margin-right:-34px;
  transform:translate3d(var(--px,0px),calc(-30px + var(--py,0px) + var(--enter,44px)),0) rotate(-6deg); }
.gc-capital{ width:min(320px,74vw); z-index:3;
  transform:translate3d(var(--px,0px),calc(8px + var(--py,0px) + var(--enter,44px)),0); }
.gc-spend  { width:min(230px,42vw); z-index:2; margin-left:-34px;
  transform:translate3d(var(--px,0px),calc(38px + var(--py,0px) + var(--enter,44px)),0) rotate(6deg); }
.h-stage.ready .gc-goal   { --enter:0px; transition-delay:.05s; }
.h-stage.ready .gc-capital{ --enter:0px; }
.h-stage.ready .gc-spend  { --enter:0px; transition-delay:.10s; }

.gc-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:12px; }
.gc-cap{ font-size:13px; font-weight:600; color:var(--fg2); }
.gc-amount{ font-size:clamp(26px,3.4vw,36px); font-weight:800; letter-spacing:-.03em; line-height:1; }
.gc-amount.sm{ font-size:clamp(22px,2.8vw,28px); }
.gc-sub{ font-size:13px; color:var(--fg3); font-weight:500; margin-top:6px; }
.gc-mini{ margin-top:16px; display:flex; flex-direction:column; gap:8px; padding-top:14px; border-top:1px solid var(--border); }
.gc-acc{ display:flex; align-items:center; gap:9px; font-size:13px; font-weight:500; color:var(--fg1); }
.gc-acc i{ width:26px; height:26px; flex:0 0 26px; border-radius:8px; background:var(--c,#111); color:#fff; display:grid; place-items:center; font-size:12px; font-weight:700; font-style:normal; }
.gc-acc b{ margin-left:auto; font-weight:700; }
.gc-goal-row{ display:flex; align-items:center; gap:14px; }
.ring-sm{ width:56px; height:56px; flex:0 0 56px; transform:rotate(-90deg); }
.gc-goal-name{ font-size:14px; font-weight:700; letter-spacing:-.01em; }
.gc-goal-pct{ font-size:24px; font-weight:800; letter-spacing:-.02em; margin-top:2px; }
.donut-sm{ width:74px; height:74px; margin-top:12px; transform:rotate(-90deg); }

/* scroll cue */
.h-scroll{
  position:absolute; bottom:26px; left:50%; transform:translateX(-50%); z-index:3;
  display:inline-flex; align-items:center; gap:9px; padding:9px 16px; border-radius:var(--r-pill);
  background:rgba(255,255,255,.55); border:1px solid rgba(255,255,255,.8);
  backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
  box-shadow:0 6px 18px rgba(20,28,46,.10);
  font-size:11px; font-weight:700; letter-spacing:.22em; color:var(--fg2);
  opacity:0; animation:fadeUp .9s var(--ease) .8s forwards;
}
.h-scroll i{ width:14px; height:14px; border-right:2px solid var(--fg2); border-bottom:2px solid var(--fg2);
  transform:rotate(45deg) translate(-1px,-1px); animation:bob 1.8s var(--ease) infinite; }
@keyframes bob{ 0%,100%{ transform:rotate(45deg) translate(-1px,-1px); } 50%{ transform:rotate(45deg) translate(1px,1px); } }

/* reduced motion */
@media (prefers-reduced-motion:reduce){
  .h-ring,.h-scroll i{ animation:none; }
  .h-badge,.h-title .l1,.h-title .l2,.h-sub,.h-cta,.h-scroll{ animation:none; opacity:1; transform:none; }
  .g-card{ opacity:1 !important; }
  .gc-goal{ transform:translateY(-30px) rotate(-6deg); }
  .gc-capital{ transform:translateY(8px); }
  .gc-spend{ transform:translateY(38px) rotate(6deg); }
}

/* responsive */
@media (max-width:820px){
  .pn-links{ display:none; }
  .pn-cta{ display:none; }       /* на мобилке вместо отдельного CTA — бургер (CTA есть в меню) */
  .pn-burger{ display:flex; }
  .pn-menu{ display:flex; }
  .h-stage{ margin-top:30px; }
  .gc-goal,.gc-spend{ display:none; }
  .gc-capital{ width:min(360px,86vw); }
}

/* ============================================================
   HERO v2.1 — premium polish: spotlight, sheen, tilt, chips
   ============================================================ */

/* курсорный мягкий свет */
.h-spot{
  position:absolute; inset:0; z-index:1; pointer-events:none; opacity:.9;
  background:radial-gradient(300px circle at var(--mx,50%) var(--my,32%),
             rgba(140,158,196,.18), rgba(140,158,196,0) 62%);
  transition:opacity .4s var(--ease);
}

/* карточки: 3D + блик */
.g-card{ transform-style:preserve-3d; overflow:hidden; }
.g-card::after{
  content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none; z-index:5;
  background:linear-gradient(115deg, transparent 34%, rgba(255,255,255,.5) 48%, transparent 62%);
  background-size:260% 100%; background-position:150% 0; mix-blend-mode:screen;
  animation:sheen 7s var(--ease) infinite;
}
.gc-goal::after{ animation-delay:.6s; }
.gc-spend::after{ animation-delay:1.2s; }
@keyframes sheen{ 0%{ background-position:150% 0; } 55%,100%{ background-position:-60% 0; } }

/* tilt-переменные добавляем в composited-трансформ */
.gc-goal   { transform:translate3d(var(--px,0px),calc(-30px + var(--py,0px) + var(--enter,44px)),0) rotate(-6deg) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)); }
.gc-capital{ transform:translate3d(var(--px,0px),calc(8px + var(--py,0px) + var(--enter,44px)),0) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)); }
.gc-spend  { transform:translate3d(var(--px,0px),calc(38px + var(--py,0px) + var(--enter,44px)),0) rotate(6deg) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)); }
/* после появления убираем transition — движением рулит JS (GSAP) */
.h-stage.settled .g-card{ transition:box-shadow .3s var(--ease); }

/* парящие glass-чипы */
.h-chip{
  position:absolute; z-index:4; display:flex; flex-direction:column; align-items:flex-start; gap:1px;
  padding:9px 14px; border-radius:15px;
  background:rgba(255,255,255,.6); border:1px solid rgba(255,255,255,.85);
  backdrop-filter:blur(14px) saturate(1.6); -webkit-backdrop-filter:blur(14px) saturate(1.6);
  box-shadow:0 14px 34px rgba(20,28,46,.16), inset 0 1px 0 rgba(255,255,255,.9);
  font-weight:800; font-size:15px; line-height:1.1;
  transform:translate3d(var(--px,0px),var(--py,0px),0);
  opacity:0; animation:fadeOnly .9s var(--ease) 1s forwards;
}
.h-chip small{ font-size:10.5px; font-weight:600; color:var(--fg3); }
.h-chip-1{ top:32%; left:6%; }
.h-chip-2{ bottom:30%; right:6%; }
@keyframes fadeOnly{ to{ opacity:1; } }

@media (prefers-reduced-motion:reduce){
  .g-card::after{ animation:none; opacity:0; }
  .h-spot{ display:none; }
  .h-chip{ animation:none; opacity:1; }
}
@media (max-width:820px){
  .h-chip{ display:none; }
}

/* ============================================================
   HERO v3 — editorial minimal (k95 / neko / noth направление)
   Крупная типографика, монохром, сборка лого из лепестков-монет.
   ============================================================ */

/* --- custom cursor (ring + dot, mix-blend) --- */
.e-cursor{ display:none; }
html.cursor-on{ cursor:none; }
html.cursor-on a, html.cursor-on button, html.cursor-on .magnetic{ cursor:none; }
html.cursor-on .e-cursor{
  display:block; position:fixed; top:0; left:0; z-index:9999; pointer-events:none;
  width:34px; height:34px; margin:-17px 0 0 -17px; border-radius:50%;
  border:1.5px solid #fff; mix-blend-mode:difference;
  transition:width .22s var(--ease), height .22s var(--ease), margin .22s var(--ease), background .22s var(--ease);
  will-change:transform;
}
html.cursor-on .e-cursor::after{
  content:""; position:absolute; top:50%; left:50%; width:4px; height:4px; margin:-2px 0 0 -2px;
  border-radius:50%; background:#fff;
}
html.cursor-on .e-cursor.is-hover{ width:56px; height:56px; margin:-28px 0 0 -28px; background:rgba(255,255,255,.12); }

/* --- editorial nav --- */
.e-nav{
  position:fixed; top:0; left:0; right:0; z-index:200;
  display:grid; grid-template-columns:1fr auto 1fr; align-items:center;
  padding:18px clamp(18px,4vw,44px); transition:padding .3s var(--ease);
}
.e-nav::before{
  content:""; position:absolute; inset:0; z-index:-1; opacity:0;
  background:rgba(255,255,255,.7); backdrop-filter:blur(16px) saturate(1.4); -webkit-backdrop-filter:blur(16px) saturate(1.4);
  border-bottom:1px solid var(--border); transition:opacity .3s var(--ease);
}
.e-nav.scrolled::before{ opacity:1; }
.e-nav.scrolled{ padding-top:12px; padding-bottom:12px; }
.e-brand{ justify-self:start; display:inline-flex; align-items:center; gap:9px; }
.e-brand-mark{ width:26px; height:26px; color:var(--fg1); }
.e-brand-word{ font-family:var(--fb); font-weight:800; font-size:20px; letter-spacing:.01em; }
.e-links{ justify-self:center; display:flex; gap:clamp(12px,2.4vw,30px); }
.e-links a{ position:relative; font-size:13px; font-weight:500; letter-spacing:.02em; color:var(--fg2); padding:4px 0; transition:color .2s; }
.e-links a::after{ content:""; position:absolute; left:0; right:100%; bottom:0; height:1px; background:var(--fg1); transition:right .3s var(--ease); }
.e-links a:hover{ color:var(--fg1); } .e-links a:hover::after{ right:0; }
.e-nav-cta{ justify-self:end; display:inline-flex; align-items:center; padding:10px 18px; border-radius:var(--r-pill);
  border:1px solid var(--border-strong); font-size:13px; font-weight:600; color:var(--fg1);
  transition:background .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease); }
.e-nav-cta:hover{ background:var(--fg1); color:var(--fg-on-accent); border-color:var(--fg1); }

/* --- hero shell --- */
.e-hero{
  position:relative; min-height:100svh; overflow:hidden;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; padding:clamp(110px,16vh,160px) 20px 90px;
}
.e-grain{
  position:absolute; inset:0; z-index:0; opacity:.45; pointer-events:none; mix-blend-mode:soft-light;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
}
.e-hero-inner{ position:relative; z-index:2; max-width:1000px; display:flex; flex-direction:column; align-items:center; }

.e-eyebrow{
  font-size:12px; font-weight:600; letter-spacing:.24em; text-transform:uppercase; color:var(--fg3);
  margin-bottom:clamp(22px,4vh,40px);
  opacity:0; animation:fadeUp .9s var(--ease) .15s forwards;
}

/* petal crest */
.e-crest{ margin-bottom:clamp(22px,4vh,38px); }
.e-petals{ width:clamp(84px,11vw,132px); height:clamp(84px,11vw,132px); color:var(--fg1); }
.e-petal{ transform-box:fill-box; }

/* headline */
.e-title{ margin:0; font-weight:800; letter-spacing:-.05em; line-height:.9;
  font-size:clamp(46px,9.4vw,124px); }
.e-line{ display:block; overflow:hidden; padding-bottom:.03em; }
.e-in{ display:block; transform:translateY(112%); }
.e-title .e-line:nth-child(1) .e-in{ animation:lineUp 1.05s var(--ease) .5s forwards; }
.e-title .e-line:nth-child(2) .e-in{ animation:lineUp 1.05s var(--ease) .62s forwards; }
@keyframes lineUp{ to{ transform:translateY(0); } }

.e-sub{ max-width:44ch; margin:clamp(22px,3.4vh,30px) auto 0; font-size:clamp(16px,1.7vw,20px); line-height:1.55; color:var(--fg2);
  opacity:0; animation:fadeUp .9s var(--ease) .95s forwards; }

.e-actions{ display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:clamp(14px,2vw,26px); margin-top:clamp(28px,4vh,40px);
  opacity:0; animation:fadeUp .9s var(--ease) 1.08s forwards; }
.e-textlink{ position:relative; display:inline-flex; align-items:center; gap:9px; font-size:15.5px; font-weight:600; color:var(--fg1); padding:4px 0; }
.e-textlink i{ width:16px; height:16px; border-right:1.6px solid currentColor; border-bottom:1.6px solid currentColor;
  transform:rotate(-45deg) translate(-1px,1px); transition:transform .25s var(--ease); }
.e-textlink::after{ content:""; position:absolute; left:0; right:0; bottom:0; height:1.5px; background:var(--fg1); transform:scaleX(0); transform-origin:left; transition:transform .3s var(--ease); }
.e-textlink:hover::after{ transform:scaleX(1); }
.e-textlink:hover i{ transform:rotate(-45deg) translate(2px,-2px); }

/* scroll cue */
.e-scroll{ position:absolute; bottom:26px; left:50%; transform:translateX(-50%); z-index:3;
  display:inline-flex; flex-direction:column; align-items:center; gap:10px;
  font-size:10px; font-weight:700; letter-spacing:.28em; color:var(--fg3);
  opacity:0; animation:fadeUp .9s var(--ease) 1.3s forwards; }
.e-scroll i{ width:1px; height:38px; background:linear-gradient(var(--fg3),transparent); position:relative; overflow:hidden; }
.e-scroll i::after{ content:""; position:absolute; top:-38px; left:0; width:1px; height:38px; background:linear-gradient(transparent,var(--fg1)); animation:scrollLine 2s var(--ease) infinite; }
@keyframes scrollLine{ 0%{ transform:translateY(0); } 100%{ transform:translateY(76px); } }

/* marquee band */
.e-marquee{ position:relative; overflow:hidden; border-block:1px solid var(--border); background:var(--bg); padding:20px 0; }
.e-marquee-track{ display:inline-flex; align-items:center; gap:26px; white-space:nowrap; will-change:transform; animation:marquee 26s linear infinite; }
.e-marquee-track span{ font-size:clamp(18px,2.4vw,30px); font-weight:800; letter-spacing:-.02em; color:var(--fg1); text-transform:uppercase; }
.e-marquee-track b{ color:var(--fg3); font-size:14px; }
@keyframes marquee{ to{ transform:translateX(-50%); } }

/* reduced motion */
@media (prefers-reduced-motion:reduce){
  .e-eyebrow,.e-sub,.e-actions,.e-scroll{ animation:none; opacity:1; }
  .e-in{ animation:none; transform:none; }
  .e-scroll i::after{ animation:none; }
  .e-marquee-track{ animation:none; }
}

/* responsive */
@media (max-width:720px){
  .e-nav{ grid-template-columns:1fr auto; }
  .e-links{ display:none; }
  .e-nav-cta{ justify-self:end; }
}

/* ============================================================
   HERO v3.1 — editorial structure: ghost ring, corner meta
   ============================================================ */
.e-ghost-ring{
  position:absolute; inset:0; margin:auto; z-index:0;
  width:min(72vw,840px); height:min(72vw,840px);
  color:rgba(20,28,46,.045); transform-origin:50% 50%;
  animation:spin360 110s linear infinite;
}
@keyframes spin360{ from{ transform:rotate(0); } to{ transform:rotate(360deg); } }

.e-petals{ width:clamp(96px,13vw,166px); height:clamp(96px,13vw,166px); }
.e-crest .e-petals{ animation:floaty 6.5s ease-in-out infinite; }
@keyframes floaty{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-8px); } }

.e-meta{ position:absolute; bottom:28px; z-index:3; font-size:11px; font-weight:600;
  letter-spacing:.16em; text-transform:uppercase; color:var(--fg3);
  opacity:0; animation:fadeUp 1s var(--ease) 1.4s forwards; }
.e-meta-l{ left:clamp(18px,4vw,44px); }
.e-meta-r{ right:clamp(18px,4vw,44px); }

@media (prefers-reduced-motion:reduce){
  .e-ghost-ring{ animation:none; }
  .e-crest .e-petals{ animation:none; }
  .e-meta{ animation:none; opacity:1; }
}
@media (max-width:720px){ .e-meta{ display:none; } }

/* ============================================================
   HERO v4 — product-first: real app UI + real brand logos
   ============================================================ */
.e-hero-product{ justify-content:center; text-align:left; padding:clamp(104px,13vh,144px) clamp(18px,4vw,44px) 64px; }
.e-hero-grid{ position:relative; z-index:2; width:100%; max-width:var(--maxw); margin:0 auto;
  display:grid; grid-template-columns:1.04fr .96fr; gap:clamp(30px,5vw,68px); align-items:center; }
.e-copy{ max-width:560px; }
.e-eyebrow{ display:inline-flex; align-items:center; gap:8px; }
.e-dot{ width:7px; height:7px; border-radius:50%; background:var(--income); box-shadow:0 0 0 3px rgba(29,179,106,.16); }
.e-hero-product .e-title{ font-size:clamp(40px,5.2vw,78px); letter-spacing:-.04em; }
.e-hero-product .e-sub{ margin-left:0; margin-right:0; }
.e-hero-product .e-actions{ justify-content:flex-start; }
.e-works{ margin-top:clamp(26px,4vh,38px); opacity:0; animation:fadeUp .9s var(--ease) 1.2s forwards; }
.e-works > span{ font-size:11.5px; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--fg3); }
.e-works-row{ display:flex; flex-wrap:wrap; gap:10px; margin-top:13px; }
.e-works-row img{ width:34px; height:34px; border-radius:10px; background:#fff; border:1px solid var(--border); padding:5px; box-shadow:var(--sh-tile); object-fit:contain; }

/* device column */
.e-device{ position:relative; display:flex; justify-content:center; z-index:2; }
.e-device .phone{ width:min(320px,80vw); }
.e-fchip{ position:absolute; z-index:4; width:58px; height:58px; border-radius:17px; padding:12px;
  background:#fff; border:1px solid var(--border); box-shadow:var(--sh-lg); display:grid; place-items:center;
  animation:floaty 6s ease-in-out infinite; }
.e-fchip img{ width:100%; height:100%; object-fit:contain; }
.e-fchip-1{ top:8%; left:-4%; }
.e-fchip-2{ bottom:12%; right:-5%; animation-delay:-3s; }

/* real-logo account tiles inside the phone */
.acc-ic.tile-logo{ background:#fff; padding:6px; box-shadow:var(--sh-tile); }
.acc-ic img{ width:100%; height:100%; object-fit:contain; display:block; }

/* logo marquee band */
.e-logos{ position:relative; overflow:hidden; border-block:1px solid var(--border); background:var(--bg-soft); padding:22px 0;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent); }
.e-logos-track{ display:inline-flex; align-items:center; gap:clamp(30px,4.4vw,58px); white-space:nowrap; will-change:transform; animation:marquee 34s linear infinite; }
.e-logos-track img{ height:30px; width:auto; flex:0 0 auto; }

@media (prefers-reduced-motion:reduce){
  .e-fchip{ animation:none; }
  .e-logos-track{ animation:none; }
}
@media (max-width:900px){
  .e-hero-grid{ grid-template-columns:1fr; text-align:center; gap:32px; }
  .e-copy{ max-width:none; }
  .e-hero-product .e-actions{ justify-content:center; }
  .e-hero-product .e-sub{ margin-inline:auto; }
  .e-eyebrow{ justify-content:center; }
  .e-works{ display:flex; flex-direction:column; align-items:center; }
  .e-fchip{ display:none; }
  .e-device{ order:2; }
}

/* ============================================================
   HERO v5 — РЕАЛЬНЫЕ элементы приложения, летящие в 3D
   (точные стили из webapp: acct-card, goal-deck-card+видео, hl-tile)
   ============================================================ */
:root{ --dur:200ms; --dur-fast:120ms; --ease-out:cubic-bezier(.22,1,.36,1); --ease-spring:cubic-bezier(.34,1.56,.64,1); }

/* серебряный перелив (из colors_and_type.css) */
.silver-text{ background-image:linear-gradient(100deg,#73777e 0%,#7e828b 34%,#949aa3 48%,#a3a8b1 50%,#949aa3 52%,#7e828b 66%,#73777e 100%);
  background-size:240% 100%; background-position:0 0; background-repeat:no-repeat; -webkit-background-clip:text; background-clip:text;
  color:transparent; -webkit-text-fill-color:transparent; animation:silver-shine 7.5s ease-in-out infinite alternate; }
@keyframes silver-shine{ from{ background-position:0 0; } to{ background-position:100% 0; } }
.silver-text.on-dark{ background-image:linear-gradient(100deg,#bcc1ca 0%,#cacfd7 30%,#dce0e6 47%,#e6eaef 50%,#dce0e6 53%,#cacfd7 70%,#bcc1ca 100%); background-size:220% 100%; }
@media (prefers-reduced-motion:reduce){ .silver-text{ animation:none; background-position:50% 0; } }

/* лого-плитки хранителя */
.hl-tile{ display:flex; align-items:center; justify-content:center; flex:none; border-radius:13px; overflow:hidden; width:48px; height:48px; }
.hl-tile-logo{ background:#fff; box-shadow:inset 0 0 0 1px rgba(0,0,0,.06); }
.hl-tile-logo img{ width:74%; height:74%; object-fit:contain; display:block; }
.hl-tile-cover{ background:transparent; box-shadow:inset 0 0 0 1px rgba(255,255,255,.08); }
.hl-tile-cover img{ width:100%; height:100%; object-fit:cover; display:block; }

/* карта счёта */
.acct-card{ position:relative; overflow:hidden; border-radius:22px; padding:18px 20px; color:#fff; cursor:pointer;
  display:flex; flex-direction:column; justify-content:space-between;
  background:linear-gradient(157deg,#2b2b31 0%,#08080a 100%); border:1px solid rgba(255,255,255,.06);
  box-shadow:0 22px 50px -18px rgba(0,0,0,.55), 0 6px 16px -8px rgba(0,0,0,.3); }
.acct-card::before{ content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(110% 80% at 20% -10%, rgba(255,255,255,.13) 0%, rgba(255,255,255,0) 62%); }
.acct-card > *{ position:relative; z-index:1; }
.ac-head{ display:flex; align-items:center; gap:11px; min-width:0; }
.ac-name{ display:block; font-size:14px; font-weight:700; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ac-bal{ font-size:28px; font-weight:800; letter-spacing:-.02em; white-space:nowrap; }

/* карта цели (фон-видео внутри) */
.goal-deck-card{ position:relative; overflow:hidden; isolation:isolate; cursor:pointer; color:#fff;
  border-radius:20px; padding:14px 16px; border:1px solid rgba(255,255,255,.07);
  display:flex; flex-direction:column; justify-content:space-between; gap:8px;
  box-shadow:0 26px 54px -18px rgba(0,0,0,.5), 0 8px 20px -10px rgba(0,0,0,.34); }
.goal-deck-card.has-media{ border-color:rgba(255,255,255,.10); background:#0c0c0c; }
.goal-bg-vid,.goal-bg-shade{ position:absolute; inset:0; width:100%; height:100%; z-index:0; border-radius:inherit; }
.goal-bg-vid{ object-fit:cover; }
.goal-bg-shade{ background:linear-gradient(165deg, rgba(0,0,0,.30), rgba(0,0,0,.80)); }
.goal-deck-card > .gd-top,.goal-deck-card > .gd-bottom{ position:relative; z-index:2; transform:translateZ(0); }
.gd-top{ display:flex; align-items:center; gap:11px; min-width:0; }
.gd-ic{ width:32px; height:32px; flex:none; display:flex; align-items:center; justify-content:center; }
.gd-name{ flex:1; min-width:0; font-weight:800; font-size:16px; letter-spacing:-.01em; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.gd-bottom{ display:flex; flex-direction:column; gap:7px; }
.gd-amt-row{ display:flex; align-items:baseline; justify-content:space-between; gap:10px; }
.gd-amt2{ font-weight:800; font-size:30px; letter-spacing:-.02em; }
.gd-pct-low{ flex:none; font-weight:800; font-size:18px; letter-spacing:-.02em; }
.gd-sub-row{ display:flex; align-items:baseline; justify-content:space-between; gap:10px; margin-top:-2px; }
.gd-of{ font-weight:700; font-size:13px; color:rgba(255,255,255,.62); white-space:nowrap; }
.gd-deadline{ flex:none; display:inline-flex; align-items:center; gap:5px; font-size:12.5px; color:rgba(255,255,255,.62); white-space:nowrap; }
.gd-bar{ height:6px; border-radius:99px; background:rgba(255,255,255,.22); overflow:hidden; }
.gd-bar-fill{ height:100%; border-radius:99px; background:#fff; }

/* ---- floating cluster ---- */
.e-device{ perspective:1400px; }
.e-float{ position:relative; width:min(500px,94vw); height:480px; }
.f-el{ position:absolute; opacity:0;
  transform:translate3d(var(--px,0px), calc(var(--py,0px) + var(--enter,48px)), 0) rotate(var(--rot,0deg)) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));
  transition:opacity .9s var(--ease), transform .95s var(--ease); }
.e-float.in .f-el{ opacity:1; --enter:0px; }
.e-float.settled .f-el{ transition:none; }
.f-inner{ animation:floaty 6.5s ease-in-out infinite; }
.f-acc1{ top:1%; left:0; z-index:3; transition-delay:.12s; }
.f-acc1 .acct-card{ width:252px; height:140px; }
.f-goal{ top:33%; left:14%; z-index:4; transition-delay:.02s; }
.f-goal .goal-deck-card{ width:min(300px,74vw); height:178px; }
.f-goal .f-inner{ animation-delay:-1.4s; }
.f-acc2{ bottom:1%; right:1%; z-index:2; transition-delay:.2s; }
.f-acc2 .acct-card{ width:228px; height:130px; }
.f-acc2 .f-inner{ animation-delay:-3s; }
.f-chip{ z-index:5; }
.f-chip .hl-tile{ width:56px; height:56px; border-radius:17px; box-shadow:0 16px 34px -12px rgba(20,28,46,.4), inset 0 0 0 1px rgba(0,0,0,.05); }
.f-chip-1{ top:-2%; right:14%; transition-delay:.26s; }
.f-chip-1 .f-inner{ animation-delay:-2.2s; }
.f-chip-2{ bottom:16%; left:-5%; transition-delay:.32s; }

@media (prefers-reduced-motion:reduce){ .f-inner{ animation:none; } }
@media (max-width:900px){ .e-float{ margin:0 auto; } }
@media (max-width:560px){ .e-float{ transform:scale(.74); height:420px; margin-top:-24px; } }

/* ============================================================
   HERO v6 — k95 «Rings Spiral»: вращающееся 3D-кольцо карт счетов
   ============================================================ */
.e-device{ perspective:1500px; }
.ring-stage{ position:relative; width:100%; height:clamp(420px,54vh,560px);
  display:flex; align-items:center; justify-content:center; perspective:1500px; cursor:grab;
  opacity:0; animation:fadeUp 1s var(--ease) .3s forwards; touch-action:pan-y; }
.ring-stage:active{ cursor:grabbing; }
.ring{ --ring-r:300px; position:relative; width:236px; height:150px; transform-style:preserve-3d;
  transform:rotateX(-7deg) rotateY(0deg); will-change:transform; }
.ring-card{ position:absolute; inset:0; backface-visibility:hidden; -webkit-backface-visibility:hidden;
  transform:rotateY(calc(var(--i) * 45deg)) translateZ(var(--ring-r)); }
.ring-card .acct-card{ width:236px; height:150px; }
@media (max-width:900px){ .ring-stage{ height:460px; } .ring{ --ring-r:262px; } }
@media (max-width:560px){ .ring{ --ring-r:212px; width:212px; } .ring-card .acct-card{ width:212px; height:140px; } }

/* ---- v6.1 tune: центрируем кольцо, чтобы карты не упирались в край ---- */
.e-hero-product .e-hero-grid{ grid-template-columns:.88fr 1.12fr; }
.ring{ --ring-r:248px; width:214px; height:140px; }
.ring-card .acct-card{ width:214px; height:140px; }
.ring-stage{ height:clamp(470px,58vh,610px); }
@media (max-width:900px){ .e-hero-product .e-hero-grid{ grid-template-columns:1fr; } .ring{ --ring-r:250px; } }
@media (max-width:560px){ .ring{ --ring-r:206px; width:200px; height:132px; } .ring-card .acct-card{ width:200px; height:132px; } }

/* ============================================================
   SCROLL-DRIVEN — Сцена 1: падают карты счетов
   ============================================================ */
.brand-mini{ position:fixed; top:22px; left:clamp(18px,4vw,44px); z-index:100;
  display:inline-flex; align-items:center; gap:9px; }
.brand-mini svg{ width:26px; height:26px; color:var(--fg1); }
.brand-mini span{ font-family:var(--fb); font-weight:800; font-size:20px; letter-spacing:.01em; color:var(--fg1); }

.scene{ position:relative; min-height:100svh; overflow:hidden; }
.scene-drop{ display:flex; align-items:center; }
.drop-copy{ position:relative; z-index:5; margin-left:clamp(20px,6vw,90px); max-width:min(560px,88vw); pointer-events:none; }
.scene-eyebrow{ font-size:12px; font-weight:600; letter-spacing:.2em; text-transform:uppercase; color:var(--fg3); }
.scene-title{ margin:16px 0 0; font-weight:800; letter-spacing:-.045em; line-height:.9; font-size:clamp(44px,7.6vw,108px); color:var(--fg1); }
.scene-lead{ margin:22px 0 0; font-size:clamp(16px,1.7vw,20px); line-height:1.5; color:var(--fg2); max-width:30ch; }

.drop-field{ position:absolute; inset:0; z-index:2; }
.drop{ position:absolute; width:214px; will-change:transform; opacity:0; }
.drop .acct-card{ width:214px; height:140px; }

.scene-scroll{ position:absolute; bottom:24px; left:50%; transform:translateX(-50%); z-index:6;
  display:flex; flex-direction:column; align-items:center; gap:9px;
  font-size:11px; font-weight:700; letter-spacing:.22em; text-transform:uppercase; color:var(--fg3); }
.scene-scroll i{ width:1px; height:36px; background:linear-gradient(var(--fg3),transparent); position:relative; overflow:hidden; }
.scene-scroll i::after{ content:""; position:absolute; top:-36px; left:0; width:1px; height:36px; background:linear-gradient(transparent,var(--fg1)); animation:scrollLine 1.9s var(--ease) infinite; }

@media (prefers-reduced-motion:reduce){ .scene-scroll i::after{ animation:none; } }

@media (max-width:820px){
  .scene-drop{ align-items:flex-start; }
  .drop-copy{ margin:clamp(80px,14vh,120px) auto 0; text-align:center; }
  .scene-lead{ margin-inline:auto; }
  .drop{ width:172px; }
  .drop .acct-card{ width:172px; height:114px; }
}

/* ---- Сцена 1: доработка композиции ---- */
.scene-title{ font-size:clamp(38px,6vw,86px); }
.scene-title span{ display:block; white-space:nowrap; }
.drop-copy{ max-width:min(520px,44vw); }

/* размеры карт для глубины (передние крупнее, задние мельче) */
.drop.lg{ width:238px; z-index:4; } .drop.lg .acct-card{ width:238px; height:150px; }
.drop.md{ width:212px; z-index:3; } .drop.md .acct-card{ width:212px; height:138px; }
.drop.sm{ width:188px; z-index:2; } .drop.sm .acct-card{ width:188px; height:123px; }

@media (max-width:820px){
  .drop.lg{ width:180px; } .drop.lg .acct-card{ width:180px; height:116px; }
  .drop.md{ width:164px; } .drop.md .acct-card{ width:164px; height:106px; }
  .drop.sm{ width:150px; } .drop.sm .acct-card{ width:150px; height:98px; }
}

/* --- Планшет + мобилка: копия ПРИЖАТА К ВЕРХУ во всю ширину, карточки — кучей в
   нижней половине (не наезжают на текст). Переопределяем inline-позиции карт.
   Позиции в % — спред масштабируется с шириной, годится и для планшета. --- */
@media (max-width:1024px){
  .hero-sticky{ align-items:flex-start !important; }
  .drop-copy{ max-width:min(640px,92vw) !important; margin:clamp(56px,9vh,100px) auto 0 !important; text-align:center; }
  .drop-copy .scene-lead{ margin-inline:auto; }
  .drop-field .drop:nth-child(1){ left:9%  !important; top:53% !important; }
  .drop-field .drop:nth-child(2){ left:47% !important; top:51% !important; }
  .drop-field .drop:nth-child(3){ left:63% !important; top:66% !important; }
  .drop-field .drop:nth-child(4){ left:3%  !important; top:67% !important; }
  .drop-field .drop:nth-child(5){ left:32% !important; top:78% !important; }
  .drop-field .drop:nth-child(6){ left:59% !important; top:82% !important; }
  .drop-field .drop:nth-child(7){ left:18% !important; top:86% !important; }
}
/* планшет: карты крупнее — контент влезает в дефолтных размерах */
@media (min-width:701px) and (max-width:1024px){
  .drop.lg{ width:206px; } .drop.lg .acct-card{ width:206px; height:132px; }
  .drop.md{ width:188px; } .drop.md .acct-card{ width:188px; height:120px; }
  .drop.sm{ width:170px; } .drop.sm .acct-card{ width:170px; height:108px; }
}
/* телефон: карты мельче + контент ужат (иконка/имя/сумма влезают целиком) */
@media (max-width:700px){
  .drop.lg{ width:158px; } .drop.lg .acct-card{ width:158px; height:100px; }
  .drop.md{ width:146px; } .drop.md .acct-card{ width:146px; height:93px; }
  .drop.sm{ width:134px; } .drop.sm .acct-card{ width:134px; height:87px; }
  .drop .acct-card{ padding:11px 13px !important; border-radius:16px; }
  .drop .acct-card .hl-tile{ width:30px !important; height:30px !important; border-radius:9px; }
  .drop .acct-card .ac-head{ gap:8px; }
  .drop .acct-card .ac-name{ font-size:12px; }
  .drop .acct-card .ac-bal{ font-size:18px; }
}

/* ---- Сцена 1: заголовок (как было) ---- */
.scene-title{ font-size:clamp(38px,6vw,86px); line-height:.9; }
.scene-title span{ display:block; white-space:nowrap; }
.drop-copy{ max-width:min(520px,44vw); }

/* карты Сцены 1 двигает rAF — убираем css-transition, чтобы дрейф был гладким */
.drop .acct-card{ transition:none; }

/* ============================================================
   СЦЕНА 2 — схлопывание в общий капитал
   ============================================================ */
.capital-final{ position:absolute; inset:0; z-index:8; display:flex; flex-direction:column;
  align-items:center; justify-content:center; text-align:center; pointer-events:none; opacity:0; }
.cf-label{ font-size:13px; font-weight:600; letter-spacing:.2em; text-transform:uppercase; color:var(--fg3); margin-bottom:18px; }
.cf-amount{ font-size:clamp(48px,9vw,120px); font-weight:800; letter-spacing:-.04em; line-height:1; color:var(--fg1); }
.cf-sub{ margin-top:20px; font-size:clamp(14px,1.6vw,18px); font-weight:500; color:var(--fg2); }

.scene-next{ display:flex; align-items:center; justify-content:center; text-align:center; }
.next-inner{ max-width:760px; padding:0 24px; }
.scene-next .scene-title{ margin-top:14px; }
.scene-next .scene-lead{ margin:20px auto 0; }

/* ---- Сцена 1+2: sticky-обёртка (надёжнее пина с Lenis) ---- */
.hero-wrap{ position:relative; height:200vh; }
.hero-sticky{ position:sticky; top:0; height:100vh; min-height:100svh; overflow:hidden; display:flex; align-items:center; }

.drop, .drop .acct-card{ will-change:transform; }

/* ============================================================
   ФИНАЛ СЦЕНЫ 2 — капитал падает в главный экран приложения.
   Экран = статичная реплика 1:1 на реальных токенах webapp
   (colors_and_type.css / app.css): iOS-шапка, счета, видео-цель,
   плавающий таббар. Без iframe и без авто-скролла.
   ============================================================ */

/* контейнер финала виден всегда; отдельные слои (capBig/capPhone) гейтит GSAP autoAlpha */
.capital-final{ opacity:1; }

/* большой капитал: держится по центру, затем ужимается в число на экране и гаснет */
.cap-big{ position:absolute; left:50%; top:50%; white-space:nowrap; z-index:12;
  font-family:'Geist', var(--font, ui-sans-serif), system-ui, sans-serif;
  font-size:clamp(46px,9vw,116px); font-weight:800; letter-spacing:-.04em; line-height:1;
  color:var(--fg1); font-variant-numeric:tabular-nums; will-change:transform,opacity; }

/* корпус — настоящий iPhone 17 Pro (SVG-рамка ПОВЕРХ), экран под вырезом рамки */
.cap-phone{ position:absolute; left:50%; top:50%; z-index:8;
  width:clamp(266px,27vw,302px); aspect-ratio:880/1832;
  background:none; box-shadow:none; will-change:transform,opacity; }
/* мягкая «напольная» тень — decoupled от alpha рамки, поэтому не обводит боковые
   кнопки и углы (их юзер отметил как сломанные тени) */
.cap-phone::before{ content:""; position:absolute; z-index:-1; left:-7%; right:-7%; bottom:1%; height:16%;
  background:radial-gradient(closest-side, rgba(20,28,46,.22), rgba(20,28,46,0));
  filter:blur(24px); pointer-events:none; }
.cap-frame{ position:absolute; inset:0; width:100%; height:100%; z-index:2; filter:none; }
/* экран (аппертура рамки); квадратные углы прячутся под скруглённым вырезом рамки сверху */
/* border-radius совпадает с вырезом экрана в рамке → белые «уголки» экрана больше
   не выступают за скругление рамки (значение чуть больше выреза → углы прячутся под безель) */
.cap-screen{ position:absolute; left:4.318%; top:2.293%; width:91.363%; height:95.415%;
  z-index:1; overflow:hidden; background:#fff; border-radius:clamp(17px, 1.75vw, 20px); }

/* ============================================================
   СЦЕНА 3 — «Куда уходят деньги».
   Карта = реальная an2-card Аналитики (значения из webapp/app.css:
   radius 26, padding 22/18, head 17/800 + 13/700, stackbar 12px,
   catrow 9px/2px · ic 30 r9 · name 14/600 · sum 14/700 · pct 12.5).
   Всё заскоуплено под #scene3 — ничего не течёт наружу.
   ============================================================ */
.s3-wrap{ position:relative; background:var(--bg); }
.s3-sticky{ position:relative; min-height:100vh; overflow:hidden;
  display:flex; align-items:center; justify-content:space-between; gap:4vw; padding:90px 7vw; }
.s3-copy{ max-width:500px; will-change:transform; }
.s3-copy .scene-lead{ margin-top:22px; }
/* перспектива подлиннее (2400px) → поворот телефона мягкий, без агрессивного
   «кейстона» верхней карточки (при 1300px её сильно заваливало трапецией) */
.s3-stage{ position:relative; flex:none; perspective:2400px; }

/* Экран аналитики в настоящей рамке iPhone 17 Pro (та же техника, что в сцене 1).
   Телефон масштабируется по ВЫСОТЕ вьюпорта, чтобы помещаться целиком и не
   заезжать под навбар. Рамка (SVG) лежит ПОВЕРХ скрина, скрин — под её вырезом. */
/* transform-style НЕ preserve-3d: рамка и экран должны композиться в одну
   плоскость и поворачиваться КАК ЕДИНОЕ ЦЕЛОЕ (иначе экран с overflow:hidden
   не получает перспективу рамки и «отклеивается» при наклоне). Перспектива —
   со .s3-stage. */
.s3-phone{ position:relative; height:min(82vh, 720px); aspect-ratio:880/1832;
  will-change:transform; }
/* мягкая напольная тень — decoupled от alpha рамки (не обводит боковые кнопки) */
.s3-phone::before{ content:""; position:absolute; z-index:-1; left:-8%; right:-8%; bottom:1%; height:15%;
  background:radial-gradient(closest-side, rgba(20,28,46,.24), rgba(20,28,46,0));
  filter:blur(26px); pointer-events:none; }
.s3-phone-frame{ position:absolute; inset:0; width:100%; height:100%; z-index:2; pointer-events:none; }
.s3-phone-screen{ position:absolute; left:4.318%; top:2.293%; width:91.363%; height:95.415%;
  z-index:1; overflow:hidden; background:#fff; border-radius:clamp(17px, 1.6vw, 22px); }
.s3-phone-screen img{ width:100%; height:100%; object-fit:cover; object-position:top center; display:block; }
@media (max-width:900px){
  .s3-wrap{ height:auto; }
  .s3-sticky{ position:relative; height:auto; min-height:100svh; flex-direction:column;
    align-items:center; justify-content:center; gap:22px; padding:110px 0 40px; }
  .s3-copy{ text-align:center; }
  .s3-copy .scene-lead{ margin-inline:auto; }
  .s3-copy .scene-title{ font-size:clamp(40px,11vw,60px); }
  .s3-phone{ height:min(64vh, 560px); }
}

/* ============================================================
   СЦЕНА 4 — «Цели». Кинематографичный 3D-коверфлоу (пинованная сцена).
   Фаза 1: надпись «Дай мечте имя». Фаза 2: объёмная карусель реальных
   goal-карточек — цели прокручиваются через центр, заполняются до 100%
   («выполняются») и затухают вращаясь. Раскладку карточек (translateX/Z,
   rotateY, opacity), заполнение и «выполнение» считает app.js.
   Фоны в assets/goalbg/*.jpg; без фото — градиент-заглушка по data-tone.
   ============================================================ */
.g4-wrap{ position:relative; height:250vh; background:var(--bg); }
.g4-sticky{ position:sticky; top:0; height:100vh; min-height:100svh; overflow:hidden; }

/* Фаза 1 — надпись по центру */
.g4-title{ position:absolute; inset:0; display:flex; flex-direction:column;
  align-items:center; justify-content:center; text-align:center; z-index:6;
  will-change:transform,opacity; padding:0 24px; }

/* Фаза 2 — сцена с перспективой; колода 3D */
.g4-stage{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  perspective:1700px; z-index:4; }
/* колода — ШИРОКИЕ (ландшафтные) карточки, как в приложении */
.g4-deck{ position:relative; width:clamp(320px, 86vw, 560px); height:clamp(200px, 38vh, 330px);
  transform-style:preserve-3d; }

.g4-card{
  position:absolute; left:50%; top:50%; width:100%; height:100%;
  border-radius:26px; overflow:hidden; color:#fff; isolation:isolate;
  display:flex; flex-direction:column; justify-content:space-between; padding:22px 24px 22px;
  background:#0c0c0c; transform:translate(-50%,-50%);
  box-shadow:0 40px 80px rgba(20,28,46,.30), 0 12px 28px rgba(20,28,46,.14);
  -webkit-backface-visibility:hidden; backface-visibility:hidden; will-change:transform,opacity;
}
.g4-bg{ position:absolute; inset:0; z-index:-2; background-size:cover; background-position:center; }
video.g4-bg{ width:100%; height:100%; object-fit:cover; }
/* затемнение сверху (под имя) и снизу (под сумму) — читаемость на любом фоне */
.g4-shade{ position:absolute; inset:0; z-index:-1;
  background:linear-gradient(180deg, rgba(0,0,0,.36) 0%, rgba(0,0,0,.06) 26%, rgba(0,0,0,.30) 58%, rgba(0,0,0,.84) 100%); }
/* градиент-заглушки, пока владелец не вложил фото (тёмные, чтобы белый текст читался) */
.g4-card[data-tone="violet"] .g4-bg{ background:radial-gradient(125% 105% at 22% 0%, #7c4fe0, #3f1d9c 58%, #240c66); }
.g4-card[data-tone="emerald"] .g4-bg{ background:radial-gradient(125% 105% at 22% 0%, #0ea475, #086b4e 58%, #053728); }
.g4-card[data-tone="amber"] .g4-bg{ background:radial-gradient(125% 105% at 22% 0%, #c67518, #7d430b 56%, #402207); }
.g4-card[data-tone="azure"] .g4-bg{ background:radial-gradient(125% 105% at 22% 0%, #2b8fd6, #135f9e 56%, #082a49); }
.g4-card[data-tone="rose"] .g4-bg{ background:radial-gradient(125% 105% at 22% 0%, #e0568f, #a11f5c 56%, #560d31); }

.g4-top{ display:flex; align-items:center; gap:12px; }
/* иконка без плашки — только контур с тенью для читаемости на любом фоне */
.g4-ic{ width:30px; height:30px; flex:none; display:flex; align-items:center; justify-content:center; }
.g4-ic svg{ width:27px; height:27px; filter:drop-shadow(0 1px 5px rgba(0,0,0,.55)); }
.g4-name{ font-size:21px; font-weight:800; letter-spacing:-.02em; text-shadow:0 1px 14px rgba(0,0,0,.4); }

.g4-bottom{ display:flex; flex-direction:column; gap:11px; }
.g4-amt-row{ display:flex; align-items:baseline; justify-content:space-between; gap:12px; }
.g4-amt{ font-size:31px; font-weight:800; letter-spacing:-.03em; text-shadow:0 2px 16px rgba(0,0,0,.45); white-space:nowrap; }
.g4-pct{ font-size:21px; font-weight:800; letter-spacing:-.02em; text-shadow:0 2px 14px rgba(0,0,0,.4); }
.g4-bar{ height:8px; border-radius:99px; background:rgba(255,255,255,.26); overflow:hidden; }
.g4-bar i{ display:block; height:100%; width:calc(var(--pct,0) * 1%); border-radius:99px;
  background:#fff; box-shadow:0 0 12px rgba(255,255,255,.45); transition:background .3s; }
.g4-sub{ display:flex; align-items:baseline; justify-content:space-between; gap:10px; font-size:13.5px; }
.g4-of{ color:rgba(255,255,255,.80); }
.g4-status{ color:rgba(255,255,255,.72); white-space:nowrap; display:inline-flex; align-items:center; gap:5px; }
/* достигнутая цель — зелёная полоса и статус «Достигнута» */
.g4-card.is-done .g4-bar i{ background:var(--income); box-shadow:0 0 14px rgba(29,179,106,.6); }
.g4-card.is-done .g4-status{ color:#5ef0a6; font-weight:700; }

/* CTA внизу — проявляется с колодой */
.g4-foot{ position:absolute; left:0; right:0; bottom:clamp(28px,6vh,64px); z-index:7;
  display:flex; justify-content:center; will-change:opacity; }

/* фолбэк без анимации: секция в одну высоту экрана */
.g4-flat{ height:auto; }
.g4-flat .g4-sticky{ position:relative; height:auto; min-height:100svh; }

@media (max-width:900px){
  .g4-title .scene-title{ font-size:clamp(44px,12vw,64px); }
  .g4-deck{ width:88vw; height:clamp(188px,30vh,240px); }
  .g4-name{ font-size:19px; }
  .g4-amt{ font-size:27px; }
}

/* ============================================================
   СЕКЦИЯ «Мультивалюта» — реальный экран счёта в рамке iPhone.
   Зеркально сцене 3 (телефон СЛЕВА, копия справа) + параллакс-разворот.
   ============================================================ */
.mc-wrap{ position:relative; background:var(--bg); }
.mc-sticky{ position:relative; min-height:100vh; overflow:hidden;
  display:flex; align-items:center; justify-content:space-between; gap:4vw; padding:90px 7vw; }
.mc-copy{ max-width:520px; will-change:transform; }
/* длинные слова («Разные валюты») не влезают в 108px — кегль ниже под колонку */
.mc-copy .scene-title{ font-size:clamp(38px, 4.6vw, 66px); }
.mc-copy .scene-lead{ margin-top:22px; }
.mc-copy .scene-cta{ margin-top:30px; }
/* реальные цифры охвата валют — ряд из трёх (число над подписью) */
.mc-stats{ display:flex; align-items:flex-start; gap:28px; margin-top:28px; }
.mc-stat{ display:flex; flex-direction:column; gap:5px; min-width:0; }
.mc-stat b{ display:block; font-size:clamp(28px,3.2vw,36px); font-weight:800; letter-spacing:-.03em; line-height:1; color:var(--fg1); }
.mc-stat span{ display:block; font-size:13px; font-weight:500; color:var(--fg3); white-space:nowrap; }
@media (max-width:900px){
  .mc-stats{ justify-content:center; gap:22px; margin-top:24px; }
  .mc-stat{ text-align:center; align-items:center; }
  .mc-stat b{ font-size:30px; }
}
/* перспектива со сцены; телефон вращается единой плоскостью (см. s3) */
.mc-stage{ position:relative; flex:none; perspective:2400px; }
.mc-phone{ position:relative; height:min(82vh, 720px); aspect-ratio:880/1832; will-change:transform; }
.mc-phone::before{ content:""; position:absolute; z-index:-1; left:-8%; right:-8%; bottom:1%; height:15%;
  background:radial-gradient(closest-side, rgba(20,28,46,.24), rgba(20,28,46,0));
  filter:blur(26px); pointer-events:none; }
.mc-phone-frame{ position:absolute; inset:0; width:100%; height:100%; z-index:2; pointer-events:none; }
.mc-phone-screen{ position:absolute; left:4.318%; top:2.293%; width:91.363%; height:95.415%;
  z-index:1; overflow:hidden; background:#fff; border-radius:clamp(17px, 1.6vw, 22px); }
.mc-phone-screen img{ width:100%; height:100%; object-fit:cover; object-position:top center; display:block; }
@media (max-width:900px){
  .mc-wrap{ height:auto; }
  .mc-sticky{ position:relative; height:auto; min-height:100svh; flex-direction:column;
    align-items:center; justify-content:center; gap:22px; padding:110px 0 40px; }
  .mc-copy{ text-align:center; order:1; }
  .mc-copy .scene-lead{ margin-inline:auto; }
  .mc-copy .scene-title{ font-size:clamp(40px,11vw,60px); }
  .mc-stage{ order:2; }
  .mc-phone{ height:min(64vh, 560px); }
}

/* ============================================================
   СЕКЦИЯ «Анонимность» — крупное типографическое заявление.
   Минимум элементов, акцент на словах. Тёплый, простой тон.
   ============================================================ */
.anon{ background:var(--bg); padding:clamp(120px,15vh,190px) 7vw; }
.anon-inner{ max-width:1000px; margin:0 auto; text-align:center; }
.anon-title{ margin:18px auto 0; font-weight:800; letter-spacing:-.045em; line-height:.98;
  font-size:clamp(40px, 6.4vw, 92px); color:var(--fg1); }
.anon-lead{ margin:30px auto 0; max-width:46ch; font-size:clamp(17px,1.75vw,21px);
  line-height:1.55; color:var(--fg2); }
.anon-cta-row{ margin-top:40px; display:flex; justify-content:center; }

@media (max-width:900px){
  .anon{ padding:88px 24px 96px; }
  .anon-title{ font-size:clamp(38px,11.5vw,72px); }
  .anon-lead{ margin-top:22px; }
  .anon-cta-row{ margin-top:32px; }
}

/* ============================================================
   СЕКЦИЯ «Вопросы» — FAQ-аккордеон на нативных <details>.
   ============================================================ */
/* фон секции светло-серый — чтобы белые стеклянные «плашки-пилюли» парили как навбар */
.faq{ background:var(--bg-soft); padding:110px 7vw 128px; }
.faq-head{ max-width:760px; margin:0 auto 48px; text-align:center; }
.faq-list{ max-width:760px; margin:0 auto; display:flex; flex-direction:column; gap:14px; }

/* стиль навигационной шапки: полупрозрачный белый + блюр + мягкая тень + инсет-хайлайт */
.faq-item{ border-radius:22px; overflow:hidden; will-change:transform,opacity;
  background:rgba(255,255,255,.66); border:1px solid rgba(255,255,255,.85);
  -webkit-backdrop-filter:blur(18px) saturate(1.7); backdrop-filter:blur(18px) saturate(1.7);
  box-shadow:0 10px 30px rgba(20,28,46,.10), inset 0 1px 0 rgba(255,255,255,.9);
  transition:box-shadow .25s var(--ease); }
.faq-item:hover{ box-shadow:0 14px 40px rgba(20,28,46,.15), inset 0 1px 0 rgba(255,255,255,.9); }
.faq-item[open]{ box-shadow:0 16px 44px rgba(20,28,46,.16), inset 0 1px 0 rgba(255,255,255,.9); }
.faq-item summary{ list-style:none; cursor:pointer; display:flex; align-items:center; gap:18px;
  padding:22px 24px; font-size:clamp(16px,1.7vw,19px); font-weight:700; letter-spacing:-.01em;
  color:var(--fg1); user-select:none; }
.faq-item summary::-webkit-details-marker{ display:none; }
.faq-chev{ margin-left:auto; flex:none; width:26px; height:26px; display:flex; align-items:center; justify-content:center;
  color:var(--fg3); transition:transform .3s var(--ease); }
.faq-chev svg{ width:20px; height:20px; }
.faq-item[open] .faq-chev{ transform:rotate(180deg); color:var(--fg1); }
.faq-a{ padding:0 24px 24px; font-size:clamp(15px,1.6vw,17px); line-height:1.6; color:var(--fg2); max-width:64ch; }

.faq-cta{ max-width:760px; margin:44px auto 0; text-align:center; display:flex; flex-direction:column; align-items:center; gap:20px; }
.faq-cta-text{ font-size:clamp(16px,1.7vw,19px); color:var(--fg2); }

@media (max-width:900px){
  .faq{ padding:80px 24px 92px; }
  .faq-head{ margin-bottom:34px; }
  .faq-head .scene-title{ font-size:clamp(40px,11vw,58px); }
  .faq-item summary{ padding:18px 20px; gap:14px; }
  .faq-a{ padding:0 20px 20px; }
}

/* ============================================================
   МОДАЛКИ — QR (десктоп) и инструкция «на экран телефона» (PWA)
   ============================================================ */
.modal{ position:fixed; inset:0; z-index:300; display:flex; align-items:center; justify-content:center; padding:24px;
  opacity:0; pointer-events:none; transition:opacity .26s var(--ease); }
.modal.open{ opacity:1; pointer-events:auto; }
.modal-backdrop{ position:absolute; inset:0; background:rgba(20,28,46,.34);
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); }
.modal-card{ position:relative; z-index:1; width:min(400px,100%); background:#fff; border-radius:var(--r-xl);
  padding:38px 32px 30px; text-align:center; box-shadow:0 40px 100px rgba(20,28,46,.30);
  transform:translateY(16px) scale(.98); transition:transform .32s var(--spring); }
.modal.open .modal-card{ transform:none; }
.modal-card-wide{ width:min(560px,100%); text-align:left; }
.modal-x{ position:absolute; top:16px; right:16px; width:38px; height:38px; display:flex; align-items:center; justify-content:center;
  border:none; border-radius:50%; background:var(--bg-soft); color:var(--fg2); cursor:pointer; transition:background .2s, color .2s; }
.modal-x svg{ width:18px; height:18px; }
.modal-x:hover{ background:var(--bg-sunken); color:var(--fg1); }
.modal-title{ font-size:clamp(22px,3vw,27px); font-weight:800; letter-spacing:-.02em; color:var(--fg1); }
.modal-logo{ display:inline-block; width:1.06em; height:1.06em; vertical-align:-0.16em; color:var(--fg1); margin:0 .06em; }
.modal-text{ margin-top:10px; font-size:15.5px; line-height:1.55; color:var(--fg2); }

.qr-box{ margin:24px auto 4px; width:232px; height:232px; display:flex; align-items:center; justify-content:center;
  background:#fff; border:1px solid var(--border); border-radius:20px; padding:12px; box-shadow:var(--sh-tile); }
.qr-box img, .qr-box canvas{ display:block; width:208px !important; height:208px !important; border-radius:8px; }
.modal-foot{ margin-top:18px; }
.modal-link{ font-size:14px; font-weight:600; color:var(--fg2); text-decoration:underline; text-underline-offset:3px; cursor:pointer; }
.modal-link:hover{ color:var(--fg1); }

.ins-cols{ display:grid; grid-template-columns:1fr 1fr; gap:16px; margin:26px 0 8px; }
.ins-col{ position:relative; background:linear-gradient(180deg,#fff,var(--bg-soft)); border:1px solid var(--border);
  border-radius:var(--r-lg); padding:22px 20px; box-shadow:var(--sh-tile); }
.ins-os{ display:flex; align-items:center; gap:11px; font-size:15px; font-weight:800; letter-spacing:-.01em;
  color:var(--fg1); margin-bottom:18px; }
.ins-os-ic{ width:38px; height:38px; flex:none; display:flex; align-items:center; justify-content:center;
  border-radius:11px; background:#fff; border:1px solid var(--border); box-shadow:var(--sh-sm); }
.ins-os-ic img{ display:block; width:23px; height:23px; }
.ins-steps{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:14px; }
.ins-steps li{ display:flex; align-items:center; gap:12px; font-size:14px; line-height:1.35; color:var(--fg2); font-weight:500; }
.ins-n{ width:25px; height:25px; flex:none; display:flex; align-items:center; justify-content:center; border-radius:50%;
  background:var(--accent); color:var(--fg-on-accent); font-size:12.5px; font-weight:800; font-variant-numeric:tabular-nums; }
.modal-cta{ display:flex; align-items:center; justify-content:center; margin-top:22px; padding:15px; border-radius:var(--r-pill);
  background:var(--accent); color:var(--fg-on-accent); font-size:16px; font-weight:700; box-shadow:var(--sh-btn); transition:background .2s; }
.modal-cta:hover{ background:var(--accent-hover); }

@media (max-width:560px){
  .modal{ padding:16px; }
  .modal-card{ padding:32px 22px 24px; }
  .ins-cols{ grid-template-columns:1fr; gap:14px; }
}