:root{
  --bg:#0a0b09;
  --panel:#12140f;
  --panel2:#171a12;
  --volt:#d7ff3c;
  --volt-dim:rgba(215,255,60,.12);
  --text:#f1f3e8;
  --muted:#a0a694;
  --line:rgba(241,243,232,.1);
  --radius:22px;
  --font-d:'Unbounded',system-ui,sans-serif;
  --font-b:'Manrope',system-ui,sans-serif;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:96px;overflow-x:hidden}
body{background:var(--bg);color:var(--text);font-family:var(--font-b);font-size:16px;line-height:1.6}
::selection{background:var(--volt);color:#0a0b09}
body::after{content:"";position:fixed;inset:0;pointer-events:none;z-index:5;opacity:.05;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
::-webkit-scrollbar{width:10px}
::-webkit-scrollbar-track{background:#0a0b09}
::-webkit-scrollbar-thumb{background:#2a2e24;border-radius:8px}
::-webkit-scrollbar-thumb:hover{background:#3a4030}
img{display:block;max-width:100%}
picture{display:block}
a{color:inherit;text-decoration:none}
.container{width:min(1180px,92%);margin:0 auto}
.container-wide{width:min(1360px,95%);margin:0 auto}
h1,h2,h3,.logo{font-family:var(--font-d)}
.kicker{font-family:var(--font-d);font-weight:600;font-size:.72rem;letter-spacing:.22em;text-transform:uppercase;color:var(--volt);margin-bottom:18px;display:inline-block}
h2{font-weight:800;text-transform:uppercase;font-size:clamp(1.5rem,3.6vw,2.5rem);line-height:1.12;letter-spacing:.01em}
.section-sub{color:var(--muted);max-width:560px;margin-top:14px}
section{padding:100px 0}
.outline{color:transparent;-webkit-text-stroke:1px rgba(241,243,232,.4)}
/* ---------- HEADER ---------- */
#header{position:fixed;top:0;left:0;right:0;z-index:56;transition:background .35s,border-color .35s;border-bottom:1px solid transparent}
#header.scrolled{background:rgba(10,11,9,.82);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-color:var(--line)}
.nav{display:flex;align-items:center;justify-content:space-between;height:78px}
.logo{display:inline-flex;align-items:center;height:42px}
.logo svg{height:100%;width:auto;display:block}
footer .logo{height:26px}
.nav-right{display:flex;align-items:center;gap:34px}
.nav-links{display:flex;align-items:center;gap:30px}
.nav-links>a{font-weight:500;font-size:.92rem;color:var(--muted);position:relative;transition:color .25s}
.nav-links>a::after{content:"";position:absolute;left:0;bottom:-6px;width:0;height:2px;background:var(--volt);transition:width .3s}
.nav-links>a:hover{color:var(--text)}
.nav-links>a:hover::after{width:100%}
.nav-dropdown{position:relative}
.nav-drop-btn{background:none;border:none;font-family:var(--font-b);font-weight:500;font-size:.92rem;color:var(--muted);cursor:pointer;display:inline-flex;align-items:center;gap:7px;padding:0;transition:color .25s}
.nav-drop-btn:hover{color:var(--text)}
.nav-drop-btn::after{content:"";width:7px;height:7px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg);margin-top:-3px;transition:transform .2s}
.nav-dropdown.open .nav-drop-btn{color:var(--volt)}
.nav-dropdown.open .nav-drop-btn::after{transform:rotate(-135deg);margin-top:3px}
.nav-dropdown-menu{position:absolute;top:calc(100% + 20px);left:50%;transform:translateX(-50%);background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:10px;min-width:230px;display:none;flex-direction:column;gap:2px;box-shadow:0 20px 50px rgba(0,0,0,.5);z-index:60}
.nav-dropdown.open .nav-dropdown-menu{display:flex}
.nav-dropdown-menu a{padding:11px 14px;border-radius:10px;font-size:.86rem;font-weight:500;color:var(--text);transition:background .2s,color .2s}
.nav-dropdown-menu a:hover{background:var(--volt-dim);color:var(--volt)}
.nav-phone{display:flex;flex-direction:column;align-items:flex-end;line-height:1.3}
.nav-phone-number{font-family:var(--font-d);font-weight:700;font-size:.86rem;color:var(--text);transition:color .25s}
.nav-phone:hover .nav-phone-number{color:var(--volt)}
.nav-phone-hours{font-size:.66rem;color:var(--muted)}
.btn{display:inline-flex;align-items:center;gap:10px;font-family:var(--font-d);font-weight:600;font-size:.82rem;letter-spacing:.06em;text-transform:uppercase;padding:16px 26px;border-radius:14px;border:1px solid transparent;cursor:pointer;transition:transform .25s,box-shadow .25s,background .25s,border-color .25s}
.btn-volt{background:var(--volt);color:#0a0b09}
.btn-volt:hover{transform:translateY(-3px);box-shadow:0 14px 34px rgba(215,255,60,.28)}
.btn-ghost{border-color:var(--line);color:var(--text);background:transparent}
.btn-ghost:hover{border-color:var(--volt);color:var(--volt);transform:translateY(-3px)}
.btn-sm{padding:12px 20px;font-size:.72rem}
#burger{display:none;width:44px;height:44px;background:none;border:1px solid var(--line);border-radius:12px;cursor:pointer;position:relative;z-index:60}
#burger span{position:absolute;left:11px;right:11px;height:2px;background:var(--text);transition:transform .3s,top .3s}
#burger span:nth-child(1){top:17px}
#burger span:nth-child(2){top:25px}
body.menu-open #burger span:nth-child(1){top:21px;transform:rotate(45deg)}
body.menu-open #burger span:nth-child(2){top:21px;transform:rotate(-45deg)}
#menu{position:fixed;inset:0;background:rgba(10,11,9,.97);z-index:55;display:flex;flex-direction:column;justify-content:center;padding:0 8%;gap:8px;overflow-y:auto;transform:translateY(-100%);visibility:hidden;transition:transform .45s cubic-bezier(.7,0,.3,1),visibility 0s linear .45s}
body.menu-open #menu{transform:none;visibility:visible;transition:transform .45s cubic-bezier(.7,0,.3,1),visibility 0s linear 0s}
#menu a{font-family:var(--font-d);font-weight:800;font-size:clamp(1.6rem,7vw,2.4rem);text-transform:uppercase;padding:10px 0;border-bottom:1px solid var(--line);transition:color .25s,padding-left .25s}
#menu a:hover{color:var(--volt);padding-left:10px}
/* ---------- HERO ---------- */
.hero{position:relative;min-height:100svh;display:flex;align-items:center;padding:150px 0 90px;overflow:hidden}
.hero-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.55}
.hero-veil{position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,11,9,.55) 0%,rgba(10,11,9,.25) 40%,var(--bg) 96%)}
.hero-side{position:absolute;right:26px;top:50%;transform:translateY(-50%) rotate(90deg);transform-origin:center;font-family:var(--font-d);font-weight:600;font-size:.7rem;letter-spacing:.4em;color:var(--muted);white-space:nowrap}
.hero .container{position:relative;z-index:2}
.hero h1{font-weight:800;text-transform:uppercase;font-size:clamp(2rem,6.2vw,4.4rem);line-height:1.04;max-width:900px}
.hero h1 .accent{color:var(--volt)}
.hero p{color:var(--muted);max-width:600px;margin:26px 0 36px;font-size:1.05rem}
.hero-actions{display:flex;gap:16px;flex-wrap:wrap}
.stats{display:flex;gap:clamp(24px,6vw,72px);margin-top:64px;flex-wrap:wrap}
.stat b{display:block;font-family:var(--font-d);font-weight:800;font-size:clamp(1.6rem,3.6vw,2.6rem);color:var(--volt);line-height:1}
.stat span{color:var(--muted);font-size:.88rem;display:block;margin-top:8px;max-width:160px}
/* ---------- BRANDS (static strip) ---------- */
.brands-static{border-block:1px solid var(--line);padding:26px 0;background:var(--panel)}
.brands-static .container{display:flex;align-items:center;justify-content:center;gap:28px;flex-wrap:wrap}
.brands-label{font-family:var(--font-d);font-weight:600;font-size:.68rem;letter-spacing:.18em;text-transform:uppercase;color:var(--muted)}
.brands-list{display:flex;align-items:center;gap:20px;flex-wrap:wrap}
.brands-list span{font-family:var(--font-d);font-weight:600;font-size:1rem;letter-spacing:.16em}
.brands-list i{color:var(--volt);font-style:normal}
/* ---------- SERVICES ---------- */
.services-grid{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin-top:56px}
.s-card{position:relative;background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:38px 34px;overflow:hidden;transition:border-color .3s,transform .3s}
.s-card:hover{border-color:rgba(215,255,60,.45);transform:translateY(-6px)}
.s-card::before{content:attr(data-num);position:absolute;top:18px;right:26px;font-family:var(--font-d);font-weight:800;font-size:4.4rem;line-height:1;color:transparent;-webkit-text-stroke:1px rgba(241,243,232,.16)}
.s-card.has-img::before{display:none}
.s-img{position:relative;margin:-38px -34px 24px;height:170px;overflow:hidden}
.s-img img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s ease}
.s-card:hover .s-img img{transform:scale(1.06)}
.s-img::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,11,9,.05) 45%,var(--panel) 96%)}
.s-tag{display:inline-block;font-family:var(--font-d);font-weight:600;font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;color:#0a0b09;background:var(--volt);padding:7px 12px;border-radius:8px;margin-bottom:22px}
.s-card h3{font-weight:800;text-transform:uppercase;font-size:1.25rem;margin-bottom:14px}
.s-card p{color:var(--muted);font-size:.96rem}
.s-card ul{list-style:none;margin-top:22px;display:grid;gap:12px}
.s-card li{display:flex;gap:12px;align-items:flex-start;font-weight:500;font-size:.94rem}
.s-card li::before{content:"→";color:var(--volt);font-weight:700;flex-shrink:0}
.s-more{display:inline-flex;margin-top:22px;font-family:var(--font-d);font-weight:600;font-size:.8rem;letter-spacing:.06em;text-transform:uppercase;color:var(--volt)}
.s-more:hover{text-decoration:underline}
/* ---------- PORTFOLIO ---------- */
.works-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:56px}
.work{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;transition:border-color .3s}
.work:hover{border-color:rgba(215,255,60,.45)}
.ba{position:relative;aspect-ratio:4/3.4;overflow:hidden;--pos:55%;cursor:ew-resize;touch-action:none;user-select:none;-webkit-user-select:none}
.ba img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;pointer-events:none;-webkit-user-drag:none}
.gallery2-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:56px}
.g2-item{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;transition:border-color .3s}
.g2-item:hover{border-color:rgba(215,255,60,.45)}
.g2-item .g2-img{position:relative;aspect-ratio:4/3.4;overflow:hidden}
.g2-item .g2-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
.g2-item:hover .g2-img img{transform:scale(1.06)}
.g2-item figcaption{padding:16px 18px;font-family:var(--font-d);font-weight:600;font-size:.86rem;color:var(--text)}
.ba .before{position:absolute;inset:0;clip-path:inset(0 calc(100% - var(--pos)) 0 0)}
.ba .handle{position:absolute;top:0;bottom:0;left:var(--pos);width:2px;background:var(--volt);transform:translateX(-1px);pointer-events:none}
.ba .handle::after{content:"‹ ›";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:48px;height:48px;border-radius:50%;background:var(--volt);color:#0a0b09;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:1rem;letter-spacing:-1px;box-shadow:0 8px 24px rgba(0,0,0,.5),0 0 0 0 rgba(215,255,60,.55);animation:handleNudge 2.2s ease-in-out infinite,handleGlow 2.2s ease-in-out infinite}
.ba.dragged .handle::after{animation:none}
@keyframes handleNudge{0%,18%,100%{transform:translate(-50%,-50%)}9%{transform:translate(calc(-50% - 11px),-50%)}27%{transform:translate(calc(-50% + 11px),-50%)}36%{transform:translate(-50%,-50%)}}
@keyframes handleGlow{0%,18%,100%{box-shadow:0 8px 24px rgba(0,0,0,.5),0 0 0 0 rgba(215,255,60,.45)}36%{box-shadow:0 8px 24px rgba(0,0,0,.5),0 0 0 9px rgba(215,255,60,0)}}
.tag{position:absolute;top:14px;font-family:var(--font-d);font-weight:600;font-size:.62rem;letter-spacing:.18em;padding:7px 11px;border-radius:8px;pointer-events:none;z-index:2}
.tag-before{left:14px;background:rgba(10,11,9,.75);border:1px solid var(--line);color:var(--muted)}
.tag-after{right:14px;background:var(--volt);color:#0a0b09}
.work figcaption{display:flex;justify-content:space-between;align-items:center;padding:18px 22px;border-top:1px solid var(--line)}
.work figcaption b{font-family:var(--font-d);font-weight:600;font-size:.8rem;letter-spacing:.08em;text-transform:uppercase}
.work figcaption span{color:var(--muted);font-size:.76rem}
/* ---------- COLORIZER (showcase — самая сильная фича сайта) ---------- */
.colorizer{position:relative;background:var(--panel);padding-block:120px;border-top:2px solid var(--volt);border-bottom:2px solid var(--volt);overflow:hidden}
.colorizer::before{content:"";position:absolute;inset:0;background:radial-gradient(ellipse 65% 55% at 50% 0%,rgba(215,255,60,.12),transparent 70%);pointer-events:none}
.colorizer .container-wide{position:relative;z-index:1}
.cz-badge{display:inline-flex;align-items:center;gap:8px;font-family:var(--font-d);font-weight:700;font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:#0a0b09;background:var(--volt);padding:10px 18px;border-radius:999px;margin-bottom:22px}
.colorizer h2{font-size:clamp(1.9rem,4.4vw,3.2rem);max-width:820px}
.colorizer-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:40px;margin-top:56px;align-items:start}
.cz-stage{background:var(--bg);border:2px dashed var(--line);border-radius:var(--radius);overflow:hidden;position:relative;aspect-ratio:4/3;display:flex;align-items:center;justify-content:center;transition:border-color .25s}
.cz-stage-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.5;z-index:0}
.cz-stage-veil{position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,11,9,.55) 0%,rgba(10,11,9,.75) 100%);z-index:0}
.cz-stage canvas{display:none;width:100%;height:100%;object-fit:contain;position:relative;z-index:1}
.cz-empty{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;text-align:center;padding:30px;color:var(--muted);z-index:1}
.cz-empty svg{width:42px;height:42px;opacity:.55}
.cz-empty span{font-size:.92rem;max-width:260px;line-height:1.5}
.cz-step-label{font-family:var(--font-d);font-weight:600;font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;color:var(--volt)}
.cz-upload-btn{cursor:pointer}
.cz-controls{display:flex;flex-direction:column;gap:28px}
.cz-block h3{font-weight:800;text-transform:uppercase;font-size:.9rem;margin-bottom:16px;letter-spacing:.06em;color:var(--muted)}
.cz-swatch-upload{display:flex;align-items:center;gap:14px;padding:14px;border:2px dashed var(--line);border-radius:14px;cursor:pointer;transition:border-color .25s}
.cz-swatch-upload:hover{border-color:rgba(215,255,60,.45)}
.cz-swatch-preview{width:44px;height:44px;border-radius:10px;background:var(--bg);border:1px solid var(--line);flex-shrink:0;background-size:cover;background-position:center}
.cz-swatch-upload-text{font-size:.82rem;color:var(--muted);line-height:1.4}
.cz-color-tip{margin-top:10px;font-size:.74rem;color:var(--muted);line-height:1.5}
.cz-tabs{display:flex;gap:8px;margin-bottom:14px}
.cz-tab{flex:1;padding:10px 14px;border:1px solid var(--line);border-radius:12px;background:var(--bg);color:var(--muted);font-family:var(--font-d);font-weight:600;font-size:.7rem;letter-spacing:.06em;text-transform:uppercase;cursor:pointer;text-align:center;transition:border-color .25s,color .25s}
.cz-tab.active{border-color:rgba(215,255,60,.6);color:var(--volt);background:var(--volt-dim)}
.cz-panel{display:none}
.cz-panel.active{display:block}
.cz-palette-scroll{max-height:280px;overflow-y:auto;padding-right:8px}
.cz-palette-scroll::-webkit-scrollbar{width:6px}
.cz-palette-scroll::-webkit-scrollbar-thumb{background:var(--line);border-radius:6px}
.cz-palette-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(52px,1fr));gap:9px}
.cz-photo-chip{position:relative;width:52px;height:52px;border-radius:10px;border:2px solid var(--line);cursor:pointer;padding:0;overflow:hidden;background-size:cover;background-position:center;transition:transform .15s,border-color .15s}
.cz-photo-chip:hover{transform:scale(1.08)}
.cz-photo-chip.selected{border-color:var(--volt);box-shadow:0 0 0 2px var(--volt-dim)}
.cz-palette-empty{color:var(--muted);font-size:.82rem;padding:8px 2px;line-height:1.6}
.cz-selected-name{font-size:.82rem;color:var(--text);margin-top:12px;min-height:1.3em}
.cz-selected-name b{color:var(--volt)}
.cz-row-btns{display:flex;gap:12px;flex-wrap:wrap}
.cz-row-btns .btn{flex:1;justify-content:center}
.cz-loading{position:absolute;inset:0;background:rgba(10,11,9,.92);display:none;flex-direction:column;align-items:center;justify-content:center;gap:16px;z-index:3;color:var(--text);font-size:.88rem}
.cz-loading.show{display:flex}
.cz-spinner{width:38px;height:38px;border-radius:50%;border:3px solid rgba(215,255,60,.25);border-top-color:var(--volt);animation:cz-spin .8s linear infinite}
@keyframes cz-spin{to{transform:rotate(360deg)}}
.cz-ai-block{display:flex;flex-direction:column;gap:10px;padding:18px;border:1px solid rgba(215,255,60,.3);border-radius:16px;background:var(--volt-dim)}
.cz-ai-block .btn{justify-content:center}
.cz-ai-block .btn:disabled{opacity:.45;cursor:not-allowed;transform:none;box-shadow:none}
.cz-ai-status{font-size:.78rem;color:var(--muted);text-align:center}
.cz-note{color:var(--muted);font-size:.78rem;line-height:1.6}
/* ---------- TRUST (Почему мы + Гарантии, объединено) ---------- */
.trust{background:var(--panel);border-block:1px solid var(--line)}
.trust-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:22px;margin-top:56px}
.t-card{border:1px solid var(--line);border-radius:var(--radius);padding:30px 26px;background:var(--bg);transition:border-color .3s,transform .3s}
.t-card:hover{border-color:rgba(215,255,60,.45);transform:translateY(-6px)}
.t-card b{display:block;font-family:var(--font-d);font-weight:800;font-size:.8rem;color:var(--volt);margin-bottom:44px}
.t-card h3{font-size:1rem;font-weight:600;text-transform:uppercase;margin-bottom:12px;letter-spacing:.04em}
.t-card p{color:var(--muted);font-size:.9rem}
/* ---------- PREP (что делаем до оклейки) ---------- */
.prep-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;margin-top:56px}
.p-card{border:1px solid var(--line);border-radius:var(--radius);padding:30px 26px;background:var(--panel);transition:border-color .3s,transform .3s}
.p-card:hover{border-color:rgba(215,255,60,.45);transform:translateY(-6px)}
.p-card b{display:block;font-family:var(--font-d);font-weight:800;font-size:.8rem;color:var(--volt);margin-bottom:44px}
.p-card h3{font-size:1rem;font-weight:600;text-transform:uppercase;margin-bottom:12px;letter-spacing:.04em}
.p-card p{color:var(--muted);font-size:.9rem}
/* ---------- OUTSOURCE (студиям) ---------- */
.outsource{background:var(--panel);border-block:1px solid var(--line)}
.outsource-inner{display:flex;align-items:center;justify-content:space-between;gap:30px;flex-wrap:wrap}
.outsource-inner h2{max-width:640px}
.outsource-inner .section-sub{margin-top:10px}
/* ---------- INNER PAGE HERO ---------- */
.page-hero{padding:150px 0 70px}
.page-hero h1{font-weight:800;text-transform:uppercase;font-size:clamp(1.8rem,4.6vw,3.2rem);line-height:1.1;max-width:820px}
.page-hero .lead{color:var(--muted);max-width:680px;margin-top:22px;font-size:1.02rem;line-height:1.7}
/* ---------- BREADCRUMBS ---------- */
.breadcrumbs ol{list-style:none;display:flex;flex-wrap:wrap;gap:8px;font-size:.8rem;color:var(--muted);margin-bottom:24px}
.breadcrumbs li{display:flex;align-items:center;gap:8px}
.breadcrumbs li:not(:last-child)::after{content:"/";color:var(--line)}
.breadcrumbs a{color:var(--muted);transition:color .2s}
.breadcrumbs a:hover{color:var(--volt)}
.breadcrumbs span[aria-current]{color:var(--text)}
/* ---------- PRICE SLOT (заглушка под калькулятор) ---------- */
.price-slot{margin-top:16px;padding-top:16px;border-top:1px dashed var(--line);color:var(--muted);font-size:.82rem;line-height:1.5}
/* ---------- FAQ ---------- */
.faq{margin-top:56px;display:grid;gap:14px;max-width:780px}
.faq-item{border:1px solid var(--line);border-radius:16px;padding:22px 26px;background:var(--panel)}
.faq-item summary{cursor:pointer;font-family:var(--font-d);font-weight:700;font-size:.98rem;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:16px}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{content:"+";color:var(--volt);font-size:1.4rem;font-weight:700;flex-shrink:0;transition:transform .25s;line-height:1}
.faq-item[open] summary::after{transform:rotate(45deg)}
.faq-item p{color:var(--muted);margin-top:14px;font-size:.92rem;line-height:1.65}
/* ---------- COMPARE TABLE ---------- */
.compare-wrap{margin-top:32px;overflow-x:auto}
.compare-table{width:100%;border-collapse:collapse;min-width:520px}
.compare-table th,.compare-table td{padding:16px 18px;border-bottom:1px solid var(--line);text-align:left;font-size:.9rem}
.compare-table th{font-family:var(--font-d);font-weight:700;text-transform:uppercase;font-size:.72rem;letter-spacing:.08em;color:var(--muted)}
.compare-table td:first-child{color:var(--muted)}
.compare-table td.yes{color:var(--volt);font-weight:700}
/* ---------- PROMO BANNER (напр. врезка CTA на /tryon/) ---------- */
.promo-banner{background:var(--panel);border:1px solid rgba(215,255,60,.3);border-radius:var(--radius);padding:40px 44px;display:flex;align-items:center;justify-content:space-between;gap:30px;flex-wrap:wrap;margin:56px 0}
.promo-banner h3{font-family:var(--font-d);font-weight:800;text-transform:uppercase;font-size:1.25rem;max-width:520px;line-height:1.25}
.promo-banner p{color:var(--muted);margin-top:8px;max-width:480px;font-size:.92rem}
/* ---------- MAP ---------- */
.map-frame{width:100%;aspect-ratio:16/10;border:1px solid var(--line);border-radius:var(--radius)}
/* ---------- COLOR PAGES (/tryon/cvet/...) ---------- */
.color-preview-grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:48px;align-items:center;margin-top:56px}
.color-swatch-figure{border-radius:var(--radius);overflow:hidden;border:1px solid var(--line);background:var(--panel)}
.color-swatch-figure img{width:100%;aspect-ratio:1/1;object-fit:cover;display:block}
.color-preview-grid h2{font-weight:800;text-transform:uppercase;font-size:1.4rem;margin-bottom:14px}
.color-preview-grid .btn{margin-top:22px}
.color-mini-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:16px;margin-top:40px}
.color-mini{display:flex;flex-direction:column;gap:8px;text-align:center}
.color-mini picture,.color-mini img{border-radius:14px;overflow:hidden;width:100%;aspect-ratio:1/1;object-fit:cover;display:block;border:1px solid var(--line);transition:border-color .25s,transform .25s}
.color-mini:hover img{border-color:rgba(215,255,60,.5);transform:translateY(-3px)}
.color-mini span{font-size:.74rem;color:var(--muted);line-height:1.3}
/* ---------- TRYON CATALOG GRID (main /tryon/ listing) ---------- */
.tryon-catalog-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:14px;margin-top:24px}
.tryon-catalog-grid a{display:flex;flex-direction:column;gap:6px;text-align:center;text-decoration:none}
.tryon-catalog-grid img{border-radius:12px;width:100%;aspect-ratio:1/1;object-fit:cover;display:block;border:1px solid var(--line);transition:border-color .2s,transform .2s}
.tryon-catalog-grid a:hover img{border-color:rgba(215,255,60,.5);transform:translateY(-2px)}
.tryon-catalog-grid span{font-size:.7rem;color:var(--muted);line-height:1.25}
@media(max-width:860px){
  .color-preview-grid{grid-template-columns:1fr}
}
/* ---------- BLOG LISTING ---------- */
.blog-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:56px}
.blog-card{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;transition:border-color .3s,transform .3s;display:flex;flex-direction:column}
.blog-card:hover{border-color:rgba(215,255,60,.45);transform:translateY(-6px)}
.blog-card .b-img{position:relative;aspect-ratio:4/2.6;overflow:hidden}
.blog-card .b-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.blog-card .b-body{padding:26px 24px;display:flex;flex-direction:column;gap:12px;flex:1}
.blog-card time{font-family:var(--font-d);font-weight:600;font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;color:var(--volt)}
.blog-card h3{font-weight:800;text-transform:uppercase;font-size:1.05rem;line-height:1.3}
.blog-card p{color:var(--muted);font-size:.9rem;flex:1}
.blog-card .b-more{font-family:var(--font-d);font-weight:600;font-size:.78rem;letter-spacing:.06em;text-transform:uppercase;color:var(--volt)}
/* ---------- ARTICLE (blog post) ---------- */
.article-meta{display:flex;gap:16px;flex-wrap:wrap;color:var(--muted);font-size:.82rem;margin-top:20px}
.article{max-width:760px;margin-top:48px;color:var(--text);font-size:1.02rem;line-height:1.75}
.article h2{font-weight:800;text-transform:uppercase;font-size:1.4rem;margin:48px 0 18px;letter-spacing:.01em}
.article h3{font-weight:700;font-size:1.1rem;margin:32px 0 14px}
.article p{margin-bottom:18px;color:var(--text)}
.article p.muted{color:var(--muted)}
.article ul,.article ol{margin:0 0 18px 22px;color:var(--text)}
.article li{margin-bottom:8px}
.article a{color:var(--volt);text-decoration:underline;text-underline-offset:3px}
.article figure{margin:32px 0}
.article figure img{border-radius:var(--radius);width:100%;height:auto}
.article figcaption{color:var(--muted);font-size:.82rem;margin-top:10px}
.article .conclusion{margin-top:40px;padding:24px 28px;border-left:3px solid var(--volt);background:var(--panel);border-radius:0 var(--radius) var(--radius) 0}
.article .conclusion h2{margin-top:0}
.article .note{margin-top:32px;padding:18px 22px;border:1px dashed var(--line);border-radius:16px;color:var(--muted);font-size:.86rem;line-height:1.6}
/* ---------- CONTACT ---------- */
.contact{background:var(--panel);border-top:1px solid var(--line)}
.contact-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:60px;align-items:start}
.c-list{list-style:none;margin:34px 0 38px;display:grid;gap:0;border-top:1px solid var(--line)}
.c-list li{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:18px 4px;border-bottom:1px solid var(--line)}
.c-list li span{color:var(--muted);font-size:.86rem;text-transform:uppercase;letter-spacing:.1em;font-weight:500}
.c-list li a{font-family:var(--font-d);font-weight:600;font-size:.95rem;transition:color .25s}
.c-list li a:hover{color:var(--volt)}
.contact-form{background:var(--bg);border:1px solid var(--line);border-radius:var(--radius);padding:38px 34px}
.contact-form h3{font-weight:800;text-transform:uppercase;font-size:1.1rem;margin-bottom:26px}
.contact-form label{display:block;margin-bottom:18px;font-size:.8rem;color:var(--muted);text-transform:uppercase;letter-spacing:.1em;font-weight:700}
.contact-form input,.contact-form select{width:100%;margin-top:8px;background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:15px 16px;color:var(--text);font-family:var(--font-b);font-size:.95rem;transition:border-color .25s;outline:none;appearance:none}
.contact-form input:focus,.contact-form select:focus{border-color:var(--volt)}
.contact-form .btn{width:100%;justify-content:center;margin-top:6px}
.form-note{color:var(--muted);font-size:.74rem;margin-top:14px;text-align:center}
.contact-form label.form-consent{display:flex;align-items:flex-start;gap:8px;text-transform:none;letter-spacing:normal;font-weight:400;font-size:.78rem;color:var(--muted);margin:14px 0 6px}
.form-consent input[type=checkbox]{margin-top:3px;width:16px;height:16px;flex-shrink:0;accent-color:var(--volt)}
.form-consent a{color:var(--volt);text-decoration:underline}
.hp-field{position:absolute;left:-9999px;top:-9999px;width:1px;height:1px;overflow:hidden}
/* ---------- FOOTER ---------- */
footer.site{padding:34px 0;border-top:1px solid var(--line)}
footer.site .footer-row{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;align-items:center}
footer.site p{color:var(--muted);font-size:.84rem}
footer.site .footer-partners{margin-top:22px;padding-top:22px;border-top:1px solid var(--line);font-size:.84rem;color:var(--muted)}
footer.site .footer-partners a{color:var(--volt);font-weight:600}
footer.site .footer-partners a:hover{text-decoration:underline}
/* ---------- TOAST ---------- */
#toast{position:fixed;left:50%;bottom:28px;transform:translate(-50%,140%);visibility:hidden;background:var(--volt);color:#0a0b09;font-family:var(--font-d);font-weight:600;font-size:.8rem;padding:16px 26px;border-radius:14px;z-index:100;transition:transform .45s cubic-bezier(.2,.9,.3,1.2),visibility 0s linear .45s;box-shadow:0 16px 44px rgba(0,0,0,.5)}
#toast.show{transform:translate(-50%,0);visibility:visible;transition:transform .45s cubic-bezier(.2,.9,.3,1.2),visibility 0s linear 0s}
/* ---------- REVEAL ----------
   Opacity-only on purpose: a translateY offset here used to count as a real
   layout shift in Chrome's CLS measurement (transform-based movement still
   moves painted content between frames), which was tanking the CLS score for
   above-the-fold blocks like the hero stats that animate in immediately on load. */
