/* ===== Легенда · Дом Котёнка – стили ===== */

:root{
  --cream:      #f5f2ec;
  --cream-deep: #ece5da;
  --white:      #ffffff;
  --ink:        #1b1712;
  --ink-soft:   #55504a;
  --ink-faint:  #8c857b;
  --line:       #ddd4c6;
  --accent:     #c17a4a;
  --accent-soft:#e7c9ac;
  --dark:       #1c1814;
  --dark-2:     #26211a;
  --cream-on-dark: #f2ece1;
  --radius-pill: 300px;
  --radius-card: 22px;
  --serif: "Fraunces", "Georgia", serif;
  --sans: "Open Sans", "Segoe UI", sans-serif;
  --maxw: 1180px;
}

*,*::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:18px;
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}
ul{margin:0;padding:0;list-style:none;}
button{font-family:inherit;}

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

h1,h2,h3,h4{
  font-family:var(--serif);
  font-weight:500;
  margin:0 0 22px;
  letter-spacing:-0.01em;
  color:var(--ink);
}
h1{font-size:clamp(38px,5.4vw,68px);line-height:1.08;font-weight:450;}
.accent-word{
  position:relative;
  display:inline-block;
  font-style:italic;
  color:var(--accent);
}
.accent-underline{
  position:absolute;left:0;bottom:-.06em;
  width:100%;height:.14em;
  color:var(--accent);
  opacity:.5;
  overflow:visible;
}
.accent-underline path{
  stroke-dasharray:220;
  stroke-dashoffset:220;
  animation:drawUnderline 1.1s ease .9s 1 forwards;
}
@keyframes drawUnderline{to{stroke-dashoffset:0;}}
h2{font-size:clamp(30px,3.6vw,46px);line-height:1.14;}
h3{font-size:clamp(22px,2.4vw,28px);line-height:1.3;}
p{margin:0 0 18px;color:var(--ink-soft);}
em{font-style:italic;color:var(--ink);}

.eyebrow{
  font-family:var(--sans);
  font-size:13px;
  font-weight:600;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:var(--accent);
  margin-bottom:18px;
  display:block;
}

.section{padding:104px 0;}
.section--tight{padding:72px 0;}
.section--white{background:var(--white);}
.section--cream{background:var(--cream);}
.section--deep{background:var(--cream-deep);}
.section--dark{background:var(--dark);color:var(--cream-on-dark);}
.section--dark h1,.section--dark h2,.section--dark h3{color:var(--cream-on-dark);}
.section--dark p{color:#c9c1b3;}
.section--dark .eyebrow{color:var(--accent-soft);}

.center{text-align:center;}
.narrow{max-width:760px;margin-left:auto;margin-right:auto;}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding:17px 42px;
  border-radius:var(--radius-pill);
  font-size:14.5px;
  font-weight:600;
  letter-spacing:0.06em;
  text-transform:uppercase;
  border:1.5px solid var(--ink);
  transition:background .25s ease,color .25s ease,transform .2s ease,border-color .25s ease;
  cursor:pointer;
  white-space:nowrap;
}
.btn-primary{background:var(--ink);color:var(--cream);}
.btn-primary:hover{background:var(--accent);border-color:var(--accent);transform:translateY(-2px);}
.btn-outline{background:transparent;color:var(--ink);}
.btn-outline:hover{background:var(--ink);color:var(--cream);transform:translateY(-2px);}
.section--dark .btn-outline{border-color:var(--cream-on-dark);color:var(--cream-on-dark);}
.section--dark .btn-outline:hover{background:var(--cream-on-dark);color:var(--dark);}
.section--dark .btn-primary{background:var(--accent);border-color:var(--accent);color:var(--dark);}
.section--dark .btn-primary:hover{background:var(--cream-on-dark);border-color:var(--cream-on-dark);}

.btn-row{display:flex;gap:18px;flex-wrap:wrap;}

/* ---------- Contact chips (Telegram / MAX / VK) ---------- */
.contact-cta{display:flex;flex-direction:column;gap:14px;}
.contact-cta.center{align-items:center;text-align:center;}
.contact-cta-label{
  font-family:var(--sans);font-size:14.5px;font-weight:700;
  letter-spacing:.02em;color:var(--ink);
}
.contact-buttons{display:flex;flex-wrap:wrap;gap:10px;}
.contact-cta.center .contact-buttons{justify-content:center;}
.btn-chip{
  display:inline-flex;align-items:center;gap:7px;
  padding:11px 18px;border-radius:var(--radius-pill);
  border:1.5px solid var(--ink);color:var(--ink);
  font-size:13px;font-weight:600;white-space:nowrap;
  transition:background .2s ease,color .2s ease,transform .2s ease,border-color .2s ease;
}
.btn-chip svg{width:16px;height:16px;flex:none;}
.btn-chip-mark{font-family:var(--sans);font-weight:800;font-size:12px;}
.btn-chip:hover{background:var(--ink);color:var(--cream);transform:translateY(-1px);}
.section--dark .contact-cta-label{color:var(--cream-on-dark);}
.section--dark .btn-chip{border-color:var(--cream-on-dark);color:var(--cream-on-dark);}
.section--dark .btn-chip:hover{background:var(--cream-on-dark);color:var(--dark);}

