/* =================================================================
   I-Floors — main.css
   Дизайн-система «Ink & Orange» — чёрный + оранжевый из логотипа I-FLOORS (см. DESIGN.md).
   Vanilla CSS на токенах: лучшая производительность (Lighthouse),
   строгая система вместо generic-фреймворка.
   ================================================================= */

/* ============================ TOKENS ============================ */
:root {
  /* Бренд: ЧЁРНЫЙ (структура) + ОРАНЖЕВЫЙ (акцент, из логотипа I-FLOORS) + тёплые нейтрали.
     Переменные --forest-*/--clay-* сохранены по именам, но перепривязаны:
     forest-* = тёплый УГОЛЬ (dark-секции), clay-* = ОРАНЖЕВЫЙ бренда. */
  --color-bg:#FAF8F3; --color-surface:#F4F0E8; --color-surface-sunken:#ECE6DA;
  --color-border:#DED8CC; --color-text:#201A15; --color-text-muted:#5A5348; --color-text-subtle:#6E6558;
  --color-primary:#201A15; --color-primary-hover:#3A322A; --color-on-primary:#FAF8F3; --color-primary-soft:#EFE9E1;
  --color-accent:#EF7A1A; --color-accent-soft:#FBE7D2; --color-accent-text:#A8490B; --color-on-accent:#201A15;
  --color-success:#4E9A5A; --color-link:#A8490B; --color-link-hover:#8F400A;

  --forest-100:#E4DBCE; --forest-200:#C7BBAA; --forest-500:#5E5346; --forest-600:#4A4137; --forest-700:#3A322A; --forest-800:#2C251E; --forest-900:#201A15;
  --clay-100:#FBE7D2; --clay-200:#F3C79E; --clay-500:#EF7A1A; --clay-700:#A8490B;
  --stone-100:#F4F0E8; --stone-200:#ECE6DA; --stone-300:#DED8CC; --stone-600:#877E70;

  --font-head:"Lora",Georgia,"Times New Roman",serif;
  --font-body:"Manrope",system-ui,-apple-system,"Segoe UI",sans-serif;

  --fs-display:clamp(3.5rem,2.2rem + 5.5vw,6rem);
  --fs-h2:clamp(2rem,1.4rem + 2.6vw,3rem);
  --fs-h3:clamp(1.5rem,1.2rem + 1.2vw,1.875rem);
  --fs-h4:clamp(1.25rem,1.1rem + 0.6vw,1.5rem);
  --fs-lead:clamp(1.125rem,1rem + 0.5vw,1.375rem);
  --fs-body:1.125rem; --fs-body-sm:1rem; --fs-caption:0.875rem; --fs-eyebrow:0.8125rem; --fs-micro:0.75rem;
  --fs-number:clamp(2rem,1.4rem + 2.4vw,3.25rem);

  --space-4:4px; --space-8:8px; --space-12:12px; --space-16:16px; --space-24:24px; --space-32:32px;
  --space-48:48px; --space-56:56px; --space-64:64px; --space-80:80px; --space-96:96px; --space-120:120px;
  --space-section:clamp(72px,8vw,112px);

  --container:1240px; --container-wide:1440px; --container-prose:680px; --gutter:clamp(20px,5vw,64px);

  --radius-xs:4px; --radius-sm:8px; --radius-md:12px; --radius-lg:16px; --radius-xl:24px; --radius-full:999px;

  --shadow-xs:0 1px 2px rgba(35,32,25,.05);
  --shadow-sm:0 2px 8px -2px rgba(35,32,25,.08);
  --shadow-md:0 10px 28px -10px rgba(35,32,25,.12);
  --shadow-lg:0 24px 56px -20px rgba(35,32,25,.16);
  --shadow-decor:0 34px 64px -22px rgba(35,32,25,.24);
  --ring-focus:0 0 0 3px rgba(239,122,26,.18);

  --ease-out:cubic-bezier(.4,0,.2,1); --ease-expo:cubic-bezier(.16,1,.3,1);
  --dur-fast:200ms; --dur-base:350ms; --dur-slow:550ms; --stagger:80ms;
}

/* ============================ RESET / BASE ============================ */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{color-scheme:light only}
html{-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;scroll-behavior:smooth}
body{background:var(--color-bg);color:var(--color-text);font-family:var(--font-body);
  font-size:var(--fs-body);line-height:1.65;font-feature-settings:"kern" 1;overflow-x:hidden}
img{max-width:100%;display:block;height:auto}
button,input{font:inherit;color:inherit}
a,button{-webkit-tap-highlight-color:transparent}
a{color:var(--color-link);text-decoration:none;text-underline-offset:3px;transition:color var(--dur-fast) var(--ease-out)}
a:hover{color:var(--color-link-hover)}
p{text-wrap:pretty}
h1,h2,h3{font-family:var(--font-head);font-weight:600;color:var(--color-text);text-wrap:balance}
h1{font-size:var(--fs-display);line-height:1.05;letter-spacing:-.02em}
h2{font-size:var(--fs-h2);line-height:1.15;letter-spacing:-.015em}
h3{font-size:var(--fs-h3);line-height:1.2;letter-spacing:-.01em}
h4{font-family:var(--font-body);font-weight:700;font-size:var(--fs-h4);line-height:1.3}
h5{font-family:var(--font-body);font-weight:700;font-size:var(--fs-body-sm);letter-spacing:.02em}
::selection{background:var(--color-accent-soft);color:var(--color-accent-text)}
:focus-visible{outline:2px solid var(--color-primary);outline-offset:3px}

