/* ============================================================
   спАААть! — нежные пастельные тона, уютное «небо»
   ============================================================ */
:root{
    --paper:#FDF6EF;
    --ink:#413B57;
    --ink-soft:#7A7290;
    --accent:#8B78D9;
    --accent-deep:#6C58BE;
    --lav:#C9B8EE;      --lav-soft:#EFE9FB;
    --peach:#FFC9B4;    --peach-soft:#FFEEE5;
    --mint:#B7E2D2;     --mint-soft:#E6F6EF;
    --sky:#BBD9F5;      --sky-soft:#E8F2FC;
    --aqua:#BFEAE8;     --aqua-soft:#E4F6F4;
    --pink:#F7C6DA;     --pink-soft:#FBEAF2;
    --lemon:#FFE9AE;    --lemon-soft:#FFF6DC;
    --shadow:0 10px 30px rgba(93,74,155,.12);
    --radius:24px;
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
[hidden]{display:none!important}
html{scroll-behavior:smooth}
body{
    font-family:'Nunito',system-ui,-apple-system,sans-serif;
    color:var(--ink);line-height:1.55;min-height:100vh;
    background:var(--paper);overflow-x:hidden;padding-bottom:110px;
    -webkit-font-smoothing:antialiased;
}
::selection{background:var(--lav)}
:focus-visible{outline:3px solid var(--accent);outline-offset:3px;border-radius:8px}
h1,h2,h3{line-height:1.2}

/* ---------- Небо: фон, луна, облака, звёзды ---------- */
.sky{
    position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden;
    background:linear-gradient(180deg,#E9F1FD 0%,#F1ECFB 38%,#FBF1EA 72%,#FDF6EF 100%);
}
.moon{
    position:absolute;top:86px;right:6vw;width:108px;height:108px;border-radius:50%;
    background:radial-gradient(circle at 36% 32%,#FFFBEC,#FFE9AE 62%,#FFDD9C);
    box-shadow:0 0 64px 20px rgba(255,226,160,.55);
    animation:breathe 6s ease-in-out infinite;
}
.moon::after{
    content:"";position:absolute;top:-6px;right:-10px;width:86px;height:86px;border-radius:50%;
    background:radial-gradient(circle at 30% 30%,#F1EDFB,#E9EFFB);
}
@keyframes breathe{50%{transform:scale(1.045)}}

.cloud{
    position:absolute;width:170px;height:44px;background:#fff;border-radius:60px;
    filter:drop-shadow(0 8px 14px rgba(140,130,190,.12));
    animation:drift var(--t,90s) linear infinite;animation-delay:var(--dl,0s);opacity:var(--o,.8);
}
.cloud::before,.cloud::after{content:"";position:absolute;background:#fff;border-radius:50%}
.cloud::before{width:70px;height:70px;top:-32px;left:26px}
.cloud::after{width:50px;height:50px;top:-20px;right:30px}
.c1{top:11%;--t:95s; --dl:-20s;--s:1;  --o:.9;scale:var(--s)}
.c2{top:21%;--t:130s;--dl:-70s;--s:.7; --o:.65;scale:var(--s)}
.c3{top:38%;--t:110s;--dl:-45s;--s:.8; --o:.5;scale:var(--s)}
.c4{top:58%;--t:160s;--dl:-110s;--s:1.25;--o:.35;scale:var(--s)}
@keyframes drift{from{transform:translateX(-280px)}to{transform:translateX(calc(100vw + 280px))}}

.star{
    position:absolute;width:6px;height:6px;border-radius:50%;background:#B9A6EC;
    box-shadow:0 0 8px 2px rgba(155,135,223,.45);opacity:.5;
    animation:twinkle var(--d,3s) ease-in-out infinite;animation-delay:var(--td,0s);
}
@keyframes twinkle{50%{opacity:.12;transform:scale(.55)}}

/* ---------- Верхняя панель ---------- */
.top{
    position:relative;z-index:2;display:flex;justify-content:space-between;align-items:center;
    padding:18px clamp(16px,4vw,44px);max-width:1160px;margin:0 auto;
}
.brandmark{
    display:inline-flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink);
    font-family:'Comfortaa',cursive;font-weight:700;font-size:1.12rem;
}
.top-actions{display:flex;gap:8px;align-items:center}
.chip{
    padding:8px 14px;border-radius:999px;border:1px solid rgba(120,105,190,.16);
    background:rgba(255,255,255,.82);font:inherit;font-weight:800;font-size:.8rem;
    color:var(--ink-soft);cursor:default;backdrop-filter:blur(4px);
}
.chip.off{color:#B0708A;background:#FBEAF0}
.chip-cta{cursor:pointer;color:var(--accent-deep);border-color:rgba(139,120,217,.35);transition:.25s}
.chip-cta:hover{background:var(--lav-soft);transform:translateY(-2px)}
.chip-resume{cursor:pointer;color:var(--accent-deep);margin-top:12px;transition:.25s;display:inline-block}
.chip-resume:hover{transform:translateY(-2px);background:var(--lav-soft)}

/* ---------- Шапка-лозунг ---------- */
.hero{position:relative;z-index:1;max-width:1160px;margin:0 auto;padding:clamp(6px,2vw,20px) clamp(16px,4vw,44px) 6px}
.brand{
    font-family:'Comfortaa',cursive;font-weight:700;color:var(--ink);
    font-size:clamp(2.7rem,8vw,5.3rem);letter-spacing:-.02em;position:relative;display:inline-block;
}
.bl{display:inline-block;animation:bob 4.2s ease-in-out infinite;animation-delay:calc(var(--i)*.16s)}
.bl.acc{color:var(--accent)}
@keyframes bob{50%{transform:translateY(-6px)}}
.zzz{position:absolute;top:-14px;margin-left:14px;display:inline-flex;gap:7px;align-items:flex-end}
.zzz b{font-family:'Comfortaa',cursive;color:#9B87DF;font-weight:700;animation:zfloat 4s ease-in-out infinite}
.zzz b:nth-child(1){font-size:.7rem}
.zzz b:nth-child(2){font-size:1rem;animation-delay:.5s}
.zzz b:nth-child(3){font-size:1.3rem;animation-delay:1s}
@keyframes zfloat{0%,100%{transform:translateY(0);opacity:.3}50%{transform:translateY(-9px);opacity:1}}
.h1-sub{
    display:block;font-family:'Nunito',sans-serif;font-weight:800;letter-spacing:.01em;
    font-size:clamp(1rem,2.2vw,1.32rem);color:var(--ink-soft);margin-top:12px;
}
.tagline{max-width:62ch;margin-top:14px;color:var(--ink-soft);font-size:1.02rem}
.facts{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px;list-style:none}
.facts li{
    display:inline-flex;align-items:center;gap:8px;background:#fff;border-radius:999px;
    padding:8px 15px;font-weight:800;font-size:.82rem;box-shadow:0 4px 14px rgba(120,105,190,.10);
}
.facts li::before{content:"";width:9px;height:9px;border-radius:50%;background:var(--accent)}
.facts li:nth-child(2)::before{background:#F79E7E}
.facts li:nth-child(3)::before{background:#6FC4A3}
.facts li:nth-child(4)::before{background:#7FB3E8}
.facts li:nth-child(5)::before{background:#E88BB4}

/* ---------- Пульт: таймер + громкость ---------- */
.deck{position:relative;z-index:1;max-width:1160px;margin:26px auto 8px;padding:0 clamp(16px,4vw,44px)}
.panel{
    display:flex;flex-wrap:wrap;gap:26px;justify-content:space-between;align-items:flex-start;
    background:rgba(255,255,255,.86);border:1px solid rgba(120,105,190,.14);
    border-radius:26px;padding:20px 24px;box-shadow:var(--shadow);backdrop-filter:blur(6px);
}
.deck-label{
    font-size:.74rem;font-weight:900;letter-spacing:.14em;text-transform:uppercase;
    color:var(--ink-soft);margin-bottom:10px;
}
.tchips{display:flex;flex-wrap:wrap;gap:8px}
.tchip{
    border:0;cursor:pointer;font:inherit;font-weight:800;font-size:.86rem;
    padding:9px 15px;border-radius:999px;background:var(--lav-soft);color:var(--ink);
    transition:transform .2s,background .2s,box-shadow .2s;
}
.tchip:hover{transform:translateY(-2px);background:var(--lav)}
.tchip.active{background:var(--accent);color:#fff;box-shadow:0 6px 16px rgba(139,120,217,.4)}
.tchip-off{background:#F1EDE9;color:var(--ink-soft)}
.tchip-off.active{background:var(--ink);color:#fff;box-shadow:0 6px 16px rgba(65,59,87,.35)}
.timer-note{margin-top:10px;font-size:.85rem;font-weight:800;color:var(--accent-deep);min-height:1.3em}
.vol{display:flex;align-items:center;gap:12px}
input[type=range]{
    accent-color:var(--accent);width:180px;height:6px;cursor:pointer;
}

/* ---------- Шумотека ---------- */
.sounds{position:relative;z-index:1;max-width:1160px;margin:28px auto 0;padding:0 clamp(16px,4vw,44px);scroll-margin-top:20px}
.sec-head{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;margin:6px 0 18px}
.sec-head h2{font-family:'Comfortaa',cursive;font-weight:700;font-size:clamp(1.5rem,3.4vw,2.2rem)}
.count{
    background:#fff;border-radius:999px;padding:6px 13px;font-size:.78rem;font-weight:800;
    color:var(--ink-soft);box-shadow:0 3px 10px rgba(120,105,190,.10);
}
.empty{color:var(--ink-soft);font-weight:700;padding:20px 0}

.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(232px,1fr));gap:18px}

/* цветовые темы карточек */
.h-sky  {--huec:#7FB3E8;--huebg:#E4F0FC}
.h-aqua {--huec:#63C6C0;--huebg:#E0F5F3}
.h-mint {--huec:#6FC4A3;--huebg:#E4F6EC}
.h-pink {--huec:#E88BB4;--huebg:#FBE7F1}
.h-peach{--huec:#F79E7E;--huebg:#FFEBE1}
.h-lemon{--huec:#DFB24E;--huebg:#FFF4D8}
.h-lav  {--huec:#9B87DF;--huebg:#EDE7FB}

.card{
    position:relative;display:flex;flex-direction:column;gap:8px;overflow:hidden;
    background:#fff;border-radius:var(--radius);padding:18px 18px 16px;
    border:1.5px solid transparent;box-shadow:0 8px 24px rgba(96,80,160,.09);
    transition:transform .3s cubic-bezier(.2,.9,.3,1.2),box-shadow .3s,border-color .3s;
}
.card::before{content:"";position:absolute;top:0;left:0;right:0;height:6px;background:var(--huec)}
.card:hover{transform:translateY(-6px);box-shadow:0 18px 38px rgba(96,80,160,.16)}
.card.playing{border-color:var(--huec);box-shadow:0 14px 34px rgba(96,80,160,.20)}

.card-top{display:flex;align-items:flex-start;justify-content:space-between}
.num{font-family:'Comfortaa',cursive;font-weight:700;font-size:3rem;line-height:1;color:var(--huec)}
.card.playing .num{animation:breathe 3s ease-in-out infinite}
.card-meta{display:flex;flex-direction:column;align-items:flex-end;gap:8px}
.tagchip{
    font-size:.66rem;font-weight:900;letter-spacing:.08em;text-transform:uppercase;
    padding:5px 10px;border-radius:999px;background:var(--huebg);color:var(--ink);white-space:nowrap;
}
.eq{display:flex;gap:3px;align-items:flex-end;height:18px;opacity:0;transition:opacity .3s;color:var(--huec)}
.eq i{width:4px;height:100%;border-radius:3px;background:currentColor;transform-origin:bottom;transform:scaleY(.25)}
.card.playing .eq{opacity:1}
.card.playing .eq i{animation:eq .9s ease-in-out infinite}
.card.playing .eq i:nth-child(2){animation-delay:.15s}
.card.playing .eq i:nth-child(3){animation-delay:.3s}
@keyframes eq{0%,100%{transform:scaleY(.25)}50%{transform:scaleY(1)}}

.card-title{font-size:1.06rem;font-weight:900;letter-spacing:-.01em}
.card-note{font-size:.85rem;color:var(--ink-soft);flex-grow:1}
.card-foot{display:flex;align-items:center;justify-content:space-between;margin-top:8px}
.dur{font-size:.75rem;font-weight:800;color:var(--ink-soft)}
.play{
    display:inline-flex;align-items:center;gap:8px;border:0;cursor:pointer;font:inherit;
    font-weight:900;font-size:.86rem;color:#fff;background:var(--accent);
    padding:11px 18px;border-radius:999px;box-shadow:0 6px 16px rgba(139,120,217,.35);
    transition:background .2s,transform .2s;
}
.play:hover{background:var(--accent-deep);transform:scale(1.05)}
.play:active{transform:scale(.94)}
.play .ic{width:12px;height:12px}
.ic-stop{display:none}
.card.playing .play{background:var(--ink);box-shadow:0 6px 16px rgba(65,59,87,.35)}
.card.playing .ic-play{display:none}
.card.playing .ic-stop{display:block}

/* ---------- Плавающий плеер ---------- */
.dock{
    position:fixed;left:50%;bottom:calc(16px + env(safe-area-inset-bottom));z-index:50;
    display:flex;align-items:center;gap:14px;max-width:92vw;
    background:#fff;border-radius:999px;padding:10px 18px 10px 10px;
    box-shadow:0 18px 50px rgba(70,55,130,.28);
    transform:translate(-50%,150%);transition:transform .45s cubic-bezier(.2,.9,.3,1.15);
}
.dock.show{transform:translate(-50%,0)}
.dock-stop,.dock-play{
    width:46px;height:46px;flex:0 0 46px;border-radius:50%;border:0;cursor:pointer;
    display:grid;place-items:center;transition:transform .2s;
}
.dock-stop{background:var(--peach-soft);color:#A65B3F}
.dock-stop:hover{transform:scale(1.08) rotate(8deg)}
.dock-play{background:var(--accent);color:#fff}
.dock-play:hover{transform:scale(1.08)}
.dock-play .ic-play2{display:none}
.dock-play:not(.is-playing) .ic-pause{display:none}
.dock-play:not(.is-playing) .ic-play2{display:block}
.dock-info{min-width:0}
.dock-title{font-weight:900;font-size:.95rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:42vw}
.dock-state{font-size:.76rem;font-weight:700;color:var(--ink-soft)}

/* ---------- Почему это работает ---------- */
.why{
    position:relative;z-index:1;max-width:1160px;margin:70px auto 0;
    padding:0 clamp(16px,4vw,44px);display:grid;
    grid-template-columns:minmax(260px,.9fr) 1.4fr;gap:clamp(24px,4vw,56px);scroll-margin-top:20px;
}
.why-left{position:sticky;top:24px;align-self:start}
.why-left h2{font-family:'Comfortaa',cursive;font-weight:700;font-size:clamp(1.5rem,3.4vw,2.2rem);margin-bottom:14px}
.why-left p{color:var(--ink-soft);max-width:34ch}
.points{display:flex;flex-direction:column;gap:16px}
.point{
    display:flex;gap:18px;background:#fff;border-radius:22px;padding:20px 22px;
    box-shadow:var(--shadow);transition:transform .3s;
}
.point:nth-child(odd){transform:rotate(-.4deg)}
.point:nth-child(even){transform:rotate(.35deg)}
.point:hover{transform:rotate(0) translateY(-3px)}
.pnum{font-family:'Comfortaa',cursive;font-weight:700;font-size:2.1rem;line-height:1;min-width:52px}
.point:nth-child(1) .pnum{color:#7FB3E8}
.point:nth-child(2) .pnum{color:#F79E7E}
.point:nth-child(3) .pnum{color:#6FC4A3}
.point:nth-child(4) .pnum{color:#9B87DF}
.point h3{font-size:1.02rem;font-weight:900;margin-bottom:4px}
.point p{font-size:.9rem;color:var(--ink-soft)}

/* ---------- FAQ ---------- */
.faq{position:relative;z-index:1;max-width:860px;margin:70px auto 0;padding:0 clamp(16px,4vw,44px);scroll-margin-top:20px}
.faq h2{font-family:'Comfortaa',cursive;font-weight:700;font-size:clamp(1.5rem,3.4vw,2.2rem);margin-bottom:20px}
.faq details{
    background:#fff;border-radius:18px;margin-bottom:12px;overflow:hidden;
    box-shadow:0 6px 18px rgba(96,80,160,.08);
}
.faq summary{
    cursor:pointer;font-weight:900;padding:18px 52px 18px 20px;position:relative;list-style:none;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
    content:"+";position:absolute;right:20px;top:50%;transform:translateY(-50%);
    font-size:1.5rem;font-weight:700;color:var(--accent);transition:transform .3s;
}
.faq details[open] summary::after{transform:translateY(-50%) rotate(45deg)}
.faq details[open] summary{color:var(--accent-deep)}
.faq .a{padding:0 20px 18px;color:var(--ink-soft);font-size:.92rem}
.faq details[open] .a{animation:faqIn .3s ease}
@keyframes faqIn{from{opacity:0;transform:translateY(-6px)}}

/* ---------- Подвал ---------- */
footer{position:relative;z-index:1;margin-top:80px;padding:44px clamp(16px,4vw,44px) 30px;text-align:center}
.foot-h2{font-family:'Comfortaa',cursive;font-weight:700;font-size:1.15rem;color:var(--ink)}
.tagcloud{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;max-width:820px;margin:18px auto}
.tag{background:rgba(255,255,255,.75);border-radius:999px;padding:6px 13px;font-size:.78rem;font-weight:700;color:var(--ink-soft)}
.foot-copy{font-size:.8rem;color:var(--ink-soft);margin-top:14px}

/* ---------- Тост ---------- */
.toast{
    position:fixed;left:50%;bottom:calc(96px + env(safe-area-inset-bottom));z-index:60;
    transform:translateX(-50%) translateY(10px);opacity:0;transition:.3s;
    background:var(--ink);color:#fff;padding:11px 20px;border-radius:999px;
    font-weight:700;font-size:.86rem;pointer-events:none;max-width:90vw;text-align:center;
}
.toast.show{opacity:1;transform:translateX(-50%)}

/* ---------- Появление при скролле ---------- */
.reveal{opacity:0;transform:translateY(26px)}
.reveal.in{opacity:1;transform:none;transition:opacity .6s ease,transform .6s cubic-bezier(.2,.8,.2,1)}

/* ---------- Адаптив ---------- */
@media (max-width:820px){
    .why{grid-template-columns:1fr}
    .why-left{position:static}
    .moon{width:76px;height:76px;top:70px;right:4vw}
    .moon::after{width:60px;height:60px}
    .dock-title{max-width:34vw}
}
@media (max-width:480px){
    .panel{gap:20px}
    input[type=range]{width:150px}
}

/* ---------- Уважение к настройкам пользователя ---------- */
@media (prefers-reduced-motion:reduce){
    *,*::before,*::after{animation:none!important;transition:none!important}
    .reveal{opacity:1;transform:none}
}