/* ==========================================================================
   Current — a design studio
   Coastal palette · Fraunces + Inter · hand-built for 2026
   ========================================================================== */

:root {
  /* Monochrome + electric blue */
  --black:      #0A0A0A;
  --gray-900:   #141414;
  --gray-800:   #1F1F1F;
  --gray-700:   #2E2E2E;
  --gray-600:   #525252;
  --gray-500:   #737373;
  --gray-400:   #A3A3A3;
  --gray-300:   #D4D4D4;
  --gray-200:   #E5E5E5;
  --gray-100:   #F1F1F1;
  --gray-50:    #FAFAFA;
  --white:      #FFFFFF;
  --blue:       #2563EB;
  --blue-dark:  #1D4ED8;
  --blue-soft:  #EFF6FF;

  /* Legacy aliases mapped to the new system (keep old names working) */
  --navy:       #0A0A0A;
  --navy-2:     #141414;
  --navy-3:     #1F1F1F;
  --tide:       #2563EB;
  --current:    #3B82F6;
  --foam:       #93C5FD;
  --cream:      #FFFFFF;
  --cream-2:    #FAFAFA;
  --sand:       #F1F1F1;
  --coral:      #2563EB;
  --coral-2:    #1D4ED8;
  --ink:        #0A0A0A;
  --ink-60:     rgba(10, 10, 10, 0.62);
  --ink-40:     rgba(10, 10, 10, 0.42);
  --ink-12:     rgba(10, 10, 10, 0.10);
  --ink-06:     rgba(10, 10, 10, 0.05);
  --white-80:   rgba(255, 255, 255, 0.82);
  --white-20:   rgba(255, 255, 255, 0.22);
  --white-12:   rgba(255, 255, 255, 0.12);

  /* Type — Inter everywhere, different weights for hierarchy */
  --display:    "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --sans:       "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;

  /* Scale */
  --fs-xs:      clamp(0.78rem, 0.76rem + 0.1vw, 0.84rem);
  --fs-sm:      clamp(0.88rem, 0.84rem + 0.2vw, 0.95rem);
  --fs-base:    clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
  --fs-lg:      clamp(1.125rem, 1.05rem + 0.35vw, 1.25rem);
  --fs-xl:      clamp(1.35rem, 1.2rem + 0.7vw, 1.6rem);
  --fs-2xl:     clamp(1.75rem, 1.4rem + 1.5vw, 2.4rem);
  --fs-3xl:     clamp(2.2rem, 1.6rem + 2.8vw, 3.5rem);
  --fs-4xl:     clamp(2.8rem, 1.8rem + 4.5vw, 5.5rem);

  /* Spacing */
  --sp-1:       0.25rem;
  --sp-2:       0.5rem;
  --sp-3:       0.75rem;
  --sp-4:       1rem;
  --sp-5:       1.5rem;
  --sp-6:       2rem;
  --sp-7:       3rem;
  --sp-8:       4rem;
  --sp-9:       6rem;
  --sp-10:      8rem;

  /* Layout */
  --max-w:      1200px;
  --radius-sm:  8px;
  --radius:     14px;
  --radius-lg:  22px;
  --radius-pill: 999px;

  /* Motion */
  --ease:       cubic-bezier(0.22, 1, 0.36, 1);
  --dur:        0.6s;
}

/* ==========================================================================
   Reset / base
   ========================================================================== */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: var(--sans);
  font-size: var(--fs-base);
  line-height: 1.6;
  color: var(--black);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

img,
svg,
video {
  display: block;
  max-width: 100%;
  height: auto;
}

h1, h2, h3, h4 {
  font-family: var(--sans);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.025em;
  margin: 0 0 var(--sp-4);
}

h3 {
  font-size: var(--fs-xl);
  letter-spacing: -0.01em;
}

p {
  margin: 0 0 var(--sp-4);
}

a {
  color: inherit;
  text-decoration: none;
  transition: color 0.2s var(--ease), opacity 0.2s var(--ease);
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 3px;
  border-radius: 4px;
}

ul, ol {
  padding: 0;
  margin: 0;
}

li {
  list-style: none;
}

em {
  font-style: italic;
}

strong {
  font-weight: 600;
}

::selection {
  background: var(--blue);
  color: var(--white);
}

.skip-link {
  position: absolute;
  top: -100px;
  left: var(--sp-4);
  background: var(--black);
  color: var(--white);
  padding: var(--sp-3) var(--sp-4);
  border-radius: var(--radius-sm);
  z-index: 100;
  font-weight: 600;
  transition: top 0.25s var(--ease);
}
.skip-link:focus {
  top: var(--sp-4);
}

.container {
  width: 100%;
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 var(--sp-5);
}
@media (min-width: 768px) {
  .container {
    padding: 0 var(--sp-6);
  }
}

.muted { color: var(--ink-60); }
.accent { color: var(--blue); font-weight: 700; }

/* ==========================================================================
   Nav
   ========================================================================== */

.nav {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--blue);
  backdrop-filter: saturate(140%) blur(14px);
  -webkit-backdrop-filter: saturate(140%) blur(14px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  transition: box-shadow 0.25s var(--ease), border-color 0.25s var(--ease);
}

.nav.is-scrolled {
  border-bottom-color: rgba(255, 255, 255, 0.18);
  box-shadow: 0 12px 32px -16px rgba(10, 10, 10, 0.45);
}

.nav__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-5);
  padding: 0.95rem var(--sp-5);
  min-height: 68px;
}

@media (min-width: 768px) {
  .nav__inner {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    padding: 1rem var(--sp-6);
    min-height: 72px;
  }
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  color: var(--black);
  font-family: var(--sans);
  font-weight: 700;
  font-size: 1.2rem;
  letter-spacing: -0.035em;
  justify-self: start;
}

.brand__mark {
  width: 32px;
  height: 16px;
  color: var(--blue);
  overflow: visible;
  flex-shrink: 0;
}

.brand__word {
  line-height: 1;
}

.brand--light {
  color: var(--white);
}
.brand--light .brand__mark {
  color: var(--blue);
}

/* Brand inside the blue nav — white text + white wave */
.nav .brand {
  color: var(--white);
}
.nav .brand__mark {
  color: var(--white);
}
.nav .brand:hover {
  opacity: 0.9;
}

.nav__links {
  display: none;
  gap: var(--sp-6);
  font-size: var(--fs-sm);
  font-weight: 500;
  color: rgba(255, 255, 255, 0.88);
  justify-self: center;
  list-style: none;
  margin: 0;
  padding: 0;
}
@media (min-width: 860px) {
  .nav__links {
    display: flex;
  }
}
.nav__links a {
  position: relative;
  padding: 0.4rem 0.1rem;
  transition: color 0.2s var(--ease);
}
.nav__links a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0.1rem;
  height: 1.5px;
  background: var(--white);
  border-radius: 2px;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.3s var(--ease);
}
.nav__links a:hover {
  color: var(--white);
}
.nav__links a:hover::after {
  transform: scaleX(1);
}

/* --grad-angle is used by the gradient-border buttons + process cards. */
@property --grad-angle {
  syntax: "<angle>";
  initial-value: 0deg;
  inherits: false;
}

@keyframes nav-cta-spin {
  to { --grad-angle: 360deg; }
}

/* Nav CTA — clean white pill on the blue nav. On hover the fill picks
   up the same blue-gradient treatment as the page's other primary CTAs
   (the `.btn--primary:not(.nav__cta)` rule handles that automatically),
   so we just need to set up the resting state here. */
.nav .btn--primary {
  color: var(--blue);
  padding: 0.6rem 1.1rem 0.6rem 1.2rem;
  font-weight: 600;
  background: var(--white);
  border: 1.5px solid var(--white);
  box-shadow: 0 8px 22px -12px rgba(10, 10, 10, 0.4);
  animation: none;
}
.nav .btn--primary .btn__arrow {
  width: 16px;
  height: 16px;
}
.nav .btn--primary:hover {
  color: var(--white);
  background: var(--blue-dark);
  border-color: var(--white);
  box-shadow: 0 12px 28px -12px rgba(10, 10, 10, 0.55);
}

