:root {
  --bg: #080a0d;
  --bg-alt: #0d1117;
  --surface: #11161d;
  --surface-strong: #151d26;
  --text: #f4f1ea;
  --muted: #a5acb8;
  --muted-2: #747d8b;
  --cyan: #2de2e6;
  --blue: #3b82f6;
  --lime: #b7ff4a;
  --border: rgba(255, 255, 255, 0.12);
  --border-strong: rgba(255, 255, 255, 0.18);
  --shadow: 0 24px 90px rgba(0, 0, 0, 0.42);
  --max: 1180px;
  --header: 82px;
  color-scheme: dark;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  background: var(--bg);
}

body {
  margin: 0;
  color: var(--text);
  font-family:
    Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background:
    radial-gradient(circle at 75% 10%, rgba(45, 226, 230, 0.1), transparent 34rem),
    radial-gradient(circle at 12% 28%, rgba(183, 255, 74, 0.055), transparent 28rem),
    linear-gradient(180deg, #080a0d 0%, #0d1117 48%, #080a0d 100%);
  line-height: 1.5;
  /* clip (not hidden) so it doesn't become a scroll container — that would
     break position: sticky on descendants like the process dial. */
  overflow-x: clip;
}

body.nav-open {
  overflow: hidden;
}

body::before {
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  content: "";
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px);
  background-size: 72px 72px;
  mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.9), transparent 82%);
}

body::after {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  content: "";
  background: linear-gradient(110deg, transparent 0 42%, rgba(45, 226, 230, 0.035) 42.2% 42.5%, transparent 42.8% 100%);
}

a {
  color: inherit;
  text-decoration: none;
}

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

button {
  font: inherit;
}

.container {
  width: min(100% - 40px, var(--max));
  margin-inline: auto;
}

.skip-link {
  position: fixed;
  top: 12px;
  left: 12px;
  z-index: 100;
  padding: 10px 14px;
  color: var(--bg);
  background: var(--cyan);
  border-radius: 999px;
  transform: translateY(-140%);
}

.skip-link:focus {
  transform: translateY(0);
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.site-header {
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  z-index: 40;
  border-bottom: 1px solid transparent;
  transition: background 220ms ease, border-color 220ms ease, backdrop-filter 220ms ease;
}

.site-header.is-scrolled {
  background: rgba(8, 10, 13, 0.78);
  border-color: var(--border);
  backdrop-filter: blur(18px);
}

.nav-shell {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: min(100% - 40px, var(--max));
  height: var(--header);
  margin-inline: auto;
}

.brand {
  display: inline-flex;
  gap: 12px;
  align-items: center;
  min-height: 44px;
  font-weight: 760;
  letter-spacing: 0;
}

.brand-logo {
  display: block;
  width: 36px !important;
  height: 36px !important;
  flex: 0 0 auto;
  overflow: visible;
  filter: drop-shadow(0 0 10px rgba(45, 226, 230, 0.35));
}

.brand-mark {
  position: relative;
  width: 34px;
  height: 34px;
  border: 1px solid rgba(45, 226, 230, 0.78);
  border-radius: 50%;
  background:
    conic-gradient(from 20deg, transparent 0 54deg, rgba(45, 226, 230, 0.8) 54deg 66deg, transparent 66deg 186deg, rgba(255, 255, 255, 0.24) 186deg 190deg, transparent 190deg),
    radial-gradient(circle at 50% 50%, rgba(45, 226, 230, 0.14), transparent 56%);
  box-shadow: inset 0 0 18px rgba(45, 226, 230, 0.18), 0 0 22px rgba(45, 226, 230, 0.18);
}

.brand-mark::before,
.brand-mark::after {
  position: absolute;
  content: "";
  border-radius: inherit;
}

.brand-mark::before {
  inset: 7px;
  border: 1px solid rgba(255, 255, 255, 0.3);
}

.brand-mark::after {
  width: 5px;
  height: 5px;
  top: 50%;
  right: 8px;
  background: var(--cyan);
  box-shadow: 0 0 14px var(--cyan), -10px 0 0 rgba(183, 255, 74, 0.9);
  transform: translateY(-50%);
}

.nav-menu {
  display: flex;
  gap: 26px;
  align-items: center;
  color: var(--muted);
  font-size: 0.9rem;
}

.nav-menu a {
  transition: color 180ms ease;
}

.nav-menu a:hover,
.nav-menu a:focus-visible {
  color: var(--text);
}

.nav-toggle {
  display: none;
}

.button {
  position: relative;
  display: inline-flex;
  min-height: 48px;
  gap: 10px;
  align-items: center;
  justify-content: center;
  padding: 0 20px;
  color: #021013;
  font-weight: 760;
  background: linear-gradient(135deg, var(--cyan), #8af7ff);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 999px;
  box-shadow: 0 0 0 0 rgba(45, 226, 230, 0.2);
  overflow: hidden;
  transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease;
}

.button::after {
  position: absolute;
  inset: -40% auto -40% -35%;
  width: 34%;
  content: "";
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.48), transparent);
  transform: skewX(-16deg) translateX(0);
  transition: transform 520ms ease;
}

.button:hover,
.button:focus-visible {
  transform: translateY(-2px);
  border-color: rgba(255, 255, 255, 0.36);
  box-shadow: 0 16px 40px rgba(45, 226, 230, 0.26), 0 0 0 5px rgba(45, 226, 230, 0.06);
}

.button:hover::after,
.button:focus-visible::after {
  transform: skewX(-16deg) translateX(430%);
}

.button-secondary {
  color: var(--text);
  background: rgba(255, 255, 255, 0.04);
  border-color: var(--border-strong);
}

.button-secondary::after {
  background: linear-gradient(90deg, transparent, rgba(45, 226, 230, 0.22), transparent);
}

.button-secondary:hover,
.button-secondary:focus-visible {
  border-color: rgba(45, 226, 230, 0.5);
  box-shadow: 0 14px 36px rgba(45, 226, 230, 0.12), inset 0 0 0 1px rgba(45, 226, 230, 0.1);
}

.button-small {
  min-height: 40px;
  padding-inline: 16px;
  color: #021013 !important;
  font-size: 0.84rem;
}

/* CTA meter: a bar that fills left-to-right on hover/focus and snaps to full
   instantly on click. Applied to primary CTAs (Get Dialed In / Request a Site
   Review), not secondary buttons. */
.button:not(.button-secondary)::before {
  position: absolute;
  left: 15px;
  right: 15px;
  bottom: 7px;
  z-index: 1;
  height: 2.5px;
  content: "";
  background: rgba(2, 16, 19, 0.72);
  border-radius: 2px;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 620ms cubic-bezier(0.16, 1, 0.3, 1);
}

