/* ===== Rainfield Hero Section ===== */
.hero-rainfield{
  position:relative;
  isolation:isolate;
  padding: clamp(64px, 8vh, 96px) 0;
  overflow:hidden;
}

/* Animated rain overlay */
.hero-rainfield .rain{
  position:absolute; inset:0; z-index:-1; pointer-events:none; opacity:.45;
  background:
    repeating-linear-gradient(180deg, rgba(255,255,255,.06) 0 2px, transparent 2px 16px),
    radial-gradient(1200px 800px at 70% -20%, rgba(58,160,255,.18), transparent 60%),
    radial-gradient(900px 600px at -10% 120%, rgba(255,210,77,.08), transparent 60%),
    linear-gradient(180deg, #0f1824, #0a121b 80%);
  animation: rainShift 12s linear infinite;
}
@keyframes rainShift{
  0%{ background-position:0 0, 0 0, 0 0, 0 0; }
  100%{ background-position:0 800px, 0 0, 0 0, 0 0; }
}

.hero-wrap{
  display:grid; gap: clamp(20px, 4vw, 36px);
  grid-template-columns: 1.15fr .85fr;
  align-items:center;
}

.hero-copy .hero-title{
  margin:0 0 10px;
  font-size:clamp(28px, 5vw, 48px);
  line-height:1.1;
  letter-spacing:.2px;
}
.hero-copy .hero-lede{
  margin:0 0 18px; color:#dbe6fb; max-width:60ch;
}

/* ===== Ticker (fixed) ===== */
.ticker{
  --h: 38px;
  --fade: 42px;       /* ширина затуханий по краям */
  --speed: 26s;       /* скорость ленты */
  position: relative;
  height: var(--h);
  overflow: hidden;
  border-radius: 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 4px 18px rgba(0,0,0,.25);

  /* ключевое: ограничиваем ширину и "отвязываем" от правой стены */
  width: min(100%, 720px);
  margin: 14px auto 20px 0;  /* top | right(auto) | bottom | left(0) => прижимается влево */
}

.ticker-track{
  display: flex;
  align-items: center;
  width: max-content;           /* ширина по содержимому */
  gap: 0;                       /* важно: без gap для точного -50% */
  position: absolute;
  inset: 0 auto 0 0;            /* стартуем от левого края */
  animation: tickerMove var(--speed) linear infinite;
  will-change: transform;
}

.ticker .slide{
  white-space: nowrap;
  padding: 8px 16px;            /* горизонтальные отступы между повторениями */
  color: #e9f2ff;
}

/* мягкие маски по краям */
.ticker::before,
.ticker::after{
  content: "";
  position: absolute;
  top: 0; bottom: 0;
  width: var(--fade);
  pointer-events: none;
}
.ticker::before{
  left: 0;
  background: linear-gradient(90deg, #0e1722, rgba(14,23,34,0));
}
.ticker::after{
  right: 0;
  background: linear-gradient(-90deg, #0e1722, rgba(14,23,34,0));
}

/* бесшовное движение: два одинаковых span -> -50% */
@keyframes tickerMove{
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

@media (max-width: 480px){
  .ticker{ width: min(100%, 100%); }    /* на очень узких экранах пусть занимает всю доступную ширину колонки */
}

/* Уважение предпочтений по снижению анимаций */
@media (prefers-reduced-motion: reduce){
  .ticker-track{ animation-duration: .01ms; }
}


.hero-cta{ display:flex; gap:12px; flex-wrap:wrap; }

/* Gallery mosaic (all images <= 350px by global rule) */
.hero-gallery{
  display:grid; gap:14px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-content:start;
}
.shot{
  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);
  transition: transform .25s ease, box-shadow .25s ease, background .25s ease;
}
.shot:hover{
  transform:translateY(-4px);
  box-shadow:0 16px 40px rgba(0,0,0,.4);
  background:linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.03));
}
.shot img{ aspect-ratio: 4 / 5; object-fit:cover; }
.shot figcaption{
  margin-top:8px; font-size:.92rem; color:#d6e5ff; text-align:center;
}

.shot.small img{ aspect-ratio:4 / 5; }
.tilt-l{ transform:rotate(-2.5deg); }
.tilt-r{ transform:rotate(2.5deg); }
.float-y{ animation: bob 5.2s ease-in-out infinite; }
@keyframes bob{
  0%,100%{ transform:translateY(0); }
  50%{ transform:translateY(-8px); }
}

/* ===== Responsiveness (media queries for all devices) ===== */
@media (max-width: 1200px){
  .hero-wrap{ grid-template-columns: 1.1fr .9fr; }
}

@media (max-width: 992px){
  .hero-wrap{ grid-template-columns: 1fr; }
  .hero-gallery{
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  /* Keep hero text first on mobile per requirement */
  .hero-copy{ order: -1; }
}

@media (max-width: 768px){
  :root{ --header-h:58px; }
  .hero-gallery{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .shot{ padding:8px; border-radius:14px; }
}

@media (max-width: 600px){
  .ticker{ --h:36px; }
  .hero-gallery{
    grid-template-columns: 1fr 1fr;
  }
}

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

@media (max-width: 360px){
  .btn-primary, .btn-ghost{ width:100%; text-align:center; }
  .ticker p{ animation-duration: 30s; }
}
/* ===== Section headers ===== */
.sec-head{ margin-bottom: 16px; }
.sec-title{ margin:0 0 6px; font-size: clamp(22px, 3.6vw, 34px); }
.sec-lede{ margin:0; color:#dbe6fb; }

/* ===== 2) Monsoon Materials ===== */
.materials-lab{ padding: clamp(56px, 8vh, 80px) 0; position:relative; }
.ms-cards{
  display:grid; gap:16px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.ms-card{
  border:1px solid rgba(255,255,255,.12);
  border-radius:16px; overflow:hidden;
  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;
}
.ms-card:hover{ transform: translateY(-4px); box-shadow:0 16px 40px rgba(0,0,0,.4); }
.ms-fig{ padding:10px; }
.ms-fig img{ aspect-ratio: 4/3; object-fit:cover; }
.ms-body{ padding:10px 12px 14px; }
.ms-name{ margin:6px 0 6px; font-size:1.05rem; }
.ms-copy{ margin:0 0 8px; color:#e3ecff; }
.ms-bullets{ margin:0; padding:0; list-style:none; display:flex; gap:10px; flex-wrap:wrap; }
.tag{
  display:inline-block; padding:4px 8px; border-radius:999px;
  background:linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.03));
  border:1px solid rgba(255,255,255,.18);
}

/* ===== 3) Wind & Water Tests ===== */
.lab-tests{ padding: clamp(56px, 8vh, 84px) 0; }
.tests-wrap{
  display:grid; gap:22px;
  grid-template-columns: 1.1fr .9fr;
  align-items:start;
}
.meters{ list-style:none; margin:16px 0 0; padding:0; display:grid; gap:12px; }
.meter .label{ display:block; margin-bottom:6px; color:#d6e5ff; }
.meter .bar{
  display:block; height:12px; border-radius:999px; overflow:hidden;
  background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.18);
}
.meter .fill{
  display:block; height:100%; width:0%;
  background:linear-gradient(90deg, #ffd24d, #ffb703);
  box-shadow:0 0 10px rgba(255, 209, 72, .35);
  transition: width 1.2s ease-out;
}
.in-view .fill.p90{ width:90%; }
.in-view .fill.p85{ width:85%; }
.in-view .fill.p75{ width:75%; }

.tests-figs{ display:grid; gap:16px; align-content:start; }
.tshot{
  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);
  text-align:center;
}
.tshot img{ aspect-ratio: 4/3; object-fit:cover; }
.tshot figcaption{ margin-top:8px; color:#d6e5ff; font-size:.92rem; opacity:.9; }
.tshot.lift:hover{ transform: translateY(-4px); transition: transform .25s ease; }
.tshot.tilt:hover{ transform: rotate(1.5deg); transition: transform .25s ease; }

/* ===== 4) City Carry (scroll-snap) ===== */
.city-carry{ padding: clamp(56px, 8vh, 80px) 0; }
.carry-track{
  display:grid; grid-auto-flow:column; gap:14px;
  overflow-x:auto; scroll-snap-type: x mandatory;
  padding-bottom:6px;
}
.carry-card{
  scroll-snap-align:start;
  min-width: 300px;
  border-radius:16px; padding:12px;
  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: box-shadow .25s ease, transform .25s ease;
}
.carry-card:hover{ transform: translateY(-4px); box-shadow:0 16px 40px rgba(0,0,0,.4); }
.carry-card figure{ margin:0 0 10px; }
.carry-card img{ aspect-ratio: 4/5; object-fit:cover; }
.carry-name{ margin:0 0 6px; font-size:1.05rem; }
.carry-copy{ margin:0; color:#e3ecff; }

/* ===== Reveal on scroll (CSS part) ===== */
[data-reveal]{ opacity:0; transform: translateY(14px) scale(.98); transition: opacity .6s ease, transform .6s cubic-bezier(.2,.6,.2,1); }
.in-view[data-reveal]{ opacity:1; transform:none; }

/* ===== Responsiveness for sections 2-4 ===== */
@media (max-width: 1024px){
  .ms-cards{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tests-wrap{ grid-template-columns: 1fr; }
}
@media (max-width: 640px){
  .ms-cards{ grid-template-columns: 1fr; }
  .carry-card{ min-width: 260px; }
}
/* ===== 5) Design Timeline ===== */
.design-timeline{ padding: clamp(56px, 8vh, 84px) 0; }
.dt-flow{
  height: 4px; border-radius: 999px; overflow: hidden;
  background: rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.14);
  margin: 8px 0 18px;
}
.dt-flow .bar{
  display:block; height:100%; width:0%;
  background: linear-gradient(90deg, #ffd24d, #3aa0ff);
  box-shadow: 0 0 16px rgba(255,210,77,.45);
  transition: width 1.6s ease;
}
.in-view.dt-flow .bar{ width:100%; }

.dt-steps{
  display:grid; gap:16px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.dt-step{
  border:1px solid rgba(255,255,255,.12);
  border-radius:16px; overflow:hidden;
  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;
}
.dt-step:hover{ transform: translateY(-4px); box-shadow:0 16px 40px rgba(0,0,0,.4); }
.dt-fig{ padding:10px; }
.dt-fig img{ aspect-ratio: 4/3; object-fit: cover; }
.dt-name{ margin:8px 12px 4px; }
.dt-copy{ margin:0 12px 14px; color:#e3ecff; }

/* ===== 6) Monsoon Guide (text heavy) ===== */
.monsoon-guide{ padding: clamp(56px, 8vh, 88px) 0; }
.guide-wrap{
  display:grid; gap:20px;
  grid-template-columns: 1.2fr .8fr;
}
.guide-lead{ color:#dbe6fb; }
.tip{ margin:10px 0 0; border:1px solid rgba(255,255,255,.12); border-radius:12px; padding:8px 10px; }
.tip > summary{ cursor:pointer; font-weight:600; }
.tip[open]{ background:rgba(255,255,255,.05); }

.guide-aside{ display:grid; gap:14px; align-content:start; }
.gshot{
  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);
  text-align:center;
}
.gshot img{ aspect-ratio: 4/3; object-fit:cover; }
.gshot figcaption{ margin-top:8px; font-size:.92rem; color:#d6e5ff; }

/* ===== 7) Shade Selector ===== */
.shade-selector{ padding: clamp(56px, 8vh, 84px) 0; }
.shade-grid{
  display:grid; gap:16px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.shade-card{
  border:1px solid rgba(255,255,255,.12);
  border-radius:16px; padding:12px; overflow:hidden;
  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;
}
.shade-card:hover{ transform: translateY(-4px); box-shadow:0 16px 40px rgba(0,0,0,.4); }
.shade-card figure{ margin:0 0 10px; }
.shade-card img{ aspect-ratio: 1 / 1; object-fit:cover; }
.shade-name{ margin:0 0 6px; }
.chips{ list-style:none; margin:0; padding:0; display:flex; gap:8px; flex-wrap:wrap; }
.chip{
  padding:4px 8px; border-radius:999px;
  background:linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.03));
  border:1px solid rgba(255,255,255,.18);
}

/* ===== Responsive for 5–7 ===== */
@media (max-width: 1024px){
  .dt-steps{ grid-template-columns: 1fr 1fr; }
  .guide-wrap{ grid-template-columns: 1fr; }
  .shade-grid{ grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px){
  .dt-steps{ grid-template-columns: 1fr; }
  .shade-grid{ grid-template-columns: 1fr; }
}
/* ===== 8) Ripple Gallery ===== */
.ripple-gallery{ padding: clamp(56px, 8vh, 84px) 0; }
.rg-grid{
  display:grid; gap:16px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.rg-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;
}
.rg-card:hover{ transform: translateY(-4px); box-shadow:0 16px 40px rgba(0,0,0,.4); }
.rg-media{ position:relative; overflow:hidden; border-radius:12px; }
.rg-media img{ aspect-ratio: 4/3; object-fit:cover; }

/* ripple from center */
.rg-media::after{
  content:""; position:absolute; inset:0;
  background: radial-gradient(circle at 50% 50%, rgba(255,255,255,.25) 0 2%, rgba(255,255,255,0) 45%);
  transform: scale(0.2); opacity:0;
  transition: transform .7s ease, opacity .7s ease;
}
.rg-card:hover .rg-media::after{ transform: scale(3.5); opacity:1; }

.rg-name{ margin:10px 2px 0; }

/* ===== 9) City Signals ===== */
.city-signals{ padding: clamp(56px, 8vh, 84px) 0; }
.cs-cards{
  display:grid; gap:16px; margin-bottom:12px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.cs-card{
  position:relative; border-radius:16px; overflow:hidden; padding:10px;
  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);
  text-align:center;
}
.cs-card img{ aspect-ratio: 4/3; object-fit:cover; border-radius:10px; }
.cs-card figcaption{ margin-top:8px; color:#d6e5ff; }

/* drizzle overlay on image only */
.cs-card::before{
  content:""; position:absolute; left:10px; right:10px; top:10px; bottom:46px;
  border-radius:10px; pointer-events:none; opacity:.5;
  background:
    repeating-linear-gradient(180deg, rgba(255,255,255,.08) 0 2px, transparent 2px 16px);
  background-position: 0 -200px;
  animation: csDrizzle 10s linear infinite;
  filter: blur(.2px);
}
@keyframes csDrizzle{
  to{ background-position: 0 400px; }
}

/* pulsing beacons */
.beacon{
  position:absolute; width:12px; height:12px; right:18px; top:18px; 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); }
}

/* city chips with live dot */
.cs-chips{
  list-style:none; margin:0; padding:0;
  display:flex; gap:10px; flex-wrap:wrap;
}
.cs-chips .chip{
  padding:6px 10px; border-radius:999px;
  background:linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.03));
  border:1px solid rgba(255,255,255,.18);
}
.cs-chips .dot{
  display:inline-block; width:8px; height:8px; margin-right:6px; border-radius:50%;
  background:#3aa0ff; box-shadow:0 0 8px rgba(58,160,255,.6);
}

/* ===== 10) Mechanics Trio ===== */
.mechanics-trio{ padding: clamp(56px, 8vh, 84px) 0; }
.mech-grid{
  display:grid; gap:16px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.mech-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;
}
.mech-card:hover{ transform: translateY(-4px); box-shadow:0 16px 40px rgba(0,0,0,.4); }
.mech-fig{ position:relative; border-radius:12px; overflow:hidden; margin-bottom:10px; }
.mech-fig img{ aspect-ratio: 4/3; object-fit:cover; }

/* unique hovers */
.mech-fig.sweep::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background: linear-gradient(110deg, rgba(255,255,255,.0) 0%, rgba(255,255,255,.18) 50%, rgba(255,255,255,0) 100%);
  transform: translateX(-120%); 
}
.mech-card:hover .mech-fig.sweep::after{ 
  animation: sweepMove 1.2s ease forwards; 
}
@keyframes sweepMove{ to{ transform: translateX(120%); } }

.mech-fig.spin img{ transition: transform .8s cubic-bezier(.2,.7,.2,1); }
.mech-card:hover .mech-fig.spin img{ transform: rotate(-3deg) scale(1.04); }

.mech-fig.sheen::after{
  content:""; position:absolute; inset:0; 
  background: radial-gradient(600px 300px at -20% 120%, rgba(255,210,77,.15), transparent 60%);
  opacity:0; transition: opacity .4s ease;
}
.mech-card:hover .mech-fig.sheen::after{ opacity:1; }

/* ===== Responsive for 8–10 ===== */
@media (max-width: 1024px){
  .rg-grid{ grid-template-columns: 1fr 1fr; }
  .cs-cards{ grid-template-columns: 1fr; }
  .mech-grid{ grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px){
  .rg-grid{ grid-template-columns: 1fr; }
  .mech-grid{ grid-template-columns: 1fr; }
}
/* ===== 11) Monsoon Compass ===== */
.monsoon-compass{ padding: clamp(56px, 8vh, 84px) 0; }

.mc-wrap{
  display:grid; gap:22px;
  grid-template-columns: .9fr 1.1fr;
  align-items:center;
}

.mc-visual{ text-align:center; }
.compass{
  position:relative; width:220px; aspect-ratio:1 / 1;
  margin:0 auto 12px; border-radius:50%; overflow:hidden;
  background:
    radial-gradient(120px 120px at 50% 50%, rgba(58,160,255,.12), transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  box-shadow:
    inset 0 0 24px rgba(0,0,0,.35),
    0 10px 30px rgba(0,0,0,.28);
  border:1px solid rgba(255,255,255,.12);
}
.compass .ring{
  position:absolute; inset:8px; border-radius:50%;
  border:1px solid rgba(255,255,255,.18);
  box-shadow: inset 0 0 20px rgba(255,255,255,.05);
}

/* «Дождевые изобары» внутри круга */
.compass .drizzle{
  position:absolute; inset:-40%; border-radius:50%; pointer-events:none;
  background: repeating-linear-gradient(115deg,
              rgba(255,255,255,.10) 0 2px, transparent 2px 12px);
  animation: rainSlide 18s linear infinite;
  filter: blur(.2px);
}
@keyframes rainSlide{ to{ transform: translateY(260px); } }

/* Стрелка компаса */
.compass .needle{
  position:absolute; left:50%; top:50%;
  width:2px; height:38%; background: var(--accent);
  transform-origin: 50% 85%;
  transform: translate(-50%,-85%) rotate(0deg);
  border-radius:2px; box-shadow:0 0 10px rgba(255,210,77,.55);
  animation: spin 12s linear infinite;
}
.compass .needle::after{
  content:""; position:absolute; left:50%; bottom:-12px; translate:-50% 0;
  width:10px; height:10px; border-radius:50%;
  background: var(--accent); box-shadow:0 0 8px rgba(255,210,77,.55);
}
@keyframes spin{ to{ transform: translate(-50%,-85%) rotate(360deg); } }

.mc-note{ margin:0; color:#dbe6fb; }

/* Снимки карт */
.mc-pics{ display:grid; gap:14px; grid-template-columns: 1fr 1fr; }
.mc-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;
}
.mc-shot:hover{ transform: translateY(-4px); box-shadow:0 16px 40px rgba(0,0,0,.4); }
.mc-shot img{ aspect-ratio: 4/3; object-fit: cover; }
.mc-shot figcaption{ margin-top:8px; color:#d6e5ff; font-size:.92rem; }

/* Адаптив */
@media (max-width: 1024px){
  .mc-wrap{ grid-template-columns: 1fr; }
}
@media (max-width: 560px){
  .mc-pics{ grid-template-columns: 1fr; }
}
/* ===== 12) Repair Kiosk ===== */
.repair-kiosk{ padding: clamp(56px, 8vh, 84px) 0; }
.rk-grid{
  display:grid; gap:16px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.rk-card{ perspective:1000px; }
.rk-inner{
  position:relative; border-radius:16px; transform-style:preserve-3d;
  transition: transform .8s cubic-bezier(.2,.7,.2,1);
  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);
  padding:10px;
}
.rk-card:hover .rk-inner{ transform: rotateY(180deg); }

.rk-face{ backface-visibility:hidden; }
.rk-front figure{ margin:0 0 10px; }
.rk-front img{ aspect-ratio: 4/3; object-fit:cover; border-radius:12px; }
.rk-back{
  position:absolute; inset:0; padding:12px; border-radius:16px;
  transform: rotateY(180deg);
  display:flex; flex-direction:column; justify-content:center;
}
.rk-name{ margin:0; }
.rk-list{ margin:8px 0 0; padding-left:18px; color:#e3ecff; }

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

/* ===== 13) Ethics & Sourcing ===== */
.ethics{ padding: clamp(56px, 8vh, 84px) 0; }
.ethics-wrap{ display:grid; gap:20px; grid-template-columns: 1.2fr .8fr; align-items:start; }
.eth-list{
  margin:10px 0 0; padding:0; list-style:none;
  counter-reset: droplet;
}
.eth-list li{
  position:relative; padding-left:28px; margin:10px 0; color:#e3ecff;
}
.eth-list li::before{
  counter-increment:droplet;
  content: ""; position:absolute; left:0; top:.3em; width:14px; height:14px; border-radius:50%;
  background:#3aa0ff; box-shadow:0 0 10px rgba(58,160,255,.7);
  animation: dropPulse 2.6s ease-in-out infinite;
}
@keyframes dropPulse{
  0%,100%{ transform: scale(1); opacity:1; }
  50%{ transform: scale(1.25); opacity:.85; }
}
.eth-aside .eth-fig{
  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);
}
.eth-fig img{ aspect-ratio: 4/3; object-fit:cover; }
.eth-fig figcaption{ margin-top:8px; color:#d6e5ff; font-size:.92rem; }

@media (max-width: 1024px){
  .ethics-wrap{ grid-template-columns: 1fr; }
}
/* ===== 14) Contact Form ===== */
.contact-form{
  position: relative;
  padding: clamp(56px, 8vh, 90px) 0;
  isolation: isolate;
}

/* лёгкий «дождик» фоном */
.contact-form::before{
  content:"";
  position:absolute; inset:0; z-index:-1; pointer-events:none; opacity:.45;
  background:
    repeating-linear-gradient(180deg, rgba(255,255,255,.06) 0 2px, transparent 2px 16px),
    radial-gradient(900px 600px at 110% -20%, rgba(58,160,255,.16), transparent 60%),
    radial-gradient(800px 500px at -20% 120%, rgba(255,210,77,.10), transparent 60%);
  animation: cfRain 14s linear infinite;
  filter: blur(.15px);
}
@keyframes cfRain{
  to{ background-position:0 800px, 0 0, 0 0; }
}

.contact-header{
  max-width: 70ch;
  margin-bottom: 18px;
}
.contact-header h2{ margin:0 0 6px; font-size: clamp(24px, 3.8vw, 36px); }
.contact-header p{ margin:0; color:#dbe6fb; }

/* карточка формы */
.form-wrapper{
  border:1px solid rgba(255,255,255,.12);
  border-radius:18px;
  background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  box-shadow:0 12px 34px rgba(0,0,0,.28);
  padding:14px;
}

.form-grid{
  display:grid; gap:12px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items:start;
}

.field{ display:block; }
.field-wide{ grid-column: 1 / -1; }

input, textarea{
  width:100%;
  color:#e6f0ff;
  background:linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
  border:1px solid rgba(255,255,255,.18);
  border-radius:14px;
  padding:12px 14px;
  outline:none;
  transition:border-color .2s ease, box-shadow .2s ease, transform .05s ease;
}
textarea{ min-height:132px; resize:vertical; }

input::placeholder, textarea::placeholder{ color:#cfe0ff; opacity:.85; }

input:focus-visible, textarea:focus-visible{
  border-color: rgba(255,210,77,.55);
  box-shadow: 0 0 0 3px rgba(255,210,77,.25);
}

/* чекбокс со своим видом */
.form-checkbox{
  display:flex; align-items:center; gap:10px;
  padding:10px 12px;
  border:1px solid rgba(255,255,255,.18);
  border-radius:14px;
  background:linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
}
.form-checkbox input{
  width:18px; height:18px; border-radius:4px; accent-color:#ffcc33;
}
.form-checkbox a{ color:#e6f0ff; text-decoration:underline; }

/* кнопка */
.cta-button{
  grid-column: 1 / -1;
  justify-self: start;
  display:inline-block;
  padding:12px 18px;
  border-radius:14px;
  font-weight:600;
  color:#0a0f16;
  background:linear-gradient(180deg, #ffd24d, #ffb703);
  border:1px solid rgba(255,210,77,.55);
  box-shadow:0 12px 28px rgba(255,210,77,.35);
  transition: transform .12s ease, box-shadow .12s ease;
}
.cta-button:hover{ transform: translateY(-1px); box-shadow:0 16px 36px rgba(255,210,77,.45); }
.cta-button:active{ transform: translateY(0); }

/* аккуратное появление */
.animate-on-scroll[data-reveal], .contact-header[data-reveal], .form-wrapper[data-reveal]{
  opacity:0; transform: translateY(12px) scale(.98);
  transition: opacity .6s ease, transform .6s cubic-bezier(.2,.6,.2,1);
}
.in-view[data-reveal]{ opacity:1; transform:none; }

/* адаптив */
@media (max-width: 860px){
  .form-grid{ grid-template-columns: 1fr; }
  .cta-button{ width:100%; text-align:center; justify-self: stretch; }
}

/* утилита для скрытых меток */
.vh{
  position:absolute !important; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}
/* ===== 15) Store Locator ===== */
.store-locator{ padding: clamp(56px, 8vh, 84px) 0; }
.sl-wrap{
  display:grid; gap:20px;
  grid-template-columns: 1.1fr .9fr; /* карта + карточки */
  align-items:center;
}

/* Мини-карта с «дождевыми» полосами и пульсирующими пинами */
.sl-map{
  position:relative; aspect-ratio: 4/3; border-radius:18px; overflow:hidden;
  border:1px solid rgba(255,255,255,.12);
  background:
    radial-gradient(900px 400px at 0% 110%, rgba(58,160,255,.15), transparent 60%),
    radial-gradient(700px 300px at 110% -10%, rgba(255,210,77,.12), transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  box-shadow:0 12px 34px rgba(0,0,0,.28), inset 0 0 20px rgba(0,0,0,.25);
}
.sl-map::after{
  content:""; position:absolute; inset:0; pointer-events:none; opacity:.45;
  background: repeating-linear-gradient(120deg, rgba(255,255,255,.08) 0 2px, transparent 2px 14px);
  animation: slRain 18s linear infinite;
  filter: blur(.15px);
}
@keyframes slRain{ to{ background-position: 0 320px; } }

.pin{ position:absolute; }
.pin span{
  display:block; width:12px; height:12px; border-radius:50%;
  background: var(--accent);
  box-shadow:0 0 0 0 rgba(255,210,77,.55);
  animation: pinPulse 2.2s ease-out infinite;
}
@keyframes pinPulse{
  0%{ box-shadow:0 0 0 0 rgba(255,210,77,.55); transform: translateY(0); }
  50%{ box-shadow:0 0 0 12px rgba(255,210,77,0); transform: translateY(-2px); }
  100%{ box-shadow:0 0 0 0 rgba(255,210,77,0); transform: translateY(0); }
}
/* Позиции «городов» */
.pin.p1{ left:18%; top:38%; }
.pin.p2{ left:44%; top:52%; }
.pin.p3{ left:66%; top:35%; }
.pin.p4{ left:72%; top:60%; }

/* Правый столбец */
.sl-side .sl-track{
  display:grid; grid-auto-flow: column; gap:14px; overflow-x:auto; scroll-snap-type: x mandatory; padding-bottom:6px;
}
.sl-card{
  scroll-snap-align: start;
  min-width: 300px; border-radius:16px; padding:12px;
  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;
}
.sl-card:hover{ transform: translateY(-4px); box-shadow:0 16px 40px rgba(0,0,0,.4); }
.sl-card figure{ margin:0 0 8px; }
.sl-card img{ aspect-ratio: 4/3; object-fit: cover; }
.sl-name{ margin:0 0 4px; }
.sl-copy{ margin:0; color:#dbe6fb; }

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

/* ===== 16) Rain Warranty ===== */
.rain-warranty{ padding: clamp(56px, 8vh, 84px) 0; }
.rw-wrap{
  display:grid; gap:20px; align-items:center;
  grid-template-columns: .9fr 1.1fr;
}
.rw-seal{
  margin:0; padding:12px; border-radius:18px; text-align:center; position:relative; overflow:hidden;
  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 12px 34px rgba(0,0,0,.28);
}
.rw-seal img{ aspect-ratio: 1 / 1; object-fit: cover; border-radius:12px; }

/* «сияющий» бордер по окружности */
.rw-seal::after{
  content:""; position:absolute; inset:0; border-radius:18px; pointer-events:none;
  background: conic-gradient(from 0deg, rgba(255,210,77,.35), rgba(58,160,255,.25), rgba(255,210,77,.35));
  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; opacity:.45; filter: blur(.3px);
  animation: ringSpin 8s linear infinite;
}
@keyframes ringSpin{ to{ transform: rotate(360deg); } }

.rw-copy .sec-title{ margin:0 0 6px; }
.rw-list{ margin:10px 0 0; padding-left:18px; color:#e3ecff; }
.rw-faq{ margin-top:12px; border:1px solid rgba(255,255,255,.18); border-radius:12px; padding:8px 10px; }
.rw-faq[open]{ background:rgba(255,255,255,.05); }

@media (max-width: 1024px){
  .rw-wrap{ grid-template-columns: 1fr; }
}
/* ===== Monsoon Design Ethos (text-heavy) ===== */
.monsoon-ethos{ position:relative; padding: clamp(56px, 8vh, 100px) 0; overflow:hidden; }
.me-wrap{
  display:grid; gap:20px;
  grid-template-columns: 1.3fr .7fr;
  align-items:start;
}

/* текст */
.me-copy p{ color:#e3ecff; }
.me-list{ margin:10px 0 0; padding-left:18px; color:#dbe6fb; }
.me-list li + li{ margin-top:6px; }

/* рисующееся подчёркивание заголовка при появлении */
.monsoon-ethos .sec-title{ position:relative; }
.monsoon-ethos .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;
}
.in-view .sec-title::after{ width:160px; }

/* цитата с мягкой подсветкой */
.me-quote{
  margin:12px 0 0; font-weight:600; color:#0a0f16;
  padding:8px 10px; border-radius:12px;
  background:linear-gradient(180deg, #ffd24d, #ffb703);
  border:1px solid rgba(255,210,77,.55);
  box-shadow:0 10px 24px rgba(255,210,77,.35);
}

/* изображение (≤350px) */
.me-fig{ 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;
}
.me-fig:hover{ transform: translateY(-4px); box-shadow:0 16px 40px rgba(0,0,0,.4); }
.me-fig img{ width:min(100%, 350px); aspect-ratio: 4/3; object-fit: cover; }
.me-fig figcaption{ margin-top:8px; color:#d6e5ff; font-size:.92rem; }

/* фоновые «линейки» справочника */
.me-guides{
  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: meGridDrift 20s linear infinite;
  filter: blur(.2px);
}
@keyframes meGridDrift{ to{ background-position: 0 280px, 280px 0; } }

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