/* ═══════════════════════════════════════════════════════════════════
   AVOCADO PRO · СТАНДАРТ ХОЛДИНГА · v1 · 23.10.2026
   Один файл для всех сайтов и порталов: avocadopro.kz, smart-home, partners,
   shop, electric, portal, CRM. Подключить первым, сайт добавляет только своё.
   Источник истины — этот файл + стайлгайд index.html рядом.
   ═══════════════════════════════════════════════════════════════════ */

/* ── Шрифт: только Geist (кириллица и латиница локально, без Google) ── */
@font-face{font-family:'Geist';font-style:normal;font-weight:100 900;font-display:swap;src:url('fonts/geist-latin.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Geist';font-style:normal;font-weight:100 900;font-display:swap;src:url('fonts/geist-cyrillic.woff2') format('woff2');unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:'Geist';font-style:normal;font-weight:100 900;font-display:swap;src:url('fonts/geist-cyrillic-ext.woff2') format('woff2');unicode-range:U+0460-052F,U+1C80-1C88,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F}
@font-face{font-family:'Geist';font-style:normal;font-weight:100 900;font-display:swap;src:url('fonts/geist-latin-ext.woff2') format('woff2');unicode-range:U+0100-02AF,U+0304,U+0308,U+0329,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:'Geist';font-style:normal;font-weight:100 900;font-display:swap;src:url('fonts/geist-extra.woff2') format('woff2');unicode-range:U+2009,U+2011,U+202F,U+2082,U+20B8,U+2192}

/* ── Токены ── */
:root{
  /* светлая зона — основа всех сайтов */
  --white:#fff; --paper:#F5F5F7; --ink:#1D1D1F; --dim:#6E6E73; --mute:#6B6B70; --line:#D2D2D7;
  /* тёмная зона — один-два «кинематографичных» блока на страницу */
  --night:#0B0D0C; --night-2:#161A17; --night-3:#1F2420; --on-night:#F5F5F7; --on-night-dim:#A1A1A6;
  --green:#69BC46; --green-hi:#5AAE3A; --green-br:#86DE5B; --green-text:#2E6A1B; --green-soft:#EAF5E3; --on-green:#08120A;
  /* зелёный для текста на белом (контраст 4,5:1 и выше): акцентные слова, «.pro» в метке */
  --green-ink:#387F27;
  --gold:#FFCC66; --gold-soft:#F6E2A8; --gold-text:#6B4E12;
  --danger:#D14A3A;
  /* сабренды: цвет только у метки направления и мелких акцентов, главная кнопка всегда зелёная */
  --sb-home:#69BC46; --sb-main:#1D1D1F; --sb-partners:#2C6A9E; --sb-shop:#C0473A; --sb-electric:#D1902A; --sb-service:#7A61B8;
  /* шрифт и шкала */
  --sans:'Geist','Geist Fallback',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --t-xs:13px; --t-s:15px; --t-m:17px; --t-l:clamp(19px,1.5vw,22px);
  --t-xl:clamp(28px,3vw,44px); --t-2xl:clamp(36px,5vw,68px); --t-3xl:clamp(38px,4.7vw,68px);
  /* сетка */
  --wrap:1200px; --gut:clamp(16px,4vw,40px); --nav:52px;
  /* радиусы */
  --r-s:14px; --r-m:22px; --r:28px; --r-l:32px; --pill:100px;
  /* движение: одна кривая — подпись бренда */
  --ease:cubic-bezier(.16,1,.3,1); --t-fast:.25s; --t-mid:.5s; --t-slow:.9s;
  /* тени */
  --sh-card:0 1px 2px rgba(0,0,0,.04),0 16px 36px -26px rgba(20,40,20,.3);
  --sh-lift:0 30px 50px -36px rgba(0,0,0,.35);
  color-scheme:light;
}

/* ── База ── */
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:calc(var(--nav) + 12px)}
body{margin:0;background:var(--white);color:var(--ink);font:400 var(--t-m)/1.5 var(--sans);-webkit-font-smoothing:antialiased;overflow-x:clip}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
button{background:none;border:0;padding:0;cursor:pointer}
h1,h2,h3{margin:0;font-weight:650;letter-spacing:-.035em;line-height:1.05;text-wrap:balance}
p{margin:0;text-wrap:pretty}
:focus-visible{outline:2px solid var(--green);outline-offset:3px;border-radius:6px}
.num{font-variant-numeric:tabular-nums}
.i{width:20px;height:20px;flex:none;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}

