:root {
  /* ─── Eulerian Gradient · primary surface (60%) ─── */
  --bg-gradient-top:  #0B1B39;  /* navy 700 */
  --bg-gradient-mid:  #070F26;
  --bg-gradient-base: #010413;  /* navy 950 */
  --bg-primary:       #0B1B39;
  --bg-secondary:     #081330;  /* navy 800 */
  --bg-card:          rgba(14, 38, 87, 0.35);   /* cobalt 900 · translucent */
  --bg-card-hover:    rgba(20, 48, 107, 0.50);
  --bg-accent-dark:   #050A1B;  /* navy 850 */

  /* ─── Proof White (28%) ─── */
  --text-primary:   #FFFFFF;
  --text-secondary: rgba(255,255,255,0.74);
  --text-muted:     rgba(255,255,255,0.50);

  /* ─── Identity Cobalt · single signal (12%) ─── */
  --accent-blue:        #3B82F6;  /* cobalt 500 */
  --accent-blue-hover:  #1E5FD4;  /* cobalt 600 */
  --accent-blue-soft:   #60A0FF;  /* cobalt 400 */
  --accent-blue-deep:   #1647A8;  /* cobalt 700 */
  --accent-blue-faint:  #D6E5FE;  /* cobalt 100 */

  /* ─── Secondary accent · gold (CTA buttons, inline links) ─── */
  --accent-gold: #bd9f64;

  /* Functional only — used sparingly */
  --accent-green: #10B981;
  --accent-amber: #F59E0B;
  --accent-red:   #EF4444;

  --border-color:  rgba(255,255,255,0.08);
  --border-accent: rgba(59,130,246,0.35);

  /* ─── Type ─── */
  --font-display:   'Gabarito', system-ui, sans-serif;        /* brand & product */
  --font-editorial: 'Fraunces', 'Iowan Old Style', serif;     /* editorial italic */
  --font-body:      'Inter', system-ui, sans-serif;           /* body & UI */
  --font-mono:      'JetBrains Mono', ui-monospace, monospace;

  --max-width: 1200px;
  --radius:    10px;
  --radius-sm: 6px;
  --radius-lg: 14px;
}

*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html {
  scroll-behavior: smooth;
  font-size: 16px;
  background: var(--bg-gradient-base);    /* prevents white overscroll on Safari/iOS */
}
body {
  font-family: var(--font-body);
  background:
    radial-gradient(ellipse at 78% 18%, rgba(59,130,246,0.10), transparent 55%),
    linear-gradient(180deg, var(--bg-gradient-top) 0%, var(--bg-gradient-mid) 55%, var(--bg-gradient-base) 100%);
  background-attachment: fixed;
  color: var(--text-primary);
  line-height: 1.6;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  font-feature-settings: "ss01", "cv11";
}

/* ─── Glass surfaces · translucent navy + backdrop blur ─── */
.hero-card,
.service-card,
.platform-pill,
.case-card,
.testimonial-card,
.about-stat,
.stat-block,
.lm-card,
.form-input,
.checkbox-item {
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

/* ─── Card hover · subtle cobalt sheen ─── */
.service-card,
.case-card,
.testimonial-card,
.stat-block,
.about-stat,
.platform-pill {
  transition: background 0.3s ease, border-color 0.3s ease, color 0.2s ease;
}
.service-card:hover,
.case-card:hover,
.testimonial-card:hover,
.stat-block:hover,
.about-stat:hover,
.platform-pill:hover {
  background: var(--bg-card-hover);
  border-color: var(--border-accent);
}

/* ─── Card hover · cobalt gradient sweep
   Pseudo lives behind content (z-index: -1, isolated) so the translucent
   navy fill stays in front and the glass effect is preserved. The gradient
   pans 0%→100% on hover and scales gently — pure cobalt scale, no second
   accent colour, per the single-signal rule. */
.service-card,
.case-card,
.testimonial-card,
.stat-block,
.about-stat {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}
.service-card::before,
.case-card::before,
.testimonial-card::before,
.stat-block::before,
.about-stat::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
  background: linear-gradient(
    130deg,
    transparent 0% 55%,
    rgba(22, 71, 168, 0.10) 75%,
    rgba(59, 130, 246, 0.12) 90%,
    rgba(96, 160, 255, 0.08) 100%
  );
  background-size: 300% 300%;
  background-position: 0% 0%;
  opacity: 0;
  transform: scale(1, 1);
  transform-origin: 100% 100%;
  transition:
    background-position 600ms ease,
    opacity 380ms ease,
    transform 600ms ease;
  z-index: -1;
}
.service-card:hover::before,
.case-card:hover::before,
.testimonial-card:hover::before,
.stat-block:hover::before,
.about-stat:hover::before {
  background-position: 100% 100%;
  opacity: 1;
  transform: scale(1.04, 1.02);
}

