/* ==========
   HOME — Section 1: Rüzgâr Gülü Vitrini
   ========== */

.cw-section { padding: clamp(28px, 5vw, 56px) 0; }

.cw-rose__grid {
  display: grid;
  grid-template-columns: 1.1fr 0.6fr 1.1fr; /* metin | dekor | görseller */
  gap: clamp(16px, 3vw, 28px);
  align-items: center;
}

.cw-rose__title {
  font-size: clamp(24px, 3.6vw, 40px);
  line-height: 1.15;
  margin: 0 0 12px 0;
  background: linear-gradient(90deg, var(--cw-ink), var(--cw-lime));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.cw-rose__lead { color: var(--cw-ink-dim); }
.cw-rose__copy p { margin: 0 0 12px 0; }

.cw-rose__decor { position: relative; min-height: 380px; display: grid; place-items: center; }
.cw-rose__svg { width: min(100%, 420px); height: auto; filter: drop-shadow(0 8px 18px rgba(0,0,0,.35)); }
.cw-rose__ring {
  fill: none; stroke: var(--cw-ring); stroke-width: 2;
  animation: cw-pulse 8s ease-in-out infinite;
}
.cw-rose__ring--dash { stroke-dasharray: 6 8; stroke-linecap: round; opacity: .8; }
.cw-rose__blades path {
  fill: color-mix(in srgb, var(--cw-teal) 70%, white 20%);
  transform-origin: 300px 300px;
  animation: cw-spin 12s linear infinite;
}

/* 3 görseli içeren dairesel mozaik */
.cw-rose__media {
  display: grid;
  grid-template-areas:
    "a"
    "b"
    "c";
  gap: 14px;
  justify-items: end;
}
.cw-media__card {
  background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.01));
  border: 1px solid rgba(255,255,255,.06);
  border-radius: var(--cw-radius);
  padding: 10px;
  box-shadow: var(--cw-shadow);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
  position: relative;
  overflow: hidden;
}
.cw-media__card figcaption {
  margin-top: 8px; color: var(--cw-ink-dim); font-size: 14px;
}
.cw-media__card:hover {
  transform: translateY(-4px) rotate(-.3deg);
  border-color: rgba(167,255,75,.35);
  box-shadow: 0 14px 40px rgba(0,0,0,.45);
}

/* dairesel ofset — orta görseli daha yukarı al */
.cw-media__card--high { transform: translateY(-8%); }
.cw-media__card--high:hover { transform: translateY(-12%) rotate(.2deg); }

/* Tilt (JS will add small rotation via transform) */
.tilt { will-change: transform; }

/* Keyframes */
@keyframes cw-spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}
@keyframes cw-pulse {
  0%, 100% { stroke: var(--cw-ring); }
  50%      { stroke: color-mix(in srgb, var(--cw-teal) 40%, var(--cw-ring) 60%); }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .cw-rose__ring, .cw-rose__blades path { animation: none; }
  .reveal { opacity: 1; transform: none; }
  .cw-media__card, .cw-media__card--high { transform: none !important; }
}

/* Responsive layout for the section */
@media (max-width: 1100px) {
  .cw-rose__grid { grid-template-columns: 1fr .5fr 1fr; }
}
@media (max-width: 900px) {
  .cw-rose__grid { grid-template-columns: 1fr; }
  .cw-rose__decor { order: -1; min-height: 300px; }
  .cw-rose__media { justify-items: start; }
}
@media (max-width: 480px) {
  .cw-rose__media { gap: 10px; }
  .cw-media__card { padding: 8px; }
}
/* сделать линии чёткими на любых масштабах */
.cw-rose__svg { width: min(100%, 420px); height: auto; filter: drop-shadow(0 8px 18px rgba(0,0,0,.35));
  shape-rendering: geometricPrecision; will-change: transform; }

/* кольца */
.cw-rose__ring { fill: none; stroke: var(--cw-ring); stroke-width: 1.5; vector-effect: non-scaling-stroke;
  animation: cw-pulse 8s ease-in-out infinite; }
.cw-rose__ring--dash { stroke-dasharray: 4 8; opacity: .8; }

