@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&display=swap');

/* ==========================================================================
   EINEVA Labs — shared stylesheet
   --------------------------------------------------------------------------
   UI language inherited from the NexusAI Bootstrap 5 build:

     · token-driven dark surfaces (--color-bg / -elevated / -card / -sunken)
     · a single brand gradient reused by buttons, icons, dividers and numbers
     · an 8 / 12 / 18 / 26px radius scale instead of ad-hoc corners
     · a fixed, blurred, always-visible navbar with a scroll state
     · cards that lift 3px and glow on hover, never restyle per page
     · scroll-reveal motion (`.rv` / `.in`, driven by loader.js)
     · numbered step markers, gradient text figures, uppercase micro-labels

   The palette is untouched: #0b0b10 base, #ef4444 primary, #2dd4bf accent.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Reset
   -------------------------------------------------------------------------- */

*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

/* Bootstrap reboot compensation.
   The `*` reset above has specificity (0,0,0) while Bootstrap's reboot styles
   bare elements at (0,0,1), so it outranks the reset no matter which file
   loads last. Vendoring Bootstrap therefore silently changes every page:
     p      gains margin-bottom: 1rem
     ul     gains padding-left: 2rem
     h1-h6  gain font-weight: 500, line-height: 1.2 and a white colour
   These rules are element-level too, so they load after bootstrap.min.css
   and win on source order, restoring the zero-margin baseline the page
   markup is authored against. Class rules elsewhere in this file always
   outrank them. `line-height: inherit` / `color: inherit` hand the property
   back to inheritance rather than restoring a literal value.
   Do not remove this block. */
address, blockquote, caption, dd, dl, ol, ul,
fieldset, figure, hr, kbd, legend, p, pre, table, th, td {
  margin: 0;
  padding: 0;
}

h1, h2, h3, h4, h5, h6 {
  margin: 0;
  padding: 0;
  color: inherit;
  font-weight: 700;
  line-height: inherit;
}

b, strong { font-weight: 700; }

a { color: inherit; text-decoration: none; }
img, svg, video { display: block; max-width: 100%; }
.hidden, [hidden] { display: none !important; }

/* Available to assistive tech, invisible on screen. */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* --------------------------------------------------------------------------
   2. Tokens
   --------------------------------------------------------------------------
   Split in two. The first block is the brand: colours, gradients, radii,
   motion. It is identical in both themes and never overridden.

   The second block is the theme: every neutral surface, text tone, border,
   shadow and chrome colour the components actually consume. Components only
   ever reference these, never a literal, so switching themes is a matter of
   redefining this one block — see 2b for the light theme.
   -------------------------------------------------------------------------- */
