/* ============================================================
   WIN WIN HOUSE — финальная версия, единственный стиль
   ------------------------------------------------------------
   Тон: инженерный, спокойный. Один акцент, цифры моноширинные,
   ни одной декоративной картинки — только рендеры продукта.
   ============================================================ */

:root{
  --paper:#f3f1eb;
  --card:#fff;
  --sunk:#eceadf;      /* фон сцены и «утопленных» блоков */
  --ink:#16171a;
  --dim:#5f6367;
  --faint:#96999c;
  --line:#dedad0;
  --line-s:#e9e6dd;    /* мягкая линия внутри карточек */
  --acc:#c8481f;       /* терракота — единственный акцент */
  --acc-w:#fdece5;
  --ok:#2c6e5b;
  --ok-w:#e6f1ec;
  --warn-w:#fcf3e2;
  --warn-l:#ecdcb8;
  --warn-t:#7a5a1e;
  --r:14px;
  --r-s:9px;
  --ease:cubic-bezier(.22,1,.36,1);
  --shadow:0 1px 2px rgba(20,18,14,.04), 0 8px 28px rgba(20,18,14,.06);
  --shadow-l:0 2px 6px rgba(20,18,14,.06), 0 22px 50px rgba(20,18,14,.11);
}

*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  background:var(--paper);color:var(--ink);
  font-family:Inter,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  font-size:16px;line-height:1.55;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
a{color:inherit;text-decoration:none}
svg{display:block}
img{max-width:100%}
button,input,select,textarea{font:inherit;color:inherit}
table{border-collapse:collapse;width:100%}
:focus-visible{outline:2px solid var(--acc);outline-offset:3px;border-radius:4px}
::selection{background:var(--ink);color:var(--paper)}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
  html{scroll-behavior:auto}
}

/* ---------- сетка страницы ---------- */
.wrap{max-width:1280px;margin:0 auto;padding:0 22px}
.narrow{max-width:900px;margin:0 auto;padding:0 22px}
.sec{padding:72px 0}
.sec-s{padding:40px 0}
.rule{border-top:1px solid var(--line)}
@media (max-width:700px){.sec{padding:48px 0}.sec-s{padding:30px 0}}

/* ---------- типографика ---------- */
h1,h2,h3,h4{font-weight:640;letter-spacing:-.032em;line-height:1.07;text-wrap:balance}
.d1{font-size:clamp(2.3rem,5.4vw,4.15rem);letter-spacing:-.042em}
.d2{font-size:clamp(1.65rem,3.3vw,2.6rem);letter-spacing:-.035em}
.d3{font-size:clamp(1.2rem,2vw,1.5rem)}
.h4{font-size:1rem;font-weight:600;letter-spacing:-.018em}
.lead{color:var(--dim);font-size:clamp(1rem,1.15vw,1.09rem);max-width:60ch;text-wrap:pretty}
.small{font-size:.855rem;color:var(--dim);text-wrap:pretty}
.xs{font-size:.78rem;color:var(--dim)}
.tiny{font-size:.665rem;letter-spacing:.15em;text-transform:uppercase;color:var(--faint);font-weight:700}
.mono{font-family:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:.76rem;font-variant-numeric:tabular-nums;letter-spacing:-.01em}
.num{font-variant-numeric:tabular-nums}
.acc{color:var(--acc)}
.dim{color:var(--dim)}

/* ссылка для клавиатуры: видна только при фокусе */
.skip{position:absolute;left:-9999px;top:0;z-index:200;background:var(--ink);color:#fff;
  padding:10px 16px;border-radius:0 0 var(--r-s) 0;font-size:.86rem}
.skip:focus{left:0}

/* ---------- шапка ---------- */
.nav{position:sticky;top:0;z-index:80;background:color-mix(in srgb,var(--paper) 84%,transparent);
  backdrop-filter:saturate(1.4) blur(16px);border-bottom:1px solid transparent;transition:border-color .3s}
.nav.solid{border-color:var(--line)}
.nav .wrap{display:flex;align-items:center;gap:22px;padding:11px 22px}
.logo{display:flex;align-items:center;gap:10px;font-weight:800;letter-spacing:-.04em;font-size:1.02rem;flex:none}
.logo i{width:36px;height:20px;background:url('assets/brand/winwin-mark.webp') center/contain no-repeat;flex:none}
.logo i::after{content:none}
.nl{display:flex;gap:22px;font-size:.88rem;margin-left:6px}
.nl a{color:var(--dim);padding:6px 0;border-bottom:2px solid transparent;transition:color .18s}
.nl a:hover{color:var(--ink)}
.nl a[aria-current]{color:var(--ink);font-weight:600;border-color:var(--acc)}
.nav .sp{margin-left:auto;display:flex;gap:10px;align-items:center}
@media (max-width:1180px){.nl{display:none}.nav .sp .tel{display:none}}

