/* ==========================================================================
   VIINATAKSO — визуальная система v3 «тёмный редакционный премиум»

   Тёмная схема целиком. Основа — ТЁПЛОЕ ЭСПРЕССО (коричнево-чёрное),
   сознательно не сине-чёрное: холодный navy принадлежит другому проекту
   и здесь не используется ни в одном оттенке. Акцент — алый, второй — зелёный.
   Золота нет.

   Против «таблицы»: ни одной обводки-клетки. Плоскости разделяются
   перепадом светлоты, волосяными линиями и воздухом.
   ========================================================================== */

*,*::before,*::after{box-sizing:border-box}

:root{
  /* плоскости, от глубокой к приподнятой */
  --d0:#131010;           /* фон страницы            */
  --d1:#1B1614;           /* секция-подложка         */
  --d2:#241D1A;           /* карточка                */
  --d3:#2F2622;           /* карточка под курсором   */

  --tx:#F6F1EC;           /* основной текст          */
  --ink:#F6F1EC;          /* синоним для наследования */
  --ink2:#A99A92;         /* вторичный текст          */
  --mist:#A99A92;

  --red:#FF4436;          /* акцент                   */
  --red2:#FF6154;
  --teal:#31A283;         /* второй акцент, редко     */
  --white:#FFFFFF;
  --paper:#F6F1EC;

  --hair:rgba(246,241,236,.10);
  --hair2:rgba(246,241,236,.17);

  --max:1120px;
  --lift:0 26px 60px -24px rgba(0,0,0,.85);
  --lift-sm:0 14px 34px -18px rgba(0,0,0,.75);

  --serif:"Iowan Old Style","Palatino Linotype",Palatino,Georgia,"Times New Roman",serif;
  --sans:"Segoe UI",system-ui,-apple-system,Roboto,Helvetica,Arial,sans-serif;

  color-scheme:dark;
}

html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;background:var(--d0)}

body{
  margin:0;background:var(--d0);color:var(--tx);
  font:17px/1.62 var(--sans);overflow-x:hidden;padding-bottom:80px;
  -webkit-font-smoothing:antialiased;
}

img{max-width:100%;height:auto;display:block}
a{color:var(--red);text-decoration-thickness:1px;text-underline-offset:3px}

.wrap{max-width:var(--max);margin:0 auto;padding:0 24px}

h1,h2,h3{margin:0 0 .48em;font-weight:400;color:var(--white)}
h1{font-family:var(--serif);font-size:clamp(38px,7.4vw,76px);line-height:1.02;
  letter-spacing:-.025em}
h2{font-family:var(--serif);font-size:clamp(28px,4.6vw,46px);line-height:1.06;
  letter-spacing:-.022em;margin-top:0}
h3{font-family:var(--sans);font-size:17px;font-weight:700;line-height:1.3;
  letter-spacing:-.005em}
p{margin:0 0 1em}

/* чередование плоскостей вместо рамок */
section{padding:clamp(56px,9vw,110px) 0;border:0;background:var(--d0)}
section:nth-of-type(even){background:var(--d1)}

/* ---------- шапка ---------- */
.top{position:sticky;top:0;z-index:60;background:rgba(19,16,16,.82);
  backdrop-filter:saturate(150%) blur(16px);border-bottom:1px solid var(--hair)}
.top .wrap{display:flex;align-items:center;gap:16px;min-height:66px;flex-wrap:wrap}
.brand{font-family:var(--sans);font-weight:800;font-size:17px;color:var(--white);
  text-decoration:none;letter-spacing:.13em;text-transform:uppercase}
.brand span{color:var(--red)}
.langs{margin-left:auto;display:flex;gap:2px;background:rgba(246,241,236,.07);
  border-radius:999px;padding:3px}
.langs a{font-size:12px;font-weight:800;letter-spacing:.09em;text-decoration:none;
  color:var(--ink2);border-radius:999px;padding:7px 14px;transition:.18s}
.langs a:hover{color:var(--white)}
.langs a[aria-current]{color:var(--white);background:var(--red)}

