/* Glow Theme CSS
   Tech-savvy glassmorphism template with highlighted gradient borders.
   Darker "ops console" aesthetic: frosted glass panels, 1px gradient
   border seams, soft color blobs, corner brackets, mono-font accents.
   See ./style-guide.md for full design intent.
*/

/* ======================================
   BASE DESIGN TOKENS
   ====================================== */

/* Register --angle so we can animate conic-gradient rotation */
@property --glow-angle {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}

:root {
  /* --- Neutral Scale (Tailwind neutral palette) --- */
  /* Used for text, muted surfaces, and light-mode fallbacks.
     Dark mode tokens below take over most surfaces. */
  --glow-n-50: 250 250 252;
  --glow-n-100: 244 244 246;
  --glow-n-200: 226 226 232;
  --glow-n-300: 197 197 205;
  --glow-n-400: 161 161 170;
  --glow-n-500: 113 113 122;
  --glow-n-600: 82 82 89;
  --glow-n-700: 55 55 62;
  --glow-n-800: 28 28 34;
  --glow-n-900: 15 17 24;
  --glow-n-950: 7 9 15;

  /* --- Spacing (8pt grid) --- */
  --glow-space-1: 4px;
  --glow-space-2: 8px;
  --glow-space-3: 12px;
  --glow-space-4: 16px;
  --glow-space-5: 20px;
  --glow-space-6: 24px;
  --glow-space-8: 32px;
  --glow-space-10: 40px;
  --glow-space-12: 48px;
  --glow-space-16: 64px;

  /* --- Border Radius --- */
  /* Tech-savvy: crisper corners than coaching/soft themes.
     Buttons = md (0.625rem); cards = xl (1.25rem); no pill-by-default. */
  --glow-radius-sm: 0.375rem;
  --glow-radius-md: 0.625rem;
  --glow-radius-lg: 0.875rem;
  --glow-radius-xl: 1.25rem;
  --glow-radius-2xl: 1.5rem;
  --glow-radius-full: 9999px;

  /* --- Shadows --- */
  /* Glass aesthetic: ambient dark drops + inner top-light highlight.
     The real "depth" comes from blur + gradient border, not heavy shadows. */
  --glow-shadow-sm: 0 2px 6px -2px rgba(0, 0, 0, 0.25);
  --glow-shadow-md: 0 10px 24px -12px rgba(0, 0, 0, 0.40);
  --glow-shadow-lg: 0 20px 48px -16px rgba(0, 0, 0, 0.55);
  --glow-shadow-xl: 0 32px 64px -20px rgba(0, 0, 0, 0.65);
  --glow-shadow-hover: 0 40px 80px -24px rgba(0, 0, 0, 0.70);

  /* Card shadow stack — two drops + inner top-light seam for glass */
  --glow-shadow-card:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    0 18px 40px -18px rgba(0, 0, 0, 0.55);
  --glow-shadow-card-hover:
    inset 0 1px 0 rgba(255, 255, 255, 0.10),
    0 32px 64px -20px rgba(0, 0, 0, 0.70);

  /* Halo glows (cyan/primary bloom around interactive surfaces) */
  --glow-halo-sm: 0 0 24px rgba(var(--color-primary-500), 0.25);
  --glow-halo-md: 0 0 40px rgba(var(--color-primary-500), 0.35);
  --glow-halo-lg: 0 0 60px rgba(var(--color-primary-500), 0.45),
                  0 0 120px rgba(var(--color-primary-500), 0.18);
  --glow-halo-secondary: 0 0 40px rgba(var(--color-secondary-500), 0.35);

  /* --- Transitions --- */
  /* Tight spring, no elastic — matches precision-instrument mood */
  --glow-transition-fast: 180ms;
  --glow-transition-base: 280ms;
  --glow-transition-slow: 420ms;
  --glow-transition-slower: 600ms;
  --glow-transition-image: 800ms;
  --glow-ease-default: cubic-bezier(0.22, 1, 0.36, 1);
  --glow-ease-out: cubic-bezier(0, 0, 0.2, 1);
  --glow-ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);

  /* --- Semantic Colors (light mode defaults) --- */
  --glow-color-bg: rgb(var(--glow-n-50));
  --glow-color-surface: rgba(255, 255, 255, 0.65);
  --glow-color-surface-raised: rgba(255, 255, 255, 0.85);
  --glow-color-star: rgb(var(--color-secondary-400));
  --glow-color-text: rgb(var(--glow-n-900));
  --glow-color-text-muted: rgb(var(--glow-n-600));
  --glow-color-text-light: rgb(var(--glow-n-500));
  --glow-color-border: rgba(15, 17, 24, 0.10);
  --glow-color-border-dark: rgba(15, 17, 24, 0.18);

  /* --- Glass tokens (the signature surface) --- */
  --glow-glass-bg: rgba(255, 255, 255, 0.55);
  --glow-glass-bg-raised: rgba(255, 255, 255, 0.72);
  --glow-glass-border: rgba(15, 17, 24, 0.10);
  --glow-glass-border-bright: rgba(15, 17, 24, 0.18);
  --glow-glass-blur: blur(20px) saturate(160%);
  --glow-glass-blur-lg: blur(28px) saturate(180%);

  /* --- Highlight-border gradient stops --- */
  --glow-border-highlight-a: rgb(var(--color-primary-400));
  --glow-border-highlight-b: rgba(15, 17, 24, 0.08);
  --glow-border-highlight:
    linear-gradient(135deg,
      var(--glow-border-highlight-a) 0%,
      var(--glow-border-highlight-b) 40%,
      var(--glow-border-highlight-b) 60%,
      var(--glow-border-highlight-a) 100%);

  /* --- Component Tokens --- */
  --glow-card-bg: var(--glow-glass-bg);
  --glow-card-shadow: var(--glow-shadow-card);
  --glow-card-shadow-hover: var(--glow-shadow-card-hover);
  --glow-card-radius: var(--glow-radius-xl);
  --glow-card-padding: var(--glow-space-6);

  --glow-button-radius: var(--glow-radius-md);
  --glow-button-padding-x: var(--glow-space-5);
  --glow-button-padding-y: var(--glow-space-3);

  --glow-input-bg: rgba(255, 255, 255, 0.50);
  --glow-input-border: rgba(15, 17, 24, 0.14);
  --glow-input-radius: var(--glow-radius-sm);

  /* --- Animation Tokens --- */
  /* Restrained lift — we lean on glow, not big jumps */
  --glow-hover-lift: -2px;
  --glow-hover-lift-sm: -1px;
  --glow-hover-lift-xs: -1px;
  --glow-hover-scale: 1.015;
  --glow-hover-scale-sm: 1.03;

  /* Fonts */
  --glow-font-mono: ui-monospace, "JetBrains Mono", "SFMono-Regular", Menlo, Consolas, monospace;
}

/* ======================================
   END DESIGN TOKENS
   ====================================== */

/* ======================================
   DARK MODE OVERRIDES
   ====================================== */

.dark {
  /* --- Semantic Color Overrides --- */
  --glow-color-bg: rgb(var(--glow-n-950));
  --glow-color-surface: rgba(15, 17, 24, 0.55);
  --glow-color-surface-raised: rgba(20, 22, 30, 0.75);
  --glow-color-text: rgb(244 244 246);
  --glow-color-text-muted: rgb(161 161 170);
  --glow-color-text-light: rgb(113 113 122);
  --glow-color-border: rgba(255, 255, 255, 0.10);
  --glow-color-border-dark: rgba(255, 255, 255, 0.18);

  /* Glass tokens in dark mode — use a DARK tint (semi-transparent
     near-black) instead of light tint. This keeps text readable even
     when the surface is lit from behind by color blooms / halos, and
     still renders as a subtle floating pane on a plain dark canvas. */
  --glow-glass-bg: rgba(15, 17, 24, 0.55);
  --glow-glass-bg-raised: rgba(20, 22, 30, 0.75);
  --glow-glass-border: rgba(255, 255, 255, 0.10);
  --glow-glass-border-bright: rgba(255, 255, 255, 0.20);

  /* Highlighted border stops shift to include more brightness */
  --glow-border-highlight-b: rgba(255, 255, 255, 0.06);

  /* Component overrides */
  --glow-card-bg: var(--glow-glass-bg);
  --glow-input-bg: rgba(15, 17, 24, 0.50);
  --glow-input-border: rgba(255, 255, 255, 0.12);
}

/* Theme transition smoothing */
html {
  transition:
    background-color var(--glow-transition-slow) var(--glow-ease-default),
    color var(--glow-transition-slow) var(--glow-ease-default);
}

/* ======================================
   GLOBAL CANVAS — dot grid + blob atmosphere under glass surfaces
   Applied via `body::before` + `body::after`; blocks can opt out by
   setting a solid background on their own wrapper.
   ====================================== */

body {
  background-color: var(--glow-color-bg);
  color: var(--glow-color-text);
  position: relative;
}

/* Fine dot-grid — subtle tech texture.
   Uses currentColor-neutral rgb so it works in both modes. */
.glow-bg-grid::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(
    circle at 1px 1px,
    rgba(255, 255, 255, 0.06) 1px,
    transparent 0
  );
  background-size: 28px 28px;
  pointer-events: none;
  z-index: 0;
}

.dark .glow-bg-grid::before {
  background-image: radial-gradient(
    circle at 1px 1px,
    rgba(255, 255, 255, 0.08) 1px,
    transparent 0
  );
}

:root:not(.dark) .glow-bg-grid::before {
  background-image: radial-gradient(
    circle at 1px 1px,
    rgba(15, 17, 24, 0.08) 1px,
    transparent 0
  );
}

/* Two soft color blobs — primary + secondary — float behind content.
   Use `.glow-bg-blobs` on any section to enable. */
.glow-bg-blobs {
  position: relative;
  isolation: isolate;
}

.glow-bg-blobs::before,
.glow-bg-blobs::after {
  content: '';
  position: absolute;
  width: 60vw;
  height: 60vw;
  max-width: 900px;
  max-height: 900px;
  border-radius: 9999px;
  filter: blur(120px);
  opacity: 0.70;
  pointer-events: none;
  /* Sits ABOVE the parent's canvas background but BELOW content.
     Use z-index: 0 with content at z-index: 10. No isolation here —
     callers manage their own stacking context. */
  z-index: 0;
  will-change: transform;
}

.glow-bg-blobs::before {
  top: -15%;
  left: -10%;
  background: radial-gradient(circle, rgb(var(--color-primary-500)), transparent 60%);
  animation: glow-blob-drift 18s ease-in-out infinite;
}

.glow-bg-blobs::after {
  bottom: -15%;
  right: -10%;
  background: radial-gradient(circle, rgb(var(--color-secondary-500)), transparent 60%);
  animation: glow-blob-drift 22s ease-in-out infinite reverse;
}

/* On dark canvases the blobs need higher opacity to register
   through the near-black background. */
.dark .glow-bg-blobs::before,
.dark .glow-bg-blobs::after {
  opacity: 0.55;
}

@keyframes glow-blob-drift {
  0%, 100% { transform: translate(0, 0) scale(1); }
  33%       { transform: translate(40px, -30px) scale(1.08); }
  66%       { transform: translate(-30px, 25px) scale(0.94); }
}

/* ======================================
   GLOBAL FONT APPLICATION
   Uses --font-family-body and --font-family-heading
   injected by preview/consumer apps
   ====================================== */

/* Heading font sizes - responsive typography scale */
h1 {
  font-size: 2.25rem;
  line-height: 1.2;
}
h2 {
  font-size: 1.875rem;
  line-height: 1.25;
}
h3 {
  font-size: 1.25rem;
  line-height: 1.3;
}
h4 {
  font-size: 1.125rem;
  line-height: 1.4;
}
h5 {
  font-size: 1rem;
  line-height: 1.4;
}
h6 {
  font-size: 0.875rem;
  line-height: 1.4;
}

@media (min-width: 640px) {
  h1 { font-size: 3rem; }
}

@media (min-width: 768px) {
  h1 { font-size: 3.75rem; }
  h2 { font-size: 2.25rem; }
  h3 { font-size: 1.5rem; }
}

@media (min-width: 1024px) {
  h1 { font-size: 4.5rem; }
  h2 { font-size: 3rem; }
}

/* Body text typography scale */
p {
  font-size: 1rem;
  line-height: 1.6;
}

/* Subtitle/description text - paragraphs directly following headings */
h1 + p, h2 + p, h3 + p {
  font-size: 1.125rem;
  line-height: 1.7;
}

/* Small text for cards, excerpts, metadata */
small, .text-meta {
  font-size: 0.75rem;
  line-height: 1.5;
}

/* Glow accent typography — tech-savvy, gradient-fill emphasis.
   Override Tailwind's .font-serif utility so it uses the heading font bold. */
.font-serif {
  font-family: var(--font-family-heading) !important;
  font-weight: 700 !important;
  letter-spacing: -0.01em;
}

/* Glow heading spans with class="italic" — emphasized with a
   primary→secondary gradient text fill (the new "Glow" treatment).
   Never italic; always heavy weight. */
.glow-heading span[class*="italic"] {
  font-style: normal !important;
  font-weight: 800;
  background: linear-gradient(
    135deg,
    rgb(var(--color-primary-400)) 0%,
    rgb(var(--color-secondary-400)) 100%
  );
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
          color: transparent;
  display: inline;
}

/* Optional variant: wrap emphasis in a glass pill with highlighted border.
   Consumer adds `.glow-emphasis-pill` to the span. */
.glow-heading span.glow-emphasis-pill {
  display: inline-block;
  padding: 0.05em 0.55em;
  margin: 0 0.05em;
  background: var(--glow-glass-bg-raised);
  -webkit-backdrop-filter: var(--glow-glass-blur);
          backdrop-filter: var(--glow-glass-blur);
  border-radius: var(--glow-radius-full);
  -webkit-text-fill-color: initial;
          color: rgb(var(--color-primary-400));
  box-shadow:
    inset 0 0 0 1px var(--glow-glass-border-bright),
    var(--glow-halo-sm);
}