.button:not(.button-secondary):hover::before,
.button:not(.button-secondary):focus-visible::before {
  transform: scaleX(1);
}

.button:not(.button-secondary):active::before {
  transform: scaleX(1);
  transition: none;
}

@media (prefers-reduced-motion: reduce) {
  .button:not(.button-secondary)::before {
    transition: none;
  }
}

.button-row {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items: center;
}

/* Persistent floating "Get Dialed In" mini-dial — mobile only (injected by JS). */
.mobile-cta {
  display: none;
}

.mobile-cta-dial {
  flex: 0 0 auto;
  width: 26px;
  height: 26px;
}

@keyframes ctaDialSpin {
  to {
    transform: rotate(360deg);
  }
}

@media (max-width: 760px) {
  .mobile-cta {
    position: fixed;
    z-index: 45;
    right: 14px;
    bottom: max(14px, env(safe-area-inset-bottom));
    display: inline-flex;
    min-height: 46px;
    padding: 0 16px 0 10px;
    gap: 9px;
    font-size: 0.82rem;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.5), 0 0 0 5px rgba(45, 226, 230, 0.08);
  }

  .mobile-cta-needle {
    transform-box: view-box;
    transform-origin: 50% 50%;
    animation: ctaDialSpin 6s linear infinite;
  }

  body.nav-open .mobile-cta {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .mobile-cta-needle {
    animation: none;
  }
}

.section {
  position: relative;
  padding: 124px 0;
}

.section-grid {
  position: relative;
  overflow: hidden;
}

.section-grid::before {
  position: absolute;
  inset: 0;
  z-index: -1;
  content: "";
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.045) 1px, transparent 1px),
    linear-gradient(rgba(255, 255, 255, 0.035) 1px, transparent 1px);
  background-size: 58px 58px;
  mask-image: radial-gradient(circle at 70% 36%, #000, transparent 70%);
}

.eyebrow {
  margin: 0 0 18px;
  color: var(--cyan);
  font-size: 0.76rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

h1,
h2,
h3,
p {
  margin-top: 0;
}

h1,
h2 {
  max-width: 920px;
  letter-spacing: 0;
  line-height: 0.96;
}

h1 {
  margin-bottom: 26px;
  font-size: clamp(3.35rem, 7.9vw, 6.9rem);
}

h1 span {
  display: block;
}

h2 {
  margin-bottom: 24px;
  font-size: clamp(2.5rem, 5.8vw, 5.2rem);
}

h3 {
  margin-bottom: 12px;
  font-size: clamp(1.3rem, 2vw, 1.75rem);
  line-height: 1.12;
}

p {
  color: var(--muted);
}

.hero {
  min-height: 100svh;
  padding: calc(var(--header) + 72px) 0 62px;
}

.hero-noise {
  position: absolute;
  inset: auto 0 0;
  height: 38%;
  pointer-events: none;
  background: linear-gradient(to top, rgba(8, 10, 13, 1), transparent);
}

.hero-inner {
  display: grid;
  grid-template-columns: minmax(0, 0.82fr) minmax(420px, 1.18fr);
  gap: 36px;
  align-items: center;
}

.hero-copy {
  position: relative;
  z-index: 2;
}

.hero-subhead {
  max-width: 690px;
  margin-bottom: 30px;
  color: #c4c9d1;
  font-size: clamp(1.08rem, 2vw, 1.34rem);
}

.hero-proofline {
  position: relative;
  max-width: 610px;
  margin: 24px 0 0;
  padding-left: 34px;
  color: #d7dce4;
  font-size: 0.95rem;
  font-weight: 740;
}

.hero-proofline::before {
  position: absolute;
  top: 0.72em;
  left: 0;
  width: 22px;
  height: 1px;
  content: "";
  background: linear-gradient(90deg, var(--cyan), transparent);
  box-shadow: 0 0 14px rgba(45, 226, 230, 0.5);
}

.hero-visual {
  display: grid;
  min-height: 680px;
  gap: 34px;
  align-content: center;
  align-items: center;
  justify-items: start;
}

.dial-system {
  position: relative;
  width: min(100%, 660px);
  aspect-ratio: 1;
  --dial-angle: -135deg;
  --active-x: 29%;
  --active-y: 29%;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 24px;
  background:
    radial-gradient(circle at var(--active-x) var(--active-y), rgba(45, 226, 230, 0.2), transparent 24%),
    radial-gradient(circle at center, rgba(45, 226, 230, 0.1), transparent 34%),
    radial-gradient(circle at 60% 15%, rgba(183, 255, 74, 0.1), transparent 18%),
    linear-gradient(145deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.015));
  box-shadow: var(--shadow), inset 0 1px 0 rgba(255, 255, 255, 0.1), inset 0 0 0 1px rgba(45, 226, 230, 0.04);
  overflow: hidden;
  transition: background 520ms cubic-bezier(0.16, 1, 0.3, 1), border-color 260ms ease;
}

.dial-system::before,
.dial-system::after {
  position: absolute;
  pointer-events: none;
  content: "";
}

.dial-system::before {
  inset: 14px;
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 18px;
}

.dial-system::after {
  inset: 0;
  background:
    linear-gradient(90deg, transparent 0 49.85%, rgba(45, 226, 230, 0.1) 49.85% 50.15%, transparent 50.15%),
    linear-gradient(180deg, transparent 0 49.85%, rgba(255, 255, 255, 0.08) 49.85% 50.15%, transparent 50.15%);
  opacity: 0.6;
}

.dial-status-row {
  position: absolute;
  top: 22px;
  right: 24px;
  left: 24px;
  z-index: 4;
  display: flex;
  justify-content: space-between;
  gap: 16px;
  color: #cdd6e2;
  font-size: 0.66rem;
  font-weight: 850;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.dial-status-row span {
  display: inline-flex;
  gap: 8px;
  align-items: center;
  padding: 7px 9px;
  background: rgba(8, 10, 13, 0.5);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 999px;
}

.dial-status-row i {
  width: 6px;
  height: 6px;
  background: var(--lime);
  border-radius: 50%;
  box-shadow: 0 0 14px rgba(183, 255, 74, 0.7);
}

.grid-plane {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.06) 1px, transparent 1px);
  background-size: 42px 42px;
  transform: perspective(520px) rotateX(56deg) translateY(80px) scale(1.2);
  transform-origin: bottom;
}

.dial-ring {
  position: absolute;
  inset: 15%;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 50%;
}

