/* ============================================================
   SAKURA GOLD — landing styles
   Built from real design assets (Исходники: fonts, icons, product
   photography, UI kit reference) supplied by the client.
   ============================================================ */

@font-face{ font-family:'Lato'; src:url('../fonts/Lato-Regular.ttf') format('truetype'); font-weight:400; font-style:normal; font-display:swap; }
@font-face{ font-family:'Lato'; src:url('../fonts/Lato-Italic.ttf') format('truetype'); font-weight:400; font-style:italic; font-display:swap; }
@font-face{ font-family:'Lato'; src:url('../fonts/Lato-Bold.ttf') format('truetype'); font-weight:700; font-style:normal; font-display:swap; }
@font-face{ font-family:'Mabry Pro'; src:url('../fonts/MabryPro-Regular.ttf') format('truetype'); font-weight:400; font-style:normal; font-display:swap; }
@font-face{ font-family:'Mabry Pro'; src:url('../fonts/MabryPro-Medium.ttf') format('truetype'); font-weight:500; font-style:normal; font-display:swap; }
@font-face{ font-family:'Mabry Pro'; src:url('../fonts/MabryPro-Bold.ttf') format('truetype'); font-weight:700; font-style:normal; font-display:swap; }

:root{
  --gold:            #7F6846;
  --gold-light:      #D7AC51;
  --gold-pale:       #FCEAA7;
  --gold-deep:       #D3A447;
  --gold-gradient:   linear-gradient(90deg, #D7AC51 0%, #FCEAA7 45%, #D3A447 100%);
  --gold-gradient-v: linear-gradient(180deg, #D7AC51 0%, #FCEAA7 45%, #D3A447 100%);
  --heading-gradient:linear-gradient(90deg, #815F32 0%, #D4B888 50%, #896533 100%);
  --dark-gradient:   linear-gradient(-30deg, #403423 0%, #7F6846 100%);
  --grad-dark:       linear-gradient(90deg, #A6875B 0%, #403423 100%);
  --gradient-onlight:linear-gradient(-36deg, #D6C2A6 0%, #FBF5EB 100%);
  --gradient-onlight-mob:linear-gradient(-29deg, #ECE2D2 0%, #E1D7C7 100%);
  --gradient-ondetail:linear-gradient(-49deg, #403423 0%, #7F6846 100%);

  --cream:           #F9F5EC;
  --cream-2:         #FEF6E7;
  --neutral-light:   #F3EDE3;
  --neutral-dark:    #333333;
  --brown-text:      #5D4B2F;
  --brown-deep:      #403423;
  --green:           #0B955C;
  --white:           #FFFFFF;

  --shadow-gold:     0 14px 28px rgba(216,173,83,.28);
  --shadow-soft:     0 20px 60px rgba(64,52,35,.10);

  --radius-lg: 32px;
  --radius-md: 20px;
  --radius-pill: 999px;

  --font-heading: 'Mabry Pro', 'Segoe UI', system-ui, sans-serif;
  --font-body: 'Lato', 'Segoe UI', system-ui, sans-serif;

  --max: 1280px;
  --dur: .6s;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
[hidden]{ display:none !important; }

body{
  margin:0;
  background:var(--cream);
  color:var(--neutral-dark);
  font-family:var(--font-body);
  font-size:17px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}

img,svg{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; cursor:pointer; background:none; border:none; }
ul{ margin:0; padding:0; list-style:none; }
h1,h2,h3,h4,p{ margin:0; }

.container{ max-width:var(--max); margin:0 auto; padding:0 24px; position:relative; z-index:2; }

.icon-sprite{ position:absolute; width:0; height:0; overflow:hidden; }

.section{ padding:100px 0; position:relative; }
.section--cream2{ background:var(--cream-2); }

.eyebrow{
  display:inline-block;
  font-family:var(--font-body);
  font-weight:700;
  letter-spacing:.14em;
  text-transform:uppercase;
  font-size:13px;
  color:var(--gold);
  margin-bottom:14px;
}
.eyebrow--onlight{ color:var(--gold-pale); }

.section-head{ max-width:820px; margin:0 auto 56px; text-align:center; }
.section-head p{ margin-top:16px; font-size:clamp(20px,2vw,26px); color:var(--brown-text); font-weight:500; line-height:1.4; }

/* ---- Typography scale from UI kit: H1 68/48/32, H2 32/26/20 ---- */
h1,.h1{
  font-family:var(--font-heading);
  font-weight:500;
  font-size:32px;
  line-height:1.12;
  letter-spacing:-.01em;
  background:var(--heading-gradient);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}
h1.onlight{ background:var(--gradient-onlight); -webkit-background-clip:text; background-clip:text; color:transparent; }
h2,.h2{
  font-family:var(--font-body);
  font-weight:500;
  font-size:20px;
  line-height:1.35;
  color:var(--brown-text);
}
h2.onlight{ color:rgba(255,255,255,.86); }
.h1-sm{
  font-family:var(--font-heading); font-weight:500; font-size:clamp(28px,4vw,44px); line-height:1.15;
  background:var(--grad-dark); -webkit-background-clip:text; background-clip:text; color:transparent;
}
h3,.h3{
  font-family:var(--font-heading);
  font-weight:500;
  font-size:19px;
  color:var(--brown-deep);
}
@media (min-width:600px){
  h1,.h1{ font-size:48px; }
  h2,.h2{ font-size:26px; }
}
@media (min-width:1080px){
  h1,.h1{ font-size:68px; line-height:1.03; }
  h2,.h2{ font-size:32px; }
}

/* ============ BUTTONS ============ */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  min-height:58px;
  padding:0 34px;
  border-radius:var(--radius-pill);
  border:none;
  font-family:var(--font-heading);
  font-weight:500;
  font-size:16px;
  color:var(--brown-deep);
  background:var(--gold-gradient);
  box-shadow:var(--shadow-gold);
  transition:transform .25s ease, box-shadow .25s ease, filter .25s ease;
}
.btn:hover{ filter:brightness(1.08); transform:translateY(-2px); box-shadow:0 20px 36px rgba(216,173,83,.35); }
.btn:active{ transform:translateY(0); }

.btn--outline{
  background:transparent;
  color:var(--gold);
  box-shadow:none;
  border:2px solid var(--gold-light);
}
.btn--outline:hover{ background:var(--cream-2); filter:none; transform:none; }

.btn--sm{ min-height:44px; padding:0 22px; font-size:14px; }
.btn-catalog{ white-space:nowrap; }
/* Figma's hero CTA is a wide fixed-width pill (~306px), not auto-sized to
   the short label — scoped to the hero content block only so the same
   class elsewhere (product-detail panels, final CTA) keeps its default
   auto-width sizing. */
.product-hero-content .btn-catalog{ width:306px; max-width:100%; }

/* Figma: no pill/chip behind it — just the round "i" badge and the label
   sitting directly on the photo, matching the mobile "i Состав" treatment. */
.btn-info{
  display:inline-flex; align-items:center; gap:10px;
  padding:0; border:none; box-shadow:none;
  font-family:var(--font-body); font-weight:500; font-size:20px; line-height:1.2;
  background:var(--gradient-ondetail); -webkit-background-clip:text; background-clip:text; color:transparent;
  text-shadow:0 1px 14px rgba(249,245,236,.85);
}
.btn-info img{ width:36px; height:36px; }

/* Round gradient carousel arrows */
.tech-arrow{
  width:52px; height:52px; border-radius:50%;
  background:var(--gold-gradient-v);
  box-shadow:var(--shadow-gold);
  color:var(--brown-deep);
  display:grid; place-items:center;
  transition:filter .25s ease, transform .2s ease;
  flex:0 0 auto;
}
.tech-arrow svg{ width:20px; height:20px; }
.tech-arrow:hover{ filter:brightness(1.08); transform:scale(1.05); }
.tech-arrow--static{ position:static; opacity:1; background:var(--gold-gradient-v); }

/* ============ HEADER ============ */
/* ============ SCROLL PROGRESS ============ */
.scroll-progress{
  position:fixed; top:0; left:0; height:3px; width:0%;
  background:var(--gold-gradient);
  box-shadow:0 0 10px 1px rgba(215,172,81,.5);
  z-index:150;
  pointer-events:none;
}

.site-header{
  position:fixed; top:0; left:0; right:0; z-index:100;
  background:rgba(249,245,236,.9);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  transform:translateY(-100%);
  opacity:0;
  transition:transform .35s ease, opacity .35s ease;
  pointer-events:none;
}
.site-header.is-visible{ transform:translateY(0); opacity:1; pointer-events:auto; }
/* Gold "backlight" glow along the header's bottom edge, per reference. */
.site-header::after{
  content:"";
  position:absolute; left:0; right:0; bottom:0; height:2px;
  background:var(--gold-gradient);
  box-shadow:0 0 18px 3px rgba(215,172,81,.5);
}

/* Drop the stacking context .container normally creates (via
   position+z-index) so .brand-logo's mix-blend-mode can actually
   reach the header's own background instead of blending against
   nothing and rendering opaque. */
.site-header .container{ position:static; z-index:auto; }

.header-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  height:84px;
}

.brand{ display:flex; align-items:center; }
.brand-logo{ display:block; width:160px; height:auto; }

.main-nav{ display:flex; align-items:center; gap:26px; }
.main-nav a{
  font-size:14.5px; font-weight:700; color:var(--brown-text);
  position:relative; padding:6px 0;
}
.main-nav a::after{
  content:""; position:absolute; left:0; right:100%; bottom:0; height:2px;
  background:var(--gold-gradient); transition:right .25s ease;
}
.main-nav a:hover::after{ right:0; }

.header-actions{ display:flex; align-items:center; gap:14px; }
.header-actions .btn{ width:140px; }

.nav-toggle{
  display:none;
  width:48px; height:48px;
  border-radius:14px;
  border:1px solid rgba(127,104,70,.25);
  background:var(--cream-2);
  align-items:center; justify-content:center;
  flex-direction:column; gap:5px;
}
.nav-toggle span{ display:block; width:22px; height:2px; background:var(--brown-deep); border-radius:2px; transition:transform .3s ease, opacity .3s ease; }
.nav-toggle span:nth-child(2){ width:16px; align-self:flex-start; margin-left:15px; }
.nav-toggle.is-active span:nth-child(1){ transform:translateY(7px) rotate(45deg); width:22px; }
.nav-toggle.is-active span:nth-child(2){ opacity:0; }
.nav-toggle.is-active span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

.mobile-nav{
  position:fixed; inset:0; z-index:99;
  background:var(--cream);
  display:flex; flex-direction:column;
  padding:110px 32px 40px;
  transform:translateY(-100%);
  transition:transform .35s ease;
  overflow-y:auto;
}
.mobile-nav.is-open{ transform:translateY(0); }
.mobile-nav a{ font-family:var(--font-heading); font-size:22px; font-weight:500; color:var(--brown-deep); padding:14px 0; border-bottom:1px solid rgba(127,104,70,.14); }
.mobile-nav .btn{ margin-top:14px; align-self:stretch; text-align:center; }
.mobile-nav a:not(.btn) + a.btn{ margin-top:28px; }

/* ============ HERO ============ */
.hero{
  position:relative;
  /* Matches the source photo's own ratio (3840x2160) so object-fit:cover
     never has to crop its sides — the full original frame stays visible. */
  aspect-ratio:3840/2160;
  display:flex; align-items:flex-start;
  overflow:hidden;
  padding:min(150px,15%) 0 40px;
}
@media (max-width:720px){
  .hero{ aspect-ratio:800/1628; padding:44px 0 40px; }
}
/* .hero-bg/.hero-scrim are position:absolute with no z-index, and
   .hero-inner keeps the default .container (position:relative; z-index:2) —
   that gives hero-inner its own stack level so it reliably paints above
   the photo/scrim regardless of DOM paint-order quirks for plain,
   non-positioned content. */
.hero-bg{ position:absolute; inset:-4% 0 0 0; height:108%; will-change:transform; }
.hero-bg img{ width:100%; height:100%; object-fit:cover; }
.hero-scrim{
  position:absolute; inset:0;
  /* Second layer darkens the top-left corner just enough for the flat
     (no drop-shadow) logo to stay readable against the bright sky there. */
  background:
    linear-gradient(180deg, rgba(20,16,8,.32) 0%, rgba(20,16,8,0) 30%),
    linear-gradient(0deg, rgba(20,16,8,.55) 0%, rgba(20,16,8,.15) 45%, rgba(20,16,8,0) 68%);
}
.hero-inner{ width:100%; }
.hero-content{ max-width:560px; }
.hero-logo{
  display:block;
  width:clamp(200px,24vw,340px); height:auto;
  margin-bottom:24px;
}
.hero-tag{ font-family:var(--font-heading); font-weight:500; font-size:clamp(26px,3.6vw,50px); line-height:1.14; color:var(--cream-2); text-transform:lowercase; margin-bottom:26px; text-shadow:0 2px 14px rgba(20,16,8,.4); }
.hero-bullets{ display:flex; flex-direction:column; gap:12px; margin-bottom:34px; }
.hero-bullets li{ display:flex; align-items:center; gap:12px; color:var(--cream-2); font-size:clamp(17px,1.9vw,26px); font-weight:500; line-height:1.23; text-shadow:0 2px 10px rgba(20,16,8,.4); }
.hero-bullet-icon{ flex:0 0 20px; width:20px; height:20px; }

/* Compact gold "Подробнее" pill per UI-kit reference (fixed desktop/mobile + hover states). */
.btn-gold-sm{
  display:inline-flex; align-items:center; gap:10px;
  min-height:60px;
  padding:0 30px 0 22px;
  border-radius:var(--radius-pill);
  border:none;
  background:var(--gold-gradient);
  box-shadow:0 14px 28px rgba(216,173,83,.2);
  color:var(--brown-deep);
  font-family:var(--font-heading); font-weight:500; font-size:19px;
  transition:filter .25s ease, transform .25s ease;
}
.btn-gold-sm:hover{ filter:brightness(1.08); }
.btn-gold-sm .hand{ font-size:22px; line-height:1; }

/* "Подробнее" is centered on the hero, independent of the text column above it. */
.hero-cta{ position:absolute; left:50%; bottom:8%; transform:translateX(-50%); z-index:3; }
@media (max-width:720px){
  .hero-cta{ left:50%; bottom:30px; }
  /* Text sits directly over the (bright) top of the photo — dark brown
     reads clearly there on its own, no shadow needed. */
  .hero-logo{ margin-bottom:14px; }
  .hero-tag{ color:var(--brown-text); text-shadow:none; margin-bottom:16px; }
  .hero-bullets{ gap:8px; }
  .hero-bullets li{ color:var(--brown-text); text-shadow:none; }
}

/* ============ PAIN GRID ============ */
.pain-panel .section-head{ margin-bottom:28px; }
.pain-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  column-gap:40px;
  position:relative;
}
.pain-item{
  display:flex; align-items:center; text-align:left;
  gap:20px;
  padding:24px 0;
  position:relative;
}
/* Full-bleed horizontal dividers: taken out of grid flow (absolute) so they don't claim a whole row track before the real items auto-place; grid-row/-column still anchor them to the exact line. */
.pain-hline{
  position:absolute;
  left:0; right:0;
  grid-row:2;
  align-self:start;
  height:1px;
  background:linear-gradient(to right, rgba(215,172,81,0) 0%, rgba(215,172,81,.85) 15%, rgba(215,172,81,.85) 85%, rgba(215,172,81,0) 100%);
}
.pain-hline--2{ display:none; }
/* Vertical dividers are inset top/bottom so they stop short of the horizontal line instead of touching it, and taper to a point at each end. */
.pain-grid .pain-item:not(:nth-child(3n+1)){ padding-left:32px; }
.pain-grid .pain-item:not(:nth-child(3n+1))::before{
  content:"";
  position:absolute; left:0; top:4px; bottom:4px; width:1px;
  background:linear-gradient(to bottom, rgba(215,172,81,0) 0%, rgba(215,172,81,.85) 15%, rgba(215,172,81,.85) 85%, rgba(215,172,81,0) 100%);
}
.pain-icon{ flex:0 0 auto; width:96px; height:96px; }
.pain-item p{ font-weight:500; color:var(--brown-text); font-size:22px; line-height:1.3; }

/* ============ BRIDGE (Надоело) ============ */
.bridge{ overflow:hidden; }
.bridge-bg-pic{ position:absolute; inset:0; z-index:0; }
.bridge-bg-pic img{ width:100%; height:100%; object-fit:cover; }
.bridge .section-head{ max-width:960px; }
#technologies .section-head{ max-width:960px; }
#faq .section-head{ max-width:960px; }
.bridge .section-head h1 span{ color:var(--gold-deep); }
.bridge-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:32px;
}
/* Figma spec (node card #1, "Диеты и голодные..."): card 460x260, cream fill, 90deg gold-gradient
   2px stroke, 32px radius, gold shadow. Text at (40,40) w:246, H2 desk (Lato 500 32/36, flat #5D4B2F).
   Icon 180x180 at (280,80) — flush with the card's right and bottom edges. Positions below are those
   figures converted to % of the card's own box so the aspect-ratio-locked card stays true at any width. */
.bridge-card{
  position:relative;
  display:flex;
  aspect-ratio:460/260;
  border:2px solid transparent;
  border-radius:var(--radius-lg);
  background:linear-gradient(var(--cream), var(--cream)) padding-box,
             var(--gold-gradient) border-box;
  box-shadow:0 14px 28px rgba(216,173,83,.2);
  overflow:hidden;
}
.bridge-card h3{
  position:absolute; left:8.696%; top:15.385%; width:56%;
  font-family:var(--font-body); font-weight:500; font-size:clamp(19px,1.95vw,25px); line-height:1.125;
  color:var(--brown-text);
  text-align:left;
}
.bridge-icon{ position:absolute; left:60.87%; top:30.77%; width:39.13%; height:69.23%; }

/* ============ SOLUTION (Решение) ============ */
/* JS toggles .is-night on this section as the user scrolls past the
   halfway point of the block — page itself dims toward night while the
   "night" card comes into focus, echoing the day/night copy. */
.solution{ transition:background-color .8s ease; }
.solution.is-night{ background-color:#2A2115; }
.solution.is-night .section-head h1,
.solution.is-night .section-head h2{ color:var(--gold-pale); }
.solution-grid{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:32px;
}
.solution-card{
  background:var(--cream);
  border:1px solid rgba(215,172,81,.35);
  border-radius:var(--radius-lg);
  padding:44px 40px 40px;
  box-shadow:var(--shadow-gold);
  text-align:center;
  transition:background-color .8s ease, border-color .8s ease, box-shadow .8s ease, transform .5s ease;
}
.solution.is-night .solution-card--day{ opacity:.55; transform:scale(.97); }
.solution.is-night .solution-card--night{
  background:#3A2E18;
  border-color:rgba(215,172,81,.6);
  box-shadow:0 0 50px rgba(215,172,81,.28), var(--shadow-gold);
  transform:scale(1.02);
}
.solution.is-night .solution-card--night p{ color:var(--cream-2); }
.solution-photo{
  box-sizing:border-box;
  width:100%; aspect-ratio:606/334; object-fit:cover;
  margin:0 auto 26px;
  background:var(--cream-2);
  border-radius:var(--radius-md);
  box-shadow:0 10px 24px rgba(216,173,83,.18);
}
.solution-card h3{
  font-size:clamp(20px,2.6vw,32px); margin-bottom:14px;
  white-space:nowrap;
  background:var(--heading-gradient); -webkit-background-clip:text; background-clip:text; color:transparent;
}
.solution-card p{ color:var(--brown-text); font-weight:500; font-size:clamp(17px,2vw,24px); }
/* Figma uses the same light card for both day/night — only the artwork differs. */

/* ============ PRODUCT HERO (Баланс / Красота big sections) ============ */
.product-hero{ position:relative; min-height:88vh; display:flex; align-items:center; overflow:hidden; }
/* .container is a flex child here; width:auto would shrink-to-fit instead
   of filling to max-width, pulling the panel toward center instead of
   the correct edge (same fix already used on .hero-inner). */
.product-hero .container,.product-detail .container,.approach .container{ width:100%; }
.product-hero-bg{ position:absolute; inset:0; z-index:0; }
.product-hero-bg img{ width:100%; height:100%; object-fit:cover; }
.product-hero::after{
  content:""; position:absolute; inset:0; z-index:1;
  background:linear-gradient(90deg, rgba(39,39,39,.7) 0%, rgba(39,39,39,0) 100%);
}
.product-hero-content{ max-width:560px; padding:60px 0; }
.product-hero-content p{ color:#FFFFFF; font-family:var(--font-body); font-weight:500; font-size:clamp(18px,1.8vw,26px); margin:40px 0 48px; line-height:1.231; }

/* ============ PRODUCT DETAIL (stick close-up sections) ============ */
.product-detail{ position:relative; min-height:80vh; display:flex; align-items:center; overflow:hidden; }
.product-detail-bg{ position:absolute; inset:0; z-index:0; }
.product-detail-bg img{ width:100%; height:100%; object-fit:cover; }
/* No card and no scrim behind the text — per Figma, the copy sits directly
   on the photo as gradient-fill text with just a soft glow (text-shadow)
   for legibility, nothing that dulls the photo itself. */
.product-detail-panel{
  max-width:540px; margin-left:auto;
  padding:44px 40px;
}
/* Figma tags this heading "H1 desk" — the full sitewide H1 scale (68/70px
   at desktop), not the smaller .h1-sm treatment used elsewhere. */
.product-detail-panel h2.h1-sm{ font-size:clamp(26px,3.75vw,54px); line-height:1.03; }
.check-list{ display:flex; flex-direction:column; gap:8px; margin:60px 0 0; }
.check-list li{
  display:flex; align-items:center; gap:7px; font-weight:500; font-size:clamp(17px,1.7vw,23px); line-height:1.231;
  background:var(--gradient-ondetail); -webkit-background-clip:text; background-clip:text; color:transparent;
  text-shadow:0 1px 14px rgba(249,245,236,.85);
}
.check-bullet{ flex:0 0 22px; width:22px; height:22px; }
.composition{
  font-weight:500; font-size:clamp(14px,1.2vw,17px); line-height:1.231; margin:60px 0 0;
  background:var(--gradient-ondetail); -webkit-background-clip:text; background-clip:text; color:transparent;
  text-shadow:0 1px 14px rgba(249,245,236,.85);
}
.composition-trigger{ display:none; }
.product-detail-panel .btn-catalog{ width:306px; max-width:100%; margin-top:60px; }

/* ============ COMPONENTS (Сила природных компонентов) ============ */
.components-list{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:24px 32px;
}
/* Figma: no cards — icons/labels sit on the plain background with thin
   tapered ("needle") dividers, same treatment as the pain-grid lines:
   a full-bleed horizontal line as a real grid item on the row boundary,
   and inset vertical lines between columns that stop short of it. */
.component-item{
  display:flex; flex-direction:column; align-items:center; gap:20px;
  text-align:center;
  padding:26px 18px;
  position:relative;
}
.components-list .component-item:not(:nth-child(4n+1)){ padding-left:0; }
.components-list .component-item:not(:nth-child(4n+1))::before{
  content:"";
  position:absolute; left:0; top:8px; bottom:8px; width:1px;
  background:linear-gradient(to bottom, rgba(215,172,81,0) 0%, rgba(215,172,81,.85) 15%, rgba(215,172,81,.85) 85%, rgba(215,172,81,0) 100%);
}
.component-icon{ width:84px; height:84px; transition:transform .5s cubic-bezier(.2,.7,.2,1), filter .5s ease; }
/* Cyclic highlight (JS toggles .is-active every ~2.2s) — icon lifts and glows gold. */
.component-item.is-active .component-icon{ transform:translateY(-6px) scale(1.08); filter:drop-shadow(0 10px 18px rgba(215,172,81,.55)); }
.component-item.is-active strong{ background:var(--gold-gradient); -webkit-background-clip:text; background-clip:text; }
.components-list{ position:relative; }
/* Figma: no horizontal divider on desktop (4-col layout) — only the mobile
   2-col/4-row layout gets row dividers, enabled in the responsive block. */
.components-hline{
  display:none;
  position:absolute;
  left:0; right:0;
  grid-row:2;
  align-self:start;
  height:1px;
  background:linear-gradient(to right, rgba(215,172,81,0) 0%, rgba(215,172,81,.85) 15%, rgba(215,172,81,.85) 85%, rgba(215,172,81,0) 100%);
}
.components-hline--2,.components-hline--3{ display:none; }
.component-item strong{
  font-family:var(--font-heading); font-weight:500; font-size:clamp(18px,2vw,36px);
  background:var(--heading-gradient); -webkit-background-clip:text; background-clip:text; color:transparent;
}

/* ============ TECHNOLOGIES ============ */
.tech-wrap{ position:relative; display:flex; align-items:center; gap:18px; }
.tech-track{
  display:flex;
  gap:20px;
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch;
  padding:8px 4px 10px;
  cursor:grab;
  scrollbar-width:none;
  flex:1;
  /* Shared vanishing point for the cursor tilt (task 1) and the drag
     "cylinder" skew (task 2) applied to .tech-card in main.js. */
  perspective:1000px;
}
.tech-track::-webkit-scrollbar{ display:none; }
.tech-track.is-dragging{ cursor:grabbing; scroll-snap-type:none; }

.tech-card{
  flex:0 0 360px;
  min-height:480px;
  scroll-snap-align:start;
  background:var(--gold-gradient) center/cover no-repeat;
  border-radius:var(--radius-lg);
  padding:34px 28px;
  box-shadow:var(--shadow-gold);
  user-select:none;
  position:relative;
  overflow:hidden;
}
.tech-card--1{ background-image:url('../img/photo/tech-1.jpg'); }
.tech-card--2{ background-image:url('../img/photo/tech-2.jpg'); }
.tech-card--3{ background-image:url('../img/photo/tech-3.jpg'); }
.tech-card--4{ background-image:url('../img/photo/tech-4.jpg'); }
.tech-card--5{ background-image:url('../img/photo/tech-5.jpg'); }
.tech-card h3{
  margin-bottom:14px; position:relative; font-family:var(--font-body); font-weight:700;
  font-size:clamp(20px,2.6vw,32px); line-height:1.125;
  background:linear-gradient(90deg, #6C5129 0%, #2E210D 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.tech-card p{ font-size:18px; font-weight:500; color:rgba(64,52,35,.85); position:relative; }
/* 3D behaviour for the tech cards. The rotateX/rotateY (cursor tilt) and the
   drag skew are written to .tech-card inline styles by main.js; this rule only
   owns the easing back to rest. Enabled on precise pointers only — touch keeps
   the card perfectly flat. */
@media (hover:hover) and (pointer:fine){
  .tech-card{
    transform-style:preserve-3d;
    transition:transform .35s ease-out, box-shadow .35s ease-out;
  }
}

/* ============ APPROACH (Комплексный подход) ============ */
.approach{ position:relative; min-height:78vh; display:flex; align-items:center; overflow:hidden; }
.approach-bg{ position:absolute; inset:0; z-index:0; }
.approach-bg img{ width:100%; height:100%; object-fit:cover; }
.approach-panel{ max-width:676px; padding:60px 0; }
.approach-panel .check-list{ margin:40px 0 40px; }
.approach-panel .check-list li{ font-size:clamp(18px,1.9vw,26px); }

/* ============ RESULT ============ */
.result-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:64px 32px;
  position:relative;
}
/* Same icon-left/text-right row pattern as .pain-item — Figma has no cards here either.
   Same tapered "needle" divider style as the pain-grid section: full-bleed horizontal
   via a real grid item (out of flow, centered in the row-gap), vertical via an inset
   pseudo-element between columns. */
.result-item{
  display:flex; align-items:center; text-align:left;
  gap:20px;
  padding:24px 0;
  position:relative;
}
.result-grid .result-item:not(:nth-child(3n+1)){ padding-left:32px; }
.result-grid .result-item:not(:nth-child(3n+1))::before{
  content:"";
  position:absolute; left:0; top:8px; bottom:8px; width:1px;
  background:linear-gradient(to bottom, rgba(215,172,81,0) 0%, rgba(215,172,81,.85) 15%, rgba(215,172,81,.85) 85%, rgba(215,172,81,0) 100%);
}
.result-icon{ flex:0 0 auto; width:96px; height:96px; transition:transform .5s cubic-bezier(.2,.7,.2,1), filter .5s ease; }
.result-item strong{ font-family:var(--font-body); font-weight:500; font-size:32px; line-height:1.25; color:var(--brown-text); transition:color .5s ease; }
/* Cyclic highlight (JS toggles .is-glow every ~1.9s) — icon lifts and glows gold. */
.result-item.is-glow .result-icon{ transform:scale(1.1); filter:drop-shadow(0 10px 20px rgba(215,172,81,.6)); }
.result-item.is-glow strong{ color:var(--gold-deep); }
.result-hline{
  position:absolute;
  left:0; right:0;
  grid-row:1 / 3;
  align-self:center;
  height:1px;
  background:linear-gradient(to right, rgba(215,172,81,0) 0%, rgba(215,172,81,.85) 15%, rgba(215,172,81,.85) 85%, rgba(215,172,81,0) 100%);
}
.result-hline--2{ display:none; }

/* ============ REVIEWS carousel ============ */
/* Peek carousel: only the centered card is fully shown, neighbours peek in from
   both edges. The track sits outside .container so the peek can bleed toward the
   viewport edge; side padding equals half the leftover space so the first/last
   cards can also be scrolled to center, matching Figma's "one card + peeking
   neighbours" layout on both desktop and mobile. */
.reviews-wrap{ position:relative; }
.reviews-track{
  display:flex; gap:24px;
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch;
  padding:8px calc((100% - min(760px,66vw)) / 2) 10px;
  scrollbar-width:none;
  cursor:grab;
}
.reviews-track::-webkit-scrollbar{ display:none; }
.reviews-track.is-dragging{ cursor:grabbing; scroll-snap-type:none; }
.review-card{
  flex:0 0 min(760px,66vw);
  scroll-snap-align:center;
  border:2px solid transparent;
  border-radius:var(--radius-lg);
  background:linear-gradient(var(--white), var(--white)) padding-box,
             var(--gold-gradient) border-box;
  box-shadow:0 14px 28px rgba(216,173,83,.2);
  padding:36px 34px 28px;
  display:flex; flex-direction:column; gap:24px;
  user-select:none;
  transform:scale(.88);
  transition:transform .3s ease;
}
/* Figma: the centered card is noticeably larger than its peeking neighbours. */
.review-card.is-active{ transform:scale(1); position:relative; z-index:1; }
.review-card p{ font-family:var(--font-body); font-weight:500; font-size:clamp(20px,3vw,42px); line-height:1; color:var(--brown-text); }
.review-card p::before{ content:"«"; }
.review-card p::after{ content:"»"; }
.review-meta{
  font-family:var(--font-body); font-weight:500; font-size:clamp(18px,2.2vw,32px); line-height:1.2;
  background:var(--heading-gradient); -webkit-background-clip:text; background-clip:text; color:transparent;
}

.reviews-nav{ display:flex; align-items:center; justify-content:center; gap:20px; margin-top:30px; }
.reviews-dots{ display:flex; align-items:center; gap:6px; }
.reviews-dots span{ width:6px; height:6px; border-radius:50%; background:rgba(127,104,70,.3); transition:background .25s ease, transform .25s ease; }
.reviews-dots span.is-active{ background:var(--gold-light); transform:scale(1.4); }

/* ============ FAQ ============ */
.faq-list{ max-width:900px; margin:0 auto; display:flex; flex-direction:column; gap:16px; }
.faq-item{
  background:var(--white);
  border:1px solid rgba(127,104,70,.16);
  border-radius:var(--radius-lg);
  overflow:hidden;
  box-shadow:var(--shadow-soft);
}
.faq-q{
  width:100%;
  display:flex; align-items:center; justify-content:space-between; gap:20px;
  padding:26px 32px;
  border-top:2px solid rgba(215,172,81,.3);
  text-align:left;
}
.faq-q span:first-child{ font-family:var(--font-body); font-weight:500; font-size:clamp(20px,2.7vw,32px); line-height:1.125; color:var(--brown-text); }
.faq-toggle{ position:relative; flex:0 0 24px; width:24px; height:24px; }
.faq-toggle::before,.faq-toggle::after{
  content:""; position:absolute; top:50%; left:50%;
  background:var(--gold-deep);
  transition:transform .25s ease, opacity .25s ease;
}
.faq-toggle::before{ width:16px; height:2px; transform:translate(-50%,-50%); }
.faq-toggle::after{ width:2px; height:16px; transform:translate(-50%,-50%); }
.faq-item[aria-expanded="true"] .faq-toggle::after{ opacity:0; transform:translate(-50%,-50%) rotate(90deg); }
.faq-a{
  max-height:0;
  overflow:hidden;
  transition:max-height .35s ease;
  padding:0 32px;
}
.faq-a p{
  font-family:var(--font-body); font-weight:500; font-size:clamp(20px,2.7vw,32px); line-height:1.125;
  background:var(--heading-gradient); -webkit-background-clip:text; background-clip:text; color:transparent;
  padding-bottom:24px;
}
.faq-item[aria-expanded="true"] .faq-a{ max-height:600px; }

/* ============ FINAL CTA ============ */
.final-cta{ position:relative; padding:130px 0; overflow:hidden; }
.final-cta-bg{ position:absolute; inset:0; z-index:0; }
.final-cta-bg img{ width:100%; height:100%; object-fit:cover; }
.final-cta::after{ content:""; position:absolute; inset:0; z-index:1; background:rgba(64,52,35,.12); }
.final-cta-inner{ text-align:center; max-width:700px; margin:0 auto; }
.final-cta-inner p{ color:var(--brown-text); max-width:560px; margin:18px auto 38px; font-size:clamp(18px,1.8vw,24px); font-weight:500; }
.final-cta-inner .btn-catalog{ width:306px; max-width:100%; min-height:60px; box-shadow:0 14px 28px rgba(216,173,83,.2); }

/* ============ MODAL ============ */
.modal-overlay{
  position:fixed; inset:0; z-index:200;
  background:rgba(43,34,19,.55);
  display:flex; align-items:center; justify-content:center;
  padding:24px;
  opacity:0; pointer-events:none;
  transition:opacity .3s ease;
}
.modal-overlay.is-open{ opacity:1; pointer-events:auto; }
.modal{
  background:var(--cream);
  border-radius:var(--radius-lg);
  max-width:560px; width:100%;
  padding:44px 40px;
  position:relative;
  transform:translateY(16px) scale(.98);
  transition:transform .3s ease;
  max-height:85vh; overflow-y:auto;
}
.modal-overlay.is-open .modal{ transform:translateY(0) scale(1); }
.modal-close{
  position:absolute; top:20px; right:20px;
  width:40px; height:40px; border-radius:50%;
  background:var(--cream-2); border:none;
  display:grid; place-items:center; color:var(--brown-deep);
}
.modal-close svg{ width:18px; height:18px; }
.modal h3{ font-size:24px; margin-bottom:16px; padding-right:30px; }
.modal p{ color:var(--brown-text); margin-bottom:14px; font-size:15.5px; }

/* ============ FOOTER ============ */
.site-footer{
  background:var(--dark-gradient);
  color:rgba(255,255,255,.7);
  /* Extra bottom padding keeps the fixed "Регистрация" pill (~86px tall
     incl. its own bottom offset) from covering the copyright line. */
  padding:30px 0 110px;
}
.footer-bottom{ display:flex; justify-content:space-between; gap:20px; flex-wrap:wrap; font-size:13px; color:rgba(255,255,255,.6); }

/* ============ FLOATING REGISTER CTA ============
   Appears at the bottom of screen 2 (30px from bottom edge) and stays
   fixed while scrolling to the end of the page — per designer note. */
.float-register{
  position:fixed; left:50%; bottom:30px; z-index:90;
  display:inline-flex; align-items:center; gap:10px;
  min-height:56px; padding:0 30px;
  border-radius:var(--radius-pill);
  background:var(--gold-gradient);
  color:var(--brown-deep);
  font-family:var(--font-heading); font-weight:500; font-size:15px;
  box-shadow:var(--shadow-gold);
  opacity:0; pointer-events:none;
  transform:translate(-50%, 16px);
  transition:opacity .35s ease, transform .35s ease;
}
.float-register.is-visible{ opacity:1; pointer-events:auto; transform:translate(-50%, 0); animation:floatPulse 1.8s ease .6s 1; }
@keyframes floatPulse{
  0%,100%{ box-shadow:var(--shadow-gold); }
  50%{ box-shadow:0 14px 28px rgba(216,173,83,.28), 0 0 0 10px rgba(216,173,83,.16); }
}
.float-register.is-collapsed{ opacity:0; pointer-events:none; transform:translate(-50%, 16px); }
.float-register:hover{ filter:brightness(1.08); }
.float-register .hand{ font-size:17px; line-height:1; }
@media (max-width:620px){
  .float-register{ min-height:50px; padding:0 22px; font-size:14px; bottom:20px; }
}

/* ============ SCROLL REVEAL ============ */
.reveal{
  opacity:0;
  transform:translateY(36px);
  transition:opacity var(--dur) cubic-bezier(.2,.7,.2,1), transform var(--dur) cubic-bezier(.2,.7,.2,1);
}
.reveal.is-visible{ opacity:1; transform:translateY(0); }

/* ---- Staggered cascade: icons/items inside a revealed grid fly in one
   by one instead of all at once with their parent. Delay is keyed to DOM
   order (nth-child), so no JS changes needed — parent's existing .reveal
   IntersectionObserver drives everything. ---- */
.pain-item,
.result-item,
.component-item{
  opacity:0;
  transform:translateY(22px);
  transition:opacity .5s cubic-bezier(.2,.7,.2,1), transform .5s cubic-bezier(.2,.7,.2,1);
}
.pain-panel.is-visible .pain-item,
.reveal.is-visible .result-item,
.reveal.is-visible .component-item{
  opacity:1;
  transform:translateY(0);
}
.pain-item:nth-child(1),.result-item:nth-child(1),.component-item:nth-child(1){ transition-delay:.05s; }
.pain-item:nth-child(2),.result-item:nth-child(2),.component-item:nth-child(2){ transition-delay:.12s; }
.pain-item:nth-child(3),.result-item:nth-child(3),.component-item:nth-child(3){ transition-delay:.19s; }
.pain-item:nth-child(4),.result-item:nth-child(4),.component-item:nth-child(4){ transition-delay:.26s; }
.pain-item:nth-child(5),.result-item:nth-child(5),.component-item:nth-child(5){ transition-delay:.33s; }
.pain-item:nth-child(6),.result-item:nth-child(6),.component-item:nth-child(6){ transition-delay:.4s; }
.component-item:nth-child(7){ transition-delay:.47s; }
.component-item:nth-child(8){ transition-delay:.54s; }

/* Bridge cards already reveal individually via IO — add a light cascade
   too for the common case where all three enter the viewport together. */
.bridge-card:nth-child(1){ transition-delay:0s; }
.bridge-card:nth-child(2){ transition-delay:.1s; }
.bridge-card:nth-child(3){ transition-delay:.2s; }

/* ---- SVG "pen draw" for #pain / #result / #components icons ----
   main.js swaps those <img> for inline <svg>, tags each drawable geometry
   node with [data-draw], and seeds stroke-dasharray/-dashoffset from its own
   getTotalLength(). It then flips three inline props (dashoffset -> 0,
   fill-opacity -> 1, stroke-opacity -> 0) in a per-icon stagger that mirrors
   the nth-child cascade above; this rule only supplies the easing. */
.svg-draw [data-draw]{
  transition:stroke-dashoffset .9s cubic-bezier(.2,.7,.2,1),
             fill-opacity .3s ease .55s,
             stroke-opacity .3s ease .8s;
}

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  .reveal{ opacity:1; transform:none; transition:none; }
  .component-item, .result-item{ transition:none; }
  .site-header{ transition:none; }
  .pain-item, .result-item, .component-item{ opacity:1; transform:none; transition:none; }
  .hero-bg{ transform:none !important; }
  .float-register.is-visible{ animation:none; }
  .solution{ transition:none; }
  .solution-card{ transition:none; }
  /* Task 1/2: no cursor tilt or drag skew — main.js also bails out early. */
  .tech-card{ transition:none; transform:none !important; box-shadow:var(--shadow-gold) !important; }
  /* Task 3: icons stay as <img>, already fully drawn; guard the fallback path. */
  .svg-draw [data-draw]{ transition:none; stroke-dashoffset:0 !important; fill-opacity:1 !important; stroke-opacity:0 !important; }
}

/* ============ RESPONSIVE ============ */
@media (max-width:1080px){
  .pain-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); column-gap:28px; }
  .pain-hline--2{ display:block; grid-row:3; }
  .pain-grid .pain-item:nth-child(2n+3)::before{ content:none; }
  .pain-grid .pain-item:not(:nth-child(3n+1)){ padding-left:0; }
  .pain-grid .pain-item:not(:nth-child(2n+1)){ padding-left:28px; }
  .pain-grid .pain-item:not(:nth-child(2n+1))::before{
    content:"";
    position:absolute; left:0; top:4px; bottom:4px; width:1px;
    background:linear-gradient(to bottom, rgba(215,172,81,0) 0%, rgba(215,172,81,.85) 15%, rgba(215,172,81,.85) 85%, rgba(215,172,81,0) 100%);
  }
  .components-list{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .components-hline{ display:block; }
  .components-hline--2{ grid-row:3; }
  .components-hline--3{ grid-row:4; }
  .components-list .component-item:nth-child(4n+3)::before{ content:none; }
  .components-list .component-item:not(:nth-child(4n+1)){ padding-left:0; }
  .components-list .component-item:not(:nth-child(2n+1)){ padding-left:24px; }
  .components-list .component-item:not(:nth-child(2n+1))::before{
    content:"";
    position:absolute; left:0; top:8px; bottom:8px; width:1px;
    background:linear-gradient(to bottom, rgba(215,172,81,0) 0%, rgba(215,172,81,.85) 15%, rgba(215,172,81,.85) 85%, rgba(215,172,81,0) 100%);
  }
  .result-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .result-hline--2{ display:block; grid-row:2 / 4; }
  .result-grid .result-item:nth-child(2n+3)::before{ content:none; }
  .result-grid .result-item:not(:nth-child(3n+1)){ padding-left:0; }
  .result-grid .result-item:not(:nth-child(2n+1)){ padding-left:28px; }
  .result-grid .result-item:not(:nth-child(2n+1))::before{
    content:"";
    position:absolute; left:0; top:8px; bottom:8px; width:1px;
    background:linear-gradient(to bottom, rgba(215,172,81,0) 0%, rgba(215,172,81,.85) 15%, rgba(215,172,81,.85) 85%, rgba(215,172,81,0) 100%);
  }
  .bridge-grid{ grid-template-columns:minmax(0,1fr); max-width:420px; }
}

@media (max-width:860px){
  .main-nav{ display:none; }
  .header-actions .btn--sm{ display:none; }
  .nav-toggle{ display:inline-flex; }
  .solution-grid{ grid-template-columns:minmax(0,1fr); }
  .section{ padding:70px 0; }
  .product-detail-panel{ margin-left:0; margin-right:0; max-width:100%; }
}

@media (max-width:720px){
  /* Mobile swaps the long composition paragraph for a compact "i Состав"
     button that opens the same text in the shared modal. */
  .composition{ display:none; }
  /* Figma: no pill/chip behind it — just the round "i" badge and the label,
     centered on the same line, sitting directly on the photo, pushed well
     below the checklist, floating near the bottom of the tall product photo. */
  .composition-trigger{
    display:inline-flex; align-items:center; gap:8px;
    margin-top:160px; padding:0; border:none; background:none; box-shadow:none;
    font-family:var(--font-body); font-weight:500; font-size:26px; color:var(--brown-text);
    text-shadow:0 1px 14px rgba(249,245,236,.85);
  }
  /* The source SVG's visible circle sits above the center of its own (taller,
     shadow-padded) box, so nudge it up to true-center against the label text. */
  .composition-trigger img{ width:64px; height:64px; }
  .product-detail-panel .btn-catalog{ margin-top:24px; }
}

@media (max-width:620px){
  .container{ padding:0 18px; }
  .header-inner{ height:72px; }
  .brand-logo{ width:195px; height:auto; }
  .pain-grid{ column-gap:16px; }
  .pain-item{ flex-direction:column; align-items:center; text-align:center; gap:10px; padding:18px 0; }
  .pain-grid .pain-item:not(:nth-child(2n+1)){ padding-left:0; }
  .pain-icon{ width:64px; height:64px; }
  .pain-item p{ font-size:14px; }
  .components-list{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .result-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); column-gap:16px; }
  .result-item{ flex-direction:column; align-items:center; text-align:center; gap:10px; padding:18px 0; }
  .result-icon{ width:64px; height:64px; }
  .result-item strong{ font-size:14px; }
  .final-cta,.product-detail{ min-height:auto; padding:64px 0; }
  /* Figma's mobile hero frame is a tall ~402x784 crop (~1.95:1) — letting the section
     just hug its (short) text content instead crops the cover photo much tighter,
     zooming in on the product box until it collides with the text. */
  .product-hero{ min-height:auto; aspect-ratio:402/784; align-items:flex-start; padding:96px 0 40px; }
  .product-hero-content{ padding:0; }
  .product-hero-content p{ margin:24px 0 28px; }
  /* Same fix for the approach section — Figma's mobile background image is exactly
     402x700, so a content-hugging short section crops it far tighter than intended. */
  .approach{ min-height:auto; aspect-ratio:402/700; align-items:flex-start; padding:96px 0 40px; }
  .approach-panel{ padding:0; }
  /* Figma's mobile hero scrim is vertical (top-down), not the desktop's horizontal left-to-right one. */
  .product-hero::after{ background:linear-gradient(180deg, rgba(39,39,39,.6) 0%, rgba(39,39,39,.22) 55%, rgba(39,39,39,0) 88%); }
  /* Figma's mobile "on-photo" heading uses a subtler, flatter cream gradient than the desktop one. */
  .product-hero h1.onlight{ background:var(--gradient-onlight-mob); -webkit-background-clip:text; background-clip:text; }
  /* Figma's mobile hero CTA is wider (~340px) than desktop's ~306px. */
  .product-hero-content .btn-catalog{ width:340px; }
  /* Figma's mobile tech carousel is swipe-only, no arrow buttons. */
  .tech-wrap .tech-arrow{ display:none; }
  .modal{ padding:32px 24px; }

  .mobile-nav a{
    font-family:var(--font-body); font-weight:400; font-size:28px;
    text-align:center; padding:0; border-bottom:none;
  }
  /* Figma's own mockup uses gap:60px, but that's sized for 5 links + 1
     button; our real menu has 7 links + 2 buttons, so a proportionally
     smaller gap keeps everything visible without scrolling. */
  .mobile-nav{ gap:36px; justify-content:center; }
  .mobile-nav a:not(.btn) + a.btn{ margin-top:16px; }

  .hero-tag{ font-family:var(--font-body); font-size:32px; line-height:1.125; }
  .hero-bullets li{ gap:5px; font-size:18px; font-weight:500; }

  .bridge-card{
    aspect-ratio:auto;
    flex-direction:row; align-items:center; min-height:0; gap:16px;
    text-align:left; border-radius:var(--radius-md); border-width:2px;
    padding:20px; overflow:visible;
  }
  .bridge-icon{ position:static; width:110px; height:110px; margin:0; align-self:center; flex:0 0 auto; }
  .bridge-card h3{ position:static; width:auto; font-size:clamp(24px,2.6vw,30px); line-height:1.25; text-align:left; }

  .solution-card{ border-radius:var(--radius-md); }
  .tech-card{ border-radius:var(--radius-md); }
  .reviews-track{ gap:16px; padding:8px calc((100% - min(320px,88vw)) / 2) 10px; }
  .review-card{ flex-basis:min(320px,88vw); padding:26px 22px 22px; gap:16px; border-radius:var(--radius-md); }
  .faq-item{ border-radius:var(--radius-md); }
  .faq-q{ padding:22px; }
  .site-footer{ padding-bottom:100px; }
}