/* Линии детства — сиреневая палитра первой версии: белый + лаванда, фиолетовый, малиновый, солнечно-жёлтый; Unbounded для заголовков, Onest для текста. Крупный текст и большие кнопки для телефона */
:root{
  --bg:#FFFFFF; --peach:#F4F1FF; --card:#FFFFFF; --cream:#F8F6FF;
  --ink:#1F1B33; --muted:#4A4566; --soft:#5A5575; --line:#D9D5EE; --line2:#E4E0F5;
  --accent:#5B49D6; --accent-dark:#4636B8; --pink:#C72E8C; --honey:#FFE9A8; --sun:#FFD25E; --rose:#F29AC9; --sage:#9BE07A; --sky:#6FD3F5; --lilac:#B7ABFF;
  --wa:#11793F; --tg:#1769A8; --night:#1F1B33; --night-text:#D9D5EE;
  --display:'Unbounded','Arial Black',system-ui,sans-serif; --body:'Onest',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --r:24px;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
#trackResult{display:block}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--bg);color:var(--ink);font:18px/1.6 var(--body);-webkit-font-smoothing:antialiased}
img,video{max-width:100%;display:block}
a{color:var(--accent-dark)}
h1,h2,h3{text-wrap:balance}
h1,h2{font-family:var(--display);font-weight:700;margin:0;line-height:1.15;letter-spacing:-.01em}
h2{font-size:clamp(26px,3.4vw,38px)}
h3{margin:0;font-size:21px;line-height:1.3}
p{margin:0}
.wrap{max-width:1120px;margin:0 auto;padding-inline:max(20px,env(safe-area-inset-left,0px))}
.band{padding-block:72px}
.band.peach{background:var(--peach)}
.band.night{background:var(--night);color:#fff}
.stack{display:flex;flex-direction:column;gap:12px}
.lead{font-size:19px;color:var(--muted);max-width:700px}
.night .lead{color:var(--night-text)}
.section-head{display:flex;flex-direction:column;gap:14px;margin-bottom:36px}
:focus-visible{outline:3px solid #1AA3D9;outline-offset:3px}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;text-align:center;gap:8px;min-height:60px;padding:10px 30px;border-radius:999px;border:0;background:var(--accent);color:#fff;font:600 18px/1.2 var(--body);text-decoration:none;cursor:pointer}
.btn:hover{background:var(--accent-dark);color:#fff}
.btn.ghost{background:#fff;color:var(--ink);border:2px solid var(--line)}
.btn.ghost:hover{border-color:var(--accent);color:var(--ink)}
.btn.wa{background:var(--wa)}.btn.tg{background:var(--tg)}
.btn.wa:hover,.btn.tg:hover{filter:brightness(.92);color:#fff}
.btn[disabled]{opacity:.6;cursor:wait}

/* header */
.site-header{background:#fff;border-bottom:1px solid var(--line2);position:sticky;top:0;z-index:20}
.site-header .wrap{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:4px 24px;padding-block:8px}
.logo{font-family:var(--display);font-weight:700;font-size:19px;color:var(--ink);text-decoration:none;padding:8px 0}
.nav{display:flex;flex-wrap:wrap;gap:0 4px}
.nav a{color:var(--ink);text-decoration:none;padding:12px;font-weight:500;font-size:16px}
.nav a:hover{color:var(--accent)}
@media (max-width:720px){.site-header{position:static}.nav a{padding:10px 8px;font-size:15px}}

/* hero */
.hero{display:flex;flex-wrap:wrap;align-items:center;gap:40px;padding-block:56px 72px}
.hero-text{flex:1 1 440px;min-width:0;display:flex;flex-direction:column;gap:24px}
.badge{align-self:flex-start;background:var(--honey);border-radius:999px;padding:8px 18px;font-weight:600;font-size:16px}
.hero h1{font-size:clamp(30px,4.6vw,52px)}
.hero h1 em{color:var(--pink);font-style:normal}
.hero .facts{display:flex;flex-wrap:wrap;gap:8px 24px;color:var(--muted);font-size:16px;font-weight:500}
.hero-media{flex:1 1 360px;min-width:0;display:flex;justify-content:center}
.hero-media .frame{width:100%;max-width:470px;aspect-ratio:4/5;border-radius:32px;overflow:hidden;background:var(--peach);box-shadow:0 24px 60px rgba(31,27,51,.18)}
.frame video,.frame img{width:100%;height:100%;object-fit:cover}
.actions{display:flex;flex-wrap:wrap;gap:12px;align-items:center}

/* media */
.media{border-radius:var(--r);overflow:hidden;background:var(--peach)}
.media.sq{aspect-ratio:1/1}.media.wide{aspect-ratio:16/9}.media.tall{aspect-ratio:3/4}
.media img,.media video{width:100%;height:100%;object-fit:cover}
.caption{font-size:16px;color:var(--soft);margin-top:8px}

/* magic */
.magic-top{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:20px;margin-bottom:28px}
.pair{background:var(--card);border-radius:28px;padding:16px;display:flex;align-items:center;gap:10px}
.pair figure{flex:1 1 0;min-width:0;margin:0;display:flex;flex-direction:column;gap:8px}
.pair figcaption{text-align:center;font-size:16px;font-weight:600;color:var(--muted)}
.pair svg{flex:none}
.steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:20px}
.step{background:var(--card);border-radius:var(--r);padding:28px;display:flex;flex-direction:column;gap:12px}
.num{width:48px;height:48px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-family:var(--display);font-weight:700;font-size:20px;color:var(--ink)}
.step p{color:var(--muted)}
.workshop{margin-top:28px;display:flex;flex-wrap:wrap;gap:24px;align-items:center;background:var(--card);border-radius:28px;padding:16px}
.workshop .media{flex:1 1 420px;min-width:0;aspect-ratio:16/9}
.workshop .txt{flex:1 1 260px;min-width:0;padding:8px 12px;display:flex;flex-direction:column;gap:10px}
.workshop .txt p{color:var(--muted)}

/* materials */
.mats{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:20px}
.mat{background:var(--card);border:2px solid var(--line2);border-radius:var(--r);padding:26px;display:flex;flex-direction:column;gap:12px}
.mat.best{border-color:var(--accent);background:var(--cream)}
.mat .price{font-family:var(--display);font-weight:700;font-size:26px}
.mat p{color:var(--muted)}
.mat .care{font-size:16px;color:var(--soft)}
.sw{width:26px;height:26px;border-radius:50%;flex:none;display:inline-block}
.sw-row{display:flex;align-items:center;gap:12px}
.rainbow{background:conic-gradient(#E2455B 0 25%,#F2B53A 0 50%,#3BA4D9 0 75%,#8A5BD6 0)}
.mat-visuals{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,3fr);gap:20px;margin-top:28px}
@media (max-width:760px){.mat-visuals{grid-template-columns:1fr}}

/* configurator */
.builder{display:flex;flex-wrap:wrap;gap:40px;align-items:flex-start}
.builder-left{flex:1 1 480px;min-width:0;display:flex;flex-direction:column;gap:30px}
.builder-right{flex:1 1 320px;min-width:0;display:flex;flex-direction:column;gap:12px;position:sticky;top:90px}
@media (max-width:760px){.builder-right{position:static;order:-1}}
.q{font-weight:700;font-size:19px}
.opts{display:flex;flex-wrap:wrap;gap:12px;margin-top:14px}
.opt{font:inherit;font-size:18px;cursor:pointer;border:2px solid var(--line);background:var(--card);color:var(--ink);border-radius:18px;padding:14px 18px;min-height:64px;text-align:left;display:flex;align-items:center;gap:14px;flex:1 1 230px}
.opt small{display:block;font-size:16px;color:var(--soft)}
.opt b{font-weight:600}
.opt.small{flex:0 0 auto;min-width:84px;justify-content:center;font-weight:600}
.opt[aria-pressed="true"]{border-color:var(--accent);background:#F1EEFF;box-shadow:0 0 0 3px rgba(91,73,214,.18)}
.total{background:var(--card);border-radius:var(--r);padding:26px;display:flex;flex-direction:column;gap:12px}
.line{display:flex;justify-content:space-between;gap:12px;font-variant-numeric:tabular-nums}
.grand{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:8px;border-top:1px solid var(--line2);padding-top:14px}
.grand b{font-family:var(--display);font-weight:700;font-size:36px;line-height:1;font-variant-numeric:tabular-nums}
.muted{color:var(--muted)}.small{font-size:16px}

/* forms */
.form{background:var(--card);border-radius:28px;padding:30px;display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:18px}
.form .full{grid-column:1/-1}
.field{display:flex;flex-direction:column;gap:8px;font-size:17px;font-weight:600}
.field span.hint{font-size:15px;color:var(--soft);font-weight:400}
input,select,textarea{font:inherit;font-size:18px;color:var(--ink);background:#fff;border:2px solid var(--line);border-radius:16px;padding:14px 16px;min-height:60px;width:100%}
input:focus,textarea:focus{border-color:var(--accent);outline:none;box-shadow:0 0 0 3px rgba(91,73,214,.18)}
textarea{min-height:110px;resize:vertical}
input[type=file]{padding:14px;background:var(--cream);font-size:16px}
.check{display:flex;gap:12px;align-items:flex-start;font-size:16px;color:var(--muted)}
.check input{width:26px;height:26px;min-height:0;flex:none;margin-top:1px;accent-color:var(--accent)}
.hp{position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden}
.msg{border-radius:16px;padding:14px 18px;font-weight:500}
.msg.ok{background:#DFF5D3}
.msg.err{background:#FDE0EC}
.success{background:var(--card);border-radius:28px;padding:30px;display:flex;flex-direction:column;gap:14px;border:2px solid #9BE07A}
.success .code{font-family:var(--display);font-size:34px;font-weight:700;user-select:all}
.alt{display:flex;flex-wrap:wrap;gap:12px}
.alt .btn{flex:1 1 240px}
.or{display:flex;align-items:center;gap:14px;color:var(--soft);font-weight:600;margin:6px 0}
.or::before,.or::after{content:"";flex:1;height:1px;background:var(--line)}

/* gallery */
.gallery{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px}
.feature{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:24px;align-items:center;margin-bottom:24px}
@media (max-width:760px){.feature{grid-template-columns:1fr}}

/* box */
.box{display:flex;flex-wrap:wrap;gap:40px;align-items:center}
.box-text{flex:1 1 360px;min-width:0;display:flex;flex-direction:column;gap:18px}
.box-media{flex:1 1 460px;min-width:0;display:flex;flex-direction:column;gap:12px}
.box-photos{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.box-photos .media{aspect-ratio:9/16;border-radius:18px}
ul.ticks{margin:0;padding-left:22px;display:flex;flex-direction:column;gap:8px}

/* delivery */
.timeline{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:16px}
.tl{border:1px solid #4A4570;border-radius:var(--r);padding:26px;display:flex;flex-direction:column;gap:6px}
.tl .k{font-weight:600;font-size:14px;letter-spacing:.06em}
.tl .v{font-family:var(--display);font-weight:700;font-size:26px}
.tl p{color:var(--night-text);font-size:16px}
.deadline{margin-top:24px;background:#fff;color:var(--ink);border-radius:var(--r);padding:28px;display:flex;flex-wrap:wrap;gap:20px 32px;align-items:center;justify-content:space-between}
.deadline b{font-family:var(--display);font-size:28px;font-weight:700}
.deadline .note{background:var(--honey);border-radius:16px;padding:16px 20px;font-weight:600;max-width:380px}

/* tracking */
.track{display:flex;flex-wrap:wrap;gap:32px;align-items:flex-start}
.track > *{flex:1 1 360px;min-width:0}
.status-steps{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px}
.status-steps li{display:flex;gap:12px;align-items:center;color:var(--soft)}
.status-steps li::before{content:"";width:18px;height:18px;border-radius:50%;border:2px solid var(--line);flex:none}
.status-steps li.done{color:var(--ink)}
.status-steps li.done::before{background:var(--sage);border-color:#6BBF4A}
.status-steps li.now{color:var(--ink);font-weight:700}
.status-steps li.now::before{background:var(--accent);border-color:var(--accent)}

/* faq */
details{border-bottom:1px solid var(--line2);padding:6px 0}
summary{cursor:pointer;font-weight:600;font-size:19px;min-height:60px;display:flex;align-items:center}
details p{margin:0 0 16px;color:var(--muted)}
.faq{display:flex;flex-wrap:wrap;gap:40px;align-items:flex-start}
.faq > div{flex:1 1 420px;min-width:0}

/* footer */
.site-footer{background:var(--night);color:var(--night-text);padding-block:40px;font-size:16px}
.site-footer .wrap{display:flex;flex-wrap:wrap;justify-content:space-between;gap:20px 40px}
.site-footer a{color:#fff}
.site-footer .logo{color:#fff}
.when{display:block;margin-top:4px;font:600 16px/1.4 var(--body);color:var(--accent)}
.line b{white-space:nowrap}

/* cartoon upsell */
.cartoon-band{background:linear-gradient(160deg,#2A2160 0%,#4B3BC4 55%,#C72E8C 130%);color:#fff;overflow:hidden}
.cartoon{display:flex;flex-wrap:wrap;gap:48px;align-items:center}
.cartoon-text{flex:1 1 440px;min-width:0;display:flex;flex-direction:column;gap:22px}
.cartoon-text .lead{color:#E9E5FF}
.badge.new{background:var(--sun);color:var(--ink)}
.cartoon-steps{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:16px}
.cartoon-steps li{display:flex;gap:14px;align-items:flex-start}
.cartoon-steps .dot{flex:none;width:40px;height:40px;border-radius:50%;background:rgba(255,255,255,.16);border:2px solid rgba(255,255,255,.5);display:flex;align-items:center;justify-content:center;font:700 17px var(--display)}
.cartoon-steps b{font-size:19px}
.cartoon-steps p{color:#DCD6FF;font-size:17px}
.cartoon-price{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 14px}
.cartoon-price b{font:700 34px var(--display);color:var(--sun)}
.cartoon-price span{color:#DCD6FF;font-size:16px}
.cartoon-text .btn{align-self:flex-start;background:var(--sun);color:var(--ink)}
.cartoon-text .btn:hover{background:#FFE48F;color:var(--ink)}
.cartoon-visual{flex:1 1 380px;min-width:0;position:relative;min-height:440px}
.screen{position:absolute;top:0;left:0;width:86%;background:#15112E;border-radius:26px;padding:12px;box-shadow:0 30px 60px rgba(0,0,0,.35);transform:rotate(-3deg)}
.screen-inner{position:relative;aspect-ratio:16/10;border-radius:16px;overflow:hidden}
.screen-inner img{width:100%;height:100%;object-fit:cover}
.play{position:absolute;inset:0;margin:auto;width:76px;height:76px;border-radius:50%;background:rgba(199,46,140,.92);display:flex;align-items:center;justify-content:center;box-shadow:0 8px 24px rgba(0,0,0,.3)}
.ep{position:absolute;left:12px;top:12px;background:rgba(21,17,46,.8);padding:6px 12px;border-radius:999px;font-size:14px;font-weight:600}
.postcard{position:absolute;right:0;bottom:0;width:58%;max-width:300px;background:#FFFDF6;color:var(--ink);border-radius:18px;padding:20px;box-shadow:0 24px 50px rgba(0,0,0,.35);transform:rotate(4deg);display:flex;flex-direction:column;gap:12px}
.pc-title{font:700 16px/1.3 var(--display)}
.pc-lines{display:flex;flex-direction:column;gap:9px}
.pc-lines span{height:2px;background:#E4DCC8;border-radius:2px}
.pc-bottom{display:flex;align-items:center;gap:12px}
.pc-bottom img{width:84px;height:84px;border-radius:8px}
.pc-bottom b{display:block;font-size:15px}
.pc-bottom small{font-size:13px;color:var(--soft)}
@media (max-width:560px){.cartoon-visual{min-height:360px}.screen{width:92%}.postcard{width:70%}}
.opt .tag{display:inline-block;margin-left:6px;background:var(--sun);color:var(--ink);font-size:12px;font-weight:700;padding:2px 8px;border-radius:999px;vertical-align:2px}
.consent-box{border:2px solid var(--lilac);background:var(--cream);border-radius:20px;padding:20px;display:flex;flex-direction:column;gap:14px;margin:0}
.consent-box legend{font:700 18px var(--display);padding:0 8px}
.form{align-items:start}
#trackForm .field,#orderForm .field{justify-content:flex-start}

/* Акция −20% */
.sale-bar{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:6px 14px;padding:10px 16px;background:linear-gradient(90deg,#C72E8C,#5B49D6);color:#fff;text-decoration:none;font-weight:600;font-size:15px;text-align:center}
.sale-bar:hover{filter:brightness(1.05)}
.sale-bar .sale-pct{background:#FFD25E;color:#2a1f4f;border-radius:999px;padding:2px 10px;font-weight:700}
.sale-bar .sale-timer{font-variant-numeric:tabular-nums;font-weight:700}
.sale-bar[hidden]{display:none}
s.old{color:#9a93b5;font-weight:400;text-decoration-thickness:2px;text-decoration-color:#C72E8C}
.price .new,.opt small .new{color:#C72E8C;font-weight:700}
.total .line.sale{color:#C72E8C}
.total .line.sale .sale-timer{font-variant-numeric:tabular-nums}