:root {
  --close-btn-filter: invert(1) grayscale(100%) brightness(200%);
  --font-heading: 'Space Grotesk', -apple-system, sans-serif;
  --font-body:    'Space Grotesk', -apple-system, sans-serif;
  --font-mono:    'Fira Code', 'JetBrains Mono', 'SF Mono', monospace;

  /* --- Brand: fixed in both themes --- */
  --color-red:        #ef4444;
  --color-red-bright: #f87171;
  --color-red-deep:   #dc2626;
  --color-red-dim:    rgba(239, 68, 68, 0.12);
  --color-red-dim-strong: rgba(239, 68, 68, 0.16);
  --color-red-glow:   rgba(239, 68, 68, 0.35);
  --color-red-border: rgba(239, 68, 68, 0.25);

  --color-teal:      #2dd4bf;
  --color-teal-dim:  rgba(45, 212, 191, 0.12);
  --color-teal-bd:   rgba(45, 212, 191, 0.25);

  --color-amber:      #eab308;
  --color-amber-dim:  rgba(234, 179, 8, 0.1);
  --color-amber-bd:   rgba(234, 179, 8, 0.2);
  --color-amber-text: #fbbf24;
  --color-amber-soft: rgba(234, 179, 8, 0.4);

  --color-green:        #25D366;
  --color-green-hover:  #1da851;
  --color-green-glow:   rgba(37, 211, 102, 0.25);

  /* Brand gradients — the single accent system, reused everywhere */
  --grad:       linear-gradient(135deg, #ef4444, #dc2626);
  --grad-hover: linear-gradient(135deg, #f87171, #ef4444);
  --grad-accent: linear-gradient(135deg, #ef4444, #2dd4bf);

  /* Same hue family, one step deeper, for any filled control that carries a
     small text label. Drives buttons and form submits, never display type. */
  --grad-fill:       linear-gradient(135deg, #dc2626, #b91c1c);
  --grad-fill-hover: linear-gradient(135deg, #b91c1c, #991b1b);

  /* Radius scale */
  --radius-sm:   8px;
  --radius-md:   12px;
  --radius-lg:   18px;
  --radius-xl:   26px;
  --radius-pill: 999px;

  /* Layout */
  --nav: 68px;
  --section-gap: 64px;
  --shell: 1160px;
  --shell-pad: 2rem;

  /* Motion */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --dur: 0.3s;

  /* --- Theme roles: the dark theme (default) --- */
  --color-bg:          #0b0b10;   /* page */
  --color-bg-elevated: #12121a;   /* raised chrome */
  --color-bg-card:     rgba(255, 255, 255, 0.03);
  --color-bg-hover:    rgba(255, 255, 255, 0.055);
  --color-bg-sunken:   rgba(0, 0, 0, 0.28);

  --color-text:       #e8e8ef;    /* body copy */
  --color-text-dim:   #9ca3af;    /* secondary copy */
  --color-text-muted: #7d8595;    /* micro-labels, footnotes */
  --color-heading:    #ffffff;    /* titles and figures */
  --color-on-brand:   #ffffff;    /* text sitting on a brand fill */

  --color-border:       rgba(255, 255, 255, 0.06);
  --color-border-hover: rgba(255, 255, 255, 0.12);

  /* Chrome */
  --color-nav:        rgba(11, 11, 16, 0.78);
  --color-nav-solid:  rgba(11, 11, 16, 0.98);
  --color-nav-scrolled: rgba(11, 11, 16, 0.94);
  --color-nav-text:   #e6eaf0;
  --color-brand-text: #f0f2f5;
  --color-icon:       #c0c8d0;
  --color-placeholder: #565b66;
  --color-scrollbar:  #2a2a35;
  --color-scrollbar-hover: #3f3f50;
  --color-selection:  rgba(239, 68, 68, 0.85);
  --color-separator:  #444;

  /* Shadows: on a dark page they read as lift, not as a black outline. */
  --shadow-nav:   0 4px 28px rgba(0, 0, 0, 0.4);
  --shadow-card:  0 16px 50px rgba(0, 0, 0, 0.28);
  --shadow-panel: 0 24px 60px rgba(0, 0, 0, 0.5);
  --shadow-fab:   0 10px 30px rgba(0, 0, 0, 0.45);
  --shadow-fab-hover: 0 14px 34px rgba(0, 0, 0, 0.5);
  --shadow-drop:  0 20px 50px rgba(239, 68, 68, 0.22);
  --shadow-drop-soft: 0 14px 36px rgba(239, 68, 68, 0.2);
  --shadow-drop-lg: 0 28px 70px rgba(0, 0, 0, 0.5);
  --shadow-drop-lg-hover: 0 34px 88px rgba(0, 0, 0, 0.55);
  --shadow-card-inset: 0 12px 40px rgba(0, 0, 0, 0.25);

  /* Ambient light behind the page */
  --aurora: radial-gradient(680px circle at 10% -8%,  rgba(239, 68, 68, 0.15), transparent 68%),
            radial-gradient(560px circle at 94% 6%,   rgba(45, 212, 191, 0.08), transparent 68%),
            radial-gradient(720px circle at 48% 110%, rgba(239, 68, 68, 0.07), transparent 70%);
  --grain-opacity: 0.022;
}

/* --------------------------------------------------------------------------
   2b. Light theme
   --------------------------------------------------------------------------
   Applied as a class on <html> by assets/loader.js, the same mechanism the
   NexusAI build uses. Only the neutral roles move: the red/teal/amber brand
   is untouched, so the site keeps its identity in both themes. Shadows are
   retuned rather than dropped, because a card that only changes colour
   reads as flat on a light page.
   -------------------------------------------------------------------------- */
.lm {
  --close-btn-filter: none;
  --color-bg:          #f7f7fa;
  --color-bg-elevated: #ffffff;
  --color-bg-card:     #ffffff;
  --color-bg-hover:    #f1f1f6;
  --color-bg-sunken:   #f4f4f8;

  --color-text:       #1c1c26;
  --color-text-dim:   #55556a;
  --color-text-muted: #6b6b82;
  --color-heading:    #0b0b14;
  --color-on-brand:   #ffffff;

  --color-border:       rgba(11, 11, 16, 0.09);
  --color-border-hover: rgba(11, 11, 16, 0.16);

  --color-nav:        rgba(255, 255, 255, 0.82);
  --color-nav-solid:  rgba(255, 255, 255, 0.98);
  --color-nav-scrolled: rgba(255, 255, 255, 0.94);
  --color-nav-text:   #1c1c26;
  --color-brand-text: #0b0b14;
  --color-icon:       #4a4a5e;
  --color-placeholder: #9a9aad;
  --color-scrollbar:  #d3d3dd;
  --color-scrollbar-hover: #b9b9c7;
  --color-selection:  rgba(239, 68, 68, 0.85);
  --color-separator:  #c2c2ce;

  /* Brand fills need a deeper red on white to hold their contrast. */
  --color-red:        #dc2626;
  --color-red-bright: #b91c1c;
  --color-red-dim:    rgba(239, 68, 68, 0.09);
  --color-red-dim-strong: rgba(220, 38, 38, 0.13);
  --color-red-glow:   rgba(239, 68, 68, 0.22);
  --color-red-border: rgba(220, 38, 38, 0.28);
  --color-amber-text: #a16207;
  --color-amber-dim:  rgba(234, 179, 8, 0.12);
  --color-amber-soft: rgba(180, 120, 6, 0.55);

  --grad-fill:       linear-gradient(135deg, #b91c1c, #991b1b);
  --grad-fill-hover: linear-gradient(135deg, #991b1b, #7f1d1d);

  --shadow-nav:   0 4px 24px rgba(11, 11, 16, 0.07);
  --shadow-card:  0 14px 38px rgba(11, 11, 16, 0.1);
  --shadow-panel: 0 24px 60px rgba(11, 11, 16, 0.16);
  --shadow-fab:   0 8px 24px rgba(11, 11, 16, 0.18);
  --shadow-fab-hover: 0 12px 30px rgba(11, 11, 16, 0.22);
  --shadow-drop:  0 18px 44px rgba(220, 38, 38, 0.18);
  --shadow-drop-soft: 0 12px 30px rgba(220, 38, 38, 0.16);
  --shadow-drop-lg: 0 24px 56px rgba(11, 11, 16, 0.16);
  --shadow-drop-lg-hover: 0 28px 64px rgba(11, 11, 16, 0.18);
  --shadow-card-inset: 0 10px 30px rgba(11, 11, 16, 0.08);

  --aurora: radial-gradient(680px circle at 10% -8%,  rgba(239, 68, 68, 0.1), transparent 68%),
            radial-gradient(560px circle at 94% 6%,   rgba(45, 212, 191, 0.07), transparent 68%),
            radial-gradient(720px circle at 48% 110%, rgba(239, 68, 68, 0.05), transparent 70%);
  --grain-opacity: 0.014;
}

/* --------------------------------------------------------------------------
   3. Bootstrap remap
   Bootstrap 5.3.8 is vendored in assets/vendor/ and linked before this file,
   so everything here wins the cascade. Bootstrap supplies the grid, reboot
   and spacing utilities; all colour and surface styling is remapped onto the
   tokens above.
   -------------------------------------------------------------------------- */
:root {
  --bs-body-bg: var(--color-bg);
  --bs-body-color: var(--color-text);
  --bs-body-font-family: var(--font-body);
  --bs-border-color: var(--color-border);
  --bs-link-color: var(--color-red);
  --bs-link-hover-color: var(--color-red-bright);
  --bs-link-color-rgb: 239, 68, 68;
  --bs-link-hover-color-rgb: 248, 113, 113;
  --bs-emphasis-color: var(--color-text);
  --bs-secondary-color: var(--color-text-dim);
  --bs-secondary-bg: var(--color-bg-card);
  --bs-tertiary-color: var(--color-text-muted);
  --bs-heading-color: var(--color-heading);
  --bs-emphasis-color-rgb: 232, 232, 239;
}

/* .container is deliberately NOT remapped here: it is the body wrapper on
   all ten pages, and the "Page shell" rule below declares max-width in this
   later-loading file. Media queries add no specificity, so that rule beats
   Bootstrap's 1320px at every viewport width. */

/* --------------------------------------------------------------------------
   4. Page shell
   -------------------------------------------------------------------------- */
html {
  scroll-behavior: smooth;
  /* keep in-page anchor targets clear of the fixed topbar */
  scroll-padding-top: calc(var(--nav) + 24px);
}

body {
  font-family: var(--font-body);
  background: var(--color-bg);
  color: var(--color-text);
  min-height: 100vh;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Ambient aurora — the blurred brand light behind every page. */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background: var(--aurora);
}

/* Film grain, so the large flat gradients never band. */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: var(--grain-opacity);
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-repeat: repeat;
  background-size: 256px 256px;
}

.container {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: var(--shell);
  margin: 0 auto;
  padding: calc(var(--nav) + 3.5rem) var(--shell-pad) 4.5rem;
  /* `both` so the entrance survives with JavaScript disabled. */
  animation: shellIn 0.8s var(--ease) 0.05s both;
}

/* Bootstrap pulls every .row out by half its gutter so the columns' own
   padding becomes the gap. That negative margin assumes the container's
   padding equals the gutter. Ours is responsive, and a large gutter such as
   g-5 (3rem) is wider than the padding at 480px, which would push the row
   past the viewport edge and open a horizontal scrollbar. Clamping the pull
   to the padding keeps full-bleed rows flush with the shell at every width
   while leaving the wide desktop gutter intact. */
.row {
  margin-right: max(calc(-0.5 * var(--bs-gutter-x, 1.5rem)), calc(-1 * var(--shell-pad)));
  margin-left: max(calc(-0.5 * var(--bs-gutter-x, 1.5rem)), calc(-1 * var(--shell-pad)));
}

/* --------------------------------------------------------------------------
   5. Topbar
   Fixed, blurred and always present; the scroll state only deepens it.
   Sits as a sibling of .container (a direct child of <body>) so it spans
   the full viewport while page content stays in the shell.
   -------------------------------------------------------------------------- */
.topbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1050;
  height: var(--nav);
  background: var(--color-nav);
  border-bottom: 1px solid var(--color-border);
  backdrop-filter: blur(20px) saturate(1.3);
  -webkit-backdrop-filter: blur(20px) saturate(1.3);
  transition: background var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.topbar.is-scrolled {
  background: var(--color-nav-scrolled);
  box-shadow: var(--shadow-nav);
}

.topbar__inner {
  display: flex;
  align-items: center;
  gap: 1rem;
  width: 100%;
  max-width: var(--shell);
  height: 100%;
  margin: 0 auto;
  padding: 0 2rem;
}

.topbar__brand {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  flex: 0 0 auto;
  font-family: var(--font-heading);
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: 0.2px;
  color: var(--color-brand-text);
  white-space: nowrap;
  transition: color 0.2s;
}
.topbar__brand:hover { color: var(--color-heading); }
.topbar__brand img {
  width: 34px;
  height: 34px;
  object-fit: contain;
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-border-hover);
  filter: drop-shadow(0 4px 12px rgba(239, 68, 68, 0.22));
}
.topbar__brand .brand-accent { color: var(--color-red); }

.topbar__toggle {
  display: none;
  margin-left: auto;
  width: 40px;
  height: 40px;
  padding: 0;
  background: none;
  border: 1px solid var(--color-border-hover);
  border-radius: var(--radius-sm);
  cursor: pointer;
  align-items: center;
  justify-content: center;
  transition: border-color 0.2s, background 0.2s;
}
.topbar__toggle:hover {
  border-color: var(--color-red-border);
  background: var(--color-red-dim);
}
.topbar__toggle span,
.topbar__toggle span::before,
.topbar__toggle span::after {
  content: '';
  display: block;
  width: 18px;
  height: 2px;
  background: var(--color-icon);
  border-radius: 2px;
  transition: transform 0.25s var(--ease), opacity 0.2s, background 0.2s;
}
.topbar__toggle span { position: relative; }
.topbar__toggle span::before { position: absolute; top: -6px; left: 0; }
.topbar__toggle span::after  { position: absolute; top: 6px; left: 0; }
.topbar__toggle[aria-expanded="true"] span { background: transparent; }
.topbar__toggle[aria-expanded="true"] span::before { transform: translateY(6px) rotate(45deg); background: var(--color-red); }
.topbar__toggle[aria-expanded="true"] span::after  { transform: translateY(-6px) rotate(-45deg); background: var(--color-red); }

/* Theme toggle. Always visible at every breakpoint, mirroring the reference
   build: the sun and the moon are both in the DOM and CSS decides which one
   shows, so the icon can never disagree with the applied theme. */
.topbar__theme {
  order: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  padding: 0;
  color: var(--color-icon);
  background: none;
  border: 1px solid var(--color-border-hover);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: color 0.2s, border-color 0.2s, background 0.2s, transform 0.2s var(--ease);
}
.topbar__theme:hover {
  color: var(--color-red);
  border-color: var(--color-red-border);
  background: var(--color-red-dim);
}
.topbar__theme:active { transform: scale(0.94); }
.topbar__theme:focus-visible {
  outline: 2px solid var(--color-red);
  outline-offset: 2px;
}
.topbar__theme-icon {
  width: 19px;
  height: 19px;
  display: block;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.topbar__theme-icon--moon { display: none; }
.lm .topbar__theme-icon--moon { display: block; }
.lm .topbar__theme-icon--sun { display: none; }

/* The theme toggle is moved ahead of the hamburger in the flex row. The DOM
   order is brand, hamburger, menu, toggle — the toggle is last so it sits
   beside the CTA on wide screens without restructuring the nav markup. */
.topbar__toggle { order: 3; }

/* The menu is a Bootstrap .collapse, so on mobile its visibility is governed
   by .collapse:not(.show) { display: none }. This block only supplies the
   chrome — a full-width panel docked under the bar. */
.topbar__menu {
  padding: 14px 20px 20px;
  background: var(--color-nav-solid);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-panel);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}

.topbar__list {
  display: flex;
  flex-direction: column;
  gap: 2px;
  list-style: none;
}
.topbar__list a {
  display: block;
  padding: 9px 14px;
  border-radius: var(--radius-sm);
  font-family: var(--font-heading);
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--color-text-dim);
  white-space: nowrap;
  transition: color 0.2s, background 0.2s;
}
.topbar__list a:hover,
.topbar__list a:focus-visible { color: var(--color-nav-text); background: var(--color-bg-hover); }
.topbar__list a.active {
  color: var(--color-heading);
  background: var(--color-red-dim);
  box-shadow: inset 0 0 0 1px var(--color-red-border);
}

/* Paired with the topbar so it outranks the .btn declarations further down,
   which share specificity and would otherwise win on source order. */
.topbar .topbar__cta {
  margin-top: 10px;
  padding: 0.6rem 1.2rem;
  font-size: 0.85rem;
  text-align: center;
  white-space: nowrap;
}

/* Desktop: horizontal bar, menu always visible.
   !important is required because Bootstrap's .collapse:not(.show) is (0,2,0)
   and would otherwise hide the menu on wide viewports. */
@media (min-width: 992px) {
  .topbar .topbar__menu {
    display: flex !important;
    align-items: center;
    gap: 0.35rem;
    margin-left: auto;
    padding: 0;
    background: none;
    border: none;
    border-radius: 0;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
  .topbar__list { flex-direction: row; align-items: center; }
  /* Paired selectors: .btn sets display at (0,1,0) later in this file, so
     the CTA needs (0,2,0) to be able to change it. */
  .topbar .topbar__cta { display: inline-flex; margin-top: 0; margin-left: 0.5rem; }
  /* The hamburger is out of the row, so the toggle no longer needs to hold
     the row open on its own. */
  .topbar__theme { margin-left: 0; }
}

/* Mobile: the panel drops below the bar and spans the viewport. */
@media (max-width: 991.98px) {
  .topbar__inner { padding: 0 1.25rem; }
  .topbar__toggle { display: inline-flex; }
  .topbar__theme { margin-left: auto; }
  .topbar__menu {
    position: fixed;
    top: var(--nav);
    left: 0;
    right: 0;
    z-index: 1049;
    border-radius: 0;
    border-width: 0 0 1px;
    animation: panelIn 0.28s var(--ease);
  }
  .topbar .topbar__cta { display: block; padding: 0.75rem 1rem; }
}

/* --------------------------------------------------------------------------
   6. Scroll reveal
   The class is only ever added by loader.js, so with scripting off every
   element is simply visible.
   -------------------------------------------------------------------------- */
.rv {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 0.65s var(--ease), transform 0.65s var(--ease);
  transition-delay: var(--rv-d, 0ms);
}
.rv.in { opacity: 1; transform: none; }

/* --------------------------------------------------------------------------
   7. Typography
   -------------------------------------------------------------------------- */
h1, h2, h3, h4,
.page-title, .section-title, .glitch-text {
  font-family: var(--font-heading);
  letter-spacing: -0.025em;
}

h2, h3 { color: var(--color-text); font-weight: 700; }

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

/* Page title — the big statement, tight leading, centred. */
.page-title {
  font-size: clamp(1.9rem, 4.4vw, 3rem);
  font-weight: 700;
  line-height: 1.14;
  letter-spacing: -0.025em;
  color: var(--color-heading);
  text-align: center;
  margin-bottom: 14px;
}

/* Section eyebrow — uppercase micro-label with a gradient lead-in rule. */
.section-title {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  width: fit-content;
  margin: 0 auto 26px;
  font-family: var(--font-heading);
  font-size: 0.78rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--color-red);
  text-align: center;
}
.section-title::before {
  content: '';
  width: 20px;
  height: 1.5px;
  flex-shrink: 0;
  background: var(--grad-accent);
  border-radius: 2px;
}

.page-sub {
  font-size: 1rem;
  line-height: 1.7;
  color: var(--color-text-dim);
  text-align: center;
  max-width: 620px;
  margin: 0 auto 40px;
}

/* Divider */
.divider {
  width: 56px;
  height: 3px;
  background: var(--grad-accent);
  margin: 56px auto;
  border-radius: var(--radius-pill);
  opacity: 0.9;
  animation: expandWidth 0.6s var(--ease) 0.2s both;
}

/* --------------------------------------------------------------------------
   8. Buttons
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.5rem 1.15rem;
  border: 1px solid transparent;
  border-radius: 4px;
  font-family: var(--font-heading);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: color var(--dur) var(--ease), background var(--dur) var(--ease),
              border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease),
              transform var(--dur) var(--ease);
}

.btn-primary {
  --bs-btn-color: var(--color-on-brand);
  --bs-btn-bg: var(--color-red-deep);
  --bs-btn-border-color: transparent;
  --bs-btn-hover-color: var(--color-on-brand);
  --bs-btn-hover-bg: var(--color-red-deep);
  --bs-btn-hover-border-color: transparent;
  --bs-btn-active-color: var(--color-on-brand);
  --bs-btn-active-bg: var(--color-red-deep);
  --bs-btn-active-border-color: transparent;
  --bs-btn-disabled-bg: var(--color-red-deep);
  --bs-btn-focus-shadow-rgb: 239, 68, 68;
  background: var(--grad-fill);
  border-color: transparent;
  color: var(--color-on-brand);
  box-shadow: 0 6px 20px rgba(239, 68, 68, 0.28);
}
.btn-primary:hover,
.btn-primary:focus-visible {
  background: var(--grad-fill-hover);
  border-color: transparent;
  color: var(--color-on-brand);
  transform: translateY(-1px);
  box-shadow: 0 10px 26px rgba(239, 68, 68, 0.4);
}
.btn-primary:active { transform: translateY(0); }

.btn-secondary {
  --bs-btn-color: var(--color-text);
  --bs-btn-bg: transparent;
  --bs-btn-border-color: var(--color-border-hover);
  --bs-btn-hover-color: var(--color-text);
  --bs-btn-hover-bg: var(--color-red-dim);
  --bs-btn-hover-border-color: var(--color-red-border);
  --bs-btn-active-bg: var(--color-red-dim);
  --bs-btn-focus-shadow-rgb: 239, 68, 68;
  background: transparent;
  border-color: var(--color-border-hover);
  color: var(--color-text);
}
.btn-secondary:hover,
.btn-secondary:focus-visible {
  background: var(--color-red-dim);
  border-color: var(--color-red-border);
  color: var(--color-red-bright);
  transform: translateY(-1px);
  box-shadow: 0 8px 22px rgba(239, 68, 68, 0.12);
}
.btn-secondary:active { transform: translateY(0); }

/* Bootstrap drops the outline on :focus-visible and paints a ring instead. */
.btn:focus-visible,
.topbar__toggle:focus-visible,
.project-link:focus-visible,
.error-actions a:focus-visible {
  outline: 2px solid var(--color-red-bright);
  outline-offset: 2px;
  box-shadow: none;
}

/* --------------------------------------------------------------------------
   9. Hero
   -------------------------------------------------------------------------- */
/* Column, not row: the .row inside is a flex item, and in a row-direction
   flex container it would size to its own content instead of filling the
   shell, leaving the two hero columns narrower than the rest of the page. */
.hero-section {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: clamp(400px, 70vh, 660px);
  margin-bottom: var(--section-gap);
  text-align: left;
}
/* No width here on purpose: the column flex container stretches the row by
   its margins, which is what makes it span the full shell. */
.hero-section .hero-badge { margin: 0 0 1.5rem; }
.hero-section .hero-sub { margin: 0 0 32px; }
.hero-section .hero-actions { justify-content: flex-start; }

.glitch-text {
  position: relative;
  display: block;
  max-width: 100%;
  font-family: var(--font-heading);
  font-size: clamp(2rem, 4.6vw, 3.4rem);
  font-weight: 800;
  line-height: 1.12;
  letter-spacing: -0.03em;
  color: var(--color-heading);
  margin-bottom: 20px;
  word-break: break-word;
}

.glitch-text::before,
.glitch-text::after {
  content: attr(data-text);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  opacity: 0.5;
}
.glitch-text::before {
  color: var(--color-red);
  animation: glitchTop 4s infinite;
  clip-path: polygon(0 0, 100% 0, 100% 30%, 0 30%);
}
.glitch-text::after {
  color: var(--color-teal);
  animation: glitchBottom 3.5s infinite;
  clip-path: polygon(0 70%, 100% 70%, 100% 100%, 0 100%);
}

@keyframes glitchTop {
  0%, 92%, 100% { transform: translate(0); opacity: 0.5; }
  93% { transform: translate(-2px, 1px); opacity: 0.7; }
  95% { transform: translate(1px, -1px); opacity: 0.6; }
  97% { transform: translate(-1px, 1px); opacity: 0.5; }
}
@keyframes glitchBottom {
  0%, 88%, 100% { transform: translate(0); opacity: 0.5; }
  89% { transform: translate(2px, -1px); opacity: 0.7; }
  91% { transform: translate(-1px, 1px); opacity: 0.6; }
  93% { transform: translate(1px, -1px); opacity: 0.5; }
}

.hero-sub {
  max-width: 560px;
  font-size: clamp(0.95rem, 1.4vw, 1.06rem);
  line-height: 1.75;
  color: var(--color-text-dim);
  margin: 0 auto 32px;
}

.hero-actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 2rem;
}
.hero-actions .btn { padding: 0.8rem 1.7rem; font-size: 0.95rem; }

.hero-logo,
.product-hero-img { display: flex; justify-content: center; }
.hero-logo img {
  max-width: 220px;
  height: auto;
  filter: drop-shadow(var(--shadow-drop));
  animation: float 7s ease-in-out infinite;
}

/* Eyebrow pill with a breathing brand dot. */
.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: fit-content;
  padding: 6px 16px 6px 12px;
  background: var(--color-red-dim);
  border: 1px solid var(--color-red-border);
  border-radius: var(--radius-pill);
  font-family: var(--font-heading);
  font-size: 0.74rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--color-red-bright);
  margin: 0 auto 1.5rem;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
.hero-badge::before {
  content: '';
  width: 7px;
  height: 7px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--color-red);
  animation: dotPulse 2s var(--ease) infinite;
}
@keyframes dotPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.45); }
  70%      { box-shadow: 0 0 0 7px rgba(239, 68, 68, 0); }
}