/* ======================================
   END DARK MODE OVERRIDES
   ====================================== */

/* ======================================
   REUSABLE COMPONENT CLASSES
   ====================================== */

/* === CARD COMPONENTS === */

/* Glass card — the default surface in Glow. Every card is a frosted
   pane with a highlighted 1px gradient seam. Hover lifts gently and
   intensifies the halo glow. */
.glow-card {
  position: relative;
  background-color: var(--glow-card-bg);
  border-radius: var(--glow-card-radius);
  box-shadow: var(--glow-card-shadow);
  -webkit-backdrop-filter: var(--glow-glass-blur);
          backdrop-filter: var(--glow-glass-blur);
  overflow: hidden;
  isolation: isolate;
  transition:
    transform var(--glow-transition-slow) var(--glow-ease-out),
    box-shadow var(--glow-transition-slow) var(--glow-ease-out);
}

/* Highlighted gradient border seam — background-clip mask trick.
   Lives on a ::before so card content stays in normal flow. */
.glow-card::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: var(--glow-border-highlight);
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  pointer-events: none;
  z-index: 1;
  transition: opacity var(--glow-transition-base) var(--glow-ease-default);
  opacity: 0.8;
}

.glow-card:hover {
  transform: translateY(var(--glow-hover-lift));
  box-shadow: var(--glow-card-shadow-hover), var(--glow-halo-sm);
}

.glow-card:hover::before {
  opacity: 1;
}

/* Card with no hover effect — still glass, still bordered */
.glow-card-static {
  position: relative;
  background-color: var(--glow-card-bg);
  border-radius: var(--glow-card-radius);
  box-shadow: var(--glow-card-shadow);
  -webkit-backdrop-filter: var(--glow-glass-blur);
          backdrop-filter: var(--glow-glass-blur);
  overflow: hidden;
  isolation: isolate;
}

.glow-card-static::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: var(--glow-border-highlight);
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  pointer-events: none;
  z-index: 1;
  opacity: 0.8;
}

/* Card padding variants */
.glow-card-padding {
  padding: var(--glow-card-padding);
}

.glow-card-padding-sm {
  padding: var(--glow-space-4);
}

.glow-card-padding-lg {
  padding: var(--glow-space-8);
}

/* Dark mode: raised glass tone */
.dark .glow-card,
.dark .glow-card-static {
  background-color: var(--glow-glass-bg);
}

/* === BUTTON COMPONENTS === */

.glow-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--glow-button-radius);
  padding: var(--glow-button-padding-y) var(--glow-button-padding-x);
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.25;
  text-decoration: none;
  cursor: pointer;
  border: none;
  transition: all var(--glow-transition-base) var(--glow-ease-default);
}

.glow-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Primary button — solid primary fill, highlighted border ring,
   cyan halo on hover. Relative positioning supports the gradient seam. */
.glow-btn-primary {
  position: relative;
  background-color: rgb(var(--color-primary-500));
  color: white;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.15),
    inset 0 1px 0 rgba(255, 255, 255, 0.20),
    0 8px 20px -8px rgba(var(--color-primary-500), 0.55);
}

.glow-btn-primary:hover:not(:disabled) {
  background-color: rgb(var(--color-primary-500));
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.28),
    0 12px 28px -8px rgba(var(--color-primary-500), 0.70),
    var(--glow-halo-md);
}

/* Glass secondary button — frosted pane with highlighted border.
   Uses two inset rings: light seam + subtle outer dark lift. */
.glow-btn-secondary {
  position: relative;
  background-color: var(--glow-glass-bg-raised);
  -webkit-backdrop-filter: var(--glow-glass-blur);
          backdrop-filter: var(--glow-glass-blur);
  color: var(--glow-color-text);
  box-shadow: inset 0 0 0 1px var(--glow-glass-border-bright);
}

.glow-btn-secondary:hover:not(:disabled) {
  background-color: var(--glow-glass-bg-raised);
  box-shadow:
    inset 0 0 0 1px rgb(var(--color-primary-400)),
    var(--glow-halo-sm);
}

.dark .glow-btn-secondary {
  background-color: rgba(255, 255, 255, 0.04);
  color: white;
}

.dark .glow-btn-secondary:hover:not(:disabled) {
  background-color: rgba(255, 255, 255, 0.08);
}

/* Ghost button */
.glow-btn-ghost {
  background-color: transparent;
  color: var(--glow-color-text);
}

.glow-btn-ghost:hover:not(:disabled) {
  background-color: rgb(var(--glow-n-100));
}

.dark .glow-btn-ghost {
  color: rgb(var(--glow-n-300));
}

.dark .glow-btn-ghost:hover:not(:disabled) {
  background-color: rgb(var(--glow-n-800));
}

/* Light button (for dark backgrounds) */
.glow-btn-light {
  background-color: white;
  color: rgb(var(--glow-n-700));
}

.glow-btn-light:hover:not(:disabled) {
  background-color: rgb(var(--glow-n-100));
}

/* Button size variants */
.glow-btn-sm {
  padding: var(--glow-space-1) var(--glow-space-3);
  font-size: 0.75rem;
}

.glow-btn-lg {
  padding: var(--glow-space-3) var(--glow-space-6);
  font-size: 1rem;
}

/* CoachX-style button - soft rounded */
.glow-btn-saturn {
  border-radius: var(--glow-radius-lg);
}

/* Slightly rounded button (for softer contexts) */
.glow-btn-rounded {
  border-radius: var(--glow-radius-full);
}

/* Outlined button */
.glow-btn-outline {
  background-color: transparent;
  border: 2px solid rgb(var(--glow-n-500));
  color: rgb(var(--glow-n-500));
}

.glow-btn-outline:hover:not(:disabled) {
  background-color: rgb(var(--glow-n-50));
  border-color: rgb(var(--glow-n-600));
  color: rgb(var(--glow-n-600));
}

.dark .glow-btn-outline {
  border-color: rgb(var(--glow-n-400));
  color: rgb(var(--glow-n-400));
}

.dark .glow-btn-outline:hover:not(:disabled) {
  background-color: rgba(var(--glow-n-900), 0.3);
  border-color: rgb(var(--glow-n-300));
  color: rgb(var(--glow-n-300));
}

/* CTA button with slide effect - CoachX rounded style */
.glow-btn-cta {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.875rem 1.75rem;
  background-color: rgb(var(--color-secondary-500));
  color: white;
  font-weight: 600;
  font-size: 0.9375rem;
  /* 2 rounded corners (top-left, bottom-right), 2 squared (top-right, bottom-left) */
  border-radius: 1.5rem 0.25rem 1.5rem 0.25rem;
  overflow: hidden;
  transition: all var(--glow-transition-base) var(--glow-ease-default);
}

.glow-btn-cta:hover {
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
  transform: translateY(-2px);
}

.glow-btn-cta .btn-text,
.glow-btn-cta .btn-icon {
  position: relative;
  z-index: 10;
}

.glow-btn-cta .btn-icon {
  transition: transform var(--glow-transition-base) var(--glow-ease-default);
}

.glow-btn-cta:hover .btn-icon {
  transform: translateX(4px);
}

/* Diagonal slide effect */
.glow-btn-cta .btn-slide {
  position: absolute;
  inset: 0;
  background-color: rgb(var(--color-secondary-600));
  border-radius: inherit;
  transform: translateX(-100%) skewX(-8deg);
  transform-origin: left center;
  transition: transform var(--glow-transition-slow) var(--glow-ease-default);
}

.glow-btn-cta:hover .btn-slide {
  transform: translateX(0) skewX(0deg);
}

/* Shine sweep effect on hover */
.glow-btn-cta::after {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 60%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.15), transparent);
  z-index: 11;
  transition: left 0.6s ease;
  pointer-events: none;
}

.glow-btn-cta:hover::after {
  left: 120%;
}

/* CTA button - dark variant (dark bg, for light backgrounds) */
.glow-btn-cta-dark {
  background-color: rgb(var(--glow-n-900));
  color: white;
}

.glow-btn-cta-dark:hover {
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.25);
}

.glow-btn-cta-dark .btn-slide {
  background-color: rgb(var(--glow-n-700));
}

/* CTA button - primary variant (blue) */
.glow-btn-cta-primary {
  background-color: rgb(var(--color-primary-600));
  color: white;
}

.glow-btn-cta-primary:hover {
  box-shadow: 0 8px 24px rgba(var(--color-primary-600), 0.3);
}

.glow-btn-cta-primary .btn-slide {
  background-color: rgb(var(--color-primary-700));
}

/* CTA button - secondary variant (orange) */
.glow-btn-cta-secondary {
  background-color: rgb(var(--color-secondary-500));
  color: white;
}

.glow-btn-cta-secondary:hover {
  box-shadow:
    0 8px 24px rgba(var(--color-secondary-500), 0.3),
    0 0 40px rgba(var(--color-secondary-500), 0.15);
}

.glow-btn-cta-secondary .btn-slide {
  background-color: rgb(var(--color-secondary-600));
}

/* Orange CTA glow on primary-color section backgrounds */
section[class*="bg-primary-"] .glow-btn-cta-secondary {
  box-shadow: 0 4px 16px rgba(var(--color-secondary-500), 0.25);
}

section[class*="bg-primary-"] .glow-btn-cta-secondary:hover {
  box-shadow:
    0 8px 32px rgba(var(--color-secondary-500), 0.4),
    0 0 60px rgba(var(--color-secondary-500), 0.2);
  transform: translateY(-3px);
}

/* CTA button - inverted variant (for dark cards) */
.glow-btn-cta-inverted {
  background-color: white;
  color: rgb(var(--glow-n-900));
}

.glow-btn-cta-inverted:hover {
  box-shadow: 0 8px 24px rgba(255, 255, 255, 0.2);
}

.glow-btn-cta-inverted .btn-slide {
  background-color: rgb(var(--glow-n-100));
}

.dark .glow-btn-cta-inverted {
  background-color: rgb(var(--glow-n-900));
  color: white;
}

.dark .glow-btn-cta-inverted:hover {
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
}

.dark .glow-btn-cta-inverted .btn-slide {
  background-color: rgb(var(--glow-n-800));
}

/* === ICON BADGE COMPONENTS === */

.glow-icon-badge {
  width: 48px;
  height: 48px;
  border-radius: var(--glow-radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform var(--glow-transition-base) var(--glow-ease-default);
}

.glow-icon-badge:hover {
  transform: scale(1.05);
}

.glow-icon-badge svg {
  width: 24px;
  height: 24px;
}

/* Icon badge color variants */
.glow-icon-badge-stone,
.glow-icon-badge-slate,
.glow-icon-badge-zinc,
.glow-icon-badge-neutral {
  background-color: rgb(var(--color-primary-50));
  color: rgb(var(--color-primary-600));
}

.glow-icon-badge-warm {
  background-color: rgb(var(--color-secondary-50));
  color: rgb(var(--color-secondary-600));
}

.glow-icon-badge-cool {
  background-color: rgb(var(--color-primary-50));
  color: rgb(var(--color-primary-500));
}

/* Dark mode icon badges */
.dark .glow-icon-badge-stone,
.dark .glow-icon-badge-slate,
.dark .glow-icon-badge-zinc,
.dark .glow-icon-badge-neutral {
  background-color: rgba(var(--color-primary-800), 0.4);
  color: rgb(var(--color-primary-400));
}

.dark .glow-icon-badge-warm {
  background-color: rgba(var(--color-secondary-800), 0.4);
  color: rgb(var(--color-secondary-400));
}

.dark .glow-icon-badge-cool {
  background-color: rgba(var(--color-primary-800), 0.4);
  color: rgb(var(--color-primary-300));
}

/* === BADGE/TAG COMPONENTS === */

.glow-badge {
  display: inline-flex;
  align-items: center;
  padding: var(--glow-space-1) var(--glow-space-3);
  font-size: 0.75rem;
  font-weight: 500;
  border-radius: var(--glow-radius-md);
  transition: all var(--glow-transition-fast) var(--glow-ease-default);
}

/* Default badge (gray) */
.glow-badge-default {
  background-color: rgb(var(--glow-n-100));
  color: rgb(var(--glow-n-700));
}

.dark .glow-badge-default {
  background-color: rgb(var(--glow-n-800));
  color: rgb(var(--glow-n-300));
}

/* Primary badge */
.glow-badge-primary {
  background-color: rgb(var(--glow-n-50));
  color: rgb(var(--glow-n-600));
}

.dark .glow-badge-primary {
  background-color: rgba(var(--glow-n-900), 0.3);
  color: rgb(var(--glow-n-400));
}

/* Tag (pill shaped) */
.glow-tag {
  display: inline-flex;
  align-items: center;
  padding: var(--glow-space-1) var(--glow-space-2);
  font-size: 0.75rem;
  font-weight: 500;
  border-radius: var(--glow-radius-full);
  background-color: rgb(var(--glow-n-100));
  color: rgb(var(--glow-n-600));
  transition: background-color var(--glow-transition-fast) var(--glow-ease-default),
              transform var(--glow-transition-fast) var(--glow-ease-default);
}

.glow-tag:hover {
  background-color: rgb(var(--glow-n-200));
  transform: translateY(-2px);
}

.dark .glow-tag {
  background-color: rgb(var(--glow-n-800));
  color: rgb(var(--glow-n-400));
}

.dark .glow-tag:hover {
  background-color: rgb(var(--glow-n-700));
}

/* === FAQ COMPONENTS === */

/* FAQ item container */
.glow-faq-item {
  transition: all var(--glow-transition-base) var(--glow-ease-default);
}

/* FAQ question hover effect */
.glow-faq-item:hover .glow-faq-question,
.glow-faq-item[aria-expanded="true"] .glow-faq-question,
[aria-expanded="true"] .glow-faq-question {
  color: rgb(var(--glow-n-600));
}

.dark .glow-faq-item:hover .glow-faq-question,
.dark .glow-faq-item[aria-expanded="true"] .glow-faq-question,
.dark [aria-expanded="true"] .glow-faq-question {
  color: rgb(var(--glow-n-400));
}

/* FAQ icon/indicator hover effects */
.glow-faq-item:hover .glow-faq-icon,
.glow-faq-item:hover .glow-faq-indicator {
  background-color: rgb(var(--glow-n-100));
  transform: scale(1.1);
}

.dark .glow-faq-item:hover .glow-faq-icon,
.dark .glow-faq-item:hover .glow-faq-indicator {
  background-color: rgb(var(--glow-n-900) / 0.3);
}

.glow-faq-icon,
.glow-faq-indicator {
  transition: background-color var(--glow-transition-base) var(--glow-ease-default),
              transform var(--glow-transition-base) var(--glow-ease-default);
}

/* FAQ toggle icon hover effects (for accordion style) */
.glow-faq-item:hover .glow-faq-toggle-icon,
[aria-expanded="true"] .glow-faq-toggle-icon {
  border-color: rgb(var(--glow-n-200));
  background-color: rgb(var(--glow-n-50));
}

.dark .glow-faq-item:hover .glow-faq-toggle-icon,
.dark [aria-expanded="true"] .glow-faq-toggle-icon {
  border-color: rgb(var(--glow-n-800));
  background-color: rgb(var(--glow-n-900) / 0.3);
}

.glow-faq-toggle-icon {
  transition: border-color var(--glow-transition-base) var(--glow-ease-default),
              background-color var(--glow-transition-base) var(--glow-ease-default);
}

/* === FEATURE COMPONENTS === */

/* Feature card hover effects */
.glow-feature-card,
.feature-card {
  transition: transform var(--glow-transition-base) var(--glow-ease-default),
              box-shadow var(--glow-transition-base) var(--glow-ease-default);
}

.glow-feature-card:hover,
.feature-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
}