.nav__cta {
  display: none;
  justify-self: end;
}
@media (min-width: 640px) {
  .nav__cta {
    display: inline-flex;
  }
}

/* ==========================================================================
   Buttons
   ========================================================================== */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  padding: 0.9rem 1.5rem;
  font: 500 var(--fs-sm)/1 var(--sans);
  letter-spacing: 0.01em;
  border: 1.5px solid transparent;
  border-radius: var(--radius-pill);
  cursor: pointer;
  transition:
    transform 0.2s var(--ease),
    background 0.2s var(--ease),
    color 0.2s var(--ease),
    border-color 0.2s var(--ease),
    box-shadow 0.25s var(--ease);
  white-space: nowrap;
}

.btn:hover {
  transform: translateY(-1px);
}

.btn--primary {
  background: var(--blue);
  color: var(--white);
  border-color: var(--blue);
  box-shadow: 0 6px 20px -8px rgba(37, 99, 235, 0.55);
}
.btn--primary:hover {
  background: var(--blue-dark);
  border-color: var(--blue-dark);
  box-shadow: 0 10px 26px -8px rgba(37, 99, 235, 0.6);
}

.btn--ghost {
  background: transparent;
  color: var(--black);
  border-color: var(--gray-300);
}
.btn--ghost:hover {
  background: var(--black);
  color: var(--white);
  border-color: var(--black);
}

.btn--ghost.btn--dark {
  color: var(--white);
  border-color: var(--gray-700);
}
.btn--ghost.btn--dark:hover {
  background: var(--white);
  color: var(--black);
  border-color: var(--white);
}

.btn--block {
  width: 100%;
}

/* White pill with a spinning multi-color gradient border. Same technique
   as the nav CTA — white wrapped in a linear-gradient so the multi-layer
   background shorthand stays valid (a raw color on a non-final layer
   would throw the whole rule out). */
.btn--gradient-border {
  color: var(--blue);
  font-weight: 600;
  background:
    linear-gradient(var(--white), var(--white)) padding-box,
    conic-gradient(
      from var(--grad-angle),
      #2563EB 0deg,
      #FFFFFF 90deg,
      #3B82F6 180deg,
      #FFFFFF 270deg,
      #2563EB 360deg
    ) border-box;
  border: 2px solid transparent;
  box-shadow: 0 10px 28px -14px rgba(37, 99, 235, 0.45);
  animation: nav-cta-spin 5s linear infinite;
}
.btn--gradient-border:hover {
  color: var(--blue-dark);
  transform: translateY(-1px);
  box-shadow: 0 16px 34px -14px rgba(37, 99, 235, 0.6);
  animation-duration: 2.5s;
}
.btn--gradient-border .btn__arrow {
  color: var(--blue);
}

.btn__arrow {
  width: 18px;
  height: 18px;
  transition: transform 0.25s var(--ease);
}
.btn:hover .btn__arrow {
  transform: translateX(3px);
}

/* ==========================================================================
   Hero
   ========================================================================== */

.hero {
  position: relative;
  padding: clamp(1rem, 2vw, 2rem) 0 clamp(2.5rem, 5vw, 4.5rem);
  overflow: hidden;
}

/* On desktop, the hero becomes a tall scroll runway and the inner content
   pins at the top. The animation in the monitor scrubs as the user scrolls
   through this section, then the page resumes normal scroll afterwards.
   IMPORTANT: overflow must be visible on .hero — `overflow: hidden` on an
   ancestor breaks `position: sticky`. We move the clipping onto the sticky
   element itself, which is allowed. */
@media (min-width: 980px) {
  .hero {
    padding: 0;
    height: 220vh;
    overflow: visible;
  }
}

.hero__sticky {
  position: relative;
}
@media (min-width: 980px) {
  .hero__sticky {
    position: sticky;
    top: 0;
    height: 100vh;
    display: flex;
    align-items: center;
    /* Top padding sized to clear the fixed nav (~80px) with a small breath
       of room — was 5–7rem which left a huge gap below the nav. */
    padding: clamp(2.5rem, 4vh, 3.5rem) 0 clamp(1.5rem, 3vh, 2.5rem);
    box-sizing: border-box;
    overflow: hidden;
  }
}

/* ----- Static hero variant -------------------------------------------
   When the hero uses the static cutout image instead of the animated
   monitor canvas, we turn off the 220vh scroll runway and let the
   section flow naturally. Remove `.hero--static` to go back to the
   animated version. */
.hero--static {
  padding: clamp(1rem, 2vw, 2rem) 0 clamp(2.5rem, 5vw, 4.5rem);
}
@media (min-width: 980px) {
  .hero--static {
    height: auto;
    overflow: hidden;
  }
  .hero--static .hero__sticky {
    position: relative;
    top: auto;
    height: auto;
    padding: clamp(2rem, 4vh, 3.5rem) 0 clamp(2rem, 4vh, 3rem);
    overflow: visible;
  }
}

/* ----- Before/after compare slider -----------------------------------
   Large square container holding two identically-sized images stacked on
   top of each other. The "after" image is clipped from the right side
   with `clip-path: inset()` driven by a single `--pos` custom property
   set by script.js on pointermove / keypress, so the reveal is a pure
   CSS transform — no React, no canvas, no layout work per frame. */
.compare {
  --pos: 75%;
  position: relative;
  width: 100%;
  max-width: 560px;
  aspect-ratio: 1 / 1;
  margin: 0 auto;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--gray-100);
  user-select: none;
  touch-action: pan-y;
  cursor: ew-resize;
  box-shadow:
    0 36px 72px -34px rgba(10, 10, 10, 0.45),
    0 14px 28px -14px rgba(10, 10, 10, 0.18),
    0 0 0 1px rgba(10, 10, 10, 0.08);
}

.compare__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  pointer-events: none;
  -webkit-user-drag: none;
}

/* Clipped to show only from the handle position to the right edge.
   As --pos decreases (handle slides left), the left-side inset shrinks,
   revealing more of the after image. "Before" (old site) sits full-width
   underneath, so the left half of the frame shows the before image and
   the right half reveals the after image. */
.compare__img--after {
  clip-path: inset(0 0 0 var(--pos));
}

.compare__divider {
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--pos);
  width: 3px;
  margin-left: -1.5px;
  background: var(--white);
  box-shadow: 0 0 14px rgba(10, 10, 10, 0.35);
  pointer-events: none;
}

.compare__label {
  position: absolute;
  top: var(--sp-4);
  padding: 0.45rem 0.75rem;
  font: 700 var(--fs-xs) / 1 var(--sans);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--white);
  background: rgba(10, 10, 10, 0.62);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-radius: var(--radius-pill);
  pointer-events: none;
}
.compare__label--before { left: var(--sp-4); }
.compare__label--after  { right: var(--sp-4); }

.compare__handle {
  position: absolute;
  top: 50%;
  left: var(--pos);
  transform: translate(-50%, -50%);
  width: 52px;
  height: 52px;
  padding: 0;
  border-radius: 50%;
  background: var(--white);
  border: 2px solid var(--white);
  color: var(--blue);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: ew-resize;
  box-shadow:
    0 8px 22px -6px rgba(10, 10, 10, 0.4),
    0 0 0 3px rgba(37, 99, 235, 0.22);
  transition: transform 0.2s var(--ease), box-shadow 0.2s var(--ease);
}
.compare__handle:hover,
.compare.is-dragging .compare__handle {
  transform: translate(-50%, -50%) scale(1.08);
  box-shadow:
    0 10px 26px -6px rgba(10, 10, 10, 0.45),
    0 0 0 5px rgba(37, 99, 235, 0.3);
}
.compare__handle:focus-visible {
  outline: 3px solid var(--blue);
  outline-offset: 4px;
}