/* Standalone brand mark above inner-page titles. */
.logo { margin-bottom: 28px; text-align: center; }
.logo img {
  max-width: 96px;
  height: auto;
  filter: drop-shadow(var(--shadow-drop-soft));
  transition: filter 0.45s var(--ease), transform 0.45s var(--ease);
}
.logo img:hover {
  filter: drop-shadow(0 18px 48px rgba(239, 68, 68, 0.32));
  transform: translateY(-3px);
}

/* --------------------------------------------------------------------------
   10. Card system
   One surface, one radius, one lift. Every card on the site inherits from
   this group so no page restates the treatment.
   -------------------------------------------------------------------------- */
:is(.stat-card, .mv-card, .timeline-item, .project-card, .team-card,
    .info-card, .contact-form, .hours-card, .notice-card, .status-banner,
    .category, .service) {
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease),
              transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
:is(.stat-card, .mv-card, .timeline-item, .project-card, .team-card,
    .info-card, .contact-form, .hours-card, .notice-card, .status-banner,
    .category, .service):hover,
:is(.stat-card, .mv-card, .timeline-item, .project-card, .team-card,
    .info-card, .contact-form, .hours-card, .notice-card, .status-banner,
    .category, .service):focus-within {
  border-color: var(--color-red-border);
  transform: translateY(-3px);
  box-shadow: var(--shadow-card);
}

