/* Лендинг Avocado Home (avocadohome.kz) — поверх assets/avocado-holding.css. 02.11.2026 */

.nav .sb{font-size:16px}
.nav-cta{margin-left:auto}
@media (min-width:861px){.nav-cta{margin-left:0}}

/* рамки: телефон, ноутбук/браузер */
.phone{position:relative;width:min(100%,300px);border-radius:46px;padding:9px;background:#101311;box-shadow:0 0 0 1px rgba(255,255,255,.06) inset,0 40px 70px -40px rgba(10,30,10,.55),0 2px 6px rgba(0,0,0,.15)}
.phone img{width:100%;aspect-ratio:390/844;object-fit:cover;object-position:top;border-radius:38px;background:#F5F5F7}
.phone::before{content:'';position:absolute;top:19px;left:50%;translate:-50% 0;width:84px;height:24px;border-radius:20px;background:#101311;z-index:2}
.phone.sm{width:min(100%,240px);border-radius:38px;padding:7px}
.phone.sm img{border-radius:32px}
.phone.sm::before{top:15px;width:66px;height:19px}
.browser{border-radius:18px;background:#fff;box-shadow:0 0 0 1px rgba(0,0,0,.07),0 40px 70px -46px rgba(10,30,10,.5);overflow:hidden}
.browser .bar{height:34px;display:flex;align-items:center;gap:7px;padding:0 14px;background:#F2F2F4;border-bottom:1px solid #E5E5EA}
.browser .bar i{width:10px;height:10px;border-radius:50%;background:#D9D9DE}
.browser .bar span{margin-left:10px;font-size:12px;color:var(--mute);background:#fff;border-radius:7px;padding:3px 12px;max-width:60%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.browser img{width:100%}
.shot-cap{margin-top:12px;font-size:14px;color:var(--dim);line-height:1.45}
.shot-cap b{color:var(--ink)}


/* ── первый экран ── */
.hero{position:relative;padding:calc(var(--nav) + clamp(40px,6vw,84px)) 0 clamp(64px,8vw,110px);background:
  radial-gradient(60% 70% at 100% 0%,rgba(105,188,70,.16),transparent 70%),
  linear-gradient(#fff,#F7F8F6)}
.hero-grid{display:grid;grid-template-columns:1fr 1.05fr;gap:clamp(32px,5vw,72px);align-items:center}
.kicker{display:inline-flex;align-items:center;gap:8px;height:32px;padding:0 14px 0 6px;border-radius:var(--pill);background:#fff;box-shadow:inset 0 0 0 1px var(--line);font-size:13.5px;font-weight:500;color:var(--dim)}
.kicker b{display:inline-grid;place-items:center;height:22px;padding:0 9px;border-radius:var(--pill);background:var(--green);color:var(--on-green);font-size:12px;font-weight:600}
.hero h1{margin-top:22px;font-size:clamp(40px,5.6vw,76px);letter-spacing:-.05em;line-height:1}
.hero .lead{max-width:40ch}
.hero-cta{display:flex;flex-wrap:wrap;gap:10px;margin-top:32px}
.hero-facts{display:flex;flex-wrap:wrap;gap:8px;margin-top:28px}
.hero-facts .chip{background:#fff;box-shadow:inset 0 0 0 1px #E3E3E8;gap:8px}
.hero-facts .chip .i{width:16px;height:16px;color:var(--green-ink)}

.hero-vis{position:relative;min-height:600px}
.hero-vis .browser{position:absolute;top:0;left:0;width:84%}
.hero-vis .phone{position:absolute;right:0;bottom:0;width:216px;z-index:3}
.tg{position:absolute;z-index:4;left:-22px;bottom:34px;width:300px;border-radius:20px;padding:14px 16px 12px;background:rgba(255,255,255,.92);-webkit-backdrop-filter:blur(20px) saturate(1.6);backdrop-filter:blur(20px) saturate(1.6);box-shadow:0 0 0 1px rgba(0,0,0,.06),0 30px 50px -28px rgba(10,30,10,.45)}
.tg-h{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--mute)}
.tg-h .dot{width:22px;height:22px;border-radius:50%;background:#2AABEE;display:grid;place-items:center}
.tg-h .dot svg{width:12px;height:12px;fill:#fff}
.tg-h time{margin-left:auto}
.tg b{display:block;margin-top:8px;font-size:15px;letter-spacing:-.01em}
.tg p{font-size:13.5px;color:var(--dim);line-height:1.4;margin-top:2px}
.tg-btn{margin-top:10px;height:34px;border-radius:10px;background:#EEF4FA;color:#2477B5;font-size:13.5px;font-weight:600;display:grid;place-items:center}

@media (max-width:960px){
  .hero-grid{grid-template-columns:1fr}
  .hero-vis{min-height:0;margin-top:8px;padding:0 0 120px}
  .hero-vis .browser{position:relative;width:88%}
  .hero-vis .phone{right:0;bottom:0;width:min(40vw,210px)}
  .tg{left:0;bottom:16px;width:min(62vw,290px)}
}
@media (max-width:560px){
  .hero-vis{padding-bottom:170px}
  .hero-vis .browser{width:94%}
  .hero-vis .phone{bottom:0;right:0;width:44vw}
  .tg{left:0;bottom:22px;width:56vw;padding:12px}
  .tg b{font-size:14px}.tg p{font-size:12.5px}
}

/* ── заголовки секций ── */
.s-head{max-width:760px}
.s-head .h2{font-size:clamp(32px,4.2vw,56px)}
.eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:15px;font-weight:600;color:var(--green-ink);margin-bottom:16px}
.on-night .eyebrow{color:var(--green-br)}

/* ── три части ── */
.parts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:48px}
.part-c{border-radius:var(--r);background:#fff;overflow:hidden;display:flex;flex-direction:column}
.part-c .tx{padding:26px 26px 22px}
.part-c .tx h3{font-size:24px;letter-spacing:-.025em;margin-top:16px}
.part-c .tx p{margin-top:8px;color:var(--dim);font-size:16px;line-height:1.5}
.part-c .pic{margin-top:auto;height:230px;overflow:hidden;background:var(--paper);position:relative}
.part-c .pic img{position:absolute;width:150%;max-width:none;left:24px;top:22px;border-radius:12px;box-shadow:0 0 0 1px rgba(0,0,0,.06),0 20px 40px -24px rgba(0,0,0,.35)}
.part-c .pic.ph img{width:62%;left:50%;translate:-50% 0;border-radius:22px}
@media (max-width:900px){.parts{grid-template-columns:1fr}.part-c .pic{height:250px}}

/* ── монтажнику: вкладки ── */
.inst{display:grid;grid-template-columns:.8fr 1.2fr;gap:clamp(28px,4vw,56px);margin-top:48px;align-items:start}
.feat-list{display:grid;gap:6px}
.feat{display:grid;grid-template-columns:44px 1fr;gap:14px;text-align:left;padding:14px 16px;border-radius:var(--r-m);transition:background var(--t-fast)}
.feat:hover{background:var(--paper)}
.feat[aria-selected="true"]{background:#fff;box-shadow:var(--sh-card),inset 0 0 0 1px #E6E6EA}
.feat b{display:block;font-size:18px;letter-spacing:-.015em;font-weight:600}
.feat span{display:block;font-size:15px;color:var(--dim);line-height:1.45;margin-top:3px}
.feat .ic-tile{width:44px;height:44px}
.feat .ic-tile .i{width:22px;height:22px}
.feat:not([aria-selected="true"]) span{display:none}
.stage{position:sticky;top:calc(var(--nav) + 24px)}
.stage .browser img{aspect-ratio:16/10;object-fit:cover;object-position:top left;transition:opacity .35s var(--ease)}
.stage .cap{margin-top:14px;font-size:14px;color:var(--mute)}
@media (max-width:900px){
  .inst{grid-template-columns:1fr}
  .stage{position:relative;top:0;order:-1}
  .feat-list{grid-auto-flow:column;grid-auto-columns:minmax(230px,78%);overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:6px;scrollbar-width:none}
  .feat-list::-webkit-scrollbar{display:none}
  .feat{scroll-snap-align:start;background:var(--paper)}
  .feat:not([aria-selected="true"]) span{display:block}
}

/* ── тёмный блок: тревога ── */
.alarm{position:relative;overflow:hidden}
.alarm::before{content:'';position:absolute;inset:0;background:radial-gradient(50% 60% at 85% 10%,rgba(105,188,70,.2),transparent 70%);pointer-events:none}
.alarm .wrap{position:relative}
.alarm-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,5vw,72px);align-items:center;margin-top:8px}
.tl{list-style:none;margin:0;padding:0;display:grid;gap:0}
.tl li{display:grid;grid-template-columns:68px 1fr;gap:18px;padding:18px 0;border-top:1px solid rgba(255,255,255,.09)}
.tl li:first-child{border-top:0}
.tl time{font-size:15px;color:var(--green-br);font-variant-numeric:tabular-nums;font-weight:600;padding-top:2px}
.tl b{display:block;font-size:19px;letter-spacing:-.015em;font-weight:600}
.tl span{display:block;font-size:15.5px;color:var(--on-night-dim);margin-top:4px;line-height:1.45}
.chat{display:grid;gap:10px;max-width:420px;margin-left:auto}
.msg{border-radius:18px 18px 18px 6px;background:var(--night-2);box-shadow:inset 0 0 0 1px rgba(255,255,255,.07);padding:14px 16px}
.msg small{display:block;font-size:12px;color:var(--on-night-dim)}
.msg b{display:block;margin-top:6px;font-size:16px}
.msg p{font-size:14.5px;color:var(--on-night-dim);margin-top:2px;line-height:1.45}
.msg .tg-btn{background:rgba(42,171,238,.14);color:#7CC8F2}
.msg.ok{background:rgba(105,188,70,.12);box-shadow:inset 0 0 0 1px rgba(105,188,70,.25)}
@media (max-width:900px){.alarm-grid{grid-template-columns:1fr}.chat{margin:0}}

/* ── клиент: лента телефонов ── */
.reel{display:grid;grid-auto-flow:column;grid-auto-columns:250px;gap:24px;overflow-x:auto;scroll-snap-type:x mandatory;padding:44px var(--gut) 24px;margin:0 calc(var(--gut) * -1);scrollbar-width:thin}
.reel figure{margin:0;scroll-snap-align:start}
.reel .phone{width:100%}
.reel figcaption{margin-top:16px}
.reel figcaption b{display:block;font-size:17px;letter-spacing:-.015em}
.reel figcaption span{display:block;font-size:14.5px;color:var(--dim);margin-top:4px;line-height:1.45}
@media (min-width:1240px){.reel{margin:0;padding-left:0;padding-right:0}}

/* ── планшет + дизайнеру ── */
.des{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(32px,5vw,64px);align-items:center;margin-top:48px}
.tablet{border-radius:30px;padding:14px;background:#101311;box-shadow:0 50px 80px -50px rgba(10,30,10,.6)}
.tablet img{border-radius:18px;width:100%}
.des-list{display:grid;gap:22px}
.des-list>div{display:grid;grid-template-columns:44px 1fr;gap:16px}
.des-list b{display:block;font-size:19px;letter-spacing:-.015em}
.des-list span{display:block;font-size:15.5px;color:var(--dim);margin-top:4px;line-height:1.5}
@media (max-width:900px){.des{grid-template-columns:1fr}}

/* ── сравнение ── */
.cmp{margin-top:44px;border-radius:var(--r);background:#fff;overflow:hidden;box-shadow:var(--sh-card)}
.cmp-row{display:grid;grid-template-columns:1.1fr 1fr 1fr 1.15fr;border-top:1px solid #EDEDF0}
.cmp-row:first-child{border-top:0}
.cmp-row>div{padding:16px 20px;font-size:15.5px;line-height:1.4}
.cmp-row>div:first-child{font-weight:600}
.cmp-row>div:last-child{background:#F4FAF0;color:var(--green-text);font-weight:600}
.cmp-row.h>div{font-size:13px;font-weight:600;color:var(--dim);background:var(--paper)}
.cmp-row.h>div:last-child{background:var(--green-soft);color:var(--green-text)}
.cmp-row>div small{display:block;font-weight:400;color:var(--mute);font-size:12.5px}
@media (max-width:760px){
  .cmp-row{grid-template-columns:1fr 1fr}
  .cmp-row>div:first-child{grid-column:1/-1;padding-bottom:4px;background:#fff}
  .cmp-row.h>div:first-child{display:none}
  .cmp-row>div:nth-child(3){display:none}
  .cmp-row>div:nth-child(2),.cmp-row>div:last-child{padding-top:6px}
}

/* ── шаги ── */
.how{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin-top:44px;counter-reset:s}
.how div{counter-increment:s;border-radius:var(--r);background:var(--paper);padding:26px}
.how div::before{content:counter(s);display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:var(--ink);color:#fff;font-weight:600;margin-bottom:18px}
.how b{display:block;font-size:19px;letter-spacing:-.015em}
.how span{display:block;margin-top:6px;font-size:15px;color:var(--dim);line-height:1.5}
@media (max-width:900px){.how{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.how{grid-template-columns:1fr}}

/* ── вопросы ── */
.faq{margin-top:40px;display:grid;gap:10px;max-width:880px}
.faq details{border-radius:var(--r-m);background:#fff;box-shadow:inset 0 0 0 1px #E6E6EA}
.faq summary{list-style:none;cursor:pointer;padding:20px 56px 20px 22px;font-size:18px;font-weight:600;letter-spacing:-.015em;position:relative}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:'';position:absolute;right:22px;top:50%;width:12px;height:12px;border-right:2px solid var(--dim);border-bottom:2px solid var(--dim);translate:0 -70%;rotate:45deg;transition:rotate .3s var(--ease)}
.faq details[open] summary::after{rotate:-135deg;translate:0 -20%}
.faq details p{padding:0 22px 22px;font-size:16px;color:var(--dim);line-height:1.55;max-width:70ch}

/* ── финал ── */
.final{position:relative;overflow:hidden;text-align:center}
.final::before{content:'';position:absolute;inset:0;background:radial-gradient(50% 70% at 50% 0%,rgba(105,188,70,.22),transparent 70%)}
.final .wrap{position:relative}
.final .h2{font-size:clamp(34px,5vw,64px);max-width:16ch;margin:0 auto}
.final .lead{margin:20px auto 0}
.final .hero-cta{justify-content:center}
.contacts{display:grid;grid-template-columns:.8fr 1.35fr .8fr 1.3fr;gap:12px;margin-top:56px;text-align:left}
.contacts a,.contacts div{border-radius:var(--r-m);background:var(--night-2);box-shadow:inset 0 0 0 1px rgba(255,255,255,.07);padding:18px 20px}
.contacts small{display:block;font-size:13px;color:var(--on-night-dim)}
.contacts b{display:block;margin-top:4px;font-size:16px;font-weight:550;overflow-wrap:anywhere}
@media (max-width:900px){.contacts{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.contacts{grid-template-columns:1fr}}

.foot{padding:36px 0 44px;background:var(--night);color:var(--on-night-dim);font-size:13.5px;border-top:1px solid rgba(255,255,255,.07)}
.foot .wrap{display:flex;flex-wrap:wrap;gap:10px 28px;align-items:center}
.foot .sb{color:#fff}
.foot .mk{margin-left:auto}
@media (max-width:640px){.foot .mk{margin-left:0}}

/* метка «макет» — снять перед выкладкой */
.mock-flag{position:fixed;z-index:80;left:12px;bottom:12px;height:30px;padding:0 12px;border-radius:var(--pill);background:#FFF1D6;color:#7A5410;font-size:12.5px;font-weight:600;display:flex;align-items:center;box-shadow:0 6px 18px -8px rgba(0,0,0,.3)}