.compare__arrows {
  width: 24px;
  height: 24px;
}

@media (prefers-reduced-motion: reduce) {
  .compare__handle { transition: none; }
}

.hero__bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}

.wave {
  width: 100%;
  height: 100%;
}

.wave--hero {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -10%;
  height: 55%;
  min-height: 320px;
  opacity: 0.85;
}

.wave__path {
  transform-origin: center;
  animation: waveDrift 14s ease-in-out infinite;
}
.wave__path--1 {
  fill: var(--gray-100);
  opacity: 0.9;
}
.wave__path--2 {
  fill: var(--gray-200);
  opacity: 0.85;
  animation-duration: 18s;
  animation-direction: reverse;
}
.wave__path--3 {
  fill: var(--blue-soft);
  opacity: 0.9;
  animation-duration: 22s;
}

@keyframes waveDrift {
  0%, 100% { transform: translateX(0) translateY(0); }
  50%      { transform: translateX(-1.5%) translateY(-0.6%); }
}

.hero__inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-8);
  align-items: center;
}
@media (min-width: 980px) {
  .hero__inner {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
    gap: var(--sp-8);
  }
}

.hero__content {
  min-width: 0;
  max-width: 640px;
}

.hero__visual {
  min-width: 0;
  width: 100%;
  display: flex;
  justify-content: center;
  /* On mobile, show the monitor above the headline + text */
  order: -1;
  margin-bottom: var(--sp-2);
}
@media (min-width: 980px) {
  .hero__visual {
    order: 0;
    justify-self: end;
    justify-content: flex-end;
    max-width: 560px;
    margin-bottom: 0;
  }
}

/* ==========================================================================
   Monitor — frames the scroll-driven canvas inside the hero
   ========================================================================== */

.monitor {
  width: 100%;
  max-width: 520px;
  display: flex;
  flex-direction: column;
  align-items: center;
  filter: drop-shadow(0 30px 60px rgba(10, 10, 10, 0.18))
    drop-shadow(0 8px 16px rgba(10, 10, 10, 0.08));
}

.monitor__bezel {
  position: relative;
  width: 100%;
  background: linear-gradient(180deg, #2a2a2e 0%, #161618 100%);
  padding: 14px 14px 0;
  border-radius: 14px 14px 18px 18px;
  border: 1px solid rgba(255, 255, 255, 0.06);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    inset 0 -1px 0 rgba(0, 0, 0, 0.6);
}

.monitor__screen {
  position: relative;
  width: 100%;
  aspect-ratio: 1280 / 714;
  background: #050505;
  border-radius: 4px;
  overflow: hidden;
  box-shadow:
    inset 0 0 0 1px rgba(0, 0, 0, 0.8),
    inset 0 0 24px rgba(0, 0, 0, 0.5);
}

.monitor__canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  /* Subtle CRT-ish color tweak */
  filter: saturate(1.05) contrast(1.03) brightness(1.02);
}

/* Soft glare across the screen */
.monitor__glare {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(
    115deg,
    rgba(255, 255, 255, 0.09) 0%,
    rgba(255, 255, 255, 0) 28%,
    rgba(255, 255, 255, 0) 65%,
    rgba(255, 255, 255, 0.04) 100%
  );
  mix-blend-mode: screen;
}

/* Loading bar that sits inside the screen until frames are ready */
.monitor__loading {
  position: absolute;
  left: 50%;
  bottom: 16px;
  transform: translateX(-50%);
  z-index: 2;
  pointer-events: none;
  transition: opacity 0.5s var(--ease);
}
.monitor__loading.is-done { opacity: 0; }
.monitor__loading-bar {
  display: block;
  width: 110px;
  height: 2px;
  background: rgba(255, 255, 255, 0.15);
  border-radius: 2px;
  overflow: hidden;
}
.monitor__loading-fill {
  display: block;
  width: 0%;
  height: 100%;
  background: var(--white);
  transition: width 0.2s var(--ease);
}

/* Bottom chin with the Current logo */
.monitor__chin {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 30px;
  margin-top: 10px;
  margin-bottom: 0;
  border-top: 1px solid rgba(255, 255, 255, 0.04);
}
.monitor__logo {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  color: rgba(255, 255, 255, 0.78);
  font-family: var(--sans);
  font-weight: 700;
  font-size: 0.78rem;
  letter-spacing: -0.02em;
  line-height: 1;
}
.monitor__logo .brand__mark {
  width: 22px;
  height: 11px;
  color: rgba(255, 255, 255, 0.78);
  flex-shrink: 0;
}
.monitor__logo .brand__word {
  line-height: 1;
}

/* Stand */
.monitor__neck {
  width: 28%;
  height: 18px;
  background: linear-gradient(180deg, #1f1f22 0%, #131315 100%);
  border-radius: 0 0 6px 6px;
  border: 1px solid rgba(255, 255, 255, 0.04);
  border-top: none;
}
.monitor__stand {
  width: 55%;
  height: 8px;
  background: linear-gradient(180deg, #232327 0%, #131315 100%);
  border-radius: 4px;
  border: 1px solid rgba(255, 255, 255, 0.04);
  box-shadow: 0 6px 14px -6px rgba(10, 10, 10, 0.4);
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-3);
  padding: 0.45rem 0.9rem 0.45rem 0.75rem;
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-pill);
  font-size: var(--fs-xs);
  color: var(--gray-600);
  font-weight: 500;
  margin-bottom: var(--sp-6);
}

.eyebrow__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--blue);
  box-shadow: 0 0 0 0 rgba(37, 99, 235, 0.6);
  animation: pulse 2.4s infinite;
}

@keyframes pulse {
  0%   { box-shadow: 0 0 0 0 rgba(37, 99, 235, 0.5); }
  70%  { box-shadow: 0 0 0 10px rgba(37, 99, 235, 0); }
  100% { box-shadow: 0 0 0 0 rgba(37, 99, 235, 0); }
}

.hero__headline {
  font-size: var(--fs-4xl);
  line-height: 0.95;
  letter-spacing: -0.045em;
  margin-bottom: var(--sp-6);
  color: var(--black);
  font-weight: 700;
}

.hero__headline-accent {
  position: relative;
  display: inline-block;
  color: var(--blue);
}

.underline {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -0.12em;
  width: 100%;
  height: 0.3em;
  color: var(--blue);
  overflow: visible;
}

.underline path {
  stroke-dasharray: 600;
  stroke-dashoffset: 600;
  animation: drawUnderline 1.8s 0.6s var(--ease) forwards;
}

@keyframes drawUnderline {
  to { stroke-dashoffset: 0; }
}

.hero__sub {
  font-size: var(--fs-lg);
  color: var(--gray-600);
  max-width: 58ch;
  margin-bottom: var(--sp-7);
}

.hero__cta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  align-items: center;
  margin-bottom: var(--sp-4);
}

.hero__cta-note {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  font-size: var(--fs-xs);
  color: var(--gray-500);
  font-weight: 500;
  letter-spacing: 0.015em;
  margin: 0 0 var(--sp-8);
}
.hero__cta-dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #22C55E;
  box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.18);
  flex-shrink: 0;
}

.hero__meta {
  display: grid;
  gap: var(--sp-4);
  grid-template-columns: 1fr;
  padding-top: var(--sp-5);
  border-top: 1px solid var(--gray-200);
  max-width: 720px;
}
@media (min-width: 560px) {
  .hero__meta {
    grid-template-columns: 1fr 1fr;
    column-gap: var(--sp-6);
    row-gap: var(--sp-4);
  }
}
.hero__meta li {
  font-size: var(--fs-sm);
  color: var(--gray-600);
  line-height: 1.5;
}
.hero__meta strong {
  color: var(--black);
  display: block;
  font-weight: 600;
  margin-bottom: 0.15rem;
}

