/* HERO: Quantum Mosaic */
.hero-quantum{
  position: relative; overflow: hidden;
  padding: clamp(32px, 6vw, 64px) 0 clamp(32px, 6vw, 80px);
  isolation: isolate;
}

/* Фон: квантовая решётка + мягкие скан-линии */
.hero-quantum__bg{
  position:absolute; inset:0; z-index:-1;
  background:
    radial-gradient(800px 400px at 80% -10%, rgba(86,240,255,.08), transparent 55%),
    radial-gradient(700px 300px at 0% 100%, rgba(127,91,255,.10), transparent 60%),
    repeating-linear-gradient(0deg, transparent 0 22px, rgba(255,255,255,.025) 22px 23px),
    linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,0));
}
.hero-quantum__bg::after{
  /* медленные скан-линии */
  content:""; position:absolute; inset:-20% -10%;
  background: linear-gradient(180deg, transparent, rgba(127,91,255,.06), transparent);
  animation: qc-scan 6s linear infinite;
  pointer-events:none;
}
@keyframes qc-scan{
  0%{ transform: translateY(-30%); }
  100%{ transform: translateY(30%); }
}

.hero-quantum__content{
  display:grid; gap: clamp(18px, 3vw, 28px);
  grid-template-columns: 1.15fr 1fr;
  align-items:center;
}