/* засечки */
.cw-rose__tick line { stroke: color-mix(in srgb, var(--cw-teal) 70%, #ffffff 0%); stroke-width: 1; opacity: .35; vector-effect: non-scaling-stroke; }
.cw-rose__tick--major line { stroke-width: 1.5; opacity: .6; }

/* вращение пунктирного кольца в обратную сторону */
.cw-rotate { animation: cw-spin-rev 24s linear infinite; transform-origin: 300px 300px; }

/* лопасти */
:root { --cw-blade-speed: 12s; } /* будет меняться JS-ом */
.cw-rose__blades path {
  transform-origin: 300px 300px;
  animation: cw-spin var(--cw-blade-speed) linear infinite;
}

/* keyframes */
@keyframes cw-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
@keyframes cw-spin-rev { from { transform: rotate(0deg); } to { transform: rotate(-360deg); } }

/* остальное остаётся как было… */
/* --- Расставляем области грид-сетки (desktop) --- */
.cw-rose__grid {
  display: grid;
  grid-template-columns: 1.1fr 0.6fr 1.1fr;
  grid-template-areas: "copy decor media";
  gap: clamp(16px, 3vw, 28px);
  align-items: center;
}
.cw-rose__copy  { grid-area: copy; }
.cw-rose__decor { grid-area: decor; }
.cw-rose__media { grid-area: media; }

/* Небольшие отступы для комфортного чтения */
.cw-rose__copy .cw-rose__title { margin-bottom: 10px; }
.cw-rose__copy p { margin: 0 0 12px 0; }

/* --- Мобильный порядок: СНАЧАЛА ТЕКСТ --- */
@media (max-width: 900px) {
  .cw-rose__grid {
    grid-template-columns: 1fr;
    grid-template-areas:
      "copy"   /* заголовок + текст */
      "decor"  /* компас */
      "media"; /* три изображения */
  }
  /* отменяем прежний order:-1 у декора, если он был */
  .cw-rose__decor { order: 0; min-height: 260px; margin-top: 8px; }
  .cw-rose__media { justify-items: start; margin-top: 8px; }
}

/* Чуть плотнее на очень узких экранах */
@media (max-width: 480px) {
  .cw-rose__decor { min-height: 220px; }
  .cw-media__card { padding: 8px; }
}
/* ========== SECTION 2 — Rüzgâr Koridoru ========== */
.cw-tunnel__grid {
  display: grid;
  grid-template-columns: 1fr 14px 1.1fr; /* metin | şerit | yığın */
  grid-template-areas: "copy ribbon stack";
  gap: clamp(16px, 3vw, 28px);
  align-items: start;
  position: relative;
}

.cw-tunnel__copy { grid-area: copy; }
.cw-tunnel__copy h2 {
  font-size: clamp(22px, 3.2vw, 34px);
  margin: 0 0 10px;
  color: var(--cw-ink);
}
.cw-tunnel__copy p { color: var(--cw-ink-dim); margin: 0 0 12px; }

.cw-tunnel__ribbon {
  grid-area: ribbon;
  width: 100%;
  border-radius: 999px;
  background:
    linear-gradient(180deg, rgba(167,255,75,.9), rgba(26,166,166,.6)),
    repeating-linear-gradient(180deg, rgba(0,0,0,.0) 0 16px, rgba(0,0,0,.08) 16px 32px);
  box-shadow: inset 0 0 12px rgba(0,0,0,.3), 0 0 24px rgba(167,255,75,.2);
  animation: cw-ribbon 8s ease-in-out infinite;
}
@keyframes cw-ribbon {
  0%,100% { filter: hue-rotate(0deg) brightness(1); }
  50%     { filter: hue-rotate(-10deg) brightness(1.08); }
}

.cw-tunnel__stack {
  grid-area: stack;
  display: grid;
  gap: 12px;
}
.cw-shot {
  background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.01));
  border: 1px solid rgba(255,255,255,.06);
  border-radius: var(--cw-radius);
  padding: 10px;
  box-shadow: var(--cw-shadow);
  overflow: hidden;
  transform: translateZ(0);
  will-change: transform;
}
.cw-shot img { width: min(100%, 350px); }
.cw-shot figcaption { margin-top: 6px; font-size: 14px; color: var(--cw-ink-dim); }
.cw-shot:hover { box-shadow: 0 16px 44px rgba(0,0,0,.45); }

/* mobile order: text -> ribbon -> stack */
@media (max-width: 900px) {
  .cw-tunnel__grid {
    grid-template-columns: 1fr;
    grid-template-areas:
      "copy"
      "ribbon"
      "stack";
  }
  .cw-tunnel__ribbon { height: 8px; border-radius: 8px; }
}

/* ========== SECTION 3 — Heks Mozaik Atlas ========== */
.cw-hex__head h2 { margin: 0 0 8px; font-size: clamp(22px, 3.2vw, 34px); }
.cw-hex__head p { margin: 0 0 16px; color: var(--cw-ink-dim); }

.cw-hex__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(180px, 1fr));
  gap: 16px;
  justify-items: center;
}
.cw-hex__cell {
  position: relative;
  width: 100%;
  max-width: 350px;
  aspect-ratio: 1 / 1;
  clip-path: polygon(25% 6%, 75% 6%, 100% 50%, 75% 94%, 25% 94%, 0% 50%);
  background: radial-gradient(80% 80% at 50% 50%, rgba(167,255,75,.12), rgba(255,255,255,0));
  border: 1px solid rgba(255,255,255,.08);
  transition: transform .25s ease, border-color .2s ease, box-shadow .25s ease;
  box-shadow: var(--cw-shadow);
  overflow: hidden;
}
.cw-hex__cell img { width: 100%; height: 100%; object-fit: cover; }
.cw-hex__cell::after {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(120% 120% at 0% 0%, rgba(26,166,166,.2), transparent 40%),
              radial-gradient(120% 120% at 100% 100%, rgba(167,255,75,.18), transparent 42%);
  mix-blend-mode: screen; pointer-events: none;
}
.cw-hex__cell:hover {
  transform: translateY(-6px) rotate(-.6deg);
  border-color: rgba(167,255,75,.28);
  box-shadow: 0 20px 48px rgba(0,0,0,.5);
}
.cw-hex__cell figcaption { position: absolute; left: 10px; bottom: 8px; font-size: 13px; color: var(--cw-ink); text-shadow: 0 2px 8px rgba(0,0,0,.6); }

@media (max-width: 900px) {
  .cw-hex__grid { grid-template-columns: repeat(2, minmax(150px, 1fr)); }
}
@media (max-width: 520px) {
  .cw-hex__grid { grid-template-columns: 1fr; }
}

/* ========== SECTION 4 — Hikâyeler (scroll-snap) ========== */
.cw-stories__head {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 12px;
  align-items: end;
}
.cw-stories__head h2 { margin: 0; font-size: clamp(22px, 3.2vw, 34px); }
.cw-stories__head p  { margin: 0; color: var(--cw-ink-dim); grid-column: 1 / -1; }

