:root {
  --bg: #020711;
  --panel: rgba(12, 22, 39, .76);
  --panel-strong: rgba(14, 26, 48, .94);
  --line: rgba(113, 159, 255, .18);
  --text: #f7fbff;
  --muted: #a9b7cd;
  --blue: #3e8cff;
  --blue-2: #6aa7ff;
  --violet: #8d5cff;
  --success: #7fd3ff;
  --shadow: 0 24px 80px rgba(0, 0, 0, .45);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  min-height: 100vh;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--text);
  background:
    radial-gradient(circle at 75% 10%, rgba(61, 118, 255, .35), transparent 26rem),
    radial-gradient(circle at 90% 45%, rgba(141, 92, 255, .18), transparent 24rem),
    linear-gradient(180deg, #030814 0%, #020711 48%, #01040a 100%);
}

a { color: inherit; text-decoration: none; }
button, input, textarea { font: inherit; }

.page-shell { overflow: hidden; }
.header {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  max-width: 1220px;
  margin: 0 auto;
  padding: 22px 24px;
  backdrop-filter: blur(18px);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 20px;
  font-weight: 800;
  letter-spacing: -.03em;
}
.brand b { color: var(--blue-2); }
.brand__icon {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border: 1px solid rgba(106, 167, 255, .75);
  border-radius: 10px;
  color: var(--blue-2);
  box-shadow: 0 0 24px rgba(62, 140, 255, .35) inset;
}

