/* ============================================================
   AIONSITE — Modern Rebuild Design System
   Brand palette + Work Sans / Karla typography
   ============================================================ */

:root {
  /* Brand colours preserved from the original site */
  --brand: rgb(152, 203, 51);            /* signature lime-green */
  --brand-soft: rgb(178, 220, 92);
  --brand-ink: rgb(120, 168, 24);        /* darker green for light-mode text */
  --navy: rgb(29, 43, 79);               /* #1d2b4f primary dark */
  --navy-deep: rgb(18, 26, 48);
  --navy-link: rgb(18, 47, 99);          /* #122f63 accent */
  --ink: rgb(26, 40, 74);                /* #1a284a body heading ink */

  /* Semantic — light */
  --bg: rgb(255, 255, 255);
  --bg-alt: rgb(246, 248, 243);
  --bg-soft: rgb(250, 250, 250);
  --surface: rgb(255, 255, 255);
  --text: rgb(23, 28, 43);
  --text-soft: rgb(75, 82, 105);
  --heading: var(--navy);
  --line: rgb(230, 233, 240);
  --card-shadow: 0 10px 30px -12px rgba(18, 26, 48, 0.18);
  --nav-bg: rgb(255, 255, 255);
  --footer-bg: rgb(23, 23, 23);
  --accent-text: var(--brand-ink);
  --ring: rgba(152, 203, 51, 0.55);
  color-scheme: light;
}

html.dark {
  --bg: var(--navy-deep);
  --bg-alt: rgb(22, 32, 58);
  --bg-soft: rgb(24, 34, 61);
  --surface: rgb(31, 45, 78);
  --text: rgb(233, 237, 245);
  --text-soft: rgb(168, 178, 200);
  --heading: rgb(255, 255, 255);
  --line: rgb(48, 63, 102);
  --card-shadow: 0 14px 40px -12px rgba(0, 0, 0, 0.55);
  --nav-bg: rgb(18, 26, 48);
  --footer-bg: rgb(12, 18, 33);
  --accent-text: var(--brand);
  --ring: rgba(152, 203, 51, 0.45);
  color-scheme: dark;
}

* { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: 96px;
}

body {
  font-family: 'Karla', system-ui, -apple-system, sans-serif;
  background-color: var(--bg);
  color: var(--text);
  transition: background-color 0.35s ease, color 0.35s ease;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6 {
  font-family: 'Work Sans', system-ui, sans-serif;
  color: var(--heading);
  letter-spacing: -0.02em;
  transition: color 0.35s ease;
}

::selection { background: var(--brand); color: var(--navy-deep); }

/* ---------- Layout helpers ---------- */
.container-x {
  width: 100%;
  max-width: 1200px;
  margin-inline: auto;
  padding-inline: 1.25rem;
}
@media (min-width: 768px) { .container-x { padding-inline: 2rem; } }

.accent { color: var(--accent-text); }
.eyebrow {
  font-family: 'Work Sans', sans-serif;
  font-weight: 700;
  font-size: 0.78rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent-text);
}

/* ---------- Header ---------- */
.site-header {
  position: fixed;
  inset-inline: 0;
  top: 0;
  z-index: 60;
  background: var(--nav-bg);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line);
  transition: background-color 0.35s ease, border-color 0.35s ease;
}
.nav-link {
  position: relative;
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--text);
  padding: 0.25rem 0;
  transition: color 0.2s ease;
}
.nav-link::after {
  content: '';
  position: absolute;
  left: 0; bottom: -2px;
  width: 100%; height: 2px;
  background: var(--brand);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.28s cubic-bezier(0.22, 1, 0.36, 1);
}
.nav-link:hover, .nav-link.active { color: var(--accent-text); }
.nav-link:hover::after, .nav-link.active::after { transform: scaleX(1); }

/* Mobile menu */
#mobileMenu {
  transition: opacity 0.3s ease, transform 0.3s cubic-bezier(0.22,1,0.36,1), visibility 0.3s;
}
#mobileMenu.hidden-menu {
  opacity: 0; transform: translateY(-12px); visibility: hidden; pointer-events: none;
}
.burger span {
  display: block; height: 2px; width: 24px; margin: 5px 0;
  background: var(--heading); border-radius: 2px;
  transition: transform 0.3s ease, opacity 0.3s ease;
}
.burger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.burger.open span:nth-child(2) { opacity: 0; }
.burger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Theme toggle */
.theme-toggle {
  width: 42px; height: 42px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 999px;
  border: 1px solid var(--line);
  color: var(--heading);
  background: var(--surface);
  cursor: pointer;
  transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}
