/* Products page — Sections 1–3 */
/* Общие */
section{ overflow-x: clip; }

/* ====== SECTION 1: Gear Atelier Hero ====== */
.pa-hero{
  position:relative; padding:56px 0 84px;
  background:
    radial-gradient(1000px 360px at 15% -10%, rgba(255,106,40,.10), transparent 60%),
    radial-gradient(900px 320px at 120% -20%, rgba(240,58,23,.08), transparent 60%),
    var(--bg);
}
.pa-shimmer{
  position:absolute; inset:-10% -10% auto -10%; height:60%;
  background:repeating-linear-gradient(to bottom, rgba(255,255,255,.03) 0 4px, rgba(255,255,255,0) 4px 12px);
  animation: paSh 7s linear infinite; mix-blend-mode:screen; pointer-events:none; filter:blur(1px);
}
@keyframes paSh{ 0%{transform:translateY(0)} 100%{transform:translateY(-30px)} }

.pa-grid{ display:grid; grid-template-columns:1.15fr .85fr; gap:28px; align-items:center }
.pa-title{ font-family:"Oswald",sans-serif; margin:.2rem 0 .4rem; font-size:clamp(1.6rem,2.4vw,2.2rem) }
.pa-lead{ color:var(--muted); margin:0 0 12px }
.pa-points{ margin:8px 0 16px; padding-left:18px }
.pa-points li{ list-style:"🔥  "; padding-inline-start:6px }
.pa-links{ display:flex; gap:12px; flex-wrap:wrap }

.pa-mosaic{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px }
.pa-mosaic figure{ margin:0; background:linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.03)); padding:10px; border-radius:16px; box-shadow:0 12px 28px rgba(0,0,0,.25) }
.pa-mosaic figcaption{ font-size:.9rem; color:var(--muted); margin-top:6px }
.tilt{ transform:perspective(900px) rotateX(0) rotateY(0); transition:transform .25s ease }
.tilt:hover{ transform:perspective(900px) rotateX(3deg) rotateY(-4deg) translateY(-2px) }

@media (max-width: 1000px){ .pa-grid{ grid-template-columns:1fr; gap:22px } }

/* ====== SECTION 2: Kit Switcher ====== */
.kit-switcher{ position:relative; padding:56px 0 84px; background:var(--bg-2) }
.ks-grid{ display:grid; grid-template-columns:1.05fr .95fr; gap:28px; align-items:center }
.ks-title{ font-family:"Oswald",sans-serif; margin:0 0 8px }
.ks-lead{ color:var(--muted); margin:0 0 12px }

.ks-tabs{ display:flex; gap:10px; flex-wrap:wrap; margin:6px 0 10px }
.ks-tab{
  border:1px solid rgba(255,255,255,.22); background:rgba(255,255,255,.04); color:var(--ink);
  border-radius:12px; padding:8px 12px; cursor:pointer; font-weight:700; letter-spacing:.3px;
  transition:transform .15s ease, background .2s ease, border-color .2s ease; transform:translateZ(0)
}
.ks-tab:hover{ transform:translateY(-1px) }
.ks-tab.is-active{ background:linear-gradient(90deg,var(--brand),var(--brand-2)); color:#0b0806; border-color:transparent }

.ks-list{ margin:10px 0 0; padding-left:18px }
.ks-list li{ list-style:"🔥  "; padding-inline-start:6px; margin:6px 0 }
.ks-list span{ transition:opacity .25s ease, transform .25s ease; display:inline-block }

.ks-stage{
  position:relative; max-width:560px; margin-inline:auto; aspect-ratio:1/1;
  background:#140f0c; border-radius:18px; overflow:hidden; box-shadow:0 14px 32px rgba(0,0,0,.28)
}
.ks-view{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:0; transition:opacity .35s ease }
.ks-stage[data-state="balcony"] .ks-balcony{ opacity:1 }
.ks-stage[data-state="festival"] .ks-festival{ opacity:1 }
.ks-glow{ position:absolute; inset:0; pointer-events:none; background:radial-gradient(380px 220px at 70% 60%, rgba(255,209,102,.25), transparent 70%); opacity:.3; mix-blend-mode:screen }

@media (max-width: 980px){ .ks-grid{ grid-template-columns:1fr; gap:22px } }

/* ====== SECTION 3: Fuel Matrix ====== */
.fuel-matrix{
  position:relative; padding:56px 0 84px;
  background:
    radial-gradient(760px 300px at 100% -5%, rgba(255,106,40,.08), transparent 60%),
    var(--bg);
}
.fm-grid{ display:grid; grid-template-columns:1.05fr .95fr; gap:28px; align-items:start }
.fm-title{ font-family:"Oswald",sans-serif; margin:0 0 8px }
.fm-lead{ color:var(--muted); margin:0 0 12px }

.fm-bars{ display:grid; gap:12px }
.fm-row{ display:grid; grid-template-columns:1.2fr 1fr auto; gap:10px; align-items:end }
.fm-label{ white-space:nowrap }
.fm-min{ color:var(--accent); font-weight:700 }

.fm-bar{
  --v:.6;
  height:140px; border-radius:12px; background:rgba(255,255,255,.06); position:relative; overflow:hidden;
}
.fm-bar::after{
  content:""; position:absolute; left:0; right:0; bottom:0;
  height:calc(var(--v)*100%); border-radius:12px 12px 0 0;
  background:linear-gradient(180deg, var(--brand), var(--brand-2));
  transform-origin:bottom; transform:scaleY(0); transition:transform .9s cubic-bezier(.2,.8,.2,1)
}
[data-reveal].is-in .fm-bar::after{ transform:scaleY(1) }
.fm-bar.v82{ --v:.82 } .fm-bar.v68{ --v:.68 }

.fm-side{ display:grid; gap:12px; align-content:start }
.fm-card{ margin:0; background:linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.03)); padding:10px; border-radius:16px; box-shadow:0 10px 24px rgba(0,0,0,.25) }
.fm-card figcaption{ font-size:.9rem; color:var(--muted); margin-top:6px }

