/* ====== SECTION 1: Ahşap İskele Vitrini ====== */
.sec{ position: relative; }
.sec-hero{
  padding: clamp(1.25rem, 3vw, 2rem) 0 2.5rem;
}
.sec-hero__grid{
  display:grid; gap: 1.5rem;
  grid-template-columns: 1.1fr .9fr;
  align-items: start;
}
.sec-hero__head{ padding-right: clamp(.5rem, 2vw, 2rem); }
.sec-hero__title{
  font-family:"Prata", serif;
  font-size: clamp(1.2rem, 1.6vw + 1rem, 1.8rem);
  color: var(--pr-wood-1);
  margin-bottom:.5rem;
}
.sec-hero__lead{ font-weight:600; color: var(--pr-ink-dim); }
.sec-hero__text{ margin-top:.5rem; }

/* 3’lü mozaik/ahşap vitrin */
.tile-stack{
  display:grid; gap: 1rem;
  grid-template-columns: 1fr 1fr;
  align-content:start;
}
.tile{
  background: var(--pr-white);
  border-radius: var(--radius-2xl);
  box-shadow: var(--shadow);
  padding: .75rem;
  position: relative;
  isolation: isolate;
  transition: transform .25s ease, box-shadow .25s ease;
}
.tile:hover{
  transform: translateY(-4px) rotate(-.2deg);
  box-shadow: 0 18px 40px rgba(15, 40, 70, .18);
}
.tile img{
  aspect-ratio: 7/4;
  object-fit: cover;
}

/* ahşap çerçeve efekti */
.tile::before{
  content:""; position:absolute; inset:-8px;
  background:
    linear-gradient(180deg, rgba(0,0,0,.07), transparent 30%),
    repeating-linear-gradient( 10deg, var(--pr-wood-2) 0 14px, var(--pr-wood-1) 14px 28px);
  z-index:-1; border-radius: calc(var(--radius-2xl) + 10px);
  filter: saturate(.9) contrast(.96);
}

/* Asimetrik yerleşim (3 görsel) */
.tile--left{ grid-column: 1/2; transform: rotate(-1deg); }
.tile--center{ grid-column: 2/3; transform: rotate(.6deg); }
.tile--right{ grid-column: 1/3; }

.floaty{ animation: floaty 6s ease-in-out infinite; }
.floaty.delay{ animation-delay: 1.5s; }
@keyframes floaty{
  0%,100%{ transform: translateY(0) }
  50%{ transform: translateY(-6px) }
}
.tilt:hover{ transform: translateY(-4px) rotate(.8deg); }

