/* ============================================================
   ВЫБОР БЕЗ ОШИБОК — Дизайн-система
   3 темы: dark · light(изумруд) · sakura
   Шрифты: Playfair Display (заголовки) + Manrope (текст/UI)
   ============================================================ */

/* ---------- RESET ---------- */
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:88px;background:var(--bg);background-image:var(--bg-grad);background-attachment:fixed;background-size:cover;transition:background-color .5s var(--ease)}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer}

/* ============================================================
   ТОКЕНЫ ТЕМ
   ============================================================ */
:root{
  --font:'Manrope',system-ui,-apple-system,sans-serif;
  --font-display:'Playfair Display',Georgia,serif;

  --r-xs:8px; --r-sm:12px; --r:18px; --r-lg:26px; --r-xl:34px; --r-pill:999px;

  --sp-1:6px; --sp-2:12px; --sp-3:20px; --sp-4:32px; --sp-5:52px; --sp-6:84px;

  --ease:cubic-bezier(.22,.61,.36,1);
  --maxw:1180px;
}

/* ---------- ТЁМНАЯ — «Озеро ночью» ---------- */
html[data-theme="dark"]{
  --bg:        oklch(0.155 0.018 168);
  --bg-grad:   radial-gradient(120% 90% at 50% -10%, oklch(0.23 0.03 172) 0%, oklch(0.145 0.018 168) 55%);
  --surface:   oklch(0.215 0.022 170);
  --glass:     rgba(255,255,255,0.045);
  --glass-2:   rgba(255,255,255,0.075);
  --glass-brd: rgba(255,255,255,0.10);
  --nav-bg:    oklch(0.155 0.018 168 / .58);
  --nav-bg-2:  oklch(0.155 0.018 168 / .86);
  --blur:18px;

  --text:   oklch(0.97 0.008 170);
  --text-2: oklch(0.97 0.008 170 / .66);
  --text-3: oklch(0.97 0.008 170 / .40);

  --accent:    oklch(0.76 0.13 168);
  --accent-2:  oklch(0.82 0.10 205);
  --accent-ink:oklch(0.17 0.03 168);
  --accent-soft:oklch(0.76 0.13 168 / .14);

  --border:  rgba(255,255,255,0.10);
  --border-2:rgba(255,255,255,0.18);

  --good:oklch(0.78 0.13 165); --good-bg:oklch(0.78 0.13 165 / .14);
  --warn:oklch(0.80 0.11 75);  --warn-bg:oklch(0.80 0.11 75 / .14);
  --bad: oklch(0.70 0.15 25);  --bad-bg: oklch(0.70 0.15 25 / .14);
  --mid: oklch(0.74 0.11 205); --mid-bg: oklch(0.74 0.11 205 / .14);

  --shadow:0 24px 60px -24px rgba(0,0,0,.7);
  --glow:0 0 60px -10px oklch(0.76 0.13 168 / .45);
  --scrim:linear-gradient(180deg, oklch(0.155 0.018 168 / .35), oklch(0.155 0.018 168 / .82));
  --page-bg:url('img/bg-cosmos2.jpg');
  --page-bg-op:1;
  --page-bg-pos:center 40%;
  --hero-bg:#07060b;
  --page-scrim:linear-gradient(180deg, oklch(0.155 0.018 168 / .16) 0%, oklch(0.135 0.016 168 / .42) 100%);
  color-scheme:dark;
}