@media (max-width: 980px){
  .fm-grid{ grid-template-columns:1fr; gap:22px }
  .fm-row{ grid-template-columns:1fr; align-items:center }
  .fm-bar{ height:120px }
}
/* ====== SECTION 4: Precision Tools Suite (scroll-snap) ====== */
.tool-suite{
  position:relative; padding:56px 0 84px;
  background:
    radial-gradient(840px 320px at 100% -5%, rgba(240,58,23,.07), transparent 60%),
    var(--bg-2);
}
.ts-title{ font-family:"Oswald",sans-serif; margin:0 0 8px }
.ts-lead{ color:var(--muted); margin:0 0 14px }

.ts-track{
  display:flex; gap:14px; overflow-x:auto; padding:8px 4px 4px;
  scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch;
  border-top:1px solid rgba(255,255,255,.06); border-bottom:1px solid rgba(255,255,255,.06);
  background:linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.03));
  border-radius:14px;
}
.ts-card{
  scroll-snap-align:center; flex:0 0 260px;
  background:rgba(255,255,255,.03); border-radius:14px; padding:10px;
  box-shadow:0 10px 24px rgba(0,0,0,.25)
}
.ts-card figure{ margin:0 }
.ts-card figcaption{ font-size:.9rem; color:var(--muted); margin-top:6px }