/* Ahşap ip şeridi */
.sec-hero__rope{
  position:absolute; inset: auto 0 -18px 0; height: 18px;
  background:
    radial-gradient(closest-side, #d9b38a 60%, transparent 62%) left/30px 100% repeat-x,
    linear-gradient(90deg, rgba(0,0,0,.15) 0 30px, transparent 30px);
  opacity:.7;
}

/* Ripple layer (JS baloncukları için) */
.sec-hero__ripple-layer{
  position:absolute; inset:0; pointer-events:none; overflow:hidden;
}
.ripple-dot{
  position:absolute; width: 6px; height:6px; border-radius: 999px; opacity:.85;
  background: radial-gradient(circle at 30% 30%, var(--pr-blue-2), var(--pr-blue-1));
  filter: blur(.2px);
  animation: ripple 1.8s ease-out forwards;
}
@keyframes ripple{
  0%{ transform: scale(1); opacity:.85; }
  80%{ transform: scale(16); opacity:.15; }
  100%{ transform: scale(22); opacity:0; }
}

/* Reveal daha keyifli */
.sec-hero.reveal.is-visible .tile{ animation: rise .6s ease both; }
.sec-hero.reveal.is-visible .tile:nth-child(1){ animation-delay: .05s; }
.sec-hero.reveal.is-visible .tile:nth-child(2){ animation-delay: .15s; }
.sec-hero.reveal.is-visible .tile:nth-child(3){ animation-delay: .25s; }
@keyframes rise{
  from{ transform: translateY(14px) rotate(0deg); opacity: 0; }
  to{ transform: translateY(0) rotate(var(--rot, 0deg)); opacity: 1; }
}

/* Responsiveness */
@media (max-width: 1024px){
  .sec-hero__grid{ grid-template-columns: 1fr; }
  .tile-stack{ grid-template-columns: 1fr 1fr; }
  .tile--right{ grid-column: 1/3; }
}
@media (max-width: 640px){
  .tile-stack{ grid-template-columns: 1fr; }
  .tile--left, .tile--center, .tile--right{ grid-column: 1/2; }
  .sec-hero__rope{ display:none; }
}
/* ====== Section title + copy helpers ====== */
.sec-title{
  font-family:"Prata", serif;
  color: var(--pr-blue-1);
  margin-bottom: .4rem;
  font-size: clamp(1.1rem, 1.2vw + 1rem, 1.6rem);
}
.sec-lead{ color: var(--pr-ink-dim); font-weight: 600; }
.sec-list{ margin:.75rem 0; padding-left: 1.1rem; }
.sec-list li{ margin:.25rem 0; }
.sec-text{ opacity:.95; }

/* ====== SECTION 2: Karo Laboratuvarı ====== */
.sec-lab{ padding: 2.25rem 0 2.75rem; }
.sec-lab__grid{
  display:grid; gap:1.5rem;
  grid-template-columns: 1.05fr .95fr;
  align-items:start;
}
.rhomb-grid{
  --sz: 164px;
  display:grid; gap: 1.25rem;
  grid-template-columns: repeat(3, var(--sz));
  justify-content:center;
  padding: .5rem;
  position: relative;
}
.rhomb{
  width: var(--sz); height: var(--sz);
  transform: rotate(45deg);
  border-radius: 16px;
  background: var(--pr-white);
  box-shadow: var(--shadow);
  display:flex; align-items:center; justify-content:center;
  position: relative; isolation:isolate;
  transition: transform .25s ease, box-shadow .25s ease;
}
.rhomb:hover{ transform: rotate(45deg) translateY(-4px); box-shadow: 0 18px 40px rgba(15, 40, 70, .18); }
.rhomb img{
  transform: rotate(-45deg);
  width: 100%; height: 100%; object-fit: cover; border-radius: 14px;
  max-width: 350px; /* безопасность под требование */
}
.rhomb figcaption{
  position:absolute; bottom:-2.1rem; transform: rotate(-45deg);
  font-size: .9rem; color: var(--pr-ink-dim);
}
.rhomb--big{ grid-column: 2; grid-row: 2; width: calc(var(--sz) + 22px); height: calc(var(--sz) + 22px); }

.sec-lab__rope{
  position:absolute; inset: auto 0 -16px 0; height: 16px;
  background:
    radial-gradient(closest-side, #d9b38a 60%, transparent 62%) left/26px 100% repeat-x,
    linear-gradient(90deg, rgba(0,0,0,.12) 0 26px, transparent 26px);
  opacity:.65;
}

/* ====== SECTION 3: Karşılaştırma ====== */
.sec-compare{ padding: 2.5rem 0; }
.sec-compare__grid{ display:grid; gap:1.5rem; }
.focus-pairs{
  display:grid; gap:1rem;
  grid-template-columns: 1fr 1fr .9fr;
  align-items:start;
}
.focus-card{
  background: var(--pr-white);
  border-radius: var(--radius-2xl);
  box-shadow: var(--shadow);
  padding: 1rem;
  transition: transform .25s ease, box-shadow .25s ease, outline-color .25s ease;
  outline: 2px solid transparent;
}
.focus-card:hover, .focus-card:focus{ transform: translateY(-4px); box-shadow: 0 18px 40px rgba(15, 40, 70, .18); outline-color: rgba(26,163,255,.4); }
.focus-card__bullets{ margin:.5rem 0 0 .9rem; }
.focus-card__bullets li{ margin:.25rem 0; }

.focus-card--wood{ background: linear-gradient(180deg, rgba(192,138,91,.08), transparent), var(--pr-white); }
.focus-card--tile{ background: linear-gradient(180deg, rgba(26,163,255,.08), transparent), var(--pr-white); }

.focus-aside{
  background: linear-gradient(180deg, rgba(0,0,0,.03), transparent), var(--pr-white);
  border-radius: var(--radius-2xl);
  box-shadow: var(--shadow);
  padding: 1rem;
}

/* ====== SECTION 4: Dalga Timeline ====== */
.sec-wave{ padding: 2.5rem 0 3rem; }
.wave-timeline{
  position: relative;
  padding: 1.25rem 0 0.5rem;
}
.wave-steps{
  list-style:none; margin:0; padding:0;
  display:grid; gap:2rem;
  grid-template-columns: repeat(4, 1fr);
  align-items:start;
}
.wave-step{
  position:relative;
  padding-top: .5rem;
}
.wave-step p{ margin-top:.4rem; font-size:.98rem; color: var(--pr-ink-dim); }

/* Dalga çizgisi: ilerleme dolgusu */
.wave-line{
  --progress: 0%;
  position:absolute; left: 0; right:0; top: 58%;
  height: 14px; transform: translateY(-50%);
  background:
    /* arka dalga izleri */
    radial-gradient(14px 10px at 7% 50%, rgba(26,163,255,.2), transparent 60%) repeat-x,
    radial-gradient(14px 10px at 50% 50%, rgba(26,163,255,.12), transparent 60%) repeat-x;
  background-size: 120px 100%, 120px 100%;
}
.wave-line::after{
  content:""; position:absolute; left:0; top:0; height:100%;
  width: var(--progress);
  background:
    radial-gradient(14px 10px at 7% 50%, rgba(26,163,255,.6), transparent 60%) repeat-x,
    radial-gradient(14px 10px at 50% 50%, rgba(26,163,255,.45), transparent 60%) repeat-x;
  background-size: 120px 100%, 120px 100%;
  transition: width .25s ease;
}

/* Hover halka etkisi (görsel kenarında) */
.wave-step figure{
  position:relative; display:inline-block;
}
.wave-step figure::after{
  content:""; position:absolute; inset:-6px; border-radius:16px;
  border: 2px dashed rgba(26,163,255,.35);
  opacity:0; transition: opacity .25s ease;
}
.wave-step figure:hover::after{ opacity:1; }

/* ====== Responsiveness ====== */
@media (max-width: 1140px){
  .sec-lab__grid{ grid-template-columns: 1fr; }
  .rhomb-grid{ grid-template-columns: repeat(3, minmax(120px, var(--sz))); }
}
@media (max-width: 900px){
  .focus-pairs{ grid-template-columns: 1fr; }
}
@media (max-width: 720px){
  .rhomb-grid{ grid-template-columns: repeat(2, minmax(120px, var(--sz))); }
  .rhomb--big{ grid-column: auto; grid-row:auto; }
  .wave-steps{ grid-template-columns: 1fr; }
  .wave-line{ display:none; }
}
/* --- FIX PACK: Rhomb grid mobile --- */

/* Чуть больше вертикального зазора под подписи и адаптивный размер ромба */
.rhomb-grid{
  --sz: clamp(120px, 28vw, 164px);
  column-gap: 1.1rem;
  row-gap: 2.4rem;        /* было gap одинаковый — из-за absolute-figcaption налезало */
  justify-items: center;  /* центрируем каждый ромб в своей колонке */
}

/* На средних — 2 колонки стабильно */
@media (max-width: 720px){
  .rhomb-grid{
    grid-template-columns: repeat(2, minmax(120px, 1fr));
  }
  .rhomb figcaption{
    bottom: -1.3rem;      /* подпись ближе к элементу, меньше шанс налезания */
  }
}

/* На очень узких — «квадратный» безопасный режим без поворотов */
@media (max-width: 420px){
  .rhomb{
    width: min(44vw, 160px);
    height: auto;
    aspect-ratio: 1 / 1;
    transform: none;          /* снимаем поворот */
    border-radius: 16px;
  }
  .rhomb img{
    transform: none;          /* картинку тоже выпрямляем */
    border-radius: 14px;
  }
  .rhomb figcaption{
    position: static;         /* подпись занимает место в потоке */
    transform: none;
    margin-top: .45rem;
    text-align: center;
  }
}

/* Чуть меньше наклон и амплитуда «подпрыгивания» — меньше шанс выхода за границы */
@media (max-width: 540px){
  .rhomb{ transition: transform .2s ease, box-shadow .25s ease; }
  .rhomb:hover{ transform: translateY(-3px) rotate(40deg); }
}
/* --- FIX: ромбы не выпускать изображение за границы --- */
.rhomb{
  overflow: hidden;          /* обрезаем всё, что выходит */
  contain: paint;            /* стабильная отрисовка при трансформациях */
  clip-path: inset(0 round 16px); /* сохраняем скругление даже при rotate */
}
.rhomb img{
  /* заполняем ромб по диагонали: sqrt(2) ≈ 1.414 */
  transform: rotate(-45deg) scale(1.42);
  transform-origin: 50% 50%;
  will-change: transform;
  backface-visibility: hidden;
}

/* подписи чуть ближе, чтобы не наезжали */
.rhomb figcaption{ bottom: -1.4rem; }

/* уменьшим «прыгучесть», чтобы не вылетало из клипа */
.rhomb:hover{ transform: rotate(45deg) translateY(-3px); }

/* На средних — безопасный режим: ромбы остаются, но картинка чуть меньше */
@media (max-width: 600px){
  .rhomb img{ transform: rotate(-45deg) scale(1.32); }
}

/* На узких — квадратный режим (без поворотов), ничего не вылезает */
@media (max-width: 480px){
  .rhomb{
    transform: none;
    width: min(44vw, 160px);
    height: auto;
    aspect-ratio: 1/1;
    clip-path: inset(0 round 16px); /* обычный скруглённый квадрат */
  }
  .rhomb img{
    transform: none;         /* убираем поворот и масштаб */
    object-fit: cover;
  }
  .rhomb figcaption{
    position: static;        /* подпись в потоке */
    transform: none;
    margin-top: .45rem;
    text-align: center;
  }
}

/* на всякий случай блокируем горизонтальный скролл */
html, body, .pr-body{ overflow-x: hidden; }
/* ====== SECTION 5: Şerit Raf ====== */
.sec-shelf{ padding: 2.5rem 0; }
.shelf-flow{ display:grid; gap: 1.25rem; }
.shelf-item{
  position: relative;
  display:grid; gap: 1rem;
  grid-template-columns: 1.2fr .9fr;
  align-items: start;
  background: var(--pr-white);
  border-radius: var(--radius-2xl);
  box-shadow: var(--shadow);
  padding: 1rem;
}
.shelf-item--reverse{ grid-template-columns: .9fr 1.2fr; }

.shelf-line{
  position:absolute; inset:auto 0 -14px 0; height:14px;
  background:
    radial-gradient(closest-side, #d9b38a 60%, transparent 62%) left/28px 100% repeat-x,
    linear-gradient(90deg, rgba(0,0,0,.12) 0 28px, transparent 28px);
  opacity:.7;
}
.shelf-copy h3{ margin:.1rem 0 .4rem; color: var(--pr-wood-1); font-family:"Prata", serif; }
.shelf-figure img{ aspect-ratio: 7/4; object-fit: cover; }
.shelf-item:hover{ transform: translateY(-3px); transition: transform .2s ease, box-shadow .2s ease; box-shadow: 0 18px 40px rgba(15,40,70,.18); }

@media (max-width: 880px){
  .shelf-item, .shelf-item--reverse{ grid-template-columns: 1fr; }
}

/* ====== SECTION 6: Chem gauge ====== */
.sec-chem{ padding: 2.75rem 0; }
.sec-chem__grid{ display:grid; gap:1.25rem; }
.chem-panel{ display:grid; gap: 1.25rem; grid-template-columns: 360px 1fr; align-items:start; }
@media (max-width: 960px){ .chem-panel{ grid-template-columns: 1fr; } }

.chem-gauge{
  --gsize: 280px;
  --needle: 0deg;                 /* управляется JS */
  position: relative;
  width: min(var(--gsize), 90vw);
  height: calc(min(var(--gsize), 90vw) / 2);
  margin-inline: auto;
  overflow: hidden;
  border-bottom-left-radius: var(--gsize);
  border-bottom-right-radius: var(--gsize);
  background: linear-gradient(180deg, rgba(26,163,255,.06), transparent);
  box-shadow: var(--shadow);
}
.chem-dial{
  position:absolute; inset:auto 0 0 0; height: calc(var(--gsize) / 2);
  background:
    conic-gradient(from 180deg,
      rgba(26,163,255,.5) 0 36deg,
      rgba(26,163,255,.25) 36deg 72deg,
      rgba(255,200,0,.25) 72deg 126deg,
      rgba(255,90,90,.25) 126deg 180deg);
}
.chem-pips{
  position:absolute; inset:auto 0 0 0; height: calc(var(--gsize)/2);
  background:
    repeating-conic-gradient(from 180deg, rgba(0,0,0,.16) 0 1deg, transparent 1deg 6deg);
  mask-image: linear-gradient(to top, black, transparent 70%);
  -webkit-mask-image: linear-gradient(to top, black, transparent 70%);
}
.chem-needle{
  position:absolute; left:50%; bottom:0;
  width:2px; height: calc(var(--gsize)/2 - 10px);
  background: var(--pr-ink);
  transform-origin: 50% 100%;
  transform: rotate(var(--needle));
  transition: transform 1s ease;
}
.chem-needle::after{
  content:""; position:absolute; bottom:-6px; left:50%; transform: translateX(-50%);
  width:14px; height:14px; border-radius:999px; background: var(--pr-ink);
}

.chem-labels{
  position:absolute; inset:auto 0 6px 0; display:flex; justify-content:space-between; padding: 0 .75rem;
  font-weight:700; color: var(--pr-ink-dim);
}
.chem-copy p + .sec-list{ margin-top:.5rem; }
.chem-figs{ display:flex; gap:1rem; flex-wrap:wrap; }
.chem-figs figure img{ aspect-ratio: 7/4; object-fit: cover; }

/* ====== SECTION 7: Stair collage ====== */
.sec-play{ padding: 2.75rem 0; }
.sec-play__grid{ display:grid; gap: 1.25rem; grid-template-columns: 1.1fr .9fr; align-items:start; }
@media (max-width: 1024px){ .sec-play__grid{ grid-template-columns: 1fr; } }

.stair-collage{
  display:grid; gap: .9rem;
  grid-template-columns: repeat(6, 1fr);
}
.stair{
  background: var(--pr-white);
  border-radius: var(--radius-2xl);
  box-shadow: var(--shadow);
  padding: .6rem;
  transition: transform .2s ease, box-shadow .2s ease;
}
.stair:hover{ transform: translateY(-3px); box-shadow: 0 18px 40px rgba(15,40,70,.18); }
.stair img{ aspect-ratio: 7/4; object-fit: cover; }

/* три ступени */
.stair--a{ grid-column: 1 / span 4; }
.stair--b{ grid-column: 2 / span 4; }
.stair--c{ grid-column: 3 / span 4; }

.play-copy h3{ margin:.1rem 0 .4rem; color: var(--pr-blue-1); font-family:"Prata", serif; }

@media (max-width: 720px){
  .stair-collage{ grid-template-columns: 1fr; }
  .stair--a, .stair--b, .stair--c{ grid-column: auto; }
}
.chem-gauge{
  --gsize: 280px;
  --needle: -90deg;            /* ← 0% = левая кромка */
  position: relative;
  width: min(var(--gsize), 90vw);
  height: calc(min(var(--gsize), 90vw) / 2);
  margin-inline: auto;
  overflow: hidden;
  border-bottom-left-radius: var(--gsize);
  border-bottom-right-radius: var(--gsize);
  background: linear-gradient(180deg, rgba(26,163,255,.06), transparent);
  box-shadow: var(--shadow);
}

.chem-dial{ position:absolute; inset:auto 0 0 0; height: calc(var(--gsize) / 2); z-index: 0; }
.chem-pips{ position:absolute; inset:auto 0 0 0; height: calc(var(--gsize)/2); z-index: 1; }
.chem-needle{
  position:absolute; left:50%; bottom:0;
  width:2px; height: calc(var(--gsize)/2 - 10px);
  background: var(--pr-ink);
  transform-origin: 50% 100%;
  transform: rotate(var(--needle));      /* теперь правильно интерпретируется */
  transition: transform 1s ease;
  z-index: 2;                            /* стрелка над шкалой */
}
.chem-needle::after{
  content:""; position:absolute; bottom:-6px; left:50%; transform: translateX(-50%);
  width:14px; height:14px; border-radius:999px; background: var(--pr-ink);
  box-shadow: 0 2px 4px rgba(0,0,0,.2) inset;
}
.chem-pips{
  position:absolute; inset:auto 0 0 0; height: calc(var(--gsize)/2); z-index:1;
  background:
    repeating-conic-gradient(from 180deg, rgba(0,0,0,.14) 0 1deg, transparent 1deg 8deg);
  mask-image: linear-gradient(to top, black, transparent 70%);
  -webkit-mask-image: linear-gradient(to top, black, transparent 70%);
}
/* === CHEM GAUGE: фикс оси стрелки на верхней кромке полукруга === */
.chem-needle{
  position: absolute;
  left: 50%;
  top: 0;                          /* ось вверху, по прямой */
  bottom: auto;                    /* отменяем старое */
  width: 2px;
  height: calc(var(--gsize)/2 - 10px);
  background: var(--pr-ink);
  transform-origin: 50% 0%;        /* вращаем вокруг верхней точки */
  transform: rotate(var(--needle));
  transition: transform 1s ease;
  z-index: 2;
}
.chem-needle::after{
  content: "";
  position: absolute;
  top: -7px;                       /* “шайба” на оси (видна наполовину) */
  left: 50%;
  transform: translateX(-50%);
  width: 14px; height: 14px;
  border-radius: 999px;
  background: var(--pr-ink);
  box-shadow: 0 2px 4px rgba(0,0,0,.2) inset;
}

/* чтобы стрелка/ось не обрезались из-за маски */
.chem-gauge{ overflow: hidden; }    /* оставляем, полукруг остаётся */
/* ====== SECTION 8: Handbook ====== */
.sec-handbook{ padding: 2.75rem 0; }
.sec-handbook__grid{
  display:grid; gap:1.25rem;
  grid-template-columns: 1.1fr .9fr;
  align-items:start;
}
.hb-chapters{
  background: linear-gradient(180deg, rgba(192,138,91,.1), transparent), var(--pr-white);
  border-radius: var(--radius-2xl);
  box-shadow: var(--shadow);
  padding: 1rem;
}
.hb-chapters ol{ margin:0; padding-left:1.1rem; }
.hb-pages{
  display:grid; gap: 1rem;
  grid-template-columns: 1fr 1fr 1fr;
}
.hb-page{
  background: var(--pr-white);
  border-radius: var(--radius-2xl);
  box-shadow: var(--shadow);
  padding: .9rem;
  position: relative;
  transition: transform .2s ease, box-shadow .2s ease;
}
.hb-page:hover, .hb-page:focus{ transform: translateY(-3px); box-shadow: 0 18px 40px rgba(15,40,70,.18); outline: none; }
.hb-page p{ margin-top:.4rem; color: var(--pr-ink-dim); }
.hb-tab{
  position:absolute; top:-10px; left:14px; width:86px; height:18px; border-radius: 12px 12px 0 0;
  background: repeating-linear-gradient( 12deg, var(--pr-wood-2) 0 12px, var(--pr-wood-1) 12px 24px);
  box-shadow: 0 4px 10px rgba(0,0,0,.1);
}

.hb-rope{
  height: 16px; margin-top: 1rem;
  background:
    radial-gradient(closest-side, #d9b38a 60%, transparent 62%) left/26px 100% repeat-x,
    linear-gradient(90deg, rgba(0,0,0,.12) 0 26px, transparent 26px);
  opacity:.65;
}

@media (max-width: 1024px){
  .sec-handbook__grid{ grid-template-columns: 1fr; }
  .hb-pages{ grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px){
  .hb-pages{ grid-template-columns: 1fr; }
}

/* ====== SECTION 9: Myths (details flip-feel) ====== */
.sec-myths{ padding: 2.75rem 0; }
.myth-grid{
  display:grid; gap:1rem;
  grid-template-columns: 1fr 1fr 1fr;
}
@media (max-width: 980px){ .myth-grid{ grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px){ .myth-grid{ grid-template-columns: 1fr; } }

.myth-card{
  background: var(--pr-white);
  border-radius: var(--radius-2xl);
  box-shadow: var(--shadow);
  overflow: hidden;
  transition: transform .2s ease, box-shadow .2s ease;
}
.myth-card:hover{ transform: translateY(-3px); box-shadow: 0 18px 40px rgba(15,40,70,.18); }

.myth-card > summary{
  list-style:none; cursor:pointer; padding: .95rem 1.1rem;
  background: linear-gradient(180deg, rgba(26,163,255,.08), transparent);
}
.myth-card[open] > summary{ background: linear-gradient(180deg, rgba(26,163,255,.14), transparent); }
.myth-card h3{ margin:0; font-size:1.02rem; color: var(--pr-blue-1); }
.myth-content{ padding: .9rem 1.1rem 1.1rem; color: var(--pr-ink-dim); }
.myth-content figure img{ aspect-ratio: 7/4; object-fit: cover; }

/* ====== SECTION 10: Chain (rope map) ====== */
.sec-chain{ padding: 2.75rem 0 3rem; }
.chain-track{ position: relative; padding: 1rem 0 0.5rem; }
.chain-steps{
  list-style:none; margin:0; padding:0;
  display:grid; gap:1.25rem;
  grid-template-columns: repeat(3, 1fr);
  align-items:start;
}
.chain-step p{ margin-top:.4rem; color: var(--pr-ink-dim); }

.chain-line{
  --progress: 0%;
  position:absolute; left: 0; right:0; top: 64%;
  height: 14px; transform: translateY(-50%);
  background:
    radial-gradient(14px 10px at 7% 50%, rgba(26,163,255,.2), transparent 60%) repeat-x,
    radial-gradient(14px 10px at 50% 50%, rgba(26,163,255,.12), transparent 60%) repeat-x;
  background-size: 120px 100%, 120px 100%;
}
.chain-line::after{
  content:""; position:absolute; left:0; top:0; height:100%;
  width: var(--progress);
  background:
    radial-gradient(14px 10px at 7% 50%, rgba(192,138,91,.7), transparent 60%) repeat-x,
    radial-gradient(14px 10px at 50% 50%, rgba(192,138,91,.45), transparent 60%) repeat-x;
  background-size: 120px 100%, 120px 100%;
  transition: width .25s ease;
}

@media (max-width: 900px){
  .chain-steps{ grid-template-columns: 1fr; }
  .chain-line{ display:none; }
}/* ====== SECTION 11: Palette ====== */
.sec-palette{ padding: 2.75rem 0; }
.sec-palette__grid{ display:grid; gap:1.25rem; grid-template-columns: 1.1fr .9fr; align-items:start; }
@media (max-width: 1024px){ .sec-palette__grid{ grid-template-columns: 1fr; } }

.palette-board{ background: var(--pr-white); border-radius: var(--radius-2xl); box-shadow: var(--shadow); padding: 1rem; }
.palette-swatches{ display:flex; gap:.5rem; }
.chip{
  flex: 0 0 auto; padding:.6rem .9rem; border-radius: 999px; border:0; cursor:pointer;
  font-weight:700; letter-spacing:.2px; color:#07304b; box-shadow: var(--shadow);
  transition: transform .15s ease, box-shadow .2s ease;
}
.chip:focus{ outline:2px solid rgba(26,163,255,.45); outline-offset:2px; }
.chip:hover{ transform: translateY(-2px); }
.chip--cold{ background: linear-gradient(180deg, #d9f1ff, #bfe6ff); }
.chip--vivid{ background: linear-gradient(180deg, #ccf4f2, #9ee7e2); }
.chip--deep{ background: linear-gradient(180deg, #c7d6ff, #9fb7ff); }

.palette-notes .note{ display:none; margin:.6rem 0 0; color: var(--pr-ink-dim); }
.palette-board[data-state="cold"]  .note--cold{  display:block; }
.palette-board[data-state="vivid"] .note--vivid{ display:block; }
.palette-board[data-state="deep"]  .note--deep{  display:block; }

.palette-figs{ display:flex; gap:1rem; flex-wrap:wrap; margin-top:.6rem; }
.palette-figs figure img{ aspect-ratio: 7/4; object-fit: cover; }

/* ====== SECTION 12: Energy ====== */
.sec-energy{ padding: 2.75rem 0; }
.energy-grid{ display:grid; gap:1.25rem; }
.energy-panel{
  background: var(--pr-white);
  border-radius: var(--radius-2xl);
  box-shadow: var(--shadow);
  padding: 1rem;
}
.energy-toggle{ display:flex; gap:.5rem; margin-bottom:.6rem; }
.mode-btn{
  padding:.5rem .9rem; border-radius: .75rem; border:0; cursor:pointer; font-weight:700;
  background: rgba(26,163,255,.12);
}
.mode-btn.is-active{ background: rgba(26,163,255,.22); }

.db-bars{ display:grid; gap:.6rem; margin:.3rem 0 .8rem; }
.bar{ position:relative; height: 16px; background: rgba(0,0,0,.06); border-radius: 999px; }
.bar-label{ position:absolute; left:8px; top:-1.3rem; font-size:.9rem; color: var(--pr-ink-dim); }
.bar-fill{
  position:absolute; left:0; top:0; height:100%; width: 0%;
  border-radius: 999px; transition: width .4s ease;
}
.bar-fill--db{   background: linear-gradient(90deg, #9cc7ff, #1aa3ff); }
.bar-fill--flow{ background: linear-gradient(90deg, #f2c79a, #c08a5b); }
.bar-val{ position:absolute; right:8px; top:-1.3rem; font-size:.9rem; color: var(--pr-ink-dim); }

.energy-panel[data-mode="night"] .bar-fill--db{   width: 34%; } /* ~52 dB */
.energy-panel[data-mode="night"] .bar-fill--flow{ width: 28%; }
.energy-panel[data-mode="day"]   .bar-fill--db{   width: 56%; } /* ~60 dB */
.energy-panel[data-mode="day"]   .bar-fill--flow{ width: 54%; }
.energy-panel[data-mode="peak"]  .bar-fill--db{   width: 78%; } /* ~68 dB */
.energy-panel[data-mode="peak"]  .bar-fill--flow{ width: 88%; }

.energy-figs{ display:flex; gap:1rem; flex-wrap:wrap; }

/* ====== SECTION 13: Schedule ====== */
.sec-schedule{ padding: 2.75rem 0 3rem; }
.cal-rail{ position: relative; }
.cal-steps{
  list-style:none; margin:0 0 .9rem 0; padding:0;
  display:grid; gap:.6rem; grid-template-columns: repeat(6, 1fr);
}
.cal-step{
  background: var(--pr-white); border-radius: .9rem; box-shadow: var(--shadow);
  padding: .6rem .7rem; font-size:.95rem;
}
.cal-line{
  --progress: 0%;
  position:absolute; left:0; right:0; bottom:-6px;
  height: 12px;
  background:
    radial-gradient(14px 10px at 7% 50%, rgba(26,163,255,.2), transparent 60%) repeat-x;
  background-size: 120px 100%;
}
.cal-line::after{
  content:""; position:absolute; left:0; top:0; height:100%;
  width: var(--progress);
  background:
    radial-gradient(14px 10px at 7% 50%, rgba(192,138,91,.75), transparent 60%) repeat-x;
  background-size: 120px 100%;
  transition: width .25s ease;
}
.schedule-aside{ display:grid; gap:1rem; grid-template-columns: 1fr 1fr; align-items:start; margin-top:1rem; }
.schedule-aside p{ grid-column:1 / -1; color: var(--pr-ink-dim); }

@media (max-width: 980px){
  .cal-steps{ grid-template-columns: 1fr 1fr 1fr; }
}
@media (max-width: 640px){
  .cal-steps{ grid-template-columns: 1fr; }
  .cal-line{ display:none; }
  .schedule-aside{ grid-template-columns: 1fr; }
}
/* ====== SECTION 14: Field log ====== */
.sec-field{ padding: 2.75rem 0; }
.field-grid{
  display:grid; gap:1.25rem;
  grid-template-columns: 1.2fr .8fr;
  align-items:start;
}
.field-aside{ display:grid; gap: .9rem; position: relative; }
.note-card{
  background: linear-gradient(180deg, rgba(26,163,255,.06), transparent), var(--pr-white);
  border-radius: var(--radius-2xl); box-shadow: var(--shadow); padding: .9rem;
}
.note-card h3{ margin:.1rem 0 .4rem; color: var(--pr-blue-1); font-family:"Prata", serif; }

.field-rows{ display:grid; gap: 1rem; }
.field-row{
  background: var(--pr-white); border-radius: var(--radius-2xl); box-shadow: var(--shadow);
  padding: .95rem; transition: transform .2s ease, box-shadow .2s ease; position: relative;
}
.field-row:hover{ transform: translateY(-3px); box-shadow: 0 18px 40px rgba(15,40,70,.18); }
.field-title{
  margin:.1rem 0 .4rem; color: var(--pr-wood-1); font-family:"Prata", serif;
}
.field-cols{ display:grid; gap:.6rem; grid-template-columns: 1fr 1fr; }
.field-rope{
  height: 16px; margin-top: 1rem;
  background:
    radial-gradient(closest-side, #d9b38a 60%, transparent 62%) left/26px 100% repeat-x,
    linear-gradient(90deg, rgba(0,0,0,.12) 0 26px, transparent 26px);
  opacity:.65;
}
@media (max-width: 980px){
  .field-grid{ grid-template-columns: 1fr; }
  .field-cols{ grid-template-columns: 1fr; }
}

/* ====== SECTION 15: Pledge / policy summary ====== */
.sec-pledge{ padding: 2.75rem 0 3rem; }
.pledge-grid{ display:grid; gap:1rem; }
.pledge-block{
  background: var(--pr-white); border-radius: var(--radius-2xl); box-shadow: var(--shadow);
  padding: 1rem;
}
.pledge-block + .pledge-block{ margin-top:.2rem; }
.pledge-block h3{ margin:.1rem 0 .5rem; color: var(--pr-blue-1); font-family:"Prata", serif; }

/* нумерация каплями воды */
.droplet{ list-style:none; margin:0; padding-left:0; counter-reset: drop; }
.droplet li{
  counter-increment: drop; margin: .4rem 0; padding-left: 2.2rem; position: relative;
}
.droplet li::before{
  content: counter(drop);
  position:absolute; left:0; top:.05rem;
  width: 1.6rem; height: 1.9rem; border-radius: 1.6rem 1.6rem 1.6rem 0;
  transform: rotate(45deg);
  background: radial-gradient(40% 40% at 30% 30%, #9cc7ff, #1aa3ff);
  color:#fff; font-weight:700; display:flex; align-items:center; justify-content:center;
  box-shadow: 0 6px 14px rgba(15,40,70,.18);
}

/* адаптив */
@media (max-width: 640px){
  .droplet li{ padding-left: 2rem; }
}