.ring-two {
  inset: 25%;
  border-style: dashed;
  border-color: rgba(45, 226, 230, 0.42);
  transform: rotate(var(--dial-angle));
  transition: transform 620ms cubic-bezier(0.16, 1, 0.3, 1);
}

.ring-three {
  inset: 35%;
  border-color: rgba(183, 255, 74, 0.3);
}

.dial-sweep {
  position: absolute;
  inset: 19%;
  border-radius: 50%;
  background: conic-gradient(from -18deg, transparent 0deg, rgba(45, 226, 230, 0.08) 4deg, rgba(45, 226, 230, 0.62) 18deg, rgba(59, 130, 246, 0.26) 34deg, transparent 46deg, transparent 360deg);
  mask-image: radial-gradient(circle, transparent 55%, #000 56%);
  transform: rotate(var(--dial-angle));
  transition: transform 620ms cubic-bezier(0.16, 1, 0.3, 1);
}

.dial-target-line {
  position: absolute;
  bottom: 50%;
  left: 50%;
  z-index: 2;
  width: 2px;
  height: 31%;
  pointer-events: none;
  background: linear-gradient(to top, rgba(45, 226, 230, 0.12), rgba(45, 226, 230, 0.9));
  transform: translateX(-50%) rotate(var(--dial-angle));
  transform-origin: bottom center;
  transition: transform 620ms cubic-bezier(0.16, 1, 0.3, 1);
}

.dial-target-line::after {
  position: absolute;
  top: -6px;
  left: 50%;
  width: 11px;
  height: 11px;
  content: "";
  background: var(--cyan);
  border: 2px solid rgba(8, 10, 13, 0.92);
  border-radius: 50%;
  box-shadow: 0 0 24px rgba(45, 226, 230, 0.78);
  transform: translateX(-50%);
}

.active-glow {
  position: absolute;
  left: var(--active-x);
  top: var(--active-y);
  z-index: 2;
  width: 110px;
  height: 110px;
  pointer-events: none;
  background: radial-gradient(circle, rgba(45, 226, 230, 0.34), rgba(45, 226, 230, 0.08) 44%, transparent 72%);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  transition: left 620ms cubic-bezier(0.16, 1, 0.3, 1), top 620ms cubic-bezier(0.16, 1, 0.3, 1);
}

.dial-core {
  position: absolute;
  inset: 38%;
  z-index: 3;
  display: grid;
  place-items: center;
  align-content: center;
  text-align: center;
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 34%, rgba(45, 226, 230, 0.24), transparent 42%),
    rgba(8, 10, 13, 0.84);
  border: 1px solid rgba(45, 226, 230, 0.36);
  box-shadow: 0 0 48px rgba(45, 226, 230, 0.24), inset 0 0 28px rgba(45, 226, 230, 0.1);
}

.dial-core span {
  color: var(--muted);
  font-size: 0.62rem;
  font-weight: 850;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.dial-core strong {
  max-width: 130px;
  color: var(--text);
  font-size: clamp(1rem, 2vw, 1.28rem);
  line-height: 1.05;
}

.dial-point {
  position: absolute;
  z-index: 5;
  display: inline-flex;
  align-items: center;
  padding: 7px 10px;
  color: #dfefff;
  font-size: 0.72rem;
  font-weight: 750;
  font-family: inherit;
  white-space: nowrap;
  background: rgba(8, 10, 13, 0.66);
  border: 1px solid var(--border);
  border-radius: 999px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.32);
  cursor: pointer;
  transform: translate(-50%, -50%);
  transition: color 200ms ease, border-color 200ms ease, background 200ms ease, opacity 200ms ease, transform 200ms ease, box-shadow 200ms ease;
}

.dial-system.has-active .dial-point:not(.is-active) {
  opacity: 0.46;
}

.dial-point::before {
  display: inline-block;
  flex: 0 0 auto;
  width: 6px;
  height: 6px;
  margin-right: 8px;
  content: "";
  background: var(--muted-2);
  border-radius: 50%;
  transition: background 200ms ease, box-shadow 200ms ease;
}

/* Connector dots: six markers evenly on one circle (R_dot = 31%) so the
   needle tip lands exactly on the active option's dot. */
.dial-anchor {
  position: absolute;
  z-index: 2;
  width: 14px;
  height: 14px;
  pointer-events: none;
  background: rgba(8, 10, 13, 0.82);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 50%;
  box-shadow: 0 0 0 7px rgba(45, 226, 230, 0.035);
  transform: translate(-50%, -50%);
  transition: background 220ms ease, border-color 220ms ease, box-shadow 220ms ease;
}

.dial-anchor.is-active {
  background: var(--cyan);
  border-color: rgba(45, 226, 230, 0.94);
  box-shadow: 0 0 0 7px rgba(45, 226, 230, 0.1), 0 0 24px rgba(45, 226, 230, 0.7);
}

.anchor-one {
  top: 23.15%;
  left: 34.5%;
}

.anchor-two {
  top: 23.15%;
  left: 65.5%;
}

.anchor-three {
  top: 50%;
  left: 19%;
}

.anchor-four {
  top: 50%;
  left: 81%;
}

.anchor-five {
  top: 76.85%;
  left: 34.5%;
}

.anchor-six {
  top: 76.85%;
  left: 65.5%;
}

.dial-point:hover,
.dial-point:focus-visible,
.dial-point.is-active {
  color: var(--text);
  background: rgba(45, 226, 230, 0.12);
  border-color: rgba(45, 226, 230, 0.55);
  box-shadow: 0 14px 36px rgba(0, 0, 0, 0.36), 0 0 24px rgba(45, 226, 230, 0.18);
  opacity: 1 !important;
  transform: translate(-50%, calc(-50% - 3px));
}

.dial-point:hover::before,
.dial-point:focus-visible::before,
.dial-point.is-active::before {
  background: var(--cyan);
  box-shadow: 0 0 14px rgba(45, 226, 230, 0.75);
}

/* Six labels on a symmetric hexagon: top row, mid sides, bottom row.
   Each pill is centered on its point via translate(-50%, -50%); the
   data-angle on each button matches these coordinates so the needle
   points exactly at the active pill's center. */
.label-one {
  top: 17.1%;
  left: 31%;
}

.label-two {
  top: 17.1%;
  left: 69%;
}

/* Side pills sit a touch further out than the top/bottom pills so their
   (wider) bodies clear their connector dots like the others. */
.label-three {
  top: 50%;
  left: 9.5%;
}

.label-four {
  top: 50%;
  left: 90.5%;
}

.label-five {
  top: 82.9%;
  left: 31%;
}

.label-six {
  top: 82.9%;
  left: 69%;
}