/* Feature icon pulse animation on hover */
.glow-feature-icon {
  transition: transform var(--glow-transition-base) var(--glow-ease-default);
}

.glow-feature-card:hover .glow-feature-icon,
.feature-card:hover .glow-feature-icon {
  animation: glow-pulse 1s ease-in-out;
}

@keyframes glow-pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.1); }
}

/* === FORM INPUT COMPONENTS === */

/* Glass input — subtle frosted surface, primary glow ring on focus */
.glow-input {
  width: 100%;
  padding: var(--glow-space-3) var(--glow-space-4);
  background-color: var(--glow-input-bg);
  -webkit-backdrop-filter: var(--glow-glass-blur);
          backdrop-filter: var(--glow-glass-blur);
  border: 1px solid var(--glow-input-border);
  border-radius: var(--glow-input-radius);
  font-size: 0.875rem;
  color: var(--glow-color-text);
  transition:
    border-color var(--glow-transition-fast) var(--glow-ease-default),
    box-shadow var(--glow-transition-fast) var(--glow-ease-default),
    background-color var(--glow-transition-fast) var(--glow-ease-default);
}

.glow-input:focus {
  outline: none;
  border-color: rgb(var(--color-primary-400));
  box-shadow:
    0 0 0 3px rgba(var(--color-primary-500), 0.20),
    var(--glow-halo-sm);
}

.glow-input::placeholder {
  color: rgb(var(--glow-n-400));
}

.dark .glow-input {
  background-color: rgb(var(--glow-n-800));
  border-color: rgb(var(--glow-n-700));
  color: white;
}

.dark .glow-input::placeholder {
  color: rgb(var(--glow-n-500));
}

/* Textarea */
.glow-textarea {
  min-height: 100px;
  resize: vertical;
}

/* === LINK EXTENSIONS === */

/* Primary link (always colored) */
.glow-link-primary {
  color: rgb(var(--color-primary-600));
}

.glow-link-primary:hover {
  color: rgb(var(--color-primary-700));
}

.dark .glow-link-primary {
  color: rgb(var(--color-primary-400));
}

.dark .glow-link-primary:hover {
  color: rgb(var(--color-primary-300));
}

/* Link with arrow */
.glow-link-arrow::after {
  content: ' →';
  transition: transform var(--glow-transition-fast) var(--glow-ease-default);
  display: inline-block;
}

.glow-link-arrow:hover::after {
  transform: translateX(4px);
}

/* === AVATAR SIZE VARIANTS === */

.glow-avatar-xs {
  width: 1.5rem;
  height: 1.5rem;
}

.glow-avatar-sm {
  width: 2rem;
  height: 2rem;
}

.glow-avatar-md {
  width: 2.5rem;
  height: 2.5rem;
}

.glow-avatar-lg {
  width: 3rem;
  height: 3rem;
}

.glow-avatar-xl {
  width: 4rem;
  height: 4rem;
}

.glow-avatar-2xl {
  width: 6rem;
  height: 6rem;
}

/* ======================================
   GLOW SIGNATURE UTILITIES
   glass surfaces, highlighted borders, corner brackets, mono eyebrows.
   These are the new "Glow" personality classes — blocks should reach
   for these when they need the signature tech-glass treatment.
   ====================================== */

/* === GLASS SURFACE === */

/* Base glass pane — drop onto any div to make it a frosted panel.
   Pairs well with .glow-border-highlight on the same element. */
.glow-glass {
  background-color: var(--glow-glass-bg);
  -webkit-backdrop-filter: var(--glow-glass-blur);
          backdrop-filter: var(--glow-glass-blur);
  border: 1px solid var(--glow-glass-border);
  border-radius: var(--glow-radius-xl);
}

.glow-glass-raised {
  background-color: var(--glow-glass-bg-raised);
  -webkit-backdrop-filter: var(--glow-glass-blur-lg);
          backdrop-filter: var(--glow-glass-blur-lg);
  border: 1px solid var(--glow-glass-border-bright);
  border-radius: var(--glow-radius-xl);
  box-shadow: var(--glow-shadow-card);
}

/* Intense-glass surface — strongest blur + layered inner highlights
   for the hero focal card. Top edge picks up a bright "light catch",
   bottom carries a faint primary tint, all framed by two stacked
   1px rings. Combine with `.glow-glass` base; this class overrides
   the backdrop blur and adds the glass edges. */
.glow-glass-intense {
  /* Near-opaque dark fill — outer box blocks background glows almost
     entirely. Gradient gives subtle vertical variation so it still
     reads as glass, not as a flat panel. The `!important` wins over
     the base `.glow-glass` background-color token. */
  background:
    linear-gradient(180deg,
      rgba(18, 20, 28, 0.95) 0%,
      rgba(8, 10, 16, 0.97) 100%) !important;
  -webkit-backdrop-filter: blur(40px) saturate(140%);
          backdrop-filter: blur(40px) saturate(140%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.18),        /* top edge catch-light */
    inset 0 0 0 1px rgba(255, 255, 255, 0.05),      /* subtle full rim */
    inset 0 -1px 0 rgba(0, 0, 0, 0.40),             /* bottom shadow rim */
    inset 0 -26px 48px -24px rgba(var(--color-primary-500), 0.10);
}

/* === HIGHLIGHTED BORDER (gradient seam via mask trick) === */

.glow-border-highlight {
  position: relative;
  isolation: isolate;
}

.glow-border-highlight::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: var(--glow-border-highlight);
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  pointer-events: none;
  z-index: 1;
  transition: opacity var(--glow-transition-base) var(--glow-ease-default);
  opacity: 0.8;
}

.glow-border-highlight:hover::before {
  opacity: 1;
}

/* === CONIC ROTATING BORDER (for featured / hero CTA) === */

.glow-border-conic {
  position: relative;
  isolation: isolate;
  --glow-angle: 0deg;
}

.glow-border-conic::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1.5px;
  background: conic-gradient(
    from var(--glow-angle),
    rgb(var(--color-primary-500)) 0deg,
    rgba(255, 255, 255, 0.05) 80deg,
    rgba(255, 255, 255, 0.05) 280deg,
    rgb(var(--color-secondary-500)) 360deg
  );
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  pointer-events: none;
  z-index: 1;
  animation: glow-conic-spin 4s linear infinite;
}

@keyframes glow-conic-spin {
  to { --glow-angle: 360deg; }
}

/* === CORNER BRACKETS (L-shapes at four corners — control-panel accent) === */

.glow-corners {
  position: relative;
}

.glow-corners::before,
.glow-corners::after,
.glow-corners > .glow-corner-bl,
.glow-corners > .glow-corner-br {
  content: '';
  position: absolute;
  width: 14px;
  height: 14px;
  border-color: rgb(var(--color-primary-400));
  border-style: solid;
  pointer-events: none;
}

/* top-left */
.glow-corners::before {
  top: -1px;
  left: -1px;
  border-width: 2px 0 0 2px;
}

/* top-right */
.glow-corners::after {
  top: -1px;
  right: -1px;
  border-width: 2px 2px 0 0;
}

/* bottom-left — add child span.glow-corner-bl */
.glow-corners > .glow-corner-bl {
  bottom: -1px;
  left: -1px;
  border-width: 0 0 2px 2px;
}

/* bottom-right — add child span.glow-corner-br */
.glow-corners > .glow-corner-br {
  bottom: -1px;
  right: -1px;
  border-width: 0 2px 2px 0;
}

/* === CURSOR-REACTIVE SPOTLIGHT (used by JS to set --mx/--my) === */

.glow-spotlight {
  position: relative;
  isolation: isolate;
  --mx: 50%;
  --my: 50%;
}

.glow-spotlight::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(
    500px circle at var(--mx) var(--my),
    rgba(var(--color-primary-500), 0.18),
    transparent 45%
  );
  opacity: 0;
  transition: opacity var(--glow-transition-base) var(--glow-ease-default);
  pointer-events: none;
  z-index: 0;
}

.glow-spotlight:hover::after {
  opacity: 1;
}

/* === MONO EYEBROW / TECH LABEL === */

.glow-eyebrow-mono,
.glow-mono {
  font-family: var(--glow-font-mono);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgb(var(--color-primary-400));
}

.glow-mono-lg {
  font-family: var(--glow-font-mono);
  font-weight: 500;
  letter-spacing: 0.02em;
}

/* Stat number — oversized, tight, gradient fill */
.glow-stat-num {
  font-family: var(--font-family-heading);
  font-weight: 700;
  font-size: clamp(3rem, 6vw, 4.5rem);
  line-height: 1;
  letter-spacing: -0.03em;
  background: linear-gradient(
    135deg,
    rgb(var(--color-primary-300)) 0%,
    rgb(var(--color-secondary-400)) 100%
  );
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* === GLOW HALO UTILITIES === */

.glow-halo {
  box-shadow: var(--glow-halo-md);
}
.glow-halo-sm {
  box-shadow: var(--glow-halo-sm);
}
.glow-halo-lg {
  box-shadow: var(--glow-halo-lg);
}
.glow-halo-secondary {
  box-shadow: var(--glow-halo-secondary);
}

/* === GLOW ATMOSPHERE UTILITIES =======================================
   Research-driven ambient-glow stack (Linear / Vercel / Stripe patterns).
   The idea: multi-focal radials + noise texture + text/card halos
   combine into a volumetric atmosphere instead of one flat spotlight.

   Typical stack order inside a dark hero section:
     1. `<section class="... relative overflow-hidden bg-neutral-950">`
     2. `<div class="glow-ambient-field">`  — ambient 5-point radial field
     3. `<div class="glow-bg-blobs">`       — floating color blobs
     4. `<div class="glow-spotlight-burst">` — central focal glow
     5. `<div class="glow-noise">`          — fractal noise grain
     6. `<div class="glow-bg-grid">`        — optional dot grid
     7. content (heading uses `.glow-text-halo`; feature card wrapped in
        `.glow-bloom` sibling + `.glow-card-aura` box-shadow)
   ======================================================================= */

/* 5-point multi-focal radial field — the ambient bedrock. Alternating
   primary/secondary hues across different corners build a surrounding
   glow field (vs a single localized spotlight). Screen blend brightens
   additively over the canvas. */
.glow-ambient-field {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 900px 600px at 50% 10%, rgba(var(--color-primary-500), 0.45), transparent 55%),
    radial-gradient(ellipse 700px 500px at 85% 20%, rgba(var(--color-secondary-500), 0.22), transparent 60%),
    radial-gradient(ellipse 800px 600px at 15% 55%, rgba(var(--color-primary-400), 0.22), transparent 60%),
    radial-gradient(ellipse 1000px 700px at 70% 85%, rgba(var(--color-primary-500), 0.28), transparent 55%),
    radial-gradient(ellipse 600px 500px at 20% 95%, rgba(var(--color-secondary-500), 0.18), transparent 60%);
  mix-blend-mode: screen;
}

/* Central spotlight burst — bright core glow, usually sits over the
   hero's focal content (preview card / CTA). Two-stop radial = crisp
   core + soft falloff. */
.glow-spotlight-burst {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(
    closest-side,
    rgba(var(--color-primary-400), 0.65),
    rgba(var(--color-primary-500), 0.20) 38%,
    transparent 72%
  );
  filter: blur(8px);
  mix-blend-mode: screen;
}

/* Fractal noise grain — feTurbulence baked into a CSS data URL so blocks
   don't need to inline SVG. Kept subtle (opacity 0.10, overlay blend) so
   gradients read as atmospheric/volumetric rather than plasticky. */
.glow-noise {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.10;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='320' height='320'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  background-size: 320px 320px;
}

/* 3-layer text halo — primary cyan bloom so display headings participate
   in the atmosphere instead of floating as crisp shapes on top of it. */
.glow-text-halo {
  text-shadow:
    0 0 18px rgba(var(--color-primary-400), 0.35),
    0 0 36px rgba(var(--color-primary-500), 0.25),
    0 0 72px rgba(var(--color-primary-500), 0.18);
}

/* Card aura — 3-ring primary/secondary halo + ambient drop shadow.
   Drop onto any `.glow-card` / `.glow-glass` that should be the
   brightest object in its scene. */