.hero-quantum__text .eyebrow{
  font-size: .95rem; color: var(--qc-accent);
  letter-spacing:.18em; text-transform: uppercase;
}
.hero-quantum__text h2{
  font-size: clamp(1.8rem, 3.4vw, 2.6rem);
  line-height: 1.15; margin: 8px 0 12px;
  text-shadow: 0 0 18px rgba(86,240,255,.15);
}
.hero-quantum__text .lead{ color: #e9f0ff; opacity:.95; }
.hero-quantum__text .meta{ color: var(--qc-dim); }

.hero-quantum__grid{
  display:grid; gap: 14px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-auto-rows: minmax(120px, auto);
  align-content:start;
}

/* Карточки-тайлы с 3D-tilt и неон-свечением */
.tile{
  position: relative; border-radius: var(--radius-lg);
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  border: 1px solid rgba(255,255,255,.10);
  box-shadow: var(--shadow-1);
  overflow:hidden;
  transform-style: preserve-3d;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.tile:hover{ box-shadow: var(--shadow-2); border-color: rgba(86,240,255,.35); }
.tile::before{
  content:""; position:absolute; inset:-40% -20%;
  background: radial-gradient(600px 300px at var(--mx,60%) var(--my,40%), rgba(86,240,255,.18), transparent 60%);
  transition: opacity .25s ease; opacity:.6; pointer-events:none;
}
.tile img{
  width: 100%; max-width: 350px; margin-inline:auto; display:block;
  object-fit: cover; aspect-ratio: 4/3;
  filter: contrast(1.02) saturate(1.06);
}
.tile figcaption{
  padding: 8px 12px 12px; font-size: .95rem; color: var(--qc-dim);
}

.tile--tall img{ aspect-ratio: 3/4; }
.tile--wide img{ aspect-ratio: 16/9; }

/* REVEAL DELAYS */
.hero-quantum__text.reveal.is-visible{ transition-delay: .05s; }
.hero-quantum__grid.reveal.is-visible{ transition-delay: .15s; }

/* RESPONSIVE ограничиваем ≤350px везде (дополнительно к max-width у img) */
@media (min-width: 1024px){
  .hero-quantum__grid{
    grid-template-columns: minmax(0, 350px) minmax(0, 350px);
    justify-content: end;
  }
}

@media (max-width: 992px){
  .hero-quantum__content{ grid-template-columns: 1fr; }
  .hero-quantum__text{ order:1; }
  .hero-quantum__grid{ order:2; justify-items:center; }
}

@media (max-width: 576px){
  .hero-quantum__grid{
    grid-template-columns: 1fr; /* на очень маленьких — по одному в колонку */
  }
  .tile img{ max-width: 320px; }
}

@media (max-width: 360px){
  .tile img{ max-width: 280px; }
}
/* ========== SECTION 2: SIGNAL LAB ======================================= */
.signal-lab{ padding: clamp(28px,5vw,64px) 0; position:relative; }
.signal-lab::before{
  content:""; position:absolute; inset:0; pointer-events:none; z-index:-1;
  background:
    radial-gradient(1000px 500px at 20% 0%, rgba(127,91,255,.08), transparent 60%),
    radial-gradient(800px 320px at 100% 80%, rgba(86,240,255,.08), transparent 55%);
}
.signal-lab__head .lead{ color: var(--qc-dim); }

/* бегущие ленты */
.spec-ribbons{ margin: 18px 0 26px; overflow:hidden; mask-image: linear-gradient(90deg, transparent 0 2%, #000 12% 88%, transparent 98% 100%); }
.spec-ribbons__lane{
  display:flex; gap: 26px; list-style:none; padding:10px 0; margin:0;
  animation: qc-marquee 18s linear infinite;
  white-space: nowrap; text-transform: uppercase; letter-spacing:.08em;
  color: #b6c7e6;
}
.spec-ribbons__lane--b{ animation-duration: 22s; opacity:.85; }
.spec-ribbons__lane li{ flex:0 0 auto; padding: 6px 12px; border:1px solid rgba(255,255,255,.08); border-radius: 999px; background: rgba(255,255,255,.03); }
@keyframes qc-marquee{
  from{ transform: translateX(0); }
  to{ transform: translateX(-50%); }
}

/* cutaway */
.cutaway{
  display:grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 14px;
  align-items:start;
}
.cutaway__stage{
  border:1px solid rgba(255,255,255,.10); border-radius: var(--radius-lg);
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  box-shadow: var(--shadow-1); overflow:hidden; text-align:center;
}
.cutaway__layer{ max-width: 350px; margin: 12px auto 4px; display:block; }
.cutaway__stage figcaption{ color: var(--qc-dim); padding: 0 12px 12px; font-size:.95rem; }

@media (max-width: 992px){
  .cutaway{ grid-template-columns: 1fr; justify-items:center; }
}

/* ========== SECTION 3: MAGNETIC SHELVES ================================= */
.mag-shelves{ padding: clamp(28px,5vw,64px) 0; }
.mag-shelves__head .lead{ color: var(--qc-dim); }

.shelf-wrap{ position:relative; }
.shelf{
  display:grid; grid-auto-flow: column; grid-auto-columns: minmax(260px, 320px);
  gap: 16px; overflow-x:auto; padding: 6px 2px 10px;
  scroll-snap-type: x mandatory;
}
.shelf::-webkit-scrollbar{ height:8px; }
.shelf::-webkit-scrollbar-thumb{ background: rgba(255,255,255,.12); border-radius: 8px; }
.shelf__card{
  scroll-snap-align: start;
  border:1px solid rgba(255,255,255,.10); border-radius: var(--radius-lg);
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  padding: 12px; box-shadow: var(--shadow-1);
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.shelf__card:hover{ transform: translateY(-4px); box-shadow: var(--shadow-2); border-color: rgba(86,240,255,.35); }
.shelf__media img{ width:100%; max-width: 350px; aspect-ratio: 4/3; object-fit: cover; border-radius: 12px; }
.shelf__card h3{ margin: 10px 0 6px; font-size: 1.05rem; }
.shelf__card .meta{ color: var(--qc-dim); margin: 0 0 6px; }
.shelf__card .takeaway{ color: #e9f0ff; }

.shelf__progress{
  height:4px; background: rgba(255,255,255,.08); border-radius:999px; margin-top:10px; overflow:hidden;
}
.shelf__progress i{ display:block; height:100%; width:0%; background: linear-gradient(90deg, var(--qc-accent), var(--qc-accent-2)); }

/* ========== SECTION 4: FIELD NOTES ====================================== */
.field-notes{ padding: clamp(28px,5vw,72px) 0; position:relative; }
.field-notes::before{
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:
    radial-gradient(900px 360px at 85% 10%, rgba(86,240,255,.08), transparent 60%),
    radial-gradient(700px 300px at 10% 80%, rgba(127,91,255,.08), transparent 60%);
}

.notes-grid{
  display:grid; gap: 16px;
  grid-template-columns: repeat(4, minmax(0,1fr));
}
.note{
  border:1px solid rgba(255,255,255,.10); border-radius: var(--radius-lg);
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  padding: 12px; box-shadow: var(--shadow-1);
  transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease;
}
.note:hover{ transform: translateY(-3px); border-color: rgba(86,240,255,.35); box-shadow: var(--shadow-2); }
.note__media img{ width:100%; max-width: 350px; aspect-ratio: 4/3; object-fit: cover; border-radius: 12px; }
.note h3{ margin: 10px 0 6px; font-size: 1.05rem; }
.note p{ color: var(--qc-dim); }

@media (max-width: 992px){
  .notes-grid{ grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 576px){
  .notes-grid{ grid-template-columns: 1fr; }
}

/* metrics */
.metrics{
  display:flex; gap:18px; justify-content: space-between; margin-top: 18px;
  border-top:1px dashed rgba(255,255,255,.18); padding-top: 14px;
}
.metric{ text-align:center; flex:1 1 0; }
.metric__num{
  font-weight:700; font-size: clamp(1.6rem, 3vw, 2.2rem);
  text-shadow: 0 0 18px rgba(86,240,255,.18);
  display:block;
}
.metric__label{ color: var(--qc-dim); font-size:.95rem; }

@media (max-width: 576px){
  .metrics{ flex-direction: column; gap: 14px; }
}
/* ========== SECTION 5: HAPTIC DOCK ====================================== */
.haptic-dock{ padding: clamp(28px,5vw,64px) 0; position:relative; }
.haptic-dock::before{
  content:""; position:absolute; inset:0; pointer-events:none; z-index:-1;
  background:
    radial-gradient(900px 380px at 85% 15%, rgba(86,240,255,.08), transparent 60%),
    radial-gradient(900px 360px at 10% 90%, rgba(127,91,255,.08), transparent 60%);
}
.haptic-dock__head .lead{ color: var(--qc-dim); }

.dock-grid{
  display:grid; gap:16px;
  grid-template-columns: repeat(3, minmax(0,1fr));
}
@media (max-width: 992px){ .dock-grid{ grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 576px){ .dock-grid{ grid-template-columns: 1fr; } }

.dock-card{
  border:1px solid rgba(255,255,255,.10); border-radius: var(--radius-lg);
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  padding:12px; box-shadow: var(--shadow-1);
  transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease;
  position:relative; overflow:hidden;
}
.dock-card:hover{ transform: translateY(-4px); border-color: rgba(86,240,255,.35); box-shadow: var(--shadow-2); }
.dock-card::after{
  content:""; position:absolute; inset:-20%; opacity:0;
  background: radial-gradient(500px 240px at var(--mx,60%) var(--my,40%), rgba(86,240,255,.18), transparent 60%);
  transition: opacity .25s ease;
}
.dock-card:hover::after{ opacity:.7; }

.dock-media img{ width:100%; max-width:350px; aspect-ratio:4/3; object-fit:cover; border-radius:12px; }
.dock-card h3{ margin:10px 0 6px; font-size:1.05rem; }
.dock-card .meta{ color: var(--qc-dim); margin:0 0 6px; }
.dock-card .takeaway{ color: #e9f0ff; }

/* ========== SECTION 6: LATENCY LAB ====================================== */
.latency-lab{ padding: clamp(28px,5vw,70px) 0; position:relative; }
.latency-lab::before{
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:
    radial-gradient(1000px 420px at 12% 10%, rgba(127,91,255,.08), transparent 60%),
    radial-gradient(900px 360px at 88% 90%, rgba(86,240,255,.08), transparent 60%);
}
.latency-lab__head .lead{ color: var(--qc-dim); }

.latency-toggle{
  display:flex; gap:8px; margin: 8px 0 16px;
}
.latency-btn{
  border:1px solid rgba(255,255,255,.14); background: rgba(255,255,255,.04);
  color:#fff; padding:8px 12px; border-radius:999px; cursor:pointer;
  transition: background .2s ease, border-color .2s ease, transform .2s ease;
}
.latency-btn:hover{ transform: translateY(-2px); border-color: rgba(86,240,255,.4); }
.latency-btn.is-active{ background: rgba(127,91,255,.28); border-color: rgba(127,91,255,.6); }

.osc-board{
  display:grid; gap:16px; grid-template-columns: repeat(3, minmax(0,1fr));
}
@media (max-width: 992px){ .osc-board{ grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 576px){ .osc-board{ grid-template-columns: 1fr; } }

.osc-panel{
  border:1px solid rgba(255,255,255,.10); border-radius: var(--radius-lg);
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  padding:12px; box-shadow: var(--shadow-1); transition: box-shadow .25s ease, border-color .25s ease;
}
.osc-panel:hover{ border-color: rgba(86,240,255,.35); box-shadow: var(--shadow-2); }
.osc-media img{ width:100%; max-width:350px; aspect-ratio:4/3; object-fit:cover; border-radius:12px; }
.osc-panel h3{ margin:10px 0 6px; font-size:1.05rem; }
.osc-panel .meta{ color: var(--qc-dim); }

/* Осциллограф */
.osc{ width:100%; height:auto; display:block; overflow:visible; }
.osc__path{
  fill:none; stroke: var(--qc-accent); stroke-width:2;
  stroke-linejoin:round; stroke-linecap:round;
  stroke-dasharray: 8 10;
  animation: osc-flow var(--osc-speed, 5s) linear infinite;
  filter: drop-shadow(0 0 6px rgba(86,240,255,.35));
}
.osc__path--buds{ stroke: #9ad7ff; }
.osc__path--keys{ stroke: #bca9ff; }

@keyframes osc-flow{
  from{ stroke-dashoffset: 0; }
  to{ stroke-dashoffset: -180; }
}

/* Моды скорости через класс на .latency-lab */
.latency-lab.mode-boost { --osc-speed: 2.8s; }
.latency-lab.mode-save  { --osc-speed: 7s;  }

/* ========== SECTION 7: CABLE ZEN ======================================== */
.cable-zen{ padding: clamp(28px,5vw,70px) 0; position:relative; }
.cable-zen::before{
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:
    radial-gradient(900px 360px at 12% 85%, rgba(127,91,255,.08), transparent 60%),
    radial-gradient(900px 360px at 88% 15%, rgba(86,240,255,.08), transparent 60%);
}
.cable-zen__head .lead{ color: var(--qc-dim); }

.zen-steps{
  display:grid; gap:16px; grid-template-columns: repeat(4, minmax(0,1fr));
}
@media (max-width: 992px){ .zen-steps{ grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 576px){ .zen-steps{ grid-template-columns: 1fr; } }

.zen-step{
  border:1px solid rgba(255,255,255,.10); border-radius: var(--radius-lg);
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  padding:12px; box-shadow: var(--shadow-1);
  transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease;
  cursor:pointer;
}
.zen-step:hover{ transform: translateY(-3px); border-color: rgba(86,240,255,.35); box-shadow: var(--shadow-2); }
.zen-step.is-active{ outline: 1px solid rgba(86,240,255,.55); box-shadow: 0 0 0 6px rgba(86,240,255,.12), var(--shadow-2); }

.zen-media img{ width:100%; max-width:350px; aspect-ratio:4/3; object-fit:cover; border-radius:12px; }
.zen-step h3{ margin:10px 0 6px; font-size:1.05rem; }
.zen-step p{ color: var(--qc-dim); }

/* Линия маршрута */
.zen-line{ position:relative; margin-top:16px; height:10px; }
.zen-line__track, .zen-line__fill{
  position:absolute; inset:auto 0 0 0; height:100%; border-radius:999px;
}
.zen-line__track{
  background:
    linear-gradient(90deg, rgba(255,255,255,.10) 0 100%),
    radial-gradient(6px 6px at 0 50%, rgba(255,255,255,.22), transparent 60%);
  background-size: auto, 22px 100%;
  background-repeat: repeat, repeat;
  mask-image: linear-gradient(90deg, transparent 0 2%, #000 10% 90%, transparent 98% 100%);
}
.zen-line__fill{
  width: 25%; /* по умолчанию шаг 1 активен */
  background: linear-gradient(90deg, var(--qc-accent), var(--qc-accent-2));
  box-shadow: 0 0 10px rgba(127,91,255,.45), 0 0 18px rgba(86,240,255,.35);
  transition: width .35s cubic-bezier(.22,.9,.25,1);
}
/* ========== SECTION 8: SPEC STORYBOARDS ================================ */
.spec-storyboards{ padding: clamp(28px,5vw,70px) 0; position:relative; }
.spec-storyboards::before{
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:
    radial-gradient(900px 360px at 82% 18%, rgba(86,240,255,.08), transparent 60%),
    radial-gradient(900px 360px at 12% 88%, rgba(127,91,255,.08), transparent 60%);
}
.spec-storyboards__head .lead{ color: var(--qc-dim); }
.sb-grid{
  display:grid; gap:16px;
  grid-template-columns: repeat(3, minmax(0,1fr));
}
@media (max-width: 992px){ .sb-grid{ grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 576px){ .sb-grid{ grid-template-columns: 1fr; } }
.sb-frame{
  position:relative; border:1px solid rgba(255,255,255,.10); border-radius: var(--radius-lg);
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  padding:12px; box-shadow: var(--shadow-1);
  transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease;
}
.sb-frame:hover{ transform: translateY(-3px); border-color: rgba(86,240,255,.35); box-shadow: var(--shadow-2); }
.sb-frame img{ width:100%; max-width:350px; aspect-ratio:4/3; object-fit:cover; border-radius:12px; }
.sb-frame figcaption{ color: var(--qc-dim); margin-top:8px; }
.sb-badge{
  position:absolute; top:10px; left:10px; z-index:2;
  display:inline-grid; place-items:center; width:30px; height:30px; border-radius:50%;
  background: linear-gradient(180deg, var(--qc-accent), var(--qc-accent-2));
  color:#0a0f16; font-weight:700; font-size:.9rem; box-shadow: var(--qc-glow);
}

/* ========== SECTION 9: THERMAL LAB ===================================== */
.thermal-lab{ padding: clamp(28px,5vw,72px) 0; position:relative; }
.thermal-lab::before{
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:
    radial-gradient(1000px 420px at 20% 12%, rgba(127,91,255,.08), transparent 60%),
    radial-gradient(900px 360px at 90% 85%, rgba(86,240,255,.08), transparent 60%);
}
.thermal-lab__head .lead{ color: var(--qc-dim); }
.thermal-toggle{ display:flex; gap:8px; margin:8px 0 16px; }
.thermal-btn{
  border:1px solid rgba(255,255,255,.14); background: rgba(255,255,255,.04);
  color:#fff; padding:8px 12px; border-radius:999px; cursor:pointer;
  transition: background .2s ease, border-color .2s ease, transform .2s ease;
}
.thermal-btn:hover{ transform: translateY(-2px); border-color: rgba(86,240,255,.4); }
.thermal-btn.is-active{ background: rgba(127,91,255,.28); border-color: rgba(127,91,255,.6); }

.thermal-board{
  display:grid; gap:16px; grid-template-columns: repeat(3, minmax(0,1fr));
}
@media (max-width: 992px){ .thermal-board{ grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 576px){ .thermal-board{ grid-template-columns: 1fr; } }

.thermal-panel{
  border:1px solid rgba(255,255,255,.10); border-radius: var(--radius-lg);
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  padding:12px; box-shadow: var(--shadow-1);
  transition: box-shadow .25s ease, border-color .25s ease;
}
.thermal-panel:hover{ border-color: rgba(86,240,255,.35); box-shadow: var(--shadow-2); }
.thermal-media{ position:relative; }
.thermal-media img{ width:100%; max-width:350px; aspect-ratio:4/3; object-fit:cover; border-radius:12px; }
.thermal__heat{
  position:absolute; inset:0; border-radius:12px; mix-blend-mode: screen; opacity:.85;
  background:
    radial-gradient(180px 100px at 54% 54%, rgba(255,180,74,.35), transparent 60%),
    radial-gradient(120px 80px  at 72% 40%, rgba(255,95,95,.30), transparent 60%),
    radial-gradient(100px 90px  at 32% 72%, rgba(255,230,120,.28), transparent 60%);
  animation: heat-breathe 3.6s ease-in-out infinite alternate;
}
@keyframes heat-breathe{
  0%{ filter: blur(0.6px); opacity:.75; }
  100%{ filter: blur(1.4px); opacity:.95; }
}

/* индивидуальные карты источников тепла */
.thermal--laptop .thermal__heat{
  background:
    radial-gradient(170px 90px  at 55% 62%, rgba(255,95,95,.33), transparent 60%),
    radial-gradient(110px 70px at 72% 38%, rgba(255,180,74,.34), transparent 60%),
    radial-gradient(120px 80px at 30% 78%, rgba(255,230,120,.26), transparent 60%);
}
.thermal--phone .thermal__heat{
  background:
    radial-gradient(120px 80px at 30% 28%, rgba(255,95,95,.33), transparent 60%),
    radial-gradient(100px 70px at 52% 68%, rgba(255,180,74,.32), transparent 60%);
}
.thermal--earbuds .thermal__heat{
  background:
    radial-gradient(90px 60px at 50% 40%, rgba(255,180,74,.32), transparent 60%),
    radial-gradient(90px 60px at 54% 68%, rgba(255,95,95,.24), transparent 60%);
}

/* режимы: меняем насыщенность "тепла" через filter/opacity */
.thermal-lab.mode-load .thermal__heat{ filter: saturate(1.15) brightness(1.1) blur(1.2px); opacity:.95; }
.thermal-lab.mode-summer .thermal__heat{ filter: saturate(1.35) brightness(1.15) blur(1.5px); opacity:1; }


/* ========== SECTION 11: SIGNAL PLAYGROUND ================================ */
.signal-playground{ padding: clamp(28px,5vw,70px) 0; position:relative; }
.signal-playground::before{
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:
    radial-gradient(900px 360px at 82% 12%, rgba(86,240,255,.08), transparent 60%),
    radial-gradient(900px 360px at 10% 88%, rgba(127,91,255,.08), transparent 60%);
}
.signal-playground__head .lead{ color: var(--qc-dim); }

.playground-grid{
  display:grid; gap:16px; grid-template-columns: 1fr 1fr;
  align-items:start;
}
@media (max-width: 992px){ .playground-grid{ grid-template-columns: 1fr; } }

.playground-media img{ width:100%; max-width:350px; aspect-ratio:4/3; object-fit:cover; border-radius:12px; }
.playground-media .meta{ color: var(--qc-dim); margin-top:8px; }

.eq-block{
  border:1px solid rgba(255,255,255,.10); border-radius: var(--radius-lg);
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  padding:12px; box-shadow: var(--shadow-1);
}
.eq-toggle{ display:flex; gap:8px; margin-bottom:10px; flex-wrap:wrap; }
.eq-btn{
  border:1px solid rgba(255,255,255,.14); background: rgba(255,255,255,.04);
  color:#fff; padding:6px 10px; border-radius:999px; cursor:pointer;
  transition: background .2s ease, border-color .2s ease, transform .2s ease;
}
.eq-btn:hover{ transform: translateY(-2px); border-color: rgba(86,240,255,.4); }
.eq-btn.is-active{ background: rgba(127,91,255,.28); border-color: rgba(127,91,255,.6); }

.eq-visual{
  --bar-gap: 6px; --bars: 12; --bar-w: calc((100% - (var(--bars) - 1)*var(--bar-gap)) / var(--bars));
  display:grid; grid-template-columns: repeat(12, minmax(0,1fr)); gap: var(--bar-gap);
  align-items:end; height: 140px; padding: 8px; border-radius:12px;
  background: linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.00));
  border:1px dashed rgba(255,255,255,.12);
}
.eq-bar{
  display:block; width:100%; height: 60px; border-radius:8px;
  background: linear-gradient(180deg, var(--qc-accent), var(--qc-accent-2));
  box-shadow: 0 0 12px rgba(86,240,255,.25);
  transform-origin: bottom center;
  animation: eq-bounce 1.6s ease-in-out infinite;
}
.eq-bar:nth-child(odd){ animation-duration: 1.9s; }
.eq-bar:nth-child(3n){ animation-duration: 1.7s; }

@keyframes eq-bounce{
  0%,100%{ transform: scaleY(var(--s0, .7)); }
  50%{ transform: scaleY(var(--s1, 1.15)); }
}

/* режимы: меняем амплитуды полос */
.signal-playground.mode-warm .eq-bar{
  --s0: .8; --s1: 1.25;
}
.signal-playground.mode-airy .eq-bar{
  --s0: .6; --s1: 1.35;
}
.eq-note{ color: var(--qc-dim); margin-top:8px; }

/* ========== SECTION 12: DESK ERGONOMICS ================================= */
.desk-ergonomics{ padding: clamp(28px,5vw,70px) 0; position:relative; }
.desk-ergonomics::before{
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:
    radial-gradient(900px 360px at 14% 20%, rgba(127,91,255,.08), transparent 60%),
    radial-gradient(900px 360px at 86% 80%, rgba(86,240,255,.08), transparent 60%);
}
.desk-ergonomics__head .lead{ color: var(--qc-dim); }

.ergo-grid{
  display:grid; gap:16px; grid-template-columns: 1fr 1fr; align-items:start;
}
@media (max-width: 992px){ .ergo-grid{ grid-template-columns: 1fr; } }

.ergo-media{ position:relative; }
.ergo-media img{ width:100%; max-width:350px; aspect-ratio:4/3; object-fit:cover; border-radius:12px; }
.ergo-pulse{
  position:absolute; width:22px; height:22px; border-radius:50%;
  left: var(--x, 52%); top: var(--y, 24%);
  transform: translate(-50%, -50%);
  background: radial-gradient(circle at 50% 50%, #fff, #fff0 70%);
  box-shadow: 0 0 16px rgba(86,240,255,.6);
  animation: pulse 1.8s ease-in-out infinite;
}
@keyframes pulse{
  0%{ transform: translate(-50%, -50%) scale(.85); opacity:.8; }
  100%{ transform: translate(-50%, -50%) scale(1.15); opacity:1; }
}

.ergo-controls{
  border:1px solid rgba(255,255,255,.10); border-radius: var(--radius-lg);
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  padding:12px; box-shadow: var(--shadow-1);
}
.ergo-btn{
  border:1px solid rgba(255,255,255,.14); background: rgba(255,255,255,.04);
  color:#fff; padding:6px 10px; border-radius:999px; cursor:pointer; margin:0 8px 8px 0;
  transition: background .2s ease, border-color .2s ease, transform .2s ease;
}
.ergo-btn:hover{ transform: translateY(-2px); border-color: rgba(86,240,255,.4); }
.ergo-btn.is-active{ background: rgba(127,91,255,.28); border-color: rgba(127,91,255,.6); }

.ergo-notes{ margin:8px 0 0; padding-left: 1.1rem; }
.ergo-notes li{ color: var(--qc-dim); display:none; }
.ergo-notes li.is-active{ display:list-item; }

/* позиции пульса по режимам */
.desk-ergonomics.mode-palms .ergo-pulse{ --x: 46%; --y: 68%; }
.desk-ergonomics.mode-feet  .ergo-pulse{ --x: 58%; --y: 88%; }
/* заметная разница режимов */
.thermal-lab.mode-idle  .thermal__heat{
  filter: saturate(.85) brightness(.95) blur(.6px);
  opacity:.75;
  transform: scale(.92);
}
.thermal-lab.mode-load  .thermal__heat{
  filter: saturate(1.2) brightness(1.08) blur(1.1px);
  opacity:.98;
  transform: scale(1.12);
}
.thermal-lab.mode-summer .thermal__heat{
  filter: saturate(1.4) brightness(1.15) blur(1.5px);
  opacity:1;
  transform: scale(1.25);
}
/* размеры flip-карточек, чтоб секция не схлопывалась */
.memo-card__inner{
  --memo-h: 380px;
  height: var(--memo-h);
}
@media (max-width: 576px){
  .memo-card__inner{ --memo-h: 340px; }
}

/* по умолчанию показываем фронт, спинку скрываем до клика */
.memo-face--back{ pointer-events:none; }
.memo-card:not(.is-flipped) .memo-face--back{ visibility:hidden; }
.memo-card.is-flipped       .memo-face--front{ visibility:hidden; pointer-events:none; }
/* ========== SECTION 13: CREATOR RECIPES ================================== */
.creator-recipes{ padding: clamp(28px,5vw,72px) 0; position:relative; }
.creator-recipes::before{
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:
    radial-gradient(900px 360px at 12% 16%, rgba(86,240,255,.08), transparent 60%),
    radial-gradient(900px 360px at 86% 84%, rgba(127,91,255,.08), transparent 60%);
}
.creator-recipes__head .lead{ color: var(--qc-dim); }

.recipes-toggle{ display:flex; gap:8px; margin:8px 0 16px; flex-wrap:wrap; }
.recipes-btn{
  border:1px solid rgba(255,255,255,.14); background: rgba(255,255,255,.04);
  color:#fff; padding:6px 10px; border-radius:999px; cursor:pointer;
  transition: background .2s ease, border-color .2s ease, transform .2s ease;
}
.recipes-btn:hover{ transform: translateY(-2px); border-color: rgba(86,240,255,.4); }
.recipes-btn.is-active{ background: rgba(127,91,255,.28); border-color: rgba(127,91,255,.6); }

.recipes-stage{
  border:1px solid rgba(255,255,255,.10); border-radius: var(--radius-lg);
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  padding: 8px; box-shadow: var(--shadow-1);
}
.recipes-svg{ width:100%; height:auto; display:block; }

/* узлы */
.node rect{
  fill: rgba(255,255,255,.06);
  stroke: rgba(255,255,255,.18);
}
.node text{
  fill: #e8f2ff; font-weight: 600; text-anchor: middle;
  font-size: 14px;
}

/* линии */
/* линии */
/* линии (fallback цвет; градиент подставим из JS атрибутом) */
.wire path{
  fill: none;
  stroke: var(--qc-accent);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-dasharray: 10 10;
  stroke-dashoffset: 0;
  opacity: .12;
  transition: opacity .25s ease;
  pointer-events: none;
}
.wire.is-on path{
  opacity: 1;
  animation: wire-flow 2.4s linear infinite;
  filter: drop-shadow(0 0 6px rgba(86,240,255,.35));
}
@keyframes wire-flow{
  from{ stroke-dashoffset: 0; }
  to  { stroke-dashoffset: -200; }
}


.recipes-notes{ color: var(--qc-dim); margin-top:8px; }

/* ========== SECTION 14: BATTERY PLANNER ================================= */
.battery-planner{ padding: clamp(28px,5vw,72px) 0; position:relative; }
.battery-planner::before{
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:
    radial-gradient(900px 360px at 20% 12%, rgba(127,91,255,.08), transparent 60%),
    radial-gradient(900px 360px at 80% 88%, rgba(86,240,255,.08), transparent 60%);
}
.battery-planner__head .lead{ color: var(--qc-dim); }
.bp-toggle{ display:flex; gap:8px; margin:8px 0 14px; flex-wrap:wrap; }
.bp-btn{
  border:1px solid rgba(255,255,255,.14); background: rgba(255,255,255,.04);
  color:#fff; padding:6px 10px; border-radius:999px; cursor:pointer;
  transition: background .2s ease, border-color .2s ease, transform .2s ease;
}
.bp-btn:hover{ transform: translateY(-2px); border-color: rgba(86,240,255,.4); }
.bp-btn.is-active{ background: rgba(127,91,255,.28); border-color: rgba(127,91,255,.6); }

.bp-grid{
  --bar-w: 36px;
  display:grid; grid-template-columns: repeat(7, minmax(0,1fr)); gap: 12px;
  align-items:end; padding: 12px; border-radius: var(--radius-lg);
  border:1px dashed rgba(255,255,255,.12);
  background: linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.00));
}
.bp-col{ display:flex; flex-direction:column; align-items:center; gap:8px; }
.bp-bar{
  display:block; width: var(--bar-w); height: 120px; position:relative;
  background: linear-gradient(180deg, var(--qc-accent), var(--qc-accent-2));
  border-radius: 10px; transform-origin: bottom center;
  mask-image: linear-gradient(180deg, #000 85%, transparent 100%);
}
.bp-bar::after{
  content:""; position:absolute; inset:auto 0 0 0; height: var(--h,50%);
  background: rgba(0,0,0,.55); border-radius: 0 0 10px 10px;
  transition: height .6s cubic-bezier(.22,.9,.25,1);
}
.bp-col em{ color: var(--qc-dim); font-style: normal; font-size: .9rem; }
.bp-note{ color: var(--qc-dim); margin-top: 10px; }

@media (max-width: 576px){
  .bp-grid{ --bar-w: 26px; gap: 10px; }
}

/* ========== SECTION 15: NIGHT MODE ====================================== */
.night-mode{ padding: clamp(28px,5vw,72px) 0; position:relative; }
.night-mode::before{
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:
    radial-gradient(900px 360px at 12% 20%, rgba(86,240,255,.08), transparent 60%),
    radial-gradient(900px 360px at 88% 80%, rgba(127,91,255,.08), transparent 60%);
}
.night-mode__head .lead{ color: var(--qc-dim); }

.nm-controls{ display:grid; gap:10px; margin-bottom:12px; }
.nm-row{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.nm-row > span{ color: var(--qc-dim); margin-right:6px; }
.nm-btn{
  border:1px solid rgba(255,255,255,.14); background: rgba(255,255,255,.04);
  color:#fff; padding:6px 10px; border-radius:999px; cursor:pointer;
  transition: background .2s ease, border-color .2s ease, transform .2s ease;
}
.nm-btn:hover{ transform: translateY(-2px); border-color: rgba(86,240,255,.4); }
.nm-btn.is-active{ background: rgba(127,91,255,.28); border-color: rgba(127,91,255,.6); }

.nm-stage{
  border:1px solid rgba(255,255,255,.10); border-radius: var(--radius-lg);
  background: radial-gradient(120% 100% at 50% 100%, rgba(0,0,0,.55), rgba(0,0,0,.1));
  padding: 12px; box-shadow: var(--shadow-1);
}
.nm-room{
  --temp-hue: 38deg;  /* warm */
  --intensity: .35;   /* low */
  position:relative; height: 220px; border-radius: 16px;
  background:
    linear-gradient(180deg, rgba(18,26,40,.9), rgba(12,18,28,.95));
  overflow:hidden;
}
/* «силуэты» — чисто CSS */
.nm-desk{
  position:absolute; left:8%; right:8%; bottom:12%; height: 24%;
  background: linear-gradient(180deg, #0f1724, #0b111c);
  border-radius: 12px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
}
.nm-screen{
  position:absolute; left: 48%; width: 22%; height: 32%;
  bottom: calc(12% + 24%); transform: translateX(-50%);
  background: linear-gradient(180deg, #0c1220, #0b101a);
  border-radius: 10px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
}
/* подсветка стены */
.nm-glow{
  position:absolute; inset: -20% -10% -10% -10%;
  background:
    radial-gradient(60% 50% at 50% 65%, hsl(var(--temp-hue) 95% 65% / calc(.45*var(--intensity))), transparent 70%),
    radial-gradient(40% 35% at 50% 60%, hsl(calc(var(--temp-hue) + 30deg) 90% 60% / calc(.30*var(--intensity))), transparent 70%);
  mix-blend-mode: screen;
  filter: blur(10px);
  transition: filter .2s ease, opacity .2s ease, background .25s ease;
}
/* пылинки */
.nm-dust{
  position:absolute; inset:0;
  background:
    radial-gradient(2px 2px at 10% 20%, rgba(255,255,255,.15), transparent 60%),
    radial-gradient(2px 2px at 60% 40%, rgba(255,255,255,.12), transparent 60%),
    radial-gradient(2px 2px at 30% 70%, rgba(255,255,255,.10), transparent 60%),
    radial-gradient(2px 2px at 80% 85%, rgba(255,255,255,.08), transparent 60%);
  animation: dust-float 8s ease-in-out infinite alternate;
  pointer-events:none;
}
@keyframes dust-float{
  from{ transform: translateY(0px); opacity:.65; }
  to  { transform: translateY(-6px); opacity:.9; }
}
/* ========== SECTION 16: WORKSHOP DIARIES ================================ */
.workshop-diaries{ padding: clamp(28px,5vw,80px) 0; position:relative; }
.workshop-diaries::before{
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:
    radial-gradient(900px 360px at 14% 24%, rgba(127,91,255,.08), transparent 60%),
    radial-gradient(900px 360px at 86% 90%, rgba(86,240,255,.08), transparent 60%);
}
.workshop-diaries__head .lead{ color: var(--qc-dim); }

.wd-timeline{ position:relative; display:grid; gap:18px; }
.wd-line{
  position:absolute; left:calc(50% - 1px); top:0; bottom:0; width:2px;
  background: rgba(255,255,255,.12); border-radius:999px; pointer-events:none;
}
.wd-line__fill{
  position:absolute; left:0; bottom:0; width:100%;
  height: calc(var(--p, 0) * 100%);
  background: linear-gradient(180deg, var(--qc-accent), var(--qc-accent-2));
  box-shadow: 0 0 14px rgba(86,240,255,.35);
  transition: height .18s linear;
}

.wd-entry{
  display:grid; gap:16px; align-items:start;
  grid-template-columns: 1fr 1fr;
  padding-block: 8px;
}
.wd-entry:nth-child(odd) .wd-media{ order:1; }
.wd-entry:nth-child(odd) .wd-copy { order:2; }
.wd-entry:nth-child(even) .wd-media{ order:2; }
.wd-entry:nth-child(even) .wd-copy { order:1; }

.wd-media img{
  width:100%; max-width:350px; aspect-ratio:4/3; object-fit:cover; border-radius:12px;
  box-shadow: var(--shadow-1);
}
.wd-copy h3{ margin: 6px 0; }
.wd-copy p{ color: var(--qc-dim); }

@media (max-width: 992px){
  .wd-entry{ grid-template-columns: 1fr; }
  .wd-line{ left: 8px; } /* смещаем влево на планшетах/мобайл */
}

/* ========== SECTION 17: CITY PROOF ===================================== */
.city-proof{ padding: clamp(28px,5vw,80px) 0; position:relative; }
.city-proof::before{
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:
    radial-gradient(900px 360px at 12% 16%, rgba(86,240,255,.08), transparent 60%),
    radial-gradient(900px 360px at 88% 84%, rgba(127,91,255,.08), transparent 60%);
}
.city-proof__head .lead{ color: var(--qc-dim); }

.cp-toggle{ display:flex; gap:8px; margin:8px 0 14px; flex-wrap:wrap; }
.cp-btn{
  border:1px solid rgba(255,255,255,.14); background: rgba(255,255,255,.04);
  color:#fff; padding:6px 10px; border-radius:999px; cursor:pointer;
  transition: background .2s ease, border-color .2s ease, transform .2s ease;
}
.cp-btn:hover{ transform: translateY(-2px); border-color: rgba(86,240,255,.4); }
.cp-btn.is-active{ background: rgba(127,91,255,.28); border-color: rgba(127,91,255,.6); }

.cp-grid{
  display:grid; gap:16px; grid-template-columns: repeat(2, minmax(0,1fr));
}
@media (max-width: 768px){ .cp-grid{ grid-template-columns: 1fr; } }

.cp-media{
  position:relative;
  border:1px solid rgba(255,255,255,.10); border-radius: var(--radius-lg);
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  padding: 12px; box-shadow: var(--shadow-1);
  overflow:hidden;
}
.cp-media img{ width:100%; max-width:350px; border-radius:12px; aspect-ratio:4/3; object-fit:cover; }
.cp-media .meta{ color: var(--qc-dim); margin-top:8px; }

/* оверлеи: дождь и пыль; маска-spotlight по переменным */
.cp-overlay{
  position:absolute; inset:12px 12px calc(12px + 1.8rem) 12px; border-radius:12px;
  pointer-events:none; mix-blend-mode: screen; opacity:.95;
  -webkit-mask-image: radial-gradient(140px 140px at var(--sx,50%) var(--sy,50%), #0000 0, #000 75%);
  mask-image: radial-gradient(140px 140px at var(--sx,50%) var(--sy,50%), #0000 0, #000 75%);
}
.cp-overlay--rain{
  background:
    repeating-linear-gradient(120deg, rgba(86,240,255,.25) 0 2px, transparent 2px 10px),
    radial-gradient(40px 40px at 80% 10%, rgba(127,91,255,.18), transparent 60%);
  filter: blur(0.4px);
}
.cp-overlay--dust{
  background:
    radial-gradient(2px 2px at 14% 20%, rgba(255,221,140,.25), transparent 60%),
    radial-gradient(2px 2px at 40% 55%, rgba(255,221,140,.18), transparent 60%),
    radial-gradient(2px 2px at 75% 35%, rgba(255,221,140,.20), transparent 60%);
  filter: blur(.2px);
}

/* режимы: показываем только нужный слой */
.city-proof.mode-monsoon .cp-overlay--rain{ display:block; }
.city-proof.mode-monsoon .cp-overlay--dust{ display:none; }
.city-proof.mode-dust    .cp-overlay--rain{ display:none; }
.city-proof.mode-dust    .cp-overlay--dust{ display:block; }
/* Базово: если где-то ещё не задано, пусть высота берётся из переменной */
.bp-grid .bp-col .bp-bar{
  height: var(--h);
}

/* Конкретные значения для каждого дня (бывшие inline) */
.bp-grid .bp-col:nth-child(1) .bp-bar{ --h: 62%; } /* Mon */
.bp-grid .bp-col:nth-child(2) .bp-bar{ --h: 68%; } /* Tue */
.bp-grid .bp-col:nth-child(3) .bp-bar{ --h: 74%; } /* Wed */
.bp-grid .bp-col:nth-child(4) .bp-bar{ --h: 58%; } /* Thu */
.bp-grid .bp-col:nth-child(5) .bp-bar{ --h: 80%; } /* Fri */
.bp-grid .bp-col:nth-child(6) .bp-bar{ --h: 52%; } /* Sat */
.bp-grid .bp-col:nth-child(7) .bp-bar{ --h: 48%; } /* Sun */