.cw-stories__controls { display: flex; gap: 8px; }
.cw-stories__btn { padding: 8px 12px; }

.cw-stories__rail {
  margin-top: 12px;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: max(280px, 33%);
  gap: 14px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding: 10px;
  padding-bottom: 6px;
  -webkit-overflow-scrolling: touch;
}
.cw-story {
  scroll-snap-align: start;
  border: 1px solid rgba(255,255,255,.06);
  border-radius: var(--cw-radius);
  padding: 10px;
  background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.01));
  box-shadow: var(--cw-shadow);
  min-height: 220px;
}
.cw-story img { width: min(100%, 300px); }
.cw-story figcaption { margin-top: 8px; font-size: 14px; color: var(--cw-ink-dim); }

@media (max-width: 720px) {
  .cw-stories__rail { grid-auto-columns: 80%; }
}
/* ========== SECTION 5 — ORBIT ========== */
.cw-orbit__wrap {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: clamp(16px, 3vw, 28px);
  align-items: center;
}
.cw-orbit__copy h2 { margin: 0 0 10px; font-size: clamp(22px, 3.2vw, 34px); }
.cw-orbit__copy p  { margin: 0 0 12px; color: var(--cw-ink-dim); }

.cw-orbit__scene {
  position: relative;
  aspect-ratio: 1/1;
  max-width: 420px;
  margin-inline: auto;
}
.cw-orbit__core {
  position: absolute; inset: 50% auto auto 50%;
  width: 120px; height: 120px; transform: translate(-50%, -50%);
  border-radius: 50%;
  display: grid; place-items: center;
  background: radial-gradient(circle at 30% 30%, rgba(167,255,75,.15), rgba(26,166,166,.15) 60%, transparent 65%);
  border: 1px solid rgba(255,255,255,.08);
  color: var(--cw-ink);
  font-weight: 700;
  letter-spacing: .5px;
  box-shadow: var(--cw-shadow);
}
.cw-orbit__scene::before,
.cw-orbit__scene::after{
  content:""; position:absolute; inset:0;
  border-radius:50%;
  border:1px solid var(--cw-ring);
  pointer-events:none;
}
.cw-orbit__scene::after{
  inset:12% 12% 12% 12%;
  border-style:dashed;
  animation: cw-spin-rev 24s linear infinite;
}

.cw-orbit__item {
  position: absolute; top: 50%; left: 50%;
  width: 200px; max-width: min(60%, 350px);
  transform-origin: -80px -80px; /* yörünge yarıçapı */
  animation: cw-orbit var(--cw-orbit-speed, 14s) linear infinite;
  filter: drop-shadow(0 8px 18px rgba(0,0,0,.35));
}
.cw-orbit__item img { width: 100%; height: auto; border-radius: var(--cw-radius); }
.cw-orbit__item figcaption { text-align:center; font-size:13px; color: var(--cw-ink-dim); margin-top:6px; }

/* farklı başlangıç açıları */
.cw-orbit__item--a { transform: rotate(15deg) translate(160px) rotate(-15deg); }
.cw-orbit__item--b { transform: rotate(135deg) translate(165px) rotate(-135deg); }
.cw-orbit__item--c { transform: rotate(255deg) translate(170px) rotate(-255deg); }

@keyframes cw-orbit {
  from { transform: rotate(var(--angle,0deg)) translate(165px) rotate(calc(-1 * var(--angle,0deg))); }
  to   { transform: rotate(calc(var(--angle,0deg) + 360deg)) translate(165px) rotate(calc(-1 * (var(--angle,0deg) + 360deg))); }
}

@media (max-width: 900px){
  .cw-orbit__wrap { grid-template-columns: 1fr; }
  .cw-orbit__scene { max-width: 360px; }
  .cw-orbit__item { width: 160px; }
}

/* ========== SECTION 6 — TIMELINE ========== */
.cw-timeline__grid{
  display:grid; grid-template-columns: 0.9fr 1.1fr; gap: clamp(16px,3vw,28px);
}
.cw-timeline__aside { position: sticky; top: calc(var(--cw-header-h) + 12px); align-self: start; }
.cw-timeline__aside h2 { margin: 0 0 8px; font-size: clamp(22px, 3.2vw, 32px); }
.cw-timeline__aside p { margin: 0 0 12px; color: var(--cw-ink-dim); }

.cw-timeline__bar{ position: relative; height: 260px; width: 10px; border-radius: 999px; background: rgba(255,255,255,.06); overflow: hidden; }
.cw-timeline__fill{ position:absolute; left:0; top:100%; width:100%; height:100%; background: linear-gradient(180deg, var(--cw-teal), var(--cw-lime)); transform: translateY(0); }

.cw-steps{ display:grid; gap:18px; }
.cw-step{
  border: 1px solid rgba(255,255,255,.06); border-radius: var(--cw-radius);
  background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.01));
  padding: 12px; box-shadow: var(--cw-shadow); transition: border-color .2s ease, box-shadow .2s ease;
}
.cw-step.is-active{ border-color: rgba(167,255,75,.28); box-shadow: 0 18px 42px rgba(0,0,0,.45); }
.cw-step h3{ margin: 0 0 6px; font-size: 18px; color: var(--cw-ink); }
.cw-step p{ margin: 6px 0 0; color: var(--cw-ink-dim); }
.cw-step img{ width: min(100%, 350px); }