/* ---------- Header / Nav ---------- */
.site-header{
  position:sticky;top:0;z-index:100;
  background:rgba(245,242,236,.86);
  backdrop-filter:blur(10px);
  border-bottom:1px solid rgba(27,23,18,.08);
}
.site-header .container{
  display:flex;align-items:center;justify-content:space-between;
  padding-top:18px;padding-bottom:18px;
}
.logo{
  display:flex;align-items:center;gap:9px;
}
.logo-icon{width:24px;height:24px;flex:none;color:var(--accent);}
.logo-text{
  font-family:var(--serif);
  font-size:23px;
  display:flex;flex-direction:column;line-height:1.15;
}
.logo .logo-sub{
  font-family:var(--sans);
  font-size:10.5px;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--ink-faint);
  font-weight:600;
}
.main-nav{display:flex;gap:30px;}
.main-nav a{
  font-size:14px;font-weight:600;color:var(--ink-soft);
  padding:6px 0;border-bottom:1px solid transparent;
  transition:color .2s, border-color .2s;
}
.main-nav a:hover{color:var(--ink);border-color:var(--accent);}
.header-cta{display:flex;align-items:center;gap:18px;}
.header-cta .btn{padding:12px 26px;font-size:13px;}
.nav-toggle{
  display:none;width:40px;height:40px;border-radius:50%;
  border:1.5px solid var(--ink);background:transparent;
  position:relative;
}
.nav-toggle span{
  position:absolute;left:10px;right:10px;height:1.5px;background:var(--ink);
  transition:transform .25s, opacity .25s;
}
.nav-toggle span:nth-child(1){top:15px;}
.nav-toggle span:nth-child(2){top:20px;}
.nav-toggle span:nth-child(3){top:25px;}
.mobile-nav{
  display:none;flex-direction:column;gap:2px;
  background:var(--cream);border-bottom:1px solid var(--line);
  position:fixed;top:var(--header-h,74px);left:0;right:0;bottom:0;
  z-index:99;overflow-y:auto;
}
.mobile-nav a{
  padding:16px 32px;border-top:1px solid var(--line);
  font-size:15px;font-weight:600;
}
body.nav-open{overflow:hidden;}
body.nav-open .mobile-nav{display:flex;}
body.nav-open .nav-toggle span:nth-child(1){transform:translateY(5px) rotate(45deg);}
body.nav-open .nav-toggle span:nth-child(2){opacity:0;}
body.nav-open .nav-toggle span:nth-child(3){transform:translateY(-5px) rotate(-45deg);}

/* ---------- Hero ---------- */
.hero{
  position:relative;
  padding:88px 0 90px;
  overflow:hidden;
}
.hero .container{
  display:grid;
  grid-template-columns:1.15fr .85fr;
  gap:56px;
  align-items:center;
}
.hero-stats{
  margin-top:44px;
  display:flex;flex-wrap:wrap;gap:10px 0;
  font-size:14px;color:var(--ink-soft);
  border-top:1px solid var(--line);
  padding-top:22px;
}
.hero-stats span{
  padding:0 18px;border-right:1px solid var(--line);
}
.hero-stats span:first-child{padding-left:0;}
.hero-stats span:last-child{border-right:none;}
.hero-visual{
  position:relative;
  width:100%;
  max-width:460px;
  margin:0 auto;
  aspect-ratio:4 / 3.9;
}

.px-cutline{
  position:absolute;
  inset:6% 4% 12% 4%;
  background:var(--white);
  border:1.5px dashed rgba(110,86,62,.35);
  border-radius:22px;
  box-shadow:0 20px 40px -26px rgba(27,23,18,.22);
  rotate:-2deg;
  padding:16px;
  display:flex;flex-direction:column;
}
.px-cutline-plan{
  flex:1;display:flex;align-items:center;justify-content:center;
  color:var(--accent);opacity:.7;
}
.px-cutline-plan svg{width:72%;height:auto;}
.px-cutline-label{
  font-size:10px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink-faint);
}
.px-house{
  position:absolute;right:2%;top:0;width:52%;height:auto;
  color:var(--accent);opacity:.92;
}
.px-badge{
  position:absolute;left:2%;top:2%;width:29%;
  background:var(--white);
  border:1px solid var(--line);
  border-radius:12px;
  padding:9px;
  box-shadow:0 16px 30px -22px rgba(27,23,18,.3);
  rotate:-4deg;
  color:var(--accent);
}
.px-badge svg{width:100%;height:auto;}
.px-badge span{
  display:block;margin-top:5px;font-size:8.5px;
  color:var(--ink-faint);text-transform:uppercase;letter-spacing:.06em;
  line-height:1.3;
}
.px-kitten{
  position:absolute;bottom:0;left:0;width:44%;height:auto;
  filter:drop-shadow(0 26px 30px rgba(62,42,30,.22));
  animation:pxFloat 7s ease-in-out infinite;
}
.px-note{
  position:absolute;bottom:4%;right:0;max-width:46%;
  background:rgba(255,255,255,.96);
  border:1px solid var(--line);
  border-radius:14px;
  padding:11px 14px;
  box-shadow:0 16px 30px -22px rgba(27,23,18,.3);
  rotate:-1.5deg;
}
.px-note p{margin:0;font-size:12px;line-height:1.4;color:var(--ink-soft);}

