/* ============= Shared stylesheet for every mockup page =============
   Ported from home-E-smoke.html so every subpage inherits the same
   brand tokens, nav, footer, section shells, animated smoke bg, and
   typography without duplicating 500 lines per file. Page-specific
   overrides live in each page's own <style> block. */

:root {
  --teal: #2ecbb6;
  --teal-soft: rgba(46,203,182,0.14);
  --ink: #0a0a0a;
  --paper: #efeae0;
  --paper-2: #e5dfd1;
  --line-dark: rgba(255,255,255,0.08);
  --line-light: rgba(0,0,0,0.08);
  --dim-on-dark: #ffffff;
  --dim-on-light: #0a0a0a;   /* body copy on light sections reads black */
  --muted-on-light: #6b6b6b;
}
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
html, body {
  margin: 0; padding: 0;
  overflow-x: hidden;   /* never allow horizontal scroll on any viewport */
  font-family: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
  color: #fff; background: var(--ink);
}
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
section { position: relative; }

/* ============= Sticky nav ============= */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px 44px;
  background: rgba(10,10,10,0.55);
  backdrop-filter: saturate(1.2) blur(14px);
  -webkit-backdrop-filter: saturate(1.2) blur(14px);
  border-bottom: 1px solid rgba(255,255,255,0.06);
  font-size: 14.5px; letter-spacing: 0.2px;
  transition: background 220ms, color 220ms, border-color 220ms;
}
.nav.on-light {
  background: rgba(239,234,224,0.72);
  color: var(--ink);
  border-bottom-color: rgba(0,0,0,0.06);
}
.nav.on-light .brand,
.nav.on-light .nav-links a { color: var(--ink); }
.nav.on-light .cta { color: var(--ink); border-color: var(--teal); }
.brand {
  display: inline-flex; align-items: center; height: 52px;
  font-weight: 900; letter-spacing: -0.3px; font-size: 16px; color: #fff;
}
.brand-img { height: 100%; width: auto; display: block; }
.brand-light { display: none; }
.nav.on-light .brand-dark { display: none; }
.nav.on-light .brand-light { display: block; }
.nav-links {
  list-style: none; display: flex; gap: 26px; padding: 0; margin: 0;
  font-weight: 500;
  align-items: flex-start;  /* all nav items top-aligned */
}
.nav-links a { opacity: 1; }
.nav-links a:hover { color: var(--teal); }
/* Active nav link (the page you are currently on). A soft light teal
   so you can see where you are without competing with the brand teal. */