.dial-info {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, 0.65fr) minmax(0, 1.35fr) auto;
  gap: 16px;
  align-items: center;
  width: min(100%, 660px);
  min-height: 76px;
  padding: 14px 16px;
  background: rgba(8, 10, 13, 0.72);
  border: 1px solid rgba(45, 226, 230, 0.2);
  border-radius: 8px;
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.28);
  backdrop-filter: blur(14px);
}

.dial-info span,
.dial-info small {
  color: var(--cyan);
  font-size: 0.64rem;
  font-weight: 850;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.dial-info p {
  margin: 0;
  color: #d7dce4;
  font-size: 0.86rem;
  line-height: 1.35;
}

.dial-info small {
  color: var(--lime);
  white-space: nowrap;
}

.proof-strip {
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  background: rgba(255, 255, 255, 0.025);
}

.proof-inner {
  display: grid;
  grid-template-columns: minmax(260px, 0.9fr) minmax(0, 1.1fr);
  gap: 24px;
  align-items: center;
  padding: 24px 0;
}

.proof-inner p {
  margin: 0;
  color: var(--text);
  font-size: 0.9rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.proof-inner span {
  color: var(--muted);
}

/* ── Proof gauges ── */
.proof-gauges {
  padding: 56px 0 48px;
  border-bottom: 1px solid var(--border);
  background: rgba(255, 255, 255, 0.012);
}

.gauge-row {
  display: flex;
  gap: 16px;
  justify-content: center;
  flex-wrap: wrap;
}

.gauge-dial {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  min-width: 130px;
}

.gauge-wrap {
  position: relative;
  width: 110px;
  height: 110px;
  display: grid;
  place-items: center;
}

.gauge-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  transform: rotate(135deg);
  overflow: visible;
}

.gauge-track {
  fill: none;
  stroke: rgba(255, 255, 255, 0.07);
  stroke-width: 5;
  stroke-dasharray: 150.80 50.26;
  stroke-linecap: round;
}

.gauge-fill {
  fill: none;
  stroke: var(--cyan);
  stroke-width: 5;
  stroke-dasharray: 150.80 50.26;
  stroke-dashoffset: 150.80;
  stroke-linecap: round;
  filter: drop-shadow(0 0 5px rgba(45, 226, 230, 0.65));
  transition: stroke-dashoffset 1400ms cubic-bezier(0.16, 1, 0.3, 1);
}

.gauge-fill-lime {
  stroke: var(--lime);
  filter: drop-shadow(0 0 5px rgba(183, 255, 74, 0.65));
}

.gauge-value {
  position: relative;
  z-index: 1;
  font-size: 1.85rem;
  font-weight: 900;
  color: var(--text);
  line-height: 1;
  letter-spacing: -0.02em;
}

.gauge-label {
  font-size: 0.82rem;
  font-weight: 800;
  color: var(--text);
  letter-spacing: 0.04em;
}

.gauge-sub {
  font-size: 0.68rem;
  font-weight: 700;
  color: var(--muted-2);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-top: -6px;
}

.gauge-source {
  margin: 32px auto 0;
  font-size: 0.76rem;
  color: var(--muted-2);
  text-align: center;
}

@media (prefers-reduced-motion: reduce) {
  .gauge-fill {
    transition: none !important;
  }
}

.section-heading {
  max-width: 840px;
  margin-bottom: 56px;
}

.section-heading p:not(.eyebrow) {
  max-width: 660px;
  font-size: 1.06rem;
}

.project-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
}

.project-card {
  min-width: 0;
  padding: 10px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.065), rgba(255, 255, 255, 0.025));
  border: 1px solid var(--border);
  border-radius: 8px;
  transition: transform 220ms ease, border-color 220ms ease, background 220ms ease;
}

.project-card:hover,
.project-card:focus-within {
  transform: translateY(-5px);
  border-color: rgba(45, 226, 230, 0.36);
  background: linear-gradient(180deg, rgba(45, 226, 230, 0.085), rgba(255, 255, 255, 0.025));
}

.project-visual {
  position: relative;
  min-height: 390px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 6px;
  background:
    radial-gradient(circle at 70% 28%, rgba(255, 255, 255, 0.22), transparent 24%),
    linear-gradient(135deg, rgba(45, 226, 230, 0.24), rgba(59, 130, 246, 0.06)),
    #11161d;
}

.visual-healthcare {
  background:
    radial-gradient(circle at 22% 28%, rgba(183, 255, 74, 0.2), transparent 20%),
    linear-gradient(135deg, rgba(45, 226, 230, 0.2), rgba(59, 130, 246, 0.09)),
    #101823;
}

.visual-hospitality {
  background:
    radial-gradient(circle at 76% 24%, rgba(183, 255, 74, 0.2), transparent 22%),
    linear-gradient(135deg, rgba(255, 255, 255, 0.09), rgba(45, 226, 230, 0.15)),
    #12171b;
}

.visual-restaurant {
  background:
    radial-gradient(circle at 30% 20%, rgba(59, 130, 246, 0.22), transparent 22%),
    linear-gradient(145deg, rgba(183, 255, 74, 0.14), rgba(45, 226, 230, 0.08)),
    #11161d;
}

.visual-medical {
  background:
    radial-gradient(circle at 70% 60%, rgba(45, 226, 230, 0.24), transparent 26%),
    linear-gradient(145deg, rgba(255, 255, 255, 0.08), rgba(59, 130, 246, 0.12)),
    #0f1620;
}

.project-visual::before {
  position: absolute;
  inset: 0;
  content: "";
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.07) 1px, transparent 1px);
  background-size: 36px 36px;
  mask-image: linear-gradient(135deg, #000, transparent 82%);
}

.browser-bar {
  position: absolute;
  top: 34px;
  left: 34px;
  width: min(72%, 360px);
  height: 28px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: rgba(8, 10, 13, 0.54);
}

.browser-bar::before {
  position: absolute;
  top: 9px;
  left: 14px;
  width: 10px;
  height: 10px;
  content: "";
  background: var(--cyan);
  border-radius: 50%;
  box-shadow: 22px 0 0 rgba(255, 255, 255, 0.28), 44px 0 0 rgba(183, 255, 74, 0.75);
}

.mockup-panel {
  position: absolute;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 8px;
  background: rgba(8, 10, 13, 0.55);
  backdrop-filter: blur(10px);
}

.mockup-wide {
  top: 88px;
  left: 34px;
  width: 68%;
  height: 118px;
}

.mockup-small {
  right: 34px;
  bottom: 42px;
  width: 34%;
  height: 164px;
}