.nav {
  display: flex;
  align-items: center;
  gap: 32px;
  color: #d8e5f8;
  font-size: 14px;
}
.nav a { opacity: .9; transition: color .2s ease, opacity .2s ease; }
.nav a:hover { color: var(--blue-2); opacity: 1; }
.header__cta { padding: 13px 22px; border-radius: 12px; background: linear-gradient(135deg, var(--blue), #2876ff); font-weight: 700; font-size: 14px; box-shadow: 0 12px 35px rgba(44, 122, 255, .35); }
.burger { display: none; width: 42px; height: 42px; border: 1px solid var(--line); border-radius: 12px; background: rgba(8, 17, 32, .8); color: white; }
.burger span { display: block; width: 18px; height: 2px; margin: 4px auto; background: white; }

.hero {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1.15fr;
  gap: 44px;
  align-items: center;
  max-width: 1220px;
  min-height: 680px;
  margin: 0 auto;
  padding: 40px 24px 80px;
}
.hero::after {
  content: "";
  position: absolute;
  inset: auto -20vw 0 -20vw;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(106, 167, 255, .3), transparent);
}
.eyebrow { margin: 0 0 14px; color: var(--success); font-size: 13px; font-weight: 800; text-transform: uppercase; letter-spacing: .14em; }
h1, h2, h3, p { margin-top: 0; }
h1 { margin-bottom: 18px; font-size: clamp(54px, 8vw, 92px); line-height: .92; letter-spacing: -.07em; }
h1 span { display: block; color: var(--blue-2); text-shadow: 0 0 32px rgba(62, 140, 255, .55); }
.hero__lead { max-width: 560px; color: #d7e1ee; font-size: 20px; line-height: 1.55; }
.hero__actions { display: flex; gap: 16px; flex-wrap: wrap; margin: 34px 0; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; padding: 0 26px; border: 0; border-radius: 14px; cursor: pointer; font-weight: 800; transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; }
.btn:hover { transform: translateY(-2px); }
.btn--primary { color: white; background: linear-gradient(135deg, #4a98ff, #2876ff); box-shadow: 0 16px 40px rgba(44, 122, 255, .38); }
.btn--ghost { border: 1px solid var(--line); color: #dce8f8; background: rgba(11, 21, 38, .54); }
.play { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: rgba(62, 140, 255, .18); color: var(--blue-2); }
.hero__badges { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; max-width: 680px; color: #cad6e7; font-size: 14px; }
.hero__badges div { display: flex; gap: 12px; align-items: center; }
.hero__badges span { color: var(--blue-2); font-size: 28px; }

.hero__visual { position: relative; min-height: 520px; display: grid; place-items: center; }
.house-card {
  position: relative;
  width: min(100%, 650px);
  height: 520px;
  border: 1px solid rgba(106, 167, 255, .16);
  border-radius: 34px;
  overflow: hidden;
  background:
    linear-gradient(90deg, rgba(2, 7, 17, .25), rgba(2, 7, 17, .02)),
    url('https://images.unsplash.com/photo-1600607687939-ce8a6c25118c?auto=format&fit=crop&w=1300&q=80') center/cover;
  box-shadow: var(--shadow);
}
.house-card::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(2,7,17,.12), rgba(2,7,17,.7)); }
.ai-core { position: absolute; left: 50%; top: 45%; display: grid; place-items: center; width: 118px; height: 118px; transform: translate(-50%, -50%); border: 1px solid rgba(106, 167, 255, .9); border-radius: 50%; background: radial-gradient(circle, rgba(141,92,255,.92), rgba(35,94,255,.75) 58%, rgba(10,20,42,.65)); box-shadow: 0 0 60px rgba(85, 127, 255, .72), inset 0 0 24px rgba(255,255,255,.16); font-size: 54px; z-index: 3; }
.node { position: absolute; z-index: 4; display: grid; place-items: center; width: 66px; height: 66px; border: 1px solid rgba(106, 167, 255, .9); border-radius: 50%; background: rgba(6, 15, 31, .82); box-shadow: 0 0 32px rgba(62, 140, 255, .32); font-weight: 900; }
.node--1 { left: 38%; top: 16%; }
.node--2 { right: 9%; top: 18%; }
.node--3 { left: 55%; bottom: 16%; }
.node--4 { left: 20%; top: 50%; }
.node--5 { right: 10%; bottom: 30%; }
.line { position: absolute; z-index: 2; height: 1px; background: linear-gradient(90deg, transparent, rgba(106, 167, 255, .85), transparent); transform-origin: left center; }
.line--1 { width: 260px; left: 50%; top: 45%; transform: rotate(-35deg); }
.line--2 { width: 260px; left: 50%; top: 45%; transform: rotate(18deg); }
.line--3 { width: 220px; left: 38%; top: 45%; transform: rotate(143deg); }
.line--4 { width: 210px; left: 50%; top: 45%; transform: rotate(89deg); }

.section { max-width: 1220px; margin: 0 auto; padding: 72px 24px; }
.section--intro { display: grid; grid-template-columns: 1fr 1fr; gap: 44px; align-items: end; }
.section__title h2 { margin-bottom: 0; font-size: clamp(34px, 4vw, 54px); line-height: 1.05; letter-spacing: -.045em; }
.section__title--center { text-align: center; max-width: 760px; margin: 0 auto 34px; }
.section__text { color: var(--muted); font-size: 18px; line-height: 1.75; }
.feature-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 16px; }
.feature-card, .service-card, .steps article, .lead-form, .contact-section, .stats {
  border: 1px solid var(--line);
  background: linear-gradient(180deg, rgba(14, 27, 50, .8), rgba(8, 16, 31, .66));
  box-shadow: 0 18px 55px rgba(0,0,0,.24);
}
.feature-card { min-height: 220px; padding: 26px 22px; border-radius: 18px; }
.feature-card span { display: block; margin-bottom: 28px; color: var(--blue-2); font-size: 42px; }
.feature-card h3 { margin-bottom: 14px; font-size: 18px; line-height: 1.2; }
.feature-card p { margin: 0; color: var(--muted); line-height: 1.55; font-size: 14px; }
.feature-card--accent { background: linear-gradient(180deg, rgba(54, 24, 96, .78), rgba(12, 18, 36, .78)); }

.services { display: grid; grid-template-columns: .65fr 1fr; gap: 34px; align-items: start; }
.services__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.service-card { display: flex; gap: 18px; min-height: 118px; padding: 24px; border-radius: 18px; }
.service-card b { color: var(--blue-2); font-size: 28px; }
.service-card span { color: #d9e5f7; font-weight: 700; line-height: 1.4; }

.steps { display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; }
.steps article { position: relative; padding: 26px 20px; min-height: 190px; border-radius: 18px; }
.steps b { display: grid; place-items: center; width: 38px; height: 38px; margin-bottom: 20px; border-radius: 50%; background: rgba(62, 140, 255, .24); color: white; }
.steps span { display: block; margin-bottom: 12px; font-weight: 800; }
.steps p { margin: 0; color: var(--muted); line-height: 1.5; font-size: 14px; }

.stats { max-width: 1220px; margin: 0 auto; padding: 32px 24px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; border-radius: 24px; }
.stats div { display: grid; gap: 6px; text-align: center; }
.stats b { font-size: 24px; }
.stats span { color: var(--muted); }

.contact-section { max-width: 1220px; margin: 72px auto; padding: 34px; border-radius: 28px; display: grid; grid-template-columns: .9fr 1fr; gap: 40px; align-items: center; }
.contact-section h2 { font-size: clamp(36px, 4vw, 56px); line-height: 1.02; letter-spacing: -.05em; }
.contact-section ul { list-style: none; padding: 0; margin: 28px 0 0; display: grid; gap: 18px; color: #e7f0ff; font-size: 18px; }
.contact-section li::before { content: "✓"; margin-right: 12px; color: var(--blue-2); font-weight: 900; }
.lead-form { display: grid; gap: 14px; padding: 24px; border-radius: 22px; }
.lead-form label { display: grid; gap: 8px; color: var(--muted); font-size: 13px; }
.lead-form input, .lead-form textarea { width: 100%; border: 1px solid rgba(106, 167, 255, .14); border-radius: 12px; color: white; background: rgba(2, 7, 17, .5); padding: 14px 16px; outline: none; transition: border-color .2s ease, box-shadow .2s ease; }
.lead-form textarea { resize: vertical; }
.lead-form input:focus, .lead-form textarea:focus { border-color: rgba(106, 167, 255, .75); box-shadow: 0 0 0 4px rgba(62, 140, 255, .12); }
.form-note { margin: 0; color: var(--muted); font-size: 13px; }

.footer { max-width: 1220px; margin: 0 auto; padding: 34px 24px 48px; display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 24px; color: var(--muted); border-top: 1px solid rgba(106, 167, 255, .14); }
.footer__contacts { display: grid; gap: 8px; }
.footer a:hover { color: var(--blue-2); }

@media (max-width: 1060px) {
  .hero, .section--intro, .services, .contact-section { grid-template-columns: 1fr; }
  .hero { min-height: auto; }
  .feature-grid { grid-template-columns: repeat(3, 1fr); }
  .steps { grid-template-columns: repeat(2, 1fr); }
  .nav, .header__cta { display: none; }
  .burger { display: block; }
  .header.is-open .nav { position: absolute; left: 24px; right: 24px; top: 74px; display: grid; gap: 14px; padding: 20px; border: 1px solid var(--line); border-radius: 18px; background: rgba(4, 11, 23, .96); }
}

@media (max-width: 720px) {
  .header { padding: 16px; }
  .hero { padding: 32px 16px 56px; }
  h1 { font-size: 58px; }
  .hero__lead { font-size: 17px; }
  .hero__badges, .feature-grid, .services__grid, .steps, .stats, .footer { grid-template-columns: 1fr; }
  .house-card { height: 420px; border-radius: 24px; }
  .node { width: 52px; height: 52px; font-size: 13px; }
  .ai-core { width: 96px; height: 96px; font-size: 42px; }
  .section { padding: 54px 16px; }
  .contact-section { margin: 48px 16px; padding: 22px; }
  .stats { margin: 0 16px; }
  .footer { padding-inline: 16px; }
}