/* ---------- кнопки ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;
  padding:12px 21px;border:1px solid var(--line);border-radius:var(--r-s);
  background:var(--card);cursor:pointer;font-size:.9rem;font-weight:500;
  white-space:nowrap;transition:background .18s,border-color .18s,color .18s,transform .18s var(--ease)}
.btn:hover{border-color:var(--ink)}
.btn:active{transform:translateY(1px)}
.btn-p{background:var(--ink);border-color:var(--ink);color:#fff}
.btn-p:hover{background:#000;border-color:#000}
.btn-a{background:var(--acc);border-color:var(--acc);color:#fff}
.btn-a:hover{filter:brightness(.92)}
.btn-s{padding:8px 14px;font-size:.83rem}
.btn-w{width:100%}
.ar{transition:transform .3s var(--ease)}
.btn:hover .ar{transform:translateX(3px)}

/* сегментированный переключатель */
.seg{display:inline-flex;background:var(--sunk);border:1px solid var(--line);
  border-radius:100px;padding:3px;gap:2px}
.seg button{border:none;background:none;cursor:pointer;padding:6px 15px;border-radius:100px;
  font-size:.8rem;font-weight:500;color:var(--dim);transition:background .2s,color .2s}
.seg button[aria-pressed="true"]{background:var(--ink);color:#fff}
.seg.on-glass{background:rgba(255,255,255,.82);backdrop-filter:blur(6px);border-color:rgba(0,0,0,.06)}

/* ---------- поверхности ---------- */
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r)}
.card-h{padding:14px 18px;border-bottom:1px solid var(--line-s);display:flex;
  justify-content:space-between;align-items:center;gap:12px}
.card-b{padding:18px}
.pad{padding:18px}

.cols2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.cols3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.cols4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
@media (max-width:1080px){.cols4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:860px){.cols2,.cols3{grid-template-columns:1fr}}
/* Две колонки держим до 460px: ниже описание модели сжимается в 3–4 слова
   в строке и карточка перестаёт читаться */
@media (max-width:460px){.cols4{grid-template-columns:1fr}}

/* шапка карточки на узком экране складывается в строки */
@media (max-width:640px){
  .card-h{flex-direction:column;align-items:flex-start;gap:5px}
}
@media (max-width:520px){
  .seg button{padding:5px 11px;font-size:.75rem}
}
/* на узком экране логотип и кнопка в шапке начинали наезжать друг на друга */
@media (max-width:440px){
  .nav .wrap{gap:10px;padding:10px 16px}
  .logo{font-size:.93rem;gap:8px}
  .logo i{width:32px;height:18px}
  .nav .sp .btn{padding:8px 12px}
  .wrap,.narrow{padding:0 16px}
}

/* ---------- сцена с рендером ---------- */
.scene{background:var(--sunk);border-radius:var(--r);overflow:hidden;
  aspect-ratio:1200/620;position:relative;border:1px solid var(--line-s)}
.scene > svg{width:100%;height:100%}
.product-photo{display:block;width:100%;height:100%;object-fit:cover;object-position:center}
.scene .product-photo{position:absolute;inset:0}
/* два слоя рендера для кроссфейда каркас ↔ обшивка */
.scene .layer{position:absolute;inset:0;z-index:1;transition:opacity .45s var(--ease)}
.scene .layer.out{opacity:0}
/* слои дорисовываются в конец сцены, поэтому подписи и переключатель
   обязаны стоять выше по z — иначе их закрывает свежий рендер */
.scene .gp,.scene .seg{z-index:3}
.gp{position:absolute;background:rgba(255,255,255,.88);backdrop-filter:blur(6px);
  border-radius:100px;padding:6px 13px;font-size:.76rem;font-weight:500;
  box-shadow:0 1px 3px rgba(0,0,0,.06);max-width:calc(100% - 24px)}
.gp.tl{top:12px;left:12px} .gp.tr{top:12px;right:12px}
.gp.bl{bottom:12px;left:12px} .gp.br{bottom:12px;right:12px}
@media (max-width:520px){.gp{font-size:.7rem;padding:5px 10px}}

/* ---------- спецификация ---------- */
.spec > div{display:flex;justify-content:space-between;gap:18px;padding:11px 0;
  border-bottom:1px solid var(--line-s);font-size:.9rem}
.spec > div:last-child{border-bottom:none}
.spec .k{color:var(--dim);flex:none}
.spec .v{text-align:right}

.tbl th,.tbl td{text-align:left;padding:11px 15px;border-bottom:1px solid var(--line-s);font-size:.87rem}
.tbl th{background:var(--sunk);font-size:.665rem;text-transform:uppercase;letter-spacing:.1em;
  color:var(--dim);font-weight:700}
.tbl tr:last-child td{border-bottom:none}

/* ---------- пометки достоверности ---------- */
.est{display:inline-block;background:var(--warn-w);border:1px solid var(--warn-l);color:#8a6520;
  font-size:.6rem;padding:1px 5px;border-radius:4px;margin-left:6px;
  text-transform:uppercase;letter-spacing:.06em;font-weight:700;vertical-align:1px}
