/* dibslyapp.com landing 3.0 (2026-10-28, owner: «пиздатые анимации… чтоб они ахуели»): a dark, cinematic page in
   Dibsly's colours — a WebGL field of warm particles behind everything, huge two-line titles that rise in, pinned and
   scrubbed scroll scenes. Everything still reads with JavaScript off or «reduce motion» on. */
:root {
    --bg: #0E0C0B;
    --bg-2: #120F0D;
    --card: #1D1815;
    --card-2: #241E1A;
    --ink: #F6EBDD;
    --soft: #CDBFB2;
    --muted: #A89A8D;
    --dim: #8C7F74;
    --line: rgba(246, 235, 221, 0.10);
    --line-2: rgba(246, 235, 221, 0.16);
    --orange: #FF8A3D;
    --orange-ink: #1A0E06;
    --orange-soft: #FFA153;
    --peach: #3A261B;
    --peach-ink: #F6D7BC;
    --green: #5BD08A;
    --blue: #9DB2FF;
    --display: "Geologica", "SF Pro Display", system-ui, sans-serif;
    --text: "Manrope", "SF Pro Text", system-ui, sans-serif;
    --ease: cubic-bezier(0.16, 1, 0.3, 1);
    color-scheme: dark;
}
* { box-sizing: border-box; }
html { background: var(--bg); -webkit-text-size-adjust: 100%; overflow-x: clip; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
body { margin: 0; color: var(--ink); background: var(--bg); font-family: var(--text); font-size: 16px; line-height: 1.5;
    -webkit-font-smoothing: antialiased; overflow-x: clip; }
img { max-width: 100%; display: block; }
a { color: var(--orange-soft); text-decoration: none; }
a:hover { color: #FFC08A; }
:focus-visible { outline: 2px solid var(--orange); outline-offset: 3px; border-radius: 8px; }
.wrap { max-width: 1240px; margin: 0 auto; padding: 0 40px; position: relative; }
main { position: relative; z-index: 2; overflow-x: clip; }
.center { text-align: center; }
.small { font-size: 14px; color: var(--muted); margin-top: 24px; }

/* The particle field sits behind the page. */
.field { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; opacity: 0; transition: opacity 1.2s var(--ease); }
.field.on { opacity: 1; }

/* Intro: a counter, then the page (first visit of a session). */
.intro { position: fixed; inset: 0; z-index: 100; background: var(--bg); display: none; align-items: flex-end; justify-content: space-between; padding: 40px; pointer-events: none; }
.js .intro.run { display: flex; }
.intro-count { font-family: var(--display); font-weight: 700; font-size: clamp(80px, 16vw, 220px); line-height: 0.8; letter-spacing: -0.05em; font-variant-numeric: tabular-nums; }
.intro-word { font-family: var(--display); font-weight: 600; font-size: 20px; color: var(--muted); }

/* Cursor follower (fine pointers only). */
.cursor { position: fixed; left: 0; top: 0; width: 36px; height: 36px; margin: -18px 0 0 -18px; border-radius: 50%; border: 1.5px solid rgba(255, 138, 61, 0.7); z-index: 90; pointer-events: none; opacity: 0; transition: width .3s var(--ease), height .3s var(--ease), margin .3s var(--ease), background .3s, opacity .3s; mix-blend-mode: screen; }
.cursor.on { opacity: 1; }
.cursor.hover { width: 72px; height: 72px; margin: -36px 0 0 -36px; background: rgba(255, 138, 61, 0.14); }
@media (hover: none), (pointer: coarse) { .cursor { display: none; } }

/* The header: v3/nav.css (every page's, from tools/pages.py). */

/* Section rail */
/* The steps' numbers on the right: each one goes to its step (smoothly with the landing's scroll, at once with «reduce
   motion»), the one on screen lit. */
.rail { position: fixed; right: 24px; top: 50%; transform: translateY(-50%); z-index: 40; }
.rail ol { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.rail li { width: 30px; height: 30px; border-radius: 50%; font-size: 10px; color: var(--dim); border: 1px solid var(--line-2); transition: all .4s var(--ease); background: rgba(14, 12, 11, 0.5); }
.rail a { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; border-radius: 50%; color: inherit; cursor: pointer; }
.rail li:hover { color: var(--ink); border-color: var(--orange); }
.rail a:focus-visible { outline: 2px solid var(--orange); outline-offset: 3px; }
.rail li.on { background: var(--orange); color: var(--orange-ink); border-color: var(--orange); font-weight: 700; transform: scale(1.12); }

/* Type */
.kicker { margin: 0 0 20px; font-size: 13px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); display: flex; align-items: center; gap: 10px; }
.kicker .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--orange); box-shadow: 0 0 14px var(--orange); }
.center .kicker { justify-content: center; }
.hero-title, .title, .giant { font-family: var(--display); font-weight: 700; margin: 0; letter-spacing: -0.045em; }
.hero-title { font-size: clamp(50px, 5.9vw, 100px); line-height: 0.92; }
.title { font-size: clamp(40px, 4.9vw, 72px); line-height: 0.98; letter-spacing: -0.035em; }
.title.small { font-size: clamp(40px, 4.4vw, 60px); }
.line { display: block; }
.js .line { overflow: hidden; padding-bottom: 0.08em; margin-bottom: -0.08em; }
.line .word { display: inline-block; }
.hot { color: var(--orange); }
.dim { color: var(--dim); }
.green { color: var(--green); }
.lead { margin: 28px 0 0; font-size: 19px; line-height: 1.6; color: var(--soft); max-width: 520px; }
.center .lead { margin-left: auto; margin-right: auto; }
.note { margin: 18px 0 0; color: var(--orange-soft); font-size: 15px; }