/* ─── Chevron · slides in on hover ─── */
.chevron {
  width: 0.95em;
  height: 0.95em;
  display: inline-block;
  vertical-align: -0.12em;
  margin-left: 4px;
  opacity: 0.55;
  transform: translateX(0);
  transition: opacity 0.28s cubic-bezier(.4,0,.2,1), transform 0.28s cubic-bezier(.4,0,.2,1);
  flex-shrink: 0;
}
.dh-link:hover .chevron,
.source-link:hover .chevron,
.btn-text:hover .chevron,
a:hover > .chevron {
  opacity: 1;
  transform: translateX(4px);
}

/* ─── Buttons · shared style + hover-reveal chevron ─── */
/* Chevron's 18px slot (14 + 4 margin) is always reserved → button width
   is constant. Padding-left is bumped by the same 18px so the label sits
   at the button's geometric center at rest. On hover, the label translates
   left and the chevron fades in to fill its reserved slot. */
.btn-primary,
.btn-outline,
.service-cta,
.lm-btn,
.form-submit {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 26px 10px 44px;   /* +18 on the left compensates chevron slot */
  background: var(--accent-gold);
  color: #010413;                  /* navy 950 — dark text on cobalt */
  border: none;
  border-radius: 4px;
  font-family: var(--font-display);
  font-size: 0.88rem;
  font-weight: 600;
  letter-spacing: 0.005em;
  line-height: 1;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}
.btn-primary:hover,
.service-cta:hover,
.lm-btn:hover,
.form-submit:hover {
  background: var(--accent-blue-soft);   /* cobalt 400 — lighter on hover */
  color: #010413;
}
.btn-label {
  display: inline-block;
  transition: transform 0.32s cubic-bezier(.4,0,.2,1);
}
.cta-chevron {
  display: inline-flex;
  align-items: center;
  width: 14px;          /* always reserved */
  margin-left: 4px;     /* always reserved */
  opacity: 0;
  overflow: hidden;
  transition: opacity 0.28s cubic-bezier(.4,0,.2,1);
}
.cta-chevron svg {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  display: block;
  transform: translateX(-4px);
  transition: transform 0.32s cubic-bezier(.4,0,.2,1);
}
.btn-primary:hover .btn-label,
.btn-outline:hover .btn-label,
.service-cta:hover .btn-label,
.lm-btn:hover .btn-label,
.form-submit:hover .btn-label {
  transform: translateX(-9px);
}
.btn-primary:hover .cta-chevron,
.btn-outline:hover .cta-chevron,
.service-cta:hover .cta-chevron,
.lm-btn:hover .cta-chevron,
.form-submit:hover .cta-chevron {
  opacity: 1;
}
.btn-primary:hover .cta-chevron svg,
.btn-outline:hover .cta-chevron svg,
.service-cta:hover .cta-chevron svg,
.lm-btn:hover .cta-chevron svg,
.form-submit:hover .cta-chevron svg {
  transform: translateX(0);
}

/* ─── Utility ─── */
.container { max-width: var(--max-width); margin: 0 auto; padding: 0 24px; }
.section-label {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent-blue);
  margin-bottom: 12px;
}
.section-title {
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 4vw, 2.75rem);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.02em;
  margin-bottom: 16px;
}
/* Editorial italic — the "moment of insight" treatment */
.section-title em,
.hero h1 em,
.editorial {
  font-family: var(--font-editorial);
  font-style: italic;
  font-weight: 400;
  font-feature-settings: "ss01";
  color: var(--accent-blue);
  letter-spacing: -0.01em;
}
.section-subtitle {
  color: var(--text-secondary);
  font-size: 1.05rem;
  max-width: 560px;
  line-height: 1.65;
}

/* Suppress text caret on non-input interactive elements (nav, buttons, links).
   Form inputs/textareas keep their default caret. */
nav, nav *, button, a {
  caret-color: transparent;
}

/* ─── Autofill · keep dark navy bg, override Chrome/Safari yellow ─── */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active,
textarea:-webkit-autofill {
  -webkit-text-fill-color: var(--text-primary);
  -webkit-box-shadow: 0 0 0 1000px #0e2657 inset;
  caret-color: var(--text-primary);
  transition: background-color 9999s ease-in-out 0s;
}
input:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0 1000px #0e2657 inset,
                      0 0 0 3px rgba(59,130,246,0.15);
}

/* ─── Text link hover · gold → cobalt soft ─── */
.dh-link,
.source-link,
.btn-text,
.os-link {
  transition: color 0.4s cubic-bezier(.4, 0, .2, 1);
}
.dh-link:hover,
.stat-block .source-link:hover,
.btn-text:hover,
.os-link:hover {
  color: var(--accent-blue-soft);
}