/* ---------- бегущая строка ---------- */
.ticker{background:var(--red);color:var(--white);overflow:hidden;padding:9px 0}
.ticker-in{display:flex;width:max-content;animation:slide 26s linear infinite}
.ticker-in span{font-size:12px;font-weight:800;letter-spacing:.2em;
  text-transform:uppercase;padding:0 26px;white-space:nowrap;position:relative}
.ticker-in span::after{content:"";position:absolute;right:-3px;top:50%;
  width:5px;height:5px;border-radius:50%;background:rgba(255,255,255,.6);
  transform:translateY(-50%)}
@keyframes slide{to{transform:translateX(-50%)}}

/* ---------- герой ---------- */
.hero{position:relative;background:var(--d0);overflow:hidden;
  padding:clamp(64px,10vw,132px) 0 clamp(56px,9vw,116px)}
.hero::before{content:"";position:absolute;inset:-45% -12% auto -12%;height:130%;
  background:
    radial-gradient(46% 58% at 80% 8%,rgba(255,68,54,.40) 0,transparent 66%),
    radial-gradient(40% 50% at 4% 92%,rgba(49,162,131,.28) 0,transparent 70%);
  filter:blur(26px);pointer-events:none}
.hero::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;
  background:linear-gradient(90deg,transparent,var(--hair2) 22%,var(--hair2) 78%,transparent)}
.hero .wrap{position:relative;z-index:1;max-width:900px}
.hero h1{margin-bottom:.34em}
.hero h1 em{font-style:italic;color:var(--red)}
.kicker{display:inline-flex;align-items:center;gap:9px;font-family:var(--sans);
  font-size:11.5px;font-weight:800;letter-spacing:.22em;text-transform:uppercase;
  color:var(--ink2);margin-bottom:26px}
.kicker::before{content:"";width:34px;height:1px;background:var(--red)}
.lead{font-size:clamp(17px,2.3vw,21px);line-height:1.55;color:var(--ink2);
  max-width:54ch;margin:0 0 38px}

.cta{display:flex;gap:14px;flex-wrap:wrap}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;
  min-height:58px;padding:0 32px;border:1px solid transparent;border-radius:999px;
  font-family:var(--sans);font-weight:700;font-size:16px;letter-spacing:.02em;
  text-decoration:none;cursor:pointer;
  transition:transform .18s cubic-bezier(.2,.8,.3,1),box-shadow .18s,background .18s}
.btn-p{background:var(--red);color:var(--white);
  box-shadow:0 14px 34px -12px rgba(255,68,54,.75)}
.btn-p:hover{background:var(--red2);transform:translateY(-2px);
  box-shadow:0 20px 44px -14px rgba(255,68,54,.9)}
.btn-s{background:rgba(246,241,236,.05);color:var(--tx);border-color:var(--hair2)}
.btn-s:hover{background:rgba(246,241,236,.11);transform:translateY(-2px)}
.btn:active{transform:translateY(0)}

.trust{display:flex;flex-wrap:wrap;margin-top:46px;padding-top:28px;
  border-top:1px solid var(--hair)}
.trust span{font-size:14px;color:var(--ink2);padding-right:30px;margin-right:30px;
  border-right:1px solid var(--hair);line-height:1.4}
.trust span:last-child{border-right:0;margin-right:0;padding-right:0}
.trust b{display:block;font-family:var(--serif);font-size:26px;font-weight:400;
  color:var(--white);letter-spacing:-.02em;margin-bottom:2px}

/* ---------- карточки шагов ---------- */
.grid{display:grid;gap:1px;grid-template-columns:repeat(auto-fit,minmax(258px,1fr));
  background:var(--hair);border-radius:18px;overflow:hidden;box-shadow:var(--lift-sm)}
.card{position:relative;background:var(--d2);padding:38px 32px 34px;transition:.22s}
.card::before{content:"";position:absolute;left:0;top:0;height:2px;width:0;
  background:var(--red);transition:width .3s cubic-bezier(.2,.8,.3,1)}
.card:hover{background:var(--d3)}
.card:hover::before{width:100%}
.card h3{margin-bottom:9px}
.card p{margin:0;color:var(--ink2);font-size:15.5px;line-height:1.6}
.num{font-family:var(--serif);font-size:52px;line-height:1;color:var(--red);
  margin-bottom:18px;letter-spacing:-.04em}

