/* SmartBox — продуктовая витрина yas.kz/smartbox/.
   Тёмная страница поверх общих токенов. Правится только здесь,
   tokens.css и main.css не трогать — они общие для всех витрин. */

.page-smartbox{
  /* Акцент страницы. Одна строка — вся страница меняет цвет.
     #3B82F6 снят пипеткой с живого приложения SmartBox (слово «Smart»
     и статус «Закрыт»), поэтому сайт и приложение выглядят одним изделием.
     Контраст к фону 5,3:1. Заливку кнопок держим темнее (--sb-accent-fill),
     иначе белый текст на ней не добирает до 4,5:1. */
  --sb-accent:#3B82F6;
  --sb-accent-soft:rgba(59,130,246,.14);
  --sb-accent-fill:#2563EB;

  --sb-bg:#0B0D10;
  --sb-panel:#12151A;
  --sb-panel-2:#171B21;
  --sb-line:#232830;
  --sb-line-soft:#1B2027;
  --sb-text:#F3F5F8;
  --sb-muted:#98A1AE;

  background:var(--sb-bg);
  color:var(--sb-text);
}

.page-smartbox a{color:var(--sb-accent)}
.page-smartbox h1,.page-smartbox h2,.page-smartbox h3,.page-smartbox h4{color:var(--sb-text)}
.page-smartbox .lead,.page-smartbox .muted{color:var(--sb-muted)}
.page-smartbox .section{border-top-color:var(--sb-line-soft)}
.page-smartbox .section--surface{background:var(--sb-panel)}

.skip{position:absolute;left:-9999px}
.skip:focus{left:var(--s-4);top:var(--s-4);z-index:20;background:var(--sb-panel);color:var(--sb-text);padding:var(--s-3) var(--s-4);border-radius:var(--r-sm)}

/* ── ШАПКА ───────────────────────────────────────────────── */
.page-smartbox .site-header{
  background:rgba(11,13,16,.88);
  backdrop-filter:blur(10px);
  border-bottom-color:var(--sb-line);
}
.brand-lockup{display:flex;align-items:baseline;gap:var(--s-3);text-decoration:none;min-width:0}
.brand-lockup .brand{color:var(--sb-text)}
.brand-sub{
  font-size:var(--text-caption);letter-spacing:var(--tr-caps);text-transform:uppercase;
  color:var(--sb-accent);font-weight:var(--fw-medium);white-space:nowrap;
}
.site-nav{display:none;gap:var(--s-5);margin-left:auto;margin-right:var(--s-5)}
.site-nav a{
  color:var(--sb-muted);text-decoration:none;font-size:var(--text-sm);
  transition:color var(--dur-fast) var(--ease);white-space:nowrap;
}
.site-nav a:hover{color:var(--sb-text)}
@media (min-width:1000px){.site-nav{display:flex}}
.page-smartbox .header-cta{border-color:var(--sb-accent);color:var(--sb-accent)}
.page-smartbox .header-cta:hover{background:var(--sb-accent-soft)}

/* ── КНОПКИ ──────────────────────────────────────────────── */
.page-smartbox .btn-primary{background:var(--sb-accent-fill);color:#fff}
.page-smartbox .btn-primary:hover{background:var(--sb-accent)}
.page-smartbox .btn-ghost{color:var(--sb-text);border-color:var(--sb-line);background:transparent}
.page-smartbox .btn-ghost:hover{background:var(--sb-panel-2)}

/* ── 01. ПЕРВЫЙ ЭКРАН ────────────────────────────────────── */
.sb-hero{position:relative;overflow:hidden;padding:var(--s-9) 0 var(--section-y-tight)}
.sb-hero::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(120% 80% at 78% 22%, rgba(59,130,246,.12), transparent 62%);
}
.sb-hero-grid{position:relative;display:grid;gap:var(--s-7);align-items:center}
.sb-hero-grid>*{min-width:0}
.sb-hero h1{max-width:19ch;margin-bottom:var(--s-5)}
.sb-hero h1 .hl{color:var(--sb-accent)}
.sb-hero .lead{margin-bottom:var(--s-6);max-width:46ch}
.sb-hero-art{order:-1;border-radius:var(--r-lg);overflow:hidden;background:var(--sb-panel)}
.sb-hero-art img{width:100%}
@media (min-width:900px){
  .sb-hero{padding-top:var(--s-11)}
  .sb-hero-grid{grid-template-columns:1.02fr .98fr;gap:var(--s-9)}
  .sb-hero-art{order:0}
}