.reveal{opacity:1;transition:opacity .7s ease}
.js .reveal{opacity:0}
.js .reveal.in{opacity:1}
.d1{transition-delay:.1s}.d2{transition-delay:.2s}.d3{transition-delay:.3s}
/* ---------- 404 ---------- */
.notfound{min-height:80svh;display:flex;align-items:center;padding-top:96px}
.notfound .kicker{margin-bottom:10px}
.notfound h1{font-weight:800;text-transform:uppercase;font-size:clamp(2.4rem,10vw,6rem);line-height:1;color:var(--volt)}
.notfound p{color:var(--muted);max-width:520px;margin:20px 0 34px}
.notfound-links{display:flex;gap:14px;flex-wrap:wrap}
/* ---------- RESPONSIVE ---------- */
@media(max-width:1000px){
  .services-grid,.works-grid,.gallery2-grid,.prep-grid,.blog-grid{grid-template-columns:1fr 1fr}
  .trust-grid{grid-template-columns:1fr 1fr}
  .contact-grid{grid-template-columns:1fr}
  .colorizer-grid{grid-template-columns:1fr}
  .hero-side{display:none}
}
@media(max-width:860px){
  .nav-right{display:none}
  #burger{display:block}
}
@media(max-width:640px){
  section{padding:72px 0}
  .colorizer{padding-block:64px}
  .services-grid,.works-grid,.trust-grid,.gallery2-grid,.prep-grid,.blog-grid{grid-template-columns:1fr}
  .outsource-inner{flex-direction:column;align-items:flex-start}
  .stats{gap:26px}
  .hero{padding-top:130px}
}