:root{
  --black:#0B0E11;
  --lime:#A6F22E;
  --cyan:#22D3EE;
  --text:#E6E8EC;
  --muted:#9AA4AF;
  --card:#11151A;
  --line:rgba(255,255,255,.06);
  --radius:14px;
  --shadow:0 10px 30px rgba(0,0,0,.35);
}

*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--black);color:var(--text);
  font:16px/1.6 Inter,-apple-system,Segoe UI,Roboto,Arial,sans-serif}

a{color:var(--cyan);text-decoration:none}
a:hover{opacity:.9}
h1,h2,h3{margin:0 0 .6rem}
h1{font-size:clamp(28px,4.6vw,48px);line-height:1.15}
h2{font-size:clamp(22px,3vw,32px)}
h3{font-size:clamp(18px,2.4vw,22px)}
p{margin:.4rem 0 1rem}
.muted{color:var(--muted)}

.nav{
  position:sticky;top:0;z-index:20;display:flex;align-items:center;justify-content:space-between;
  padding:14px 22px;border-bottom:1px solid var(--line);backdrop-filter:saturate(1.2) blur(6px);
  background:rgba(11,14,17,.85)
}
.logo img{display:block;filter:drop-shadow(0 2px 10px rgba(0,0,0,.3))}
.menu{display:flex;gap:18px;align-items:center}
.menu a{padding:10px 12px;border-radius:10px}
.burger{display:none;background:none;border:1px solid var(--line);color:var(--text);padding:6px 10px;border-radius:10px}
.menu.open{display:block}

.btn{display:inline-block;padding:12px 18px;border-radius:12px;border:1px solid var(--line);transition:.2s}
.btn--lime{background:var(--lime);color:#0B0E11;border-color:transparent;font-weight:700}
.btn--ghost{background:transparent}

.hero{
  padding:88px 22px 40px;
  background:
    radial-gradient(600px 300px at 60% -20%, rgba(34,211,238,.25), transparent 60%),
    radial-gradient(600px 300px at 10% -20%, rgba(166,242,46,.25), transparent 60%)
}
.hero__content{max-width:980px;margin:0 auto;text-align:center}
.hero__content p{max-width:760px;margin:0 auto 8px}
.hero__cta{display:flex;gap:14px;justify-content:center;margin:18px 0 10px}
.badges{display:flex;gap:14px;justify-content:center;list-style:none;padding:0;margin:10px 0 0}
.badges li{border:1px solid var(--line);padding:8px 12px;border-radius:999px;color:var(--muted)}

.strip{padding:56px 22px;border-top:1px solid var(--line)}
.strip--grid .grid{display:grid;grid-template-columns:repeat(12,1fr);gap:16px;max-width:1100px;margin:20px auto 0}
.card{grid-column:span 6;background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:20px;box-shadow:var(--shadow)}
.card ul{margin:.6rem 0 0 1rem}
.card.featured{outline:2px solid var(--lime)}

.cases{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;max-width:1100px;margin:22px auto 0}
.kpi{background:var(--card);border:1px solid var(--line);padding:22px;border-radius:var(--radius);text-align:center}
.kpi span{font-size:28px;font-weight:700;color:var(--lime)}

.pricing .card .price{color:var(--text);margin:.6rem 0 1rem}
.about .card{min-height:140px}

.form{max-width:720px;margin:10px auto 0;display:grid;gap:12px}
.form label{display:grid;gap:6px}
.form input,.form textarea{background:#0F1318;color:var(--text);border:1px solid var(--line);padding:12px;border-radius:12px;outline:none}
.form input:focus,.form textarea:focus{border-color:var(--cyan)}
.form button{justify-self:start}

.footer{padding:26px 22px;border-top:1px solid var(--line);text-align:center;color:var(--muted)}

@media (max-width:900px){
  .strip--grid .grid .card{grid-column:span 12}
  .cases{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:720px){
  .menu{display:none;position:absolute;top:58px;left:0;right:0;background:#0D1015;padding:12px 22px;border-bottom:1px solid var(--line)}
  .burger{display:block}
  .hero{padding-top:72px}
  .cases{grid-template-columns:1fr}
}