:root {
  --ink: #071a33;
  --muted: #52657d;
  --paper: #ffffff;
  --soft: #f4f8ff;
  --navy: #002e6d;
  --cobalt: #246bfd;
  --purple: #5521e8;
  --magenta: #f540ff;
  --line: #dbe6f4;
  --shell: min(1220px, calc(100% - 56px));
  font-family: "Segoe UI Variable Text", "Segoe UI", Arial, sans-serif;
}

html { background: var(--paper); }

body {
  color: var(--ink);
  background:
    radial-gradient(circle at 94% 18%, rgba(36, 107, 253, .08), transparent 28rem),
    linear-gradient(180deg, #fbfdff 0%, #ffffff 34%);
}

h1, h2, h3, .brand, .service h3, .metric strong {
  font-family: "Segoe UI Variable Display", "Segoe UI", Arial, sans-serif;
}

em { color: var(--cobalt); }

.site-header {
  position: absolute;
  top: 18px;
  color: var(--navy);
}

.nav {
  height: 88px;
  padding: 8px 18px;
  border: 1px solid rgba(0, 46, 109, .1);
  border-radius: 30px;
  background: rgba(255, 255, 255, .84);
  box-shadow: 0 20px 60px rgba(2, 30, 69, .08);
  backdrop-filter: blur(18px);
}

.brand-lockup { gap: 0; }
.brand-lockup img {
  width: 238px;
  height: auto;
  max-height: 72px;
  object-fit: contain;
}

.nav-links { gap: 30px; font-weight: 650; }
.nav-links a { opacity: .76; }
.nav-links a:hover, .nav-links a:focus { color: var(--cobalt); }
.nav-cta {
  border: 0;
  border-radius: 999px;
  padding: 13px 20px;
  color: #fff;
  background: var(--navy);
  box-shadow: 0 12px 28px rgba(0, 46, 109, .18);
}
.nav-links .nav-cta:hover, .nav-links .nav-cta:focus { color: #fff; background: var(--cobalt); }

.hero {
  min-height: 850px;
  overflow: hidden;
  color: var(--ink);
  background:
    radial-gradient(circle at 84% 48%, rgba(245, 64, 255, .09), transparent 12rem),
    radial-gradient(circle at 78% 48%, rgba(36, 107, 253, .12), transparent 27rem),
    linear-gradient(145deg, #ffffff 8%, #f4f8ff 58%, #eef4ff 100%);
}

.hero::after {
  inset: auto -8% 9% auto;
  width: min(720px, 64vw);
  height: min(360px, 34vw);
  border-radius: 50%;
  background:
    radial-gradient(ellipse at 26% 50%, transparent 46%, rgba(0, 46, 109, .13) 46.5%, rgba(36, 107, 253, .12) 48%, transparent 49%),
    radial-gradient(ellipse at 74% 50%, transparent 46%, rgba(36, 107, 253, .14) 46.5%, rgba(0, 46, 109, .12) 48%, transparent 49%);
  transform: rotate(-7deg);
  z-index: -1;
}

.hero::before {
  content: "";
  position: absolute;
  right: 13%;
  top: 47%;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: var(--magenta);
  box-shadow: 0 0 0 12px rgba(245, 64, 255, .08), 0 0 50px rgba(245, 64, 255, .35);
}

.hero-orb {
  display: block;
  width: 520px;
  height: 220px;
  right: -120px;
  top: 180px;
  border: 0;
  border-radius: 50%;
  background: radial-gradient(ellipse at center, transparent 62%, rgba(36, 107, 253, .12) 63%, transparent 64%);
  box-shadow: none;
  transform: rotate(8deg);
}

.hero-grid {
  grid-template-columns: minmax(0, 850px) 1fr;
  align-items: center;
  padding-top: 154px;
}

.hero-brand { margin-bottom: 28px; }
.hero-brand img {
  width: min(520px, 74vw);
  height: auto;
  max-height: none;
  filter: none;
}

.hero .eyebrow {
  color: var(--purple);
  font-family: inherit;
  font-weight: 750;
}

.hero h1 {
  max-width: 840px;
  margin-bottom: 26px;
  color: var(--navy);
  font-family: inherit;
  font-size: clamp(54px, 6.2vw, 82px);
  font-weight: 720;
  line-height: .98;
  letter-spacing: -.052em;
}
.hero h1 em { color: var(--cobalt); }
.hero-lead { max-width: 700px; color: var(--muted); font-size: 18px; }

.button {
  min-height: 52px;
  border-radius: 999px;
  padding: 15px 24px;
  font-family: inherit;
  font-weight: 700;
  box-shadow: 0 12px 30px rgba(0, 46, 109, .09);
}
.button.primary { color: #fff; background: var(--navy); }
.button.primary:hover { color: #fff; background: var(--cobalt); }
.button.ghost { color: var(--navy); border-color: rgba(0, 46, 109, .2); background: rgba(255,255,255,.7); }
.scroll-cue { color: var(--muted); }

.section { padding: 112px 0; }
.intro { position: relative; }
.intro::before {
  content: "";
  position: absolute;
  left: -11rem;
  top: 4rem;
  width: 28rem;
  height: 11rem;
  border: 1px solid rgba(36, 107, 253, .1);
  border-radius: 50%;
  transform: rotate(-12deg);
}
.intro-copy h2, .section-head h2, .impact h2, .cta h2, .showcase-heading h2 {
  color: var(--navy);
  font-weight: 720;
  letter-spacing: -.045em;
}
.intro .section-kicker {
  width: fit-content;
  padding: 10px 15px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--navy);
  background: var(--soft);
}
.intro-copy > p { color: var(--muted); }
.team-names strong { color: var(--navy); }
.principles { border-top: 0; gap: 18px; padding-top: 26px; }
.principles article {
  padding: 26px;
  border: 1px solid var(--line);
  border-radius: 26px;
  background: #fff;
  box-shadow: 0 18px 54px rgba(0, 46, 109, .06);
}
.principles span { border-radius: 50%; background: var(--cobalt); }

.services { background: linear-gradient(180deg, var(--soft), #fbfdff); }
.section-head { margin-bottom: 52px; }
.section-head .eyebrow.dark { color: var(--cobalt); }
.service-list { border: 0; }
.service {
  margin-bottom: 14px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 26px;
  background: rgba(255,255,255,.9);
  box-shadow: 0 14px 38px rgba(0, 46, 109, .045);
}
.service summary { padding: 26px 28px; }
.service-num { color: var(--cobalt); }
.service-icon { border-radius: 50%; }
.service[open] .service-icon { background: var(--cobalt); border-color: var(--cobalt); }
.service-body { padding: 0 70px 30px 98px; }
.service-body li { border-radius: 999px; }

.visual-showcase {
  color: #fff;
  background:
    radial-gradient(circle at 12% 0, rgba(36, 107, 253, .38), transparent 28rem),
    linear-gradient(145deg, #06162d, #082954);
}
.showcase-heading h2 { color: #fff; }
.visual-card { border-radius: 34px; }
.visual-card::after { border-radius: inherit; }

.impact {
  margin: 0 20px;
  border-radius: 58px;
  background:
    radial-gradient(circle at 88% 12%, rgba(245, 64, 255, .2), transparent 18rem),
    linear-gradient(120deg, var(--navy), #053f93);
}
.impact h2 { color: #fff; }
.metric { border-left-color: rgba(255,255,255,.25); }
.metric strong { color: #fff; }

.platform-feature { gap: 18px; }
.platform-feature article,
.platform-feature article:first-child,
.platform-feature article.hot {
  min-height: 248px;
  padding: 32px;
  border: 1px solid var(--line);
  border-radius: 28px;
  color: var(--ink);
  background: #fff;
  box-shadow: 0 18px 45px rgba(0, 46, 109, .06);
}
.platform-feature article.hot { color: #fff; border-color: transparent; background: linear-gradient(145deg, var(--navy), var(--cobalt)); }
.tech-marquee { border-color: var(--line); }

.cta {
  position: relative;
  margin: 0 20px 20px;
  overflow: hidden;
  border-radius: 58px;
  background:
    radial-gradient(ellipse at 85% 50%, transparent 38%, rgba(36, 107, 253, .28) 39%, transparent 41%),
    radial-gradient(circle at 18% 12%, rgba(245, 64, 255, .15), transparent 18rem),
    linear-gradient(135deg, #06162d, #073a7d);
}
.cta::before { display: none; }
.cta h2 { color: #fff; }
.contact-card {
  border-color: rgba(255,255,255,.18);
  border-radius: 28px;
  background: rgba(255,255,255,.08);
  box-shadow: 0 18px 50px rgba(0,0,0,.16);
}
.contact-links a { border-radius: 999px; }
.contact-links a:first-child { color: #fff; border-color: var(--cobalt); background: var(--cobalt); }

footer {
  color: var(--muted);
  background: #f5f8fd;
}
.footer-brand img { width: 240px; height: auto; max-height: 88px; }

.nav-links a:focus-visible, .button:focus-visible, .service summary:focus-visible {
  outline-color: var(--cobalt);
}

@media (max-width: 850px) {
  :root { --shell: min(100% - 28px, 680px); }
  .site-header { top: 10px; }
  .nav { height: 76px; padding-inline: 13px; border-radius: 24px; }
  .brand-lockup img { width: 180px; max-height: 58px; }
  .menu-toggle span:not(.sr-only) { background: var(--navy); }
  .nav-links {
    top: 84px;
    left: 14px;
    right: 14px;
    border: 1px solid var(--line);
    border-radius: 24px;
    color: var(--navy);
    background: rgba(255,255,255,.98);
    box-shadow: 0 24px 60px rgba(0,46,109,.14);
  }
  .nav-cta { color: #fff !important; }
  .hero { min-height: 820px; background: linear-gradient(150deg, #fff 0%, #f3f7ff 72%, #edf3ff 100%); }
  .hero-grid { padding-top: 128px; }
  .hero-brand img { width: min(440px, 92vw); }
  .hero::after { width: 620px; height: 300px; right: -390px; bottom: 5%; }
  .hero::before { right: 11%; top: 31%; }
  .hero h1 { font-size: clamp(44px, 13vw, 62px); }
  .hero-lead { font-size: 16px; }
  .scroll-cue { display: none; }
  .intro::before { display: none; }
  .principles article { padding: 22px; }
  .service { border-radius: 22px; }
  .service summary { padding: 22px 18px; }
  .service-body { padding: 0 22px 24px 60px; }
  .visual-card { border-radius: 28px; }
  .impact, .cta { margin-inline: 10px; border-radius: 34px; }
  .platform-feature article,
  .platform-feature article:first-child,
  .platform-feature article.hot { border-radius: 24px; }
  .footer-grid { text-align: center; }
  .footer-brand { justify-content: center; }
}

@media (prefers-reduced-motion: reduce) {
  .hero::after, .hero-orb { transform: none; }
}