/* Self-hosted Manrope (latin, latin-ext, cyrillic, cyrillic-ext; 400–800). font-display:swap. */
@font-face{font-family:'Manrope';font-style:normal;font-display:swap;font-weight:400;src:url('../fonts/manrope-cyrillic-ext-400-normal.woff2') format('woff2');unicode-range:U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F}
@font-face{font-family:'Manrope';font-style:normal;font-display:swap;font-weight:400;src:url('../fonts/manrope-cyrillic-400-normal.woff2') format('woff2');unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:'Manrope';font-style:normal;font-display:swap;font-weight:400;src:url('../fonts/manrope-latin-ext-400-normal.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Manrope';font-style:normal;font-display:swap;font-weight:400;src:url('../fonts/manrope-latin-400-normal.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Manrope';font-style:normal;font-display:swap;font-weight:500;src:url('../fonts/manrope-cyrillic-ext-500-normal.woff2') format('woff2');unicode-range:U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F}
@font-face{font-family:'Manrope';font-style:normal;font-display:swap;font-weight:500;src:url('../fonts/manrope-cyrillic-500-normal.woff2') format('woff2');unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:'Manrope';font-style:normal;font-display:swap;font-weight:500;src:url('../fonts/manrope-latin-ext-500-normal.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Manrope';font-style:normal;font-display:swap;font-weight:500;src:url('../fonts/manrope-latin-500-normal.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Manrope';font-style:normal;font-display:swap;font-weight:600;src:url('../fonts/manrope-cyrillic-ext-600-normal.woff2') format('woff2');unicode-range:U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F}
@font-face{font-family:'Manrope';font-style:normal;font-display:swap;font-weight:600;src:url('../fonts/manrope-cyrillic-600-normal.woff2') format('woff2');unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:'Manrope';font-style:normal;font-display:swap;font-weight:600;src:url('../fonts/manrope-latin-ext-600-normal.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Manrope';font-style:normal;font-display:swap;font-weight:600;src:url('../fonts/manrope-latin-600-normal.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Manrope';font-style:normal;font-display:swap;font-weight:700;src:url('../fonts/manrope-cyrillic-ext-700-normal.woff2') format('woff2');unicode-range:U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F}
@font-face{font-family:'Manrope';font-style:normal;font-display:swap;font-weight:700;src:url('../fonts/manrope-cyrillic-700-normal.woff2') format('woff2');unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:'Manrope';font-style:normal;font-display:swap;font-weight:700;src:url('../fonts/manrope-latin-ext-700-normal.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Manrope';font-style:normal;font-display:swap;font-weight:700;src:url('../fonts/manrope-latin-700-normal.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Manrope';font-style:normal;font-display:swap;font-weight:800;src:url('../fonts/manrope-cyrillic-ext-800-normal.woff2') format('woff2');unicode-range:U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F}
@font-face{font-family:'Manrope';font-style:normal;font-display:swap;font-weight:800;src:url('../fonts/manrope-cyrillic-800-normal.woff2') format('woff2');unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:'Manrope';font-style:normal;font-display:swap;font-weight:800;src:url('../fonts/manrope-latin-ext-800-normal.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Manrope';font-style:normal;font-display:swap;font-weight:800;src:url('../fonts/manrope-latin-800-normal.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

/* CVC · Сервис центр — основной стиль */
:root{
  --green:#08B414;          /* зелёный кольца логотипа (взят из logo-original.jpg) */
  --green-d:#07990D;        /* зелёный буквы «Р» — для текста-акцентов */
  --green-soft:#E8F8EA;
  --blue:#1E6BFF; --blue-d:#1455D9; --blue-soft:#EAF1FF;
  --ink:#0E1116; --ink-2:#2A2F38; --muted:#5E6673; --line:#E6E9EF;
  --bg:#fff; --bg-soft:#F5F7FA;
  --r:18px; --r-sm:12px;
  --sh-1:0 1px 2px rgba(16,24,40,.05),0 4px 14px rgba(16,24,40,.06);
  --sh-2:0 10px 30px rgba(16,24,40,.10);
  --sh-blue:0 8px 22px rgba(30,107,255,.32);
  --ease:cubic-bezier(.2,.7,.2,1);
  --container:1240px;
  --header-h:76px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:110px}
body{font-family:'Manrope',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;color:var(--ink);background:var(--bg);line-height:1.55;font-size:16px;-webkit-font-smoothing:antialiased;overflow-x:hidden;overflow-x:clip}
main{overflow-x:clip}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
.icon{width:1.25em;height:1.25em;flex:none;display:inline-block;vertical-align:middle}
.container{max-width:var(--container);margin:0 auto;padding:0 24px}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* ---------- typography ---------- */
h1,h2,h3,h4{line-height:1.15;letter-spacing:-.02em;font-weight:800}
h1{font-size:clamp(34px,5vw,60px)}
h2{font-size:clamp(28px,3.4vw,42px)}
h3{font-size:20px;letter-spacing:-.01em}
.lead{font-size:clamp(16px,1.6vw,19px);color:var(--muted);max-width:640px}
.eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--green-d);margin-bottom:14px}
.eyebrow::before{content:"";width:22px;height:3px;border-radius:3px;background:var(--green)}
.text-green{color:var(--green-d)}
.section{padding:96px 0}
.section--soft{background:var(--bg-soft)}
.section-head{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;margin-bottom:44px;flex-wrap:wrap}
.section-head .lead{margin-top:12px}
.example-badge{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:700;color:#8A5A00;background:#FFF4D6;border:1px solid #FFE3A1;border-radius:999px;padding:3px 10px;vertical-align:middle}

/* ---------- buttons ---------- */
.btn{position:relative;overflow:hidden;display:inline-flex;align-items:center;justify-content:center;gap:10px;height:52px;padding:0 26px;border-radius:14px;border:0;cursor:pointer;font-weight:700;font-size:16px;white-space:nowrap;
  background:var(--blue);color:#fff;box-shadow:0 2px 6px rgba(30,107,255,.25);
  transition:transform .25s var(--ease),box-shadow .25s var(--ease),background-color .25s var(--ease),color .25s}
.btn:hover{background:var(--blue-d);transform:translateY(-2px);box-shadow:var(--sh-blue)}
.btn:active{transform:translateY(0) scale(.97);box-shadow:0 2px 8px rgba(30,107,255,.3);transition-duration:.08s}
.btn:focus-visible{outline:3px solid rgba(30,107,255,.35);outline-offset:3px}
.btn--ghost{background:#fff;color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--line)}
.btn--ghost:hover{background:#fff;color:var(--blue);box-shadow:inset 0 0 0 1.5px var(--blue),var(--sh-1)}
.btn--green{background:var(--green-d);box-shadow:0 2px 6px rgba(7,153,13,.25)}
.btn--green:hover{background:#067f0b;box-shadow:0 8px 22px rgba(7,153,13,.3)}
.btn--sm{height:42px;padding:0 18px;font-size:15px;border-radius:12px}
.btn--lg{height:60px;padding:0 32px;font-size:17px;border-radius:16px}
.btn--block{width:100%}
.btn .ripple{position:absolute;border-radius:50%;transform:scale(0);background:rgba(255,255,255,.45);animation:ripple .6s linear;pointer-events:none}
.btn--ghost .ripple{background:rgba(30,107,255,.18)}
@keyframes ripple{to{transform:scale(4);opacity:0}}
.link-arrow{display:inline-flex;align-items:center;gap:6px;font-weight:700;color:var(--blue);transition:gap .2s}
.link-arrow:hover{gap:10px}

/* ---------- header ---------- */
.header{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.92);backdrop-filter:saturate(180%) blur(14px);-webkit-backdrop-filter:saturate(180%) blur(14px);border-bottom:1px solid transparent;transition:border-color .3s,box-shadow .3s}
.header.scrolled{border-color:var(--line);box-shadow:0 4px 20px rgba(16,24,40,.06)}
.header__row{display:flex;align-items:center;gap:10px;height:var(--header-h);transition:height .28s var(--ease)}
.logo{display:flex;align-items:center;gap:10px;flex:none}
.logo img,.logo__img{width:auto;height:34px;border-radius:0;transition:opacity .25s var(--ease),transform .35s var(--ease)}
.logo:hover img{transform:scale(1.03);opacity:.92}
/* Logo: assembly on load, hover on the mark, compact-on-scroll. */
.logo{position:relative}
.logo .logo-mark,
.logo .logo-word{transform-box:fill-box}
.logo .logo-mark{
  transform-origin:50% 50%;
  transition:transform .45s var(--ease);
}
.logo:hover .logo-mark{transform:rotate(8deg)}
.logo .logo-word{
  transform-origin:left center;
  transition:opacity .28s var(--ease),transform .28s var(--ease);
}
.header.is-compact{--header-h:62px}
.header.is-compact .logo:has(.logo-mark) .logo-word{
  opacity:0;
  transform:translateX(-10px);
  pointer-events:none;
}
.header.is-compact .logo:has(.logo-mark) .logo-mark{transform:scale(.9)}
.header.is-compact .logo:has(.logo-mark):hover .logo-mark{transform:scale(.9) rotate(8deg)}

/* Assembly: parts snap like a mechanism, then the wordmark. */
.logo .logo-part{animation:logoSnap .45s var(--ease) backwards}
.logo .logo-part--1{animation-delay:.10s;--sx:-8px;--sy:6px}
.logo .logo-part--2{animation-delay:.26s;--sx:0px;--sy:-8px}
.logo .logo-part--3{animation-delay:.42s;--sx:8px;--sy:6px}
.logo .logo-part--4{animation-delay:.52s;--sx:6px;--sy:-6px}
.logo .logo-part--5{animation-delay:.58s;--sx:-4px;--sy:8px}
.logo .logo-word{animation:logoWordIn .4s var(--ease) backwards;animation-delay:.68s}

/* Concept 1 — halves slide together, then the green seam lights up */
.logo .logo-half--l{animation:logoHalfL .5s var(--ease) .08s backwards}
.logo .logo-half--r{animation:logoHalfR .5s var(--ease) .08s backwards}
.logo .logo-seam{transform-box:fill-box;transform-origin:50% 100%;animation:logoSeamGlow .4s var(--ease) .52s backwards}
@keyframes logoHalfL{
  from{opacity:0;transform:translateX(-16px)}
  72%{opacity:1;transform:translateX(1.5px)}
  to{opacity:1;transform:none}
}
@keyframes logoHalfR{
  from{opacity:0;transform:translateX(16px)}
  72%{opacity:1;transform:translateX(-1.5px)}
  to{opacity:1;transform:none}
}
@keyframes logoSeamGlow{
  from{opacity:0;transform:scaleY(.12)}
  to{opacity:1;transform:none}
}

/* Concept 2 — C's appear, pulse line draws through them */
.logo .logo-pulse{stroke-dasharray:1;stroke-dashoffset:0;animation:logoPulseDraw .7s var(--ease) .22s backwards}
@keyframes logoPulseDraw{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}

/* Concept 3 — shield snaps, traces and the V keep-out light up */
.logo .logo-trace{stroke-dasharray:1;stroke-dashoffset:0;animation:logoTraceDraw .55s var(--ease) backwards}
.logo .logo-trace--1{animation-delay:.16s}
.logo .logo-trace--2{animation-delay:.26s}
.logo .logo-trace--3{animation-delay:.36s}
.logo .logo-trace--4{animation-delay:.46s}
.logo .logo-trace--5{animation-delay:.54s}
.logo .logo-via{opacity:1;animation:logoViaIn .3s var(--ease) backwards}
@keyframes logoTraceDraw{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
@keyframes logoViaIn{from{opacity:0}to{opacity:1}}
.logo .logo-v-keepout{transform-box:fill-box;transform-origin:50% 40%;animation:logoSeamGlow .4s var(--ease) .48s backwards}

/* Concept 3 diamond — facets snap, then a glint sweeps the cut */
.logo .logo-facet-lines{opacity:1;animation:logoViaIn .28s var(--ease) .62s backwards}
.logo .logo-glint-bar{opacity:0;transform-box:fill-box;animation:logoGlintSweep .7s var(--ease) .88s backwards}
@keyframes logoGlintSweep{
  0%{opacity:0;transform:translateX(-8px)}
  18%{opacity:1}
  78%{opacity:1}
  100%{opacity:0;transform:translateX(78px)}
}
.logo:hover .logo-glint-bar{animation:logoGlintSweep .65s var(--ease)}

/* Concept 4 microscope — parts snap, then the lens light turns on; hover pulses */
.logo .logo-light{opacity:1;transform-box:fill-box;transform-origin:50% 40%;animation:logoLightOn .4s var(--ease) .78s backwards}
@keyframes logoLightOn{from{opacity:0}to{opacity:1}}
@keyframes logoLightPulse{0%,100%{opacity:1}50%{opacity:.38}}
.logo:hover .logo-light{animation:logoLightPulse 1.15s ease-in-out infinite}


@keyframes logoSnap{
  0%{opacity:0;transform:scale(.55) translate(var(--sx,0),var(--sy,8px))}
  70%{opacity:1;transform:scale(1.06) translate(0,0)}
  100%{opacity:1;transform:none}
}
@keyframes logoWordIn{
  from{opacity:0;transform:translateX(8px)}
  to{opacity:1;transform:none}
}

@media (prefers-reduced-motion:reduce){
  .header__row{transition:none}
  .logo .logo-mark,.logo .logo-word,.logo-part,
  .logo-half--l,.logo-half--r,.logo-seam,.logo-pulse,
  .logo-trace,.logo-via,.logo-v-keepout,
  .logo-facet-lines,.logo-glint-bar,.logo-light{transition:none;animation:none}
  .logo-pulse,.logo-trace{stroke-dashoffset:0}
  .logo-via{opacity:1}
  .logo-glint-bar{opacity:0}
  .logo-light,.logo-facet-lines{opacity:1}
  .logo:hover .logo-mark{transform:none}
  .logo:hover .logo-glint-bar{animation:none;opacity:0}
  .logo:hover .logo-light{animation:none;opacity:1}
  .header.is-compact .logo:has(.logo-mark) .logo-word{transition:none}
  .header.is-compact .logo:has(.logo-mark) .logo-mark{transform:scale(.9)}
}


.logo__text{display:flex;flex-direction:column;line-height:1.05}
.logo__text b{font-size:18px;letter-spacing:.02em}
.logo__text small{font-size:12px;color:var(--muted);font-weight:600}
.nav{display:flex;align-items:center;gap:0;margin-left:4px;min-width:0}
.nav > a,.nav__dd > button{display:inline-flex;align-items:center;gap:3px;height:38px;padding:0 7px;border-radius:10px;font-weight:600;font-size:13.5px;white-space:nowrap;color:var(--ink-2);background:none;border:0;cursor:pointer;transition:background .2s,color .2s}
.nav > a:hover,.nav__dd > button:hover,.nav__dd:hover > button{background:var(--bg-soft);color:var(--ink)}
.nav a.active{color:var(--green-d)}
.nav__dd{position:relative}
.nav__dd .icon{width:16px;height:16px;transition:transform .25s}
.nav__dd:hover .icon,.nav__dd.open .icon{transform:rotate(180deg)}
.dd{position:absolute;top:calc(100% + 8px);left:0;min-width:250px;background:#fff;border:1px solid var(--line);border-radius:16px;box-shadow:var(--sh-2);padding:8px;opacity:0;visibility:hidden;transform:translateY(8px);transition:.22s var(--ease)}
.nav__dd::after{content:"";position:absolute;left:0;right:0;top:100%;height:10px}
.nav__dd:hover .dd,.nav__dd.open .dd{opacity:1;visibility:visible;transform:none}
.dd a{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:10px;font-weight:600;font-size:15px;transition:background .2s}
.dd a:hover{background:var(--bg-soft)}
.dd a .ico-box{width:36px;height:36px}
.dd a small{display:block;font-weight:500;color:var(--muted);font-size:12.5px}
.header__right{margin-left:auto;display:flex;align-items:center;gap:10px;flex:none}
.header__phone{display:flex;flex-direction:column;line-height:1.15;text-align:right}
.header__phone a{font-weight:800;font-size:16px;white-space:nowrap}
.header__phone a:hover{color:var(--blue)}
.header__phone small{font-size:12px;color:var(--muted);white-space:nowrap}
/* Fit desktop header: logo + slim nav + phone/hours, no overlap 1281–2560 */
@media (min-width:1281px){
  .header__phone{flex:none;margin-left:20px}
  .header__right{flex:none}
}
@media (min-width:1281px) and (max-width:1440px){
  .nav > a,.nav__dd > button{padding:0 5px;font-size:13px}
}
@media (max-width:1480px){
  .logo img,.logo__img{height:30px}
  .header__row{gap:8px}
  .header__right{gap:8px}
}
@media (max-width:1400px){.header .logo__text{display:none}}
.burger{display:none;width:44px;height:44px;border-radius:12px;border:1.5px solid var(--line);background:#fff;align-items:center;justify-content:center;cursor:pointer}
.burger .icon{width:22px;height:22px}
.ico-box{display:inline-flex;align-items:center;justify-content:center;width:52px;height:52px;border-radius:14px;background:var(--green-soft);color:var(--green-d);flex:none}
.ico-box .icon{width:55%;height:55%}

/* mobile drawer */
.drawer{position:fixed;inset:0;z-index:80;pointer-events:none}
.drawer__bg{position:absolute;inset:0;background:rgba(14,17,22,.45);opacity:0;transition:opacity .3s}
.drawer__panel{position:absolute;top:0;right:0;bottom:0;width:min(360px,88vw);background:#fff;padding:20px;overflow:auto;transform:translateX(100%);transition:transform .35s var(--ease);display:flex;flex-direction:column;gap:6px}
.drawer__panel > *{flex:none}
.drawer.open{pointer-events:auto}
.drawer.open .drawer__bg{opacity:1}
.drawer.open .drawer__panel{transform:none}
.drawer__top{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}
.drawer a.d-link{display:flex;align-items:center;gap:12px;padding:12px;border-radius:12px;font-weight:700}
.drawer a.d-link:hover{background:var(--bg-soft)}
.drawer .d-group{font-size:12px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);padding:14px 12px 4px}
.drawer .d-sub{padding-left:24px;font-weight:600}
.drawer .messengers{margin-top:14px}

/* ---------- hero ---------- */
.hero{position:relative;overflow:hidden;padding:56px 0 80px;text-align:center}
.hero::before{content:"";position:absolute;inset:-20% -10% auto;height:120%;background:
  radial-gradient(600px 380px at 50% 40%,rgba(8,180,20,.12),transparent 70%),
  radial-gradient(500px 300px at 85% 20%,rgba(30,107,255,.08),transparent 70%),
  radial-gradient(420px 300px at 12% 70%,rgba(30,107,255,.06),transparent 70%);z-index:-1}
.hero__grid{position:absolute;inset:0;z-index:-1;background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);background-size:56px 56px;mask-image:radial-gradient(ellipse at 50% 40%,#000 10%,transparent 65%);-webkit-mask-image:radial-gradient(ellipse at 50% 40%,#000 10%,transparent 65%);opacity:.6}
.hero__logo{position:relative;width:min(520px,88vw);margin:0 auto 32px;z-index:1}
.hero__logo .hero-logo__svg{width:100%;height:auto;display:block;overflow:visible}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes heroLogoSoftIn{from{opacity:0;transform:scale(.96)}to{opacity:1;transform:none}}
@keyframes heroLetterIn{
  0%{opacity:0;transform:translateX(16px) scale(.86)}
  68%{opacity:1;transform:translateX(-1.5px) scale(1.04)}
  100%{opacity:1;transform:none}
}

/* Mobile / touch / narrow: light fade-scale. Logo stays in the layout for LCP; if JS fails it is still visible. */
@media (prefers-reduced-motion:no-preference){
  .hero__logo{animation:heroLogoSoftIn .55s var(--ease) backwards}
}

/* Desktop with a fine pointer: mechanical assembly, then C-V-C, then a glint (~1.7s). */
@media (hover:hover) and (pointer:fine) and (min-width:821px) and (prefers-reduced-motion:no-preference){
  .hero__logo{animation:none}
  .hero__logo .logo-part{animation:logoSnap .40s var(--ease) backwards}
  .hero__logo .logo-part--1{animation-delay:0s;--sx:-10px;--sy:8px}
  .hero__logo .logo-part--2{animation-delay:.10s;--sx:0;--sy:-10px}
  .hero__logo .logo-part--3{animation-delay:.20s;--sx:10px;--sy:8px}
  .hero__logo .logo-part--4{animation-delay:.30s;--sx:-8px;--sy:12px}
  .hero__logo .logo-part--5{animation-delay:.40s;--sx:8px;--sy:12px}
  .hero__logo .logo-facet-lines{opacity:1;animation:logoViaIn .25s var(--ease) .62s backwards}
  .hero__logo .logo-letter{transform-box:fill-box;transform-origin:50% 50%;animation:heroLetterIn .36s var(--ease) backwards}
  .hero__logo .logo-letter--c1{animation-delay:.72s}
  .hero__logo .logo-letter--v{animation-delay:.88s}
  .hero__logo .logo-letter--c2{animation-delay:1.04s}
  .hero__logo .logo-glint-bar{opacity:0;transform-box:fill-box;animation:logoGlintSweep .48s var(--ease) 1.28s backwards}
}

@media (prefers-reduced-motion:reduce){
  .hero__logo,.hero__logo .logo-part,.hero__logo .logo-facet-lines,
  .hero__logo .logo-letter,.hero__logo .logo-glint-bar{animation:none}
  .hero__logo .logo-glint-bar{opacity:0}
  .hero__logo .logo-facet-lines,.hero__logo .logo-letter{opacity:1}
}
.hero h1{max-width:820px;margin:0 auto 16px}
.hero h1 span{color:var(--green-d)}
.hero .lead{margin:0 auto 30px}
.hero__cta{display:flex;justify-content:center;align-items:stretch;gap:12px;flex-wrap:wrap;max-width:880px;margin:0 auto}
.hero__cta .btn{height:60px;min-width:230px;flex:1 1 220px;max-width:280px;padding:0 20px;box-sizing:border-box}
.btn--calc{background:linear-gradient(135deg,#1E6BFF 0%,#0E7A9C 100%);box-shadow:0 2px 8px rgba(30,107,255,.25)}
.btn--calc:hover{background:linear-gradient(135deg,#1455D9 0%,#0A6B7A 100%);box-shadow:0 10px 24px rgba(30,107,255,.3)}
.hero__chips{display:flex;justify-content:center;gap:10px;flex-wrap:wrap;margin-top:34px}
.chip-info{display:inline-flex;align-items:center;gap:8px;padding:9px 16px;border-radius:999px;background:#fff;border:1px solid var(--line);font-weight:600;font-size:14px;box-shadow:var(--sh-1)}
.chip-info .icon{color:var(--green-d)}
.hero__floats{position:absolute;inset:0;z-index:3;pointer-events:none}
.hero__float{position:absolute;pointer-events:auto;width:228px;padding:12px;background:#fff;border-radius:20px;box-shadow:var(--sh-2);text-align:left;color:inherit;text-decoration:none;animation:heroFloatIn .7s var(--ease) backwards}
.hero__float:hover{box-shadow:0 16px 40px rgba(16,24,40,.16);transform:translateY(-2px)}
.hero__float-bob{display:block;animation:heroFloatBob 6.8s ease-in-out infinite}
.hero__float--1{left:3.2%;top:70px;animation-delay:1.55s}
.hero__float--1 .hero__float-bob{animation-delay:2.25s}
.hero__float--2{right:3.2%;top:82px;animation-delay:1.7s}
.hero__float--2 .hero__float-bob{animation-delay:3.4s}
.hero__float--3{left:4.5%;top:auto;bottom:18%;animation-delay:1.85s}
.hero__float--3 .hero__float-bob{animation-delay:2.9s}
.hero__float--4{right:4.5%;top:auto;bottom:14%;animation-delay:2s}
.hero__float--4 .hero__float-bob{animation-delay:3.8s}
.hero__float-media{display:flex;align-items:center;justify-content:center;height:148px;border-radius:14px;background:linear-gradient(180deg,#F7F8FA,#EEF1F5);overflow:hidden;position:relative}
.hero__float-stage{width:100%;height:100%;display:flex;align-items:center;justify-content:center;perspective:700px}
.hero__float-photo{max-width:88%;max-height:88%;width:auto;height:auto;object-fit:contain;filter:drop-shadow(0 10px 16px rgba(16,24,40,.16));animation:heroPhotoTilt 7s ease-in-out infinite;transform-style:preserve-3d}
.hero__float:hover .hero__float-photo{animation-play-state:paused;transform:rotateY(12deg) scale(1.05)}
.hero__mv{width:100%;height:100%;background:transparent;pointer-events:none;--progress-bar-color:transparent}
.hero__float-poster{display:none}
.hero__float-txt{display:block;margin-top:10px;padding:0 4px 2px;font-weight:800;font-size:14.5px;line-height:1.25;color:var(--ink)}
.hero__float-txt small{display:block;color:var(--muted);font-weight:600;font-size:12px;margin-top:2px}
@keyframes heroFloatIn{from{opacity:0;transform:translateY(22px) scale(.9)}to{opacity:1;transform:none}}
@keyframes heroFloatBob{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
@keyframes heroPhotoTilt{0%,100%{transform:rotateY(-16deg) rotateX(8deg) scale(1)}50%{transform:rotateY(16deg) rotateX(-4deg) scale(1.05)}}
.footer__credits{margin:10px 0 0;font-size:12px;color:rgba(255,255,255,.55);text-align:center}
.footer__credits a{color:rgba(255,255,255,.75);text-decoration:underline;text-underline-offset:2px}
.footer__credits a:hover{color:#fff}

/* page hero */
.page-hero{padding:56px 0 48px;background:linear-gradient(180deg,var(--bg-soft),#fff);border-bottom:1px solid var(--line)}
.crumbs{display:flex;gap:8px;font-size:14px;color:var(--muted);margin-bottom:16px}
.crumbs a:hover{color:var(--blue)}
.page-hero h1{font-size:clamp(32px,4.4vw,52px);margin-bottom:12px}
.anchors{display:flex;gap:10px;flex-wrap:wrap;margin-top:26px}
.anchor-chip{display:inline-flex;align-items:center;gap:8px;padding:10px 16px;border-radius:999px;border:1.5px solid var(--line);background:#fff;font-weight:700;font-size:15px;transition:.2s}
.anchor-chip:hover{border-color:var(--green);color:var(--green-d);transform:translateY(-1px)}
.anchor-chip .icon{color:var(--green-d)}

/* ---------- cards / grids ---------- */
.grid{display:grid;gap:20px}
.grid-4{grid-template-columns:repeat(4,1fr)}
.grid-3{grid-template-columns:repeat(3,1fr)}
.grid-2{grid-template-columns:repeat(2,1fr)}
.card{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:26px;transition:transform .35s var(--ease),box-shadow .35s var(--ease),border-color .35s}
.card:hover{transform:translateY(-4px);box-shadow:var(--sh-2);border-color:transparent}
.service-card{display:flex;flex-direction:column;gap:14px;position:relative;overflow:hidden}
.service-card::after{content:"";position:absolute;right:-40px;top:-40px;width:120px;height:120px;border-radius:50%;background:var(--green-soft);opacity:0;transform:scale(.4);transition:.45s var(--ease)}
.service-card:hover::after{opacity:1;transform:scale(1)}
.service-card > *{position:relative;z-index:1}
.service-card p{color:var(--muted);font-size:15px}
.service-card .link-arrow{margin-top:auto;font-size:15px}
.service-card:hover .ico-box{background:var(--green);color:#fff}
.service-card .ico-box{transition:.3s}

/* ---------- calculator ---------- */
.calc{display:grid;grid-template-columns:1.35fr 1fr;gap:24px;align-items:start}
.calc__steps{background:#fff;border:1px solid var(--line);border-radius:24px;padding:28px;box-shadow:var(--sh-1)}
.calc__progress{display:flex;gap:8px;margin-bottom:24px}
.calc__progress span{flex:1;height:5px;border-radius:5px;background:var(--line);transition:background .4s}
.calc__progress span.on{background:var(--green)}
.calc__step{margin-bottom:22px}
.calc__step:last-child{margin-bottom:0}
.calc__label{display:flex;align-items:center;gap:10px;font-weight:800;margin-bottom:12px}
.calc__label i{font-style:normal;width:28px;height:28px;border-radius:50%;background:var(--ink);color:#fff;display:inline-flex;align-items:center;justify-content:center;font-size:13px}
.calc__step.done .calc__label i{background:var(--green)}
.calc__step.locked{opacity:.4;pointer-events:none}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{display:inline-flex;align-items:center;gap:8px;padding:10px 15px;border-radius:12px;border:1.5px solid var(--line);background:#fff;font-weight:600;font-size:14.5px;cursor:pointer;transition:all .2s var(--ease)}
.chip .icon{width:18px;height:18px;color:var(--muted)}
.chip:hover{border-color:var(--blue);color:var(--blue)}
.chip:active{transform:scale(.96)}
.chip.sel{background:var(--blue);border-color:var(--blue);color:#fff;box-shadow:var(--sh-blue)}
.chip.sel .icon{color:#fff}
.chips--scroll{max-height:178px;overflow:auto;padding:2px}
.calc__result{position:sticky;top:110px;background:var(--ink);color:#fff;border-radius:24px;padding:30px;overflow:hidden}
.calc__result::before{content:"";position:absolute;right:-80px;top:-80px;width:240px;height:240px;border-radius:50%;background:radial-gradient(circle,rgba(8,180,20,.45),transparent 70%)}
.calc__result > *{position:relative}
.calc__result .muted{color:#A9B0BC;font-size:14px}
.calc__summary{display:flex;flex-direction:column;gap:8px;margin:18px 0;font-size:15px}
.calc__summary div{display:flex;justify-content:space-between;gap:12px;border-bottom:1px dashed rgba(255,255,255,.14);padding-bottom:8px}
.calc__summary span{color:#A9B0BC}
.calc__price{font-size:44px;font-weight:800;letter-spacing:-.02em;line-height:1;margin:6px 0 4px}
.calc__price small{font-size:18px;color:#A9B0BC;font-weight:600}
.calc__time{display:inline-flex;align-items:center;gap:6px;color:var(--green);font-weight:700;font-size:14px}
.calc__send{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:22px}
.calc__send .btn{height:48px;padding:0 10px;font-size:14px}
.btn--wa{background:#25D366;box-shadow:none}.btn--wa:hover{background:#1ebe5a;box-shadow:0 8px 20px rgba(37,211,102,.35)}
.btn--tg{background:#229ED9;box-shadow:none}.btn--tg:hover{background:#1a8cc2;box-shadow:0 8px 20px rgba(34,158,217,.35)}
.btn--max{background:#6C47FF;box-shadow:none}.btn--max:hover{background:#5935e6;box-shadow:0 8px 20px rgba(108,71,255,.35)}
.btn--vk{background:#0077FF;box-shadow:none}
.calc__assist{display:flex;gap:12px;align-items:flex-start;background:rgba(255,255,255,.06);border-radius:16px;padding:14px;margin-top:18px;font-size:14px;color:#D5DAE2}
.calc__assist .ava{width:36px;height:36px;border-radius:50%;background:var(--green);display:flex;align-items:center;justify-content:center;flex:none;color:#fff}
.calc__empty{text-align:center;padding:30px 0 10px;color:#A9B0BC}
.calc__empty .icon{width:48px;height:48px;color:var(--green);margin-bottom:10px}

/* ---------- product & bu cards ---------- */
.slider{position:relative}
.slider__track{display:grid;grid-auto-flow:column;grid-auto-columns:calc((100% - 60px)/4);gap:20px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;padding:4px 2px 24px;scrollbar-width:none}
.slider__track::-webkit-scrollbar{display:none}
.slider__track > *{scroll-snap-align:start}
.slider__nav{display:flex;gap:10px}
.slider__btn{width:48px;height:48px;border-radius:50%;border:1.5px solid var(--line);background:#fff;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;transition:.25s var(--ease)}
.slider__btn:hover{border-color:var(--blue);color:var(--blue);transform:translateY(-2px);box-shadow:var(--sh-1)}
.slider__btn:active{transform:scale(.94)}
.slider__btn:disabled{opacity:.35;pointer-events:none}
.slider__dots{display:flex;justify-content:center;gap:8px}
.slider__dots button{width:8px;height:8px;border-radius:8px;border:0;background:var(--line);cursor:pointer;transition:.3s}
.slider__dots button.on{width:26px;background:var(--green)}

.product{display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;transition:transform .35s var(--ease),box-shadow .35s var(--ease)}
.product:hover{transform:translateY(-4px);box-shadow:var(--sh-2)}
.product__media{position:relative;height:220px;display:flex;align-items:center;justify-content:center;background:linear-gradient(160deg,#F7F8FA,#EEF1F5)}
.product__media .product__photo{width:auto;height:100%;max-width:100%;max-height:100%;object-fit:contain;padding:14px 18px;box-sizing:border-box}
.bu-card .product__media .product__photo{padding:48px 18px 16px}
.np-gal__main .product__photo{max-height:min(420px,55vh);width:auto;height:auto;padding:8px}
.np-gal__thumbs--one{grid-template-columns:1fr;max-width:88px}
.np-gal__thumbs button .product__photo{width:100%;height:100%;padding:6px;max-height:none}

.product__badge{z-index:3;position:absolute;top:14px;left:14px;padding:4px 10px;border-radius:999px;font-size:12px;font-weight:800;background:var(--green);color:#fff}
.product__badge--hit{background:var(--blue)}
.product__body{padding:18px 20px 20px;display:flex;flex-direction:column;gap:6px;flex:1}
.product__brand{font-size:12.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.product__name{font-weight:800;font-size:17px}
.product__spec{font-size:14px;color:var(--muted)}
.product__foot{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:auto;padding-top:12px}
.price{font-weight:800;font-size:20px;white-space:nowrap}
.price small{font-size:12px;font-weight:600;color:var(--muted)}

/* device mockups (CSS) */
.mock-phone{width:92px;height:180px;border-radius:22px;background:var(--c,#333);position:relative;box-shadow:inset 0 0 0 3px rgba(255,255,255,.35),0 18px 30px -12px rgba(0,0,0,.35);transition:transform .5s var(--ease)}
.mock-phone::before{content:"";position:absolute;top:10px;left:10px;width:36px;height:36px;border-radius:12px;background:rgba(0,0,0,.22);box-shadow:inset 0 0 0 2px rgba(255,255,255,.25)}
.mock-phone::after{content:"";position:absolute;top:16px;left:16px;width:10px;height:10px;border-radius:50%;background:#111;box-shadow:14px 0 0 #111,0 14px 0 #111}
.mock-phone.back2{transform:translateX(18px) rotate(8deg)}
.mock-pair{position:relative;display:flex}
.mock-pair .front{position:absolute;left:-30px;top:6px;width:86px;height:172px;border-radius:20px;background:#0e1116;box-shadow:inset 0 0 0 3px #555,0 18px 30px -12px rgba(0,0,0,.4);transform:rotate(-6deg)}
.mock-pair .front::before{content:"";position:absolute;inset:6px;border-radius:15px;background:linear-gradient(160deg,var(--c,#333),#0e1116 120%)}
.mock-pair .front::after{content:"";position:absolute;top:12px;left:50%;width:26px;height:8px;margin-left:-13px;border-radius:8px;background:#000}
.product:hover .mock-pair .front{transform:rotate(-10deg) translateY(-4px)}
.product:hover .mock-phone.back2{transform:translateX(24px) rotate(12deg)}
.mock-watch{width:110px;height:130px;border-radius:30px;background:var(--c,#333);position:relative;box-shadow:inset 0 0 0 4px rgba(255,255,255,.3),0 16px 26px -10px rgba(0,0,0,.35)}
.mock-watch::before{content:"";position:absolute;inset:10px;border-radius:22px;background:radial-gradient(circle at 50% 50%,var(--green) 0 3px,transparent 4px),radial-gradient(circle at 50% 50%,transparent 0 25px,var(--green) 26px 29px,transparent 30px),radial-gradient(circle at 50% 50%,transparent 0 33px,rgba(30,107,255,.9) 34px 36px,transparent 37px),#0b0d10}
.mock-watch::after{content:"";position:absolute;right:-7px;top:38px;width:7px;height:20px;border-radius:0 4px 4px 0;background:var(--c,#333);filter:brightness(.8)}
.mock-watch-wrap{position:relative;padding:40px 0}
.mock-watch-wrap::before,.mock-watch-wrap::after{content:"";position:absolute;left:20px;width:70px;height:46px;background:var(--c,#333);filter:brightness(.85);border-radius:10px}
.mock-watch-wrap::before{top:0}.mock-watch-wrap::after{bottom:0}
.mock-watch-wrap .mock-watch{z-index:1}
.mock-buds{width:130px;height:96px;border-radius:34px;background:var(--c,#eee);position:relative;box-shadow:inset 0 -6px 0 rgba(0,0,0,.06),0 16px 26px -10px rgba(0,0,0,.25)}
.mock-buds::before{content:"";position:absolute;left:0;right:0;top:36px;height:2px;background:rgba(0,0,0,.12)}
.mock-buds::after{content:"";position:absolute;left:50%;top:52px;width:8px;height:8px;margin-left:-4px;border-radius:50%;background:var(--green)}
.mock-acc{width:110px;height:150px;border-radius:24px;background:var(--c,#ddd);position:relative;box-shadow:inset 0 0 0 6px rgba(0,0,0,.08),0 16px 26px -10px rgba(0,0,0,.3)}
.mock-acc::before{content:"";position:absolute;top:12px;left:12px;width:38px;height:38px;border-radius:12px;box-shadow:inset 0 0 0 3px rgba(0,0,0,.18)}
.mock-acc::after{content:"";position:absolute;left:50%;top:70px;width:46px;height:46px;margin-left:-23px;border-radius:50%;box-shadow:inset 0 0 0 3px rgba(255,255,255,.4)}

.bu-card .product__media{height:230px}
.cond{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:800;padding:4px 10px;border-radius:999px}
.cond::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor}
.cond--excellent{color:var(--green-d);background:var(--green-soft)}
.cond--good{color:var(--blue);background:var(--blue-soft)}
.cond--fair{color:#B86E00;background:#FFF1DB}
.bu-meta{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:8px 0 4px;font-size:13.5px;color:var(--ink-2)}
.bu-meta span{display:flex;align-items:center;gap:6px}
.bu-meta .icon{width:16px;height:16px;color:var(--muted)}
.batt{height:6px;border-radius:6px;background:var(--line);overflow:hidden;margin-top:6px}
.batt i{display:block;height:100%;background:var(--green);border-radius:6px}
.bu-card .product__media .cond{position:absolute;top:14px;left:14px;z-index:3}
.reveal > .product{height:100%}
.bu-card .product__media .warranty{position:absolute;top:14px;right:14px;font-size:12px;font-weight:700;background:#fff;border-radius:999px;padding:4px 10px;box-shadow:var(--sh-1);z-index:3}

/* filters */
.filters{display:flex;flex-wrap:wrap;gap:14px;align-items:center;justify-content:space-between;background:#fff;border:1px solid var(--line);border-radius:20px;padding:16px 18px;margin-bottom:28px;box-shadow:var(--sh-1)}
.filters__group{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.filters__label{font-size:13px;font-weight:800;color:var(--muted);margin-right:4px}
.select{height:42px;border:1.5px solid var(--line);border-radius:12px;padding:0 36px 0 14px;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%235E6673' stroke-width='2' fill='none'/%3E%3C/svg%3E") no-repeat right 14px center;appearance:none;font-weight:600;cursor:pointer}
.empty{text-align:center;padding:60px 20px;color:var(--muted);grid-column:1/-1}

/* tabs */
.tabs{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:30px;position:sticky;top:calc(var(--header-h) + 8px);z-index:5;background:rgba(255,255,255,.9);backdrop-filter:blur(10px);padding:8px;border-radius:18px;border:1px solid var(--line);width:max-content;max-width:100%}
.tab{display:inline-flex;align-items:center;gap:8px;height:44px;padding:0 18px;border-radius:12px;border:0;background:none;font-weight:700;cursor:pointer;transition:.2s}
.tab:hover{background:var(--bg-soft)}
.tab.on{background:var(--ink);color:#fff}
.tab .icon{width:18px;height:18px}

/* ---------- video ---------- */
.video-wrap{display:grid;grid-template-columns:1.6fr 1fr;gap:24px}
.yt{position:relative;aspect-ratio:16/9;border-radius:24px;overflow:hidden;background:#000;cursor:pointer;box-shadow:var(--sh-2)}
.yt img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease),opacity .3s;opacity:.88}
.yt:hover img{transform:scale(1.04);opacity:.75}
.yt__play{position:absolute;left:50%;top:50%;width:84px;height:84px;margin:-42px 0 0 -42px;border-radius:50%;background:#fff;color:#FF0033;display:flex;align-items:center;justify-content:center;box-shadow:0 10px 30px rgba(0,0,0,.3);transition:transform .3s var(--ease)}
.yt__play::before{content:"";position:absolute;inset:-10px;border-radius:50%;border:2px solid rgba(255,255,255,.6);animation:pulse 2s infinite}
@keyframes pulse{0%{transform:scale(.9);opacity:1}100%{transform:scale(1.35);opacity:0}}
.yt:hover .yt__play{transform:scale(1.08)}
.yt__play .icon{width:34px;height:34px;margin-left:4px}
.yt__title{position:absolute;left:0;right:0;bottom:0;padding:22px 24px;color:#fff;font-weight:800;font-size:18px;background:linear-gradient(transparent,rgba(0,0,0,.7))}
.yt iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.yt-list{display:flex;flex-direction:column;gap:12px}
.yt-item{display:flex;gap:14px;align-items:center;padding:10px;border-radius:16px;border:1.5px solid var(--line);background:#fff;cursor:pointer;text-align:left;transition:.25s}
.yt-item:hover,.yt-item.on{border-color:var(--green);box-shadow:var(--sh-1)}
.yt-item img{width:120px;height:70px;border-radius:10px;object-fit:cover;flex:none}
.yt-item b{display:block;font-size:15px}
.yt-item small{color:var(--muted)}

/* ---------- why us ---------- */
.why{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
.why__photos{display:grid;grid-template-columns:1.2fr 1fr;grid-template-rows:220px 220px;gap:16px}
.why__photos figure{border-radius:22px;overflow:hidden;position:relative}
.why__photos figure:first-child{grid-row:span 2}
.why__photos img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease)}
.why__photos figure:hover img{transform:scale(1.05)}
.why__photos figcaption{position:absolute;left:12px;bottom:12px;background:rgba(255,255,255,.92);border-radius:999px;padding:5px 12px;font-size:13px;font-weight:700}
.why__list{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:30px}
.why__item{padding:20px;border-radius:18px;border:1px solid var(--line);background:#fff}
.why__item h3{font-size:17px;margin:12px 0 6px}
.why__item p{font-size:14.5px;color:var(--muted)}
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:20px}
.stat{padding:22px;border-radius:18px;background:var(--bg-soft)}
.stat b{display:block;font-size:26px;white-space:nowrap;letter-spacing:-.02em;color:var(--green-d)}
.stat span{font-size:14px;color:var(--muted)}

/* ---------- partners marquee ---------- */
.partners{padding:70px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);overflow:hidden}
.partners h2{text-align:center;margin-bottom:8px}
.partners .lead{text-align:center;margin:0 auto 36px}
.marquee{position:relative;overflow:hidden;mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent);-webkit-mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent)}
.marquee__track{display:flex;gap:20px;width:max-content;animation:marquee 38s linear infinite}
.marquee:hover .marquee__track{animation-play-state:paused}
.marquee.rev .marquee__track{animation-direction:reverse;animation-duration:44s}
.marquee + .marquee{margin-top:20px}
@keyframes marquee{to{transform:translateX(-50%)}}
.brand{flex:none;width:210px;height:96px;border-radius:20px;border:1px solid var(--line);background:#fff;display:flex;align-items:center;justify-content:center;filter:grayscale(1);opacity:.55;transition:filter .5s,opacity .5s,transform .4s var(--ease),box-shadow .4s}
.brand.lit,.brand:hover{filter:none;opacity:1}
.brand:hover{transform:translateY(-4px) scale(1.03);box-shadow:var(--sh-2)}
.brand svg{height:34px;width:auto;max-width:160px}

/* ---------- reviews ---------- */
.review{display:flex;flex-direction:column;gap:14px;height:100%}
.review__stars{display:flex;gap:2px;color:#FFB400}
.review__stars .icon{width:18px;height:18px}
.review__stars .off{color:var(--line)}
.review p{color:var(--ink-2);font-size:15.5px}
.review__who{display:flex;align-items:center;gap:12px;margin-top:auto;padding-top:14px;border-top:1px solid var(--line)}
.ava-l{width:44px;height:44px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:800;color:#fff;background:linear-gradient(135deg,var(--green-d),var(--green));flex:none}
.review__who small{display:block;color:var(--muted);font-size:13px}
.reviews-track{grid-auto-columns:calc((100% - 40px)/3)}
.rating-sum{display:flex;align-items:center;gap:18px;padding:22px 26px;border-radius:20px;background:var(--bg-soft)}
.rating-sum b{font-size:48px;line-height:1}
.stars-input{display:flex;gap:4px;flex-direction:row-reverse;justify-content:flex-end}
.stars-input input{display:none}
.stars-input label{cursor:pointer;color:var(--line);transition:.15s}
.stars-input label .icon{width:30px;height:30px}
.stars-input label:hover,.stars-input label:hover ~ label,.stars-input input:checked ~ label{color:#FFB400}

/* ---------- news ---------- */
.news-card{display:flex;flex-direction:column;overflow:hidden;padding:0}
.news-card__media{height:170px;position:relative;overflow:hidden;background:var(--ink);display:flex;align-items:flex-end;padding:18px}
.news-card__media::before{content:"";position:absolute;inset:0;background:var(--ng,linear-gradient(135deg,#0E1116,#1b4d2a))}
.news-card__media .icon{position:absolute;right:18px;top:18px;width:64px;height:64px;color:rgba(255,255,255,.22);transition:transform .6s var(--ease)}
.news-card:hover .news-card__media .icon{transform:scale(1.15) rotate(-6deg)}
.news-card__media .tag{position:relative;background:rgba(255,255,255,.95);color:var(--ink);font-size:12.5px;font-weight:800;padding:5px 12px;border-radius:999px}
.news-card__body{padding:20px 22px 22px;display:flex;flex-direction:column;gap:10px;flex:1}
.news-card__date{font-size:13px;color:var(--muted);font-weight:600}
.news-card h3{font-size:18px}
.news-card p{font-size:14.5px;color:var(--muted)}
.news-card .link-arrow{margin-top:auto;font-size:15px}

/* ---------- contacts / map ---------- */
.contact-block{display:grid;grid-template-columns:1fr 1.4fr;gap:24px;align-items:stretch}
.contact-card{background:var(--ink);color:#fff;border-radius:24px;padding:34px;display:flex;flex-direction:column;gap:20px}
.contact-card h2{font-size:30px}
.c-row{display:flex;gap:14px;align-items:flex-start}
.c-row .ico-box{width:46px;height:46px;background:rgba(255,255,255,.08);color:var(--green)}
.c-row small{display:block;color:#A9B0BC;font-size:13px}
.c-row b,.c-row a{font-weight:700;font-size:16px}
.c-row a:hover{color:var(--green)}
.map{border-radius:24px;overflow:hidden;min-height:580px;background:var(--bg-soft) url("../img/map-placeholder.svg") center/cover no-repeat;border:1px solid var(--line);position:relative}
.map iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.messengers{display:flex;gap:10px;flex-wrap:wrap}
.m-btn{display:inline-flex;align-items:center;gap:8px;height:44px;padding:0 16px;border-radius:12px;font-weight:700;font-size:14.5px;color:#fff;transition:transform .25s var(--ease),box-shadow .25s,filter .25s}
.m-btn:hover{transform:translateY(-2px);filter:brightness(1.06)}
.m-btn:active{transform:scale(.96)}
.m-btn .icon{width:20px;height:20px}
.m-wa{background:#25D366}.m-tg{background:#229ED9}.m-max{background:#6C47FF}.m-vk{background:#0077FF}.m-call{background:var(--blue)}
.m-round{width:44px;height:44px;padding:0;justify-content:center;border-radius:50%}

/* forms */
.form{display:grid;gap:14px}
.form .row2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.field label{display:block;font-size:13.5px;font-weight:700;margin-bottom:6px;color:var(--ink-2)}
.input{width:100%;height:50px;border:1.5px solid var(--line);border-radius:12px;padding:0 14px;background:#fff;transition:border-color .2s,box-shadow .2s}
textarea.input{height:auto;min-height:120px;padding:12px 14px;resize:vertical}
.input:focus{outline:0;border-color:var(--blue);box-shadow:0 0 0 4px rgba(30,107,255,.12)}
.input.err{border-color:#E5484D}
.form small.hint{color:var(--muted);font-size:12.5px}
.form-card{background:#fff;border:1px solid var(--line);border-radius:24px;padding:30px;box-shadow:var(--sh-1)}
.consent{display:flex;align-items:flex-start;gap:10px;font-size:13.5px;color:var(--muted);line-height:1.45;cursor:pointer;user-select:none}
.consent input{width:18px;height:18px;margin-top:2px;accent-color:var(--green);flex-shrink:0}
.consent.err,.consent.err span{color:#E5484D}
.consent input.err{outline:2px solid #E5484D;outline-offset:2px}
.form-ok{margin-top:4px;padding:16px 18px;border-radius:16px;background:var(--green-soft);border:1px solid rgba(8,180,20,.25);display:grid;gap:10px}
.form-ok[hidden]{display:none!important}
.form-ok__text{font-size:14.5px;font-weight:600;color:var(--ink);margin:0}
.form-ok__wa{font-size:14px;font-weight:700;color:#128C7E;width:fit-content;transition:color .2s,transform .2s}
.form-ok__wa:hover{color:#0d6b5c}
.contacts-cards .card{display:flex;flex-direction:column;min-height:100%;transition:transform .35s var(--ease),box-shadow .35s var(--ease),border-color .35s}
.contacts-cards .card h3{margin:14px 0 4px;font-size:16px}
.contacts-cards .card b{font-size:15.5px;line-height:1.4}
.contacts-msg{display:flex;flex-wrap:wrap;align-items:center;gap:14px 18px;margin-top:28px}
.contacts-msg > p{margin:0;font-weight:800;font-size:16px}

/* CTA band */
.cta-band{border-radius:28px;padding:48px;background:linear-gradient(120deg,#0E1116 0%,#13341d 60%,#0a7a12 120%);color:#fff;display:flex;align-items:center;justify-content:space-between;gap:30px;flex-wrap:wrap;position:relative;overflow:hidden}
.cta-band::after{content:"";position:absolute;right:-60px;bottom:-120px;width:340px;height:340px;border-radius:50%;border:40px solid rgba(8,180,20,.25)}
.cta-band > *{position:relative;z-index:1}
.cta-band p{color:#C9D0DA;margin-top:8px}

/* steps */
.steps{display:grid;grid-template-columns:repeat(5,1fr);gap:16px;counter-reset:s}
.step{position:relative;padding:22px;border-radius:18px;background:#fff;border:1px solid var(--line)}
.step::before{counter-increment:s;content:counter(s);display:flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:50%;background:var(--green-soft);color:var(--green-d);font-weight:800;margin-bottom:12px}
.step h3{font-size:16px;margin-bottom:4px}
.step p{font-size:14px;color:var(--muted)}

/* repair page blocks */
.repair-block{display:grid;grid-template-columns:1fr 1.25fr;gap:48px;align-items:center}
.repair-block.rev{grid-template-columns:1.25fr 1fr}
.repair-block.rev .repair-block__media{order:2}
.repair-block__media{border-radius:26px;overflow:hidden;aspect-ratio:4/3;box-shadow:var(--sh-2)}
.repair-block__media img{width:100%;height:100%;object-fit:cover}
.issues{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:24px 0}
.issue{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:13px 16px;border-radius:14px;background:var(--bg-soft);font-weight:600;font-size:15px;transition:.2s}
.issue:hover{background:var(--green-soft)}
.issue b{color:var(--green-d);white-space:nowrap;font-size:14.5px}

/* camera packages */
.pack{display:flex;flex-direction:column;gap:14px;position:relative}
.pack.best{border:2px solid var(--blue);box-shadow:var(--sh-2)}
.pack .tagline{position:absolute;top:-13px;left:26px;background:var(--blue);color:#fff;font-size:12px;font-weight:800;border-radius:999px;padding:4px 12px}
.pack ul{list-style:none;display:grid;gap:8px;font-size:15px;color:var(--ink-2)}
.pack li{display:flex;gap:8px}
.pack li .icon{color:var(--green-d);width:20px;height:20px}
.pack .price{font-size:30px}

/* team */
.team{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.member{border-radius:22px;overflow:hidden;background:#fff;border:1px solid var(--line)}
.member img{width:100%;aspect-ratio:4/3;object-fit:cover}
.member div{padding:16px 18px}
.member small{color:var(--muted)}

/* FAQ */
.faq{display:grid;gap:10px}
.faq details{border:1px solid var(--line);border-radius:16px;padding:0 20px;background:#fff;transition:box-shadow .2s}
.faq details[open]{box-shadow:var(--sh-1)}
.faq summary{list-style:none;cursor:pointer;padding:18px 0;font-weight:700;display:flex;justify-content:space-between;gap:12px}
.faq summary::-webkit-details-marker{display:none}
.faq summary .icon{transition:transform .3s}
.faq details[open] summary .icon{transform:rotate(180deg)}
.faq details p{padding:0 0 18px;color:var(--muted)}

/* ---------- footer ---------- */
.footer{background:#0B0D11;color:#C9D0DA;padding:70px 0 28px;margin-top:0}
.footer__grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1.3fr;gap:36px}
.footer .logo__text b{color:#fff}
.footer .logo__text small{color:#8C95A3}
.footer h4{color:#fff;font-size:15px;margin-bottom:14px}
.footer ul{list-style:none;display:grid;gap:9px;font-size:15px}
.footer a:hover{color:var(--green)}
.footer p{font-size:14.5px}
.footer__bottom{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;border-top:1px solid rgba(255,255,255,.08);margin-top:44px;padding-top:22px;font-size:13.5px;color:#7D8593}
.footer .m-btn{height:42px}

/* ---------- floating contact ---------- */
.fab{position:fixed;right:22px;bottom:22px;z-index:60;display:flex;flex-direction:column;align-items:flex-end;gap:10px}
.fab__toggle{width:62px;height:62px;border-radius:50%;border:0;background:var(--green-d);color:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:0 10px 26px rgba(7,153,13,.4);transition:transform .3s var(--ease),background .3s}
.fab__toggle::before{content:"";position:absolute;width:62px;height:62px;border-radius:50%;border:2px solid var(--green);animation:pulse 2.2s infinite}
.fab__toggle:hover{transform:scale(1.06)}
.fab__toggle .icon{width:28px;height:28px;transition:transform .3s,opacity .3s;position:absolute}
.fab__toggle .i-x{opacity:0;transform:rotate(-90deg)}
.fab.open .fab__toggle{background:var(--ink)}
.fab.open .fab__toggle::before{display:none}
.fab.open .fab__toggle .i-chat{opacity:0;transform:rotate(90deg)}
.fab.open .fab__toggle .i-x{opacity:1;transform:none}
.fab__list{display:flex;flex-direction:column;align-items:flex-end;gap:10px;pointer-events:none}
.fab__list a{display:flex;align-items:center;gap:10px;opacity:0;transform:translateY(14px) scale(.9);transition:.3s var(--ease)}
.fab__list a span{background:#fff;color:var(--ink);font-weight:700;font-size:14px;padding:6px 12px;border-radius:10px;box-shadow:var(--sh-1)}
.fab__list a i{width:50px;height:50px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;box-shadow:var(--sh-2)}
.fab__list a i .icon{width:24px;height:24px}
.fab.open .fab__list{pointer-events:auto}
.fab.open .fab__list a{opacity:1;transform:none}
.fab.open .fab__list a:nth-last-child(1){transition-delay:.02s}
.fab.open .fab__list a:nth-last-child(2){transition-delay:.06s}
.fab.open .fab__list a:nth-last-child(3){transition-delay:.1s}
.fab.open .fab__list a:nth-last-child(4){transition-delay:.14s}
.fab.open .fab__list a:nth-last-child(5){transition-delay:.18s}

/* modal + toast */
.modal{position:fixed;inset:0;z-index:90;display:flex;align-items:center;justify-content:center;padding:20px;background:rgba(14,17,22,.5);opacity:0;visibility:hidden;transition:.25s}
.modal.open{opacity:1;visibility:visible}
.modal__box{background:#fff;border-radius:24px;padding:28px;max-width:440px;width:100%;transform:translateY(16px) scale(.98);transition:.3s var(--ease)}
.modal.open .modal__box{transform:none}
.modal__box h3{margin-bottom:6px}
.modal__box p{color:var(--muted);font-size:15px;margin-bottom:18px}
.modal__actions{display:grid;gap:10px}
.toast{position:fixed;left:50%;bottom:28px;z-index:100;transform:translate(-50%,30px);opacity:0;background:var(--ink);color:#fff;padding:14px 20px;border-radius:14px;font-weight:600;font-size:15px;box-shadow:var(--sh-2);transition:.35s var(--ease);pointer-events:none;max-width:calc(100vw - 40px)}
.toast.show{opacity:1;transform:translate(-50%,0)}

/* ---------- reveal ---------- */
/* Hidden only when JS is running (html.js). Without JS, or if JS fails, content stays visible. */
.reveal{transition:opacity .8s var(--ease),transform .8s var(--ease);transition-delay:var(--d,0s)}
.js .reveal{opacity:0;transform:translateY(28px)}
.js .reveal.in{opacity:1;transform:none}
.js .reveal-l{transform:translateX(-36px)}.js .reveal-r{transform:translateX(36px)}
.js .reveal-zoom{transform:scale(.94)}
.js .reveal-l.in,.js .reveal-r.in,.js .reveal-zoom.in{transform:none}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
  .reveal,.js .reveal{opacity:1;transform:none}
  .marquee__track{animation:none!important;flex-wrap:wrap;justify-content:center;width:auto}
}

/* ---------- responsive ---------- */
.call-mini{display:none;width:44px;height:44px;border-radius:12px;background:var(--blue-soft);color:var(--blue);align-items:center;justify-content:center}

@media (max-width:1280px){
  .nav,.header__phone{display:none}
  .burger{display:inline-flex}
}
@media (max-width:1100px){
  .grid-4{grid-template-columns:repeat(2,1fr)}
  .slider__track{grid-auto-columns:calc((100% - 40px)/3)}
  .calc{grid-template-columns:1fr}
  .calc__result{position:relative;top:0}
  .why{grid-template-columns:1fr;gap:40px}
  .footer__grid{grid-template-columns:1fr 1fr}
  .steps{grid-template-columns:repeat(3,1fr)}
  .video-wrap{grid-template-columns:1fr}
  .yt-list{flex-direction:row;overflow:auto}
  .yt-item{min-width:280px}
  .repair-block,.repair-block.rev{grid-template-columns:1fr;gap:28px}
  .repair-block.rev .repair-block__media{order:0}
}
@media (max-width:820px){
  :root{--header-h:64px}
  .header.is-compact{--header-h:54px}
  .section{padding:68px 0}
  .grid-3{grid-template-columns:1fr 1fr}
  .reviews-track{grid-auto-columns:calc((100% - 20px)/2)}
  .contact-block{grid-template-columns:1fr}
  .map{min-height:340px}
  .stats{grid-template-columns:1fr 1fr}
  .team{grid-template-columns:1fr 1fr}
  .call-mini{display:inline-flex}
}
@media (max-width:600px){
  .container{padding:0 16px}
  .grid-4,.grid-3,.grid-2{grid-template-columns:1fr}
  .services-grid{grid-template-columns:1fr 1fr!important;gap:12px}
  .services-grid .card{padding:18px}
  .services-grid .card p{display:none}
  .services-grid .ico-box{width:44px;height:44px}
  .services-grid h3{font-size:16px}
  .slider__track,.reviews-track{grid-auto-columns:82%}
  .why__list{grid-template-columns:1fr}
  .why__photos{grid-template-rows:160px 160px}
  .footer__grid{grid-template-columns:1fr}
  .steps{grid-template-columns:1fr 1fr}
  .issues{grid-template-columns:1fr}
  .form .row2{grid-template-columns:1fr}
  .cta-band{padding:30px}
  .calc__steps,.calc__result{padding:20px}
  .calc__send{grid-template-columns:1fr}
  .calc__price{font-size:36px}
  .logo__text{display:none}
  .logo img,.logo__img{height:30px;width:auto}
  .hero{padding:28px 0 56px}
  .hero__logo{width:min(260px,86vw);margin-bottom:22px}
  .hero__cta{max-width:none;gap:10px}
  .hero__cta .btn{width:100%;max-width:none;min-width:0;flex:1 1 100%;padding:0 18px}
  .hero__chips{gap:8px}
  .chip-info{font-size:13px;padding:7px 12px}
  .brand{width:160px;height:80px}
  .tabs{width:100%;overflow:auto;flex-wrap:nowrap}
  .tab{flex:none}
  .team{grid-template-columns:1fr}
  .stats{grid-template-columns:1fr 1fr}
  .fab{right:14px;bottom:14px}
  .js .reveal-l,.js .reveal-r{transform:translateY(28px)}
  .filters{flex-direction:column;align-items:stretch}
  .filters__group .select{width:100%}
}

/* =========== v2: новые телефоны, оптовый прайс =========== */
.topbar{background:#0B0D11;color:#C9D0DA;font-size:13.5px}
.topbar__row{display:flex;align-items:center;gap:22px;height:38px}
.topbar__row > span{display:inline-flex;align-items:center;gap:6px}
.topbar .icon{width:16px;height:16px;color:var(--green)}
.topbar__right{margin-left:auto;display:flex!important;gap:14px!important}
.topbar a{display:inline-flex;align-items:center;gap:6px;transition:color .2s}
.topbar a:hover{color:#fff}
.topbar__pdf{color:#fff;font-weight:700}
.topbar__pdf .icon{color:#FF5A5F}
.btn--new{background:linear-gradient(135deg,#1E6BFF 0%,#0A9F4A 100%);box-shadow:0 2px 8px rgba(30,107,255,.25)}
.btn--new:hover{background:linear-gradient(135deg,#1455D9 0%,#07990D 100%);box-shadow:0 10px 24px rgba(10,159,74,.3)}
.btn--light{background:#fff;color:var(--ink)}.btn--light:hover{background:#fff;color:var(--blue)}
.btn--link{background:none;color:var(--blue);box-shadow:none;height:40px;padding:0 8px}
.btn--link:hover{background:var(--blue-soft);box-shadow:none;transform:none}
.price-btn{display:inline-flex;align-items:stretch;gap:6px;vertical-align:middle}
.price-btn .btn .icon{color:#E5484D}
.price-btn .btn--light .icon{color:#E5484D}
.pdf-tag{font-size:10.5px;font-weight:800;letter-spacing:.06em;background:#E5484D;color:#fff;border-radius:6px;padding:2px 6px;margin-left:2px}
.price-btn__dl{display:inline-flex;align-items:center;justify-content:center;width:44px;border-radius:12px;border:1.5px solid var(--line);background:#fff;color:var(--ink-2);transition:.2s var(--ease)}
.price-btn__dl:hover{border-color:var(--blue);color:var(--blue);transform:translateY(-2px)}
.price-btn__dl .icon{width:18px;height:18px}
.btn--link + .price-btn__dl{border:0;background:none;width:36px}
.footer .price-btn__dl{background:transparent;border-color:rgba(255,255,255,.15);color:#C9D0DA}
.footer .price-btn .btn--ghost{background:transparent;color:#fff;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.18)}
.btn--block + .price-btn__dl{flex:none}
.price-btn:has(.btn--block){display:flex}
.price-btn:has(.btn--block) .btn{flex:1}
.hero__pdf{margin-top:14px;display:flex;justify-content:center}
.promo-band{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;padding:22px 26px;border-radius:22px;background:linear-gradient(120deg,var(--green-soft),var(--blue-soft))}
.promo-band b{display:flex;align-items:center;gap:8px;font-size:18px}
.promo-band b .icon{color:var(--green-d)}
.promo-band span{display:block;color:var(--muted);margin-top:4px}
.promo-band__btns{display:flex;gap:10px;flex-wrap:wrap}

/* new phone card */
.np-card{cursor:pointer;position:relative}
.np-card:focus-visible{outline:3px solid rgba(30,107,255,.35);outline-offset:2px}
.np-gift{min-height:52px;display:flex;align-items:center;gap:8px;padding:8px 14px;background:var(--green-d);color:#fff;font-size:13px;font-weight:700;line-height:1.25}
.np-gift .icon{width:18px;height:18px;flex:none}
.np-disc{position:absolute;top:14px;right:14px;z-index:3;background:#E5484D;color:#fff;font-weight:800;font-size:14px;border-radius:10px;padding:5px 10px;box-shadow:0 6px 14px rgba(229,72,77,.3)}
.np-card .product__badge{top:14px}
.np-prices{display:flex;flex-direction:column;gap:2px}
.np-old{color:var(--muted);text-decoration:line-through;font-size:14px;font-weight:600}
.np-save{white-space:nowrap;display:inline-flex;align-self:flex-start;font-size:12.5px;font-weight:800;color:#C4282D;background:#FDECEC;border-radius:999px;padding:3px 9px;margin-top:4px}
.np-card .product__foot{align-items:flex-end}
.np-colorline{display:flex;align-items:center;gap:8px;font-size:14px;color:var(--muted)}
.np-colorline i{width:14px;height:14px;border-radius:50%;box-shadow:inset 0 0 0 1px rgba(0,0,0,.15)}

/* new phone modal */
.np-modal .modal__box{max-width:960px;padding:0;overflow:hidden;max-height:calc(100vh - 40px);overflow-y:auto}
.np-modal__grid{display:grid;grid-template-columns:1fr 1.05fr}
.np-gal{background:linear-gradient(160deg,#F7F8FA,#EAEEF3);padding:28px;display:flex;flex-direction:column;gap:14px;position:relative}
.np-gal__main{flex:1;min-height:340px;display:flex;align-items:center;justify-content:center;border-radius:18px;background:#fff8;position:relative}
.np-gal__main .mock-pair{transform:scale(1.45)}
.np-gal__main .gal-note{position:absolute;bottom:10px;left:0;right:0;text-align:center;font-size:12px;color:var(--muted)}
.np-gal__thumbs{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.np-gal__thumbs button{height:70px;border-radius:12px;border:1.5px solid var(--line);background:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:.2s}
.np-gal__thumbs button.on,.np-gal__thumbs button:hover{border-color:var(--blue)}
.np-gal__thumbs .mini{width:22px;height:44px;border-radius:7px;background:var(--c);box-shadow:inset 0 0 0 2px rgba(255,255,255,.4)}
.np-gal__thumbs .mini.side{width:10px}
.np-gal__thumbs .mini.front{background:#0e1116;box-shadow:inset 0 0 0 2px #555}
.np-gal__thumbs .mini.box{width:40px;height:40px;border-radius:8px;background:#fff;box-shadow:inset 0 0 0 2px var(--line)}
.np-info{padding:30px;display:flex;flex-direction:column;gap:14px;position:relative}
.np-info .x{position:absolute;top:16px;right:16px;width:40px;height:40px}
.np-info h3{font-size:26px;padding-right:44px}
.np-info .price{font-size:34px}
.np-gift-box{display:flex;gap:12px;align-items:center;padding:14px 16px;border-radius:14px;background:var(--green-soft);color:var(--green-d);font-weight:700}
.np-gift-box .icon{width:26px;height:26px;flex:none}
.np-gift-box small{display:block;color:var(--ink-2);font-weight:500}
.specs{display:grid;gap:0;border:1px solid var(--line);border-radius:14px;overflow:hidden;font-size:14.5px}
.specs div{display:flex;justify-content:space-between;gap:14px;padding:9px 14px}
.specs div:nth-child(odd){background:var(--bg-soft)}
.specs span{color:var(--muted)}
.np-buy{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.np-buy .btn{height:50px;padding:0 10px;font-size:14.5px}
@media (max-width:1500px){.header .logo__text{display:none}}
@media (max-width:820px){
  .topbar{display:none}
  .np-modal__grid{grid-template-columns:1fr}
  .np-gal__main{min-height:240px}
  .np-gal__main .mock-pair{transform:scale(1.1)}
}
@media (max-width:600px){
  .np-buy{grid-template-columns:1fr}
  .np-info{padding:22px}
  .np-modal{padding:0;align-items:flex-end}
  .np-modal .modal__box{border-radius:24px 24px 0 0;max-height:92vh}
  .promo-band__btns .btn{width:100%}
}

/* =========== v3: категории каталога =========== */
.cat-nav{position:sticky;top:calc(var(--header-h) + 6px);z-index:20;background:rgba(255,255,255,.94);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:1px solid var(--line);border-radius:20px;padding:8px;margin-bottom:18px;box-shadow:var(--sh-1)}
.cat-tabs,.cat-sub{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;scroll-behavior:smooth}
.cat-tabs::-webkit-scrollbar,.cat-sub::-webkit-scrollbar{display:none}
.cat-tab{flex:none;display:inline-flex;align-items:center;gap:8px;height:46px;padding:0 20px;border-radius:14px;border:0;background:none;font-weight:800;font-size:15.5px;cursor:pointer;transition:background .25s var(--ease),color .25s,transform .15s}
.cat-tab small{font-size:12px;font-weight:800;background:var(--bg-soft);color:var(--muted);border-radius:999px;padding:2px 8px;transition:.25s}
.cat-tab:hover{background:var(--bg-soft)}
.cat-tab:active{transform:scale(.97)}
.cat-tab.on{background:var(--ink);color:#fff}
.cat-tab.on small{background:rgba(255,255,255,.18);color:#fff}
.cat-tab.spy:not(.on){color:var(--green-d)}
.cat-sub{border-top:1px solid var(--line);margin-top:8px;padding-top:8px}
.cat-sub[hidden]{display:none}
.cat-pill{flex:none;height:36px;padding:0 14px;border-radius:999px;border:1.5px solid var(--line);background:#fff;font-weight:700;font-size:14px;cursor:pointer;transition:.2s var(--ease)}
.cat-pill:hover{border-color:var(--blue);color:var(--blue)}
.cat-pill.on{background:var(--blue);border-color:var(--blue);color:#fff}
.cat-tools{display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:10px}
.cat-tools p{color:var(--muted);font-size:14px}
.cat-sections{transition:opacity .16s ease,transform .16s ease}
.cat-sections.switching{opacity:0;transform:translateY(8px)}
.cat-sec{padding-top:26px;scroll-margin-top:100px}
.cat-sec + .cat-sec{margin-top:30px;border-top:1px solid var(--line)}
.cat-sec__head{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;margin-bottom:6px}
.cat-sec__head h2{font-size:clamp(26px,3vw,36px)}
.cat-sec__head span{color:var(--muted)}
.cat-subsec{scroll-margin-top:100px;padding-top:18px}
.cat-subsec h3{display:flex;align-items:center;gap:10px;font-size:20px;margin-bottom:16px}
.cat-subsec h3::before{content:"";width:4px;height:20px;border-radius:4px;background:var(--green)}
.cat-subsec h3 small{font-size:12px;color:var(--muted);background:var(--bg-soft);border-radius:999px;padding:2px 8px}
.cat-sec > .grid{margin-top:16px}
.mock-tag{width:110px;height:110px;border-radius:50%;background:#fafafa;box-shadow:inset 0 0 0 8px #e9ecef,0 16px 26px -10px rgba(0,0,0,.25);position:relative}
.mock-tag::after{content:"";position:absolute;left:50%;top:50%;width:26px;height:26px;margin:-13px 0 0 -13px;border-radius:50%;background:#d5d9de}
@media (max-width:820px){
  .cat-nav{top:122px;border-radius:16px;padding:6px;margin-left:-4px;margin-right:-4px}
  .cat-tab{height:40px;padding:0 14px;font-size:14.5px}
  .cat-sec,.cat-subsec{scroll-margin-top:100px}
  .cat-tools .select{width:100%}
}
.mock-tablet{width:200px;height:140px;border-radius:16px;background:#0e1116;box-shadow:inset 0 0 0 5px var(--c,#555),0 18px 30px -12px rgba(0,0,0,.35);position:relative}
.mock-tablet::before{content:"";position:absolute;inset:10px;border-radius:8px;background:linear-gradient(150deg,#2a3550,#0e1116 70%)}
.mock-tablet::after{content:"";position:absolute;right:-6px;top:30px;width:6px;height:46px;border-radius:0 4px 4px 0;background:#333}
.mock-glasses{position:relative;width:190px;height:70px;display:flex;justify-content:space-between;align-items:center}
.mock-glasses::before{content:"";position:absolute;left:78px;top:26px;width:34px;height:10px;border-top:7px solid var(--c,#111);border-radius:20px 20px 0 0}
.mock-glasses i{width:82px;height:62px;border-radius:18px 18px 30px 30px;background:linear-gradient(160deg,#3b4352,#0b0d10);box-shadow:0 0 0 7px var(--c,#111),0 16px 24px -10px rgba(0,0,0,.4)}
.mock-glasses i:first-child::after{content:"";position:absolute;left:4px;top:4px;width:8px;height:8px;border-radius:50%;background:#555;box-shadow:inset 0 0 0 2px #888}
.mock-band{width:44px;height:170px;border-radius:22px;background:var(--c,#222);position:relative;box-shadow:0 16px 24px -10px rgba(0,0,0,.35)}
.mock-band::before{content:"";position:absolute;left:-6px;right:-6px;top:52px;height:66px;border-radius:16px;background:#0b0d10;box-shadow:inset 0 0 0 3px #444}
.mock-band::after{content:"";position:absolute;left:4px;right:4px;top:64px;height:42px;border-radius:10px;background:linear-gradient(180deg,var(--green),#0a6f12)}
.bu-meta .dot{width:12px;height:12px;border-radius:50%;flex:none;box-shadow:inset 0 0 0 1px rgba(0,0,0,.18)}
.bu-box.yes{color:var(--green-d);font-weight:700}
.bu-box.yes .icon{color:var(--green-d)}
.batt-pct{font-size:15px}
.bu-card .warranty{display:inline-flex;align-items:center;gap:4px}
.bu-card .warranty .icon{width:14px;height:14px;color:var(--green-d)}
.cond-legend{display:flex;gap:14px;flex-wrap:wrap;font-size:13.5px;color:var(--muted);margin:-8px 0 22px}
.cond-legend span{display:inline-flex;align-items:center;gap:6px}
.yt-list{gap:8px}
.yt-item{padding:8px;gap:12px}
.yt-item img{width:96px;height:58px}
.yt-item b{font-size:14.5px}
.yt-item small{font-size:12.5px;line-height:1.3;display:block}
.yt-item small em{font-style:normal;color:#B86E00;font-weight:700}
.yt__soon{display:inline-block;margin-left:8px;vertical-align:middle;font-size:12px;font-weight:800;background:#FFF4D6;color:#8A5A00;border-radius:999px;padding:3px 10px}
.masters{display:grid;grid-template-columns:1.1fr 2fr;gap:28px;margin-top:40px;padding:28px;border:1px solid var(--line);border-radius:24px;align-items:center}
.masters h3{font-size:24px;margin-bottom:8px}
.masters p{color:var(--muted)}
.masters__list{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.masters__list div{padding:16px;border-radius:16px;background:var(--bg-soft)}
.masters__list b{display:block;font-size:22px;color:var(--green-d);white-space:nowrap}
.masters__list span{font-size:13.5px;color:var(--ink-2)}
@media (max-width:1100px){.masters{grid-template-columns:1fr}.masters__list{grid-template-columns:1fr 1fr}}

/* =========== v4: проверки =========== */
.why__item .ck-btn{margin-top:14px}
.btn--soft{background:var(--blue-soft);color:var(--blue);box-shadow:none}
.btn--soft:hover{background:var(--blue);color:#fff}
.check-modal .modal__box{max-width:620px;max-height:calc(100vh - 40px);overflow-y:auto}
.ck-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px}
.ck-tabs{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;background:var(--bg-soft);border-radius:14px;padding:5px;margin-bottom:16px}
.ck-tab{display:flex;align-items:center;justify-content:center;gap:6px;min-height:44px;padding:6px 8px;border:0;border-radius:10px;background:none;font-weight:700;font-size:13.5px;line-height:1.2;cursor:pointer;transition:.2s}
.ck-tab .icon{width:18px;height:18px;flex:none}
.ck-tab.on{background:#fff;color:var(--blue);box-shadow:var(--sh-1)}
.ck-lead{color:var(--muted);font-size:14.5px}
.ck-demo{font-size:13px;color:var(--muted);display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.ck-demo button{border:1px dashed var(--line);background:#fff;border-radius:8px;padding:3px 8px;font-size:12.5px;font-weight:700;color:var(--blue);cursor:pointer}
.ck-demo button:hover{border-color:var(--blue)}
.ck-loading{color:var(--muted);padding:10px 0}
.ck-res{display:flex;gap:12px;align-items:flex-start;padding:16px;border-radius:16px;margin-top:4px}
.ck-res > .icon{width:28px;height:28px;flex:none;margin-top:2px}
.ck-res b{font-size:16px}
.ck-res p{font-size:14px;color:var(--ink-2);margin-top:4px}
.ck-res--ok{background:var(--green-soft)}.ck-res--ok > .icon{color:var(--green-d)}
.ck-res--warn{background:#FFF4E0}.ck-res--warn > .icon{color:#B86E00}
.ck-res--bad{background:#FDECEC}.ck-res--bad > .icon{color:#E5484D}
.ck-res--plain{border:1px solid var(--line)}
.ck-cols{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:6px}
.ck-cols small{font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.06em;color:var(--muted)}
.ck-cols ul{list-style:none;display:grid;gap:4px;margin-top:4px;font-size:14px}
.ck-cols li{display:flex;gap:6px}.ck-cols li .icon{color:var(--green-d);width:18px;height:18px}
.ck-head{display:flex;justify-content:space-between;gap:12px;align-items:flex-start}
.ck-head small{color:var(--muted);font-weight:700}
.ck-head b{display:block;font-size:18px}
.ck-status{flex:none;font-weight:800;font-size:13px;border-radius:999px;padding:5px 12px}
.ck-status--cur{background:var(--blue-soft);color:var(--blue)}
.ck-status--ok{background:var(--green-soft);color:var(--green-d)}
.ck-status--bad{background:#FDECEC;color:#C4282D}
.stepper{list-style:none;display:grid;grid-template-columns:repeat(4,1fr);margin:18px 0 12px;position:relative}
.stepper li{display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center;font-size:12.5px;font-weight:700;color:var(--muted);position:relative}
.stepper li::before{content:"";position:absolute;top:16px;left:-50%;width:100%;height:4px;background:var(--line);z-index:0}
.stepper li:first-child::before{display:none}
.stepper li i{position:relative;z-index:1;width:34px;height:34px;border-radius:50%;background:#fff;border:3px solid var(--line);display:flex;align-items:center;justify-content:center;font-style:normal;font-weight:800;color:var(--muted)}
.stepper li i .icon{width:18px;height:18px}
.stepper li.done{color:var(--green-d)}
.stepper li.done i{background:var(--green);border-color:var(--green);color:#fff}
.stepper li.done::before,.stepper li.cur::before{background:var(--green)}
.stepper li.cur{color:var(--blue)}
.stepper li.cur i{border-color:var(--blue);color:var(--blue);box-shadow:0 0 0 6px rgba(30,107,255,.12);animation:pulseDot 1.6s infinite}
@keyframes pulseDot{50%{box-shadow:0 0 0 10px rgba(30,107,255,.04)}}
.stepper li.bad{color:#C4282D}
.stepper li.bad i{background:#E5484D;border-color:#E5484D;color:#fff}
.stepper li.bad::before{background:#E5484D}
.ck-comment{background:var(--bg-soft);border-radius:12px;padding:10px 12px}
.ck-ready{display:flex;align-items:center;gap:6px;color:var(--green-d)!important;font-weight:700}
.footer-checks{display:grid;gap:8px;margin-top:16px}
.footer-checks a{display:inline-flex;align-items:center;gap:8px;font-size:14.5px}
.footer-checks .icon{color:var(--green);width:18px;height:18px}
.topbar__check{color:#fff;font-weight:700}
@media (max-width:600px){
  .ck-tabs{grid-template-columns:1fr}
  .ck-cols{grid-template-columns:1fr}
  .check-modal{padding:0;align-items:flex-end}
  .check-modal .modal__box{border-radius:24px 24px 0 0;max-height:92vh}
  .stepper li{font-size:11px}
}
.ck-pane[hidden]{display:none}

/* ===== v5: трейд-ин, бренды, новые моки ===== */
.btn--ti{background:var(--blue);color:#fff;gap:12px;padding-inline:28px 22px;box-shadow:0 10px 24px -10px rgba(30,107,255,.6)}
.btn--ti:hover{background:#1557E0;transform:translateY(-2px);box-shadow:0 16px 30px -12px rgba(30,107,255,.7)}
.btn--ti .icon:first-child{transition:transform .5s var(--ease)}
.btn--ti:hover .icon:first-child{transform:rotate(180deg)}
.ti-cta{display:flex;align-items:center;gap:22px;flex-wrap:wrap;margin-top:34px;padding:20px 24px;border-radius:22px;background:linear-gradient(100deg,#EAF8EC,#EEF4FF);border:1px solid #DDEBDF}
.ti-cta p{margin:0;max-width:520px;color:var(--ink-2);font-weight:600}
.ti-cta__arr{display:inline-grid;place-items:center;width:28px;height:28px;border-radius:50%;background:rgba(255,255,255,.18);transition:transform .25s var(--ease)}
.ti-cta__arr .icon{width:16px;height:16px}
.btn--ti:hover .ti-cta__arr{transform:translateX(4px)}
.repair-block .ti-cta{margin-top:24px}
.dd--2{display:grid;grid-template-columns:1fr 1fr;min-width:540px;gap:2px}
.dd__ti{background:#EEF4FF}.dd__ti .ico-box{background:var(--blue);color:#fff}
.chip-info--link{text-decoration:none;color:var(--blue);border-color:#CFE0FF}
.chip-info--link:hover{background:#EEF4FF}
/* бренды */
.brand-list{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin:16px 0 4px}
.brand-list__label{font-size:13px;color:var(--muted);font-weight:700;margin-right:4px}
.brand-chip{display:inline-flex;align-items:center;height:30px;padding:0 12px;border-radius:999px;background:#fff;border:1.5px solid var(--line);font-size:13px;font-weight:700;color:var(--ink-2);text-decoration:none;transition:.2s var(--ease)}
a.brand-chip:hover{border-color:var(--blue);color:var(--blue);transform:translateY(-1px)}
.brand-chip--lg{height:40px;padding:0 16px;font-size:14.5px}
.cam-brands{display:grid;grid-template-columns:1.1fr 2fr auto;gap:24px;align-items:center;padding:26px;border:1px solid var(--line);border-radius:24px;background:#fff;box-shadow:var(--sh-1, 0 6px 20px rgba(16,24,40,.05))}
.cam-brands h3{margin:6px 0}.cam-brands p{margin:0;color:var(--muted)}
.cam-brands__list{display:flex;flex-wrap:wrap;gap:8px}
@media (max-width:1000px){.cam-brands{grid-template-columns:1fr}}
.cat-sub__label{flex:none;align-self:center;font-size:13px;font-weight:700;color:var(--muted);padding:0 4px}
.cat-pill small{opacity:.6;font-weight:700;margin-left:2px}
.calc__group{margin-bottom:10px}
.calc__group>small{display:flex;align-items:center;gap:6px;font-size:12.5px;font-weight:800;text-transform:uppercase;letter-spacing:.04em;color:var(--muted);margin-bottom:6px}
.calc__group>small .icon{width:15px;height:15px}
/* моки */
.mock-cam{width:86px;height:118px;border-radius:44px 44px 40px 40px;background:var(--c,#f2f2f2);position:relative;box-shadow:inset 0 -8px 0 rgba(0,0,0,.06),0 18px 28px -12px rgba(0,0,0,.35)}
.mock-cam i{position:absolute;left:50%;top:22px;width:50px;height:50px;margin-left:-25px;border-radius:50%;background:radial-gradient(circle at 40% 38%,#5b6b8c 0 4px,#0e1116 5px 13px,#2a2f38 14px 100%);box-shadow:0 0 0 4px rgba(0,0,0,.08)}
.mock-cam::after{content:"";position:absolute;left:50%;bottom:-26px;width:40px;height:26px;margin-left:-20px;background:#d6d8dc;border-radius:0 0 10px 10px}
.mock-laptop{width:200px;height:124px;border-radius:10px 10px 4px 4px;background:#0e1116;box-shadow:inset 0 0 0 5px var(--c,#666);position:relative;margin-bottom:12px}
.mock-laptop i{position:absolute;inset:9px;border-radius:4px;background:linear-gradient(150deg,#26406f,#0e1116 70%)}
.mock-laptop::after{content:"";position:absolute;left:-18px;right:-18px;bottom:-12px;height:12px;border-radius:0 0 12px 12px;background:var(--c,#888);filter:brightness(1.1);box-shadow:0 12px 20px -8px rgba(0,0,0,.4)}

/* ===== трейд-ин калькулятор ===== */
.ti-loading{padding:60px;text-align:center;color:var(--muted)}
.ti__grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:28px;background:var(--bg-soft);border-radius:28px;padding:28px}
.ti-side__in{position:sticky;top:110px;display:flex;flex-direction:column;align-items:center;gap:16px;text-align:center}
.ti-side__media{width:260px;height:260px;border-radius:50%;background:radial-gradient(circle,#DDF5E0 0 62%,transparent 63%);display:grid;place-items:center}
.ti-side__media.swap{animation:tiSwap .5s var(--ease)}
@keyframes tiSwap{from{opacity:0;transform:scale(.92) rotate(-4deg)}to{opacity:1;transform:none}}
.ti-side__sum{font-size:13.5px;color:var(--muted);max-width:320px;min-height:20px}
.ti-price{width:100%;max-width:360px;background:#fff;border:1.5px solid #CFE9D2;border-radius:20px;padding:16px 18px;box-shadow:0 10px 30px -18px rgba(8,180,20,.5)}
.ti-price>small{display:block;font-size:12.5px;font-weight:800;color:var(--muted);text-transform:uppercase;letter-spacing:.05em}
.ti-price__row{display:flex;align-items:baseline;justify-content:center;gap:12px;margin:6px 0 2px;flex-wrap:wrap}
.ti-price__lo{color:var(--muted);font-weight:700}
.ti-price__hi{font-size:30px;font-weight:800;color:var(--ink)}
.ti-price__hi b,.ti-result__hi b{font-variant-numeric:tabular-nums}
.ti-price em{font-style:normal;font-size:12.5px;color:var(--green-d)}
.ti-pop.pulse{animation:tiPulse .45s var(--ease)}
@keyframes tiPulse{40%{transform:scale(1.035)}}
.ti-trust{list-style:none;margin:0;padding:0;display:grid;gap:6px;font-size:13.5px;color:var(--ink-2);text-align:left}
.ti-trust li{display:flex;gap:8px;align-items:center}.ti-trust .icon{width:16px;height:16px;color:var(--green)}
.ti-main{min-width:0}
.ti-top{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:6px;font-size:13px;color:var(--muted)}
.ti-progress{display:flex;gap:5px}.ti-progress i{width:26px;height:3px;border-radius:3px;background:#D9DEE6;transition:background .35s var(--ease)}
.ti-progress i.on{background:var(--blue)}
.ti-step{border-bottom:1px solid var(--line)}
.ti-step__head{width:100%;display:flex;align-items:center;gap:10px;padding:14px 0;background:none;border:0;cursor:pointer;text-align:left;font:inherit;color:var(--ink)}
.ti-step__title{font-size:19px;font-weight:700;transition:font-size .3s var(--ease)}
.ti-step.open .ti-step__title{font-size:24px;font-weight:800}
.ti-step__val{flex:1;min-width:0;font-size:13px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ti-step__ed,.ti-step__ok{display:none;place-items:center}
.ti-step__ed .icon{width:16px;height:16px;color:var(--blue)}
.ti-step__ok{width:26px;height:26px;border-radius:50%;background:#E3F7E5;color:var(--green)}.ti-step__ok .icon{width:15px;height:15px}
.ti-step.done:not(.open) .ti-step__ed,.ti-step.done:not(.open) .ti-step__ok{display:grid}
.ti-step.locked .ti-step__head{cursor:default;color:#A0A7B2}
.ti-step__body{display:grid;grid-template-rows:0fr;transition:grid-template-rows .45s var(--ease)}
.ti-step.open .ti-step__body{grid-template-rows:1fr}
.ti-step__inner{overflow:hidden;min-height:0;opacity:0;transition:opacity .3s var(--ease)}
.ti-step.open .ti-step__inner{opacity:1;padding-bottom:22px}
.ti-brands{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;padding:2px 0 12px}
.ti-brand{flex:none;height:38px;padding:0 16px;border-radius:999px;border:1.5px solid var(--line);background:#fff;font:inherit;font-weight:700;font-size:14px;cursor:pointer;transition:.2s var(--ease)}
.ti-brand.on{background:var(--ink);border-color:var(--ink);color:#fff}
.ti-grid2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.ti-col{display:grid;gap:10px}
.ti-opt{display:flex;align-items:center;gap:12px;min-height:50px;padding:12px 14px;border-radius:14px;border:1.5px solid var(--line);background:#fff;font:inherit;font-size:15px;font-weight:600;color:var(--ink);text-align:left;cursor:pointer;transition:border-color .2s var(--ease),background .2s var(--ease),box-shadow .2s var(--ease),transform .15s}
.ti-opt:hover{border-color:#9DBDFF}
.ti-opt:active{transform:scale(.985)}
.ti-opt__t{flex:1;display:flex;flex-direction:column;gap:2px;align-items:flex-start}
.ti-opt__t small{font-size:12.5px;font-weight:500;color:var(--muted);max-height:0;overflow:hidden;opacity:0;transition:max-height .35s var(--ease),opacity .3s}
.ti-opt.on .ti-opt__t small{max-height:60px;opacity:1;margin-top:4px}
.ti-opt__r{flex:none;width:22px;height:22px;border-radius:50%;border:2px solid #B9D3FF;display:grid;place-items:center;transition:.2s var(--ease)}
.ti-opt__r .icon{width:13px;height:13px;color:#fff;opacity:0;transform:scale(.4);transition:.2s var(--ease)}
.ti-opt.on{border-color:var(--blue);background:#F2F7FF;box-shadow:0 0 0 3px rgba(30,107,255,.12)}
.ti-opt.on .ti-opt__r{background:var(--blue);border-color:var(--blue)}
.ti-opt.on .ti-opt__r .icon{opacity:1;transform:none}
.ti-opt--best{border-color:#BFE8C3}
.ti-bonus{display:inline-flex;align-items:center;height:22px;padding:0 8px;border-radius:999px;background:var(--green);color:#fff;font-size:12px;font-weight:800;margin-left:6px}
.ti-bonus--lg{height:30px;padding:0 14px;font-size:13.5px;margin:6px 0 0}
.ti-extra__ic{display:inline-grid;place-items:center;width:38px;height:38px;border-radius:10px;background:var(--bg-soft);margin-right:4px;vertical-align:middle}
.ti-extra .ti-opt__t{flex-direction:row;align-items:center}
.ti-add{color:var(--green-d);font-size:14px;white-space:nowrap}
.ti-more{display:flex;align-items:center;gap:6px;margin:12px auto 0;background:none;border:0;font:inherit;font-weight:700;color:var(--blue);cursor:pointer}
.ti-more .icon{width:16px;height:16px}
.ti-q{margin:20px 0 10px;font-size:17px;font-weight:700;display:flex;flex-wrap:wrap;gap:4px 10px;align-items:baseline}
.ti-q small{font-size:12.5px;font-weight:500;color:var(--muted)}
.ti-mem{display:flex;flex-wrap:wrap;gap:8px;min-height:44px;align-items:center}
.ti-chip{height:44px;padding:0 18px;border-radius:12px;border:1.5px solid var(--line);background:#fff;font:inherit;font-weight:700;cursor:pointer;transition:.2s var(--ease);animation:tiIn .35s var(--ease) both}
.ti-chip:nth-child(2){animation-delay:.04s}.ti-chip:nth-child(3){animation-delay:.08s}.ti-chip:nth-child(4){animation-delay:.12s}
.ti-chip.on{border-color:var(--blue);background:var(--blue);color:#fff}
@keyframes tiIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.ti-muted{color:var(--muted);font-size:14px}
.ti-next{margin-top:22px}
.ti-next:disabled{background:#C9D3E3;box-shadow:none;cursor:not-allowed;transform:none}
.ti-safe{display:flex;gap:6px;align-items:center;justify-content:center;font-size:12.5px;color:var(--muted);margin:10px 0 0}.ti-safe .icon{width:14px;height:14px}
.ti-detail{display:grid;gap:6px;font-size:14px;margin-bottom:14px}
.ti-detail div,.ti-detail details>div{display:flex;gap:10px;justify-content:space-between}
.ti-detail span{color:var(--muted)}
.ti-detail summary{cursor:pointer;color:var(--blue);font-weight:700;font-size:13px;list-style:none;display:flex;align-items:center;gap:4px}
.ti-detail summary .icon{width:14px;height:14px;transition:transform .25s}
.ti-detail details[open] summary .icon{transform:rotate(180deg)}
.ti-detail details>div{margin-top:6px}
.ti-result{position:relative;text-align:center;padding:34px 20px 22px;border-radius:22px;border:1.5px solid #BFE8C3;background:linear-gradient(180deg,#F1FBF2,#fff);margin-top:22px;animation:tiIn .45s var(--ease)}
.ti-result__ic{position:absolute;top:-22px;left:50%;margin-left:-22px;width:44px;height:44px;border-radius:50%;background:var(--green);color:#fff;display:grid;place-items:center;font-weight:800;font-size:20px;box-shadow:0 8px 18px -6px rgba(8,180,20,.6)}
.ti-result h3{margin:0;font-size:20px}.ti-result p{margin:4px 0 12px;color:var(--muted);font-size:14px}
.ti-result__price{display:flex;align-items:baseline;justify-content:center;gap:12px;flex-wrap:wrap}
.ti-result__hi{font-size:38px;font-weight:800;letter-spacing:-.02em}
.ti-sep{width:1px;height:26px;background:var(--line)}
.ti-result__note{display:block;margin-top:12px;color:var(--muted);font-size:12.5px}
.ti-send-label{display:flex;gap:8px;align-items:center;justify-content:center;font-weight:700;font-size:14px;margin:18px 0 10px}.ti-send-label .icon{width:18px;height:18px;color:var(--blue)}
.ti-send{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:10px}
.ti-reset{display:block;margin:14px auto 0;background:none;border:0;border-bottom:1.5px solid currentColor;font:inherit;font-weight:700;font-size:14px;cursor:pointer;color:var(--ink)}
.ti-bar{display:none}
@media (max-width:900px){
  .ti__grid{grid-template-columns:1fr;padding:16px;gap:10px;border-radius:22px}
  .ti-side__in{position:static;flex-direction:row;flex-wrap:wrap;justify-content:center;gap:10px}
  .ti-side__media{width:130px;height:130px}.ti-side__media>*{transform:scale(.55)}
  .ti-side__sum{flex:1 1 150px;text-align:left;align-self:center}
  .ti-trust{display:none}
  .ti-price{max-width:none}
  .ti-step__title{font-size:17px}.ti-step.open .ti-step__title{font-size:21px}
  .ti-send{grid-template-columns:1fr}
  .ti-result__hi{font-size:32px}
  .ti-bar{display:flex;position:fixed;left:10px;right:10px;bottom:10px;z-index:60;align-items:center;justify-content:space-between;gap:10px;padding:10px 16px;border-radius:16px;background:var(--ink);color:#fff;box-shadow:0 12px 30px -10px rgba(0,0,0,.5);transform:translateY(130%);transition:transform .35s var(--ease)}
  .ti-bar.show{transform:none}
  .ti-bar small{display:block;font-size:11px;opacity:.7;text-transform:uppercase;letter-spacing:.05em}.ti-bar b{font-size:20px}
  .ti-bar>span{font-size:12px;opacity:.75;text-align:right}
  .ti-cta{padding:16px;gap:12px}.ti-cta .btn{width:100%;justify-content:center}
  .dd--2{min-width:0}
}
@media (max-width:420px){.ti-grid2{grid-template-columns:1fr 1fr;gap:8px}.ti-opt{padding:10px 11px;font-size:14px}}
.steps--3{grid-template-columns:repeat(3,1fr)}
@media (max-width:760px){.steps--3{grid-template-columns:1fr}}
@media (prefers-reduced-motion: reduce){
  .ti-step__body,.ti-step__inner,.ti-opt,.ti-opt__t small,.ti-progress i,.ti-bar,.btn--ti .icon{transition:none!important}
  .ti-chip,.ti-result,.ti-side__media.swap,.ti-pop.pulse{animation:none!important}
}
@media (max-width:900px){
  .ti-bar{right:82px}
  [data-ti-new]{white-space:normal;text-align:center;line-height:1.25;height:auto;min-height:52px;padding-block:10px}
}
@media (min-width:1001px){.cat-tabs{flex-wrap:wrap}.cat-sub--brands{flex-wrap:wrap;row-gap:6px}}
/* trade-in in hero */
.hero__ti .ti-cta{margin:20px auto 0;max-width:760px;justify-content:center;text-align:left;position:relative;z-index:2}
@media(max-width:640px){.hero__ti .ti-cta{text-align:center}}

/* Hero product chips: desktop floats around the logo; ≤1280 horizontal strip */
@media (max-width:1280px){
  .hero__floats{position:static;display:flex;gap:12px;overflow-x:auto;overflow-y:hidden;padding:6px 2px 18px;margin:6px 0 18px;pointer-events:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:thin}
  .hero__float{position:static;flex:0 0 min(240px,78vw);width:auto;scroll-snap-align:start;animation-delay:0s}
  .hero__float-bob{animation:none}
  .hero__float-media{height:132px}
  .hero__mv{display:none}
  .hero__float-poster{display:block;max-width:86%;max-height:86%}
}
@media (prefers-reduced-motion:reduce){
  .hero__float,.hero__float-bob,.hero__float-photo{animation:none!important;transform:none!important}
}
/* Nov 10 (updated): after slim nav and removal of calc CTA, keep phone+hours clear of nav at 1281–2560. Widen container on very wide screens. */
@media (min-width:1521px){
  .header > .container{max-width:calc(var(--container) + 120px)}
}
@media (min-width:1281px){
  .header__phone{margin-left:28px}
}