@keyframes pxFloat{
  0%,100%{translate:0 0;}
  50%{translate:0 -10px;}
}

.section-photo{
  display:block;
  width:220px;
  margin:0 auto 32px;
  background:var(--white);
  border-radius:18px;
  padding:14px;
  box-shadow:0 24px 40px -24px rgba(27,23,18,.3);
  transform:rotate(-3deg);
}
.section-photo img{border-radius:8px;display:block;width:100%;height:auto;}
.section-photo.tilt-right{transform:rotate(3deg);}
.hero-deco{position:absolute;color:var(--accent);opacity:.55;}
.hero-deco.d1{top:-10px;left:-40px;width:90px;transform:rotate(-12deg);}
.hero-deco.d2{bottom:-30px;right:-20px;width:70px;transform:rotate(20deg) scaleX(-1);}

/* ---------- Quote ---------- */
.pull-quote{
  font-family:var(--serif);
  font-size:clamp(22px,2.6vw,30px);
  line-height:1.45;
  font-style:italic;
  color:var(--ink);
  border-left:3px solid var(--accent);
  padding:4px 0 4px 28px;
  margin:36px 0;
}
.section--dark .pull-quote{border-color:var(--accent-soft);color:var(--cream-on-dark);}

/* ---------- Feature cards (3 col) ---------- */
.grid-3{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:44px;
  margin-top:52px;
}
.feature-card .icon{
  width:52px;height:52px;color:var(--accent);margin-bottom:20px;
}
.feature-card h3{margin-bottom:12px;}
.feature-card p{margin-bottom:0;}

/* ---------- Dialogue box ---------- */
.dialogue-box{
  background:var(--cream-deep);
  border-radius:var(--radius-card);
  padding:40px 44px;
  margin:40px 0;
  font-family:var(--serif);
  font-size:20px;
  color:var(--ink);
}
.dialogue-box .line{
  display:block;
  padding:5px 0;
  border-bottom:1px dashed var(--line);
}
.dialogue-box .line:last-child{border-bottom:none;}
.dialogue-box .q{color:var(--ink-faint);}

/* ---------- Before / after ---------- */
.swap-list{margin-top:44px;}
.swap-row{
  display:grid;
  grid-template-columns:1fr 44px 1fr;
  align-items:center;
  gap:18px;
  padding:26px 0;
  border-top:1px solid var(--line);
  opacity:0;
  transform:translateX(-18px);
  transition:opacity .6s ease, transform .6s ease;
}
.swap-row:last-child{border-bottom:1px solid var(--line);}
.swap-list.is-visible .swap-row{opacity:1;transform:none;}
.swap-list.is-visible .swap-row:nth-child(1){transition-delay:.05s;}
.swap-list.is-visible .swap-row:nth-child(2){transition-delay:.18s;}
.swap-list.is-visible .swap-row:nth-child(3){transition-delay:.31s;}
.swap-list.is-visible .swap-row:nth-child(4){transition-delay:.44s;}

.swap-old{
  color:var(--ink-faint);font-style:italic;font-size:16.5px;
  position:relative;display:inline-block;
}
.swap-old::before{content:"– ";}
.swap-old::after{
  content:"";position:absolute;left:0;top:52%;width:0;height:1px;
  background:var(--ink-faint);transition:width .45s ease;
}
.swap-row:hover .swap-old::after{width:100%;}
.swap-row:hover .swap-old{opacity:.55;}

