/* ===================================================================
   ВК КВЕСТ — design tokens
=================================================================== */
:root{
  --cream: #f3ecdd;
  --paper: #fbf7ee;
  --paper-2: #ece1c8;
  --burgundy: #6e1423;
  --burgundy-deep: #470c16;
  --burgundy-soft: #8a2233;
  --blue-dusty: #8ba3ae;
  --blue-sky: #dde8ea;
  --vk-blue: #0077ff;
  --vk-blue-deep: #0057c2;
  --amber: #c2873c;
  --tg-blue: #1a79a8;
  --ink: #211b17;
  --ink-soft: #55493f;

  --serif: "Prata", "Iowan Old Style", Georgia, serif;
  --sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --hand: "Caveat", cursive;

  --shadow-paper: 0 1px 0 rgba(33,27,23,.04), 0 8px 20px -8px rgba(33,27,23,.25), 0 2px 6px rgba(33,27,23,.08);
  --shadow-lift: 0 4px 0 rgba(33,27,23,.04), 0 20px 40px -12px rgba(33,27,23,.35);
  --radius: 3px;
}

@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --cream: #f3ecdd; --paper: #fbf7ee; --ink: #211b17;
  }
}
:root[data-theme="dark"]{ --cream: #f3ecdd; --paper: #fbf7ee; --ink: #211b17; }
/* This design commits to one warm-paper look in both system themes on purpose. */

/* ===================================================================
   RESET & BASE
=================================================================== */
*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  background:var(--cream);
  color:var(--ink);
  font-family:var(--sans);
  font-size:16px;
  line-height:1.5;
  overflow-x:hidden;
  position:relative;
}
img{ max-width:100%; display:block; }
a{ color:inherit; }
ul,ol{ margin:0; padding:0; list-style:none; }
h1,h2,h3,p{ margin:0; }
button{ font:inherit; background:none; border:none; cursor:pointer; color:inherit; }

:focus-visible{
  outline:3px solid var(--vk-blue);
  outline-offset:3px;
  border-radius:2px;
}

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important; }
}

.grain{
  position:fixed; inset:0; z-index:1; pointer-events:none; opacity:.5; mix-blend-mode:multiply;
  background-image:radial-gradient(rgba(33,27,23,.06) 1px, transparent 1px);
  background-size:3px 3px;
}

.screen{ position:relative; padding:clamp(3.5rem,8vw,7rem) 1.25rem; overflow:hidden; }
.eyebrow{
  font-family:var(--sans); font-weight:700; font-size:.72rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--burgundy); margin:0 0 .6rem;
}
.section-title{
  font-family:var(--serif); font-weight:400;
  font-size:clamp(2.1rem,5.8vw,3.6rem); line-height:1.1; letter-spacing:-.005em; color:var(--ink);
  max-width:20ch; text-wrap:balance;
}
.section-lead{
  font-size:clamp(1rem,2.2vw,1.2rem); color:var(--ink-soft); max-width:38ch; margin-top:1rem; line-height:1.5;
}
.fine-print{
  font-size:.8rem; color:var(--ink-soft); opacity:.75; max-width:34ch; margin-top:2rem;
}

/* Centred sections: constrained blocks must be centred too, or they read as misaligned. */
.proof-inner, .forwhom-inner, .path-inner, .results-inner, .pricing-inner{ text-align:center; }
.proof-inner .section-title, .forwhom-inner .section-title, .path-inner .section-title,
.results-inner .section-title, .pricing-inner .section-title,
.proof-inner .section-lead, .path-inner .section-lead, .results-inner .section-lead,
.proof-inner .fine-print, .results-inner .fine-print{ margin-inline:auto; }

/* ===================================================================
   REVEAL ANIMATION
=================================================================== */
.reveal{ opacity:0; transform:translateY(28px) rotate(var(--tilt,0deg)); transition:opacity .7s cubic-bezier(.16,1,.3,1), transform .7s cubic-bezier(.16,1,.3,1); }
.reveal.is-visible{ opacity:1; transform:translateY(0) rotate(var(--tilt,0deg)); }
@media (prefers-reduced-motion: reduce){
  .reveal{ opacity:1; transform:none; transition:none; }
}

/* ===================================================================
   SHARED PAPER / TAPE / STICKER PRIMITIVES
=================================================================== */
.torn-a{ clip-path:polygon(0% 3%,5% 0%,12% 4%,19% 1%,27% 3%,34% 0%,42% 3%,50% 1%,58% 3%,66% 0%,74% 3%,82% 1%,90% 3%,100% 0%,100% 97%,94% 100%,86% 97%,78% 100%,70% 97%,62% 100%,54% 97%,46% 100%,38% 97%,30% 100%,22% 97%,14% 100%,6% 97%,0% 100%); }
.torn-b{ clip-path:polygon(0% 0%,100% 0%,100% 100%,92% 97%,85% 100%,77% 96%,69% 100%,61% 97%,53% 100%,45% 96%,37% 100%,29% 97%,21% 100%,13% 96%,5% 100%,0% 97%); }
.torn-c{ clip-path:polygon(2% 0%,10% 3%,18% 0%,26% 4%,34% 1%,42% 4%,50% 0%,58% 4%,66% 1%,74% 4%,82% 0%,90% 3%,100% 1%,100% 100%,0% 100%); }
/* Gentler teeth: the photo is tall, so percentage-based teeth read twice as coarse here. */
.torn-photo{ clip-path:polygon(0% 1.4%,7% 0%,15% 1.6%,23% .3%,31% 1.4%,39% 0%,47% 1.5%,55% .2%,63% 1.4%,71% 0%,79% 1.5%,87% .3%,94% 1.4%,100% 0%,100% 98.6%,93% 100%,85% 98.5%,77% 99.8%,69% 98.6%,61% 100%,53% 98.5%,45% 99.8%,37% 98.6%,29% 100%,21% 98.5%,13% 99.8%,6% 98.6%,0% 100%); }