.container{width:100%;max-width:var(--container);margin-inline:auto;padding-inline:var(--gutter)}
/* anchor targets clear the sticky nav on native/reduced-motion jumps */
section[id],main[id]{scroll-margin-top:clamp(72px,10vh,96px)}
.section{padding-block:var(--space-section);border-bottom:1px solid var(--color-border)}
.section-lead{max-width:var(--container-prose);font-size:var(--fs-lead);color:var(--color-text-muted);margin-top:var(--space-16)}
.lead{font-size:var(--fs-lead);color:var(--color-text-muted)}
.caption{font-size:var(--fs-caption);color:var(--color-text-subtle);line-height:1.45;max-width:none}
.eyebrow{font-size:var(--fs-eyebrow);font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--color-text-subtle);display:block;margin-bottom:var(--space-16)}
.eyebrow--light{color:var(--forest-200)}
.num,.price,.calc-value{font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1,"lnum" 1}
.accent-ink{color:var(--color-primary)}
.ph{color:var(--color-accent-text);background:var(--color-accent-soft);padding:0 .35em;border-radius:var(--radius-xs);
  font-size:.9em;font-weight:600;white-space:nowrap}
.ph-mark{color:var(--color-accent-text);font-weight:700;cursor:help}
sup.ph-mark{font-size:.7em}
.skip-link{position:absolute;left:-9999px;top:0;background:var(--color-primary);color:#fff;padding:12px 20px;z-index:200;border-radius:0 0 var(--radius-sm) 0}
.skip-link:focus{left:0}

/* h2 default top margin after eyebrow handled inline; give section headings breathing room */
.section h2{margin-bottom:0}

/* ============================ BUTTONS ============================ */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-8);
  font-family:var(--font-body);font-weight:600;letter-spacing:.01em;line-height:1;
  padding:16px 28px;border-radius:var(--radius-md);border:1.5px solid transparent;cursor:pointer;
  touch-action:manipulation;
  transition:transform var(--dur-fast) var(--ease-out),box-shadow var(--dur-fast) var(--ease-out),background var(--dur-fast) var(--ease-out),color var(--dur-fast) var(--ease-out),border-color var(--dur-fast) var(--ease-out);
  text-align:center;min-height:52px}