.swap-arrow{
  width:44px;height:44px;border-radius:50%;
  border:1.5px solid var(--accent);color:var(--accent);
  display:flex;align-items:center;justify-content:center;
  font-size:18px;justify-self:center;
  transition:transform .3s ease, background .3s ease, color .3s ease, box-shadow .3s ease;
  animation:swapPulse 2.8s ease-in-out infinite;
}
.swap-list.is-visible .swap-row:nth-child(1) .swap-arrow{animation-delay:.05s;}
.swap-list.is-visible .swap-row:nth-child(2) .swap-arrow{animation-delay:.18s;}
.swap-list.is-visible .swap-row:nth-child(3) .swap-arrow{animation-delay:.31s;}
.swap-list.is-visible .swap-row:nth-child(4) .swap-arrow{animation-delay:.44s;}
.swap-row:hover .swap-arrow{
  background:var(--accent);color:var(--white);
  transform:translateX(4px) scale(1.08);
  animation-play-state:paused;
}
@keyframes swapPulse{
  0%, 100%{box-shadow:0 0 0 0 rgba(193,122,74,.28);}
  50%{box-shadow:0 0 0 7px rgba(193,122,74,0);}
}

.swap-new{
  font-family:var(--serif);font-size:19px;color:var(--ink);
  transition:color .3s ease, transform .3s ease;
}
.swap-row:hover .swap-new{color:var(--accent);transform:translateX(4px);}

/* ---------- Numbered opora list ---------- */
.opora-list{margin-top:20px;}
.opora-item{
  display:grid;
  grid-template-columns:110px 1fr;
  gap:30px;
  padding:38px 0;
  border-top:1px solid var(--line);
  opacity:0;
  transform:translateY(26px);
  transition:opacity .6s ease, transform .6s ease;
}
.opora-item:last-child{border-bottom:1px solid var(--line);}
.opora-list.is-visible .opora-item{opacity:1;transform:none;}
.opora-list.is-visible .opora-item:nth-child(1){transition-delay:.05s;}
.opora-list.is-visible .opora-item:nth-child(2){transition-delay:.2s;}
.opora-list.is-visible .opora-item:nth-child(3){transition-delay:.35s;}
.opora-list.is-visible .opora-item:nth-child(4){transition-delay:.5s;}
.opora-num{
  font-family:var(--serif);
  font-size:44px;
  color:var(--accent-soft);
  line-height:1;
  transition:color .35s ease, transform .35s ease;
}
.opora-item:hover .opora-num{color:var(--accent);transform:translateX(4px);}
.opora-item h3{margin-bottom:10px;}
.opora-item p{margin-bottom:0;}

/* ---------- Product section ---------- */
.product-grid{
  display:grid;
  grid-template-columns:.9fr 1.1fr;
  gap:60px;
  align-items:center;
}
.product-photo-wrap{position:relative;}
.product-photo{
  background:var(--white);
  border-radius:var(--radius-card);
  padding:30px;
  box-shadow:0 30px 60px -30px rgba(27,23,18,.22);
}
.kit-list{margin:30px 0;display:flex;flex-direction:column;gap:14px;}
.kit-list li{
  display:flex;gap:14px;align-items:flex-start;
  font-size:16.5px;color:var(--ink-soft);
}

/* ---------- Peek inside the album ---------- */
.peek-head{
  display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;
  gap:20px;margin-bottom:44px;
}
.peek-head h2{margin-bottom:0;}
.peek-head p{max-width:360px;margin-bottom:0;color:var(--ink-faint);font-size:14.5px;text-align:right;}
.peek-grid{display:grid;grid-template-columns:1fr 1.6fr 1fr;gap:28px;align-items:start;}
.peek-card{margin:0;}
.peek-mock{
  background:var(--cream-deep);
  border:1px solid var(--line);
  border-radius:16px;
  padding:24px;
  aspect-ratio:4/3.3;
  position:relative;
  overflow:hidden;
  display:flex;flex-direction:column;
}
.peek-card figcaption{margin-top:12px;font-size:13px;color:var(--ink-faint);}

/* cover card */
.peek-mock--cover{aspect-ratio:auto;min-height:260px;flex-direction:row;align-items:flex-end;gap:14px;}
.peek-cover-text{display:flex;flex-direction:column;flex:1;min-width:0;}
.peek-mock--cover .eyebrow{font-size:11px;margin-bottom:6px;}
.peek-mock--cover h3{font-size:22px;margin:0 0 8px;}
.peek-mock--cover p{font-size:13px;color:var(--ink-soft);margin-bottom:14px;}
.peek-tags{display:flex;gap:8px;margin-top:auto;flex-wrap:wrap;}
.peek-tags span{
  font-size:11px;font-weight:600;padding:6px 12px;border-radius:999px;
  background:var(--white);border:1px solid var(--line);color:var(--ink-soft);
  white-space:nowrap;
}
.peek-mock-photo{width:38%;flex:none;height:auto;align-self:flex-end;}
.peek-card--cover{position:relative;}
.peek-corner-badge{
  position:absolute;z-index:2;
  background:var(--white);
  border-radius:14px;
  padding:10px 16px;
  box-shadow:0 16px 30px -18px rgba(27,23,18,.4);
  display:flex;flex-direction:column;
  line-height:1.3;
  white-space:nowrap;
}
.peek-corner-badge strong{font-family:var(--serif);font-size:16px;color:var(--ink);font-weight:500;}
.peek-corner-badge small{font-size:10px;text-transform:uppercase;letter-spacing:.08em;color:var(--ink-faint);}
.peek-corner-badge--top{top:-18px;left:-14px;rotate:-4deg;}
.peek-corner-badge--bottom{bottom:-20px;right:-14px;rotate:-2deg;}