/* CSS pictograms */
.ts-ico{ display:flex; flex-direction:column; gap:6px }
.ts-ico h3{ margin:.2rem 0 0 }
.ts-ico p{ margin:.1rem 0 0; color:var(--muted) }
.ts-ico::before, .ts-ico::after{ content:""; display:block }
.ts-ico::before{
  width:44px; height:44px; border-radius:12px; background:linear-gradient(90deg, var(--brand), var(--brand-2));
  box-shadow:0 6px 16px rgba(0,0,0,.25)
}
.ts-ico--glove::after{ width:26px; height:18px; background:#0b0806; border-radius:6px; transform:translate(9px,-38px) rotate(-6deg) }
.ts-ico--scraper::after{ width:24px; height:6px; background:#0b0806; border-radius:3px; transform:translate(10px,-38px) }
.ts-ico--basket::after{ width:24px; height:18px; background:#0b0806; border-radius:4px; transform:translate(10px,-40px) }

/* ====== SECTION 5: Vent Dial Tutor ====== */
.vent-tutor{
  position:relative; padding:56px 0 84px;
  background:
    radial-gradient(780px 300px at -10% 5%, rgba(255,106,40,.08), transparent 60%),
    var(--bg);
}
.vt-grid{ display:grid; grid-template-columns:1.05fr .95fr; gap:28px; align-items:center }
.vt-title{ font-family:"Oswald",sans-serif; margin:0 0 8px }
.vt-lead{ color:var(--muted); margin:0 0 12px }

.vt-tabs{ display:flex; gap:10px; flex-wrap:wrap; margin:6px 0 10px }
.vt-tab{
  border:1px solid rgba(255,255,255,.22); background:rgba(255,255,255,.04); color:var(--ink);
  border-radius:12px; padding:8px 12px; cursor:pointer; font-weight:700; letter-spacing:.3px;
  transition:transform .15s ease, background .2s ease, border-color .2s ease; transform:translateZ(0)
}
.vt-tab:hover{ transform:translateY(-1px) }
.vt-tab.is-active{ background:linear-gradient(90deg,var(--brand),var(--brand-2)); color:#0b0806; border-color:transparent }

.vt-points{ margin:10px 0 0; padding-left:18px }
.vt-points li{ list-style:"🔥  "; padding-inline-start:6px; margin:6px 0 }
.vt-points span{ transition:opacity .25s ease, transform .25s ease; display:inline-block }

.vt-stage{ display:grid; grid-template-columns:1fr 1fr; gap:14px; align-items:center }
.vt-dial{
  position:relative; width:min(320px, 92%); aspect-ratio:1/1; margin-inline:auto;
  border-radius:50%; background:#130f0d; box-shadow:0 14px 32px rgba(0,0,0,.28);
  --angle: 28deg; /* default sear */
}
.vt-plate{
  position:absolute; inset:10% 10%; border-radius:50%;
  background:
    conic-gradient(
      rgba(255,209,102,.85) 0 120deg,      /* conduction lane */
      rgba(120,180,255,.75) 0 240deg,      /* convection lane */
      rgba(255,106,40,.85) 0 360deg        /* radiation lane */
    );
  overflow:hidden;
}
.vt-needle{
  position:absolute; left:50%; top:50%; width:4px; height:40%;
  background:#fff; border-radius:3px; transform-origin:50% 100%;
  transform: translate(-50%, -100%) rotate(var(--angle)); box-shadow:0 0 10px rgba(255,255,255,.25)
}
.vt-needle::after{
  content:""; position:absolute; bottom:-10px; left:50%; transform:translateX(-50%);
  width:14px; height:14px; border-radius:50%; background:#fff;
}
.vt-side{ display:grid; gap:12px; align-content:start }
.vt-card{ margin:0; background:linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.03)); padding:10px; border-radius:16px; box-shadow:0 10px 24px rgba(0,0,0,.25) }
.vt-card figcaption{ font-size:.9rem; color:var(--muted); margin-top:6px }

/* dial states */
.vt-stage[data-state="sear"]  .vt-dial{ --angle: 28deg }
.vt-stage[data-state="roast"] .vt-dial{ --angle: 180deg }
.vt-stage[data-state="smoke"] .vt-dial{ --angle: 260deg }

@media (max-width:980px){
  .vt-grid{ grid-template-columns:1fr; gap:22px }
  .vt-stage{ grid-template-columns:1fr; }
}

/* ====== SECTION 6: Finishes (swatch wall) ====== */
.finishes{
  position:relative; padding:56px 0 84px;
  background:
    radial-gradient(820px 320px at 100% -5%, rgba(255,106,40,.08), transparent 60%),
    var(--bg-2);
}
.fn-grid{ display:grid; grid-template-columns:1.05fr .95fr; gap:28px; align-items:start }
.fn-title{ font-family:"Oswald",sans-serif; margin:0 0 8px }
.fn-lead{ color:var(--muted); margin:0 0 12px }

.fn-swatches{
  display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:10px;
  background:linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.03));
  border-radius:16px; padding:12px; box-shadow:0 12px 28px rgba(0,0,0,.24);
}
.fn-swatch{
  aspect-ratio: 1/1; border-radius:12px;
  background: var(--c); box-shadow: inset 0 0 0 2px rgba(0,0,0,.25), 0 8px 18px rgba(0,0,0,.24);
  transform:translateZ(0); transition: transform .2s ease, box-shadow .2s ease, filter .2s ease;
}
.fn-swatch:hover{ transform:translateY(-2px) scale(1.03); filter:brightness(1.05) }

.fn-side{ display:grid; gap:12px; align-content:start }
.fn-card{ margin:0; background:linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.03)); padding:10px; border-radius:16px; box-shadow:0 10px 24px rgba(0,0,0,.25) }
.fn-card figcaption{ font-size:.9rem; color:var(--muted); margin-top:6px }

@media (max-width:980px){ .fn-grid{ grid-template-columns:1fr; gap:22px } }
/* ====== SECTION 7: Batch Ledger ====== */
.batch-ledger{
  position:relative; padding:56px 0 84px; overflow-x:clip;
  background:
    radial-gradient(860px 320px at -10% 5%, rgba(255,106,40,.08), transparent 60%),
    var(--bg);
}
.bl-grid{ display:grid; grid-template-columns:1.1fr .9fr; gap:28px; align-items:start }
.bl-title{ font-family:"Oswald",sans-serif; margin:0 0 8px }
.bl-lead{ color:var(--muted); margin:0 0 12px }
.bl-points{ margin:8px 0 0; padding-left:18px }
.bl-points li{ list-style:"🔥  "; padding-inline-start:6px }

.bl-wall{
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px;
  background:linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.03));
  border-radius:16px; padding:12px; box-shadow:0 12px 28px rgba(0,0,0,.24);
}
.stamp{
  display:grid; place-items:center; height:82px; border-radius:12px;
  background:rgba(255,255,255,.03); color:var(--accent); font-weight:800; letter-spacing:.12em;
  border:1px dashed rgba(255,255,255,.14); text-transform:uppercase;
  transition:transform .2s ease, box-shadow .2s ease, background .2s ease;
}
.stamp.is-hot{ background:rgba(255,209,102,.12); box-shadow:0 0 0 2px rgba(255,209,102,.3) inset; transform:translateY(-2px) }

.bl-side{ display:grid; gap:12px; align-content:start }
.bl-card{ margin:0; background:linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.03)); padding:10px; border-radius:16px; box-shadow:0 10px 24px rgba(0,0,0,.25) }
.bl-card figcaption{ font-size:.9rem; color:var(--muted); margin-top:6px }