/* ── Раскладка и секции ── */
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--gut)}
.sec{padding:clamp(76px,10vw,140px) 0}
.sec-paper{background:var(--paper)}
.on-night{background:var(--night);color:var(--on-night)}
.h1{font-size:var(--t-3xl);letter-spacing:-.045em;line-height:1.02}
.h2{font-size:var(--t-2xl)}
.h3{font-size:var(--t-xl)}
.lead{margin-top:18px;font-size:var(--t-l);line-height:1.4;color:var(--dim);max-width:46ch}
.on-night .lead{color:var(--on-night-dim)}
.accent{color:var(--green-ink)}
.on-night .accent{color:var(--green-br)}

/* ── Кнопки: всегда пилюли ── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:50px;padding:0 24px;border-radius:var(--pill);font-size:var(--t-m);font-weight:500;letter-spacing:-.01em;white-space:nowrap;transition:background var(--t-fast) var(--ease),scale .3s var(--ease),box-shadow var(--t-fast) var(--ease)}
.btn:active{scale:.97}
.btn-sm{height:40px;padding:0 18px;font-size:var(--t-s)}
.btn-green{background:var(--green);color:var(--on-green)}
.btn-green:hover{background:var(--green-hi)}
.btn-ink{background:var(--ink);color:#fff}
.btn-white{background:#fff;color:var(--ink)}
.btn-line{box-shadow:inset 0 0 0 1px var(--line);color:var(--ink)}
.btn-line:hover{box-shadow:inset 0 0 0 1px var(--ink)}
.on-night .btn-line{box-shadow:inset 0 0 0 1px rgba(255,255,255,.28);color:#fff}
.on-night .btn-line:hover{box-shadow:inset 0 0 0 1px #fff}
.lnk{color:var(--green-text);font-weight:500}
.lnk:hover{text-decoration:underline;text-underline-offset:3px}
.on-night .lnk{color:var(--green-br)}

/* ── Переключатель-сегмент (Для дома / Профессионалам) ── */
.seg{position:relative;display:inline-grid;grid-auto-flow:column;grid-auto-columns:1fr;padding:4px;border-radius:var(--pill);background:var(--paper);isolation:isolate}
.seg button{position:relative;z-index:1;height:40px;padding:0 20px;border-radius:var(--pill);font-size:var(--t-s);font-weight:500;color:var(--dim);transition:color .4s var(--ease)}
.seg button[aria-pressed="true"]{color:var(--ink)}
.seg .pill{position:absolute;z-index:0;top:4px;bottom:4px;left:4px;width:calc(100% / var(--n,2) - 8px / var(--n,2));border-radius:var(--pill);background:#fff;box-shadow:0 2px 8px rgba(0,0,0,.08),0 0 0 .5px rgba(0,0,0,.04);translate:calc(100% * var(--i,0)) 0;transition:translate .55s var(--ease)}

/* ── Чипы и выбор-пилюли ── */
.chip{display:inline-flex;align-items:center;height:34px;padding:0 14px;border-radius:var(--pill);background:var(--paper);font-size:14px;font-weight:500}
.card-paper .chip,.sec-paper .chip{background:#fff}
.on-night .chip{background:rgba(255,255,255,.08);box-shadow:inset 0 0 0 1px rgba(255,255,255,.08)}
.pick{display:flex;flex-wrap:wrap;gap:6px}
.pick button,.pick span{height:34px;padding:0 14px;border-radius:var(--pill);background:#fff;box-shadow:inset 0 0 0 1px var(--line);font-size:13.5px;font-weight:500;color:var(--ink);display:inline-flex;align-items:center;transition:background var(--t-fast),color var(--t-fast),box-shadow var(--t-fast)}
.pick button:hover{box-shadow:inset 0 0 0 1px var(--ink)}
.pick [aria-pressed="true"]{background:var(--ink);color:#fff;box-shadow:none}

/* ── Карточки ── */
.card{border-radius:var(--r);background:#fff;padding:clamp(20px,2.4vw,28px);box-shadow:var(--sh-card)}
.card-paper{border-radius:var(--r);background:var(--paper);padding:clamp(20px,2.4vw,28px)}
.card-night{border-radius:var(--r);background:var(--night-2);color:var(--on-night);padding:clamp(20px,2.4vw,28px);box-shadow:inset 0 0 0 1px rgba(255,255,255,.07)}
.card-lift{transition:translate .5s var(--ease),box-shadow .5s var(--ease)}
.card-lift:hover{translate:0 -4px;box-shadow:var(--sh-lift)}
.ic-tile{width:44px;height:44px;border-radius:14px;background:var(--green-soft);color:var(--green-text);display:grid;place-items:center}
.on-night .ic-tile{background:rgba(105,188,70,.16);color:var(--green-br)}
/* стекло поверх фото */
.glass{border-radius:24px;padding:18px;background:rgba(18,22,19,.56);-webkit-backdrop-filter:blur(22px) saturate(1.6);backdrop-filter:blur(22px) saturate(1.6);color:#fff;box-shadow:inset 0 0 0 1px rgba(255,255,255,.12)}
.live{display:inline-flex;align-items:center;gap:6px;font-size:13px;color:var(--green-br)}
.live::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor;animation:hb-blink 1.6s ease-in-out infinite}
@keyframes hb-blink{50%{opacity:.25}}

.cb{display:inline-flex;align-items:center;flex-wrap:wrap;gap:8px 12px}
@keyframes hb-sheen{0%,55%{background-position:120% 0}100%{background-position:-20% 0}}
.cb-x{font-size:20px;color:var(--mute);font-weight:300;line-height:1}
.on-night .cb-x{color:rgba(255,255,255,.4)}
.cb img{height:24px;width:auto}
.gold{display:inline-flex;align-items:center;white-space:nowrap;flex:none;height:26px;padding:0 11px;border-radius:var(--pill);font-size:12px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--gold-text);background:linear-gradient(110deg,var(--gold-soft) 0 40%,#FFF6DB 50%,var(--gold-soft) 60% 100%) 120% 0/260% 100%;box-shadow:inset 0 0 0 1px rgba(160,120,30,.25);animation:hb-sheen 5.5s var(--ease) .4s infinite}

/* ── Метка направления холдинга: avocado.pro + сабренд ── */
.sb{display:inline-flex;align-items:baseline;gap:0;font-weight:650;letter-spacing:-.02em;font-size:15px;color:var(--ink)}
.sb i{font-style:normal;color:var(--green-ink)}
.on-night .sb i{color:var(--green-br)}
.sb em{margin-left:8px;align-self:center;font-style:normal;font-size:11px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;padding:3px 8px;border-radius:var(--pill);color:#fff;background:var(--sb,var(--sb-home))}
.on-night .sb{color:#fff}
.sb-home em,.sb-electric em{color:var(--on-green)}
.sb-home{--sb:var(--sb-home)}.sb-main{--sb:var(--sb-main)}.sb-partners{--sb:var(--sb-partners)}.sb-shop{--sb:var(--sb-shop)}.sb-electric{--sb:var(--sb-electric)}.sb-service{--sb:var(--sb-service)}

/* ── Формы: поле с плавающей подписью ── */
.fld{position:relative}
.fld input,.fld select,.fld textarea{width:100%;height:58px;padding:22px 16px 6px;border:0;border-radius:var(--r-s);background:var(--paper);font-size:16px;outline:0;appearance:none;-webkit-appearance:none;transition:box-shadow var(--t-fast)}
.fld textarea{height:auto;min-height:110px;resize:vertical}
.fld label{position:absolute;left:16px;top:18px;font-size:16px;color:var(--mute);pointer-events:none;transition:top var(--t-fast) var(--ease),font-size var(--t-fast) var(--ease),color var(--t-fast)}
.fld input:focus,.fld select:focus,.fld textarea:focus{box-shadow:inset 0 0 0 2px var(--green)}
.fld input:focus+label,.fld input:not(:placeholder-shown)+label,.fld textarea:focus+label,.fld textarea:not(:placeholder-shown)+label,.fld select+label{top:8px;font-size:12px;color:var(--dim)}
.fld.err input,.fld.err select{box-shadow:inset 0 0 0 2px var(--danger)}
.opts{display:flex;flex-wrap:wrap;gap:8px}
.opts label{position:relative}
.opts input{position:absolute;opacity:0;pointer-events:none}
.opts span{display:inline-flex;align-items:center;height:38px;padding:0 14px;border-radius:var(--pill);background:var(--paper);font-size:14px;font-weight:500;cursor:pointer;transition:background var(--t-fast),color var(--t-fast)}
.opts input:checked+span{background:var(--ink);color:#fff}
.opts input:focus-visible+span{outline:2px solid var(--green);outline-offset:2px}
.hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}

/* ── Переключатель и ползунок ── */
.sw-t{position:relative;width:46px;height:28px;border-radius:14px;background:var(--line);flex:none;transition:background .3s}
.sw-t::after{content:"";position:absolute;left:3px;top:3px;width:22px;height:22px;border-radius:50%;background:#fff;box-shadow:0 2px 6px rgba(0,0,0,.2);transition:translate .3s var(--ease)}
.sw-t[aria-checked="true"]{background:var(--green)}
.sw-t[aria-checked="true"]::after{translate:18px 0}
input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:28px;background:transparent;margin:0;--p:50%;cursor:pointer}
input[type=range]::-webkit-slider-runnable-track{height:6px;border-radius:6px;background:linear-gradient(90deg,var(--green) var(--p),#E8E8ED var(--p))}
input[type=range]::-moz-range-track{height:6px;border-radius:6px;background:linear-gradient(90deg,var(--green) var(--p),#E8E8ED var(--p))}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:24px;height:24px;border-radius:50%;background:#fff;margin-top:-9px;box-shadow:0 1px 3px rgba(0,0,0,.2),0 4px 12px rgba(0,0,0,.14);transition:scale .2s}
input[type=range]::-moz-range-thumb{width:24px;height:24px;border:0;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.2),0 4px 12px rgba(0,0,0,.14)}
input[type=range]:active::-webkit-slider-thumb{scale:1.15}

/* ── Шапка ── */
.nav{position:fixed;inset:0 0 auto;z-index:60;height:var(--nav);background:rgba(255,255,255,.8);-webkit-backdrop-filter:saturate(1.8) blur(20px);backdrop-filter:saturate(1.8) blur(20px);box-shadow:0 1px 0 rgba(0,0,0,.06)}
.nav-in{height:100%;max-width:var(--wrap);margin:0 auto;padding:0 var(--gut);display:flex;align-items:center;gap:28px}
.nav-links{display:flex;gap:24px;margin:0 auto;font-size:13.5px;color:#333}
.nav-links a:hover{color:var(--ink)}
.nav .btn{height:32px;padding:0 14px;font-size:13.5px}

/* ── Движение: один главный момент на экран ── */
@media (prefers-reduced-motion:no-preference){
  html.js .rv{opacity:0;translate:0 28px;transition:opacity var(--t-slow) var(--ease),translate 1s var(--ease);transition-delay:var(--d,0s)}
  html.js .rv.in{opacity:1;translate:0 0}
}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}
@media (max-width:860px){.nav-links{display:none}}