.theme-toggle:hover { transform: translateY(-2px); border-color: var(--brand); box-shadow: 0 6px 18px -8px var(--ring); }
.theme-toggle:focus-visible { outline: 3px solid var(--ring); outline-offset: 2px; }
html:not(.dark) .icon-moon { display: block; } html:not(.dark) .icon-sun { display: none; }
html.dark .icon-sun { display: block; } html.dark .icon-moon { display: none; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 0.55rem;
  font-family: 'Work Sans', sans-serif; font-weight: 700;
  padding: 0.85rem 1.7rem; border-radius: 0.5rem;
  text-decoration: none; line-height: 1;
  transition: transform 0.25s cubic-bezier(0.22,1,0.36,1), box-shadow 0.25s ease, background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease;
  cursor: pointer;
}
.btn .arr { transition: transform 0.25s ease; }
.btn:hover .arr { transform: translateX(4px); }
.btn-primary {
  background: var(--brand); color: var(--navy-deep);
  box-shadow: 0 10px 24px -10px var(--ring);
}
.btn-primary:hover { transform: translateY(-2px); background: var(--brand-soft); box-shadow: 0 16px 30px -10px var(--ring); }
.btn-ghost {
  border: 1.5px solid var(--line); color: var(--heading); background: transparent;
}
.btn-ghost:hover { transform: translateY(-2px); border-color: var(--brand); color: var(--accent-text); }

/* ---------- Cards / misc ---------- */
.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 1rem;
  box-shadow: var(--card-shadow);
  transition: transform 0.3s cubic-bezier(0.22,1,0.36,1), box-shadow 0.3s ease, border-color 0.3s ease, background-color 0.35s ease;
}
.card:hover { transform: translateY(-6px); border-color: var(--brand); box-shadow: 0 22px 44px -16px rgba(18,26,48,0.22); }
html.dark .card:hover { box-shadow: 0 22px 48px -14px rgba(0,0,0,0.6); }
/* Generous, consistent inner padding for cards */
.card.p-6 { padding: 1.75rem; }
.card.p-7, .card.p-8 { padding: 2rem; }
@media (min-width: 768px) { .card.p-7, .card.p-8 { padding: 2.25rem; } }

.divider { height: 1px; background: var(--line); border: 0; }

.chip {
  display: inline-flex; align-items: center; gap: 0.4rem;
  font-size: 0.82rem; font-weight: 700;
  padding: 0.35rem 0.85rem; border-radius: 999px;
  border: 1px solid var(--line); color: var(--text-soft);
}

/* ---------- Scroll-reveal animations ---------- */
.reveal, .reveal-left, .reveal-right, .reveal-zoom {
  opacity: 0;
  transition: opacity 0.7s cubic-bezier(0.22,1,0.36,1), transform 0.7s cubic-bezier(0.22,1,0.36,1);
  transition-delay: var(--d, 0ms);
  will-change: opacity, transform;
}
.reveal        { transform: translateY(28px); }
.reveal-left   { transform: translateX(-40px); }
.reveal-right  { transform: translateX(40px); }
.reveal-zoom   { transform: scale(0.92); }
.reveal.in, .reveal-left.in, .reveal-right.in, .reveal-zoom.in {
  opacity: 1; transform: none;
}

/* Hero entrance */
@keyframes heroUp { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: none; } }
.hero-anim { opacity: 0; animation: heroUp 0.8s cubic-bezier(0.22,1,0.36,1) forwards; animation-delay: var(--d, 0ms); }

/* Floating decorative blobs */
@keyframes floatY { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-18px); } }
.float-slow { animation: floatY 7s ease-in-out infinite; }

