/* «Спи, малыш»: ночное небо (метафора сна) + светлые страницы. Токены - только здесь. */
:root{
  --bg:#f3f4fa; --surface:#ffffff; --ink:#18203d; --muted:#4d5373; --line:hsl(230 30% 88%);
  --night:#1b2547; --night-2:#26345f; --on-night:#eef1fb; --on-night-muted:#b9c1dd;
  --moon:#e9b54f; --moon-ink:#8a5c05; --moon-soft:#fbeed0; --mint-soft:#e3f1e6; --ok-ink:#23683a;
  --r:22px;
}
/* сайт всегда светлый, тёмную тему системы не подхватываем (просьба Насти 02.10.2026) */
:root{color-scheme:light}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{font-family:Manrope,-apple-system,"Segoe UI",Roboto,sans-serif;background:var(--bg);color:var(--ink);font-size:17px;line-height:1.55}
a{color:inherit}
img{max-width:100%;display:block}
.wrap{width:min(1360px,100% - 2*clamp(16px,4vw,64px));margin-inline:auto}
@media (min-width:1500px){html{font-size:106%}body{font-size:18px}}
h1,h2,h3{text-wrap:balance}
h2{font-family:Unbounded,Manrope,sans-serif;font-size:clamp(26px,3.6vw,40px);line-height:1.15;letter-spacing:-.01em;margin-bottom:clamp(20px,3vw,32px)}
.section{padding-block:clamp(56px,8vw,112px)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:52px;padding:14px 26px;border-radius:16px;font-weight:800;font-size:17px;text-decoration:none;transition:transform .2s ease,box-shadow .2s ease}
.btn-primary{background:var(--moon);color:#1b2547;box-shadow:0 10px 28px hsl(40 80% 45%/.25)}
.btn-primary:hover{transform:translateY(-2px)}
.btn-ghost{border:1.5px solid currentColor;color:inherit;min-height:44px;padding:10px 18px;font-size:15px}
:focus-visible{outline:3px solid var(--moon);outline-offset:3px;border-radius:8px}

/* шапка */
.top{position:absolute;inset:0 0 auto 0;z-index:5;background:var(--night)}
.top .wrap{display:flex;align-items:center;justify-content:space-between;padding-block:18px}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;font-family:Unbounded,Manrope,sans-serif;font-weight:700;font-size:18px;color:var(--on-night)}
.brand img{width:40px;height:40px;border-radius:50%}
.top .btn-ghost{color:var(--on-night)}
.page .top{position:static;background:var(--night)}