/* spread card (wide) */
.peek-mock--spread{
  aspect-ratio:auto;
  gap:0;
}
.peek-spread-house{
  position:absolute;top:18px;right:18px;width:34%;height:auto;
  color:var(--accent);opacity:.55;
}
.peek-mock--spread h3{
  font-family:var(--serif);font-size:19px;font-weight:500;
  margin:0 0 10px;line-height:1.28;max-width:72%;
}
.peek-spread-intro{font-size:13px;color:var(--ink-soft);margin:0 0 16px;max-width:72%;}
.peek-box{background:var(--white);border-radius:10px;padding:12px 14px;margin-bottom:10px;}
.peek-box-label{
  display:block;font-size:9.5px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;
  color:var(--accent);margin-bottom:6px;
}
.peek-box ul{margin:0;padding-left:16px;list-style:disc;font-size:12.5px;color:var(--ink-soft);}
.peek-box ul li{margin-bottom:2px;}
.peek-box--quote p{margin:0 0 6px;font-size:12.5px;color:var(--ink-soft);line-height:1.4;}
.peek-box--quote p:last-child{margin-bottom:0;}
.peek-quote-strong{font-weight:700;color:var(--ink);}
.peek-box--note{
  display:flex;gap:10px;align-items:flex-start;
  background:var(--accent-soft);margin-bottom:0;
}
.peek-box--note svg{width:16px;height:16px;flex:none;color:var(--accent);margin-top:2px;}
.peek-box--note p{margin:0;font-size:11.5px;line-height:1.45;color:var(--ink);}

/* furniture sheet card */
.peek-mock--sheet{align-items:center;justify-content:center;color:var(--ink-soft);background:var(--white);}
.peek-mock--sheet img{width:100%;height:auto;}
.kit-list li svg{flex:none;width:20px;height:20px;color:var(--accent);margin-top:3px;}

/* ---------- Pricing card ---------- */
.narrow-wide{max-width:1000px;margin-left:auto;margin-right:auto;}
.pricing-card{
  background:var(--white);
  border:1px solid var(--line);
  border-radius:var(--radius-card);
  padding:48px;
}
.pricing-head{
  padding-bottom:28px;
  border-bottom:1px solid var(--line);
  margin-bottom:32px;
}
.pricing-head p{margin-bottom:0;}
.pricing-body{
  display:grid;
  grid-template-columns:1.4fr 1fr;
  gap:44px;
  align-items:start;
}
.pricing-label{
  font-size:13px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  color:var(--ink-faint);display:block;margin-bottom:16px;
}
.kit-list-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px 32px;
  margin-bottom:0;
}
.bonus-box{
  margin-top:24px;background:var(--cream-deep);border-radius:16px;padding:20px 22px;
}
.pricing-buy{
  background:var(--cream-deep);border-radius:16px;padding:32px;text-align:center;
}
.pricing-buy .price{
  font-family:var(--serif);font-size:44px;color:var(--ink);margin-bottom:4px;
}
.pricing-buy .price-note{font-size:14px;color:var(--ink-faint);margin-bottom:22px;}
.pricing-buy .btn{width:100%;}
.bonus-box .tag{
  display:inline-block;font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  color:var(--accent);margin-bottom:8px;
}
.bonus-box p{margin-bottom:0;font-size:15.5px;color:var(--ink);}
.fine-print{font-size:13px;color:var(--ink-faint);margin:14px 0 0;}
.format-note{
  margin-top:28px;padding-top:24px;border-top:1px solid var(--line);
  font-size:14.5px;color:var(--ink-faint);margin-bottom:0;
}

/* ---------- Telegram demo ---------- */
.telegram-grid{
  display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center;
}
.chat-demo{
  background:var(--white);border:1px solid var(--line);border-radius:var(--radius-card);
  padding:28px;box-shadow:0 30px 60px -30px rgba(27,23,18,.18);
}
.chat-header{
  display:flex;align-items:center;gap:12px;padding-bottom:18px;border-bottom:1px solid var(--line);margin-bottom:18px;
}
.chat-avatar{
  width:40px;height:40px;border-radius:50%;object-fit:cover;flex:none;
}
.chat-header strong{display:block;font-size:15px;}
.chat-header .who{display:block;font-size:12px;color:var(--ink-faint);}
.chat-badge{
  margin-left:auto;font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  color:var(--ink-faint);
}
.chat-body{display:flex;flex-direction:column;gap:12px;}
.bubble{
  padding:12px 16px;border-radius:14px;font-size:15px;line-height:1.5;max-width:88%;
}
.bubble.bot{background:var(--cream-deep);color:var(--ink);border-bottom-left-radius:4px;align-self:flex-start;}
.bubble.user{background:var(--ink);color:var(--cream);border-bottom-right-radius:4px;align-self:flex-end;}

