/* EagleOwl public site — simple, honest, matches the one-pager. */
:root {
  --cream: #f4f8fd;
  --paper: #ffffff;
  --blue-900: #0a3a66;
  --blue-700: #0773d1;
  --blue-600: #098ffc;
  --blue-100: #e3f1fe;
  --gold: #8fd3ff;
  --hero-a: #0b3d91; --hero-b: #0a78e0; --hero-c: #38b6ff;
  --on-gold: #06304f;
  --gold-100: #e0f2ff;
  --ink: #14222f;
  --muted: #5a6b7b;
  --line: #dde6f0;
  --radius: 20px;
  --font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

:root[data-theme="dark"] {
  --cream: #121212;
  --paper: #1a1a19;
  --ink: #efece6;
  --muted: #a39f95;
  --line: #2a2926;
  --blue-900: #cfe6ff;
  --blue-700: #5db4ff;
  --blue-600: #5db4ff;
  --blue-100: #16273a;
  --gold-100: #12293a;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body.eo-site {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
.eo-site a { color: var(--blue-700); }
.eo-site img { max-width: 100%; height: auto; }
.eo-wrap { max-width: 1080px; margin: 0 auto; padding: 0 24px; }
.eo-narrow { max-width: 720px; }

/* Header */
.eo-header { position: sticky; top: 0; z-index: 50; background: rgba(255, 255, 255, 0.55); -webkit-backdrop-filter: blur(18px) saturate(180%); backdrop-filter: blur(18px) saturate(180%); border-bottom: 1px solid rgba(255, 255, 255, 0.6); box-shadow: 0 1px 0 rgba(10, 58, 102, 0.06), 0 8px 24px -12px rgba(10, 58, 102, 0.18); }
.eo-header .eo-wrap { display: flex; align-items: center; justify-content: space-between; height: 68px; }
.eo-logo { display: flex; align-items: center; gap: 10px; text-decoration: none; }
.eo-logo img { display: block; height: 44px; width: auto; }
.eo-logo span { display: none; }
.eo-logo span { font-size: 22px; font-weight: 800; letter-spacing: -0.02em; color: var(--blue-900); }
.eo-nav { display: flex; align-items: center; gap: 28px; }
.eo-nav a { color: var(--ink); text-decoration: none; font-weight: 500; font-size: 15px; }
.eo-nav a:hover, .eo-nav a.is-active { color: var(--blue-600); }
.eo-nav .eo-btn { color: #fff; }
.eo-nav .eo-btn:hover { color: #fff; }
.eo-nav-toggle { display: none; }
.eo-nav-label { display: none; cursor: pointer; padding: 8px; }
.eo-nav-label span, .eo-nav-label span::before, .eo-nav-label span::after { display: block; width: 22px; height: 2px; background: var(--blue-900); position: relative; content: ""; }
.eo-nav-label span::before { position: absolute; top: -7px; }
.eo-nav-label span::after { position: absolute; top: 7px; }

/* Buttons */
.eo-btn { --btn-fg: #fff; display: inline-block; padding: 11px 22px; border-radius: 999px; background: var(--blue-900); color: #fff; font-weight: 600; font-size: 15px; text-decoration: none; border: 1px solid var(--blue-900); cursor: pointer; transition: background .15s; font-family: inherit; }
.eo-btn:hover { background: var(--blue-700); color: #fff; }
.eo-btn--ghost { background: transparent; color: var(--blue-900); }
.eo-btn--ghost:hover { background: var(--blue-100); color: var(--blue-900); }
.eo-btn--gold { background: var(--gold); border-color: var(--gold); color: var(--on-gold); }
.eo-btn--gold:hover { filter: brightness(1.08); background: var(--gold); color: var(--on-gold); }

/* Typography helpers */
.eo-eyebrow { font-size: 12px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--blue-600); margin: 0 0 14px; }
.eo-h1 { font-size: clamp(32px, 5vw, 52px); line-height: 1.1; font-weight: 800; letter-spacing: -0.02em; margin: 0 0 18px; }
.eo-h2 { font-size: clamp(24px, 3vw, 32px); line-height: 1.2; font-weight: 700; letter-spacing: -0.01em; margin: 0 0 12px; }
.eo-lead { font-size: 18px; color: var(--muted); max-width: 640px; }
.eo-section { padding: 64px 0; }
.eo-section--tight { padding: 40px 0; }

/* Page intro (inner pages) */
.eo-pagehead { padding: 56px 0 24px; }

/* Hero (home) */
.eo-hero { padding: 40px 0 8px; }
.eo-hero-card { position: relative; overflow: hidden; border: 1px solid rgba(255,255,255,.08); background: radial-gradient(rgba(255,255,255,.14) 1px, transparent 1px) 0 0 / 22px 22px, linear-gradient(135deg, var(--hero-a), var(--hero-b) 55%, var(--hero-c)); color: #fff; border-radius: 28px; padding: 56px; display: grid; grid-template-columns: 1.4fr 1fr; gap: 48px; align-items: center; }
.eo-hero-card .eo-eyebrow { color: #9fd3ff; }
.eo-hero-card h1 { font-size: clamp(32px, 4.6vw, 48px); line-height: 1.1; font-weight: 800; letter-spacing: -0.02em; margin: 0 0 24px; }
.eo-hero-stat { border-left: 2px solid var(--gold); padding-left: 32px; }
.eo-hero-stat strong { display: block; font-size: clamp(44px, 6vw, 64px); line-height: 1; color: var(--gold); font-weight: 800; letter-spacing: -0.02em; }
.eo-hero-stat span { display: block; margin-top: 12px; color: #d6e9fb; }
.eo-hero-stat span b { color: #fff; }
.eo-hero-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.eo-hero-actions .eo-btn--ghost { color: #fff; border-color: rgba(255,255,255,.4); }
.eo-hero-actions .eo-btn--ghost:hover { background: rgba(255,255,255,.1); }

/* Capability grid */
.eo-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 14px; }
.eo-tile { transition: border-color .2s, transform .2s; position: relative; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); padding: 22px 20px; }
.eo-tile:hover { border-color: var(--blue-600); transform: translateY(-2px); }
.eo-tile h3 { margin: 14px 0 6px; font-size: 16px; font-weight: 700; line-height: 1.25; }
.eo-tile p { margin: 0; font-size: 14px; color: var(--muted); }
.eo-tile--new { border-color: var(--gold); background: var(--gold-100); }
.eo-tile--new::after { content: "NEW"; position: absolute; top: -9px; right: 14px; background: var(--gold); color: var(--on-gold); font-size: 10px; font-weight: 800; letter-spacing: .08em; padding: 3px 9px; border-radius: 999px; }
.eo-icon { width: 38px; height: 38px; border-radius: 10px; background: var(--blue-100); color: var(--blue-700); display: grid; place-items: center; }
.eo-tile--new .eo-icon { background: #cfe9fb; color: #0a5a96; }
.eo-icon svg { width: 20px; height: 20px; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* Trusted by */
.eo-trusted { display: flex; flex-wrap: wrap; gap: 12px 0; }
.eo-trusted span { font-weight: 700; font-size: 18px; padding: 0 22px; border-left: 1px solid var(--line); }
.eo-trusted a { font-weight: 700; font-size: 18px; padding: 0 22px; border-left: 1px solid var(--line); color: var(--ink); text-decoration: none; transition: color .15s; }
.eo-trusted a:hover { color: var(--blue-600); }
.eo-trusted > :first-child { padding-left: 0; border-left: 0; }

/* CTA band */
.eo-cta { background: linear-gradient(135deg, var(--hero-a), var(--hero-b) 55%, var(--hero-c)); color: #fff; border-radius: 24px; padding: 40px 48px; display: flex; flex-wrap: wrap; gap: 24px; align-items: center; justify-content: space-between; }
.eo-cta h2 { margin: 0; font-size: 34px; font-weight: 800; letter-spacing: -.02em; }
.eo-cta h2 i { color: var(--gold); font-style: normal; }
.eo-cta-contact { text-align: right; }
.eo-cta-contact a { color: #fff; text-decoration: none; }
.eo-cta-contact .phone { font-size: 24px; font-weight: 700; display: block; }
.eo-cta-contact .mail { color: #cfe3f7; font-size: 15px; }

/* Feature detail list */
.eo-feature { display: grid; grid-template-columns: 220px 1fr; gap: 24px; padding: 28px 0; border-top: 1px solid var(--line); }
.eo-feature h3 { margin: 0; font-size: 18px; font-weight: 700; }
.eo-feature p { margin: 0; color: var(--muted); }

/* FAQ */
.eo-faq details { background: var(--paper); border: 1px solid var(--line); border-radius: 12px; padding: 4px 20px; margin-bottom: 10px; }
.eo-faq summary { cursor: pointer; font-weight: 600; padding: 14px 0; list-style: none; display: flex; justify-content: space-between; gap: 16px; }
.eo-faq summary::-webkit-details-marker { display: none; }
.eo-faq summary::after { content: "+"; font-size: 22px; color: var(--blue-600); line-height: 1; }
.eo-faq details[open] summary::after { content: "–"; }
.eo-faq details p { margin: 0 0 16px; color: var(--muted); }

/* Prose (guide, careers) */
.eo-prose h2 { font-size: 24px; margin: 48px 0 10px; letter-spacing: -.01em; }
.eo-prose h3 { font-size: 17px; margin: 28px 0 6px; }
.eo-prose p, .eo-prose li { color: #2d3e50; }
.eo-prose ul, .eo-prose ol { padding-left: 22px; }
.eo-prose li { margin-bottom: 8px; }
.eo-prose figure { margin: 20px 0; background: var(--paper); border: 1px solid var(--line); border-radius: 14px; padding: 12px; }
.eo-prose figure img { display: block; margin: 0 auto; border-radius: 8px; }
.eo-prose figcaption { font-size: 14px; color: var(--muted); padding: 10px 6px 2px; }
.eo-callout { background: var(--blue-100); border-left: 4px solid var(--blue-600); padding: 14px 18px; border-radius: 8px; margin: 20px 0; }
.eo-callout--warn { background: var(--gold-100); border-left-color: var(--gold); }
.eo-badge { display: inline-block; background: var(--gold); color: var(--blue-900); font-size: 11px; font-weight: 800; letter-spacing: .06em; padding: 2px 9px; border-radius: 999px; vertical-align: middle; }

/* Team */
.eo-people { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 20px; }
.eo-person { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); padding: 24px; }
.eo-person h3 { margin: 0; font-size: 18px; }
.eo-person .role { color: var(--blue-600); font-weight: 600; font-size: 14px; margin: 2px 0 10px; }
.eo-person p { margin: 0; color: var(--muted); font-size: 15px; }

/* Forms */
.eo-form { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); padding: 28px; }
.eo-form label { display: block; font-weight: 600; font-size: 14px; margin-bottom: 6px; }
.eo-form .row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.eo-form .field { margin-bottom: 18px; }
.eo-form input, .eo-form textarea { width: 100%; padding: 11px 14px; border: 1px solid #c5d0dc; border-radius: 10px; font: inherit; background: #fff; color: var(--ink); }
.eo-form input:focus, .eo-form textarea:focus { outline: 2px solid var(--blue-600); outline-offset: 1px; border-color: var(--blue-600); }
.eo-error { color: #b3261e; font-size: 13px; margin-top: 4px; }
.eo-help { color: var(--muted); font-size: 13px; margin-top: 4px; }
.eo-contact-grid { display: grid; grid-template-columns: 1.6fr 1fr; gap: 32px; align-items: start; }
.eo-contact-side h3 { margin: 0 0 4px; font-size: 14px; text-transform: uppercase; letter-spacing: .1em; color: var(--blue-600); }
.eo-contact-side p { margin: 0 0 22px; font-size: 18px; font-weight: 600; }
.eo-contact-side a { text-decoration: none; }

/* Footer */
.eo-footer { margin-top: 72px; border-top: 1px solid var(--line); padding: 32px 0 40px; color: var(--muted); font-size: 14px; }
.eo-footer .eo-wrap { display: flex; flex-wrap: wrap; gap: 16px 32px; justify-content: space-between; align-items: center; }
.eo-footer nav { display: flex; flex-wrap: wrap; gap: 8px 22px; }
.eo-footer a { color: var(--muted); text-decoration: none; }
.eo-footer a:hover { color: var(--blue-700); }

@media (max-width: 800px) {
  .eo-hero-card { grid-template-columns: 1fr; padding: 36px 28px; gap: 32px; }
  .eo-hero-stat { border-left: 0; border-top: 2px solid var(--gold); padding: 24px 0 0; }
  .eo-feature { grid-template-columns: 1fr; gap: 6px; }
  .eo-contact-grid { grid-template-columns: 1fr; }
  .eo-form .row { grid-template-columns: 1fr; gap: 0; }
  .eo-cta { padding: 32px 28px; }
  .eo-cta-contact { text-align: left; }
  .eo-nav-label { display: block; }
  .eo-nav { display: none; position: absolute; top: 68px; left: 0; right: 0; background: #f4f8fd; border-bottom: 1px solid var(--line); box-shadow: 0 16px 24px -16px rgba(10, 58, 102, .25); flex-direction: column; align-items: flex-start; gap: 0; padding: 8px 24px 20px; }
  .eo-nav a { padding: 10px 0; width: 100%; }
  .eo-nav a.eo-btn { width: auto; margin-top: 8px; padding: 11px 24px; text-align: center; }
  .eo-nav-toggle:checked ~ .eo-nav { display: flex; }
}

/* Theme toggle + dark-mode fixes */
.eo-theme { background: none; border: 1px solid var(--line); color: var(--ink); width: 36px; height: 36px; border-radius: 999px; cursor: pointer; display: grid; place-items: center; }
.eo-theme:hover { border-color: var(--blue-600); }
.eo-theme svg { width: 17px; height: 17px; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.eo-theme .moon { display: none; }
:root[data-theme="dark"] .eo-theme .sun { display: none; }
:root[data-theme="dark"] .eo-theme .moon { display: block; }
:root[data-theme="dark"] .eo-logo img { filter: brightness(0) invert(.92); }
:root[data-theme="dark"] .eo-header { background: rgba(18, 18, 18, 0.5); border-bottom-color: rgba(255, 255, 255, 0.08); box-shadow: 0 8px 24px -12px rgba(0, 0, 0, 0.6); }
:root[data-theme="dark"] .eo-btn { background: #efece6; border-color: #efece6; color: #121212; }
:root[data-theme="dark"] .eo-btn:hover { background: #fff; color: #121212; }
:root[data-theme="dark"] .eo-nav .eo-btn, :root[data-theme="dark"] .eo-nav .eo-btn:hover { color: #121212; }
:root[data-theme="dark"] .eo-btn--ghost { background: transparent; color: var(--ink); border-color: var(--line); }
:root[data-theme="dark"] .eo-btn--ghost:hover { background: var(--paper); color: var(--ink); }
:root[data-theme="dark"] .eo-btn--gold { background: var(--gold); border-color: var(--gold); color: #1a1405; }
:root[data-theme="dark"] .eo-prose p, :root[data-theme="dark"] .eo-prose li { color: #cfcbc2; }
:root[data-theme="dark"] .eo-form input, :root[data-theme="dark"] .eo-form textarea { background: #121212; border-color: #3a3835; }
:root[data-theme="dark"] .eo-tile--new .eo-icon { background: #17344d; color: var(--gold); }
:root[data-theme="dark"] .eo-badge { color: #1a1405; }
.eo-nav .eo-theme { margin-left: -8px; }
@media (max-width: 800px) { .eo-nav .eo-theme { margin-left: 0; margin-top: 8px; } }
:root[data-theme="dark"] .eo-hero-actions .eo-btn--ghost { color: #fff; border-color: rgba(255,255,255,.4); background: transparent; }
:root[data-theme="dark"] .eo-hero-actions .eo-btn--ghost:hover { background: rgba(255,255,255,.1); color: #fff; }

/* Scroll reveal for capability tiles */
.eo-grid { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); }
@media (min-width: 1001px) { .eo-grid { grid-template-columns: repeat(5, 1fr); } }
.eo-reveal-on .eo-tile { opacity: 0; transform: translateY(28px) scale(.98); transition: opacity .6s ease, transform .6s cubic-bezier(.2,.7,.2,1), border-color .2s; }
.eo-reveal-on .eo-tile.is-in { opacity: 1; transform: none; }
.eo-reveal-on .eo-tile.is-in:hover { transform: translateY(-2px); transition-delay: 0s !important; }
.eo-reveal-on .eo-tile .eo-icon { transform: scale(.6); transition: transform .5s cubic-bezier(.3,1.5,.5,1) .15s; }
.eo-reveal-on .eo-tile.is-in .eo-icon { transform: none; }

/* Keep the client row on one line on wide screens */
@media (min-width: 1001px) {
  .eo-trusted { flex-wrap: nowrap; justify-content: space-between; }
  .eo-trusted a { flex: 1 1 auto; text-align: center; padding: 0 12px; font-size: 17px; white-space: nowrap; }
}

/* Contact page */
.eo-contact-hero { position: relative; overflow: hidden; border-radius: 28px; padding: 52px 56px; color: #fff; display: flex; flex-wrap: wrap; gap: 32px; align-items: center; justify-content: space-between; border: 1px solid rgba(255,255,255,.08); background: radial-gradient(rgba(255,255,255,.14) 1px, transparent 1px) 0 0 / 22px 22px, linear-gradient(135deg, var(--hero-a), var(--hero-b) 55%, var(--hero-c)); }
.eo-contact-hero .eo-eyebrow { color: #9fd3ff; }
.eo-contact-hero h1 { margin: 0 0 12px; font-size: clamp(36px, 5.5vw, 56px); line-height: 1.05; font-weight: 800; letter-spacing: -0.02em; }
.eo-contact-hero h1 span { color: var(--gold); }
.eo-contact-hero p:not(.eo-eyebrow) { margin: 0; max-width: 460px; color: #d6e9fb; font-size: 18px; }
.eo-contact-quick { display: grid; gap: 12px; min-width: 280px; }
.eo-contact-quick a { display: flex; align-items: center; gap: 14px; padding: 14px 18px; border-radius: 16px; background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.18); color: #fff; text-decoration: none; font-weight: 700; font-size: 17px; transition: background .15s, transform .15s; }
.eo-contact-quick a:hover { background: rgba(255,255,255,.2); transform: translateY(-1px); }
.eo-contact-quick small { display: block; font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: #bfe0ff; }
.eo-qicon { width: 40px; height: 40px; border-radius: 12px; background: var(--gold); color: var(--on-gold); display: grid; place-items: center; flex: none; }
.eo-qicon svg { width: 20px; height: 20px; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.eo-form--lift { padding: 36px; box-shadow: 0 18px 50px -24px rgba(10, 58, 102, .35); }
.eo-form-title { margin: 0 0 4px; font-size: 24px; font-weight: 800; letter-spacing: -.01em; }
.eo-form-sub { margin: 0 0 24px; color: var(--muted); font-size: 14px; }
.eo-form input, .eo-form textarea { transition: border-color .15s, box-shadow .15s; }
.eo-form input:focus, .eo-form textarea:focus { outline: none; box-shadow: 0 0 0 4px rgba(9,143,252,.18); }
.eo-btn--block { width: 100%; padding: 14px 22px; font-size: 16px; }
.eo-btn--block span { display: inline-block; transition: transform .15s; }
.eo-btn--block:hover span { transform: translateX(4px); }
.eo-contact-side { display: grid; gap: 16px; }
.eo-side-card { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); padding: 26px; }
.eo-side-card h3 { margin: 0 0 16px; font-size: 13px; letter-spacing: .12em; text-transform: uppercase; color: var(--blue-600); }
.eo-side-card--alt { background: var(--blue-100); border-color: transparent; }
.eo-side-card--alt h3 { margin-bottom: 8px; }
.eo-side-card--alt p { margin: 0 0 4px; font-size: 18px; font-weight: 700; }
.eo-side-card--alt a { text-decoration: none; color: var(--ink); }
.eo-side-card--alt a:hover { color: var(--blue-600); }
.eo-next { list-style: none; margin: 0; padding: 0; counter-reset: n; display: grid; gap: 18px; }
.eo-next li { position: relative; padding-left: 44px; counter-increment: n; }
.eo-next li::before { content: counter(n); position: absolute; left: 0; top: 0; width: 30px; height: 30px; border-radius: 50%; background: var(--blue-600); color: #fff; font-weight: 700; font-size: 14px; display: grid; place-items: center; }
.eo-next li:not(:last-child)::after { content: ""; position: absolute; left: 14px; top: 34px; bottom: -14px; width: 2px; background: var(--line); }
.eo-next b { display: block; font-size: 16px; }
.eo-next span { color: var(--muted); font-size: 14px; }
:root[data-theme="dark"] .eo-next li::before { color: #06182a; }
:root[data-theme="dark"] .eo-btn--block { color: #121212; }
@media (max-width: 800px) {
  .eo-contact-hero { padding: 32px 26px; }
  .eo-contact-quick { min-width: 0; width: 100%; }
  .eo-form--lift { padding: 24px; }
}

/* Login page */
.eo-login { padding-top: 48px; }
.eo-login-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; align-items: stretch; }
.eo-login-title { font-size: 34px; margin-bottom: 4px; }
.eo-login-form { padding: 40px; }
.eo-login-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin: -4px 0 20px; font-size: 14px; }
.eo-login-row a { text-decoration: none; font-weight: 600; }
.eo-check { display: flex !important; align-items: center; gap: 8px; margin: 0 !important; font-weight: 500 !important; color: var(--muted); }
.eo-check input { width: auto; }
.eo-login-foot { margin: 20px 0 0; text-align: center; color: var(--muted); font-size: 14px; }
.eo-login-foot a { font-weight: 600; }
.eo-alert { padding: 12px 14px; border-radius: 10px; margin-bottom: 16px; font-size: 14px; background: var(--blue-100); color: var(--ink); }
.eo-alert--error, .eo-alert--danger { background: #fdecea; color: #8c1d18; }
:root[data-theme="dark"] .eo-alert--error, :root[data-theme="dark"] .eo-alert--danger { background: #3a1a18; color: #ffb4ab; }
.eo-login-side { flex-direction: column; align-items: flex-start; justify-content: space-between; margin: 0; }
.eo-login-side h2 { margin: 0 0 12px; font-size: clamp(28px, 3.4vw, 40px); line-height: 1.1; font-weight: 800; letter-spacing: -.02em; }
.eo-login-side .eo-contact-quick { width: 100%; min-width: 0; }
@media (max-width: 800px) {
  .eo-login-grid { grid-template-columns: 1fr; }
  .eo-login-form { padding: 26px; }
  .eo-login-side { order: -1; padding: 28px 24px; }
  .eo-login-side h2 { font-size: 26px; }
}

/* Auth pages (password reset) */
.eo-auth { padding-top: 56px; }
.eo-auth-card { max-width: 520px; margin: 0 auto; padding: 40px; }
.eo-auth-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 26px; }
@media (max-width: 800px) { .eo-auth-card { padding: 26px; } }

/* Link-styled buttons: beat the generic ".eo-site a" link color */
.eo-site a.eo-btn:not(.eo-btn--ghost):not(.eo-btn--gold) { color: #fff; }
.eo-site a.eo-btn--gold { color: var(--on-gold); }
.eo-site a.eo-btn--ghost { color: var(--blue-900); }
.eo-site .eo-hero-actions a.eo-btn--ghost { color: #fff; }

@media (max-width: 800px) { :root[data-theme="dark"] .eo-nav { background: #121212; box-shadow: 0 16px 24px -16px rgba(0, 0, 0, .7); } }

/* Dark mode: link-styled buttons keep their dark-mode colors */
:root[data-theme="dark"] .eo-site a.eo-btn:not(.eo-btn--ghost):not(.eo-btn--gold) { color: #121212; }
:root[data-theme="dark"] .eo-site a.eo-btn--gold { color: var(--on-gold); }
:root[data-theme="dark"] .eo-site a.eo-btn--ghost { color: var(--ink); }
:root[data-theme="dark"] .eo-site .eo-hero-actions a.eo-btn--ghost { color: #fff; }

/* Frosted-glass capability cards: soft color blobs behind the grid give the glass something to blur */
#capabilities { position: relative; isolation: isolate; overflow-x: clip; overflow-y: visible; }
#capabilities { background: radial-gradient(ellipse 70% 55% at 50% 55%, rgba(9, 143, 252, .12), transparent 70%); }
#capabilities .eo-tile { background: rgba(255, 255, 255, .45); border: 1px solid rgba(255, 255, 255, .75); -webkit-backdrop-filter: blur(16px) saturate(170%); backdrop-filter: blur(16px) saturate(170%); box-shadow: 0 8px 32px -12px rgba(10, 58, 102, .25), inset 0 1px 0 rgba(255, 255, 255, .8); }
#capabilities .eo-tile:hover { border-color: rgba(9, 143, 252, .6); background: rgba(255, 255, 255, .6); }
#capabilities .eo-tile--new { background: rgba(143, 211, 255, .35); border-color: rgba(143, 211, 255, .9); }
#capabilities .eo-icon { background: rgba(9, 143, 252, .14); }
:root[data-theme="dark"] #capabilities { background: radial-gradient(ellipse 70% 55% at 50% 55%, rgba(9, 143, 252, .10), transparent 70%); }
:root[data-theme="dark"] #capabilities .eo-tile { background: rgba(255, 255, 255, .06); border-color: rgba(255, 255, 255, .12); box-shadow: 0 8px 32px -12px rgba(0, 0, 0, .6), inset 0 1px 0 rgba(255, 255, 255, .1); }
:root[data-theme="dark"] #capabilities .eo-tile:hover { background: rgba(255, 255, 255, .1); border-color: rgba(93, 180, 255, .6); }
:root[data-theme="dark"] #capabilities .eo-tile--new { background: rgba(56, 182, 255, .14); border-color: rgba(143, 211, 255, .45); }
:root[data-theme="dark"] #capabilities .eo-icon { background: rgba(93, 180, 255, .16); }

/* Parallax blobs: they drift at different speeds while the glass cards scroll normally */
.eo-blob { position: absolute; z-index: -1; border-radius: 50%; pointer-events: none; will-change: transform; margin: calc(-1 * var(--e)); background: radial-gradient(closest-side, rgba(var(--c), var(--a)) 0%, rgba(var(--c), calc(var(--a) * .55)) 38%, rgba(var(--c), 0) 100%); }
.eo-blob--1 { --e: 150px; --c: 9, 143, 252; --a: .30; width: calc(640px + 2 * var(--e)); height: calc(560px + 2 * var(--e)); left: -200px; top: 6%; }
.eo-blob--2 { --e: 150px; --c: 143, 211, 255; --a: .5; width: calc(700px + 2 * var(--e)); height: calc(560px + 2 * var(--e)); right: -220px; bottom: -60px; }
.eo-blob--3 { --e: 110px; --c: 9, 143, 252; --a: .42; width: calc(300px + 2 * var(--e)); height: calc(300px + 2 * var(--e)); left: 38%; top: 0; }
.eo-blob--4 { --e: 100px; --c: 80, 170, 255; --a: .5; width: calc(240px + 2 * var(--e)); height: calc(240px + 2 * var(--e)); left: 14%; bottom: 4%; }
:root[data-theme="dark"] .eo-blob--1 { --a: .26; }
:root[data-theme="dark"] .eo-blob--2 { --c: 56, 182, 255; --a: .2; }
:root[data-theme="dark"] .eo-blob--3 { --a: .34; }
:root[data-theme="dark"] .eo-blob--4 { --c: 93, 180, 255; --a: .3; }
@media (prefers-reduced-motion: reduce) { .eo-blob { transform: none; } }
:root[data-theme="dark"] #capabilities .eo-tile p { color: #cdc9bf; }

/* ===== HERO GLASS (experimental) =====
   To revert: delete this block, remove class "eo-hero--glass" and the two ".eo-hblob" spans from homepage.html. */
.eo-hero--glass { position: relative; isolation: isolate; overflow-x: clip; overflow-y: visible; }
.eo-hblob { position: absolute; z-index: -1; border-radius: 50%; pointer-events: none; margin: calc(-1 * var(--e)); background: radial-gradient(closest-side, rgba(var(--c), var(--a)) 0%, rgba(var(--c), calc(var(--a) * .55)) 38%, rgba(var(--c), 0) 100%); }
.eo-hblob--1 { --e: 130px; --c: 9, 143, 252; --a: .55; width: calc(520px + 2 * var(--e)); height: calc(440px + 2 * var(--e)); left: 2%; bottom: -60px; }
.eo-hblob--2 { --e: 140px; --c: 143, 211, 255; --a: .6; width: calc(560px + 2 * var(--e)); height: calc(460px + 2 * var(--e)); right: 0; top: -40px; }
:root[data-theme="dark"] .eo-hblob--1 { --a: .45; }
:root[data-theme="dark"] .eo-hblob--2 { --c: 56, 182, 255; --a: .35; }
.eo-hero--glass .eo-hero-card { background: radial-gradient(rgba(255,255,255,.14) 1px, transparent 1px) 0 0 / 22px 22px, linear-gradient(135deg, rgba(11, 61, 145, .92), rgba(11, 102, 184, .86) 55%, rgba(9, 143, 252, .8)); -webkit-backdrop-filter: blur(14px) saturate(160%); backdrop-filter: blur(14px) saturate(160%); border: 1px solid rgba(255, 255, 255, .28); box-shadow: 0 24px 60px -28px rgba(10, 58, 102, .55), inset 0 1px 0 rgba(255, 255, 255, .35); }
:root[data-theme="dark"] .eo-hero--glass .eo-hero-card { border-color: rgba(255, 255, 255, .16); background: radial-gradient(rgba(255,255,255,.12) 1px, transparent 1px) 0 0 / 22px 22px, linear-gradient(135deg, rgba(11, 61, 145, .88), rgba(11, 102, 184, .8) 55%, rgba(9, 143, 252, .7)); }
/* ===== END HERO GLASS ===== */

/* Cheaper cards: no backdrop blur on small screens or for people who prefer less motion/transparency.
   Cards stay translucent (a bit more opaque to compensate); the nav bar and hero keep their blur. */
@media (max-width: 800px), (prefers-reduced-motion: reduce), (prefers-reduced-transparency: reduce) {
  #capabilities .eo-tile { -webkit-backdrop-filter: none; backdrop-filter: none; background: rgba(255, 255, 255, .72); box-shadow: 0 4px 16px -8px rgba(10, 58, 102, .25); }
  #capabilities .eo-tile:hover { background: rgba(255, 255, 255, .85); }
  #capabilities .eo-tile--new { background: rgba(190, 227, 255, .8); }
  :root[data-theme="dark"] #capabilities .eo-tile { -webkit-backdrop-filter: none; backdrop-filter: none; background: rgba(40, 46, 56, .75); box-shadow: 0 4px 16px -8px rgba(0, 0, 0, .6); }
  :root[data-theme="dark"] #capabilities .eo-tile:hover { background: rgba(52, 60, 74, .85); }
  :root[data-theme="dark"] #capabilities .eo-tile--new { background: rgba(26, 70, 112, .85); }
}

/* Capability icon palette: one hue per card, anchored on brand blue.
   Light values are deeper for contrast on pale tints; dark values are lighter for dark glass.
   1 Blue (Menu Engineering)  2 Teal (Recipe)  3 Indigo (COGS)  4 Orange (Variance)  5 Green (Procurement)
   6 Violet (Invoice OCR)  7 Coral (Central Kitchen)  8 Amber (Production)  9 Cyan (Transfers)  10 Pink (Analytics) */
#eo-grid .eo-tile:nth-child(1) { --ic: 9,120,220; }
#eo-grid .eo-tile:nth-child(2) { --ic: 13,148,136; }
#eo-grid .eo-tile:nth-child(3) { --ic: 79,90,220; }
#eo-grid .eo-tile:nth-child(4) { --ic: 217,119,6; }
#eo-grid .eo-tile:nth-child(5) { --ic: 22,150,80; }
#eo-grid .eo-tile:nth-child(6) { --ic: 124,76,230; }
#eo-grid .eo-tile:nth-child(7) { --ic: 224,70,56; }
#eo-grid .eo-tile:nth-child(8) { --ic: 178,125,0; }
#eo-grid .eo-tile:nth-child(9) { --ic: 8,145,190; }
#eo-grid .eo-tile:nth-child(10) { --ic: 200,40,140; }
:root[data-theme="dark"] #eo-grid .eo-tile:nth-child(1) { --ic: 93,180,255; }
:root[data-theme="dark"] #eo-grid .eo-tile:nth-child(2) { --ic: 45,212,191; }
:root[data-theme="dark"] #eo-grid .eo-tile:nth-child(3) { --ic: 129,140,248; }
:root[data-theme="dark"] #eo-grid .eo-tile:nth-child(4) { --ic: 251,146,60; }
:root[data-theme="dark"] #eo-grid .eo-tile:nth-child(5) { --ic: 74,222,128; }
:root[data-theme="dark"] #eo-grid .eo-tile:nth-child(6) { --ic: 167,139,250; }
:root[data-theme="dark"] #eo-grid .eo-tile:nth-child(7) { --ic: 251,113,133; }
:root[data-theme="dark"] #eo-grid .eo-tile:nth-child(8) { --ic: 251,191,36; }
:root[data-theme="dark"] #eo-grid .eo-tile:nth-child(9) { --ic: 56,189,248; }
:root[data-theme="dark"] #eo-grid .eo-tile:nth-child(10) { --ic: 244,114,182; }
#eo-grid .eo-tile .eo-icon { background: rgba(var(--ic), .15); color: rgb(var(--ic)); }
:root[data-theme="dark"] #eo-grid .eo-tile .eo-icon { background: rgba(var(--ic), .18); color: rgb(var(--ic)); }

/* NEW tag: solid navy pill in light mode so it stands out on the sky-blue card */
#capabilities .eo-tile--new::after { background: #0a3a66; color: #fff; box-shadow: 0 2px 8px -2px rgba(10, 58, 102, .5); }
:root[data-theme="dark"] #capabilities .eo-tile--new::after { background: var(--gold); color: var(--on-gold); box-shadow: none; }

/* Clients row when it wraps (tablet/phone): give the first item its divider too, so every row lines up */
@media (max-width: 1000px) {
  .eo-trusted > :first-child { padding-left: 22px; border-left: 1px solid var(--line); }
}

/* Statement between hero and capabilities */
.eo-statement { padding: 72px 0 8px; }
.eo-statement p { margin: 0 auto; max-width: 820px; text-align: center; font-size: clamp(26px, 4vw, 40px); line-height: 1.2; font-weight: 800; letter-spacing: -0.02em; color: var(--ink); }
.eo-statement p span { color: var(--blue-600); }
@media (max-width: 800px) { .eo-statement { padding: 48px 0 0; } }

/* Tighter rhythm now the cards section has no title */
.eo-statement { padding: 64px 0 0; }
#capabilities.eo-section { padding-top: 48px; }
@media (max-width: 800px) { .eo-statement { padding: 44px 0 0; } #capabilities.eo-section { padding-top: 28px; } }

/* Second statement (before "Trusted by"): same voice, quieter */
.eo-statement--sub { padding: 56px 0 0; }
.eo-statement--sub p { font-size: clamp(22px, 3vw, 30px); max-width: 720px; font-weight: 700; color: var(--ink); }
@media (max-width: 800px) { .eo-statement--sub { padding: 40px 0 0; } }