.glow-card-aura {
  box-shadow:
    0 0 60px rgba(var(--color-primary-500), 0.45),
    0 0 140px rgba(var(--color-primary-500), 0.25),
    0 0 240px rgba(var(--color-secondary-500), 0.10),
    0 32px 64px -20px rgba(0, 0, 0, 0.70);
}

/* Bloom — dual-color halo behind a card or hero element. Place as an
   absolutely-positioned sibling inside a `position: relative` wrapper;
   `inset: -4rem` spreads the bloom beyond the card edges. */
.glow-bloom {
  position: absolute;
  inset: -4rem;
  pointer-events: none;
  background:
    radial-gradient(closest-side, rgba(var(--color-primary-500), 0.55), transparent 70%),
    radial-gradient(closest-side at 30% 70%, rgba(var(--color-secondary-500), 0.30), transparent 70%);
  filter: blur(32px);
  mix-blend-mode: screen;
}

/* === CARD MAGIC: rectangular bloom + traveling beam + open/reveal ===
   These utilities upgrade a static glass card into an animated, hero-
   worthy focal element: the card "opens" on mount, pulses with a
   rectangular glow bloom, and has a bright spotlight traveling around
   its border. Inner content rows appear with a staggered shimmer sweep.
   ================================================================== */

/* Rectangular breathing bloom — sharper than `.glow-bloom` (circular).
   The box shape matches the card, so the glow reads as a distinct
   rectangular aura rather than a soft circular halo. Used as a sibling
   `<div>` placed behind a card (same parent, `inset: -2rem` spread). */
.glow-bloom-rect {
  position: absolute;
  inset: -2rem;
  border-radius: 2rem;
  pointer-events: none;
  /* Radial two-color bloom — fades organically at the edges so the
     element shape never reads as a rectangular cover behind the card.
     Offset centers create a gradient that feels like light bouncing
     off the card rather than a solid rectangular halo. */
  background:
    radial-gradient(ellipse 70% 60% at 30% 40%, rgba(var(--color-primary-500), 0.55), transparent 75%),
    radial-gradient(ellipse 60% 70% at 75% 65%, rgba(var(--color-secondary-500), 0.35), transparent 75%);
  filter: blur(40px);
  mix-blend-mode: screen;
  opacity: 0.65;
  animation: glow-bloom-rect-breathe 3.6s ease-in-out infinite;
}

@keyframes glow-bloom-rect-breathe {
  0%, 100% { opacity: 0.55; transform: scale(1); }
  50%      { opacity: 0.95; transform: scale(1.04); }
}

/* Traveling border beam — a narrow bright arc orbits the rounded-rect
   border using the existing @property --glow-angle. Drop-shadow filter
   makes it glow outward beyond the 1px stroke. Pair with (or as a
   richer alternative to) `.glow-border-conic`. */
.glow-border-beam {
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
  isolation: isolate;
  --glow-angle: 0deg;
}

.glow-border-beam::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1.5px;
  /* Narrow bright arc (~15°) trailing into transparency — reads as a
     traveling spotlight rather than a full rotating gradient. */
  background: conic-gradient(
    from var(--glow-angle),
    transparent 0deg,
    transparent 340deg,
    rgb(var(--color-primary-300)) 352deg,
    rgb(var(--color-primary-200)) 358deg,
    transparent 360deg
  );
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  filter: drop-shadow(0 0 6px rgb(var(--color-primary-300)))
          drop-shadow(0 0 14px rgba(var(--color-primary-400), 0.6));
  animation: glow-conic-spin 3.5s linear infinite;
}

/* Opening reveal animation for a focal card. Default state is
   VISIBLE — animation is opt-in via `prefers-reduced-motion: no-preference`.
   This guarantees content shows in screenshot / design-mode contexts
   where animations may not play. */
.glow-card-open {
  /* visible by default */
}

@media (prefers-reduced-motion: no-preference) {
  .glow-card-open {
    /* Shorter opening reveal so the focal card lands alongside the
       heading rather than after all reveal-delayed content. */
    animation: glow-card-open 520ms cubic-bezier(0.22, 1, 0.36, 1) both;
  }
}

@keyframes glow-card-open {
  0% {
    opacity: 0;
    transform: scale(0.94);
    clip-path: inset(48% 6% 48% 6% round 2rem);
    filter: blur(6px);
  }
  45% {
    opacity: 1;
    clip-path: inset(0 6% 0 6% round 2rem);
    filter: blur(0);
  }
  100% {
    opacity: 1;
    transform: scale(1);
    clip-path: inset(0 0 0 0 round 2rem);
    filter: blur(0);
  }
}

/* Staggered row reveal + shimmer sweep. Default state VISIBLE;
   the entrance animation only runs when motion is allowed. */
.glow-row-appear {
  position: relative;
  overflow: hidden;
}

@media (prefers-reduced-motion: no-preference) {
  .glow-row-appear {
    opacity: 0;
    transform: translateY(14px);
    animation: glow-row-appear 450ms cubic-bezier(0.22, 1, 0.36, 1) forwards;
    /* Rows cascade starting 350ms after card-open begins — lands
       each row right as the card finishes expanding. */
    animation-delay: calc(var(--i, 0) * 90ms + 350ms);
  }
}

@keyframes glow-row-appear {
  to { opacity: 1; transform: translateY(0); }
}

/* Shimmer sweep — only shows when motion is allowed; hidden by default
   so it never obscures text. */
.glow-row-appear::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(
    100deg,
    transparent 0%,
    transparent 40%,
    rgba(var(--color-primary-200), 0.45) 50%,
    transparent 60%,
    transparent 100%
  );
  transform: translateX(120%);
  pointer-events: none;
  mix-blend-mode: screen;
}

@media (prefers-reduced-motion: no-preference) {
  .glow-row-appear::after {
    transform: translateX(-120%);
    animation: glow-row-shimmer 850ms cubic-bezier(0.22, 1, 0.36, 1) forwards;
    /* Shimmer fires right after each row lands */
    animation-delay: calc(var(--i, 0) * 90ms + 550ms);
  }
}

@keyframes glow-row-shimmer {
  0%   { transform: translateX(-120%); }
  100% { transform: translateX(120%); }
}

/* Reduced-motion: stop continuous loops (entrance animations are
   already opt-in via `prefers-reduced-motion: no-preference`). */
@media (prefers-reduced-motion: reduce) {
  .glow-border-conic::before,
  .glow-border-beam::before,
  .glow-bg-blobs::before,
  .glow-bg-blobs::after,
  .glow-bloom-rect {
    animation: none;
  }
}

/* Design mode (screenshot capture) — kill all animations and force
   final visible state so captures are deterministic and never show
   mid-animation frames (e.g. clipped card, hidden rows). */
html.design-mode .glow-card-open,
html.design-mode .glow-row-appear,
html.design-mode .glow-border-conic::before,
html.design-mode .glow-border-beam::before,
html.design-mode .glow-bg-blobs::before,
html.design-mode .glow-bg-blobs::after,
html.design-mode .glow-bloom-rect {
  animation: none !important;
}

html.design-mode .glow-card-open,
html.design-mode .glow-row-appear {
  opacity: 1 !important;
  transform: none !important;
  clip-path: none !important;
  filter: none !important;
}

html.design-mode .glow-row-appear::after {
  opacity: 0;
}

/* === ANIMATED LIGHT TRAILS ===========================================
   Drop `.glow-line-flow` onto any SVG <path> (or CSS-styled stroke
   element) to make a bright light packet travel along the path length.
   Works by animating stroke-dashoffset — a short dash "flies" through
   the long gap between dashes, creating a moving spotlight effect.

   Pair with `stroke-dasharray` on the path inline (e.g. "60 2000") —
   first number = visible segment length, second = gap before the next.

   Use `animation-delay` inline to stagger multiple trails so they don't
   all pulse in sync.
   ======================================================================= */

.glow-line-flow {
  /* static default keeps the path visible via its own stroke; animation
     only runs under prefers-reduced-motion: no-preference */
}

@media (prefers-reduced-motion: no-preference) {
  .glow-line-flow {
    animation: glow-line-flow 2s linear infinite;
  }
}

/* Pulse travels FROM the path end (viewport edge) TO the path start
   (card edge) — lines read as signals converging on the hub.
   Offset `-860` matches the 60+800=860px dash cycle used by consuming
   paths, so the loop is seamless and ~2 pulses are visible on each
   ~1700px trail at any moment. */
@keyframes glow-line-flow {
  from { stroke-dashoffset: -860; }
  to   { stroke-dashoffset: 0; }
}

/* Slower variant — for the inner/capillary trails */
@media (prefers-reduced-motion: no-preference) {
  .glow-line-flow-slow {
    animation: glow-line-flow 3.2s linear infinite;
  }
}

/* Ambient pulse — gentle breathing on opacity (for the blurred
   underlayer of a trail so the whole line feels alive). */
.glow-line-pulse {}

@media (prefers-reduced-motion: no-preference) {
  .glow-line-pulse {
    animation: glow-line-pulse 4.5s ease-in-out infinite;
  }
}

@keyframes glow-line-pulse {
  0%, 100% { opacity: 0.55; }
  50%      { opacity: 1; }
}

html.design-mode .glow-line-flow,
html.design-mode .glow-line-flow-slow,
html.design-mode .glow-line-pulse {
  animation: none !important;
}

/* === END ATMOSPHERE UTILITIES === */

/* ======================================
   END GLOW SIGNATURE UTILITIES
   ====================================== */

/* ======================================
   END REUSABLE COMPONENT CLASSES
   ====================================== */

/* Header and Navigation — glass bar floating over canvas */
.glow-header {
  font-family: var(--font-family-body);
  background-color: rgba(15, 17, 24, 0.55);
  -webkit-backdrop-filter: var(--glow-glass-blur);
          backdrop-filter: var(--glow-glass-blur);
  border-bottom: 1px solid var(--glow-glass-border);
}

.dark .glow-header {
  background-color: rgba(7, 9, 15, 0.65);
  border-bottom-color: var(--glow-glass-border);
}

.glow-nav {
  transition: background-color var(--glow-transition-slow) var(--glow-ease-default);
}

.glow-nav-content {
  position: relative;
}

.glow-section {
  max-width: 85rem;
  margin-left: auto;
  margin-right: auto;
  width: 100%;
  padding-left: 1rem;
  padding-right: 1rem;
}

/* For sections with backgrounds that need to be full width */
.glow-section-wrapper {
  width: 100%;
}

.glow-section-wrapper.has-background {
  padding-left: 0;
  padding-right: 0;
}

.glow-section-wrapper.has-background .glow-section {
  padding-left: 1rem;
  padding-right: 1rem;
}


/* Navigation links - White on primary bg */
.glow-nav-link {
  white-space: nowrap;
  color: rgba(255, 255, 255, 0.85);
  text-decoration: none;
  transition: color var(--glow-transition-base) var(--glow-ease-default), background-color var(--glow-transition-base) var(--glow-ease-default);
  padding: 0.5rem 0.875rem;
  font-size: 0.9375rem;
  font-weight: 500;
  border-radius: var(--glow-radius-lg);
}

.dark .glow-nav-link {
  white-space: nowrap;
  color: rgba(255, 255, 255, 0.85);
}

.glow-nav-link:hover {
  color: white;
  background-color: rgba(255, 255, 255, 0.1);
}

.dark .glow-nav-link:hover {
  color: white;
  background-color: rgba(255, 255, 255, 0.1);
}

/* Mobile nav links */
.glow-mobile-nav-link,
.glow-mobile-submenu-link {
  transition: background-color var(--glow-transition-base) var(--glow-ease-default), color var(--glow-transition-base) var(--glow-ease-default);
  padding: 0.75rem 1.25rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: rgb(var(--glow-n-700));
  display: flex;
  align-items: center;
}

.dark .glow-mobile-nav-link,
.dark .glow-mobile-submenu-link {
  color: rgb(var(--glow-n-300));
}

.glow-mobile-nav-link:hover,
.glow-mobile-submenu-link:hover {
  background-color: rgb(var(--glow-n-50));
}

.dark .glow-mobile-nav-link:hover,
.dark .glow-mobile-submenu-link:hover {
  background-color: rgb(var(--glow-n-800));
}

.glow-mobile-submenu-link {
  padding-left: 2rem;
}

.glow-mobile-trigger {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  color: rgb(var(--glow-n-700));
  background-color: transparent;
  border-radius: var(--glow-radius-md);
  cursor: pointer;
  transition: background-color var(--glow-transition-base) var(--glow-ease-default);
}

.glow-mobile-trigger:hover {
  background-color: rgb(var(--glow-n-100));
}

.dark .glow-mobile-trigger {
  color: rgb(var(--glow-n-300));
}

.dark .glow-mobile-trigger:hover {
  background-color: rgb(var(--glow-n-800));
}

/* Menu component classes */
.glow-site-name {
  color: white;
}
.dark .glow-site-name {
  color: white;
}

.glow-cta-outline {
  color: rgb(var(--glow-n-900));
  border-color: rgb(var(--glow-n-900));
}
.glow-cta-outline:hover {
  background-color: rgb(var(--glow-n-900));
  color: white;
}
.dark .glow-cta-outline {
  color: white;
  border-color: white;
}
.dark .glow-cta-outline:hover {
  background-color: white;
  color: rgb(var(--glow-n-900));
}

.glow-menu-toggle {
  color: white;
}
.dark .glow-menu-toggle {
  color: white;
}

.glow-mobile-panel {
  background-color: white;
}
.dark .glow-mobile-panel {
  background-color: rgb(var(--glow-n-950));
}

.glow-close-button {
  color: rgb(var(--glow-n-400));
}
.glow-close-button:hover {
  color: rgb(var(--glow-n-600));
}

.glow-mobile-submenu-bg {
  background-color: rgb(var(--glow-n-50));
}
.dark .glow-mobile-submenu-bg {
  background-color: rgb(var(--glow-n-800));
}