@media (max-width:980px){ .bl-grid{ grid-template-columns:1fr; gap:22px } }

/* ====== SECTION 8: Dry Room Protocol ====== */
.dry-room{
  position:relative; padding:56px 0 84px; overflow-x:clip;
  background:
    radial-gradient(880px 320px at 100% -5%, rgba(240,58,23,.07), transparent 60%),
    var(--bg-2);
}
.dr-grid{ display:grid; grid-template-columns:1.05fr .95fr; gap:28px; align-items:center }
.dr-title{ font-family:"Oswald",sans-serif; margin:0 0 8px }
.dr-lead{ color:var(--muted); margin:0 0 12px }

.dr-tabs{ display:flex; gap:10px; flex-wrap:wrap; margin:6px 0 10px }
.dr-tab{
  border:1px solid rgba(255,255,255,.22); background:rgba(255,255,255,.04); color:var(--ink);
  border-radius:12px; padding:8px 12px; cursor:pointer; font-weight:700; letter-spacing:.3px;
  transition:transform .15s ease, background .2s ease, border-color .2s ease; transform:translateZ(0)
}
.dr-tab:hover{ transform:translateY(-1px) }
.dr-tab.is-active{ background:linear-gradient(90deg,var(--brand),var(--brand-2)); color:#0b0806; border-color:transparent }

.dr-notes{ margin:10px 0 0; padding-left:18px }
.dr-notes li{ list-style:"🔥  "; padding-inline-start:6px }
.dr-notes span{ display:inline-block; transition:opacity .25s ease, transform .25s ease }

.dr-stage{ display:grid; grid-template-columns:1fr 1fr; gap:14px; align-items:center }
.gauge{ position:relative; width:min(320px,92%); height:16px; margin-inline:auto }
.g-rail{ position:absolute; inset:0; border-radius:999px; background:rgba(255,255,255,.12) }
.g-fill{
  --level:.30; /* dry by default */
  position:absolute; left:0; top:0; bottom:0; width:calc(var(--level)*100%);
  border-radius:999px; background:linear-gradient(90deg, var(--brand), var(--brand-2));
  transition: width .5s ease;
}
.g-cap{ position:absolute; left:calc(var(--level)*100% - 7px); top:50%; width:14px; height:14px; border-radius:50%; background:#fff; transform:translateY(-50%); box-shadow:0 0 10px rgba(255,255,255,.25); transition:left .5s ease }

.dr-side{ display:grid; gap:12px; align-content:start }
.dr-card{ margin:0; background:linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.03)); padding:10px; border-radius:16px; box-shadow:0 10px 24px rgba(0,0,0,.25) }
.dr-card figcaption{ font-size:.9rem; color:var(--muted); margin-top:6px }

/* gauge states */
.dr-stage[data-state="dry"]    .g-fill{ --level:.30 }
.dr-stage[data-state="humid"]  .g-fill{ --level:.55 }
.dr-stage[data-state="monsoon"] .g-fill{ --level:.78 }

@media (max-width:980px){
  .dr-grid{ grid-template-columns:1fr; gap:22px }
  .dr-stage{ grid-template-columns:1fr }
}

/* ====== SECTION 9: Packaging & Handling (bouncing demo) ====== */
.pack-handling{
  position:relative; padding:56px 0 84px; overflow-x:clip;
  background:
    radial-gradient(900px 340px at -10% 10%, rgba(255,106,40,.08), transparent 60%),
    var(--bg);
}
.ph-grid{ display:grid; grid-template-columns:1.05fr .95fr; gap:28px; align-items:center }
.ph-title{ font-family:"Oswald",sans-serif; margin:0 0 8px }
.ph-lead{ color:var(--muted); margin:0 0 12px }

.ph-demo{
  position:relative; aspect-ratio:4/3; max-width:560px; margin-inline:auto;
  border-radius:18px; background:#130f0d; box-shadow:0 14px 32px rgba(0,0,0,.28);
}
.box-shadow{ position:absolute; left:15%; right:15%; bottom:12%; height:18px; border-radius:999px; background:radial-gradient(closest-side, rgba(0,0,0,.45), transparent); filter:blur(1px) }
.box{
  position:absolute; left:20%; top:10%; width:120px; height:90px; border-radius:10px;
  background:linear-gradient(180deg,#c49a6c,#a67c52); box-shadow:0 10px 24px rgba(0,0,0,.3);
  animation: dropBounce 2.6s ease-in-out infinite;
}
@keyframes dropBounce{
  0%{ transform:translateY(-20px) rotate(-6deg) }
  35%{ transform:translateY(160px) rotate(0) }
  45%{ transform:translateY(130px) rotate(2deg) }
  60%{ transform:translateY(160px) rotate(0) }
  100%{ transform:translateY(0) rotate(-6deg) }
}

.ph-side{ display:grid; gap:12px; align-content:start }
.ph-card{ margin:0; background:linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.03)); padding:10px; border-radius:16px; box-shadow:0 10px 24px rgba(0,0,0,.25) }
.ph-card figcaption{ font-size:.9rem; color:var(--muted); margin-top:6px }

