:root{
  --bg:#f7f9fc;
  --surface:#ffffff;
  --ink:#0c1830;
  --muted:#5e6b80;
  --line:#dfe6ef;
  --accent:#2f73ff;
  --accent-2:#0d45a9;
  --radius:24px;
  --shadow:0 24px 70px rgba(18,39,77,.10);
}

*{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;
  color:var(--ink);
  background:
    radial-gradient(circle at 90% 8%, rgba(47,115,255,.09), transparent 28%),
    linear-gradient(180deg,#fff 0%,var(--bg) 100%);
}
a{color:inherit;text-decoration:none}

.site-header{
  max-width:1180px;
  margin:0 auto;
  padding:22px 24px;
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  gap:24px;
}
.brand{display:flex;align-items:center;gap:11px;font-weight:800;letter-spacing:.12em;font-size:.92rem}
.brand-mark{width:34px;height:34px;display:inline-flex}
.brand-mark svg{width:100%;height:100%;fill:var(--ink)}
.brand-mark .accent{fill:var(--accent)}
.nav{display:flex;gap:30px;font-size:.92rem;color:var(--muted)}
.nav a:hover{color:var(--ink)}
.lang-switcher{display:flex;justify-content:flex-end;gap:6px}
.lang{
  border:1px solid transparent;
  background:transparent;
  color:var(--muted);
  border-radius:999px;
  padding:8px 10px;
  cursor:pointer;
  font-weight:650;
}
.lang.active{border-color:var(--line);background:var(--surface);color:var(--ink)}

main{max-width:1180px;margin:0 auto;padding:0 24px}
.hero{
  min-height:700px;
  display:grid;
  grid-template-columns:1.05fr .95fr;
  align-items:center;
  gap:56px;
  padding:72px 0 88px;
}
.eyebrow{
  text-transform:uppercase;
  letter-spacing:.16em;
  font-size:.74rem;
  font-weight:800;
  color:var(--accent-2);
  margin:0 0 18px;
}
h1{
  margin:0;
  font-size:clamp(3rem,7vw,6.6rem);
  line-height:.94;
  letter-spacing:-.055em;
  max-width:820px;
}
.hero-sub{
  max-width:650px;
  color:var(--muted);
  font-size:1.12rem;
  line-height:1.8;
  margin:28px 0 0;
}
.hero-actions{display:flex;gap:12px;margin-top:34px;flex-wrap:wrap}
.btn{
  padding:14px 19px;
  border-radius:12px;
  font-weight:750;
  font-size:.94rem;
  border:1px solid var(--line);
}
.btn.primary{background:var(--ink);color:#fff;border-color:var(--ink)}
.btn.secondary{background:#fff}
.btn:hover{transform:translateY(-1px)}
.hero-visual{
  position:relative;
  min-height:500px;
  display:flex;
  align-items:center;
  justify-content:center;
}
.orb{position:absolute;border-radius:50%;filter:blur(1px)}
.orb-1{width:320px;height:320px;background:rgba(47,115,255,.11);top:55px;right:30px}
.orb-2{width:210px;height:210px;background:rgba(12,24,48,.06);bottom:40px;left:30px}
.panel{
  position:relative;
  width:min(100%,460px);
  background:rgba(255,255,255,.78);
  border:1px solid rgba(223,230,239,.92);
  backdrop-filter:blur(16px);
  box-shadow:var(--shadow);
  border-radius:28px;
  overflow:hidden;
}
.panel-top{height:52px;border-bottom:1px solid var(--line);display:flex;gap:7px;align-items:center;padding:0 20px}
.dot{width:8px;height:8px;border-radius:50%;background:#cbd4e0}
.panel-grid{display:grid;gap:14px;padding:20px}
.metric{
  background:#fff;
  border:1px solid var(--line);
  border-radius:18px;
  padding:22px;
  min-height:108px;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
}
.metric-label{font-size:.72rem;letter-spacing:.15em;color:var(--muted);font-weight:800}
.metric strong{font-size:1.13rem}

.section{padding:100px 0}
.section-head{max-width:780px;margin-bottom:40px}
h2{
  margin:0;
  font-size:clamp(2rem,4.5vw,4.2rem);
  letter-spacing:-.045em;
  line-height:1.05;
}
.cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.card{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:30px;
  min-height:240px;
}
.card-num{font-size:.76rem;letter-spacing:.16em;color:var(--accent);font-weight:800}
.card h3{font-size:1.32rem;margin:54px 0 12px}
.card p{margin:0;color:var(--muted);line-height:1.75}

.split-section{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:64px;
  border-top:1px solid var(--line);
}
.about-copy{font-size:1.08rem;line-height:1.9;color:var(--muted)}
.about-copy p:first-child{margin-top:0}

.contact{padding-bottom:84px}
.contact-box{
  background:var(--ink);
  color:#fff;
  border-radius:32px;
  padding:46px;
  display:grid;
  grid-template-columns:1fr auto;
  gap:36px;
  align-items:end;
}
.contact-box .eyebrow{color:#8db4ff}
.contact-box p{color:#c9d3e3;line-height:1.7;max-width:660px}
.contact-mail{
  font-size:clamp(1rem,2vw,1.35rem);
  font-weight:800;
  padding-bottom:4px;
  border-bottom:1px solid rgba(255,255,255,.35);
}

footer{
  max-width:1180px;
  margin:0 auto;
  padding:26px 24px 44px;
  border-top:1px solid var(--line);
  display:flex;
  justify-content:space-between;
  gap:24px;
  color:var(--muted);
  font-size:.85rem;
}

@media (max-width: 820px){
  .site-header{grid-template-columns:1fr auto}
  .nav{display:none}
  .hero{grid-template-columns:1fr;min-height:auto;padding-top:56px}
  .hero-visual{min-height:380px}
  .cards{grid-template-columns:1fr}
  .split-section{grid-template-columns:1fr;gap:32px}
  .contact-box{grid-template-columns:1fr}
  footer{flex-direction:column}
}
@media (max-width: 520px){
  .brand-text{font-size:.78rem}
  .site-header, main, footer{padding-left:16px;padding-right:16px}
  .lang{padding:7px 8px;font-size:.78rem}
  .hero{padding-top:40px}
  .panel{border-radius:22px}
  .contact-box{padding:28px}
}