.note{background:var(--warn-w);border:1px solid var(--warn-l);border-radius:var(--r-s);
  padding:12px 15px;font-size:.83rem;color:var(--warn-t);text-wrap:pretty}
.chip{display:inline-flex;align-items:center;gap:7px;padding:6px 13px;border-radius:100px;
  background:var(--sunk);font-size:.79rem;color:var(--dim);border:1px solid transparent}
.tag{display:inline-block;padding:3px 9px;border-radius:5px;font-size:.68rem;font-weight:700;
  letter-spacing:.05em;text-transform:uppercase}
.tag-a{background:var(--acc-w);color:var(--acc)}
.tag-o{background:var(--ok-w);color:var(--ok)}
.tag-d{background:var(--ink);color:#fff}

/* пронумерованные шаги — используются и на главной, и на странице партнёра */
.steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  border:1px solid var(--line);border-radius:var(--r);overflow:hidden;background:var(--card)}
.steps > div{padding:20px;border-right:1px solid var(--line-s)}
.steps > div:last-child{border-right:none}
.steps .n{width:26px;height:26px;border-radius:100px;background:var(--ink);color:#fff;
  display:flex;align-items:center;justify-content:center;font-size:.78rem;font-weight:700;margin-bottom:11px}
@media (max-width:860px){
  .steps{grid-template-columns:1fr 1fr}
  .steps > div:nth-child(2n){border-right:none}
  .steps > div:nth-child(-n+2){border-bottom:1px solid var(--line-s)}
}
@media (max-width:520px){
  .steps{grid-template-columns:1fr}
  .steps > div{border-right:none;border-bottom:1px solid var(--line-s)}
  .steps > div:last-child{border-bottom:none}
}

/* маркированный список без точек-буллетов: маркер задаётся отдельным <s> */
.lst{list-style:none;display:grid;gap:7px;font-size:.87rem;margin-top:12px}
.lst li{display:flex;gap:9px;color:var(--dim)}
.lst li s{flex:none;width:14px;text-decoration:none;font-weight:700}

/* ---------- карточка модели ---------- */
.mc{background:var(--card);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;
  display:flex;flex-direction:column;
  transition:border-color .2s,box-shadow .3s var(--ease),transform .3s var(--ease)}
.mc:hover{border-color:#c9c3b5;box-shadow:var(--shadow-l);transform:translateY(-3px)}
.mc .sh{aspect-ratio:1200/620;background:var(--sunk);position:relative;flex:none}
.mc .sh .product-photo{position:absolute;inset:0}
.mc .b{padding:15px 17px 16px;display:flex;flex-direction:column;gap:9px;flex:1}
.mc .t{display:flex;justify-content:space-between;align-items:baseline;gap:10px}
.mc .t b{font-size:.98rem;letter-spacing:-.02em}
.mc .ft{margin-top:auto;padding-top:12px;border-top:1px solid var(--line-s);
  display:flex;justify-content:space-between;align-items:flex-end;gap:10px}
.mc .pr{font-size:1.08rem;font-weight:700;letter-spacing:-.025em;line-height:1.15;white-space:nowrap}
.mc .ft > .xs{text-align:right}
.mc .pr small{display:block;font-size:.7rem;font-weight:400;color:var(--faint);letter-spacing:0}

/* ---------- крупные цифры ---------- */
.facts{display:flex;gap:30px;flex-wrap:wrap}
.facts > div b{display:block;font-size:1.42rem;font-weight:680;letter-spacing:-.035em;line-height:1.15}
.facts > div span{font-size:.78rem;color:var(--dim)}
@media (max-width:520px){.facts{gap:18px}.facts > div b{font-size:1.2rem}}

/* ---------- подвал ---------- */
.foot{background:var(--ink);color:#a9aeb2;padding:52px 0 26px;margin-top:60px}
.foot a{color:#a9aeb2;transition:color .18s}
.foot a:hover{color:#fff}
.fg{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:30px;margin-bottom:34px}
.foot h4{color:#fff;font-size:.665rem;letter-spacing:.15em;text-transform:uppercase;margin-bottom:13px}
.foot ul{list-style:none;display:grid;gap:8px;font-size:.86rem}
.foot .bot{border-top:1px solid #2b2f33;padding-top:16px;font-size:.78rem;
  display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap}
@media (max-width:800px){.fg{grid-template-columns:1fr 1fr}}

/* ---------- появление при скролле ---------- */
/* Прятать контент прямо в CSS нельзя: если наблюдатель не сработает —
   при переходе по якорю, при ошибке скрипта, при выключенном JS — раздел
   останется невидимым навсегда. Поэтому скрытие включает сам скрипт,
   добавляя html.anim, и он же обязан всё раскрыть. */
.rise{transition:opacity .8s var(--ease),transform .8s var(--ease)}
html.anim .rise{opacity:0;transform:translateY(18px)}
html.anim .rise.in{opacity:1;transform:none}