/* ==========================================================================
   Sections (shared)
   ========================================================================== */

.section {
  padding: clamp(2.5rem, 5vw, 4.5rem) 0;
  position: relative;
}

.section--dark {
  background: var(--black);
  color: var(--white);
  overflow: hidden;
}
.section--dark .muted { color: var(--gray-400); }

.section--cream {
  background: var(--gray-50);
}

.section__head {
  max-width: 760px;
  margin-bottom: var(--sp-6);
}
.section__head--center {
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

.section__label {
  display: inline-block;
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-weight: 600;
  color: var(--blue);
  margin-bottom: var(--sp-4);
}
.section__label--light {
  color: var(--blue);
}

.section__title {
  font-size: var(--fs-3xl);
  line-height: 1.05;
  color: inherit;
  margin-bottom: var(--sp-4);
  letter-spacing: -0.035em;
  font-weight: 700;
}
.section--dark .section__title { color: var(--white); }

.section__lede {
  font-size: var(--fs-lg);
  color: var(--gray-600);
  max-width: 62ch;
  margin: var(--sp-4) auto 0;
}
.section--dark .section__lede { color: var(--gray-400); }

/* ==========================================================================
   Health check (lead magnet)
   - Native light theme
   - Animated SVG gauge
   - Email-gated detail
   ========================================================================== */

.health {
  position: relative;
  /* Smooth gradient transition from the hero's white background into the
     blue section body. The fade spans ~320px, and we add extra padding-top
     to push the white headline text well past the gradient into solid blue
     so it stays readable. */
  background: linear-gradient(
    180deg,
    var(--white) 0%,
    var(--blue) 200px,
    var(--blue) 100%
  );
  padding-top: clamp(8rem, 12vw, 12rem);
  color: var(--white);
  overflow: hidden;
}

/* Down-arrow that sits in the white→blue gradient zone, guiding the
   user's eye from the hero into the health section. Centred horizontally,
   positioned about a third of the way down the gradient fade. */
.health__arrow {
  display: block;
  width: 48px;
  height: 48px;
  margin: 0 auto;
  position: absolute;
  top: clamp(4rem, 8vw, 8rem);
  left: 50%;
  transform: translateX(-50%);
  color: var(--white);
  opacity: 0.85;
  filter: drop-shadow(0 4px 12px rgba(10, 10, 10, 0.25));
  animation: arrowBounce 2s ease-in-out infinite;
  z-index: 2;
  pointer-events: none;
}

@keyframes arrowBounce {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50%      { transform: translateX(-50%) translateY(10px); }
}

/* Header copy on the blue background */
.health .section__label {
  color: rgba(255, 255, 255, 0.82);
}
.health .section__title {
  color: var(--white);
}
.health .section__title .accent {
  color: var(--white);
}
.health .section__lede {
  color: rgba(255, 255, 255, 0.82);
}

.health__inner {
  position: relative;
  z-index: 1;
}

/* ----- Form ----- */

.health__form {
  margin: var(--sp-6) auto var(--sp-3);
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  max-width: 640px;
}
@media (min-width: 640px) {
  .health__form {
    flex-direction: row;
    align-items: stretch;
  }
}

.health__input-wrap {
  position: relative;
  flex: 1;
  display: flex;
  align-items: center;
  background: var(--white);
  border: 1.5px solid var(--gray-200);
  border-radius: var(--radius-pill);
  padding: 0 var(--sp-3) 0 var(--sp-5);
  transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease);
  min-height: 56px;
}
.health__input-wrap:focus-within {
  border-color: var(--blue);
  box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.12);
}

.health__input-prefix {
  font: 500 var(--fs-sm)/1 var(--sans);
  color: var(--gray-400);
  user-select: none;
  margin-right: 0.4rem;
}

.health__input {
  flex: 1;
  border: none;
  outline: none;
  background: transparent;
  font: 500 var(--fs-base)/1 var(--sans);
  color: var(--black);
  padding: 0;
  min-width: 0;
}
.health__input::placeholder {
  color: var(--gray-400);
  font-weight: 400;
}

.health__submit {
  height: 56px;
  padding: 0 1.6rem;
  flex-shrink: 0;
}
/* Crisp white ring so the Analyze button pops against the blue health
   section. Specificity is bumped (.health + two classes on the element)
   so this wins over the `.btn--primary:not(.nav__cta) { border-color:
   transparent }` rule further down the file, which otherwise ties on
   specificity and clobbers the border via source order. */
.health .health__submit.btn--primary {
  border: 2px solid var(--white);
  box-shadow:
    0 10px 28px -12px rgba(10, 10, 10, 0.45),
    0 0 0 0 rgba(255, 255, 255, 0);
}
.health .health__submit.btn--primary:hover {
  border-color: var(--white);
  box-shadow:
    0 14px 34px -12px rgba(10, 10, 10, 0.5),
    0 0 0 4px rgba(255, 255, 255, 0.22);
}

.health__form-note {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  font-size: var(--fs-xs);
  color: rgba(255, 255, 255, 0.72);
  font-weight: 500;
  margin: 0 auto var(--sp-6);
  text-align: center;
}
.health__form-note .section__cta-dot {
  background: #86EFAC;
  box-shadow: 0 0 0 3px rgba(134, 239, 172, 0.24);
}

/* ----- Loading ----- */

.health__loading {
  margin: var(--sp-7) auto 0;
  max-width: 480px;
  text-align: center;
  padding: var(--sp-6);
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-lg);
  box-shadow: 0 20px 50px -30px rgba(0, 0, 0, 0.18);
}

.health__loading-pulse {
  display: inline-flex;
  gap: 6px;
  margin-bottom: var(--sp-4);
}
.health__loading-pulse span {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--blue);
  animation: healthPulse 1.2s ease-in-out infinite;
}
.health__loading-pulse span:nth-child(2) { animation-delay: 0.2s; }
.health__loading-pulse span:nth-child(3) { animation-delay: 0.4s; }
@keyframes healthPulse {
  0%, 80%, 100% { transform: scale(0.6); opacity: 0.4; }
  40%           { transform: scale(1.1); opacity: 1; }
}

.health__loading-status {
  font-size: var(--fs-base);
  font-weight: 600;
  color: var(--black);
  margin: 0 0 0.35rem;
  min-height: 1.5em;
}
.health__loading-sub {
  font-size: var(--fs-sm);
  color: var(--gray-500);
  margin: 0;
}

/* ----- Error ----- */

.health__error {
  margin: var(--sp-6) auto 0;
  max-width: 520px;
  text-align: center;
  padding: var(--sp-5) var(--sp-6);
  background: #FEF2F2;
  border: 1px solid #FECACA;
  border-radius: var(--radius);
}
.health__error-msg {
  color: #991B1B;
  margin: 0 0 var(--sp-3);
  font-weight: 500;
}

/* ----- Results ----- */

.health__results {
  margin-top: var(--sp-7);
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-lg);
  padding: var(--sp-6) var(--sp-5);
  box-shadow: 0 30px 80px -40px rgba(0, 0, 0, 0.22);
  max-width: 880px;
  margin-left: auto;
  margin-right: auto;
}
@media (min-width: 720px) {
  .health__results {
    padding: var(--sp-7) var(--sp-7);
  }
}

.health__results-head {
  text-align: center;
  margin-bottom: var(--sp-5);
}
.health__results-url {
  font-size: var(--fs-sm);
  color: var(--gray-500);
  font-weight: 500;
  margin: 0 0 var(--sp-2);
  word-break: break-all;
}
.health__verdict {
  font-size: var(--fs-lg);
  color: var(--gray-700);
  font-weight: 500;
  margin: 0;
  line-height: 1.4;
  max-width: 56ch;
  margin-left: auto;
  margin-right: auto;
}

/* ----- Gauge ----- */