@media (max-width:980px){ .ph-grid{ grid-template-columns:1fr; gap:22px } }
/* ====== SECTION 10: Heat Shield Lab ====== */
.heat-shield{
  position:relative; padding:56px 0 84px; overflow-x:clip;
  background:
    radial-gradient(900px 340px at 100% -5%, rgba(255,106,40,.08), transparent 60%),
    var(--bg-2);
}
.hs-grid{ display:grid; grid-template-columns:1.05fr .95fr; gap:28px; align-items:center }
.hs-title{ font-family:"Oswald",sans-serif; margin:0 0 8px }
.hs-lead{ color:var(--muted); margin:0 0 12px }
.hs-points{ margin:8px 0 0; padding-left:18px }
.hs-points li{ list-style:"🔥  "; padding-inline-start:6px }

.hs-stage{
  position:relative; aspect-ratio:4/3; max-width:560px; margin-inline:auto;
  border-radius:18px; background:#130f0d; box-shadow:0 14px 32px rgba(0,0,0,.28);
}
.hs-grill{
  position:absolute; inset:12% 12% 18% 12%; border-radius:18px;
  background: radial-gradient(circle at 50% 30%, rgba(255,209,102,.15), transparent 55%),
              radial-gradient(closest-side, rgba(255,255,255,.03), rgba(255,255,255,.02));
  overflow:hidden;
}
.hs-wave{
  position:absolute; left:8%; right:8%; height:6px; border-radius:99px;
  background:linear-gradient(90deg, var(--brand), var(--brand-2)); opacity:.35;
  animation: hsRise 3.6s ease-in-out infinite;
  filter:blur(.3px);
}
.w1{ bottom:16%; animation-delay:0s }
.w2{ bottom:28%; animation-delay:.6s }
.w3{ bottom:40%; animation-delay:1.2s }
@keyframes hsRise{
  0%{ transform:translateY(18px); opacity:.0 }
  20%{ opacity:.35 }
  80%{ opacity:.25 }
  100%{ transform:translateY(-22px); opacity:0 }
}

.hs-side{ display:grid; gap:12px; align-content:start }
.hs-card{ margin:0; background:linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.03)); padding:10px; border-radius:16px; box-shadow:0 10px 24px rgba(0,0,0,.25) }
.hs-card figcaption{ font-size:.9rem; color:var(--muted); margin-top:6px }

@media (max-width:980px){ .hs-grid{ grid-template-columns:1fr; gap:22px } }

/* ====== SECTION 11: Spice Pairings ====== */
.pairings{
  position:relative; padding:56px 0 84px; overflow-x:clip;
  background:
    radial-gradient(880px 320px at -10% 5%, rgba(240,58,23,.07), transparent 60%),
    var(--bg);
}
.pr-grid{ display:grid; grid-template-columns:1.05fr .95fr; gap:28px; align-items:center }
.pr-title{ font-family:"Oswald",sans-serif; margin:0 0 8px }
.pr-lead{ color:var(--muted); margin:0 0 12px }

.pr-tabs{ display:flex; gap:10px; flex-wrap:wrap; margin:6px 0 10px }
.pr-tab{
  border:1px solid rgba(255,255,255,.22); background:rgba(255,255,255,.04); color:var(--ink);
  border-radius:12px; padding:8px 12px; cursor:pointer; font-weight:700; letter-spacing:.3px;
  transition:transform .15s ease, background .2s ease, border-color .2s ease; transform:translateZ(0)
}
.pr-tab:hover{ transform:translateY(-1px) }
.pr-tab.is-active{ background:linear-gradient(90deg,var(--brand),var(--brand-2)); color:#0b0806; border-color:transparent }

.pr-notes{ margin:10px 0 0; padding-left:18px }
.pr-notes li{ list-style:"🔥  "; padding-inline-start:6px }
.pr-notes span{ display:inline-block; transition:opacity .25s ease, transform .25s ease }

.pr-stage{
  position:relative; aspect-ratio:1/1; max-width:420px; margin-inline:auto;
  border-radius:18px; background:#130f0d; box-shadow:0 14px 32px rgba(0,0,0,.28);
  display:grid; grid-template-columns:repeat(3,1fr); align-items:end; gap:10px; padding:14px;
}
.pr-bar{
  --v:.5; position:relative; height:100%;
  background:rgba(255,255,255,.06); border-radius:12px; overflow:hidden;
}
.pr-bar::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:calc(var(--v)*100%);
  background:linear-gradient(180deg, var(--brand), var(--brand-2));
  transform-origin:bottom; transform:scaleY(0); transition:transform .6s cubic-bezier(.2,.8,.2,1)
}
[data-reveal].is-in .pr-bar::after{ transform:scaleY(1) }
.pr-bar span{ position:absolute; left:50%; bottom:8px; transform:translateX(-50%); font-weight:800 }

