:root{
  --bg:#0B0E13;
  --surface:#141B24;
  --surface-2:#1B2430;
  --text:#EDF1F5;
  --muted:#8996A6;
  --danger:#FF6647;
  --safe:#2FE6B8;
  --accent:#FFC94A;
  --border:rgba(237,241,245,0.09);
  --radius:18px;
}
*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}
body{
  background:var(--bg);
  color:var(--text);
  font-family:'IBM Plex Sans', sans-serif;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
.mono{font-family:'IBM Plex Mono', monospace;}
h1,h2,h3{font-family:'Unbounded', sans-serif; line-height:1.15; letter-spacing:-0.01em;}
a{color:inherit; text-decoration:none;}
img{max-width:100%; height:auto; display:block;}
picture{display:block;}
.wrap{max-width:1120px; margin:0 auto; padding:0 24px;}
section{padding:96px 0;}
.eyebrow{
  font-family:'IBM Plex Mono', monospace;
  text-transform:uppercase;
  letter-spacing:0.14em;
  font-size:12.5px;
  color:var(--safe);
  display:inline-flex;
  align-items:center;
  gap:8px;
  margin-bottom:18px;
}
.eyebrow::before{content:''; width:7px; height:7px; border-radius:50%; background:var(--safe); box-shadow:0 0 10px var(--safe);}

/* HEADER */
header{
  position:sticky; top:0; z-index:50;
  background:rgba(11,14,19,0.82);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--border);
}
.nav{display:flex; align-items:center; justify-content:space-between; padding:16px 24px; max-width:1120px; margin:0 auto;}
.logo{display:flex; align-items:center; gap:10px; font-family:'Unbounded'; font-weight:700; font-size:17px;}
.logo-mark{width:30px; height:30px; border-radius:8px; background:linear-gradient(145deg, var(--safe), #17b598); display:flex; align-items:center; justify-content:center; color:#06231c; font-family:'IBM Plex Mono'; font-weight:700; font-size:13px;}
.nav-cta{
  background:var(--accent); color:#241802; font-weight:600; font-size:14px;
  padding:10px 18px; border-radius:100px; white-space:nowrap;
  transition:transform .15s ease, box-shadow .15s ease;
}
.nav-cta:hover{transform:translateY(-1px); box-shadow:0 8px 20px rgba(255,201,74,0.25);}

/* HERO */
.hero{padding:72px 0 40px;}
.hero-grid{display:grid; grid-template-columns:1.05fr 0.95fr; gap:56px; align-items:center;}
.hero h1{font-size:clamp(32px, 4.2vw, 50px); margin-bottom:22px;}
.hero h1 .hl{color:var(--danger);}
.hero p.lead{color:var(--muted); font-size:17px; max-width:480px; margin-bottom:32px;}
.cta-row{display:flex; gap:14px; flex-wrap:wrap; margin-bottom:28px;}
.btn{
  display:inline-flex; align-items:center; gap:10px;
  padding:15px 26px; border-radius:100px; font-weight:600; font-size:15px;
  transition:transform .15s ease, box-shadow .15s ease, background .15s ease;
  border:1px solid transparent;
  /* Класс висит и на <a>, и на <button>. Браузер даёт кнопке свою серую заливку
     и системный шрифт — без сброса «Отклонить» выходит белым текстом по белому. */
  background:transparent; font-family:inherit; line-height:normal; cursor:pointer;
}
.btn-primary{background:var(--accent); color:#241802;}
.btn-primary:hover{transform:translateY(-2px); box-shadow:0 10px 26px rgba(255,201,74,0.28);}
.btn-ghost{border-color:var(--border); color:var(--text);}
.btn-ghost:hover{border-color:rgba(237,241,245,0.3);}
.trust-row{display:flex; align-items:center; gap:14px; color:var(--muted); font-size:13.5px;}
.stars{color:var(--accent); font-family:'IBM Plex Mono'; font-weight:600;}

/* VOLTAGE WIDGET */
.meter-card{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:24px;
  padding:36px 30px;
  position:relative;
  overflow:hidden;
}
.meter-card::before{
  content:''; position:absolute; inset:0;
  background:radial-gradient(circle at 80% 0%, rgba(47,230,184,0.10), transparent 55%);
  pointer-events:none;
}
.meter-label{font-family:'IBM Plex Mono'; font-size:12px; text-transform:uppercase; letter-spacing:.1em; color:var(--muted); margin-bottom:6px;}
.meter-status{font-family:'IBM Plex Mono'; font-size:13px; font-weight:600; margin-bottom:22px; display:inline-block; padding:4px 12px; border-radius:100px; transition:all .25s ease;}
.meter-status.state-danger{color:var(--danger); background:rgba(255,102,71,0.12);}
.meter-status.state-safe{color:var(--safe); background:rgba(47,230,184,0.12);}
.voltage-screen{
  background:#05070A; border-radius:14px; padding:26px 20px;
  text-align:center; border:1px solid var(--border);
  margin-bottom:22px;
}
.voltage-number{
  font-family:'IBM Plex Mono'; font-weight:600; font-size:56px;
  transition:color .2s ease, text-shadow .2s ease;
  color:var(--danger); text-shadow:0 0 22px rgba(255,102,71,0.35);
}
.voltage-number.safe{color:var(--safe); text-shadow:0 0 22px rgba(47,230,184,0.4);}
.voltage-unit{font-family:'IBM Plex Mono'; font-size:14px; color:var(--muted); margin-top:4px;}
.meter-foot{display:flex; justify-content:space-between; flex-wrap:wrap; gap:6px 14px; font-family:'IBM Plex Mono'; font-size:12px; color:var(--muted);}
.meter-foot b{color:var(--text);}

/* GALLERY */
.gallery{padding:0 0 96px;}
.gallery h2{font-size:clamp(24px,3vw,32px); margin-bottom:8px;}
.gallery p.sub{color:var(--muted); margin-bottom:32px; max-width:480px;}
.gallery-grid{display:grid; grid-template-columns:repeat(5, 1fr); gap:14px;}
.gallery-item{
  border-radius:14px; overflow:hidden; border:1px solid var(--border);
  cursor:zoom-in; transition:transform .2s ease, border-color .2s ease;
  background:var(--surface);
  /* Сброс стилей кнопки: элемент <button> ради доступности с клавиатуры. */
  display:block; width:100%; padding:0; margin:0;
  font:inherit; color:inherit; text-align:left;
}
.gallery-item img{width:100%; display:block; aspect-ratio:3/4; object-fit:cover;}
.gallery-item:hover{transform:translateY(-4px); border-color:rgba(47,230,184,0.4);}
.gallery-item span{
  display:block; font-family:'IBM Plex Mono'; font-size:11.5px; color:var(--muted);
  padding:9px 10px; border-top:1px solid var(--border);
}
.lightbox{
  position:fixed; inset:0; background:rgba(5,7,10,0.92); backdrop-filter:blur(6px);
  display:none; align-items:center; justify-content:center; z-index:100; padding:40px 20px;
}
.lightbox.open{display:flex;}
.lightbox img{max-width:min(560px, 90vw); max-height:86vh; border-radius:14px; border:1px solid var(--border);}
.lightbox-close{
  position:absolute; top:24px; right:28px; color:var(--text); font-size:28px;
  background:var(--surface-2); width:44px; height:44px; border-radius:50%;
  display:flex; align-items:center; justify-content:center; cursor:pointer;
  border:1px solid var(--border);
  padding:0; font-family:inherit; line-height:1;
}

/* PRODUCT SHOT */
.shot{padding:8px 0 96px;}
.shot-card{
  display:grid; grid-template-columns:0.9fr 1.1fr; gap:44px; align-items:center;
  background:var(--surface); border:1px solid var(--border); border-radius:24px; padding:32px;
}
.shot-img{border-radius:16px; overflow:hidden; border:1px solid var(--border);}
.shot-img img{width:100%; display:block;}
.shot-badges{display:flex; flex-wrap:wrap; gap:10px; margin:20px 0 24px;}
.badge{
  display:inline-flex; align-items:center; gap:7px;
  font-family:'IBM Plex Mono'; font-size:12.5px; color:var(--text);
  background:var(--surface-2); border:1px solid var(--border);
  padding:7px 13px; border-radius:100px;
}
.badge b{color:var(--safe);}
.shot h2{font-size:22px; margin-bottom:12px;}
.shot p.desc{color:var(--muted); font-size:15px; max-width:440px;}

/* PROBLEM */
.why{background:var(--surface); border-top:1px solid var(--border); border-bottom:1px solid var(--border);}
.why-grid{display:grid; grid-template-columns:0.9fr 1.1fr; gap:56px; align-items:start;}
.why h2{font-size:clamp(26px,3vw,36px); margin-bottom:16px;}
.why p.sub{color:var(--muted); font-size:16px; max-width:420px;}
.reason-list{display:flex; flex-direction:column; gap:0;}
.reason{display:flex; gap:18px; padding:22px 0; border-bottom:1px solid var(--border);}
.reason:last-child{border-bottom:none;}
.reason-num{font-family:'IBM Plex Mono'; color:var(--danger); font-size:13px; padding-top:3px; min-width:26px;}
/* Подзаголовок уровня h3 ради иерархии, но визуально — текстовый, а не «дисплейный»:
   глобальное правило h1,h2,h3 иначе навязало бы Unbounded и line-height 1.15. */
.reason h3{font-family:'IBM Plex Sans', sans-serif; font-weight:600; font-size:16.5px; line-height:1.5; letter-spacing:normal; margin-bottom:6px;}
.reason p{color:var(--muted); font-size:14.5px;}

/* APPLIANCES */
.appliances h2{font-size:clamp(26px,3vw,36px); margin-bottom:12px;}
.appliances p.sub{color:var(--muted); max-width:480px; margin-bottom:44px;}
.app-grid{display:grid; grid-template-columns:repeat(3, 1fr); gap:16px;}
.app-card{
  background:var(--surface); border:1px solid var(--border); border-radius:16px;
  padding:26px 20px; display:flex; flex-direction:column; gap:14px;
  transition:border-color .2s ease, transform .2s ease;
}
.app-card:hover{border-color:rgba(47,230,184,0.4); transform:translateY(-3px);}
.app-card svg{width:30px; height:30px; stroke:var(--safe);}
.app-card span{font-size:14.5px; font-weight:500;}

/* HOW IT WORKS */
.how{background:var(--surface); border-top:1px solid var(--border); border-bottom:1px solid var(--border);}
.how h2{font-size:clamp(26px,3vw,36px); margin-bottom:52px; max-width:560px;}
.steps{display:grid; grid-template-columns:repeat(3,1fr); gap:28px;}
.step{position:relative; padding-top:8px;}
.step-num{font-family:'IBM Plex Mono'; font-size:13px; color:var(--muted); margin-bottom:14px; display:block;}
.step h3{font-family:'IBM Plex Sans', sans-serif; font-size:19px; line-height:1.5; letter-spacing:normal; margin-bottom:10px;}
.step p{color:var(--muted); font-size:14.5px;}
.step-bar{height:2px; background:var(--border); border-radius:2px; margin-bottom:18px; overflow:hidden;}
.step-bar i{display:block; height:100%; width:100%; background:var(--safe);}

/* SPECS */
.specs-grid{display:grid; grid-template-columns:1fr 1fr; gap:16px;}
.spec-row{
  display:flex; justify-content:space-between; align-items:baseline;
  padding:18px 22px; background:var(--surface); border:1px solid var(--border); border-radius:12px;
}
.spec-row .k{color:var(--muted); font-size:14px;}
.spec-row .v{font-family:'IBM Plex Mono'; font-size:15px; font-weight:600; text-align:right;}
.specs h2{font-size:clamp(26px,3vw,36px); margin-bottom:8px;}
.specs p.sub{color:var(--muted); margin-bottom:36px;}

/* SOCIAL PROOF */
.proof{background:var(--surface); border-top:1px solid var(--border); border-bottom:1px solid var(--border);}
.proof-top{display:flex; align-items:center; gap:28px; margin-bottom:44px; flex-wrap:wrap;}
.rating-badge{
  background:var(--surface-2); border:1px solid var(--border); border-radius:16px;
  padding:20px 26px; display:flex; align-items:center; gap:18px;
}
.rating-num{font-family:'Unbounded'; font-size:36px; color:var(--accent);}
.rating-badge .stars{font-size:15px;}
.rating-badge .count{color:var(--muted); font-size:13px; margin-top:2px;}
.quotes{display:grid; grid-template-columns:repeat(3,1fr); gap:18px;}
.quote{background:var(--surface-2); border:1px solid var(--border); border-radius:16px; padding:24px;}
.quote p{font-size:14.5px; color:var(--text); margin-bottom:16px;}
.quote .who{font-family:'IBM Plex Mono'; font-size:12.5px; color:var(--muted);}
.quote-note{margin-top:18px; font-size:12.5px; color:var(--muted); font-style:italic;}
.review-shots{display:grid; grid-template-columns:repeat(3,1fr); gap:18px;}
.review-shots img{width:100%; display:block; border-radius:14px; border:1px solid var(--border); background:#fff;}
.review-shots .shot-wide{grid-column:span 2;}

/* PRICE / CTA */
.price-card{
  background:linear-gradient(160deg, var(--surface-2), var(--surface));
  border:1px solid var(--border); border-radius:24px;
  padding:52px 44px; display:grid; grid-template-columns:1.2fr 1fr; gap:40px; align-items:center;
}
.price-card h2{font-size:clamp(24px,3vw,32px); margin-bottom:14px;}
.price-card p{color:var(--muted); font-size:15px; max-width:420px;}
.price-box{text-align:right;}
.price-old{color:var(--muted); text-decoration:line-through; font-family:'IBM Plex Mono'; font-size:15px;}
.price-line{display:flex; align-items:center; justify-content:flex-end; flex-wrap:wrap; gap:12px; margin:4px 0 14px;}
.price-new{font-family:'Unbounded'; font-size:46px; color:var(--safe); line-height:1;}
.price-star{font-family:'IBM Plex Mono', monospace; font-size:0.36em; color:var(--muted); vertical-align:super; margin-left:2px;}
.price-badge{
  background:rgba(255,102,71,0.14); color:var(--danger);
  border:1px solid rgba(255,102,71,0.32); border-radius:100px;
  padding:5px 12px; font-size:14px; font-weight:600; white-space:nowrap;
}
/* Селектор перебивает .price-card p, иначе сноска отрендерится в 15px. */
.price-box .price-hint{font-size:12px; line-height:1.45; color:var(--muted); margin:10px 0 0 auto; max-width:300px;}

/* FAQ */
.faq h2{font-size:clamp(26px,3vw,36px); margin-bottom:36px;}
details{
  border-bottom:1px solid var(--border); padding:22px 2px;
}
details summary{
  cursor:pointer; font-weight:600; font-size:16px; list-style:none;
  display:flex; justify-content:space-between; align-items:center;
}
details summary::-webkit-details-marker{display:none;}
details summary::after{content:'+'; font-family:'IBM Plex Mono'; font-size:20px; color:var(--muted); transition:transform .2s ease;}
details[open] summary::after{transform:rotate(45deg); color:var(--safe);}
details p{color:var(--muted); font-size:14.5px; margin-top:14px; max-width:640px;}

/* FOOTER */
footer{border-top:1px solid var(--border); padding:48px 0;}
.foot-row{display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:20px;}
/* Без переноса пять ссылок не влезают в 390px и тянут горизонтальный скролл всей страницы. */
.foot-links{display:flex; flex-wrap:wrap; gap:12px 22px; font-size:14px; color:var(--muted);}
.foot-links a:hover{color:var(--text);}
.foot-copy{color:var(--muted); font-size:12.5px; margin-top:24px;}

/* FOCUS */
a:focus-visible, button:focus-visible, summary:focus-visible{
  outline:2px solid var(--safe); outline-offset:3px; border-radius:6px;
}

@media (max-width:860px){
  section{padding:64px 0;}
  .hero-grid, .why-grid, .price-card, .shot-card{grid-template-columns:1fr;}
  .steps, .app-grid, .quotes, .review-shots{grid-template-columns:repeat(2,1fr);}
  .specs-grid{grid-template-columns:1fr;}
  .price-box{text-align:left;}
  .price-line{justify-content:flex-start;}
  .price-box .price-hint{margin-left:0;}
  .proof-top{flex-direction:column; align-items:flex-start;}
  .gallery-grid{grid-template-columns:repeat(3,1fr);}
}
@media (max-width:560px){
  .app-grid, .quotes, .steps, .review-shots{grid-template-columns:1fr;}
  /* Без сброса span 2 создаёт вторую колонку и сплющивает отзывы до пары пикселей. */
  .review-shots .shot-wide{grid-column:auto;}
  .nav-cta{padding:8px 14px; font-size:13px;}
  .voltage-number{font-size:44px;}
  .gallery-grid{grid-template-columns:repeat(2,1fr);}
}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
}