/* Nested cards sit on a sunken surface so they read inside their parent. */
.service {
  background: var(--color-bg-sunken);
  border-radius: var(--radius-md);
  text-align: left;
  padding: 16px 18px;
}
.service:hover { background: var(--color-bg-hover); }
.service h3 {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--color-text);
  margin-bottom: 6px;
}
.service p {
  font-size: 0.875rem;
  line-height: 1.7;
  color: var(--color-text-muted);
}
.service-icon { display: none; }

/* --------------------------------------------------------------------------
   11. Capability accordion
   Shared by services.html, bizintel.html and sitesurveyor.html.
   -------------------------------------------------------------------------- */
.category {
  max-width: 1000px;
  margin: 0 auto 12px;
  text-align: center;
  overflow: hidden;
}

.category-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 17px 22px;
  cursor: pointer;
  user-select: none;
  list-style: none;
  color: var(--color-text);
  transition: background 0.25s var(--ease), color 0.25s var(--ease);
}
.category-header::-webkit-details-marker { display: none; }
.category-header:hover { background: var(--color-bg-hover); }
.category[open] .category-header {
  background: var(--color-red-dim);
  color: var(--color-red-bright);
}
.category-header h2 {
  font-size: inherit;
  font-weight: 600;
  letter-spacing: inherit;
  text-transform: none;
  color: inherit;
}

