/* MATES — сайт. Айдентика из КП: вишня + бронза, Fraunces / Manrope / IBM Plex Mono.
   Светлая тема по умолчанию, тёмная — по системной настройке. */
:root{
  --paper:#EEE9E3; --sheet:#FBF8F4; --alt:#E7E1DA;
  --ink:#20141A; --ink2:#4C3B41; --muted:#87757B; --faint:#B2A3A8;
  --line:#DCD3CC; --hair:#E8E1DA;
  --wine:#33101B; --wine2:#20131A;
  --cherry:#9E1B32; --cherry2:#B93348; --cherry-soft:#F6E6E8; --cherry-line:#E3C2C7;
  --bronze:#8F6C34; --bronze-lite:#C29A57;
  --foil:linear-gradient(135deg,#D9B87A 0%,#8F6C34 34%,#E4CB8C 58%,#7A5A2A 100%);
  --disp:"Fraunces",Georgia,"Times New Roman",serif;
  --sans:"Manrope",-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;
  --mono:"IBM Plex Mono","SF Mono",Consolas,monospace;
  --nav-h:66px;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --paper:#160B10; --sheet:#20131A; --alt:#1B1016;
    --ink:#F3EAE9; --ink2:#D3C4C8; --muted:#9C8A8F; --faint:#6C5B61;
    --line:#352430; --hair:#241620;
    --cherry:#DB596E; --cherry2:#E8788A; --cherry-soft:#2C121A; --cherry-line:#4B2531;
    --bronze:#C69C56; --bronze-lite:#E4CA8B;
    --foil:linear-gradient(135deg,#E4CA8B 0%,#B08A45 40%,#F0DBA6 62%,#9A7638 100%);
  }
}
:root[data-theme="dark"]{
  --paper:#160B10; --sheet:#20131A; --alt:#1B1016;
  --ink:#F3EAE9; --ink2:#D3C4C8; --muted:#9C8A8F; --faint:#6C5B61;
  --line:#352430; --hair:#241620;
  --cherry:#DB596E; --cherry2:#E8788A; --cherry-soft:#2C121A; --cherry-line:#4B2531;
  --bronze:#C69C56; --bronze-lite:#E4CA8B;
  --foil:linear-gradient(135deg,#E4CA8B 0%,#B08A45 40%,#F0DBA6 62%,#9A7638 100%);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth; scroll-padding-top:calc(var(--nav-h) + 12px)}
body{margin:0; background:var(--paper); color:var(--ink); font-family:var(--sans);
     font-size:17px; line-height:1.6; -webkit-font-smoothing:antialiased}
img{max-width:100%; display:block}
a{color:inherit; text-decoration:none}
.wrap{max-width:1120px; margin:0 auto; padding:0 24px}
.narrow{max-width:780px}

h1,h2,h3{text-wrap:balance; margin:0}
.eyebrow{font-family:var(--mono); font-size:12px; font-weight:500; letter-spacing:.2em;
         text-transform:uppercase; color:var(--bronze); margin:0 0 18px;
         display:flex; align-items:center; gap:11px}
.eyebrow::before{content:""; width:24px; height:1px; background:var(--bronze)}
h2{font-family:var(--disp); font-weight:600; font-size:clamp(27px,3.5vw,40px); line-height:1.1; letter-spacing:-.01em}
.sub{color:var(--muted); font-size:18px; margin:14px 0 0; max-width:62ch; line-height:1.55}
b,strong{font-weight:700}

/* ---------- навигация ---------- */
.nav{position:sticky; top:0; z-index:50; height:var(--nav-h); background:color-mix(in srgb, var(--paper) 86%, transparent);
     backdrop-filter:saturate(1.4) blur(10px); border-bottom:1px solid var(--line)}
.nav-in{max-width:1120px; margin:0 auto; padding:0 24px; height:100%; display:flex; align-items:center; gap:20px}
.nav-logo{height:34px; width:auto}
.nav-links{margin-left:auto; display:flex; align-items:center; gap:26px}
.nav-links a{font-size:15px; font-weight:500; color:var(--ink2)}
.nav-links a:hover{color:var(--ink)}
.nav-phone{font-family:var(--mono); font-size:14px !important; color:var(--bronze) !important}
.nav-cta{background:var(--cherry); color:#fff !important; padding:9px 17px; border-radius:9px; font-weight:600}
.nav-cta:hover{background:var(--cherry2)}
.nav-burger{display:none; margin-left:auto; width:42px; height:42px; border:1px solid var(--line);
            background:var(--sheet); border-radius:10px; cursor:pointer; flex-direction:column; gap:4px;
            align-items:center; justify-content:center}
.nav-burger span{width:18px; height:2px; background:var(--ink); border-radius:2px; transition:.2s}
.nav-burger[aria-expanded="true"] span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.nav-burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.nav-burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
@media (max-width:860px){
  .nav-burger{display:flex}
  .nav-links{position:fixed; inset:var(--nav-h) 0 auto 0; flex-direction:column; align-items:stretch; gap:0;
             background:var(--sheet); border-bottom:1px solid var(--line); padding:8px 24px 18px;
             transform:translateY(-140%); transition:transform .24s ease; margin:0}
  .nav-links.open{transform:none}
  .nav-links a{padding:13px 0; border-bottom:1px solid var(--hair); font-size:16px}
  .nav-cta{margin-top:12px; text-align:center; border-bottom:0 !important}
  .nav-phone{border-bottom:0 !important}
}

/* ---------- кнопки ---------- */
.btn{font:inherit; font-weight:600; font-size:16px; padding:13px 24px; border-radius:11px;
     border:1px solid transparent; cursor:pointer; display:inline-block; line-height:1.2; text-align:center}
.btn-p{background:var(--cherry); color:#fff}
.btn-p:hover{background:var(--cherry2)}
.btn-s{background:transparent; color:var(--ink); border-color:var(--line)}
.btn-s:hover{border-color:var(--bronze)}
.btn-o{background:transparent; color:var(--ink); border-color:var(--line)}
.btn-o:hover{border-color:var(--bronze)}
.btn:focus-visible{outline:2px solid var(--bronze); outline-offset:3px}

/* ---------- секции ---------- */
.sec{padding:76px 0; border-top:1px solid var(--line)}
.sec.alt{background:var(--alt)}
.sec .sub{margin-bottom:30px}

/* ---------- герой (тёмный, премиальный) ---------- */
.hero{position:relative; overflow:hidden; border-top:0; background:var(--wine); color:#F3E7E4; padding:64px 0 70px}
.hero-bg{position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(90% 70% at 82% -10%, color-mix(in srgb,var(--cherry) 42%, transparent) 0%, transparent 52%),
    radial-gradient(70% 60% at 8% 110%, color-mix(in srgb,#7A5A2A 30%, transparent) 0%, transparent 55%),
    var(--wine);
}
/* тонкая металлическая сетка-текстура поверх фона */
.hero-bg::after{content:""; position:absolute; inset:0; opacity:.5;
  background-image:linear-gradient(rgba(226,203,140,.06) 1px, transparent 1px),
                   linear-gradient(90deg, rgba(226,203,140,.06) 1px, transparent 1px);
  background-size:44px 44px;
  -webkit-mask-image:radial-gradient(120% 90% at 60% 0%, #000 30%, transparent 75%);
  mask-image:radial-gradient(120% 90% at 60% 0%, #000 30%, transparent 75%);}
.hero .wrap{position:relative; z-index:1}
.hero-grid{display:grid; grid-template-columns:1.05fr .95fr; gap:48px; align-items:center}
.hero-copy .eyebrow{color:var(--bronze-lite)}
.hero h1{font-family:var(--disp); font-weight:700; font-size:clamp(38px,5.4vw,64px); line-height:1.02;
         letter-spacing:-.02em; margin:0 0 20px; max-width:16ch}
.hero h1 em{font-style:italic; font-weight:600; color:var(--cherry2);
            background:var(--foil); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent}
.hero .lede{font-size:clamp(17px,1.6vw,20px); line-height:1.55; color:#D6C2C3; max-width:52ch; margin:0 0 26px}
.hero .lede b{color:#F3E7E4; font-weight:600}
.hero-rail{list-style:none; margin:0 0 30px; padding:0; display:flex; flex-direction:column; gap:12px; max-width:52ch}
.hero-rail li{position:relative; padding-left:30px; font-size:15.5px; line-height:1.45; color:#CBB4B5}
.hero-rail li b{color:#F3E7E4; font-weight:600}
.hero-rail li::before{content:""; position:absolute; left:0; top:3px; width:16px; height:16px; border-radius:5px;
  background:var(--foil); box-shadow:0 0 0 4px rgba(226,203,140,.1)}
.hero-cta{display:flex; flex-wrap:wrap; gap:12px}
.hero .btn-s{color:#F3E7E4; border-color:rgba(226,203,140,.32)}
.hero .btn-s:hover{border-color:var(--bronze-lite)}

/* наложенные рамки экранов */
.hero-visual{position:relative; min-height:340px}
.scr{margin:0; border-radius:12px; overflow:hidden; border:1px solid rgba(226,203,140,.2); background:#2A1119;
     box-shadow:0 40px 80px -30px rgba(0,0,0,.8)}
.scr img{display:block; width:100%; height:auto}
/* показываем только верх страницы — рамка читается как окно приложения, а не как
   вся простыня скриншота (иначе герой растягивается на тысячи пикселей) */
.scr-front img{height:382px; object-fit:cover; object-position:top center}
.scr-back img{height:300px; object-fit:cover; object-position:top center}
.scr-back{position:absolute; top:0; right:-4%; width:70%; transform:rotate(3deg); opacity:.6; filter:saturate(.9)}
.scr-front{position:relative; margin-top:58px; width:100%}
.scr-bar{display:flex; align-items:center; gap:7px; padding:9px 13px; background:#331520; border-bottom:1px solid rgba(226,203,140,.14)}
.scr-bar i{width:9px; height:9px; border-radius:50%; background:rgba(226,203,140,.4)}
.scr-bar span{margin-left:8px; font-family:var(--mono); font-size:11.5px; color:#B79AA0}
@media (max-width:900px){
  .hero-grid{grid-template-columns:1fr; gap:36px}
  .hero-visual{min-height:0} .scr-back{display:none} .scr-front{margin-top:0}
}

/* ---------- лента «в цифрах» ---------- */
.statband{background:var(--wine2); color:#F3E7E4; border-top:1px solid rgba(226,203,140,.14); padding:34px 0}
.statband-in{display:grid; grid-template-columns:repeat(5,1fr); gap:24px}
.stat{display:flex; flex-direction:column; gap:7px; padding-left:16px; border-left:2px solid; border-image:var(--foil) 1}
.stat .n{font-family:var(--disp); font-weight:700; font-size:clamp(30px,3.4vw,42px); line-height:1;
         background:var(--foil); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
         font-variant-numeric:tabular-nums}
.stat .n i{font-style:normal; font-size:.6em; vertical-align:super}
.stat .l{font-size:13px; color:#B79AA0; line-height:1.35}
@media (max-width:860px){ .statband-in{grid-template-columns:repeat(2,1fr); gap:22px 20px} }
@media (max-width:420px){ .statband-in{grid-template-columns:1fr} }

/* ---------- боли ---------- */
.pains{display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:16px; margin-top:34px}
.pain{background:var(--sheet); border:1px solid var(--line); border-radius:13px; padding:24px 22px 26px}
.pain .pn{font-family:var(--mono); font-size:12px; color:var(--bronze); display:block; margin-bottom:14px}
.pain .pq{font-family:var(--disp); font-size:19px; font-weight:600; line-height:1.28; margin:0 0 10px}
.pain p{margin:0; font-size:15px; color:var(--ink2); line-height:1.5}

/* ---------- услуги ---------- */
.spectrum{display:grid; grid-template-columns:1fr 1fr; gap:0; margin-top:34px;
          border:1px solid var(--line); border-radius:14px; overflow:hidden; background:var(--sheet)}
.sp{padding:30px 28px 32px}
.sp:first-child{border-right:1px solid var(--line)}
.sp-k{font-family:var(--mono); font-size:11.5px; letter-spacing:.14em; text-transform:uppercase;
      color:var(--bronze); margin-bottom:14px; display:block}
.sp h3{font-family:var(--disp); font-size:22px; font-weight:600; margin-bottom:10px}
.sp p{font-size:15.5px; color:var(--ink2); margin:0 0 16px}
.sp ul{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:9px}
.sp li{font-size:15px; color:var(--ink2); padding-left:22px; position:relative; line-height:1.45}
.sp li::before{content:""; position:absolute; left:2px; top:8px; width:8px; height:8px; border-radius:2px; background:var(--foil)}
@media (max-width:640px){ .spectrum{grid-template-columns:1fr} .sp:first-child{border-right:0; border-bottom:1px solid var(--line)} }

.picker{margin-top:20px; border:1px solid var(--line); border-radius:14px; background:var(--sheet); overflow:hidden}
.picker-h{padding:20px 24px 6px}
.picker-h p{font-size:15px; color:var(--muted); margin:6px 0 0}
.chips{display:flex; flex-wrap:wrap; gap:8px; padding:14px 24px 4px}
.chip{font:inherit; font-size:15px; font-weight:500; padding:9px 16px; border-radius:99px; cursor:pointer;
      background:var(--paper); color:var(--ink2); border:1px solid var(--line)}
.chip:hover{border-color:var(--bronze)}
.chip[aria-pressed="true"]{background:var(--cherry); color:#fff; border-color:var(--cherry)}
.chip:focus-visible{outline:2px solid var(--bronze); outline-offset:2px}
.picker-out{margin:16px 24px 24px; padding:20px 22px; border-radius:12px; background:var(--cherry-soft); border:1px solid var(--cherry-line)}
.picker-out .t{font-family:var(--disp); font-size:18px; font-weight:600; margin:0 0 6px; color:var(--ink)}
.picker-out .d{font-size:15px; color:var(--ink2); margin:0 0 10px; line-height:1.5}
.picker-out .pr{font-family:var(--mono); font-size:13px; color:var(--bronze); margin:0}
.picker-out .pr b{color:var(--ink)}

/* ---------- кейсы ---------- */
.cases{display:flex; flex-direction:column; gap:18px; margin-top:34px}
.case{border:1px solid var(--line); border-radius:16px; background:var(--sheet); overflow:hidden;
      display:grid; grid-template-columns:1.15fr 1fr}
.case.nofoto{grid-template-columns:1fr}
.case-b{padding:30px}
.tagrow{display:flex; align-items:center; gap:10px; margin-bottom:14px; flex-wrap:wrap}
.badge{font-family:var(--mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase; padding:4px 10px;
       border-radius:99px; background:var(--cherry-soft); color:var(--cherry); border:1px solid var(--cherry-line)}
.live{font-family:var(--mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--bronze);
      display:flex; align-items:center; gap:6px}
.live::before{content:""; width:7px; height:7px; border-radius:50%; background:var(--bronze)}
.case h3{font-family:var(--disp); font-size:25px; font-weight:600; letter-spacing:-.01em; margin:0 0 12px; line-height:1.1}
.dd{display:flex; flex-direction:column; gap:12px; margin:0 0 20px}
.dd .lab{font-family:var(--mono); font-size:11px; letter-spacing:.08em; text-transform:uppercase; margin-bottom:3px; display:block}
.dd .lab.was{color:var(--cherry)} .dd .lab.now{color:var(--bronze)}
.dd p{margin:0; font-size:15px; color:var(--ink2); line-height:1.5}
.metrics{display:flex; flex-wrap:wrap; gap:22px; padding-top:18px; border-top:1px solid var(--hair)}
.metric .n{font-family:var(--disp); font-weight:600; font-size:26px; line-height:1; display:block; margin-bottom:5px;
           background:var(--foil); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent}
.metric .l{font-size:12.5px; color:var(--muted); line-height:1.35}
.case-v{background:var(--wine); display:flex; align-items:center; justify-content:center; padding:22px; border-left:1px solid var(--line)}
.case-v img{border-radius:9px; box-shadow:0 20px 44px -18px rgba(0,0,0,.5)}
.case-more{display:inline-block; margin-top:18px; font-weight:600; font-size:14.5px; color:var(--cherry);
           border-bottom:1px solid currentColor; padding-bottom:1px}
.case-more:hover{color:var(--bronze)}
/* карточка кейса целиком — ссылка (страница /cases) */
.caselink{text-decoration:none; color:inherit; transition:border-color .15s, transform .15s}
.caselink:hover{border-color:var(--bronze)}
.caselink .case-lead{font-size:15.5px; color:var(--ink2); margin:0 0 18px; line-height:1.5}
.cases-cta{display:flex; justify-content:center; margin-top:26px}
@media (max-width:760px){ .case{grid-template-columns:1fr} .case-v{border-left:0; border-top:1px solid var(--line)} }
.case-shot{margin:0; border:1px solid var(--line); border-radius:14px; overflow:hidden; background:var(--wine); padding:22px}
.case-shot img{border-radius:9px; box-shadow:0 24px 50px -20px rgba(0,0,0,.5)}

/* переключение форм заявка / созвон */
.lead-tabs{display:inline-flex; gap:6px; margin-top:26px; padding:5px; border-radius:12px; background:rgba(0,0,0,.22); border:1px solid rgba(226,203,140,.2)}
.lt{font:inherit; font-size:15px; font-weight:600; padding:9px 16px; border-radius:9px; border:0; cursor:pointer; background:transparent; color:#CBB4B5}
.lt[aria-pressed="true"]{background:var(--bronze); color:#241206}
.lt:focus-visible{outline:2px solid var(--bronze-lite); outline-offset:2px}
.lead-tabs + .lead{margin-top:18px}

/* ---------- процесс ---------- */
.steps{display:flex; flex-direction:column; margin-top:26px}
.step{display:grid; grid-template-columns:70px 1fr; gap:24px; padding:26px 0; border-bottom:1px solid var(--line)}
.step:last-child{border-bottom:0}
.step .no{font-family:var(--disp); font-weight:600; font-size:36px; line-height:1;
          background:var(--foil); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent}
.step h3{font-size:19px; font-weight:700; margin:0 0 6px}
.step p{margin:0; color:var(--ink2); font-size:16px}
@media (max-width:600px){ .step{grid-template-columns:1fr; gap:6px} .step .no{font-size:28px} }

/* ---------- цены ---------- */
.tiers{display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:18px; margin-top:34px; align-items:stretch}
.tier{background:var(--sheet); border:1px solid var(--line); border-radius:15px; padding:26px 24px 28px; display:flex; flex-direction:column}
.tier.pick{border-color:var(--cherry); box-shadow:0 0 0 1px var(--cherry)}
.badge2{font-family:var(--mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--cherry); margin-bottom:10px; min-height:14px}
.tier h3{font-family:var(--disp); font-weight:600; font-size:21px; margin:0 0 6px}
.tier .who{font-size:14.5px; color:var(--muted); margin:0 0 18px; line-height:1.45}
.tier .price{font-family:var(--disp); font-weight:600; font-size:30px; line-height:1; margin:0 0 6px}
.tier .term{font-size:13.5px; color:var(--muted); margin:0 0 20px; line-height:1.45}
.tier ul{list-style:none; margin:0 0 22px; padding:0; display:flex; flex-direction:column; gap:9px; flex:1}
.tier li{font-size:15px; color:var(--ink2); padding-left:23px; position:relative; line-height:1.45}
.tier li::before{content:""; position:absolute; left:2px; top:8px; width:9px; height:9px; border-radius:50%; border:2px solid var(--bronze)}
.extras{margin-top:20px; border:1px solid var(--line); border-radius:13px; overflow:hidden; background:var(--sheet)}
.extra{display:flex; gap:18px; align-items:center; justify-content:space-between; padding:16px 20px; border-bottom:1px solid var(--hair)}
.extra:last-child{border-bottom:0}
.extra b{font-size:15px} .extra p{margin:3px 0 0; font-size:14px; color:var(--muted)}
.ex-p{font-family:var(--mono); font-size:14px; color:var(--bronze); white-space:nowrap; text-align:right}

/* ---------- команда ---------- */
.team{display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:18px; margin-top:34px}
.man{background:var(--sheet); border:1px solid var(--line); border-radius:14px; padding:28px 26px; position:relative; overflow:hidden}
.man::before{content:""; position:absolute; top:0; left:0; right:0; height:3px; background:var(--foil)}
.man .role{font-family:var(--mono); font-size:11.5px; letter-spacing:.11em; text-transform:uppercase; color:var(--bronze); margin:4px 0 12px}
.man h3{font-family:var(--disp); font-weight:600; font-size:22px; margin:0 0 8px}
.man p{font-size:15.5px; color:var(--ink2); margin:0 0 12px; line-height:1.55}
.man p:last-child{margin:0}

/* ---------- вопросы ---------- */
.faq{margin-top:28px; border:1px solid var(--line); border-radius:13px; background:var(--sheet); overflow:hidden}
.faq details{border-bottom:1px solid var(--hair)}
.faq details:last-child{border-bottom:0}
.faq summary{cursor:pointer; padding:18px 20px; font-weight:600; font-size:16.5px; list-style:none; display:flex; gap:14px; align-items:flex-start}
.faq summary::-webkit-details-marker{display:none}
.faq summary::before{content:"+"; font-family:var(--disp); color:var(--bronze); font-size:19px; line-height:1.3; flex:none}
.faq details[open] summary::before{content:"–"}
.faq summary:hover{background:var(--hair)}
.faq .a{padding:0 20px 20px 48px; font-size:15.5px; color:var(--ink2); line-height:1.6}
.faq .a p{margin:0; max-width:64ch}

/* ---------- контакт / форма ---------- */
.contact{background:var(--wine); color:#F3E7E4; border-top:0}
.contact .eyebrow{color:var(--bronze-lite)} .contact h2{color:#F3E7E4} .contact .sub{color:#CBB4B5}
.sent{margin-top:24px; padding:16px 20px; border-radius:12px; background:rgba(226,203,140,.12);
      border:1px solid rgba(226,203,140,.3); color:#F3E7E4; font-size:15.5px}
.sent a{color:var(--bronze-lite); font-weight:600}
.lead{margin-top:26px; display:flex; flex-direction:column; gap:14px; max-width:640px}
.lead-row{display:grid; grid-template-columns:1fr 1fr; gap:14px}
@media (max-width:560px){ .lead-row{grid-template-columns:1fr} }
.lead label{display:flex; flex-direction:column; gap:7px; font-size:13.5px; color:#CBB4B5; font-weight:500}
.lead input,.lead textarea{font:inherit; font-size:16px; padding:12px 14px; border-radius:10px;
     border:1px solid rgba(226,203,140,.25); background:rgba(0,0,0,.22); color:#F3E7E4; width:100%}
.lead input::placeholder,.lead textarea::placeholder{color:#8f7a80}
.lead input:focus,.lead textarea:focus{outline:none; border-color:var(--bronze-lite)}
.lead .hp{position:absolute; left:-9999px; width:1px; height:1px; opacity:0}
.lead-foot{display:flex; align-items:center; gap:16px; flex-wrap:wrap; margin-top:4px}
.lead-note{font-size:14px; color:#CBB4B5} .lead-note a{color:var(--bronze-lite); font-weight:600}

/* ---------- блог / статья ---------- */
.pagehead{border-top:0}
.empty{margin-top:20px; padding:26px; border:1px dashed var(--line); border-radius:13px; color:var(--muted); text-align:center}
.empty a{color:var(--bronze); font-weight:600}
.posts{display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:18px; margin-top:10px}
.post{background:var(--sheet); border:1px solid var(--line); border-radius:14px; padding:24px; display:flex; flex-direction:column; gap:10px}
.post:hover{border-color:var(--bronze)}
.post-tag{font-family:var(--mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--bronze)}
.post h3{font-family:var(--disp); font-size:21px; font-weight:600; line-height:1.2}
.post p{margin:0; font-size:15px; color:var(--ink2); flex:1}
.post-date{font-family:var(--mono); font-size:12px; color:var(--faint)}
.back{font-family:var(--mono); font-size:13px; color:var(--bronze); display:inline-block; margin-bottom:16px}
.art-title{font-family:var(--disp); font-weight:600; font-size:clamp(28px,4vw,44px); line-height:1.08; margin:8px 0 10px}
.art-body p{font-size:18px; line-height:1.7; color:var(--ink2); margin:0 0 18px}
.art-h{font-family:var(--disp); font-weight:600; font-size:26px; margin:34px 0 12px}
.art-cta{margin-top:34px; padding-top:28px; border-top:1px solid var(--line)}

/* ---------- подвал ---------- */
.foot{background:var(--wine2); color:#E8D7D3; padding:52px 0 26px}
.foot-in{max-width:1120px; margin:0 auto; padding:0 24px; display:grid; grid-template-columns:2fr 1fr 1fr; gap:32px}
.foot-logo{height:34px; width:auto; margin-bottom:16px}
.foot-brand p{margin:0; font-size:14.5px; color:#B79AA0; max-width:42ch; line-height:1.55}
.foot-col{display:flex; flex-direction:column; gap:10px}
.foot-h{font-family:var(--mono); font-size:11.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--bronze-lite); margin-bottom:4px}
.foot-col a{font-size:15px; color:#D6C2C3} .foot-col a:hover{color:#fff}
.foot-bottom{max-width:1120px; margin:34px auto 0; padding:20px 24px 0; border-top:1px solid rgba(226,203,140,.14);
             display:flex; justify-content:space-between; font-family:var(--mono); font-size:12.5px; color:#8f7a80}
@media (max-width:680px){ .foot-in{grid-template-columns:1fr 1fr} .foot-brand{grid-column:1/-1} }

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

/* ---------- глубина и вес (правка под премиум-референс) ---------- */
h2{font-weight:700}
.sec .sub{font-size:19px}
.pain,.man,.tier,.post,.picker,.spectrum,.faq,.extras,.tw,.case{
  box-shadow:0 1px 2px rgba(32,20,26,.05), 0 14px 34px -22px rgba(32,20,26,.20)}
:root:not([data-theme="light"]) .pain,:root:not([data-theme="light"]) .man,
:root:not([data-theme="light"]) .tier,:root:not([data-theme="light"]) .post,
:root:not([data-theme="light"]) .case{box-shadow:0 1px 2px rgba(0,0,0,.3), 0 16px 40px -24px rgba(0,0,0,.6)}
.pain,.post,.man,.tier{transition:transform .16s ease, border-color .16s ease}
.pain:hover,.post:hover,.man:hover{transform:translateY(-3px); border-color:var(--bronze)}
.tier.pick{transform:translateY(-4px)}
/* фирменная металлическая полоса-разделитель у заголовков секций */
.sec > .wrap > .eyebrow{margin-bottom:20px}

/* ---------- команда: фото/аватар + регалии ---------- */
.man-top{display:flex; gap:16px; align-items:center; margin-bottom:16px}
.avatar{width:62px; height:62px; border-radius:14px; flex:none; overflow:hidden; display:grid; place-items:center;
  background:var(--wine); border:1px solid var(--line)}
.avatar img{width:100%; height:100%; object-fit:cover}
.avatar span{font-family:var(--disp); font-weight:700; font-size:26px;
  background:var(--foil); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent}
.man .tagline{font-size:13.5px; color:var(--muted); margin:4px 0 0; line-height:1.4}
.man .role{margin-bottom:2px}
.regalia{list-style:none; margin:14px 0 0; padding:0; display:flex; flex-direction:column; gap:8px}
.regalia li{position:relative; padding-left:22px; font-size:14.5px; color:var(--ink2); line-height:1.4}
.regalia li::before{content:""; position:absolute; left:2px; top:7px; width:8px; height:8px; border-radius:2px; background:var(--foil)}

/* ---------- визуал кейса ---------- */
.casevis .scr-lg{max-width:960px; margin:0 auto; border-radius:14px; overflow:hidden;
  border:1px solid var(--line); box-shadow:0 30px 70px -30px rgba(32,20,26,.5)}
.casevis .scr-lg img{width:100%; height:auto; display:block; max-height:560px; object-fit:cover; object-position:top center}
/* иллюстрация-схема (светлая, как скриншот) */
.scr-lg.vis .vis-body{background:#fff; color:#20141A; padding:22px 24px}
.vis-head{display:flex; justify-content:space-between; align-items:center; margin-bottom:16px; flex-wrap:wrap; gap:10px}
.vis-head b{font-size:17px}
.chip-bronze{font-family:var(--mono); font-size:12px; color:#8F6C34; background:#FBF3E2; border:1px solid #E7D3A6; border-radius:99px; padding:4px 11px}
.vis-rows{display:flex; flex-direction:column; gap:10px}
.vis-row{display:grid; grid-template-columns:14px 1fr 200px 44px; gap:12px; align-items:center; font-size:14px}
.vis-row .dot{width:11px; height:11px; border-radius:50%}
.vis-name{color:#3C4448} .vis-val{text-align:right; font-variant-numeric:tabular-nums; color:#20141A}
.vis-bar{height:9px; border-radius:5px; background:#EDE7E0; overflow:hidden}
.vis-bar i{display:block; height:100%; border-radius:5px}
.dot.g,.vis-bar i.g{background:#15803D} .dot.a,.vis-bar i.a{background:#B45309} .dot.r,.vis-bar i.r{background:#B3211D}
@media (max-width:600px){ .vis-row{grid-template-columns:14px 1fr 44px} .vis-bar{display:none} }

/* телефоны (wewish) */
.phones{display:flex; gap:26px; justify-content:center; flex-wrap:wrap}
.phone{position:relative; margin:0; width:230px; border-radius:30px; padding:12px; background:#241118;
  border:1px solid rgba(226,203,140,.25); box-shadow:0 30px 60px -26px rgba(0,0,0,.6)}
.phone-2{margin-top:34px}
.ph-note{position:absolute; top:-10px; right:16px; font-family:var(--mono); font-size:11px; color:#241206;
  background:var(--bronze-lite); border-radius:99px; padding:3px 10px; font-weight:600}
.ph-scr{background:#fff; border-radius:22px; padding:16px 14px; min-height:360px; display:flex; flex-direction:column}
.ph-top{font-family:var(--disp); font-weight:700; font-size:18px; color:#20141A; margin-bottom:14px}
.ph-card{display:flex; gap:10px; align-items:center; padding:11px; border:1px solid #EDE7E0; border-radius:12px; margin-bottom:10px}
.ph-card.wide{padding:14px 11px}
.ph-ico{width:34px; height:34px; border-radius:9px; flex:none; background:linear-gradient(135deg,#F6E6E8,#E3C2C7)}
.ph-card div{flex:1} .ph-card b{display:block; height:9px; width:70%; background:#E4DDD5; border-radius:5px; margin-bottom:7px}
.ph-card i{display:block; height:7px; width:45%; background:#EFEAE3; border-radius:5px}
.ph-nav{margin-top:auto; display:flex; gap:26px; justify-content:center; padding-top:12px; border-top:1px solid #EDE7E0}
.ph-nav span{width:22px; height:22px; border-radius:7px; background:#EDE7E0}
.ph-nav span.on{background:var(--cherry)}

/* галерея экранов */
.gallery{display:grid; grid-template-columns:repeat(2,1fr); gap:18px}
@media (max-width:640px){ .gallery{grid-template-columns:1fr} }
.gcard{margin:0; border:1px solid var(--line); border-radius:12px; overflow:hidden; background:var(--sheet);
  box-shadow:0 14px 34px -22px rgba(32,20,26,.3)}
.gcard img{width:100%; height:240px; object-fit:cover; object-position:top center; display:block; border-bottom:1px solid var(--hair)}
.gcard figcaption{padding:12px 15px; font-size:13.5px; color:var(--muted); line-height:1.4}

/* ---------- функционал кейса: список «что внутри» ---------- */
.featlist{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:1fr 1fr; gap:14px 30px}
@media (max-width:720px){ .featlist{grid-template-columns:1fr} }
.featlist li{position:relative; padding:16px 18px 16px 46px; font-size:15.5px; line-height:1.5; color:var(--ink2);
  background:var(--sheet); border:1px solid var(--line); border-radius:12px;
  box-shadow:0 1px 2px rgba(32,20,26,.05), 0 12px 30px -24px rgba(32,20,26,.2)}
.featlist .fx{position:absolute; left:16px; top:19px; width:16px; height:16px; border-radius:5px; background:var(--foil);
  box-shadow:0 2px 6px -1px rgba(143,108,52,.5)}
.featlist .fx::after{content:""; position:absolute; left:4px; top:3.5px; width:4px; height:7px;
  border:2px solid #2a1206; border-top:0; border-left:0; transform:rotate(40deg)}

/* ---------- диагональное чтение: появление при прокрутке ---------- */
/* базовое состояние — ВИДИМО (без JS всё на месте); класс .reveal-on включает анимацию */
.js .reveal{opacity:0; transform:translateY(26px) translateX(-14px); will-change:opacity,transform}
.js .reveal.in{opacity:1; transform:none;
  transition:opacity .6s cubic-bezier(.22,.61,.36,1), transform .6s cubic-bezier(.22,.61,.36,1);
  transition-delay:var(--d,0ms)}
@media (prefers-reduced-motion:reduce){
  .js .reveal{opacity:1 !important; transform:none !important; transition:none !important}
}