/* ---------- Workshops ---------- */
.workshop-card{
  background:var(--cream-deep);border-radius:var(--radius-card);
  padding:48px;display:grid;grid-template-columns:1.1fr .9fr;gap:48px;align-items:center;
}
.workshop-specs{background:var(--white);border-radius:16px;overflow:hidden;}
.spec-row{
  display:flex;justify-content:space-between;align-items:baseline;gap:24px;
  padding:16px 24px;border-top:1px solid var(--line);font-size:14.5px;white-space:nowrap;
}
.spec-row:first-child{border-top:none;}
.spec-row span{color:var(--ink-faint);flex:none;}
.spec-row strong{font-weight:600;color:var(--ink);text-align:right;white-space:normal;}

/* ---------- Steps ---------- */
.steps{
  counter-reset:step;
  margin-top:50px;
  display:flex;flex-direction:column;
}
.step{
  display:grid;grid-template-columns:60px 1fr;gap:24px;
  padding-bottom:36px;position:relative;
}
.step::before{
  counter-increment:step;content:counter(step);
  font-family:var(--serif);font-size:20px;
  width:44px;height:44px;border-radius:50%;
  border:1.5px solid var(--ink);
  display:flex;align-items:center;justify-content:center;
  background:var(--white);
}
.step:not(:last-child)::after{
  content:"";position:absolute;left:21px;top:44px;bottom:0;
  width:1px;background:var(--line);
}
.step p{margin-bottom:0;color:var(--ink-soft);}

/* ---------- Decision scales widget ---------- */
.scales-widget{
  background:var(--white);
  border:1px solid var(--line);
  border-radius:var(--radius-card);
  padding:48px;
  margin-top:44px;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:48px;
  align-items:start;
}
.scales-visual{text-align:center;}
.scales-visual h3{margin:6px 0 22px;font-size:22px;}
.scales-svg{width:100%;max-width:260px;height:auto;color:var(--ink);margin:0 auto;display:block;}
.scales-beam{
  transform-origin:150px 40px;
  transition:transform .6s cubic-bezier(.34,1.2,.4,1);
}
.scales-beam.tilt-left{transform:rotate(-9deg);}
.scales-beam.tilt-right{transform:rotate(9deg);}
.scales-token{
  color:var(--ink-faint);
  opacity:.5;
  transition:opacity .35s ease, color .35s ease;
}
.scales-token.is-active{color:var(--accent);opacity:1;}
.scales-captions{
  display:flex;justify-content:space-between;
  max-width:220px;margin:8px auto 0;
  font-size:12.5px;color:var(--ink-faint);font-weight:600;
}
.scales-hint{
  margin-top:16px;font-size:14.5px;color:var(--ink-faint);
  min-height:44px;transition:color .2s;
}

.scales-options{display:flex;flex-direction:column;gap:14px;}
.option-card{
  position:relative;
  display:flex;align-items:center;gap:16px;
  background:var(--cream-deep);
  border:1.5px solid transparent;
  border-radius:16px;
  padding:16px 20px;
  cursor:pointer;
  transition:border-color .2s, background .2s, box-shadow .2s;
}
.option-card:hover{border-color:var(--accent-soft);}
.option-card input{position:absolute;opacity:0;width:0;height:0;}
.option-icon{
  width:42px;height:42px;flex:none;border-radius:50%;
  background:var(--white);
  display:flex;align-items:center;justify-content:center;
  color:var(--accent);
}
.option-icon svg{width:22px;height:22px;}
.option-text{flex:1;}
.option-text strong{display:block;font-size:16px;color:var(--ink);margin-bottom:2px;}
.option-text small{font-size:13.5px;color:var(--ink-faint);}
.option-check{
  width:24px;height:24px;border-radius:7px;flex:none;
  border:1.5px solid var(--line);
  display:flex;align-items:center;justify-content:center;
  background:var(--white);
  transition:background .2s, border-color .2s;
}
.option-check svg{width:14px;height:14px;color:var(--white);opacity:0;transition:opacity .15s;}
.option-card.is-checked{
  border-color:var(--ink);background:var(--white);
  box-shadow:0 12px 26px -18px rgba(27,23,18,.3);
}
.option-card.is-checked .option-check{background:var(--ink);border-color:var(--ink);}
.option-card.is-checked .option-check svg{opacity:1;}