/* === INNOVATIVE HEADER: Transparent-to-Solid + Scroll Progress === */

.glow-header-transparent {
  background-color: transparent !important;
  box-shadow: none;
  border-bottom-color: transparent;
}

.dark .glow-header-transparent {
  background-color: transparent !important;
}

/* Scrolled header — glass intensifies with ink darkening + light seam */
.glow-header-solid {
  background-color: rgba(15, 17, 24, 0.75) !important;
  backdrop-filter: var(--glow-glass-blur-lg);
  -webkit-backdrop-filter: var(--glow-glass-blur-lg);
  border-bottom: 1px solid var(--glow-glass-border-bright);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.04) inset,
    0 16px 32px -16px rgba(0, 0, 0, 0.50);
}

.dark .glow-header-solid {
  background-color: rgba(7, 9, 15, 0.82) !important;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.06) inset,
    0 20px 40px -20px rgba(0, 0, 0, 0.70);
}

/* Scroll progress gradient bar */
.glow-scroll-progress {
  transition: none;
  will-change: transform;
}

/* Mega menu hover bridge — invisible area between trigger and dropdown panel */
[data-mega-trigger]::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1rem;
  height: 1rem;
}

/* Nav link animated underline — consistent position via calc from bottom of text */
.glow-nav-link-animated {
  position: relative;
}

.glow-nav-underline {
  position: absolute;
  bottom: 0.25rem;
  left: 50%;
  width: 0;
  height: 2px;
  background: linear-gradient(90deg, rgba(255,255,255,0.6), rgb(var(--color-secondary-400)));
  border-radius: 1px;
  transition: width 0.3s ease, left 0.3s ease;
}

.glow-nav-link-animated:hover .glow-nav-underline {
  width: 70%;
  left: 15%;
}

/* === HERO: Editorial Full-Bleed Layout === */

/* Gradient blobs */
.glow-hero-blob-1 {
  background: radial-gradient(circle, rgb(var(--color-primary-300)), transparent 70%);
  animation: glow-blob-float 12s ease-in-out infinite;
}
.glow-hero-blob-2 {
  background: radial-gradient(circle, rgb(var(--color-secondary-300)), transparent 70%);
  animation: glow-blob-float 16s ease-in-out infinite reverse;
}
.dark .glow-hero-blob-1 {
  background: radial-gradient(circle, rgb(var(--color-primary-700)), transparent 70%);
}
.dark .glow-hero-blob-2 {
  background: radial-gradient(circle, rgb(var(--color-secondary-700)), transparent 70%);
}

@keyframes glow-blob-float {
  0%, 100% { transform: translate(0, 0) scale(1); }
  33% { transform: translate(30px, -20px) scale(1.05); }
  66% { transform: translate(-15px, 15px) scale(0.95); }
}

/* Vertical side text */
.glow-hero-vertical-text {
  writing-mode: vertical-rl;
  text-orientation: mixed;
  transform: rotate(180deg);
  letter-spacing: 0.25em;
}

/* Oversized display heading — larger than standard h1 */
.glow-hero-display-heading {
  font-size: clamp(2.5rem, 6vw, 5.5rem);
  line-height: 1.0;
  letter-spacing: -0.03em;
}

/* Pulse dot for badge */
.glow-hero-pulse-dot {
  animation: glow-pulse-dot 2s ease-in-out infinite;
}
@keyframes glow-pulse-dot {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.4; transform: scale(0.7); }
}

/* Info card with color background */
.glow-hero-info-card {
  transition: transform var(--glow-transition-slow) var(--glow-ease-out),
              box-shadow var(--glow-transition-slow) var(--glow-ease-out);
}
.glow-hero-info-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 32px rgba(var(--color-primary-600), 0.3);
}

/* Marquee infinite scroll strip */
.glow-hero-marquee {
  display: flex;
  will-change: transform;
}

/* Bento card tilt interactions */
.glow-bento-card {
  will-change: transform;
  transition: transform 0.15s ease;
}
.glow-bento-glow {
  border-radius: inherit;
}

/* Scroll-down indicator pulse */
.glow-scroll-dot {
  animation: glow-scroll-pulse 2s ease-in-out infinite;
}
@keyframes glow-scroll-pulse {
  0%, 100% { transform: translateY(0); opacity: 0.5; }
  50% { transform: translateY(6px); opacity: 1; }
}

.glow-border {
  border-color: rgb(var(--glow-n-100));
}
.dark .glow-border {
  border-color: rgb(var(--glow-n-800));
}

.glow-icon {
  color: rgba(255, 255, 255, 0.6);
}

/* Mega menu styling */
.glow-mega-menu-item {
  transition: background-color var(--glow-transition-base) var(--glow-ease-default), transform var(--glow-transition-base) var(--glow-ease-default);
  padding: 1rem;
  display: flex;
}

.glow-mega-menu-item:hover {
  transform: translateX(2px);
  background-color: rgb(var(--glow-n-50));
}

.dark .glow-mega-menu-item:hover {
  background-color: rgb(var(--glow-n-800));
}

/* Dropdown styling */
.glow-dropdown {
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: opacity var(--glow-transition-slow) var(--glow-ease-default), transform var(--glow-transition-slow) var(--glow-ease-default), visibility var(--glow-transition-slow) var(--glow-ease-default);
}

.glow-dropdown-item {
  color: rgb(var(--glow-n-700));
  transition: background-color var(--glow-transition-base) var(--glow-ease-default), color var(--glow-transition-base) var(--glow-ease-default);
  display: block;
  padding: 0.5rem 1rem;
  font-size: 0.875rem;
}

.glow-dropdown-item:hover {
  background-color: rgb(var(--glow-n-100));
  color: rgb(var(--glow-n-600));
}

.dark .glow-dropdown-item {
  color: rgb(var(--glow-n-200));
}

.dark .glow-dropdown-item:hover {
  background-color: rgb(var(--glow-n-700));
  color: rgb(var(--glow-n-400));
}

/* Links */
.glow-link {
  color: rgb(var(--glow-n-700));
  text-decoration: none;
  transition: color var(--glow-transition-base) var(--glow-ease-default);
  font-weight: 500;
}

.glow-link:hover {
  color: rgb(var(--glow-n-600));
}

.dark .glow-link {
  color: rgb(var(--glow-n-300));
}

.dark .glow-link:hover {
  color: rgb(var(--glow-n-400));
}

/* Light text links for dark backgrounds */
.glow-link-light {
  color: white;
  transition: opacity var(--glow-transition-base) var(--glow-ease-default);
}

/* Card header styling */
.glow-card-header {
  display: block;
  padding: 1.5rem;
  background-color: rgba(var(--glow-n-50), 1);
  border-bottom: 1px solid rgba(var(--glow-n-100), 1);
}

/* Ensure proper spacing for title and prevent truncation */
.glow-card-header h3 {
  white-space: normal;
  overflow: visible;
  text-overflow: initial;
  word-wrap: break-word;
  line-height: 1.4;
}

/* Ensure proper layout for the flex container inside card header */
.glow-card-header > div {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  flex-wrap: nowrap;
  margin-bottom: 0.75rem;
}

/* Dark mode styling */
.dark .glow-card-header {
  background-color: rgba(var(--glow-n-900), 0.3);
  border-bottom: 1px solid rgba(var(--glow-n-800), 0.7);
}

.glow-link-light:hover {
  opacity: 0.8;
}

/* Common components */
.glow-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--glow-button-radius);
  transition: all var(--glow-transition-base) var(--glow-ease-default);
  padding: var(--glow-button-padding-y) var(--glow-button-padding-x);
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.25;
}

.glow-button-primary {
  background-color: rgb(var(--glow-n-500));
  color: white;
}

.glow-button-primary:hover {
  background-color: rgb(var(--glow-n-600));
}

.glow-button-light {
  background-color: white;
  color: rgb(var(--glow-n-700));
}

.glow-button-light:hover {
  background-color: rgb(var(--glow-n-100));
}

.glow-button-secondary {
  background-color: transparent;
  border: 1px solid rgb(var(--glow-n-300));
  color: rgb(var(--glow-n-700));
}

.glow-button-secondary:hover {
  background-color: rgb(var(--glow-n-50));
}

.dark .glow-button-secondary {
  border-color: rgba(255, 255, 255, 0.3);
  color: white;
}

.dark .glow-button-secondary:hover {
  border-color: white;
  background-color: rgba(255, 255, 255, 0.1);
}

/* Typography */
.glow-heading {
  font-weight: 600;
  line-height: 1.2;
}

/* Heading accent — Glow's gradient-fill emphasis (same treatment as
   `span[class*="italic"]` above, exposed via `<em>` and `.glow-heading-accent`). */
.glow-heading-accent,
.glow-heading em {
  font-style: normal;
  font-weight: 700;
  background: linear-gradient(
    135deg,
    rgb(var(--color-primary-400)) 0%,
    rgb(var(--color-secondary-400)) 100%
  );
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
          color: transparent;
  display: inline;
}

/* No pseudo-decoration — gradient fill is the accent.
   Legacy `::after` rule removed from the hand-drawn SVG treatment. */
.glow-heading-accent::after,
.glow-heading em::after {
  content: none;
}

.dark .glow-heading-accent,
.dark .glow-heading em {
  background: linear-gradient(
    135deg,
    rgb(var(--color-primary-300)) 0%,
    rgb(var(--color-secondary-300)) 100%
  );
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
}

.dark .glow-heading-accent::after,
.dark .glow-heading em::after {
  /* no-op — accent is gradient text fill, not underline */
  background-image: none;
}

/* Heading on dark/colored backgrounds — keep gradient fill readable.
   Primary-300 is brighter so it stays legible over primary backgrounds. */
.glow-heading-on-dark em,
.glow-heading-on-dark .glow-heading-accent {
  background: linear-gradient(
    135deg,
    rgb(var(--color-primary-200)) 0%,
    rgb(var(--color-secondary-300)) 100%
  );
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
          color: transparent;
}

.glow-heading-on-dark em::after,
.glow-heading-on-dark .glow-heading-accent::after {
  background-image: none;
}

/* Accent light variant — solid white with secondary glow shadow (for
   colored/dark backgrounds where gradient clipping could fail). */
.glow-heading-accent-light {
  font-style: normal;
  font-weight: 700;
  color: white;
  text-shadow: 0 0 24px rgba(var(--color-secondary-400), 0.55);
  display: inline;
}

.glow-heading-accent-light::after {
  content: none;
}

.glow-heading-secondary {
  font-family: var(--font-family-heading);
  font-size: 1.125rem;
  font-weight: 600;
  text-transform: uppercase;
  margin-bottom: 1rem;
  color: rgb(var(--glow-n-900));
}

.glow-text {
  color: rgb(var(--glow-n-700));
  line-height: 1.5;
}

.glow-text-body {
  font-size: 0.875rem;
  color: rgb(var(--glow-n-600));
  line-height: 1.5;
  font-weight: normal;
}

.glow-text-accent {
  font-size: 0.875rem;
  font-weight: 500;
  text-transform: uppercase;
  color: rgb(var(--glow-n-900));
}

.glow-text-label {
  font-size: 0.75rem;
  font-weight: 500;
  text-transform: uppercase;
  color: rgb(var(--glow-n-900));
}

.glow-text-meta {
  font-size: 0.875rem;
  font-weight: 500;
  color: rgb(var(--glow-n-700));
}

.glow-copyright {
  font-size: 0.75rem;
  color: rgb(var(--glow-n-500));
  text-align: center;
}

/* Section title components */

/* CoachX-style badge - soft rounded pill */
.glow-pill-badge {
  display: inline-flex;
  align-items: center;
  padding: 0.375rem 1rem;
  background-color: rgb(var(--color-secondary-50));
  border: 1px solid rgb(var(--color-secondary-200));
  border-radius: var(--glow-radius-full);
  margin-bottom: 1.25rem;
}

.glow-pill-badge p,
.glow-pill-badge span {
  color: rgb(var(--color-secondary-600));
  font-size: 0.6875rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

.dark .glow-pill-badge {
  background-color: rgba(var(--color-secondary-900), 0.3);
  border-color: rgb(var(--color-secondary-800));
}

.dark .glow-pill-badge p,
.dark .glow-pill-badge span {
  color: rgb(var(--color-secondary-400));
}

/* CoachX-style gradient overlay - subtle, clean gradient */
.glow-gradient-warm {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background:
    linear-gradient(180deg, rgb(var(--glow-n-50) / 0.8) 0%, transparent 30%),
    linear-gradient(0deg, rgb(var(--glow-n-100) / 0.5) 0%, transparent 20%);
  pointer-events: none;
}

.dark .glow-gradient-warm {
  background:
    linear-gradient(180deg, rgb(var(--glow-n-900) / 0.6) 0%, transparent 30%),
    linear-gradient(0deg, rgb(var(--glow-n-800) / 0.4) 0%, transparent 20%);
}

/* Clean gradient - linear progression */
.glow-gradient-architectural {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 0%, rgb(var(--glow-n-50) / 0.95) 100%);
  pointer-events: none;
}

.dark .glow-gradient-architectural {
  background: linear-gradient(180deg, transparent 0%, rgb(var(--glow-n-900) / 0.95) 100%);
}

/* CoachX backgrounds - using injected gray palette */
.glow-colorful-bg-1,
.glow-colorful-bg-4,
.glow-colorful-bg-7 { background-color: rgb(var(--glow-n-50)); }

.glow-colorful-bg-2,
.glow-colorful-bg-5,
.glow-colorful-bg-8 { background-color: rgb(var(--glow-n-100)); }

.glow-colorful-bg-3,
.glow-colorful-bg-6 { background-color: rgb(var(--glow-n-200)); }

.dark .glow-colorful-bg-1,
.dark .glow-colorful-bg-4,
.dark .glow-colorful-bg-7 { background-color: rgb(var(--glow-n-900)); }

.dark .glow-colorful-bg-2,
.dark .glow-colorful-bg-5,
.dark .glow-colorful-bg-8 { background-color: rgb(var(--glow-n-800)); }

