:root {
  --bg: #030914;
  --bg-2: #061326;
  --panel: #081a31;
  --panel-2: #0b213c;
  --text: #f5f7fb;
  --muted: #a8b4c8;
  --line: rgba(134, 184, 255, .22);
  --blue: #1478ff;
  --blue-2: #35a0ff;
  --silver: #d7dee8;
  --shadow: 0 20px 55px rgba(0,0,0,.32);
  --radius: 22px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background:
    radial-gradient(circle at 80% 0%, rgba(20,120,255,.12), transparent 28%),
    linear-gradient(180deg, var(--bg) 0%, #020711 100%);
  color: var(--text);
  line-height: 1.6;
}
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
button, input, textarea { font: inherit; }
.container { width: min(1180px, calc(100% - 40px)); margin: 0 auto; }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  backdrop-filter: blur(16px);
  background: rgba(2,7,17,.82);
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.nav-wrap { min-height: 92px; display: flex; align-items: center; gap: 28px; }
.brand { flex: 0 0 215px; }
.brand img { width: 215px; }
.main-nav { margin-left: auto; display: flex; gap: 28px; align-items: center; }
.main-nav a { color: #dbe5f4; font-weight: 800; font-size: .92rem; text-transform: uppercase; letter-spacing: .04em; }
.main-nav a:hover { color: var(--blue-2); }
.nav-toggle { display: none; background: transparent; border: 0; padding: 8px; }
.nav-toggle span:not(.sr-only) { display:block; width:26px; height:2px; background:#fff; margin:5px 0; }

.btn {
  min-height: 50px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 22px;
  border-radius: 10px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .035em;
  border: 1px solid transparent;
  transition: .2s ease;
}
.btn:hover { transform: translateY(-2px); }
.btn-primary {
  color: #fff;
  background: linear-gradient(135deg, #0866df, #1689ff);
  box-shadow: 0 12px 30px rgba(20,120,255,.24);
}
.btn-secondary, .btn-call {
  border-color: rgba(67,156,255,.75);
  background: rgba(4,20,42,.6);
  color: #fff;
}
.header-call { min-height: 44px; padding-inline: 18px; }

.hero {
  min-height: 670px;
  display: flex;
  align-items: center;
  position: relative;
  overflow: hidden;
  border-bottom: 1px solid var(--line);
  background:
    linear-gradient(90deg, rgba(2,7,17,.98) 0%, rgba(2,7,17,.92) 45%, rgba(6,21,43,.76) 100%),
    radial-gradient(circle at 82% 52%, rgba(20,120,255,.32), transparent 28%);
}
.hero::after {
  content:"";
  position:absolute;
  width: 520px;
  height: 520px;
  border: 1px solid rgba(53,160,255,.18);
  border-radius: 50%;
  right: -70px;
  top: 90px;
  box-shadow:
    0 0 0 80px rgba(53,160,255,.025),
    0 0 0 160px rgba(53,160,255,.015);
}
.hero-grid-overlay {
  position:absolute;
  inset:0;
  opacity:.12;
  background-image:
    linear-gradient(rgba(255,255,255,.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.08) 1px, transparent 1px);
  background-size: 44px 44px;
  mask-image: linear-gradient(to right, transparent, #000 45%, #000);
}
.hero-content {
  position:relative;
  z-index:2;
  display:grid;
  grid-template-columns: minmax(0,1.35fr) minmax(330px,.65fr);
  gap: 70px;
  align-items:center;
  padding-block: 90px;
}
.eyebrow {
  margin:0 0 12px;
  color: var(--blue-2);
  font-weight: 950;
  text-transform: uppercase;
  letter-spacing: .13em;
  font-size: .82rem;
}
.hero h1, .section h2 {
  margin: 0;
  text-transform: uppercase;
  font-style: italic;
  letter-spacing: -.035em;
  line-height: 1.02;
}
.hero h1 { font-size: clamp(3.1rem, 6vw, 6.3rem); max-width: 880px; }
.hero h1 span {
  display:inline-block;
  color: var(--blue-2);
  text-shadow: 0 5px 24px rgba(20,120,255,.2);
}
.hero-lead { max-width: 720px; margin: 26px 0 0; font-size: 1.18rem; color: #d2dceb; }
.hero-actions { display:flex; gap:14px; margin-top:32px; flex-wrap:wrap; }
.trust-strip { display:flex; flex-wrap:wrap; gap:10px; margin-top:34px; }
.trust-strip span {
  padding: 8px 13px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: #dce9fa;
  background: rgba(8,26,49,.55);
  font-size: .88rem;
  font-weight: 800;
}
.hero-card {
  position:relative;
  padding: 34px;
  background: linear-gradient(180deg, rgba(11,33,60,.95), rgba(4,15,29,.96));
  border: 1px solid rgba(71,156,255,.42);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.hero-card-badge {
  position:absolute;
  top:-14px;
  right:22px;
  background:#edf5ff;
  color:#08162a;
  padding:6px 12px;
  border-radius:999px;
  font-size:.72rem;
  font-weight:950;
  text-transform:uppercase;
  letter-spacing:.08em;
}
.hero-card h2 { font-size: 2rem; margin: 0 0 12px; }
.hero-card p { color: var(--muted); }
.btn-wide { width:100%; }
.mini-note { text-align:center; margin-bottom:0; font-size:.85rem; }

.section { padding: 100px 0; }
.section-heading { max-width: 760px; margin: 0 auto 45px; text-align:center; }
.section-heading.left { margin-left:0; text-align:left; }
.section h2 { font-size: clamp(2.2rem, 4vw, 4rem); }
.section-heading > p:last-child { color: var(--muted); font-size:1.05rem; }

.service-grid {
  display:grid;
  grid-template-columns: repeat(3,1fr);
  gap:16px;
}
.service-card {
  padding: 28px;
  min-height: 260px;
  border-radius: 18px;
  border: 1px solid var(--line);
  background: linear-gradient(180deg, rgba(9,27,51,.8), rgba(4,13,26,.86));
  transition:.2s ease;
}
.service-card:hover { transform:translateY(-4px); border-color:rgba(53,160,255,.55); }
.service-card.featured { box-shadow: inset 0 3px 0 var(--blue); }
.icon {
  width:54px; height:54px; display:grid; place-items:center;
  border-radius:14px;
  background: linear-gradient(135deg, var(--blue), #0a4fb3);
  font-weight:950;
  font-size:1.15rem;
  box-shadow: 0 10px 24px rgba(20,120,255,.18);
}
.service-card h3 { font-size:1.25rem; margin:22px 0 9px; }
.service-card p { color:var(--muted); }
.service-card a { color:var(--blue-2); font-weight:850; }

.why {
  border-block: 1px solid var(--line);
  background:
    radial-gradient(circle at 20% 50%, rgba(20,120,255,.16), transparent 30%),
    #040c19;
}
.why-grid { display:grid; grid-template-columns:.75fr 1.25fr; gap:70px; align-items:center; }
.experience-panel {
  min-height: 330px;
  border-radius: 28px;
  border:1px solid rgba(211,225,245,.18);
  background:
    linear-gradient(145deg, rgba(217,227,239,.1), rgba(5,17,33,.9));
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  text-align:center;
  box-shadow:var(--shadow);
}
.experience-number {
  font-size:clamp(6rem,12vw,10rem);
  line-height:.8;
  font-weight:1000;
  font-style:italic;
  background:linear-gradient(#fff,#8798ad);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}
.experience-panel strong { display:block; color:var(--blue-2); text-transform:uppercase; font-size:1.4rem; margin-top:22px; }
.experience-panel span { color:var(--muted); }
.why-copy > p:not(.eyebrow) { color:var(--muted); font-size:1.08rem; }
.check-grid { display:grid; grid-template-columns:1fr 1fr; gap:13px 26px; margin-top:30px; }
.check-grid div { padding:12px 14px; border-left:2px solid var(--blue); background:rgba(8,26,49,.45); border-radius:0 9px 9px 0; }

.areas { background:linear-gradient(180deg,#050d1a,#020711); }
.area-chips { display:flex; flex-wrap:wrap; gap:12px; }
.area-chips span { padding:13px 18px; border:1px solid rgba(80,160,255,.35); border-radius:999px; background:rgba(10,32,59,.68); font-weight:800; }

.faq-list { max-width:900px; margin:0 auto; display:grid; gap:12px; }
details { border:1px solid var(--line); border-radius:14px; background:rgba(7,22,42,.75); padding:0 22px; }
summary { cursor:pointer; padding:20px 0; font-weight:850; }
details p { color:var(--muted); margin-top:0; padding-bottom:18px; }

.contact {
  border-top:1px solid var(--line);
  background:radial-gradient(circle at 85% 20%,rgba(20,120,255,.18),transparent 30%),#040b16;
}
.contact-grid { display:grid; grid-template-columns:.85fr 1.15fr; gap:60px; align-items:start; }
.contact-links { display:grid; gap:10px; margin-top:28px; }
.contact-links a { color:#dce8f7; font-weight:800; }
.lead-form {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:16px;
  padding:28px;
  border:1px solid var(--line);
  border-radius:22px;
  background:rgba(8,26,49,.72);
}
.lead-form label { display:grid; gap:7px; font-size:.9rem; font-weight:800; color:#dce7f6; }
.lead-form .full { grid-column:1/-1; }
input, textarea {
  width:100%;
  border-radius:10px;
  border:1px solid rgba(145,183,232,.24);
  background:#020914;
  color:#fff;
  padding:13px 14px;
  outline:none;
}
input:focus, textarea:focus { border-color:var(--blue-2); box-shadow:0 0 0 3px rgba(53,160,255,.11); }
.form-status { margin:0; color:var(--muted); min-height:1.4em; }

.site-footer { padding:50px 0 24px; border-top:1px solid var(--line); background:#01050c; }
.footer-grid { display:grid; grid-template-columns:1.2fr 1fr .85fr .9fr; gap:28px; }
.footer-logo { max-width:210px; }
.footer-grid strong { display:block; text-transform:uppercase; margin-bottom:10px; }
.footer-grid p, .footer-grid a { display:block; color:var(--muted); margin:6px 0; }
.copyright { margin-top:34px; padding-top:20px; border-top:1px solid rgba(255,255,255,.06); color:#708097; font-size:.88rem; }

@media (max-width: 980px) {
  .header-call { display:none; }
  .main-nav {
    position:absolute; left:20px; right:20px; top:82px;
    display:none; flex-direction:column; align-items:stretch;
    background:#071425; padding:20px; border:1px solid var(--line); border-radius:14px;
  }
  .main-nav.open { display:flex; }
  .nav-toggle { display:block; margin-left:auto; }
  .hero-content, .why-grid, .contact-grid { grid-template-columns:1fr; }
  .hero { min-height:auto; }
  .hero-card { max-width:560px; }
  .service-grid { grid-template-columns:repeat(2,1fr); }
  .footer-grid { grid-template-columns:1fr 1fr; }
}

@media (max-width: 640px) {
  .container { width:min(100% - 26px, 1180px); }
  .nav-wrap { min-height:78px; }
  .brand, .brand img { width:175px; flex-basis:175px; }
  .hero-content { padding-block:65px; gap:42px; }
  .hero h1 { font-size:clamp(2.6rem,14vw,4.1rem); }
  .hero-lead { font-size:1rem; }
  .hero-actions .btn { width:100%; }
  .section { padding:72px 0; }
  .service-grid, .check-grid, .lead-form, .footer-grid { grid-template-columns:1fr; }
  .lead-form .full { grid-column:auto; }
}