.mockup-line {
  left: 34px;
  bottom: 58px;
  width: 44%;
  height: 68px;
}

.project-overlay {
  position: absolute;
  right: 18px;
  bottom: 18px;
  display: grid;
  gap: 10px;
  min-width: 200px;
  padding: 14px 16px;
  color: var(--text);
  background: rgba(8, 10, 13, 0.84);
  border: 1px solid rgba(45, 226, 230, 0.28);
  border-radius: 8px;
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.34);
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 220ms ease, transform 220ms ease;
}

/* ── Dial kit: overlay readout primitives ── */

.overlay-status {
  display: flex;
  gap: 8px;
  align-items: center;
}

.overlay-status strong {
  color: var(--cyan);
  font-size: 0.72rem;
  font-weight: 850;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.overlay-dot {
  flex: 0 0 auto;
  width: 6px;
  height: 6px;
  background: var(--lime);
  border-radius: 50%;
  box-shadow: 0 0 10px rgba(183, 255, 74, 0.7);
}

.overlay-dot-blue {
  background: var(--blue);
  box-shadow: 0 0 10px rgba(59, 130, 246, 0.7);
}

.overlay-wins {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 7px;
}

.overlay-wins li {
  display: flex;
  gap: 9px;
  align-items: center;
  color: var(--muted);
  font-size: 0.78rem;
}

/* Dial kit: win-bar — mini calibration signal bar */
.win-bar {
  flex: 0 0 auto;
  display: block;
  position: relative;
  width: 30px;
  height: 3px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 999px;
  overflow: hidden;
}

.win-bar::after {
  position: absolute;
  inset: 0;
  content: "";
  background: var(--cyan);
  border-radius: inherit;
  transform: scaleX(var(--w, 80%));
  transform-origin: left;
  box-shadow: 0 0 6px rgba(45, 226, 230, 0.5);
}

.overlay-score {
  display: flex;
  gap: 10px;
  align-items: center;
}

/* Dial kit: score-track — horizontal gauge fill bar */
.score-track {
  flex: 1;
  display: block;
  position: relative;
  height: 3px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 999px;
  overflow: hidden;
}

.score-fill {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, var(--cyan), var(--lime));
  border-radius: inherit;
  transform: scaleX(var(--w, 0%));
  transform-origin: left;
  box-shadow: 0 0 8px rgba(45, 226, 230, 0.5);
}

.overlay-score em {
  font-style: normal;
  font-size: 0.7rem;
  font-weight: 850;
  color: var(--cyan);
  white-space: nowrap;
  letter-spacing: 0.06em;
}

.overlay-concept-tag {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--blue);
  border: 1px solid rgba(59, 130, 246, 0.36);
  border-radius: 999px;
  background: rgba(59, 130, 246, 0.08);
}

.project-card:hover .project-overlay,
.project-card:focus-within .project-overlay {
  opacity: 1;
  transform: translateY(0);
}

.project-content {
  padding: 24px 10px 10px;
}

.project-content p {
  max-width: 560px;
}

.tag-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 22px;
}

.tag-row span,
.industry-grid span {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 7px 11px;
  color: #d8dde5;
  font-size: 0.78rem;
  font-weight: 700;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.035);
}

.services-layout {
  display: grid;
  grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr);
  gap: 70px;
  align-items: start;
}

.sticky-heading {
  position: sticky;
  top: 120px;
}

.service-stack {
  display: grid;
  gap: 14px;
}

.service-card {
  position: relative;
  overflow: hidden;
  min-height: 178px;
  padding: 30px 30px 50px;
  background: rgba(17, 22, 29, 0.72);
  border: 1px solid var(--border);
  border-radius: 8px;
  transition: transform 200ms ease, border-color 200ms ease, background 200ms ease;
}

.service-card:hover,
.service-card.is-active {
  transform: translateX(4px);
  border-color: rgba(183, 255, 74, 0.34);
  background: rgba(21, 29, 38, 0.82);
}

.service-number {
  display: block;
  margin-bottom: 34px;
  color: var(--cyan);
  font-size: 0.82rem;
  font-weight: 900;
  letter-spacing: 0.14em;
}

/* Dial kit: tick-graduation prefix on service numbers */
.service-number::before {
  content: "";
  display: inline-block;
  width: 22px;
  height: 9px;
  margin-right: 10px;
  vertical-align: middle;
  background: repeating-linear-gradient(
    90deg,
    rgba(45, 226, 230, 0.55) 0, rgba(45, 226, 230, 0.55) 1.5px,
    transparent 1.5px, transparent 5px
  );
  opacity: 0.85;
}

.service-card p {
  max-width: 560px;
  margin-bottom: 0;
}

/* Dial kit: signal-line — tuning bar with graduation marks */
.signal-line {
  position: absolute;
  right: 28px;
  bottom: 28px;
  left: 30px;
  height: 4px;
  background: rgba(255, 255, 255, 0.07);
  border-radius: 2px;
  overflow: hidden;
}

.signal-line::before {
  position: absolute;
  inset: 0;
  content: "";
  background: repeating-linear-gradient(
    90deg,
    transparent 0, transparent 9px,
    rgba(255, 255, 255, 0.14) 9px, rgba(255, 255, 255, 0.14) 10px
  );
}

.signal-line::after {
  position: absolute;
  inset: 0;
  content: "";
  background: linear-gradient(90deg, var(--lime), rgba(183, 255, 74, 0.6));
  border-radius: inherit;
  box-shadow: 0 0 14px rgba(183, 255, 74, 0.5);
  transform: scaleX(0.18);
  transform-origin: left;
  transition: transform 480ms cubic-bezier(0.16, 1, 0.3, 1);
}

.service-card:hover .signal-line::after,
.service-card.is-active .signal-line::after {
  transform: scaleX(1);
}