/* Chevron, drawn rather than shipped as an icon font. */
.category-header::after {
  content: '';
  width: 8px;
  height: 8px;
  margin-left: auto;
  flex-shrink: 0;
  border-right: 1.6px solid var(--color-text-muted);
  border-bottom: 1.6px solid var(--color-text-muted);
  border-radius: 1px;
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform var(--dur) var(--ease), border-color 0.25s var(--ease);
}
.category[open] .category-header::after {
  transform: rotate(225deg) translate(-2px, -2px);
  border-color: var(--color-red);
}

/* Status dot, matching the hero badge and the stat tiles. */
.category-accent {
  width: 7px;
  height: 7px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--color-red);
  box-shadow: 0 0 8px var(--color-red-glow);
  transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease);
}
.category-header:hover .category-accent {
  transform: scale(1.3);
  box-shadow: 0 0 14px var(--color-red-glow);
}

.category-services {
  display: grid;
  gap: 12px;
  padding: 6px 22px 22px;
}
@media (min-width: 768px) {
  .category-services { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 992px) {
  .category-services { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
/* The lead-in paragraph spans the full grid rather than sitting in a cell. */
.account-intro {
  grid-column: 1 / -1;
  font-size: 0.9rem;
  line-height: 1.7;
  color: var(--color-text-dim);
  text-align: left;
  font-style: italic;
  margin-bottom: 4px;
}

/* --------------------------------------------------------------------------
   12. Product hero + status banner (bizintel, sitesurveyor)
   -------------------------------------------------------------------------- */
.product-hero {
  margin-bottom: 56px;
  text-align: left;
}
.product-hero .hero-badge { margin: 0 0 1.5rem; }
.product-hero .page-title { text-align: left; margin-bottom: 6px; }
.product-hero .page-sub { text-align: left; margin: 0 0 20px; }
.product-hero .hero-actions { justify-content: flex-start; margin-bottom: 0; }

.product-hero-img img {
  max-width: 200px;
  height: auto;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-drop-lg), 0 0 60px rgba(239, 68, 68, 0.14);
  transition: transform 0.45s var(--ease), box-shadow 0.45s var(--ease);
}
.product-hero-img img:hover {
  transform: translateY(-4px) scale(1.02);
  box-shadow: var(--shadow-drop-lg-hover), 0 0 80px rgba(239, 68, 68, 0.2);
}

.hero-desc {
  font-size: 0.98rem;
  line-height: 1.8;
  color: var(--color-text-dim);
}

.status-banner {
  max-width: 720px;
  margin: 32px auto 0;
  padding: 20px 24px;
  text-align: center;
  background: var(--color-amber-dim);
  border-color: var(--color-amber-bd);
}
.status-banner:hover {
  border-color: var(--color-amber);
  transform: translateY(-3px);
  box-shadow: var(--shadow-card);
}
.status-banner .status-label {
  display: inline-block;
  font-family: var(--font-heading);
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--color-amber-text);
  margin-bottom: 8px;
}
.status-banner p {
  font-size: 0.9rem;
  line-height: 1.7;
  color: var(--color-text-dim);
}
.status-banner a {
  color: var(--color-red);
  font-weight: 600;
  transition: color 0.2s;
}
.status-banner a:hover { color: var(--color-red-bright); text-decoration: underline; }

/* --------------------------------------------------------------------------
   13. Newsletter band
   -------------------------------------------------------------------------- */
.notify {
  margin-bottom: var(--section-gap);
  text-align: center;
}
.notify-band {
  text-align: left;
  padding: 28px 32px;
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  margin-bottom: 0;
  transition: border-color var(--dur) var(--ease), transform var(--dur) var(--ease),
              box-shadow var(--dur) var(--ease);
}
.notify-band:hover {
  border-color: var(--color-red-border);
  transform: translateY(-3px);
  box-shadow: 0 16px 50px rgba(0, 0, 0, 0.25);
}
.notify-title {
  font-family: var(--font-heading);
  font-size: 0.74rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--color-red);
  margin-bottom: 6px;
}
.notify-sub {
  font-size: 0.9rem;
  color: var(--color-text-muted);
  margin-bottom: 0;
}
.notify-note { font-size: 0.75rem; color: var(--color-text-muted); margin-top: 10px; }
.notify-form { display: flex; gap: 10px; flex-wrap: wrap; }
.notify-band .notify-form { justify-content: flex-start; flex-wrap: nowrap; }

.notify-form button {
  flex: 0 0 auto;
  padding: 0.7rem 1.5rem;
  background: var(--grad-fill);
  border: none;
  border-radius: var(--radius-md);
  color: var(--color-on-brand);
  font-family: var(--font-heading);
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 6px 20px rgba(239, 68, 68, 0.28);
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease),
              background var(--dur) var(--ease);
}
.notify-form button:hover {
  background: var(--grad-fill-hover);
  transform: translateY(-1px);
  box-shadow: 0 10px 26px rgba(239, 68, 68, 0.4);
}

/* --------------------------------------------------------------------------
   14. Fields
   One appearance for every input, one focus treatment.
   -------------------------------------------------------------------------- */
:is(.notify-form, .contact-form)
  :is(input:not([type="hidden"]):not([type="checkbox"]), textarea) {
  width: 100%;
  padding: 0.7rem 1rem;
  background: var(--color-bg-hover);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  color: var(--color-text);
  font-family: var(--font-heading);
  font-size: 0.9rem;
  outline: none;
  transition: border-color 0.25s var(--ease), box-shadow 0.25s var(--ease),
              background-color 0.25s var(--ease);
}
:is(.notify-form, .contact-form) :is(input, textarea)::placeholder { color: var(--color-placeholder); }
:is(.notify-form, .contact-form)
  :is(input:not([type="hidden"]):not([type="checkbox"]), textarea):focus {
  border-color: var(--color-red);
  background: var(--color-bg-hover);
  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.12);
}

.notify-form input { max-width: 320px; }
.notify-band .notify-form input { flex: 1 1 auto; width: auto; min-width: 0; max-width: none; }

/* --------------------------------------------------------------------------
   15. Contact strip, social, footer
   -------------------------------------------------------------------------- */
.contact {
  font-size: 0.9rem;
  color: var(--color-text-dim);
  text-align: center;
  margin-bottom: 24px;
}
.contact a {
  color: var(--color-red);
  font-weight: 500;
  transition: color 0.2s;
}
.contact a:hover { color: var(--color-red-bright); text-decoration: underline; }

.social {
  display: flex;
  gap: 10px;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 40px;
}
.social a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 14px;
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  color: var(--color-text-dim);
  font-family: var(--font-heading);
  font-size: 0.83rem;
  font-weight: 500;
  transition: color 0.25s var(--ease), border-color 0.25s var(--ease),
              background 0.25s var(--ease), transform 0.25s var(--ease);
}
.social a:hover,
.social a:focus-visible {
  color: var(--color-red-bright);
  border-color: var(--color-red-border);
  background: var(--color-red-dim);
  transform: translateY(-2px);
}
.social a svg { width: 16px; height: 16px; fill: currentColor; flex-shrink: 0; }

.footer-tagline {
  font-family: var(--font-heading);
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--color-text-muted);
  text-align: center;
  margin-bottom: 10px;
}
.footer-text {
  font-size: 0.78rem;
  color: var(--color-text-muted);
  text-align: center;
}
.footer-text a { color: inherit; transition: color 0.2s; }
.footer-text a:hover { color: var(--color-red); }
.footer-sep,
.footer-dot { color: var(--color-separator); }
.footer-sep { margin: 0 0.5rem; }
.footer-dot { margin: 0 0.3rem; }

/* --------------------------------------------------------------------------
   16. 404
   -------------------------------------------------------------------------- */
