/* ===== Hero Triptych ===== */
.hero-triptych{ padding-block: 28px 32px; }
.hero-grid{
  display: grid; gap: 28px;
  grid-template-columns: 1.15fr .85fr;
  align-items: center;
}
.hero-copy h1{
  font-family: "Playfair Display", serif;
  font-weight: 700; line-height: 1.15; letter-spacing: .2px;
  font-size: clamp(26px, 3.2vw, 44px);
  margin: 0 0 10px 0;
}
.hero-copy .lead{ color: #dfe7de; margin: 0 0 10px 0; }
.hero-copy p{ color: #cbd6cb; }
.hero-points{ margin: 12px 0 0 0; padding: 0 0 0 18px; }
.hero-points li{ margin: 6px 0; }

.hero-gallery{
  display: grid; gap: 12px;
  grid-template-areas:
    "t1 t2"
    "t3 t2";
  grid-template-columns: 1fr 1fr;
}
.tile{ position: relative; background: var(--c-panel); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); }
.tile img{
  aspect-ratio: 4/5; object-fit: cover;
  transition: transform .6s var(--ease), filter .6s var(--ease);
  filter: saturate(1.02) contrast(1.02);
}
.tile:hover img{ transform: scale(1.05); }
.tile figcaption{
  position: absolute; inset-inline: 10px; inset-block-end: 8px;
  background: rgba(15,18,15,.55);
  backdrop-filter: blur(3px);
  color: var(--c-text); font-size: 12px; padding: 6px 8px; border-radius: 10px;
  border: 1px solid rgba(255,255,255,.08);
}

.t1{ grid-area: t1; transform: rotate(-1deg); }
.t2{ grid-area: t2; transform: rotate(1deg); }
.t3{ grid-area: t3; transform: rotate(-.5deg); }
.tile:hover{ transform: rotate(0deg) scale(1.01); transition: transform .35s var(--ease); }

/* Subtle grain overlay to add tactile feel */
.tile::after{
  content:""; position:absolute; inset:0;
  background-image: radial-gradient(rgba(255,255,255,.03), transparent 40%);
  background-size: 2px 2px; mix-blend-mode: overlay; pointer-events: none;
}

/* ===== Adaptive breakpoints ===== */
@media (max-width: 1100px){
  .hero-grid{ grid-template-columns: 1fr; }
  .hero-gallery{ order: -1; }
}

@media (max-width: 720px){
  .hero-gallery{
    grid-template-areas:
      "t1"
      "t2"
      "t3";
    grid-template-columns: 1fr;
  }
  .t1,.t2,.t3{ transform: none; }
}

@media (max-width: 360px){
  .hero-copy .lead, .hero-copy p{ font-size: 15px; }
}
/* === Mobile: текст сверху, изображения ниже === */
@media (max-width: 1100px){
  .hero-grid{ grid-template-columns: 1fr; }
  .hero-copy{ order: 1; }
  .hero-gallery{ order: 2; } /* было order:-1 — убираем */
}
/* ===== [S2] Материалы и фактуры ===== */
.materials-ladder{ padding-block: 36px; }
.m-grid{
  display:grid; grid-template-columns: 1.1fr .9fr; gap: 28px; align-items: start;
}
.m-copy h2{ font-family:"Playfair Display",serif; margin:0 0 8px; font-size:clamp(22px,2.4vw,34px); }
.ladder{ display:grid; gap:10px; margin-top:14px; }
.rung{
  display:grid; grid-template-columns:auto 1fr auto; align-items:center;
  gap:10px; padding:10px 12px; background:var(--c-panel);
  border:1px solid rgba(255,255,255,.06); border-radius:14px;
}
.rung .label{ font-weight:600; }
.rung i{
  --v: 50; /* проценты ширины столбика */
  display:block; inline-size:100%; block-size:8px; border-radius:6px;
  background: linear-gradient(90deg, var(--c-moss), var(--c-meadow));
  mask: linear-gradient(90deg,#000 calc(var(--v)*1%), transparent 0);
}
.rung em{ opacity:.8; font-style:normal; font-size:14px; }

/* значения столбиков */
.v-80 i{ --v:80; } .v-70 i{ --v:70; } .v-60 i{ --v:60; }
.v-55 i{ --v:55; } .v-45 i{ --v:45; }

.m-photos{ display:grid; gap:12px; }
.m-shot{ background:var(--c-panel); border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow); }
.m-shot figcaption{ padding:8px 10px; font-size:13px; color:#cfd8cf; }

/* ===== [S3] Горизонтальная лента регионов ===== */
.regions-rail{ padding-block: 40px; }
.r-head{ display:grid; grid-template-columns: 1fr auto; gap:16px; align-items:end; }
.r-head h2{ margin:0; font-family:"Playfair Display",serif; font-size:clamp(22px,2.4vw,34px); }
.sec-lead{ color:#dfe7de; margin:0; grid-column:1/-1; }
.rail-controls{ display:flex; gap:10px; }
.rail-btn{
  inline-size:38px; block-size:38px; border-radius:12px; border:1px solid rgba(255,255,255,.1);
  background:var(--c-panel); color:var(--c-text); cursor:pointer;
  transition: transform .2s var(--ease), background .2s var(--ease);
}
.rail-btn:hover{ transform: translateY(-1px); background: rgba(155,207,135,.12); }

.rail{
  margin-top:14px; display:grid; grid-auto-flow:column; gap:14px;
  overflow-x:auto; scroll-snap-type:x mandatory; scroll-padding-inline:16px;
  padding-bottom:6px;
}
.rail::-webkit-scrollbar{ height:8px; } /* мягкая полоса прокрутки */
.rail::-webkit-scrollbar-thumb{ background:#2a2f2a; border-radius:8px; }

.r-card{
  scroll-snap-align:start;
  inline-size: clamp(260px, 48vw, 350px);
  background:var(--c-panel); border:1px solid rgba(255,255,255,.06);
  border-radius:16px; overflow:hidden; box-shadow:var(--shadow);
  transition: transform .3s var(--ease);
}
.r-card:hover{ transform: translateY(-3px); }
.r-card img{ aspect-ratio: 4/3; object-fit: cover; }
.r-card h3{ margin:10px 12px 6px; font-size:18px; }
.r-card p{ margin:0 12px 12px; color:#cbd6cb; }

/* ===== [S4] Схема сада — свет/полив ===== */
.plan-modes{ padding-block: 42px; }
.plan-grid{ display:grid; grid-template-columns: 1fr 1fr; gap:28px; align-items:start; }
.plan-copy h2{ font-family:"Playfair Display",serif; margin:0 0 8px; font-size:clamp(22px,2.4vw,34px); }
.plan-controls{ display:flex; gap:10px; margin-top:10px; }
.pmode-btn{
  padding:8px 12px; border-radius:12px; border:1px solid rgba(255,255,255,.1);
  background:var(--c-panel); color:var(--c-text); cursor:pointer;
  transition: background .25s var(--ease), transform .25s var(--ease);
}
.pmode-btn:hover{ transform: translateY(-1px); }
.pmode-btn.is-active{ background: rgba(155,207,135,.14); border-color: rgba(155,207,135,.35); }

.plan-view{ position:relative; min-block-size: 280px; }
.plan-view .layer{ margin:0; }
.plan-view img{ aspect-ratio: 4/3; object-fit: cover; border-radius:16px; }
.plan-view .water{ position:absolute; inset:0; opacity:0; pointer-events:none; transition:opacity .5s var(--ease); }
.plan-view .light{ position:relative; z-index:1; transition:opacity .5s var(--ease); }
.plan-view.mode-water .water{ opacity:1; pointer-events:auto; }
.plan-view.mode-water .light{ opacity:0; }

/* ===== Адаптив для секций 2–4 ===== */
@media (max-width: 1100px){
  .m-grid{ grid-template-columns: 1fr; }
  .plan-grid{ grid-template-columns: 1fr; }
  .r-head{ grid-template-columns: 1fr; align-items:start; }
}
@media (max-width: 680px){
  .r-card h3{ font-size:16px; }
  .r-card p{ font-size:14px; }
}
/* ===== [S5] Палитра по сезонам ===== */
.season-palette{ padding-block: 44px; }
.sp-grid{ display:grid; grid-template-columns: 1.1fr .9fr; gap:28px; align-items:start; }
.sp-copy h2{ font-family:"Playfair Display",serif; margin:0 0 8px; font-size:clamp(22px,2.4vw,34px); }

.sp-tabs{ display:flex; gap:10px; margin:10px 0 14px; flex-wrap:wrap; }
.sp-tab{
  padding:8px 12px; border-radius:12px; border:1px solid rgba(255,255,255,.1);
  background:var(--c-panel); color:var(--c-text); cursor:pointer;
  transition: background .25s var(--ease), transform .25s var(--ease);
}
.sp-tab:hover{ transform: translateY(-1px); }
.sp-tab.is-active{ background: rgba(155,207,135,.14); border-color: rgba(155,207,135,.35); }

.sp-swatches{
  display:grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap:10px;
  background:var(--c-panel); border:1px solid rgba(255,255,255,.06); border-radius:16px; padding:12px;
  contain: layout paint; overflow:hidden;
}
.sp-swatches .sw{
  aspect-ratio: 1/1; border-radius:12px; box-shadow: inset 0 0 0 1px rgba(255,255,255,.06);
  transition: transform .25s var(--ease), filter .25s var(--ease);
}
.sp-swatches .sw:hover{ transform: scale(1.04); filter: saturate(1.06) contrast(1.04); }

/* Цветовые наборы сезонов (окрашиваем 12 «окон») */
.season-spring .s1{ background:#cfe6be; } .season-spring .s2{ background:#b7d9a3; }
.season-spring .s3{ background:#d7eed1; } .season-spring .s4{ background:#a9cda0; }
.season-spring .s5{ background:#e6f2dc; } .season-spring .s6{ background:#b9d4b5; }
.season-spring .s7{ background:#d0e0c8; } .season-spring .s8{ background:#a7c0a8; }
.season-spring .s9{ background:#ddecd8; } .season-spring .s10{ background:#c2d8bd; }
.season-spring .s11{ background:#b2cbb0; } .season-spring .s12{ background:#eaf4e1; }

.season-summer .s1{ background:#95bf7e; } .season-summer .s2{ background:#7ea86b; }
.season-summer .s3{ background:#8fbf84; } .season-summer .s4{ background:#6f9960; }
.season-summer .s5{ background:#a0c78a; } .season-summer .s6{ background:#5f8b52; }
.season-summer .s7{ background:#7fa36a; } .season-summer .s8{ background:#69905b; }
.season-summer .s9{ background:#87b275; } .season-summer .s10{ background:#8dbb7c; }
.season-summer .s11{ background:#6a8d5c; } .season-summer .s12{ background:#97c082; }

.season-autumn .s1{ background:#c7b28f; } .season-autumn .s2{ background:#aa8f6d; }
.season-autumn .s3{ background:#d0bda0; } .season-autumn .s4{ background:#8f7b63; }
.season-autumn .s5{ background:#bba581; } .season-autumn .s6{ background:#7c6a54; }
.season-autumn .s7{ background:#9a866b; } .season-autumn .s8{ background:#b59f7d; }
.season-autumn .s9{ background:#cdb794; } .season-autumn .s10{ background:#a79073; }
.season-autumn .s11{ background:#8a755e; } .season-autumn .s12{ background:#d7c5a3; }

.sp-photos{ display:grid; gap:12px; }
.sp-shot{ background:var(--c-panel); border-radius:16px; overflow:hidden; box-shadow:var(--shadow); }
.sp-shot figcaption{ padding:8px 10px; font-size:13px; color:#cfd8cf; }
.sp-shot{ display:none; }        /* показываем по сезону через класс на .sp-photos */
.sp-shot.spring{ display:block; }
.sp-photos.show-summer .spring{ display:none; }
.sp-photos.show-summer .summer{ display:block; }
.sp-photos.show-autumn .spring, .sp-photos.show-autumn .summer{ display:none; }
.sp-photos.show-autumn .autumn{ display:block; }

/* ===== [S6] Разрез участка ===== */
.terrain-profile{ padding-block: 44px; }
.tp-grid{ display:grid; grid-template-columns: 1fr 1.1fr; gap:28px; align-items:start; }
.tp-copy h2{ font-family:"Playfair Display",serif; margin:0 0 8px; font-size:clamp(22px,2.4vw,34px); }

.tp-tabs{ display:flex; gap:10px; margin:10px 0; flex-wrap:wrap; }
.tp-tab{
  padding:8px 12px; border-radius:12px; border:1px solid rgba(255,255,255,.1);
  background:var(--c-panel); color:var(--c-text); cursor:pointer;
  transition: background .25s var(--ease), transform .25s var(--ease);
}
.tp-tab:hover{ transform: translateY(-1px); }
.tp-tab.is-active{ background: rgba(155,207,135,.14); border-color: rgba(155,207,135,.35); }

.tp-legend{ display:flex; gap:14px; margin:8px 0 0; padding:0; list-style:none; color:#cbd6cb; }
.chip{ inline-size:16px; block-size:8px; border-radius:6px; display:inline-block; margin-right:6px; vertical-align:middle; }
.chip-drain{ background:linear-gradient(90deg,#7aa67a,#c3d7a4); }
.chip-mulch{ background:#6b7569; }
.chip-soil{ background:#3a413a; }

.tp-view{ position:relative; min-block-size:280px; }
.tp-layer{ margin:0; }
.tp-layer img{ aspect-ratio: 4/3; object-fit: cover; border-radius:16px; }
.tp-layer:not(.sandy){ position:absolute; inset:0; opacity:0; pointer-events:none; transition:opacity .5s var(--ease); }
.tp-view.state-sandy  .sandy{ position:relative; opacity:1; pointer-events:auto; }
.tp-view.state-loam   .loam { position:relative; opacity:1; pointer-events:auto; }
.tp-view.state-loam   .sandy, 
.tp-view.state-loam   .clay  { opacity:0; pointer-events:none; }
.tp-view.state-clay   .clay  { position:relative; opacity:1; pointer-events:auto; }
.tp-view.state-clay   .sandy, 
.tp-view.state-clay   .loam  { opacity:0; pointer-events:none; }

/* ===== [S7] Сценарии освещения ===== */
.lighting-modes{ padding-block: 44px; }
.lm-grid{ display:grid; grid-template-columns: 1fr 1.1fr; gap:28px; align-items:start; }
.lm-copy h2{ font-family:"Playfair Display",serif; margin:0 0 8px; font-size:clamp(22px,2.4vw,34px); }

.lm-controls{ display:flex; gap:10px; margin-top:10px; }
.lm-btn{
  padding:8px 12px; border-radius:12px; border:1px solid rgba(255,255,255,.1);
  background:var(--c-panel); color:var(--c-text); cursor:pointer;
  transition: background .25s var(--ease), transform .25s var(--ease);
}
.lm-btn:hover{ transform: translateY(-1px); }
.lm-btn.is-active{ background: rgba(155,207,135,.14); border-color: rgba(155,207,135,.35); }

.lm-view{ position:relative; min-block-size:280px; }
.lm-layer{ margin:0; }
.lm-layer img{ aspect-ratio: 4/3; object-fit: cover; border-radius:16px; }
.lm-layer.night{ position:absolute; inset:0; opacity:0; pointer-events:none; transition:opacity .5s var(--ease); }
/* добавим мягкий «свет» поверх ночного кадра чистым CSS */
.lm-layer.night::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(300px 120px at 30% 80%, rgba(255,220,150,.35), transparent 60%),
    radial-gradient(220px 90px at 70% 65%, rgba(255,220,150,.25), transparent 65%),
    radial-gradient(160px 60px at 50% 40%, rgba(255,220,150,.22), transparent 60%);
  mix-blend-mode:screen;
  border-radius:16px;
}
.lm-view.mode-night .night{ opacity:1; pointer-events:auto; }
.lm-view.mode-night .day  { opacity:0; }

/* ===== Адаптив: текст сверху, визуал ниже ===== */
@media (max-width: 1100px){
  .sp-grid, .tp-grid, .lm-grid{ grid-template-columns: 1fr; }
  .sp-copy, .tp-copy, .lm-copy{ order:1; }
  .sp-photos, .tp-view, .lm-view{ order:2; }
}
@media (max-width: 560px){
  .sp-swatches{ grid-template-columns: repeat(4, minmax(0,1fr)); }
}
/* ===== [S8] Микроклимат ===== */
.microclimate-grid{ padding-block: 44px; }
.mg-grid{ display:grid; grid-template-columns: 1.1fr .9fr; gap:28px; align-items:start; }
.mg-copy h2{ font-family:"Playfair Display",serif; margin:0 0 8px; font-size:clamp(22px,2.4vw,34px); }
.mg-time{ display:flex; gap:10px; margin:10px 0; flex-wrap:wrap; }
.mg-btn{
  padding:8px 12px; border-radius:12px; border:1px solid rgba(255,255,255,.1);
  background:var(--c-panel); color:var(--c-text); cursor:pointer;
  transition: background .25s var(--ease), transform .25s var(--ease);
}
.mg-btn:hover{ transform: translateY(-1px); }
.mg-btn.is-active{ background: rgba(155,207,135,.14); border-color: rgba(155,207,135,.35); }

.mg-legend{ list-style:none; padding:0; margin:8px 0 0; display:flex; gap:14px; color:#cbd6cb; }
.mg-legend .dot{ inline-size:14px; block-size:14px; border-radius:50%; display:inline-block; margin-right:6px; vertical-align:-2px; }
.dot.sun{ background:#c3d7a4; }
.dot.semi{ background:#7f8d7f; }
.dot.shade{ background:#2a2f2a; }

.mg-map{
  display:grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap:8px;
  background:var(--c-panel); border:1px solid rgba(255,255,255,.06); border-radius:16px; padding:12px;
  contain: layout paint; overflow:hidden; position:relative;
}
.mg-map .cell{
  position:relative; aspect-ratio:1/1; border-radius:12px;
  background:#1a201a; box-shadow: inset 0 0 0 1px rgba(255,255,255,.05);
}
.mg-map .cell::before{
  content:""; position:absolute; inset:0; border-radius:12px; pointer-events:none;
  background: radial-gradient(120% 120% at 50% 50%,
    rgba(255,255,255,.06), rgba(0,0,0, calc(.2 + var(--k, .2)*.5)) 60%);
  transition: background .35s var(--ease);
}

/* Интенсивности тени для разных времён суток (0 — солнце, 1 — тень) */
.mg-map.state-morning .cell:nth-child(1){ --k:.7; }  .mg-map.state-morning .cell:nth-child(2){ --k:.6; }
.mg-map.state-morning .cell:nth-child(3){ --k:.35; } .mg-map.state-morning .cell:nth-child(4){ --k:.2; }
.mg-map.state-morning .cell:nth-child(5){ --k:.75; } .mg-map.state-morning .cell:nth-child(6){ --k:.55; }
.mg-map.state-morning .cell:nth-child(7){ --k:.35; } .mg-map.state-morning .cell:nth-child(8){ --k:.2; }
.mg-map.state-morning .cell:nth-child(9){ --k:.7; }  .mg-map.state-morning .cell:nth-child(10){ --k:.5; }
.mg-map.state-morning .cell:nth-child(11){ --k:.3; } .mg-map.state-morning .cell:nth-child(12){ --k:.2; }
.mg-map.state-morning .cell:nth-child(13){ --k:.65; } .mg-map.state-morning .cell:nth-child(14){ --k:.45; }
.mg-map.state-morning .cell:nth-child(15){ --k:.28; } .mg-map.state-morning .cell:nth-child(16){ --k:.18; }

.mg-map.state-noon .cell:nth-child(1){ --k:.45; }  .mg-map.state-noon .cell:nth-child(2){ --k:.35; }
.mg-map.state-noon .cell:nth-child(3){ --k:.35; }  .mg-map.state-noon .cell:nth-child(4){ --k:.45; }
.mg-map.state-noon .cell:nth-child(5){ --k:.3; }   .mg-map.state-noon .cell:nth-child(6){ --k:.2; }
.mg-map.state-noon .cell:nth-child(7){ --k:.2; }   .mg-map.state-noon .cell:nth-child(8){ --k:.3; }
.mg-map.state-noon .cell:nth-child(9){ --k:.3; }   .mg-map.state-noon .cell:nth-child(10){ --k:.18; }
.mg-map.state-noon .cell:nth-child(11){ --k:.18; } .mg-map.state-noon .cell:nth-child(12){ --k:.3; }
.mg-map.state-noon .cell:nth-child(13){ --k:.4; }  .mg-map.state-noon .cell:nth-child(14){ --k:.28; }
.mg-map.state-noon .cell:nth-child(15){ --k:.28; } .mg-map.state-noon .cell:nth-child(16){ --k:.4; }

.mg-map.state-evening .cell:nth-child(1){ --k:.2; }  .mg-map.state-evening .cell:nth-child(2){ --k:.3; }
.mg-map.state-evening .cell:nth-child(3){ --k:.55; } .mg-map.state-evening .cell:nth-child(4){ --k:.75; }
.mg-map.state-evening .cell:nth-child(5){ --k:.2; }  .mg-map.state-evening .cell:nth-child(6){ --k:.28; }
.mg-map.state-evening .cell:nth-child(7){ --k:.5; }  .mg-map.state-evening .cell:nth-child(8){ --k:.7; }
.mg-map.state-evening .cell:nth-child(9){ --k:.18; } .mg-map.state-evening .cell:nth-child(10){ --k:.26; }
.mg-map.state-evening .cell:nth-child(11){ --k:.46; } .mg-map.state-evening .cell:nth-child(12){ --k:.68; }
.mg-map.state-evening .cell:nth-child(13){ --k:.18; } .mg-map.state-evening .cell:nth-child(14){ --k:.24; }
.mg-map.state-evening .cell:nth-child(15){ --k:.42; } .mg-map.state-evening .cell:nth-child(16){ --k:.64; }

.mg-photos{ display:grid; gap:12px; }
.mg-shot{ background:var(--c-panel); border-radius:16px; overflow:hidden; box-shadow:var(--shadow); }
.mg-shot figcaption{ padding:8px 10px; font-size:13px; color:#cfd8cf; }

/* ===== [S9] Покрытия — мини-симуляция шага ===== */
.surface-step{ padding-block: 44px; }
.sf-grid{ display:grid; grid-template-columns: 1fr 1.1fr; gap:28px; align-items:start; }
.sf-copy h2{ font-family:"Playfair Display",serif; margin:0 0 8px; font-size:clamp(22px,2.4vw,34px); }
.sf-controls{ margin-top:10px; }
.sf-btn{
  padding:8px 12px; border-radius:12px; border:1px solid rgba(255,255,255,.1);
  background:var(--c-panel); color:var(--c-text); cursor:pointer;
  transition: background .25s var(--ease), transform .25s var(--ease);
}
.sf-btn:hover{ transform: translateY(-1px); }

.sf-sim{ display:grid; gap:12px; }
.lane{
  position:relative; background:var(--c-panel); border:1px solid rgba(255,255,255,.06);
  border-radius:16px; padding:14px 12px 30px; overflow:hidden;
}
.lane em{ position:absolute; inset-block-end:6px; inset-inline:12px; font-size:13px; color:#cfd8cf; }
.lane::before{
  content:""; position:absolute; left:12px; right:12px; top:20px; height:8px; border-radius:999px;
  background: repeating-linear-gradient(90deg, #2a2f2a 0 16px, #323832 16px 32px);
  opacity:.9;
}
.lane.stone::before{ background: repeating-linear-gradient(90deg, #2f332f 0 18px, #404640 18px 36px); }
.lane.wood::before{ background: repeating-linear-gradient(90deg, #3a2f26 0 20px, #4a3b31 20px 40px); }

.runner{
  position:absolute; top:14px; left:12px; width:22px; height:22px; border-radius:50%;
  background: radial-gradient(circle at 35% 35%, #ffffff, #dbe7da 40%, #88a97d 70%);
  box-shadow: 0 4px 14px rgba(0,0,0,.35);
  transform: translateX(0);
}
.sf-sim.run .lane .runner{ animation: step-run 1.6s linear infinite; }
.sf-sim.run .lane.wood .runner{ animation-duration: 1.9s; } /* на дереве «мягче» */

@keyframes step-run{
  0%{ transform: translateX(0); }
  100%{ transform: translateX(calc(100% - 46px)); } /* учли паддинги */
}

.sf-photos{ display:grid; gap:12px; }
.sf-shot{ background:var(--c-panel); border-radius:16px; overflow:hidden; box-shadow:var(--shadow); }
.sf-shot figcaption{ padding:8px 10px; font-size:13px; color:#cfd8cf; }

/* ===== [S10] Портрет растения — hotspots ===== */
.plant-portrait{ padding-block: 44px; }
.pp-grid{ display:grid; grid-template-columns: 1fr 1.1fr; gap:28px; align-items:start; }
.pp-copy h2{ font-family:"Playfair Display",serif; margin:0 0 8px; font-size:clamp(22px,2.4vw,34px); }

.pp-tabs{ display:flex; gap:10px; margin:10px 0; flex-wrap:wrap; }
.pp-tab{
  padding:8px 12px; border-radius:12px; border:1px solid rgba(255,255,255,.1);
  background:var(--c-panel); color:var(--c-text); cursor:pointer;
  transition: background .25s var(--ease), transform .25s var(--ease);
}
.pp-tab:hover{ transform: translateY(-1px); }
.pp-tab.is-active{ background: rgba(155,207,135,.14); border-color: rgba(155,207,135,.35); }

.pp-diagram{ display:grid; grid-template-columns: minmax(0,1fr) .9fr; gap:16px; align-items:center; }
.pp-photo{ position:relative; margin:0; }
.pp-photo img{ aspect-ratio: 4/5; object-fit: cover; border-radius:16px; }

.hotspot{
  position:absolute; padding:4px 8px; font-size:12px; color:#0f120f; background:#e8efe8;
  border-radius:999px; opacity:.25; transform: translate(-50%, -50%); transition: opacity .25s var(--ease), transform .25s var(--ease);
  pointer-events:none; white-space:nowrap; box-shadow: 0 2px 8px rgba(0,0,0,.25);
}
/* Примерные позиции маркеров (проценты внутри изображения) */
.h1{ left:55%; top:28%; } .h2{ left:38%; top:18%; }
.h3{ left:34%; top:48%; } .h4{ left:46%; top:62%; }
.h5{ left:62%; top:40%; } .h6{ left:70%; top:32%; }

/* Режимы подсветки */
.pp-diagram .hotspot{ opacity:.18; }
.pp-diagram.mode-crown  .hotspot.crown{ opacity:1; transform: translate(-50%, -50%) scale(1.03); }
.pp-diagram.mode-stems  .hotspot.stems{ opacity:1; transform: translate(-50%, -50%) scale(1.03); }
.pp-diagram.mode-bloom  .hotspot.bloom{ opacity:1; transform: translate(-50%, -50%) scale(1.03); }

.pp-photos{ display:grid; gap:12px; }
.pp-shot{ background:var(--c-panel); border-radius:16px; overflow:hidden; box-shadow:var(--shadow); }
.pp-shot figcaption{ padding:8px 10px; font-size:13px; color:#cfd8cf; }

/* ===== Адаптив: на мобилке текст сверху ===== */
@media (max-width: 1100px){
  .mg-grid, .sf-grid, .pp-grid{ grid-template-columns: 1fr; }
  .mg-copy, .sf-copy, .pp-copy{ order:1; }
  #mgMap, #sfSim, .pp-diagram{ order:2; }
  .mg-photos, .sf-photos{ order:3; }
  .pp-diagram{ grid-template-columns: 1fr; }
}
/* ===== [S11] Звук сада ===== */
.garden-sound{ padding-block: 44px; }
.gs-grid{ display:grid; grid-template-columns: 1fr 1.1fr; gap:28px; align-items:start; }
.gs-copy h2{ font-family:"Playfair Display",serif; margin:0 0 8px; font-size:clamp(22px,2.4vw,34px); }
.gs-tabs{ display:flex; gap:10px; margin-top:10px; flex-wrap:wrap; }
.gs-tab{
  padding:8px 12px; border-radius:12px; border:1px solid rgba(255,255,255,.1);
  background:var(--c-panel); color:var(--c-text); cursor:pointer;
  transition: background .25s var(--ease), transform .25s var(--ease);
}
.gs-tab:hover{ transform: translateY(-1px); }
.gs-tab.is-active{ background: rgba(155,207,135,.14); border-color: rgba(155,207,135,.35); }

.gs-visual{ display:grid; grid-template-columns: 1fr; gap:12px; }
.waves{
  display:grid; grid-template-columns: repeat(24, 1fr); gap:4px;
  background:var(--c-panel); border:1px solid rgba(255,255,255,.06); border-radius:16px; padding:12px;
  contain: layout paint; overflow:hidden;
}
.wave{
  inline-size:100%; block-size:36px; border-radius:6px;
  background: linear-gradient(180deg, var(--c-moss), var(--c-meadow));
  transform-origin: center bottom;
  animation: waveCalm 1.6s ease-in-out infinite;
  opacity:.9;
}
@keyframes waveCalm{
  0%,100%{ transform: scaleY(.25); }
  50%{ transform: scaleY(.45); }
}
.waves.state-breeze .wave{ animation: waveBreeze 1.2s ease-in-out infinite; }
@keyframes waveBreeze{
  0%,100%{ transform: scaleY(.25); }
  50%{ transform: scaleY(.9); }
}
.waves.state-night .wave{ animation: waveNight 1.8s ease-in-out infinite; filter: brightness(.9) contrast(.95); }
@keyframes waveNight{
  0%,100%{ transform: scaleY(.18); }
  50%{ transform: scaleY(.4); }
}
/* лёгкая «случайность»: разные задержки */
.wave:nth-child(odd){ animation-delay: .1s; }
.wave:nth-child(3n){ animation-delay: .2s; }

.gs-photos{ display:grid; gap:12px; }
.gs-shot{ background:var(--c-panel); border-radius:16px; overflow:hidden; box-shadow:var(--shadow); }
.gs-shot figcaption{ padding:8px 10px; font-size:13px; color:#cfd8cf; }

/* ===== [S12] Вода: каскад/сбор ===== */
.water-systems{ padding-block: 44px; }
.ws-grid{ display:grid; grid-template-columns: 1fr 1.1fr; gap:28px; align-items:start; }
.ws-copy h2{ font-family:"Playfair Display",serif; margin:0 0 8px; font-size:clamp(22px,2.4vw,34px); }
.ws-controls{ display:flex; gap:10px; margin-top:10px; }
.ws-btn{
  padding:8px 12px; border-radius:12px; border:1px solid rgba(255,255,255,.1);
  background:var(--c-panel); color:var(--c-text); cursor:pointer;
  transition: background .25s var(--ease), transform .25s var(--ease);
}
.ws-btn:hover{ transform: translateY(-1px); }
.ws-btn.is-active{ background: rgba(155,207,135,.14); border-color: rgba(155,207,135,.35); }
.ws-legend{ list-style:none; display:flex; gap:14px; margin:8px 0 0; padding:0; color:#cbd6cb; }
.chip{ inline-size:16px; block-size:8px; border-radius:6px; display:inline-block; margin-right:6px; vertical-align:middle; }
.chip-flow{ background:linear-gradient(90deg,#8ac08a,#c3d7a4); }
.chip-store{ background:#6b7569; }

.ws-view{ position:relative; min-block-size:280px; }
.ws-layer{ margin:0; }
.ws-layer img{ aspect-ratio: 4/3; object-fit: cover; border-radius:16px; }
.ws-layer.harvest{ position:absolute; inset:0; opacity:0; pointer-events:none; transition:opacity .5s var(--ease); }
.ws-view.mode-harvest .harvest{ opacity:1; pointer-events:auto; }
.ws-view.mode-harvest .cascade{ opacity:0; }

/* декор потоков поверх изображений */
.ws-layer.cascade::after,
.ws-layer.harvest::after{
  content:""; position:absolute; inset:0; border-radius:16px; pointer-events:none;
}
.ws-layer.cascade::after{
  background:
    radial-gradient(8px 8px at 20% 20%, rgba(180,220,255,.35), transparent 50%),
    radial-gradient(6px 6px at 30% 40%, rgba(180,220,255,.28), transparent 50%),
    linear-gradient(180deg, rgba(160,200,255,.18), transparent 60%);
  mix-blend-mode:screen;
}
.ws-layer.harvest::after{
  background:
    radial-gradient(140px 60px at 80% 80%, rgba(170,220,170,.25), transparent 60%),
    linear-gradient(0deg, rgba(120,170,120,.18), transparent 60%);
  mix-blend-mode:screen;
}

/* ===== [S13] Фрагменты деталей ===== */
.detail-fragments{ padding-block: 44px; }
.df-grid{ display:grid; grid-template-columns: 1fr 1.1fr; gap:28px; align-items:start; }
.df-copy h2{ font-family:"Playfair Display",serif; margin:0 0 8px; font-size:clamp(22px,2.4vw,34px); }
.df-filter{ display:flex; gap:10px; margin-top:10px; flex-wrap:wrap; }
.df-tab{
  padding:8px 12px; border-radius:12px; border:1px solid rgba(255,255,255,.1);
  background:var(--c-panel); color:var(--c-text); cursor:pointer;
  transition: background .25s var(--ease), transform .25s var(--ease);
}
.df-tab:hover{ transform: translateY(-1px); }
.df-tab.is-active{ background: rgba(155,207,135,.14); border-color: rgba(155,207,135,.35); }

.df-photos{
  display:grid; gap:12px;
  grid-template-columns: repeat(3, minmax(0,1fr));
  contain: layout paint; overflow:hidden;
}
.df-shot{ position:relative; background:var(--c-panel); border-radius:16px; overflow:hidden; box-shadow:var(--shadow); }
.df-shot img{ aspect-ratio: 4/3; object-fit: cover; }
.df-shot figcaption{
  position:absolute; inset-inline:10px; inset-block-end:8px;
  background: rgba(15,18,15,.55); backdrop-filter: blur(3px);
  border:1px solid rgba(255,255,255,.08); border-radius:10px;
  color:var(--c-text); font-size:12px; padding:6px 8px;
}
.df-photos.show-stone  .df-shot[data-tag]:not([data-tag="stone"]){ display:none; }
.df-photos.show-grass  .df-shot[data-tag]:not([data-tag="grass"]){ display:none; }
.df-photos.show-light  .df-shot[data-tag]:not([data-tag="light"]){ display:none; }

/* Адаптив: текст сверху, визуал ниже */
@media (max-width: 1100px){
  .gs-grid, .ws-grid, .df-grid{ grid-template-columns: 1fr; }
  .gs-copy, .ws-copy, .df-copy{ order:1; }
  .gs-visual, .ws-view, .df-photos{ order:2; }
}
@media (max-width: 680px){
  .df-photos{ grid-template-columns: 1fr; }
}
/* ===== [S14] Фазы реализации ===== */
.build-phases{ padding-block: 44px; }
.bp-grid{ display:grid; grid-template-columns: 1.1fr .9fr; gap:28px; align-items:start; }
.bp-copy h2{ font-family:"Playfair Display",serif; margin:0 0 8px; font-size:clamp(22px,2.4vw,34px); }
.bp-tabs{ display:flex; gap:10px; margin:10px 0; flex-wrap:wrap; }
.bp-tab{
  padding:8px 12px; border-radius:12px; border:1px solid rgba(255,255,255,.1);
  background:var(--c-panel); color:var(--c-text); cursor:pointer;
  transition: background .25s var(--ease), transform .25s var(--ease);
}
.bp-tab:hover{ transform: translateY(-1px); }
.bp-tab.is-active{ background: rgba(155,207,135,.14); border-color: rgba(155,207,135,.35); }

.bp-track{
  list-style:none; margin:14px 0 0; padding:0; position:relative;
  background:var(--c-panel); border:1px solid rgba(255,255,255,.06); border-radius:16px; padding:14px;
  display:grid; gap:10px;
}
.bp-track::before{
  content:""; position:absolute; left:18px; top:18px; bottom:18px; width:4px; border-radius:4px;
  background: linear-gradient(180deg, var(--c-moss), var(--c-meadow));
  opacity:.35;
}
.bp-track .step{
  position:relative; padding-left:24px;
}
.bp-track .step::before{
  content:""; position:absolute; left:8px; top:8px; width:12px; height:12px; border-radius:50%;
  background: #2a2f2a; box-shadow: inset 0 0 0 1px rgba(255,255,255,.06);
}
.bp-track .step.s1::before{ background: color-mix(in oklab, var(--c-moss) 70%, black 30%); }
.bp-track.state-prep .s1::before,
.bp-track.state-plant .s1::before,
.bp-track.state-launch .s1::before{ box-shadow: 0 0 0 3px rgba(155,207,135,.25); }

.bp-track.state-plant .s2::before{ background: color-mix(in oklab, var(--c-moss) 70%, black 30%); box-shadow: 0 0 0 3px rgba(155,207,135,.25); }
.bp-track.state-launch .s3::before{ background: color-mix(in oklab, var(--c-moss) 70%, black 30%); box-shadow: 0 0 0 3px rgba(155,207,135,.25); }
.bp-track.state-launch .s4::before{ background: color-mix(in oklab, var(--c-meadow) 70%, black 30%); box-shadow: 0 0 0 3px rgba(155,207,135,.25); }

.bp-figure .bp-shot{ background:var(--c-panel); border-radius:16px; overflow:hidden; box-shadow:var(--shadow); }
.bp-figure .bp-shot figcaption{ padding:8px 10px; font-size:13px; color:#cfd8cf; }

/* ===== [S15] Устойчивый эффект (KPI) ===== */
.impact-kpis{ padding-block: 44px; }
.ik-grid{ display:grid; grid-template-columns: 1.1fr .9fr; gap:28px; align-items:start; }
.ik-copy h2{ font-family:"Playfair Display",serif; margin:0 0 8px; font-size:clamp(22px,2.4vw,34px); }

.kpi-grid{ display:grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap:12px; margin-top:12px; }
.kpi{
  background:var(--c-panel); border:1px solid rgba(255,255,255,.06); border-radius:16px; padding:12px;
  box-shadow:var(--shadow); display:grid; gap:6px; align-content:start;
}
.kpi .num{
  font: 700 clamp(22px, 4.2vw, 36px)/1 "Playfair Display", serif;
  color: var(--c-accent);
}
.ik-figure .ik-shot{ background:var(--c-panel); border-radius:16px; overflow:hidden; box-shadow:var(--shadow); }
.ik-figure .ik-shot figcaption{ padding:8px 10px; font-size:13px; color:#cfd8cf; }

/* Адаптив для 14–15: текст сверху, визуал ниже */
@media (max-width: 1100px){
  .bp-grid, .ik-grid{ grid-template-columns: 1fr; }
  .bp-copy, .ik-copy{ order:1; }
  .bp-figure, .ik-figure{ order:2; }
}
@media (max-width: 720px){
  .kpi-grid{ grid-template-columns: 1fr; }
}
/* ===== Contact Form ===== */
.cf-grid{
  display:grid; grid-template-columns: 1.1fr .9fr; gap:28px; align-items:start;
  padding-block: 44px;
}
.contact-header h2{
  font-family:"Playfair Display",serif;
  margin:0 0 8px; font-size:clamp(22px,2.4vw,34px);
}
.contact-header p{ color:#dfe7de; margin:0 0 8px; }
.cf-bullets{ margin:8px 0 0; padding-left:18px; }
.cf-bullets li{ margin:6px 0; color:#cbd6cb; }

.form-wrapper{
  display:grid; gap:12px; align-content:start;
  background:var(--c-panel); border:1px solid rgba(255,255,255,.08);
  border-radius:16px; padding:14px; box-shadow:var(--shadow);
}
.vh{ position:absolute !important; inline-size:1px; block-size:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }

.field{ position:relative; }
.field input, .field textarea{
  width:100%; color:var(--c-text); background:#121712; border:1px solid rgba(255,255,255,.08);
  border-radius:12px; padding:12px 14px; outline:0; transition:border-color .25s var(--ease), box-shadow .25s var(--ease);
  font: 400 16px/1.5 "Rubik", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}
.field textarea{ min-height:140px; resize:vertical; }
.field input::placeholder, .field textarea::placeholder{ color:#9fb39a; opacity:.85; }

.focus-ring{
  pointer-events:none; position:absolute; inset:-2px; border-radius:14px;
  box-shadow: 0 0 0 0 rgba(155,207,135,.35);
  transition: box-shadow .25s var(--ease);
}
.field:focus-within .focus-ring{ box-shadow: 0 0 0 4px rgba(155,207,135,.25); }
.field input:invalid, .field textarea:invalid{ border-color: rgba(255,100,100,.25); }
.field input:valid, .field textarea:valid{ border-color: rgba(155,207,135,.35); }

.char-counter{
  position:absolute; right:10px; bottom:10px; font-size:12px; color:#cfd8cf; opacity:.85;
  background:rgba(15,18,15,.55); padding:3px 6px; border-radius:8px; border:1px solid rgba(255,255,255,.08);
}

.form-checkbox{
  display:flex; align-items:center; gap:10px; user-select:none;
}
.form-checkbox input{
  appearance:none; inline-size:18px; block-size:18px; border-radius:6px;
  background:#121712; border:1px solid rgba(255,255,255,.1); position:relative; cursor:pointer;
}
.form-checkbox input:checked{
  border-color: rgba(155,207,135,.6);
  background: linear-gradient(180deg, var(--c-moss), var(--c-meadow));
}
.form-checkbox input:checked::after{
  content:""; position:absolute; inset:3px; border-radius:4px; background:#0f120f;
}
.form-checkbox span, .form-checkbox a{ color:#dfe7de; }
.form-checkbox a{ text-decoration:none; border-bottom:1px dashed rgba(255,255,255,.25); }
.form-checkbox a:hover{ color:var(--c-accent); border-color: rgba(155,207,135,.6); }

.cta-button{
  justify-self:start;
  padding:10px 16px; border-radius:12px; border:1px solid rgba(255,255,255,.1);
  background: linear-gradient(180deg, #1b231b, #131813);
  color:var(--c-text); cursor:pointer; transition: transform .2s var(--ease), background .2s var(--ease), opacity .2s var(--ease);
}
.cta-button:hover{ transform: translateY(-1px); background: linear-gradient(180deg, #202820, #151a15); }
.cta-button:disabled{ opacity:.55; cursor:not-allowed; }

.cf-note{ margin:4px 0 0; color:#cbd6cb; font-size:14px; }

/* Адаптив: текст сверху, форма ниже */
@media (max-width: 1100px){
  .cf-grid{ grid-template-columns: 1fr; }
  .contact-header{ order:1; }
  .form-wrapper{ order:2; }
}