.process {
  background:
    radial-gradient(circle at 18% 18%, rgba(45, 226, 230, 0.09), transparent 30rem),
    rgba(255, 255, 255, 0.01);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

.process-layout {
  display: grid;
  grid-template-columns: minmax(260px, 0.72fr) minmax(0, 1.28fr);
  gap: 74px;
  align-items: start;
}

.process-dial {
  position: sticky;
  top: 132px;
}

.progress-orbit {
  position: relative;
  display: grid;
  width: min(100%, 350px);
  aspect-ratio: 1;
  place-items: center;
  border: 1px solid rgba(45, 226, 230, 0.34);
  border-radius: 50%;
  background:
    radial-gradient(circle, rgba(45, 226, 230, 0.08), transparent 48%),
    repeating-conic-gradient(from 0deg, rgba(255, 255, 255, 0.2) 0deg 1deg, transparent 1deg 12deg);
  box-shadow: inset 0 0 0 32px rgba(8, 10, 13, 0.86), 0 30px 90px rgba(0, 0, 0, 0.32);
}

.progress-orbit::before {
  position: absolute;
  inset: 72px;
  content: "";
  border: 1px dashed rgba(255, 255, 255, 0.18);
  border-radius: 50%;
}

.progress-pointer {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 2px;
  height: 39%;
  background: linear-gradient(to top, var(--cyan), transparent);
  transform: translateX(-50%) rotate(var(--process-angle, -60deg));
  transform-origin: top;
  transition: transform 300ms ease;
}

.progress-orbit strong {
  position: relative;
  z-index: 1;
  font-size: clamp(3rem, 8vw, 5.2rem);
  line-height: 0.9;
}

.progress-orbit small {
  position: absolute;
  top: 61%;
  color: var(--muted);
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

/* Caption shown only when the dial collapses to the mobile sticky HUD. */
.process-dial-caption {
  display: none;
}

/* Current service name shown under the Services progress dial. */
.services-dial-name {
  display: block;
  margin-top: 16px;
  max-width: 220px;
  color: var(--cyan);
  font-size: 0.82rem;
  font-weight: 850;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-align: center;
}

.steps {
  display: grid;
  gap: 16px;
}

.step {
  display: grid;
  grid-template-columns: 58px 1fr;
  gap: 22px;
  padding: 28px;
  background: rgba(17, 22, 29, 0.66);
  border: 1px solid var(--border);
  border-radius: 8px;
  transition: border-color 220ms ease, background 220ms ease, transform 220ms ease;
}

.step.is-active {
  border-color: rgba(45, 226, 230, 0.4);
  background: rgba(45, 226, 230, 0.075);
  transform: translateX(4px);
}

.step span {
  display: grid;
  width: 46px;
  height: 46px;
  place-items: center;
  color: var(--bg);
  font-weight: 900;
  background: var(--text);
  border-radius: 50%;
}

.step.is-active span {
  background: var(--cyan);
}

.step p {
  margin-bottom: 0;
}

.review-panel {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(320px, 1.05fr);
  gap: 54px;
  align-items: center;
  padding: 46px;
  overflow: hidden;
  background:
    radial-gradient(circle at 85% 12%, rgba(183, 255, 74, 0.14), transparent 21rem),
    linear-gradient(135deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.025));
  border: 1px solid var(--border-strong);
  border-radius: 8px;
  box-shadow: var(--shadow);
}

.review-panel h2 {
  font-size: clamp(2.4rem, 4.8vw, 4.5rem);
}

.review-panel p {
  max-width: 560px;
  margin-bottom: 30px;
}

.checklist {
  display: grid;
  gap: 12px;
  padding: 0;
  margin: 0;
  list-style: none;
}

.check-item {
  position: relative;
  min-height: 58px;
  padding: 17px 18px 17px 56px;
  color: var(--muted);
  background: rgba(8, 10, 13, 0.5);
  border: 1px solid var(--border);
  border-radius: 8px;
  transition: color 220ms ease, border-color 220ms ease, background 220ms ease, transform 220ms ease;
}

.check-item::before {
  position: absolute;
  top: 17px;
  left: 18px;
  display: grid;
  width: 24px;
  height: 24px;
  place-items: center;
  color: #041012;
  font-size: 0.8rem;
  font-weight: 900;
  content: "";
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 50%;
}

.check-item.is-lit {
  color: var(--text);
  background: rgba(45, 226, 230, 0.08);
  border-color: rgba(45, 226, 230, 0.34);
  transform: translateX(4px);
}

.check-item.is-lit::before {
  content: "✓";
  background: var(--lime);
  border-color: var(--lime);
  box-shadow: 0 0 18px rgba(183, 255, 74, 0.34);
}

.industries {
  padding-top: 72px;
}

.industry-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.industry-grid span {
  min-height: 46px;
  padding-inline: 16px;
  font-size: 0.92rem;
}

.final-cta {
  padding: 110px 0;
}

.final-panel {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(300px, 0.9fr);
  gap: 56px;
  align-items: start;
  padding: 48px;
  background:
    radial-gradient(circle at 78% 40%, rgba(45, 226, 230, 0.16), transparent 26rem),
    linear-gradient(135deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.025));
  border: 1px solid var(--border-strong);
  border-radius: 8px;
}

.final-copy h2 {
  max-width: 700px;
  font-size: clamp(2.4rem, 5vw, 4.6rem);
}

.final-copy p {
  max-width: 520px;
  margin-bottom: 20px;
  font-size: 1.08rem;
}

.contact-alt {
  font-size: 0.88rem;
  color: var(--muted);
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color 180ms ease;
}

.contact-alt:hover {
  color: var(--cyan);
}

/* ── Lead capture form ── */
.audit-form {
  display: grid;
  gap: 14px;
}

.form-row {
  display: grid;
  gap: 6px;
}

.form-row label {
  font-size: 0.76rem;
  font-weight: 800;
  color: var(--muted);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.form-row .req {
  color: var(--cyan);
}

.form-row input,
.form-row select,
.form-row textarea {
  width: 100%;
  height: 48px;
  padding: 0 16px;
  color: var(--text);
  font: inherit;
  font-size: 0.94rem;
  background: rgba(8, 10, 13, 0.6);
  border: 1px solid var(--border-strong);
  border-radius: 6px;
  outline: none;
  transition: border-color 180ms ease, box-shadow 180ms ease;
  appearance: none;
  -webkit-appearance: none;
}

.form-row textarea {
  height: auto;
  min-height: 92px;
  padding: 12px 16px;
  resize: vertical;
  line-height: 1.5;
}

.form-row select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23a5acb8' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: 38px;
  cursor: pointer;
}

.form-row select option {
  background: #11161d;
  color: var(--text);
}

.form-row input::placeholder {
  color: var(--muted-2);
}

.form-row input:focus,
.form-row select:focus,
.form-row textarea:focus {
  border-color: rgba(45, 226, 230, 0.6);
  box-shadow: 0 0 0 3px rgba(45, 226, 230, 0.1);
}

.form-row input:invalid:not(:placeholder-shown) {
  border-color: rgba(255, 80, 80, 0.5);
}

.form-foot {
  display: grid;
  gap: 12px;
  margin-top: 4px;
}

.form-note {
  margin: 0;
  font-size: 0.74rem;
  color: var(--muted-2);
}

/* Dial kit: tick-rule — section divider with graduation marks */
.tick-rule {
  position: relative;
  height: 24px;
  overflow: hidden;
  pointer-events: none;
}

