/*!
 * NeuAlto Technologies — stylesheet
 * ==================================
 *
 * Organised in cascade order, broadest to narrowest, so that a rule's
 * position tells you its scope:
 *
 *   FOUNDATION
 *      - Dark theme
 *   LAYOUT
 *      - Section scaffolding
 *      - Sub-pages (services / solutions / privacy)
 *   CHROME
 *      - Scroll progress bar
 *      - Skip link
 *      - Announcement bar (shimmer text)
 *      - Nav (scrollspy)
 *      - Brand logo (transparent mark + wordmark text)
 *      - Theme toggle
 *      - Mobile nav (hamburger + drawer)
 *      - Footer
 *      - Compliance badge (D-U-N-S)
 *      - Live D-U-N-S seal
 *      - Back to top
 *   COMPONENTS
 *      - Hero (aurora + rotating word + magnetic CTA + tickers)
 *      - Hero entrance
 *      - Engagement models: animated tabs
 *      - FAQ accordion
 *      - Clients: dual-direction marquee
 *      - Trusted-by logo wall
 *      - LinkedIn button
 *      - CTA band with border beam
 *      - Background canvases (hero globe + sections)
 *      - Gif-style animated stickers
 *      - Mini terminal "gif" (featured AI card)
 *   HOME PAGE
 *      - Services: spotlight bento grid
 *      - Why NeuAlto
 *      - About section
 *      - Solutions teaser (homepage)
 *      - Founders: 3D tilt cards
 *      - Founder photos
 *      - Testimonials (theme-aware)
 *      - Partners section
 *      - Careers section
 *      - Contact section (form + maps)
 *   SUB PAGES
 *      - Service detail sections
 *      - Solutions page
 *      - Product deep pages (DeltaMax / OptiMax)
 *      - Blog / LinkedIn post feed
 *      - Careers page
 *      - Legal / privacy page
 *      - 404 page
 *   RESPONSIVE
 *      - Responsive
 *   MOTION PREFERENCES
 *      - Extra reduced-motion coverage
 *
 * CONVENTIONS
 * -----------
 * - Colour, shadow and radius come from the custom properties in FOUNDATION.
 *   Add a token there rather than hard-coding a hex value in a component.
 * - Dark theme is token-driven. Only add a `[data-theme="dark"]` override
 *   when a component needs more than a different token value, and keep that
 *   override next to the component it belongs to.
 * - Media queries that concern a single component live with that component.
 *   Only cross-cutting breakpoint changes belong in RESPONSIVE.
 * - Anything animated needs a counterpart in MOTION PREFERENCES.
 */

:root {
    --ink: #1c0a0d;
    --ink-soft: #5c4a4e;
    --ink-faint: #7d686c; /* darkened for WCAG AA at small sizes (5.2:1 on white) */
    --red: #dc2626;
    /* Red used as TEXT, as opposed to a button fill. Identical to --red in
       the light theme; the dark theme lifts it, because one red cannot do
       both jobs there - see the dark block. */
    --red-text: #dc2626;
    --red-deep: #a61b1b;
    --red-bright: #f43f3f;
    --coral: #ff7a59;
    --red-tint: #fdf0f0;
    --red-tint-2: #fadede;
    --line: #f0e4e5;
    /* --line is a 1.24:1 hairline: correct for card edges, but it fails the
       3:1 non-text minimum when it is the ONLY thing identifying a form
       control. --line-strong is for those borders. */
    --line-strong: #9c8388;
    --bg: #ffffff;
    --bg-soft: #fcf8f8;
    --card: #ffffff;
    --radius: 18px;
    --shadow-sm: 0 1px 2px rgba(28,10,13,.05), 0 4px 14px rgba(28,10,13,.05);
    --shadow-md: 0 2px 4px rgba(28,10,13,.05), 0 12px 32px rgba(28,10,13,.09);
    --shadow-lg: 0 4px 8px rgba(28,10,13,.06), 0 24px 60px rgba(28,10,13,.13);
  }
  * { margin: 0; padding: 0; box-sizing: border-box; }
  html { scroll-behavior: smooth; }
  body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    color: var(--ink);
    background: var(--bg);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
  }
  h1, h2, h3 { font-family: 'Sora', 'Inter', sans-serif; letter-spacing: -0.02em; }
  /* Headings balance their lines instead of stranding one word on the last
     line ("Six practices. One accountable / partner."), and running text
     avoids a lone last word. Measured: seven such orphans on the home page
     alone at 1280px. Browsers without support simply ignore these. */
  h1, h2, h3, h4, .stat > span, .kicker { text-wrap: balance; }
  p, li { text-wrap: pretty; }
  a { text-decoration: none; color: inherit; }
  img { max-width: 100%; }
  .wrap { max-width: 1180px; margin: 0 auto; padding: 0 28px; }



/* ==========================================================================
   FOUNDATION
   Design tokens, reset and base element styling.
   ========================================================================== */