/* Buttons */
.actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 34px; }
.actions.center { justify-content: center; }
.button { display: inline-flex; align-items: center; gap: 10px; font-size: 16px; font-weight: 600; padding: 17px 26px; border-radius: 16px; transition: background .3s, color .3s, border-color .3s; will-change: transform; }
.button.light { background: var(--ink); color: var(--bg); }
.button.light:hover { background: #fff; color: var(--bg); }
.button.ghost { color: var(--ink); border: 1px solid var(--line-2); font-weight: 500; }
.button.ghost:hover { border-color: var(--orange); color: var(--ink); }
.button.hot { background: var(--orange); color: var(--orange-ink); }
.button.hot:hover { background: #FF9B57; color: var(--orange-ink); }
.button.wide { width: 100%; justify-content: center; margin-top: 36px; }

/* Hero */
.hero { position: relative; min-height: 100vh; padding: 150px 0 90px; display: flex; align-items: center; }
.platforms { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 28px 0 0; padding: 0; font-size: 13px; }
.platforms li { padding: 7px 12px; border-radius: 999px; background: rgba(246, 235, 221, 0.08); }
.platforms li.soon { background: none; border: 1px dashed rgba(246, 235, 221, 0.2); color: var(--muted); }
.phone { border-radius: 46px; padding: 5px; background: linear-gradient(160deg, #2A231F, #171310); border: 1px solid var(--line-2);
    box-shadow: 0 60px 120px rgba(0, 0, 0, 0.6), inset 0 0 0 1px rgba(255, 255, 255, 0.03); }
.phone img { width: 100%; height: 100%; object-fit: cover; object-position: top; border-radius: 41px; }
/* The journey (owner, 2026-10-28, his brother's idea on the 3.0 frame): the hero's phone stays on the right, held in
   the middle of the window, and shows the app — real screens, taps, a notification — while the steps scroll by on the
   left; after the last step it goes with the page. The phone ends above the fold on a laptop too (owner: «сильно низко
   опущен», «можно еще поднять»): its height follows the window's, 650px at most. */
.journey { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); column-gap: 40px; }
.journey > .hero { grid-column: 1; grid-row: 1; }
/* The phone's column spans the hero, the 10 steps and the journey's end (rows 1–12): a step added or taken away
   means one more or one less here and in the phones' rule below. */
.journey-stage { grid-column: 2; grid-row: 1 / span 12; position: relative; z-index: 3; }
/* The last step is read with the phone still in place. */
.journey-end { grid-column: 1; grid-row: var(--row); height: 30vh; }
.stage-sticky { position: sticky; top: 0; height: 100vh; display: flex; align-items: center; justify-content: center; perspective: 1200px; }
/* In the hero the phone is lifted level with «Особисті фінанси» (owner, 2026-10-28) and settles in the middle of the
   window for the steps (owner: in the steps it went «куда-то»): the script moves .phone-lift with the scroll. */
.phone-lift { will-change: transform; }
.hero-phone { --ph: clamp(480px, calc(100vh - 180px), 650px); position: relative; width: calc(var(--ph) * 300 / 650); height: var(--ph); flex: none;
    transform-style: preserve-3d; }
.step { grid-column: 1; grid-row: var(--row); min-height: 100vh; display: flex; align-items: center; padding: 80px 0; }
.step-copy { max-width: 560px; }
.step-tags { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 28px 0 0; padding: 0; font-size: 14px; }
.step-tags li { padding: 8px 14px; border-radius: 999px; background: rgba(29, 24, 21, 0.82); border: 1px solid var(--line); color: var(--soft); }
.journey > .scroll-hint { top: calc(100vh - 110px); bottom: auto; }
/* The hero phone's screen: Main's long strip scrolls under the app's own bar and tab bar, drawn live so the soft edge
   above and the glass below show what passes under them, as in the app (owner, 2026-10-28). Sizes in the app's points:
   --pt is one of the 402 points of the screen's width. */
.screen { position: relative; width: 100%; height: 100%; border-radius: 41px; overflow: hidden; background: #151412; container-type: inline-size; }
.screen { --pt: calc(100cqw / 402); }
.screen .screen-long { position: absolute; left: 0; top: calc(110.2 * var(--pt)); width: 100%; height: auto; border-radius: 0; object-fit: initial; will-change: transform; }
/* Main's bar and header are the frame's own picture (v3/scenes/<lang>-main-head.jpg, the top 118 pt of a-d0.jpg,
   task 16; owner: the drawn one had «no soft border and no grain»): the app's grained background, the date, the glass
   capsule with its soft rim, «М» and the gear, as on every frame. Its last 10 pt melt into the strip, which starts where
   it does on the frames (110.2 pt; the strip's own background under the header is the same colour). The strip is
   v3/shots/<lang>-main-empty.jpg: Main with «Активність» empty, as step 01 starts (tools/scenes/empty_strip.py). */
.ios-top { position: absolute; left: 0; right: 0; top: 0; height: calc(118 * var(--pt)); z-index: 2; pointer-events: none;
    -webkit-mask: linear-gradient(#000 calc(100% - 10 * var(--pt)), transparent); mask: linear-gradient(#000 calc(100% - 10 * var(--pt)), transparent); }
.screen .ios-head { position: absolute; left: 0; top: 0; width: 100%; height: auto; border-radius: 0; object-fit: initial; }
/* Dibsly's own button above «+», as on Main. */
.screen .ios-dibsly { position: absolute; left: calc(320.1 * var(--pt)); top: calc(-60.8 * var(--pt)); width: calc(61 * var(--pt)); height: calc(61 * var(--pt)); border-radius: 50%; object-fit: cover; }
/* The tab bar where the frames have it (task 17, measured by overlay on a-d0): the screen is 16 points taller than a
   frame, so pinned to its bottom it sat ~18.6 points lower and jumped at every frame. */
.ios-tabbar { position: absolute; left: 0; right: 0; top: calc(761.7 * var(--pt)); height: calc(110 * var(--pt)); z-index: 2; pointer-events: none; }
/* The home indicator, as on the frames (131–271 × 861–866 points). */
.ios-home { position: absolute; left: calc(131 * var(--pt)); top: calc(861 * var(--pt)); width: calc(140 * var(--pt)); height: calc(5 * var(--pt)); border-radius: 999px; background: rgba(255, 255, 255, 0.14); z-index: 2; pointer-events: none; }
.ios-pill { position: absolute; left: calc(26.6 * var(--pt)); top: calc(10 * var(--pt)); width: calc(284 * var(--pt)); height: calc(57 * var(--pt)); border-radius: 999px; display: flex; align-items: center; padding: 0 calc(6 * var(--pt));
    background: rgba(48, 44, 41, 0.42); border: 1px solid rgba(255, 255, 255, 0.10); -webkit-backdrop-filter: blur(10px) saturate(1.4); backdrop-filter: blur(10px) saturate(1.4); box-shadow: 0 calc(6 * var(--pt)) calc(20 * var(--pt)) rgba(0, 0, 0, 0.35); }
.ios-tab { flex: 1; height: calc(46 * var(--pt)); border-radius: 999px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: calc(2 * var(--pt)); font-size: calc(11.5 * var(--pt)); font-weight: 600; color: #CFC5BB; font-family: -apple-system, "SF Pro Text", var(--text); }
.ios-tab svg { width: calc(22 * var(--pt)); height: calc(22 * var(--pt)); }
.ios-tab.on { color: #FF8A3D; background: rgba(120, 112, 104, 0.32); border: 1px solid rgba(255, 255, 255, 0.10); }
.ios-plus { position: absolute; left: calc(319.5 * var(--pt)); top: calc(9 * var(--pt)); width: calc(58 * var(--pt)); height: calc(58 * var(--pt)); border-radius: 50%; background: #E86E1C; color: #fff; display: flex; align-items: center; justify-content: center; box-shadow: 0 calc(6 * var(--pt)) calc(18 * var(--pt)) rgba(232, 110, 28, 0.35); }
.ios-plus svg { width: calc(28 * var(--pt)); height: calc(28 * var(--pt)); }
/* The app's own screens, captured on the demo, and what happens over them: positions in the screen's points (402 × 874). */
.live { position: absolute; inset: 0; background: #0D0C0A; } /* the strip's bottom colour (the script reads it) */
.frames { position: absolute; inset: 0; pointer-events: none; }
/* A frame (402 × 874) is a little shorter than the screen: it goes on below its picture in its bottom row's colour
   (the script reads it), so a sheet or a screen over another leaves no strip of the one under it at the bottom. */
.screen .frame { position: absolute; left: 0; top: 0; width: 100%; height: auto; padding-bottom: calc(60 * var(--pt)); background: #0E0D0B;
    border-radius: 0; object-fit: initial; opacity: 0; will-change: transform, opacity; }
.fx { position: absolute; left: 0; top: 0; width: 100%; aspect-ratio: 402 / 874; z-index: 50; pointer-events: none; }
.fx > * { position: absolute; opacity: 0; }
.banner, .fx .bank { left: calc(9 * var(--pt)); right: calc(9 * var(--pt)); top: calc(54 * var(--pt)); display: flex; gap: calc(11 * var(--pt)); align-items: center; padding: calc(12 * var(--pt)) calc(14 * var(--pt));
    border-radius: calc(26 * var(--pt)); background: rgba(64, 57, 52, 0.82); border: 1px solid rgba(255, 255, 255, 0.10); -webkit-backdrop-filter: blur(18px) saturate(1.5); backdrop-filter: blur(18px) saturate(1.5);
    box-shadow: 0 calc(10 * var(--pt)) calc(30 * var(--pt)) rgba(0, 0, 0, 0.45); color: #F6EBDD; font-family: -apple-system, "SF Pro Text", var(--text); line-height: 1.3; }
.fx .banner img { width: calc(38 * var(--pt)); height: calc(38 * var(--pt)); border-radius: calc(9 * var(--pt)); flex: none; object-fit: cover; }
.banner div, .bank > div { flex: 1; min-width: 0; }
.banner b, .bank b { display: flex; justify-content: space-between; font-size: calc(14 * var(--pt)); font-weight: 600; }
.banner b span, .bank b span { font-weight: 400; color: #BEB2A6; font-size: calc(12.5 * var(--pt)); }
.banner p, .bank p { margin: 0; font-size: calc(14 * var(--pt)); }
.banner .dim-line { color: #CDBFB2; font-size: calc(13 * var(--pt)); }
/* A bank's own notification (Premium: one Shortcuts automation reads any bank's pushes, iOS 27): the same banner with
   the bank's name and a plain bank glyph, no bank's logo. */
.bank-icon { width: calc(38 * var(--pt)); height: calc(38 * var(--pt)); border-radius: calc(9 * var(--pt)); flex: none; display: flex; align-items: center; justify-content: center; background: #3A3532; color: #F6EBDD; }
.bank-icon svg { width: calc(22 * var(--pt)); height: calc(22 * var(--pt)); }
/* A finger on the screen, as a recording with touches shows it (owner's brother: «показывать явно на что клацается…
   точкой»): it glides to what is tapped, presses and lifts. */
.touch { left: 0; top: 0; width: calc(44 * var(--pt)); height: calc(44 * var(--pt)); margin: calc(-22 * var(--pt)) 0 0 calc(-22 * var(--pt)); border-radius: 50%;
    background: rgba(235, 228, 220, 0.42); border: 1.5px solid rgba(255, 255, 255, 0.85); box-shadow: 0 calc(4 * var(--pt)) calc(14 * var(--pt)) rgba(0, 0, 0, 0.35);
    -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); z-index: 2; }
.tap { width: calc(46 * var(--pt)); height: calc(46 * var(--pt)); margin: calc(-23 * var(--pt)) 0 0 calc(-23 * var(--pt)); border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, 0.8); }
.hl { border-radius: calc(16 * var(--pt)); border: 2px solid var(--orange); box-shadow: 0 0 0 calc(4 * var(--pt)) rgba(255, 138, 61, 0.16), 0 0 calc(28 * var(--pt)) rgba(255, 138, 61, 0.4); }
.app-toast { left: calc(14 * var(--pt)); right: calc(14 * var(--pt)); bottom: calc(108 * var(--pt)); display: flex; align-items: center; gap: calc(10 * var(--pt)); padding: calc(10 * var(--pt)) calc(14 * var(--pt));
    border-radius: calc(22 * var(--pt)); background: rgba(48, 42, 38, 0.94); border: 1px solid rgba(255, 255, 255, 0.10); box-shadow: 0 calc(10 * var(--pt)) calc(30 * var(--pt)) rgba(0, 0, 0, 0.5);
    font-family: -apple-system, "SF Pro Text", var(--text); color: #F6EBDD; }
.fx .app-toast img { width: calc(38 * var(--pt)); height: auto; border-radius: 0; flex: none; object-fit: contain; }
.app-toast b { display: block; font-size: calc(15 * var(--pt)); }
.app-toast span { display: block; font-size: calc(13 * var(--pt)); color: #BEB2A6; }
/* Under a rising sheet the screen dims, the status bar not (it stays as bright as on the sheet’s own frame). */
.sheet-dim { position: absolute; inset: 0; opacity: 0; pointer-events: none; background: linear-gradient(rgba(0, 0, 0, 0), #000 calc(54 * var(--pt))); }
/* In a push the status bar stands still: the arriving frame's top 54 points over the two sliding screens; in a scroll
   the leaving frame's top and bottom bars (the script cuts it to them, its bottom going on like a frame's). */
.screen .push-bar { position: absolute; left: 0; top: 0; width: 100%; height: auto; padding-bottom: calc(60 * var(--pt)); border-radius: 0; object-fit: initial; opacity: 0; pointer-events: none;
    clip-path: inset(0 0 calc(100% - 54 * var(--pt)) 0); }
.float-card { position: absolute; padding: 14px 16px; border-radius: 18px; background: rgba(29, 24, 21, 0.78); border: 1px solid var(--line-2);
    -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); box-shadow: 0 24px 50px rgba(0, 0, 0, 0.5); font-size: 14px; will-change: transform; }
.float-card p { margin: 0; }
.float-card .tiny { font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); margin-bottom: 6px; }
.float-card .row { display: flex; justify-content: space-between; gap: 16px; font-size: 15px; }
.float-card .sub { color: var(--soft); font-size: 13px; margin-top: 4px; }
.float-card.warm { background: rgba(58, 38, 27, 0.86); border-color: rgba(255, 138, 61, 0.3); color: var(--peach-ink); }
.float-card.warm .tiny { color: #FFC08A; }
.c1 { left: -10px; top: 100px; width: 240px; }
.c2 { right: -20px; top: 260px; width: 250px; line-height: 1.45; }
.c3 { left: 10px; bottom: 50px; width: 220px; }
.bar { height: 6px; border-radius: 3px; background: rgba(246, 235, 221, 0.1); margin-top: 10px; overflow: hidden; }
.bar i { display: block; height: 100%; width: var(--to); border-radius: 3px; background: var(--green); }
.scroll-hint { position: absolute; left: 50%; bottom: 28px; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 10px; font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }
.scroll-hint i { width: 1px; height: 46px; background: linear-gradient(var(--orange), transparent); animation: drip 2.2s var(--ease) infinite; transform-origin: top; }
@keyframes drip { 0% { transform: scaleY(0); } 50% { transform: scaleY(1); } 100% { transform: scaleY(1); opacity: 0; } }

/* Marquee */

/* Blocks */
.block { position: relative; padding: 160px 0; overflow-x: clip; }
.block.glow::before { content: ""; position: absolute; left: 50%; top: 50%; width: 1100px; height: 800px; transform: translate(-50%, -50%); border-radius: 50%; background: radial-gradient(closest-side, rgba(232, 110, 28, 0.13), rgba(232, 110, 28, 0)); pointer-events: none; }
.block.band { background: linear-gradient(rgba(18, 15, 13, 0), rgba(18, 15, 13, 0.92) 18%, rgba(18, 15, 13, 0.92) 82%, rgba(18, 15, 13, 0)); }
.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 72px; align-items: center; }
.split.reverse .copy { order: 2; }
.split.top { align-items: start; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); }
.tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-top: 40px; }
.tile { padding: 20px; border-radius: 20px; background: rgba(29, 24, 21, 0.82); border: 1px solid var(--line); transition: border-color .3s, transform .4s var(--ease); }
.tile:hover { border-color: rgba(255, 138, 61, 0.4); transform: translateY(-3px); }
.tile b { display: block; font-size: 16px; }
.tile span { display: block; margin-top: 6px; font-size: 14px; color: var(--muted); }
.duo { position: relative; display: flex; gap: 22px; justify-content: center; align-items: flex-start; min-height: 640px; }
.phone.sm { width: 260px; height: 565px; border-radius: 42px; padding: 5px; }
.phone.sm img { border-radius: 37px; }
.drift-a { margin-top: 70px; }
.toast { position: absolute; left: 50%; bottom: -10px; transform: translateX(-50%); display: flex; align-items: center; gap: 12px; padding: 12px 18px 12px 12px; border-radius: 20px; background: rgba(36, 30, 26, 0.92); border: 1px solid var(--line-2); box-shadow: 0 24px 50px rgba(0, 0, 0, 0.5); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); white-space: nowrap; }
.toast img { width: 40px; height: auto; }
.toast b { display: block; font-size: 15px; }
.toast span { display: block; font-size: 13px; color: var(--muted); }

/* Chat */
.chatbox { max-width: 540px; margin: 0 auto; border-radius: 28px; background: rgba(29, 24, 21, 0.9); border: 1px solid var(--line-2); box-shadow: 0 50px 100px rgba(0, 0, 0, 0.5); overflow: hidden; }
.chat-head { display: flex; align-items: center; gap: 12px; padding: 16px 20px; border-bottom: 1px solid var(--line); }
.chat-head b { display: block; font-size: 16px; }
.chat-head span { display: block; font-size: 13px; color: var(--muted); }
.mascot { position: relative; width: 52px; height: 50px; flex: none; }
.mascot .mascot-still, .mascot .mascot-stage { position: absolute; inset: 0; width: 100%; height: 100%; }
.mascot .mascot-still { object-fit: contain; transition: opacity .3s; }
.mascot.alive .mascot-still { opacity: 0; }
.mascot-layer { position: absolute; inset: 0; opacity: 0; transition: opacity .2s; }
.mascot-layer.shown { opacity: 1; }
.messages { height: 380px; overflow-y: auto; padding: 20px; display: flex; flex-direction: column; gap: 12px; scroll-behavior: smooth; }
.msg { margin: 0; max-width: 82%; padding: 12px 16px; font-size: 15px; line-height: 1.45; animation: pop .45s var(--ease) both; }
.msg.me { align-self: flex-end; background: #2A2420; border-radius: 18px 18px 4px 18px; }
.msg.dibsly { align-self: flex-start; background: var(--peach); color: var(--peach-ink); border-radius: 18px 18px 18px 4px; }
.msg.typing { letter-spacing: 3px; }
@keyframes pop { from { opacity: 0; transform: translateY(10px) scale(0.97); } }
.messages .card { align-self: flex-start; width: 88%; padding: 16px; border-radius: 18px; background: var(--card-2); border: 1px solid var(--line); animation: pop .5s var(--ease) both; }
.messages .card h4 { margin: 0 0 12px; font-size: 13px; color: var(--muted); font-weight: 500; }
.bars div { display: grid; grid-template-columns: 110px 1fr auto; gap: 10px; align-items: center; font-size: 13px; margin-top: 8px; }
.bars i { height: 8px; border-radius: 4px; background: var(--orange); transform-origin: left; animation: grow .8s var(--ease) both; }
.bars b { font-weight: 600; }
@keyframes grow { from { transform: scaleX(0); } }
.op { display: flex; align-items: center; gap: 12px; }
.op .icon { width: 40px; height: 40px; border-radius: 12px; background: var(--peach); display: flex; align-items: center; justify-content: center; font-size: 20px; }
.op .what { flex: 1; }
.op .what strong { display: block; }
.op .what span { font-size: 13px; color: var(--muted); }
.op .sum { font-weight: 600; }
.card-actions { display: flex; gap: 8px; margin-top: 14px; }
.card-actions button { flex: 1; font: inherit; font-size: 14px; font-weight: 600; padding: 10px; border-radius: 12px; border: 1px solid var(--line-2); background: none; color: var(--ink); cursor: pointer; }
.card-actions .save { background: var(--orange); color: var(--orange-ink); border-color: var(--orange); }
.card .done { display: none; margin: 12px 0 0; color: var(--green); font-weight: 600; }
.card.saved .card-actions { display: none; }
.card.saved .done { display: block; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; padding: 14px 20px 20px; border-top: 1px solid var(--line); }
.chip { font: inherit; font-size: 13px; padding: 9px 14px; border-radius: 999px; border: 1px solid var(--line-2); background: rgba(246, 235, 221, 0.04); color: var(--ink); cursor: pointer; transition: border-color .3s, background .3s; }
.chip:hover { border-color: var(--orange); }
.chip.asked { color: var(--muted); }
.chip:disabled { opacity: 0.5; cursor: default; }

/* Gallery (pinned, horizontal) */

/* Investments */
.checks { list-style: none; margin: 30px 0 0; padding: 0; display: flex; flex-direction: column; gap: 14px; font-size: 16px; line-height: 1.45; }
.checks li { display: flex; gap: 12px; }
.checks li::before { content: "✓"; font-weight: 700; }
.checks.green li::before { color: var(--green); }
.checks.orange li::before { color: var(--orange-soft); }
.invest-stage { position: relative; min-height: 680px; display: flex; justify-content: center; align-items: center; }
.invest-stage .phone { position: relative; width: 300px; height: 650px; z-index: 2; }
.chart { position: absolute; left: -60px; right: -60px; top: 45%; width: calc(100% + 120px); height: auto; z-index: 1; opacity: 0.9; }
.c4 { right: 0; top: 80px; z-index: 3; }
.big-num { font-family: var(--display); font-size: 40px; font-weight: 700; letter-spacing: -0.03em; }

/* ФОП, debts, credits; everywhere */
.head-row { display: flex; flex-wrap: wrap; gap: 32px; justify-content: space-between; align-items: flex-end; }
.head-row .lead { margin: 0; max-width: 380px; }
.cards3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin-top: 56px; }
.cards3.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.spot { position: relative; padding: 32px; border-radius: 28px; background: rgba(29, 24, 21, 0.86); border: 1px solid var(--line); display: flex; flex-direction: column; gap: 14px; min-height: 320px; overflow: hidden; transform-style: preserve-3d; transition: transform .5s var(--ease), border-color .3s; }
.spot::before { content: ""; position: absolute; inset: 0; background: radial-gradient(420px circle at var(--x, 50%) var(--y, 0%), rgba(255, 138, 61, 0.16), transparent 45%); opacity: 0; transition: opacity .4s; pointer-events: none; }
.spot:hover { border-color: rgba(255, 138, 61, 0.3); }
.spot:hover::before { opacity: 1; }
.spot h3 { margin: 0; font-family: var(--display); font-size: 28px; letter-spacing: -0.02em; }
.spot p { margin: 0; font-size: 16px; line-height: 1.55; color: var(--soft); }
.spot .foot { margin-top: auto; font-size: 14px; color: var(--muted); }
.spot .foot.link { color: var(--orange-soft); }
.icon { width: 52px; height: 52px; border-radius: 16px; display: flex; align-items: center; justify-content: center; }
.icon.orange { background: rgba(255, 138, 61, 0.14); color: var(--orange-soft); }
.icon.green { background: rgba(91, 208, 138, 0.14); color: var(--green); }
.icon.blue { background: rgba(157, 178, 255, 0.14); color: var(--blue); }
.browser-wrap { margin-top: 64px; perspective: 1600px; }
.browser { margin: 0; border-radius: 22px; overflow: hidden; border: 1px solid var(--line-2); background: var(--card); box-shadow: 0 80px 140px rgba(0, 0, 0, 0.6); transform-origin: 50% 0; }
.browser-bar { display: flex; align-items: center; gap: 8px; padding: 12px 16px; border-bottom: 1px solid var(--line); }
.browser-bar span { width: 11px; height: 11px; border-radius: 50%; background: #3A332E; }
.browser-bar p { margin: 0 0 0 16px; font-size: 13px; color: var(--muted); padding: 5px 14px; border-radius: 8px; background: #15110F; }
.browser img { width: 100%; height: auto; }

/* Price */
.plans { display: grid; grid-template-columns: repeat(2, minmax(0, 480px)); gap: 24px; justify-content: center; margin-top: 64px; }
.plan { position: relative; padding: 40px; border-radius: 32px; background: rgba(29, 24, 21, 0.9); border: 1px solid var(--line); }
.plan h3 { margin: 0; font-family: var(--display); font-size: 26px; display: flex; align-items: center; gap: 10px; }
.plan .price { margin: 18px 0 0; font-family: var(--display); font-size: 60px; font-weight: 700; letter-spacing: -0.03em; line-height: 1; }
.plan .price small { display: block; margin-top: 10px; font-family: var(--text); font-size: 15px; font-weight: 500; letter-spacing: 0; color: var(--muted); }
.plan.premium { background: linear-gradient(160deg, rgba(58, 38, 27, 0.95), rgba(29, 24, 21, 0.95) 70%); border-color: transparent; isolation: isolate; }
.plan.premium::before { content: ""; position: absolute; inset: -1px; border-radius: 33px; padding: 1px; background: conic-gradient(from var(--spin, 0deg), rgba(255, 138, 61, 0.9), rgba(255, 138, 61, 0.1) 25%, rgba(255, 192, 138, 0.8) 50%, rgba(255, 138, 61, 0.1) 75%, rgba(255, 138, 61, 0.9));
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; z-index: -1; animation: spin 6s linear infinite; }
.plan.premium .price small { color: var(--peach-ink); }
@property --spin { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
@keyframes spin { to { --spin: 360deg; } }
.badge { font-family: var(--text); font-size: 12px; font-weight: 600; padding: 4px 10px; border-radius: 999px; background: var(--orange); color: var(--orange-ink); }

/* FAQ */
.faq { display: flex; flex-direction: column; }
.faq details { border-top: 1px solid var(--line); padding: 24px 0; }
.faq details:last-of-type { border-bottom: 1px solid var(--line); }
.faq summary { cursor: pointer; font-size: 19px; font-weight: 600; list-style: none; display: flex; justify-content: space-between; gap: 20px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; color: var(--orange); font-size: 24px; line-height: 1; transition: transform .4s var(--ease); }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { margin: 14px 0 0; font-size: 16px; line-height: 1.6; color: var(--soft); max-width: 640px; }
.faq .more { margin: 28px 0 0; color: var(--soft); }

/* Finale */
.finale { position: relative; padding: 160px 0 120px; overflow: hidden; }
.finale::before { content: ""; position: absolute; left: 50%; top: 45%; width: 1200px; height: 760px; transform: translate(-50%, -50%); border-radius: 50%; background: radial-gradient(closest-side, rgba(232, 110, 28, 0.22), rgba(232, 110, 28, 0)); pointer-events: none; }
.mascot.big { width: 150px; height: 144px; margin: 0 auto; }
.giant { font-size: clamp(110px, 21vw, 330px); line-height: 0.82; letter-spacing: -0.065em; font-weight: 800; margin-top: 24px; }
footer { position: relative; z-index: 2; border-top: 1px solid var(--line); padding: 32px 0 48px; background: var(--bg); }
.foot-row { display: flex; flex-wrap: wrap; gap: 14px 28px; align-items: center; font-size: 14px; }
.foot-row a { color: var(--muted); }
.foot-row a:hover { color: var(--ink); }
.foot-row b { font-family: var(--display); }
.copy-r { margin-left: auto; color: var(--muted); }

/* Without JavaScript or with «reduce motion», reveals are simply there. */
.js .reveal, .js .fade-up { opacity: 0; transform: translateY(28px); }
.no-motion .reveal, .no-motion .fade-up { opacity: 1 !important; transform: none !important; }
/* «Reduce motion» also stops what CSS itself keeps moving: the scroll hint's drip and Premium's turning edge stop. */
@media (prefers-reduced-motion: reduce) {
    .scroll-hint i, .plan.premium::before { animation: none; }
}

/* Phones and tablets */
@media (max-width: 1080px) {
    .rail { display: none; }
    .split, .split.top { grid-template-columns: minmax(0, 1fr); gap: 56px; }
    /* One column: the phone sticks under the top edge, each step's text comes up below it and passes behind it —
       behind a band of the page's colour as wide as the screen, so no half-hidden words stick out beside the phone.
       The phone is sized by the small viewport (Safari with its bars), so a step's text fits under it. */
    .journey { --ph-m: min(45vh, 480px); grid-template-columns: minmax(0, 1fr); }
    @supports (height: 1svh) { .journey { --ph-m: min(45svh, 480px); } }
    .journey > .hero { min-height: 0; padding: 140px 0 48px; }
    .journey-stage { grid-column: 1; grid-row: 2 / span 11; } /* the 10 steps and the end, rows 2–12 */
    .journey-end { height: 0; }
    .stage-sticky { top: 74px; height: auto; padding-top: 0; }
    .stage-sticky::before { content: ""; position: absolute; z-index: -1; top: -74px; bottom: -24px; left: 50%; width: 100vw; transform: translateX(-50%);
        background: linear-gradient(rgba(14, 12, 11, 0), var(--bg) 74px, var(--bg) calc(100% - 24px), rgba(14, 12, 11, 0)); pointer-events: none; }
    .hero-phone { --ph: var(--ph-m); }
    .step { min-height: 0; display: block; padding: calc(var(--ph-m) + 150px) 0 24vh; }
    .journey > .scroll-hint { display: none; }
    .split.reverse .copy { order: 0; }
    .cards3, .cards3.two { grid-template-columns: minmax(0, 1fr); }
    .plans { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
    .wrap { padding: 0 20px; }
    .journey > .hero { padding-top: 120px; }
    .step .kicker { margin-bottom: 8px; }
    .step .title { font-size: clamp(32px, 9vw, 40px); }
    .step .lead { margin-top: 12px; font-size: 16px; }
    .step-tags { margin-top: 10px; gap: 6px; font-size: 13px; }
    .step-tags li { padding: 6px 12px; }
    .c1 { left: -6px; top: 40px; width: 200px; }
    .c2 { right: -6px; top: 230px; width: 200px; }
    .c3 { left: 0; bottom: 20px; width: 190px; }
    .block { padding: 110px 0; }
    .tiles { grid-template-columns: minmax(0, 1fr); }
    .duo { min-height: 0; }
    .phone.sm { width: 46%; height: auto; aspect-ratio: 750 / 1630; }
    .drift-a { margin-top: 40px; }
    .toast { bottom: -30px; white-space: normal; width: max-content; max-width: calc(100% - 24px); }
    .invest-stage .phone { width: 250px; height: 540px; }
    .messages { height: 340px; }
    .plan { padding: 28px; }
    .copy-r { margin-left: 0; width: 100%; }
}