.health__overall {
  position: relative;
  width: 200px;
  height: 200px;
  margin: var(--sp-5) auto var(--sp-6);
}
.health__gauge {
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
}
.health__gauge-track {
  fill: none;
  stroke: var(--gray-200);
  stroke-width: 10;
}
.health__gauge-fill {
  fill: none;
  stroke: var(--gauge-color, var(--blue));
  stroke-width: 10;
  stroke-linecap: round;
  stroke-dasharray: 376.99; /* 2π·60 */
  stroke-dashoffset: 376.99;
  transition: stroke-dashoffset 1.6s var(--ease), stroke 0.4s var(--ease);
}
.health__gauge-center {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}
.health__gauge-score {
  font-size: 4rem;
  font-weight: 800;
  letter-spacing: -0.04em;
  color: var(--gauge-color, var(--black));
  line-height: 1;
  font-variant-numeric: tabular-nums;
  transition: color 0.4s var(--ease);
}
.health__gauge-max {
  font-size: var(--fs-sm);
  color: var(--gray-500);
  font-weight: 500;
  margin-top: 0.25rem;
}

/* ----- Categories ----- */

.health__categories {
  list-style: none;
  margin: 0 0 var(--sp-5);
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
  border-top: 1px solid var(--gray-200);
}

.health__cat {
  border-bottom: 1px solid var(--gray-200);
}

.health__cat-toggle {
  width: 100%;
  background: none;
  border: none;
  cursor: pointer;
  padding: var(--sp-4) 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-2);
  align-items: center;
  text-align: left;
  font: inherit;
  color: inherit;
  transition: background 0.2s var(--ease);
}
@media (min-width: 640px) {
  .health__cat-toggle {
    grid-template-columns: minmax(140px, 1.1fr) minmax(0, 2.2fr) auto auto;
    gap: var(--sp-4);
  }
}
.health__cat-toggle:hover {
  background: var(--gray-50);
}

.health__cat-name {
  font-weight: 600;
  font-size: var(--fs-base);
  color: var(--black);
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.health__cat-name small {
  font-size: var(--fs-xs);
  color: var(--gray-500);
  font-weight: 500;
}

.health__cat-bar {
  position: relative;
  height: 8px;
  background: var(--gray-100);
  border-radius: var(--radius-pill);
  overflow: hidden;
  width: 100%;
  min-width: 0;
}
.health__cat-fill {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 0;
  background: var(--cat-color, var(--blue));
  border-radius: var(--radius-pill);
  transition: width 1.4s var(--ease);
}

.health__cat-score {
  font-weight: 700;
  font-size: var(--fs-base);
  color: var(--cat-color, var(--black));
  font-variant-numeric: tabular-nums;
  min-width: 3.5ch;
  text-align: right;
}

.health__cat-chev {
  width: 18px;
  height: 18px;
  color: var(--gray-400);
  transition: transform 0.25s var(--ease), color 0.25s var(--ease);
}
.health__cat[data-open="true"] .health__cat-chev {
  transform: rotate(180deg);
  color: var(--blue);
}

.health__cat-issues {
  overflow: hidden;
  max-height: 0;
  transition: max-height 0.4s var(--ease);
}
.health__cat[data-open="true"] .health__cat-issues {
  max-height: 1200px;
}
.health__cat-issues-inner {
  padding: 0 0 var(--sp-5);
}

.health__issues {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
}
.health__issue {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  font-size: var(--fs-sm);
  line-height: 1.5;
  color: var(--gray-700);
}
.health__issue-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
  margin-top: 0.45rem;
}
.health__issue--critical .health__issue-dot { background: #EF4444; box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.18); }
.health__issue--warning  .health__issue-dot { background: #F59E0B; box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.18); }
.health__issue--good     .health__issue-dot { background: #22C55E; box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.18); }

/* ----- Email capture (upfront, before analysis runs) -----------------
   The user drops their URL, then gets bounced to this card to hand over
   an email before we call PageSpeed. We POST the lead fire-and-forget to
   Formspree; the analysis starts even if that POST fails so the user is
   never stuck. */

.health__email-capture {
  margin: var(--sp-6) auto 0;
  max-width: 560px;
  padding: var(--sp-6) var(--sp-5);
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-lg);
  box-shadow: 0 30px 70px -34px rgba(10, 10, 10, 0.4);
  text-align: center;
}
@media (min-width: 640px) {
  .health__email-capture {
    padding: var(--sp-7) var(--sp-6);
  }
}

.health__email-capture h3 {
  margin: 0 0 0.5rem;
  font-size: var(--fs-xl);
  color: var(--black);
  letter-spacing: -0.02em;
}
.health__email-capture > p {
  margin: 0 auto var(--sp-5);
  color: var(--gray-600);
  max-width: 44ch;
  font-size: var(--fs-sm);
  line-height: 1.55;
}
.health__email-capture .health__target {
  color: var(--black);
  font-weight: 700;
  word-break: break-word;
}

.health__email-form {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  margin: 0 auto;
  max-width: 440px;
}
@media (min-width: 560px) {
  .health__email-form {
    flex-direction: row;
    align-items: stretch;
  }
}

.health__email-input {
  flex: 1;
  min-height: 52px;
  padding: 0 1.1rem;
  font: 500 var(--fs-base) / 1 var(--sans);
  color: var(--black);
  background: var(--white);
  border: 1.5px solid var(--gray-200);
  border-radius: var(--radius-pill);
  outline: none;
  transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease);
}
.health__email-input:focus {
  border-color: var(--blue);
  box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.12);
}
.health__email-input.is-error {
  border-color: #EF4444;
  box-shadow: 0 0 0 4px rgba(239, 68, 68, 0.12);
}

.health__email-submit {
  min-height: 52px;
  padding: 0 1.4rem;
  flex-shrink: 0;
}

.health__email-status {
  margin: var(--sp-3) 0 0;
  font-size: var(--fs-sm);
  font-weight: 500;
  min-height: 1.2em;
  color: #B91C1C;
}
.health__email-status.is-error { color: #B91C1C; }

.health__email-back {
  display: inline-block;
  margin-top: var(--sp-4);
  padding: 0.35rem 0.6rem;
  background: none;
  border: none;
  font: 500 var(--fs-xs) var(--sans);
  color: var(--gray-500);
  cursor: pointer;
  transition: color 0.2s var(--ease);
}
.health__email-back:hover {
  color: var(--blue);
}

/* ----- Bottom CTA ----- */

.health__cta {
  margin-top: var(--sp-5);
  padding: var(--sp-6);
  background: var(--gray-50);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius);
  text-align: center;
  display: none;
}
.health[data-state="results-unlocked"] .health__cta { display: block; }
.health__cta h3 {
  margin: 0 0 0.4rem;
  font-size: var(--fs-xl);
  letter-spacing: -0.02em;
}
.health__cta p {
  margin: 0 auto var(--sp-4);
  color: var(--gray-600);
  max-width: 52ch;
}
.health__cta-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  justify-content: center;
}

/* ----- State visibility ------------------------------------------------
   The health section is a tiny state machine driven by a data-state
   attribute. Each state shows exactly one of: the URL form, the email
   capture, the loading spinner, the error, or the results card. */

/* Email capture is hidden everywhere except its own state. */
.health__email-capture { display: none; }
.health[data-state="email-capture"] .health__email-capture { display: block; }

/* URL input form + form note are only visible in idle and error. */
.health[data-state="email-capture"]    .health__form,
.health[data-state="email-capture"]    .health__form-note,
.health[data-state="loading"]          .health__form,
.health[data-state="loading"]          .health__form-note,
.health[data-state="results-unlocked"] .health__form,
.health[data-state="results-unlocked"] .health__form-note {
  display: none;
}