/* Marquee-ish pulse ring on hero graphic */
@keyframes pulseRing { 0% { box-shadow: 0 0 0 0 var(--ring); } 70% { box-shadow: 0 0 0 26px transparent; } 100% { box-shadow: 0 0 0 0 transparent; } }
.pulse-ring { animation: pulseRing 3s ease-out infinite; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
  .reveal, .reveal-left, .reveal-right, .reveal-zoom, .hero-anim { opacity: 1 !important; transform: none !important; }
}

/* ---------- Footer ---------- */
.site-footer { background: var(--footer-bg); color: rgb(200, 206, 220); transition: background-color 0.35s ease; }
.site-footer a { color: rgb(200, 206, 220); text-decoration: none; transition: color 0.2s ease; }
.site-footer a:hover { color: var(--brand); }

/* Forms */
.field {
  width: 100%;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 0.6rem;
  padding: 0.85rem 1rem;
  color: var(--text);
  font-family: 'Karla', sans-serif;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.35s ease;
}
.field:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 4px var(--ring); }
.field-label { display: block; font-weight: 700; font-size: 0.9rem; margin-bottom: 0.4rem; color: var(--heading); }
.field-label .req { color: var(--accent-text); }

/* ============================================================
   PHASE 2 — richer visuals, navy surfaces, product storytelling
   ============================================================ */

/* --- Logo recolor: the wordmark's "ONSITE" is white, so it
   vanishes on the light nav. Recolor white -> navy in light mode.
   In dark mode (and on the navy footer) it stays as-is. --- */
.logo-img { transition: filter 0.35s ease; }
html:not(.dark) .site-header .logo-img {
  filter: brightness(0) saturate(100%) invert(17%) sepia(24%) saturate(1690%) hue-rotate(196deg) brightness(95%) contrast(95%);
}

/* --- Reusable navy surface (footer + feature bands) --- */
.navy-section {
  background:
    radial-gradient(900px 500px at 85% -10%, rgba(152,203,51,0.14), transparent 60%),
    linear-gradient(135deg, var(--navy), var(--navy-deep));
  color: #e7ecf5;
}
.navy-section h1, .navy-section h2, .navy-section h3, .navy-section h4 { color: #ffffff; }
.navy-section p { color: rgba(231,236,245,0.78); }
.navy-section .eyebrow { color: var(--brand); }

/* Chips/pills on navy backgrounds need light text + visible outline,
   otherwise they inherit the dark --text-soft ink and vanish */
.navy-section .chip {
  color: #e7ecf5;
  border-color: rgba(231, 236, 245, 0.4);
  background: rgba(255, 255, 255, 0.06);
}

/* Footer adopts the navy surface so it always matches the theme */
.site-footer {
  background:
    radial-gradient(800px 400px at 10% 0%, rgba(152,203,51,0.10), transparent 55%),
    linear-gradient(135deg, var(--navy), var(--navy-deep));
}

/* --- Section rhythm helpers --- */
.section-tint { background: var(--bg-alt); }
.section-line { border-top: 1px solid var(--line); }

/* --- Eyebrow pill --- */
.eyebrow-pill {
  display: inline-flex; align-items: center; gap: 0.5rem;
  font-family: 'Work Sans', sans-serif; font-weight: 700; font-size: 0.72rem;
  letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--accent-text);
  background: color-mix(in srgb, var(--brand) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--brand) 35%, transparent);
  padding: 0.4rem 0.95rem; border-radius: 999px;
}

/* --- "How it works" loop steps --- */
.loop-step { position: relative; }
.loop-num {
  width: 54px; height: 54px; border-radius: 16px;
  display: inline-flex; align-items: center; justify-content: center;
  font-family: 'Work Sans', sans-serif; font-weight: 700; font-size: 1.25rem;
  color: var(--navy-deep); background: var(--brand);
  box-shadow: 0 10px 24px -10px var(--ring);
}
@media (min-width: 1024px) {
  .loop-connector { position: relative; }
  .loop-connector::after {
    content: ''; position: absolute; top: 27px; left: calc(54px + 12%);
    width: 76%; height: 2px;
    background-image: linear-gradient(90deg, var(--brand) 55%, transparent 0);
    background-size: 12px 2px; opacity: 0.5;
  }
  .loop-connector:last-child::after { display: none; }
}

