/* =============================================================================
   BY NIIA — СТИЛІ
   Структура й вигляд шаблону. Тексти/ціни/асети — у content.js.
   Лишилася одна тема (green); кольори app.js інжектить із content.js → themes.
   :root нижче дублює зелену тему як запасний варіант (щоб не було спалаху до JS).
   ========================================================================== */

/* --- ШРИФТИ --- */
@font-face{
  font-family:'Lovelace';
  src:url('fonts/Lovelace-Regular.ttf') format('truetype');
  font-weight:400;font-style:normal;font-display:swap;
}
@font-face{
  font-family:'Raleway';
  src:url('fonts/Raleway-VariableFont_wght.ttf') format('truetype');
  font-weight:100 900;font-style:normal;font-display:swap;
}

/* --- ТОКЕНИ --- */
:root{
  /* Типографіка — навмисно стримана, з акцентом на ієрархію й повітря */
  --t-hero:clamp(29px,4.3vw,49px);
  --t-h2:clamp(21px,2.6vw,30px);
  --t-h3:17px;
  --t-body:14.5px;
  --t-small:12.5px;
  --t-eyebrow:10px;
  --lh:1.72;
  --serif:'Lovelace',Georgia,serif;
  --sans:'Raleway','Helvetica Neue',Arial,sans-serif;
  --maxw:1120px;

  /* кольори (green) */
  --bg:#7e9499; --bg-deep:#6b8186; --paper:#f6f1e7; --paper-edge:#efe7d6;
  --ink:#2b3d40; --ink-soft:#56686b; --gold:#c6a86b; --gold-bright:#d8bd84;
  --mist:#9fb1b4; --accent:#3a5052;
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  font-family:var(--sans);color:var(--ink);
  line-height:var(--lh);overflow-x:hidden;
  font-size:var(--t-body);font-weight:300;letter-spacing:.005em;
  background:var(--paper);
}

/* Безперервний м'який фон: світлі секції прозорі й «течуть» по ньому,
   тому жорстких меж між блоками немає. */
/* анкеримося на --paper зверху й знизу, у середині — ледь тепліший тон.
   низький контраст = світлі секції непомітно перетікають одна в одну */
