/* ============================================================
   EV Manager — Landing (тёмная «электрик»-тема, в стиле приложения)
   ============================================================ */
:root{
  --bg0:#05070d; --bg1:#0a0f1c; --panel:#0d1322;
  --card-grad:linear-gradient(160deg, rgba(24,33,54,0.92), rgba(11,16,31,0.96));
  --line:rgba(148,163,184,0.14); --line-strong:rgba(148,163,184,0.24);
  --txt:#e8eefc; --muted:#8b9bb8;
  --cyan:#22d3ee; --ice:#7dd3fc; --teal:#2dd4bf; --green:#34d399;
  --violet:#8b5cf6; --red:#f87171; --amber:#fbbf24;
  --radius:18px;
  --shadow:0 10px 34px rgba(0,0,0,0.42);
}
*{box-sizing:border-box; margin:0; padding:0}
html{scroll-behavior:smooth}
body{
  font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  background:
    radial-gradient(1100px 500px at 85% -10%, rgba(34,211,238,0.08), transparent 60%),
    radial-gradient(900px 480px at -10% 110%, rgba(139,92,246,0.07), transparent 60%),
    radial-gradient(700px 340px at 50% 115%, rgba(52,211,153,0.05), transparent 60%),
    var(--bg0);
  color:var(--txt); line-height:1.55; -webkit-font-smoothing:antialiased;
}
.container{max-width:1120px; margin:0 auto; padding:0 22px}
.narrow{max-width:820px}
.center{text-align:center}

a{color:var(--cyan); text-decoration:none}
a:hover{color:var(--ice)}
h1,h2,h3,h4{letter-spacing:-0.3px; line-height:1.15; color:var(--txt)}