.tick-rule::before {
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  height: 1px;
  content: "";
  background: var(--border);
}

.tick-rule::after {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  content: "";
  width: min(100%, 680px);
  height: 100%;
  background:
    repeating-linear-gradient(
      90deg,
      transparent 0, transparent 28px,
      rgba(45, 226, 230, 0.22) 28px, rgba(45, 226, 230, 0.22) 29px,
      transparent 29px, transparent 34px,
      rgba(45, 226, 230, 0.12) 34px, rgba(45, 226, 230, 0.12) 35px
    );
  mask-image: radial-gradient(ellipse 70% 100% at 50% 50%, #000 40%, transparent 100%);
}

.site-footer {
  padding: 54px 0;
  border-top: 1px solid var(--border);
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.1fr 0.7fr 1fr;
  gap: 34px;
  align-items: start;
}

.footer-grid p,
.footer-grid span,
.footer-grid a {
  color: var(--muted);
}

.footer-grid .brand span:last-child {
  color: var(--text);
}

.footer-links,
.footer-contact {
  display: grid;
  gap: 10px;
}

/* ── Active nav state ── */
.nav-menu a[aria-current="page"] {
  color: var(--text);
}

.nav-menu a[aria-current="page"]:not(.button)::after {
  display: block;
  width: 6px;
  height: 6px;
  margin: 4px auto 0;
  content: "";
  background: var(--cyan);
  border-radius: 50%;
  box-shadow: 0 0 10px rgba(45, 226, 230, 0.7);
}

/* ── Inner-page hero ── */
.page-hero {
  padding: calc(var(--header) + 92px) 0 72px;
}

.page-hero-tight {
  padding-bottom: 40px;
}

.page-hero-inner {
  max-width: 880px;
}

.page-hero h1 {
  margin-bottom: 22px;
  font-size: clamp(2.8rem, 6.4vw, 5.4rem);
}

.page-hero-sub {
  max-width: 660px;
  margin-bottom: 26px;
  color: #c4c9d1;
  font-size: clamp(1.06rem, 2vw, 1.28rem);
}

.page-hero-status {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.status-chip {
  display: inline-flex;
  gap: 8px;
  align-items: center;
  padding: 8px 14px;
  color: #cdd6e2;
  font-size: 0.68rem;
  font-weight: 850;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  background: rgba(8, 10, 13, 0.5);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 999px;
}

.status-chip i {
  width: 6px;
  height: 6px;
  background: var(--lime);
  border-radius: 50%;
  box-shadow: 0 0 14px rgba(183, 255, 74, 0.7);
}

.status-chip-muted {
  color: var(--muted-2);
  text-transform: none;
  letter-spacing: 0.04em;
  font-weight: 700;
}

/* ── Section heading with inline action ── */
.section-heading-row {
  display: flex;
  gap: 24px;
  align-items: flex-end;
  justify-content: space-between;
  flex-wrap: wrap;
}

.section-heading-row > div {
  max-width: 760px;
}

/* ── CTA-only final panel ── */
.final-panel-cta {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
}

/* ── About page ── */
.about-layout {
  display: grid;
  grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr);
  gap: 70px;
  align-items: start;
}

.about-prose p {
  font-size: 1.1rem;
  margin-bottom: 18px;
}

.about-prose p:last-child {
  margin-bottom: 0;
}

.about-prose strong {
  color: var(--text);
}

.principle-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.principle-card {
  position: relative;
  overflow: hidden;
  min-height: 190px;
  padding: 30px 30px 44px;
  background: rgba(17, 22, 29, 0.72);
  border: 1px solid var(--border);
  border-radius: 8px;
  transition: transform 200ms ease, border-color 200ms ease, background 200ms ease;
}

.principle-card:hover {
  transform: translateY(-4px);
  border-color: rgba(45, 226, 230, 0.34);
  background: rgba(21, 29, 38, 0.82);
}

.principle-card p {
  margin-bottom: 0;
}

/* ── Contact page ── */
.contact-section {
  padding-top: 24px;
}

.contact-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(280px, 0.9fr);
  gap: 48px;
  align-items: start;
}

.contact-form-panel {
  padding: 36px;
  background:
    radial-gradient(circle at 80% 0%, rgba(45, 226, 230, 0.1), transparent 22rem),
    linear-gradient(135deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.02));
  border: 1px solid var(--border-strong);
  border-radius: 10px;
  box-shadow: var(--shadow);
}

.contact-form-title {
  margin-bottom: 24px;
  font-size: clamp(1.5rem, 3vw, 2rem);
  line-height: 1.1;
}

.contact-aside {
  display: grid;
  gap: 28px;
  align-content: start;
}

.aside-block .eyebrow {
  margin-bottom: 14px;
}

.checklist-compact .check-item {
  min-height: 0;
  padding: 14px 16px 14px 50px;
  font-size: 0.92rem;
}

.checklist-compact .check-item::before {
  top: 14px;
  left: 16px;
  width: 22px;
  height: 22px;
}

.aside-contact {
  padding: 24px;
  background: rgba(8, 10, 13, 0.5);
  border: 1px solid var(--border);
  border-radius: 8px;
}

.aside-email {
  display: inline-block;
  margin-bottom: 12px;
  color: var(--cyan);
  font-size: 1.06rem;
  font-weight: 760;
  text-underline-offset: 3px;
}

.aside-email:hover {
  text-decoration: underline;
}

.aside-meta {
  margin: 0;
  font-size: 0.86rem;
}

.reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 620ms ease, transform 620ms ease;
}

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

@keyframes rotateSlow {
  to {
    transform: rotate(360deg);
  }
}

@keyframes pulse {
  0%,
  100% {
    transform: scale(1);
    opacity: 0.72;
  }

  50% {
    transform: scale(1.55);
    opacity: 1;
  }
}