/* --- Chat-based survey demo --- */
.chat-window {
  border-radius: 1.25rem; overflow: hidden;
  border: 1px solid var(--line); background: var(--surface);
  box-shadow: var(--card-shadow);
}
.chat-head {
  display: flex; align-items: center; gap: 0.6rem;
  padding: 0.9rem 1.1rem; border-bottom: 1px solid var(--line);
  background: var(--bg-soft);
}
.chat-dot { width: 10px; height: 10px; border-radius: 999px; }
.chat-body { padding: 1.25rem; display: flex; flex-direction: column; gap: 0.9rem; }
.msg {
  max-width: 82%; padding: 0.7rem 1rem; border-radius: 1rem;
  font-size: 0.95rem; line-height: 1.45;
  opacity: 0; transform: translateY(10px);
  animation: msgIn 0.5s cubic-bezier(0.22,1,0.36,1) forwards;
  animation-delay: var(--md, 0ms);
}
@keyframes msgIn { to { opacity: 1; transform: none; } }
.msg-bot { align-self: flex-start; background: var(--bg-alt); color: var(--text); border-bottom-left-radius: 0.3rem; border: 1px solid var(--line); }
.msg-user { align-self: flex-end; background: var(--brand); color: var(--navy-deep); border-bottom-right-radius: 0.3rem; font-weight: 600; }
.typing { display: inline-flex; gap: 4px; align-items: center; }
.typing i { width: 6px; height: 6px; border-radius: 999px; background: var(--text-soft); animation: blink 1.2s infinite; }
.typing i:nth-child(2) { animation-delay: 0.2s; } .typing i:nth-child(3) { animation-delay: 0.4s; }
@keyframes blink { 0%, 60%, 100% { opacity: 0.25; } 30% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .msg { animation: none; opacity: 1; transform: none; } }

/* --- Live dashboard bars --- */
.bar-track { height: 10px; border-radius: 999px; background: color-mix(in srgb, var(--brand) 18%, transparent); overflow: hidden; }
.bar-fill {
  height: 100%; border-radius: 999px; width: 0;
  background: linear-gradient(90deg, var(--brand), var(--brand-soft));
  transition: width 1.4s cubic-bezier(0.22,1,0.36,1);
}
.reveal-on.in .bar-fill, .in .bar-fill { width: var(--w, 60%); }

/* --- Waitlist / subscribe inline form --- */
.subscribe-row { display: flex; gap: 0.6rem; flex-wrap: wrap; }
.subscribe-row .field { flex: 1 1 240px; }

/* --- Form status messages --- */
.form-note { padding: 0.85rem 1rem; border-radius: 0.6rem; font-weight: 600; font-size: 0.95rem; }
.form-note.ok { background: color-mix(in srgb, var(--brand) 16%, transparent); color: var(--accent-text); border: 1px solid color-mix(in srgb, var(--brand) 40%, transparent); }
.form-note.err { background: rgba(220, 60, 60, 0.12); color: #d64545; border: 1px solid rgba(220, 60, 60, 0.35); }
.hp-field { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }

/* --- Trust / logo strip --- */
.trust-chip {
  display: inline-flex; align-items: center; gap: 0.5rem;
  padding: 0.5rem 1rem; border-radius: 999px; font-weight: 700; font-size: 0.85rem;
  border: 1px solid var(--line); color: var(--text-soft); background: var(--surface);
}

/* --- Feature icon tile --- */
.icon-tile {
  width: 52px; height: 52px; border-radius: 15px; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, color-mix(in srgb, var(--brand) 22%, transparent), color-mix(in srgb, var(--brand) 8%, transparent));
  color: var(--accent-text);
  border: 1px solid color-mix(in srgb, var(--brand) 40%, transparent);
  box-shadow: 0 6px 16px -8px var(--ring);
  transition: transform 0.3s cubic-bezier(0.22,1,0.36,1), box-shadow 0.3s ease;
}
.icon-tile svg { width: 24px; height: 24px; }
.card:hover .icon-tile, .icon-row:hover .icon-tile { transform: translateY(-2px); box-shadow: 0 10px 22px -8px var(--ring); }

/* Icon list row (icon + title + description) with breathing room */
.icon-row { display: flex; gap: 1.15rem; align-items: flex-start; }
.icon-row .icon-tile { margin-top: 2px; }
.icon-row h3 { line-height: 1.3; }
.icon-row p { line-height: 1.65; }