/* цена на первом экране — главный сигнал, что это продукт, а не заявка */
.sb-hero-price{
  font-family:var(--font-mono);font-variant-numeric:tabular-nums;
  font-size:clamp(1.9rem,1.1rem + 2.6vw,2.75rem);
  font-weight:var(--fw-semibold);letter-spacing:-.02em;
  color:var(--sb-text);margin:0 0 var(--s-2);
}
.sb-hero-price-cap{font-size:var(--text-sm);color:var(--sb-muted);max-width:44ch;margin:0}
.sb-hero-meta{
  font-size:var(--text-caption);color:var(--sb-muted);margin:var(--s-2) 0 0;
  letter-spacing:.01em;
}

/* строка доверия под ценой: гарантия, установка, обновления */
.sb-trust{
  list-style:none;margin:var(--s-5) 0 0;padding:0;max-width:none;
  display:grid;grid-template-columns:1fr;gap:var(--s-2);
}
.sb-trust li{
  position:relative;margin:0;padding-left:26px;
  font-size:var(--text-sm);color:var(--sb-text);line-height:var(--lh-ui);
}
.sb-trust li::before{
  content:"";position:absolute;left:2px;top:.38em;width:11px;height:6px;
  border-left:2px solid var(--sb-accent);border-bottom:2px solid var(--sb-accent);
  transform:rotate(-45deg);
}
@media (min-width:560px){.sb-trust{grid-template-columns:repeat(2,1fr);gap:var(--s-3) var(--s-5)}}

.sb-trust li b{color:var(--sb-text);font-weight:var(--fw-semibold)}