/* ---------- Кнопки ---------- */
.btn{
  display:inline-block; padding:12px 22px; border-radius:14px; font-weight:600;
  font-size:1rem; transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
  cursor:pointer; border:1px solid transparent; white-space:nowrap;
}
.btn:hover{transform:translateY(-1px)}
.btn-primary{
  background:linear-gradient(135deg, var(--cyan), #3b82f6);
  color:#04121c; box-shadow:0 6px 22px rgba(34,211,238,0.28);
}
.btn-primary:hover{box-shadow:0 8px 28px rgba(34,211,238,0.4)}
.btn-outline{border-color:var(--line-strong); color:var(--txt); background:rgba(148,163,184,0.05)}
.btn-outline:hover{border-color:rgba(34,211,238,0.45)}
.btn-ghost{color:var(--muted); background:transparent}
.btn-ghost:hover{color:var(--txt); background:rgba(148,163,184,0.08)}
.btn-lg{padding:16px 30px; font-size:1.08rem; border-radius:16px}

/* ---------- Шапка ---------- */
.nav{position:sticky; top:0; z-index:50; backdrop-filter:blur(14px);
  background:rgba(5,7,13,0.72); border-bottom:1px solid var(--line)}
.nav-inner{display:flex; align-items:center; justify-content:space-between; padding-top:14px; padding-bottom:14px}
.brand{font-size:1.25rem; font-weight:800; color:var(--txt); display:flex; align-items:center; gap:8px}
.brand-ico{font-size:1.3rem}
.nav-actions{display:flex; gap:10px; align-items:center}

/* ---------- Hero ---------- */
.hero{padding:76px 0 64px; position:relative}
.hero-grid{display:grid; grid-template-columns:1.35fr 1fr; gap:44px; align-items:center}
.badge{display:inline-block; padding:6px 14px; border-radius:999px; font-size:.82rem; font-weight:600;
  color:var(--cyan); border:1px solid rgba(34,211,238,0.35); background:rgba(34,211,238,0.08); margin-bottom:20px}
h1{font-size:3rem; font-weight:800; margin-bottom:18px; letter-spacing:-1px;
  background:linear-gradient(120deg, #fff, var(--ice) 45%, var(--cyan));
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent}
.lead{font-size:1.12rem; color:var(--muted); margin-bottom:30px; max-width:560px}
.lead strong{color:var(--txt); font-weight:600}
.hero-cta{display:flex; gap:14px; flex-wrap:wrap; margin-bottom:16px}
.micro{font-size:.8rem; color:var(--muted); opacity:.85}
.micro.center{text-align:center; margin-top:10px}

.hero-proof{display:grid; grid-template-columns:1fr 1fr; gap:16px}
.proof-card{position:relative; overflow:hidden; background:var(--card-grad); border:1px solid var(--line);
  border-radius:var(--radius); padding:22px; box-shadow:var(--shadow); backdrop-filter:blur(10px)}
.proof-card::before{content:""; position:absolute; top:0; left:14%; right:14%; height:1px;
  background:linear-gradient(90deg, transparent, rgba(34,211,238,0.6), transparent)}
.proof-num{display:block; font-size:2.1rem; font-weight:800; margin-bottom:6px;
  background:linear-gradient(115deg, var(--ice) 10%, var(--cyan) 60%, var(--teal));
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent}
.proof-label{font-size:.86rem; color:var(--muted)}
.p1{grid-row:span 2; display:flex; flex-direction:column; justify-content:center; min-height:150px}
.p1 .proof-num{font-size:4.2rem}
.p2 .proof-num{color:var(--amber); -webkit-text-fill-color:var(--amber); background:none}
.p3 .proof-num{font-size:2.6rem}

/* ---------- Секции ---------- */
.calc{padding:56px 0 30px}
.features{padding:64px 0; border-top:1px solid var(--line); background:rgba(10,15,28,0.4)}
.honesty{padding:56px 0; border-top:1px solid var(--line)}
.cta{padding:72px 0 80px; border-top:1px solid var(--line);
  background:
    radial-gradient(700px 300px at 50% 0%, rgba(34,211,238,0.1), transparent 70%),
    rgba(10,15,28,0.35)}
.footer{border-top:1px solid var(--line); padding:28px 0; color:var(--muted)}
.section-title{font-size:2.1rem; font-weight:800; text-align:center; margin-bottom:10px;
  background:linear-gradient(120deg, var(--ice), var(--cyan) 50%, var(--teal));
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent}
.section-sub{text-align:center; color:var(--muted); margin-bottom:34px}

/* ---------- Калькулятор: карточки ---------- */
.calc-grid{display:grid; grid-template-columns:1fr 1fr; gap:20px; margin-bottom:20px}
.car-card{background:var(--card-grad); border:1px solid var(--line); border-radius:var(--radius);
  padding:22px 24px; box-shadow:var(--shadow); backdrop-filter:blur(10px)}
.car-card-head{display:flex; align-items:center; gap:10px; margin-bottom:18px}
.car-ico{font-size:1.5rem}
.car-card-head h3{font-size:1.2rem}
.car-card-head.ev h3{color:var(--green)}
.car-card-head.ice h3{color:var(--amber)}
.field{display:block; margin-bottom:14px}
.field.grow{flex:1}
.field-label{display:block; font-size:.82rem; color:var(--muted); margin-bottom:6px; font-weight:600}
.hint{display:block; font-size:.74rem; color:var(--muted); opacity:.8; margin-top:4px}
input[type=number], select{
  width:100%; padding:11px 13px; border-radius:12px; font-size:1rem; color:var(--txt);
  background:rgba(10,15,28,0.85); border:1px solid var(--line-strong); font-family:inherit; outline:none;
}
input[type=number]:focus, select:focus{border-color:rgba(34,211,238,0.55); box-shadow:0 0 0 3px rgba(34,211,238,0.12)}
select{cursor:pointer}
select option{background:var(--panel); color:var(--txt)}

/* ---------- Общие условия ---------- */
.common-card{background:var(--card-grad); border:1px solid var(--line); border-radius:var(--radius);
  padding:22px 24px; box-shadow:var(--shadow); margin-bottom:26px}
.common-row{display:flex; gap:26px; flex-wrap:wrap; align-items:flex-end}
.charging{align-items:flex-end; margin-top:8px}
.mix{width:100%}
.mix-row{display:grid; grid-template-columns:180px 1fr 56px; gap:14px; align-items:center; margin-bottom:8px}
.mix-row label{font-size:.9rem; color:var(--txt)}
.mix-val{text-align:right; font-size:.9rem; color:var(--cyan); font-weight:700}
.rates{min-width:230px}
.rate-line{display:flex; align-items:center; gap:10px; margin-bottom:8px}
.rate-line span{width:44px; color:var(--muted); font-size:.85rem}
input[type=range]{width:100%; accent-color:var(--cyan); cursor:pointer}
.range-scale{display:flex; justify-content:space-between; font-size:.72rem; color:var(--muted); margin-top:2px}

/* ---------- Результат ---------- */
.result{background:linear-gradient(160deg, rgba(20,30,52,0.95), rgba(10,15,28,0.98));
  border:1px solid var(--line-strong); border-radius:var(--radius); padding:28px 30px;
  box-shadow:var(--shadow); margin-bottom:10px}
.result-hero{display:flex; gap:36px; align-items:flex-start; flex-wrap:wrap; margin-bottom:22px}
.result-main{min-width:250px}
.result-label{font-size:.85rem; color:var(--muted); text-transform:uppercase; letter-spacing:.08em}
.result-big{font-size:2.8rem; font-weight:800; letter-spacing:-1px;
  background:linear-gradient(115deg, var(--green), var(--teal) 70%);
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent}
.result-big.neg{background:linear-gradient(115deg, var(--red), #fca5a5);
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent}
.result-sub{color:var(--muted); font-size:.95rem}
.result-metrics{display:flex; gap:26px; flex-wrap:wrap}
.metric{min-width:150px}
.metric-label{display:block; font-size:.78rem; color:var(--muted); margin-bottom:6px}
.metric-value{display:block; font-weight:700; font-size:1.08rem}
.metric-value.ev{color:var(--green)}
.metric-value.ice{color:var(--amber)}

.bars{margin:6px 0 18px; max-width:640px}
.bar-row{display:flex; align-items:center; gap:12px; margin-bottom:8px}
.bar-name{width:70px; font-size:.85rem; font-weight:600}
.bar-name.ev{color:var(--green)} .bar-name.ice{color:var(--amber)}
.bar-track{flex:1; background:rgba(148,163,184,0.1); border-radius:999px; height:18px; overflow:hidden}
.bar-fill{height:100%; border-radius:999px; transition:width .4s ease}
.bar-fill.ev{background:linear-gradient(90deg, var(--green), var(--teal))}
.bar-fill.ice{background:linear-gradient(90deg, var(--amber), #f59e0b)}
.bar-val{width:120px; text-align:right; font-size:.88rem; color:var(--muted); font-variant-numeric:tabular-nums}
.bar-caption{font-size:.74rem; color:var(--muted); margin-top:2px}

.result-payback{border-top:1px solid var(--line); padding-top:16px}
.pb-title{font-size:.8rem; text-transform:uppercase; letter-spacing:.08em; color:var(--muted); margin-bottom:6px}
.pb-note{font-size:1.12rem; font-weight:700; margin-bottom:4px}
.pb-note.good{color:var(--green)}
.pb-note.warn{color:var(--amber)}
.pb-note.bad{color:var(--red)}
.pb-note.neutral{color:var(--ice)}
.pb-detail{color:var(--muted); font-size:.92rem; max-width:760px}

/* ---------- Фичи ---------- */
.feat-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:20px}
.feat{background:var(--card-grad); border:1px solid var(--line); border-radius:var(--radius);
  padding:24px; transition:transform .2s ease, border-color .2s ease}
.feat:hover{transform:translateY(-3px); border-color:rgba(34,211,238,0.4)}
.feat-ico{font-size:1.7rem; margin-bottom:12px}
.feat h3{font-size:1.05rem; margin-bottom:8px}
.feat p{color:var(--muted); font-size:.92rem}

/* ---------- Честность ---------- */
.honesty-list{list-style:none; counter-reset:h}
.honesty-list li{position:relative; padding:14px 0 14px 46px; border-bottom:1px solid var(--line); color:var(--muted); font-size:1.02rem}
.honesty-list li:last-child{border-bottom:none}
.honesty-list li::before{counter-increment:h; content:counter(h); position:absolute; left:0; top:14px;
  width:30px; height:30px; border-radius:10px; display:flex; align-items:center; justify-content:center;
  font-weight:800; color:var(--cyan); background:rgba(34,211,238,0.1); border:1px solid rgba(34,211,238,0.25)}
.honesty-list b{color:var(--txt)}

/* ---------- CTA / футер ---------- */
.cta h2{font-size:2.1rem; margin-bottom:14px}
.cta p{color:var(--muted); max-width:560px; margin:0 auto 26px}
.cta .micro a{color:var(--muted); text-decoration:underline}
.cta .micro a:hover{color:var(--cyan)}
.footer-inner{display:flex; justify-content:space-between; align-items:center; gap:20px; flex-wrap:wrap}
.footer-brand{font-weight:700; color:var(--txt)}
.footer-note{font-size:.78rem; max-width:520px}
.footer-link{display:inline-block; color:var(--muted); font-size:.78rem; text-decoration:underline; text-underline-offset:3px; margin-top:6px}
.footer-link:hover{color:var(--cyan)}

/* ---------- Адаптив ---------- */
@media(max-width:960px){
  .hero-grid{grid-template-columns:1fr}
  .feat-grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:700px){
  h1{font-size:2.2rem}
  .calc-grid{grid-template-columns:1fr}
  .feat-grid{grid-template-columns:1fr}
  .hero-proof{grid-template-columns:1fr}
  .result-hero{flex-direction:column}
  .nav-actions .btn{padding:9px 14px; font-size:.88rem}
  .mix-row{grid-template-columns:1fr}
}

/* ======= ПРОМО-ВИДЕО ======= */
.promo{padding:56px 0 76px}
.promo-frame{position:relative; border-radius:18px; overflow:hidden; border:1px solid var(--line); box-shadow:0 24px 90px rgba(0,0,0,0.5); margin-top:28px; background:#000}
.promo-frame video{display:block; width:100%; height:auto; aspect-ratio:16/9; object-fit:cover}