.scales-both{
  display:grid;
  grid-template-rows:0fr;
  opacity:0;
  background:var(--cream-deep);
  border-radius:16px;
  transition:grid-template-rows .5s ease, opacity .4s ease, margin-top .5s ease;
}
.scales-both.is-open{
  grid-template-rows:1fr;
  opacity:1;
  margin-top:2px;
}
.scales-both-inner{overflow:hidden;min-height:0;}
.scales-both h4{padding:22px 22px 0;margin-bottom:10px;font-size:19px;}
.scales-both p{padding:0 22px;margin-bottom:18px;}
.scales-both .scales-reveal-btn{margin:0 22px 22px;}

.scales-reveal-btn{
  display:inline-flex;align-items:center;gap:8px;
  background:var(--accent);color:var(--white);
  border:none;border-radius:var(--radius-pill);
  padding:14px 26px;font-size:13.5px;font-weight:600;
  letter-spacing:.02em;cursor:pointer;
  transition:background .2s, transform .2s;
}
.scales-reveal-btn:hover{background:var(--ink);transform:translateY(-1px);}

.scales-reset{
  align-self:flex-start;
  margin-top:2px;
  background:none;border:none;
  font-size:13px;color:var(--ink-faint);
  text-decoration:underline;text-underline-offset:3px;
  cursor:pointer;padding:4px 0;
  transition:color .2s;
}
.scales-reset:hover{color:var(--ink);}

/* ---------- Dialogue reveal ---------- */
.dialogue-reveal{
  display:grid;
  grid-template-rows:0fr;
  opacity:0;
  transition:grid-template-rows .6s ease, opacity .5s ease, margin-top .6s ease;
}
.dialogue-reveal.is-open{
  grid-template-rows:1fr;
  opacity:1;
  margin-top:44px;
}
.dialogue-reveal-grid{
  overflow:hidden;min-height:0;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:48px;
  background:var(--white);
  border:1px solid var(--line);
  border-radius:var(--radius-card);
  padding:48px;
}
.chat-thread{display:flex;flex-direction:column;gap:14px;}
.dlg-line{display:flex;flex-direction:column;max-width:88%;}
.dlg-line.kid{align-self:flex-end;align-items:flex-end;}
.dlg-speaker{
  font-size:11px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;
  color:var(--ink-faint);margin-bottom:6px;
}
.dlg-bubble{
  padding:13px 18px;border-radius:14px;font-size:15.5px;line-height:1.5;color:var(--ink);
}
.dlg-line.mom .dlg-bubble{background:var(--cream-deep);border-bottom-left-radius:4px;}
.dlg-line.kid .dlg-bubble{background:var(--accent-soft);border-bottom-right-radius:4px;}

/* ---------- Benefit checklist ---------- */
.check-list{
  display:flex;flex-direction:column;gap:0;margin-top:44px;
}
.check-list li{
  display:flex;gap:18px;align-items:flex-start;
  padding:22px 0;border-top:1px solid var(--line);
  font-size:17px;color:var(--ink);
}
.check-list li:last-child{border-bottom:1px solid var(--line);}
.check-list svg{flex:none;width:24px;height:24px;color:var(--accent);margin-top:2px;}

/* ---------- Roadmap ---------- */
.roadmap-grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:32px;margin-top:52px;
}
.roadmap-card{
  background:var(--white);
  border-radius:var(--radius-card);
  padding:32px 30px 34px;
  border:1px solid var(--line);
  position:relative;
}
.roadmap-card.is-active{
  border-color:var(--ink);
  box-shadow:0 24px 48px -28px rgba(27,23,18,.3);
}
.roadmap-card .tag{
  display:inline-block;font-size:12px;font-weight:700;
  letter-spacing:.08em;text-transform:uppercase;
  padding:6px 14px;border-radius:var(--radius-pill);
  background:var(--accent);color:var(--white);
  margin-bottom:18px;
}
.roadmap-card.is-soon{opacity:.72;}
.roadmap-card.is-soon .tag{background:var(--ink-faint);}
.roadmap-card img{
  width:96px;height:96px;object-fit:contain;margin-bottom:18px;
  filter:none;
}
.roadmap-card.is-soon img{filter:grayscale(1);}
.roadmap-card h3{margin-bottom:8px;font-size:22px;}
.roadmap-card .age{
  font-size:13px;color:var(--ink-faint);font-weight:600;
  letter-spacing:.03em;margin-bottom:14px;display:block;
}
.roadmap-card p{margin-bottom:0;font-size:15.5px;}

/* ---------- Author ---------- */
.author-grid{
  display:grid;grid-template-columns:.55fr 1fr;gap:60px;align-items:center;
}
.author-avatar{
  width:220px;height:220px;border-radius:50%;
  overflow:hidden;
  margin:0 auto;
  border:6px solid var(--white);
  box-shadow:0 24px 50px -24px rgba(27,23,18,.35);
}
.author-avatar img{width:100%;height:100%;object-fit:cover;}