/* --- Timeline (About page) --- */
.timeline { border-left: 2px solid var(--line); padding-left: 1.5rem; }
.timeline-item { position: relative; padding-bottom: 1.75rem; }
.timeline-item::before {
  content: ''; position: absolute; left: calc(-1.5rem - 7px); top: 6px;
  width: 12px; height: 12px; border-radius: 999px; background: var(--brand);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--brand) 25%, transparent);
}

/* --- Generic image frame with glow --- */
.img-glow { position: relative; }

/* Never let a content image stretch or distort:
   preserve aspect ratio, crop gracefully if a box is imposed. */
.img-glow img,
.rounded-3xl img,
img.rounded-3xl {
  height: auto;
  object-fit: cover;
  object-position: center;
  display: block;
}
.img-glow::before {
  content: ''; position: absolute; inset: -8%; border-radius: 2rem; z-index: -1;
  background: radial-gradient(circle at 30% 30%, var(--ring), transparent 65%);
  filter: blur(30px); opacity: 0.6;
}

/* ============================================================
   MINIMAL TAILWIND-STYLE UTILITY LAYER
   The HTML uses Tailwind utility classes. Since we removed the
   CDN build step, these utilities are defined here so layout,
   spacing, sizing and responsive behaviour work everywhere.
   ============================================================ */

/* --- Display --- */
.block{display:block}.inline-block{display:inline-block}.inline{display:inline}
.flex{display:flex}.inline-flex{display:inline-flex}.grid{display:grid}
.hidden{display:none}
.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}
.focus\:not-sr-only:focus{position:static;width:auto;height:auto;padding:inherit;margin:inherit;overflow:visible;clip:auto;white-space:normal}

/* --- Flexbox --- */
.flex-col{flex-direction:column}.flex-wrap{flex-wrap:wrap}.flex-1{flex:1 1 0%}.shrink-0{flex-shrink:0}
.items-center{align-items:center}.items-start{align-items:flex-start}
.justify-center{justify-content:center}.justify-between{justify-content:space-between}.justify-start{justify-content:flex-start}.justify-end{justify-content:flex-end}

/* --- Gap --- */
.gap-1{gap:0.25rem}.gap-2{gap:0.5rem}.gap-2\.5{gap:0.625rem}.gap-3{gap:0.75rem}.gap-4{gap:1rem}.gap-5{gap:1.25rem}.gap-6{gap:1.5rem}.gap-8{gap:2rem}.gap-10{gap:2.5rem}
.gap-12{gap:3rem}.gap-14{gap:3.5rem}.gap-16{gap:4rem}.gap-20{gap:5rem}

/* --- Grid columns --- */
.grid-cols-1{grid-template-columns:repeat(1,minmax(0,1fr))}
.grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}
@media(min-width:640px){
  .sm\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(min-width:768px){
  .md\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}
  .md\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}
  .md\:grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}
  .md\:col-span-2{grid-column:span 2/span 2}
}
@media(min-width:1024px){
  .lg\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}
  .lg\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}
  .lg\:grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}
}

/* --- Spacing: margin --- */
.m-0{margin:0}.mx-auto{margin-left:auto;margin-right:auto}
.mt-1{margin-top:0.25rem}.mt-2{margin-top:0.5rem}.mt-3{margin-top:0.75rem}.mt-4{margin-top:1rem}.mt-5{margin-top:1.25rem}.mt-6{margin-top:1.5rem}.mt-8{margin-top:2rem}.mt-9{margin-top:2.25rem}.mt-10{margin-top:2.5rem}.mt-12{margin-top:3rem}
.mb-4{margin-bottom:1rem}.mb-5{margin-bottom:1.25rem}
.my-10{margin-top:2.5rem;margin-bottom:2.5rem}