@media (max-width: 900px){
  .cw-timeline__grid{ grid-template-columns: 1fr; }
  .cw-timeline__aside{ position: relative; top: auto; }
  .cw-timeline__bar{ height: 8px; width: 100%; }
  .cw-timeline__fill{ top:0; left:-100%; width:100%; height:100%; transform:none; }
}

/* ========== SECTION 7 — HUB ========== */

.cw-hub__grid{
  display:grid;
  grid-template-columns: 1.05fr 1fr;
  gap: clamp(16px,3vw,28px);
  align-items:center;
}
@media (max-width: 900px){
  .cw-hub__grid{ grid-template-columns: 1fr; }
}

.cw-hub__center h2{ margin:0 0 8px; font-size: clamp(22px,3.2vw,34px); }
.cw-hub__center p{ margin:0 0 12px; color: var(--cw-ink-dim); }

/* Кольцо с «спутниками» */
.cw-hub__ring{
  position: relative;
  width: min(100%, 420px);
  aspect-ratio: 1/1;
  border-radius: 50%;
  border: 1px solid var(--cw-ring);
  justify-self:center;
  box-shadow: var(--cw-shadow);
  animation: cw-spin 60s linear infinite;
}
.cw-hub__ring::after{
  content:"";
  position:absolute; inset:12%;
  border-radius:50%;
  border: 1px dashed color-mix(in srgb, var(--cw-teal) 60%, var(--cw-ring) 40%);
  animation: cw-spin-rev 40s linear infinite;
  opacity:.8;
}
.cw-hub__ring:hover{ animation-play-state: paused; }
.cw-hub__ring:hover::after{ animation-play-state: paused; }

/* Спутники по окружности (без инлайна — углы задаём nth-child) */
.cw-hub__sat{
  position:absolute; left:50%; top:50%;
  translate:-50% -50%;
  width: 46%;
  max-width: 300px;
  transform-origin: 50% calc(50% + var(--r, 160px)); /* радиус орбиты */
  filter: drop-shadow(0 8px 18px rgba(0,0,0,.35));
  transition: transform .25s ease, z-index .1s linear;
  z-index: 1;
}
.cw-hub__sat img{ width: min(100%, 300px); border-radius: var(--cw-radius); display:block; }
.cw-hub__sat figcaption{
  text-align:center; font-size:13px; color: var(--cw-ink-dim); margin-top:6px;
}
.cw-hub__sat:hover{ z-index: 2; }
.cw-hub__sat:hover img{ transform: scale(1.04); }

/* Раскладка по углам */
.cw-hub__sat:nth-child(1){ --a: 20deg;  transform: rotate(var(--a)) translateY(calc(var(--r,160px) * -1)) rotate(calc(-1 * var(--a))); }
.cw-hub__sat:nth-child(2){ --a: 110deg; transform: rotate(var(--a)) translateY(calc(var(--r,160px) * -1)) rotate(calc(-1 * var(--a))); }
.cw-hub__sat:nth-child(3){ --a: 200deg; transform: rotate(var(--a)) translateY(calc(var(--r,160px) * -1)) rotate(calc(-1 * var(--a))); }
.cw-hub__sat:nth-child(4){ --a: 290deg; transform: rotate(var(--a)) translateY(calc(var(--r,160px) * -1)) rotate(calc(-1 * var(--a))); }

/* Адаптив: на очень узких — превращаем в сетку 2×2 */
@media (max-width: 620px){
  .cw-hub__ring{
    animation:none; border:none; box-shadow:none;
    display:grid; grid-template-columns: repeat(2, minmax(140px,1fr)); gap:12px;
    width: 100%; aspect-ratio: auto;
  }
  .cw-hub__ring::after{ display:none; }
  .cw-hub__sat{
    position: relative; left:auto; top:auto; translate: none;
    width: 100%; transform:none; max-width: 100%;
  }
}

/* Reduce motion */
@media (prefers-reduced-motion: reduce){
  .cw-hub__ring, .cw-hub__ring::after{ animation: none; }
}
/* ========== SECTION 7 — PLEDGE (новая версия) ========== */
.cw-pledge__head h2{ margin:0 0 8px; font-size: clamp(22px,3.2vw,34px); }
.cw-pledge__head p { margin:0 0 16px; color: var(--cw-ink-dim); }

.cw-pledge__grid{
  display:grid;
  grid-template-columns: repeat(2, minmax(260px, 1fr));
  gap: 16px;
  align-items:start;
  /* диагональная «сшивка» блоков */
}
.cw-pledge__item{
  border:1px solid rgba(255,255,255,.06);
  border-radius: var(--cw-radius);
  background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.01));
  box-shadow: var(--cw-shadow);
  overflow: clip;
  transition: border-color .2s ease, box-shadow .25s ease;
  position: relative;
  /* зиг-заг оффсет */
}
.cw-pledge__item:nth-child(odd){ transform: translateY(-6px); }
.cw-pledge__item:nth-child(even){ transform: translateY(6px); }

.cw-pledge__summary{
  list-style:none;
  padding: 12px 42px 12px 14px;
  margin:0;
  cursor:pointer;
  font-weight:700; color: var(--cw-ink);
  position: relative;
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--cw-teal) 12%, transparent), transparent 40%),
    linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.00));
}
.cw-pledge__summary::-webkit-details-marker{ display:none; }