/* ---------- СВЕТЛАЯ — «Светло-изумрудный» ---------- */
html[data-theme="light"]{
  --bg:        oklch(0.975 0.014 165);
  --bg-grad:   radial-gradient(120% 90% at 50% -10%, oklch(0.95 0.03 168) 0%, oklch(0.975 0.013 162) 55%);
  --surface:   oklch(0.995 0.006 165);
  --glass:     rgba(255,255,255,0.62);
  --glass-2:   rgba(255,255,255,0.85);
  --glass-brd: rgba(28,80,62,0.12);
  --nav-bg:    oklch(0.985 0.012 165 / .68);
  --nav-bg-2:  oklch(0.992 0.008 165 / .92);
  --blur:16px;

  --text:   oklch(0.24 0.006 200);
  --text-2: oklch(0.24 0.006 200 / .72);
  --text-3: oklch(0.24 0.006 200 / .52);

  --accent:    oklch(0.56 0.12 166);
  --accent-2:  oklch(0.58 0.09 205);
  --accent-ink:oklch(0.99 0.01 165);
  --accent-soft:oklch(0.56 0.12 166 / .12);

  --border:  rgba(28,80,62,0.13);
  --border-2:rgba(28,80,62,0.22);

  --good:oklch(0.55 0.13 162); --good-bg:oklch(0.55 0.13 162 / .12);
  --warn:oklch(0.62 0.13 70);  --warn-bg:oklch(0.62 0.13 70 / .13);
  --bad: oklch(0.58 0.17 25);  --bad-bg: oklch(0.58 0.17 25 / .12);
  --mid: oklch(0.56 0.10 205); --mid-bg: oklch(0.56 0.10 205 / .12);

  --shadow:0 24px 50px -28px rgba(20,60,46,.32);
  --glow:0 0 50px -12px oklch(0.56 0.12 166 / .35);
  --scrim:linear-gradient(180deg, oklch(0.975 0.014 165 / .25), oklch(0.975 0.014 165 / .80));
  --page-bg:url('img/bg-forest2.jpg');
  --page-bg-op:1;
  --page-scrim:transparent;
  --hero-bg:#0a1410;
  color-scheme:light;
}

/* ---------- САКУРА — «Цветение» ---------- */
html[data-theme="sakura"]{
  --bg:        oklch(0.965 0.022 18);
  --bg-grad:   radial-gradient(125% 95% at 50% -10%, oklch(0.94 0.045 10) 0%, oklch(0.965 0.02 22) 50%, oklch(0.95 0.03 60) 100%);
  --surface:   oklch(0.995 0.01 30);
  --glass:     rgba(255,255,255,0.58);
  --glass-2:   rgba(255,255,255,0.82);
  --glass-brd: rgba(150,60,80,0.14);
  --nav-bg:    oklch(0.975 0.022 18 / .64);
  --nav-bg-2:  oklch(0.99 0.012 28 / .92);
  --blur:16px;

  --text:   oklch(0.34 0.05 12);
  --text-2: oklch(0.34 0.05 12 / .68);
  --text-3: oklch(0.34 0.05 12 / .46);

  --accent:    oklch(0.70 0.13 8);
  --accent-2:  oklch(0.64 0.11 350);
  --accent-ink:oklch(0.99 0.01 20);
  --accent-soft:oklch(0.70 0.13 8 / .13);

  --border:  rgba(150,60,80,0.15);
  --border-2:rgba(150,60,80,0.26);

  --good:oklch(0.62 0.13 150); --good-bg:oklch(0.62 0.13 150 / .12);
  --warn:oklch(0.66 0.13 60);  --warn-bg:oklch(0.66 0.13 60 / .13);
  --bad: oklch(0.62 0.17 22);  --bad-bg: oklch(0.62 0.17 22 / .12);
  --mid: oklch(0.64 0.11 350); --mid-bg: oklch(0.64 0.11 350 / .13);

  --shadow:0 26px 54px -28px rgba(130,40,70,.34);
  --glow:0 0 56px -10px oklch(0.70 0.13 8 / .42);
  --scrim:linear-gradient(180deg, oklch(0.965 0.022 18 / .25), oklch(0.965 0.022 18 / .80));
  --page-bg:url('img/bg-sakura2.jpg');
  --page-bg-op:1;
  --page-scrim:transparent;
  --hero-bg:#170c12;
  color-scheme:light;
}