/* наличие в карточке цены */
.sb-stock{
  display:inline-flex;align-items:center;gap:var(--s-2);
  font-size:var(--text-sm);color:#4ADE80;margin:0 0 var(--s-3);
}
.sb-stock::before{content:"";width:8px;height:8px;border-radius:50%;background:#4ADE80;flex-shrink:0}


/* что в цену НЕ входит — сразу под галочками, чтобы не спорило с ними */
.sb-hero-note{
  margin:var(--s-4) 0 0;padding-left:26px;max-width:46ch;
  font-size:var(--text-sm);line-height:var(--lh-ui);color:var(--sb-muted);
  border-left:0;position:relative;
}
.sb-hero-note::before{
  content:"—";position:absolute;left:4px;top:0;color:var(--sb-muted);
}

/* ── 02. ТРИ ПРИЧИНЫ ─────────────────────────────────────── */
.sb-reasons{display:grid;gap:var(--s-6);list-style:none;margin:0;padding:0;max-width:none}
.sb-reasons li{
  margin:0;padding:var(--s-6);min-width:0;
  background:var(--sb-panel);border:var(--bw) solid var(--sb-line);border-radius:var(--r-lg);
}
.sb-reasons .ico{display:block;width:28px;height:28px;color:var(--sb-accent);margin-bottom:var(--s-4)}
.sb-reasons .ico svg{display:block;width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.sb-reasons h3{font-size:var(--text-h4);margin-bottom:var(--s-2)}
.sb-reasons p{margin:0;font-size:var(--text-sm);color:var(--sb-muted);line-height:var(--lh-lead)}
@media (min-width:820px){.sb-reasons{grid-template-columns:repeat(3,1fr);gap:var(--gutter)}}

/* ── ДВУХКОЛОНОЧНЫЕ РАЗДЕЛЫ ──────────────────────────────── */
.sb-split{display:grid;gap:var(--s-7);align-items:center}
.sb-split>*{min-width:0}
.sb-split figure{margin:0;border-radius:var(--r-lg);overflow:hidden;background:var(--sb-panel)}
.sb-split figure img{width:100%;max-height:560px;object-fit:cover;object-position:center}
.sb-split figcaption{padding:var(--s-3) var(--s-4);font-size:var(--text-caption);color:var(--sb-muted);border-top:var(--bw) solid var(--sb-line-soft)}
@media (min-width:900px){
  .sb-split{grid-template-columns:1fr 1fr;gap:var(--s-9)}
  .sb-split--art-first figure{order:-1}
}

/* галочки списка */
.sb-check{list-style:none;margin:0 0 var(--s-6);padding:0;max-width:none}
.sb-check li{position:relative;padding-left:30px;margin-bottom:var(--s-3);font-size:var(--text-sm);line-height:var(--lh-lead)}
.sb-check li::before{
  content:"";position:absolute;left:4px;top:.45em;width:12px;height:7px;
  border-left:2px solid var(--sb-accent);border-bottom:2px solid var(--sb-accent);
  transform:rotate(-45deg);
}

/* ── 03. ЛЕСЕНКА «В ДОМЕ ВСЁ УМНОЕ» ──────────────────────── */
.sb-ladder{list-style:none;margin:0;padding:0;max-width:none}
.sb-ladder li{
  display:flex;align-items:baseline;gap:var(--s-3);margin:0;
  padding:var(--s-4) 0;border-bottom:var(--bw) solid var(--sb-line);
  font-size:var(--text-lead);color:var(--sb-muted);
}
.sb-ladder li b{color:var(--sb-text);font-weight:var(--fw-semibold);min-width:6.5em}
.sb-ladder li.last{border-bottom:0;color:var(--sb-accent)}
.sb-ladder li.last b{color:var(--sb-accent)}

/* ── 04. ПЯТЬ СЛОЁВ ──────────────────────────────────────── */
.sb-layers{list-style:none;margin:var(--s-8) 0 0;padding:0;max-width:none;display:grid;gap:0}
.sb-layers li{
  display:grid;grid-template-columns:auto 1fr;gap:var(--s-5);align-items:start;
  margin:0;padding:var(--s-6) 0;border-top:var(--bw) solid var(--sb-line);
}
.sb-layers li:last-child{border-bottom:var(--bw) solid var(--sb-line)}
.sb-layers .n{
  font-family:var(--font-mono);font-size:var(--text-sm);color:var(--sb-accent);
  padding-top:.35em;
}
.sb-layers h3{font-size:var(--text-h4);margin-bottom:var(--s-2)}
.sb-layers p{margin:0 0 var(--s-3);font-size:var(--text-sm);color:var(--sb-muted);line-height:var(--lh-lead)}
.sb-layers .gives{
  margin:0;color:var(--sb-accent);font-size:var(--text-sm);font-weight:var(--fw-medium);
}
.sb-layers .gives::before{content:"→ "}
@media (min-width:900px){
  .sb-layers li{grid-template-columns:auto 1fr;gap:var(--s-7)}
  .sb-layers li>div{display:grid;grid-template-columns:1fr auto;gap:var(--s-6);align-items:baseline}
  .sb-layers li>div h3{grid-column:1;margin-bottom:var(--s-2)}
  .sb-layers li>div p:not(.gives){grid-column:1;margin:0}
  .sb-layers .gives{grid-column:2;grid-row:1 / span 2;text-align:right;white-space:nowrap;padding-top:.15em}
}

/* ── 05. ТАЙМЛАЙН ДОСТАВКИ ───────────────────────────────── */
.sb-timeline{list-style:none;margin:var(--s-8) 0 0;padding:0;max-width:none;counter-reset:tl}
.sb-timeline li{
  position:relative;margin:0;padding:0 0 var(--s-7) var(--s-7);
  border-left:2px solid var(--sb-line);
}
.sb-timeline li:last-child{padding-bottom:0;border-left-color:transparent}
.sb-timeline li::before{
  content:"";position:absolute;left:-7px;top:.35em;width:12px;height:12px;
  border-radius:50%;background:var(--sb-accent-fill);
  box-shadow:0 0 0 4px var(--sb-bg);
}
.page-smartbox .section--surface .sb-timeline li::before{box-shadow:0 0 0 4px var(--sb-panel)}
.sb-timeline .t{
  display:block;font-family:var(--font-mono);font-variant-numeric:tabular-nums;
  font-size:var(--text-sm);color:var(--sb-accent);margin-bottom:var(--s-2);
}
.sb-timeline h3{font-size:var(--text-h4);margin-bottom:var(--s-2)}
.sb-timeline p{margin:0;font-size:var(--text-sm);color:var(--sb-muted);line-height:var(--lh-lead);max-width:60ch}
@media (min-width:900px){
  .sb-timeline li{padding-left:var(--s-8)}
}

/* ── ТЕЛЕФОН: РАМКА ПОД ЖИВОЙ СКРИНШОТ ───────────────────── */
.sb-phones{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--s-4);align-items:start}
.sb-phone{
  border:var(--bw) solid var(--sb-line);border-radius:22px;background:var(--sb-panel-2);
  padding:8px;overflow:hidden;min-width:0;
}
.sb-phone img{display:block;width:100%;border-radius:15px}

/* ── 07. ЧТО ПОМЕЩАЕТСЯ ──────────────────────────────────── */
.sb-fits{display:grid;grid-template-columns:1fr;gap:0;list-style:none;margin:0;padding:0;max-width:none}
.sb-fits li{
  display:flex;align-items:center;gap:var(--s-4);margin:0;
  padding:var(--s-4) 0;border-bottom:var(--bw) solid var(--sb-line);
  font-size:var(--text-body);
}
.sb-fits li:last-child{border-bottom:0}
.sb-fits li span{font-size:1.5rem;line-height:1;width:1.6em;text-align:center;flex-shrink:0}
@media (min-width:560px){.sb-fits{grid-template-columns:repeat(2,1fr);column-gap:var(--s-6)}}
@media (min-width:900px){.sb-fits{grid-template-columns:1fr}}

/* ── 09. ЦЕНА ────────────────────────────────────────────── */
.sb-price-card{
  display:grid;gap:var(--s-7);
  background:var(--sb-panel-2);border:var(--bw) solid var(--sb-line);
  border-radius:var(--r-lg);padding:var(--s-6);
}
.sb-price-card>*{min-width:0}
.sb-price-card h3{font-size:var(--text-h4);margin-bottom:var(--s-4)}
.sb-price-card .sb-check{margin-bottom:0}
.sb-price-big{
  font-family:var(--font-mono);font-variant-numeric:tabular-nums;
  font-size:clamp(2rem,1.2rem + 3vw,3rem);font-weight:var(--fw-semibold);
  letter-spacing:-.02em;color:var(--sb-accent);margin:0 0 var(--s-3);
}
@media (min-width:820px){
  .sb-price-card{grid-template-columns:1fr 1fr;gap:var(--s-9);padding:var(--s-8)}
}

/* заметка про то, что в цену НЕ входит — её нельзя пропустить взглядом */
.sb-note{
  border-left:3px solid var(--sb-accent);
  background:var(--sb-accent-soft);
  padding:var(--s-4) var(--s-5);
  border-radius:0 var(--r-sm) var(--r-sm) 0;
  font-size:var(--text-sm);line-height:var(--lh-lead);
  color:var(--sb-text);margin:0 0 var(--s-5);max-width:none;
}
.sb-note b{color:var(--sb-accent);font-weight:var(--fw-semibold)}

/* ── ТАБЛИЦА ─────────────────────────────────────────────── */
.page-smartbox th,.page-smartbox td{border-bottom-color:var(--sb-line-soft)}
.page-smartbox th,.page-smartbox th[scope="row"]{color:var(--sb-muted)}

/* ── 11. ВОПРОСЫ ─────────────────────────────────────────── */
.sb-faq{margin-top:var(--s-7);border-top:var(--bw) solid var(--sb-line)}
.sb-faq details{border-bottom:var(--bw) solid var(--sb-line)}
.sb-faq summary{
  list-style:none;cursor:pointer;padding:var(--s-5) var(--s-7) var(--s-5) 0;
  position:relative;font-size:var(--text-lead);font-weight:var(--fw-medium);
  color:var(--sb-text);
}
.sb-faq summary::-webkit-details-marker{display:none}
.sb-faq summary::after{
  content:"";position:absolute;right:var(--s-2);top:50%;
  width:10px;height:10px;margin-top:-6px;
  border-right:2px solid var(--sb-accent);border-bottom:2px solid var(--sb-accent);
  transform:rotate(45deg);transition:transform var(--dur) var(--ease);
}
.sb-faq details[open] summary::after{transform:rotate(-135deg);margin-top:-2px}
.sb-faq summary:hover{color:var(--sb-accent)}
.sb-faq p{
  margin:0 0 var(--s-4);padding-right:var(--s-7);
  font-size:var(--text-body);color:var(--sb-muted);line-height:var(--lh-lead);
}
.sb-faq details[open] p:last-of-type{margin-bottom:var(--s-6)}

/* ── 12. ПРИЗЫВ ──────────────────────────────────────────── */
.sb-cta{text-align:center}
.sb-cta h2{max-width:22ch;margin-left:auto;margin-right:auto}
.sb-cta .lead{margin-left:auto;margin-right:auto}
.sb-cta .btn-row{justify-content:center}

/* ── ПОДВАЛ ──────────────────────────────────────────────── */
.page-smartbox .site-footer{border-top-color:var(--sb-line);color:var(--sb-muted)}
.page-smartbox .site-footer a{color:var(--sb-accent)}
.sb-footer-grid{display:grid;gap:var(--s-6)}
@media (min-width:760px){.sb-footer-grid{grid-template-columns:1.4fr 1fr 1fr}}
.sb-footer-grid h3{font-size:var(--text-sm);color:var(--sb-text);margin-bottom:var(--s-3)}
.sb-footer-grid ul{list-style:none;margin:0;padding:0}
.sb-footer-grid li{margin-bottom:var(--s-2);font-size:var(--text-sm)}