.cw-pledge__caret{
  position:absolute; right:12px; top:50%; translate:0 -50%;
  width: 16px; height: 16px;
  border: 2px solid var(--cw-ink-dim);
  border-left: none; border-top: none;
  transform: rotate(45deg);
  transition: transform .25s ease, border-color .2s ease;
}
.cw-pledge__item[open] .cw-pledge__caret{
  transform: rotate(225deg);
  border-color: var(--cw-lime);
}

.cw-pledge__body{
  display:grid; grid-template-columns: auto 1fr; gap: 12px;
  padding: 10px 14px 14px;
  align-items:start;
  /* wipe-эффект */
  --reveal: polygon(0 0, 0 0, 0 100%, 0 100%);
  clip-path: var(--reveal);
  animation: cw-pledge-reveal .45s ease forwards;
}
@keyframes cw-pledge-reveal{
  to { clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); }
}

.cw-pledge__fig img{ width: min(100%, 350px); border-radius: 12px; display:block; }
.cw-pledge__fig figcaption{ margin-top:6px; font-size:13px; color: var(--cw-ink-dim); }
.cw-pledge__body p{ margin: 0; color: var(--cw-ink-dim); }

.cw-pledge__item:is(:hover,[open]){ border-color: rgba(167,255,75,.28); box-shadow: 0 18px 42px rgba(0,0,0,.45); }

/* Диагональная сетка на широких экранах */
@media (min-width: 980px){
  .cw-pledge__grid{
    grid-template-columns: repeat(12, 1fr);
    gap: 18px;
  }
  .cw-pledge__item:nth-child(1){ grid-column: 1 / span 6; }
  .cw-pledge__item:nth-child(2){ grid-column: 7 / span 6; margin-top: 18px; }
  .cw-pledge__item:nth-child(3){ grid-column: 2 / span 5; }
  .cw-pledge__item:nth-child(4){ grid-column: 8 / span 5; margin-top: 18px; }
}

/* Мобилка — одна колонка */
@media (max-width: 640px){
  .cw-pledge__grid{ grid-template-columns: 1fr; }
  .cw-pledge__item{ transform:none; }
  .cw-pledge__body{ grid-template-columns: 1fr; }
}
/* --- HOTFIX: изоляция секций и клип контента --- */
.cw-section { isolation: isolate; }

/* Секция 5 (орбита): не выпускать элементы за пределы сцены */
.cw-orbit__scene { overflow: hidden; isolation: isolate; z-index: 0; }
.cw-orbit__item, .cw-orbit__core { z-index: 0; }

/* Секции ниже — поверх на всякий случай */
.cw-timeline, .cw-pledge, .cw-hex, .cw-stories, .cw-tunnel { position: relative; z-index: 1; }

/* Таймлайн: безопасные переносы, чтоб текст не «вылезал» */
.cw-step, .cw-step p, .cw-step figcaption {
  overflow-wrap: anywhere;
  word-break: break-word;
}
.cw-step figure { margin: 0; }
.cw-step img { max-width: 100%; height: auto; display: block; }

/* Мобилка: если что-то всё равно избыточно — гасим параллакс/крупный радиус орбиты */
@media (max-width: 900px){
  [data-parallaxy] { transform: none !important; } /* секция 2 */
  .cw-orbit__item { transform-origin: -60px -60px; } /* секция 5: меньше радиус */
}
/* ========== SECTION 8 — BALANCE (waterfall) ========== */
.cw-balance__grid{
  display:grid;
  grid-template-columns: 1fr;
  gap: 14px;
}
.cw-balance__copy h2{ margin:0 0 8px; font-size: clamp(22px,3.2vw,34px); }
.cw-balance__copy p{ margin:0; color: var(--cw-ink-dim); }