/* --- Spacing: padding --- */
.p-2{padding:0.5rem}.p-6{padding:1.5rem}.p-8{padding:2rem}.p-10{padding:2.5rem}
.px-4{padding-left:1rem;padding-right:1rem}.px-5{padding-left:1.25rem;padding-right:1.25rem}
.py-2{padding-top:0.5rem;padding-bottom:0.5rem}.py-3{padding-top:0.75rem;padding-bottom:0.75rem}.py-4{padding-top:1rem;padding-bottom:1rem}.py-14{padding-top:4.5rem;padding-bottom:4.5rem}.py-16{padding-top:5rem;padding-bottom:5rem}.py-20{padding-top:6rem;padding-bottom:6rem}
.pt-\[150px\]{padding-top:150px}.pt-\[170px\]{padding-top:170px}
.pb-12{padding-bottom:3rem}.pb-14{padding-bottom:3.5rem}.pb-16{padding-bottom:4rem}.pb-20{padding-bottom:5rem}.pb-24{padding-bottom:6rem}.pb-28{padding-bottom:7rem}

/* --- Sizing --- */
.w-auto{width:auto}.w-full{width:100%}.w-10{width:2.5rem}
.h-9{height:2.25rem}.h-10{height:2.5rem}
.max-w-sm{max-width:24rem}.max-w-2xl{max-width:42rem}.max-w-3xl{max-width:48rem}.max-w-4xl{max-width:56rem}.max-w-5xl{max-width:64rem}
.h-\[76px\]{height:76px}.top-\[76px\]{top:76px}

/* --- Typography --- */
.text-sm{font-size:0.875rem;line-height:1.4}.text-lg{font-size:1.125rem;line-height:1.65}.text-xl{font-size:1.25rem;line-height:1.55}.text-2xl{font-size:1.5rem;line-height:1.35}.text-3xl{font-size:1.875rem;line-height:1.2}
.text-4xl{font-size:2.25rem;line-height:1.1}.text-5xl{font-size:3rem;line-height:1.05}
.font-bold{font-weight:700}.font-semibold{font-weight:600}
.text-center{text-align:center}
.leading-snug{line-height:1.375}.leading-relaxed{line-height:1.65}
.leading-\[1\.08\]{line-height:1.08}
.underline{text-decoration:underline}
.uppercase{text-transform:uppercase}.tracking-wide{letter-spacing:0.05em}
@media(min-width:640px){.sm\:text-5xl{font-size:3rem;line-height:1.05}}
@media(min-width:768px){
  .md\:text-2xl{font-size:1.5rem;line-height:1.35}
  .md\:text-xl{font-size:1.25rem;line-height:1.55}
}

/* --- Lists --- */
.list-disc{list-style-type:disc}.pl-5{padding-left:1.25rem}
.space-y-2 > * + *{margin-top:0.5rem}.space-y-2\.5 > * + *{margin-top:0.625rem}
.space-y-7 > * + *{margin-top:1.75rem}.space-y-12 > * + *{margin-top:3rem}

/* --- Borders / radius / overflow / position --- */
.rounded{border-radius:0.25rem}.rounded-full{border-radius:9999px}
.border{border-width:1px;border-style:solid}.border-b{border-bottom-width:1px;border-style:solid}.border-t{border-top-width:1px;border-style:solid}
.overflow-hidden{overflow:hidden}
.relative{position:relative}.absolute{position:absolute}.fixed{position:fixed}
.inset-x-0{left:0;right:0}.inset-0{inset:0}
.-top-24{top:-6rem}.left-1\/2{left:50%}.-translate-x-1\/2{transform:translateX(-50%)}
.blur-3xl{filter:blur(64px)}
.pointer-events-none{pointer-events:none}
.z-\[100\]{z-index:100}
.antialiased{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}

/* --- Responsive visibility --- */
@media(min-width:768px){
  .md\:inline-flex{display:inline-flex}
  .md\:block{display:block}
  .md\:p-10{padding:2.5rem}
  .md\:pt-\[170px\]{padding-top:170px}
  .md\:pb-16{padding-bottom:4rem}.md\:pb-24{padding-bottom:6rem}.md\:pb-28{padding-bottom:7rem}
  .md\:py-16{padding-top:6rem;padding-bottom:6rem}.md\:py-20{padding-top:7.5rem;padding-bottom:7.5rem}
}
@media(min-width:1024px){
  .lg\:flex{display:flex}
  .lg\:hidden{display:none}
}

