/* ===== Studio page unique look ===== */

/* --- Section 1: Studio Ethos Panorama --- */
.ethos-panorama{
  position:relative; padding:72px 0 56px;
  background:
    radial-gradient(1200px 800px at 8% -10%, rgba(124,199,255,.07), transparent 60%),
    radial-gradient(900px 600px at 88% 110%, rgba(51,170,255,.08), transparent 65%),
    linear-gradient(180deg, #0a0b0c, #0f1114 65%, #0a0b0c);
  border-bottom:1px solid var(--c-line);
}
.ethos-grid{ display:grid; gap:1.2rem; grid-template-columns: 1.15fr 1fr; align-items:center; }
@media (max-width: 960px){ .ethos-grid{ grid-template-columns:1fr; } }

.page-title{
  font-family:"Prata", serif;
  font-size: clamp(1.8rem, 1.2rem + 2.1vw, 2.6rem);
  margin: 0 0 .6rem;
  background: linear-gradient(90deg, #eaf7ff, #a8d8ff);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
}
.ethos-lead{ color:#cbd6e0; margin:.2rem 0 .8rem; }
.ethos-points{ padding-left:1.1rem; color:#9fb3c6; }
.ethos-points li{ margin:.25rem 0; }

.panorama-stage{
  position:relative; width:min(560px, 92vw); margin-inline:auto;
  border:1px solid var(--c-line); border-radius:18px; background:#0f1215;
  box-shadow: var(--shadow-1); overflow: clip; min-height: 360px;
}
.band{
  position:absolute; inset:0;
  background: linear-gradient(90deg, rgba(124,199,255,.05), rgba(124,199,255,0));
  filter: blur(1px); opacity:.6;
}
.band.b1{ transform: translateX(-15%); }
.band.b2{ transform: translateX( 10%); background: linear-gradient(90deg, rgba(80,160,255,.06), rgba(80,160,255,0)); }
.band.b3{ transform: translateX( 28%); background: linear-gradient(90deg, rgba(220,235,255,.05), rgba(220,235,255,0)); }

.ethos-card{
  position:absolute; width:min(340px, 92vw);
  background:#0f1317; border:1px solid var(--c-line); border-radius:16px;
  padding:.55rem .55rem .85rem; text-align:center;
  box-shadow: var(--shadow-1);
  transition: transform .3s ease, box-shadow .3s ease;
}
.ethos-card:hover{ transform: translateY(-3px); box-shadow:0 20px 50px rgba(0,0,0,.45); }
.ethos-card figcaption{ color:#a4b7c9; font-size:.9rem; margin-top:.45rem; }
.ethos-card.c1{ left: 12px; bottom: 14px; }
.ethos-card.c2{ right: 12px; top: 14px; }

@media (max-width: 600px){
  .panorama-stage{ min-height: auto; padding: 10px; }
  .ethos-card{ position:relative; left:auto; right:auto; top:auto; bottom:auto; width:100%; margin:.6rem 0 0; }
}

/* --- Section 2: Lighting Lattice --- */
.lighting-lattice{
  position:relative; padding:58px 0 56px;
  background:
    radial-gradient(1000px 700px at 10% 100%, rgba(124,199,255,.06), transparent 60%),
    linear-gradient(180deg,#0b0d10,#0e1114 65%,#0a0b0c);
  border-top:1px solid var(--c-line);
}
.lattice-head .h2{
  font-family:"Prata",serif; color:#eaf7ff;
  font-size: clamp(1.35rem, 1.1rem + 1.4vw, 1.9rem); margin:0 0 .35rem;
}
.lattice-lead{ color:#cbd6e0; margin:0 0 .9rem; }

.lattice-stage{
  width:min(1100px,94vw); height:160px; margin:0 auto 1rem;
  border:1px solid var(--c-line); border-radius:16px; background:#0f1215;
  box-shadow:var(--shadow-1); position:relative; overflow:clip;
}
.lattice-grid{
  position:absolute; inset:12px; display:grid;
  grid-template-columns: repeat(12, 1fr); gap:8px;
}
.cell{
  height: 100%; border-radius:10px; border:1px solid #1c2733; background:#0b0e12;
  box-shadow: inset 0 0 0 1px #0f151c;
  transition: box-shadow .3s ease, background .3s ease;
}
.cell.is-on{
  background: radial-gradient(220px 40px at 50% 50%, rgba(124,199,255,.18), #0b0e12 70%);
  box-shadow: inset 0 0 0 1px #1d84ff, 0 10px 28px rgba(0,102,255,.25);
}
.lattice-sweep{
  position:absolute; inset:0; pointer-events:none;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.18), transparent);
  transform: translateX(-120%);
}
.lattice-stage.run .lattice-sweep{ animation: lsweep 3.4s ease-in-out infinite; }
@keyframes lsweep{ 0%{transform:translateX(-120%)} 55%{transform:translateX(120%)} 100%{transform:translateX(120%)} }

.lattice-gallery{
  display:grid; gap:1rem; grid-template-columns: repeat(2, minmax(160px, 1fr));
}
.lattice-card{
  background:#0f1317; border:1px solid var(--c-line); border-radius:16px;
  padding:.6rem .6rem .9rem; text-align:center; transition:transform .3s ease, box-shadow .3s ease;
}
.lattice-card:hover{ transform: translateY(-3px); box-shadow:0 20px 50px rgba(0,0,0,.45); }
.lattice-card figcaption{ color:#a4b7c9; font-size:.9rem; margin-top:.5rem; }
@media (max-width: 640px){ .lattice-gallery{ grid-template-columns:1fr; } }

/* --- Section 3: Toolbench Telemetry --- */
.toolbench-telemetry{
  position:relative; padding:58px 0 56px;
  background:
    radial-gradient(900px 600px at 85% -10%, rgba(124,199,255,.06), transparent 60%),
    linear-gradient(180deg,#0a0b0c,#0f1114 65%,#0a0b0c);
  border-top:1px solid var(--c-line);
}
.tele-head .h2{
  font-family:"Prata",serif; color:#eaf7ff;
  font-size: clamp(1.35rem, 1.1rem + 1.4vw, 1.9rem); margin:0 0 .35rem;
}
.tele-lead{ color:#cbd6e0; margin:0 0 .9rem; }

.telemetry-stage{
  width:min(1100px,94vw); margin:0 auto 1rem;
  border:1px solid var(--c-line); border-radius:18px; background:#0f1215; box-shadow:var(--shadow-1);
  padding: 14px;
}
.telemetry-grid{
  display:grid; gap: 12px; grid-template-columns: repeat(4, minmax(120px, 1fr));
}
.tile{
  border:1px solid var(--c-line); border-radius:14px; background:#0b0e12;
  padding:.7rem; text-align:center;
}
.kpi{
  font-size: clamp(1.2rem, .9rem + 1.4vw, 1.8rem);
  color:#eaf7ff; margin:.1rem 0 .2rem; font-variant-numeric: tabular-nums;
}
.label{ color:#9fb3c6; font-size:.85rem; }
@media (max-width: 820px){ .telemetry-grid{ grid-template-columns: repeat(2, 1fr); } }

.tele-grid{
  display:grid; gap:1rem; grid-template-columns: repeat(2, minmax(160px, 1fr));
}
.tele-card{
  background:#0f1317; border:1px solid var(--c-line); border-radius:16px;
  padding:.6rem .6rem .9rem; text-align:center; transition:transform .3s ease, box-shadow .3s ease;
}
.tele-card:hover{ transform: translateY(-3px); box-shadow:0 20px 50px rgba(0,0,0,.45); }
.tele-card figcaption{ color:#a4b7c9; font-size:.9rem; margin-top:.5rem; }
@media (max-width: 640px){ .tele-grid{ grid-template-columns:1fr; } }

/* Reveal helper (локально) */
[data-reveal]{ opacity:0; transform: translateY(14px); transition: opacity .6s ease, transform .6s ease; }
[data-reveal].is-in{ opacity:1; transform:none; }
/* =========================
   S4 — Clean Air Canopy
   ========================= */
.air-canopy{
  position:relative; padding:58px 0 56px;
  background:
    radial-gradient(1000px 700px at 10% 100%, rgba(124,199,255,.06), transparent 60%),
    linear-gradient(180deg,#0b0d10,#0e1114 65%,#0a0b0c);
  border-top:1px solid var(--c-line);
}
.air-head .h2{ font-family:"Prata",serif; color:#eaf7ff; font-size:clamp(1.35rem,1.1rem + 1.4vw,1.9rem); margin:0 0 .35rem; }
.air-lead{ color:#cbd6e0; margin:0 0 .9rem; }

.air-stage{
  width:min(1100px,94vw); height:160px; margin:0 auto 1rem;
  border:1px solid var(--c-line); border-radius:16px; background:#0f1215;
  box-shadow:var(--shadow-1); position:relative; overflow:clip;
}
.air-field{ position:absolute; inset:0; }
.speck-a{
  position:absolute; width:4px; height:4px; border-radius:50%;
  background: radial-gradient(circle at 30% 30%, rgba(230,240,255,.9), rgba(140,180,230,.5) 60%, rgba(90,140,220,.15) 100%);
  filter: blur(.2px); opacity:.8;
  animation: air-drift var(--dur,8s) linear forwards;
}
@keyframes air-drift{
  0%{ transform: translate(var(--sx,0), var(--sy,0)); opacity:.2 }
  20%{ opacity:.9 }
  100%{ transform: translate(calc(var(--sx,0) - 180px), calc(var(--sy,0) - 40px)); opacity:.1 }
}
.air-pull{
  position:absolute; right:0; top:0; bottom:0; width:110px;
  background: radial-gradient(120px 300px at 50% 50%, rgba(124,199,255,.12), transparent 70%);
  pointer-events:none;
}

.air-grid{
  display:grid; gap:1rem; grid-template-columns: repeat(2, minmax(160px,1fr));
}
.air-card{
  background:#0f1317; border:1px solid var(--c-line); border-radius:16px;
  padding:.6rem .6rem .9rem; text-align:center; transition:transform .3s ease, box-shadow .3s ease;
}
.air-card:hover{ transform: translateY(-3px); box-shadow:0 20px 50px rgba(0,0,0,.45); }
.air-card figcaption{ color:#a4b7c9; font-size:.9rem; margin-top:.5rem; }
@media (max-width: 640px){ .air-grid{ grid-template-columns:1fr; } }

/* =========================
   S5 — Water Loop Discipline
   ========================= */
.water-loop{
  position:relative; padding:58px 0 56px;
  background:
    radial-gradient(900px 600px at 85% -10%, rgba(124,199,255,.06), transparent 60%),
    linear-gradient(180deg,#0a0b0c,#0f1114 65%,#0a0b0c);
  border-top:1px solid var(--c-line);
}
.water-head .h2{ font-family:"Prata",serif; color:#eaf7ff; font-size:clamp(1.35rem,1.1rem + 1.4vw,1.9rem); margin:0 0 .35rem; }
.water-lead{ color:#cbd6e0; margin:0 0 .9rem; }

.water-stage{
  width:min(1100px,94vw); margin:0 auto 1rem;
  border:1px solid var(--c-line); border-radius:16px; background:#0f1215; box-shadow:var(--shadow-1);
  padding: 14px; position:relative; overflow:clip;
}
.gauge{
  width:min(360px, 92vw); margin:0 auto; aspect-ratio: 1 / 1;
  border:1px solid var(--c-line); border-radius:50%; position:relative;
  display:grid; place-items:center; background:#0b0e12;
}
.gauge .ring{
  position:absolute; inset:10%; border-radius:50%;
  border:1px dashed #1e2a38;
}
.ripple{
  position:absolute; left:50%; top:50%;
  width:16px; height:16px; border-radius:50%;
  border:1px solid rgba(124,199,255,.45);
  transform: translate(-50%,-50%) scale(.2);
  opacity:.8; animation: water-pulse 3s ease-out forwards;
}
@keyframes water-pulse{
  0%{ transform:translate(-50%,-50%) scale(.2); opacity:.9 }
  60%{ opacity:.5 }
  100%{ transform:translate(-50%,-50%) scale(5.2); opacity:0 }
}

.water-grid{
  display:grid; gap:1rem; grid-template-columns: repeat(2, minmax(160px,1fr));
}
.water-card{
  background:#0f1317; border:1px solid var(--c-line); border-radius:16px;
  padding:.6rem .6rem .9rem; text-align:center; transition:transform .3s ease, box-shadow .3s ease;
}
.water-card:hover{ transform: translateY(-3px); box-shadow:0 20px 50px rgba(0,0,0,.45); }
.water-card figcaption{ color:#a4b7c9; font-size:.9rem; margin-top:.5rem; }
@media (max-width: 640px){ .water-grid{ grid-template-columns:1fr; } }

/* =========================
   S6 — Quiet Bay Acoustics
   ========================= */
.quiet-bay{
  position:relative; padding:58px 0 56px;
  background:
    radial-gradient(1000px 700px at 10% 100%, rgba(124,199,255,.06), transparent 60%),
    linear-gradient(180deg,#0b0d10,#0e1114 65%,#0a0b0c);
  border-top:1px solid var(--c-line);
}
.quiet-head .h2{ font-family:"Prata",serif; color:#eaf7ff; font-size:clamp(1.35rem,1.1rem + 1.4vw,1.9rem); margin:0 0 .35rem; }
.quiet-lead{ color:#cbd6e0; margin:0 0 .9rem; }

.quiet-stage{
  width:min(1100px,94vw); margin:0 auto 1rem;
  border:1px solid var(--c-line); border-radius:16px; background:#0f1215; box-shadow:var(--shadow-1);
  overflow:clip; position:relative;
}
.quiet-svg{ width:100%; height:auto; display:block; }
.qwave{ fill:none; /* stroke via SVG attribute */ stroke-width:4; stroke-linecap:round; stroke-dasharray:260 520; stroke-dashoffset:260; opacity:.75; }
.quiet-svg.run .qwave{ animation: qroll 4.2s ease-in-out infinite; }
.qwave.b{ animation-delay:.6s; }
@keyframes qroll{
  0%{ stroke-dashoffset: 260; opacity:.35 }
  40%{ opacity:.9 }
  100%{ stroke-dashoffset: -520; opacity:.5 }
}

.quiet-grid{
  display:grid; gap:1rem; grid-template-columns: repeat(2, minmax(160px,1fr));
}
.quiet-card{
  background:#0f1317; border:1px solid var(--c-line); border-radius:16px;
  padding:.6rem .6rem .9rem; text-align:center; transition:transform .3s ease, box-shadow .3s ease;
}
.quiet-card:hover{ transform: translateY(-3px); box-shadow:0 20px 50px rgba(0,0,0,.45); }
.quiet-card figcaption{ color:#a4b7c9; font-size:.9rem; margin-top:.5rem; }
@media (max-width: 640px){ .quiet-grid{ grid-template-columns:1fr; } }
/* =========================
   S7 — Color Harmony Bench
   ========================= */
.color-harmony{
  position:relative; padding:58px 0 56px;
  background:
    radial-gradient(900px 600px at 85% -10%, rgba(124,199,255,.06), transparent 60%),
    linear-gradient(180deg,#0a0b0c,#0f1114 65%,#0a0b0c);
  border-top:1px solid var(--c-line);
}
.color-head .h2{ font-family:"Prata",serif; color:#eaf7ff; font-size:clamp(1.35rem,1.1rem + 1.4vw,1.9rem); margin:0 0 .35rem; }
.color-lead{ color:#cbd6e0; margin:0 0 .9rem; }

.color-stage{
  width:min(1100px,94vw); height:160px; margin:0 auto 1rem;
  border:1px solid var(--c-line); border-radius:16px; background:#0f1215;
  box-shadow:var(--shadow-1); position:relative; overflow:clip;
}
.swatch-field{
  position:absolute; inset:12px; display:grid;
  grid-template-columns: repeat(24, 1fr); gap:6px;
}
.sw{
  border-radius:6px;
  background: hsl(var(--h) 60% 50%);
  transition: transform .15s ease, box-shadow .15s ease;
}
.sw:hover{ transform: scale(1.1); box-shadow:0 6px 14px rgba(0,0,0,.35); }
.color-lens{
  position:absolute; width:140px; height:140px; border-radius:50%;
  left: var(--x, -200px); top: var(--y, -200px);
  pointer-events:none; mix-blend-mode: screen;
  background: radial-gradient(circle at 50% 50%, rgba(124,199,255,.25), transparent 70%);
  filter: blur(1px);
}

.color-grid{
  display:grid; gap:1rem; grid-template-columns: repeat(3, minmax(160px,1fr));
}
.color-card{
  background:#0f1317; border:1px solid var(--c-line); border-radius:16px;
  padding:.6rem .6rem .9rem; text-align:center; transition:transform .3s ease, box-shadow .3s ease;
}
.color-card:hover{ transform: translateY(-3px); box-shadow:0 20px 50px rgba(0,0,0,.45); }
.color-card figcaption{ color:#a4b7c9; font-size:.9rem; margin-top:.5rem; }
@media (max-width: 820px){ .color-grid{ grid-template-columns:1fr; } }

/* =========================
   S8 — Bay Flow Map
   ========================= */
.bay-flow{
  position:relative; padding:58px 0 56px;
  background:
    radial-gradient(1000px 700px at 10% 100%, rgba(124,199,255,.06), transparent 60%),
    linear-gradient(180deg,#0b0d10,#0e1114 65%,#0a0b0c);
  border-top:1px solid var(--c-line);
}
.flow-head .h2{ font-family:"Prata",serif; color:#eaf7ff; font-size:clamp(1.35rem,1.1rem + 1.4vw,1.9rem); margin:0 0 .35rem; }
.flow-lead{ color:#cbd6e0; margin:0 0 .9rem; }

.flow-stage{
  width:min(1100px,94vw); margin:0 auto 1rem;
  border:1px solid var(--c-line); border-radius:18px; background:#0f1215; box-shadow:var(--shadow-1);
  overflow:clip;
}
.flow-svg{ width:100%; height:auto; display:block; }
.route{ fill:none; /* stroke via SVG attribute */ stroke-width:4; opacity:.65; }
.cursor{ fill:#eaf7ff; filter: drop-shadow(0 6px 16px rgba(0,102,255,.35)); }

@supports (offset-path: path("M0,0 L10,10")){
  .cursor{ offset-path: path("M30,180 C140,150 180,60 280,60 S460,160 560,160 720,80 860,80"); offset-distance:0%; }
  .flow-svg.run .cursor{ animation: route-run 7s ease-in-out infinite; }
  @keyframes route-run{ 0%{ offset-distance:0% } 50%{ offset-distance:100% } 100%{ offset-distance:0% } }
}
@supports not (offset-path: path("M0,0 L10,10")){
  .flow-svg.run .cursor{ animation: pulse 1.8s ease-in-out infinite; }
  @keyframes pulse{ 0%,100%{ r:7; opacity:.8 } 50%{ r:9; opacity:1 } }
}

.flow-grid{
  display:grid; gap:1rem; grid-template-columns: repeat(3, minmax(160px,1fr));
}
.flow-card{
  background:#0f1317; border:1px solid var(--c-line); border-radius:16px;
  padding:.6rem .6rem .9rem; text-align:center; transition:transform .3s ease, box-shadow .3s ease;
}
.flow-card:hover{ transform: translateY(-3px); box-shadow:0 20px 50px rgba(0,0,0,.45); }
.flow-card figcaption{ color:#a4b7c9; font-size:.9rem; margin-top:.5rem; }
@media (max-width: 820px){ .flow-grid{ grid-template-columns:1fr; } }

/* =========================
   S9 — Delivery Light Walk
   ========================= */
.delivery-walk{
  position:relative; padding:58px 0 64px;
  background:
    radial-gradient(900px 600px at 85% -10%, rgba(124,199,255,.06), transparent 60%),
    linear-gradient(180deg,#0a0b0c,#0f1114 65%,#0a0b0c);
  border-top:1px solid var(--c-line);
}
.walk-head .h2{ font-family:"Prata",serif; color:#eaf7ff; font-size:clamp(1.35rem,1.1rem + 1.4vw,1.9rem); margin:0 0 .35rem; }
.walk-lead{ color:#cbd6e0; margin:0 0 .9rem; }

.walk-stage{
  width:min(1100px,94vw); margin:0 auto 1rem;
  border:1px solid var(--c-line); border-radius:16px; background:#0f1215; box-shadow:var(--shadow-1);
  overflow:clip; position:relative; height:160px;
}
.walk-line{
  position:absolute; inset:24px; border-radius:12px;
  background:
    linear-gradient(90deg, #16202b 0 50%, #111821 50% 100%),
    linear-gradient(0deg, #16202b 0 50%, #111821 50% 100%);
  background-size: 24px 24px, 24px 24px;
  mask: radial-gradient(400px 60px at 20% 50%, #000, transparent 70%);
}
.walk-points .wp{
  position:absolute; width:10px; height:10px; border-radius:50%;
  background: radial-gradient(circle at 30% 30%, #eaf7ff, #7cc7ff);
  filter: blur(.15px); opacity:.35; transform: scale(.9);
  transition: opacity .2s ease, transform .2s ease, box-shadow .2s ease;
}
.wp.p1{ left: 12%; top: 28%; }
.wp.p2{ left: 32%; top: 56%; }
.wp.p3{ left: 54%; top: 38%; }
.wp.p4{ left: 72%; top: 58%; }
.wp.p5{ left: 86%; top: 34%; }
.walk-points .wp.is-on{
  opacity: 1; transform: scale(1);
  box-shadow: 0 10px 24px rgba(0,102,255,.35);
}

.walk-grid{
  display:grid; gap:1rem; grid-template-columns: repeat(3, minmax(160px,1fr));
}
.walk-card{
  background:#0f1317; border:1px solid var(--c-line); border-radius:16px;
  padding:.6rem .6rem .9rem; text-align:center; transition:transform .3s ease, box-shadow .3s ease;
}
.walk-card:hover{ transform: translateY(-3px); box-shadow:0 20px 50px rgba(0,0,0,.45); }
.walk-card figcaption{ color:#a4b7c9; font-size:.9rem; margin-top:.5rem; }
@media (max-width: 820px){ .walk-grid{ grid-template-columns:1fr; } }
/* =========================
   S10 — Owner Lounge & Brew Bar
   ========================= */
.owner-lounge{
  position:relative; padding:58px 0 56px;
  background:
    radial-gradient(1000px 700px at 10% 100%, rgba(124,199,255,.06), transparent 60%),
    linear-gradient(180deg,#0b0d10,#0e1114 65%,#0a0b0c);
  border-top:1px solid var(--c-line);
}
.lounge-head .h2{ font-family:"Prata",serif; color:#eaf7ff; font-size:clamp(1.35rem,1.1rem + 1.4vw,1.9rem); margin:0 0 .35rem; }
.lounge-lead{ color:#cbd6e0; margin:0 0 .9rem; }

.lounge-stage{
  width:min(1100px,94vw); height:160px; margin:0 auto 1rem;
  border:1px solid var(--c-line); border-radius:16px; background:#0f1215; box-shadow:var(--shadow-1);
  overflow:clip; position:relative;
}
.cup{
  position:absolute; bottom:12px; left:calc(50% - 40px);
  width:80px; height:46px; border:1px solid #213243; border-radius:10px 10px 14px 14px;
  background:#0b0e12;
}
.cup::after{
  content:""; position:absolute; right:-16px; top:10px;
  width:26px; height:18px; border:1px solid #213243; border-left:none; border-radius:0 14px 14px 0;
}
.steam{
  position:absolute; bottom:46px; left:calc(50% - 6px);
  width:12px; height:36px; border-radius:999px;
  background: linear-gradient(180deg, rgba(220,240,255,.85), rgba(120,180,255,.0));
  filter: blur(1px); opacity:.0;
  transform: translateX(var(--dx,0)) scaleY(.6);
  animation: rise 2.6s ease-out forwards;
}
@keyframes rise{
  0%{ transform: translateY(16px) translateX(var(--dx,0)) scaleY(.6); opacity: .0 }
  20%{ opacity:.9 }
  100%{ transform: translateY(-90px) translateX(calc(var(--dx,0) * 2)) scaleY(1); opacity:0 }
}

.lounge-grid{
  display:grid; gap:1rem; grid-template-columns: repeat(3, minmax(160px,1fr));
}
.lounge-card{
  background:#0f1317; border:1px solid var(--c-line); border-radius:16px;
  padding:.6rem .6rem .9rem; text-align:center; transition:transform .3s ease, box-shadow .3s ease;
}
.lounge-card:hover{ transform: translateY(-3px); box-shadow:0 20px 50px rgba(0,0,0,.45); }
.lounge-card figcaption{ color:#a4b7c9; font-size:.9rem; margin-top:.5rem; }
@media (max-width: 820px){ .lounge-grid{ grid-template-columns:1fr; } }

/* =========================
   S11 — Method Wall & Safety
   ========================= */
.method-wall{
  position:relative; padding:58px 0 56px;
  background:
    radial-gradient(900px 600px at 85% -10%, rgba(124,199,255,.06), transparent 60%),
    linear-gradient(180deg,#0a0b0c,#0f1114 65%,#0a0b0c);
  border-top:1px solid var(--c-line);
}
.method-head .h2{ font-family:"Prata",serif; color:#eaf7ff; font-size:clamp(1.35rem,1.1rem + 1.4vw,1.9rem); margin:0 0 .35rem; }
.method-lead{ color:#cbd6e0; margin:0 0 .9rem; }

.method-stage{
  width:min(1100px,94vw); margin:0 auto 1rem;
  border:1px solid var(--c-line); border-radius:16px; background:#0f1215; box-shadow:var(--shadow-1);
  padding: 14px;
}
.checklist{ list-style:none; margin:0; padding:0; display:grid; gap:.5rem; }
.checklist li{
  display:flex; align-items:center; gap:.55rem;
  color:#a9b6c4; background:#0b0e12; border:1px solid var(--c-line); border-radius:12px; padding:.5rem .65rem;
}
.checklist .box{
  width:16px; height:16px; border-radius:4px; border:1px solid #274057; display:inline-block;
  background: #0e141b;
  position:relative;
}
.checklist li.is-done{ color:#eaf7ff; box-shadow:0 14px 34px rgba(0,102,255,.18) inset; }
.checklist li.is-done .box{ background: linear-gradient(180deg, #33aaff, #0066ff); border-color: transparent; }
.checklist li.is-done .box::after{
  content:""; position:absolute; left:3px; top:1px; width:9px; height:12px; border-right:2px solid #fff; border-bottom:2px solid #fff;
  transform: rotate(45deg);
}

.method-grid{
  display:grid; gap:1rem; grid-template-columns: repeat(2, minmax(160px,1fr));
}
.method-card{
  background:#0f1317; border:1px solid var(--c-line); border-radius:16px;
  padding:.6rem .6rem .9rem; text-align:center; transition:transform .3s ease, box-shadow .3s ease;
}
.method-card:hover{ transform: translateY(-3px); box-shadow:0 20px 50px rgba(0,0,0,.45); }
.method-card figcaption{ color:#a4b7c9; font-size:.9rem; margin-top:.5rem; }
@media (max-width: 640px){ .method-grid{ grid-template-columns:1fr; } }

/* =========================
   S12 — Skill Lab · Apprentice Clinic
   ========================= */
.skill-lab{
  position:relative; padding:58px 0 64px;
  background:
    radial-gradient(1000px 700px at 10% 100%, rgba(124,199,255,.06), transparent 60%),
    linear-gradient(180deg,#0b0d10,#0e1114 65%,#0a0b0c);
  border-top:1px solid var(--c-line);
}
.skill-head .h2{ font-family:"Prata",serif; color:#eaf7ff; font-size:clamp(1.35rem,1.1rem + 1.4vw,1.9rem); margin:0 0 .35rem; }
.skill-lead{ color:#cbd6e0; margin:0 0 .9rem; }

.skill-stage{
  width:min(1100px,94vw); margin:0 auto 1rem;
  border:1px solid var(--c-line); border-radius:16px; background:#0f1215; box-shadow:var(--shadow-1);
  padding: 16px;
}
.cols{ display:grid; grid-template-columns: repeat(3, 1fr); gap:10px; }
.col{
  position:relative; height:120px; border:1px solid var(--c-line); border-radius:12px; background:#0b0e12; overflow:hidden;
}
.col em{ position:absolute; inset:auto 8px 6px 8px; color:#9fb3c6; font-size:.85rem; font-style:normal; }
.fill{
  position:absolute; left:0; bottom:0; width:100%; height:0%;
  background: linear-gradient(180deg, #33aaff, #0066ff);
  box-shadow: 0 -10px 24px rgba(0,102,255,.25) inset;
  transition: height 1.6s cubic-bezier(.2,.8,.2,1);
}

.skill-grid{
  display:grid; gap:1rem; grid-template-columns: repeat(3, minmax(160px,1fr));
}
.skill-card{
  background:#0f1317; border:1px solid var(--c-line); border-radius:16px;
  padding:.6rem .6rem .9rem; text-align:center; transition:transform .3s ease, box-shadow .3s ease;
}
.skill-card:hover{ transform: translateY(-3px); box-shadow:0 20px 50px rgba(0,0,0,.45); }
.skill-card figcaption{ color:#a4b7c9; font-size:.9rem; margin-top:.5rem; }
@media (max-width: 820px){ .skill-grid{ grid-template-columns:1fr; } }
/* =========================
   S13 — Micro-Defect Archive
   ========================= */
.defect-archive{
  position:relative; padding:58px 0 56px;
  background:
    radial-gradient(900px 600px at 85% -10%, rgba(124,199,255,.06), transparent 60%),
    linear-gradient(180deg,#0a0b0c,#0f1114 65%,#0a0b0c);
  border-top:1px solid var(--c-line);
}
.archive-head .h2{ font-family:"Prata",serif; color:#eaf7ff; font-size:clamp(1.35rem,1.1rem + 1.4vw,1.9rem); margin:0 0 .35rem; }
.archive-lead{ color:#cbd6e0; margin:0 0 .9rem; }

.archive-stage{
  --lx: 50%; --ly: 50%;
  width:min(1100px,94vw); height:180px; margin:0 auto 1rem;
  border:1px solid var(--c-line); border-radius:18px; background:#0f1215;
  box-shadow:var(--shadow-1); position:relative; overflow:clip;
}
.surface{ position:absolute; inset:0; }
.surface.before{
  background:
    repeating-linear-gradient(112deg, rgba(200,230,255,.08) 0 2px, rgba(200,230,255,0) 2px 8px),
    radial-gradient(900px 120px at 10% 30%, rgba(124,199,255,.06), transparent 70%);
  mix-blend-mode: screen;
}
.surface.after{
  /* «спокойная» поверхность — слегка зерно и тёмный тон */
  background:
    radial-gradient(800px 100px at 90% 70%, rgba(124,199,255,.08), transparent 70%),
    #0b0e12;
  clip-path: circle(70px at var(--lx) var(--ly));
  transition: clip-path .12s linear;
}
.loupe{
  position:absolute; width:140px; height:140px; border-radius:50%;
  left: calc(var(--lx)); top: calc(var(--ly));
  transform: translate(-50%, -50%);
  border:1px solid #2a3a4b;
  box-shadow: 0 0 0 2px rgba(20,40,60,.6) inset, 0 10px 24px rgba(0,0,0,.35);
  pointer-events:none;
}
.scan-line{
  position:absolute; inset:0;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.16), transparent);
  transform: translateX(-120%);
}
.archive-stage.run .scan-line{ animation: arc-scan 3.2s ease-in-out infinite; }
@keyframes arc-scan{
  0%{ transform: translateX(-120%) } 55%{ transform: translateX(120%) } 100%{ transform: translateX(120%) }
}

.archive-grid{
  display:grid; gap:1rem; grid-template-columns: repeat(2, minmax(160px,1fr));
}
.archive-card{
  background:#0f1317; border:1px solid var(--c-line); border-radius:16px;
  padding:.6rem .6rem .9rem; text-align:center; transition:transform .3s ease, box-shadow .3s ease;
}
.archive-card:hover{ transform: translateY(-3px); box-shadow:0 20px 50px rgba(0,0,0,.45); }
.archive-card figcaption{ color:#a4b7c9; font-size:.9rem; margin-top:.5rem; }
@media (max-width: 640px){ .archive-grid{ grid-template-columns:1fr; } }

/* =========================
   S14 — Community Drives & Care Talks
   ========================= */
.community{
  position:relative; padding:58px 0 64px;
  background:
    radial-gradient(1000px 700px at 10% 100%, rgba(124,199,255,.06), transparent 60%),
    linear-gradient(180deg,#0b0d10,#0e1114 65%,#0a0b0c);
  border-top:1px solid var(--c-line);
}
.comm-head .h2{ font-family:"Prata",serif; color:#eaf7ff; font-size:clamp(1.35rem,1.1rem + 1.4vw,1.9rem); margin:0 0 .35rem; }
.comm-lead{ color:#cbd6e0; margin:0 0 .9rem; }

.comm-stage{
  width:min(1100px,94vw); margin:0 auto 1rem;
  border:1px solid var(--c-line); border-radius:16px; background:#0f1215;
  box-shadow:var(--shadow-1); position:relative; overflow:clip; height:70px;
}
.city-rail{
  position:absolute; inset:0; display:inline-flex; align-items:center; gap:.8rem;
  padding: 0 1rem; white-space:nowrap; transform: translateX(0);
}
.city{
  display:inline-block; padding:.35rem .9rem; border-radius:999px;
  border:1px solid var(--c-line); background:#0f1317; color:#a9b6c4;
}
.comm-stage.run .city-rail{ animation: rail-move 18s linear infinite; }
@keyframes rail-move{
  0%{ transform: translateX(0) }
  100%{ transform: translateX(-50%) }
}

.comm-grid{
  display:grid; gap:1rem; grid-template-columns: repeat(3, minmax(160px,1fr));
}
.comm-card{
  background:#0f1317; border:1px solid var(--c-line); border-radius:16px;
  padding:.6rem .6rem .9rem; text-align:center; transition:transform .3s ease, box-shadow .3s ease;
}
.comm-card:hover{ transform: translateY(-3px); box-shadow:0 20px 50px rgba(0,0,0,.45); }
.comm-card figcaption{ color:#a4b7c9; font-size:.9rem; margin-top:.5rem; }
@media (max-width: 820px){ .comm-grid{ grid-template-columns:1fr; } }
/* --- FIX: Community rail — clip edges, smooth marquee, safe padding --- */
.comm-stage{
  overflow: hidden !important;            /* вместо clip — кроссбраузерно */
  padding: 8px 14px;                      /* запас от скруглений рамки */
  position: relative;
  /* мягкое затемнение краёв (Safari/WebKit поддержка тоже есть) */
  -webkit-mask-image: linear-gradient(to right,
                      transparent 0, #000 24px,
                      #000 calc(100% - 24px), transparent 100%);
          mask-image: linear-gradient(to right,
                      transparent 0, #000 24px,
                      #000 calc(100% - 24px), transparent 100%);
}

.city-rail{
  height: 100%;
  display: inline-flex;
  align-items: center;
  gap: .8rem;
  white-space: nowrap;
  min-width: max-content;                 /* одна непрерывная лента */
  will-change: transform;
  transform: translate3d(0,0,0);         /* сглаживаем дёрганья */
}
.comm-stage.run .city-rail{
  animation: rail-move 18s linear infinite;
}
@keyframes rail-move{
  from{ transform: translate3d(0,0,0); }
  to  { transform: translate3d(-50%,0,0); }  /* половина, т.к. контент продублирован */
}

/* чуть компактнее на узких экранах */
@media (max-width: 560px){
  .city-rail{ gap: .6rem; }
  .city{ padding: .28rem .7rem; font-size: .95rem; }
}
/* =========================
   EXTRA — Studio Principles & Calibration Notes
   ========================= */
.studio-principles{
  position:relative; padding:58px 0 56px;
  background:
    radial-gradient(900px 600px at 85% -10%, rgba(124,199,255,.06), transparent 60%),
    linear-gradient(180deg,#0a0b0c,#0f1114 65%,#0a0b0c);
  border-top:1px solid var(--c-line);
}
.sp-head .h2{
  font-family:"Prata",serif; color:#eaf7ff;
  font-size:clamp(1.35rem,1.1rem + 1.4vw,1.9rem); margin:0 0 .35rem;
}
.sp-lead{ color:#cbd6e0; margin:0 0 .9rem; }
.sp-body{ color:#cbd6e0; }
.sp-body p{ margin:0 0 1rem; line-height:1.75; }
.sp-list{ padding-left:1.2rem; margin:0 0 1rem; color:#a9b6c4; }
.sp-list li{ margin:.4rem 0; }
.sp-quote{
  margin: 1rem 0; padding:.8rem 1rem; color:#eaf7ff;
  border:1px solid var(--c-line); border-radius:12px; background:#0f1317;
  box-shadow: var(--shadow-1);
}
.sp-dl{ display:grid; grid-template-columns: 1fr 2.2fr; gap:.4rem 1rem; }
.sp-dl dt{ color:#eaf7ff; }
.sp-dl dd{ margin:0; color:#9fb3c6; }
@media (max-width: 700px){
  .sp-dl{ grid-template-columns:1fr; }
}

/* =========================
   EXTRA — Aftercare Playbook for Indian Cities
   ========================= */
.aftercare-playbook{
  position:relative; padding:58px 0 64px;
  background:
    radial-gradient(1000px 700px at 10% 100%, rgba(124,199,255,.06), transparent 60%),
    linear-gradient(180deg,#0b0d10,#0e1114 65%,#0a0b0c);
  border-top:1px solid var(--c-line);
}
.ap-head .h2{
  font-family:"Prata",serif; color:#eaf7ff;
  font-size:clamp(1.35rem,1.1rem + 1.4vw,1.9rem); margin:0 0 .35rem;
}
.ap-lead{ color:#cbd6e0; margin:0 0 .9rem; }
.ap-body{ color:#cbd6e0; }
.ap-body p{ margin:0 0 1rem; line-height:1.75; }

.ap-grid{
  display:grid; gap:1rem; grid-template-columns: 1fr 1fr;
  margin: .4rem 0 1rem;
}
.ap-col{
  border:1px solid var(--c-line); border-radius:12px; background:#0f1317;
  padding:.7rem .8rem; box-shadow: var(--shadow-1);
}
.ap-col h3{ color:#eaf7ff; margin:.1rem 0 .4rem; font-size:1.05rem; }
.ap-col ul{ margin:0; padding-left:1.1rem; color:#a9b6c4; }
.ap-col li{ margin:.35rem 0; }

.ap-faq{
  border:1px solid var(--c-line); border-radius:12px; background:#0f1317;
  padding:.55rem .8rem; margin: .5rem 0;
}
.ap-faq summary{
  cursor:pointer; list-style:none; color:#eaf7ff;
}
.ap-faq summary::-webkit-details-marker{ display:none; }
.ap-faq p{ margin:.5rem 0 0; color:#a9b6c4; }

@media (max-width: 760px){
  .ap-grid{ grid-template-columns:1fr; }
}