/* ===== Page title / intro ===== */
.page-title{ margin:0 0 6px; font-size: clamp(26px, 4.8vw, 40px); }
.page-lede{ margin:0 0 12px; color:#dbe6fb; }

/* ===== 1) Capsule Hero ===== */
.col-hero{ padding: clamp(56px, 8vh, 84px) 0; position:relative; }
.hero-grid{
  display:grid; gap:18px;
  grid-template-columns: 1.1fr .9fr;
  align-items:center;
}
.filter-chips{ display:flex; gap:10px; flex-wrap:wrap; margin:12px 0 0; padding:0; list-style:none; }
.chip{
  padding:8px 12px; border-radius:999px; cursor:pointer;
  background:linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.03));
  border:1px solid rgba(255,255,255,.18); color:#e6f0ff; font-weight:600;
  transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}
.chip:hover{ transform: translateY(-1px); box-shadow:0 10px 24px rgba(0,0,0,.28); }
.chip.is-on{ border-color: rgba(255,210,77,.55); box-shadow:0 0 0 3px rgba(255,210,77,.2) inset; }

.hero-pinboard{
  display:grid; gap:14px; align-content:start;
  grid-template-columns: 1fr 1fr;
}
.pin{
  position:relative; padding:10px; border-radius:16px;
  background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  border:1px solid rgba(255,255,255,.12);
  box-shadow:0 10px 30px rgba(0,0,0,.28);
}
.pin img{ aspect-ratio: 4/5; object-fit:cover; }
.pin figcaption{ margin-top:8px; text-align:center; color:#d6e5ff; font-size:.92rem; }
.shot-float{ animation: bob2 5.6s ease-in-out infinite; }
.tilt-l{ transform:rotate(-2deg); }
.tilt-r{ transform:rotate(2deg); }
.small img{ aspect-ratio: 4/5; }
@keyframes bob2{ 0%,100%{ transform: translateY(0); } 50%{ transform: translateY(-8px); } }

@media (max-width: 992px){
  .hero-grid{ grid-template-columns: 1fr; }
  .hero-pinboard{ grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px){
  .hero-pinboard{ grid-template-columns: 1fr; }
  .tilt-l, .tilt-r{ transform:none; }
}

/* ===== 2) Families ===== */
.fam-flex{ position:relative; padding: clamp(56px, 8vh, 84px) 0; overflow:hidden; }
.fam-grid{
  display:grid; gap:16px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.fam-card{
  border:1px solid rgba(255,255,255,.12);
  border-radius:16px; padding:12px;
  background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  box-shadow:0 10px 30px rgba(0,0,0,.28);
  transition: transform .25s ease, box-shadow .25s ease;
}
.fam-card:hover{ transform: translateY(-4px); box-shadow:0 16px 40px rgba(0,0,0,.4); }
.fam-fig{ margin:0 0 10px; }
.fam-fig img{ aspect-ratio: 4/3; object-fit:cover; }
.fam-name{ margin:0 0 6px; }

/* meters */
.meters{ list-style:none; margin:0; padding:0; display:grid; gap:10px; }
.meter{ display:grid; grid-template-columns: 120px 1fr; align-items:center; gap:10px; }
.meter span{ color:#d6e5ff; }
.meter .bar{
  display:block; height:12px; width:0%;
  border-radius:999px; background:linear-gradient(90deg, #ffd24d, #3aa0ff);
  box-shadow:0 0 12px rgba(255,210,77,.35);
  transition: width 1s ease-out;
}
.in-view .bar.b90{ width:90%; }
.in-view .bar.b85{ width:85%; }
.in-view .bar.b72{ width:72%; }
.in-view .bar.b70{ width:70%; }
.in-view .bar.b60{ width:60%; }
.in-view .bar.b92{ width:92%; }

/* rainy lines bg */
.rain-lines{
  position:absolute; inset:0; pointer-events:none; opacity:.45;
  background: repeating-linear-gradient(180deg, rgba(255,255,255,.06) 0 2px, transparent 2px 16px);
  animation: rainShift2 14s linear infinite;
}
@keyframes rainShift2{ to{ background-position: 0 640px; } }

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

/* ===== 3) Palette Lab ===== */
.palette-lab{ padding: clamp(56px, 8vh, 84px) 0; }
.pal-wrap{
  display:grid; gap:18px;
  grid-template-columns: 1.1fr .9fr;
  align-items:start;
}
.pal-figs{
  display:grid; gap:14px;
  grid-template-columns: 1fr 1fr;
}
.pal-shot{
  padding:10px; border-radius:16px; text-align:center;
  background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  border:1px solid rgba(255,255,255,.12);
  box-shadow:0 10px 30px rgba(0,0,0,.28);
  transition: transform .25s ease, box-shadow .25s ease;
}
.pal-shot:hover{ transform: translateY(-4px); box-shadow:0 16px 40px rgba(0,0,0,.4); }
.pal-shot img{ aspect-ratio: 4/3; object-fit:cover; }
.pal-shot figcaption{ margin-top:8px; color:#d6e5ff; font-size:.92rem; }

/* animated drops swatchline */
.swatchline{ display:flex; gap:10px; margin-top:12px; }
.drop{
  width:14px; height:14px; border-radius:50%;
  background:#ffd24d; box-shadow:0 0 10px rgba(255,210,77,.5);
  animation: bounce 1.6s ease-in-out infinite;
}
.drop.d2{ background:#3aa0ff; animation-delay:.2s; }
.drop.d3{ background:#8bd3ff; animation-delay:.4s; }
.drop.d4{ background:#ffe083; animation-delay:.6s; }
.drop.d5{ background:#9cc2ff; animation-delay:.8s; }
.drop.d6{ background:#fff; opacity:.85; animation-delay:1s; }
@keyframes bounce{
  0%,100%{ transform: translateY(0); }
  50%{ transform: translateY(-6px); }
}

@media (max-width: 992px){
  .pal-wrap{ grid-template-columns: 1fr; }
  .pal-figs{ grid-template-columns: 1fr; }
}
/* ===== 4) Weather Modes ===== */
.weather-modes{ position:relative; padding: clamp(56px, 8vh, 84px) 0; overflow:hidden; }
.wm-wrap{ position:relative; }
.wm-grid{
  display:grid; gap:16px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.wm-card{
  border:1px solid rgba(255,255,255,.12);
  border-radius:16px; padding:12px;
  background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  box-shadow:0 10px 30px rgba(0,0,0,.28);
  transition: transform .25s ease, box-shadow .25s ease;
}
.wm-card:hover{ transform: translateY(-4px); box-shadow:0 16px 40px rgba(0,0,0,.4); }
.wm-fig{ margin:0 0 10px; }
.wm-fig img{ aspect-ratio: 4/3; object-fit:cover; }
.wm-name{ margin:0 0 6px; }

.wm-gauges{ list-style:none; margin:0; padding:0; display:grid; gap:10px; }
.wm-gauges li{ display:grid; grid-template-columns:110px 1fr; align-items:center; gap:10px; }
.wm-gauges span{ color:#d6e5ff; }
.wm-gauges .bar{
  display:block; height:12px; width:0%;
  border-radius:999px; background:linear-gradient(90deg, #ffd24d, #3aa0ff);
  box-shadow:0 0 12px rgba(255,210,77,.35);
  transition: width 1s ease-out;
}
.in-view .bar.w90{ width:90%; }
.in-view .bar.w88{ width:88%; }
.in-view .bar.w70{ width:70%; }
.in-view .bar.w60{ width:60%; }
.in-view .bar.w55{ width:55%; }

/* изобары — бегущие диагональные линии */
.isobar{
  position:absolute; inset:-10% -5% -5% -5%; pointer-events:none; opacity:.45;
  background: repeating-linear-gradient(115deg, rgba(255,255,255,.08) 0 2px, transparent 2px 14px);
  animation: isoSlide 16s linear infinite;
  filter: blur(.2px);
}
@keyframes isoSlide{ to{ background-position: 0 420px; } }

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

/* ===== 5) Material Stories (text-heavy) ===== */
.material-stories{ padding: clamp(56px, 8vh, 90px) 0; }
.ms-wrap{
  display:grid; gap:20px;
  grid-template-columns: 1.2fr .8fr;
  align-items:start;
}
.ms-copy .sec-lede{ margin-bottom:8px; }
.ms-copy p{ color:#e3ecff; }
.ms-points{ margin:10px 0 0; padding-left:18px; color:#dbe6fb; }
.ms-figs{ display:grid; gap:14px; }
.ms-shot{
  padding:10px; border-radius:16px; text-align:center;
  background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  border:1px solid rgba(255,255,255,.12);
  box-shadow:0 10px 30px rgba(0,0,0,.28);
}
.ms-shot img{ aspect-ratio: 4/3; object-fit:cover; }
.ms-shot figcaption{ margin-top:8px; color:#d6e5ff; font-size:.92rem; }

@media (max-width: 992px){ .ms-wrap{ grid-template-columns: 1fr; } }

/* ===== 6) Carry Systems ===== */
.carry-systems{ padding: clamp(56px, 8vh, 84px) 0; }
.cs-grid{
  display:grid; gap:16px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.cs-card{
  border:1px solid rgba(255,255,255,.12);
  border-radius:16px; padding:12px;
  background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  box-shadow:0 10px 30px rgba(0,0,0,.28);
  transition: transform .25s ease, box-shadow .25s ease;
}
.cs-card:hover{ transform: translateY(-4px); box-shadow:0 16px 40px rgba(0,0,0,.4); }
.cs-fig{ position:relative; border-radius:12px; overflow:hidden; margin:0 0 10px; }
.cs-fig img{ aspect-ratio: 4/3; object-fit:cover; }

/* уникальный «сияющий» ободок при ховере */
.cs-card.ring .cs-fig::after{
  content:""; position:absolute; inset:0; border-radius:12px; pointer-events:none;
  background: conic-gradient(from 0deg, rgba(255,210,77,.35), rgba(58,160,255,.25), rgba(255,210,77,.35));
  opacity:0; transition: opacity .25s ease, transform .25s ease;
  transform: rotate(0deg);
}
.cs-card.ring:hover .cs-fig::after{ opacity:.45; transform: rotate(40deg); }

.cs-name{ margin:0 0 6px; }
.cs-copy{ margin:0; color:#dbe6fb; }

@media (max-width: 992px){ .cs-grid{ grid-template-columns: 1fr; } }
/* ===== 7) Spec Microgrid ===== */
.spec-microgrid{ position:relative; padding: clamp(56px, 8vh, 90px) 0; overflow:hidden; }
.sm-wrap{
  display:grid; gap:18px;
  grid-template-columns: 1.1fr .9fr;
  align-items:start;
}
.spec-grid{
  display:grid; gap:12px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.spec-card{
  position:relative;
  border:1px solid rgba(255,255,255,.12);
  border-radius:16px; padding:12px;
  background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  box-shadow:0 10px 30px rgba(0,0,0,.28);
  overflow:hidden;
}
.spec-card::after{ /* «скан-блик» */
  content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(110deg, transparent 0%, rgba(255,255,255,.18) 50%, transparent 100%);
  transform: translateX(-120%);
  transition: transform .8s ease;
}
.spec-card:hover::after{ transform: translateX(120%); }
.spec-card .dot{
  position:absolute; right:10px; top:10px; width:8px; height:8px; border-radius:50%;
  background:#3aa0ff; box-shadow:0 0 10px rgba(58,160,255,.6);
  animation: dotPulse 2.6s ease-in-out infinite;
}
@keyframes dotPulse{ 50%{ transform: scale(1.25); opacity:.85; } }

.sm-figs{
  display:grid; gap:14px;
}
.sm-shot{
  padding:10px; border-radius:16px; text-align:center;
  background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  border:1px solid rgba(255,255,255,.12);
  box-shadow:0 10px 30px rgba(0,0,0,.28);
}
.sm-shot img{ aspect-ratio: 4/3; object-fit:cover; }
.sm-shot figcaption{ margin-top:8px; color:#d6e5ff; font-size:.92rem; }

/* «чертёжные» линии на фоне */
.blueprint{
  position:absolute; inset:0; pointer-events:none; opacity:.35;
  background:
    repeating-linear-gradient(0deg, rgba(255,255,255,.06) 0 1px, transparent 1px 20px),
    repeating-linear-gradient(90deg, rgba(255,255,255,.06) 0 1px, transparent 1px 20px);
  animation: gridDrift 18s linear infinite;
}
@keyframes gridDrift{ to{ background-position: 0 240px, 240px 0; } }

@media (max-width: 992px){
  .sm-wrap{ grid-template-columns: 1fr; }
  .spec-grid{ grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px){ .spec-grid{ grid-template-columns: 1fr; } }

/* ===== 8) Coastal Salt-Proof ===== */
.coastal-proof{ position:relative; padding: clamp(56px, 8vh, 84px) 0; overflow:hidden; }
.cp-grid{
  display:grid; gap:16px;
  grid-template-columns: 1fr 1fr;
}
.cp-shot{
  padding:10px; border-radius:16px; text-align:center;
  background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  border:1px solid rgba(255,255,255,.12);
  box-shadow:0 10px 30px rgba(0,0,0,.28);
}
.cp-shot img{ aspect-ratio: 4/3; object-fit:cover; }
.cp-shot figcaption{ margin-top:8px; color:#d6e5ff; font-size:.92rem; }

/* «соляное облако» — блёстки */
.salt-cloud{
  position:absolute; inset: -10% -10% -10% -10%; pointer-events:none;
  background:
    radial-gradient(2px 2px at 10% 30%, rgba(255,255,255,.35) 40%, transparent 41%) repeat,
    radial-gradient(2px 2px at 40% 60%, rgba(255,255,255,.25) 40%, transparent 41%) repeat,
    radial-gradient(2px 2px at 80% 20%, rgba(255,255,255,.3) 40%, transparent 41%) repeat;
  background-size: 140px 120px, 160px 140px, 180px 160px;
  filter: blur(.3px);
  animation: saltDrift 22s linear infinite;
  opacity:.35;
}
@keyframes saltDrift{
  0%{ background-position: 0 0, 0 0, 0 0; }
  100%{ background-position: 300px 120px, -260px 140px, 220px -160px; }
}

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

/* ===== 9) Accessories Conveyor ===== */
.acc-conveyor{ padding: clamp(56px, 8vh, 84px) 0; }
.belt{
  border:1px solid rgba(255,255,255,.12);
  border-radius:14px; overflow:hidden;
  background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  box-shadow: inset 0 0 16px rgba(0,0,0,.25);
  margin-bottom:14px;
}
.belt-track{
  display:flex; gap:40px; white-space:nowrap; padding:10px 14px;
  animation: beltMove 18s linear infinite;
  font-weight:600; letter-spacing:.4px; color:#e6f0ff;
}
@keyframes beltMove{ to{ transform: translateX(-50%); } }

.acc-grid{
  display:grid; gap:16px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.acc-card{
  border:1px solid rgba(255,255,255,.12);
  border-radius:16px; padding:12px;
  background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  box-shadow:0 10px 30px rgba(0,0,0,.28);
  transition: transform .25s ease, box-shadow .25s ease;
}
.acc-card:hover{ transform: translateY(-4px); box-shadow:0 16px 40px rgba(0,0,0,.4); }
.acc-fig{ margin:0 0 10px; border-radius:12px; overflow:hidden; }
.acc-fig img{ aspect-ratio: 4/3; object-fit:cover; }
.acc-name{ margin:0 0 6px; }
.acc-copy{ margin:0; color:#dbe6fb; }

@media (max-width: 992px){ .acc-grid{ grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px){ .acc-grid{ grid-template-columns: 1fr; } }
/* ===== 10) Sizing Studio ===== */
.sizing-studio{ padding: clamp(56px, 8vh, 84px) 0; }
.sz-grid{
  display:grid; gap:16px;
  grid-template-columns: 1fr 1fr;
}
.sz-card{
  border:1px solid rgba(255,255,255,.12);
  border-radius:16px; padding:12px;
  background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  box-shadow:0 10px 30px rgba(0,0,0,.28);
  transition: transform .25s ease, box-shadow .25s ease;
}
.sz-card:hover{ transform: translateY(-4px); box-shadow:0 16px 40px rgba(0,0,0,.4); }
.sz-fig{ margin:0 0 10px; }
.sz-fig img{ aspect-ratio:4/3; object-fit:cover; }
.sz-name{ margin:0 0 6px; }
.sz-copy{ margin:6px 0 0; color:#dbe6fb; }

/* анимированная линейка */
.ruler{
  position:relative; height:16px; border-radius:999px; overflow:hidden;
  background:linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
  border:1px solid rgba(255,255,255,.18);
  box-shadow: inset 0 0 12px rgba(0,0,0,.25);
}
.ruler .tick{
  position:absolute; top:0; bottom:0; width:2px; background:rgba(255,255,255,.18);
}
.ruler .tick.t1{ left:25%; } .tick.t2{ left:50%; } .tick.t3{ left:75%; }
.ruler .bar{
  position:absolute; left:0; top:0; bottom:0; width:0%;
  background:linear-gradient(90deg, #ffd24d, #3aa0ff);
  box-shadow:0 0 14px rgba(255,210,77,.35);
  transition: width 1s ease-out;
}
.in-view .ruler .bar.w92{ width:92%; }
.in-view .ruler .bar.w78{ width:78%; }

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

/* ===== 11) Travel Fold (text-heavy) ===== */
.travel-fold{ padding: clamp(56px, 8vh, 92px) 0; position:relative; overflow:hidden; }
.tf-wrap{
  display:grid; gap:20px;
  grid-template-columns: 1.2fr .8fr;
  align-items:start;
}
.tf-copy p{ color:#e3ecff; }
.tf-steps{ margin:10px 0 0; padding-left:18px; color:#dbe6fb; }

/* «дорога» — пунктирная линия с движением */
.path{
  position:relative; margin-top:14px; height:40px; border-radius:999px;
  background:
    repeating-linear-gradient(90deg, rgba(255,255,255,.22) 0 8px, transparent 8px 18px);
  opacity:.35;
  mask: radial-gradient(24px 24px at 10% 50%, #000 98%, transparent 100%),
        radial-gradient(24px 24px at 50% 50%, #000 98%, transparent 100%),
        radial-gradient(24px 24px at 90% 50%, #000 98%, transparent 100%);
  -webkit-mask: radial-gradient(24px 24px at 10% 50%, #000 98%, transparent 100%),
                 radial-gradient(24px 24px at 50% 50%, #000 98%, transparent 100%),
                 radial-gradient(24px 24px at 90% 50%, #000 98%, transparent 100%);
  animation: dashFlow 10s linear infinite;
}
@keyframes dashFlow{ to{ background-position: -300px 0; } }

.tf-figs{
  display:grid; gap:14px; align-content:start;
}
.tf-shot{
  padding:10px; border-radius:16px; text-align:center;
  background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  border:1px solid rgba(255,255,255,.12);
  box-shadow:0 10px 30px rgba(0,0,0,.28);
}
.tf-shot img{ aspect-ratio:4/3; object-fit:cover; }
.tf-shot figcaption{ margin-top:8px; color:#d6e5ff; font-size:.92rem; }

@media (max-width: 992px){ .tf-wrap{ grid-template-columns: 1fr; } }

/* ===== 12) Colorfast Lab ===== */
.colorfast-lab{ padding: clamp(56px, 8vh, 84px) 0; }
.cf-grid{
  display:grid; gap:16px;
  grid-template-columns: 1fr 1fr;
}
.cf-card{
  border:1px solid rgba(255,255,255,.12);
  border-radius:16px; padding:12px;
  background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  box-shadow:0 10px 30px rgba(0,0,0,.28);
  transition: transform .25s ease, box-shadow .25s ease;
}
.cf-card:hover{ transform: translateY(-4px); box-shadow:0 16px 40px rgba(0,0,0,.4); }
.cf-fig{ position:relative; border-radius:12px; overflow:hidden; margin:0 0 10px; }
.cf-fig img{ aspect-ratio:4/3; object-fit:cover; }
.cf-name{ margin:0; }

/* уникальные эффекты */
.cf-card.halo .cf-fig::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background: conic-gradient(from 0deg, rgba(255,210,77,.28), rgba(58,160,255,.22), rgba(255,210,77,.28));
  mix-blend-mode: screen; opacity:.0; transition: opacity .25s ease, transform .8s linear;
}
.cf-card.halo:hover .cf-fig::after{ opacity:.5; transform: rotate(360deg); }

.cf-card.ripple .cf-fig::after{
  content:""; position:absolute; inset:0; pointer-events:none; opacity:0;
  background: radial-gradient(circle at 50% 50%, rgba(255,255,255,.25) 0 2%, transparent 45%);
  transform: scale(.2);
  transition: transform .7s ease, opacity .7s ease;
}
.cf-card.ripple:hover .cf-fig::after{ transform: scale(3.5); opacity:1; }

@media (max-width: 992px){ .cf-grid{ grid-template-columns: 1fr; } }
/* ===== 13) Layer Matrix ===== */
/* ===== 13) Layer Matrix — compact & clean ===== */
.layer-matrix{ padding: clamp(56px, 8vh, 84px) 0; }

.lm-grid{
  display:grid; gap:16px;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  place-items:center;          /* центрируем карточки */
}

.lm-card{
  position:relative; overflow:visible; border-radius:16px; padding:14px;
  border:1px solid rgba(255,255,255,.12);
  background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  box-shadow:0 10px 30px rgba(0,0,0,.28);
  max-width: 480px;            /* больше не растягивается на всю ширину */
  transition: transform .25s ease, box-shadow .25s ease;
}
.lm-card:hover{ transform: translateY(-4px); box-shadow:0 16px 40px rgba(0,0,0,.4); }

.lm-fig{ position:relative; border-radius:12px; overflow:hidden; }
.lm-fig img{
  display:block; width: min(100%, 350px); /* ≤350px как по ТЗ */
  aspect-ratio: 4 / 3; object-fit: cover; border-radius:12px;
  transition: transform .4s ease;
}
.lm-card:hover .lm-fig img{ transform: scale(1.02); }

/* мягкие «дождевые» линии с затуханием краёв */
.lm-bg{
  position:absolute; inset:14px; border-radius:12px; pointer-events:none; opacity:.25;
  background: repeating-linear-gradient(180deg, rgba(255,255,255,.08) 0 2px, transparent 2px 16px);
  mask: linear-gradient(transparent, #000 20% 80%, transparent);
  -webkit-mask: linear-gradient(transparent, #000 20% 80%, transparent);
  animation: lmRain 14s linear infinite;
}
@keyframes lmRain{ to{ background-position: 0 420px; } }

/* бейдж вместо «шторки» */
.lm-mask{
  position:absolute; left:50%; bottom:18px; transform: translate(-50%, 0);
  padding:8px 14px; border-radius:999px; font-weight:700; letter-spacing:.2px;
  color:#f7fbff;
  background:linear-gradient(180deg, rgba(15,24,36,.55), rgba(15,24,36,.25));
  border:1px solid rgba(255,255,255,.25);
  box-shadow: 0 8px 20px rgba(0,0,0,.25), inset 0 0 8px rgba(255,255,255,.06);
  backdrop-filter: blur(4px);
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.lm-card:hover .lm-mask{
  transform: translate(-50%, -2px);
  box-shadow: 0 12px 26px rgba(0,0,0,.34), inset 0 0 10px rgba(255,255,255,.08);
  border-color: rgba(255,210,77,.55);
}

/* тонкое «сияющее» кольцо по периметру карточки при ховере */
.lm-card::after{
  content:""; position:absolute; inset:-1px; border-radius:16px; pointer-events:none;
  background: conic-gradient(from 0deg, rgba(255,210,77,.28), rgba(58,160,255,.22), rgba(255,210,77,.28));
  opacity:0; transform: rotate(0deg);
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude; -webkit-mask-composite: xor;
  padding:2px; filter: blur(.25px);
  transition: opacity .25s ease, transform .8s linear;
}
.lm-card:hover::after{ opacity:.45; transform: rotate(40deg); }

/* адаптив — всё уже «автофит», дополнительных правил не нужно */

/* адаптив */
@media (max-width: 992px){ .lm-grid{ grid-template-columns: 1fr; } }

/* ===== 14) Care Mini ===== */
.care-mini{ padding: clamp(56px, 8vh, 84px) 0; }
.care-wrap{
  display:grid; gap:18px;
  grid-template-columns: 1.1fr .9fr;
  align-items:start;
}
.care-steps{ margin:10px 0 0; padding-left:18px; color:#dbe6fb; }
.care-steps li{ position:relative; }
.care-steps li::marker{ content:"✔ "; color:#ffd24d; }

/* карточки с «бегущим кольцом» */
.care-grid{
  display:grid; gap:16px;
  grid-template-columns: 1fr 1fr;
}
.care-card{
  position:relative; border-radius:16px; padding:12px;
  border:1px solid rgba(255,255,255,.12);
  background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  box-shadow:0 10px 30px rgba(0,0,0,.28);
  transition: transform .25s ease, box-shadow .25s ease;
}
.care-card:hover{ transform: translateY(-4px); box-shadow:0 16px 40px rgba(0,0,0,.4); }
.care-fig{ border-radius:12px; overflow:hidden; margin:0 0 10px; }
.care-fig img{ aspect-ratio: 4/3; object-fit:cover; }
.care-name{ margin:0; }

/* сияющее кольцо */
.care-card.ringlight::after{
  content:""; position:absolute; inset:0; border-radius:16px; pointer-events:none;
  background: conic-gradient(from 0deg, rgba(255,210,77,.35), rgba(58,160,255,.25), rgba(255,210,77,.35));
  padding:2px;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude; -webkit-mask-composite: xor;
  opacity:.0; transition: opacity .25s ease, transform .8s linear;
}
.care-card.ringlight:hover::after{ opacity:.45; transform: rotate(40deg); }

@media (max-width: 992px){
  .care-wrap{ grid-template-columns: 1fr; }
  .care-grid{ grid-template-columns: 1fr; }
}

/* ===== 15) Field Notes ===== */
.field-notes{ padding: clamp(56px, 8vh, 84px) 0; }
.fn-grid{
  display:grid; gap:16px;
  grid-template-columns: 1fr 1fr;
}
.fn-card{
  position:relative; border-radius:16px; padding:12px;
  border:1px solid rgba(255,255,255,.12);
  background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  box-shadow:0 10px 30px rgba(0,0,0,.28);
  overflow:hidden;
}
.fn-fig{ border-radius:12px; overflow:hidden; }
.fn-fig img{ aspect-ratio: 4/3; object-fit:cover; }
.fn-quote{
  margin:10px 0 0; color:#e6f0ff; font-size:1rem; position:relative;
  padding-top:8px;
  background:
    radial-gradient(8px 8px at 0 0, rgba(255,255,255,.35) 40%, transparent 41%) no-repeat;
  background-position: 10px -20px;
  animation: quoteShimmer 3.6s ease-in-out infinite;
}
@keyframes quoteShimmer{
  50%{ background-position: 18px -10px; }
}

/* декоративная капля позади карточки */
.fn-card .drop{
  position:absolute; width:18px; height:18px; left:12px; top:-10px; border-radius:50%;
  background:#ffd24d; filter: blur(.2px);
  animation: dropFall 2.6s linear infinite;
}
@keyframes dropFall{
  0%{ transform: translateY(0) scale(1); opacity:.9; }
  85%{ transform: translateY(120px) scale(.95); opacity:.45; }
  100%{ transform: translateY(120px) scale(0.3); opacity:0; }
}

/* лёгкий подъём всей карточки */
.fn-card.float:hover{ transform: translateY(-4px); transition: transform .25s ease; }

@media (max-width: 992px){ .fn-grid{ grid-template-columns: 1fr; } }
/* ===== 16) Monsoon Set Builder ===== */
.monsoon-set{ position:relative; padding: clamp(56px, 8vh, 96px) 0; overflow:hidden; }
.msb-wrap{ position:relative; }
.msb-copy p{ color:#e3ecff; }
.msb-points{ margin:10px 0 0; padding-left:18px; color:#dbe6fb; }

.msb-grid{
  display:grid; gap:16px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  position:relative;
}
.msb-card{
  position:relative; border-radius:16px; padding:12px;
  border:1px solid rgba(255,255,255,.12);
  background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  box-shadow:0 10px 30px rgba(0,0,0,.28);
  transition: transform .25s ease, box-shadow .25s ease;
}
.msb-card:hover{ transform: translateY(-4px); box-shadow:0 16px 40px rgba(0,0,0,.4); }
.msb-fig{ border-radius:12px; overflow:hidden; margin:0 0 10px; }
.msb-fig img{ width:min(100%, 350px); aspect-ratio:4/3; object-fit:cover; }
.msb-name{ margin:0 0 6px; }
.msb-copy{ margin:0; color:#dbe6fb; }

/* маленький «маяк» на карточке */
.msb-card::after{
  content:""; position:absolute; right:14px; top:14px; width:10px; height:10px; border-radius:50%;
  background:#ffd24d; box-shadow:0 0 0 0 rgba(255,210,77,.55);
  animation: beaconPulse 2.4s ease-out infinite;
}
@keyframes beaconPulse{
  0%{ box-shadow:0 0 0 0 rgba(255,210,77,.55); }
  70%{ box-shadow:0 0 0 12px rgba(255,210,77,0); }
  100%{ box-shadow:0 0 0 0 rgba(255,210,77,0); }
}

/* декоративная «сеть» связей между карточками */
.link-web{
  position:absolute; left:5%; right:5%; bottom:-10px; height:120px; pointer-events:none; opacity:.35;
  background:
    radial-gradient(6px 6px at 20% 40%, rgba(255,255,255,.25) 40%, transparent 41%),
    radial-gradient(6px 6px at 50% 60%, rgba(255,255,255,.25) 40%, transparent 41%),
    radial-gradient(6px 6px at 80% 40%, rgba(255,255,255,.25) 40%, transparent 41%),
    linear-gradient(90deg, rgba(255,255,255,.10), rgba(255,255,255,0));
  background-repeat: no-repeat;
  background-size: 6px 6px, 6px 6px, 6px 6px, 100% 1px;
  background-position: 20% 40%, 50% 60%, 80% 40%, 0 50%;
  animation: webGlow 8s linear infinite;
  filter: blur(.25px);
}
@keyframes webGlow{ 50%{ opacity:.6; } }

@media (max-width: 1024px){ .msb-grid{ grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px){ .msb-grid{ grid-template-columns: 1fr; } }

/* ===== 17) Lookbook Reel ===== */
.lookbook-reel{ padding: clamp(56px, 8vh, 84px) 0; }
.reel-track{
  display:grid; grid-auto-flow: column; gap:14px;
  overflow-x:auto; scroll-snap-type:x mandatory;
  padding-bottom:6px; position:relative; border-radius:14px;
  border:1px solid rgba(255,255,255,.12);
  background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
  box-shadow: inset 0 0 16px rgba(0,0,0,.22);
}
/* «плёнка/зерно» */
.reel-track::after{
  content:""; position:absolute; inset:0; pointer-events:none; opacity:.25;
  background:
    radial-gradient(2px 2px at 10% 20%, rgba(255,255,255,.35) 40%, transparent 41%) repeat,
    radial-gradient(2px 2px at 60% 70%, rgba(255,255,255,.25) 40%, transparent 41%) repeat,
    radial-gradient(2px 2px at 30% 50%, rgba(255,255,255,.3) 40%, transparent 41%) repeat;
  background-size: 140px 120px, 180px 160px, 160px 140px;
  animation: grainDrift 20s linear infinite;
  filter: blur(.35px);
}
@keyframes grainDrift{
  0%{ background-position: 0 0, 0 0, 0 0; }
  100%{ background-position: -220px 160px, 260px -140px, -200px 120px; }
}

.reel-shot{
  scroll-snap-align:start;
  min-width: 300px; border-radius:16px; padding:10px; text-align:center;
  background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  border:1px solid rgba(255,255,255,.12);
  box-shadow:0 10px 30px rgba(0,0,0,.28);
  transition: transform .25s ease, box-shadow .25s ease;
}
.reel-shot:hover{ transform: translateY(-4px); box-shadow:0 16px 40px rgba(0,0,0,.4); }
.reel-shot img{ width:min(100%, 350px); aspect-ratio:4/3; object-fit:cover; border-radius:10px; }
.reel-shot figcaption{ margin-top:8px; color:#d6e5ff; font-size:.92rem; }

/* лёгкий «наклон» на hover */
.tilt:hover{ transform: rotate(1.5deg) translateY(-4px); }
/* ===== 18) Monsoon Care Handbook (text-heavy) ===== */
.care-handbook{ position:relative; padding: clamp(56px, 8vh, 100px) 0; overflow:hidden; }
.ch-wrap{
  display:grid; gap:20px;
  grid-template-columns: 1.3fr .7fr;
  align-items:start;
}
.ch-copy p{ color:#e3ecff; }
.ch-list{ margin:10px 0 0; padding-left:18px; color:#dbe6fb; }
.ch-list li + li{ margin-top:6px; }

/* заголовок «рисует» подчеркивание при появлении */
.ch-copy .sec-title{ position:relative; }
.ch-copy .sec-title::after{
  content:""; display:block; height:2px; width:0;
  background: linear-gradient(90deg, #ffd24d, #3aa0ff);
  box-shadow:0 0 10px rgba(255,210,77,.35);
  margin-top:6px; transition: width 1.2s ease;
}
.ch-copy.in-view .sec-title::after{ width:140px; }

/* заметка-«капля» сбоку текста */
.note-drop{
  position:relative; display:inline-block; margin-top:12px; padding:6px 10px 6px 28px;
  border-radius:10px; font-weight:700; letter-spacing:.2px; color:#0a0f16;
  background:linear-gradient(180deg, #ffd24d, #ffb703);
  border:1px solid rgba(255,210,77,.55);
  box-shadow:0 10px 24px rgba(255,210,77,.35);
}
.note-drop::before{
  content:""; position:absolute; left:8px; top:50%; width:12px; height:12px; border-radius:50%;
  background:#fff3c2; transform: translateY(-50%);
  box-shadow:0 0 0 0 rgba(255,210,77,.55);
  animation: beaconPulse 2.2s ease-out infinite;
}
@keyframes beaconPulse{
  0%{ box-shadow:0 0 0 0 rgba(255,210,77,.55); }
  70%{ box-shadow:0 0 0 12px rgba(255,210,77,0); }
  100%{ box-shadow:0 0 0 0 rgba(255,210,77,0); }
}

/* изображения и карточки */
.ch-figs{ display:grid; gap:14px; }
.ch-shot{
  padding:10px; border-radius:16px; text-align:center;
  background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  border:1px solid rgba(255,255,255,.12);
  box-shadow:0 10px 30px rgba(0,0,0,.28);
  transition: transform .25s ease, box-shadow .25s ease;
}
.ch-shot:hover{ transform: translateY(-4px); box-shadow:0 16px 40px rgba(0,0,0,.4); }
.ch-shot img{ width:min(100%, 350px); aspect-ratio: 4/3; object-fit: cover; }
.ch-shot figcaption{ margin-top:8px; color:#d6e5ff; font-size:.92rem; }

/* мягкие «линии справочника» на фоне секции */
.handbook-lines{
  position:absolute; inset: -8% -4% -6% -4%; pointer-events:none; opacity:.35;
  background:
    repeating-linear-gradient(0deg, rgba(255,255,255,.06) 0 1px, transparent 1px 20px),
    repeating-linear-gradient(90deg, rgba(255,255,255,.06) 0 1px, transparent 1px 20px);
  animation: gridDrift2 20s linear infinite;
  filter: blur(.2px);
}
@keyframes gridDrift2{ to{ background-position: 0 280px, 280px 0; } }

@media (max-width: 1024px){ .ch-wrap{ grid-template-columns: 1fr; } }