.cw-balance__chart{
  --h: 180px;
  position: relative;
  height: var(--h);
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.01));
  border: 1px solid rgba(255,255,255,.06);
  padding: 12px;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  align-items: end;
  gap: 12px;
  box-shadow: var(--cw-shadow);
  overflow: hidden;
}
.cw-bar{
  position: relative;
  height: 0%;
  background: linear-gradient(180deg, var(--cw-teal), color-mix(in srgb, var(--cw-lime) 60%, var(--cw-teal)));
  border-radius: 10px;
  transition: height .9s cubic-bezier(.2,.8,.2,1);
}
.cw-bar::after{
  content: attr(data-name);
  position: absolute; inset: auto 0 -18px 0;
  text-align: center; font-size: 12px; color: var(--cw-ink-dim);
}
.cw-bar--neg{
  background: linear-gradient(180deg, #ff7a3d, #c95c28);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.06);
}
.cw-bar.cw-bar--sum{
  background: linear-gradient(180deg, #78e0ff, #1aa6a6);
}
.cw-balance__chips{
  display:grid; grid-template-columns: repeat(2, minmax(180px, 1fr)); gap: 12px;
}
.cw-balance__chips img{ width: min(100%, 350px); border-radius: var(--cw-radius); }
.cw-balance__chips figcaption{ margin-top:6px; font-size:13px; color: var(--cw-ink-dim); }

@media (max-width: 560px){
  .cw-balance__chips{ grid-template-columns: 1fr; }
}

/* ========== SECTION 9 — SLICE (topographic layers) ========== */
.cw-slice__grid{
  display:grid; gap: 16px;
  grid-template-columns: 0.9fr 1.1fr;
  align-items: center;
}
@media (max-width: 900px){
  .cw-slice__grid{ grid-template-columns: 1fr; }
}
.cw-slice__scene{
  position: relative; height: 240px; border-radius: 14px;
  overflow: hidden; border: 1px solid rgba(255,255,255,.06);
  background: radial-gradient(80% 80% at 50% 0%, rgba(120,224,255,.08), transparent 60%);
  box-shadow: var(--cw-shadow);
}
.cw-slice__layer{
  position: absolute; inset: 0; background: linear-gradient(180deg, rgba(26,166,166,.25), rgba(7,26,26,0));
  clip-path: polygon(0 60%, 20% 50%, 35% 55%, 55% 40%, 70% 44%, 100% 30%, 100% 100%, 0 100%);
  filter: blur(0.2px);
  animation: cw-swell 12s ease-in-out infinite;
}
.cw-slice__layer--mid{
  clip-path: polygon(0 70%, 18% 62%, 33% 64%, 53% 48%, 72% 54%, 100% 40%, 100% 100%, 0 100%);
  opacity: .6; animation-duration: 16s;
}
.cw-slice__layer--far{
  clip-path: polygon(0 78%, 22% 70%, 42% 66%, 60% 58%, 82% 60%, 100% 50%, 100% 100%, 0 100%);
  opacity: .35; animation-duration: 22s;
}
.cw-slice__line{
  position:absolute; left:0; right:0; top:56%;
  height:2px; background: linear-gradient(90deg, transparent, var(--cw-lime), transparent);
  opacity:.7;
}
@keyframes cw-swell {
  0%,100%{ transform: translateY(0); }
  50%{ transform: translateY(-6px); }
}

.cw-slice__copy h2{ margin:0 0 8px; font-size: clamp(22px,3.2vw,34px); }
.cw-slice__copy p{ margin:0 0 10px; color: var(--cw-ink-dim); }
.cw-slice__pins{ display:grid; grid-template-columns: repeat(2, minmax(180px,1fr)); gap: 12px; }
.cw-pin img{ width: min(100%, 350px); border-radius: var(--cw-radius); }
.cw-pin figcaption{ margin-top:6px; font-size:13px; color: var(--cw-ink-dim); }
@media (max-width: 560px){ .cw-slice__pins{ grid-template-columns: 1fr; } }

/* ========== SECTION 10 — LABNOTES ========== */
.cw-labnotes__head h2{ margin:0 0 8px; font-size: clamp(22px,3.2vw,34px); }
.cw-labnotes__head p{ margin:0 0 10px; color: var(--cw-ink-dim); }

.cw-labnotes__board{
  display:grid;
  grid-template-columns: repeat(2, minmax(220px, 1fr));
  gap: 14px;
}
@media (max-width: 700px){
  .cw-labnotes__board{ grid-template-columns: 1fr; }
}
.cw-note{
  border: 1px solid rgba(255,255,255,.06);
  border-radius: 16px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.01)),
    radial-gradient(80% 80% at 0% 0%, rgba(26,166,166,.14), transparent 50%);
  padding: 12px;
  box-shadow: var(--cw-shadow);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.cw-note:hover{ transform: translateY(-4px) rotate(-.3deg); border-color: rgba(167,255,75,.28); box-shadow: 0 18px 42px rgba(0,0,0,.45); }
.cw-note h3{ margin: 0 0 6px; font-size: 18px; color: var(--cw-ink); }
.cw-note p{ margin: 8px 0 10px; color: var(--cw-ink-dim); }
.cw-note img{ width: min(100%, 350px); border-radius: 12px; display:block; }
/* ========== SECTION 11 — ROUTE ========== */
.cw-route__grid{
  display:grid; gap:16px;
}
.cw-route__copy h2{ margin:0 0 8px; font-size:clamp(22px,3.2vw,34px); }
.cw-route__copy p{ margin:0; color:var(--cw-ink-dim); }

.cw-route__scene{
  position:relative; border:1px solid rgba(255,255,255,.06);
  border-radius:14px; background:linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.01));
  padding:6px; overflow:hidden; box-shadow:var(--cw-shadow);
}
.cw-route__svg{ width:100%; height:auto; display:block; }
.cw-route__line{
  fill:none; stroke:color-mix(in srgb, var(--cw-teal) 70%, #fff 0%); stroke-width:2;
  stroke-dasharray: 900; stroke-dashoffset: 900;
  animation: cw-draw 1.6s ease forwards;
}
@keyframes cw-draw{ to{ stroke-dashoffset:0; } }
.cw-route.is-visible .cw-route__line{ animation-play-state: running; }

.cw-mark{ fill:var(--cw-lime); filter:drop-shadow(0 2px 8px rgba(0,0,0,.4)); }

.cw-route__pin{
  position:absolute; width:min(100%, 320px);
  background:linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.01));
  border:1px solid rgba(255,255,255,.06); border-radius:14px; padding:8px;
  box-shadow:var(--cw-shadow); transition: transform .2s ease, box-shadow .2s ease;
}
.cw-route__pin:hover{ transform: translateY(-4px) rotate(-.4deg); box-shadow:0 18px 42px rgba(0,0,0,.45); }
.cw-route__pin figcaption{ margin-top:6px; font-size:13px; color:var(--cw-ink-dim); }
.cw-route__pin--a{ left:14px; top:18px; }
.cw-route__pin--b{ right:14px; bottom:12px; }

@media (max-width: 560px){
  .cw-route__pin--a{ left:8px; top:8px; }
  .cw-route__pin--b{ right:8px; bottom:8px; }
}

/* ========== SECTION 12 — ACOUSTIC ========== */
.cw-acoustic__grid{
  display:grid; gap:16px; grid-template-columns: 0.9fr 1.1fr; align-items:center;
}
@media (max-width: 900px){ .cw-acoustic__grid{ grid-template-columns: 1fr; } }