.dark .glow-colorful-bg-3,
.dark .glow-colorful-bg-6 { background-color: rgb(var(--glow-n-700)); }

/* CoachX-style accent text - hand-drawn orange underline */
.glow-accent-text {
  position: relative;
  display: inline;
  font-style: normal;
  font-weight: 700;
  color: inherit;
}

.glow-accent-text::after {
  content: '';
  position: absolute;
  left: -2%;
  bottom: -0.25em;
  width: 104%;
  height: 0.45em;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 500 45' preserveAspectRatio='none'%3E%3Cpath d='M2 20 C30 12, 100 8, 200 10 C300 12, 400 10, 460 14 C480 15, 490 17, 495 19 C490 20, 480 19, 460 18 C400 16, 300 18, 200 16 C100 14, 30 18, 2 26 Z' fill='%23f97316'/%3E%3Cpath d='M25 33 C60 27, 110 24, 190 26 C260 28, 310 25, 370 28 C390 29, 398 31, 400 33 C398 34, 390 33, 370 32 C310 29, 260 32, 190 30 C110 28, 60 31, 25 37 Z' fill='%23f97316' opacity='0.8'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  pointer-events: none;
}

.dark .glow-accent-text {
  color: inherit;
}

.dark .glow-accent-text::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 500 45' preserveAspectRatio='none'%3E%3Cpath d='M2 20 C30 12, 100 8, 200 10 C300 12, 400 10, 460 14 C480 15, 490 17, 495 19 C490 20, 480 19, 460 18 C400 16, 300 18, 200 16 C100 14, 30 18, 2 26 Z' fill='%23fb923c'/%3E%3Cpath d='M25 33 C60 27, 110 24, 190 26 C260 28, 310 25, 370 28 C390 29, 398 31, 400 33 C398 34, 390 33, 370 32 C310 29, 260 32, 190 30 C110 28, 60 31, 25 37 Z' fill='%23fb923c' opacity='0.8'/%3E%3C/svg%3E");
}

/* On dark/colored backgrounds - white text + orange underline */
.glow-heading-on-dark .glow-accent-text {
  color: white;
}

.glow-heading-on-dark .glow-accent-text::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 500 45' preserveAspectRatio='none'%3E%3Cpath d='M2 20 C30 12, 100 8, 200 10 C300 12, 400 10, 460 14 C480 15, 490 17, 495 19 C490 20, 480 19, 460 18 C400 16, 300 18, 200 16 C100 14, 30 18, 2 26 Z' fill='%23f97316'/%3E%3Cpath d='M25 33 C60 27, 110 24, 190 26 C260 28, 310 25, 370 28 C390 29, 398 31, 400 33 C398 34, 390 33, 370 32 C310 29, 260 32, 190 30 C110 28, 60 31, 25 37 Z' fill='%23f97316' opacity='0.8'/%3E%3C/svg%3E");
}

/* CoachX accent highlight - subtle emphasis with primary color */
.glow-accent-highlight {
  font-weight: 500;
  color: rgb(var(--color-primary-700));
  padding: 0.125em 0.5em;
  margin: 0 -0.125em;
  background-color: rgb(var(--color-primary-50));
  border-radius: var(--glow-radius-md);
}

.dark .glow-accent-highlight {
  color: rgb(var(--color-primary-200));
  background-color: rgb(var(--color-primary-900));
}

/* CoachX-style section badge - soft rounded with primary color */
.glow-section-badge {
  display: inline-block;
  padding: 0.375rem 1rem;
  background-color: rgb(var(--color-primary-50));
  border-radius: var(--glow-radius-full);
  border-bottom: none;
  margin-bottom: 1.25rem;
}

.glow-section-badge p {
  color: rgb(var(--color-primary-600));
  font-size: 0.75rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.12em;
}

.glow-section-title {
  font-family: var(--font-family-heading);
  font-size: 1.875rem;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: rgb(var(--glow-n-900));
  margin-bottom: 1rem;
}

.glow-section-subtitle {
  font-size: 1.25rem;
  color: rgb(var(--color-secondary-600));
  margin-top: 1rem;
  max-width: 42rem;
  margin-left: auto;
  margin-right: auto;
}

/* Utilities */
.glow-container {
  width: 100%;
  max-width: clamp(60rem, 80vw, 90rem);
  margin-left: auto;
  margin-right: auto;
  padding-left: 1rem;
  padding-right: 1rem;
}

@media (min-width: 640px) {
  .glow-container {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }
}

@media (min-width: 1024px) {
  .glow-container {
    padding-left: 2rem;
    padding-right: 2rem;
  }
}

/* Stats Components */
.glow-stats-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-auto-rows: minmax(140px, auto);
  gap: 16px;
}

.glow-stat-card {
  background-color: var(--glow-color-surface);
  border-radius: var(--glow-card-radius);
  box-shadow: var(--glow-shadow-md);
  padding: var(--glow-space-5);
  transform: translateY(0);
  transition: transform var(--glow-transition-slow) var(--glow-ease-default), box-shadow var(--glow-transition-slow) var(--glow-ease-default);
}

.glow-stat-card:hover {
  transform: translateY(var(--glow-hover-lift));
  box-shadow: var(--glow-shadow-xl);
}

/* Footer Components */
.glow-footer {
  background-color: white;
  border-top: 1px solid rgb(var(--glow-n-200));
  color: rgb(var(--glow-n-800));
  padding-top: 2.5rem;
  padding-bottom: 1.5rem;
  margin-top: auto;
  width: 100%;
}

.glow-footer-grid {
  display: grid;
  grid-template-columns: repeat(1, minmax(0, 1fr));
  gap: 2rem;
  margin-bottom: 2rem;
}

@media (min-width: 768px) {
  .glow-footer-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (min-width: 1024px) {
  .glow-footer-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.glow-footer-col {
  display: flex;
  flex-direction: column;
}

.glow-footer-copyright {
  padding-top: 1.5rem;
  border-top: 1px solid rgb(var(--glow-n-200));
  text-align: center;
}

.dark .glow-footer {
  background-color: rgb(var(--glow-n-900));
  border-color: rgb(var(--glow-n-800));
  color: rgb(var(--glow-n-100));
}

.dark .glow-footer-copyright {
  border-color: rgb(var(--glow-n-700));
}

/* CoachX-style footer - clean subtle background */
.glow-footer-saturn {
  background: linear-gradient(to bottom, var(--glow-color-surface) 0%, rgb(var(--glow-n-50)) 100%);
  border-top: 1px solid rgb(var(--glow-n-200));
}

.glow-footer-saturn .glow-heading-secondary {
  color: rgb(var(--glow-n-900));
  font-weight: 700;
}

.glow-footer-saturn .glow-link {
  color: rgb(var(--glow-n-500));
}

.glow-footer-saturn .glow-link:hover {
  color: rgb(var(--glow-n-900));
}

/* CoachX social icons (no background circle) */
.glow-social-icon-saturn {
  color: rgb(var(--glow-n-500));
  background: none;
  width: auto;
  height: auto;
  transition: color var(--glow-transition-base) var(--glow-ease-default);
}

.glow-social-icon-saturn:hover {
  color: rgb(var(--glow-n-600));
}

.dark .glow-social-icon-saturn {
  color: rgb(var(--glow-n-400));
}

.dark .glow-social-icon-saturn:hover {
  color: rgb(var(--glow-n-300));
}

/* CoachX newsletter input with icon */
.glow-newsletter-input {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.glow-newsletter-input .glow-input {
  flex: 1;
  border: 1px solid rgb(var(--glow-n-300));
  border-radius: 8px;
  padding-left: 2.5rem;
  background-color: white;
}

.glow-newsletter-input .glow-input-icon {
  position: absolute;
  left: 0.75rem;
  color: rgb(var(--glow-n-400));
}

.glow-newsletter-input .glow-btn-send {
  width: 44px;
  height: 44px;
  border-radius: var(--glow-radius-full);
  background-color: rgb(var(--glow-n-500));
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.glow-newsletter-input .glow-btn-send:hover {
  background-color: rgb(var(--glow-n-600));
}

/* Footer dark navy variant (alternative) */
.glow-footer-dark {
  background-color: rgb(var(--glow-n-900));
  border-top: none;
  color: rgb(var(--glow-n-100));
}

.glow-footer-dark .glow-heading-secondary {
  color: white;
}

.glow-footer-dark .glow-link {
  color: rgba(255, 255, 255, 0.7);
}

.glow-footer-dark .glow-link:hover {
  color: white;
}

.glow-footer-dark .glow-social-icon {
  color: rgb(var(--glow-n-500));
  background: none;
}

.glow-footer-dark .glow-social-icon:hover {
  color: rgb(var(--glow-n-400));
}

/* Dark mode support */
.dark .glow-heading {
  color: rgb(var(--glow-n-50));
}

.dark .glow-heading-secondary {
  color: white;
}

.dark .glow-text {
  color: rgb(var(--glow-n-400));
}

.dark .glow-text-body {
  color: rgb(var(--glow-n-300));
}

.dark .glow-text-accent {
  color: white;
}

.dark .glow-text-label {
  color: white;
}

.dark .glow-text-meta {
  color: rgb(var(--glow-n-300));
}

.dark .glow-copyright {
  color: rgb(var(--glow-n-400));
}

.dark .glow-link {
  color: rgb(var(--glow-n-300));
}

.dark .glow-link:hover {
  color: rgb(var(--glow-n-400));
}

.dark .glow-form-input {
  background-color: rgb(var(--glow-n-800));
  border-color: rgb(var(--glow-n-700));
  color: white;
}

.dark .glow-form-input::placeholder {
  color: rgb(var(--glow-n-400));
}

.dark .glow-button-primary {
  background-color: rgb(var(--glow-n-500));
}

.dark .glow-button-primary:hover {
  background-color: rgb(var(--glow-n-600));
}

.dark .glow-social-icon {
  background-color: rgb(var(--glow-n-800));
  color: rgb(var(--glow-n-300));
}

.dark .glow-social-icon:hover {
  background-color: rgb(var(--glow-n-700));
  color: rgb(var(--glow-n-400));
}

.dark .glow-section{
  
}

.dark .glow-section-badge {
  background-color: rgba(var(--glow-n-900), 0.3);
  border-left-color: rgb(var(--glow-n-400));
}

.dark .glow-section-badge p {
  color: rgb(var(--glow-n-400));
}

.dark .glow-section-title {
  color: rgb(var(--glow-n-400));
}

.dark .glow-section-subtitle {
  color: rgb(var(--color-secondary-400));
}

.dark .glow-stat-card {
  background-color: rgb(var(--glow-n-800));
}

/* Background gradient */
.bg-gradient-radial {
  background-image: radial-gradient(circle at center, var(--tw-gradient-from) 0%, var(--tw-gradient-via) 50%, var(--tw-gradient-to) 100%);
}

/* === NEUTRAL BACKGROUND UTILITIES (using injected variables) === */

.glow-bg-warm {
  background-color: rgb(var(--glow-n-50));
}

.glow-bg-neutral {
  background-color: rgb(var(--glow-n-100));
}

.glow-bg-muted {
  background-color: rgb(var(--glow-n-200));
}

/* Dark mode overrides for neutral backgrounds */
.dark .glow-bg-warm,
.dark .glow-bg-neutral,
.dark .glow-bg-muted {
  background-color: rgb(var(--glow-n-900));
}

/* Feature Card Components */
.glow-feature-card {
  transition: transform var(--glow-transition-slow) var(--glow-ease-default);
}

.glow-feature-card:hover {
  transform: translateY(var(--glow-hover-lift));
}

/* Feature icon with rectangular shape */
.glow-feature-icon {
  transition: background-color var(--glow-transition-slow) var(--glow-ease-default);
}

.glow-feature-card:hover .glow-feature-icon {
  background-color: rgba(var(--glow-n-600), 0.1);
}

/* Feature image zoom effect */
.glow-feature-image {
  transform: scale(1);
  transition: transform var(--glow-transition-image) var(--glow-ease-out);
}

.glow-feature-card:hover .glow-feature-image,
.glow-feature-main-image:hover .glow-feature-image {
  transform: scale(1.05);
}

/* Feature one item styles */
.glow-feature-images {
  position: relative;
  min-height: 400px;
}

.glow-feature-main-image {
  position: relative;
  transition: transform var(--glow-transition-slow) var(--glow-ease-default);
}

.glow-feature-list li {
  transition: transform var(--glow-transition-slow) var(--glow-ease-default);
}

.glow-feature-list li:hover,
.glow-feature-item:hover {
  transform: translateX(4px);
}

/* Card content structure */
.glow-card-content {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  box-shadow: var(--glow-shadow-card);
  transition: box-shadow var(--glow-transition-slow) var(--glow-ease-default);
}

.glow-feature-card:hover .glow-card-content {
  box-shadow: var(--glow-shadow-card-hover);
}

.glow-card-data {
  flex: 1;
  display: flex;
}

/* Card icon */
.glow-card-icon {
  transition: all var(--glow-transition-base) var(--glow-ease-default);
}

.glow-feature-card:hover .glow-card-icon {
  background-color: rgba(255, 255, 255, 0.1);
}

/* Link styles */
.glow-link-list {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  list-style-type: none;
  padding: 0;
  margin: 0;
  margin-top: 1rem;
}

.glow-link-list li {
  margin: 0;
  padding: 0;
}

.glow-link {
  font-size: 0.875rem;
  color: rgb(var(--glow-n-600));
  transition: color var(--glow-transition-base) var(--glow-ease-default);
  text-decoration: none;
  display: inline-block;
}

.glow-link:hover {
  color: rgb(var(--glow-n-600));
}

/* Form elements */
.glow-form-input {
  width: 100%;
  padding: 0.5rem 0.75rem;
  background-color: rgb(var(--glow-n-50));
  border: 1px solid rgb(var(--glow-n-300));
  border-radius: 0.25rem;
  font-size: 0.875rem;
  color: rgb(var(--glow-n-800));
}

.glow-form-input:focus {
  outline: none;
  ring: 1px rgb(var(--color-primary-500));
  border-color: rgb(var(--color-primary-500));
}

/* Content grouping */
.glow-content-group {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  color: rgb(var(--glow-n-600));
  margin-top: 1rem;
}

.dark .glow-content-group {
  color: rgb(var(--glow-n-400));
}

/* Social media */
.glow-social-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 0.5rem;
  margin-top: 1rem;
}

.glow-social-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  background-color: rgb(var(--glow-n-100));
  color: rgb(var(--glow-n-600));
  transition: background-color var(--glow-transition-base) var(--glow-ease-default),
              color var(--glow-transition-base) var(--glow-ease-default),
              transform var(--glow-transition-base) var(--glow-ease-default);
}

.glow-social-icon:hover {
  background-color: rgb(var(--glow-n-200));
  color: rgb(var(--glow-n-600));
  transform: translateY(-2px);
}

.dark .glow-social-icon {
  background-color: rgb(var(--glow-n-800));
  color: rgb(var(--glow-n-300));
}

.dark .glow-social-icon:hover {
  background-color: rgb(var(--glow-n-700));
  color: rgb(var(--glow-n-400));
}

/* Logo styling */
.glow-logo {
  height: 3rem;
  width: auto;
  object-fit: contain;
}

/* Stats styling */
.glow-stat-container {
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  transition: transform var(--glow-transition-slow) var(--glow-ease-default);
}

.glow-feature-card:hover .glow-stat-container {
  transform: translateY(-2px);
}

/* Avatar styling */
.glow-avatar {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.glow-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.glow-avatar-square {
  border-radius: 0.25rem;
}

.glow-avatar-rounded {
  border-radius: 0.5rem;
}

.glow-avatar-circle {
  border-radius: 50%;
}

.glow-avatar-border {
  border: 2px solid rgb(var(--color-white));
}


/* Author info styling */
.glow-author-info {
  flex: 1;
}

.glow-author-name {
  font-weight: 600;
  font-size: 1.125rem;
  color: rgba(var(--glow-n-900), 1);
  margin-bottom: 0.25rem;
}

.dark .glow-author-name {
  color: rgba(var(--color-white), 1);
}

.glow-author-credentials {
  display: flex;
  font-size: 0.875rem;
  color: rgba(var(--glow-n-500), 1);
  align-items: center;
  gap: 0.5rem;
}

.dark .glow-author-credentials {
  color: rgba(var(--glow-n-400), 1);
}

.dark .glow-avatar-border {
  border-color: rgb(var(--glow-n-700));
}

.glow-avatar-shadow {
  box-shadow: var(--glow-shadow-md);
}

.glow-avatar-glow {
  position: relative;
}

.glow-avatar-glow::before {
  content: '';
  position: absolute;
  inset: -4px;
  background-color: rgb(var(--glow-n-200));
  border-radius: inherit;
  z-index: -1;
  opacity: 0.4;
  filter: blur(4px);
}

.dark .glow-avatar-glow::before {
  background-color: rgb(var(--glow-n-700));
}

/* ======================================
   ANIMATION KEYFRAMES
   ====================================== */

@keyframes glow-pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.1); }
}

