/* Base Reset */
* { box-sizing: border-box; }
html, body { margin:0; padding:0; }
:root{
  --bg:#0a0f1d;
  --panel: rgba(255,255,255,0.08);
  --glass: rgba(255,255,255,0.12);
  --txt:#e6f6ff;
  --muted:#a9c3d1;
  --accent1:#22d3ee; /* бирюза */
  --accent2:#8b5cf6; /* фиолет */
  --accent3:#84cc16; /* лайм */
  --shadow: 0 10px 30px rgba(0,0,0,.35);
}

body{
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  background: var(--bg);
  color: var(--txt);
  line-height:1.6;
}

/* Canvas gradient background container */
.canvas-bg{
  position: fixed; inset:0; z-index:-1;
}
main{ position: relative; z-index:1; }

/* Layout */
.container{ max-width: 1180px; margin: 0 auto; padding: 0 20px; }

header{
  position:sticky; top:0; backdrop-filter: blur(8px);
  background: linear-gradient( to bottom, rgba(10,15,29,.85), rgba(10,15,29,.55) );
  border-bottom: 1px solid rgba(255,255,255,.06);
  z-index: 50;
}
.nav{
  display:flex; align-items:center; justify-content:space-between;
  padding: 14px 0;
}
.nav a{ color: var(--muted); text-decoration:none; margin: 0 12px; font-weight:600 }
.nav a:hover{ color: var(--txt) }
.logo{ display:flex; align-items:center; gap:12px }
.logo img{ height:34px }
.badge{
  padding: 6px 10px; border-radius: 999px; font-size:12px; letter-spacing:.02em;
  background: linear-gradient(90deg,var(--accent1),var(--accent2),var(--accent3));
  color:#001014; font-weight: 800;
}

/* Hero */
.hero{
  display:grid; grid-template-columns: 1.2fr 0.8fr; gap: 30px;
  padding: 64px 0 40px;
}
.hero .panel{
  padding: 28px; border-radius: 18px; background: var(--panel);
  border: 1px solid rgba(255,255,255,.12); box-shadow: var(--shadow);
  backdrop-filter: blur(10px);
}
h1{
  font-size: clamp(28px, 4vw, 48px);
  line-height:1.15; margin:0 0 14px;
  background: linear-gradient(90deg,var(--accent1),var(--accent2));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.lead{ font-size: clamp(16px, 2.1vw, 20px); color: var(--muted) }
.cta-row{ display:flex; gap:12px; margin-top:16px; flex-wrap:wrap }
.btn{
  padding: 14px 18px; border-radius: 12px; border: 0; cursor: pointer;
  color: #051016; font-weight: 800; letter-spacing:.02em;
  transition: transform .15s ease, box-shadow .15s ease;
  background: radial-gradient(120% 140% at 30% 30%, var(--accent1), var(--accent2));
  box-shadow: 0 4px 18px rgba(34,211,238,.25), 0 8px 26px rgba(139,92,246,.14);
}
.btn:hover{ transform: translateY(-1px) }
.btn-outline{
  background: transparent; color: var(--txt); border: 1px solid rgba(255,255,255,.18)
}
.small{ font-size: 12px; color: var(--muted) }

/* Sections */
.section{ padding: 64px 0 }
.section h2{
  font-size: clamp(24px, 3.2vw, 36px); margin:0 0 12px;
  background: linear-gradient(90deg,var(--accent2),var(--accent3));
  -webkit-background-clip:text; background-clip:text; color: transparent;
}
.grid-3{ display:grid; grid-template-columns: repeat(3, 1fr); gap: 18px }
.card{
  background: var(--panel); border: 1px solid rgba(255,255,255,.1);
  border-radius: 16px; padding:18px; box-shadow: var(--shadow);
  backdrop-filter: blur(10px);
}
.kpi{ display:grid; grid-template-columns: repeat(4,1fr); gap: 16px }
.kpi .num{ font-size: 32px; font-weight: 900; color: var(--txt) }
.kpi .desc{ color: var(--muted) }

/* Program list */
.steps{ display:grid; gap: 10px }
.step{ background: var(--glass); border: 1px solid rgba(255,255,255,.1); border-radius: 14px; padding: 14px }
.step h4{ margin: 0 0 6px }

/* Slider (testimonials) */
.slider{ position: relative; overflow: hidden; border-radius: 16px; border:1px solid rgba(255,255,255,.1); background: var(--panel) }
.slides{ display:flex; transition: transform .5s ease }
.slide{ min-width: 100%; padding: 18px; display:grid; grid-template-columns: 80px 1fr; gap: 14px; align-items:center }
.slide img{ width: 80px; height:80px; border-radius: 50%; object-fit: cover; border: 2px solid rgba(255,255,255,.18) }
.slider .dots{ display:flex; gap:6px; justify-content:center; padding:10px }
.slider .dot{ width:8px; height:8px; border-radius:999px; background:#30364a; cursor:pointer }
.slider .dot.active{ background: linear-gradient(90deg,var(--accent1),var(--accent2),var(--accent3)) }

/* Reveal on scroll */
.reveal{ opacity:0; transform: translateY(14px); transition: opacity .6s ease, transform .6s ease }
.reveal.visible{ opacity:1; transform: translateY(0) }

/* Footer */
footer{ border-top:1px solid rgba(255,255,255,.08); padding: 30px 0; color: var(--muted) }
footer a{ color: var(--txt); text-decoration:none }

/* Cookie banner */
.cookie{
  position: fixed; left: 12px; right: 12px; bottom: 12px; z-index: 60;
  background: rgba(12,18,34,.9); border:1px solid rgba(255,255,255,.08);
  padding: 16px; border-radius: 14px; display:flex; gap: 12px; align-items:center;
  box-shadow: var(--shadow); backdrop-filter: blur(10px);
}
.cookie .actions{ margin-left:auto; display:flex; gap:10px }

/* Forms */
input, textarea{
  width:100%; padding:12px 14px; border-radius: 12px; border:1px solid rgba(255,255,255,.16);
  background: rgba(255,255,255,.06); color:var(--txt)
}
label{ font-size: 14px; color: var(--muted) }
.form-row{ display:grid; grid-template-columns: 1fr 1fr; gap: 12px }
.form-row-1{ display:grid; grid-template-columns: 1fr; gap: 12px }

/* Tables (pricing) */
.table{ width:100%; border-collapse: collapse; overflow: hidden; border-radius: 12px }
.table th, .table td{ padding:12px; border-bottom:1px solid rgba(255,255,255,.08); text-align:left }
.table thead th{ background: rgba(255,255,255,.06) }

/* Responsive */
@media (max-width: 900px){
  .hero{ grid-template-columns: 1fr; }
  .grid-3{ grid-template-columns: 1fr; }
  .kpi{ grid-template-columns: repeat(2,1fr) }
  .slide{ grid-template-columns: 60px 1fr }
}