/* uz-ilova — светлая продуктовая тема: фиолетовый с мятой, мягкие тени,
   крупные нумерованные шаги и макет телефона на чистом CSS. */

:root{
  --bg:        #ffffff;
  --bg-2:      #f6f4fe;
  --surface:   #ffffff;
  --surface-2: #f2effd;
  --ink:       #17123a;
  --ink-2:     #565080;
  --ink-3:     #8b86ad;
  --line:      rgba(23,18,58,.09);
  --line-2:    rgba(23,18,58,.16);

  --violet: #7c4dff;
  --mint:   #12b98a;
  --amber:  #ff9f1c;
  --rose:   #f2557a;
  --deep:   #221a52;

  --grad:      linear-gradient(105deg, var(--violet), #b07bff 92%);
  --grad-soft: linear-gradient(105deg, rgba(124,77,255,.14), rgba(18,185,138,.14) 92%);
  --grad-mint: linear-gradient(150deg, #4fe0b4, var(--mint) 60%, #0a8f6a);

  --sans:    "Segoe UI Variable Text","Segoe UI",system-ui,-apple-system,Roboto,Arial,sans-serif;
  --display: "Segoe UI Semibold","Segoe UI",system-ui,-apple-system,sans-serif;
  --mono:    "Cascadia Mono",Consolas,ui-monospace,monospace;

  --r:   20px;
  --r-s: 13px;
  --maxw: 1120px;
  --shadow:   0 18px 44px rgba(34,26,82,.10);
  --shadow-l: 0 30px 70px rgba(34,26,82,.16);
}

*{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;}
body{margin:0; background:var(--bg); color:var(--ink); font:16px/1.68 var(--sans); overflow-x:hidden;}
img{max-width: 100%; height:auto;}
a{color:var(--violet); text-decoration:none;}
a:hover{text-decoration:underline;}
h1,h2,h3{font-family:var(--display); font-weight:600; letter-spacing:-.02em;}
.wrap{max-width:var(--maxw); margin:0 auto; padding:0 24px;}

/* ---------- кнопки ---------- */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:9px;
  padding:14px 28px; border-radius:var(--r-s); font:650 15.5px/1 var(--sans);
  transition:transform .18s ease, box-shadow .18s ease, background .18s ease; white-space:nowrap;}
.btn:hover{text-decoration:none;}
.btn-main{background:var(--grad); color:#fff; box-shadow:0 14px 30px rgba(124,77,255,.32);}
.btn-main:hover{transform:translateY(-2px); box-shadow:0 20px 42px rgba(124,77,255,.44);}
.btn-mint{background:var(--grad-mint); color:#04231a; box-shadow:0 14px 30px rgba(18,185,138,.28);}
.btn-mint:hover{transform:translateY(-2px); box-shadow:0 20px 42px rgba(18,185,138,.4);}
.btn-ghost{background:var(--surface); color:var(--ink); box-shadow:inset 0 0 0 1px var(--line-2), var(--shadow);}
.btn-ghost:hover{transform:translateY(-2px); box-shadow:inset 0 0 0 1px var(--violet), var(--shadow);}
.btn-sm{padding:9px 18px; font-size:14px;}
.btn-lg{padding:16px 32px; font-size:17px;}

/* ---------- шапка ---------- */
.topbar{position:sticky; top:0; z-index:40; background:rgba(255,255,255,.94); box-shadow:0 1px 0 var(--line);}
.topbar-in{display:flex; align-items:center; gap:22px; min-height:66px; flex-wrap:wrap;}
.brand{display:inline-flex; align-items:center; gap:10px; color:var(--ink); font:600 17px/1 var(--display);}
.mark{display:inline-flex;}
.topnav{display:flex; gap:20px; overflow-x:auto; flex:1 1 auto;}
.topnav a{color:var(--ink-2); white-space:nowrap; font-size:15px; padding:8px 0;}
.topnav a:hover{color:var(--ink); text-decoration:none;}
.topnav a.here{color:var(--violet); font-weight:650;}
.topact{display:flex; align-items:center; gap:12px;}
.langs{display:flex; gap:5px;}
.langs a{color:var(--ink-2); padding:5px 11px; border-radius:999px; font-size:13px; box-shadow:inset 0 0 0 1px var(--line);}
.langs a:hover{color:var(--ink); text-decoration:none;}
.langs a.on{color:#fff; background:var(--grad); box-shadow:none; font-weight:650;}

/* ---------- герой ---------- */
.hero{position:relative; padding:56px 0 44px; background:linear-gradient(180deg,var(--bg-2),var(--bg)); overflow:hidden;}
.hero.slim{padding:42px 0 26px;}
.hero::before{content:""; position:absolute; inset:-50% 45% 25% -20%; pointer-events:none;
  background:radial-gradient(closest-side, rgba(124,77,255,.16), transparent 72%);}
.hero > *{position:relative;}
.hero-grid{display:grid; grid-template-columns:minmax(0,1.25fr) minmax(0,.85fr); gap:44px; align-items:center;}
.tag{display:inline-block; padding:5px 13px; border-radius:999px; background:var(--grad); color:#fff;
  font:700 11.5px/1.6 var(--display); letter-spacing:.09em; text-transform:uppercase; margin-bottom:16px;}
.hero h1{margin:0 0 16px; font-size:clamp(30px,4.3vw,50px); line-height:1.1;}
.lede{margin:0; color:var(--ink-2); font-size:clamp(16px,1.4vw,18.5px); max-width:60ch;}
.hero-cta{display:flex; gap:12px; flex-wrap:wrap; margin:26px 0 0;}

.byline{display:flex; align-items:center; gap:13px; flex-wrap:wrap; margin:26px 0 0;}
.ava{width:44px; height:44px; border-radius:50%; display:grid; place-items:center;
  background:var(--grad); color:#fff; font:700 15px/1 var(--display);}
.by-tx, .by-dates{display:flex; flex-direction:column; line-height:1.4;}
.by-tx b{font-size:15px;}
.by-tx small, .by-dates small{color:var(--ink-3); font-size:12.5px;}
.checked{color:var(--mint); font-size:12.5px; padding:5px 13px; border-radius:999px;
  box-shadow:inset 0 0 0 1px rgba(18,185,138,.4); background:rgba(18,185,138,.09);}

/* макет телефона на чистом CSS */
.hero-art{display:flex; justify-content:center;}
.phone{width:250px; height:492px; border-radius:38px; background:var(--deep); padding:14px;
  box-shadow:var(--shadow-l);}
.phone-bar{display:block; width:70px; height:6px; border-radius:99px; background:rgba(255,255,255,.22); margin:3px auto 12px;}
.phone-screen{display:flex; flex-direction:column; gap:13px; height:448px; border-radius:27px;
  background:var(--bg); padding:22px 20px;}
.ph-logo{font:700 21px/1 var(--display); color:var(--violet);}
.ph-row{display:block; height:15px; border-radius:8px; background:var(--surface-2);}
.ph-row.short{width:62%;}
.ph-btn{display:block; height:46px; border-radius:14px; background:var(--grad);}

.kpi{list-style:none; margin:34px 0 0; padding:0; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px;}
.kpi li{background:var(--surface); border-radius:var(--r-s); padding:16px 18px; box-shadow:inset 0 0 0 1px var(--line), var(--shadow);}
.kpi b{display:block; font:700 19px/1.25 var(--mono); color:var(--violet); margin-bottom:4px;}
.kpi span{color:var(--ink-3); font-size:12.5px;}

/* ---------- бегущая строка ---------- */
.tickerbox{position:relative; overflow:hidden; background:var(--deep); padding:13px 0;}
.tickerbox::before, .tickerbox::after{content:""; position:absolute; top:0; bottom:0; width:70px; z-index:2; pointer-events:none;}
.tickerbox::before{left:0; background:linear-gradient(90deg, var(--deep), transparent);}
.tickerbox::after{right:0; background:linear-gradient(270deg, var(--deep), transparent);}
.ticker-row{display:flex; gap:34px; width:max-content; padding-inline:24px; animation:slide 34s linear infinite;}
.ticker-row span{display:inline-flex; align-items:center; gap:10px; color:#cfc7f2; font-size:14px; white-space:nowrap;}
.ticker-row span::before{content:""; width:6px; height:6px; border-radius:50%; background:var(--mint);}
@keyframes slide{from{transform:translateX(0);} to{transform:translateX(-50%);}}

/* ---------- секции ---------- */
.sec{padding:54px 0;}
.sec.alt{background:var(--bg-2);}
.sec-head{margin-bottom:26px;}
.sec-head h2{margin:0; font-size:clamp(24px,3vw,34px); line-height:1.22;}
.sec-head .sub{margin:10px 0 0; color:var(--ink-2); font-size:15.5px; max-width:72ch;}
.sec p{margin:0 0 14px;}
.sec p:last-of-type{margin-bottom:0;}
.copy{max-width:74ch;}

/* ---------- нумерованные карточки-шаги ---------- */
.stepcards{list-style:none; counter-reset:s; margin:22px 0 0; padding:0; display:grid; gap:14px;}
.stepcards li{counter-increment:s; position:relative; background:var(--surface); border-radius:var(--r);
  padding:22px 26px 22px 78px; box-shadow:inset 0 0 0 1px var(--line), var(--shadow);
  transition:transform .2s ease, box-shadow .2s ease;}
.stepcards li:hover{transform:translateY(-2px); box-shadow:inset 0 0 0 1px var(--line-2), var(--shadow-l);}
.stepcards li::before{content:counter(s); position:absolute; left:22px; top:21px; width:38px; height:38px;
  border-radius:13px; display:grid; place-items:center; background:var(--grad); color:#fff;
  font:700 16px/1 var(--mono); box-shadow:0 8px 18px rgba(124,77,255,.3);}
.st-h{display:block; font:600 17.5px/1.4 var(--display); margin-bottom:5px;}
.st-tx{display:block; color:var(--ink-2); font-size:15px;}

/* ---------- чек-листы ---------- */
.checks{list-style:none; margin:22px 0 0; padding:0; display:grid; gap:11px;}
.checks li{display:flex; gap:13px; align-items:flex-start; background:var(--surface);
  border-radius:var(--r-s); padding:14px 18px; box-shadow:inset 0 0 0 1px var(--line);}
.tick{flex:none; width:24px; height:24px; border-radius:50%; background:var(--grad-mint); color:#04231a;
  font:700 13px/1 var(--sans); display:grid; place-items:center;}
.ck-tx{color:var(--ink-2); font-size:15px;}

/* ---------- таблицы ---------- */
.tscroll{overflow-x:auto; margin:22px 0 0; border-radius:var(--r); background:var(--surface);
  box-shadow:inset 0 0 0 1px var(--line), var(--shadow);}
table{border-collapse:collapse; width:100%; min-width:540px; font-size:15px;}
th, td{padding:13px 18px; text-align:left; vertical-align:top; box-shadow:inset 0 -1px 0 var(--line);}
th{background:var(--surface-2); color:var(--violet); font:600 13.5px/1.5 var(--display); letter-spacing:.02em;}
td{color:var(--ink-2);}
td:first-child{color:var(--ink);}
tbody tr:last-child td{box-shadow:none;}

/* ---------- оценка чипами ---------- */
.total{display:flex; align-items:baseline; gap:12px; margin:22px 0 4px;}
.total b{font:700 52px/1 var(--display); color:#fff; background:var(--grad); padding:16px 24px;
  border-radius:var(--r); box-shadow:0 18px 40px rgba(124,77,255,.3);}
.total small{color:var(--ink-3); font-size:16px;}
.chips{list-style:none; margin:22px 0 0; padding:0; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px;}
.chips li{background:var(--surface); border-radius:var(--r); padding:18px 22px;
  box-shadow:inset 0 0 0 1px var(--line), var(--shadow);}
.chips b{font:700 22px/1 var(--mono); color:var(--mint);}
.ch-h{display:block; font:600 16px/1.4 var(--display); margin:6px 0 6px;}
.chips small{display:block; color:var(--ink-2); font-size:14.5px; line-height:1.55;}

/* ---------- FAQ ---------- */
.faq{margin:22px 0 0; display:grid; gap:10px;}
details{background:var(--surface); border-radius:var(--r-s); box-shadow:inset 0 0 0 1px var(--line);}
details[open]{box-shadow:inset 0 0 0 1px var(--violet), var(--shadow);}
summary{padding:16px 20px; cursor:pointer; font:600 16px/1.45 var(--display); color:var(--ink);}
summary::marker{color:var(--violet);}
details p{margin:0; padding:0 20px 17px; color:var(--ink-2); font-size:15px;}

/* ---------- калькулятор ---------- */
.calc{margin:22px 0 0; background:var(--surface); border-radius:var(--r); padding:24px 26px;
  box-shadow:inset 0 0 0 2px var(--violet), var(--shadow);
  display:grid; grid-template-columns:1fr 1fr; gap:12px 20px; align-items:center;}
.calc label{color:var(--ink-2); font-size:13.5px;}
.calc input{width:100%; padding:12px 14px; border-radius:var(--r-s); border:none; color:var(--ink);
  background:var(--bg-2); font:15px/1.3 var(--mono); box-shadow:inset 0 0 0 1px var(--line-2);}
.calc input:focus{outline:none; box-shadow:inset 0 0 0 2px var(--violet);}
.calc button{grid-column:1 / -1; padding:14px 22px; border-radius:var(--r-s); border:none; cursor:pointer;
  background:var(--grad); color:#fff; font:700 15.5px/1 var(--sans); box-shadow:0 14px 30px rgba(124,77,255,.3);}
.calc button:hover{transform:translateY(-2px);}
.calc-out{grid-column:1 / -1; margin:0; padding:15px 18px; border-radius:var(--r-s); background:var(--bg-2);
  color:var(--mint); font:650 15.5px/1.5 var(--mono); box-shadow:inset 0 0 0 1px var(--line);}

/* ---------- призыв к действию ---------- */
.cta{margin:30px 0 0; padding:22px 26px; border-radius:var(--r); background:var(--surface-2);
  box-shadow:inset 0 0 0 1px rgba(124,77,255,.24);
  display:flex; align-items:center; gap:18px; flex-wrap:wrap;}
.cta-note{color:var(--ink-3); font-size:13px;}

/* ---------- карточки на 404 ---------- */
.cards{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; margin:22px 0 0;}
.card{background:var(--surface); border-radius:var(--r); padding:24px;
  box-shadow:inset 0 0 0 1px var(--line), var(--shadow); transition:transform .2s ease;}
.card:hover{transform:translateY(-2px);}
.card h3{margin:0; font-size:17px;}
.ic{width:42px; height:42px; border-radius:13px; display:grid; place-items:center;
  background:var(--grad-soft); color:var(--violet); margin-bottom:14px;}

/* ---------- подвал ---------- */
.foot{padding:46px 0 42px; background:var(--deep); color:#c7c0ea;}
.foot-grid{display:grid; grid-template-columns:minmax(0,1.6fr) minmax(0,1fr) minmax(0,1fr); gap:34px;}
.foot-grid h3{margin:0 0 12px; font-size:13px; color:#8f87c2; letter-spacing:.05em; text-transform:uppercase;}
.foot-nav{display:grid; gap:9px;}
.foot-nav a{color:#d7d1f2; font-size:14.5px;}
.foot-blurb{color:#b6aede; font-size:14.5px; margin:0; max-width:64ch;}
.foot-brand{display:inline-flex; align-items:center; gap:10px; margin-bottom:14px; color:#fff; font:600 17px/1 var(--display);}
.foot-bottom{margin-top:32px; padding-top:22px; box-shadow:inset 0 1px 0 rgba(255,255,255,.12);
  display:flex; gap:18px; align-items:flex-start; flex-wrap:wrap;}
.badge18{flex:none; width:46px; height:46px; border-radius:50%; display:grid; place-items:center;
  background:rgba(242,85,122,.18); color:#ff9db3; font:700 14px/1 var(--mono);
  box-shadow:inset 0 0 0 1px rgba(242,85,122,.45);}
.foot-bottom p{margin:0 0 8px; color:#9990c8; font-size:13.5px; max-width:100ch;}

/* ---------- адаптив ---------- */
@media (max-width:1000px){
  .hero-grid{grid-template-columns:1fr; gap:34px;}
  .hero-art{order:-1;}
  .kpi{grid-template-columns:repeat(2,minmax(0,1fr));}
  .chips{grid-template-columns:1fr;}
  .cards{grid-template-columns:1fr 1fr;}
  .foot-grid{grid-template-columns:1fr 1fr;}
}
@media (max-width:640px){
  .kpi{grid-template-columns:1fr;}
  .calc{grid-template-columns:1fr;}
  .cards{grid-template-columns:1fr;}
  .foot-grid{grid-template-columns:1fr;}
  .sec{padding:38px 0;}
  .hero{padding:36px 0 30px;}
  .phone{width:210px; height:418px;}
  .phone-screen{height:376px;}
  .stepcards li{padding:18px 18px 18px 68px;}
  .total b{font-size:40px; padding:12px 18px;}
}
@media (prefers-reduced-motion: reduce){
  *{animation:none !important; transition:none !important; scroll-behavior:auto !important;}
  .ticker-row{animation:none !important;}
}