/* Hide the elements that aren't the focus of the current state. */
.health[data-state="idle"]             .health__loading,
.health[data-state="idle"]             .health__results,
.health[data-state="idle"]             .health__error,
.health[data-state="email-capture"]    .health__loading,
.health[data-state="email-capture"]    .health__results,
.health[data-state="email-capture"]    .health__error,
.health[data-state="loading"]          .health__results,
.health[data-state="loading"]          .health__error,
.health[data-state="error"]            .health__loading,
.health[data-state="error"]            .health__results,
.health[data-state="results-unlocked"] .health__loading,
.health[data-state="results-unlocked"] .health__error {
  display: none !important;
}
.health[data-state="loading"]          .health__loading,
.health[data-state="error"]            .health__error,
.health[data-state="results-unlocked"] .health__results {
  display: block;
}

/* ==========================================================================
   Problem
   ========================================================================== */

.problem__grid {
  display: grid;
  gap: var(--sp-5);
  grid-template-columns: 1fr;
}
@media (min-width: 640px) and (max-width: 959px) {
  .problem__grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .problem__card:last-child {
    grid-column: 1 / -1;
  }
}
@media (min-width: 960px) {
  .problem__grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.problem__card {
  padding: var(--sp-6);
  background: var(--gray-50);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-lg);
  transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease), border-color 0.35s var(--ease);
}
.problem__card:hover {
  transform: translateY(-4px);
  border-color: var(--blue);
  box-shadow: 0 20px 40px -24px rgba(10, 10, 10, 0.15);
}

.problem__num {
  display: inline-block;
  font-family: var(--sans);
  font-size: var(--fs-xs);
  font-weight: 700;
  color: var(--blue);
  background: transparent;
  border: 1.5px solid var(--blue);
  border-radius: var(--radius-pill);
  padding: 0.35rem 0.8rem;
  margin-bottom: var(--sp-5);
  letter-spacing: 0.14em;
  line-height: 1;
}

.problem__card h3 {
  color: var(--black);
  margin-bottom: var(--sp-3);
}
.problem__card p {
  color: var(--gray-600);
  margin: 0;
}

/* Dark mode variant for the problem section */
.section--dark .problem__card {
  background: var(--gray-900);
  border-color: var(--gray-800);
}
.section--dark .problem__card:hover {
  border-color: var(--blue);
  box-shadow: 0 20px 40px -24px rgba(0, 0, 0, 0.6);
}
.section--dark .problem__card h3 {
  color: var(--white);
}
.section--dark .problem__card p {
  color: var(--gray-400);
}

/* ==========================================================================
   Services
   ========================================================================== */

/* Thin blue divider line at the top of the Services section */
.services::before {
  content: "";
  display: block;
  width: 64px;
  height: 3px;
  background: var(--blue);
  border-radius: 2px;
  margin: 0 auto var(--sp-7);
}

.services__grid {
  display: grid;
  gap: var(--sp-5);
  grid-template-columns: 1fr;
}
@media (min-width: 900px) {
  .services__grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.service {
  position: relative;
  padding: var(--sp-6);
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-lg);
  display: flex;
  flex-direction: column;
  transition: transform 0.35s var(--ease), border-color 0.35s var(--ease), box-shadow 0.35s var(--ease);
}
.service:hover {
  transform: translateY(-4px);
  border-color: var(--blue);
  box-shadow: 0 24px 50px -28px rgba(10, 10, 10, 0.2);
}

.service__icon {
  width: 40px;
  height: 40px;
  color: var(--blue);
  margin-bottom: var(--sp-5);
}
.service__icon svg {
  width: 100%;
  height: 100%;
}

.service h3 {
  color: var(--black);
  margin-bottom: var(--sp-3);
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  flex-wrap: wrap;
}

.service p {
  color: var(--ink-60);
  margin-bottom: var(--sp-5);
}

.service__list {
  border-top: 1px solid var(--ink-12);
  padding-top: var(--sp-4);
  display: grid;
  gap: var(--sp-3);
  margin-top: auto;
}
.service__list li {
  font-size: var(--fs-sm);
  color: var(--ink-60);
  position: relative;
  padding-left: 1.25rem;
}
.service__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: var(--blue);
}

/* Featured card overrides — placed AFTER base rules so they win the cascade */
.service--featured {
  background: var(--black);
  color: var(--white);
  border-color: var(--black);
}
.service--featured h3 { color: var(--white); }
.service--featured p  { color: rgba(255, 255, 255, 0.72); }
.service--featured .service__icon { color: var(--blue); }
.service--featured .service__list {
  border-top-color: rgba(255, 255, 255, 0.12);
}
.service--featured .service__list li {
  color: rgba(255, 255, 255, 0.72);
}
.service--featured .service__list li::before {
  background: var(--blue);
}
.service--featured:hover {
  border-color: var(--blue);
}

.badge {
  display: inline-block;
  font-family: var(--sans);
  font-size: 0.65rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  padding: 0.3rem 0.55rem;
  border-radius: var(--radius-pill);
  background: var(--blue);
  color: var(--white);
  vertical-align: middle;
}

/* ==========================================================================
   SEO for AI — dark section
   ========================================================================== */

.ai {
  position: relative;
}
.ai__bg {
  position: absolute;
  inset: 0;
  color: var(--blue);
  pointer-events: none;
}
.ai__bg .wave {
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  height: 40%;
  min-height: 200px;
}

.ai__inner {
  position: relative;
  z-index: 1;
}

.ai__grid {
  display: grid;
  gap: var(--sp-5);
  grid-template-columns: 1fr;
  align-items: stretch;
  margin-top: var(--sp-8);
}
@media (min-width: 860px) {
  .ai__grid {
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
  }
}

.ai__col {
  padding: var(--sp-6);
  background: var(--gray-900);
  border: 1px solid var(--gray-800);
  border-radius: var(--radius-lg);
}
.ai__col--new {
  background: var(--gray-900);
  border-color: var(--blue);
  box-shadow: 0 0 0 1px var(--blue) inset, 0 20px 50px -30px rgba(37, 99, 235, 0.5);
}

.ai__h {
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--gray-500);
  font-family: var(--sans);
  font-weight: 600;
  margin-bottom: var(--sp-4);
}
.ai__col--new .ai__h { color: var(--blue); }

.ai__col p {
  font-family: var(--sans);
  font-size: var(--fs-xl);
  line-height: 1.2;
  color: var(--white);
  margin-bottom: var(--sp-5);
  font-weight: 600;
  letter-spacing: -0.02em;
}

.ai__list {
  display: grid;
  gap: var(--sp-3);
  padding-top: var(--sp-4);
  border-top: 1px solid var(--gray-800);
}
.ai__list li {
  font-size: var(--fs-sm);
  color: var(--gray-400);
  position: relative;
  padding-left: 1.25rem;
}
.ai__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.5em;
  width: 8px;
  height: 2px;
  background: var(--gray-500);
  border-radius: 2px;
}
.ai__col--new .ai__list li::before {
  background: var(--blue);
  width: 10px;
}

.ai__arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--gray-500);
}
.ai__arrow svg {
  width: 80px;
  height: 24px;
}
@media (max-width: 859px) {
  .ai__arrow svg {
    transform: rotate(90deg);
  }
}

.ai__pullquote {
  margin-top: var(--sp-9);
  text-align: center;
}
.ai__pullquote p {
  font-family: var(--sans);
  font-size: var(--fs-2xl);
  line-height: 1.25;
  letter-spacing: -0.03em;
  font-weight: 600;
  color: var(--white);
  max-width: 24ch;
  margin: 0 auto;
}
.ai__pullquote-sub {
  display: block;
  font-size: var(--fs-sm);
  color: var(--gray-400);
  margin-top: var(--sp-4);
  letter-spacing: 0;
  font-weight: 500;
}

/* ==========================================================================
   Process
   ========================================================================== */

.process__list {
  display: grid;
  gap: var(--sp-5);
}
@media (min-width: 860px) {
  .process__list {
    grid-template-columns: 1fr 1fr;
    gap: var(--sp-6);
  }
}