@media (max-width: 980px) {
  :root {
    --header: 72px;
  }

  .hero-inner,
  .services-layout,
  .process-layout,
  .review-panel,
  .final-panel,
  .final-panel-cta,
  .about-layout,
  .contact-layout,
  .footer-grid {
    grid-template-columns: 1fr;
  }

  .final-panel {
    gap: 36px;
  }

  .about-layout {
    gap: 36px;
  }

  .contact-layout {
    gap: 32px;
  }

  .page-hero {
    padding-top: calc(var(--header) + 56px);
  }

  .hero {
    padding-top: calc(var(--header) + 44px);
  }

  .hero-visual {
    min-height: 480px;
    justify-items: center;
  }

  .dial-system {
    max-width: 500px;
  }

  .dial-info {
    grid-template-columns: 1fr;
    gap: 8px;
    max-width: 500px;
  }

  .dial-info small {
    justify-self: start;
  }

  .proof-inner,
  .project-grid {
    grid-template-columns: 1fr;
  }

  .sticky-heading,
  /* Mobile: collapse the process dial into a compact sticky HUD that pins
     near the top and tracks the live step percentage, releasing once the
     process section scrolls past. Block layout (not grid) lets the sticky
     item travel the full height of the steps instead of its grid track. */
  .process-layout {
    display: block;
  }

  /* On mobile the section dials stay put (no sticky follow) so they don't
     cover the content while scrolling — only the floating Get Dialed In dial
     follows. They sit as a compact static pill at the top of their section. */
  .process-dial {
    position: static;
    justify-self: center;
    width: max-content;
    max-width: calc(100% - 24px);
    margin: 0 auto 24px;
    padding: 8px 22px 8px 8px;
    display: flex;
    align-items: center;
    gap: 14px;
    background: rgba(8, 10, 13, 0.85);
    border: 1px solid rgba(45, 226, 230, 0.28);
    border-radius: 999px;
  }

  .progress-orbit {
    width: 58px;
    box-shadow: inset 0 0 0 6px rgba(8, 10, 13, 0.9);
  }

  .progress-orbit::before {
    inset: 11px;
  }

  .progress-orbit strong {
    font-size: 1.1rem;
  }

  .progress-orbit small {
    display: none;
  }

  .services-dial-name {
    margin-top: 0;
    max-width: none;
    text-align: left;
    white-space: nowrap;
  }

  .process-dial-caption {
    display: block;
    color: var(--muted);
    font-size: 0.72rem;
    font-weight: 850;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    white-space: nowrap;
  }

  .final-panel {
    align-items: start;
  }
}

@media (max-width: 760px) {
  .container,
  .nav-shell {
    width: min(100% - 28px, var(--max));
  }

  .nav-toggle {
    position: relative;
    z-index: 51;
    display: grid;
    width: 44px;
    height: 44px;
    place-items: center;
    padding: 0;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--border);
    border-radius: 999px;
  }

  .nav-toggle span:not(.sr-only) {
    display: block;
    width: 18px;
    height: 2px;
    background: var(--text);
    transition: transform 180ms ease;
  }

  .nav-toggle[aria-expanded="true"] span:nth-child(2) {
    transform: translateY(4px) rotate(45deg);
  }

  .nav-toggle[aria-expanded="true"] span:nth-child(3) {
    transform: translateY(-4px) rotate(-45deg);
  }

  .nav-menu {
    position: fixed;
    inset: 0;
    z-index: 50;
    display: grid;
    align-content: center;
    justify-items: center;
    gap: 24px;
    padding: 90px 24px;
    font-size: 1.3rem;
    background: rgba(8, 10, 13, 0.96);
    opacity: 0;
    pointer-events: none;
    transform: translateY(-8px);
    transition: opacity 200ms ease, transform 200ms ease;
  }

  .nav-menu.is-open {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
  }

  h1 {
    font-size: clamp(3.1rem, 15vw, 5rem);
  }

  h2 {
    font-size: clamp(2.25rem, 11vw, 3.8rem);
  }

  .section {
    padding: 84px 0;
  }

  .hero {
    min-height: auto;
    padding-bottom: 54px;
  }

  .hero-subhead {
    font-size: 1.06rem;
  }

  .button-row,
  .button:not(.mobile-cta) {
    width: 100%;
  }

  .hero-visual {
    min-height: 380px;
  }

  .dial-system {
    border-radius: 8px;
  }

  .dial-status-row {
    top: 16px;
    right: 16px;
    left: 16px;
    font-size: 0.58rem;
  }

  .dial-status-row span:last-child {
    display: none;
  }

  .dial-point {
    font-size: 0.68rem;
  }

  .label-one {
    top: 18.8%;
    left: 32%;
  }

  .label-two {
    top: 18.8%;
    left: 68%;
  }

  .label-three {
    top: 50%;
    left: 14%;
  }

  .label-four {
    top: 50%;
    left: 86%;
  }

  .label-five {
    top: 81.2%;
    left: 32%;
  }

  .label-six {
    top: 81.2%;
    left: 68%;
  }

  .dial-core {
    inset: 35%;
  }

  .dial-info {
    min-height: 0;
    padding: 12px;
  }

  .dial-info p {
    font-size: 0.78rem;
  }

  .project-visual {
    min-height: 310px;
  }

  .project-overlay {
    right: 12px;
    bottom: 12px;
    left: 12px;
    min-width: 0;
    opacity: 1;
    transform: none;
  }

  .service-card,
  .step,
  .review-panel,
  .final-panel {
    padding: 24px;
  }

  .service-card {
    padding-bottom: 44px;
  }

  .principle-grid {
    grid-template-columns: 1fr;
  }

  .contact-form-panel {
    padding: 24px;
  }

  .section-heading-row .button-secondary {
    width: 100%;
  }

  .step {
    grid-template-columns: 44px 1fr;
    gap: 16px;
  }

  .step span {
    width: 40px;
    height: 40px;
  }

  .review-panel {
    gap: 32px;
  }

  .check-item {
    padding-right: 14px;
  }
}

@media (max-width: 470px) {
  .brand {
    gap: 9px;
    font-size: 0.92rem;
  }

  .brand-logo {
    width: 30px !important;
    height: 30px !important;
  }

  .brand-mark {
    width: 30px;
    height: 30px;
  }

  .hero-visual {
    min-height: 330px;
  }

  .dial-point {
    padding: 6px 8px;
  }

  .dial-point::before {
    width: 5px;
    height: 5px;
    margin-right: 5px;
  }

  .dial-core {
    inset: 34%;
  }

  .dial-core strong {
    font-size: 0.86rem;
  }

  .dial-core span {
    font-size: 0.52rem;
  }

  .label-one {
    top: 20.6%;
    left: 33%;
  }

  .label-two {
    top: 20.6%;
    left: 67%;
  }

  .label-three {
    top: 50%;
    left: 16%;
  }

  .label-four {
    top: 50%;
    left: 84%;
  }

  .label-five {
    top: 79.4%;
    left: 33%;
  }

  .label-six {
    top: 79.4%;
    left: 67%;
  }

  .project-content {
    padding-inline: 4px;
  }

  .mockup-small {
    display: none;
  }

  .mockup-wide,
  .mockup-line {
    width: calc(100% - 56px);
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  .reveal {
    opacity: 1;
    transform: none;
  }
}