/* hero: ночное небо */
.hero{position:relative;overflow:hidden;background:radial-gradient(1200px 600px at 80% -10%,#33477f 0%,transparent 60%),
  radial-gradient(800px 500px at 10% 110%,#2b2f6b 0%,transparent 60%),var(--night);color:var(--on-night);
  padding-top:clamp(96px,12vw,140px);padding-bottom:clamp(56px,8vw,96px)}
.stars{position:absolute;inset:0;pointer-events:none;opacity:.7;
  background-image:radial-gradient(1.5px 1.5px at 20% 30%,#fff 50%,transparent 51%),radial-gradient(1px 1px at 70% 20%,#fff 50%,transparent 51%),
  radial-gradient(1.2px 1.2px at 40% 70%,#fff 50%,transparent 51%),radial-gradient(1px 1px at 85% 60%,#fff 50%,transparent 51%),
  radial-gradient(1.4px 1.4px at 10% 80%,#fff 50%,transparent 51%),radial-gradient(1px 1px at 55% 45%,#fff 50%,transparent 51%);
  background-size:420px 300px}
.hero .wrap{position:relative;display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(28px,5vw,64px);align-items:center}
.hero h1{font-family:Unbounded,Manrope,sans-serif;font-size:clamp(32px,4.8vw,58px);line-height:1.08;letter-spacing:-.02em;margin-bottom:18px}
.hero h1 em{font-style:normal;color:var(--moon)}
.lead{font-size:clamp(18px,1.6vw,20px);color:var(--on-night-muted);max-width:34em;margin-bottom:30px}
.hero-actions{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.trust{display:flex;flex-wrap:wrap;gap:8px 18px;margin-top:22px;color:var(--on-night-muted);font-size:15px;font-weight:600}
.trust span::before{content:"✓ ";color:var(--moon)}

/* мини-демо бота */
.demo{position:relative;justify-self:center;width:min(360px,100%)}
.moon{position:absolute;right:-28px;top:-44px;width:120px;height:120px;border-radius:50%;box-shadow:0 0 60px hsl(40 90% 60%/.35)}
.chat{background:#d9e8cf;border-radius:30px;padding:14px 12px 12px;border:8px solid #0f1733;box-shadow:0 30px 60px hsl(230 60% 5%/.45)}
.pin{background:#fff;border-radius:14px;padding:8px 12px;font-size:14px;color:#18203d;margin-bottom:10px;border-left:4px solid var(--moon)}
.pin b{display:block;font-size:14px;color:#4d5373;font-weight:700}
.msg{background:#fff;color:#18203d;border-radius:18px 18px 18px 6px;padding:10px 13px;margin:8px 0;font-size:15px;line-height:1.4;max-width:92%}
.msg.me{background:#e6ffd4;margin-left:auto;border-radius:18px 18px 6px 18px;max-width:70%}
.keys{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin-top:10px}
.keys div{background:#fff;border-radius:12px;padding:10px 4px;text-align:center;font-size:14px;font-weight:700;color:#18203d}
.keys .on{outline:3px solid var(--moon)}

/* боли → решения */
.pains{display:grid;gap:12px}
.pain{display:grid;grid-template-columns:1fr 1fr;gap:0;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.pain p{padding:18px 22px}
.pain .q{font-weight:700;color:var(--muted);font-style:italic}
.pain .a{background:var(--mint-soft)}
.pain .a b{color:var(--ok-ink)}

/* что делает бот: бенто */
.bento{display:grid;grid-template-columns:repeat(6,1fr);gap:14px}
.tile{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:24px;grid-column:span 2}
.tile.big{grid-column:span 4;grid-row:span 2;background:linear-gradient(160deg,var(--night) 0%,var(--night-2) 100%);color:var(--on-night);border:0}
.tile.big p{color:var(--on-night-muted)}
.tile h3{font-size:19px;line-height:1.3;margin-bottom:8px}
.tile p{color:var(--muted);font-size:16px}
.ico{font-size:28px;margin-bottom:12px;display:block}
.plan{margin-top:18px;display:grid;gap:8px;max-width:420px}
.plan div{display:flex;justify-content:space-between;background:hsl(230 40% 100%/.08);border-radius:12px;padding:10px 14px;font-size:15px}
.plan b{color:var(--moon)}

/* тарифы */
.prices{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;align-items:start}
.price{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:26px;display:flex;flex-direction:column;gap:10px}
.price.best{border:2px solid var(--moon);box-shadow:0 18px 40px hsl(40 80% 45%/.12)}
.price h3{font-size:18px}
.sum{font-family:Unbounded,Manrope,sans-serif;font-size:40px;line-height:1;font-weight:700}
.sum small{font-family:Manrope,sans-serif;font-size:16px;font-weight:700;color:var(--muted)}
.per{color:var(--muted);font-size:15px}
.price ul{list-style:none;display:grid;gap:8px;margin-top:6px}
.price li{padding-left:26px;position:relative;font-size:16px}
.price li::before{content:"✓";position:absolute;left:0;color:var(--ok-ink);font-weight:800}
.badge{align-self:flex-start;background:var(--moon-soft);color:var(--moon-ink);border-radius:999px;padding:4px 12px;font-size:14px;font-weight:800}
.bonus{background:var(--moon-soft);border-radius:16px;padding:14px 16px;font-size:15px}
.bonus b{display:block;margin-bottom:4px}
.guar{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:18px}
.guar div{border-radius:18px;padding:18px 20px;background:var(--surface);border:1px solid var(--line)}
.guar b{display:block;font-size:18px;margin-bottom:4px}
.guar p{color:var(--muted);font-size:15px}
.guar .strong{background:var(--night);color:var(--on-night);border:0}
.guar .strong p{color:var(--on-night-muted)}
.fine{color:var(--muted);font-size:14px;margin-top:14px}

/* оплата */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;counter-reset:s;list-style:none}
.steps li{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:22px}
.steps li b{display:block;margin-bottom:6px}
.steps li p{color:var(--muted);font-size:15px}

/* финал */
.final{background:var(--night);color:var(--on-night);border-radius:32px;padding:clamp(28px,5vw,56px);display:grid;grid-template-columns:1fr auto;gap:24px;align-items:center}
.final h2{margin-bottom:8px}
.final p{color:var(--on-night-muted)}

/* документы */
.doc{max-width:760px;padding-block:clamp(32px,5vw,56px)}
.doc h1{font-family:Unbounded,Manrope,sans-serif;font-size:clamp(24px,3vw,32px);line-height:1.2;margin-bottom:6px}
.doc h2{font-family:Manrope,sans-serif;font-size:19px;font-weight:800;margin:24px 0 8px;letter-spacing:0}
.doc p,.doc li{margin-bottom:8px}
.doc ul{padding-left:22px}
.doc .meta{color:var(--muted);font-size:15px;margin-bottom:14px}

footer{border-top:1px solid var(--line);padding-block:28px 40px;font-size:15px;color:var(--muted)}
footer nav{display:flex;flex-wrap:wrap;gap:10px 20px;margin-bottom:14px}
footer nav a{font-weight:700;color:var(--ink)}
footer .req{display:grid;gap:2px}

@media (max-width:900px){
  .hero .wrap{grid-template-columns:1fr}
  .demo{margin-top:12px}
  .bento{grid-template-columns:1fr 1fr}
  .tile,.tile.big{grid-column:span 2;grid-row:auto}
  .prices,.guar{grid-template-columns:1fr}
  .steps{grid-template-columns:1fr 1fr}
  .final{grid-template-columns:1fr}
}
@media (max-width:600px){
  body{font-size:16px}
  .pain{grid-template-columns:1fr}
  .pain p{padding:14px 18px}
  .steps{grid-template-columns:1fr}
  .moon{width:84px;height:84px;right:-6px;top:-30px}
  .top .btn-ghost{display:none}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important;scroll-behavior:auto!important}}

/* тарифы: подробный состав и бонусы года */
.price ul.feat li span{display:block;color:var(--muted);font-size:14.5px;line-height:1.4;margin-top:2px}
.price .per s{opacity:.8}
.gifts{background:var(--moon-soft);border-radius:16px;padding:16px;display:grid;gap:12px}
.gifts-h{font-weight:800}
.gifts ul{list-style:none;display:grid;gap:12px}
.gifts li{display:grid;grid-template-columns:1fr auto;column-gap:10px;align-items:start}
.gifts li .g b{display:block;font-size:15.5px;line-height:1.35}
.gifts li .g small{display:block;color:var(--muted);font-size:14px;line-height:1.35;margin-top:2px}
.gifts .was{text-decoration:line-through;color:var(--muted);font-weight:700;font-size:15px;white-space:nowrap}
.gifts .free{grid-column:2;justify-self:end;color:var(--ok-ink);font-weight:800;font-size:14px;white-space:nowrap}
.gifts .value{display:grid;grid-template-columns:1fr auto;gap:4px 10px;border-top:1px dashed var(--moon-ink);padding-top:12px;font-size:15px}
.gifts .value s{color:var(--muted);font-weight:700;text-align:right}
.gifts .value b{font-family:Unbounded,Manrope,sans-serif;font-size:20px;text-align:right;color:var(--moon-ink)}
.prices{grid-template-columns:minmax(0,.9fr) minmax(0,1fr) minmax(0,1.2fr)}
.gifts li .g{grid-row:1/3}
.gifts .was{align-self:end}
@media (max-width:900px){.prices{grid-template-columns:1fr}}

/* тарифы: рисунки, названия, кнопки */
.art{width:132px;height:92px;margin:-6px 0 -4px -10px}
.price h3{font-family:Unbounded,Manrope,sans-serif;font-size:20px;line-height:1.2}
.price h3 span{display:block;font-family:Manrope,sans-serif;font-size:16px;font-weight:700;color:var(--muted);margin-top:2px}
.price .btn{margin-top:auto;width:100%}
.price .btn-soft{margin-top:8px}
.price ul + .btn, .price .bonus + .btn, .price .gifts + .btn{margin-top:10px}
.btn-soft{background:var(--moon-soft);color:var(--moon-ink)}
.btn-soft:hover{transform:translateY(-2px)}
.anchor{max-width:46em;margin:-12px 0 24px;color:var(--muted);font-size:17px}

/* гарантия */
.promise{margin-top:18px;display:grid;grid-template-columns:auto 1fr;gap:20px;align-items:center;background:var(--mint-soft);border-radius:var(--r);padding:22px 26px}
.promise h3{font-size:20px;margin-bottom:4px}
.promise p{color:var(--muted)}
.seal{width:84px;height:84px;border-radius:50%;border:2.5px dashed var(--ok-ink);color:var(--ok-ink);display:grid;place-content:center;text-align:center;font-family:Unbounded,Manrope,sans-serif;font-size:28px;line-height:1}
.seal small{font-family:Manrope,sans-serif;font-size:14px;font-weight:800}
.guar{margin-top:14px}

/* от создательницы */
.founder{display:grid;grid-template-columns:240px 1fr;gap:clamp(20px,4vw,48px);align-items:center;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:clamp(22px,4vw,40px)}
.founder h2{margin-bottom:14px}
.founder p{margin-bottom:10px}
.founder-photo{width:240px;height:240px;border-radius:50%;object-fit:cover}
.founder-photo.empty{display:grid;place-content:center;text-align:center;border:2.5px dashed var(--moon-ink);background:var(--moon-soft);color:var(--moon-ink);font-weight:800}
.eyebrow{color:var(--moon-ink);font-weight:800;font-size:15px;text-transform:uppercase;letter-spacing:.06em}
.sign{font-weight:800;margin-top:6px}

/* отзывы */
.reviews{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.review{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:22px;display:flex;flex-direction:column;gap:14px}
.review blockquote{font-size:17px}
.review figcaption{color:var(--muted);font-size:15px}
.review.empty{border:2px dashed var(--line);background:transparent;color:var(--muted)}

/* частые сомнения */
.faq{display:grid;gap:10px;max-width:820px}
.faq details{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:16px 20px}
.faq summary{font-weight:800;cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:12px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-size:22px;line-height:1;color:var(--moon-ink)}
.faq details[open] summary::after{content:"−"}
.faq details p{margin-top:10px;color:var(--muted)}

@media (max-width:900px){
  .price.best{order:-1}
  .reviews{grid-template-columns:1fr}
  .founder{grid-template-columns:1fr;justify-items:start}
  .founder-photo{width:160px;height:160px}
}
@media (max-width:600px){
  .promise{grid-template-columns:1fr;padding:20px}
  .seal{width:72px;height:72px;font-size:24px}
}

/* год: цена в месяц рядом с ценой; проба 7 дней */
.sum-row{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.permonth{background:var(--moon);color:#1b2547;border-radius:14px;padding:6px 12px;display:grid;line-height:1.15;font-size:14px;font-weight:700;text-align:center}
.permonth b{font-family:Unbounded,Manrope,sans-serif;font-size:19px}
.trial{display:grid;grid-template-columns:auto 1fr;gap:16px;align-items:center;background:var(--night);color:var(--on-night);border-radius:var(--r);padding:18px 24px;margin-bottom:16px}
.trial p{color:var(--on-night-muted);font-size:15.5px}
.trial b{font-size:18px}
.trial-n{width:56px;height:56px;border-radius:50%;background:var(--moon);color:#1b2547;display:grid;place-content:center;font-family:Unbounded,Manrope,sans-serif;font-size:26px;font-weight:700}
.sum-row{flex-wrap:nowrap;gap:10px}
@media (max-width:600px){
  .sum-row .sum{font-size:32px;white-space:nowrap}
  .sum-row .sum small{font-size:14px}
  .permonth{padding:5px 10px;font-size:14px}
  .permonth b{font-size:16px}
}
.founder .wish{font-size:18px;font-weight:600;color:var(--ink);background:var(--moon-soft);border-radius:16px;padding:14px 18px;margin-block:4px 14px}
.founder .sign span{font-weight:600;color:var(--muted);font-size:15px}

/* обратная связь: итоги дня и ночи */
.fb{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:clamp(20px,4vw,48px);align-items:start}
.lead2{font-size:18px;margin-bottom:18px}
.fb-list{list-style:none;display:grid;gap:14px}
.fb-list li{background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:14px 18px}
.fb-list b{display:block;margin-bottom:2px}
.fb-list span{color:var(--muted);font-size:15.5px}
.fb-chats{display:grid;grid-template-columns:1fr;gap:18px;max-width:440px;justify-self:center;width:100%}
.fb-when{font-weight:800;font-size:15px;color:var(--moon-ink);margin-bottom:8px}
.fb-chat .chat{box-shadow:0 14px 30px hsl(230 60% 5%/.15);border-width:6px;border-radius:24px}
.fb-chat .msg{max-width:100%;font-size:14.5px}
@media (max-width:900px){.fb{grid-template-columns:1fr}}
@media (max-width:600px){.fb-chats{grid-template-columns:1fr}}

/* разбор как у консультанта */
.cases{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.case{background:#d9e8cf;border-radius:22px;padding:14px;display:flex;flex-direction:column;gap:10px}
.case figcaption{font-weight:800;font-size:15px;color:#2c4a1f;padding:2px 4px}
.bubble{background:#fff;color:#18203d;border-radius:18px 18px 18px 6px;padding:12px 14px;font-size:15.5px;line-height:1.45}
.bubble b{font-weight:800}
.case-more{background:var(--night);color:var(--on-night)}
.case-more figcaption{color:var(--moon)}
.case-more .more{color:var(--on-night-muted);font-size:16px;padding:0 4px 6px}
@media (max-width:900px){.cases{grid-template-columns:1fr 1fr}}
@media (max-width:600px){.cases{grid-template-columns:1fr}}

/* телефон: без тяжёлых размытых теней - iOS во встроенном браузере Telegram иначе рисует страницу рывками */
@media (max-width:600px){
  .chat,.fb-chat .chat{box-shadow:none}
  .moon{box-shadow:none}
  .price.best{box-shadow:none}
  .btn-primary{box-shadow:none}
  .stars{display:none}
}