/* Each step card gets a static gray border at rest and an animated
   multi-color gradient border on hover, using the same layered-background
   trick as the nav CTA. 2px border at all times so the hover state
   doesn't cause any layout shift. */
.process__item {
  display: flex;
  gap: var(--sp-5);
  padding: calc(var(--sp-6) - 1px);
  background: var(--gray-50);
  border: 2px solid var(--gray-200);
  border-radius: var(--radius-lg);
  transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease);
}
@media (hover: hover) {
  .process__item:hover {
    background:
      linear-gradient(var(--gray-50), var(--gray-50)) padding-box,
      conic-gradient(
        from var(--grad-angle),
        #2563EB 0deg,
        #FFFFFF 90deg,
        #3B82F6 180deg,
        #FFFFFF 270deg,
        #2563EB 360deg
      ) border-box;
    border-color: transparent;
    transform: translateY(-2px);
    box-shadow: 0 18px 40px -24px rgba(37, 99, 235, 0.4);
    animation: nav-cta-spin 3s linear infinite;
  }
}

.process__num {
  flex-shrink: 0;
  font-family: var(--sans);
  font-size: clamp(2.6rem, 2rem + 1.8vw, 3.4rem);
  color: var(--blue);
  line-height: 0.9;
  font-weight: 800;
  letter-spacing: -0.05em;
  font-variant-numeric: tabular-nums;
  min-width: 3.5rem;
}

.process__body h3 {
  color: var(--black);
  margin-bottom: var(--sp-3);
  font-size: var(--fs-xl);
}
.process__body p {
  color: var(--gray-600);
  margin: 0;
}

/* ==========================================================================
   Blue section variant — same blue as the nav
   ========================================================================== */

.section--blue {
  background: var(--blue);
  color: var(--white);
}
.section--blue .section__label { color: rgba(255, 255, 255, 0.82); }
.section--blue .section__title { color: var(--white); }
.section--blue .section__title .muted { color: rgba(255, 255, 255, 0.72); }
.section--blue .section__lede { color: rgba(255, 255, 255, 0.82); }
.section--blue .section__cta-note { color: rgba(255, 255, 255, 0.72); }

/* ==========================================================================
   For (who this is for)
   ========================================================================== */

.for__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--sp-3);
  padding: var(--sp-6) 0;
  border-top: 1px solid rgba(255, 255, 255, 0.18);
  border-bottom: 1px solid rgba(255, 255, 255, 0.18);
}
@media (min-width: 560px) {
  .for__grid {
    grid-template-columns: repeat(3, 1fr);
  }
}
@media (min-width: 860px) {
  .for__grid {
    grid-template-columns: repeat(4, 1fr);
  }
}
.for__grid li {
  font-family: var(--sans);
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--white);
  letter-spacing: -0.005em;
  background: rgba(255, 255, 255, 0.1);
  border: 1.5px solid rgba(255, 255, 255, 0.22);
  border-radius: 12px;
  padding: 0.85rem 1.1rem;
  line-height: 1.2;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: border-color 0.25s var(--ease), color 0.25s var(--ease), transform 0.25s var(--ease), background 0.25s var(--ease);
}
.for__grid li:hover {
  border-color: var(--white);
  color: var(--white);
  background: rgba(255, 255, 255, 0.2);
  transform: translateY(-2px);
}

.for__note {
  margin-top: var(--sp-6);
  font-size: var(--fs-lg);
  color: rgba(255, 255, 255, 0.82);
  max-width: 62ch;
}

/* ==========================================================================
   Section CTA — repeating "next step" block at the end of each section.
   The button text and the note vary per section so it never feels canned.
   ========================================================================== */

.section__cta {
  margin-top: clamp(2.75rem, 5vw, 4.5rem);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0.9rem;
}

.section__cta-note {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  font-size: var(--fs-xs);
  color: var(--gray-500);
  font-weight: 500;
  letter-spacing: 0.015em;
  margin: 0;
}

.section--dark .section__cta-note {
  color: var(--gray-400);
}

.section--cream .section__cta-note {
  color: var(--gray-600);
}

.section__cta-dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #22C55E;
  box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.18);
  flex-shrink: 0;
}

/* When the CTA lives inside the about section's 2-col grid, span the
   full width and stay centered. */
.about__inner > .section__cta {
  grid-column: 1 / -1;
  justify-self: center;
  width: 100%;
}

/* ==========================================================================
   About
   ========================================================================== */

.about__inner {
  display: grid;
  gap: var(--sp-7);
  grid-template-columns: 1fr;
  align-items: start;
}
@media (min-width: 900px) {
  .about__inner {
    grid-template-columns: 1.4fr 1fr;
    gap: var(--sp-8);
  }
}

.about__portrait {
  display: block;
  width: 148px;
  height: 148px;
  border-radius: 50%;
  object-fit: cover;
  object-position: center top;
  filter: grayscale(100%) contrast(1.02);
  border: 3px solid var(--blue);
  box-shadow: 0 18px 40px -18px rgba(0, 0, 0, 0.5);
  margin: 0 auto var(--sp-6);
  transition: filter 0.4s var(--ease), transform 0.4s var(--ease);
}
.about__portrait:hover {
  filter: grayscale(0%) contrast(1.02);
  transform: translateY(-2px);
}

.about__text p {
  font-size: var(--fs-lg);
  color: var(--gray-600);
  max-width: 60ch;
}

.about__sign {
  font-family: var(--sans);
  font-size: var(--fs-base);
  font-weight: 600;
  color: var(--black);
  margin-top: var(--sp-6);
  letter-spacing: -0.01em;
}

.about__card {
  background: var(--black);
  color: var(--white);
  padding: var(--sp-7);
  border-radius: var(--radius-lg);
  position: relative;
  overflow: hidden;
}

.about__card-top {
  padding: var(--sp-4) 0;
  border-bottom: 1px solid var(--gray-800);
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}
.about__card-top:first-of-type { padding-top: 0; }
.about__card-top:last-of-type { border-bottom: none; }

.about__card-label {
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--blue);
  font-weight: 600;
}
.about__card-top strong {
  font-family: var(--sans);
  font-size: var(--fs-lg);
  font-weight: 600;
  color: var(--white);
  letter-spacing: -0.02em;
}

.about__wave {
  width: 100%;
  height: 60px;
  color: var(--blue);
  margin-top: var(--sp-4);
  opacity: 0.9;
}

/* ==========================================================================
   Contact
   ========================================================================== */

.contact__inner {
  max-width: 1100px;
  margin: 0 auto;
}

.contact__grid {
  display: grid;
  gap: var(--sp-6);
  grid-template-columns: 1fr;
  margin-top: var(--sp-7);
}
@media (min-width: 900px) {
  .contact__grid {
    grid-template-columns: 1.3fr 1fr;
    gap: var(--sp-7);
  }
}

.contact__form {
  display: grid;
  gap: var(--sp-5);
  grid-template-columns: 1fr;
  padding: var(--sp-7);
  background: var(--gray-50);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-lg);
}
@media (min-width: 560px) {
  .contact__form {
    grid-template-columns: 1fr 1fr;
  }
}

.field {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}
.field--full {
  grid-column: 1 / -1;
}

.field label {
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-weight: 600;
  color: var(--gray-600);
}

.field input,
.field textarea {
  font: 400 var(--fs-base) var(--sans);
  color: var(--black);
  background: var(--white);
  border: 1.5px solid var(--gray-200);
  border-radius: var(--radius-sm);
  padding: 0.85rem 1rem;
  transition: border-color 0.2s var(--ease), background 0.2s var(--ease);
  width: 100%;
}
.field input::placeholder,
.field textarea::placeholder {
  color: var(--gray-400);
}
.field input:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--blue);
  background: var(--white);
}

.field textarea {
  resize: vertical;
  min-height: 120px;
  font-family: var(--sans);
}

