/* ===== HERO: Mirror Arc ===== */
.hero-mirror-arc{
  position: relative;
  min-height: calc(100dvh - 64px);
  display: grid;
  align-items: center;
  justify-items: center;
  padding: 64px 0 48px;
  background:
    radial-gradient(1000px 600px at 20% -10%, rgba(124,199,255,.08), transparent 60%),
    radial-gradient(900px 600px at 80% 110%, rgba(51,170,255,.10), transparent 65%),
    linear-gradient(180deg, #0a0b0c, #0e1114 65%, #0a0b0c);
  overflow: hidden;
  isolation: isolate;
}

/* Мягкая светящаяся “ореольная” подложка */
.halo{
  position: absolute;
  inset: -20% -10% auto -10%;
  height: 60%;
  background: radial-gradient(closest-side, rgba(124,199,255,.15), transparent 70%);
  filter: blur(40px);
  z-index: 0;
  animation: halo-pulse 8s ease-in-out infinite;
}
@keyframes halo-pulse{
  0%,100%{ opacity:.55; transform: translateY(0) }
  50%{ opacity:.9; transform: translateY(6px) }
}

/* Блик, двигающийся за курсором (JS обновляет переменные) */
.specular{
  --sx: 50%;
  --sy: 50%;
  position: absolute; inset: 0;
  background:
    radial-gradient(300px 220px at var(--sx) var(--sy), rgba(160,215,255,.14), transparent 72%),
    radial-gradient(160px 120px at calc(var(--sx) + 12%) calc(var(--sy) + 8%), rgba(255,255,255,.07), transparent 70%);
  mix-blend-mode: screen;
  pointer-events: none;
  z-index: 0;
  transition: background-position .2s linear;
}

/* Копирайт и призыв */
.hero-copy{
  position: relative;
  z-index: 1;
  text-align: center;
  max-width: 780px;
  padding: 0 1rem;
}
.gloss-title{
  font-family: "Prata", serif;
  font-size: clamp(1.8rem, 3.5vw + 1rem, 3.2rem);
  line-height: 1.15;
  margin: 0 0 .75rem;
  background: linear-gradient(90deg, #eaf7ff 0%, #a8d8ff 35%, #ffffff 70%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-size: 220% 100%;
  animation: title-shine 5.5s linear infinite;
  letter-spacing: .3px;
}
@keyframes title-shine{
  0%{ background-position: 120% 0; }
  100%{ background-position: -120% 0; }
}
.lead{
  color: #cdd7e0;
  margin: 0 auto 1.1rem;
  font-size: clamp(.95rem, .45vw + .9rem, 1.1rem);
}
.cta{
  display:inline-block;
  margin-top: .4rem;
  padding: .75rem 1.25rem;
  border-radius: var(--radius-full);
  background: linear-gradient(90deg, #33aaff, #0066ff);
  color: #fff; text-decoration:none; font-weight: 600; letter-spacing:.2px;
  box-shadow: 0 8px 24px rgba(0,102,255,.35);
  transition: transform .25s ease, box-shadow .25s ease, filter .2s ease;
}
.cta:hover{ transform: translateY(-3px); box-shadow: 0 12px 30px rgba(0,102,255,.5); filter: saturate(1.05); }

/* Кольцевая галерея */
.hero-orbit{
  position: relative;
  display: grid;
  grid-template-columns: repeat(5, minmax(160px, 1fr));
  gap: clamp(.8rem, 2.2vw, 1.2rem);
  margin-top: 34px;
  padding: .5rem;
  z-index: 1;
}
.orbit-card{
  text-align: center;
  background: #0f1215;
  border: 1px solid var(--c-line);
  border-radius: var(--radius-xl);
  padding: .7rem .7rem .9rem;
  box-shadow: var(--shadow-1);
  transform: translateY(8px) scale(.98);
  opacity: 0;
  transition: transform .6s cubic-bezier(.2,.8,.2,1), opacity .6s ease, box-shadow .25s ease;
}
.orbit-card:hover{ transform: translateY(0) scale(1); box-shadow: 0 20px 50px rgba(0,0,0,.45); }
.orbit-card figcaption{
  margin-top: .55rem; font-size: .9rem; color: var(--c-muted); letter-spacing:.2px;
}

/* Reveal-in (IntersectionObserver добавит .is-in) */
[data-reveal].is-in{ opacity: 1; transform: none; }
.delay-1{ transition-delay: .06s; }
.delay-2{ transition-delay: .12s; }
.delay-3{ transition-delay: .18s; }
.delay-4{ transition-delay: .24s; }

/* ===== Адаптивность ===== */
@media (max-width: 1100px){
  .hero-orbit{ grid-template-columns: repeat(5, minmax(140px, 1fr)); }
}
@media (max-width: 920px){
  .hero-orbit{ grid-template-columns: repeat(3, minmax(150px, 1fr)); }
}
@media (max-width: 640px){
  .hero-orbit{ grid-template-columns: repeat(2, minmax(150px, 1fr)); }
}
@media (max-width: 380px){
  .hero-orbit{ grid-template-columns: 1fr; }
}
/* =========================
   Section 2 — Streak Test Rail
   ========================= */
.streak-rail{
  position: relative;
  padding: 56px 0 42px;
  background:
    radial-gradient(900px 600px at 15% -10%, rgba(124,199,255,.06), transparent 60%),
    linear-gradient(180deg, #0b0d10, #0e1114 60%, #0a0b0c);
  border-top: 1px solid var(--c-line);
  border-bottom: 1px solid var(--c-line);
}
.rail-head .h2{
  font-family: "Prata", serif;
  font-size: clamp(1.4rem, 1.2rem + 1.5vw, 2rem);
  margin: 0 0 .4rem;
  letter-spacing: .3px;
  color: #eaf6ff;
}
.rail-lead{
  color: #cbd6e0;
  margin: 0 0 .8rem;
}
.rail-chips{
  display:flex; flex-wrap:wrap; gap:.5rem;
  padding:0; margin:.6rem 0 0; list-style:none;
}
.rail-chips li{
  padding:.35rem .7rem; border:1px solid var(--c-line);
  border-radius: 999px; color:#a9b6c4; background:#0f1317;
  font-size:.85rem;
}

/* Трек с автопрокруткой; останавливается при hover/focus */
.rail-track{
  position: relative; overflow: hidden; margin-top: 20px;
}
.rail-inner{
  display:flex; gap: 1rem; align-items: center; padding: .4rem;
  will-change: transform;
}
.rail-card{
  position: relative; padding: .6rem .6rem .8rem; text-align: center;
  background:#0f1215; border:1px solid var(--c-line); border-radius: var(--radius-xl);
  box-shadow: var(--shadow-1);
  transition: transform .35s ease, box-shadow .35s ease;
}
.rail-card:hover{ transform: translateY(-3px); box-shadow: 0 20px 50px rgba(0,0,0,.45); }
.rail-card figcaption{ color:#9fb3c6; font-size:.9rem; margin-top:.5rem; }

/* Движущаяся световая полоса поверх картинки */
.rail-card .streak{
  position:absolute; inset: 8% 8% auto 8%; height: 34%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.14), transparent);
  filter: blur(6px);
  transform: translateX(-120%);
  animation: streak-sweep 3.8s ease-in-out infinite;
  border-radius: 10px;
  pointer-events:none;
}
@keyframes streak-sweep{
  0%{ transform: translateX(-120%) skewX(-8deg) }
  55%{ transform: translateX(140%) skewX(-8deg) }
  100%{ transform: translateX(140%) skewX(-8deg) }
}

/* =========================
   Section 3 — Micro-Swirl Lab (Before/After)
   ========================= */
.microswirl-lab{
  position: relative; padding: 60px 0 44px;
  background:
    radial-gradient(800px 500px at 88% 10%, rgba(51,170,255,.07), transparent 60%),
    linear-gradient(180deg, #0a0b0c, #0f1114 70%, #0a0b0c);
}
.lab-head .h2{
  font-family:"Prata", serif; color:#eaf7ff; margin:0 0 .4rem;
  font-size: clamp(1.35rem, 1.1rem + 1.4vw, 1.9rem);
}
.lab-lead{ color:#cfd8e2; margin:0 0 1rem; }

.ba-wrap{
  position: relative;
  width: min(980px, 92vw);
  margin: 0 auto;
  border-radius: 16px;
  overflow: hidden;
  border:1px solid var(--c-line);
  background:#0f1215;
  box-shadow: var(--shadow-1);
  touch-action: none;
}
.ba-img{ display:block; width:100%; height:auto; max-width: none; }
.ba-after{
  position:absolute; inset:0; clip-path: inset(0 50% 0 0);
  transition: clip-path .08s linear;
}
.ba-before{ position:relative; z-index:0; }

.ba-handle{
  position:absolute; inset:0; width:0;
}
.ba-handle::before{
  content:""; position:absolute; inset:0; left:50%; width:2px; background:#66b7ff66;
  box-shadow: 0 0 0 1px #66b7ff33;
}
.ba-dot{
  position: absolute; left:50%; top:50%;
  transform: translate(-50%,-50%);
  width: 42px; height: 42px; border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, #9ed6ff, #3aa9ff);
  box-shadow: 0 10px 30px rgba(0,102,255,.35);
}
.ba-dot::after{
  content:"↔"; position:absolute; inset:0; display:grid; place-items:center;
  color:#fff; font-weight:700;
}

/* Нижний список фич */
.lab-foot{ margin-top: .9rem; }
.lab-points{
  display:grid; gap:.5rem; grid-template-columns: repeat(3, 1fr);
  padding:0; margin:0; list-style:none;
}
.lab-points li{ background:#0f1317; border:1px solid var(--c-line); border-radius: 14px; padding:.7rem .8rem; color:#a9b6c4; }
@media (max-width: 900px){ .lab-points{ grid-template-columns: 1fr; } }

/* =========================
   Section 4 — Hydro-Bead Field
   ========================= */
.hydrobead-field{
  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);
}
.bead-head .h2{
  font-family:"Prata", serif; color:#eaf7ff; margin:0 0 .35rem;
  font-size: clamp(1.35rem, 1.1rem + 1.4vw, 1.9rem);
}
.bead-lead{ color:#cbd6e0; margin:0 0 1rem; }

.bead-grid{
  width:min(1100px, 94vw); margin: 0 auto;
  display:grid; gap: 1rem;
  grid-template-columns: repeat(5, minmax(160px, 1fr));
  position: relative;
  padding: .5rem;
  background:#0f1215;
  border:1px solid var(--c-line);
  border-radius: 18px;
  box-shadow: var(--shadow-1);
  overflow: hidden;
}
.bead-card{
  text-align:center; background:#0f1317; border:1px solid var(--c-line);
  border-radius: 14px; padding:.6rem .6rem .8rem;
  transition: transform .3s ease, box-shadow .3s ease;
}
.bead-card:hover{ transform: translateY(-3px); box-shadow: 0 20px 50px rgba(0,0,0,.45); }
.bead-card figcaption{ color:#a3b6c8; font-size:.9rem; margin-top:.5rem; }

/* Оверлей с анимированными каплями (JS наполняет .bead-overlay .drop) */
.bead-overlay{
  position:absolute; inset:0; pointer-events:none; mix-blend-mode: screen;
}
.drop{
  position:absolute; width: 10px; height: 10px; border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, rgba(200,230,255,.95), rgba(120,180,255,.8) 60%, rgba(80,140,240,.2) 100%);
  filter: blur(.3px);
  animation: fall 2.8s linear forwards;
}
@keyframes fall{
  0%{ transform: translate(var(--x,0), -20px) scale(.8); opacity:.95; }
  85%{ transform: translate(var(--x,0), calc(100% - 24px)) scale(1); opacity:.95; }
  100%{ transform: translate(calc(var(--x,0) + 30px), calc(100% - 24px)) scale(.9); opacity:0; }
}

/* Bead grid responsiveness */
@media (max-width: 1050px){ .bead-grid{ grid-template-columns: repeat(4, minmax(160px, 1fr)); } }
@media (max-width: 820px){ .bead-grid{ grid-template-columns: repeat(3, minmax(160px, 1fr)); } }
@media (max-width: 620px){ .bead-grid{ grid-template-columns: repeat(2, minmax(160px, 1fr)); } }
@media (max-width: 380px){ .bead-grid{ grid-template-columns: 1fr; } }

/* Rail responsiveness */
@media (max-width: 900px){
  .rail-inner{ gap:.8rem; }
}
@media (max-width: 640px){
  .rail-chips li{ font-size:.82rem; }
}
/* =========================
   Section 5 — Noise-Less Cabin
   ========================= */
.cabin-quiet{
  position: relative; padding: 56px 0 54px;
  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);
}
.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 .8rem; }

.noise-field{
  position: relative; width:min(1100px,94vw); height: 160px;
  margin: .3rem auto 1.1rem; border-radius: 16px;
  border:1px solid var(--c-line); background:#0f1215; overflow:hidden;
  box-shadow: var(--shadow-1);
}
.noise-field .wave{
  position:absolute; left:-20%; right:-20%;
  height: 2px; background: linear-gradient(90deg, transparent, #82c4ff, transparent);
  opacity:.65; filter: blur(.2px);
  animation: wave-slide var(--dur,6s) linear infinite;
  transform: translateY(var(--off,0));
}
@keyframes wave-slide{
  0%{ transform: translate(-10%, var(--off,0)) }
  100%{ transform: translate(10%, var(--off,0)) }
}
.noise-field.is-calm .wave{ opacity:.25; }

.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: 14px;
  padding:.6rem .6rem .8rem; 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; }
}

/* =========================
   Section 6 — Wheel Sanctuary
   ========================= */
.wheel-sanctuary{
  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);
}
.wheel-head .h2{
  font-family:"Prata", serif; color:#eaf7ff;
  font-size: clamp(1.35rem, 1.1rem + 1.4vw, 1.9rem);
  margin:0 0 .35rem;
}
.wheel-lead{ color:#cbd6e0; margin:0 0 .9rem; }

/* Визуальный «ротор» без изображений */
.rotor-stage{
  width:min(520px, 88vw); height:min(520px, 88vw);
  margin: 0 auto 1rem; position: relative;
  display:grid; place-items:center;
}
.rotor-ring{
  position: absolute; inset: 0;
  border-radius: 50%;
  background:
    conic-gradient(from 0deg, rgba(130,196,255,.12), rgba(130,196,255,0) 40%),
    radial-gradient(closest-side, transparent 68%, rgba(130,196,255,.08) 72%, transparent 76%);
  filter: drop-shadow(0 10px 22px rgba(0,0,0,.35));
  animation: rotor-idle 18s linear infinite paused; /* запустим из JS */
}
.rotor-ring .rotor-glow{
  position: absolute; inset: 10%; border-radius: 50%;
  box-shadow: 0 0 120px 20px rgba(80,150,255,.08) inset;
}
.rotor-ring .rotor-glow.delay{
  inset: 14%; box-shadow: 0 0 160px 28px rgba(120,200,255,.06) inset;
}
.rotor-core{
  width: 24%; aspect-ratio: 1/1; border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #a8d8ff, #3aa9ff);
  box-shadow: 0 16px 40px rgba(0,102,255,.35);
}
@keyframes rotor-idle{
  to{ transform: rotate(360deg); }
}
.rotor-ring.spin{ animation-play-state: running; }

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

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

/* =========================
   Section 7 — EdgeCraft Trim Precision
   ========================= */
.trim-precision{
  position: relative; padding: 56px 0 60px;
  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);
}
.trim-head .h2{
  font-family:"Prata", serif; color:#eaf7ff;
  font-size: clamp(1.35rem, 1.1rem + 1.4vw, 1.9rem);
  margin:0 0 .35rem;
}
.trim-lead{ color:#cbd6e0; margin:0 0 .9rem; }

.trim-figure{
  width:min(980px, 92vw);
  margin: 0 auto;
  position: relative;
  background:#0f1215; border:1px solid var(--c-line); border-radius: 16px;
  padding: .8rem .8rem 1rem; text-align:center; box-shadow: var(--shadow-1);
}
.trim-figure figcaption{ color:#a4b7c9; font-size:.9rem; margin-top:.5rem; }

.trim-path{
  position:absolute; inset: .8rem .8rem 2.6rem .8rem; /* совпасть с паддингами */
  display:block;
}
.trim-path .trace{
  fill: none; stroke: #7cc7ff; stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 6 10; stroke-dashoffset: 200;
  opacity:.85; filter: drop-shadow(0 0 10px rgba(124,199,255,.25));
  animation: trace-draw 4.5s ease-in-out infinite;
}
.trim-path .trace.delay{ animation-delay: .9s; }
@keyframes trace-draw{
  0%{ stroke-dashoffset: 200; opacity:.1 }
  20%{ opacity:.85 }
  60%{ stroke-dashoffset: 0 }
  100%{ stroke-dashoffset: -200; opacity:.3 }
}
/* =========================
   Section 8 — Reflectometry Bench
   ========================= */
.reflect-bench{
  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);
}
.bench-head .h2{
  font-family:"Prata", serif; color:#eaf7ff;
  font-size: clamp(1.35rem, 1.1rem + 1.4vw, 1.9rem); margin:0 0 .35rem;
}
.bench-lead{ color:#cbd6e0; margin:0 0 .9rem; }

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

/* Анимированные скан-линии */
.scanlines{
  position:absolute; inset: .6rem .6rem 2.8rem .6rem; border-radius:14px;
  background:
    repeating-linear-gradient( to bottom,
      rgba(130,196,255,.08) 0 2px,
      rgba(130,196,255,0) 2px 6px
    );
  mix-blend-mode: screen; opacity:.6;
  transform: translateY(-100%);
}
.bench-card.is-scan .scanlines{
  animation: scan-move 2.8s ease-in-out infinite;
}
@keyframes scan-move{
  0%,100%{ transform: translateY(-100%) }
  50%{ transform: translateY(40%) }
}

/* =========================
   Section 9 — Monsoon Rinse Map
   ========================= */
.monsoon-map{
  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);
}
.monsoon-head .h2{
  font-family:"Prata", serif; color:#eaf7ff;
  font-size: clamp(1.35rem, 1.1rem + 1.4vw, 1.9rem); margin:0 0 .35rem;
}
.monsoon-lead{ color:#cbd6e0; margin:0 0 .9rem; }

.map-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:hidden;
}
.rinse-svg{ width:100%; height:auto; display:block; }
.flow{
  fill:none; ; stroke-width:3; stroke-linecap:round;
  stroke-dasharray: 160 20; stroke-dashoffset: 180;
  opacity:.75; filter: drop-shadow(0 0 10px rgba(124,199,255,.2));
}
.rinse-svg.run .flow{ animation: flow-run 3.8s ease-in-out infinite; }
.flow.b{ animation-delay:.35s; }
.flow.c{ animation-delay:.7s; }
@keyframes flow-run{
  0%{ stroke-dashoffset: 180; opacity:.25 }
  25%{ opacity:.9 }
  60%{ stroke-dashoffset: -60 }
  100%{ stroke-dashoffset: -180; opacity:.45 }
}

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

@media (max-width: 640px){
  .bench-grid, .map-grid, .aroma-grid{ grid-template-columns: 1fr; }
}

/* =========================
   Section 10 — Interior Aroma Lab
   ========================= */
.aroma-lab{
  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);
}
.aroma-head .h2{
  font-family:"Prata", serif; color:#eaf7ff;
  font-size: clamp(1.35rem, 1.1rem + 1.4vw, 1.9rem); margin:0 0 .35rem;
}
.aroma-lead{ color:#cbd6e0; margin:0 0 .9rem; }

.aroma-field{
  position: relative; width:min(1100px, 94vw); height: 160px;
  margin: .2rem auto 1.1rem; border-radius: 16px;
  border:1px solid var(--c-line); background: #0f1215;
  overflow:hidden; box-shadow: var(--shadow-1);
}
.particle{
  position:absolute; width: 6px; height: 6px; border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, rgba(220,240,255,.95), rgba(120,180,255,.6) 60%, rgba(80,140,240,.2) 100%);
  filter: blur(.2px); opacity:.85;
  animation: drift var(--dur,8s) ease-in-out infinite alternate;
}
@keyframes drift{
  0%{ transform: translate(var(--x0,0), var(--y0,0)) scale(.9); opacity:.4 }
  50%{ opacity:.9 }
  100%{ transform: translate(var(--x1,40px), var(--y1, -20px)) scale(1.05); opacity:.5 }
}

.aroma-grid{
  display:grid; gap: 1rem; grid-template-columns: repeat(2, minmax(160px, 1fr));
}
.aroma-card{
  background:#0f1317; border:1px solid var(--c-line); border-radius: 14px;
  padding:.6rem .6rem .8rem; text-align:center;
  transition: transform .3s ease, box-shadow .3s ease;
}
.aroma-card:hover{ transform: translateY(-3px); box-shadow: 0 20px 50px rgba(0,0,0,.45); }
.aroma-card figcaption{ color:#a4b7c9; font-size:.9rem; margin-top:.5rem; }
/* Явно ограничиваем ширину орбиты в hero (раньше могла переполнить ряд) */
.hero-orbit{
  width: min(1100px, 94vw);
  margin-inline: auto;
}

/* Треки/сцены с анимациями — только внутри, без влияния на страницу */
.rail-track,
.map-stage,
.noise-field,
.aroma-field,
.bead-grid,
.trim-figure {
  overflow: clip;            /* современно */
}
@supports not (overflow: clip) {
  .rail-track,
  .map-stage,
  .noise-field,
  .aroma-field,
  .bead-grid,
  .trim-figure { overflow: hidden; }
}

/* Для надежности — SVG всегда в своих рамках */
.rinse-svg,
.trim-path { max-width: 100%; height: auto; }
/* =========================
   Section 11 — Paint Depth Spectrum
   ========================= */
.paint-spectrum{
  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);
}
.spectrum-head .h2{
  font-family:"Prata",serif; color:#eaf7ff;
  font-size:clamp(1.35rem,1.1rem + 1.4vw,1.9rem); margin:0 0 .35rem;
}
.spectrum-lead{ color:#cbd6e0; margin:0 0 .9rem; }

.spectrum-stage{
  width:min(1100px,94vw); height:140px; margin:0 auto 1rem;
  border:1px solid var(--c-line); border-radius:16px;
  background:#0f1215; box-shadow:var(--shadow-1);
  position:relative; overflow:clip;
}
.spectrum-bar{
  position:absolute; inset:24px; border-radius:12px;
  background:
    linear-gradient(90deg,
      #0e1520 0%,
      #1a2d44 10%,
      #22445f 20%,
      #2a5f84 35%,
      #2f79a8 50%,
      #2a5f84 65%,
      #22445f 80%,
      #1a2d44 90%,
      #0e1520 100%);
  filter: saturate(1.1) contrast(1.05);
}
.spectrum-shine{
  position:absolute; inset:24px; border-radius:12px;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.2), transparent);
  transform: translateX(-120%);
}
.spectrum-stage.run .spectrum-shine{
  animation: spectrum-sweep 3.6s ease-in-out infinite;
}
@keyframes spectrum-sweep{
  0%{ transform: translateX(-120%) }
  55%{ transform: translateX(120%) }
  100%{ transform: translateX(120%) }
}
.spectrum-grid{
  display:grid; gap:1rem; grid-template-columns:repeat(2, minmax(160px,1fr));
}
.spectrum-card{
  text-align:center; background:#0f1317; border:1px solid var(--c-line);
  border-radius:14px; padding:.6rem .6rem .9rem;
  transition: transform .3s ease, box-shadow .3s ease;
}
.spectrum-card:hover{ transform: translateY(-3px); box-shadow:0 20px 50px rgba(0,0,0,.45); }
.spectrum-card figcaption{ color:#a4b7c9; font-size:.9rem; margin-top:.5rem; }

/* =========================
   Section 12 — Heat & Dust Shield
   ========================= */
.shield-discipline{
  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);
}
.shield-head .h2{
  font-family:"Prata",serif; color:#eaf7ff;
  font-size:clamp(1.35rem,1.1rem + 1.4vw,1.9rem); margin:0 0 .35rem;
}
.shield-lead{ color:#cbd6e0; margin:0 0 .9rem; }

.shield-field{
  width:min(1100px,94vw); height:160px; margin:.2rem auto 1.1rem;
  border:1px solid var(--c-line); border-radius:16px; background:#0f1215;
  overflow:clip; box-shadow:var(--shadow-1); position:relative;
}
.speck{
  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%);
  opacity:.85; filter: blur(.3px);
  animation: speck-drift var(--dur,8s) linear infinite;
}
@keyframes speck-drift{
  0%{ transform: translate(-20px, var(--y,0)); opacity:.2 }
  10%{ opacity:.8 }
  100%{ transform: translate(calc(100% + 40px), var(--y,0)); opacity:.35 }
}
.ripple{
  position:absolute; left:0; right:0; height:2px;
  background: linear-gradient(90deg, transparent, #82c4ff66, transparent);
  filter: blur(.3px); opacity:.45;
  animation: ripple-rise var(--rdur,6s) ease-in-out infinite;
  transform: translateY(var(--off,0));
}
@keyframes ripple-rise{
  0%{ transform: translateY(var(--off,0)) scaleX(.9); opacity:.2 }
  50%{ opacity:.7 }
  100%{ transform: translateY(calc(var(--off,0) - 50px)) scaleX(1.05); opacity:.25 }
}

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

/* =========================
   Section 13 — Studio Workflow Ribbon
   ========================= */
.workflow-ribbon{
  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);
}
.ribbon-head .h2{
  font-family:"Prata",serif; color:#eaf7ff;
  font-size:clamp(1.35rem,1.1rem + 1.4vw,1.9rem); margin:0 0 .35rem;
}
.ribbon-lead{ color:#cbd6e0; margin:0 0 .9rem; }

.ribbon-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; position:relative;
}
.ribbon-svg{ width:100%; height:auto; display:block; }
.ribbon-path{
  fill:none;  stroke-width:6; stroke-linecap:round;
  filter: drop-shadow(0 0 12px rgba(124,199,255,.25));
}
.ribbon-dot{ fill:#eaf7ff; filter: drop-shadow(0 6px 16px rgba(0,102,255,.35)); }

/* Motion path (Chrome/Edge/Opera/Safari) */
@supports (offset-path: path("M0,0 L10,10")){
  .ribbon-dot{
    offset-path: path("M40,230 C160,190 220,120 320,120 S520,210 640,160 760,80 860,110");
    offset-distance: 0%;
  }
  .ribbon-stage.run .ribbon-dot{
    animation: ribbon-run 8s ease-in-out infinite;
  }
  @keyframes ribbon-run{
    0%{ offset-distance: 0% }
    50%{ offset-distance: 100% }
    100%{ offset-distance: 0% }
  }
}

/* Fallback: небольшое мерцание точки без движения по пути */
@supports not (offset-path: path("M0,0 L10,10")){
  .ribbon-stage.run .ribbon-dot{
    animation: rib-pulse 1.8s ease-in-out infinite;
  }
  @keyframes rib-pulse{
    0%,100%{ r:8; opacity:.8 }
    50%{ r:10; opacity:1 }
  }
}
.ribbon-labels text{
  fill:#a9b6c4; font-size:12.5px; letter-spacing:.2px;
}

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

/* ===== Global responsive helper for these grids ===== */
@media (max-width: 640px){
  .spectrum-grid, .shield-grid, .ribbon-grid{ grid-template-columns:1fr; }
}
/* =========================
   Section 14 — Road-Film Dissolve
   ========================= */
.dissolve-lane{
  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);
}
.dissolve-head .h2{
  font-family:"Prata",serif; color:#eaf7ff;
  font-size:clamp(1.35rem,1.1rem + 1.4vw,1.9rem); margin:0 0 .35rem;
}
.dissolve-lead{ color:#cbd6e0; margin:0 0 .9rem; }

/* мини-панель (строго ≤350px благодаря .cap-img) */
.dissolve-stage{
  width:min(360px, 94vw); margin:0 auto;
  position:relative; border:1px solid var(--c-line);
  border-radius:16px; padding:.6rem; background:#0f1215;
  box-shadow:var(--shadow-1); overflow:clip;
}
.dissolve-before{ position:relative; z-index:0; }
.dissolve-after{
  position:absolute; left:.6rem; right:.6rem; top:.6rem;
  z-index:1;
}
.dissolve-mask{
  /* маска, «сметающая» вуаль слева направо */
  position:absolute; inset:.6rem; z-index:2; pointer-events:none;
  -webkit-mask-image: linear-gradient(90deg, #000 40%, transparent 55%);
          mask-image: linear-gradient(90deg, #000 40%, transparent 55%);
  -webkit-mask-size: 220% 100%;
          mask-size: 220% 100%;
  -webkit-mask-position: 0% 0%;
          mask-position: 0% 0%;
  background: rgba(255,255,255,.001); /* нужно, чтобы маска применялась */
}
.dissolve-stage.run .dissolve-mask{
  animation: dissolve-sweep 4.2s ease-in-out infinite;
}
.dissolve-stage.quick .dissolve-mask{
  animation-duration: 2.2s;
}
@keyframes dissolve-sweep{
  0%{ -webkit-mask-position: 0% 0%; mask-position: 0% 0%; }
  55%{ -webkit-mask-position: 100% 0%; mask-position: 100% 0%; }
  100%{ -webkit-mask-position: 100% 0%; mask-position: 100% 0%; }
}

/* Fallback, если mask не поддерживается */
@supports not ((mask-image: linear-gradient(black, white)) or (-webkit-mask-image: linear-gradient(black, white))){
  .dissolve-after{ clip-path: inset(0 50% 0 0); transition: clip-path .25s linear; }
  .dissolve-stage.run .dissolve-after{ animation: dissolve-clip 4.2s ease-in-out infinite; }
  .dissolve-stage.quick .dissolve-after{ animation-duration: 2.2s; }
  @keyframes dissolve-clip{
    0%{ clip-path: inset(0 60% 0 0) }
    55%{ clip-path: inset(0 0% 0 0) }
    100%{ clip-path: inset(0 0% 0 0) }
  }
}

/* =========================
   Section 15 — Owner Moments Reel
   ========================= */
.owner-reel{
  position:relative; padding:58px 0 80px;
  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);
}
.reel-head .h2{
  font-family:"Prata",serif; color:#eaf7ff;
  font-size:clamp(1.35rem,1.1rem + 1.4vw,1.9rem); margin:0 0 .35rem;
}
.reel-lead{ color:#cbd6e0; margin:0 0 .9rem; }

.reel-stage{
  width:min(1100px,94vw); margin:0 auto; position:relative;
  min-height: 340px; overflow: clip;
}
.reel-card{
  position:absolute; width:min(340px, 94vw); text-align:center;
  background:#0f1317; border:1px solid var(--c-line); border-radius:16px;
  padding:.6rem .6rem .9rem; box-shadow:var(--shadow-1);
  transform: translateY(30px) scale(.98) rotate(var(--rot,0deg));
  opacity:0; transition: transform .6s cubic-bezier(.2,.8,.2,1), opacity .6s ease;
}
.reel-card figcaption{ color:#a4b7c9; font-size:.9rem; margin-top:.5rem; }

/* диагональная композиция */
.reel-card.r1{ left:0; top:0; --rot:-2.5deg; }
.reel-card.r2{ left:50%; top:40px; transform: translate(-50%, 30px) scale(.98) rotate(1.5deg); }
.reel-card.r3{ right:0; bottom:0; --rot:2deg; }

/* reveal */
.reel-stage.in .reel-card{ opacity:1; }
.reel-stage.in .reel-card.r1{ transform: translateY(0) scale(1) rotate(var(--rot)); }
.reel-stage.in .reel-card.r2{ transform: translate(-50%, 0) scale(1) rotate(1.5deg); }
.reel-stage.in .reel-card.r3{ transform: translateY(0) scale(1) rotate(var(--rot)); }

/* mobile stack */
@media (max-width: 820px){
  .reel-stage{ min-height: auto; }
  .reel-card{ position:relative; left:auto; right:auto; top:auto; bottom:auto; transform:none; opacity:1; margin: .6rem auto; width: min(360px, 94vw); }
}
/* базовое ограничение и центрирование трека */
.rail-track{
  width: min(1100px, 94vw);
  margin-inline: auto;
}

/* не даём карточкам ужиматься до «спичек» */
.rail-inner{
  display: flex;
  gap: 1rem;
  align-items: center;
  padding: .4rem;
}
.rail-card{
  flex: 0 0 auto;        /* запрещаем flex-shrink */
  min-width: 260px;      /* разумная база для планшетов/десктопов */
  max-width: 340px;
}

/* Мобильный режим: свайп + snap, ширина карточки — почти весь вьюпорт */
@media (max-width: 820px){
  .rail-track{
    overflow-x: auto;                 /* включаем горизонтальный скролл */
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;    /* прищелкивание карточек */
  }
  .rail-inner{
    width: max-content;               /* чтобы контент не переносился */
    gap: .8rem;
  }
  .rail-card{
    min-width: 82vw;                  /* крупная карточка под один экран */
    max-width: 360px;                 /* но не шире лимита изображений */
    scroll-snap-align: center;
  }
  /* чуть меньше блика, чтобы не залезал за края на узких экранах */
  .rail-card .streak{ height: 28%; inset: 10% 10% auto 10%; }
}

/* Очень узкие экраны */
@media (max-width: 420px){
  .rail-card{ min-width: 88vw; }
}
/* ==== S15: Reel – фиксы наложения ==== */

/* Больше места на десктопе, если сохраняем диагональ */
@media (min-width: 1201px){
  .reel-stage{ min-height: 560px; }
}

/* Tablet: превращаем сцену в двухколоночный grid, убираем абсолюты */
@media (min-width: 821px) and (max-width: 1200px){
  .reel-stage{
    display: grid;
    grid-template-columns: repeat(2, minmax(260px, 1fr));
    gap: 1rem;
    min-height: auto;
  }
  .reel-card{
    position: relative !important;
    left: auto !important; right: auto !important;
    top: auto !important; bottom: auto !important;
    width: auto !important;
    transform: none !important;
    opacity: 1 !important;
    margin: 0;
  }
}

/* Mobile: одна колонка (оставляем как было, но усилим сброс позиций) */
@media (max-width: 820px){
  .reel-stage{ min-height: auto; display: block; }
  .reel-card{
    position: relative !important;
    left: auto !important; right: auto !important;
    top: auto !important; bottom: auto !important;
    transform: none !important;
    opacity: 1 !important;
    margin: .6rem auto;
    width: min(360px, 94vw);
  }
}
/* --- S14: панель всегда держит контент внутри и центрирует --- */
.dissolve-stage{
  width: min(360px, 94vw);
  margin: .6rem auto 0;
  position: relative;
  border: 1px solid var(--c-line);
  border-radius: 16px;
  padding: .6rem;
  background: #0f1215;
  box-shadow: var(--shadow-1);
  overflow: clip; /* на всякий */
}

/* Внутри панели изображение не может быть шире самой панели */
.dissolve-stage .cap-img{
  width: 100% !important;
  max-width: 100% !important; /* переопределяет общий 350px, но сама панель ≤360px */
  height: auto;
  display: block;
  object-fit: cover;
}

/* Абсолютный AFTER: не показываем, пока не загрузится */
.dissolve-after{
  position: absolute;
  inset: .6rem;
  z-index: 1;
  opacity: 0;                   /* скрыт до загрузки */
  transition: opacity .25s ease;
}

/* Как только ready — показываем */
.dissolve-stage.is-ready .dissolve-after{ opacity: 1; }

/* Если AFTER не загрузился — полностью скрываем, работаем как обычная картинка */
.dissolve-stage.no-after .dissolve-after{ display: none; }

/* Маска/клип остаются: применяются к оверлею .dissolve-mask как раньше */
.dissolve-mask{
  position: absolute; inset: .6rem; z-index: 2; pointer-events: none;
  -webkit-mask-image: linear-gradient(90deg, #000 40%, transparent 55%);
          mask-image: linear-gradient(90deg, #000 40%, transparent 55%);
  -webkit-mask-size: 220% 100%;
          mask-size: 220% 100%;
  -webkit-mask-position: 0% 0%;
          mask-position: 0% 0%;
  background: rgba(255,255,255,.001);
}
.dissolve-stage.run .dissolve-mask{ animation: dissolve-sweep 4.2s ease-in-out infinite; }
.dissolve-stage.quick .dissolve-mask{ animation-duration: 2.2s; }

/* Fallback для браузеров без mask: двигаем клип самой .dissolve-after */
@supports not ((mask-image: linear-gradient(black, white)) or (-webkit-mask-image: linear-gradient(black, white))){
  .dissolve-stage.run .dissolve-after{ animation: dissolve-clip 4.2s ease-in-out infinite; }
  .dissolve-stage.quick .dissolve-after{ animation-duration: 2.2s; }
  @keyframes dissolve-clip{
    0%{ clip-path: inset(0 60% 0 0) }
    55%{ clip-path: inset(0 0% 0 0) }
    100%{ clip-path: inset(0 0% 0 0) }
  }
}