/* значения по состояниям */
.pr-stage[data-state="chicken"] .v-heat{ --v:.75 }
.pr-stage[data-state="chicken"] .v-herb{ --v:.55 }
.pr-stage[data-state="chicken"] .v-tang{ --v:.65 }

.pr-stage[data-state="paneer"] .v-heat{ --v:.60 }
.pr-stage[data-state="paneer"] .v-herb{ --v:.70 }
.pr-stage[data-state="paneer"] .v-tang{ --v:.55 }

.pr-stage[data-state="fish"] .v-heat{ --v:.45 }
.pr-stage[data-state="fish"] .v-herb{ --v:.65 }
.pr-stage[data-state="fish"] .v-tang{ --v:.75 }

.pr-side{ display:grid; gap:12px; align-content:start }
.pr-card{ margin:0; background:linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.03)); padding:10px; border-radius:16px; box-shadow:0 10px 24px rgba(0,0,0,.25) }
.pr-card figcaption{ font-size:.9rem; color:var(--muted); margin-top:6px }

@media (max-width:980px){ .pr-grid{ grid-template-columns:1fr; gap:22px } }

/* ====== SECTION 12: Care Bundle ====== */
.care-bundle{
  position:relative; padding:56px 0 84px; overflow-x:clip;
  background:
    radial-gradient(900px 340px at 100% -5%, rgba(255,106,40,.08), transparent 60%),
    var(--bg-2);
}
.cb-grid{ display:grid; grid-template-columns:1.05fr .95fr; gap:28px; align-items:center }
.cb-title{ font-family:"Oswald",sans-serif; margin:0 0 8px }
.cb-lead{ color:var(--muted); margin:0 0 12px }

.cb-compare{
  display:grid; grid-template-columns:1fr 1fr; gap:12px;
}
.cb-pack{
  background:rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.12);
  border-radius:16px; padding:12px; cursor:pointer; outline:0;
  transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.cb-pack h3{ margin:.2rem 0 .2rem }
.cb-pack ul{ margin:.3rem 0 0; padding-left:18px }
.cb-pack li{ list-style:"🔥  "; padding-inline-start:6px }
.cb-pack.is-focus{
  transform:translateY(-2px);
  border-color:rgba(255,209,102,.55);
  box-shadow:0 0 0 2px rgba(255,209,102,.28) inset, 0 12px 26px rgba(0,0,0,.28);
}

.cb-side{ display:grid; gap:12px; align-content:start }
.cb-card{ margin:0; background:linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.03)); padding:10px; border-radius:16px; box-shadow:0 10px 24px rgba(0,0,0,.25) }
.cb-card figcaption{ font-size:.9rem; color:var(--muted); margin-top:6px }

@media (max-width:980px){
  .cb-grid{ grid-template-columns:1fr; gap:22px }
  .cb-compare{ grid-template-columns:1fr; }
}
/* ====== SECTION 13: Grate Lab ====== */
.grate-lab{
  position:relative; padding:56px 0 84px; overflow-x:clip;
  background:
    radial-gradient(880px 320px at 100% -5%, rgba(255,106,40,.08), transparent 60%),
    var(--bg);
}
.gl-grid{ display:grid; grid-template-columns:1.05fr .95fr; gap:28px; align-items:center }
.gl-title{ font-family:"Oswald",sans-serif; margin:0 0 8px }
.gl-lead{ color:var(--muted); margin:0 0 12px }

.gl-tabs{ display:flex; gap:10px; flex-wrap:wrap; margin:6px 0 10px }
.gl-tab{
  border:1px solid rgba(255,255,255,.22); background:rgba(255,255,255,.04); color:var(--ink);
  border-radius:12px; padding:8px 12px; cursor:pointer; font-weight:700; letter-spacing:.3px;
  transition:transform .15s ease, background .2s ease, border-color .2s ease
}
.gl-tab:hover{ transform:translateY(-1px) }
.gl-tab.is-active{ background:linear-gradient(90deg,var(--brand),var(--brand-2)); color:#0b0806; border-color:transparent }

.gl-notes{ margin:10px 0 0; padding-left:18px }
.gl-notes li{ list-style:"🔥  "; padding-inline-start:6px }
.gl-notes span{ display:inline-block; transition:opacity .25s ease, transform .25s ease }

.gl-stage{
  position:relative; aspect-ratio:4/3; max-width:560px; margin-inline:auto;
  border-radius:18px; background:#130f0d; box-shadow:0 14px 32px rgba(0,0,0,.28); overflow:hidden
}
.gl-grill{
  position:absolute; inset:12% 12% 12% 12%; border-radius:16px; overflow:hidden;
  background: radial-gradient(circle at 50% 45%, rgba(255,209,102,.14), transparent 55%);
}

/* куча расписанных паттернов делаем через background-image; переключаем классом на контейнере */
.gl-heat{
  position:absolute; inset:0; opacity:.65; filter:contrast(110%) saturate(105%);
  background-size: 24px 24px, 24px 24px;
  background-position: 0 0, 12px 12px;
  transition: transform .4s ease, opacity .4s ease;
}
.gl-stage[data-state="diamond"] .gl-heat{
  background-image:
    linear-gradient(45deg, rgba(255,255,255,.10) 2px, transparent 2px),
    linear-gradient(-45deg, rgba(255,255,255,.10) 2px, transparent 2px);
}
.gl-stage[data-state="straight"] .gl-heat{
  background-image:
    linear-gradient(90deg, rgba(255,255,255,.10) 2px, transparent 2px),
    linear-gradient(90deg, transparent 0, transparent 0); /* отключаем второй слой */
  background-size: 16px 16px, 0 0;
}

/* side cards */
.gl-side{ display:grid; gap:12px; align-content:start }
.gl-card{ margin:0; background:linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.03)); padding:10px; border-radius:16px; box-shadow:0 10px 24px rgba(0,0,0,.25) }
.gl-card figcaption{ font-size:.9rem; color:var(--muted); margin-top:6px }