/* ---------- ТЁМНАЯ — «Тёмный» (сплошной тёмный фон, без фото) ---------- */
html[data-theme="night"]{
  --bg:        oklch(0.14 0.004 260);
  --bg-grad:   radial-gradient(120% 90% at 50% -10%, oklch(0.20 0.01 260) 0%, oklch(0.12 0.004 260) 55%);
  --surface:   oklch(0.19 0.006 260);
  --glass:     rgba(255,255,255,0.045);
  --glass-2:   rgba(255,255,255,0.075);
  --glass-brd: rgba(255,255,255,0.10);
  --nav-bg:    oklch(0.14 0.004 260 / .58);
  --nav-bg-2:  oklch(0.14 0.004 260 / .88);
  --blur:18px;

  --text:   oklch(0.97 0.005 260);
  --text-2: oklch(0.97 0.005 260 / .66);
  --text-3: oklch(0.97 0.005 260 / .40);

  --accent:    oklch(0.78 0.12 210);
  --accent-2:  oklch(0.82 0.10 250);
  --accent-ink:oklch(0.15 0.02 260);
  --accent-soft:oklch(0.78 0.12 210 / .14);

  --border:  rgba(255,255,255,0.10);
  --border-2:rgba(255,255,255,0.18);

  --good:oklch(0.78 0.13 165); --good-bg:oklch(0.78 0.13 165 / .14);
  --warn:oklch(0.80 0.11 75);  --warn-bg:oklch(0.80 0.11 75 / .14);
  --bad: oklch(0.70 0.15 25);  --bad-bg: oklch(0.70 0.15 25 / .14);
  --mid: oklch(0.74 0.11 205); --mid-bg: oklch(0.74 0.11 205 / .14);

  --shadow:0 24px 60px -24px rgba(0,0,0,.8);
  --glow:0 0 60px -10px oklch(0.78 0.12 210 / .45);
  --scrim:linear-gradient(180deg, oklch(0.14 0.004 260 / .35), oklch(0.14 0.004 260 / .82));
  --page-bg:none;
  --page-bg-op:1;
  --page-scrim:linear-gradient(180deg, oklch(0.14 0.004 260 / .10) 0%, oklch(0.11 0.004 260 / .30) 100%);
  --hero-bg:#070709;
  color-scheme:dark;
}
/* «Тёмный»: сплошная тёмная подложка вместо фото */
html[data-theme="night"] body::before{background:#0a0a0f}

/* ============================================================
   БАЗА
   ============================================================ */
/* Мобайл: фиксируем по ширине экрана, никакого горизонтального
   таскания (как приложение). Источники переполнения чиним отдельно. */
html{overflow-x:hidden}
body{overflow-x:hidden;max-width:100%}
body{
  font-family:var(--font);
  background:transparent;
  color:var(--text);
  min-height:100vh;
  line-height:1.6;
  font-weight:450;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  transition:color .4s var(--ease);
  position:relative;
}
/* фиксированный фотофон под текущую тему.
   Высота — постоянная (100lvh), чтобы сворачивание адресной строки на
   мобиле НЕ пересчитывало cover-фон (иначе он скачком увеличивается). */
body::before{
  content:'';position:fixed;top:0;left:0;right:0;z-index:-3;
  height:100vh;height:100lvh;
  background-image:var(--page-bg);
  background-size:cover;background-position:var(--page-bg-pos,center);background-repeat:no-repeat;
  opacity:var(--page-bg-op);
  transition:opacity .5s var(--ease);
}
body::after{
  content:'';position:fixed;top:0;left:0;right:0;z-index:-2;
  height:100vh;height:100lvh;
  background:var(--page-scrim);
  transition:background .5s var(--ease);
}

h1,h2,h3,h4{font-family:var(--font-display);font-weight:600;line-height:1.08;letter-spacing:-.01em}
.serif{font-family:var(--font-display)}

/* ---------- ТИПОГРАФИКА ---------- */
.display{font-family:var(--font-display);font-size:clamp(40px,6.5vw,82px);font-weight:600;line-height:1.02;letter-spacing:-.02em}
.h1{font-family:var(--font-display);font-size:clamp(30px,4vw,48px);font-weight:600}
.h2{font-family:var(--font-display);font-size:clamp(24px,3vw,34px);font-weight:600}
.eyebrow{font-size:11px;letter-spacing:.32em;text-transform:uppercase;font-weight:700;color:var(--accent)}
.lead{font-size:clamp(15px,1.4vw,19px);color:var(--text-2);line-height:1.7}
.muted{color:var(--text-3)}
.kicker{font-size:11px;letter-spacing:.18em;text-transform:uppercase;font-weight:700;color:var(--text-3)}

/* ============================================================
   КОМПОНЕНТЫ
   ============================================================ */

/* ---------- Кнопки ---------- */
.btn{
  display:inline-flex;align-items:center;gap:9px;
  padding:13px 26px;border:none;border-radius:var(--r-pill);
  background:var(--accent);color:var(--accent-ink);
  font-size:14px;font-weight:700;letter-spacing:.01em;
  transition:transform .25s var(--ease), box-shadow .3s var(--ease), filter .25s;
  box-shadow:var(--glow);
}
.btn:hover{transform:translateY(-2px);filter:brightness(1.06);box-shadow:0 14px 36px -10px oklch(0.7 0.13 168 / .5)}
.btn i{font-size:18px}
.btn-ghost{
  display:inline-flex;align-items:center;gap:9px;
  padding:13px 26px;border:1px solid var(--border-2);border-radius:var(--r-pill);
  background:var(--glass);backdrop-filter:blur(var(--blur));-webkit-backdrop-filter:blur(var(--blur));
  color:var(--text);font-size:14px;font-weight:600;
  transition:all .25s var(--ease);
}
.btn-ghost:hover{border-color:var(--accent);color:var(--accent);transform:translateY(-2px)}
.btn-sm{padding:9px 18px;font-size:12.5px}

/* ---------- Карточки / стекло ---------- */
.card{
  background:var(--glass);
  border:1px solid var(--glass-brd);
  border-radius:var(--r);
  backdrop-filter:blur(var(--blur));-webkit-backdrop-filter:blur(var(--blur));
  box-shadow:var(--shadow);
  transition:transform .35s var(--ease), border-color .3s, box-shadow .35s;
}
.card-hover:hover{transform:translateY(-4px);border-color:var(--accent);box-shadow:0 30px 60px -28px oklch(0.7 0.13 168 / .35)}
.glass{background:var(--glass);backdrop-filter:blur(var(--blur));-webkit-backdrop-filter:blur(var(--blur));border:1px solid var(--glass-brd)}

/* ---------- Чипы / бейджи ---------- */
.chip{
  display:inline-flex;align-items:center;gap:7px;
  padding:7px 15px;border-radius:var(--r-pill);
  background:var(--glass);border:1px solid var(--border);
  font-size:12.5px;font-weight:600;color:var(--text-2);
}
.badge{display:inline-flex;align-items:center;gap:6px;padding:4px 11px;border-radius:var(--r-pill);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;font-weight:800}
.badge.low{background:var(--mid-bg);color:var(--mid);border:1px solid var(--mid)}
.badge.mid{background:var(--accent-soft);color:var(--accent);border:1px solid var(--accent)}
.badge.high{background:var(--warn-bg);color:var(--warn);border:1px solid var(--warn)}
.badge.good{background:var(--good-bg);color:var(--good);border:1px solid var(--good)}

/* ---------- Поля ввода ---------- */
.field label{display:block;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;font-weight:700;color:var(--text-3);margin-bottom:7px}
.input{
  width:100%;padding:13px 16px;border-radius:var(--r-sm);
  background:var(--glass);border:1px solid var(--border);
  color:var(--text);font-size:14px;font-family:var(--font);outline:none;
  transition:border-color .2s, box-shadow .2s;
}
.input::placeholder{color:var(--text-3)}
.input:focus{border-color:var(--accent);box-shadow:0 0 0 4px var(--accent-soft)}

/* ---------- Шкала / прогресс ---------- */
.scale-track{height:8px;border-radius:var(--r-pill);background:var(--glass-2);overflow:hidden}
.scale-fill{height:100%;border-radius:var(--r-pill);background:linear-gradient(90deg,var(--accent-2),var(--accent));transition:width 1.1s var(--ease)}
.scale-fill.high{background:linear-gradient(90deg,var(--accent),var(--warn))}
.scale-fill.low{background:linear-gradient(90deg,var(--mid),var(--accent-2))}

/* ---------- Логотип ---------- */
.logo{display:inline-flex;align-items:center;gap:11px;flex-shrink:0}
.logo-mark{
  width:38px;height:38px;flex-shrink:0;position:relative;
  clip-path:polygon(50% 0%,100% 25%,100% 75%,50% 100%,0% 75%,0% 25%);
  background:linear-gradient(150deg,var(--accent),var(--accent-2));
  display:grid;place-items:center;
  box-shadow:var(--glow);
}
.logo-mark::after{content:'';position:absolute;inset:1.5px;clip-path:inherit;background:var(--bg);opacity:.0}
.logo-mark i{font-size:19px;color:var(--accent-ink);position:relative;z-index:1}
.logo-txt{line-height:1.1}
.logo-txt b{display:block;font-family:var(--font-display);font-size:16px;font-weight:600;letter-spacing:.01em;white-space:nowrap}
.logo-txt span{display:block;font-size:9.5px;letter-spacing:.28em;text-transform:uppercase;color:var(--accent);font-weight:700;white-space:nowrap}

/* ---------- Соты (сигнатура бренда) ---------- */
.hex{
  position:relative;width:100%;aspect-ratio:1/1.1;cursor:pointer;
  clip-path:polygon(50% 0%,100% 25%,100% 75%,50% 100%,0% 75%,0% 25%);
  background:var(--glass);border:0;overflow:hidden;
  transition:transform .4s var(--ease);
}
.hex:hover{transform:scale(1.05) translateY(-2px)}
.hex-photo{position:absolute;inset:0;background-size:cover;background-position:center;transition:transform .6s var(--ease),filter .4s}
.hex:hover .hex-photo{transform:scale(1.08);filter:brightness(1.15)}
.hex-scrim{position:absolute;inset:0;background:linear-gradient(180deg, rgba(6,12,18,.08) 0%, rgba(6,12,18,.30) 58%, rgba(6,12,18,.56) 100%)}
.hex-body{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:14% 16%;gap:8px;z-index:2}
.hex-body i{font-size:28px;color:#fff;filter:drop-shadow(0 2px 8px rgba(0,0,0,.5))}
.hex-name{font-family:var(--font-display);font-size:16px;font-weight:600;color:#fff;letter-spacing:.01em;text-shadow:0 2px 10px rgba(0,0,0,.6)}
.hex-sub{font-size:10.5px;color:rgba(255,255,255,.82);line-height:1.35;text-shadow:0 1px 6px rgba(0,0,0,.6)}
/* Текст соты подгоняем под уменьшённые соты на мобиле, чтобы влезал */
@media(max-width:680px){
  .hex-body{padding:10% 11%;gap:5px}
  .hex-body i{font-size:20px}
  .hex-name{font-size:12.5px;line-height:1.15}
  .hex-sub{font-size:9px;line-height:1.25}
}
@media(max-width:480px){
  .hex-body{padding:8% 9%;gap:3px}
  .hex-body i{font-size:16px}
  .hex-name{font-size:10.5px;line-height:1.12}
  .hex-sub{display:none}
}

/* ---------- Хедер ---------- */
.nav-a{padding:9px 15px;border-radius:var(--r-pill);font-size:14px;font-weight:600;color:var(--text-2);transition:color .2s,background .2s;white-space:nowrap}
.nav-a:hover{color:var(--text);background:var(--glass)}
.nav-a.active{color:var(--accent);background:var(--accent-soft)}
.nav-right{margin-left:auto;display:flex;align-items:center;gap:10px;flex-shrink:0}

/* ---------- Переключатель тем (выпадающий список) ---------- */
.theme-switch{display:inline-flex;gap:3px;padding:4px;border-radius:var(--r-pill);background:var(--glass);border:1px solid var(--border)}
.theme-opt{width:34px;height:34px;border:none;border-radius:var(--r-pill);background:transparent;color:var(--text-3);display:grid;place-items:center;transition:all .25s var(--ease)}
.theme-opt:hover{color:var(--text)}
.theme-opt i{font-size:17px}
.theme-opt.on{background:var(--accent);color:var(--accent-ink);box-shadow:var(--glow)}

.theme-dd{position:relative}
.theme-dd-trigger{display:inline-flex;align-items:center;gap:9px;padding:9px 13px;border:1px solid var(--border-2);border-radius:var(--r-pill);background:var(--glass);backdrop-filter:blur(var(--blur));-webkit-backdrop-filter:blur(var(--blur));color:var(--text);font-size:13.5px;font-weight:600;font-family:var(--font);transition:border-color .2s,box-shadow .2s}
.theme-dd-trigger:hover{border-color:var(--accent)}
.theme-dd.open .theme-dd-trigger{border-color:var(--accent);box-shadow:0 0 0 4px var(--accent-soft)}
.theme-dd-cur-ic{font-size:17px;color:var(--accent)}
.theme-dd-cur-name{min-width:54px;text-align:left}
.theme-dd-chev{font-size:15px;color:var(--text-3);transition:transform .25s var(--ease)}
.theme-dd.open .theme-dd-chev{transform:rotate(180deg)}
.theme-dd-menu{position:absolute;top:calc(100% + 8px);right:0;min-width:172px;padding:6px;border-radius:var(--r-sm);background:var(--nav-bg-2);border:1px solid var(--border-2);backdrop-filter:blur(var(--blur)) saturate(1.4);-webkit-backdrop-filter:blur(var(--blur)) saturate(1.4);box-shadow:0 18px 44px -16px rgba(0,0,0,.5);opacity:0;transform:translateY(-6px) scale(.98);transform-origin:top right;pointer-events:none;transition:opacity .2s var(--ease),transform .2s var(--ease);z-index:1000}
.theme-dd.open .theme-dd-menu{opacity:1;transform:none;pointer-events:auto}
.theme-dd-opt{display:flex;align-items:center;gap:11px;width:100%;padding:10px 12px;border:none;background:transparent;border-radius:var(--r-xs);color:var(--text-2);font-size:14px;font-weight:600;font-family:var(--font);text-align:left;transition:background .18s,color .18s}
.theme-dd-opt>span{flex:1}
.theme-dd-opt i:first-child{font-size:18px;color:var(--text-3);transition:color .18s}
.theme-dd-opt:hover{background:var(--glass-2);color:var(--text)}
.theme-dd-opt:hover i:first-child{color:var(--accent)}
.theme-dd-tick{font-size:16px;color:var(--accent);opacity:0;transition:opacity .18s}
.theme-dd-opt.on{color:var(--accent)}
.theme-dd-opt.on i:first-child{color:var(--accent)}
.theme-dd-opt.on .theme-dd-tick{opacity:1}

/* ---------- Секции ---------- */
.section{max-width:var(--maxw);margin:0 auto;padding:var(--sp-6) 32px}
.section-head{margin-bottom:var(--sp-4)}
.divider{height:1px;background:var(--border);border:0}

/* ---------- Футер ---------- */
.footer{border-top:1px solid var(--border);padding:48px 32px;text-align:center;color:var(--text-3);font-size:13px}

/* ---------- Слой лепестков сакуры ---------- */
#petals{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:50;display:none}
html[data-theme="sakura"] #petals{display:block}

/* ---------- Дерево сакуры (только тема sakura) ---------- */
#sakura-tree{position:fixed;bottom:0;right:-2vw;height:min(94vh,1000px);width:auto;z-index:-1;pointer-events:none;opacity:.96;display:none;filter:drop-shadow(0 10px 40px rgba(150,60,90,.18))}
html[data-theme="sakura"] #sakura-tree{display:block}
@media(max-width:760px){#sakura-tree{height:62vh;right:-12vw;opacity:.85}}

/* ---------- утилиты ---------- */
.row{display:flex;align-items:center;gap:var(--sp-2)}
.wrap{flex-wrap:wrap}
.center{text-align:center}
.stack{display:flex;flex-direction:column}
@media(max-width:1040px){
  .section{padding:56px 20px}
}

/* ============================================================
   ЧИТАЕМОСТЬ ТЕКСТА НА ФОТОФОНЕ (темы light и sakura)
   Без глобальной «дымки» — точечная защита текста
   ============================================================ */

/* ---------- Правовые страницы и контакты (.lg-wrap) ----------
   Контент лежит прямо на фотофоне, без scrim-слоя.
   Добавляем лёгкую полупрозрачную подложку под блок текста. */
html[data-theme="light"] .lg-wrap,
html[data-theme="sakura"] .lg-wrap {
  background: var(--glass-2);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-radius: var(--r-lg);
  margin-top: 80px;
  padding-top: 40px;
  padding-bottom: 40px;
}

/* ---------- Заголовок и описание на /tools ----------
   .tools-head — h1 + .lead — лежит на фотофоне без карточки.
   Даём лёгкую светлую подложку + text-shadow. */
html[data-theme="light"] .tools-head,
html[data-theme="sakura"] .tools-head {
  background: var(--glass-2);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-radius: var(--r-lg);
  padding: 32px 40px;
}
html[data-theme="light"] .tools-head h1,
html[data-theme="light"] .tools-head .h1,
html[data-theme="sakura"] .tools-head h1,
html[data-theme="sakura"] .tools-head .h1 {
  text-shadow: 0 2px 12px rgba(255,255,255,0.5);
}
html[data-theme="light"] .tools-head .lead,
html[data-theme="sakura"] .tools-head .lead {
  text-shadow: 0 1px 6px rgba(255,255,255,0.4);
}
html[data-theme="light"] .tools-head .eyebrow,
html[data-theme="sakura"] .tools-head .eyebrow {
  text-shadow: 0 1px 4px rgba(255,255,255,0.4);
}

/* ---------- hero-секции в light/sakura ----------
   .page-hero-scrim задаётся в шаблонах; усиливаем тень текста
   чтобы белый h1 читался на светлых фото (лес, сакура). */
html[data-theme="light"] .page-hero h1,
html[data-theme="sakura"] .page-hero h1 {
  text-shadow: 0 2px 8px rgba(0,0,0,0.8), 0 4px 32px rgba(0,0,0,0.6), 0 1px 2px rgba(0,0,0,0.9);
}
html[data-theme="light"] .page-hero .lead,
html[data-theme="sakura"] .page-hero .lead {
  text-shadow: 0 1px 6px rgba(0,0,0,0.7), 0 2px 16px rgba(0,0,0,0.5);
}
html[data-theme="light"] .page-hero .eyebrow,
html[data-theme="sakura"] .page-hero .eyebrow {
  text-shadow: 0 1px 6px rgba(0,0,0,0.6), 0 2px 12px rgba(0,0,0,0.4);
}

/* hero-секции: усиливаем scrim для light/sakura чуть больше
   чтобы белый текст стал контрастным на светлых фото */
html[data-theme="light"] .page-hero-scrim {
  background: linear-gradient(180deg,
    rgba(18,40,30,.58) 0%,
    rgba(18,40,30,.70) 55%,
    var(--bg) 100%) !important;
}
html[data-theme="sakura"] .page-hero-scrim {
  background: linear-gradient(180deg,
    rgba(80,20,40,.58) 0%,
    rgba(80,20,40,.70) 55%,
    var(--bg) 100%) !important;
}

/* ВАЖНО: в светлых темах пер-страничные фото-баннеры (.page-hero-bg/
   .page-hero-scrim) удалены из DOM, и белый hero-текст лежит прямо на
   ярком фоне темы (водопад/сакура) без затемнения → не читается.
   Добавляем вуаль псевдоэлементом — DOM-элемент не нужен. */
.page-hero{position:relative}
html[data-theme="light"] .page-hero::after,
html[data-theme="sakura"] .page-hero::after{
  content:'';position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,
    rgba(8,18,13,.62) 0%,
    rgba(8,18,13,.55) 60%,
    rgba(8,18,13,.20) 100%);
}
html[data-theme="sakura"] .page-hero::after{
  background:linear-gradient(180deg,
    rgba(40,10,22,.60) 0%,
    rgba(40,10,22,.52) 60%,
    rgba(40,10,22,.18) 100%);
}
/* контент hero — выше вуали */
.page-hero-in{position:relative;z-index:3}

/* ---------- /wishmap — секции вне hero ----------
   .wm-why, .wm-steps, .wm-cta и .wm-privacy лежат прямо на
   фотофоне в light/sakura (--page-scrim прозрачный).
   Даём им собственную стеклянную подложку. */
html[data-theme="light"] .wm-why,
html[data-theme="sakura"] .wm-why {
  background: var(--glass-2);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-radius: var(--r-lg);
  padding: 28px 32px;
}
/* ---------- Секции с .section-head на фотофоне ----------
   В light/sakura .section-head (заголовок + eyebrow) может лежать
   прямо на фото без карточки (например /tools, /meditations, /tests).
   Даём лёгкую стеклянную подложку. */
html[data-theme="light"] .section-head,
html[data-theme="sakura"] .section-head {
  background: var(--glass-2);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-radius: var(--r-lg);
  padding: 20px 32px;
  display: inline-block;
  width: auto;
}
/* center-выровненные section-head: растягиваем на ширину */
html[data-theme="light"] .section-head.center,
html[data-theme="sakura"] .section-head.center {
  display: block;
}