.section { position: relative; padding: var(--section-pad) var(--gutter); overflow: hidden; }
.section__inner { position: relative; max-width: var(--max-w); margin: 0 auto; }

.tone-dark { background: var(--c-dark); color: var(--c-on-dark); }
.tone-light { background: var(--c-light); color: var(--c-on-light); }
.tone-primary { background: var(--c-primary); color: var(--c-on-primary); }

.eyebrow {
  display: inline-block; margin-bottom: 1.5rem;
  font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase;
}
.tone-dark .eyebrow { color: var(--c-accent); }
.tone-light .eyebrow { color: var(--c-link-on-light); }
.tone-primary .eyebrow { color: var(--c-on-primary); }

.section-head { max-width: 62rem; margin-bottom: clamp(2.5rem, 6vw, 5rem); }
.section-head p { margin-top: 1.5rem; max-width: 40rem; font-size: var(--fs-lead); }
.tone-dark .section-head p, .tone-dark .lead { color: var(--c-on-dark-muted); }
.tone-light .section-head p, .tone-light .lead { color: var(--c-on-light-muted); }

/* Hero */
.hero { min-height: 100vh; min-height: 100svh; display: flex; align-items: center; padding-top: 8rem; }
.hero .section__inner { width: 100%; }
.hero h1 { max-width: 15ch; }
.hero .lead { margin-top: 2rem; max-width: 36rem; font-size: var(--fs-lead); }
.hero__actions { margin-top: 2.5rem; display: flex; flex-wrap: wrap; gap: 1rem; }
.hero__bg { position: absolute; inset: 0; pointer-events: none; }
.orb { position: absolute; border-radius: 50%; }
.orb--1 { width: min(60vw, 42rem); aspect-ratio: 1; right: -12vw; top: -8vw;
  background: radial-gradient(circle at 35% 35%, rgba(14,165,233,0.55), rgba(14,165,233,0) 68%); }
.orb--2 { width: min(40vw, 28rem); aspect-ratio: 1; left: -10vw; bottom: -6vw;
  background: radial-gradient(circle at 60% 40%, rgba(45,212,191,0.32), rgba(45,212,191,0) 68%); }
.hero__grid { position: absolute; inset: -10% 0; opacity: 0.5;
  background-image: linear-gradient(var(--c-line-dark) 1px, transparent 1px), linear-gradient(90deg, var(--c-line-dark) 1px, transparent 1px);
  background-size: 64px 64px;
  -webkit-mask-image: radial-gradient(ellipse at 50% 40%, #000 0%, transparent 70%);
  mask-image: radial-gradient(ellipse at 50% 40%, #000 0%, transparent 70%); }

/* Services */
.cards { display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); }

/* Why */
.why-grid { display: grid; gap: 2.5rem 3rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr)); }
.why__bg { position: absolute; inset: 0; pointer-events: none; }
.why__ring { position: absolute; border: 2px solid rgba(3,27,46,0.18); border-radius: 50%; }
.why__ring--1 { width: 46rem; aspect-ratio: 1; right: -16rem; top: -10rem; }
.why__ring--2 { width: 30rem; aspect-ratio: 1; left: -10rem; bottom: -12rem; }

/* Process */
.steps { display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); }

/* Stats */
.stats { display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr)); margin-bottom: 4rem; }
.testimonials { display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr)); }

/* Footer */
.footer { position: relative; padding: var(--section-pad) var(--gutter) 0; overflow: hidden; }
.footer__inner { max-width: var(--max-w); margin: 0 auto; display: grid; gap: 3rem; }
.footer h2 { max-width: 16ch; }
.wordmark {
  display: block; width: 100%; max-width: 100%; overflow: hidden;
  margin-top: clamp(2rem, 6vw, 5rem);
  font-family: var(--font-display); font-weight: 600; letter-spacing: -0.05em;
  font-size: var(--fs-wordmark); line-height: 0.82; text-align: center;
  color: var(--c-primary); user-select: none; white-space: nowrap;
  padding-bottom: 0.04em;
}

.legal { padding: 1.5rem var(--gutter); background: var(--c-light); color: var(--c-on-light-muted); text-align: center; }