.cw-acoustic__scene{
  position:relative; display:grid; place-items:center;
  border:1px solid rgba(255,255,255,.06); border-radius:14px; padding:6px; box-shadow:var(--cw-shadow);
  background: radial-gradient(80% 80% at 50% 30%, rgba(120,224,255,.08), transparent 60%);
  overflow:hidden;
}
.cw-acoustic__svg{ width:min(100%, 300px); height:auto; display:block; }
.cw-acoustic__rings circle{
  fill:none; stroke:var(--cw-ring); stroke-width:1.5; vector-effect:non-scaling-stroke;
}
.cw-acoustic__sectors path{
  transform-origin:150px 150px;
  fill: color-mix(in srgb, var(--cw-teal) 28%, transparent);
  opacity:.75;
}
.cw-acoustic__sectors path.is-active{
  fill: color-mix(in srgb, var(--cw-lime) 55%, var(--cw-teal) 25%);
  opacity: .95;
}
.cw-acoustic__copy h2{ margin:0 0 8px; font-size:clamp(22px,3.2vw,34px); }
.cw-acoustic__copy p{ margin:0 0 10px; color:var(--cw-ink-dim); }
.cw-acoustic__img img{ width:min(100%, 350px); border-radius:var(--cw-radius); }
.cw-acoustic__img figcaption{ margin-top:6px; font-size:13px; color:var(--cw-ink-dim); }

/* ========== SECTION 13 — FAQ ========== */
.cw-faq__grid{ display:grid; grid-template-columns: 1.1fr 0.9fr; gap:16px; align-items:start; }
@media (max-width: 900px){ .cw-faq__grid{ grid-template-columns: 1fr; } }
.cw-faq__copy h2{ margin:0 0 8px; font-size:clamp(22px,3.2vw,34px); }

.cw-faq__item{
  border:1px solid rgba(255,255,255,.06); border-radius:14px;
  background:linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.01));
  padding:10px 12px; margin:0 0 10px; box-shadow:var(--cw-shadow);
}
.cw-faq__item summary{ cursor:pointer; font-weight:700; color:var(--cw-ink); list-style:none; }
.cw-faq__item summary::-webkit-details-marker{ display:none; }
.cw-faq__item p{ color:var(--cw-ink-dim); margin:8px 0 0; }
.cw-faq__img img{ width:min(100%, 350px); border-radius:var(--cw-radius); }
.cw-faq__img figcaption{ margin-top:6px; font-size:13px; color:var(--cw-ink-dim); }
/* === ROUTE: мобильная правка (≤700px) — схема сверху, пины ниже === */
@media (max-width: 700px){
  .cw-route__scene{
    padding: 10px;
    overflow: visible;        /* чтобы тени не обрезались */
    border-radius: 14px;
  }
  .cw-route__svg{
    width: 100%;
    height: auto;
    display: block;
  }
  /* делаем карточки обычными блочными: никакого позиционирования */
  .cw-route__pin{
    position: static !important;
    left: auto !important; right: auto !important;
    top: auto !important;  bottom: auto !important;
    transform: none !important;
    width: 100%;
    margin-top: 10px;
  }
  .cw-route__pin img{ width: min(100%, 350px); height: auto; display: block; }
  .cw-route__pin figcaption{ white-space: normal; }

  /* чуть компактнее внутренние отступы у сцены на узких экранах */
  .cw-route__pin--a, .cw-route__pin--b{ box-shadow: var(--cw-shadow); }
}
/* ========== SECTION 14 — KPI PANEL ========== */
.cw-kpi__head h2{ margin:0 0 8px; font-size:clamp(22px,3.2vw,34px); }
.cw-kpi__head p{ margin:0 0 14px; color:var(--cw-ink-dim); }
.cw-kpi__grid{
  display:grid; gap:14px;
  grid-template-columns: repeat(3, minmax(220px, 1fr));
}
@media (max-width: 900px){ .cw-kpi__grid{ grid-template-columns: 1fr; } }

.cw-kpi__tile{
  position:relative;
  border:1px solid rgba(255,255,255,.06);
  border-radius:16px;
  padding:12px;
  background:
    radial-gradient(80% 80% at 0% 0%, rgba(26,166,166,.14), transparent 50%),
    linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.01));
  box-shadow:var(--cw-shadow);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.cw-kpi__tile:hover{ transform: translateY(-4px); border-color: rgba(167,255,75,.28); box-shadow:0 18px 42px rgba(0,0,0,.45); }

.cw-kpi__gauge{
  --val: 0; /* 0..1 */
  aspect-ratio:1/1; width: 140px; border-radius:50%;
  background: conic-gradient(var(--cw-lime) calc(var(--val)*1turn), rgba(255,255,255,.08) 0);
  position:relative; margin: 6px auto 8px;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.06);
}
.cw-kpi__ring{ position:absolute; inset:8px; border-radius:50%; border:1px dashed var(--cw-ring); }
.cw-kpi__cap{ position:absolute; inset:20px; border-radius:50%; background: rgba(7,26,26,.8); }

.cw-kpi__label{ margin:0; font-size:16px; color:var(--cw-ink); text-align:center; }
.cw-kpi__num{ margin:4px 0 6px; font: 700 24px/1 "Manrope", sans-serif; text-align:center; color:var(--cw-ink); }
.cw-kpi__desc{ margin:0; color:var(--cw-ink-dim); text-align:center; }