.bg-mist{position:fixed;inset:0;z-index:-2;
  background:linear-gradient(180deg,#f6f1e7 0%,#f3ecdd 50%,#f6f1e7 100%);}
.bg-mist::after{content:"";position:absolute;inset:0;
  background-size:cover;background-position:center;opacity:.05;
  /* mix-blend-mode прибрано: на фіксованому повноекранному шарі він змушував браузер
     перемальовувати весь екран щокадру при скролі (помітні лаги на десктопі). */
  /* background-image (хмара) проставляє app.js */ }

/* приховуємо порожні монтувальні вузли, якщо вони не використані */
#theme-switch[hidden],#theme-switch:empty{display:none}

/* --- ШАПКА --- */
header{position:fixed;top:0;left:0;right:0;z-index:200;display:flex;justify-content:space-between;align-items:center;padding:18px 34px;background:transparent;transition:all .45s}
header.scrolled{background:rgba(246,241,231,.92);backdrop-filter:blur(14px);padding:11px 34px;box-shadow:0 1px 30px rgba(0,0,0,.07)}
header .logo{font-family:var(--serif);font-size:17px;letter-spacing:.3em;color:#fff;transition:color .45s}
header.scrolled .logo{color:var(--ink)}
header .nav-cta{font-family:var(--sans);font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;padding:9px 22px;border-radius:30px;border:1px solid rgba(255,255,255,.55);color:#fff;text-decoration:none;transition:all .45s;font-weight:500}
header.scrolled .nav-cta{border-color:var(--gold);color:var(--ink);background:var(--gold-bright)}

/* --- СПІЛЬНЕ --- */
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 30px;position:relative}
.eyebrow{font-family:var(--sans);font-size:var(--t-eyebrow);letter-spacing:.36em;text-transform:uppercase;font-weight:600;color:var(--gold);margin-bottom:18px}
.eyebrow.center{text-align:center}
h1,h2,h3{font-family:var(--serif);font-weight:400;letter-spacing:.01em;line-height:1.18;text-wrap:balance}
/* жодне слово не лишається саме на окремому рядку (де підтримується) */
.hero .sub,.whatis .lead,.contents .head p,.month li,.blk span,.fitcol li,.review p,.q-q,.final p,.price .desc,.niia p{text-wrap:pretty}
.btn{display:inline-block;font-family:var(--sans);font-size:12px;letter-spacing:.12em;padding:14px 38px;border-radius:40px;background:linear-gradient(135deg,var(--gold-bright),var(--gold));color:#fff;text-decoration:none;font-weight:600;cursor:pointer;border:none;box-shadow:0 10px 28px rgba(122,95,45,.22);transition:transform .35s,box-shadow .35s;text-transform:uppercase}
.btn:hover{transform:translateY(-2px);box-shadow:0 16px 38px rgba(122,95,45,.28)}
.btn.lg{padding:16px 46px;font-size:12.5px}
.btn.ghost{background:transparent;border:1px solid var(--gold);color:var(--accent);box-shadow:none}
.btn.ghost:hover{background:rgba(198,168,107,.12)}

/* --- хмарні (емоційні) секції: зображення + м'яко розчинені краї до фону --- */
.cloudbg{background-size:cover;background-position:center;position:relative}
.cloudbg::before{content:"";position:absolute;inset:0;z-index:0;background:linear-gradient(180deg,rgba(0,0,0,.08),rgba(0,0,0,.18))}
/* верх і низ розчиняються у фоновий папір — жодних різких меж */
.cloudbg::after{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:linear-gradient(180deg,var(--paper) 0%,rgba(246,241,231,0) 40%,rgba(246,241,231,0) 60%,var(--paper) 100%)}
.cloudbg>*{position:relative;z-index:1}

/* --- АНІМАЦІЇ проявлення --- */
.reveal{opacity:0;transform:translateY(22px);transition:opacity .9s cubic-bezier(.2,.6,.2,1),transform .9s cubic-bezier(.2,.6,.2,1);transition-delay:var(--d,0ms)}
.reveal.is-visible{opacity:1;transform:none}
@keyframes fadeUp{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}

/* ===== HERO ===== */
.hero{min-height:100vh;position:relative;overflow:hidden;display:flex;align-items:center;background:var(--bg-deep)}
.hero-video{position:absolute;top:0;right:0;width:72%;height:100%;overflow:hidden;z-index:1}
/* маска розчиняє ЛІВИЙ край відео — межі кадру майже не видно */
.hero-video video{width:100%;height:100%;object-fit:cover;object-position:center;display:block;opacity:.9;
  -webkit-mask-image:linear-gradient(90deg,transparent 0%,#000 46%,#000 100%);
          mask-image:linear-gradient(90deg,transparent 0%,#000 46%,#000 100%);}
/* додатковий тонований градієнт поверх — добиває плавність зліва */
.hero-fade{position:absolute;inset:0;z-index:2;pointer-events:none;
  background:linear-gradient(90deg,
    var(--bg-deep) 0%,
    var(--bg-deep) 26%,
    color-mix(in srgb,var(--bg-deep) 72%,transparent) 46%,
    color-mix(in srgb,var(--bg-deep) 30%,transparent) 66%,
    transparent 86%);}
.hero-clouds{position:absolute;inset:0;z-index:3;background-size:cover;background-position:left center;opacity:.3;mix-blend-mode:soft-light;pointer-events:none}
/* низ героя розчиняється у світлий фон наступної секції */
.hero::after{content:"";position:absolute;left:0;right:0;bottom:0;height:230px;z-index:4;pointer-events:none;background:linear-gradient(180deg,transparent,var(--paper))}
.hero .wrap{z-index:10;position:relative;padding-top:94px;padding-bottom:64px;width:100%}
.hero-content{max-width:540px}
.hero .eyebrow{color:#fff;opacity:.9}
.hero h1{font-size:var(--t-hero);color:#fff;line-height:1.1;font-weight:400;text-shadow:0 2px 34px rgba(0,0,0,.3)}
.hero h1 em{font-style:italic;color:#fff;opacity:.96}
/* підзаголовок героя — у фірмовому серифі (як лого By Niia / Love Care), читабельніший */
.hero .sub{font-family:var(--serif);font-weight:400;font-size:clamp(16px,1.7vw,20px);color:#fff;opacity:.95;margin:20px 0 0;max-width:36ch;line-height:1.5;letter-spacing:.005em}
.hero .buybox{margin-top:34px;padding-top:28px;border-top:1px solid rgba(255,255,255,.22);max-width:470px}
.hero .specs{display:flex;gap:34px;margin-bottom:22px}
.hero .specs .n{font-family:var(--serif);font-size:23px;color:#fff;line-height:1}
.hero .specs .l{font-family:var(--sans);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:#fff;opacity:.78;margin-top:6px;font-weight:500}
.hero .priceline{display:flex;align-items:baseline;gap:12px;margin-bottom:26px;color:#fff}
.hero .priceline .old{font-family:var(--serif);font-size:18px;opacity:.5;text-decoration:line-through}
.hero .priceline .new{font-family:var(--serif);font-size:36px}
.hero .priceline .cur{font-family:var(--sans);font-size:12px;opacity:.82;font-weight:400;letter-spacing:.02em}
/* один короткий рядок замість плиток зі специфікаціями */
.hero-meta{font-family:var(--sans);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:#fff;opacity:.82;font-weight:500;margin-bottom:22px}
/* вхідна анімація героя */
.hero .eyebrow,.hero h1,.hero .sub,.hero .buybox{animation:fadeUp .95s both}
.hero .eyebrow{animation-delay:.1s}
.hero h1{animation-delay:.22s}
.hero .sub{animation-delay:.36s}
.hero .buybox{animation-delay:.5s}

/* ===== СВІТЛІ СЕКЦІЇ — прозорі, течуть по спільному фону ===== */
.whatis,.contents,.quizsection,.reviews,.fit,.final{background:transparent}

/* ЩО ЦЕ — текст ліворуч, фото щоденника у 3 кольорах праворуч */
.whatis{padding:84px 0 72px}
.whatis-split{display:grid;grid-template-columns:1.05fr .95fr;gap:54px;align-items:center;max-width:1040px;margin:0 auto}
.whatis-text{text-align:left}
.whatis h2{font-size:var(--t-h2);color:var(--ink);margin-bottom:20px}
.whatis .lead{font-family:var(--sans);font-weight:300;font-size:clamp(14px,1.35vw,16.5px);color:var(--ink-soft);max-width:48ch;margin:0 0 26px;line-height:1.75}
/* закриті щоденники як реалістичні 3D-книжки: одна спереду, дві віялом позаду */
.whatis-visual{position:relative;min-height:440px;display:flex;align-items:center;justify-content:center;perspective:1800px}
.wc-book{position:absolute;width:46%;aspect-ratio:.72;border-radius:3px 9px 9px 3px;
  /* лицьова обкладинка вже обрізана у файлі (cover-*-front.jpg) під 0.77 —
     рівно як контейнер. cover/center заповнює без спотворень і відсоткових зсувів. */
  background-size:cover;background-position:center;background-repeat:no-repeat;
  transform-style:preserve-3d;transition:transform .6s cubic-bezier(.2,.6,.2,1);
  box-shadow:-12px 30px 52px rgba(0,0,0,.32),-4px 10px 18px rgba(0,0,0,.22)}
/* корінець (товщина книжки) ліворуч */
.wc-book::before{content:"";position:absolute;left:0;top:0;bottom:0;width:13px;border-radius:3px 0 0 3px;
  background:linear-gradient(90deg,rgba(0,0,0,.44),rgba(255,255,255,.18) 52%,rgba(0,0,0,.24));z-index:2}
/* зріз сторінок праворуч (товщина блоку) */
.wc-book .wc-pages{position:absolute;right:-7px;top:2.5%;bottom:2.5%;width:8px;border-radius:0 3px 3px 0;
  background:repeating-linear-gradient(90deg,#f3ecdd 0,#f3ecdd 1px,#dccfb4 1px,#dccfb4 2px);
  box-shadow:3px 0 7px rgba(0,0,0,.18)}
.wc-book.wc-0{transform:translateX(-22%) rotateY(7deg);z-index:3}
.wc-book.wc-1{transform:translate(22%,-9%) rotateY(-13deg) scale(.82);z-index:2}
.wc-book.wc-2{transform:translate(46%,-15%) rotateY(-19deg) scale(.7);z-index:1}
.whatis-visual:hover .wc-0{transform:translateX(-25%) rotateY(7deg)}
.whatis-visual:hover .wc-1{transform:translate(28%,-11%) rotateY(-13deg) scale(.82)}
.whatis-visual:hover .wc-2{transform:translate(54%,-17%) rotateY(-19deg) scale(.7)}
.facts{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;max-width:860px;margin:0 auto}
.fact{padding:28px 16px;border-radius:14px;background:linear-gradient(135deg,rgba(198,168,107,.10),rgba(198,168,107,.03));border:1px solid rgba(198,168,107,.22)}
.fact .big{font-family:var(--serif);font-size:32px;color:var(--accent);line-height:1}
.fact .cap{font-family:var(--sans);font-size:11px;color:var(--ink-soft);margin-top:10px;line-height:1.5;letter-spacing:.01em}
/* одна фраза замість плиток із цифрами */
.whatis .statement{font-family:var(--serif);font-style:italic;font-size:clamp(18px,2.1vw,25px);color:var(--accent);max-width:26ch;margin:6px 0 0;line-height:1.4;text-wrap:balance}

/* НІЯ */
.niia{padding:80px 0}
.niia .inner{background:rgba(246,241,231,.92);backdrop-filter:blur(3px);border-radius:20px;padding:52px;max-width:1000px;margin:0 auto;box-shadow:0 30px 70px rgba(0,0,0,.14)}
.niia .grid{display:grid;grid-template-columns:.72fr 1.28fr;gap:50px;align-items:center}
.niia .portrait{aspect-ratio:4/5;border-radius:12px;background-size:cover;background-position:center;box-shadow:0 22px 54px rgba(0,0,0,.24)}
.niia h2{font-size:var(--t-h2);color:var(--ink);margin-bottom:18px}
.niia p{font-family:var(--sans);font-weight:300;font-size:var(--t-body);color:var(--ink-soft);margin-bottom:14px;max-width:54ch;line-height:1.78}
.niia .pull{font-family:var(--serif);font-style:italic;font-size:clamp(16px,1.7vw,19px);color:var(--accent);border-left:2px solid var(--gold);padding-left:20px;margin-top:24px;line-height:1.4;max-width:34ch}
/* плашки експертності */
.niia .creds{display:flex;flex-wrap:wrap;gap:9px;margin-top:22px}
.niia .cred{font-family:var(--sans);font-size:10.5px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--accent);background:rgba(198,168,107,.16);border:1px solid rgba(198,168,107,.4);border-radius:30px;padding:7px 15px}

/* ===== ОПИТУВАЛЬНИК — у форматі щоденника ===== */
/* інтерактив — на окремому, спокійному фоні (як хіро, але м'якше), з розчиненими краями */
.quizsection{padding:90px 0 96px;position:relative;background:linear-gradient(180deg,#889b9f,#728990)}
.quizsection::after{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:linear-gradient(180deg,var(--paper) 0%,rgba(246,241,231,0) 38%,rgba(246,241,231,0) 62%,var(--paper) 100%)}
.quizsection>*{position:relative;z-index:1}
.quizbook{max-width:600px;margin:0 auto;perspective:2400px}

/* закрита обкладинка (з реальною обкладинкою щоденника) */
.diary-cover{display:block;width:100%;border:none;background:transparent;padding:0;cursor:pointer;transition:transform .4s}
.diary-cover:hover{transform:translateY(-5px)}
/* однотонна обкладинка (без картинки) — спокійний колір теми */
.dc-card{position:relative;border-radius:7px;overflow:hidden;min-height:300px;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;padding:46px 42px;background:linear-gradient(155deg,var(--accent),var(--bg-deep));box-shadow:0 34px 70px rgba(0,0,0,.34),0 0 0 1px rgba(255,255,255,.12)}
.dc-card::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(43,61,64,.10),rgba(43,61,64,.26))}
.dc-card::after{content:"";position:absolute;left:0;top:0;bottom:0;width:7px;background:linear-gradient(90deg,rgba(0,0,0,.32),transparent)}
.dc-card>*{position:relative;z-index:1}
.dc-corner{position:absolute;width:26px;height:26px;border:1.5px solid rgba(255,255,255,.55);z-index:1}
.dc-corner.tl{top:22px;left:22px;border-right:none;border-bottom:none}
.dc-corner.br{bottom:22px;right:22px;border-left:none;border-top:none}
.dc-eyebrow{font-family:var(--sans);font-size:10px;letter-spacing:.36em;text-transform:uppercase;color:rgba(255,255,255,.72);font-weight:600;margin-bottom:14px}
.dc-title{font-family:var(--serif);font-size:clamp(20px,2.4vw,27px);color:#fff;line-height:1.28;margin-bottom:12px;max-width:20ch}
.dc-sub{font-family:var(--sans);font-size:12px;color:rgba(255,255,255,.74);font-weight:300;letter-spacing:.05em;margin-bottom:26px}
.dc-btn{display:inline-block;font-family:var(--sans);font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;font-weight:600;color:var(--ink);background:linear-gradient(135deg,var(--gold-bright),var(--gold));padding:13px 34px;border-radius:34px;box-shadow:0 10px 26px rgba(0,0,0,.25)}
.diary-cover:hover .dc-btn{box-shadow:0 16px 34px rgba(0,0,0,.32)}

/* відкритий щоденник */
.diary{display:none}
.diary.show{display:block;animation:bookOpen .9s cubic-bezier(.7,.02,.3,1)}
@keyframes bookOpen{
  0%{opacity:0;transform:rotateX(-58deg) scaleY(.55);transform-origin:top}
  60%{opacity:1}
  100%{opacity:1;transform:none}
}
.diary-book{position:relative;background:var(--paper);border-radius:7px;box-shadow:0 34px 74px rgba(0,0,0,.20);min-height:372px;overflow:hidden;perspective:1700px}
/* поле-палітурка + ледь помітні лінії, як у блокноті */
.diary-book::before{content:"";position:absolute;left:46px;top:30px;bottom:30px;width:1px;background:rgba(198,168,107,.45);z-index:2}
.diary-book::after{content:"";position:absolute;inset:0;z-index:0;opacity:.5;
  background-image:repeating-linear-gradient(180deg,transparent 0,transparent 37px,rgba(43,61,64,.05) 37px,rgba(43,61,64,.05) 38px)}
.diary-page{position:relative;z-index:1;padding:44px 44px 40px 70px;min-height:372px;backface-visibility:hidden}
.diary-page.q-enter{animation:pageIn .6s ease both}
@keyframes pageIn{from{opacity:0;transform:translateX(10px)}to{opacity:1;transform:none}}
/* «аркуш», що перевертається */
.diary-leaf{position:absolute;inset:0;z-index:5;background:var(--paper);transform-origin:left center;backface-visibility:hidden;padding:44px 44px 40px 70px;box-shadow:0 0 60px rgba(0,0,0,.12);animation:leafTurn .82s cubic-bezier(.45,.05,.25,1) forwards}
@keyframes leafTurn{0%{transform:rotateY(0);opacity:1}100%{transform:rotateY(-158deg);opacity:0}}

.q-label{font-family:var(--serif);font-style:italic;font-size:15px;color:var(--gold);letter-spacing:.04em}
.q-q{font-family:var(--serif);font-size:21px;color:var(--ink);margin:8px 0 26px;line-height:1.36;font-weight:400}
.q-opts{display:flex;flex-direction:column;gap:11px}
.q-opt{background:rgba(198,168,107,.05);border:1px solid rgba(198,168,107,.28);border-radius:10px;padding:15px 20px;font-family:var(--sans);font-size:14px;font-weight:400;color:var(--ink);cursor:pointer;text-align:left;line-height:1.55;transition:all .25s}
.q-opt:hover{background:rgba(198,168,107,.13);border-color:var(--gold);transform:translateX(3px)}
.q-opt.selected{background:linear-gradient(135deg,var(--gold-bright),rgba(198,168,107,.35));border-color:var(--gold);font-weight:500}
/* результат на «перегорнутій сторінці» */
.q-result .q-badge{display:inline-block;font-family:var(--sans);font-size:10px;letter-spacing:.3em;text-transform:uppercase;color:var(--accent);font-weight:600;margin-bottom:14px}
.q-result h3{font-family:var(--serif);font-size:23px;color:var(--ink);margin-bottom:16px;line-height:1.28}
.q-rtext{font-family:var(--sans);font-weight:300;font-size:14.5px;color:var(--ink-soft);margin-bottom:16px;line-height:1.75}
.q-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:28px}
/* індикатор сторінок */
.diary-prog{display:flex;gap:8px;justify-content:center;margin-top:20px}
.diary-prog i{width:7px;height:7px;border-radius:50%;background:rgba(43,61,64,.16);transition:background .4s,transform .4s}
.diary-prog i.active{background:var(--gold);transform:scale(1.25)}
.diary-prog i.done{background:var(--accent)}

/* ===== ЩО ВСЕРЕДИНІ ===== */
.contents{padding:80px 0}
.contents .head{text-align:center;max-width:46ch;margin:0 auto 52px}
.contents .head h2{font-size:var(--t-h2);color:var(--ink);margin-bottom:14px}
.contents .head p{font-family:var(--sans);font-weight:300;font-size:clamp(14px,1.35vw,16.5px);color:var(--ink-soft);line-height:1.7}
.months{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-bottom:56px}
/* кожна частина — у власному кольорі щоденника (--part / --part-bg) */
.month{--part:var(--gold);--part-bg:rgba(246,241,231,.7);
  background:var(--part-bg);border-radius:14px;padding:30px 26px;border:1px solid color-mix(in srgb,var(--part) 38%,transparent);box-shadow:0 14px 36px rgba(0,0,0,.05);position:relative;overflow:hidden}
.month::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:var(--part)}
.month .num{font-family:var(--serif);font-style:italic;font-size:40px;color:var(--part);line-height:1;margin-bottom:4px}
.month .ph{font-family:var(--sans);font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--part);font-weight:600;margin-bottom:12px}
.month h3{font-family:var(--serif);font-size:var(--t-h3);color:var(--ink);margin-bottom:14px}
.month ul{list-style:none}
.month li{font-family:var(--sans);font-weight:400;font-size:13px;color:var(--ink);padding:6px 0 6px 22px;position:relative;line-height:1.5}
.month li::before{content:"✦";position:absolute;left:0;color:var(--part);font-size:9px;top:9px}
.insideblocks{max-width:740px;margin:0 auto}
.insideblocks h3{text-align:center;font-family:var(--serif);font-size:var(--t-h3);color:var(--ink);margin-bottom:26px}
.blockrow{display:grid;grid-template-columns:repeat(2,1fr);gap:13px}
.blk{background:rgba(246,241,231,.7);border:1px solid rgba(198,168,107,.22);border-radius:12px;padding:18px 20px}
.blk b{font-family:var(--serif);font-size:14.5px;color:var(--ink);display:block;margin-bottom:4px;font-weight:400}
.blk span{font-family:var(--sans);font-weight:300;font-size:12.5px;color:var(--ink-soft);line-height:1.55}

/* ===== ГАЛЕРЕЯ ===== */
.gallery{padding:80px 0}
/* темніший фон — щоб білий текст читався (особливо на мобільному).
   Вгорі секції фон перетікає у світлий папір і «з'їдає» білий заголовок —
   тому затемнюємо сильніше саме зверху. */
.gallery.cloudbg::before{background:linear-gradient(180deg,rgba(0,0,0,.7),rgba(0,0,0,.58) 38%,rgba(0,0,0,.66))}
.gallery .head{text-align:center;margin-bottom:46px}
.gallery h2{color:#fff;font-size:var(--t-h2);margin-bottom:12px;font-weight:600}
.gallery .head p{color:#fff;opacity:.95;font-family:var(--sans);font-weight:400;font-size:clamp(14px,1.35vw,16.5px)}
.pages{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;max-width:940px;margin:0 auto}
.pg{background:var(--paper);border-radius:10px;overflow:hidden;box-shadow:0 18px 42px rgba(0,0,0,.28);transition:transform .4s}
.pg:hover{transform:translateY(-6px)}
.pg img{width:100%;height:auto;display:block}
.pg .cap{padding:14px 18px;font-family:var(--sans);font-size:12px;color:var(--ink-soft);text-align:center;font-weight:300}
.pg .cap b{display:block;font-family:var(--serif);color:var(--ink);font-size:14px;margin-bottom:3px;font-weight:400}

/* ===== ВІДГУКИ ===== */
.reviews{padding:80px 0}
.reviews .head{text-align:center;margin-bottom:46px}
.reviews .head h2{font-size:var(--t-h2);color:var(--ink);margin-bottom:12px}
.reviews .head p{font-family:var(--sans);font-weight:300;font-size:clamp(14px,1.35vw,16.5px);color:var(--ink-soft)}
.review-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;max-width:1020px;margin:0 auto}
/* картки відгуків — у м'яких кольорах щоденників (--rc), ненав'язливо */
.review{position:relative;--rc:#c6a86b;background:color-mix(in srgb,var(--rc) 7%,rgba(246,241,231,.82));backdrop-filter:blur(2px);border:1px solid color-mix(in srgb,var(--rc) 26%,transparent);border-radius:16px;padding:28px 28px 30px}
.review::before{content:"";position:absolute;top:0;left:24px;right:24px;height:3px;border-radius:0 0 3px 3px;background:color-mix(in srgb,var(--rc) 55%,transparent)}
.review .mark{font-family:var(--serif);font-size:46px;color:var(--rc);opacity:.55;line-height:.6;display:block;margin-bottom:8px}
.review p{font-family:var(--sans);font-weight:300;font-size:13.5px;color:var(--ink-soft);line-height:1.72;margin:0}
/* десктоп: спершу 3 відгуки, решта розкриваються кнопкою «Показати ще» */
.review.extra{display:none}
.review-grid.show-all .review.extra{display:block;animation:fadeUp .6s both}
.reviews-more{display:block;margin:34px auto 0}
.reviews-more.hidden{display:none}
/* підпис: ім'я + вік + проблематика — показує, що щоденник під різні запити й вік */
.review .who{margin-top:16px}
.review .who b{display:block;font-family:var(--serif);font-size:14px;color:var(--ink);font-weight:400;letter-spacing:.02em}
.review .who span{display:block;font-family:var(--sans);font-size:11.5px;color:var(--rc);font-weight:600;margin-top:3px;line-height:1.4}

/* ===== ПЕРЕВЕРТАННЯ (цитати чергуються) ===== */
.reframe{padding:80px 0;text-align:center;min-height:34vh;display:flex;align-items:center}
/* широкий рядок: цитата розкладається по горизонталі, а не стовпчиком */
.reframe .inner{max-width:820px;margin:0 auto;width:100%}
.rf-quote{font-family:var(--serif);font-style:italic;font-size:clamp(19px,2.5vw,28px);color:#fff;line-height:1.45;text-shadow:0 2px 22px rgba(0,0,0,.28);transition:opacity .7s ease;min-height:2.7em;display:flex;align-items:center;justify-content:center}

/* ===== КОМУ ПІДХОДИТЬ ===== */
.fit{padding:80px 0}
.fit h2{text-align:center;font-size:var(--t-h2);color:var(--ink);margin-bottom:44px}
.fit .cols{display:grid;grid-template-columns:1fr 1fr;gap:26px;max-width:900px;margin:0 auto}
.fitcol{padding:34px 30px;border-radius:16px}
.fitcol.yes{background:linear-gradient(135deg,rgba(198,168,107,.14),rgba(198,168,107,.05));border:1px solid rgba(198,168,107,.3)}
.fitcol.no{background:rgba(43,61,64,.03);border:1px solid rgba(43,61,64,.08)}
.fitcol h3{font-family:var(--serif);font-size:var(--t-h3);margin-bottom:18px;color:var(--ink)}
.fitcol ul{list-style:none}
.fitcol li{font-family:var(--sans);font-weight:300;font-size:13.5px;color:var(--ink-soft);padding:8px 0 8px 26px;position:relative;line-height:1.55}
.fitcol.yes li::before{content:"✦";position:absolute;left:0;color:var(--gold);font-size:10px;top:11px}
.fitcol.no li::before{content:"—";position:absolute;left:0;color:#b3a99e;top:8px}

/* ===== ДЕКОР: аркуші, що ніби залітають з-за краю екрана (заповнюють пустоту) ===== */
.contents,.fit{position:relative;overflow:hidden}
.contents .wrap,.fit .wrap{z-index:1}
.deco-leaf{position:absolute;z-index:0;width:clamp(180px,27vw,320px);border-radius:9px;
  box-shadow:0 34px 64px rgba(0,0,0,.16);opacity:.5;pointer-events:none;filter:saturate(.92)}
.deco-leaf.r{right:-64px;top:5%;animation:driftR 11s ease-in-out infinite}
.deco-leaf.l{left:-64px;bottom:5%;animation:driftL 12s ease-in-out infinite}
/* діагональний аркуш у лівому нижньому куті: дивиться зверху-зліва вниз-вправо */
.deco-leaf.bl{left:-46px;bottom:-30px;opacity:.42;width:clamp(170px,24vw,300px);animation:driftBL 13s ease-in-out infinite}
@keyframes driftR{0%,100%{transform:rotate(7deg) translateY(0)}50%{transform:rotate(7deg) translateY(-18px)}}
@keyframes driftL{0%,100%{transform:rotate(-8deg) translateY(0)}50%{transform:rotate(-8deg) translateY(16px)}}
@keyframes driftBL{0%,100%{transform:rotate(22deg) translateY(0)}50%{transform:rotate(22deg) translateY(-14px)}}

/* ===== ЦІНА ===== */
.price{padding:80px 0;text-align:center}
.price .badge{display:inline-block;font-family:var(--sans);font-size:9.5px;letter-spacing:.28em;text-transform:uppercase;color:var(--ink);background:var(--gold-bright);padding:8px 20px;border-radius:30px;font-weight:600;margin-bottom:24px}
.price h2{color:#fff;font-size:var(--t-h2);margin-bottom:12px}
.price .desc{font-family:var(--sans);font-weight:300;color:#fff;opacity:.9;font-size:clamp(14px,1.35vw,16.5px);max-width:38ch;margin:0 auto 30px;line-height:1.6}
.pcard{background:rgba(246,241,231,.97);max-width:410px;margin:0 auto;border-radius:18px;padding:42px 36px;box-shadow:0 30px 66px rgba(0,0,0,.3)}
.pcard .what{font-family:var(--serif);font-size:var(--t-h3);color:var(--ink);margin-bottom:6px}
.pcard .whatsub{font-family:var(--sans);font-size:11.5px;color:var(--ink-soft);margin-bottom:22px;letter-spacing:.02em;font-weight:300}
.pcard .tag{display:flex;align-items:baseline;justify-content:center;gap:14px;margin-bottom:6px}
.pcard .old{font-family:var(--serif);font-size:23px;color:var(--ink-soft);opacity:.5;text-decoration:line-through}
.pcard .new{font-family:var(--serif);font-size:52px;color:var(--ink);line-height:1}
.pcard .cur{font-family:var(--sans);font-size:15px;color:var(--ink-soft);font-weight:500}
.pcard .save{font-family:var(--sans);font-size:11.5px;color:var(--accent);font-weight:600;letter-spacing:.04em;margin-bottom:22px}
.pcard ul{list-style:none;text-align:left;max-width:270px;margin:0 auto 24px}
.pcard li{font-family:var(--sans);font-weight:300;font-size:12.5px;color:var(--ink-soft);padding:6px 0 6px 22px;position:relative}
.pcard li::before{content:"✦";position:absolute;left:0;color:var(--gold);font-size:9px;top:9px}
.pcard .left{font-family:var(--sans);font-size:11.5px;color:var(--accent);letter-spacing:.06em;margin-top:18px;font-weight:600}
.payhint{color:#fff;opacity:.7;font-family:var(--sans);font-size:11px;margin-top:20px;letter-spacing:.04em;font-weight:300}
/* дві колонки: зліва «остання партія» + опис, справа — картка з ціною */
.price-split{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center;max-width:980px;margin:0 auto;text-align:left}
.price-intro .badge{margin-bottom:20px}
.price-intro h2{margin-bottom:14px}
.price-intro .desc{max-width:34ch;margin:0 0 22px}
.price-intro .payhint{margin:18px 0 0}
.price-split .pcard{margin:0 auto}
/* коротка інфо про фонд просто в блоці ціни (крім великого блоку у фіналі) */
.price-intro .charity-mini{font-family:var(--sans);font-weight:300;font-size:12.5px;color:#fff;opacity:.92;line-height:1.6;max-width:34ch;margin:20px 0 0;padding-left:16px;border-left:2px solid var(--gold)}

/* ===== СМУГА З КНОПКОЮ (між блоками — щоб кнопок «Замовити» було достатньо) ===== */
.ctaband{padding:46px 0 50px;text-align:center;background:transparent}

/* ===== ФІНАЛ ===== */
.final{padding:84px 0 70px;text-align:center}
.final .medallion{max-width:560px;margin:0 auto;padding:48px 42px;position:relative}
.final .medallion::before,.final .medallion::after{content:"";position:absolute;width:40px;height:40px;border:2px solid var(--gold);opacity:.5}
.final .medallion::before{top:0;left:0;border-right:none;border-bottom:none}
.final .medallion::after{bottom:0;right:0;border-left:none;border-top:none}
.final h2{font-size:var(--t-h2);color:var(--ink);margin-bottom:20px;line-height:1.22}
.final p{font-family:var(--sans);font-weight:300;font-size:clamp(14px,1.35vw,16.5px);color:var(--ink-soft);max-width:38ch;margin:0 auto 32px;line-height:1.7}
.charity{max-width:58ch;margin:0 auto;font-family:var(--sans);font-weight:300;font-size:13px;color:var(--ink-soft);line-height:1.78}
.charity b{color:var(--ink);font-weight:600}

/* ===== FOOTER ===== */
footer{position:relative;background:var(--bg-deep);color:#fff;text-align:center;padding:62px 30px 34px;font-family:var(--sans);font-size:11.5px;letter-spacing:.05em;font-weight:300}
footer::before{content:"";position:absolute;left:0;right:0;top:0;height:120px;background:linear-gradient(180deg,var(--paper),transparent);pointer-events:none}
footer .fl{font-family:var(--serif);letter-spacing:.24em;font-size:16px;margin-bottom:8px}
footer .f-sub{opacity:.82;margin-bottom:14px}
footer .f-ig{display:inline-block;color:var(--gold-bright);text-decoration:none;font-weight:500;letter-spacing:.06em;border-bottom:1px solid transparent;transition:border-color .3s}
footer .f-ig:hover{border-color:var(--gold-bright)}

/* ===== АДАПТИВ ===== */
@media(max-width:820px){
  .hero-video{width:100%;opacity:.62;
    -webkit-mask-image:none;mask-image:none}
  /* світліший градієнт — щоб відео було видно на мобільному */
  .hero-fade{background:linear-gradient(180deg,
    color-mix(in srgb,var(--bg-deep) 22%,transparent),
    color-mix(in srgb,var(--bg-deep) 58%,transparent) 70%,
    var(--bg-deep));}
  .hero-content{max-width:none}
  .hero .specs,.hero .priceline{justify-content:flex-start}
  /* стабільна висота героя: 100svh не реагує на появу/зникнення адресного рядка,
     тож сторінка не «смикається» при скролі (на відміну від 100vh) */
  .hero{min-height:100svh}

  /* комфортніші відступи секцій на мобільному */
  .whatis,.contents,.gallery,.reviews,.fit,.price,.niia,.reframe{padding-top:58px;padding-bottom:58px}
  .quizsection{padding:64px 0 68px}
  .final{padding:54px 0 60px}

  .niia .inner{padding:30px 22px}
  .niia .grid{grid-template-columns:1fr;gap:26px}
  /* ПРОДУКТИВНІСТЬ: розмиття (backdrop-filter) під час скролу на мобільному
     дає сильні лаги. Прибираємо його, замінюючи на щільніший непрозорий фон —
     візуально майже те саме, але рендериться миттєво. */
  .review,.niia .inner,header.scrolled{backdrop-filter:none;-webkit-backdrop-filter:none}
  .review{background:color-mix(in srgb,var(--rc) 8%,#f1ead9)}
  .niia .inner{background:#f4eee2}
  header.scrolled{background:rgba(246,241,231,.97)}
  /* великі м'які тіні дорого перемальовуються під час скролу — полегшуємо радіус */
  .wc-book{box-shadow:-6px 12px 22px rgba(0,0,0,.28)}
  .pg{box-shadow:0 8px 18px rgba(0,0,0,.22)}
  .pcard{box-shadow:0 12px 26px rgba(0,0,0,.22)}
  .niia .inner{box-shadow:0 12px 28px rgba(0,0,0,.12)}
  .month{box-shadow:0 6px 16px rgba(0,0,0,.05)}
  .dc-card{box-shadow:0 14px 30px rgba(0,0,0,.28),0 0 0 1px rgba(255,255,255,.1)}
  .diary-book{box-shadow:0 14px 30px rgba(0,0,0,.16)}
  /* повноекранне накладання (mix-blend-mode) дуже дороге при скролі — і його майже не видно */
  .bg-mist::after{display:none}
  /* горизонтальний скрол: картки частин, фото сторінок, відгуки.
     scroll-behavior:auto — щоб авто-скрол (app.js) не конфліктував зі smooth. */
  .months,.pages,.review-grid,.fit .cols{
    display:flex;grid-template-columns:none;gap:14px;
    /* ЗАМОРОЖУЄМО ВЕРТИКАЛЬНУ ВІСЬ: overflow-y:hidden прибирає вертикальний «люфт»
       (стрічка з overflow-x:auto інакше стає й вертикально-прокручуваною й картки
       бобають). Лишається лише горизонтальний скрол. Без touch-action — вертикальний
       жест автоматично йде на скрол сторінки (стрічка по Y не прокручується). */
    overflow-x:auto;overflow-y:hidden;scroll-behavior:auto;
    overscroll-behavior-x:contain;
    margin-left:-22px;margin-right:-22px;padding:12px 22px 16px;
    scrollbar-width:none}
  .months::-webkit-scrollbar,.pages::-webkit-scrollbar,.review-grid::-webkit-scrollbar,.fit .cols::-webkit-scrollbar{display:none}
  /* 80% + видно краєчок наступної картки — підказка, що можна гортати */
  .month,.pg,.review,.fitcol{flex:0 0 80%}
  /* у горизонтальних стрічках прибираємо вертикальний зсув анімації появи —
     щоб картки не рухались по вертикалі (лише плавне проявлення прозорістю) */
  .months .reveal,.pages .reveal,.review-grid .reveal,.fit .cols .reveal{transform:none}
  /* на мобільному всі відгуки доступні в скролі — кнопку «показати ще» ховаємо */
  .review.extra{display:block}
  .reviews-more{display:none}
  .facts{grid-template-columns:1fr 1fr}
  /* «ЩО ЦЕ»: книжки + текст разом в один екран — компактно, без зайвих відступів */
  .whatis{text-align:center;padding-top:38px;padding-bottom:38px}
  .whatis-split{grid-template-columns:1fr;gap:18px}
  .whatis-text{text-align:center}
  .whatis h2{margin-bottom:10px}
  .whatis .lead{margin:0 auto 12px;font-size:13px;line-height:1.55}
  .whatis .statement{margin-left:auto;margin-right:auto;font-size:17px}
  /* 3D-книжки компактніше — менші й з max-width, щоб НЕ налазили на заголовок
     і гарантовано вміщались у свій бокс на будь-якому екрані телефона */
  .whatis-visual{min-height:226px;order:-1}
  .wc-book{width:48%;max-width:158px}
  .wc-book.wc-0{transform:translateX(-18%) rotateY(7deg)}
  .wc-book.wc-1{transform:translate(16%,-7%) rotateY(-12deg) scale(.8)}
  .wc-book.wc-2{transform:translate(36%,-12%) rotateY(-18deg) scale(.68)}
  /* декоративні аркуші на мобільному ховаємо (немає пустоти для заповнення) */
  .deco-leaf{display:none}
  /* «ЦЕ НЕ ДЛЯ ВСІХ»: дві колонки тепер горизонтальним скролом */
  .fit{padding-top:42px;padding-bottom:42px}
  .fit h2{margin-bottom:22px}
  .fitcol{padding:26px 24px}
  /* «ДРУКУ БІЛЬШЕ НЕ БУДЕ» (ціна): в один екран */
  .price{padding-top:40px;padding-bottom:40px}
  .price-split{grid-template-columns:1fr;gap:18px;text-align:center}
  .price-intro h2,.price-intro .desc{margin-left:auto;margin-right:auto}
  .price-intro .desc{margin-bottom:0}
  .price-intro .charity-mini,.price-intro .payhint{margin-left:auto;margin-right:auto}
  .price-intro .charity-mini{margin-top:14px}
  .pcard{padding:26px 22px}
  .pcard .new{font-size:42px}
  .pcard ul{margin-bottom:18px}
  .pcard li{padding:4px 0 4px 22px}
  .pcard .whatsub{margin-bottom:16px}
  /* «Я НІЯ»: фото + текст в один екран */
  .niia{padding-top:40px;padding-bottom:40px}
  /* обличчя Нії у верхній частині фото → кадруємо від верху, трохи вище фото */
  .niia .portrait{aspect-ratio:auto;height:230px;background-position:center top}
  .niia h2{margin-bottom:10px}
  .niia p{font-size:13px;line-height:1.55;margin-bottom:9px}
  .niia .creds{gap:6px;margin-top:14px}
  .niia .cred{font-size:9.5px;padding:5px 11px}
  .niia .pull{font-size:15px;margin-top:14px;padding-left:14px}
  .diary-page,.diary-leaf{padding:30px 26px 30px 48px}
  .diary-book::before{left:30px}
  header{padding:14px 20px}
  .wrap{padding:0 22px}
  /* зручніші тап-таргети: головні кнопки на всю ширину */
  .hero .buybox .btn,.price .btn,.ctaband .btn{display:block;width:100%;text-align:center;padding:17px 24px}
  .hero .buybox{max-width:none}
  .q-actions .btn{flex:1 1 auto;text-align:center}
}
@media(max-width:480px){
  .hero h1{font-size:clamp(27px,8.5vw,36px)}
  .hero .sub{font-size:17px}
  .niia .inner{padding:24px 18px}
  .dc-card{min-height:250px;padding:34px 24px}
  .diary-page,.diary-leaf{padding:26px 20px 26px 40px}
  .month,.pg,.review,.fitcol{flex:0 0 86%}
  /* книжки не збільшуємо — max-width із правила вище тримає їх компактними */
  .review{padding:24px 22px 26px}
}

/* ===== СТАБІЛІЗАЦІЯ НА СЕНСОРНИХ ЕКРАНАХ =====
   На телефоні немає наведення, але браузер вмикає :hover на дотик — і картки/кнопки
   «підстрибують» (transform) при торканні, особливо під час скролу. Вимикаємо весь
   рух по hover саме там, де нема справжнього наведення. */
@media(hover:none){
  .btn:hover,.pg:hover,.diary-cover:hover,.q-opt:hover{transform:none}
  .whatis-visual:hover .wc-0{transform:translateX(-18%) rotateY(7deg)}
  .whatis-visual:hover .wc-1{transform:translate(16%,-7%) rotateY(-12deg) scale(.8)}
  .whatis-visual:hover .wc-2{transform:translate(36%,-12%) rotateY(-18deg) scale(.68)}
  /* книжки декоративні — хай дотик проходить крізь них до скролу сторінки */
  .whatis-visual{pointer-events:none}
  /* без сірого спалаху при тапі */
  *{-webkit-tap-highlight-color:transparent}
}

/* шануємо вимкнені анімації */
@media(prefers-reduced-motion: reduce){
  *{animation:none !important}
  .reveal{opacity:1 !important;transform:none !important;transition:none !important}
  html{scroll-behavior:auto}
}