/* ===========================================================
   Academia TG Tours — интенсив «Создай свой первый авторский тур»
   Palette source: TG Tours Academia/brand/visual.md
   plum #4C1F3C · gold #F0B760 · milk #FEF0E7
   Mobile-first. Traffic is Instagram, so phone is the real design.
   =========================================================== */

:root{
  /* Exact values from the mini brandbook (build/landing/brandbook-mini.pdf).
     These replace the palette in brand/visual.md, which said outright that its
     hexes were "приблизительно — сверить с брендбуком". Now we have it. */
  --plum:#4C1F3C;        /* brandbook 1 — primary dark */
  --mauve:#784566;       /* brandbook 2 — muted plum */
  --cream:#FEF0E7;       /* brandbook 3 — light ground */
  --gold-lt:#F1D087;     /* brandbook 4 */
  --gold:#F0B760;        /* brandbook 5 — primary accent */
  --coral:#DD5A5F;       /* brandbook accent + */
  --violet:#593283;      /* brandbook accent + */

  /* derived, not from the brandbook */
  --plum-d:#38152B;
  --gold-d:#C88F3E;
  /* Brand gold at 36 deg hue darkened until small text clears 4.5:1 on both
     cream and white. #F0B760 itself is 1.62:1 on cream — decorative only. */
  --gold-ink:#9A630F;
  --milk:var(--cream);
  --ink:#2E1128;
  --body:#5A4453;
  --line:rgba(76,31,60,.14);
  --white:#fff;
  --sunset:linear-gradient(135deg,var(--violet) 0%,var(--coral) 52%,var(--gold) 100%);

  /* Brandbook fonts are Vetrino (display) + Raleway (body). Raleway is exact.
     Vetrino is a licensed font we do not have a web file for — Playfair Display
     stands in until the real one is supplied. See 01-build-notes.md §13. */
  --serif:"Playfair Display",Georgia,"Times New Roman",serif;
  --sans:"Raleway",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;

  --wrap:1140px;
  --pad:20px;
  --r:14px;
  --shadow:0 18px 44px rgba(56,21,43,.14);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

body{
  margin:0;
  font-family:var(--sans);
  font-size:16px;
  line-height:1.65;
  color:var(--body);
  background:var(--white);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img,picture,svg{max-width:100%;display:block}
a{color:inherit}
h1,h2,h3,h4{margin:0;font-family:var(--serif);color:var(--ink);line-height:1.15;font-weight:600}
p{margin:0 0 1em}
ul,ol{margin:0;padding:0;list-style:none}

.wrap{width:100%;max-width:var(--wrap);margin:0 auto;padding:0 var(--pad)}

.skip{position:absolute;left:-9999px}
.skip:focus{left:8px;top:8px;z-index:200;background:var(--plum);color:#fff;padding:10px 16px;border-radius:8px}

:focus-visible{outline:3px solid var(--gold);outline-offset:3px;border-radius:4px}

/* ── shared type ───────────────────────────────────────────── */
.eyebrow{
  font-size:12px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
  color:var(--gold-ink);margin:0 0 14px;
}
.eyebrow--light{color:var(--gold)}

.h2{font-size:clamp(25px,5.6vw,44px);margin:0 0 18px;letter-spacing:-.015em;text-wrap:balance}
.h2--light{color:var(--white)}
/* Headings carry no hard breaks: a hidden <br> eats the space around it and
   glues two words together. text-wrap:balance gives even lines at any width. */
@media (max-width:699px){ .hero__by br{display:none} }

.lede{font-size:clamp(16px,2.4vw,18px);max-width:60ch;color:var(--body)}
.lede--light{color:rgba(255,255,255,.84)}

.sec{padding:64px 0}
.sec--milk{background:var(--milk)}
.sec--dark{background:var(--plum);color:var(--white)}

/* ── buttons ───────────────────────────────────────────────── */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font-family:var(--sans);font-size:15px;font-weight:600;line-height:1;
  padding:15px 26px;border-radius:999px;border:2px solid var(--plum);
  background:var(--plum);color:var(--white);text-decoration:none;
  cursor:pointer;transition:transform .15s ease,box-shadow .2s ease,background .2s ease,color .2s ease;
  text-align:center;
}
.btn:hover{transform:translateY(-2px);box-shadow:0 12px 26px rgba(56,21,43,.26)}
.btn:active{transform:translateY(0)}
.btn--sm{padding:11px 18px;font-size:14px}
.btn--lg{padding:18px 34px;font-size:17px}
.btn--gold{background:var(--gold);border-color:var(--gold);color:var(--plum-d)}
.btn--gold:hover{background:var(--gold-d);border-color:var(--gold-d)}
.btn--ghost{background:transparent;color:var(--plum);border-color:var(--plum)}
.btn--ghost:hover{background:var(--plum);color:var(--white)}

/* ── header ────────────────────────────────────────────────── */
.hdr{
  position:sticky;top:0;z-index:100;
  background:rgba(255,255,255,.94);backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
.hdr__in{display:flex;align-items:center;gap:16px;min-height:64px}
.hdr__logo{display:flex;align-items:center;gap:10px;text-decoration:none;flex:0 0 auto}
.hdr__logo img{width:38px;height:38px;background:var(--plum);border-radius:9px;padding:3px}
.hdr__logo-txt{display:flex;flex-direction:column;line-height:1.05;font-family:var(--serif)}
.hdr__logo-txt b{font-size:13px;letter-spacing:.13em;color:var(--plum);font-weight:600}
.hdr__logo-txt i{font-size:10px;letter-spacing:.2em;color:var(--gold-d);font-style:normal}

.hdr__nav{display:none;gap:26px;margin-left:auto;font-size:14.5px;font-weight:500}
.hdr__nav a{text-decoration:none;color:var(--body);padding:6px 0;border-bottom:2px solid transparent}
.hdr__nav a:hover{color:var(--plum);border-bottom-color:var(--gold)}
.hdr .btn--sm{display:none;flex:0 0 auto}

.hdr__burger{
  margin-left:auto;width:42px;height:42px;display:grid;place-content:center;gap:5px;
  background:none;border:0;cursor:pointer;padding:0;
}
.hdr__burger span{display:block;width:22px;height:2px;background:var(--plum);transition:transform .2s,opacity .2s}
.hdr__burger[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.hdr__burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.hdr__burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

.mnav{
  display:flex;flex-direction:column;gap:4px;padding:8px var(--pad) 20px;
  background:#fff;border-bottom:1px solid var(--line);
}
.mnav a:not(.btn){padding:13px 4px;text-decoration:none;color:var(--body);font-weight:500;border-bottom:1px solid var(--line)}
.mnav .btn{margin-top:12px}
[hidden]{display:none!important}

/* ── hero ──────────────────────────────────────────────────── */
.hero{position:relative;isolation:isolate;background:var(--plum-d)}
.hero__img{position:absolute;inset:0;z-index:-2}
/* Tatiana stands in the left third of this photo. On a phone the frame is
   narrow, so we pull that third into view — the whole point of the shot is
   that the person teaching is a real operator standing in a real place. */
.hero__img img{width:100%;height:100%;object-fit:cover;object-position:31% 30%}
.hero::after{
  content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg,rgba(56,21,43,.42) 0%,rgba(56,21,43,.30) 26%,rgba(56,21,43,.72) 62%,rgba(56,21,43,.94) 100%);
}
.hero__in{padding:74px 20px 56px;color:#fff;text-align:center}

.hero__kicker{
  display:inline-block;font-size:11.5px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;
  color:var(--gold);border:1px solid rgba(240,183,96,.55);border-radius:999px;padding:7px 15px;margin:0 0 20px;
  background:rgba(56,21,43,.35);
}
.hero__h1{
  font-size:clamp(31px,8.4vw,68px);text-wrap:balance;color:#fff;letter-spacing:-.02em;margin:0 0 16px;
  text-shadow:0 2px 22px rgba(30,10,28,.5);
}
.hero__h1 span{color:var(--gold);font-style:italic}
.hero__sub{font-size:clamp(16px,3.4vw,20px);color:rgba(255,255,255,.9);margin:0 auto 26px;max-width:34ch}

.hero__price{display:flex;align-items:baseline;justify-content:center;gap:12px;margin:0 0 24px}
.price-old s{color:rgba(255,255,255,.62);font-size:20px;font-weight:500;text-decoration-thickness:2px}
.price-now{font-family:var(--serif);font-size:44px;font-weight:700;color:var(--gold);line-height:1}

.hero__by{margin:26px 0 0;font-size:14.5px;color:rgba(255,255,255,.8);line-height:1.6}
.hero__by b{color:#fff}

/* ── trust bar ─────────────────────────────────────────────── */
.trust{background:var(--plum);color:#fff;border-top:1px solid rgba(255,255,255,.1)}
.trust__in{display:grid;gap:22px;padding:30px var(--pad);text-align:center}
.trust__i b{display:block;font-family:var(--serif);font-size:19px;color:var(--gold);font-weight:600}
.trust__i span{font-size:13.5px;color:rgba(255,255,255,.72)}

/* ── cards ─────────────────────────────────────────────────── */
.cards{display:grid;gap:16px;margin-top:34px}
.card{
  position:relative;background:#fff;border:1px solid var(--line);border-radius:var(--r);
  padding:26px 22px 24px;
}
.card__n{
  position:absolute;top:18px;right:20px;font-family:var(--serif);font-size:30px;
  color:var(--gold-ink);opacity:.85;font-weight:700;line-height:1;
}
.card h3{font-size:20px;margin:0 0 9px;padding-right:44px}
.card p{margin:0;font-size:15px;line-height:1.6}
.card--plain{background:#fff}
.sec--milk .card--plain{border-color:rgba(76,31,60,.1)}

/* ── homework ──────────────────────────────────────────────── */
.hw__in{display:grid;gap:32px}
.hw__img img{border-radius:var(--r);width:100%;height:280px;object-fit:cover}
.ticks{display:grid;gap:11px;margin-top:6px}
.ticks li{position:relative;padding-left:30px;color:rgba(255,255,255,.86);font-size:15.5px}
.ticks li::before{
  content:"";position:absolute;left:2px;top:.55em;width:13px;height:7px;
  border-left:2px solid var(--gold);border-bottom:2px solid var(--gold);transform:rotate(-45deg);
}

/* ── understand ────────────────────────────────────────────── */
.understand{position:relative;isolation:isolate;background:var(--plum-d)}
.understand__bg{position:absolute;inset:0;z-index:-2}
.understand__bg img{width:100%;height:100%;object-fit:cover}
.understand::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(56,21,43,.90),rgba(56,21,43,.82))}
.steps{counter-reset:s;display:grid;gap:14px;margin-top:30px}
.steps li{
  counter-increment:s;position:relative;padding:16px 18px 16px 60px;
  background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.14);border-radius:12px;
  color:#fff;font-size:16px;font-weight:500;
}
.steps li::before{
  content:counter(s,decimal-leading-zero);position:absolute;left:18px;top:50%;transform:translateY(-50%);
  font-family:var(--serif);font-size:17px;color:var(--gold);font-weight:700;
}

/* ── expert ────────────────────────────────────────────────── */
.expert{background:var(--milk)}
.expert__in{display:grid;gap:30px}
.expert__imgs{position:relative;display:grid;grid-template-columns:1fr;gap:14px}
.expert__img img{border-radius:var(--r);width:100%;object-fit:cover;box-shadow:var(--shadow)}
.expert__img--a img{height:400px;object-position:50% 38%}
.expert__img--b{display:none}
.expert__role{font-size:15px;color:var(--gold-ink);font-weight:600;margin:-6px 0 18px}

.facts{display:grid;gap:10px;margin:0 0 22px}
.facts li{position:relative;padding-left:20px;font-size:15.5px}
.facts li::before{content:"";position:absolute;left:0;top:.62em;width:8px;height:8px;border-radius:50%;background:var(--gold)}
.facts b{color:var(--ink)}

.quote{
  margin:0;padding:20px 22px;border-left:3px solid var(--gold);background:#fff;
  border-radius:0 var(--r) var(--r) 0;font-family:var(--serif);font-size:19px;
  font-style:italic;color:var(--ink);line-height:1.45;
}

/* ── price ─────────────────────────────────────────────────── */
.price{background:var(--plum);color:var(--white);text-align:center}
.price__in{max-width:640px}
.price__box{
  background:rgba(255,255,255,.06);border:1px solid rgba(240,183,96,.35);
  border-radius:20px;padding:32px 24px;margin-top:26px;
}
.price__tags{display:flex;align-items:baseline;justify-content:center;gap:14px;margin-bottom:20px}
.price-old--lg s{font-size:26px}
.price-now--lg{font-size:60px}
.price__list{display:grid;gap:10px;margin:0 0 26px;text-align:left}
.price__list li{position:relative;padding-left:28px;color:rgba(255,255,255,.88);font-size:15.5px}
.price__list li::before{
  content:"";position:absolute;left:3px;top:.55em;width:12px;height:6px;
  border-left:2px solid var(--gold);border-bottom:2px solid var(--gold);transform:rotate(-45deg);
}
.price__box .btn{width:100%}
.price__note{margin:16px 0 0;font-size:13px;color:rgba(255,255,255,.6)}

/* ── free step ─────────────────────────────────────────────── */
.free__in{display:grid;gap:30px}
.free__img img{border-radius:var(--r);width:100%;height:300px;object-fit:cover}

/* ── consultation ──────────────────────────────────────────── */
.consult__in{text-align:center;max-width:640px}
.consult__btns{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin-top:26px}

/* ── footer ────────────────────────────────────────────────── */
.ftr{background:var(--plum-d);color:rgba(255,255,255,.75);padding:52px 0 30px;font-size:14.5px}
.ftr__in{display:grid;gap:30px}
.ftr__brand{display:flex;align-items:center;gap:14px}
.ftr__brand img{width:46px;height:46px}
.ftr__brand p{margin:0;line-height:1.45}
.ftr__brand b{color:#fff;font-family:var(--serif);font-size:17px}
.ftr h4{font-size:13px;letter-spacing:.13em;text-transform:uppercase;color:var(--gold);margin:0 0 10px;font-family:var(--sans);font-weight:600}
.ftr a{color:rgba(255,255,255,.8);text-decoration:none;border-bottom:1px solid rgba(240,183,96,.4)}
.ftr a:hover{color:var(--gold)}
.ftr__col p{margin:0;line-height:1.75}

.ftr__legal{margin-top:38px;padding-top:22px;border-top:1px solid rgba(255,255,255,.12)}
.disclaimer{font-size:12.5px;color:rgba(255,255,255,.5);line-height:1.6;max-width:70ch;margin:0 0 12px}
.ftr__copy{margin:0;font-size:12.5px;color:rgba(255,255,255,.5)}

/* ── sticky mobile CTA ─────────────────────────────────────── */
.sticky-cta{
  position:fixed;left:0;right:0;bottom:0;z-index:90;
  display:flex;align-items:center;gap:12px;
  padding:11px 16px calc(11px + env(safe-area-inset-bottom));
  background:rgba(56,21,43,.97);backdrop-filter:blur(10px);
  border-top:1px solid rgba(240,183,96,.35);
  transform:translateY(100%);transition:transform .25s ease;
}
.sticky-cta.is-on{transform:translateY(0)}
.sticky-cta__price{color:#fff;font-size:14px;white-space:nowrap}
.sticky-cta__price s{color:rgba(255,255,255,.5);margin-right:4px}
.sticky-cta__price b{font-family:var(--serif);font-size:22px;color:var(--gold)}
.sticky-cta .btn{flex:1;padding:13px 18px}

/* ═══════════════  TABLET  ≥ 700px  ═══════════════ */
@media (min-width:700px){
  .sec{padding:84px 0}
  .hero__in{padding:110px 20px 84px}
  .cards{grid-template-columns:repeat(2,1fr);gap:20px}
  .trust__in{grid-template-columns:repeat(3,1fr);padding:36px var(--pad)}
  .trust__i{text-align:left}
  .hw__in{grid-template-columns:1.15fr .85fr;align-items:center;gap:44px}
  .hw__img img{height:420px}
  .steps{grid-template-columns:repeat(2,1fr)}
  .expert__in{grid-template-columns:.95fr 1.05fr;align-items:center;gap:46px}
  .expert__imgs{grid-template-columns:1.25fr .75fr;align-items:end}
  .expert__img--b{display:block}
  .expert__img--a img{height:430px}
  .expert__img--b img{height:300px}
  .free__in{grid-template-columns:.85fr 1.15fr;align-items:center;gap:44px}
  .free__img img{height:430px}
  .ftr__in{grid-template-columns:1.4fr 1fr 1fr;gap:40px}
  .price__box{padding:40px 38px}
}

/* ═══════════════  DESKTOP  ≥ 1000px  ═══════════════ */
@media (min-width:1000px){
  .sec{padding:104px 0}
  .hdr__nav{display:flex}
  .hdr .btn--sm{display:inline-flex;margin-left:22px}
  .hdr__burger{display:none}
  .mnav{display:none!important}
  /* On a wide screen the photo has room, so Tatiana keeps the left of the
     frame and the copy moves to the right — over the open sky, where it is
     readable without burying her under a dark panel. */
  .hero__in{padding:150px 20px 120px;text-align:left;max-width:var(--wrap);display:flex;flex-direction:column;align-items:flex-end}
  .hero__in > *{max-width:520px;width:100%}
  .hero__sub{margin-left:0;margin-right:0;max-width:none}
  .hero__price{justify-content:flex-start}
  .hero__h1{max-width:14ch}
  .hero__img img{object-position:28% 34%}
  .hero::after{background:linear-gradient(260deg,rgba(56,21,43,.93) 0%,rgba(56,21,43,.78) 38%,rgba(56,21,43,.34) 66%,rgba(56,21,43,.52) 100%)}
  .cards{grid-template-columns:repeat(3,1fr)}
  .cards--4{grid-template-columns:repeat(4,1fr)}
  .steps{grid-template-columns:repeat(3,1fr)}
  .sticky-cta{justify-content:center;gap:20px}
  .sticky-cta .btn{flex:0 0 auto;min-width:260px}
}

/* ═══════════════════════════════════════════════════════════════
   PROOF · OBJECTIONS · AFTER-PAYMENT
   Added because the page could describe the product but could not
   answer "why should I believe you" — the decisive question for an
   audience that has been trained to expect a scam.
   ═══════════════════════════════════════════════════════════════ */

/* ── pull-quote under the homework claim ───────────────────────── */
.pullquote{
  margin:38px 0 0;padding:24px 22px;border-radius:var(--r);
  background:rgba(240,183,96,.10);border:1px solid rgba(240,183,96,.34);
}
.pullquote blockquote{
  margin:0 0 12px;font-family:var(--serif);font-size:clamp(18px,3.6vw,23px);
  font-style:italic;line-height:1.4;color:#fff;
}
.pullquote blockquote::before{content:"«"}
.pullquote blockquote::after{content:"»"}
.pullquote figcaption{font-size:14px;color:rgba(255,255,255,.68)}
.pullquote figcaption b{color:var(--gold);font-weight:600}

/* ── testimonials ──────────────────────────────────────────────── */
.proof{background:var(--white)}
.tcards{display:grid;gap:18px;margin-top:34px}
.tcard{
  background:var(--milk);border:1px solid var(--line);border-radius:var(--r);
  padding:26px 24px;display:flex;flex-direction:column;
}
.tcard__who{
  font-size:11.5px;font-weight:600;letter-spacing:.13em;text-transform:uppercase;
  color:var(--gold-ink);margin:0 0 14px;
}
.tcard blockquote{
  margin:0 0 18px;font-size:15.5px;line-height:1.66;color:var(--body);flex:1;
}
.tcard__name{margin:0;font-size:14.5px;color:var(--body);padding-top:14px;border-top:1px solid var(--line)}
.tcard__name b{color:var(--ink);font-family:var(--serif);font-size:17px}

.proof__fact{
  margin-top:30px;padding:22px 24px;border-radius:var(--r);
  background:var(--plum);color:#fff;text-align:center;
}
.proof__fact b{display:block;font-size:15.5px;font-weight:600;margin-bottom:6px}
.proof__fact span{color:var(--gold);font-family:var(--serif);font-size:clamp(16px,3.2vw,20px)}
.proof__note{margin:16px 0 0;font-size:12.5px;color:var(--body);text-align:center}

/* ── objections accordion ──────────────────────────────────────── */
.faq{background:var(--milk)}
.faq__in{max-width:760px}
.acc{margin-top:30px;display:grid;gap:10px}
.acc__i{
  background:#fff;border:1px solid var(--line);border-radius:12px;
  overflow:hidden;transition:border-color .2s ease;
}
.acc__i[open]{border-color:rgba(240,183,96,.6)}
.acc__i summary{
  cursor:pointer;list-style:none;padding:18px 52px 18px 20px;position:relative;
  font-weight:600;font-size:16px;color:var(--ink);line-height:1.4;
}
.acc__i summary::-webkit-details-marker{display:none}
.acc__i summary::after{
  content:"";position:absolute;right:22px;top:50%;width:9px;height:9px;
  border-right:2px solid var(--gold-d);border-bottom:2px solid var(--gold-d);
  transform:translateY(-70%) rotate(45deg);transition:transform .2s ease;
}
.acc__i[open] summary::after{transform:translateY(-30%) rotate(-135deg)}
.acc__i summary:hover{color:var(--plum)}
.acc__b{padding:0 20px 20px}
.acc__b p{margin:0;font-size:15.5px;line-height:1.66}

/* ── what happens after you pay ────────────────────────────────── */
.after{
  counter-reset:a;display:grid;gap:12px;margin:30px 0 0;text-align:left;
}
.after li{
  counter-increment:a;position:relative;padding:14px 18px 14px 54px;
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);
  border-radius:12px;color:rgba(255,255,255,.84);font-size:15px;
}
.after li::before{
  content:counter(a);position:absolute;left:0;top:50%;transform:translateY(-50%);
  width:34px;text-align:center;font-family:var(--serif);font-size:17px;
  color:var(--gold);font-weight:700;margin-left:10px;
}
.after b{color:#fff;font-weight:600}

.price__cap{
  margin:24px auto 0;max-width:52ch;font-size:13.5px;line-height:1.6;
  color:rgba(255,255,255,.6);
}

@media (min-width:700px){
  .tcards{grid-template-columns:repeat(2,1fr);gap:22px}
  .after{grid-template-columns:repeat(2,1fr)}
  .pullquote{padding:30px 34px;margin-top:46px}
}

/* ── real brand logos ──────────────────────────────────────────
   Gold linework cut out of the supplied JPEGs, so one file works on the
   plum ground and the cream ground alike. The supplied Academia lockup is
   stacked (mark over wordmark) and would be illegible at header height, so
   the header pairs the wave mark with the wordmark set in type. */
.hdr__logo img{width:auto;height:34px;background:none;border-radius:0;padding:0}
.hdr__logo-txt b{color:var(--plum);font-size:13.5px;letter-spacing:.15em}
.hdr__logo-txt i{color:var(--gold-ink);font-size:10.5px;letter-spacing:.22em}
.ftr__brand img{width:auto;height:64px}

/* Raleway sits a little smaller than Inter at the same px size. */
body{font-size:16.5px}
.btn{letter-spacing:.01em}

/* ── bonus video lessons ───────────────────────────────────────
   Named lessons with real running times. Concrete beats "и многое другое". */
.bonus{background:var(--cream)}
.lessons{display:grid;gap:14px;margin-top:32px}
.lesson{
  position:relative;background:var(--plum);color:#fff;border-radius:var(--r);
  padding:22px 20px 20px;overflow:hidden;
}
.lesson::after{
  content:"";position:absolute;right:-40px;top:-40px;width:120px;height:120px;
  border-radius:50%;background:var(--sunset);opacity:.28;
}
.lesson__min{
  position:absolute;top:18px;right:18px;z-index:1;
  font-size:11.5px;font-weight:600;color:var(--plum);
  background:var(--gold);border-radius:999px;padding:4px 10px;
}
.lesson__n{
  display:block;font-size:11px;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;color:var(--gold);margin-bottom:8px;
}
.lesson h3{font-size:19px;color:#fff;margin:0 0 6px;position:relative;z-index:1}
.lesson p{margin:0;font-size:14.5px;color:rgba(255,255,255,.78);position:relative;z-index:1}

@media (min-width:700px){ .lessons{grid-template-columns:repeat(2,1fr);gap:18px} }
@media (min-width:1000px){ .lessons{grid-template-columns:repeat(4,1fr)} }

/* ═══════════════════════════════════════════════════════════════
   Details borrowed from pokataeva.com — the reference the client
   said "зацепил". Not a redesign: Tatiana said the page already
   reads right, so only the touches that make it calmer and easier
   to scan are taken. Everything stays in the brandbook palette.
   ═══════════════════════════════════════════════════════════════ */

/* 1. Section labels get flanking rules, as on the reference. */
.eyebrow{display:flex;align-items:center;gap:12px;justify-content:flex-start}
.eyebrow::after{
  content:"";height:1px;flex:0 1 60px;
  background:linear-gradient(90deg,currentColor,transparent);opacity:.5;
}
.price .eyebrow,.consult .eyebrow,.proof .eyebrow{justify-content:center}
.price .eyebrow::before,.consult .eyebrow::before,.proof .eyebrow::before{
  content:"";height:1px;flex:0 1 60px;
  background:linear-gradient(270deg,currentColor,transparent);opacity:.5;
}

/* 2. The light grounds get a soft warm wash instead of a flat fill —
      the reference's calm comes mostly from this. Brand colours only. */
.sec--milk,.expert,.faq,.bonus{
  background:
    radial-gradient(120% 80% at 12% 0%, rgba(240,183,96,.13) 0%, transparent 58%),
    radial-gradient(90% 70% at 100% 100%, rgba(221,90,95,.09) 0%, transparent 60%),
    var(--cream);
}
.proof{
  background:
    radial-gradient(100% 70% at 88% 0%, rgba(89,50,131,.06) 0%, transparent 60%),
    var(--white);
}

/* 3. Audience cards get the reference's circled numerals, which make
      four blocks scannable instead of four paragraphs to read. */
.cards--4 .card--plain{padding-top:22px}
.cards--4 .card--plain h3{display:flex;align-items:center;gap:12px}
.cards--4 .card--plain h3::before{
  counter-increment:aud;content:counter(aud,decimal-leading-zero);
  flex:0 0 auto;width:34px;height:34px;border-radius:50%;
  display:grid;place-content:center;
  font-family:var(--sans);font-size:12.5px;font-weight:700;
  color:var(--gold-ink);background:rgba(240,183,96,.2);
  border:1px solid rgba(240,183,96,.45);
}
.cards--4{counter-reset:aud}

/* ═══════════════════════════════════════════════════════════════
   POST-RESEARCH REBUILD
   Section order and every block below come from build/landing/02-conversion-research.md.
   Principle: the offer must be complete and payable before the first ask,
   and nothing may surprise the buyer on the other side of the button.
   ═══════════════════════════════════════════════════════════════ */

/* hero additions */
.hero__sub--key{margin-top:-8px;color:#fff}
.hero__sub--key b{color:var(--gold)}
.hero__reassure{margin:14px 0 0;font-size:13.5px;color:rgba(255,255,255,.72);line-height:1.55}
.hero__scroll{
  display:inline-block;margin-top:22px;font-size:14px;color:rgba(255,255,255,.8);
  text-decoration:none;border-bottom:1px solid rgba(240,183,96,.5);padding-bottom:2px;
}
.hero__scroll:hover{color:var(--gold)}

/* identity strip — replaces the old trust bar */
.ident{background:var(--plum);color:#fff;border-top:1px solid rgba(255,255,255,.1)}
.ident__in{display:grid;gap:20px;padding:28px var(--pad);text-align:center}
.ident__i b{display:block;font-family:var(--serif);font-size:19px;color:var(--gold);font-weight:600}
.ident__i span{font-size:13.5px;color:rgba(255,255,255,.74);line-height:1.5}

/* what you get */
.offer__in{max-width:820px}
.getlist{display:grid;gap:12px;margin:30px 0 0}
.getlist li{
  position:relative;padding:15px 18px 15px 50px;background:#fff;
  border:1px solid var(--line);border-radius:12px;font-size:15.5px;line-height:1.55;
}
.getlist li::before{
  content:"";position:absolute;left:20px;top:1.35em;width:13px;height:7px;
  border-left:2px solid var(--gold-ink);border-bottom:2px solid var(--gold-ink);
  transform:rotate(-45deg) translateY(-50%);
}
.getlist li.getlist__key{
  background:var(--plum);border-color:var(--plum);color:#fff;
}
.getlist li.getlist__key b{color:var(--gold)}
.getlist li.getlist__key::before{border-color:var(--gold)}
.getlist li.getlist__key::after{
  content:"только у нас";position:absolute;right:16px;top:-9px;
  font-size:10.5px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;
  color:var(--plum);background:var(--gold);border-radius:999px;padding:3px 10px;
}
.offer__cta{
  margin-top:28px;padding:24px;border-radius:var(--r);background:var(--plum);
  display:grid;gap:16px;justify-items:center;text-align:center;
}
.offer__price{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;justify-content:center}
.offer__once{flex:1 0 100%;font-size:13px;color:rgba(255,255,255,.65)}
.offer__cta .btn{width:100%;max-width:340px}

/* the differentiator */
.review__in{display:grid;gap:30px}
.review__cap{
  margin:24px 0 0;padding:18px 20px;border-radius:12px;
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.16);
  font-size:14.5px;line-height:1.6;color:rgba(255,255,255,.82);
}
.review__cap b{color:#fff}
.review .pullquote{margin-top:0;align-self:start}

/* 7 steps */
.steps7{counter-reset:s7;display:grid;gap:10px;margin-top:30px}
.steps7 li{
  counter-increment:s7;position:relative;padding:14px 18px 14px 58px;
  background:#fff;border:1px solid var(--line);border-radius:12px;
}
.steps7 li::before{
  content:counter(s7);position:absolute;left:16px;top:50%;transform:translateY(-50%);
  width:30px;height:30px;border-radius:50%;display:grid;place-content:center;
  font-family:var(--sans);font-size:13px;font-weight:700;color:var(--gold-ink);
  background:rgba(240,183,96,.2);border:1px solid rgba(240,183,96,.45);
}
.steps7 b{display:block;font-size:16px;color:var(--ink)}
.steps7 span{font-size:14.5px;color:var(--body)}

.lessons-mini{
  margin-top:26px;padding:22px;border-radius:var(--r);
  background:var(--plum);color:#fff;
}
.lessons-mini__t{margin:0 0 14px;font-size:15px;color:rgba(255,255,255,.85)}
.lessons-mini__t b{color:var(--gold)}
.lessons-mini ul{display:grid;gap:8px}
.lessons-mini li{
  display:flex;justify-content:space-between;gap:12px;font-size:14.5px;
  padding-bottom:8px;border-bottom:1px solid rgba(255,255,255,.12);
}
.lessons-mini li:last-child{border-bottom:0;padding-bottom:0}
.lessons-mini i{font-style:normal;color:var(--gold);font-size:13px;white-space:nowrap}

/* honest limits */
.limits{background:var(--white)}
.limits__in{max-width:760px}
.limits__list{display:grid;gap:12px;margin-top:26px}
.limits__list li{
  padding:16px 18px;border-radius:12px;background:var(--cream);
  border-left:3px solid var(--gold);font-size:15.5px;line-height:1.6;
}
.limits__list b{color:var(--ink)}

/* payment block */
.price__once{margin:-10px 0 20px;font-size:13.5px;color:rgba(255,255,255,.68)}
.price__refund{
  margin:16px 0 0;font-size:14px;line-height:1.55;color:var(--gold-lt);
}
.prechk{
  margin-top:26px;padding:22px;border-radius:var(--r);text-align:left;
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.16);
}
.prechk__t{
  margin:0 0 14px;font-size:12px;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;color:var(--gold);
}
.prechk__list{display:grid;gap:9px}
.prechk__list li{
  position:relative;padding-left:18px;font-size:14.5px;line-height:1.55;
  color:rgba(255,255,255,.82);
}
.prechk__list li::before{
  content:"";position:absolute;left:0;top:.62em;width:6px;height:6px;
  border-radius:50%;background:var(--gold);
}
.prechk__list b{color:#fff}
.prechk__help{margin:16px 0 0;font-size:14px;color:rgba(255,255,255,.75)}
.prechk__help a{color:var(--gold)}

/* FAQ additions */
.faq__promoted{
  margin:26px 0 0;padding:18px 20px;border-radius:12px;background:#fff;
  border:1px solid rgba(240,183,96,.45);font-size:15.5px;line-height:1.6;
}
.faq__promoted b{color:var(--ink)}
.faq__toggle{
  margin-top:18px;background:none;border:0;cursor:pointer;padding:6px 0;
  font-family:var(--sans);font-size:14px;font-weight:600;color:var(--gold-ink);
  border-bottom:1px solid rgba(240,183,96,.5);
}
.faq__toggle:hover{color:var(--plum)}
.acc__i summary{scroll-margin-top:80px}
.acc__b a{color:var(--gold-ink);font-weight:600}
.faq__after{margin-top:34px;text-align:center;display:grid;gap:14px;justify-items:center}
.faq__after .btn{width:100%;max-width:340px}
.faq__course{margin:0;font-size:14.5px;color:var(--body)}
.faq__course a{color:var(--gold-ink);font-weight:600}

/* footer gains a documents column */
@media (min-width:700px){
  .ident__in{grid-template-columns:repeat(3,1fr);padding:34px var(--pad)}
  .ident__i{text-align:left}
  .review__in{grid-template-columns:1.25fr .75fr;gap:44px;align-items:start}
  .steps7{grid-template-columns:repeat(2,1fr)}
  .lessons-mini ul{grid-template-columns:repeat(2,1fr);gap:8px 26px}
  .offer__cta{grid-template-columns:auto auto;justify-content:space-between;align-items:center;padding:26px 30px;text-align:left}
  .offer__price{justify-content:flex-start}
  .offer__cta .btn{width:auto}
  .ftr__in{grid-template-columns:1.3fr 1fr 1fr 1fr}
  .prechk{padding:26px 30px}
}
@media (min-width:1000px){
  .steps7{grid-template-columns:repeat(2,1fr)}
  .lessons-mini ul{grid-template-columns:repeat(4,1fr)}
}

/* ═══════════════════════════════════════════════════════════════
   FROM Тур.v3 — the client's own document. Blocks recovered from
   pages 6 and 9, which I had not opened on the first pass.
   ═══════════════════════════════════════════════════════════════ */

/* «А где сейчас находитесь вы?» — their seven first-person lines */
.audience__in{max-width:760px}
.whos{display:grid;gap:10px;margin-top:30px}
.whos li{
  position:relative;padding:16px 52px 16px 20px;background:#fff;
  border:1px solid var(--line);border-radius:12px;font-size:15.5px;line-height:1.5;
  transition:border-color .18s ease,transform .18s ease;
}
.whos li::after{
  content:"";position:absolute;right:20px;top:50%;transform:translateY(-50%);
  width:18px;height:18px;border-radius:50%;border:1.5px solid rgba(240,183,96,.7);
}
.whos li:hover{border-color:rgba(240,183,96,.7);transform:translateX(3px)}

/* the three days */
.days{margin-top:34px;padding:26px 22px;border-radius:var(--r);background:var(--plum);color:#fff}
.days__lead{margin:0 0 16px;font-size:15.5px;line-height:1.6;color:rgba(255,255,255,.84)}
.days__lead b{color:#fff;font-family:var(--serif);font-size:18px;display:block;margin-bottom:8px;line-height:1.35}
.days__flow{
  display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:0 0 20px;
  font-size:14px;color:rgba(255,255,255,.7);
}
.days__flow i{font-style:normal;color:var(--gold)}
.days__flow b{
  color:var(--plum);background:var(--gold);border-radius:999px;
  padding:4px 12px;font-size:13.5px;
}
.days__list{display:grid;gap:12px;counter-reset:none}
.days__list li{
  padding:16px 18px;border-radius:12px;
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);
}
.days__n{
  display:block;font-size:11px;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;color:var(--gold);margin-bottom:6px;
}
.days__list b{display:block;font-family:var(--serif);font-size:18px;color:#fff;margin-bottom:4px}
.days__list span:not(.days__n){font-size:14.5px;color:rgba(255,255,255,.78);line-height:1.55}

/* the bridge to the full course */
.next{background:var(--plum-d);color:#fff}
.next__in{max-width:720px;text-align:center}
.next .h2{color:#fff}
.next .lede{color:rgba(255,255,255,.8);margin-left:auto;margin-right:auto}
.next .eyebrow{justify-content:center;color:var(--gold)}
.next .eyebrow::before{
  content:"";height:1px;flex:0 1 60px;
  background:linear-gradient(270deg,currentColor,transparent);opacity:.5;
}
.next__quote{
  margin:26px auto;max-width:34ch;font-family:var(--serif);font-style:italic;
  font-size:clamp(18px,3.6vw,23px);line-height:1.45;color:var(--gold);
}
.next__btns{display:grid;gap:12px;justify-items:center;margin-top:28px}
.next__btns .btn{width:100%;max-width:340px}
.btn--ghost-light{background:transparent;color:#fff;border-color:rgba(255,255,255,.45)}
.btn--ghost-light:hover{background:rgba(255,255,255,.1);border-color:#fff;color:#fff}

@media (min-width:700px){
  .whos{grid-template-columns:repeat(2,1fr)}
  .days{padding:32px 30px}
  .days__list{grid-template-columns:repeat(3,1fr)}
  .next__btns{grid-template-columns:auto auto;justify-content:center}
  .next__btns .btn{width:auto;min-width:260px}
}

/* ── video (placement per Тур.v3 p02) ──────────────────────────
   Source is 1080x1920 vertical, 5:34, so the frame is capped and
   centred rather than full-bleed. Click-to-play: nothing is gated. */
.video{background:var(--white)}
.video__in{max-width:760px;text-align:center}
.video__in .eyebrow{justify-content:center}
.video__in .eyebrow::before{
  content:"";height:1px;flex:0 1 60px;
  background:linear-gradient(270deg,currentColor,transparent);opacity:.5;
}
.video__in .lede{margin-left:auto;margin-right:auto}
.video__frame{
  margin:30px auto 0;max-width:400px;border-radius:var(--r);overflow:hidden;
  background:var(--plum-d);box-shadow:var(--shadow);
}
.video__el{width:100%;height:auto;display:block;aspect-ratio:9/16;background:var(--plum-d)}
.video__cta{margin-top:26px;display:grid;gap:10px;justify-items:center}
.video__cta .btn{width:100%;max-width:340px}
.video__note{font-size:13.5px;color:var(--body)}

/* ── blocks taken from Тур.v3, the client's own document ─────── */
.video__above{
  margin:0 0 26px;font-size:16px;line-height:1.55;color:var(--body);
  max-width:44ch;margin-left:auto;margin-right:auto;
}
.price__kicker{
  margin:-8px 0 0;font-size:14.5px;color:rgba(255,255,255,.7);
}
.price__badge{
  display:inline-block;margin-bottom:14px;
  font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--plum);background:var(--gold);border-radius:999px;padding:6px 16px;
}
.offer__ready{
  margin:20px 0 0;padding:16px 18px;border-radius:12px;text-align:center;
  background:var(--cream);border:1px solid rgba(240,183,96,.45);
  font-family:var(--serif);font-size:16.5px;line-height:1.5;color:var(--ink);
}
.creed{
  padding:56px 0;text-align:center;
  background:linear-gradient(135deg,var(--violet) 0%,var(--plum) 55%,var(--plum-d) 100%);
}
.creed__t{
  margin:0 auto;max-width:22ch;font-family:var(--serif);font-style:italic;
  font-size:clamp(21px,4.6vw,32px);line-height:1.38;color:#fff;
}
.creed__t i{color:var(--gold);font-style:italic}
.days__after{
  margin:22px 0 0;padding:20px;border-radius:var(--r);text-align:center;
  background:linear-gradient(135deg,var(--violet),var(--plum));
  font-family:var(--serif);font-size:clamp(17px,3.4vw,22px);line-height:1.42;color:#fff;
}
.days__after b{color:var(--gold)}
.expert__lead{font-size:15.5px;line-height:1.65;color:var(--body);margin:0 0 22px}
.expert__name{
  margin:0 0 2px;font-family:var(--serif);font-size:clamp(22px,4.4vw,30px);
  color:var(--ink);font-weight:600;line-height:1.2;
}

/* ═══════════════════════════════════════════════════════════════
   DARK THEME — matching Тур.v3 exactly.
   Colours sampled from the client's own renders, not guessed:
     #230F1B  page base (dominant on 6 of 9 pages)
     #2C1726  card / panel
     #3D1A30  raised panel
     #4A2038  highlight band
     #280E3B  violet, used in the gradient bands
   Gold #F0B760 and the type scale are unchanged.
   ═══════════════════════════════════════════════════════════════ */
:root{
  --bg:#230F1B;
  --panel:#2C1726;
  --panel-2:#3D1A30;
  --band:#4A2038;
  --violet-d:#280E3B;
  --txt:#F4EAE6;
  --txt-mut:rgba(244,234,230,.72);
  --line-d:rgba(255,255,255,.12);
}

body{background:var(--bg);color:var(--txt)}
h1,h2,h3,h4{color:var(--txt)}
.h2,.h2--light{color:var(--txt)}
.lede,.lede--light{color:var(--txt-mut)}
.eyebrow{color:var(--gold)}

/* every previously-light surface becomes a dark one */
.sec--milk,.sec--dark,.expert,.faq,.bonus,.proof,.video,.limits,.offer,.how,.price,.next,.audience{
  background:var(--bg);
}
.sec--dark,.price{background:linear-gradient(180deg,var(--panel) 0%,var(--bg) 100%)}
.expert,.faq{background:linear-gradient(180deg,var(--bg) 0%,#281325 100%)}
.proof{background:var(--bg)}

/* header */
.hdr{background:rgba(35,15,27,.92);border-bottom:1px solid var(--line-d)}
.hdr__nav a{color:var(--txt-mut)}
.hdr__nav a:hover{color:var(--gold)}
.hdr__logo-txt b{color:var(--txt)}
.hdr__logo-txt i{color:var(--gold)}
.hdr__logo img{background:none}
.hdr__burger span{background:var(--gold)}
.mnav{background:var(--panel);border-bottom:1px solid var(--line-d)}
.mnav a:not(.btn){color:var(--txt);border-bottom:1px solid var(--line-d)}

/* cards and panels */
.card,.getlist li,.steps7 li,.whos li,.acc__i,.tcard,.limits__list li{
  background:var(--panel);border-color:var(--line-d);color:var(--txt);
}
.card h3,.steps7 b,.acc__i summary,.tcard__name b,.limits__list b{color:var(--txt)}
.card p,.steps7 span,.acc__b p,.tcard blockquote,.whos li{color:var(--txt-mut)}
.card__n{color:var(--gold);opacity:.55}
.acc__i[open]{border-color:rgba(240,183,96,.5);background:var(--panel-2)}
.acc__i summary:hover{color:var(--gold)}
.acc__i summary::after{border-color:var(--gold)}
.acc__b a{color:var(--gold)}
.tcard__who,.expert__role{color:var(--gold)}
.expert__lead,.expert__name{color:var(--txt)}
.expert__lead{color:var(--txt-mut)}
.facts li,.facts b{color:var(--txt)}
.quote{background:var(--panel);color:var(--txt);border-left-color:var(--gold)}
.whos li::after{border-color:rgba(240,183,96,.6)}
.whos li:hover{border-color:var(--gold)}
.cards--4 .card--plain h3::before{background:rgba(240,183,96,.16);color:var(--gold)}
.steps7 li::before{background:rgba(240,183,96,.16);color:var(--gold)}
.getlist li::before{border-color:var(--gold)}
.getlist li.getlist__key{background:var(--band);border-color:rgba(240,183,96,.5)}
.proof__fact{background:var(--panel-2)}
.proof__note{color:var(--txt-mut)}
.faq__promoted{background:var(--panel);border-color:rgba(240,183,96,.4);color:var(--txt)}
.faq__promoted b{color:var(--txt)}
.faq__toggle{color:var(--gold);border-bottom-color:rgba(240,183,96,.5)}
.faq__toggle:hover{color:var(--gold-lt)}
.faq__course{color:var(--txt-mut)}
.faq__course a{color:var(--gold)}
.offer__ready{background:var(--band);border-color:rgba(240,183,96,.4);color:var(--txt)}
.limits__list li{border-left-color:var(--gold)}
.video__above,.video__note{color:var(--txt-mut)}
.bonus{background:var(--bg)}
.lessons-mini{background:var(--panel-2)}
.days{background:var(--panel-2)}
.ident{background:var(--panel);border-top-color:var(--line-d)}
.ftr{background:#1B0A14}

/* ghost button on a dark ground */
.btn--ghost{color:var(--gold);border-color:rgba(240,183,96,.6);background:transparent}
.btn--ghost:hover{background:var(--gold);color:var(--plum-d);border-color:var(--gold)}

/* the light-ground gradients no longer apply */
.sec--milk,.expert,.faq,.bonus{background-image:none}
.expert,.faq{background:linear-gradient(180deg,var(--bg) 0%,#281325 100%)}

/* ── ПОДАРОК: unlocks at 2:00 (Тур.v3 p03) ────────────────────── */
.gift{
  margin:26px auto 0;max-width:400px;padding:26px 22px;border-radius:20px;text-align:center;
  background:linear-gradient(160deg,var(--band) 0%,var(--panel) 62%,var(--panel) 100%);
  border:1px solid rgba(240,183,96,.28);position:relative;overflow:hidden;
}
.gift::before{
  content:"";position:absolute;right:-50px;top:-50px;width:170px;height:170px;border-radius:50%;
  background:radial-gradient(circle,rgba(240,183,96,.5) 0%,transparent 68%);pointer-events:none;
}
.gift__eyebrow{
  margin:0 0 10px;font-size:11.5px;font-weight:700;letter-spacing:.2em;
  text-transform:uppercase;color:var(--gold);position:relative;
}
.gift__h{font-family:var(--serif);font-size:clamp(21px,4.6vw,27px);color:#fff;margin:0 0 12px;line-height:1.25}
.gift__p{font-size:14.5px;line-height:1.6;color:rgba(255,255,255,.8);margin:0 0 20px}

.gift__grid{
  position:relative;display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:18px;
}
.gift__grid > span:not(.gift__time){
  height:56px;border-radius:10px;background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.08);
}
.gift__lock{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-64%);
  width:52px;height:52px;border-radius:50%;display:grid;place-content:center;
  background:var(--gold);color:var(--plum-d);box-shadow:0 8px 24px rgba(0,0,0,.4);
}
.gift__time{
  position:absolute;left:50%;top:50%;transform:translate(-50%,52%);
  background:rgba(0,0,0,.55);border:1px solid rgba(255,255,255,.16);border-radius:999px;
  padding:5px 14px;font-size:13px;font-weight:600;letter-spacing:.1em;color:#fff;
  font-variant-numeric:tabular-nums;white-space:nowrap;
}
.gift__note{margin:0;font-size:13.5px;line-height:1.5;color:var(--gold-lt)}

/* unlocked */
.gift.is-open{border-color:rgba(240,183,96,.65)}
.gift.is-open .gift__locked{display:none}
.gift__thumb{
  width:148px;margin:0 auto 18px;border-radius:6px;overflow:hidden;line-height:0;
  border:1px solid rgba(240,183,96,.45);box-shadow:0 16px 36px rgba(0,0,0,.5);
}
.gift__thumb img{width:100%;height:auto}
.gift__meta{margin:12px 0 0;font-size:12.5px;color:rgba(255,255,255,.62)}
.gift__open .btn{width:100%;max-width:300px}
.gift__open{animation:giftIn .45s ease both}
@keyframes giftIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.gift__open{animation:none}}

/* attribution line kept light-theme ink after the dark conversion */
.tcard__name{color:var(--txt-mut);border-top-color:var(--line-d)}
.tcard__name b{color:var(--txt)}

/* ═══════════════════════════════════════════════════════════════
   MOTION LAYER
   Applied under taste-skill §11 Redesign-Preserve: levers 1-4 only.
   Nothing here changes copy, colour, order or structure — the client's
   design document is the spec and this only adds behaviour on top.

   Dials: DESIGN_VARIANCE 5 · MOTION_INTENSITY 5 · VISUAL_DENSITY 4.
   Motion is held at 5 rather than higher because the audience screens
   for infobusiness theatrics; every animation below is motivated by
   hierarchy, sequence, or feedback, and none of them loop forever.

   Rules obeyed: transform/opacity only (§6.A), reduced-motion honoured
   (§6.B), no scroll listeners (§5.D — see main.js, IntersectionObserver).
   ═══════════════════════════════════════════════════════════════ */

/* ── scroll reveal: leads the eye down the page in reading order ── */
/* Scoped to .js-reveal, which js/main.js adds only once the IntersectionObserver
   is built. No JS, failed download, or an early throw => no class => the page
   renders in full instead of showing empty dark space. */
.js-reveal [data-reveal]{opacity:0;transform:translate3d(0,22px,0)}
[data-reveal].is-in{
  opacity:1;transform:none;
  transition:opacity .7s cubic-bezier(.16,1,.3,1), transform .7s cubic-bezier(.16,1,.3,1);
}

/* ── stagger: the 7 steps and the offer list arrive in sequence,
      because the sequence is the content ── */
.js-reveal [data-stagger] > *{opacity:0;transform:translate3d(0,14px,0)}
[data-stagger].is-in > *{
  opacity:1;transform:none;
  transition:opacity .55s cubic-bezier(.16,1,.3,1), transform .55s cubic-bezier(.16,1,.3,1);
}
/* The step delay used to be a custom property set from JS. That is an inline
   style, and a strict style-src blocks it - silently, so the list would arrive
   all at once and nothing would look broken enough to report. nth-child needs
   no JS and no CSP exception. The longest staggered list on the page has 7
   items; 10 leaves room to add some. */
[data-stagger].is-in > *:nth-child(1){transition-delay:0ms}
[data-stagger].is-in > *:nth-child(2){transition-delay:70ms}
[data-stagger].is-in > *:nth-child(3){transition-delay:140ms}
[data-stagger].is-in > *:nth-child(4){transition-delay:210ms}
[data-stagger].is-in > *:nth-child(5){transition-delay:280ms}
[data-stagger].is-in > *:nth-child(6){transition-delay:350ms}
[data-stagger].is-in > *:nth-child(7){transition-delay:420ms}
[data-stagger].is-in > *:nth-child(8){transition-delay:490ms}
[data-stagger].is-in > *:nth-child(9){transition-delay:560ms}
[data-stagger].is-in > *:nth-child(n+10){transition-delay:630ms}

/* ── hero: the one entrance that plays on load, top down ── */
.hero__kicker,.hero__h1,.hero__sub,.hero__price,.hero .btn,.hero__reassure,.hero__scroll{
  animation:heroIn .85s cubic-bezier(.16,1,.3,1) both;
}
.hero__h1{animation-delay:.06s}
.hero__sub{animation-delay:.13s}
.hero__sub--key{animation-delay:.19s}
.hero__price{animation-delay:.25s}
.hero .btn{animation-delay:.31s}
.hero__reassure{animation-delay:.37s}
.hero__scroll{animation-delay:.44s}
@keyframes heroIn{from{opacity:0;transform:translate3d(0,18px,0)}to{opacity:1;transform:none}}

/* ── feedback: a button that answers the finger ── */
.btn{will-change:transform}
.btn:active{transform:translateY(1px) scale(.985)}
.btn--gold{position:relative;overflow:hidden}
.btn--gold::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(115deg,transparent 30%,rgba(255,255,255,.42) 50%,transparent 70%);
  transform:translateX(-120%);
}
.btn--gold:hover::after{transform:translateX(120%);transition:transform .75s cubic-bezier(.16,1,.3,1)}

/* ── cards lift slightly, so a tap target reads as a tap target ── */
.card,.getlist li,.steps7 li,.whos li,.tcard,.acc__i{
  transition:transform .28s cubic-bezier(.16,1,.3,1),
             border-color .28s ease,
             background-color .28s ease;
}
.card:hover,.steps7 li:hover,.tcard:hover{transform:translateY(-3px);border-color:rgba(240,183,96,.42)}
.getlist li:hover{transform:translateX(3px);border-color:rgba(240,183,96,.42)}

/* the numbered step marker fills on hover: shows which one you are on */
.steps7 li::before{transition:background-color .28s ease,color .28s ease,transform .28s ease}
.steps7 li:hover::before{background:var(--gold);color:var(--plum-d);transform:translateY(-50%) scale(1.08)}

/* ── the gift lock breathes while it is still locked, and only then.
      This is state, not decoration: it stops the moment it opens. ── */
.gift:not(.is-open) .gift__lock{animation:lockPulse 2.6s ease-in-out infinite}
@keyframes lockPulse{
  0%,100%{transform:translate(-50%,-64%) scale(1)}
  50%{transform:translate(-50%,-64%) scale(1.07)}
}
.gift__time{transition:opacity .3s ease}

/* ── video frame invites the tap ── */
.video__frame{transition:transform .35s cubic-bezier(.16,1,.3,1),box-shadow .35s ease}
.video__frame:hover{transform:translateY(-4px);box-shadow:0 26px 60px rgba(0,0,0,.5)}

/* ── sticky bar slides rather than blinks ── */
.sticky-cta{transition:transform .32s cubic-bezier(.16,1,.3,1)}

/* ── accordion arrow turns; the panel does not jump ── */
.acc__i summary::after{transition:transform .28s cubic-bezier(.16,1,.3,1)}
.acc__i[open]{background:var(--panel-2)}

/* ── typography polish (lever 1): tighter display, calmer measure ── */
.h2{letter-spacing:-.02em}
.hero__h1{letter-spacing:-.028em}
.lede{max-width:62ch}

/* ── §6.B: everything above collapses to static, non-negotiable ── */
@media (prefers-reduced-motion:reduce){
  [data-reveal],[data-stagger] > *{opacity:1!important;transform:none!important;transition:none!important}
  .hero__kicker,.hero__h1,.hero__sub,.hero__price,.hero .btn,.hero__reassure,.hero__scroll{animation:none}
  .gift:not(.is-open) .gift__lock{animation:none}
  .btn--gold::after{display:none}
  .card,.getlist li,.steps7 li,.whos li,.tcard,.acc__i,.video__frame,.sticky-cta{transition:none}
  .card:hover,.steps7 li:hover,.tcard:hover,.getlist li:hover,.video__frame:hover{transform:none}
}

/* ── the catch for someone who read everything and still is not ready ──
   Deliberately placed after the price and the FAQ, never above the buy
   button: it must not compete with the purchase, only catch the miss. */
.keep{background:linear-gradient(180deg,var(--bg) 0%,var(--panel) 100%)}
.keep__in{max-width:640px;text-align:center}
.keep .lede{margin-left:auto;margin-right:auto}
.keep__form{margin-top:26px;text-align:left}
.keep__label{
  display:block;margin-bottom:8px;font-size:13px;font-weight:600;
  letter-spacing:.04em;color:var(--txt);
}
.keep__row{display:grid;gap:12px}
.keep__input{
  width:100%;padding:16px 18px;border-radius:12px;
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.22);
  color:var(--txt);font-family:var(--sans);font-size:16px;
  transition:border-color .2s ease,background-color .2s ease;
}
.keep__input::placeholder{color:rgba(244,234,230,.5)}
.keep__input:focus{outline:none;border-color:var(--gold);background:rgba(255,255,255,.1)}
.keep__consent{margin:14px 0 0;font-size:12.5px;line-height:1.55;color:var(--txt-mut)}
.keep__consent a{color:var(--gold)}
.keep__hp{position:absolute;left:-9999px}
@media (min-width:640px){ .keep__row{grid-template-columns:1fr auto;align-items:stretch} }

/* ══════════════════════════════════════════════════════════════
   ПОДАРОЧНАЯ КОРОБКА — used twice: behind the video gate and in
   the creed band. Pure CSS + SVG, no images, no library.

   Ribbon is genuinely cross-wrapped: band A runs down the front and
   over the crown, band B wraps the other way so it shows as a
   VERTICAL band on the side face. They meet under the bow.

   Opening is staged like a physical event:
     wind-up 0-170ms -> pop 170-260 -> flight to 1.05s
     light 190ms-1.1s -> fallout 200ms-1.4s -> contents from 420ms
   Nothing detaches: the bow is a child of the lid group.

   The per-particle custom properties below are set by nth-child
   rules, never inline — this site runs a strict style-src.
   ══════════════════════════════════════════════════════════════ */

/* The lid and the confetti travel well past the card edge, so the
   gift card can no longer clip its children. Its corner glow is a
   soft radial that fades to transparent, so it survives losing the
   clip once it is pulled back inside the corner. */
.gift{overflow:visible}
.gift::before{right:-16px;top:-16px;width:150px;height:150px}

.gbox{
  -webkit-appearance:none;appearance:none;background:none;border:0;padding:0;
  margin:2px auto 0;cursor:pointer;display:block;width:240px;max-width:100%;
  border-radius:16px;
}
.gbox:focus-visible{outline:2px solid var(--gold);outline-offset:10px}
.gbox__stage{position:relative;display:block;width:100%;aspect-ratio:1/1}
.gbox__art{display:block;width:100%;height:100%;overflow:visible;position:relative;z-index:2}

.gbox__glow{
  position:absolute;left:50%;bottom:12%;width:80%;height:18%;z-index:0;
  transform:translateX(-50%);border-radius:50%;pointer-events:none;
  background:radial-gradient(ellipse at center,rgba(245,201,127,.5) 0%,rgba(245,201,127,.10) 48%,transparent 74%);
  filter:blur(9px);animation:gbFloatGlow 4.2s ease-in-out infinite;
}
/* light escaping from BEHIND the box the instant the lid leaves */
.gbox__rays{
  position:absolute;left:50%;top:44%;width:86%;height:86%;z-index:1;
  transform:translate(-50%,-50%) scale(.15);opacity:0;pointer-events:none;
  background:repeating-conic-gradient(from 0deg,
    rgba(255,243,220,.55) 0deg 4deg, transparent 4deg 26deg);
  -webkit-mask-image:radial-gradient(circle,#000 8%,rgba(0,0,0,.55) 38%,transparent 68%);
  mask-image:radial-gradient(circle,#000 8%,rgba(0,0,0,.55) 38%,transparent 68%);
}
.gbox__flash{
  position:absolute;left:50%;top:46%;width:70%;height:70%;z-index:3;
  transform:translate(-50%,-50%) scale(.25);opacity:0;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle,#FFFDF6 0%,rgba(255,243,220,.75) 32%,transparent 68%);
}
.gbox__column{
  position:absolute;left:50%;top:4%;width:34%;height:48%;z-index:1;
  transform:translateX(-50%) scaleY(.2);opacity:0;pointer-events:none;transform-origin:50% 100%;
  background:linear-gradient(to top,rgba(245,201,127,.5),rgba(245,201,127,.12) 55%,transparent);
  filter:blur(7px);
}
.gbox__float{animation:gbFloat 4.6s ease-in-out infinite;position:relative;z-index:2;display:block}
.gbox__nudge{animation:gbNudge 6.4s ease-in-out infinite;transform-origin:50% 92%;display:block}
.gbox .lid{transform-box:fill-box;transform-origin:50% 100%}
.gbox .body{transform-box:fill-box;transform-origin:50% 100%}

.gbox__conf{position:absolute;left:50%;top:46%;width:0;height:0;z-index:4;pointer-events:none}
.gbox__conf i{
  position:absolute;left:0;top:0;width:9px;height:9px;margin:-4.5px;
  background:var(--gold);border-radius:2px;opacity:0;
}
.gbox__conf i:nth-child(3n){background:#FFF3DC;border-radius:50%;width:7px;height:7px}
.gbox__conf i:nth-child(4n){background:var(--cream);width:6px;height:13px;border-radius:1px}
.gbox__conf i:nth-child(5n){background:#E0A64F;width:11px;height:5px}
.gbox__conf i:nth-child(1){--gx:-104px;--gy:-128px;--gr:380deg;--gd:0ms}
.gbox__conf i:nth-child(2){--gx:92px;--gy:-142px;--gr:-420deg;--gd:18ms}
.gbox__conf i:nth-child(3){--gx:-52px;--gy:-158px;--gr:300deg;--gd:36ms}
.gbox__conf i:nth-child(4){--gx:44px;--gy:-166px;--gr:-340deg;--gd:8ms}
.gbox__conf i:nth-child(5){--gx:-136px;--gy:-92px;--gr:420deg;--gd:52ms}
.gbox__conf i:nth-child(6){--gx:128px;--gy:-104px;--gr:-380deg;--gd:28ms}
.gbox__conf i:nth-child(7){--gx:-18px;--gy:-176px;--gr:260deg;--gd:64ms}
.gbox__conf i:nth-child(8){--gx:16px;--gy:-150px;--gr:-300deg;--gd:44ms}
.gbox__conf i:nth-child(9){--gx:-78px;--gy:-112px;--gr:340deg;--gd:76ms}
.gbox__conf i:nth-child(10){--gx:70px;--gy:-122px;--gr:-360deg;--gd:12ms}
.gbox__conf i:nth-child(11){--gx:-118px;--gy:-144px;--gr:400deg;--gd:88ms}
.gbox__conf i:nth-child(12){--gx:112px;--gy:-160px;--gr:-280deg;--gd:60ms}
.gbox__conf i:nth-child(13){--gx:-34px;--gy:-100px;--gr:320deg;--gd:96ms}
.gbox__conf i:nth-child(14){--gx:34px;--gy:-186px;--gr:-440deg;--gd:72ms}

.gbox__hint{
  display:block;margin-top:8px;font-size:12.5px;line-height:1.4;
  color:var(--gold-lt);transition:opacity .25s ease;
}
.gbox.is-open .gbox__hint{opacity:0}

/* ── the open state ── */
.gbox.is-open .gbox__float{animation:none}
.gbox.is-open .gbox__nudge{animation:gbStagePop .9s cubic-bezier(.16,1,.3,1)}
.gbox.is-open .gbox__glow{animation:gbGlowKick 1.1s cubic-bezier(.16,1,.3,1) forwards}
.gbox.is-open .body{animation:gbBodyPop .95s cubic-bezier(.16,1,.3,1)}
.gbox.is-open .lid{animation:gbLidBlast 1.05s cubic-bezier(.22,.9,.24,1) forwards}
.gbox.is-open .gbox__flash{animation:gbFlash .34s ease-out .17s}
.gbox.is-open .gbox__rays{animation:gbRays 1s cubic-bezier(.16,1,.3,1) .19s}
.gbox.is-open .gbox__column{animation:gbColumn 1.15s cubic-bezier(.16,1,.3,1) .22s}
.gbox.is-open .gbox__conf i{
  animation:gbConfetti 1.25s cubic-bezier(.22,.7,.3,1) both;
  animation-delay:calc(200ms + var(--gd));
}
/* pressed while still locked: a refusal, not a reward */
.gbox.is-shake .gbox__nudge{animation:gbShake .5s ease}

@keyframes gbFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
/* every six seconds something inside moves — this is what makes a finger reach out */
@keyframes gbNudge{
  0%,86%,100%{transform:rotate(0)}
  89%{transform:rotate(-2.4deg)}
  92%{transform:rotate(1.9deg)}
  95%{transform:rotate(-.9deg)}
}
@keyframes gbShake{
  0%,100%{transform:translateX(0)}
  20%{transform:translateX(-7px)}
  40%{transform:translateX(6px)}
  60%{transform:translateX(-4px)}
  80%{transform:translateX(2px)}
}
@keyframes gbFloatGlow{
  0%,100%{opacity:.42;transform:translateX(-50%) scale(1)}
  50%{opacity:.62;transform:translateX(-50%) scale(1.1)}
}
@keyframes gbStagePop{
  0%{transform:scale(1)}18%{transform:scale(.975)}
  32%{transform:scale(1.045)}58%{transform:scale(.995)}100%{transform:scale(1)}
}
/* squash on the wind-up, stretch through the pop, settle */
@keyframes gbBodyPop{
  0%{transform:scale(1,1)}
  18%{transform:scale(1.075,.87)}
  31%{transform:scale(.93,1.13)}
  46%{transform:scale(1.045,.96)}
  64%{transform:scale(.99,1.02)}
  100%{transform:scale(1,1)}
}
@keyframes gbLidBlast{
  0%{transform:translate3d(0,0,0) rotate(0);opacity:1}
  18%{transform:translate3d(0,14px,0) rotate(.5deg);opacity:1}
  31%{transform:translate3d(3px,-40px,0) rotate(-7deg);opacity:1}
  70%{opacity:1}
  100%{transform:translate3d(30px,-205px,0) rotate(-28deg);opacity:0}
}
@keyframes gbGlowKick{
  0%{opacity:.42;transform:translateX(-50%) scale(1)}
  22%{opacity:.95;transform:translateX(-50%) scale(1.35)}
  100%{opacity:.8;transform:translateX(-50%) scale(1.12)}
}
@keyframes gbFlash{
  0%{opacity:0;transform:translate(-50%,-50%) scale(.25)}
  30%{opacity:.95;transform:translate(-50%,-50%) scale(1.05)}
  100%{opacity:0;transform:translate(-50%,-50%) scale(1.5)}
}
@keyframes gbRays{
  0%{opacity:0;transform:translate(-50%,-50%) scale(.15) rotate(0)}
  26%{opacity:.85}
  100%{opacity:0;transform:translate(-50%,-50%) scale(1.5) rotate(32deg)}
}
@keyframes gbColumn{
  0%{opacity:0;transform:translateX(-50%) scaleY(.2)}
  28%{opacity:.85;transform:translateX(-50%) scaleY(1.05)}
  100%{opacity:0;transform:translateX(-50%) scaleY(1.15)}
}
/* up on an arc, then gravity takes it */
@keyframes gbConfetti{
  0%{opacity:0;transform:translate(0,0) scale(.35) rotate(0)}
  10%{opacity:1}
  45%{transform:translate(calc(var(--gx) * .72),var(--gy)) scale(1) rotate(calc(var(--gr) * .55))}
  78%{opacity:1}
  100%{opacity:0;transform:translate(var(--gx),140px) scale(.75) rotate(var(--gr))}
}

/* ── what is inside ── */
.gloot{margin-top:14px;text-align:left}
.gloot[hidden]{display:none}
.gloot__list{list-style:none;margin:0;padding:0;display:grid;gap:9px}
.gloot__i{
  display:flex;align-items:center;gap:12px;padding:11px 13px;border-radius:11px;
  background:rgba(254,240,231,.05);border:1px solid rgba(254,240,231,.10);
  animation:gbRise .66s cubic-bezier(.2,1.3,.35,1) both;
}
.gloot__i--key{background:rgba(245,201,127,.11);border-color:rgba(245,201,127,.3)}
.gloot__i:nth-child(1){animation-delay:.42s}
.gloot__i:nth-child(2){animation-delay:.50s}
.gloot__i:nth-child(3){animation-delay:.58s}
.gloot__i:nth-child(4){animation-delay:.66s}
.gloot__i:nth-child(5){animation-delay:.74s}
.gloot__tag{
  flex:none;width:34px;height:34px;border-radius:9px;display:grid;place-content:center;
  background:rgba(245,201,127,.16);color:var(--gold);
  font-size:12px;font-weight:700;font-variant-numeric:tabular-nums;
}
.gloot__txt{flex:1 1 auto;min-width:0}
.gloot__txt b{display:block;font-size:14px;font-weight:600;line-height:1.3;color:#fff}
.gloot__txt span{display:block;font-size:12px;color:rgba(255,255,255,.7)}
.gloot__i .btn{flex:none}
@keyframes gbRise{0%{opacity:0;transform:translateY(30px) scale(.96)}100%{opacity:1;transform:none}}

/* ── the band instance: taller band, box sits under the line ── */
.creed--gift{padding:60px 0 68px}
.creed--gift .creed__t{margin-bottom:28px}
.creed--gift .gbox{width:270px}
.creed--gift .gloot{max-width:430px;margin-left:auto;margin-right:auto}

@media (prefers-reduced-motion:reduce){
  .gbox__float,.gbox__nudge,.gbox__glow{animation:none!important}
  .gbox.is-open .lid{animation:none;opacity:0}
  .gbox.is-open .body,.gbox.is-open .gbox__nudge,.gbox.is-open .gbox__flash,
  .gbox.is-open .gbox__rays,.gbox.is-open .gbox__column,
  .gbox.is-open .gbox__conf i{animation:none;opacity:0}
  .gbox.is-open .gbox__glow{animation:none;opacity:.8}
  .gloot__i{animation:none;opacity:1;transform:none}
}