.error-code {
  font-family: var(--font-heading);
  font-size: clamp(4rem, 12vw, 6.5rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: 0.04em;
  text-align: center;
  margin-bottom: 10px;
  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: var(--color-red);
}
.error-title {
  font-family: var(--font-heading);
  font-size: 1.4rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--color-heading);
  text-align: center;
  margin-bottom: 10px;
}
.error-msg {
  max-width: 480px;
  margin: 0 auto 32px;
  font-size: 0.95rem;
  line-height: 1.7;
  color: var(--color-text-dim);
  text-align: center;
}
.error-actions {
  display: flex;
  gap: 10px;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 8px;
}
.error-actions a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.7rem 1.4rem;
  border: 1px solid var(--color-border-hover);
  border-radius: var(--radius-md);
  background: transparent;
  color: var(--color-text);
  font-family: var(--font-heading);
  font-size: 0.9rem;
  font-weight: 600;
  text-decoration: none;
  transition: color 0.25s var(--ease), background 0.25s var(--ease),
              border-color 0.25s var(--ease), transform 0.25s var(--ease);
}
.error-actions a.primary {
  background: var(--grad-fill);
  border-color: transparent;
  color: var(--color-on-brand);
  box-shadow: 0 6px 20px rgba(239, 68, 68, 0.28);
}
.error-actions a:hover,
.error-actions a:focus-visible {
  border-color: var(--color-red-border);
  background: var(--color-red-dim);
  color: var(--color-red-bright);
  transform: translateY(-1px);
}
.error-actions a.primary:hover,
.error-actions a.primary:focus-visible {
  background: var(--grad-fill-hover);
  border-color: transparent;
  color: var(--color-on-brand);
  box-shadow: 0 10px 26px rgba(239, 68, 68, 0.4);
}

/* --------------------------------------------------------------------------
   17. WhatsApp FAB
   -------------------------------------------------------------------------- */
.whatsapp-fab {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--color-green);
  color: var(--color-on-brand);
  text-decoration: none;
  box-shadow: var(--shadow-fab);
  transition: background 0.25s var(--ease), transform 0.25s var(--ease),
              box-shadow 0.25s var(--ease);
}
.whatsapp-fab:hover,
.whatsapp-fab:focus-visible {
  background: var(--color-green-hover);
  outline: none;
  transform: translateY(-2px) scale(1.05);
  box-shadow: var(--shadow-fab-hover), 0 0 30px var(--color-green-glow);
}
.whatsapp-fab svg { width: 28px; height: 28px; fill: currentColor; }

/* --------------------------------------------------------------------------
   18. Page loader
   -------------------------------------------------------------------------- */
.biz-loader {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s;
  z-index: 3000;
}
.biz-loader.show { opacity: 1; pointer-events: auto; }
.biz-loader-card { text-align: center; transform: scale(0.92); transition: transform 0.3s var(--ease); }
.biz-loader.show .biz-loader-card { transform: scale(1); }

.biz-spinner { position: relative; width: 64px; height: 64px; margin: 0 auto; }
.biz-spinner::before,
.biz-spinner::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
}
.biz-spinner::before { border: 3px solid rgba(239, 68, 68, 0.1); }
.biz-spinner::after {
  border: 3px solid transparent;
  border-top-color: var(--color-red);
  border-right-color: var(--color-red);
  animation: spin 0.85s linear infinite;
  filter: drop-shadow(0 0 6px rgba(239, 68, 68, 0.5));
}
.biz-spinner-ring { position: absolute; border-radius: 50%; border: 1px solid rgba(239, 68, 68, 0.2); }
.biz-spinner-ring--outer { inset: -10px; animation: ringPulse 2.2s ease-in-out infinite; }
.biz-spinner-ring--inner {
  inset: 6px;
  border-top-color: rgba(239, 68, 68, 0.4);
  border-right-color: transparent;
  border-bottom-color: transparent;
  border-left-color: transparent;
  animation: spinReverse 1.6s linear infinite;
}
.biz-spinner-dot {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--color-red);
  box-shadow: 0 0 10px rgba(239, 68, 68, 0.8);
  animation: dotBreath 1.4s ease-in-out infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes spinReverse { to { transform: rotate(-360deg); } }
@keyframes ringPulse {
  0%, 100% { transform: scale(1); opacity: 0.6; }
  50%      { transform: scale(1.18); opacity: 0; }
}
@keyframes dotBreath {
  0%, 100% { transform: translate(-50%, -50%) scale(0.85); opacity: 0.7; }
  50%      { transform: translate(-50%, -50%) scale(1.2); opacity: 1; }
}

/* --------------------------------------------------------------------------
   19. Keyframes
   -------------------------------------------------------------------------- */
@keyframes shellIn {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes panelIn {
  from { opacity: 0; transform: translateY(-12px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes expandWidth {
  from { width: 0; opacity: 0; }
  to   { width: 56px; opacity: 0.9; }
}
@keyframes float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-8px); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    transition-delay: 0ms !important;
    scroll-behavior: auto !important;
  }
  html { scroll-behavior: auto; }
  .glitch-text::before,
  .glitch-text::after { display: none; }
  .hero-logo img { animation: none; }
  .hero-badge::before { animation: none; }
  .biz-spinner::after,
  .biz-spinner-ring,
  .biz-spinner-dot { animation: none !important; }
  .rv { opacity: 1; transform: none; }
}

@media print {
  .biz-loader,
  .whatsapp-fab,
  .topbar,
  .divider { display: none !important; }
  .container { padding: 0; max-width: none; animation: none; }
}

/* --------------------------------------------------------------------------
   20. Scrollbar
   -------------------------------------------------------------------------- */
::-webkit-scrollbar { width: 7px; }
::-webkit-scrollbar-track { background: var(--color-bg); }
::-webkit-scrollbar-thumb { background: var(--color-scrollbar); border-radius: var(--radius-pill); }
::-webkit-scrollbar-thumb:hover { background: var(--color-scrollbar-hover); }

/* --------------------------------------------------------------------------
   21. Focus accessibility
   -------------------------------------------------------------------------- */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
summary:focus-visible {
  outline: 2px solid var(--color-red);
  outline-offset: 3px;
}
input:focus-visible,
textarea:focus-visible { outline-offset: 1px; }

/* --------------------------------------------------------------------------
   22. Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 991.98px) {
  .container { padding-top: calc(var(--nav) + 2.5rem); }
  .hero-section { min-height: 0; }
  .category-services { padding: 4px 16px 16px; }
  .category-header { padding: 15px 18px; }
}

@media (max-width: 768px) {
  :root { --shell-pad: 1.25rem; }
  .container { padding-top: calc(var(--nav) + 2rem); }
  :root { --section-gap: 48px; }
  .page-title { font-size: 1.75rem; }
  .notify-band { padding: 22px 20px; }
}

@media (max-width: 480px) {
  :root { --shell-pad: 1rem; }
  .container { padding: calc(var(--nav) + 1.5rem) var(--shell-pad) 2.5rem; }
  .page-title { font-size: 1.55rem; }
  .page-sub { font-size: 0.92rem; }
  .section-title { font-size: 0.72rem; letter-spacing: 0.12em; }
  .logo img { max-width: 80px; }
  .divider { margin: 40px auto; }
  .contact { font-size: 0.88rem; }
  .social { gap: 8px; margin-bottom: 32px; }
  .social a { font-size: 0.78rem; padding: 8px 12px; }
  .hero-actions .btn,
  .btn { padding: 0.68rem 1.3rem; font-size: 0.85rem; }
  .notify-form { flex-direction: column; align-items: center; }
  .notify-form input,
  .notify-form button { width: 100%; max-width: 320px; }
  .notify-band .notify-form { flex-direction: column; align-items: stretch; }
  .notify-band .notify-form input,
  .notify-band .notify-form button { width: 100%; max-width: none; }
  .whatsapp-fab { width: 50px; height: 50px; bottom: 16px; right: 16px; }
  .whatsapp-fab svg { width: 24px; height: 24px; }
  .error-code { font-size: 3.5rem; }
  .error-title { font-size: 1.15rem; }
}

/* --------------------------------------------------------------------------
   23. Page components
   --------------------------------------------------------------------------
   Everything that used to live in per-page <style> blocks. Grouped here so a
   card behaves the same on every page, and so the pages ship no CSS of
   their own.
   -------------------------------------------------------------------------- */

/* --- Section rhythm ------------------------------------------------------ */
.about-hero,
.stats-row,
.mv-section,
.timeline-section,
.projects-grid,
.team-grid,
.info-cards,
.contact-main { margin-bottom: 3rem; }

/* --- Split hero (about, contact) ------------------------------------------ */
.about-hero,
.contact-hero { margin-bottom: 2.5rem; }
.about-hero .page-title,
.contact-hero .page-title { text-align: left; }
.about-hero .hero-badge,
.contact-hero .hero-badge { margin: 0 0 1.5rem; }
.about-hero p,
.contact-hero p {
  max-width: 560px;
  font-size: 1rem;
  line-height: 1.8;
  color: var(--color-text-dim);
}

/* --- Stat tiles ---------------------------------------------------------- */
.stat-card {
  height: 100%;
  padding: 1.7rem 1rem;
  text-align: center;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.stat-number {
  font-family: var(--font-heading);
  font-size: 2.1rem;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
  color: var(--color-red);
  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  margin-bottom: 0.45rem;
  transition: filter 0.3s var(--ease);
}
.stat-card:hover .stat-number { filter: brightness(1.15) saturate(1.1); }
.stat-label {
  font-family: var(--font-heading);
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--color-text-muted);
}

/* --- Mission / vision ---------------------------------------------------- */
.mv-card {
  height: 100%;
  padding: 1.9rem;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.mv-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  margin-bottom: 1.1rem;
  color: var(--color-red);
  background: var(--color-red-dim);
  border: 1px solid var(--color-red-border);
  border-radius: var(--radius-md);
  transition: box-shadow 0.3s var(--ease), transform 0.3s var(--ease);
}
.mv-card:hover .mv-icon {
  transform: translateY(-2px);
  box-shadow: 0 0 24px var(--color-red-glow);
}
.mv-label {
  font-family: var(--font-heading);
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--color-red);
  margin-bottom: 0.7rem;
}
.mv-card p {
  font-size: 0.9rem;
  line-height: 1.8;
  color: var(--color-text-dim);
}