@keyframes glow-fadeInUp {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes glow-fadeInRight {
  from { opacity: 0; transform: translateX(10px); }
  to { opacity: 1; transform: translateX(0); }
}

@keyframes glow-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}

@keyframes glow-shimmer {
  0% { left: -100%; }
  100% { left: 125%; }
}

@keyframes glow-slideIn {
  from { opacity: 0; transform: translateX(-20px); }
  to { opacity: 1; transform: translateX(0); }
}

@keyframes glow-slideUp {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes glow-scaleIn {
  from { opacity: 0; transform: scale(0.95); }
  to { opacity: 1; transform: scale(1); }
}

/* Animation utility classes */
.animate-glow-pulse {
  animation: glow-pulse 2s ease-in-out infinite;
}

.animate-glow-float {
  animation: glow-float 6s ease-in-out infinite;
}

.animate-glow-shimmer {
  animation: glow-shimmer 1.5s infinite;
}

.animate-glow-fadeInUp {
  animation: glow-fadeInUp 0.6s ease-out forwards;
}

.animate-glow-fadeInRight {
  animation: glow-fadeInRight 0.6s ease-out forwards;
}

.animate-glow-slideIn {
  animation: glow-slideIn 0.5s ease-out forwards;
}

.animate-glow-slideUp {
  animation: glow-slideUp 0.5s ease-out forwards;
}

.animate-glow-scaleIn {
  animation: glow-scaleIn 0.4s ease-out forwards;
}

/* --- Float Animations (Hero with avatars) --- */
@keyframes glow-float-slow {
  0% { transform: translateY(0px); }
  50% { transform: translateY(-5px); }
  100% { transform: translateY(0px); }
}

@keyframes glow-float-medium {
  0% { transform: translateY(0px); }
  50% { transform: translateY(-8px); }
  100% { transform: translateY(0px); }
}

@keyframes glow-float-complex {
  0% { transform: translate(0px, 0px); }
  25% { transform: translate(3px, -4px); }
  50% { transform: translate(0px, -7px); }
  75% { transform: translate(-3px, -3px); }
  100% { transform: translate(0px, 0px); }
}

/* --- Pulse Animations (Hero with avatars) --- */
@keyframes glow-pulse-line {
  0% { opacity: 0.2; }
  50% { opacity: 0.4; }
  100% { opacity: 0.2; }
}

@keyframes glow-pulse-node {
  0% { transform: scale(0.8); opacity: 0.4; }
  50% { transform: scale(1.2); opacity: 0.8; }
  100% { transform: scale(0.8); opacity: 0.4; }
}

/* --- Marquee Animation (Logo scroll) --- */
@keyframes glow-marquee {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* --- Gallery Fade Animations --- */
@keyframes glow-gallery-fadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes glow-gallery-fadeInSquare {
  from { opacity: 0; transform: scale(0.95); }
  to { opacity: 1; transform: scale(1); }
}

@keyframes glow-gallery-fadeInFancy {
  from { opacity: 0; transform: scale(0.9) translateY(20px); }
  to { opacity: 1; transform: scale(1) translateY(0); }
}

/* --- Testimonial Entrance Animation --- */
@keyframes glow-testimonial-entrance {
  0% { opacity: 0; transform: scale(0.98) translateY(10px) translateZ(-25px); }
  100% { opacity: 1; transform: scale(1) translateY(0) translateZ(0); }
}

/* Float animation utility classes */
.float-animation-slow {
  animation: glow-float-slow 8s ease-in-out infinite;
}

.float-animation-medium {
  animation: glow-float-medium 6s ease-in-out infinite;
}

.float-animation-complex {
  animation: glow-float-complex 10s ease-in-out infinite;
}

/* Pulse animation utility classes */
.pulse-animation-line {
  animation: glow-pulse-line 4s ease-in-out infinite;
}

.pulse-animation-node {
  animation: glow-pulse-node 3s ease-in-out infinite;
}

/* Marquee utility classes */
.glow-marquee-wrapper {
  position: relative;
  overflow: hidden;
}

.glow-marquee-content {
  display: flex;
  animation: glow-marquee 30s linear infinite;
  will-change: transform;
}

.glow-marquee-content:hover {
  animation-play-state: paused;
}

@media (max-width: 768px) {
  .glow-marquee-content {
    animation-duration: 20s;
  }
}

@media (max-width: 480px) {
  .glow-marquee-content {
    animation-duration: 15s;
  }
}

/* Gallery item animation classes */
.glow-gallery-item {
  animation: glow-gallery-fadeIn 0.6s ease-out both;
}

.glow-gallery-item-square {
  animation: glow-gallery-fadeInSquare 0.7s ease-out both;
}

.glow-gallery-item-fancy {
  animation: glow-gallery-fadeInFancy 0.8s cubic-bezier(0.22, 1, 0.36, 1) both;
}

/* Responsive gallery grid adjustments */
@media (max-width: 640px) {
  .glow-gallery-grid {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 480px) {
  .glow-gallery-grid {
    grid-template-columns: 1fr;
  }
}

/* Gallery lazy loading styles */
.glow-gallery-grid img.loading {
  opacity: 0.5;
  transition: opacity 0.3s ease-in-out;
}

.glow-gallery-grid img.loaded {
  opacity: 1;
  transition: opacity 0.3s ease-in-out;
}

/* ======================================
   END ANIMATION KEYFRAMES
   ====================================== */

/* ======================================
   TESTIMONIALS COMPONENT STYLES
   ====================================== */

/* Container */
.glow-testimonials-wrapper {
  position: relative;
  max-width: 960px;
  margin: 0 auto;
}

/* 3D Perspective container */
.glow-perspective {
  perspective: 1500px;
  position: relative;
  min-height: 400px;
}

/* Testimonial slider items */
.glow-testimonial-item {
  position: absolute;
  width: 100%;
  opacity: 0;
  pointer-events: none;
  transform: translateZ(-100px);
  transform-style: preserve-3d;
  transition: opacity 0.5s ease, transform 0.5s ease;
}

.glow-testimonial-item.active {
  position: relative;
  opacity: 1;
  pointer-events: auto;
  transform: translateZ(0);
}

/* 3D Card wrapper and card */
.glow-testimonial-card-wrapper {
  position: relative;
  transform-style: preserve-3d;
  transition: transform 0.4s var(--glow-ease-default);
}

.glow-testimonial-card {
  background: white;
  box-shadow: var(--glow-shadow-md);
  transform-style: preserve-3d;
}

.dark .glow-testimonial-card {
  background: rgba(var(--glow-n-800), 1);
}

/* Quote symbol */
.glow-quote-symbol {
  position: absolute;
  top: -20px;
  right: 10px;
  width: 120px;
  height: 120px;
  color: rgba(var(--glow-n-200), 0.5);
  transform: rotate(10deg);
  z-index: -1;
}

/* Card sections */
.glow-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1.5rem;
  background: rgba(var(--glow-n-50), 1);
}

.dark .glow-card-header {
  background: rgba(var(--glow-n-900), 0.3);
}

.glow-card-body {
  padding: 2rem 1.5rem;
}

.glow-card-footer {
  padding: 1.5rem;
  border-top: 1px solid rgba(var(--glow-n-200), 1);
  display: flex;
  align-items: center;
  gap: 1rem;
}

.dark .glow-card-footer {
  border-color: rgba(var(--glow-n-700), 1);
}

/* Company and author info */
.glow-company-name {
  font-weight: 600;
  color: rgba(var(--glow-n-700), 1);
}

.dark .glow-company-name {
  color: rgba(var(--glow-n-300), 1);
}

.glow-testimonial-text {
  font-size: 1.125rem;
  line-height: 1.8;
  color: rgba(var(--glow-n-700), 1);
}

.dark .glow-testimonial-text {
  color: rgba(var(--glow-n-300), 1);
}

.glow-author-name {
  font-weight: 600;
  color: rgba(var(--glow-n-900), 1);
}

.dark .glow-author-name {
  color: white;
}

.glow-author-credentials {
  display: flex;
  gap: 0.5rem;
  font-size: 0.875rem;
}

.glow-position {
  color: rgba(var(--glow-n-600), 1);
}

.glow-divider {
  color: rgba(var(--glow-n-400), 1);
}

.glow-industry {
  color: rgba(var(--glow-n-600), 1);
  font-weight: 500;
}

/* Rating stars */
.glow-rating-stars {
  display: flex;
  gap: 0.25rem;
}

.glow-star {
  width: 1.25rem;
  height: 1.25rem;
  color: rgba(var(--glow-n-300), 1);
}

.glow-star.filled {
  color: var(--glow-color-star);
}

.glow-star-icon {
  width: 100%;
  height: 100%;
  fill: currentColor;
}

/* Navigation controls */
.glow-navigation-controls {
  margin-top: 2rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
}

.glow-nav-dots {
  display: flex;
  gap: 0.5rem;
  justify-content: center;
}

.glow-nav-dot {
  width: 0.75rem;
  height: 0.75rem;
  border-radius: 9999px;
  background-color: rgba(var(--glow-n-300), 1);
  border: none;
  cursor: pointer;
  transition: all 0.3s ease;
}

.glow-nav-dot.active {
  background-color: rgba(var(--color-primary-500), 1);
  transform: scale(1.3);
}

.glow-nav-arrows {
  display: flex;
  gap: 1rem;
}

.glow-nav-arrow {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 9999px;
  background-color: white;
  border: 1px solid rgba(var(--glow-n-200), 1);
  color: rgba(var(--glow-n-600), 1);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.3s ease;
}

.dark .glow-nav-arrow {
  background-color: rgba(var(--glow-n-800), 1);
  border-color: rgba(var(--glow-n-700), 1);
  color: rgba(var(--glow-n-400), 1);
}

.glow-nav-arrow:hover {
  background-color: rgba(var(--glow-n-50), 1);
  border-color: rgba(var(--glow-n-300), 1);
  color: rgba(var(--glow-n-600), 1);
}

.glow-nav-arrow svg {
  width: 1.25rem;
  height: 1.25rem;
}

/* ======================================
   END TESTIMONIALS COMPONENT STYLES
   ====================================== */

/* Responsive adjustments */
@media (max-width: 1023px) {
  .glow-stats-grid {
    margin-top: 2rem;
    grid-template-columns: 1fr;
  }
  
}

@media (max-width: 768px) {
  .glow-feature-card {
    margin-bottom: 1.5rem;
  }

  .glow-feature-card:hover {
    transform: translateY(var(--glow-hover-lift-sm));
  }

}

/* ======================================
   PORTICO DECORATIVE ELEMENTS
   ProForma-inspired architectural patterns - clean, geometric, minimal
   ====================================== */

/* Fine grid pattern - architectural blueprint style */
.glow-decor-grid {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.025;
  background-image:
    linear-gradient(currentColor 1px, transparent 1px),
    linear-gradient(90deg, currentColor 1px, transparent 1px);
  background-size: 48px 48px;
}

.dark .glow-decor-grid {
  opacity: 0.04;
}

/* Small dot grid - subtle texture */
.glow-decor-dots {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.02;
  background-image: radial-gradient(circle at 1px 1px, currentColor 0.5px, transparent 0);
  background-size: 32px 32px;
}

.dark .glow-decor-dots {
  opacity: 0.03;
}

/* Horizontal lines - architectural drawing style */
.glow-decor-lines {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.02;
  background-image: linear-gradient(0deg, currentColor 1px, transparent 1px);
  background-size: 100% 64px;
}

.dark .glow-decor-lines {
  opacity: 0.03;
}

/* Diagonal lines pattern - dynamic, architectural */
.glow-decor-diagonal {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.03;
  background: repeating-linear-gradient(
    -45deg,
    currentColor,
    currentColor 1px,
    transparent 1px,
    transparent 20px
  );
}

.dark .glow-decor-diagonal {
  opacity: 0.05;
}

/* Corner frame - architectural corner accent */
.glow-decor-corner {
  position: absolute;
  width: 120px;
  height: 120px;
  pointer-events: none;
}

.glow-decor-corner::before,
.glow-decor-corner::after {
  content: '';
  position: absolute;
  background: rgb(var(--glow-n-300));
}

.glow-decor-corner::before {
  top: 0;
  left: 0;
  width: 40px;
  height: 2px;
}

.glow-decor-corner::after {
  top: 0;
  left: 0;
  width: 2px;
  height: 40px;
}

.glow-decor-corner.top-left {
  top: 24px;
  left: 24px;
}

.glow-decor-corner.top-right {
  top: 24px;
  right: 24px;
  transform: scaleX(-1);
}

.glow-decor-corner.bottom-left {
  bottom: 24px;
  left: 24px;
  transform: scaleY(-1);
}

.glow-decor-corner.bottom-right {
  bottom: 24px;
  right: 24px;
  transform: scale(-1);
}

.dark .glow-decor-corner::before,
.dark .glow-decor-corner::after {
  background: rgb(var(--glow-n-600));
}

/* Geometric square accent */
.glow-decor-square {
  position: absolute;
  pointer-events: none;
  width: 200px;
  height: 200px;
  border: 1px solid rgba(var(--glow-n-300), 0.2);
}

.dark .glow-decor-square {
  border-color: rgba(var(--glow-n-600), 0.15);
}

/* ======================================
   END PORTICO DECORATIVE ELEMENTS
   ====================================== */

/* ======================================
   SLIDER/CAROUSEL UTILITIES
   Common patterns for slider components
   ====================================== */

/* Hide scrollbar for slider tracks */
.glow-slider-track {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

.glow-slider-track::-webkit-scrollbar {
  display: none;
}

/* Slider pagination dots */
.glow-slider-dot {
  width: 0.75rem;
  height: 0.75rem;
  border-radius: 9999px;
  background-color: rgb(var(--glow-n-300));
  border: none;
  cursor: pointer;
  transition: all 0.3s ease;
}

.glow-slider-dot:hover {
  background-color: rgb(var(--glow-n-400));
}

.glow-slider-dot.active {
  background-color: rgb(var(--glow-n-500));
  width: 2rem;
}

.dark .glow-slider-dot {
  background-color: rgb(var(--glow-n-600));
}

.dark .glow-slider-dot:hover {
  background-color: rgb(var(--glow-n-500));
}

.dark .glow-slider-dot.active {
  background-color: rgb(var(--glow-n-400));
}

/* Slider navigation arrows */
.glow-slider-nav {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 9999px;
  background-color: white;
  border: 1px solid rgb(var(--glow-n-200));
  color: rgb(var(--glow-n-600));
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.3s ease;
}

.glow-slider-nav:hover {
  background-color: rgb(var(--glow-n-50));
  border-color: rgb(var(--glow-n-300));
  color: rgb(var(--glow-n-600));
}

.glow-slider-nav:disabled {
  opacity: 0.3;
  cursor: not-allowed;
}

.dark .glow-slider-nav {
  background-color: rgb(var(--glow-n-800));
  border-color: rgb(var(--glow-n-700));
  color: rgb(var(--glow-n-400));
}

.dark .glow-slider-nav:hover:not(:disabled) {
  background-color: rgba(var(--glow-n-900), 0.3);
  border-color: rgb(var(--glow-n-700));
  color: rgb(var(--glow-n-400));
}

/* Billing toggle utility (for pricing blocks) */
.glow-billing-toggle[aria-checked="true"] .glow-toggle-knob {
  transform: translateX(28px);
}

.glow-billing-toggle[aria-checked="false"] .glow-toggle-knob {
  transform: translateX(0);
}

/* ======================================
   END SLIDER/CAROUSEL UTILITIES
   ====================================== */

/* ======================================
   INNOVATIVE ENHANCEMENTS
   Inspired by CoachX — elevated micro-interactions,
   modern card effects, animated backgrounds
   ====================================== */

/* --- Card Colored Shadow on Hover --- */
/* Cards on light backgrounds get a warm primary-tinted shadow on hover */
[data-tilt]:hover {
  box-shadow:
    0 20px 40px -12px rgba(var(--color-primary-600), 0.1),
    0 8px 16px -8px rgba(0, 0, 0, 0.06);
}

.dark [data-tilt]:hover {
  box-shadow:
    0 20px 40px -12px rgba(var(--color-primary-400), 0.08),
    0 8px 16px -8px rgba(0, 0, 0, 0.2);
}

/* --- Animated Gradient Mesh for Primary-BG Sections --- */
/* Only apply to section-level elements with primary bg */
section[class*="bg-primary-"]::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 80% 50% at 20% 40%, rgba(var(--color-secondary-500), 0.06) 0%, transparent 60%),
    radial-gradient(ellipse 60% 40% at 80% 60%, rgba(255, 255, 255, 0.04) 0%, transparent 50%);
  pointer-events: none;
  z-index: 0;
}

/* --- Glass Card Effect on Dark/Primary Backgrounds --- */
[class*="bg-primary-"] [data-tilt] {
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}

/* --- Enhanced Image Hover Color Tint --- */
[data-tilt] a[href] img,
[data-tilt] img[loading="lazy"] {
  transition: transform 0.7s cubic-bezier(0.25, 0.1, 0.25, 1), filter 0.5s ease;
}

[data-tilt]:hover a[href] img,
[data-tilt]:hover img[loading="lazy"] {
  filter: brightness(1.03) saturate(1.05);
}

/* --- Gradient Divider Utility --- */
/* Apply to divider elements for a gradient treatment */
.glow-gradient-line {
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgb(var(--glow-n-300)) 20%,
    rgb(var(--color-primary-300)) 50%,
    rgb(var(--glow-n-300)) 80%,
    transparent 100%
  );
}