/* ---------- Final CTA ---------- */
.final-cta{
  position:relative;
  text-align:center;
  padding:120px 0;
  overflow:hidden;
}
.final-cta::before{
  content:"";
  position:absolute;inset:0;
  background-image:
    repeating-linear-gradient(0deg, rgba(255,255,255,.09) 0 1px, transparent 1px 64px),
    repeating-linear-gradient(90deg, rgba(255,255,255,.09) 0 1px, transparent 1px 64px);
  background-position:center;
  -webkit-mask-image:linear-gradient(to bottom, transparent, #000 16%, #000 84%, transparent);
  mask-image:linear-gradient(to bottom, transparent, #000 16%, #000 84%, transparent);
}
.final-cta > .container{position:relative;z-index:1;}
.final-cta-photo{
  width:150px;height:auto;margin:0 auto 28px;
  filter:drop-shadow(0 20px 26px rgba(0,0,0,.45));
}
.final-cta h2{max-width:820px;margin-left:auto;margin-right:auto;}
.final-cta p{max-width:560px;margin-left:auto;margin-right:auto;}
.final-cta .btn-row{justify-content:center;margin-top:34px;}
.final-cta-fine{
  margin:38px auto 0;max-width:480px;
  font-size:14.5px;color:#a39a8c;
}

/* ---------- Footer ---------- */
.site-footer{
  background:var(--dark-2);
  color:#b9b2a5;
  padding:64px 0 32px;
  font-size:14.5px;
}
.footer-grid{
  display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:40px;
  padding-bottom:40px;border-bottom:1px solid rgba(255,255,255,.1);
}
.footer-grid .logo{color:var(--cream-on-dark);margin-bottom:14px;}
.footer-grid .logo .logo-sub{color:#8a8378;}
.footer-col h4{
  font-family:var(--sans);color:var(--cream-on-dark);
  font-size:13px;letter-spacing:.1em;text-transform:uppercase;
  margin-bottom:16px;
}
.footer-col a{display:block;padding:5px 0;color:#b9b2a5;transition:color .2s;}
.footer-col a:hover{color:var(--accent-soft);}
.footer-bottom{
  display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;
  padding-top:26px;font-size:13px;color:#8a8378;
}
.disclaimer{
  max-width:900px;margin:0 auto 40px;text-align:center;
  font-size:13.5px;color:#8a8378;padding-top:16px;
}

/* ---------- Reveal animation ---------- */
.reveal{opacity:0;transform:translateY(24px);transition:opacity .7s ease, transform .7s ease;}
.reveal.is-visible{opacity:1;transform:none;}

/* ---------- Responsive ---------- */
@media (max-width: 980px){
  .main-nav,.header-cta .btn-outline{display:none;}
  .nav-toggle{display:block;}
  .hero .container{grid-template-columns:1fr;}
  .hero-visual{order:-1;max-width:340px;margin:0 auto;}
  .grid-3{grid-template-columns:1fr;gap:36px;}
  .product-grid{grid-template-columns:1fr;}
  .product-photo-wrap{max-width:320px;margin:0 auto;}
  .roadmap-grid{grid-template-columns:1fr;}
  .author-grid{grid-template-columns:1fr;text-align:center;}
  .footer-grid{grid-template-columns:1fr;gap:32px;}
  .swap-row{grid-template-columns:1fr;text-align:left;gap:8px;}
  .swap-arrow{display:none;}
  .telegram-grid{grid-template-columns:1fr;gap:36px;}
  .workshop-card{grid-template-columns:1fr;padding:36px;}
  .pricing-body{grid-template-columns:1fr;}
  .scales-widget{grid-template-columns:1fr;padding:36px;}
  .dialogue-reveal-grid{grid-template-columns:1fr;padding:36px;gap:36px;}
  .peek-grid{grid-template-columns:1fr;}
  .peek-mock{aspect-ratio:auto;min-height:280px;}
  .peek-mock--cover{min-height:auto;}
}
@media (max-width: 600px){
  body{font-size:16.5px;}
  .section{padding:72px 0;}
  .container{padding:0 20px;}
  .btn{padding:15px 30px;font-size:13.5px;}
  .hero{padding:56px 0 60px;}
  .opora-item{grid-template-columns:1fr;gap:12px;}
  .kit-list-grid{grid-template-columns:1fr;}
  .dialogue-box{padding:28px 24px;font-size:17px;}
  .pricing-card{padding:28px;}
  .workshop-card{padding:28px;}
  .spec-row{flex-direction:column;gap:4px;}
  .spec-row strong{text-align:left;}
  .scales-widget{padding:28px;}
  .dialogue-reveal-grid{padding:24px;}
  .dlg-line{max-width:96%;}
}