/* --- Numbered timeline --------------------------------------------------- */
.timeline {
  position: relative;
  max-width: 700px;
  margin: 0 auto;
  padding-left: 2.9rem;
  counter-reset: step;
}
.timeline::before {
  content: '';
  position: absolute;
  left: 12px;
  top: 20px;
  bottom: 20px;
  width: 2px;
  border-radius: 2px;
  background: linear-gradient(180deg, var(--color-red), var(--color-red-border) 50%, transparent);
}
.timeline-item {
  position: relative;
  margin-bottom: 1rem;
  padding: 1.15rem 1.35rem;
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  counter-increment: step;
}
.timeline-item:last-child { margin-bottom: 0; }
.timeline-item::before {
  content: counter(step);
  position: absolute;
  left: -2.9rem;
  top: 1.1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  font-family: var(--font-heading);
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--color-red);
  background: var(--color-bg);
  border: 1px solid var(--color-red-border);
  border-radius: 50%;
  transition: color 0.25s var(--ease), background 0.25s var(--ease),
              border-color 0.25s var(--ease), box-shadow 0.25s var(--ease);
}
.timeline-item:hover { background: var(--color-bg-hover); }
.timeline-item:hover::before {
  color: var(--color-on-brand);
  background: var(--grad);
  border-color: transparent;
  box-shadow: 0 0 18px var(--color-red-glow);
}
.timeline-item h4 {
  font-family: var(--font-heading);
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--color-text);
  margin-bottom: 0.25rem;
  transition: color 0.2s var(--ease);
}
.timeline-item:hover h4 { color: var(--color-heading); }
.timeline-item p {
  font-size: 0.85rem;
  line-height: 1.7;
  color: var(--color-text-muted);
}

/* --- Project cards ------------------------------------------------------- */
.project-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 2rem;
  border-radius: var(--radius-xl);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.project-header {
  display: flex;
  align-items: center;
  gap: 1.4rem;
  margin-bottom: 1rem;
}
.project-logo {
  width: 78px;
  height: 78px;
  flex-shrink: 0;
  object-fit: cover;
  padding: 6px;
  background: var(--color-bg-sunken);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  transition: border-color 0.3s var(--ease), box-shadow 0.3s var(--ease),
              transform 0.3s var(--ease);
}
.project-card:hover .project-logo {
  transform: scale(1.05);
  border-color: var(--color-red-border);
  box-shadow: 0 0 24px rgba(239, 68, 68, 0.18);
}
.project-title {
  font-family: var(--font-heading);
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--color-heading);
  margin-bottom: 0.25rem;
}
.project-tagline {
  font-size: 0.82rem;
  font-weight: 500;
  color: var(--color-red);
}
.project-desc {
  flex: 1;
  font-size: 0.9rem;
  line-height: 1.75;
  color: var(--color-text-dim);
  margin-bottom: 0.6rem;
}
.project-link {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  align-self: flex-start;
  margin-top: 0.4rem;
  padding: 0.55rem 1.2rem;
  background: transparent;
  border: 1px solid var(--color-red-border);
  border-radius: var(--radius-pill);
  color: var(--color-red);
  font-family: var(--font-heading);
  font-size: 0.8rem;
  font-weight: 600;
  transition: color 0.25s var(--ease), background 0.25s var(--ease),
              border-color 0.25s var(--ease), box-shadow 0.25s var(--ease),
              transform 0.25s var(--ease);
}
.project-link:hover,
.project-link:focus-visible {
  color: var(--color-on-brand);
  background: var(--grad);
  border-color: transparent;
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(239, 68, 68, 0.32);
}

/* --- Team cards ---------------------------------------------------------- */
.team-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.2rem;
  max-width: 780px;
  margin-left: auto;
  margin-right: auto;
}
.team-card {
  display: flex;
  flex-direction: column;
  padding: 1.6rem;
  text-align: center;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.team-card .team-img {
  width: 100px;
  height: 100px;
  margin: 0 auto 0.9rem;
  object-fit: cover;
  border: 2px solid var(--color-red-border);
  border-radius: 50%;
  transition: border-color 0.25s var(--ease), box-shadow 0.25s var(--ease),
              transform 0.25s var(--ease);
}
.team-card:hover .team-img {
  transform: scale(1.04);
  border-color: var(--color-red);
  box-shadow: 0 0 28px var(--color-red-glow);
}
.team-card .placeholder-img {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100px;
  height: 100px;
  margin: 0 auto 0.9rem;
  font-size: 1.9rem;
  color: var(--color-amber-soft);
  background: var(--color-bg-hover);
  border: 2px dashed var(--color-amber-bd);
  border-radius: 50%;
  transition: border-color 0.25s var(--ease), background 0.25s var(--ease);
}
.team-card:hover .placeholder-img {
  background: var(--color-amber-dim);
  border-color: var(--color-amber);
}
.team-card .name {
  font-family: var(--font-heading);
  font-size: 1rem;
  font-weight: 600;
  color: var(--color-text);
  margin-bottom: 0.25rem;
}
.team-card .role {
  font-family: var(--font-heading);
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--color-red);
  margin-bottom: 0.7rem;
}
.team-card .status {
  display: inline-block;
  align-self: center;
  padding: 0.22rem 0.7rem;
  margin-bottom: 0.7rem;
  font-family: var(--font-heading);
  font-size: 0.62rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  border-radius: var(--radius-pill);
}
.team-card .status.filled {
  color: var(--color-red);
  background: var(--color-red-dim);
  border: 1px solid var(--color-red-border);
}
.team-card .status.vacant {
  color: var(--color-amber-text);
  background: var(--color-amber-dim);
  border: 1px solid var(--color-amber-bd);
}
.team-card p {
  flex: 1;
  font-size: 0.85rem;
  line-height: 1.7;
  color: var(--color-text-muted);
}
.team-card .apply-btn {
  display: inline-flex;
  align-items: center;
  align-self: center;
  margin-top: 0.9rem;
  padding: 0.5rem 1.2rem;
  background: transparent;
  border: 1px solid var(--color-amber-bd);
  border-radius: var(--radius-pill);
  color: var(--color-amber-text);
  font-family: var(--font-heading);
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  transition: color 0.25s var(--ease), background 0.25s var(--ease),
              border-color 0.25s var(--ease), box-shadow 0.25s var(--ease),
              transform 0.25s var(--ease);
}
.team-card .apply-btn:hover,
.team-card .apply-btn:focus-visible {
  color: var(--color-amber-text);
  background: var(--color-amber-dim);
  border-color: var(--color-amber);
  transform: translateY(-2px);
  box-shadow: 0 0 20px rgba(234, 179, 8, 0.18);
}