/* ========== SECTION 15 — MANIFESTO ========== */
.cw-manifest{
  /* сдержанный фон с «складкой» */
  background:
    linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,0)),
    radial-gradient(90% 50% at 100% 0%, rgba(167,255,75,.07), transparent 60%);
}
.cw-manifest__head h2{ margin:0 0 8px; font-size:clamp(22px,3.2vw,34px); }
.cw-manifest__head p{ margin:0 0 12px; color:var(--cw-ink-dim); }

.cw-manifest__list{
  counter-reset: man; list-style:none; padding:0; margin:0;
  display:grid; gap:10px;
  grid-template-columns: repeat(2, minmax(260px,1fr));
}
@media (max-width: 800px){ .cw-manifest__list{ grid-template-columns: 1fr; } }

.cw-manifest__list li{
  position:relative; padding:12px 12px 12px 44px;
  border:1px solid rgba(255,255,255,.06); border-radius:14px;
  background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.01));
  box-shadow: var(--cw-shadow);
}
.cw-manifest__list li::before{
  counter-increment: man; content: counter(man);
  position:absolute; left:10px; top:12px;
  width:24px; height:24px; border-radius:50%;
  display:grid; place-items:center;
  background: linear-gradient(180deg, var(--cw-teal), var(--cw-lime));
  color:#001a1a; font-weight:700;
  box-shadow: 0 2px 8px rgba(0,0,0,.35);
}
.cw-manifest__cta{ display:flex; gap:10px; margin-top:14px; flex-wrap:wrap; }
/* ===== ГЛОБАЛЬНО: срежем любой горизонтальный оверфлоу безопасно */
html, body { max-width: 100%; overflow-x: hidden; }
@supports (overflow: clip) { html, body { overflow-x: clip; } }

/* ===== ROUTE (секция 11) — мобилка: жёстко без оверфлоу и лишней ширины */
@media (max-width: 700px){
  .cw-route__scene{
    overflow: hidden;          /* было visible — из-за этого появлялся общий скролл */
    padding: 10px;
    border-radius: 14px;
    max-width: 100%;
    box-sizing: border-box;
  }

  /* карточки-пины становятся обычными блочными + никогда не шире контейнера */
  .cw-route__pin{
    position: static !important;
    transform: none !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 10px 0 0;
    overflow: hidden;          /* клип по радиусу */
    border-radius: 14px;
    box-sizing: border-box;
    contain: layout paint;     /* изоляция, чтобы тени/эффекты не влияли на раскладку */
  }
  .cw-route__pin img{
    display: block;
    width: 100% !important;
    max-width: 100%;
    height: auto;
    border-radius: 8px;
  }
  .cw-route__pin figcaption{
    white-space: normal;
    overflow-wrap: anywhere;
  }
}

/* подстраховка: любые figure никогда не шире контейнера */
figure { max-width: 100%; }
/* ===== HOME · S8 — Enerji Dengesi: меньше блок + подписи внутри, не обрезаются ===== */
.cw-section.cw-balance .cw-balance__chart{
  /* делаем график ниже и добавляем место под подписи */
  height: clamp(150px, 22vw, 220px);
  padding: 14px 16px 36px;            /* +нижний паддинг для текста */
  border-radius: 14px;
  overflow: visible;                  /* на всякий случай, если раньше было hidden */
}

/* ограничиваем рост столбиков, чтобы они не «упирались» в низ/паддинг */
.cw-section.cw-balance .cw-bar{
  max-height: calc(100% - 36px);      /* учитываем нижний паддинг контейнера */
  border-radius: 14px;
}

/* подписи под столбиками — держим внутри блока и не даём обрезаться */
.cw-section.cw-balance .cw-bar::after{
  bottom: 8px !important;             /* раньше могло быть отрицательное значение */
  left: 0; right: 0;
  text-align: center;
  font-size: 12px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* чуть компактнее на мобильных */
@media (max-width: 720px){
  .cw-section.cw-balance .cw-balance__chart{
    height: 180px;
    padding-bottom: 40px;             /* запас под длинные подписи */
  }
}
/* ==== HOME · S8 — полировка подписей на шалаш-диаграмме ==== */
.cw-section.cw-balance .cw-balance__chart{
  position: relative;
  height: clamp(150px, 22vw, 220px);
  padding: 14px 16px 44px;       /* запас снизу под «вынесенные» подписи */
  overflow: visible;
}

.cw-section.cw-balance .cw-bar{
  position: relative;
  max-height: calc(100% - 44px);
  border-radius: 14px;
}

/* подпись по умолчанию — внутри столбца, по центру */
.cw-section.cw-balance .cw-bar::after{
  content: attr(data-name);
  position: absolute;
  left: 50%; transform: translateX(-50%);
  bottom: 10px;
  padding: 0 6px;
  max-width: calc(100% - 12px);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 13px;
  line-height: 1.1;
  color: #fff;
  text-shadow: 0 1px 2px rgba(0,0,0,.45);
  pointer-events: none;
}

/* узкие/низкие столбики — подпись под столбцом, тень не нужна */
.cw-section.cw-balance .cw-bar.is-slim::after{
  bottom: -18px;                 /* выводим ниже бара */
  color: var(--cw-ink);
  text-shadow: none;
  font-size: 12px;
}

/* на мобильных подписи компактнее, но не ломаются */
@media (max-width: 720px){
  .cw-section.cw-balance .cw-balance__chart{ padding-bottom: 48px; }
  .cw-section.cw-balance .cw-bar::after{ font-size: 12px; }
}