.dark .glow-gradient-line {
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgb(var(--glow-n-700)) 20%,
    rgb(var(--color-primary-700)) 50%,
    rgb(var(--glow-n-700)) 80%,
    transparent 100%
  );
}

/* --- Enhanced Left Accent Bar --- */
/* The hover accent bar on cards gets a gradient and glow */
[data-tilt] .bg-primary-500.scale-y-0 {
  background: linear-gradient(
    180deg,
    rgb(var(--color-secondary-500)),
    rgb(var(--color-primary-500))
  ) !important;
  width: 3px !important;
  box-shadow: 2px 0 8px rgba(var(--color-primary-500), 0.3);
}

/* --- Section Badge Animated Dot --- */
/* Adds a subtle pulse dot before section header badge labels */
.glow-badge-dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: rgb(var(--color-secondary-500));
  margin-right: 8px;
  vertical-align: middle;
  animation: glow-badge-pulse 2s ease-in-out infinite;
}

@keyframes glow-badge-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.5; transform: scale(0.7); }
}

/* On dark backgrounds, badge dot uses white */
[class*="bg-primary-"] .glow-badge-dot {
  background-color: rgba(255, 255, 255, 0.6);
}

/* --- Pricing Popular Card Glow --- */
/* Featured pricing cards get a subtle glow ring */
.border-primary-500.border-2 {
  box-shadow:
    0 0 0 1px rgba(var(--color-primary-500), 0.1),
    0 8px 32px -4px rgba(var(--color-primary-500), 0.15);
}

.border-primary-500.border-2:hover {
  box-shadow:
    0 0 0 1px rgba(var(--color-primary-500), 0.2),
    0 12px 40px -4px rgba(var(--color-primary-500), 0.25);
}

/* --- Stats Number Gradient Text --- */
/* Apply gradient to stats numbers via explicit class */
.glow-gradient-number {
  background: linear-gradient(
    135deg,
    rgb(var(--color-primary-400)),
    rgb(var(--color-secondary-400))
  );
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* --- Image Hover Parallax Depth --- */
/* Cards with images get a subtle depth shift effect */
[data-tilt] .aspect-\[4\/3\] img,
[data-tilt] .aspect-\[16\/10\] img,
[data-tilt] .aspect-\[16\/9\] img {
  will-change: transform;
}

/* --- Enhanced Testimonial Quote Styling --- */
/* Adds a decorative accent to blockquote elements in testimonial sections */
[data-testimonials-minimal] blockquote,
[data-testimonials-spotlight] blockquote {
  position: relative;
}

[data-testimonials-minimal] blockquote::before {
  content: '\201C';
  position: absolute;
  top: -0.5em;
  left: -0.1em;
  font-size: 4em;
  line-height: 1;
  color: rgb(var(--color-primary-200));
  font-family: Georgia, serif;
  pointer-events: none;
  opacity: 0.4;
}

.dark [data-testimonials-minimal] blockquote::before {
  color: rgb(var(--color-primary-800));
  opacity: 0.3;
}

/* --- Enhanced Card Glow Interaction --- */
/* Bento glow transitions smoothly */
[data-tilt] .glow-bento-glow {
  transition: opacity 0.5s ease;
}

/* --- Smooth Section Transitions --- */
/* Adjacent sections get overlapping gradient transitions */
section + section {
  position: relative;
}

/* --- Enhanced FAQ Accordion Hover --- */
/* Accordion items get a subtle background shift on hover */
.glow-accordion-trigger {
  position: relative;
}

.glow-accordion-trigger:hover {
  background-color: rgba(var(--color-primary-500), 0.03);
}

.dark .glow-accordion-trigger:hover {
  background-color: rgba(var(--color-primary-500), 0.05);
}

/* --- Scroll-triggered Reveal Enhancement --- */
/* Smoother reveal animations with slight scale */
[data-reveal] {
  transition: opacity 0.6s cubic-bezier(0.25, 0.1, 0.25, 1),
              transform 0.6s cubic-bezier(0.25, 0.1, 0.25, 1);
}

/* --- Footer Social Links Hover --- */
/* Social icons on footer get a warm glow */
footer a[href*="facebook"]:hover,
footer a[href*="twitter"]:hover,
footer a[href*="instagram"]:hover,
footer a[href*="linkedin"]:hover,
footer a[href*="youtube"]:hover,
footer a[href*="tiktok"]:hover {
  filter: drop-shadow(0 0 6px rgba(var(--color-secondary-400), 0.4));
}

/* ======================================
   END INNOVATIVE ENHANCEMENTS
   ====================================== */

/* =============================================
   3D STACKING CARDS
   ============================================= */
[data-stacking] {
  perspective: 600px;
  perspective-origin: center 40%;
}

.glow-stacking-card {
  position: sticky;
  top: 0;
  height: 100vh;
  transform-style: preserve-3d;
}

.glow-stacking-inner {
  display: flex;
  height: 100%;
  width: 100%;
  transform-origin: center bottom;
  transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1),
              opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1),
              filter 0.6s ease,
              box-shadow 0.5s ease;
  will-change: transform, opacity, filter;
}

.glow-stacking-card:not(:first-child) .glow-stacking-inner {
  box-shadow: 0 -12px 40px -8px rgba(0, 0, 0, 0.4);
  overflow: hidden;
}

.glow-stacking-card.is-passed .glow-stacking-inner {
  transform: scale(0.82) rotateX(8deg) translateY(-40px) translateZ(-80px);
  opacity: 0.35;
  filter: blur(3px) brightness(0.7);
  box-shadow: 0 -20px 60px -10px rgba(0, 0, 0, 0.5);
}

.glow-stacking-card.is-active .glow-stacking-inner {
  transform: scale(1) rotateX(0deg) translateY(0) translateZ(0);
  opacity: 1;
  filter: blur(0) brightness(1);
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
}

.glow-stacking-card:not(.is-active):not(.is-passed) .glow-stacking-inner {
  transform: translateY(50px) scale(0.94) translateZ(-40px) rotateX(-2deg);
  opacity: 0.7;
}

/* Stacking number pill badge */
.glow-stacking-number-pill {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 2px;
  backdrop-filter: blur(4px);
}

@media (prefers-reduced-motion: reduce) {
  .glow-stacking-inner {
    transition: none;
  }
  .glow-stacking-card.is-passed .glow-stacking-inner,
  .glow-stacking-card:not(.is-active):not(.is-passed) .glow-stacking-inner {
    transform: none;
    opacity: 1;
    filter: none;
  }
}

/* =============================================
   3D HOVER EFFECT ON CARDS
   ============================================= */
.glow-3d-card {
  transform-style: preserve-3d;
  transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 0.5s ease;
}

.glow-3d-card:hover {
  transform: perspective(800px) rotateY(-3deg) rotateX(2deg) translateZ(10px);
  box-shadow: 12px 16px 40px -8px rgba(0, 0, 0, 0.15);
}

.glow-3d-card:nth-child(even):hover {
  transform: perspective(800px) rotateY(3deg) rotateX(-2deg) translateZ(8px);
}
/* === PROSE CONTENT STYLES === */
.prose img {
  width: 100%;
  height: auto;
}

.prose {
  overflow-wrap: break-word;
  word-break: break-word;
}