.tape{
  position:absolute; width:86px; height:34px;
  background:linear-gradient(100deg, rgba(220,230,232,.75), rgba(220,230,232,.5) 60%, rgba(220,230,232,.75));
  border:1px solid rgba(33,27,23,.06);
  box-shadow:0 2px 6px rgba(33,27,23,.12);
  opacity:.9; z-index:3;
}
.tape::after{ content:""; position:absolute; inset:0; background-image:repeating-linear-gradient(115deg, rgba(255,255,255,.35) 0 2px, transparent 2px 6px); }

.stamp{
  display:inline-flex; align-items:center; gap:.4em;
  font-family:var(--sans); font-weight:700; font-size:.68rem; letter-spacing:.1em; text-transform:uppercase;
  padding:.5em .9em; border:1.5px dashed var(--burgundy); color:var(--burgundy);
  background:var(--paper); border-radius:2px;
}
.stamp--rotate{ transform:rotate(-3deg); }
.stamp--rotate2{ transform:rotate(2deg); margin-top:1.2rem; }
.stamp--bonus{ position:absolute; top:-14px; left:20px; background:var(--burgundy); color:var(--paper); border-color:var(--burgundy); }

.pill{
  display:inline-flex; align-items:center; gap:.5em; padding:.45em .9em .45em .5em;
  background:var(--ink); color:#fff; border-radius:999px; font-size:.78rem; font-weight:600;
}
.pill--vk{ background:#0a6fd8; }

.sticker{
  display:inline-block; background:var(--paper); border:1px solid rgba(33,27,23,.08);
  box-shadow:var(--shadow-paper); padding:.9em 1.2em; border-radius:2px;
  font-family:var(--hand); font-size:1.35rem; line-height:1.25; color:var(--burgundy-deep);
}
.sticker--hand{ transform:rotate(-2deg); }

.handwritten{ font-family:var(--hand); font-size:1.15rem; color:var(--burgundy-deep); }

/* Editorial serif set inside running sans text — lifts the phrase that carries the meaning. */
.airy{ font-family:var(--serif); font-weight:400; font-size:1.08em; color:var(--ink); letter-spacing:.002em; }

/* Torn paper strip that lets a dark band read as a page ripped away from the one above. */
.band-edge{ position:absolute; left:0; right:0; height:16px; z-index:4; pointer-events:none; }
.band-edge--top{ top:-1px; clip-path:polygon(0 0,100% 0,100% 96%,96% 44%,92% 100%,88% 38%,84% 92%,80% 46%,76% 100%,72% 40%,68% 88%,64% 50%,60% 96%,56% 42%,52% 100%,48% 46%,44% 90%,40% 38%,36% 98%,32% 44%,28% 92%,24% 36%,20% 100%,16% 48%,12% 90%,8% 40%,4% 98%,0 46%); }
.band-edge--bottom{ bottom:-1px; clip-path:polygon(0 100%,0 54%,4% 2%,8% 60%,12% 8%,16% 52%,20% 0,24% 64%,28% 10%,32% 56%,36% 4%,40% 62%,44% 12%,48% 54%,52% 0,56% 60%,60% 8%,64% 50%,68% 2%,72% 58%,76% 6%,80% 54%,84% 0,88% 62%,92% 10%,96% 56%,100% 100%); }

.tilt-1{ --tilt:1.6deg; transform:rotate(var(--tilt)); }
.tilt-2{ --tilt:3deg; transform:rotate(var(--tilt)); }
.tilt-3{ --tilt:-2.4deg; transform:rotate(var(--tilt)); }
.tilt--1{ --tilt:-1.6deg; transform:rotate(var(--tilt)); }
.tilt--2{ --tilt:-3deg; transform:rotate(var(--tilt)); }
.tilt--3{ --tilt:2.4deg; transform:rotate(var(--tilt)); }

.tilt-hover{ transition:transform .35s cubic-bezier(.16,1,.3,1); }
.tilt-hover:hover{ transform:rotate(-1deg) translateY(-4px); }

.btn{
  display:inline-flex; align-items:center; gap:.6em;
  font-family:var(--sans); font-weight:700; font-size:.95rem;
  padding:1.25em 1.9em; border-radius:999px; text-decoration:none;
  transition:transform .25s cubic-bezier(.16,1,.3,1), box-shadow .25s ease;
}
.btn--primary{ background:var(--burgundy); color:var(--paper); box-shadow:0 10px 24px -8px rgba(110,20,35,.55); }
.btn--primary:hover{ transform:translateY(-2px); box-shadow:0 14px 28px -8px rgba(110,20,35,.6); }
.btn--primary:active{ transform:translateY(0); }
.btn--lg{ font-size:1.05rem; padding:1.25em 2em; }

.btn--tg{ background:var(--tg-blue); color:#fff; box-shadow:0 10px 24px -8px rgba(41,162,218,.5); }
.btn--tg:hover{ transform:translateY(-2px); box-shadow:0 14px 28px -8px rgba(41,162,218,.55); }
.btn--light{ background:var(--paper); color:var(--burgundy); }
.btn--light:hover{ transform:translateY(-2px); background:#fff; }
.btn--ghost{ background:transparent; color:var(--paper); border:1.5px solid rgba(251,247,238,.5); }
.btn--ghost:hover{ transform:translateY(-2px); border-color:var(--paper); }
.tg-icon{ width:1.15em; height:1.15em; flex:none; }

.hero-actions, .final-actions{ display:flex; gap:.8rem; flex-wrap:wrap; }
.final-actions{ justify-content:center; margin-bottom:1.4rem; }

/* VK glyph mark */
.vk-mark{
  width:22px; height:22px; border-radius:6px; background:var(--vk-blue); display:inline-block; flex:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M12.9 17c-4.6 0-7.4-3.2-7.5-8.4h2.5c.1 3.7 1.7 5.2 3 5.6V8.6h2.3v3.3c1.3-.2 2.7-1.6 3.2-3.3h2.3c-.4 2.1-1.8 3.6-2.8 4.2 1 .5 2.7 1.8 3.1 4.2h-2.5c-.3-1.7-1.6-2.9-3.3-3.1V17z'/%3E%3C/svg%3E");
  background-size:100% 100%; background-repeat:no-repeat;
}
.vk-mark--sm{ width:26px; height:26px; }
.vk-mark--xs{ width:18px; height:18px; }
i.vk-mark--xs{ margin-right:.5em; vertical-align:-3px; }

.line{ display:block; height:8px; border-radius:3px; background:rgba(33,27,23,.12); margin:.35em 0; }
.line--40{ width:40%; } .line--60{ width:60%; } .line--80{ width:80%; } .line--90{ width:90%; }

/* ===================================================================
   HERO
=================================================================== */
.hero{
  min-height:100vh; display:flex; align-items:center; justify-content:center;
  background:
    radial-gradient(circle at 18% 12%, var(--blue-sky) 0%, transparent 45%),
    radial-gradient(circle at 84% 78%, var(--paper-2) 0%, transparent 40%),
    var(--cream);
  padding-top:6rem; padding-bottom:4rem;
}
.hero-inner{ max-width:920px; width:100%; position:relative; z-index:2; }
.hero-copy{ text-align:center; display:flex; flex-direction:column; align-items:center; gap:1.1rem; }
.hero-eyebrow-row{ display:flex; gap:.7rem; flex-wrap:wrap; justify-content:center; margin-bottom:.5rem; }
.hero-cta{ margin-top:.4rem; }

@media (min-width:1000px){
  .hero{ padding-top:3.4rem; padding-bottom:2.6rem; }
  .hero-copy{ gap:.9rem; }
  .hero-inner{ max-width:1200px; display:grid; grid-template-columns:1.02fr .98fr; gap:2.5rem; align-items:center; }
  .hero-copy{ text-align:left; align-items:flex-start; }
  .hero-eyebrow-row{ justify-content:flex-start; }
  .hero-visual{ margin:0; padding:56px 40px 0 20px; }
  .cut-line{ font-size:clamp(4rem,7.4vw,7rem); }
  .hero-sub{ max-width:30ch; }
}

/* Short laptop screens: shrink the display and drop the decorative note so the CTA stays in view. */
@media (min-width:1000px) and (max-height:860px){
  .hero{ padding-top:2.6rem; padding-bottom:2rem; }
  .cut-line{ font-size:clamp(3rem,5.2vw,4.6rem); }
  .hero-promise{ font-size:1.3rem; }
  .hero-copy .sticker--hand{ display:none; }
  .hero-visual{ padding-top:20px; padding-bottom:20px; }
}

.hero-title{ font-family:var(--serif); font-weight:400; line-height:.94; letter-spacing:-.015em; }
.cut-line{ display:block; font-size:clamp(3.6rem,15vw,8.5rem); color:var(--ink); }
.cut-line--accent{ color:var(--burgundy); position:relative; }
.cut-line--accent::after{
  content:""; position:absolute; left:6%; right:6%; bottom:-.06em; height:.12em;
  background:var(--vk-blue); opacity:.85; clip-path:polygon(0 30%,8% 0,20% 50%,32% 10%,44% 60%,56% 5%,68% 55%,80% 15%,92% 60%,100% 20%,100% 100%,0 100%);
}

.hero-sub{ font-size:clamp(1.05rem,2.4vw,1.35rem); color:var(--ink-soft); max-width:34ch; }

.hero-promise{
  font-size:clamp(1.25rem,3vw,1.7rem); line-height:1.28; color:var(--ink); max-width:22ch; font-weight:500;
}
.hero-promise b{ font-weight:700; color:var(--burgundy); white-space:nowrap; }

.hero-visual{ position:relative; width:100%; max-width:560px; margin:2.6rem auto 1rem; padding:34px clamp(46px,12vw,86px) 34px; }

.photo-frame{ position:relative; z-index:2; }
.photo{
  display:block; width:100%; height:auto; background:var(--ink);
  box-shadow:0 26px 50px -18px rgba(33,27,23,.6), 0 4px 12px rgba(33,27,23,.2);
}
.photo-frame .tape--photo{ top:-16px; left:14%; transform:rotate(-7deg); z-index:4; }
.photo-frame .paperclip{ position:absolute; top:-22px; right:11%; width:30px; height:64px; z-index:4; color:var(--blue-dusty); }

.vk-app{ background:#fff; border-radius:6px; overflow:hidden; font-size:.72rem; }
.vk-app__top{ display:flex; align-items:center; gap:.5em; padding:.6em .7em; background:var(--blue-sky); font-weight:700; }
.vk-app__title{ color:var(--ink); }
.vk-app__stats{ display:flex; gap:1em; padding:.4em .7em .8em; color:var(--ink-soft); font-weight:600; white-space:nowrap; }

.vk-app{ background:#fff; border-radius:6px; overflow:hidden; font-size:.72rem; }
.vk-app__top{ display:flex; align-items:center; gap:.5em; padding:.6em .7em; background:var(--blue-sky); font-weight:700; }
.vk-app__title{ color:var(--ink); }
.vk-app__post{ display:flex; gap:.6em; padding:.8em .7em; }
.vk-app__avatar{ width:30px; height:30px; border-radius:50%; background:var(--blue-dusty); flex:none; }
.vk-app__lines{ flex:1; }
.vk-app__lines .line{ height:6px; margin:.3em 0; }
.vk-app__stats{ display:flex; gap:1em; padding:.4em .7em .8em; color:var(--ink-soft); font-weight:600; white-space:nowrap; }

.photo{ aspect-ratio:4/5; object-fit:cover; object-position:center 28%; }

.phone{
  position:absolute; right:0; top:16%; width:148px; background:var(--ink); border-radius:20px; padding:8px;
  box-shadow:var(--shadow-lift); z-index:5; transform:rotate(2deg);
}
.phone__notch{ width:36px; height:5px; background:rgba(255,255,255,.25); border-radius:4px; margin:0 auto 6px; }
.phone__notif{ background:#fff; border-radius:8px; padding:.6em; display:flex; gap:.5em; font-size:.68rem; align-items:flex-start; min-height:74px; }

.vk-profile-card{
  position:absolute; left:0; bottom:6%; width:196px; background:var(--paper); border:1px solid rgba(33,27,23,.1);
  box-shadow:var(--shadow-paper); padding:1em .9em; border-radius:4px; z-index:5; font-size:.78rem;
}
.vk-profile-card__row{ display:flex; align-items:center; gap:.5em; font-weight:700; margin-bottom:.3em; }
.vk-profile-card__tag{ color:var(--ink-soft); font-size:.72rem; margin-bottom:.7em; }
.vk-profile-card__stats{ display:flex; justify-content:space-between; gap:.5em; }
.vk-profile-card__stats li{ display:flex; flex-direction:column; gap:.15em; min-width:0; }
.vk-profile-card__stats b{ font-size:.88rem; line-height:1; white-space:nowrap; }
.vk-profile-card__stats span{ font-size:.56rem; color:var(--ink-soft); white-space:nowrap; letter-spacing:.01em; }

.arrow-note{ position:absolute; z-index:4; }
.arrow-note--1{ left:2%; top:0; }

.offer-note{ font-size:.85rem; color:var(--ink-soft); margin-top:.5rem; }

/* ===================================================================
   TICKER
=================================================================== */
.ticker{ background:var(--ink); overflow:hidden; padding:.9rem 0; position:relative; z-index:2; }
.ticker__track{ display:flex; gap:2.5rem; white-space:nowrap; width:max-content; animation:ticker-scroll 32s linear infinite; }
.ticker--rev .ticker__track{ animation-direction:reverse; }
.ticker:hover .ticker__track{ animation-play-state:paused; }
.ticker__item{ color:var(--paper); font-size:.85rem; font-weight:500; display:inline-flex; align-items:center; gap:.4em; }
.ticker__item b{ color:#8fd0ff; margin-left:.3em; }
@keyframes ticker-scroll{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }
@media (prefers-reduced-motion: reduce){ .ticker__track{ animation:none; overflow-x:auto; } }

/* ===================================================================
   PROOF SCREEN
=================================================================== */
/* The one dark, cool band in the middle of the page: paper receipts pop hardest against it. */
.proof{
  background:
    radial-gradient(circle at 14% 8%, rgba(139,163,174,.34) 0%, transparent 46%),
    radial-gradient(circle at 88% 88%, rgba(110,20,35,.42) 0%, transparent 48%),
    #2c383f;
  color:var(--paper);
  padding-top:clamp(4.2rem,8vw,7.5rem); padding-bottom:clamp(4.2rem,8vw,7.5rem);
}
.proof .band-edge--top{ background:var(--paper-2); }
.proof .band-edge--bottom{ background:var(--cream); }
.proof .eyebrow{ color:var(--amber); }
.proof .section-title{ color:var(--paper); }
.proof-inner{ max-width:1000px; margin:0 auto; text-align:center; position:relative; z-index:2; }
.chain{ display:flex; flex-wrap:wrap; justify-content:center; align-items:center; gap:.6rem .9rem; margin:2.2rem 0 3rem; }
.chain__step{ background:rgba(251,247,238,.09); border:1px solid rgba(251,247,238,.22); color:var(--paper); padding:.5em 1em; border-radius:999px; font-size:.85rem; font-weight:600; white-space:nowrap; }
.chain__step--money{ background:var(--amber); border-color:var(--amber); color:#26313a; }
.chain__arrow{ color:rgba(251,247,238,.45); font-weight:700; }

.receipts{ display:flex; flex-wrap:wrap; justify-content:center; gap:1.6rem 1.2rem; padding:1rem 0; }
.receipt{
  background:var(--paper); box-shadow:var(--shadow-paper); padding:1.6em 1.4em 3.2em;
  width:200px; text-align:left; display:flex; flex-direction:column; gap:.3em; position:relative;
}
.receipt__label{ font-size:.72rem; text-transform:uppercase; letter-spacing:.06em; color:var(--ink-soft); }
.receipt__amount{ font-family:var(--serif); font-size:1.85rem; font-weight:400; color:var(--burgundy); white-space:nowrap; }
.receipt__meta{ font-size:.75rem; color:var(--ink-soft); }
.receipt__tag{ position:absolute; bottom:14px; right:16px; font-size:1.05rem; color:var(--burgundy-soft); transform:rotate(-3deg); }
.receipt--mini{ width:130px; padding:1em 1em 1.4em; }
.receipt--mini .receipt__amount{ font-size:1.2rem; }

/* ===================================================================
   VK MOCKUP SCREEN
=================================================================== */
.vkscreen{ background:var(--cream); }
.vkscreen-inner{ max-width:1140px; margin:0 auto; display:grid; grid-template-columns:1fr 1.3fr; gap:3rem; align-items:center; position:relative; }
.vk-mock{ background:#fff; border-radius:4px; box-shadow:var(--shadow-lift); overflow:hidden; }
.vk-mock__top{ display:flex; align-items:center; gap:1em; padding:.9em 1.2em; background:var(--blue-sky); }
.vk-mock__tabs{ display:flex; gap:1em; font-size:.82rem; font-weight:600; color:var(--ink-soft); overflow-x:auto; }
.vk-mock__tabs .is-active{ color:var(--vk-blue-deep); }
.vk-mock__body{ display:grid; grid-template-columns:2fr 1fr; gap:1.2em; padding:1.2em; }
.vk-mock__post-head{ display:flex; align-items:center; gap:.7em; margin-bottom:.6em; }
.vk-mock__avatar{ width:36px; height:36px; border-radius:50%; background:var(--blue-dusty); }
.vk-mock__avatar--sm{ width:24px; height:24px; }
.vk-mock__post-head small{ display:block; color:var(--ink-soft); font-weight:400; font-size:.72rem; }
.vk-mock__post-text{ font-size:.85rem; margin-bottom:.8em; }
.vk-mock__post-media{ height:120px; background:linear-gradient(135deg,var(--blue-sky),var(--paper-2)); border-radius:4px; margin-bottom:.7em; }
.vk-mock__post-actions{ display:flex; gap:1em; font-size:.78rem; color:var(--ink-soft); font-weight:600; margin-bottom:.8em; white-space:nowrap; }
.vk-mock__comment{ display:flex; gap:.5em; align-items:center; font-size:.78rem; color:var(--ink-soft); }
.vk-mock__widget{ background:var(--cream); border-radius:4px; padding:.8em; margin-bottom:.7em; display:flex; flex-direction:column; }
.vk-mock__widget b{ font-size:1.05rem; font-weight:700; letter-spacing:-.01em; }
.vk-mock__widget span{ font-size:.7rem; color:var(--ink-soft); }
.vk-mock__widget--blue{ background:var(--vk-blue); color:#fff; }
.vk-mock__widget--blue span{ color:#dbe9ff; }
.vkscreen-inner .tape--2{ top:-10px; right:10%; transform:rotate(6deg); }

/* ===================================================================
   FOR WHOM
=================================================================== */
.forwhom{ background:var(--paper-2); }
.forwhom-inner{ max-width:1100px; margin:0 auto; text-align:center; }
/* Six cards, three tracks: two full rows instead of a five-up row with one orphan. */
.cards-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.6rem; margin-top:3rem; text-align:left; }
.leaf{ background:var(--paper); box-shadow:var(--shadow-paper); padding:1.8em 1.4em; min-height:170px; display:flex; flex-direction:column; gap:1em; }
.leaf__num{ font-family:var(--serif); font-weight:400; font-size:1.8rem; color:var(--burgundy); line-height:1; }
.leaf p{ font-size:.95rem; color:var(--ink-soft); }
/* Five cards: the last, longest one spans two tracks so both rows end flush. */
.leaf--wide{ grid-column:span 2; }
.leaf--wide.tilt-3{ --tilt:-.9deg; }

/* ===================================================================
   LEVELS / QUEST PATH
=================================================================== */
.levels{ background:var(--cream); }
.levels-inner{ max-width:1120px; margin:0 auto; }
.levels-inner > .section-title{ max-width:26ch; }
.levels-inner > .eyebrow{ max-width:60ch; }
/* Fixed three-track grid so the two photo tiles land in different columns and read as a collage. */
.quest-path{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.6rem; margin:2.8rem 0 0; }
.quest-level{ background:var(--paper); box-shadow:var(--shadow-paper); padding:1.6em 1.4em; display:flex; flex-direction:column; gap:.6em; position:relative; }
.quest-level__num{ font-family:var(--serif); font-size:2.3rem; font-weight:400; color:var(--blue-dusty); line-height:1; }
.quest-level__num--final{ font-family:var(--sans); font-size:2.2rem; }
/* Topic first, loud: the caps line is what the reader scans; the quest name below it is the quieter flavour line. */
.quest-level h3{ font-size:1.14rem; font-weight:800; text-transform:uppercase; letter-spacing:.02em; line-height:1.2; color:var(--burgundy); }
.quest-level p{ font-size:.88rem; color:var(--ink-soft); }
.quest-level p b{ color:var(--ink); font-weight:700; }
.quest-level__sub{ font-family:var(--serif); font-size:1rem; font-weight:400; color:#6f8792; margin-top:-.3em; margin-bottom:.15em; }
.quest-level--final{ background:linear-gradient(var(--paper),#f7eedd); }

/* 🎁 bonus — amber note. Результат уровня — burgundy footer. Two signals, never confused. */
.level-gift{ background:#f8eeda; border-left:3px solid var(--amber); padding:.65em .8em; border-radius:2px; }
.quest-level .level-gift{ font-size:.82rem; color:#6b5433; }
.level-gift b{ color:#8a5c1d; font-weight:700; }

.level-result + .achv{ margin-top:.8em; }
.level-result{ margin-top:auto; padding-top:.9em; border-top:1.5px dashed rgba(110,20,35,.3); display:flex; flex-direction:column; gap:.35em; }
.level-result__label{
  display:inline-flex; align-items:center; gap:.5em;
  font-size:.62rem; font-weight:800; letter-spacing:.15em; text-transform:uppercase; color:var(--burgundy);
}
.level-result__label::before{
  content:"✓"; flex:none; width:16px; height:16px; border-radius:50%;
  background:var(--burgundy); color:var(--paper); letter-spacing:0; font-size:.6rem;
  display:inline-flex; align-items:center; justify-content:center;
}
.quest-level .level-result p{ font-size:.86rem; font-weight:500; line-height:1.35; color:var(--ink); }

/* Photo tiles sit in the level grid itself, so the programme reads as a board, not a wall of text. */
.quest-photo{ position:relative; background:var(--paper); box-shadow:var(--shadow-paper); padding:.85em .85em 1.1em; display:flex; flex-direction:column; gap:.75em; min-height:300px; }
.quest-photo__frame{ position:relative; flex:1; min-height:236px; }
.quest-photo__img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.quest-photo__img--top{ object-position:center 26%; }
.quest-photo__img--walk{ object-position:center 58%; }
.quest-photo__img--stats{ object-position:center 26%; }
.quest-photo__note{ font-size:1.1rem; line-height:1.15; text-align:center; }
.quest-photo .tape--lv{ top:-13px; left:16%; width:72px; height:28px; transform:rotate(-6deg); }
.quest-photo .tape--lv2{ left:auto; right:14%; transform:rotate(7deg); }

.achv{
  margin-top:auto; align-self:flex-start; display:inline-flex; align-items:center; gap:.4em;
  font-size:.76rem; font-weight:700; color:#7a5418; background:#f6e7c8;
  border:1.5px dashed var(--amber); border-radius:999px; padding:.45em .9em;
}
.achv--final{ background:var(--amber); color:#fff; border-style:solid; border-color:#9d6a2a; }

.bonus-wrap{ position:relative; max-width:420px; margin-top:2.5rem; }
.bonus-wrap .stamp--bonus{ position:absolute; top:-14px; left:20px; z-index:2; margin:0; }
.bonus-card{ background:var(--paper-2); box-shadow:var(--shadow-paper); padding:2em 1.6em; position:relative; }
.bonus-card h3{ font-family:var(--serif); font-weight:400; font-size:1.5rem; margin:.2em 0 .5em; }
.bonus-card p{ font-size:.9rem; color:var(--ink-soft); }

/* ===================================================================
   PRACTICE / DESK
=================================================================== */
.practice{ background:var(--blue-sky); }
.practice-inner{ max-width:1100px; margin:0 auto; display:grid; grid-template-columns:1.1fr 1fr; gap:3rem; align-items:center; }
.desk{ position:relative; min-height:400px; display:flex; align-items:center; }
.desk__notebook{ background:var(--paper); box-shadow:var(--shadow-lift); padding:2.4em 2em; width:100%; max-width:380px; position:relative; }
.desk__stamp{ position:absolute; top:8%; left:-4%; transform:rotate(-3deg); z-index:4; }
.desk__notebook .line{ margin:.55em 0; }

/* The taped sheet is a growth journal: handwritten heading, a hand-drawn chart, a short to-do list. */
.desk__notebook{ padding:1.7em 1.7em 1.9em; }
.journal__head{ display:flex; justify-content:space-between; align-items:baseline; gap:1em; }
.journal__title{ font-family:var(--hand); font-size:1.6rem; line-height:1; color:var(--burgundy-deep); }
.journal__date{ font-family:var(--hand); font-size:1.05rem; color:#587480; white-space:nowrap; }
.journal__chart{ display:block; width:100%; height:auto; margin:.35em 0 .5em; overflow:visible; }
.journal__grid line{ stroke:rgba(33,27,23,.13); stroke-width:1; stroke-dasharray:3 5; }
.journal__area{ fill:rgba(110,20,35,.08); }
.journal__line{ fill:none; stroke:var(--burgundy); stroke-width:3; stroke-linecap:round; }
.journal__dot{ fill:var(--paper); stroke:var(--burgundy); stroke-width:2.5; }
.journal__dot--end{ fill:var(--amber); stroke:var(--paper); stroke-width:3; }
.journal__label{ font-family:var(--hand); font-size:18px; fill:var(--ink-soft); }
.journal__label--end{ font-size:24px; font-weight:700; fill:var(--burgundy); }
.journal__notes{ display:flex; flex-direction:column; gap:.1em; font-family:var(--hand); font-size:1.22rem; line-height:1.2; color:var(--ink); }
.journal__notes li{ position:relative; padding-left:1.3em; }
.journal__notes li::before{ content:"→"; position:absolute; left:0; color:var(--amber); font-weight:700; }
.journal__notes li.is-done::before{ content:"✓"; color:var(--burgundy); }
.journal__notes mark{ color:inherit; padding:0 .15em; background:linear-gradient(transparent 55%, rgba(194,135,60,.38) 55%); }
.desk__phone{ position:absolute; right:0; bottom:6%; width:140px; background:var(--ink); border-radius:18px; padding:8px; box-shadow:var(--shadow-lift); z-index:3; transform:rotate(2deg); }
.vk-app--mini{ font-size:.66rem; }
.checklist{ display:flex; flex-direction:column; gap:.5em; padding:.7em; }
.checklist__item{ font-size:.68rem; padding:.4em .5em; background:var(--cream); border-radius:4px; }
.checklist__item.is-done{ text-decoration:line-through; color:var(--ink-soft); background:var(--blue-sky); }
.desk__note{ position:absolute; right:2%; top:14%; z-index:2; text-align:right; line-height:1.2; color:var(--burgundy-deep); }
.desk__marker{ position:absolute; left:14%; bottom:14%; width:16px; height:90px; transform:rotate(28deg); z-index:4; }
.practice-inner .tape--3{ top:20%; left:26%; transform:rotate(-10deg); z-index:4; }
/* Tape, stamp and pen live on the sheet wrapper (outside the torn clip) and sit on its edges, clear of the notes. */
.desk__sheet{ position:relative; width:100%; max-width:380px; }
.desk__sheet .tape--3{ top:-15px; left:auto; right:24%; transform:rotate(4deg); }
.desk__sheet .desk__stamp{ top:-26px; left:-6px; }
.desk__sheet .desk__marker{ left:auto; right:7%; bottom:9%; }
/* Two full sentences: set smaller than other section titles so the block doesn't fill the whole screen. */
.practice-text .section-title{ font-size:clamp(1.7rem,3.4vw,2.5rem); max-width:24ch; line-height:1.15; }
.checkmarks{ display:flex; flex-direction:column; gap:.9em; margin-top:1.6rem; }
.checkmarks li{ padding-left:1.6em; position:relative; font-size:1rem; color:var(--ink-soft); }
.checkmarks li::before{ content:"✓"; position:absolute; left:0; color:var(--burgundy); font-weight:700; }
.note-line{ margin-top:1.4rem; font-size:.92rem; color:var(--ink-soft); background:var(--paper); border-left:3px solid var(--amber); padding:.8em 1em; border-radius:2px; }

/* ===================================================================
   ROADMAP
=================================================================== */
/* The achievement road is the reward moment of the page — it gets the deepest colour. */
.path{ background:linear-gradient(155deg,var(--burgundy) 0%,var(--burgundy-deep) 100%); color:var(--paper); }
.path .band-edge--top, .path .band-edge--bottom{ background:var(--cream); }
.path .eyebrow{ color:#e9b981; }
.path .section-title{ color:var(--paper); }
.path-inner{ max-width:1100px; margin:0 auto; text-align:center; position:relative; z-index:2; }
.roadmap{ display:flex; flex-wrap:wrap; justify-content:center; gap:1.4rem 0; margin-top:3rem; position:relative; }
.roadmap__stop{ display:flex; flex-direction:column; align-items:center; gap:.6em; width:130px; }
.roadmap__stop:not(:last-child)::after{ content:"→"; color:rgba(251,247,238,.42); font-size:1.4rem; position:absolute; margin-left:130px; }
.roadmap__dot{
  width:46px; height:46px; border-radius:50%; background:var(--paper); border:2px solid var(--burgundy);
  display:flex; align-items:center; justify-content:center; font-weight:400; font-size:1.15rem; color:var(--burgundy); font-family:var(--serif);
  box-shadow:var(--shadow-paper);
}
.roadmap__dot{ border-color:var(--paper); }
.roadmap__stop--end .roadmap__dot{ background:var(--amber); color:#fff; border-color:#eac597; }
.roadmap__stop span:last-child{ font-size:.8rem; color:#e9dad2; max-width:120px; text-align:center; }

/* ===================================================================
   RESULTS
=================================================================== */
.results{ background:var(--cream); }
.results-inner{ max-width:1000px; margin:0 auto; text-align:center; }
.stats-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:1.4rem; margin:3rem 0 1rem; }
.stat{ background:var(--paper); box-shadow:var(--shadow-paper); padding:2em 1.2em; display:flex; flex-direction:column; gap:.6em; }
.stat__num{ font-family:var(--serif); font-size:2.9rem; font-weight:400; color:var(--burgundy); line-height:1; white-space:nowrap; }
.stat__num--text{ font-size:1.6rem; white-space:normal; }
.stat__label{ font-size:.85rem; color:var(--ink-soft); }

/* ===================================================================
   OUTCOME / BONUSES
=================================================================== */
.outcome{ background:var(--cream); }
.outcome-inner{ max-width:1100px; margin:0 auto; display:grid; grid-template-columns:.72fr 1fr; gap:3.2rem; align-items:start; }
.outcome-visual{ position:relative; }
.outcome-visual__note{ position:absolute; right:-2%; bottom:-2.4rem; text-align:right; line-height:1.15; z-index:4; }
.photo--wide{ aspect-ratio:4/4.6; object-position:38% 12%; }
.photo--group{ object-position:40% 62%; }
/* One column: two ragged columns left a lone last item and made the block read as uneven. */
.outcomes{ display:grid; grid-template-columns:1fr; gap:.75rem; margin:1.8rem 0 1.8rem; }
.outcomes li{ position:relative; padding-left:1.7em; font-size:1rem; color:var(--ink-soft); line-height:1.4; }
.outcomes li::before{ content:"✓"; position:absolute; left:0; top:0; color:var(--burgundy); font-weight:700; }
.outcome-kicker{
  font-family:var(--serif); font-weight:400; font-size:clamp(1.2rem,2.6vw,1.6rem); line-height:1.35;
  color:var(--ink); border-top:2px solid rgba(33,27,23,.12); padding-top:1.6rem; max-width:46ch;
}

.bonuses{ background:var(--paper-2); }
.bonuses-inner{ max-width:1100px; margin:0 auto; }
.bonus-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:1.5rem; margin-top:2.8rem; }
.bonus{ background:var(--paper); box-shadow:var(--shadow-paper); padding:1.7em 1.4em; display:flex; flex-direction:column; gap:.5em; }
.bonus__icon{ font-size:1.5rem; line-height:1; }
.bonus h3{ font-size:1.02rem; font-weight:700; letter-spacing:-.01em; }
.bonus p{ font-size:.88rem; color:var(--ink-soft); }

/* ===================================================================
   PRICING / TICKET
=================================================================== */
.pricing{ background:var(--blue-sky); }
.pricing-inner{ max-width:1060px; margin:0 auto; text-align:center; }
.pricing-start{ margin-top:1.2rem; }
.pricing-start .stamp{ font-size:.8rem; padding:.6em 1.1em; }
.tickets{ display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:2rem; margin-top:3rem; text-align:left; align-items:start; }

.ticket{ background:var(--paper); box-shadow:var(--shadow-lift); position:relative; border-radius:4px; }
.ticket::before,
.ticket::after{
  content:""; position:absolute; top:68%; width:24px; height:24px; border-radius:50%;
  background:var(--blue-sky); z-index:2;
}
.ticket::before{ left:-12px; }
.ticket::after{ right:-12px; }
.ticket--pro{ background:var(--burgundy); color:var(--paper); }
.ticket--pro::before, .ticket--pro::after{ top:76%; }

.ribbon{
  position:absolute; top:-14px; right:18px; z-index:3;
  background:var(--amber); color:#fff; font-size:.7rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
  padding:.5em .9em; border-radius:2px; transform:rotate(2deg); box-shadow:var(--shadow-paper);
}
.stamp--light{ border-color:var(--paper); color:var(--paper); background:transparent; }

.ticket__main{ padding:2.4em 1.9em; display:flex; flex-direction:column; gap:.7em; }
.ticket__main .stamp{ align-self:flex-start; }
.ticket__price-row{ display:flex; align-items:baseline; gap:.5em; flex-wrap:wrap; margin-top:.5em; }
.ticket__list{ display:flex; flex-direction:column; gap:.55em; margin:.6em 0 .4em; }
.ticket__list li{ font-size:.88rem; padding-left:1.4em; position:relative; line-height:1.4; }
.ticket__list li::before{ content:"—"; position:absolute; left:0; color:var(--burgundy); }
.ticket--pro .ticket__list li::before{ color:var(--amber); }
.ticket__list li.is-muted{ opacity:.62; }
.ticket__old{ text-decoration:line-through; opacity:.55; font-size:1.05rem; white-space:nowrap; }
.ticket__new{ font-family:var(--serif); font-size:2.5rem; font-weight:400; white-space:nowrap; line-height:1; }
.ticket__timer-label{ font-size:.8rem; opacity:.8; }
.ticket__timer{ font-size:1.25rem; font-weight:700; letter-spacing:.05em; color:var(--burgundy); }
.ticket__actions{ display:flex; flex-direction:column; gap:.6em; margin-top:auto; }
.ticket__cta{ justify-content:center; margin-top:.6em; }
.ticket__actions .ticket__cta{ margin-top:0; }

/* ===================================================================
   FAQ
=================================================================== */
.faq{ background:var(--cream); }
.faq-inner{ max-width:760px; margin:0 auto; }
.faq-list{ margin-top:2.5rem; display:flex; flex-direction:column; gap:.8rem; }
.faq-item{ background:var(--paper); box-shadow:var(--shadow-paper); border-radius:3px; overflow:hidden; }
.faq-item__q{ width:100%; display:flex; justify-content:space-between; align-items:center; padding:1.1em 1.3em; font-weight:700; text-align:left; font-size:1rem; }
.faq-item__icon{ color:var(--burgundy); font-size:1.3rem; transition:transform .3s ease; }
.faq-item__q[aria-expanded="true"] .faq-item__icon{ transform:rotate(45deg); }
.faq-item__a{ max-height:0; overflow:hidden; transition:max-height .35s ease; }
.faq-item__a p{ padding:0 1.3em 1.2em; font-size:.92rem; color:var(--ink-soft); }

/* ===================================================================
   FINAL CTA
=================================================================== */
.final{ background:var(--ink); color:var(--paper); text-align:center; min-height:70vh; display:flex; align-items:center; }
.final-inner{ max-width:760px; margin:0 auto; position:relative; }

/* Sign-off portrait: the page closes with a person, not a button. */
.final-avatar{
  width:160px; height:160px; margin:0 auto 1.8rem; position:relative;
  border-radius:50%; padding:6px; background:var(--paper); --tilt:-3deg; transform:rotate(var(--tilt));
  box-shadow:0 16px 34px -12px rgba(0,0,0,.7);
}
.final-avatar::after{ content:""; position:absolute; inset:-11px; border:1.5px dashed rgba(194,135,60,.75); border-radius:50%; }
.final-avatar img{ width:100%; height:100%; border-radius:50%; object-fit:cover; object-position:center 20%; }
.final-avatar img.final-avatar__img--centered{ object-position:center; }
.section-title--final{ color:var(--paper); margin:0 auto; }
.section-lead--final{ color:#cfc7bd; margin:1rem auto 2rem; max-width:48ch; text-wrap:pretty; }
.final .tape--4{ top:-56px; left:12%; transform:rotate(-8deg); }
.final-scatter{ position:relative; height:0; }
.final-scatter .receipt{ position:absolute; left:6%; top:2.5rem; }
.final-scatter .sticker{ position:absolute; right:4%; top:-1rem; }
.final-scatter .vk-profile-card{ position:absolute; left:auto; right:10%; top:5rem; background:var(--paper); color:var(--ink); width:150px; }

.consent{ margin-top:2rem; font-size:.82rem; color:var(--ink-soft); max-width:52ch; margin-inline:auto; }
.consent a{ color:var(--burgundy); text-underline-offset:3px; }

.footer{ text-align:center; padding:2.4rem 1rem; font-size:.78rem; color:var(--ink-soft); background:var(--cream); display:flex; flex-direction:column; gap:.7rem; align-items:center; }
.footer__docs{ display:flex; gap:1.4rem; flex-wrap:wrap; justify-content:center; }
.footer__docs a{ color:var(--burgundy); font-weight:600; text-underline-offset:3px; }
.footer p{ max-width:64ch; }

/* ===================================================================
   RESPONSIVE
=================================================================== */
@media (max-width:980px){
  .quest-path, .cards-grid{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:860px){
  .vkscreen-inner, .practice-inner{ grid-template-columns:1fr; }
  .vk-mock__body{ grid-template-columns:1fr; }
  .ticket::before, .ticket::after{ display:none; }
  .final-scatter{ display:none; }
  .roadmap__stop::after{ display:none; }
  .outcome-inner{ grid-template-columns:1fr; gap:2.6rem; }
  .outcome-visual{ max-width:300px; margin:0 auto; }
  .outcome-visual__note{ right:0; bottom:-2rem; }
}
@media (max-width:640px){
  .quest-path, .cards-grid{ grid-template-columns:1fr; }
  .leaf--wide{ grid-column:auto; }
  .quest-photo{ min-height:0; }
  .quest-photo__frame{ min-height:300px; }
}
@media (max-width:620px){
  .hero-copy{ gap:.85rem; }
  .sticker--hand{ font-size:1.12rem; padding:.75em 1em; }
  .hero-actions{ width:100%; }
  .hero-actions .btn{ flex:1 1 100%; justify-content:center; }
}
@media (max-width:520px){
  .desk{ padding-bottom:150px; }
  .desk__phone{ bottom:0; }
  .desk__note, .desk__sheet .desk__marker{ display:none; }
  .hero-visual{ min-height:300px; }
  .phone{ width:110px; }
  .vk-profile-card{ width:158px; font-size:.7rem; left:-3%; }
  .vk-profile-card__stats li:last-child{ display:none; }
  .coffee{ display:none; }
  .arrow-note{ display:none; }
}