/* --- Focus ring for skip link --- */
.focus\:absolute:focus{position:absolute}
.focus\:top-3:focus{top:0.75rem}.focus\:left-3:focus{left:0.75rem}
.focus\:z-\[100\]:focus{z-index:100}
.focus\:bg-\[var\(--brand\)\]:focus{background:var(--brand)}
.focus\:text-\[var\(--navy-deep\)\]:focus{color:var(--navy-deep)}
.focus\:px-4:focus{padding-left:1rem;padding-right:1rem}
.focus\:py-2:focus{padding-top:0.5rem;padding-bottom:0.5rem}
.focus\:rounded:focus{border-radius:0.25rem}



/* ============================================================
   REFINEMENTS — utilities, footer contrast, spacing, social proof
   ============================================================ */
.mt-0\.5{margin-top:0.125rem}
.mt-1\.5{margin-top:0.375rem}
.px-5{padding-left:1.25rem;padding-right:1.25rem}
.rounded-xl{border-radius:0.75rem}
.rounded-2xl{border-radius:1rem}
.rounded-3xl{border-radius:1.5rem}
.border-l{border-left-width:1px;border-left-style:solid}
.border-r{border-right-width:1px;border-right-style:solid}

/* Footer headings must be readable on the navy footer */
.text-white{color:#ffffff}
.site-footer h3{color:#ffffff !important}
.site-footer nav ul li a{color:rgba(207,213,228,0.9)}
.site-footer nav ul li a:hover{color:var(--brand)}

/* Split layouts: keep text off the image on wide screens */
@media(min-width:1024px){.split-pad{padding-left:1.75rem}}
@media(min-width:1024px){.split-pad-r{padding-right:1.75rem}}

/* Split layouts (text + image): guarantee generous, consistent
   separation so text/icons never touch the visual column. */
@media(min-width:1024px){
  .container-x.grid.lg\:grid-cols-2.gap-14{gap:4.5rem}
}
@media(min-width:1280px){
  .container-x.grid.lg\:grid-cols-2.gap-14{gap:5.5rem}
}

/* Social-proof stat band */
.stat-band{display:grid;grid-template-columns:1fr;gap:1.25rem}
@media(min-width:768px){.stat-band{grid-template-columns:repeat(3,1fr);gap:2rem}}
.stat-num{font-family:'Work Sans',sans-serif;font-weight:700;font-size:2.6rem;line-height:1;color:var(--accent-text)}
.stat-src{font-size:0.8rem;color:var(--text-soft);margin-top:0.6rem;letter-spacing:0.02em}
.stat-card{background:var(--surface);border:1px solid var(--line);border-radius:1rem;padding:1.9rem;box-shadow:var(--card-shadow);transition:transform .3s cubic-bezier(.22,1,.36,1),border-color .3s}
.stat-card:hover{transform:translateY(-4px);border-color:var(--brand)}
.stat-card p{margin-top:0.7rem;color:var(--text-soft);line-height:1.6}

/* ============================================================
   FOUNDERS / TEAM CARDS — richer, on-brand, better padding
   ============================================================ */
.max-w-prose{max-width:65ch}

.founder-card { overflow: hidden; }
/* Photo panel: brand navy->lime gradient instead of flat gray */
.founder-photo {
  background:
    radial-gradient(420px 300px at 30% 20%, rgba(152,203,51,0.28), transparent 60%),
    linear-gradient(150deg, var(--navy), var(--navy-deep));
  display: flex; align-items: center; justify-content: center;
}
/* Circular portrait with a glowing lime ring */
.founder-img {
  width: 13rem; height: 13rem; border-radius: 9999px;
  object-fit: cover; display: block;
  border: 4px solid color-mix(in srgb, var(--brand) 70%, transparent);
  box-shadow: 0 0 0 6px color-mix(in srgb, var(--brand) 18%, transparent), 0 18px 40px -12px rgba(0,0,0,0.45);
}
@media (max-width: 767px){ .founder-img { width: 11rem; height: 11rem; } }

/* Body text: comfortable measure + padding that never touches edges */
.founder-body { padding: 2rem; }
@media (min-width: 768px){ .founder-body { padding: 2.5rem 2.75rem; } }

/* Pull-quote to break up the bio and add personality */
.founder-quote {
  font-family: 'Work Sans', sans-serif; font-weight: 600; font-size: 1.05rem;
  line-height: 1.5; color: var(--heading);
  border-left: 3px solid var(--brand); padding-left: 0.9rem; margin-top: 1rem;
}