.field__optional {
  font-size: 0.7em;
  font-weight: 500;
  color: var(--gray-400);
  text-transform: none;
  letter-spacing: 0;
  margin-left: 0.3em;
}

.form__status {
  margin: var(--sp-3) 0 0;
  font-size: var(--fs-sm);
  color: var(--gray-600);
  min-height: 1.2em;
}
.form__status.is-error { color: #DC2626; }
.form__status.is-success { color: var(--blue); }

.contact__side {
  display: grid;
  gap: var(--sp-5);
  align-content: start;
}

.contact__card {
  padding: var(--sp-6);
  background: var(--black);
  color: var(--white);
  border-radius: var(--radius-lg);
}
.contact__card h3 {
  color: var(--white);
  margin-bottom: var(--sp-3);
  font-size: var(--fs-xl);
}
.contact__card p {
  color: var(--gray-400);
  margin-bottom: var(--sp-5);
  font-size: var(--fs-sm);
}

.contact__email {
  display: inline-block;
  font-family: var(--sans);
  font-size: var(--fs-base);
  font-weight: 500;
  color: var(--white);
  text-decoration: underline;
  text-decoration-color: var(--white-20);
  text-underline-offset: 4px;
  transition: color 0.2s var(--ease), text-decoration-color 0.2s var(--ease);
}
.contact__email:hover {
  color: var(--blue);
  text-decoration-color: var(--blue);
}

/* ==========================================================================
   Footer
   ========================================================================== */

.footer {
  background: var(--black);
  color: var(--white);
  position: relative;
  padding-bottom: var(--sp-6);
}

.footer__wave {
  display: block;
  width: 100%;
  height: 80px;
}

.footer__inner {
  display: grid;
  gap: var(--sp-5);
  grid-template-columns: 1fr;
  padding-top: var(--sp-6);
  align-items: start;
}
@media (min-width: 760px) {
  .footer__inner {
    grid-template-columns: auto 1fr;
    column-gap: var(--sp-7);
    row-gap: var(--sp-5);
    align-items: center;
  }
  .footer__nav {
    justify-self: end;
  }
  .footer__meta {
    grid-column: 1 / -1;
    border-top: 1px solid var(--gray-800);
    padding-top: var(--sp-5);
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-3) var(--sp-5);
    justify-content: space-between;
    align-items: center;
  }
  .footer__meta p { margin: 0; }
}

.footer__brand {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}
.footer__brand .brand {
  font-size: 1.4rem;
  color: var(--white);
}

.footer__tag {
  font-family: var(--sans);
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--gray-500);
  margin: 0;
  letter-spacing: -0.01em;
}

.footer__nav {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-4) var(--sp-6);
  font-size: var(--fs-sm);
  color: var(--gray-400);
  font-weight: 500;
  align-items: center;
}
.footer__nav a {
  position: relative;
  transition: color 0.2s var(--ease);
}
.footer__nav a:hover { color: var(--white); }

.footer__meta {
  font-size: var(--fs-xs);
  color: var(--gray-500);
  display: grid;
  gap: var(--sp-2);
}
.footer__meta p { margin: 0; }
.footer__creds a {
  color: var(--gray-400);
  text-decoration: underline;
  text-decoration-color: var(--gray-700);
  text-underline-offset: 3px;
}
.footer__creds a:hover { color: var(--blue); }

/* ==========================================================================
   Reveal animation
   ========================================================================== */

[data-reveal] {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.9s var(--ease), transform 0.9s var(--ease);
  will-change: opacity, transform;
}

[data-reveal].is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* ==========================================================================
   Glow — hover spotlight on main feature cards & primary CTAs
   --------------------------------------------------------------------------
   Every glow target tracks the cursor in LOCAL coordinates (relative to
   its own bounding box). script.js writes `--gx` / `--gy` directly onto
   the hovered element via a delegated pointermove listener, and the CSS
   below renders an absolutely-positioned radial spotlight at that point.

   This avoids two known fragile techniques (background-attachment: fixed
   + mask-composite border rings) and works reliably in every browser.
   The effect fades in on hover so it stays tasteful and never distracts.
   ========================================================================== */

.glow-card {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}

.glow-card::before {
  content: "";
  position: absolute;
  top: var(--gy, 50%);
  left: var(--gx, 50%);
  width: 540px;
  height: 540px;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  background: radial-gradient(
    circle,
    hsl(215 100% 62% / 0.40) 0%,
    hsl(215 100% 62% / 0.18) 18%,
    hsl(215 100% 62% / 0.05) 38%,
    transparent 60%
  );
  opacity: 0;
  transition: opacity 0.4s var(--ease);
  z-index: 0;
}

.glow-card:hover::before { opacity: 1; }

.glow-card:hover {
  box-shadow: 0 30px 70px -40px rgba(37, 99, 235, 0.45),
              0 0 0 1px rgba(59, 130, 246, 0.25);
}

/* Card content always above the glow layer */
.glow-card > * { position: relative; z-index: 1; }

/* ----- Per-card tuning -----------------------------------------------
   Dark cards (problem section) get a punchier spotlight; white cards
   (services + health results) get a softer one so it doesn't wash out. */

.section--dark .glow-card::before {
  background: radial-gradient(
    circle,
    hsl(215 100% 70% / 0.55) 0%,
    hsl(215 100% 70% / 0.22) 20%,
    hsl(215 100% 70% / 0.06) 40%,
    transparent 62%
  );
}
.section--dark .glow-card:hover {
  box-shadow: 0 30px 70px -30px rgba(37, 99, 235, 0.7),
              0 0 0 1px rgba(59, 130, 246, 0.35);
}

.service.glow-card::before,
.health__results.glow-card::before {
  background: radial-gradient(
    circle,
    hsl(215 100% 60% / 0.32) 0%,
    hsl(215 100% 60% / 0.12) 22%,
    transparent 58%
  );
}

/* ----- Glowing primary CTAs ------------------------------------------
   Animated gradient background gives the buttons subtle motion at all
   times. On hover, a cursor-following white shimmer sweeps across them.
   The nav CTA stays plain to avoid noise in the header. */

.btn--primary:not(.nav__cta) {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: linear-gradient(
    120deg,
    #1D4ED8 0%,
    #2563EB 25%,
    #3B82F6 50%,
    #2563EB 75%,
    #1D4ED8 100%
  );
  background-size: 220% 220%;
  background-position: 0% 50%;
  border-color: transparent;
  box-shadow:
    0 6px 20px -8px rgba(37, 99, 235, 0.55),
    0 0 0 0 rgba(59, 130, 246, 0);
  transition:
    background-position 0.6s var(--ease),
    box-shadow 0.4s var(--ease),
    transform 0.2s var(--ease);
}

.btn--primary:not(.nav__cta)::before {
  content: "";
  position: absolute;
  top: var(--gy, 50%);
  left: var(--gx, 50%);
  width: 220px;
  height: 220px;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  background: radial-gradient(
    circle,
    rgba(255, 255, 255, 0.45) 0%,
    rgba(255, 255, 255, 0.15) 30%,
    transparent 60%
  );
  opacity: 0;
  transition: opacity 0.3s var(--ease);
  z-index: 0;
}

.btn--primary:not(.nav__cta) > * {
  position: relative;
  z-index: 1;
}

.btn--primary:not(.nav__cta):hover {
  background-position: 100% 50%;
  box-shadow:
    0 14px 32px -10px rgba(37, 99, 235, 0.7),
    0 0 0 4px rgba(59, 130, 246, 0.20);
}
.btn--primary:not(.nav__cta):hover::before { opacity: 1; }

/* ==========================================================================
   Reduced motion
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  [data-reveal] {
    opacity: 1;
    transform: none;
  }
  .underline path { stroke-dashoffset: 0; }
  .glow-card::before,
  .glow-card::after,
  .btn--primary::before,
  .btn--primary::after { display: none !important; }
}