/* ── Dark theme ──────────────────────────────────────────────────────── */
[data-theme="dark"] {
  --ink: #f6ebec;
  --ink-soft: #cdb2b6;
  --ink-faint: #9d8085;
  /* #ef4444 gave white button text only 3.76:1. Darkening to #d92d2d lifts
     that to 4.81:1 while still clearing 3:1 (4.14) as a colour against --bg,
     which is the balance point - going darker to favour button text starts
     failing red-on-dark text instead. */
  --red: #d92d2d;
  /* --red is tuned so WHITE text on a red button clears AA (4.81:1). That
     same red as red-on-dark TEXT only reaches 4.04:1 on --bg-soft, so every
     .svc-link and article link was failing. One token cannot satisfy both
     directions; this is the text half. 5.71:1 on --bg-soft, 5.25:1 on
     --card, 4.91:1 on --red-tint - the lightest value that still reads red
     rather than salmon. */
  --red-text: #f4564f;
  /* Previously absent from this block entirely, so the light-theme #a61b1b
     leaked into dark mode at 2.49:1 on --card (the CTA-band button). The
     ad-hoc #ffb3a3 overrides scattered further down were symptoms of this. */
  --red-deep: #ff9f8c;
  --coral: #ff8f70;
  --red-tint: #33171d;
  --red-tint-2: #52222a;
  --line: #3d232a;
  --line-strong: #8a656d;
  --bg: #0c0507;
  --bg-soft: #170d10;
  --card: #24151a;
  --shadow-sm: 0 1px 2px rgba(0,0,0,.4), 0 4px 14px rgba(0,0,0,.35);
  --shadow-md: 0 2px 4px rgba(0,0,0,.4), 0 12px 32px rgba(0,0,0,.5);
  --shadow-lg: 0 4px 8px rgba(0,0,0,.45), 0 24px 60px rgba(0,0,0,.6);
}
[data-theme="dark"] header { background: rgba(15,7,8,.82); }
[data-theme="dark"] .hero {
  background:
    radial-gradient(900px 480px at 85% -10%, rgba(239,68,68,.16), transparent 60%),
    radial-gradient(700px 420px at -10% 20%, rgba(255,122,89,.10), transparent 55%),
    var(--bg);
}
[data-theme="dark"] .hero-grid-bg {
  background-image: linear-gradient(rgba(255,220,220,.05) 1px, transparent 1px),
                    linear-gradient(90deg, rgba(255,220,220,.05) 1px, transparent 1px);
}
[data-theme="dark"] .aurora span { opacity: .38; }
[data-theme="dark"] .pill,
[data-theme="dark"] .ftag,
[data-theme="dark"] .meta-pill,
[data-theme="dark"] .sticker { background: #fff; box-shadow: 0 6px 16px rgba(0,0,0,.5); }
[data-theme="dark"] .spot-card:hover,
[data-theme="dark"] .faq-item.open { border-color: #55272e; }
[data-theme="dark"] .gif-terminal { border: 1px solid #3a1c21; }

/* ==========================================================================
   LAYOUT
   Page scaffolding: wrappers, section rhythm, sub-page shells.
   ========================================================================== */

/* ── Section scaffolding ─────────────────────────────────────────────── */
section { padding: 96px 0; }
.sec-head { max-width: 680px; margin: 0 auto 60px; text-align: center; }
.kicker {
  display: inline-block; font-size: 12.5px; font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; color: var(--red-text); margin-bottom: 14px;
}
.sec-head h2 { font-size: clamp(28px, 3.6vw, 40px); font-weight: 800; margin-bottom: 16px; }
.sec-head p { color: var(--ink-soft); font-size: 16.5px; }

/* ── Sub-pages (services / solutions / privacy) ──────────────────────── */
.page-sub .wrap { max-width: 1080px; }
.page-sub .hero { padding: 84px 0 64px; }
.page-sub .hero h1 { font-size: clamp(34px, 4.8vw, 54px); max-width: 780px; }
.page-sub footer { background: var(--card); padding: 34px 0; }
.jump-chips { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.jump-chips a {
  font-size: 13.5px; font-weight: 600; color: var(--red-deep);
  background: var(--red-tint); border: 1px solid var(--red-tint-2);
  border-radius: 100px; padding: 9px 18px; transition: all .2s ease;
}
.jump-chips a:hover { background: var(--red); border-color: var(--red); color: #fff; box-shadow: 0 6px 16px rgba(220,38,38,.3); }
[data-theme="dark"] .jump-chips a:hover { color: #fff; }

/* ==========================================================================
   CHROME
   Persistent furniture present on every page.
   ========================================================================== */

/* ── Scroll progress bar ─────────────────────────────────────────────── */
#progress {
  position: fixed; top: 0; left: 0; height: 3px; width: 100%;
  background: linear-gradient(90deg, var(--red), var(--coral));
  z-index: 200;
  transform: scaleX(0); transform-origin: 0 50%;
  box-shadow: 0 0 8px rgba(220,38,38,.5);
}

/* ── Skip link ───────────────────────────────────────────────────────── */
.skip-link {
  position: fixed; top: 10px; left: 10px; z-index: 300;
  transform: translateY(-160%);
  background: var(--red); color: #fff;
  font-size: 14px; font-weight: 600;
  padding: 12px 20px; border-radius: 10px;
  box-shadow: 0 8px 24px rgba(220,38,38,.4);
  transition: transform .2s ease;
}
.skip-link:focus { transform: none; outline: 2px solid #fff; outline-offset: 2px; }

/* Visually hidden but readable by assistive tech. Used for live-region
   announcements and for labelling controls whose visible content is an icon. */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}

/* visible keyboard focus everywhere */
a:focus-visible, button:focus-visible, summary:focus-visible,
input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--red); outline-offset: 2px; border-radius: 6px;
}

/* ── Announcement bar (shimmer text) ─────────────────────────────────── */
.announce {
  background: linear-gradient(90deg, #1c0a0d, #6e1414 55%, #dc2626);
  color: #ffdede;
  font-size: 13.5px; font-weight: 500; text-align: center;
  padding: 9px 16px; letter-spacing: .02em;
}
.announce a {
  font-weight: 700;
  background: linear-gradient(100deg, #fff 40%, #ffb199 50%, #fff 60%);
  background-size: 250% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: sheen 3.2s linear infinite;
  border-bottom: 1px solid rgba(255,255,255,.45); margin-left: 6px;
}
@keyframes sheen { from { background-position: 250% 0; } to { background-position: -50% 0; } }

/* ── Nav (scrollspy) ─────────────────────────────────────────────────── */
header {
  position: sticky; top: 0; z-index: 100;
  background: rgba(255,255,255,.85);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line);
}
.nav { display: flex; align-items: center; justify-content: space-between; height: 74px; }
.logo { display: flex; align-items: center; gap: 10px; font-family: 'Sora'; font-weight: 800; font-size: 22px; }
/* Wordmark: "Neu" red, "Alto" in the foreground ink. --ink is near-black in
   light mode and near-white in dark, so the second half stays readable in both;
   a literal black would disappear against the dark background. */
.logo > span { color: var(--red); }
.logo .alto { color: var(--ink); }
.nav-links {
  display: flex; gap: 6px; font-size: 14px; font-weight: 500; color: var(--ink-soft);
  background: var(--bg-soft); border: 1px solid var(--line); border-radius: 100px; padding: 5px;
}
.nav-links a { padding: 7px 16px; border-radius: 100px; transition: all .25s ease; }
.nav-links a:hover { color: var(--ink); background: var(--card); }
.nav-links a.active { color: #fff; background: var(--red); box-shadow: 0 4px 12px rgba(220,38,38,.35); }
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  font-weight: 600; font-size: 15px; border-radius: 12px;
  padding: 12px 24px; transition: all .22s ease; cursor: pointer; border: none;
}
.btn-primary { background: var(--red); color: #fff; box-shadow: 0 6px 18px rgba(220,38,38,.32); }
.btn-primary:hover { background: var(--red-deep); box-shadow: 0 10px 26px rgba(220,38,38,.4); }
.btn-ghost { background: var(--card); color: var(--ink); border: 1.5px solid var(--line); }
.btn-ghost:hover { border-color: var(--red); color: var(--red-text); }
.nav .btn { padding: 10px 20px; font-size: 14px; }

/* ── Brand logo (transparent mark + wordmark text) ───────────────────── */
.logo-mark-img { height: 34px; width: auto; display: block; }
.foot-brand .logo-mark-img { height: 38px; }

/* ── Theme toggle ────────────────────────────────────────────────────── */
.nav-right { display: flex; align-items: center; gap: 10px; }
.theme-toggle {
  width: 40px; height: 40px; border-radius: 12px; cursor: pointer;
  border: 1.5px solid var(--line); background: var(--card); color: var(--ink-soft);
  display: grid; place-items: center; transition: all .2s ease;
}
.theme-toggle:hover { color: var(--red); border-color: var(--red); transform: translateY(-1px); }
.icon-sun { display: none; }
[data-theme="dark"] .icon-sun { display: block; }
[data-theme="dark"] .icon-moon { display: none; }

/* ── Mobile nav (hamburger + drawer) ─────────────────────────────────── */
.nav-toggle {
  display: none; width: 44px; height: 44px; flex-shrink: 0;
  border-radius: 12px; border: 1.5px solid var(--line);
  background: var(--card); cursor: pointer; padding: 0;
}
.nav-toggle span {
  display: block; width: 20px; height: 2px; border-radius: 2px;
  background: var(--ink); margin: 4px auto;
  transition: transform .3s ease, opacity .2s ease;
}
body.nav-open .nav-toggle span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
body.nav-open .nav-toggle span:nth-child(2) { opacity: 0; }
body.nav-open .nav-toggle span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
.mobile-nav {
  display: none; flex-direction: column; gap: 2px;
  padding: 10px 20px 18px;
  background: var(--card); border-top: 1px solid var(--line);
}
.mobile-nav.open { display: flex; animation: panelIn .3s ease; }
.mobile-nav a {
  padding: 13px 12px; font-family: 'Inter'; font-size: 15.5px; font-weight: 600;
  color: var(--ink-soft); border-radius: 10px;
}
.mobile-nav a:hover, .mobile-nav a:active { color: var(--red-text); background: var(--bg-soft); }
.mobile-nav .btn { margin-top: 10px; justify-content: center; }
.mobile-nav .btn:hover { color: #fff; background: var(--red-deep); }
@media (min-width: 981px) { .mobile-nav { display: none !important; } }
@media (max-width: 980px) {
  .nav-toggle { display: block; }
  .nav-cta { display: none; }
}

/* ── Footer ──────────────────────────────────────────────────────────── */
footer { background: var(--bg-soft); border-top: 1px solid var(--line); padding: 70px 0 0; }
.foot-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr; gap: 48px; padding-bottom: 56px; }
.foot-brand p { font-size: 14px; color: var(--ink-faint); margin: 16px 0 22px; max-width: 300px; }
.social {
  display: inline-flex; width: 40px; height: 40px; border-radius: 11px;
  border: 1px solid var(--line); background: var(--card); color: var(--ink-soft);
  align-items: center; justify-content: center; transition: all .2s;
}
.social:hover { color: var(--red); border-color: var(--red); }
.foot-col h4 { font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; color: var(--ink-faint); margin-bottom: 20px; }
.foot-col a { display: block; font-size: 14.5px; color: var(--ink-soft); padding: 6px 0; transition: color .2s; }
.foot-col a:hover { color: var(--red-text); }
.foot-bottom {
  border-top: 1px solid var(--line);
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px;
  padding: 22px 0; font-size: 13.5px; color: var(--ink-faint);
}
.foot-bottom a { color: var(--ink-soft); }
.foot-bottom a:hover { color: var(--red-text); }

/* ── Compliance badge (D-U-N-S seal) ─────────────────────────────────── */
/* The seal is injected by D&B's own script, so this container has to cope with
   markup it does not control: whatever comes back is constrained to the footer
   column's width. The white plate is required — the seal artwork assumes a
   light background and would be unreadable on the dark theme.

   Padding is uniform on purpose. Certificate.png used to carry very uneven
   whitespace of its own (86px right vs 12px left, 24px top vs 12px bottom),
   which made any symmetric padding here still render lopsided; the file is now
   cropped to its content, so this value is the only gap and reads even. */
.compliance {
  margin-top: 22px; display: inline-block;
  background: #fff; padding: 14px;
  border-radius: 10px; border: 1px solid var(--line);
  box-shadow: var(--shadow-sm);
  line-height: 0; /* kills the inline-image descender gap under the seal */
}
/* Our static fallback image, shown only when the seal script cannot render.
   The width must be a definite length, not 100%: .compliance is inline-block
   (shrink-to-fit), so a percentage width would depend on a parent width that
   itself depends on this child — a circular constraint browsers resolve to 0,
   collapsing the plate to a small empty square of pure padding. */
.compliance .duns-fallback { display: block; width: 230px; max-width: 100%; height: auto; }

/* D&B's script injects its own <iframe> carrying explicit width/height
   attributes (114x97). Do NOT set width/height here — forcing width:100% and
   height:auto stretches the seal out of proportion. Only stop it overflowing. */
.compliance iframe { display: block; max-width: 100%; border: 0; }
.compliance [hidden] { display: none; }

/* ── Motion pause control (WCAG 2.2.2) ───────────────────────────────── */
/* Injected by the motionToggle module in app.js. The attribute lives on <html>
   so one control governs every auto-playing animation on the page. */
.motion-toggle {
  margin-top: 14px; cursor: pointer;
  background: var(--card); color: var(--ink-soft);
  border: 1px solid var(--line-strong); border-radius: 100px;
  font-family: 'Inter', sans-serif; font-size: 12.5px; font-weight: 600;
  padding: 7px 14px;
  transition: color .2s ease, border-color .2s ease;
}
.motion-toggle:hover { color: var(--red-deep); border-color: var(--red); }
[data-motion="paused"] .marquee-track,
[data-motion="paused"] .rotator .word,
[data-motion="paused"] .announce a { animation-play-state: paused; }

/* ── Back to top ─────────────────────────────────────────────────────── */
#toTop {
  position: fixed; right: 26px; bottom: 26px; z-index: 150;
  width: 48px; height: 48px; border-radius: 14px; border: none; cursor: pointer;
  background: var(--red); color: #fff;
  display: grid; place-items: center;
  box-shadow: 0 10px 24px rgba(220,38,38,.4);
  opacity: 0; pointer-events: none; transform: translateY(12px);
  transition: opacity .3s, transform .3s, background .2s;
  visibility: hidden;
}
/* visibility, not just opacity: pointer-events:none stops the mouse but not
   Tab, so without this a keyboard user lands on an invisible button. */
#toTop.show { opacity: 1; pointer-events: auto; transform: none; visibility: visible; }
#toTop:hover { background: var(--red-deep); }

/* ==========================================================================
   COMPONENTS
   Reusable building blocks shared across pages.
   ========================================================================== */

/* ── Hero (aurora + rotating word + magnetic CTA + tickers) ──────────── */
.hero { position: relative; overflow: hidden; padding: 100px 0 84px; background: var(--card); }
.aurora { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.aurora span {
  position: absolute; border-radius: 50%; filter: blur(70px); opacity: .5;
  animation: drift 16s ease-in-out infinite alternate;
}
.aurora .a1 { width: 480px; height: 480px; left: -120px; top: -160px; background: radial-gradient(circle, rgba(220,38,38,.30), transparent 65%); }
.aurora .a2 { width: 560px; height: 560px; right: -160px; top: -80px; background: radial-gradient(circle, rgba(255,122,89,.28), transparent 65%); animation-delay: -5s; animation-duration: 20s; }
.aurora .a3 { width: 420px; height: 420px; left: 32%; top: 240px; background: radial-gradient(circle, rgba(244,63,63,.16), transparent 65%); animation-delay: -10s; animation-duration: 24s; }
@keyframes drift {
  from { transform: translate(0,0) scale(1); }
  to   { transform: translate(60px, 40px) scale(1.15); }
}
.hero-grid-bg {
  position: absolute; inset: 0; pointer-events: none;
  background-image: linear-gradient(rgba(28,10,13,.045) 1px, transparent 1px),
                    linear-gradient(90deg, rgba(28,10,13,.045) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: radial-gradient(ellipse 75% 65% at 50% 0%, #000 30%, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse 75% 65% at 50% 0%, #000 30%, transparent 75%);
}
.hero .wrap { position: relative; text-align: center; }
.eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--red-tint); color: var(--red-deep);
  font-size: 13px; font-weight: 600; letter-spacing: .04em;
  padding: 8px 16px; border-radius: 100px; border: 1px solid var(--red-tint-2);
  margin-bottom: 26px;
}
.eyebrow .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--red); animation: pulse 2s infinite; }
@keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: .35; } }
.hero h1 {
  font-size: clamp(38px, 5.4vw, 62px);
  line-height: 1.12; font-weight: 800;
  max-width: 860px; margin: 0 auto 22px;
}
.rotator {
  display: inline-block; position: relative; text-align: left;
  /* Ends on --red, not --coral: coral is 2.57:1 on white and these are
     gradient-filled headings, so the tail of every word fell below the 3:1
     large-text minimum. --red is 4.83:1. */
  background: linear-gradient(100deg, var(--red-deep), var(--red-bright) 45%, var(--red));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.rotator .word { display: inline-block; }
.rotator .word.out { animation: wordOut .4s ease forwards; }
.rotator .word.in { animation: wordIn .4s ease; }
@keyframes wordOut { to { opacity: 0; transform: translateY(-14px); filter: blur(3px); } }
@keyframes wordIn { from { opacity: 0; transform: translateY(14px); filter: blur(3px); } }
.hero p.lede {
  font-size: clamp(16px, 2vw, 19px); color: var(--ink-soft);
  max-width: 640px; margin: 0 auto 38px;
}
.hero-ctas { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; margin-bottom: 64px; }
.magnetic { will-change: transform; transition: transform .18s ease-out; }
.stat-strip {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 1px; background: var(--line);
  border: 1px solid var(--line); border-radius: var(--radius);
  overflow: hidden; max-width: 900px; margin: 0 auto;
  box-shadow: var(--shadow-sm);
}
.stat {
  background: var(--card); padding: 30px 18px; min-height: 134px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 10px; text-align: center;
}
.stat b {
  font-family: 'Sora'; font-size: 34px; font-weight: 800;
  color: var(--ink); font-variant-numeric: tabular-nums;
  line-height: 1; letter-spacing: -0.02em;
}
/* The animated number sits in <b><span class="tick">…</span></b>, so the
   caption rule below MUST stay a direct-child selector. As a descendant
   selector it also matched that inner span and — a direct declaration beating
   an inherited one — rendered the counters at 13px grey while literals like
   "24/7" (bare text in the <b>) stayed 34px dark. Hence "6", "12" and "2"
   looking tiny next to a full-size "+". */
.stat > span { font-size: 13px; color: var(--ink-soft); font-weight: 600; line-height: 1.4; max-width: 16ch; }
.stat b .tick { font: inherit; color: inherit; letter-spacing: inherit; }

/* On laptop-height viewports the hero's generous rhythm pushes the stat strip
   below the fold, so the numbers are only found by scrolling. Tighten the
   vertical spacing just enough to lift the whole strip into the first screen.
   Keyed on viewport HEIGHT, not width, because height is the actual
   constraint — displays taller than this keep the original spacing untouched. */
@media (min-width: 721px) and (max-height: 900px) {
  .hero { padding: 34px 0 56px; }
  .eyebrow { margin-bottom: 12px; }
  .hero h1 { font-size: clamp(34px, 4.4vw, 54px); margin-bottom: 12px; }
  .hero .lede { margin-bottom: 18px; }
  .hero-ctas { margin-bottom: 24px; }
  .stat { min-height: 104px; padding: 16px 18px; }
}

/* Very short desktop viewports (small laptops, or a window sharing the screen).
   A second, tighter step so the stat strip still clears the fold. */
@media (min-width: 721px) and (max-height: 700px) {
  .hero { padding: 20px 0 44px; }
  .hero h1 { font-size: clamp(30px, 3.6vw, 44px); margin-bottom: 10px; }
  .hero .lede { font-size: 16px; margin-bottom: 14px; }
  .hero-ctas { margin-bottom: 18px; }
  .stat { min-height: 92px; padding: 12px 16px; }
  .stat b { font-size: 28px; }
}

/* ── Hero entrance ───────────────────────────────────────────────────── */
@keyframes riseIn { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }
.hero .reveal { animation: riseIn .6s ease both; }
.hero .reveal:nth-child(3) { animation-delay: .08s; }
.hero .reveal:nth-child(4) { animation-delay: .16s; }
.hero .reveal:nth-child(5) { animation-delay: .24s; }
.hero .reveal:nth-child(6) { animation-delay: .32s; }

/* Reduced-motion overrides live together in MOTION PREFERENCES at the end of
   this file, so there is one place to check when adding a new animation. */

/* ── Engagement models: animated tabs ────────────────────────────────── */
.engage { background: var(--bg-soft); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.tabs { max-width: 860px; margin: 0 auto; }
.tab-list {
  position: relative; display: grid; grid-template-columns: repeat(3, 1fr);
  background: var(--card); border: 1px solid var(--line); border-radius: 100px;
  padding: 6px; margin-bottom: 34px;
}
.tab-ind {
  position: absolute; top: 6px; bottom: 6px; left: 6px;
  width: calc((100% - 12px) / 3);
  background: var(--red); border-radius: 100px;
  box-shadow: 0 6px 16px rgba(220,38,38,.35);
  transition: transform .35s cubic-bezier(.6,.1,.2,1.2);
}
.tab-btn {
  position: relative; z-index: 1;
  font-family: 'Inter'; font-size: 14.5px; font-weight: 600; color: var(--ink-soft);
  background: none; border: none; cursor: pointer;
  padding: 12px 10px; border-radius: 100px; transition: color .25s;
}
.tab-btn.active { color: #fff; }
.tab-panels { position: relative; }
.tab-panel {
  display: none;
  background: var(--card); border: 1px solid var(--line); border-radius: 22px;
  padding: 38px 40px; box-shadow: var(--shadow-sm);
}
.tab-panel.active { display: flex; gap: 30px; align-items: flex-start; animation: panelIn .4s ease; }
@keyframes panelIn { from { opacity: 0; transform: translateY(12px); } }
.tab-panel .svc-icon { margin-bottom: 0; }
.tab-panel h3 { font-size: 20px; font-weight: 700; margin-bottom: 8px; }
.tab-panel p { font-size: 15px; color: var(--ink-soft); margin-bottom: 14px; }
.check-list { list-style: none; display: grid; gap: 8px; }
.check-list li { display: flex; gap: 10px; font-size: 14px; color: var(--ink-soft); align-items: flex-start; }
.check-list svg { flex-shrink: 0; margin-top: 3px; color: var(--red); }
/* A paragraph that follows a bullet list needs a gap, or the sentence reads as
   a fourth bullet that lost its tick. The list itself has no bottom margin -
   its spacing is grid `gap`, which does not apply past the last item. */
.check-list + p { margin-top: 16px; }

/* ── FAQ accordion ───────────────────────────────────────────────────── */
.faq { background: var(--bg-soft); border-top: 1px solid var(--line); }
.faq-list { max-width: 760px; margin: 0 auto; display: grid; gap: 14px; }
.faq-item {
  background: var(--card); border: 1px solid var(--line); border-radius: 16px;
  overflow: hidden; transition: border-color .25s, box-shadow .25s;
}
.faq-item.open { border-color: #f3cdcd; box-shadow: var(--shadow-sm); }
.faq-q {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 16px;
  background: none; border: none; cursor: pointer; text-align: left;
  font-family: 'Sora'; font-size: 16px; font-weight: 700; color: var(--ink);
  padding: 22px 26px;
}
.faq-q .chev {
  flex-shrink: 0; width: 30px; height: 30px; border-radius: 50%;
  background: var(--red-tint); color: var(--red-text);
  display: grid; place-items: center;
  transition: transform .35s ease, background .25s, color .25s;
}
.faq-item.open .chev { transform: rotate(180deg); background: var(--red); color: #fff; }
.faq-a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .35s ease; }
.faq-item.open .faq-a { grid-template-rows: 1fr; }
/* `visibility` here is load-bearing, not decoration. Collapsing with 0fr +
   overflow:hidden hides the answer visually but leaves it in the accessibility
   tree, so a screen reader read every answer in sequence while each button
   still reported aria-expanded="false".
   Deliberately NOT transitioned. Both transition formulations were tried and
   both desynced from aria-expanded in one direction: `visibility 0s .35s`
   never settled to hidden on close, and `visibility .35s` stayed hidden
   through the open. The cost of leaving it untransitioned is that the answer
   text disappears at once while the row animates shut; the benefit is that the
   a11y tree always matches the announced state. That trade is not close. */
.faq-a > div { overflow: hidden; visibility: hidden; }
.faq-item.open .faq-a > div { visibility: visible; }
.faq-a p { font-size: 14.5px; color: var(--ink-soft); padding: 0 26px 22px; }

/* ── Clients: dual-direction marquee ─────────────────────────────────── */
.marquee {
  position: relative;
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.marquee + .marquee { margin-top: 14px; }
.marquee-track {
  display: flex; gap: 16px; width: max-content;
  animation: scrollX 36s linear infinite;
  padding: 4px 0;
}
.marquee.reverse .marquee-track { animation-name: scrollXr; animation-duration: 42s; }
.marquee:hover .marquee-track { animation-play-state: paused; }
@keyframes scrollX  { from { transform: translateX(0); }    to { transform: translateX(-50%); } }
@keyframes scrollXr { from { transform: translateX(-50%); } to { transform: translateX(0); } }

/* ── Trusted-by logo wall ────────────────────────────────────────────── */
.clients { padding: 100px 0 96px; overflow: hidden; }
.clients .sec-head { margin-bottom: 40px; }
.clients .marquee + .marquee { margin-top: 20px; }
.clients .marquee-track { gap: 20px; }
.logo-chip {
  flex-shrink: 0; display: grid; place-items: center;
  width: 196px; height: 108px; padding: 24px 30px;
  background: #fff; border: 1px solid var(--line); border-radius: 16px;
  box-shadow: var(--shadow-sm);
}
.logo-chip img {
  height: 42px; width: auto; max-width: 150px; object-fit: contain;
  filter: grayscale(1); opacity: .72;
  transition: filter .3s ease, opacity .3s ease, transform .3s ease;
}
.logo-chip:hover { border-color: #f3cdcd; box-shadow: var(--shadow-md); }
.logo-chip:hover img { filter: none; opacity: 1; transform: scale(1.06); }
/* Dark theme: most of these logo files have a white or half-transparent
   white background baked into the image (12 of 17), so the light-theme
   white chip became a row of glaring white rectangles on a near-black
   page. Plain silhouetting (brightness 0, invert 1) would turn those same
   files into solid white boxes.
   Greyscale -> invert -> screen does the right thing for both kinds: the
   baked-in white inverts to black, and screen makes black transparent, so
   only the mark survives, as light on the dark card. Logos are already
   greyscale in the light theme, so no brand colour is lost. The attribute
   selector also outranks the reduced-motion rule that sets filter:none,
   which would otherwise reveal the white backgrounds. */
[data-theme="dark"] .logo-chip { background: var(--card); border-color: var(--line); isolation: isolate; }
[data-theme="dark"] .logo-chip:hover { border-color: #55272e; }
[data-theme="dark"] .logo-chip img { filter: grayscale(1) invert(1); mix-blend-mode: screen; opacity: .8; }
[data-theme="dark"] .logo-chip:hover img { filter: grayscale(1) invert(1); opacity: 1; }
@media (max-width: 620px) {
  .logo-chip { width: 150px; height: 88px; padding: 18px 22px; }
  .logo-chip img { height: 34px; max-width: 118px; }
  .clients { padding: 70px 0; }
}

/* ── LinkedIn button ─────────────────────────────────────────────────── */
.btn-linkedin { background: #0a66c2; color: #fff; box-shadow: 0 6px 18px rgba(10,102,194,.28); }
.btn-linkedin:hover { background: #084e96; box-shadow: 0 10px 26px rgba(10,102,194,.4); }

/* ── CTA band with border beam ───────────────────────────────────────── */
.cta-band { padding: 100px 0; }
.beam-wrap {
  position: relative; border-radius: 28px; padding: 2.5px; overflow: hidden;
  box-shadow: var(--shadow-lg);
}
.beam-wrap::before {
  content: ""; position: absolute; inset: -120%;
  background: conic-gradient(from 0deg, transparent 0 70%, #ffb199 82%, #fff 88%, transparent 96%);
  animation: spin 5s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.cta-inner {
  position: relative; overflow: hidden;
  background: linear-gradient(115deg, #63100f, #dc2626 70%, #f2603c);
  border-radius: 26px; padding: 72px 60px;
  display: flex; align-items: center; justify-content: space-between; gap: 40px;
}
.cta-inner::after {
  content: ""; position: absolute; right: -80px; top: -80px;
  width: 340px; height: 340px; border-radius: 50%;
  background: rgba(255,255,255,.08);
}
.cta-inner h2 { color: #fff; font-size: clamp(26px, 3.4vw, 38px); font-weight: 800; margin-bottom: 12px; }
/* #ffd6cb was 2.42:1 against the coral end of the band gradient. */
.cta-inner p { color: #fff; font-size: 16.5px; max-width: 520px; }
.cta-inner .btn { background: var(--card); color: var(--red-deep); position: relative; z-index: 1; white-space: nowrap; }
.cta-inner .btn:hover { box-shadow: 0 12px 28px rgba(0,0,0,.25); }

/* ── Background canvases (hero globe + sections) ─────────────────────── */
.bg-canvas { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.services, #founders { position: relative; overflow: hidden; }
.services .wrap, #founders .wrap, .testimonials .wrap { position: relative; z-index: 1; }

/* ── Gif-style animated stickers ─────────────────────────────────────── */
.sticker {
  display: inline-grid; place-items: center; vertical-align: middle;
  margin-left: 14px; padding: 9px; background: var(--card); border-radius: 16px;
  box-shadow: 0 6px 16px rgba(28,10,13,.14), 0 0 0 1px var(--line);
  transform: rotate(-6deg);
  animation: stickerWiggle 4.5s ease-in-out infinite;
}
@keyframes stickerWiggle {
  0%, 100% { transform: rotate(-6deg); }
  50% { transform: rotate(5deg) translateY(-4px); }
}
.spinSlow { transform-origin: center; animation: spin 8s linear infinite; }
.orbit { transform-origin: 30px 30px; animation: spin 6s linear infinite; }
.beat { transform-origin: center; animation: beat 1.2s ease-in-out infinite; }
@keyframes beat { 0%, 100% { transform: scale(1); } 12% { transform: scale(1.22); } 24% { transform: scale(1); } 36% { transform: scale(1.14); } 48% { transform: scale(1); } }
.twinkle { transform-origin: center; animation: twinkle 1.8s ease-in-out infinite; }
.twinkle.d2 { animation-delay: .5s; }
.twinkle.d3 { animation-delay: 1s; }
@keyframes twinkle { 0%, 100% { opacity: 1; transform: scale(1) rotate(0deg); } 50% { opacity: .25; transform: scale(.55) rotate(30deg); } }
.flame { transform-origin: 50% 0; animation: flicker .4s ease-in-out infinite alternate; }
@keyframes flicker { from { transform: scaleY(1); opacity: .9; } to { transform: scaleY(1.5); opacity: .6; } }
.rocketBob { animation: bob 2.4s ease-in-out infinite; }
@keyframes bob { 0%, 100% { transform: translateY(0) rotate(0deg); } 50% { transform: translateY(-5px) rotate(-4deg); } }

/* ── Mini terminal "gif" (featured AI card) ──────────────────────────── */
.spot-card.featured { padding-right: 270px; }
.gif-terminal {
  position: absolute; right: 30px; top: 50%; transform: translateY(-50%) rotate(2deg);
  width: 208px; background: #1c0a0d; border-radius: 13px;
  box-shadow: 0 16px 36px rgba(28,10,13,.28);
  overflow: hidden;
}
.term-bar { display: flex; gap: 6px; padding: 10px 12px; background: #2b1216; }
.term-bar i { width: 9px; height: 9px; border-radius: 50%; background: #4a2a2f; }
.term-bar i:first-child { background: var(--red); }
.term-body { padding: 14px 14px 16px; font-family: Consolas, monospace; font-size: 11px; }
.tl {
  display: block; height: 8px; border-radius: 4px; margin-bottom: 9px;
  background: linear-gradient(90deg, var(--coral), var(--red));
  transform-origin: left center;
  animation: typeLine 7s steps(14) infinite;
}
.tl.t1 { width: 82%; }
.tl.t2 { width: 58%; opacity: .75; animation-name: typeLine2; }
.tl.t3 { width: 70%; opacity: .55; animation-name: typeLine3; }
@keyframes typeLine  { 0% { transform: scaleX(0); } 16% { transform: scaleX(1); } 100% { transform: scaleX(1); } }
@keyframes typeLine2 { 0%, 18% { transform: scaleX(0); } 38% { transform: scaleX(1); } 100% { transform: scaleX(1); } }
@keyframes typeLine3 { 0%, 40% { transform: scaleX(0); } 60% { transform: scaleX(1); } 100% { transform: scaleX(1); } }
.term-ok {
  display: inline-flex; align-items: center; gap: 6px;
  color: #4ade80; font-weight: 700;
  opacity: 0; animation: okIn 7s ease infinite;
}
@keyframes okIn { 0%, 66% { opacity: 0; } 74%, 96% { opacity: 1; } 100% { opacity: 0; } }
.caret { display: inline-block; width: 7px; height: 12px; background: var(--coral); margin-left: 6px; vertical-align: middle; animation: blink 1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }
@media (max-width: 1080px) {
  .gif-terminal { display: none; }
  .spot-card.featured { padding-right: 30px; }
}

/* ==========================================================================
   HOME PAGE
   Blocks used only by index.html.
   ========================================================================== */

/* ── Services: spotlight bento grid ──────────────────────────────────── */
.services { background: var(--bg-soft); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.bento { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.spot-card {
  position: relative;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 34px 30px; display: flex; flex-direction: column;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
  overflow: hidden;
}
.spot-card::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(320px circle at var(--mx, 50%) var(--my, 50%), rgba(220,38,38,.09), transparent 65%);
  opacity: 0; transition: opacity .3s ease;
}
.spot-card:hover::before { opacity: 1; }
.spot-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-md); border-color: #f3cdcd; }
.spot-card.featured { grid-column: span 2; background: linear-gradient(120deg, var(--card) 55%, var(--red-tint)); }
.spot-card.wide { grid-column: span 3; flex-direction: row; align-items: center; gap: 30px; }
.spot-card.wide .svc-body { flex: 1; }
.spot-card.wide p { margin-bottom: 0; }
.svc-icon {
  width: 52px; height: 52px; border-radius: 14px; flex-shrink: 0;
  background: var(--red-tint); color: var(--red);
  display: grid; place-items: center; margin-bottom: 22px;
  transition: all .25s ease;
}
.spot-card.wide .svc-icon { margin-bottom: 0; }
.spot-card:hover .svc-icon { background: var(--red); color: #fff; box-shadow: 0 8px 20px rgba(220,38,38,.35); transform: rotate(-6deg) scale(1.06); }
.spot-card h3 { font-size: 19px; font-weight: 700; margin-bottom: 10px; line-height: 1.35; position: relative; }
.spot-card p { font-size: 14.5px; color: var(--ink-soft); flex: 1; margin-bottom: 20px; position: relative; }
.svc-link { font-size: 14px; font-weight: 600; color: var(--red-text); display: inline-flex; align-items: center; gap: 6px; position: relative; }
.svc-link svg { transition: transform .2s; }
.spot-card:hover .svc-link svg { transform: translateX(4px); }
.pill-row { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 20px; position: relative; }
.pill {
  font-size: 12px; font-weight: 600; color: var(--red-deep);
  background: var(--card); border: 1px solid var(--red-tint-2);
  border-radius: 100px; padding: 5px 13px;
}

/* ── Why NeuAlto ─────────────────────────────────────────────────────── */
.why-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.why-card {
  position: relative; padding: 30px 26px;
  border: 1px solid var(--line); border-radius: var(--radius);
  background: linear-gradient(180deg, var(--card), var(--bg-soft));
  transition: transform .25s ease, box-shadow .25s ease;
}
.why-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-md); }
.why-num {
  font-family: 'Sora'; font-size: 15px; font-weight: 800; color: var(--red-text);
  background: var(--red-tint); width: 40px; height: 40px; border-radius: 50%;
  display: grid; place-items: center; margin-bottom: 20px;
  transition: all .25s ease;
}
.why-card:hover .why-num { background: var(--red); color: #fff; box-shadow: 0 6px 16px rgba(220,38,38,.35); }
.why-card h3 { font-size: 17.5px; font-weight: 700; margin-bottom: 10px; }
.why-card p { font-size: 14px; color: var(--ink-soft); }

/* ── About section ───────────────────────────────────────────────────── */
.about { background: var(--bg-soft); border-top: 1px solid var(--line); position: relative; overflow: hidden; }
.about .wrap { position: relative; z-index: 1; }

/* ── Solutions teaser (homepage) ─────────────────────────────────────── */
.teaser-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; }
.teaser-card {
  display: flex; flex-direction: column; overflow: hidden;
  background: var(--card); border: 1px solid var(--line); border-radius: 22px;
  box-shadow: var(--shadow-sm);
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.teaser-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-md); border-color: #f3cdcd; }
[data-theme="dark"] .teaser-card:hover { border-color: #55272e; }
.teaser-art { aspect-ratio: 21 / 9; overflow: hidden; border-bottom: 1px solid var(--line); }
.teaser-art img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .4s ease; }
.teaser-card:hover .teaser-art img { transform: scale(1.04); }
.teaser-body { padding: 26px 28px 28px; display: flex; flex-direction: column; flex: 1; }
.teaser-body h3 { font-size: 22px; font-weight: 800; margin-bottom: 4px; }
.teaser-tag { font-size: 13px; font-weight: 700; color: var(--red-text); margin-bottom: 12px; }
.teaser-body p:not(.teaser-tag) { font-size: 14.5px; color: var(--ink-soft); flex: 1; margin-bottom: 18px; }
@media (max-width: 780px) { .teaser-grid { grid-template-columns: 1fr; } }
.about-narrative { max-width: 820px; margin: -18px auto 40px; }
.about-narrative p { font-size: 15.5px; color: var(--ink-soft); margin-bottom: 16px; text-align: center; }
.about-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.about-card {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 30px 28px; box-shadow: var(--shadow-sm);
}
.about-card h3 { font-size: 17px; font-weight: 700; margin-bottom: 14px; }
@media (max-width: 860px) { .about-grid { grid-template-columns: 1fr; } }

/* ── Founders: 3D tilt cards ─────────────────────────────────────────── */
.founder-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; max-width: 920px; margin: 0 auto; perspective: 1200px; }
.founder-card {
  position: relative; overflow: hidden;
  background: var(--card); border: 1px solid var(--line); border-radius: 22px;
  padding: 42px 36px 36px; text-align: center;
  transition: box-shadow .28s ease;
  transform-style: preserve-3d; will-change: transform;
}
.founder-card::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 110px;
  background:
    radial-gradient(300px 120px at 50% 0%, rgba(220,38,38,.14), transparent 70%),
    linear-gradient(180deg, var(--red-tint), transparent);
}
.founder-card:hover { box-shadow: var(--shadow-lg); }
.fa-1 { background: linear-gradient(135deg, #dc2626, #7f1212); }
.fa-2 { background: linear-gradient(135deg, #ff6a3d, #c22323); }
/* Comes after .fa-1/.fa-2 (equal specificity) so its background wins over
   their gradient — those only show as a fallback while a photo loads. */
.founder-avatar {
  position: relative; width: 132px; height: 132px; border-radius: 50%;
  margin: 0 auto 22px;
  display: grid; place-items: center;
  font-family: 'Sora'; font-size: 34px; font-weight: 800; color: #fff;
  box-shadow: 0 12px 30px rgba(220,38,38,.35);
  border: 4px solid #fff;
  transform: translateZ(40px);
  overflow: hidden;
  background: var(--bg-soft);
}
.founder-card h3 { position: relative; font-size: 21px; font-weight: 800; margin-bottom: 6px; transform: translateZ(28px); }
.founder-role { position: relative; font-size: 14px; font-weight: 600; color: var(--red-text); margin-bottom: 4px; transform: translateZ(22px); }
.founder-loc {
  position: relative; display: inline-flex; align-items: center; gap: 7px;
  font-size: 13px; font-weight: 600; color: var(--ink-faint);
  background: var(--bg-soft); border: 1px solid var(--line); border-radius: 100px;
  padding: 5px 14px; margin: 10px 0 18px; transform: translateZ(18px);
}
.founder-card p.bio { position: relative; font-size: 14.5px; color: var(--ink-soft); max-width: 340px; margin: 0 auto 22px; transform: translateZ(14px); }
.founder-tags { position: relative; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; transform: translateZ(10px); }
.ftag {
  font-size: 12px; font-weight: 600; color: var(--red-deep);
  background: var(--red-tint); border: 1px solid var(--red-tint-2);
  border-radius: 100px; padding: 5px 13px;
}

/* ── Founder photos ──────────────────────────────────────────────────── */
.founder-avatar img {
  width: 100%; height: 100%;
  object-fit: cover; object-position: center top; display: block;
}

/* ── Testimonials (theme-aware) ──────────────────────────────────────── */
.testimonials { background: var(--bg-soft); color: var(--ink); position: relative; overflow: hidden; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.testimonials::before {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(800px 400px at 20% 0%, rgba(220,38,38,.08), transparent 60%),
              radial-gradient(700px 400px at 90% 100%, rgba(255,122,89,.06), transparent 60%);
}
[data-theme="dark"] .testimonials::before {
  background: radial-gradient(800px 400px at 20% 0%, rgba(220,38,38,.28), transparent 60%),
              radial-gradient(700px 400px at 90% 100%, rgba(255,122,89,.15), transparent 60%);
}
.testimonials .wrap { position: relative; }
.testimonials .kicker { color: var(--red-text); }
.testimonials .sec-head h2 { color: var(--ink); }
.testimonials .sec-head p { color: var(--ink-soft); }
.quote-marquee { position: relative; z-index: 1; margin-top: -20px; }
.quote-marquee .marquee-track { gap: 24px; animation-duration: 46s; align-items: stretch; }
.quote-marquee:hover .marquee-track { animation-play-state: paused; }
.quote-marquee .quote-card { width: 400px; flex-shrink: 0; }
@media (max-width: 620px) { .quote-marquee .quote-card { width: 300px; } }
.quote-card {
  position: relative;
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 32px 28px;
  box-shadow: var(--shadow-sm); display: flex; flex-direction: column;
  transition: box-shadow .25s, transform .25s, border-color .25s;
}
.quote-card:hover { box-shadow: var(--shadow-md); transform: translateY(-4px); border-color: #f3cdcd; }
[data-theme="dark"] .quote-card:hover { border-color: rgba(255,122,89,.45); }
.quote-mark { font-family: 'Sora'; font-size: 46px; line-height: 1; color: var(--red-text); margin-bottom: 14px; }
.quote-card blockquote { font-size: 15px; color: var(--ink-soft); flex: 1; margin-bottom: 24px; }
.quote-who { display: flex; align-items: center; gap: 13px; }
.quote-who::before {
  content: ""; flex-shrink: 0; width: 3px; height: 36px; border-radius: 3px;
  background: linear-gradient(var(--red-bright), var(--coral));
}
.quote-who b { display: block; font-size: 14.5px; color: var(--ink); }
.quote-who span { font-size: 13px; color: var(--ink-faint); }

/* ── Partners section ────────────────────────────────────────────────── */
.partner-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; max-width: 860px; margin: 0 auto; }
.partner-card {
  background: var(--card); border: 1px solid var(--line); border-radius: 22px;
  padding: 38px 34px; text-align: center;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.partner-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-md); border-color: #f3cdcd; }
[data-theme="dark"] .partner-card:hover { border-color: #55272e; }
.partner-logo {
  height: 96px; display: grid; place-items: center; margin-bottom: 22px;
  background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 16px;
}
.partner-logo img { max-height: 64px; max-width: 200px; object-fit: contain; }
/* Partner logos stay in full colour on a light plate: they are named brand
   relationships, and recolouring a mark like Google's is not ours to do. The
   plate is softened from pure white so it stops glaring against the dark
   card, and multiply absorbs the white backgrounds baked into two of the
   four files, so they do not show as a whiter box inside the plate. */
[data-theme="dark"] .partner-logo { background: #efe7e9; border-color: transparent; }
[data-theme="dark"] .partner-logo img { mix-blend-mode: multiply; }
.partner-card h3 { font-size: 20px; font-weight: 700; margin-bottom: 10px; }
.partner-card p { font-size: 14.5px; color: var(--ink-soft); }
@media (max-width: 680px) { .partner-grid { grid-template-columns: 1fr; } }

/* ── Careers section ─────────────────────────────────────────────────── */
.careers-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; max-width: 920px; margin: 0 auto 44px; }
.job-mini h3 { font-size: 20px; }
.job-meta { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 16px; position: relative; }
.meta-pill {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12.5px; font-weight: 600; color: var(--red-deep);
  background: var(--red-tint); border: 1px solid var(--red-tint-2);
  border-radius: 100px; padding: 5px 13px;
}
.careers-cta { display: flex; justify-content: center; gap: 14px; flex-wrap: wrap; }

/* ── Contact section (form + maps) ───────────────────────────────────── */
.contact { border-top: 1px solid var(--line); }
.contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; align-items: stretch; }
.contact-form {
  background: var(--card); border: 1px solid var(--line); border-radius: 22px;
  padding: 34px 32px; box-shadow: var(--shadow-sm);
  display: grid; gap: 16px;
}
.contact-form label { font-size: 13.5px; font-weight: 600; color: var(--ink); display: grid; gap: 7px; }
.contact-form input, .contact-form select, .contact-form textarea {
  font-family: 'Inter', sans-serif; font-size: 14.5px; color: var(--ink);
  background: var(--bg-soft); border: 1.5px solid var(--line-strong); border-radius: 12px;
  padding: 12px 14px; width: 100%; resize: vertical;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.contact-form input:focus-visible, .contact-form select:focus-visible, .contact-form textarea:focus-visible {
  outline: none; border-color: var(--red); box-shadow: 0 0 0 3px rgba(220,38,38,.12);
}
/* Native select chrome differs wildly per OS and ignores the styling above, so
   it is replaced with a drawn caret to match the text inputs. */
.contact-form select {
  appearance: none; -webkit-appearance: none; cursor: pointer; padding-right: 40px;
  background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none' stroke='%237d686c' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center;
}
[data-theme="dark"] .contact-form select {
  background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none' stroke='%239d8085' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
}
/* Dropdown list itself is OS-rendered; force readable colours in dark mode. */
[data-theme="dark"] .contact-form select option { background: var(--card); color: var(--ink); }
.contact-form button { justify-content: center; }
.contact-form .opt { font-weight: 500; color: var(--ink-faint); }
.form-note { font-size: 12.5px; color: var(--ink-faint); }
.form-note a { color: var(--red-text); font-weight: 600; }
.contact-side { display: grid; gap: 22px; }
.loc-card {
  background: var(--card); border: 1px solid var(--line); border-radius: 22px;
  padding: 26px 26px 22px; box-shadow: var(--shadow-sm);
}
.loc-card h3 { font-size: 17px; font-weight: 700; margin-bottom: 8px; }
.loc-card p { font-size: 14px; color: var(--ink-soft); margin-bottom: 6px; }
.loc-card .loc-meta a { color: var(--red-text); font-weight: 600; }
.map-embed { border-radius: 14px; overflow: hidden; border: 1px solid var(--line); margin-top: 14px; }
.map-embed iframe { display: block; width: 100%; height: 220px; border: 0; }
@media (max-width: 880px) { .contact-grid { grid-template-columns: 1fr; } }

/* ==========================================================================
   SUB PAGES
   Blocks scoped to a single sub-page.
   ========================================================================== */

/* ── Service detail sections ─────────────────────────────────────────── */
.svc-detail { padding: 76px 0; border-top: 1px solid var(--line); scroll-margin-top: 80px; }
.svc-detail.alt { background: var(--bg-soft); }
.svc-detail-head { display: flex; align-items: center; gap: 20px; margin-bottom: 26px; }
.svc-detail-head .svc-icon { margin-bottom: 0; }
.svc-detail-head .kicker { margin-bottom: 4px; }
.svc-detail-head h2 { font-size: clamp(24px, 3vw, 32px); font-weight: 800; }
.svc-detail p { font-size: 15.5px; color: var(--ink-soft); max-width: 820px; margin-bottom: 16px; }
.svc-detail h3 { font-size: 18px; font-weight: 700; margin: 26px 0 12px; }
.svc-detail .check-list { max-width: 820px; }
.svc-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 36px; margin-top: 8px; }
.svc-cols h3 { margin-top: 18px; }
.check-list.cols-2 { grid-template-columns: 1fr 1fr; }
@media (max-width: 720px) {
  .svc-cols { grid-template-columns: 1fr; gap: 8px; }
  .check-list.cols-2 { grid-template-columns: 1fr; }
}

/* ── Solutions page ──────────────────────────────────────────────────── */
.sol-detail { padding: 80px 0; border-top: 1px solid var(--line); scroll-margin-top: 80px; }
.sol-detail.alt { background: var(--bg-soft); }
.prod-head { margin-bottom: 38px; }
.sec-head h2.prod-name {
  font-size: clamp(38px, 5.4vw, 56px);
  /* Ends on --red, not --coral: coral is 2.57:1 on white and these are
     gradient-filled headings, so the tail of every word fell below the 3:1
     large-text minimum. --red is 4.83:1. */
  background: linear-gradient(100deg, var(--red-deep), var(--red-bright) 45%, var(--red));
  -webkit-background-clip: text; background-clip: text; color: transparent;
  margin-bottom: 10px;
}
.prod-head p { font-size: 17px; font-weight: 500; }
.sol-banner {
  border-radius: 22px; overflow: hidden; margin-bottom: 44px;
  box-shadow: var(--shadow-lg); border: 1px solid var(--line);
}
.sol-banner img { display: block; width: 100%; height: auto; }
.sol-detail > .wrap > p { font-size: 15.5px; color: var(--ink-soft); max-width: 860px; margin: 0 auto 16px; text-align: center; }
.sol-duo { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin: 34px 0; }
.sol-card {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 30px 28px; box-shadow: var(--shadow-sm);
}
.sol-card h3 { font-size: 18px; font-weight: 700; margin-bottom: 12px; }
.sol-card p { font-size: 14.5px; color: var(--ink-soft); margin-bottom: 14px; }
.sol-card p:last-child { margin-bottom: 0; }
.sol-sub { text-align: center; font-size: clamp(22px, 2.6vw, 28px); font-weight: 800; margin: 54px 0 8px; }
.sol-feature {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 32px 30px; margin-top: 24px; box-shadow: var(--shadow-sm);
}
.sol-feature h4 { font-family: 'Sora'; font-size: 17px; font-weight: 700; color: var(--red-deep); margin-bottom: 12px; }
.sol-feature p { font-size: 14.5px; color: var(--ink-soft); margin-bottom: 14px; max-width: none; }
.sol-feature .check-list { margin-top: 4px; }
@media (max-width: 780px) { .sol-duo { grid-template-columns: 1fr; } }

/* ── Product deep pages (DeltaMax / OptiMax) ─────────────────────────── */
.prod-section { padding: 70px 0; border-top: 1px solid var(--line); scroll-margin-top: 80px; }
.prod-section.alt { background: var(--bg-soft); }
.prod-section h2 { font-size: clamp(24px, 3vw, 32px); font-weight: 800; margin-bottom: 18px; }
.prod-section h3 { font-size: 18px; font-weight: 700; margin: 24px 0 12px; }
.prod-section > .wrap > p { font-size: 15px; color: var(--ink-soft); max-width: 860px; margin-bottom: 14px; }
.prod-kicker { display: inline-block; font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--red-text); margin-bottom: 10px; }
.cloud-badge {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: 'Sora'; font-size: 13px; font-weight: 700;
  color: var(--red-deep); background: var(--red-tint); border: 1px solid var(--red-tint-2);
  border-radius: 100px; padding: 7px 16px; margin-bottom: 14px;
}
.shot-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin: 22px 0; }
.shot-grid a { display: block; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; background: #fff; transition: transform .2s ease, box-shadow .2s ease; }
.shot-grid a:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.shot-grid img { display: block; width: 100%; height: 150px; object-fit: cover; object-position: top; }
@media (max-width: 720px) { .shot-grid { grid-template-columns: 1fr 1fr; } }
.figure-card { background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 14px; margin: 18px 0; box-shadow: var(--shadow-sm); }
.figure-card img { display: block; width: 100%; height: auto; border-radius: 8px; }
.figure-card figcaption { font-size: 13px; color: var(--ink-faint); text-align: center; padding-top: 10px; }
.step-list { counter-reset: step; display: grid; gap: 12px; margin: 18px 0; max-width: 860px; }
.step-list li {
  list-style: none; position: relative; padding: 16px 18px 16px 58px;
  background: var(--card); border: 1px solid var(--line); border-radius: 14px;
  font-size: 14.5px; color: var(--ink-soft);
}
.step-list li::before {
  counter-increment: step; content: counter(step);
  position: absolute; left: 16px; top: 14px;
  width: 28px; height: 28px; border-radius: 50%;
  background: var(--red-tint); color: var(--red); font-weight: 800; font-size: 13px;
  display: grid; place-items: center; font-family: 'Sora';
}
.step-list li b { color: var(--ink); }
.faq-details { max-width: 860px; display: grid; gap: 12px; margin-top: 8px; }
.faq-details details {
  background: var(--card); border: 1px solid var(--line); border-radius: 14px;
  padding: 0 20px;
}
.faq-details summary {
  cursor: pointer; font-family: 'Sora'; font-size: 15px; font-weight: 700;
  color: var(--ink); padding: 18px 0; list-style: none;
}
.faq-details summary::before { content: "+"; color: var(--red-text); font-weight: 800; margin-right: 10px; }
.faq-details details[open] summary::before { content: "–"; }
.faq-details details > div { padding: 0 0 18px; font-size: 14.5px; color: var(--ink-soft); }
.faq-details details > div ul { margin: 8px 0 0 18px; display: grid; gap: 6px; }
.buy-band {
  display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap;
  background: var(--card); border: 1px solid var(--line); border-radius: 18px;
  padding: 28px 30px; margin-top: 30px; box-shadow: var(--shadow-sm);
}
.buy-band h3 { margin: 0; font-size: 19px; }
.buy-band p { font-size: 14px; color: var(--ink-soft); margin: 4px 0 0; }
.buy-band .btn-row { display: flex; gap: 12px; flex-wrap: wrap; }
.vs-table-wrap { overflow-x: auto; margin: 18px 0; border: 1px solid var(--line); border-radius: 14px; }
.vs-table { width: 100%; min-width: 640px; border-collapse: collapse; background: var(--card); font-size: 13.5px; }
.vs-table th, .vs-table td { text-align: left; padding: 12px 14px; border-bottom: 1px solid var(--line); vertical-align: top; color: var(--ink-soft); }
.vs-table th { font-family: 'Sora'; font-size: 12px; text-transform: uppercase; letter-spacing: .05em; color: var(--red-deep); background: var(--red-tint); }
.vs-table tr:last-child td { border-bottom: none; }
.vs-table td:first-child { font-weight: 600; color: var(--ink); }
.comp-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; margin: 18px 0; }
.comp-card { background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 20px; }
.comp-card h4 { font-family: 'Sora'; font-size: 15px; margin-bottom: 8px; color: var(--ink); }
.comp-card p { font-size: 13.5px; color: var(--ink-soft); margin-bottom: 8px; }
.comp-card .tagline { font-size: 12px; font-weight: 600; color: var(--red-deep); }
@media (max-width: 720px) { .comp-grid { grid-template-columns: 1fr; } }

/* ── Blog / LinkedIn post feed ───────────────────────────────────────── */
.blog-sec { padding: 60px 0 96px; border-top: 1px solid var(--line); background: var(--bg-soft); }
.filter-row { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-bottom: 42px; }
.filter-chip {
  font-family: 'Inter', sans-serif; font-size: 13.5px; font-weight: 600; cursor: pointer;
  color: var(--ink-soft); background: var(--card);
  border: 1.5px solid var(--line); border-radius: 100px; padding: 9px 18px;
  transition: all .2s ease;
}
.filter-chip:hover { color: var(--red-text); border-color: var(--red); }
.filter-chip.active { color: #fff; background: var(--red); border-color: var(--red); box-shadow: 0 6px 16px rgba(220,38,38,.3); }

.post-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 26px; align-items: start; }
.post-card {
  display: flex; flex-direction: column;
  background: var(--card); border: 1px solid var(--line); border-radius: 22px;
  padding: 30px 30px 26px; box-shadow: var(--shadow-sm);
  transition: box-shadow .25s ease, border-color .25s ease;
}
.post-card:hover { box-shadow: var(--shadow-md); border-color: #f3cdcd; }
[data-theme="dark"] .post-card:hover { border-color: #55272e; }
.post-card[hidden] { display: none; }
.post-meta {
  display: flex; align-items: center; gap: 10px;
  font-size: 12.5px; font-weight: 600; color: var(--ink-faint); margin-bottom: 12px;
}
.post-src {
  color: #0a66c2; background: rgba(10,102,194,.1);
  border-radius: 100px; padding: 3px 10px; font-size: 11.5px;
}
[data-theme="dark"] .post-src { color: #7cb8f0; background: rgba(10,102,194,.2); }
.post-card h2 { font-size: 21px; font-weight: 800; line-height: 1.35; margin-bottom: 12px; }
.post-body > p { font-size: 14.5px; color: var(--ink-soft); margin-bottom: 16px; }
.post-card .pill-row { margin-bottom: 20px; }

/* LinkedIn iframes render light-only — keep them on a white plate so they
   never look broken against the dark theme */
.post-embed {
  position: relative; background: #fff; border: 1px solid var(--line);
  border-radius: 14px; overflow: hidden; min-height: 340px;
}
/* iframe must sit above the absolutely-positioned skeleton until it loads */
.post-embed iframe { display: block; width: 100%; height: 480px; border: 0; position: relative; z-index: 1; }
.embed-skeleton { position: absolute; inset: 0; padding: 24px; display: grid; gap: 12px; align-content: start; }
.embed-skeleton span {
  display: block; height: 12px; border-radius: 6px;
  background: linear-gradient(90deg, #eee 25%, #f6f6f6 50%, #eee 75%);
  background-size: 200% 100%; animation: shimmerBar 1.4s linear infinite;
}
.embed-skeleton span:nth-child(1) { width: 60%; }
.embed-skeleton span:nth-child(2) { width: 90%; }
.embed-skeleton span:nth-child(3) { width: 75%; }
@keyframes shimmerBar { from { background-position: 200% 0; } to { background-position: -200% 0; } }
.post-link { margin-top: 18px; align-self: flex-start; }
.post-empty { text-align: center; color: var(--ink-soft); font-size: 15px; padding: 40px 0; }

/* ── "From LinkedIn" band ────────────────────────────────────── */
/* The shorter notes, below the articles. Same .post-grid and .post-card as
   above - only the surrounding band differs, so the embeds still look like
   themselves while clearly sitting a level below the writing. The embeds are
   lazy (see the postEmbeds module in app.js), so nothing here is fetched
   until a visitor actually scrolls this far. */
.li-sec { padding: 56px 0 90px; border-top: 1px solid var(--line); background: var(--bg); }
.li-sec .sol-sub { margin-top: 0; }
.li-note { text-align: center; color: var(--ink-faint); font-size: 14.5px; margin-bottom: 34px; }
.li-cta { display: flex; justify-content: center; margin-top: 38px; }
@media (max-width: 860px) { .post-grid { grid-template-columns: 1fr; } }

/* ── Careers page ────────────────────────────────────────────────────── */
.page-careers .wrap { max-width: 1080px; }
.page-careers .hero { padding: 90px 0 70px; }
.page-careers .hero h1 { font-size: clamp(34px, 4.8vw, 54px); max-width: 760px; }
.page-careers .hero-ctas { margin-bottom: 0; }
.announce b { color: #fff; }
.openings { padding: 80px 0 40px; background: var(--bg-soft); border-top: 1px solid var(--line); }
.job-card {
  background: var(--card); border: 1px solid var(--line); border-radius: 22px;
  padding: 40px 42px; margin: 0 auto 28px; max-width: 900px;
  box-shadow: var(--shadow-sm);
  transition: box-shadow .25s ease, border-color .25s ease;
}
.job-card:hover { box-shadow: var(--shadow-md); border-color: #f3cdcd; }
[data-theme="dark"] .job-card:hover { border-color: #55272e; }
.job-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; flex-wrap: wrap; margin-bottom: 18px; }
.job-top h3 { font-size: 24px; font-weight: 800; }
.job-card .job-meta { margin: 0 0 20px; }
.job-summary { font-size: 15px; color: var(--ink-soft); margin-bottom: 26px; max-width: 720px; }
.job-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; margin-bottom: 26px; }
.job-cols h4 {
  font-family: 'Sora'; font-size: 14px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .08em; color: var(--ink);
  margin-bottom: 14px;
}
.job-apply { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; border-top: 1px solid var(--line); padding-top: 24px; }
.job-apply span { font-size: 13.5px; color: var(--ink-faint); }
.mail-band { padding: 60px 0 100px; background: var(--bg-soft); }
.mail-inner {
  position: relative; overflow: hidden; max-width: 900px; margin: 0 auto;
  background: linear-gradient(115deg, #63100f, #dc2626 70%, #f2603c);
  border-radius: 26px; padding: 54px 50px;
  display: flex; align-items: center; justify-content: space-between; gap: 32px; flex-wrap: wrap;
  box-shadow: var(--shadow-md);
}
.mail-inner::after {
  content: ""; position: absolute; right: -70px; top: -70px;
  width: 280px; height: 280px; border-radius: 50%;
  background: rgba(255,255,255,.08);
}
.mail-inner h2 { color: #fff; font-size: clamp(22px, 3vw, 30px); font-weight: 800; margin-bottom: 10px; }
.mail-inner p { color: #ffd6cb; font-size: 15.5px; max-width: 480px; }
.mail-inner .btn { background: #fff; color: var(--red-deep); position: relative; z-index: 1; white-space: nowrap; }
.page-careers footer { background: var(--card); padding: 34px 0; }
.foot-row { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 14px; font-size: 13.5px; color: var(--ink-faint); }
.foot-row a { color: var(--ink-soft); font-weight: 500; }
.foot-row a:hover { color: var(--red-text); }
.foot-links { display: flex; gap: 22px; }
@media (max-width: 720px) {
  .job-cols { grid-template-columns: 1fr; }
  .job-card { padding: 30px 26px; }
  .mail-inner { padding: 42px 30px; text-align: center; justify-content: center; }
}

.hero h1 .accent {
  /* Ends on --red, not --coral: coral is 2.57:1 on white and these are
     gradient-filled headings, so the tail of every word fell below the 3:1
     large-text minimum. --red is 4.83:1. */
  background: linear-gradient(100deg, var(--red-deep), var(--red-bright) 45%, var(--red));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* ── Legal / privacy page ────────────────────────────────────────────── */
.legal-hero { padding-bottom: 48px; }
.legal { padding: 64px 0 90px; border-top: 1px solid var(--line); background: var(--bg-soft); }
.legal-wrap { max-width: 820px; }
.legal p { font-size: 15px; color: var(--ink-soft); margin-bottom: 16px; line-height: 1.75; }
.legal h2 {
  display: flex; align-items: center; gap: 12px;
  font-size: 22px; font-weight: 800; margin: 44px 0 16px;
  padding-top: 28px; border-top: 1px solid var(--line);
}
.legal h2 .sec-num {
  font-size: 13px; color: var(--red-text); background: var(--red-tint);
  border: 1px solid var(--red-tint-2); border-radius: 8px; padding: 3px 9px;
  font-family: 'Sora';
}
.legal h3 { font-size: 16.5px; font-weight: 700; margin: 22px 0 10px; }
.legal ul { margin: 0 0 18px 20px; display: grid; gap: 8px; }
.legal li { font-size: 14.5px; color: var(--ink-soft); line-height: 1.7; }
.legal a { color: var(--red-text); font-weight: 600; }
.legal a:hover { text-decoration: underline; }
.legal-table-wrap { overflow-x: auto; margin: 6px 0 18px; }
.legal table { width: 100%; border-collapse: collapse; background: var(--card); border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.legal th, .legal td { text-align: left; padding: 12px 16px; font-size: 14px; border-bottom: 1px solid var(--line); }
.legal th { font-family: 'Sora'; font-size: 12.5px; text-transform: uppercase; letter-spacing: .06em; color: var(--red-deep); background: var(--red-tint); }
.legal td { color: var(--ink-soft); }
.legal tr:last-child td { border-bottom: none; }

/* ── 404 page ────────────────────────────────────────────────────────── */
.err-hero { padding: 110px 0 120px; }
.err-code {
  font-family: 'Sora'; font-size: clamp(90px, 17vw, 190px); font-weight: 800; line-height: 1;
  /* Ends on --red, not --coral: coral is 2.57:1 on white and these are
     gradient-filled headings, so the tail of every word fell below the 3:1
     large-text minimum. --red is 4.83:1. */
  background: linear-gradient(100deg, var(--red-deep), var(--red-bright) 45%, var(--red));
  -webkit-background-clip: text; background-clip: text; color: transparent;
  margin-bottom: 6px; letter-spacing: -0.04em;
}

/* ── Blog article pages ───────────────────────────────────────── */
/* Used by the blog-<slug>.html pages that scripts/build-content.js writes.
   Deliberately mirrors the .legal type scale: both are long-form reading
   columns, and having one measure for prose beats inventing a second. */
.article-wrap { padding: 40px 0 90px; border-top: 1px solid var(--line); background: var(--bg-soft); }
.article-inner { max-width: 760px; }
.article-crumbs { font-size: 13px; margin-bottom: 18px; }
.article-crumbs a { color: var(--ink-soft); font-weight: 600; }
.article-crumbs a:hover { color: var(--red-text); text-decoration: underline; }
.article-wrap h1 { font-size: 38px; line-height: 1.18; letter-spacing: -0.03em; margin-bottom: 14px; }
.article-meta {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  font-size: 13.5px; color: var(--ink-faint); margin-bottom: 30px;
  padding-bottom: 22px; border-bottom: 1px solid var(--line);
}
.article-body p { font-size: 16px; color: var(--ink-soft); margin-bottom: 18px; line-height: 1.8; }
.article-body h2 { font-size: 24px; margin: 38px 0 14px; letter-spacing: -0.02em; }
.article-body h3 { font-size: 18px; font-weight: 700; margin: 28px 0 10px; }
.article-body a { color: var(--red-text); font-weight: 600; }
.article-body a:hover { text-decoration: underline; }
.article-body .article-list { margin: 0 0 20px 20px; display: grid; gap: 9px; }
.article-body li { font-size: 15.5px; color: var(--ink-soft); line-height: 1.75; }
.article-body strong { color: var(--ink); font-weight: 700; }
.article-body hr { border: none; border-top: 1px solid var(--line); margin: 34px 0; }
.article-body blockquote {
  margin: 24px 0; padding: 4px 0 4px 20px; border-left: 3px solid var(--red);
  font-size: 17px; line-height: 1.7; color: var(--ink); font-style: italic;
}
/* Wide content scrolls inside its own box rather than widening the page. */
.article-body pre {
  background: var(--card); border: 1px solid var(--line); border-radius: 12px;
  padding: 16px 18px; overflow-x: auto; margin: 0 0 20px;
}
.article-body pre code { font-size: 13.5px; line-height: 1.65; }
.article-body code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 13.5px; background: var(--red-tint); border-radius: 5px; padding: 1px 6px;
}
.article-body pre code { background: none; padding: 0; }
.article-body img { border-radius: 14px; margin: 6px 0 20px; }
.article-embed { margin: 26px 0; border-radius: 16px; overflow: hidden; }

@media (max-width: 700px) {
  .article-wrap h1 { font-size: 29px; }
  .article-body h2 { font-size: 21px; }
}

/* ==========================================================================
   RESPONSIVE
   Global breakpoint overrides. Component-scoped media queries stay with their component above.
   ========================================================================== */

/* ── Responsive ──────────────────────────────────────────────────────── */
@media (max-width: 980px) {
  .nav-links { display: none; }
  .bento { grid-template-columns: 1fr 1fr; }
  .spot-card.featured { grid-column: span 2; }
  .spot-card.wide { grid-column: span 2; flex-direction: column; align-items: flex-start; }
  .why-grid { grid-template-columns: 1fr 1fr; }
  .stat-strip { grid-template-columns: 1fr 1fr; }
  .foot-grid { grid-template-columns: 1fr 1fr; }
  .cta-inner { flex-direction: column; text-align: center; padding: 56px 32px; }
  .tab-panel.active { flex-direction: column; }
}
@media (max-width: 720px) { .founder-grid { grid-template-columns: 1fr; } }
@media (max-width: 620px) {
  .bento, .why-grid, .careers-grid { grid-template-columns: 1fr; }
  .spot-card.featured, .spot-card.wide { grid-column: span 1; }
  section { padding: 70px 0; }
  .hero { padding: 70px 0 60px; }
  .foot-grid { grid-template-columns: 1fr; gap: 36px; }
  .tab-btn { font-size: 12.5px; padding: 11px 4px; }
  .tab-panel { padding: 28px 24px; }
}

/* ==========================================================================
   MOTION PREFERENCES
   Everything that must stand still for prefers-reduced-motion.
   ========================================================================== */

/*
 * Single source of truth for reduced-motion. When you add an animation
 * anywhere above, add its counterpart here.
 *
 * Note the canvas backgrounds are NOT listed: they are handled in app.js, which
 * paints one static frame and then stops rather than hiding them outright.
 */
@media (prefers-reduced-motion: reduce) {

  /* Entrance and ambient animation — stop outright. */
  .hero .reveal,
  .aurora span,
  .beam-wrap::before,
  .announce a,
  .rotator .word,
  .sticker, .spinSlow, .orbit, .beat, .twinkle, .flame, .rocketBob,
  .tl, .term-ok, .caret,
  .mobile-nav.open,
  .embed-skeleton span { animation: none !important; }

  /* Marquees: fall back to a static wrapped row so all logos stay reachable. */
  .marquee-track { animation: none; flex-wrap: wrap; width: auto; justify-content: center; }
  .marquee { mask-image: none; -webkit-mask-image: none; }

  /* Hover/steady-state transitions that would otherwise slide. */
  .tab-ind, .founder-card { transition: none; }

  /* Previously missing from this block despite the note above. */
  html { scroll-behavior: auto; }
  .eyebrow .dot { animation: none; }
  .tab-panel.active { animation: none; }

  /* Logos are greyscale-until-hover; show them in colour immediately instead. */
  .logo-chip img { filter: none; opacity: 1; }
}