@media (max-width:980px){ .gl-grid{ grid-template-columns:1fr; gap:22px } }

/* ====== SECTION 14: Charcoal Calculator ====== */
.charcoal-calc{
  position:relative; padding:56px 0 84px; overflow-x:clip;
  background:
    radial-gradient(900px 340px at -10% 10%, rgba(240,58,23,.07), transparent 60%),
    var(--bg-2);
}
.cc-grid{ display:grid; grid-template-columns:1.05fr .95fr; gap:28px; align-items:start }
.cc-title{ font-family:"Oswald",sans-serif; margin:0 0 8px }
.cc-lead{ color:var(--muted); margin:0 0 12px }

.cc-bars{ display:grid; gap:12px }
.cc-row{ display:grid; grid-template-columns:1.2fr 1fr auto; gap:10px; align-items:end }
.cc-label{ white-space:nowrap }
.cc-min{ color:var(--accent); font-weight:700 }

.cc-bar{
  --v:.6;
  height:140px; border-radius:12px; background:rgba(255,255,255,.06); position:relative; overflow:hidden;
}
.cc-bar::after{
  content:""; position:absolute; left:0; right:0; bottom:0;
  height:calc(var(--v)*100%); border-radius:12px 12px 0 0;
  background:linear-gradient(180deg, var(--brand), var(--brand-2));
  transform-origin:bottom; transform:scaleY(0); transition:transform .9s cubic-bezier(.2,.8,.2,1)
}
[data-reveal].is-in .cc-bar::after{ transform:scaleY(1) }
.cc-bar.v86{ --v:.86 } .cc-bar.v72{ --v:.72 }

.cc-side{ display:grid; gap:12px; align-content:start }
.cc-card{ margin:0; background:linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.03)); padding:10px; border-radius:16px; box-shadow:0 10px 24px rgba(0,0,0,.25) }
.cc-card figcaption{ font-size:.9rem; color:var(--muted); margin-top:6px }

@media (max-width:980px){
  .cc-grid{ grid-template-columns:1fr; gap:22px }
  .cc-row{ grid-template-columns:1fr; align-items:center }
  .cc-bar{ height:120px }
}

/* ====== SECTION 15: QA Bench ====== */
.qa-bench{
  position:relative; padding:56px 0 84px; overflow-x:clip;
  background:
    radial-gradient(920px 360px at 100% -5%, rgba(255,106,40,.08), transparent 60%),
    var(--bg);
}
.qb-grid{ display:grid; grid-template-columns:1.05fr .95fr; gap:28px; align-items:center }
.qb-title{ font-family:"Oswald",sans-serif; margin:0 0 8px }
.qb-lead{ color:var(--muted); margin:0 0 12px }

.qb-steps{
  counter-reset: step; list-style:none; margin:0; padding:0;
  display:grid; gap:10px;
}
.qb-steps li{
  position:relative; padding:10px 12px 10px 38px; border-radius:12px;
  background:rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.12);
}
.qb-steps li::before{
  counter-increment: step; content: counter(step);
  position:absolute; left:10px; top:50%; transform:translateY(-50%);
  width:20px; height:20px; border-radius:50%;
  display:grid; place-items:center; font-weight:800; background:rgba(255,255,255,.10);
}
.qb-steps li.ok{
  animation: qbPulse 2.4s ease-in-out infinite;
  border-color:rgba(255,209,102,.45);
}
@keyframes qbPulse{
  0%{ box-shadow:0 0 0 0 rgba(255,209,102,.35) }
  70%{ box-shadow:0 0 0 10px rgba(255,209,102,0) }
  100%{ box-shadow:0 0 0 0 rgba(255,209,102,0) }
}

.qb-side{ display:grid; gap:12px; align-content:start }
.qb-card{ margin:0; background:linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.03)); padding:10px; border-radius:16px; box-shadow:0 10px 24px rgba(0,0,0,.25) }
.qb-card figcaption{ font-size:.9rem; color:var(--muted); margin-top:6px }

