:root{
  --cream:#F9F8F4;
  --ink:#2D2926;
  --blue:#0777C3;
  --coral:#F26A4B;
  --plum:#1B0F2E;
  --muted:#6b6560;
  --line:#e7e3da;
  --radius:16px;
  --wrap:1120px;
  font-synthesis:none;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;background:var(--cream);color:var(--ink);
  font-family:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  line-height:1.55;-webkit-font-smoothing:antialiased;
}
a{color:inherit;text-decoration:none}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 24px}

/* nav */
.nav{position:sticky;top:0;z-index:50;background:rgba(249,248,244,.82);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.nav__row{display:flex;align-items:center;gap:24px;height:68px}
.brand{font-weight:800;font-size:22px;letter-spacing:-.02em}
.brand span{color:var(--blue)}
.brand--sm{font-size:18px}
.nav__links{display:flex;gap:28px;margin-left:auto;font-size:15px;color:var(--muted)}
.nav__links a:hover{color:var(--ink)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;background:var(--blue);color:#fff;font-weight:600;
  padding:13px 22px;border-radius:12px;font-size:15px;transition:transform .15s ease,background .15s ease;white-space:nowrap}
.btn:hover{background:#0668aa;transform:translateY(-1px)}
.btn--sm{padding:9px 16px;font-size:14px;margin-left:0}
.nav__row .btn--sm{margin-left:0}
.btn--ghost{background:transparent;color:var(--ink);border:1px solid var(--line)}
.btn--ghost:hover{background:#fff;border-color:#d8d2c6}
.btn--onDark{color:#fff;border-color:rgba(255,255,255,.4)}
.btn--onDark:hover{background:rgba(255,255,255,.1)}
.btn--light{background:#fff;color:var(--plum)}
.btn--light:hover{background:#f0eee8}

/* eyebrow / titles */
.eyebrow{text-transform:uppercase;letter-spacing:.14em;font-size:12.5px;font-weight:700;color:var(--blue);margin:0 0 14px}
.eyebrow--center{text-align:center}
.section{padding:96px 0}
.section--tint{background:linear-gradient(180deg,#fff, #faf9f5)}
.section__title{font-size:clamp(28px,4vw,42px);line-height:1.1;letter-spacing:-.02em;text-align:center;margin:0 0 52px;font-weight:800}
.section__title--left{text-align:left;margin-bottom:22px}

/* hero */
.hero{padding:80px 0 64px;overflow:hidden}
.hero__grid{display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:center}
.hero h1{font-size:clamp(34px,5.4vw,60px);line-height:1.03;letter-spacing:-.03em;margin:0 0 22px;font-weight:800}
.lead{font-size:19px;color:var(--muted);max-width:46ch;margin:0 0 30px}
.lead--muted{max-width:52ch}
.hero__cta{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:44px}
.hero__stats{list-style:none;display:flex;gap:38px;padding:0;margin:0;flex-wrap:wrap}
.hero__stats b{display:block;font-size:26px;letter-spacing:-.02em}
.hero__stats span{font-size:14px;color:var(--muted)}

/* hero art */
.hero__art{position:relative;min-height:380px}
.orb{position:absolute;border-radius:50%;filter:blur(6px);opacity:.9}
.orb--1{width:300px;height:300px;right:-30px;top:-10px;background:radial-gradient(circle at 30% 30%,#0777C3,#1B0F2E)}
.orb--2{width:180px;height:180px;left:10px;bottom:0;background:radial-gradient(circle at 40% 40%,#F26A4B,#d8452a)}
.card-float{position:absolute;background:rgba(255,255,255,.92);backdrop-filter:blur(6px);border:1px solid var(--line);
  border-radius:14px;padding:14px 16px;font-size:14px;font-weight:600;box-shadow:0 12px 30px rgba(27,15,46,.14);
  display:flex;align-items:center;gap:10px}
.card-float b{margin-left:6px;color:var(--blue)}
.card-float--a{top:24px;left:-6px}
.card-float--b{top:150px;right:-10px}
.card-float--c{bottom:16px;left:30px}
.dot{width:9px;height:9px;border-radius:50%;background:var(--blue);box-shadow:0 0 0 4px rgba(7,119,195,.16)}
.dot--coral{background:var(--coral);box-shadow:0 0 0 4px rgba(242,106,75,.16)}

/* grids */
.grid{display:grid;gap:22px}
.grid--4{grid-template-columns:repeat(4,1fr)}
.grid--3{grid-template-columns:repeat(3,1fr)}
.feature{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:28px 24px;transition:transform .18s ease,box-shadow .18s ease}
.feature:hover{transform:translateY(-4px);box-shadow:0 18px 40px rgba(27,15,46,.10)}
.feature__ico{width:46px;height:46px;border-radius:12px;background:rgba(7,119,195,.10);color:var(--blue);
  display:grid;place-items:center;font-size:20px;margin-bottom:16px}
.feature h3{margin:0 0 8px;font-size:19px}
.feature p{margin:0;color:var(--muted);font-size:15px}

/* approach */
.approach__grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:56px;align-items:start}
.steps{list-style:none;margin:0;padding:0;display:grid;gap:18px}
.steps li{display:flex;gap:18px;background:#fff;border:1px solid var(--line);border-radius:14px;padding:20px 22px}
.steps b{color:var(--coral);font-size:20px;min-width:34px}
.steps h4{margin:0 0 4px;font-size:17px}
.steps p{margin:0;color:var(--muted);font-size:14.5px}

/* metrics */
.metrics .metric{background:var(--plum);color:#fff;border-radius:var(--radius);padding:34px 28px;text-align:center}
.metric b{display:block;font-size:44px;letter-spacing:-.03em;color:#fff;margin-bottom:10px;background:linear-gradient(90deg,#7db9e6,#F26A4B);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.metric span{color:#c9c2d4;font-size:15px}

/* cta */
.cta{padding:0 0 96px}
.cta__box{background:linear-gradient(120deg,var(--plum),#33204f);color:#fff;border-radius:24px;padding:56px 48px;
  display:flex;justify-content:space-between;align-items:center;gap:40px;flex-wrap:wrap}
.cta__box h2{font-size:clamp(26px,3.5vw,36px);margin:0 0 10px;letter-spacing:-.02em}
.cta__box p{margin:0;color:#c9c2d4;max-width:44ch}
.cta__contacts{display:flex;gap:14px;flex-wrap:wrap}

/* footer */
.foot{border-top:1px solid var(--line);padding:36px 0;background:#fff}
.foot__row{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap}
.foot__copy{color:var(--muted);font-size:14px;margin:0}
.foot__mail{font-size:14px;margin:0}
.foot__mail a{color:var(--blue)}

/* responsive */
@media (max-width:920px){
  .hero__grid{grid-template-columns:1fr;gap:36px}
  .hero__art{min-height:320px;order:-1}
  .grid--4{grid-template-columns:repeat(2,1fr)}
  .approach__grid{grid-template-columns:1fr;gap:32px}
  .nav__links{display:none}
}
@media (max-width:560px){
  .grid--4,.grid--3{grid-template-columns:1fr}
  .section{padding:64px 0}
  .cta__box{padding:36px 26px}
  .hero__stats{gap:24px}
}