/* ---------- районы ---------- */
.areas{display:flex;flex-wrap:wrap;gap:10px;list-style:none;padding:0;margin:26px 0 0}
.areas li{background:var(--d2);border-radius:999px;padding:10px 20px;
  font-size:14.5px;font-weight:600;color:var(--tx);
  transition:transform .18s,background .18s,color .18s,box-shadow .18s}
.areas li:hover{background:var(--red);color:var(--white);transform:translateY(-2px);
  box-shadow:0 12px 26px -12px rgba(255,68,54,.7)}

/* ---------- вопросы ---------- */
details{border-bottom:1px solid var(--hair);padding:6px 0}
details summary{cursor:pointer;list-style:none;padding:24px 46px 24px 0;
  font-family:var(--serif);font-size:clamp(19px,2.4vw,23px);line-height:1.3;
  letter-spacing:-.015em;color:var(--white);position:relative;transition:color .18s}
details summary:hover{color:var(--red)}
summary::-webkit-details-marker{display:none}
summary::after{content:"";position:absolute;right:6px;top:50%;width:13px;height:13px;
  margin-top:-7px;border-right:1.5px solid var(--red);border-bottom:1.5px solid var(--red);
  transform:rotate(45deg);transition:transform .22s}
details[open] summary::after{transform:rotate(-135deg)}
details p{margin:0 0 26px;color:var(--ink2);font-size:16px;max-width:70ch}

/* ---------- сноска и подвал ---------- */
.note{position:relative;background:var(--d2);color:var(--ink2);border-radius:18px;
  padding:30px 34px 30px 40px;font-size:14.5px;line-height:1.65;
  box-shadow:var(--lift);overflow:hidden}
.note::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;
  background:var(--red)}
.note strong{color:var(--white)}

footer{background:var(--d1);color:var(--ink2);padding:64px 0 56px;font-size:15px;
  border-top:1px solid var(--hair)}
footer strong{color:var(--white);font-family:var(--serif);font-size:19px;
  font-weight:400;letter-spacing:-.01em}
footer a{color:var(--tx);text-decoration:none;font-weight:600}
footer a:hover{color:var(--red)}
footer p{margin:0 0 .6em}

/* ---------- нижняя панель звонка (телефон) ---------- */
.bar{position:fixed;left:0;right:0;bottom:0;z-index:70;display:flex;gap:10px;
  padding:12px 14px calc(12px + env(safe-area-inset-bottom));
  background:rgba(19,16,16,.95);backdrop-filter:blur(16px);
  border-top:1px solid var(--hair)}
.bar a{flex:1;min-height:54px;font-size:16px;padding:0 18px}

@media(min-width:860px){.bar{display:none}body{padding-bottom:0}}

@media(max-width:560px){
  .trust{display:grid;grid-template-columns:1fr 1fr;gap:20px}
  .trust span{border-right:0;margin:0;padding:0}
  .cta .btn{width:100%}
}

@media(prefers-reduced-motion:reduce){
  *{transition:none!important;animation:none!important}
  html{scroll-behavior:auto}
}


/* ==========================================================================
   КАТАЛОГ — списки товаров, категории, карточка товара
   Генерируется build.py из products.json. Палитра та же, тёплая тёмная.
   ========================================================================== */

.navlink{font-family:var(--sans);font-size:13px;font-weight:700;letter-spacing:.11em;
  text-transform:uppercase;color:var(--ink2);text-decoration:none;padding:6px 0;
  border-bottom:1px solid transparent;transition:.18s}
.navlink:hover{color:var(--white);border-bottom-color:var(--red)}

/* шапка раздела */
.phead{padding-top:clamp(38px,6vw,64px)!important}
.crumb{font-size:13px;color:var(--ink2);margin-bottom:22px;letter-spacing:.02em}
.crumb a{color:var(--ink2);text-decoration:none}
.crumb a:hover{color:var(--red)}
.crumb span{opacity:.4;margin:0 7px}
.phead h1{font-size:clamp(32px,5.6vw,58px)}
.phead .lead{margin-bottom:0}