@media (max-width:980px){ .qb-grid{ grid-template-columns:1fr; gap:22px } }
/* ====== SECTION 16: Assembly Flow (ribbon) ====== */
.assembly-flow{
  position:relative; padding:56px 0 84px; overflow-x:clip;
  background:
    radial-gradient(920px 360px at -10% 10%, rgba(255,106,40,.08), transparent 60%),
    var(--bg-2);
}
.af-grid{ display:grid; grid-template-columns:1.05fr .95fr; gap:28px; align-items:center }
.af-title{ font-family:"Oswald",sans-serif; margin:0 0 8px }
.af-lead{ color:var(--muted); margin:0 0 12px }

.af-stage{
  background:linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.03));
  border-radius:16px; padding:14px; box-shadow:0 12px 28px rgba(0,0,0,.24);
}
.ribbon{ counter-reset: af; list-style:none; margin:0; padding:0; display:grid; gap:10px }
.step{
  position:relative; padding:10px 12px 10px 44px; border-radius:12px;
  background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.12);
  transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease, background .2s ease;
}
.step::before{
  counter-increment: af; content: counter(af);
  position:absolute; left:10px; top:50%; transform:translateY(-50%);
  width:22px; height:22px; border-radius:50%;
  display:grid; place-items:center; font-weight:800; color:#0b0806;
  background:linear-gradient(90deg, var(--brand), var(--brand-2));
}
.step.is-on{
  transform:translateX(4px);
  border-color:rgba(255,209,102,.5);
  box-shadow:0 0 0 2px rgba(255,209,102,.25) inset;
  background:rgba(255,255,255,.08);
}

.af-side{ display:grid; gap:12px; align-content:start }
.af-card{ margin:0; background:linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.03)); padding:10px; border-radius:16px; box-shadow:0 10px 24px rgba(0,0,0,.25) }
.af-card figcaption{ font-size:.9rem; color:var(--muted); margin-top:6px }

@media (max-width:980px){ .af-grid{ grid-template-columns:1fr; gap:22px } }

/* ====== SECTION 17: Stockists ====== */
.stockists{
  position:relative; padding:56px 0 84px; overflow-x:clip;
  background:
    radial-gradient(940px 360px at 100% -5%, rgba(240,58,23,.07), transparent 60%),
    var(--bg);
}
.st-grid{ display:grid; grid-template-columns:1.05fr .95fr; gap:28px; align-items:center }
.st-title{ font-family:"Oswald",sans-serif; margin:0 0 8px }
.st-lead{ color:var(--muted); margin:0 0 12px }

.st-ticker{
  border-radius:14px; overflow:hidden;
  background:linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.03));
  box-shadow:0 10px 24px rgba(0,0,0,.22);
}
.st-line{
  --speed: 40s;
  display:flex; gap:28px; list-style:none; margin:0; padding:10px 14px;
  white-space:nowrap; animation: citySlide var(--speed) linear infinite;
}
.st-line li{ color:var(--ink); opacity:.85; font-weight:800; letter-spacing:.3px }
.st-ticker:hover .st-line{ animation-play-state: paused; }
@keyframes citySlide{ from{ transform:translateX(0) } to{ transform:translateX(-50%) } }

.st-cta{ margin-top:12px; display:flex; gap:10px; flex-wrap:wrap }

.st-side{ display:grid; gap:12px; align-content:start }
.st-card{ margin:0; background:linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.03)); padding:10px; border-radius:16px; box-shadow:0 10px 24px rgba(0,0,0,.25) }
.st-card figcaption{ font-size:.9rem; color:var(--muted); margin-top:6px }

@media (max-width:980px){ .st-grid{ grid-template-columns:1fr; gap:22px } }
/* Finishes — color classes (no inline) */
.fn-swatch.c-ember { --c:#ff6a28; }
.fn-swatch.c-amber { --c:#ffd166; }
.fn-swatch.c-sky   { --c:#90caf9; }
.fn-swatch.c-steel { --c:#bdbdbd; }
.fn-swatch.c-cocoa { --c:#8d6e63; }
.fn-swatch.c-mint  { --c:#a5d6a7; }
/* базовый узел — позицию теперь задают классы ниже */
.nodes li{
  position:absolute; transform:translate(-50%, -50%);
  --size:12px;
}
/* Support Network — node positions (no inline) */
.nodes .n-delhi { left:18%; top:22%; }
.nodes .n-jaipur{ left:29%; top:35%; }
.nodes .n-indore{ left:39%; top:48%; }
.nodes .n-hyd   { left:52%; top:64%; }
.nodes .n-blr   { left:60%; top:72%; }
.nodes .n-chn   { left:66%; top:58%; }
.nodes .n-kochi { left:74%; top:68%; }
.nodes .n-ahm   { left:14%; top:60%; }
.nodes .n-mum   { left:22%; top:68%; }
.nodes .n-pune  { left:28%; top:70%; }