.nav-links a.active,
.nav-links a.active .l2 { color: var(--teal); }
.nav.on-light .nav-links a.active,
.nav.on-light .nav-links a.active .l2 { color: #0e747a; }
/* Systems nav items - stacked two lines, same size, same colour,
   horizontally centred within their own container. */
.nav-links a.two-line {
  display: inline-flex; flex-direction: column;
  line-height: 1.15;
  text-align: center;
  align-items: center;
}
.nav-links a.two-line .l2 { color: inherit; opacity: 1; font-size: inherit; letter-spacing: inherit; margin-top: 1px; }
.cta {
  padding: 10px 18px; border: 1px solid var(--teal); border-radius: 999px;
  color: #fff; font-weight: 600; font-size: 14.5px;
  transition: background .2s, color .2s, border-color .2s;
  white-space: nowrap;
}
.cta:hover { background: var(--teal); color: #001915; border-color: var(--teal); }

/* Middle column of the nav: menu-links row on top, ask-AI bar underneath. */
.nav-center {
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 10px;
  flex: 1 1 auto;
  min-width: 0;
}

/* Services dropdown trigger + panel */
.nav-dropdown { position: relative; }
.nav-dropdown-trigger {
  background: none; border: none; color: inherit;
  font: inherit; font-weight: 500; letter-spacing: inherit;
  cursor: pointer; padding: 0;
  display: inline-flex; align-items: center; gap: 4px;
  transition: color .18s;
}
.nav-dropdown-trigger:hover,
.nav-dropdown-trigger:focus-visible { color: var(--teal); outline: none; }
.nav-dropdown-trigger.active { color: #8adfd0; }
.nav.on-light .nav-dropdown-trigger.active { color: #4a988a; }
.nav-dropdown-trigger .caret { font-size: 0.85em; line-height: 1; transition: transform .18s; }
.nav-dropdown:hover .nav-dropdown-trigger .caret,
.nav-dropdown.open .nav-dropdown-trigger .caret { transform: rotate(-180deg); }
.nav-dropdown-menu {
  position: absolute; top: 100%; left: 50%;
  transform: translateX(-50%) translateY(6px);
  min-width: 300px;
  list-style: none; padding: 8px 0; margin: 0;
  background: rgba(10,10,10,0.94);
  border: 1px solid rgba(46,203,182,0.28);
  border-radius: 12px;
  box-shadow: 0 16px 40px rgba(0,0,0,0.55);
  opacity: 0; visibility: hidden;
  transition: opacity .18s, visibility .18s, transform .18s;
  z-index: 200;
}
.nav.on-light .nav-dropdown-menu {
  background: rgba(239,234,224,0.96);
  border-color: rgba(0,0,0,0.14);
}
.nav-dropdown:hover .nav-dropdown-menu,
.nav-dropdown:focus-within .nav-dropdown-menu,
.nav-dropdown.open .nav-dropdown-menu {
  opacity: 1; visibility: visible;
  transform: translateX(-50%) translateY(2px);
}
.nav-dropdown-menu li { margin: 0; }
.nav-dropdown-menu a {
  display: block; padding: 10px 18px;
  color: inherit; white-space: nowrap;
  font-weight: 500; letter-spacing: 0.1px;
}
.nav-dropdown-menu a:hover,
.nav-dropdown-menu a.active { color: var(--teal); background: rgba(46,203,182,0.08); }
.nav.on-light .nav-dropdown-menu a:hover,
.nav.on-light .nav-dropdown-menu a.active { background: rgba(14,116,122,0.08); }

/* Ask-AI input in the header (below menu-links row) */
.nav-ask {
  width: min(40vw, 560px);
  margin: 0;
}
.nav-ask-input {
  width: 100%;
  background: rgba(0,0,0,0.35);
  color: #fff;
  border: 3.5px solid var(--teal);
  border-radius: 999px;
  padding: 8px 18px;
  font: inherit; font-size: 15px;
  outline: none;
  animation: nav-ask-pulse 2.6s ease-in-out infinite;
  transition: background .2s;
}
.nav-ask-input::placeholder { color: rgba(255,255,255,0.65); }
.nav.on-light .nav-ask-input {
  background: rgba(255,255,255,0.7);
  color: var(--ink);
  border-color: var(--teal);
}
.nav.on-light .nav-ask-input::placeholder { color: rgba(0,0,0,0.55); }
.nav-ask-input:focus { animation: none; border-color: #7fe8dd; box-shadow: 0 0 0 3px rgba(46,203,182,0.18); }
@keyframes nav-ask-pulse {
  0%, 100% {
    border-color: #7fe8dd;
    box-shadow: 0 0 14px rgba(127,232,221,0.35);
  }
  50% {
    border-color: #1f8f80;
    box-shadow: 0 0 6px rgba(31,143,128,0.15);
  }
}
@media (prefers-reduced-motion: reduce) {
  .nav-ask-input { animation: none; }
}

/* Mobile menu button (hamburger) - hidden on desktop */
.nav-toggle { display: none; background: none; border: none; color: #fff; padding: 8px; cursor: pointer; }
.nav-toggle svg { display: block; }
/* "Home" link appears only inside the mobile menu (desktop uses the logo). */
.nav-mobile-home { display: none; }
.nav.mobile-open .nav-mobile-home { display: block; }
@media (max-width: 900px) {
  /* Subpage sections use the same tighter side padding as the home page
     on mobile (was staying at the desktop 44px, making subpages denser
     than home and overflowing the card grids on narrow phones). */
  .sec { padding: 88px 22px; }

  /* Two-row header: brand + hamburger on top, the always-present ask-AI
     search bar underneath. Menu links live in the hamburger dropdown. */
  .nav { flex-wrap: wrap; row-gap: 12px; padding: 14px 20px; }
  .cta { display: none; }                        /* booking CTA: desktop only */
  .brand { order: 1; height: 44px; }
  .nav-toggle { display: inline-flex; order: 2; }

  /* Row 2: ask-AI bar, always visible, faded-teal field. */
  .nav-center {
    display: flex; order: 3; width: 100%; flex: none;
    flex-direction: column; gap: 0; align-items: stretch;
  }
  .nav-ask { width: 100%; margin: 0; }
  .nav-ask-input { background: rgba(46,203,182,0.15); border-width: 2px; }
  .nav.on-light .nav-ask-input { background: rgba(46,203,182,0.18); }

  /* Links hidden until the hamburger opens them as a dropdown below the
     whole header. */
  .nav-links { display: none; }
  .nav.mobile-open .nav-links {
    display: flex; flex-direction: column; align-items: center; gap: 0;
    width: 100%;
    position: absolute; top: 100%; left: 0; right: 0;
    background: rgba(10,10,10,0.96); padding: 14px 0;
    border-bottom: 1px solid rgba(255,255,255,0.06);
  }
  .nav.on-light.mobile-open .nav-links {
    background: rgba(239,234,224,0.98);
    border-bottom-color: rgba(0,0,0,0.08);
  }
  .nav.mobile-open .nav-links a,
  .nav.mobile-open .nav-dropdown-trigger { padding: 12px 20px; font-size: 16px; }
  /* Block so every item's vertical padding builds even row spacing (inline
     links were collapsing, making the lower items look tighter). */
  .nav.mobile-open .nav-links a { display: block; }

  /* Services: centred like the other items (not left-aligned), collapsed by
     default, expands only when tapped (JS adds .open). */
  .nav.mobile-open .nav-dropdown {
    width: 100%; display: flex; flex-direction: column; align-items: center;
  }
  .nav.mobile-open .nav-dropdown-menu {
    position: static; opacity: 1; visibility: visible;
    transform: none; box-shadow: none; border: none; background: transparent;
    min-width: 0; padding: 0; text-align: center;
    max-height: 0; overflow: hidden; transition: max-height .28s ease;
  }
  .nav.mobile-open .nav-dropdown.open .nav-dropdown-menu {
    max-height: 260px; padding: 4px 0 6px;
  }
  .nav.mobile-open .nav-dropdown-menu a { padding: 8px 20px; font-size: 14px; opacity: 0.85; white-space: normal; }
}

/* ============= Mobile CTA policy =============
   On mobile the ONLY call-to-action button is the sticky "Book Discovery
   Call" pill beside the chat FAB. Every in-page marketing button is hidden.
   Functional buttons (form submit, chat send, nav toggle) are untouched. */
.mobile-book { display: none; }
@media (max-width: 767px) {
  .btn-primary, .partner-cta, .book-cta { display: none !important; }
  .mobile-book {
    display: inline-flex; align-items: center; justify-content: center;
    position: fixed; z-index: 499;
    left: 16px; right: 132px; bottom: 40px;
    height: 54px; padding: 0 16px;
    background: var(--teal); color: #001915;
    border-radius: 999px;
    font-weight: 800; font-size: 15px; letter-spacing: 0.3px;
    white-space: nowrap;
    box-shadow: 0 8px 26px rgba(46,203,182,0.42), 0 4px 12px rgba(0,0,0,0.4);
  }
  .mobile-book:active { transform: translateY(1px); }
}
@media (max-width: 640px) {
  .mobile-book { right: 118px; bottom: 34px; }
}

/* ============= Section shell ============= */
.sec { position: relative; z-index: 0; padding: 128px 44px; }
.sec.dark { background: var(--ink); color: #fff; }
.sec.light { background: var(--paper); color: var(--ink); --teal: #0e747a; }
.container { position: relative; z-index: 1; max-width: 1240px; margin: 0 auto; }
canvas.smoke-bg {
  position: absolute; top: 0; left: 0; width: 100%; height: 100%;
  z-index: -1; pointer-events: none;
}

/* ============= Typography ============= */
h1, h2, h3, h4 { font-family: 'Inter', sans-serif; }

/* Small section eyebrow / label (uppercase teal, 17px). This is the
   smallest font used anywhere on the site - per Curtis's spec. */
.eyebrow {
  display: inline-block;
  font-size: 17px; font-weight: 700;
  letter-spacing: 2.5px; text-transform: uppercase;
  color: var(--teal);
  margin: 0 0 24px;
  line-height: 1.35;
}

/* Page hero - matches the home page hero. Fills the viewport (100vh)
   on desktop so no lower section is visible on page load. H1 uses the
   typing effect (see typing keyframes below); the lead paragraph fades
   in AFTER the H1 finishes typing (JS handles the sequencing). */
.page-hero {
  /* Centre the hero content in the area BELOW the fixed nav (nav is ~88px
     tall) rather than the full viewport. padding-top reserves the nav
     row; padding-bottom is 0 so the flex-centre lands halfway between the
     nav's bottom edge and the viewport's bottom edge. */
  padding: 88px 44px 0;
  min-height: 100vh;
  display: flex; flex-direction: column;
  align-items: center; justify-content: safe center;
  text-align: center;
  gap: 44px;
  overflow: visible;
}
.page-hero h1 {
  font-family: 'Inter', sans-serif;
  font-size: clamp(28px, 4.6vw, 64px);
  font-weight: 800; letter-spacing: -1.6px; line-height: 1.08;
  margin: 0;
  color: #fff;
  max-width: 1080px;
  padding: 0 16px;
  /* Hidden until the typing script rebuilds the innerHTML - prevents a
     flash of the fallback text on first paint. */
  opacity: 0;
}
.page-hero h1.built { opacity: 1; }
.page-hero h1 .accent { color: var(--teal); }

.page-hero .lead {
  margin: 0 auto;
  max-width: 720px;
  font-size: clamp(16px, 1.35vw, 21px);
  line-height: 1.55;
  color: #fff;
  text-wrap: balance;
  padding: 0 16px;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 2000ms ease-out, transform 2000ms ease-out;
}
.page-hero .lead.visible { opacity: 1; transform: translateY(0); }

/* Typing effect for hero H1 - matches home page (chat.output.systems
   TypingHeading.tsx). Each char span fades in via its own animation-
   delay computed at build time by the typing script. */
@keyframes typing-char-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.typing-char { opacity: 0; }
.typing-active .typing-char {
  animation-name: typing-char-fade-in;
  animation-duration: 160ms;
  animation-timing-function: ease-out;
  animation-fill-mode: forwards;
}

/* Reduced-motion users skip the typing + fade sequence entirely. */
@media (prefers-reduced-motion: reduce) {
  .page-hero h1 { opacity: 1 !important; }
  .typing-char { opacity: 1 !important; animation: none !important; }
  .page-hero .lead { opacity: 1 !important; transform: none !important; }
}

/* Mobile: headline + lead sit as one centred group within a single screen
   (same as the home page hero). The lead stays in the viewport but hidden
   until the visitor starts scrolling, then fades in (JS handles the reveal). */
@media (max-width: 767px) {
  .page-hero {
    /* Top-align the hero content below the two-row mobile nav so the
       headline is never hidden behind it, no matter how much the hero
       holds (some heroes have a CTA row / eyebrow, some just h1 + lead). */
    justify-content: flex-start;
    padding-top: 40vh;   /* headline sits ~40% down the viewport on load */
    padding-bottom: 48px;
    gap: clamp(24px, 4vh, 48px);
  }
  .page-hero h1 { font-size: clamp(38px, 10vw, 60px); letter-spacing: -1.5px; }
  .page-hero .lead { font-size: 18px; line-height: 1.6; padding: 0; max-width: 80vw; }
}

/* Section headings (h2) - big weight, teal accent word */
h2.section-h {
  font-family: 'Inter', sans-serif;
  font-size: clamp(36px, 4.6vw, 64px);
  font-weight: 800; letter-spacing: -1.8px; line-height: 1.08;
  margin: 0 0 24px;
  max-width: 900px;
  text-wrap: balance;
}
h2.section-h .accent { color: var(--teal); }

/* Body paragraph — same size and line-height as the hero subhead. */
.body-p {
  font-family: 'Inter', sans-serif;
  font-size: clamp(16px, 1.35vw, 21px);
  line-height: 1.55;
  margin: 0 auto 20px;
  max-width: 720px;
  text-wrap: balance;
}
.sec.dark .body-p { color: #fff; }
.sec.light .body-p { color: var(--dim-on-light); }

/* ============= Site footer (ported from ai.output.systems) ============= */
.site-footer {
  position: relative; z-index: 10;
  background: var(--ink); color: #fff;
  border-top: 1px solid rgba(46,203,182,0.08);
  padding: 64px 44px 160px;
}
.site-footer-inner {
  max-width: 1240px; margin: 0 auto;
  display: flex; flex-direction: column;
  gap: 48px;
}
.site-footer-brand { display: flex; flex-direction: column; gap: 16px; }
.site-footer-logo img { height: 64px; width: auto; display: block; }
.site-footer-copy {
  font-size: 15px; line-height: 1.6; margin: 0; color: #fff;
}
.site-footer-nav {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-direction: column; gap: 12px;
}
.site-footer-nav a {
  color: #fff; white-space: nowrap; font-size: 16px;
  transition: color .2s;
}
.site-footer-nav a:hover { color: var(--teal); }
@media (min-width: 768px) {
  /* Three columns aligned to the top: brand + two vertical menu lists.
     The nav lists stay in column mode on every screen — that fixes the
     horizontal overflow that came from packing 9 wide labels on one row. */
  .site-footer-inner {
    flex-direction: row; align-items: flex-start; justify-content: space-between;
    gap: 64px;
  }
}

/* ============= Chat widget (bottom-right pill + expandable panel) ============= */
.chat-fab {
  position: fixed; bottom: 22px; right: 22px; z-index: 500;
  width: 102px; height: 102px; border-radius: 50%;
  background: var(--teal); color: #001915;
  border: none; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 8px 26px rgba(46,203,182,0.35), 0 4px 12px rgba(0,0,0,0.45);
  transition: transform .2s;
  animation: chat-fab-pulse 2.6s ease-in-out infinite;
}
.chat-fab:hover { transform: translateY(-2px) scale(1.03); box-shadow: 0 12px 32px rgba(46,203,182,0.5), 0 6px 18px rgba(0,0,0,0.55); }
.chat-fab svg { width: 45px; height: 45px; }
.chat-fab.hidden { display: none; }
@keyframes chat-fab-pulse {
  0%, 100% {
    background: #2ecbb6;
    box-shadow: 0 8px 26px rgba(46,203,182,0.35), 0 4px 12px rgba(0,0,0,0.45);
  }
  50% {
    background: #7fe8dd;
    box-shadow: 0 10px 34px rgba(127,232,221,0.65), 0 4px 12px rgba(0,0,0,0.45);
  }
}
@media (prefers-reduced-motion: reduce) {
  .chat-fab { animation: none; }
}

.chat-panel {
  position: fixed; bottom: 22px; right: 22px; z-index: 501;
  width: min(400px, calc(100vw - 32px));
  height: min(600px, calc(100vh - 44px));
  background: #0d0d0d;
  border: 2px solid rgba(46,203,182,0.62);
  border-radius: 16px;
  box-shadow:
    0 24px 70px rgba(0,0,0,0.7),
    0 12px 30px rgba(0,0,0,0.5),
    0 0 44px rgba(46,203,182,0.28);
  display: none;
  flex-direction: column;
  overflow: hidden;
  color: #fff;
  font-family: 'Inter', sans-serif;
}
.chat-panel.open { display: flex; }
.chat-header {
  padding: 16px 20px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  display: flex; align-items: center; justify-content: space-between;
  background: linear-gradient(180deg, rgba(46,203,182,0.06), transparent);
}
.chat-header-title {
  font-weight: 700; font-size: 15px; letter-spacing: 0.2px;
  display: flex; align-items: center; gap: 10px;
}
.chat-status-dot {
  width: 8px; height: 8px; border-radius: 50%; background: var(--teal);
  box-shadow: 0 0 8px rgba(46,203,182,0.8);
}
.chat-close {
  background: none; border: none; color: rgba(255,255,255,0.7);
  cursor: pointer; padding: 4px; border-radius: 4px;
  transition: color .2s, background .2s;
}
.chat-close:hover { color: #fff; background: rgba(255,255,255,0.06); }
.chat-messages {
  flex: 1; overflow-y: auto;
  padding: 20px;
  display: flex; flex-direction: column; gap: 12px;
  scroll-behavior: smooth;
}
.chat-messages::-webkit-scrollbar { width: 8px; }
.chat-messages::-webkit-scrollbar-track { background: transparent; }
.chat-messages::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.1); border-radius: 4px; }
.chat-msg {
  padding: 12px 16px; border-radius: 14px;
  font-size: 14.5px; line-height: 1.45;
  max-width: 82%;
  word-wrap: break-word;
}
.chat-msg.bot {
  background: rgba(255,255,255,0.06);
  color: rgba(255,255,255,0.94);
  align-self: flex-start;
  border-bottom-left-radius: 4px;
}
.chat-msg.user {
  background: var(--teal); color: #001915;
  align-self: flex-end;
  border-bottom-right-radius: 4px;
  font-weight: 500;
}
/* Bot answers reveal top-to-bottom: a soft gradient mask slides down the
   message while it fades in (not a typing effect). */
.chat-msg.bot.chat-reveal {
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 33%, transparent 66%);
          mask-image: linear-gradient(to bottom, #000 0%, #000 33%, transparent 66%);
  -webkit-mask-size: 100% 300%;
          mask-size: 100% 300%;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  animation: chat-msg-reveal 1400ms ease-out;
}
@keyframes chat-msg-reveal {
  from { -webkit-mask-position: 0 100%; mask-position: 0 100%; opacity: 0; }
  to   { -webkit-mask-position: 0 0;    mask-position: 0 0;    opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .chat-msg.bot.chat-reveal { animation: none; -webkit-mask-image: none; mask-image: none; }
}
.chat-msg.typing {
  display: inline-flex; gap: 4px; padding: 14px 18px;
  background: rgba(255,255,255,0.06); border-radius: 14px;
  align-self: flex-start;
}
.chat-msg.typing span {
  width: 6px; height: 6px; border-radius: 50%;
  background: rgba(255,255,255,0.6);
  animation: chat-typing-bounce 1.2s infinite ease-in-out;
}
.chat-msg.typing span:nth-child(2) { animation-delay: 0.2s; }
.chat-msg.typing span:nth-child(3) { animation-delay: 0.4s; }
@keyframes chat-typing-bounce {
  0%, 60%, 100% { transform: translateY(0); opacity: 0.4; }
  30% { transform: translateY(-6px); opacity: 1; }
}
.chat-input-row {
  padding: 14px 16px 16px;
  border-top: 1px solid rgba(255,255,255,0.06);
  display: flex; gap: 10px; align-items: flex-end;
  background: rgba(0,0,0,0.3);
}
.chat-input {
  flex: 1;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 10px;
  padding: 10px 14px;
  color: #fff;
  font-family: inherit; font-size: 14.5px;
  outline: none;
  resize: none;
  min-height: 40px; max-height: 120px;
}
.chat-input:focus { border-color: rgba(46,203,182,0.5); }
.chat-send {
  background: var(--teal); color: #001915;
  border: none; border-radius: 10px;
  padding: 10px 14px; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: transform .1s, background .2s;
}
.chat-send:hover:not(:disabled) { transform: translateY(-1px); }
.chat-send:disabled { opacity: 0.5; cursor: not-allowed; }

/* Smaller mobile chat */
@media (max-width: 640px) {
  .chat-panel {
    width: calc(100vw - 16px);
    height: calc(100vh - 32px);
    bottom: 8px; right: 8px;
    border-radius: 14px;
  }
  .chat-fab { width: 90px; height: 90px; bottom: 16px; right: 16px; }
  .chat-fab svg { width: 40px; height: 40px; }
}

/* Utilities */
.text-center { text-align: center; }
.grid { display: grid; }
.stack-vert { display: flex; flex-direction: column; }
.hero-glow::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(ellipse 800px 500px at 20% 30%, rgba(46,203,182,0.10), transparent 60%),
    radial-gradient(ellipse 700px 500px at 100% 100%, rgba(46,203,182,0.06), transparent 60%);
  z-index: -2;
}

/* Reduced motion — kill animations, keep content visible */
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
  html { scroll-behavior: auto; }
}