/* карточки категорий */
.ccards{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));
  margin-top:40px}
.ccard{display:flex;flex-direction:column;gap:5px;padding:22px 24px;border-radius:14px;
  background:var(--d2);text-decoration:none;transition:.2s;position:relative;overflow:hidden}
.ccard::after{content:"";position:absolute;left:0;bottom:0;height:2px;width:0;
  background:var(--red);transition:width .3s cubic-bezier(.2,.8,.3,1)}
.ccard:hover{background:var(--d3);transform:translateY(-3px);box-shadow:var(--lift-sm)}
.ccard:hover::after{width:100%}
.cname{font-family:var(--serif);font-size:21px;color:var(--white);letter-spacing:-.015em;
  line-height:1.2}
.cnum{font-size:13px;color:var(--ink2);letter-spacing:.03em}

/* сетка товаров */
.plist{display:grid;gap:14px;grid-template-columns:repeat(auto-fill,minmax(210px,1fr))}
.pitem{display:flex;flex-direction:column;padding:22px 20px 24px;border-radius:14px;
  background:var(--d2);text-decoration:none;color:var(--tx);transition:.2s;
  position:relative;overflow:hidden}
.pitem::after{content:"";position:absolute;left:0;top:0;height:2px;width:0;
  background:var(--red);transition:width .3s cubic-bezier(.2,.8,.3,1)}
.pitem:hover{background:var(--d3);transform:translateY(-3px);box-shadow:var(--lift-sm)}
.pitem:hover::after{width:100%}
.pimg{width:100%;max-width:104px;height:auto;margin:0 auto 18px;display:block}
.pcat{font-size:10.5px;font-weight:800;letter-spacing:.17em;text-transform:uppercase;
  color:var(--ink2);margin-bottom:7px}
.pname{font-family:var(--serif);font-size:19px;line-height:1.22;color:var(--white);
  letter-spacing:-.015em;margin-bottom:6px}
.pmeta{font-size:13px;color:var(--ink2);margin-bottom:14px}
.pprice{margin-top:auto;font-size:13px;font-weight:700;color:var(--red);
  letter-spacing:.07em;text-transform:uppercase}

/* карточка одного товара */
.pdetail{display:grid;gap:clamp(28px,5vw,64px);align-items:start;margin-top:8px;
  grid-template-columns:minmax(0,300px) minmax(0,1fr)}
.pdetail-img{background:var(--d2);border-radius:20px;padding:44px 32px;
  box-shadow:var(--lift-sm);display:flex;justify-content:center}
.pdetail-img .pimg{max-width:180px;margin:0}
.pdetail-body h1{margin:6px 0 .3em}
.pdetail-body .lead{margin-bottom:26px;max-width:52ch}
/* FOUNDER DECISION: цена на публичной поверхности не отображается.
   Место крупной цены занимает строка-формула «цену называем по телефону». */
.askprice{position:relative;margin:0 0 30px;padding:16px 22px 16px 20px;
  background:var(--d2);border-radius:12px;font-size:15.5px;line-height:1.55;
  color:var(--tx);max-width:52ch;overflow:hidden}
.askprice::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;
  background:var(--red)}
.spec{display:grid;grid-template-columns:auto 1fr;gap:0;margin:0 0 32px;
  border-top:1px solid var(--hair)}
.spec dt{padding:13px 26px 13px 0;font-size:13.5px;color:var(--ink2);
  border-bottom:1px solid var(--hair);letter-spacing:.02em}
.spec dd{margin:0;padding:13px 0;font-size:15px;font-weight:600;color:var(--tx);
  border-bottom:1px solid var(--hair)}
.spec dd a{color:var(--tx);text-decoration:none;border-bottom:1px solid var(--red)}
.spec dd a:hover{color:var(--red)}

@media(max-width:760px){
  .pdetail{grid-template-columns:1fr}
  .pdetail-img{padding:32px;max-width:260px}
  .pdetail-img .pimg{max-width:130px}
}
@media(max-width:520px){
  .plist{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .pitem{padding:16px 14px 18px}
  .pname{font-size:16px}
  .pimg{max-width:76px;margin-bottom:12px}
  .navlink{display:none}
}