.btn:active{transform:translateY(0) scale(.97)}
.btn--sm{padding:10px 18px;min-height:44px;font-size:var(--fs-body-sm)}
.btn--xs{padding:7px 14px;min-height:36px;font-size:var(--fs-caption);border-radius:var(--radius-sm)}
.btn--lg{padding:18px 34px;min-height:58px;font-size:var(--fs-h4)}
.btn--block{width:100%}
.btn--primary{background:var(--color-primary);color:var(--color-on-primary);box-shadow:var(--shadow-sm)}
.btn--primary:hover{background:var(--color-primary-hover);color:var(--color-on-primary);transform:translateY(-1px);box-shadow:var(--shadow-md)}
.btn--coprimary{background:var(--color-accent);color:var(--color-on-accent);box-shadow:var(--shadow-sm)}
.btn--coprimary:hover{background:#D96A10;color:var(--color-on-accent);transform:translateY(-1px);box-shadow:var(--shadow-md)}
.btn--secondary{background:transparent;color:var(--color-primary);border-color:var(--color-primary)}
.btn--secondary:hover{background:var(--color-primary-soft);color:var(--color-primary)}
.btn--tertiary{background:transparent;color:var(--color-text-muted);border-color:transparent;padding-inline:8px;min-height:auto}
.btn--tertiary:hover{color:var(--color-primary);text-decoration:underline}

/* ============================ NAV ============================ */
.nav{position:sticky;top:0;z-index:100;background:rgba(250,248,243,.96);backdrop-filter:blur(14px) saturate(1.1);
  transition:box-shadow var(--dur-base) var(--ease-out),border-color var(--dur-base) var(--ease-out);border-bottom:1px solid var(--color-border)}
.nav.is-scrolled{border-bottom-color:var(--color-border);box-shadow:var(--shadow-sm)}
.nav__inner{max-width:var(--container-wide);margin-inline:auto;padding:12px var(--gutter);display:flex;align-items:center;gap:var(--space-24);min-height:72px}
.brand{color:var(--color-text);display:inline-flex;align-items:center}
.brand__logo{height:34px;width:auto;display:block}
.brand__word{font-family:var(--font-head);font-weight:600;font-size:1.5rem;letter-spacing:-.01em}
.brand__dot{color:var(--color-primary)}
.nav__menu{display:flex;gap:var(--space-24);margin-inline:auto}
.nav__menu a{color:var(--color-text);font-size:var(--fs-body-sm);font-weight:600;position:relative}
.nav__menu a::after{content:"";position:absolute;left:0;right:0;bottom:-4px;height:2px;background:var(--color-primary);transform:scaleX(0);transform-origin:left;transition:transform var(--dur-fast) var(--ease-expo)}
.nav__menu a:hover{color:var(--color-primary)}
.nav__menu a:hover::after{transform:scaleX(1)}
.nav__actions{display:flex;align-items:center;gap:var(--space-16)}
.nav__phone{font-weight:600;color:var(--color-text);white-space:nowrap}
.stock-badge{display:inline-flex;align-items:center;gap:6px;font-size:var(--fs-caption);color:var(--color-text-muted);white-space:nowrap}
.stock-dot{width:8px;height:8px;border-radius:50%;background:var(--color-success);box-shadow:0 0 0 0 rgba(78,154,90,.5);animation:pulse 2.4s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(78,154,90,.45)}70%{box-shadow:0 0 0 7px rgba(78,154,90,0)}100%{box-shadow:0 0 0 0 rgba(78,154,90,0)}}
.nav__burger{display:none;flex-direction:column;gap:5px;background:none;border:none;padding:8px;cursor:pointer}
.nav__burger span{width:24px;height:2px;background:var(--color-text);transition:transform var(--dur-fast) var(--ease-out),opacity var(--dur-fast)}
.nav__burger[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav__burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.nav__burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

.drawer{position:fixed;inset:60px 0 0;z-index:99;background:var(--color-bg);padding:var(--space-32) var(--gutter);
  display:flex;flex-direction:column;gap:var(--space-24);transform:translateY(-8px);opacity:0;transition:opacity var(--dur-base),transform var(--dur-base)}
.drawer:not([hidden]){opacity:1;transform:translateY(0)}
.drawer__menu{display:flex;flex-direction:column;gap:var(--space-16)}
.drawer__menu a{font-family:var(--font-head);font-size:var(--fs-h3);color:var(--color-text)}
.drawer__hint{color:var(--color-text-subtle);font-size:var(--fs-caption)}

/* ============================ HERO ============================ */
.hero{position:relative;min-height:clamp(600px,86vh,900px);display:flex;flex-direction:column;justify-content:flex-end;
  overflow:hidden;border-bottom:1px solid var(--color-border)}
.hero__media{position:absolute;inset:0;z-index:0}
.hero__media img{width:100%;height:100%;object-fit:cover;will-change:transform}
.hero__scrim{position:absolute;inset:0;background:
  linear-gradient(180deg,rgba(26,23,18,.28) 0%,rgba(26,23,18,.05) 38%,rgba(26,23,18,.02) 55%,rgba(35,32,25,.62) 100%)}
.hero__content{position:relative;z-index:2;padding-bottom:var(--space-48);padding-top:var(--space-120);color:#fff}
.hero__eyebrow{color:rgba(255,255,255,.85)}
.hero__title{color:#fff;max-width:16ch}
.hero__title .accent-ink{color:#F2954E}
.hero__sub{color:rgba(255,255,255,.92);max-width:52ch;margin-top:var(--space-24)}
.hero__cta{display:flex;flex-wrap:wrap;gap:var(--space-16);margin-top:var(--space-32)}
.hero__microcopy{color:rgba(255,255,255,.78);margin-top:var(--space-16)}

.trust-strip{position:relative;z-index:2;background:var(--forest-900);color:#fff}
.trust-strip__inner{display:flex;flex-wrap:wrap;gap:var(--space-16) var(--space-32);padding-block:var(--space-16);justify-content:space-between}
.trust-item{font-size:var(--fs-caption);color:var(--forest-200);display:flex;gap:6px;align-items:baseline}
.trust-item b{color:#fff;font-weight:700}

/* chips */
.chips-section{padding-block:var(--space-32)}
.chips-lead{font-weight:600;margin-bottom:var(--space-16);display:flex;flex-wrap:wrap;gap:10px;align-items:baseline}
.chips{display:flex;flex-wrap:wrap;gap:var(--space-12)}
.chip{display:inline-flex;align-items:center;padding:10px 18px;border-radius:var(--radius-full);
  background:var(--color-surface);border:1px solid var(--color-border);color:var(--color-text-muted);
  font-size:var(--fs-body-sm);font-weight:500;cursor:pointer;touch-action:manipulation;
  transition:border-color var(--dur-fast) var(--ease-out),color var(--dur-fast) var(--ease-out),background var(--dur-fast) var(--ease-out),transform var(--dur-fast) var(--ease-out)}
.chip:hover{border-color:var(--color-primary);color:var(--color-primary);background:var(--color-primary-soft)}
.chip:active{transform:scale(.97)}
.chip--sm{padding:8px 14px;font-size:var(--fs-caption);border:1px solid transparent;background:none;min-height:36px}
.chip--sm.is-active{background:var(--color-primary);color:#fff}

/* ============================ CHAIN ============================ */
.chain h2{margin-top:var(--space-8)}
.chain__grid{display:grid;gap:var(--space-32);margin-top:var(--space-48)}
.chain__row{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-xl);padding:var(--space-32)}
.chain__row--ifloors{background:var(--color-accent-soft);border-color:var(--clay-200)}
.chain__label{display:inline-block;font-size:var(--fs-eyebrow);font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  padding:5px 12px;border-radius:var(--radius-full);margin-bottom:var(--space-24)}
.chain__label--retail{background:var(--color-surface-sunken);color:var(--color-text-muted)}
.chain__label--ifloors{background:var(--color-primary);color:#fff}
.chain__nodes{list-style:none;display:flex;align-items:stretch;gap:var(--space-8);flex-wrap:wrap}
.chain-node{flex:1;min-width:120px;background:var(--color-bg);border:1px solid var(--color-border);border-radius:var(--radius-lg);
  padding:var(--space-16);display:flex;flex-direction:column;gap:4px;text-align:center;align-items:center}
.chain-node__ic{font-size:1.6rem}
.chain-node b{font-size:var(--fs-body-sm);font-weight:700}
.chain-node span{font-size:var(--fs-micro);color:var(--color-text-subtle);line-height:1.35}
.chain-node--green{border-color:var(--clay-200);background:#fff}
.chain-node--you{background:var(--color-text);color:#fff}
.chain-node--you span{color:rgba(255,255,255,.7)}
.chain-node--green.chain-node--you{background:var(--color-accent);color:var(--color-on-accent)}
.chain-node--green.chain-node--you span{color:rgba(32,26,21,.72)}
.chain-markup{align-self:center;font-size:var(--fs-caption);font-weight:700;color:var(--color-text-muted);
  background:var(--color-surface-sunken);border:1px solid var(--color-border);border-radius:var(--radius-full);padding:6px 12px;white-space:nowrap}
.chain__foot{margin-top:var(--space-24);font-size:var(--fs-body-sm);color:var(--color-text-muted)}
.chain__foot b{color:var(--color-text);font-weight:700}
.chain__foot--ifloors b{color:var(--color-accent-text)}
.chain__bridge{margin-top:var(--space-48);display:flex;flex-direction:column;gap:var(--space-16);align-items:flex-start;max-width:var(--container-prose)}
.chain__bridge p{color:var(--color-text)}

/* ============================ CALCULATOR ============================ */
.calc{background:var(--color-surface-sunken)}
.calc h2{margin-top:var(--space-8)}
.calc__panel{margin-top:var(--space-48);display:grid;grid-template-columns:1fr 1fr;gap:var(--space-48);
  background:var(--color-bg);border:1px solid var(--color-border);border-radius:var(--radius-xl);padding:var(--space-48);box-shadow:var(--shadow-md)}
.calc__form{display:flex;flex-direction:column;gap:var(--space-32)}
.field label{display:block;font-weight:600;font-size:var(--fs-body-sm);margin-bottom:var(--space-12)}
.field__hint{font-size:var(--fs-caption);color:var(--color-text-subtle);margin-top:var(--space-8)}
.stepper{display:flex;align-items:center;gap:var(--space-8)}
.stepper input{width:100%;height:52px;border:1.5px solid var(--color-border);border-radius:var(--radius-sm);
  background:var(--color-surface);padding:0 16px;font-size:var(--fs-h4);font-weight:700;font-variant-numeric:tabular-nums;text-align:center}
.stepper input:focus{outline:none;border-color:var(--color-primary);box-shadow:var(--ring-focus)}
.stepper__btn{width:52px;height:52px;flex:none;border:1.5px solid var(--color-border);border-radius:var(--radius-sm);
  background:var(--color-surface);font-size:1.5rem;font-weight:600;cursor:pointer;color:var(--color-primary);
  transition:border-color var(--dur-fast) var(--ease-out),background var(--dur-fast) var(--ease-out),transform var(--dur-fast) var(--ease-out)}
.stepper__btn:hover{border-color:var(--color-primary);background:var(--color-primary-soft)}
.segmented{display:flex;gap:6px;background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-md);padding:5px}
.segmented__opt{flex:1}
.segmented__opt input{position:absolute;opacity:0;pointer-events:none}
.segmented__opt span{display:flex;flex-direction:column;align-items:center;gap:2px;padding:10px 6px;border-radius:var(--radius-sm);
  font-weight:600;font-size:var(--fs-body-sm);cursor:pointer;min-height:44px;justify-content:center;
  transition:background var(--dur-fast) var(--ease-out),color var(--dur-fast) var(--ease-out);text-align:center}
.segmented__opt small{font-weight:500;font-size:var(--fs-micro);color:var(--color-text-subtle)}
.segmented__opt input:checked + span{background:var(--color-primary);color:#fff}
.segmented__opt input:checked + span small{color:rgba(255,255,255,.75)}
.segmented__opt input:focus-visible + span{outline:2px solid var(--color-primary);outline-offset:2px}
.checkbox{display:flex;align-items:center;gap:var(--space-12);cursor:pointer;font-size:var(--fs-body-sm)}
.checkbox input{width:20px;height:20px;accent-color:var(--color-primary)}

.calc__result{background:var(--color-surface-sunken);border-radius:var(--radius-lg);padding:var(--space-32);display:flex;flex-direction:column}
.calc__result-title{font-weight:600;margin-bottom:var(--space-24)}
.calc__rows{display:flex;flex-direction:column;gap:var(--space-16);margin-bottom:var(--space-16)}
.calc__row{display:flex;justify-content:space-between;align-items:baseline;gap:var(--space-16);padding-bottom:var(--space-16);border-bottom:1px solid var(--color-border)}
.calc__row dt{font-size:var(--fs-caption);text-transform:uppercase;letter-spacing:.04em;color:var(--color-text-subtle)}
.calc__row dd{font-size:var(--fs-h4);font-weight:700;font-variant-numeric:tabular-nums;white-space:nowrap}
.calc__row--save{border-bottom:none;padding-top:var(--space-8)}
.calc__row--save dt{color:var(--color-text)}
.calc__row--save dd{font-size:var(--fs-number);color:var(--color-accent-text);font-weight:800}
.calc__note{font-size:var(--fs-body-sm);color:var(--color-text-muted);margin-bottom:var(--space-16)}
.calc__disclaimer{font-size:var(--fs-micro);color:var(--color-text-subtle);margin-bottom:var(--space-24)}
.calc__cta{display:flex;flex-direction:column;gap:var(--space-12);margin-top:auto}
.calc__cta-hint{margin-top:var(--space-12)}

/* ============================ LINES (bento) ============================ */
.lines h2{margin-top:var(--space-8)}
.lines__grid{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--space-24);margin-top:var(--space-48)}
.line-card{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-lg);overflow:hidden;display:flex;flex-direction:column}
/* SPC — широкая горизонтальная фичер-карточка: фото слева, контент справа (без пустот) */
.line-card--lg{grid-column:1/-1;flex-direction:row;align-items:stretch}
.line-card__media{aspect-ratio:16/10;overflow:hidden}
.line-card--lg .line-card__media{aspect-ratio:auto;flex:0 0 48%;min-height:100%}
.line-card--lg .line-card__body{flex:1;justify-content:center}
.line-card__media img{width:100%;height:100%;object-fit:cover;transition:transform var(--dur-slow) var(--ease-expo)}
.line-card:hover .line-card__media img{transform:scale(1.04)}
.line-card__body{padding:var(--space-32);display:flex;flex-direction:column;gap:var(--space-12)}
.tag{display:inline-block;align-self:flex-start;font-size:var(--fs-caption);font-weight:600;padding:5px 12px;border-radius:var(--radius-full)}
.tag--primary{background:var(--color-primary-soft);color:var(--color-primary)}
.line-card__cols{font-size:var(--fs-caption);color:var(--color-text-subtle);font-weight:600}
.line-card h3{margin-top:2px}
.ticks{list-style:none;display:flex;flex-direction:column;gap:var(--space-12);margin-top:var(--space-8)}
.ticks li{position:relative;padding-left:28px;font-size:var(--fs-body-sm);color:var(--color-text-muted)}
.ticks li::before{content:"✓";position:absolute;left:0;top:0;color:var(--color-primary);font-weight:800}
.ticks b{color:var(--color-text)}
.line-card__for{font-size:var(--fs-body-sm);color:var(--color-text);font-weight:600;margin-top:var(--space-8)}
.line-card__honest{font-size:var(--fs-caption);color:var(--color-accent-text);background:var(--color-accent-soft);
  border-radius:var(--radius-sm);padding:var(--space-12) var(--space-16);margin-top:var(--space-8)}
.lines__cta{margin-top:var(--space-32);display:flex;flex-direction:column;gap:var(--space-12);align-items:flex-start}

/* ============================ DECORS ============================ */
.decors h2{margin-top:var(--space-8)}
.decor-filters{display:flex;flex-wrap:wrap;gap:var(--space-8);margin-top:var(--space-32);margin-bottom:var(--space-32)}
.decor-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-24)}
.decor-card{border-radius:var(--radius-xl);overflow:hidden;background:var(--color-surface);border:1px solid var(--color-border);
  transition:transform var(--dur-base) var(--ease-out),box-shadow var(--dur-base) var(--ease-out)}
.decor-card.is-hidden{display:none}
.decor-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-decor)}
.decor-card__media{position:relative;aspect-ratio:1;overflow:hidden}
.decor-card__media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.decor-card__room{opacity:0;transform:scale(1.04);transition:opacity var(--dur-slow) var(--ease-expo),transform var(--dur-slow) var(--ease-expo)}
.decor-card:hover .decor-card__room,.decor-card.is-flipped .decor-card__room{opacity:1;transform:scale(1)}
.decor-card__info{display:flex;align-items:center;justify-content:space-between;gap:var(--space-12);padding:var(--space-16)}
.decor-card__info b{font-size:var(--fs-body-sm)}
.decor-card__info .caption{display:block}

/* ============================ PROOF ============================ */
.proof h2{margin-top:var(--space-8)}
.proof__grid{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--space-24);margin-top:var(--space-48)}
.proof-card{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-lg);padding:var(--space-32);display:flex;flex-direction:column;gap:var(--space-12)}
.proof-card h4{color:var(--color-primary)}
.proof-card p{font-size:var(--fs-body-sm);color:var(--color-text-muted)}
.proof-card__means b{color:var(--color-text)}
.link-arrow{font-weight:600;margin-top:auto}
.stress{margin-top:var(--space-64);background:var(--forest-900);color:#fff;border-radius:var(--radius-xl);padding:var(--space-48)}
.stress__title{font-family:var(--font-head);font-size:var(--fs-h3);color:#fff;margin-bottom:var(--space-32)}
.stress__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--space-24)}
.stress-card{display:flex;flex-direction:column;gap:var(--space-8)}
.stress-card__ic{font-size:2rem}
.stress-card b{color:#fff;font-size:var(--fs-h4);font-family:var(--font-body)}
.stress-card p{font-size:var(--fs-caption);color:var(--forest-200)}
.stress__foot{margin-top:var(--space-32);color:var(--forest-100);max-width:var(--container-prose);font-size:var(--fs-body-sm)}

/* ============================ SAMPLES ============================ */
.samples{background:var(--color-accent-soft)}
.samples__inner{display:grid;grid-template-columns:1.1fr .9fr;gap:var(--space-64);align-items:center}
.samples h2{margin-top:var(--space-8)}
.samples__steps{list-style:none;counter-reset:s;display:flex;flex-direction:column;gap:var(--space-16);margin-top:var(--space-32)}
.samples__steps li{counter-increment:s;position:relative;padding-left:44px;color:var(--color-text-muted)}
.samples__steps li::before{content:counter(s);position:absolute;left:0;top:-2px;width:30px;height:30px;border-radius:50%;
  background:var(--color-primary);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:var(--fs-body-sm)}
.samples__steps b{color:var(--color-text)}
.trust-mini{list-style:none;display:flex;flex-direction:column;gap:8px;margin-top:var(--space-24)}
.trust-mini li{position:relative;padding-left:24px;font-size:var(--fs-caption);color:var(--color-text-muted)}
.trust-mini li::before{content:"—";position:absolute;left:0;color:var(--color-primary)}
.samples__cta{margin-top:var(--space-32);display:flex;flex-direction:column;gap:var(--space-12);align-items:flex-start}
.samples__visual{display:flex;flex-direction:column;gap:var(--space-16);align-items:center;text-align:center}
.sample-swatches{display:flex;gap:var(--space-12);perspective:800px}
.sample-swatches span{width:78px;height:110px;border-radius:var(--radius-sm);box-shadow:var(--shadow-md);
  transform:rotate(calc((var(--i) - 2) * 5deg)) translateY(calc(var(--i) * -2px));border:3px solid #fff}
.sample-swatches span:nth-child(1){background:linear-gradient(160deg,#D9C4A3,#C4A883)}
.sample-swatches span:nth-child(2){background:linear-gradient(160deg,#6B5442,#4A3728)}
.sample-swatches span:nth-child(3){background:linear-gradient(160deg,#B9B2A6,#98917F)}
.sample-swatches span:nth-child(4){background:linear-gradient(160deg,#A9A29A,#837C72)}
.sample-swatches span:nth-child(5){background:linear-gradient(160deg,#E6DECE,#CDBFA5)}

/* ============================ LOGISTICS ============================ */
.logistics h2{margin-top:var(--space-8)}
.logistics__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-24);margin-top:var(--space-48)}
.log-card{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-lg);overflow:hidden;display:flex;flex-direction:column}
.log-card__media{aspect-ratio:16/10;overflow:hidden}
.log-card__media img{width:100%;height:100%;object-fit:cover}
.log-card__media--regions{display:flex;align-items:center;justify-content:center;background:var(--color-primary-soft);font-size:3rem}
.log-card h3{padding:var(--space-24) var(--space-24) 0;font-size:var(--fs-h4);font-family:var(--font-body);font-weight:700}
.log-card p{padding:var(--space-12) var(--space-24);font-size:var(--fs-body-sm);color:var(--color-text-muted);flex:1}
.badge{display:inline-flex;align-items:center;gap:6px;margin:0 var(--space-24) var(--space-24);align-self:flex-start;
  padding:6px 14px;border-radius:var(--radius-full);font-size:var(--fs-caption);font-weight:600}
.badge--stock{background:var(--color-primary-soft);color:var(--color-primary)}
.badge--soft{background:var(--color-surface-sunken);color:var(--color-text-muted)}
.logistics__foot{margin-top:var(--space-32);font-weight:600;color:var(--color-text)}

/* ============================ HOW ============================ */
.how h2{margin-top:var(--space-8)}
.how__steps{list-style:none;display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-32);margin-top:var(--space-48);counter-reset:h}
.how-step{position:relative;padding-top:var(--space-16);border-top:2px solid var(--color-primary)}
.how-step__n{font-family:var(--font-head);font-size:2rem;color:var(--color-primary);font-weight:700}
.how-step h3{margin:var(--space-12) 0}
.how-step p{font-size:var(--fs-body-sm);color:var(--color-text-muted)}
.how__cta{margin-top:var(--space-48);display:flex;flex-direction:column;gap:var(--space-12);align-items:flex-start}

/* ============================ REVIEWS ============================ */
.stat-strip{background:var(--forest-900);color:#fff}
.stat-strip__inner{display:flex;flex-wrap:wrap;justify-content:space-between;gap:var(--space-24);padding-block:var(--space-48)}
.stat{display:flex;flex-direction:column;gap:4px;min-width:140px}
.stat b{font-size:var(--fs-number);font-weight:800;color:#fff;font-variant-numeric:tabular-nums;line-height:1}
.stat span{font-size:var(--fs-caption);color:var(--forest-200)}
.reviews h2{margin-top:var(--space-8)}
.reviews__grid{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--space-24);margin-top:var(--space-48)}
.review{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-lg);padding:var(--space-32);position:relative}
.review::before{content:"“";font-family:var(--font-head);font-size:4rem;color:var(--forest-200);position:absolute;top:8px;left:20px;line-height:1}
.review blockquote{position:relative;font-size:var(--fs-body);color:var(--color-text);padding-top:var(--space-24)}
.review figcaption{margin-top:var(--space-16);font-size:var(--fs-caption);color:var(--color-text-subtle)}
.review figcaption b{color:var(--color-text)}
.reviews__cta{margin-top:var(--space-32);display:flex;flex-direction:column;gap:var(--space-12);align-items:flex-start}

/* ============================ RISK ============================ */
.risk h2{margin-top:var(--space-8)}
.risk__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--space-24);margin-top:var(--space-48)}
.risk-card{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-lg);padding:var(--space-24);display:flex;flex-direction:column;gap:var(--space-8)}
.risk-card__ic{font-size:1.8rem}
.risk-card h4{font-size:var(--fs-h4)}
.risk-card p{font-size:var(--fs-caption);color:var(--color-text-muted)}
.risk-card .ph{font-size:1em}

/* ============================ FAQ ============================ */
.faq h2{margin-top:var(--space-8)}
.faq__list{margin-top:var(--space-48);max-width:860px}
.faq-item{border-bottom:1px solid var(--color-border)}
.faq-item summary{list-style:none;cursor:pointer;padding:var(--space-24) 40px var(--space-24) 0;position:relative;
  font-family:var(--font-body);font-weight:700;font-size:var(--fs-h4);color:var(--color-text)}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{content:"+";position:absolute;right:0;top:50%;transform:translateY(-50%);font-size:1.6rem;font-weight:400;color:var(--color-primary);transition:transform var(--dur-fast)}
.faq-item[open] summary::after{content:"−"}
.faq-item__body{padding-bottom:var(--space-24);animation:faqIn var(--dur-base) var(--ease-expo)}
.faq-item__body p{max-width:70ch;color:var(--color-text-muted);font-size:var(--fs-body-sm)}
@keyframes faqIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:translateY(0)}}

/* ============================ FINAL ============================ */
.final{background:var(--forest-900);color:#fff;border-bottom:none}
.final__inner{text-align:center;display:flex;flex-direction:column;align-items:center}
.final__title{color:#fff;max-width:22ch}
.final__title{--x:0}
.final__recap{list-style:none;display:flex;flex-direction:column;gap:var(--space-12);margin-top:var(--space-32);max-width:640px}
.final__recap li{position:relative;padding-left:28px;color:var(--forest-100);font-size:var(--fs-body-sm)}
.final__recap li::before{content:"✓";position:absolute;left:0;color:#F2954E;font-weight:800}
.final__text{color:var(--forest-100);max-width:600px;margin-top:var(--space-24)}
.final__cta{display:flex;flex-wrap:wrap;gap:var(--space-16);justify-content:center;margin-top:var(--space-32)}
.final__hint{color:var(--forest-200);margin-top:var(--space-16)}

/* ============================ FOOTER ============================ */
.footer{background:var(--color-bg);padding-block:var(--space-64) var(--space-32)}
.footer__inner{display:grid;grid-template-columns:2fr 1fr 1fr 1.4fr;gap:var(--space-48)}
.footer__logo{height:44px;width:auto}
.footer__slogan{font-family:var(--font-head);font-size:var(--fs-h4);margin-top:var(--space-12)}
.footer__pos{font-size:var(--fs-caption);color:var(--color-text-subtle);margin-top:var(--space-8);max-width:34ch}
.footer__col{display:flex;flex-direction:column;gap:var(--space-12)}
.footer__col h5{color:var(--color-text-subtle);text-transform:uppercase;letter-spacing:.08em;margin-bottom:var(--space-4)}
.footer__col a{color:var(--color-text-muted);font-size:var(--fs-body-sm)}
.footer__col a:hover{color:var(--color-primary)}
.footer__contacts p{font-size:var(--fs-body-sm);color:var(--color-text-muted)}
.footer__phone{font-weight:700;font-size:var(--fs-h4);color:var(--color-text)!important}
.footer__legal{margin-top:var(--space-48);padding-top:var(--space-24);border-top:1px solid var(--color-border);display:flex;justify-content:space-between;flex-wrap:wrap;gap:var(--space-12)}

/* ============================ MOBILE STICKY BAR ============================ */
.mbar{position:fixed;bottom:0;left:0;right:0;z-index:90;display:none;gap:var(--space-12);
  padding:var(--space-12) var(--space-16) calc(var(--space-12) + env(safe-area-inset-bottom));
  background:var(--color-surface);border-top:1px solid var(--color-border);box-shadow:var(--shadow-lg);
  transform:translateY(120%);transition:transform var(--dur-base) var(--ease-expo)}
.mbar.is-visible{transform:translateY(0)}
.mbar .btn{flex:1;min-height:48px;padding:12px}

/* ============================ REVEAL ANIM ============================ */
/* КОНТЕНТ ВСЕГДА ВИДЕН. Никакого opacity:0 — чтобы исключить «белое на белом».
   Мягкое появление — только как чистый бонус, гарантированно заканчивается видимым:
   анимация идёт от лёгкого смещения к нулю, при любом сбое остаётся финальное (видимое) состояние. */
html.js [data-reveal]{animation:reveal-up var(--dur-base) var(--ease-expo) both}
html.js [data-reveal].is-in{animation:none}
@keyframes reveal-up{from{opacity:.001;transform:translateY(14px)}to{opacity:1;transform:none}}

/* ============================ MICRO-POLISH ============================ */
/* subtle image outlines — consistent depth on any background (make-interfaces-feel-better) */
.line-card__media img,.log-card__media img,.decor-card__media img{outline:1px solid rgba(35,32,25,.06);outline-offset:-1px}
/* inline monoline icons — single sizing system replaces emoji */
.chain-node__ic,.stress-card__ic,.risk-card__ic,.regions-ic{display:inline-flex;line-height:0}
.chain-node__ic svg{width:26px;height:26px}
.stress-card__ic{color:#F2954E}
.stress-card__ic svg{width:28px;height:28px}
.risk-card__ic{color:var(--color-primary)}
.risk-card__ic svg{width:26px;height:26px}
.regions-ic{color:var(--color-primary)}
.regions-ic svg{width:44px;height:44px}
/* segmented control: hover affordance on the unselected options */
.segmented__opt input:not(:checked)+span:hover{background:var(--color-primary-soft);color:var(--color-primary)}
/* stepper: press feedback + intentional touch behaviour */
.stepper__btn{touch-action:manipulation}
.stepper__btn:active{transform:scale(.94)}
/* FAQ: hover cue + animated toggle marker */
.faq-item summary{touch-action:manipulation;transition:color var(--dur-fast) var(--ease-out)}
.faq-item summary:hover{color:var(--color-primary)}
/* decor filter chips align hit target */
.decor-filters .chip--sm{min-height:40px}

/* ============================ RESPONSIVE ============================ */
@media (max-width:1024px){
  .nav__menu{display:none}
  .calc__panel{grid-template-columns:1fr;gap:var(--space-32);padding:var(--space-32)}
  .decor-grid{grid-template-columns:repeat(2,1fr)}
  .stress__grid{grid-template-columns:repeat(2,1fr)}
  .risk__grid{grid-template-columns:repeat(2,1fr)}
  .logistics__grid{grid-template-columns:1fr}
  .how__steps{grid-template-columns:1fr}
  .samples__inner{grid-template-columns:1fr;gap:var(--space-32)}
  .footer__inner{grid-template-columns:1fr 1fr}
}
@media (max-width:768px){
  .nav__actions .stock-badge,.nav__actions .nav__phone,.nav__actions .btn{display:none}
  .nav__burger{display:flex}
  .nav__inner{min-height:60px;padding:10px var(--gutter)}
  .lines__grid{grid-template-columns:1fr}
  .line-card--lg{grid-column:auto;flex-direction:column}
  .line-card--lg .line-card__media{flex:none;aspect-ratio:16/10}
  .proof__grid{grid-template-columns:1fr}
  .reviews__grid{grid-template-columns:1fr}
  .chain__nodes{flex-direction:column}
  .chain-node{min-width:0}
  .chain-markup{align-self:flex-start}
  .mbar{display:flex}
  body{padding-bottom:76px}
  .footer__inner{grid-template-columns:1fr}
  .hero__content{padding-top:var(--space-64)}
  .hero__title{font-size:clamp(2.25rem,7.5vw,3rem);line-height:1.08}
  .hero__sub{font-size:var(--fs-body-sm);margin-top:var(--space-16)}
  .hero{min-height:auto}
  .stress{padding:var(--space-32)}
  .stress__grid{grid-template-columns:1fr}
  .decor-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:480px){
  .decor-grid{grid-template-columns:1fr}
  .risk__grid{grid-template-columns:1fr}
  .trust-strip__inner{flex-direction:column;gap:var(--space-8)}
  /* keep H1 + subhead + first CTA within the first screen on ~390px */
  .hero__content{padding-top:var(--space-48);padding-bottom:var(--space-32)}
  .hero__cta{gap:var(--space-12)}
  .hero__cta .btn{width:100%}
  .final__cta .btn{width:100%}
}

/* ============================ REDUCED MOTION ============================ */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
  [data-reveal]{opacity:1;transform:none}
  .stock-dot{animation:none}
  html{scroll-behavior:auto}
}

/* ============================ DARK MODE ============================ */
/* Тёмная тема отключена намеренно: бренд «Ink & Orange» — тёплый светлый.
   Форсируем светлую схему у ВСЕХ, независимо от настроек ОС (иначе dark ломает контраст). */