/* Closing line under the team grid. */
.team-note {
  max-width: 640px;
  margin: 1.4rem auto 0;
  font-size: 0.85rem;
  line-height: 1.65;
  font-style: italic;
  color: var(--color-text-muted);
  text-align: center;
}

/* --- Contact info cards -------------------------------------------------- */
.info-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 100%;
  padding: 1.6rem;
  text-align: center;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.info-card-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  margin-bottom: 0.9rem;
  color: var(--color-red);
  background: var(--color-red-dim);
  border: 1px solid var(--color-red-border);
  border-radius: var(--radius-md);
  transition: box-shadow 0.3s var(--ease), transform 0.3s var(--ease);
}
.info-card:hover .info-card-icon {
  transform: translateY(-2px);
  box-shadow: 0 0 24px var(--color-red-glow);
}
.info-card .label {
  font-family: var(--font-heading);
  font-size: 0.68rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--color-red);
  margin-bottom: 0.4rem;
}
.info-card .value {
  font-size: 1rem;
  color: var(--color-text);
  overflow-wrap: anywhere;
}
.info-card .value a {
  color: var(--color-text);
  transition: color 0.2s var(--ease);
}
.info-card .value a:hover,
.info-card .value a:focus-visible { color: var(--color-red); }

/* --- Contact form -------------------------------------------------------- */
.contact-form {
  height: 100%;
  padding: 1.7rem;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.contact-form .form-title {
  padding-bottom: 1rem;
  margin-bottom: 1.2rem;
  border-bottom: 1px solid var(--color-border);
  font-family: var(--font-heading);
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--color-text-dim);
  text-align: center;
}
.contact-form .field { margin-bottom: 1rem; }
.contact-form label {
  display: block;
  margin-bottom: 0.45rem;
  font-family: var(--font-heading);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--color-text-muted);
  transition: color 0.2s var(--ease);
}
.contact-form .field:focus-within label { color: var(--color-red); }
.contact-form textarea {
  min-height: 130px;
  resize: vertical;
}
.contact-form button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  margin-top: 0.4rem;
  padding: 0.85rem 1.2rem;
  background: var(--grad-fill);
  border: none;
  border-radius: var(--radius-md);
  color: var(--color-on-brand);
  font-family: var(--font-heading);
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 6px 20px rgba(239, 68, 68, 0.28);
  transition: background var(--dur) var(--ease), box-shadow var(--dur) var(--ease),
              transform var(--dur) var(--ease);
}
.contact-form button:hover {
  background: var(--grad-fill-hover);
  transform: translateY(-1px);
  box-shadow: 0 10px 26px rgba(239, 68, 68, 0.4);
}
.contact-form button:active { transform: translateY(0); }

/* --- Notice + business hours --------------------------------------------- */
.notice-card {
  padding: 1.5rem;
  margin-bottom: 1.2rem;
  background: var(--color-red-dim);
  border-color: var(--color-red-border);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease),
              transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.notice-card:hover {
  background: var(--color-red-dim-strong);
  border-color: var(--color-red);
  transform: translateY(-3px);
  box-shadow: var(--shadow-card);
}
.notice-label {
  margin-bottom: 0.5rem;
  font-family: var(--font-heading);
  font-size: 0.68rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--color-red);
}
.notice-card p {
  font-size: 0.85rem;
  line-height: 1.75;
  color: var(--color-text-dim);
}

.hours-card {
  padding: 1.5rem;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.hours-label {
  padding-bottom: 0.7rem;
  margin-bottom: 0.4rem;
  border-bottom: 1px solid var(--color-border);
  font-family: var(--font-heading);
  font-size: 0.68rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--color-text-dim);
}
.hours-row {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.45rem 0;
  border-bottom: 1px solid var(--color-border);
  font-size: 0.85rem;
}
.hours-row:last-child {
  padding-bottom: 0;
  border-bottom: none;
}
.hours-day { color: var(--color-text-dim); }
.hours-time {
  color: var(--color-text);
  font-weight: 500;
}

/* --- Legal --------------------------------------------------------------- */
.legal-meta {
  margin-bottom: 2.5rem;
  font-size: 0.75rem;
  color: var(--color-text-muted);
  text-align: center;
}
.legal-section {
  max-width: 780px;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 1rem;
  padding: 1.6rem 1.7rem;
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
}
.legal-section h2 {
  margin-bottom: 0.7rem;
  font-family: var(--font-heading);
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--color-text);
  text-align: center;
}
.legal-section p,
.legal-section li {
  max-width: 680px;
  margin-left: auto;
  margin-right: auto;
  font-size: 0.9rem;
  line-height: 1.85;
  color: var(--color-text-dim);
}
.legal-section ul {
  list-style: none;
  padding-left: 0;
}
.legal-section li {
  position: relative;
  padding-left: 1.25rem;
  margin-bottom: 0.35rem;
}
.legal-section li::before {
  content: '\203A';
  position: absolute;
  left: 0;
  font-weight: 700;
  color: var(--color-red);
}
.legal-section a {
  color: var(--color-red);
  transition: color 0.2s var(--ease);
}
.legal-section a:hover,
.legal-section a:focus-visible {
  color: var(--color-red-bright);
  text-decoration: underline;
}

/* --- Narrow screens ------------------------------------------------------ */
@media (max-width: 768px) {
  .about-hero .page-title,
  .contact-hero .page-title { text-align: center; }
  .about-hero .hero-badge,
  .contact-hero .hero-badge { margin-left: auto; margin-right: auto; }
  .about-hero p,
  .contact-hero p { margin-left: auto; margin-right: auto; }
  .project-card { padding: 1.5rem; }
}

@media (max-width: 640px) {
  .team-grid { grid-template-columns: 1fr; }
}

@media (max-width: 480px) {
  .stat-number { font-size: 1.7rem; }
  .stat-label { font-size: 0.64rem; letter-spacing: 0.12em; }
  .mv-card { padding: 1.4rem; }
  .timeline { padding-left: 2.5rem; }
  .timeline::before { left: 10px; }
  .timeline-item { padding: 1rem 1.1rem; }
  .timeline-item::before { left: -2.5rem; width: 22px; height: 22px; font-size: 0.66rem; }
  .timeline-item h4 { font-size: 0.88rem; }
  .timeline-item p { font-size: 0.82rem; }
  .project-header {
    flex-direction: column;
    gap: 0.9rem;
    text-align: center;
  }
  .project-logo { width: 68px; height: 68px; }
  .project-title { font-size: 1.1rem; }
  .project-link { align-self: center; }
  .team-card { padding: 1.3rem; }
  .team-card .team-img,
  .team-card .placeholder-img { width: 82px; height: 82px; }
  .info-card { padding: 1.3rem; }
  .info-card .value { font-size: 0.92rem; }
  .contact-form { padding: 1.1rem; }
  .legal-section { padding: 1.2rem 1.1rem; }
  .legal-section p,
  .legal-section li { font-size: 0.85rem; }
}