/* ==========================================================================
   INFIEONE ENTERPRISE DESIGN SYSTEM v4.0
   Inspired by Vercel, Stripe, Linear, OpenAI, Anthropic, and Apple UI
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. CSS Custom Properties / Color Tokens (Dark default + Light theme support)
   -------------------------------------------------------------------------- */
:root {
  /* Color Palette - Dark Theme Default */
  --bg-primary: #050816;
  --bg-secondary: #0b1020;
  --bg-tertiary: #131b30;
  
  --surface-glass: rgba(11, 16, 32, 0.65);
  --surface-glass-hover: rgba(19, 27, 48, 0.8);
  --surface-glass-border: rgba(255, 255, 255, 0.08);
  --surface-glass-border-hover: rgba(var(--accent-blue-rgb), 0.4);
  
  --text-primary: #f8fafc;
  --text-secondary: #94a3b8;
  --text-muted: #64748b;
  --text-inverse: #0f172a;
  
  /* Brand Accent Gradients */
  --accent-blue: #078643;
  --accent-cyan: #0399D8;
  --accent-indigo: #0E7490;
  --accent-purple: #0D9488;
  --accent-emerald: #0FA855;
  --accent-amber: #f59e0b;
  --accent-rose: #f43f5e;

  /* Channel values, so tinted rgba() can follow the palette instead of
     hardcoding it. Update the hex above and every tint follows. */
  --accent-blue-rgb: 7, 134, 67;
  --accent-cyan-rgb: 3, 153, 216;
  --accent-purple-rgb: 13, 148, 136;
  --accent-emerald-rgb: 15, 168, 85;
  
  --gradient-brand: linear-gradient(135deg, #078643 0%, #0D9488 50%, #0399D8 100%);
  --gradient-exelyzer: linear-gradient(135deg, #0399D8 0%, #0D9488 50%, #078643 100%);
  --gradient-glow: radial-gradient(circle, rgba(var(--accent-blue-rgb), 0.15) 0%, rgba(var(--accent-purple-rgb), 0.05) 50%, transparent 70%);
  --gradient-text: linear-gradient(180deg, #ffffff 0%, #cbd5e1 100%);
  --gradient-text-accent: linear-gradient(135deg, #3FB877 0%, #16C4B0 50%, #2BB3EC 100%);
  
  /* UI Glows & Shadows */
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 8px 30px rgba(0, 0, 0, 0.5);
  --shadow-lg: 0 20px 50px rgba(0, 0, 0, 0.6);
  --shadow-glow-blue: 0 0 40px rgba(var(--accent-blue-rgb), 0.25);
  --shadow-glow-purple: 0 0 40px rgba(var(--accent-purple-rgb), 0.25);
  --shadow-glow-cyan: 0 0 40px rgba(var(--accent-cyan-rgb), 0.3);
  
  /* Typography & Font Stacks */
  --font-sans: 'Inter', 'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-mono: 'JetBrains Mono', 'Fira Code', 'Roboto Mono', monospace;
  
  /* Layout Spacing & Radius */
  --container-max: 1280px;
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --radius-xl: 28px;
  --radius-full: 9999px;
  
  /* Transition Timing */
  --transition-fast: 0.15s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-normal: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-bounce: 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
  
  color-scheme: dark;
}

/* Light Theme Overrides */
[data-theme="light"] {
  --bg-primary: #f8fafc;
  --bg-secondary: #ffffff;
  --bg-tertiary: #f1f5f9;
  
  --surface-glass: rgba(255, 255, 255, 0.85);
  --surface-glass-hover: rgba(255, 255, 255, 0.98);
  --surface-glass-border: rgba(15, 23, 42, 0.08);
  --surface-glass-border-hover: rgba(var(--accent-blue-rgb), 0.4);
  
  --text-primary: #0f172a;
  --text-secondary: #475569;
  --text-muted: #64748b;
  --text-inverse: #f8fafc;
  
  --gradient-text: linear-gradient(180deg, #0f172a 0%, #334155 100%);
  --gradient-text-accent: linear-gradient(135deg, #046B34 0%, #0B7268 50%, #0277A8 100%);
  
  --shadow-sm: 0 2px 8px rgba(15, 23, 42, 0.06);
  --shadow-md: 0 10px 30px rgba(15, 23, 42, 0.08);
  --shadow-lg: 0 25px 60px rgba(15, 23, 42, 0.12);
  --shadow-glow-blue: 0 0 30px rgba(var(--accent-blue-rgb), 0.15);
  --shadow-glow-purple: 0 0 30px rgba(var(--accent-purple-rgb), 0.15);
  
  color-scheme: light;
}

[data-theme="light"] .marquee-strip-section {
  background: rgba(255, 255, 255, 0.85);
  border-color: rgba(15, 23, 42, 0.08);
}

[data-theme="light"] .marquee-track span {
  color: rgba(15, 23, 42, 0.7);
}

[data-theme="light"] .floating-feature-badge {
  background: rgba(255, 255, 255, 0.92);
  border-color: rgba(var(--accent-cyan-rgb), 0.4);
  color: #0f172a;
}

/* --------------------------------------------------------------------------
   2. Reset & CSS Core Setup
   -------------------------------------------------------------------------- */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 16px;
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  font-family: var(--font-sans);
  background-color: var(--bg-primary);
  color: var(--text-primary);
  line-height: 1.6;
  overflow-x: hidden;
  position: relative;
  transition: background-color var(--transition-normal), color var(--transition-normal);
}

a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; border: none; background: none; }
img, svg { display: block; max-width: 100%; }

:focus-visible {
  outline: 2px solid var(--accent-blue);
  outline-offset: 4px;
}

::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-track { background: var(--bg-primary); }
::-webkit-scrollbar-thumb {
  background: var(--bg-tertiary);
  border-radius: 5px;
  border: 2px solid var(--bg-primary);
}
::-webkit-scrollbar-thumb:hover { background: var(--accent-blue); }

/* --------------------------------------------------------------------------
   3. Aurora & Gradient Mesh Backgrounds
   -------------------------------------------------------------------------- */
.bg-mesh-canvas {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}

.aurora-blob {
  position: absolute;
  filter: blur(120px);
  border-radius: 50%;
  opacity: 0.35;
  animation: floatAurora 18s infinite alternate ease-in-out;
}

.aurora-blob-1 { top: -10%; left: 15%; width: 55vw; height: 55vw; background: radial-gradient(circle, var(--accent-blue) 0%, rgba(var(--accent-blue-rgb), 0) 70%); }
.aurora-blob-2 { top: 40%; right: -10%; width: 45vw; height: 45vw; background: radial-gradient(circle, var(--accent-purple) 0%, rgba(var(--accent-purple-rgb), 0) 70%); animation-delay: -6s; }
.aurora-blob-3 { bottom: -15%; left: 30%; width: 50vw; height: 50vw; background: radial-gradient(circle, var(--accent-cyan) 0%, rgba(var(--accent-cyan-rgb), 0) 70%); animation-delay: -12s; }

@keyframes floatAurora {
  0% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(60px, 40px) scale(1.1); }
  100% { transform: translate(-40px, 80px) scale(0.95); }
}

.grid-pattern-overlay {
  position: fixed;
  inset: 0;
  background-image: 
    linear-gradient(to right, rgba(255, 255, 255, 0.03) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
  background-size: 60px 60px;
  pointer-events: none;
  z-index: 0;
}

[data-theme="light"] .grid-pattern-overlay {
  background-image: 
    linear-gradient(to right, rgba(0, 0, 0, 0.04) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(0, 0, 0, 0.04) 1px, transparent 1px);
}

/* --------------------------------------------------------------------------
   4. Component Utilities & Typography
   -------------------------------------------------------------------------- */
.container {
  width: 100%;
  max-width: var(--container-max);
  margin-left: auto;
  margin-right: auto;
  padding-left: 2rem;
  padding-right: 2rem;
  position: relative;
  z-index: 1;
}

.section {
  padding-top: 7rem;
  padding-bottom: 7rem;
  position: relative;
}

.text-gradient {
  background: var(--gradient-text);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

@keyframes gradientFlow {
  0% { background-position: 0% center; }
  100% { background-position: 200% center; }
}

.animated-gradient-word, .text-gradient-accent {
  display: inline-block;
  background: linear-gradient(90deg, #3FB877 0%, #16C4B0 30%, #2BB3EC 65%, #16C4B0 85%, #3FB877 100%);
  background-size: 250% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: gradientFlow 5s linear infinite;
  font-weight: 800;
}

.text-gradient-exelyzer {
  display: inline-block;
  background: linear-gradient(90deg, var(--accent-cyan) 0%, var(--accent-blue) 35%, var(--accent-purple) 70%, var(--accent-cyan) 100%);
  background-size: 250% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: gradientFlow 5s linear infinite;
  font-weight: 800;
}

.mobile-br {
  display: none;
}

/* Dynamic Hero Word Rotator & Typing Cursor */
.rotating-word-wrapper {
  display: inline-flex;
  align-items: center;
  position: relative;
  vertical-align: bottom;
}

.rotating-word {
  display: inline-block;
  background: linear-gradient(90deg, #3FB877 0%, #16C4B0 40%, #2BB3EC 80%, #3FB877 100%);
  background-size: 200% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: gradientFlow 4s linear infinite;
  font-weight: 800;
  transition: opacity 0.35s ease, transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.rotating-word.fade-out {
  opacity: 0;
  transform: translateY(-20px);
}

.rotating-word.fade-in {
  opacity: 1;
  transform: translateY(0);
}

.typing-cursor {
  display: inline-block;
  color: var(--accent-cyan);
  font-weight: 300;
  margin-left: 2px;
  animation: cursorBlink 0.8s infinite;
}

/* The cursor glyph is drawn by CSS rather than sitting in the markup. As a
   text node inside the <h1> it became part of the heading text crawlers read
   ("...Infrastructure|"); aria-hidden alone does not remove it from the DOM. */
.typing-cursor::after {
  content: "|";
}

@keyframes cursorBlink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0; }
}

/* Infinite Horizontal Text Marquee Ticker */
.marquee-strip-section {
  width: 100%;
  overflow: hidden;
  background: rgba(11, 16, 32, 0.7);
  border-top: 1px solid var(--surface-glass-border);
  border-bottom: 1px solid var(--surface-glass-border);
  padding: 1.25rem 0;
  margin: 3rem 0;
  backdrop-filter: blur(12px);
}

.marquee-track {
  display: flex;
  align-items: center;
  gap: 3rem;
  width: max-content;
  animation: marqueeScroll 25s linear infinite;
  white-space: nowrap;
}

.marquee-track span {
  font-size: 1.1rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  color: rgba(248, 250, 252, 0.65);
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
  gap: 1.5rem;
  transition: color var(--transition-fast);
}

.marquee-track span:hover {
  color: var(--accent-cyan);
}

@keyframes marqueeScroll {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* Scroll Reveal Observer Base Classes */
/* Doubled class intentionally: .glass-card (and friends) declare a `transition`
   shorthand later in this file, which resets transition-delay to 0s at equal
   specificity. The repeat outranks them without needing !important. */
.reveal-on-scroll.reveal-on-scroll {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.7s cubic-bezier(0.4, 0, 0.2, 1), transform 0.7s cubic-bezier(0.4, 0, 0.2, 1);
  /* --reveal-i is set per-item by initScrollRevealObserver() so cards in the
     same grid ripple in as a wave instead of all snapping at once. */
  transition-delay: calc(var(--reveal-i, 0) * 60ms);
}

.reveal-on-scroll.reveal-on-scroll.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.section-header {
  text-align: center;
  max-width: 760px;
  margin: 0 auto 4.5rem auto;
}

.badge-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.4rem 1rem;
  border-radius: var(--radius-full);
  background: rgba(var(--accent-blue-rgb), 0.1);
  border: 1px solid rgba(var(--accent-blue-rgb), 0.25);
  color: var(--accent-blue);
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  margin-bottom: 1.25rem;
  backdrop-filter: blur(10px);
}

.badge-pill-cyan {
  background: rgba(var(--accent-cyan-rgb), 0.1);
  border-color: rgba(var(--accent-cyan-rgb), 0.3);
  color: var(--accent-cyan);
}

.badge-pulse {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: var(--accent-cyan);
  box-shadow: 0 0 10px var(--accent-cyan);
  animation: pulseGlow 2s infinite;
}

@keyframes pulseGlow {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.4); opacity: 0.6; }
}

.section-title {
  font-size: clamp(1.45rem, 4vw, 3rem);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.03em;
  margin-bottom: 1.25rem;
  word-break: normal !important;
  overflow-wrap: break-word !important;
  hyphens: none !important;
}

.section-description {
  font-size: 1.15rem;
  color: var(--text-secondary);
  line-height: 1.6;
}

.glass-card {
  background: var(--surface-glass);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid var(--surface-glass-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  transition: all var(--transition-normal);
  position: relative;
  overflow: hidden;
}

.glass-card:hover {
  background: var(--surface-glass-hover);
  border-color: var(--surface-glass-border-hover);
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg), var(--shadow-glow-blue);
}

/* Buttons System */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  padding: 0.9rem 1.8rem;
  border-radius: var(--radius-full);
  font-size: 0.95rem;
  font-weight: 600;
  transition: all var(--transition-normal);
  white-space: nowrap;
  position: relative;
  overflow: hidden;
}

.btn-primary {
  background: var(--gradient-brand);
  color: #ffffff;
  box-shadow: 0 4px 20px rgba(var(--accent-blue-rgb), 0.35);
}

.btn-primary:hover {
  transform: translateY(-2px) scale(1.02);
  box-shadow: 0 8px 30px rgba(var(--accent-blue-rgb), 0.55);
}

.btn-cyan {
  background: var(--gradient-exelyzer);
  color: #ffffff;
  box-shadow: 0 4px 20px rgba(var(--accent-cyan-rgb), 0.35);
}

.btn-cyan:hover {
  transform: translateY(-2px) scale(1.02);
  box-shadow: 0 8px 30px rgba(var(--accent-cyan-rgb), 0.55);
}

.btn-secondary {
  background: var(--surface-glass);
  border: 1px solid var(--surface-glass-border);
  color: var(--text-primary);
  backdrop-filter: blur(10px);
}

.btn-secondary:hover {
  background: var(--surface-glass-hover);
  border-color: var(--accent-blue);
  color: var(--accent-blue);
  transform: translateY(-2px);
}

.btn-icon {
  width: 44px;
  height: 44px;
  padding: 0;
  border-radius: var(--radius-full);
  background: var(--surface-glass);
  border: 1px solid var(--surface-glass-border);
  color: var(--text-primary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.btn-icon:hover {
  border-color: var(--accent-blue);
  color: var(--accent-blue);
  background: var(--surface-glass-hover);
}

/* --------------------------------------------------------------------------
   5. Sticky Navigation & Mega Menu
   -------------------------------------------------------------------------- */
.navbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 80px;
  z-index: 1000;
  transition: all var(--transition-normal);
}

.navbar.scrolled {
  background: var(--surface-glass);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border-bottom: 1px solid var(--surface-glass-border);
  box-shadow: var(--shadow-md);
  height: 72px;
}

.nav-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100%;
}

.brand-logo {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-size: 1.35rem;
  font-weight: 800;
  letter-spacing: -0.03em;
  color: var(--text-primary);
  flex-shrink: 0;
  white-space: nowrap;
}

.brand-name {
  font-size: 1.35rem;
  font-weight: 800;
  letter-spacing: -0.03em;
  color: var(--text-primary);
}

.brand-mark {
  width: 38px;
  height: 38px;
  background: var(--gradient-brand);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 20px rgba(var(--accent-blue-rgb), 0.4);
  color: #fff;
  font-weight: 900;
  flex-shrink: 0;
}

/* Uploaded logo replacing the letter mark. Height is set inline from the
   Logo Height setting; width follows the image's own aspect ratio. */
.brand-logo-image {
  width: auto;
  max-width: 220px;
  object-fit: contain;
  display: block;
  flex-shrink: 0;
}

@media (max-width: 480px) {
  .brand-logo-image {
    max-width: 150px;
  }
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav-item { position: relative; }

.nav-link {
  font-size: 0.88rem;
  font-weight: 500;
  color: var(--text-secondary);
  transition: all var(--transition-fast);
  padding: 0.5rem 0.25rem;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  white-space: nowrap;
}

.nav-link:hover, .nav-link.active { color: var(--text-primary); }

/* --------------------------------------------------------------------------
   Navigation dropdown panels

   Each top-level item picks a panel style that suits its shape — icon cards,
   grouped columns, a compact grid, or a plain list. Panels use visibility and
   opacity rather than display so they can transition and stay reachable by
   keyboard.
   -------------------------------------------------------------------------- */
.nav-panel {
  position: absolute;
  top: 100%;
  left: 0;
  margin-top: 0.5rem;
  padding: 0.75rem;
  background: var(--bg-secondary);
  border: 1px solid var(--surface-glass-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
  transition: opacity var(--transition-fast), transform var(--transition-fast), visibility var(--transition-fast);
  z-index: 100;
}

.nav-item.has-dropdown:hover > .nav-panel,
.nav-item.has-dropdown:focus-within > .nav-panel {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.nav-chevron { flex-shrink: 0; opacity: 0.6; }

/* Shared link inside any panel */
.nav-sub-link {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.55rem 0.75rem;
  border-radius: var(--radius-sm);
  font-size: 0.86rem;
  font-weight: 500;
  color: var(--text-secondary);
  transition: background var(--transition-fast), color var(--transition-fast);
}

.nav-sub-link:hover,
.nav-sub-link:focus-visible,
.nav-sub-link.active {
  background: rgba(var(--accent-blue-rgb), 0.08);
  color: var(--text-primary);
}

.nav-sub-icon {
  display: inline-flex;
  color: var(--accent-cyan);
  flex-shrink: 0;
}

/* ---- Style: simple list ---- */
.nav-panel-list { min-width: 250px; }
.nav-panel-list .nav-sub-item { position: relative; }
.nav-panel-list .nav-sub-link { white-space: nowrap; justify-content: space-between; }

.nav-flyout {
  position: absolute;
  top: -0.75rem;
  left: 100%;
  margin-left: 0.35rem;
  min-width: 230px;
  padding: 0.5rem;
  background: var(--bg-secondary);
  border: 1px solid var(--surface-glass-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--transition-fast), visibility var(--transition-fast);
}

.nav-sub-item.has-flyout:hover > .nav-flyout,
.nav-sub-item.has-flyout:focus-within > .nav-flyout {
  opacity: 1;
  visibility: visible;
}

/* ---- Style: icon cards ---- */
.nav-panel-cards {
  display: flex;
  gap: 1.25rem;
  padding: 1.5rem;
  align-items: stretch;
}

.nav-cards-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(270px, 1fr));
  gap: 0.5rem 1.5rem;
  align-content: start;
}

.nav-card {
  display: flex;
  gap: 1rem;
  padding: 0.9rem;
  border-radius: var(--radius-md);
  align-items: flex-start;
  transition: background var(--transition-fast);
}

.nav-card:hover, .nav-card:focus-visible { background: rgba(var(--accent-blue-rgb), 0.07); }

.nav-card-icon {
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  border-radius: var(--radius-md);
  background: rgba(var(--accent-cyan-rgb), 0.12);
  color: var(--accent-cyan);
  display: flex;
  align-items: center;
  justify-content: center;
}

.nav-card-body { display: flex; flex-direction: column; gap: 0.35rem; }

.nav-card-title {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  flex-wrap: wrap;
  font-size: 0.95rem;
  font-weight: 700;
  line-height: 1.3;
  color: var(--text-primary);
}

.nav-card-desc {
  font-size: 0.8rem;
  line-height: 1.5;
  color: var(--text-secondary);
}

/* The featured panel sits alongside the cards and matches their height. */
.nav-panel-cards .mega-featured {
  flex: 0 0 260px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 1.5rem;
  border-radius: var(--radius-lg);
  background: linear-gradient(160deg, rgba(var(--accent-cyan-rgb), 0.14), rgba(var(--accent-blue-rgb), 0.10));
  border: 1px solid rgba(var(--accent-cyan-rgb), 0.28);
}

/* ---- Style: grouped columns ----
   Multi-column flow rather than a grid: with groups of 4 to 8 items, a grid
   equalises every row to its tallest cell and leaves large dead gaps, and a
   fixed column count strands the remainder on a ragged last row. Column flow
   balances the total height and keeps each group intact. */
.nav-panel-columns {
  column-count: 3;
  column-gap: 2.25rem;
  column-rule: 1px solid var(--surface-glass-border);
  padding: 1.5rem 1.75rem;
  /* An absolutely positioned box shrinks to its content, and max-width will
     not expand it — the columns need an explicit width to breathe. */
  width: min(880px, calc(100vw - 4rem));
  /* Never taller than the viewport allows; scroll only if content demands it. */
  max-height: min(78vh, 660px);
  overflow-y: auto;
}

.nav-column {
  break-inside: avoid;
  page-break-inside: avoid;
  margin-bottom: 1.5rem;
}

.nav-column:last-child { margin-bottom: 0; }

.nav-column-head {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  line-height: 1.35;
  text-transform: uppercase;
  color: var(--accent-cyan);
  padding: 0 0.5rem 0.45rem;
  border-bottom: 1px solid var(--surface-glass-border);
  margin-bottom: 0.3rem;
}

.nav-column-head:hover { color: var(--text-primary); }

.nav-column-list { list-style: none; margin: 0; padding: 0; }

.nav-column-list .nav-sub-link {
  font-size: 0.84rem;
  padding: 0.34rem 0.5rem;
  line-height: 1.4;
}

/* ---- Style: compact grid ---- */
.nav-panel-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(160px, 1fr));
  gap: 0.15rem;
  padding: 0.75rem;
}

/* Panels near the right edge flip so they cannot overflow the viewport. */
.nav-item:nth-last-child(-n+3) > .nav-panel { left: auto; right: 0; }
.nav-item:nth-last-child(-n+3) .nav-flyout { left: auto; right: 100%; margin-left: 0; margin-right: 0.35rem; }

/* Wide panels are centred instead, so they do not run off either side. */
.nav-style-columns > .nav-panel {
  left: 50%;
  right: auto;
  transform: translate(-50%, 6px);
}

.nav-item.nav-style-columns:hover > .nav-panel,
.nav-item.nav-style-columns:focus-within > .nav-panel {
  transform: translate(-50%, 0);
}

.nav-link-highlight {
  color: var(--accent-cyan);
  font-weight: 700;
}

.nav-link-highlight:hover {
  color: var(--accent-cyan);
  text-shadow: 0 0 12px rgba(var(--accent-cyan-rgb), 0.5);
}

.nav-badge-pill {
  font-size: 0.62rem;
  padding: 0.12rem 0.45rem;
  border-radius: var(--radius-full);
  background: rgba(var(--accent-cyan-rgb), 0.15);
  color: var(--accent-cyan);
  border: 1px solid rgba(var(--accent-cyan-rgb), 0.35);
  letter-spacing: 0.05em;
  font-weight: 700;
  white-space: nowrap;
}

.mega-menu {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%) translateY(10px);
  width: 780px;
  background: var(--surface-glass);
  backdrop-filter: blur(28px);
  -webkit-backdrop-filter: blur(28px);
  border: 1px solid var(--surface-glass-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  padding: 1.75rem;
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 1.5rem;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: all var(--transition-normal);
  margin-top: 12px;
}

.nav-item:hover .mega-menu, .mega-menu.active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}

.mega-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
}

.mega-card {
  padding: 0.9rem;
  border-radius: var(--radius-md);
  transition: background var(--transition-fast);
  display: flex;
  gap: 0.85rem;
  align-items: flex-start;
}

.mega-card:hover { background: rgba(255, 255, 255, 0.05); }

.mega-icon {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  background: rgba(var(--accent-blue-rgb), 0.15);
  color: var(--accent-blue);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.mega-title { font-size: 0.9rem; font-weight: 600; color: var(--text-primary); margin-bottom: 0.2rem; }
.mega-desc { font-size: 0.8rem; color: var(--text-secondary); line-height: 1.4; }

.mega-featured {
  background: linear-gradient(135deg, rgba(var(--accent-cyan-rgb), 0.15), rgba(var(--accent-blue-rgb), 0.15));
  border: 1px solid rgba(var(--accent-cyan-rgb), 0.3);
  border-radius: var(--radius-md);
  padding: 1.25rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.nav-actions { display: flex; align-items: center; gap: 1rem; }

.theme-toggle-btn {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-full);
  background: var(--surface-glass);
  border: 1px solid var(--surface-glass-border);
  color: var(--text-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all var(--transition-fast);
}

.theme-toggle-btn:hover { border-color: var(--accent-blue); color: var(--accent-blue); }

.mobile-hamburger {
  display: none;
  flex-direction: column;
  gap: 5px;
  width: 30px;
  cursor: pointer;
}

.mobile-hamburger span {
  display: block;
  width: 100%;
  height: 2px;
  background-color: var(--text-primary);
  border-radius: 2px;
  transition: all var(--transition-fast);
}

.mobile-menu-drawer {
  position: fixed;
  top: 80px;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--bg-primary);
  z-index: 999;
  padding: 2rem;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  transform: translateX(100%);
  transition: transform var(--transition-normal);
}

.mobile-menu-drawer.open { transform: translateX(0); }

/* Inner navigation pages */
.inner-breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.85rem;
  color: var(--text-muted);
  margin-bottom: 1rem;
}

.inner-breadcrumb a { color: var(--accent-cyan); }
.inner-breadcrumb a:hover { text-decoration: underline; }

.inner-icon {
  width: 56px;
  height: 56px;
  border-radius: var(--radius-md);
  background: rgba(var(--accent-cyan-rgb), 0.12);
  color: var(--accent-cyan);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1.25rem;
}

/* --------------------------------------------------------------------------
   Editor content

   Styles for the core blocks an editor can drop into a page, so composed
   content matches the design system instead of falling back to browser and
   core defaults.
   -------------------------------------------------------------------------- */
.inner-content p { margin-bottom: 1rem; line-height: 1.7; }
.inner-content ul,
.inner-content ol { margin: 1rem 0 1rem 1.25rem; }
.inner-content li { margin-bottom: 0.5rem; line-height: 1.65; }

.inner-content h2,
.inner-content h3,
.inner-content h4 {
  color: var(--text-primary);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.25;
  margin: 2rem 0 0.85rem;
}

.inner-content h2 { font-size: 1.75rem; }
.inner-content h3 { font-size: 1.35rem; }
.inner-content h4 { font-size: 1.1rem; }
.inner-content > *:first-child { margin-top: 0; }

.inner-content a { color: var(--accent-cyan); text-decoration: underline; }

/* Images and figures */
.inner-content .wp-block-image,
.inner-content figure {
  margin: 1.75rem 0;
}

.inner-content img {
  max-width: 100%;
  height: auto;
  border-radius: var(--radius-md);
  display: block;
}

.inner-content figcaption,
.inner-content .wp-element-caption {
  margin-top: 0.65rem;
  font-size: 0.85rem;
  color: var(--text-muted);
  text-align: center;
}

/* Columns and media/text */
.inner-content .wp-block-columns { gap: 2rem; margin: 1.75rem 0; }
.inner-content .wp-block-media-text { gap: 2rem; margin: 1.75rem 0; }

/* Quote */
.inner-content .wp-block-quote,
.inner-content blockquote {
  margin: 1.75rem 0;
  padding: 1rem 0 1rem 1.5rem;
  border-left: 3px solid var(--accent-cyan);
  font-size: 1.05rem;
  font-style: italic;
  color: var(--text-primary);
}

.inner-content blockquote cite {
  display: block;
  margin-top: 0.75rem;
  font-size: 0.85rem;
  font-style: normal;
  color: var(--text-muted);
}

/* Table */
.inner-content .wp-block-table { margin: 1.75rem 0; overflow-x: auto; }

.inner-content table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
}

.inner-content th,
.inner-content td {
  padding: 0.75rem 1rem;
  border: 1px solid var(--surface-glass-border);
  text-align: left;
}

.inner-content th {
  background: rgba(var(--accent-blue-rgb), 0.07);
  font-weight: 700;
  color: var(--text-primary);
}

/* Core buttons, matched to the site's button style */
.inner-content .wp-block-buttons { margin: 1.75rem 0; gap: 0.75rem; }

.inner-content .wp-block-button__link,
.inner-content .wp-element-button {
  background: var(--gradient-brand);
  color: #fff;
  border-radius: var(--radius-full);
  padding: 0.8rem 1.75rem;
  font-weight: 600;
  font-size: 0.9rem;
  text-decoration: none;
  display: inline-block;
  transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}

.inner-content .wp-block-button__link:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-glow-blue);
}

.inner-content .is-style-outline .wp-block-button__link {
  background: transparent;
  color: var(--accent-cyan);
  border: 1px solid var(--accent-cyan);
}

/* Separator, code, embeds */
.inner-content hr,
.inner-content .wp-block-separator {
  border: 0;
  border-top: 1px solid var(--surface-glass-border);
  margin: 2.5rem 0;
}

.inner-content pre,
.inner-content .wp-block-code {
  background: #0b1020;
  color: #e2e8f0;
  border-radius: var(--radius-md);
  padding: 1.25rem;
  overflow-x: auto;
  font-family: var(--font-mono);
  font-size: 0.85rem;
  margin: 1.75rem 0;
}

.inner-content .wp-block-embed { margin: 1.75rem 0; }
.inner-content .wp-block-embed iframe { max-width: 100%; border-radius: var(--radius-md); }

/* Wide and full alignment, relative to the content card */
.inner-content .alignwide {
  width: calc(100% + 3rem);
  max-width: calc(100% + 3rem);
  margin-left: -1.5rem;
  margin-right: -1.5rem;
}

.inner-content .alignfull {
  width: calc(100% + 5rem);
  max-width: calc(100% + 5rem);
  margin-left: -2.5rem;
  margin-right: -2.5rem;
}

.inner-content .alignfull img,
.inner-content .alignwide img { border-radius: var(--radius-md); }

.inner-content .aligncenter { margin-left: auto; margin-right: auto; text-align: center; }

@media (max-width: 768px) {
  .inner-content .wp-block-columns { flex-wrap: wrap; gap: 1.25rem; }
  .inner-content .alignwide,
  .inner-content .alignfull {
    width: 100%;
    max-width: 100%;
    margin-left: 0;
    margin-right: 0;
  }
}

/* --------------------------------------------------------------------------
   Floating widgets: scroll-to-top and chat

   Both live bottom-right and share a stack so they can never overlap: the
   chat launcher sits on the baseline and the scroll button rides above it.
   -------------------------------------------------------------------------- */
.floating-stack {
  position: fixed;
  right: 1.5rem;
  bottom: 1.5rem;
  z-index: 900;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.75rem;
}

.scroll-top,
.chat-launcher {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  background: var(--gradient-brand);
  box-shadow: var(--shadow-md), 0 0 20px rgba(var(--accent-blue-rgb), 0.35);
  transition: transform var(--transition-fast), opacity var(--transition-fast), box-shadow var(--transition-fast);
}

.scroll-top:hover,
.chat-launcher:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-lg), 0 0 28px rgba(var(--accent-blue-rgb), 0.45);
}

.scroll-top:focus-visible,
.chat-launcher:focus-visible {
  outline: 3px solid var(--accent-cyan);
  outline-offset: 3px;
}

/* Hidden until the page has scrolled; [hidden] alone is overridden by flex. */
.scroll-top[hidden] { display: none; }

.chat-launcher { width: 56px; height: 56px; }
.chat-launcher .chat-icon-close { display: none; }
.chat-launcher[aria-expanded="true"] .chat-icon-open { display: none; }
.chat-launcher[aria-expanded="true"] .chat-icon-close { display: block; }

/* ---- Chat panel ---- */
.chat-panel {
  width: min(360px, calc(100vw - 3rem));
  max-height: min(70vh, 560px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--bg-secondary);
  border: 1px solid var(--surface-glass-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  transform-origin: bottom right;
}

.chat-panel[hidden] { display: none; }

.chat-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.1rem 1.25rem;
  background: var(--gradient-brand);
  color: #fff;
}

.chat-head-title { font-weight: 700; font-size: 1rem; }

.chat-head-status {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.78rem;
  opacity: 0.9;
  margin-top: 0.2rem;
}

.chat-close {
  background: none;
  border: none;
  color: #fff;
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  opacity: 0.85;
}

.chat-close:hover { opacity: 1; }

.chat-body {
  padding: 1.25rem;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.chat-bubble {
  background: rgba(var(--accent-cyan-rgb), 0.1);
  border: 1px solid rgba(var(--accent-cyan-rgb), 0.22);
  border-radius: var(--radius-md);
  border-bottom-left-radius: 4px;
  padding: 0.85rem 1rem;
  font-size: 0.88rem;
  line-height: 1.55;
  color: var(--text-primary);
  margin-bottom: 1rem;
}

.chat-quick {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-bottom: 1.15rem;
}

.chat-chip {
  border: 1px solid var(--surface-glass-border);
  background: var(--bg-primary);
  color: var(--text-secondary);
  border-radius: var(--radius-full);
  padding: 0.35rem 0.8rem;
  font-size: 0.78rem;
  cursor: pointer;
  transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
}

.chat-chip:hover,
.chat-chip.selected {
  background: rgba(var(--accent-blue-rgb), 0.1);
  border-color: rgba(var(--accent-blue-rgb), 0.35);
  color: var(--text-primary);
}

.chat-label {
  display: block;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 0.3rem;
}

.chat-input {
  width: 100%;
  padding: 0.6rem 0.75rem;
  margin-bottom: 0.85rem;
  border: 1px solid var(--surface-glass-border);
  border-radius: var(--radius-sm);
  background: var(--bg-primary);
  color: var(--text-primary);
  font-family: inherit;
  font-size: 0.88rem;
}

.chat-input:focus-visible {
  outline: 2px solid var(--accent-cyan);
  outline-offset: 1px;
}

.chat-textarea { resize: vertical; min-height: 72px; }
.chat-send { width: 100%; justify-content: center; }

#chatFormError[hidden] { display: none; }
#chatFormError { color: #ef4444; font-size: 0.82rem; margin-bottom: 0.75rem; }

.chat-success { text-align: center; padding: 1.5rem 0.5rem; }
.chat-success[hidden] { display: none; }

.chat-success-icon {
  width: 46px;
  height: 46px;
  margin: 0 auto 0.85rem;
  border-radius: 50%;
  background: rgba(var(--accent-emerald-rgb), 0.18);
  color: var(--accent-emerald);
  display: flex;
  align-items: center;
  justify-content: center;
}

.chat-success p { font-size: 0.9rem; color: var(--text-secondary); }

@media (max-width: 480px) {
  .floating-stack { right: 1rem; bottom: 1rem; }
  .chat-panel { width: calc(100vw - 2rem); }
}

@media (prefers-reduced-motion: reduce) {
  .scroll-top:hover,
  .chat-launcher:hover { transform: none; }
}

/* --------------------------------------------------------------------------
   Block patterns

   Section layouts an editor inserts from the block inserter. Built from core
   blocks, styled here by class name so there is no custom block code.
   -------------------------------------------------------------------------- */
.infieone-pattern { margin: 2.5rem 0; }

/* Card, also available as a Group block style */
.infieone-card,
.is-style-infieone-card {
  background: var(--surface-glass);
  border: 1px solid var(--surface-glass-border);
  border-radius: var(--radius-lg);
  padding: 1.75rem;
  height: 100%;
  box-shadow: var(--shadow-sm);
  transition: transform var(--transition-normal), box-shadow var(--transition-normal);
}

.infieone-card:hover,
.is-style-infieone-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
}

.infieone-card h3,
.is-style-infieone-card h3 { margin-top: 0; font-size: 1.15rem; }
.infieone-card-row { align-items: stretch; }

/* Statistics */
.infieone-stat { text-align: center; padding: 1.25rem 0.5rem; }

.infieone-stat-value {
  font-size: 2.75rem;
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.03em;
  margin: 0 0 0.4rem;
  background: var(--gradient-brand);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.infieone-stat-label {
  font-size: 0.85rem;
  color: var(--text-secondary);
  margin: 0;
}

/* Split: text beside image */
.infieone-split { gap: 3rem; margin: 2.5rem 0; }
.infieone-split h2 { margin-top: 0; }

/* Highlight panel, also a Group block style */
.infieone-highlight,
.is-style-infieone-highlight {
  background: linear-gradient(135deg, rgba(var(--accent-cyan-rgb), 0.13), rgba(var(--accent-blue-rgb), 0.09));
  border: 1px solid rgba(var(--accent-cyan-rgb), 0.3);
  border-radius: var(--radius-xl);
  padding: 2.25rem;
  margin: 2.5rem 0;
  text-align: center;
}

.infieone-highlight h3,
.is-style-infieone-highlight h3 { margin-top: 0; }
.infieone-highlight .wp-block-buttons { justify-content: center; }

/* Tick lists, also a List block style */
.infieone-checklist ul,
.is-style-infieone-checklist {
  list-style: none;
  margin-left: 0;
  padding-left: 0;
}

.infieone-checklist li,
.is-style-infieone-checklist li {
  position: relative;
  padding-left: 1.9rem;
  margin-bottom: 0.65rem;
}

.infieone-checklist li::before,
.is-style-infieone-checklist li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.35em;
  width: 1.15rem;
  height: 1.15rem;
  border-radius: 50%;
  background: rgba(var(--accent-emerald-rgb), 0.15) center/0.75rem no-repeat
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230FA855' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E");
}

/* Comparison */
.infieone-compare { gap: 1.5rem; margin: 2.5rem 0; }

.infieone-compare-bad,
.infieone-compare-good {
  border-radius: var(--radius-lg);
  padding: 1.75rem;
  height: 100%;
}

.infieone-compare-bad {
  background: rgba(239, 68, 68, 0.05);
  border: 1px solid rgba(239, 68, 68, 0.2);
}

.infieone-compare-good {
  background: linear-gradient(135deg, rgba(var(--accent-cyan-rgb), 0.12), rgba(var(--accent-emerald-rgb), 0.08));
  border: 1px solid rgba(var(--accent-cyan-rgb), 0.4);
}

.infieone-compare-bad h3,
.infieone-compare-good h3 { margin-top: 0; font-size: 1.1rem; }

/* Numbered steps */
.infieone-steps { gap: 1.5rem; margin-top: 2rem; }

.infieone-step {
  border-top: 2px solid rgba(var(--accent-cyan-rgb), 0.3);
  padding-top: 1rem;
  height: 100%;
}

.infieone-step-number {
  font-size: 0.95rem;
  font-weight: 800;
  color: var(--accent-cyan);
  margin: 0 0 0.35rem;
  letter-spacing: 0.05em;
}

.infieone-step h4 { margin: 0 0 0.4rem; font-size: 1.05rem; }

/* Testimonial */
.infieone-quote-card {
  background: var(--surface-glass);
  border: 1px solid var(--surface-glass-border);
  border-left: 3px solid var(--accent-cyan);
  border-radius: var(--radius-lg);
  padding: 2rem;
  margin: 2.5rem 0;
}

.infieone-quote-text {
  font-size: 1.1rem;
  font-style: italic;
  line-height: 1.65;
  color: var(--text-primary);
  margin-bottom: 1rem;
}

.infieone-quote-author {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-muted);
  margin: 0;
}

/* FAQ details blocks */
.infieone-faq-blocks .wp-block-details {
  background: var(--surface-glass);
  border: 1px solid var(--surface-glass-border);
  border-radius: var(--radius-md);
  padding: 1rem 1.35rem;
  margin-bottom: 0.75rem;
}

.infieone-faq-blocks summary {
  cursor: pointer;
  font-weight: 700;
  color: var(--text-primary);
  list-style: none;
}

.infieone-faq-blocks summary::-webkit-details-marker { display: none; }

.infieone-faq-blocks summary::after {
  content: "+";
  float: right;
  color: var(--accent-cyan);
  font-size: 1.2rem;
  line-height: 1;
}

.infieone-faq-blocks details[open] summary::after { content: "\2212"; }

/* Single-block styles */
.is-style-infieone-lead {
  font-size: 1.15rem;
  line-height: 1.65;
  color: var(--text-primary);
}

.is-style-infieone-framed img {
  border: 1px solid var(--surface-glass-border);
  box-shadow: var(--shadow-md);
  border-radius: var(--radius-lg);
}

@media (max-width: 768px) {
  .infieone-split,
  .infieone-compare,
  .infieone-steps,
  .infieone-card-row,
  .infieone-stat-row { gap: 1.25rem; }

  .infieone-stat-value { font-size: 2.15rem; }
}

/* The drawer scrolls: with three levels the tree is far taller than a phone. */
.mobile-menu-drawer {
  overflow-y: auto;
  gap: 0;
  -webkit-overflow-scrolling: touch;
}

/* Touch has no hover, so sub-levels are an accordion opened by tapping the
   parent. JS toggles .open on the parent's wrapper. */
.drawer-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.85rem 0;
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--text-primary);
  border-bottom: 1px solid var(--surface-glass-border);
}

.drawer-accent { color: var(--accent-cyan); font-weight: 700; }

.drawer-depth-1 { font-size: 0.95rem; font-weight: 500; padding-left: 1rem; color: var(--text-secondary); }
.drawer-depth-2 { font-size: 0.88rem; font-weight: 400; padding-left: 2rem; color: var(--text-muted); }

.drawer-sub {
  display: none;
  flex-direction: column;
}

.drawer-sub.open { display: flex; }

.drawer-parent .drawer-chevron {
  flex-shrink: 0;
  transition: transform var(--transition-fast);
}

.drawer-parent.open .drawer-chevron { transform: rotate(180deg); }

/* --------------------------------------------------------------------------
   6. Hero Section & IDE
   -------------------------------------------------------------------------- */
.hero-section {
  padding-top: 10rem;
  padding-bottom: 6rem;
  min-height: 100vh;
  display: flex;
  align-items: center;
}

.hero-grid {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: clamp(2rem, 4vw, 4rem);
  align-items: center;
}

.hero-title {
  font-size: clamp(1.45rem, 4.5vw, 3.75rem);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.03em;
  margin-bottom: 1.5rem;
  word-break: normal;
  overflow-wrap: break-word;
}

.hero-subtitle {
  font-size: clamp(0.9rem, 2vw, 1.25rem);
  color: var(--text-secondary);
  margin-bottom: 2.5rem;
  max-width: 580px;
  line-height: 1.6;
}

.hero-buttons {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  margin-bottom: 3.5rem;
}

.hero-trust-bar {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.trust-title {
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-muted);
}

.logo-marquee {
  display: flex;
  align-items: center;
  gap: 2.5rem;
  opacity: 0.75;
}

.brand-logo-item {
  font-weight: 700;
  font-size: 1.1rem;
  letter-spacing: -0.02em;
  color: var(--text-secondary);
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.ide-container {
  background: #090d16;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg), var(--shadow-glow-purple);
  overflow: hidden;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  transform: perspective(1000px) rotateY(-4deg) rotateX(2deg);
  transition: transform var(--transition-normal);
}

.ide-container:hover { transform: perspective(1000px) rotateY(0deg) rotateX(0deg); }

.ide-header {
  background: #050810;
  padding: 0.75rem 1.25rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.ide-dots { display: flex; gap: 6px; }
.ide-dot { width: 12px; height: 12px; border-radius: 50%; }
.dot-red { background: #ef4444; }
.dot-yellow { background: #f59e0b; }
.dot-green { background: #10b981; }

.ide-tabs { display: flex; gap: 0.25rem; }

.ide-tab {
  padding: 0.35rem 0.85rem;
  border-radius: var(--radius-sm);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--text-muted);
  cursor: pointer;
  transition: all var(--transition-fast);
}

.ide-tab.active {
  background: #131b30;
  color: var(--accent-cyan);
  border: 1px solid rgba(var(--accent-cyan-rgb), 0.3);
}

.ide-body {
  padding: 1.5rem;
  font-family: var(--font-mono);
  font-size: 0.85rem;
  line-height: 1.7;
  color: #e2e8f0;
  min-height: 280px;
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  box-sizing: border-box;
}

.ide-body pre, .ide-body code {
  white-space: pre-wrap !important;
  word-break: break-word !important;
  max-width: 100% !important;
}

.token-keyword { color: #16C4B0; }
.token-function { color: #3FB877; }
.token-string { color: #34d399; }
.token-comment { color: #64748b; font-style: italic; }
.token-property { color: #f472b6; }
.token-number { color: #fbbf24; }

.ide-terminal {
  background: #03050b;
  padding: 0.75rem 1.25rem;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--accent-emerald);
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

/* --------------------------------------------------------------------------
   7. EXELYZER FLAGSHIP PRODUCT EXPERIENCE STYLES
   -------------------------------------------------------------------------- */
.exelyzer-hero-section {
  padding-top: 8rem;
  padding-bottom: 6rem;
  background: radial-gradient(circle at 50% 20%, rgba(var(--accent-cyan-rgb), 0.12) 0%, rgba(5, 8, 22, 0) 70%);
  position: relative;
}

.exelyzer-logo-mark {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.5rem 1.25rem;
  border-radius: var(--radius-full);
  background: rgba(var(--accent-cyan-rgb), 0.12);
  border: 1px solid rgba(var(--accent-cyan-rgb), 0.35);
  color: var(--accent-cyan);
  font-weight: 800;
  font-size: 1.1rem;
  letter-spacing: 0.05em;
  box-shadow: 0 0 25px rgba(var(--accent-cyan-rgb), 0.25);
  margin-bottom: 1.5rem;
}

.exelyzer-mockup-wrapper {
  position: relative;
  max-width: 1060px;
  margin: 4rem auto 0 auto;
  border-radius: var(--radius-xl);
  padding: 1rem;
  background: linear-gradient(135deg, rgba(var(--accent-cyan-rgb), 0.25), rgba(var(--accent-blue-rgb), 0.1), rgba(var(--accent-purple-rgb), 0.2));
  box-shadow: var(--shadow-lg), var(--shadow-glow-cyan);
  transform: perspective(1200px) rotateX(4deg);
  transition: transform var(--transition-normal);
}

.exelyzer-mockup-wrapper:hover {
  transform: perspective(1200px) rotateX(0deg);
}

.exelyzer-mockup-img {
  width: 100%;
  border-radius: var(--radius-lg);
  border: 1px solid rgba(255, 255, 255, 0.15);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.7);
}

.floating-feature-badge {
  position: absolute;
  padding: 0.85rem 1.35rem;
  border-radius: var(--radius-md);
  background: rgba(9, 17, 31, 0.88);
  backdrop-filter: blur(16px);
  border: 1px solid rgba(var(--accent-cyan-rgb), 0.4);
  color: var(--text-primary);
  font-size: 0.85rem;
  font-weight: 600;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  gap: 0.65rem;
  animation: floatBadge 4s infinite alternate ease-in-out;
  z-index: 10;
}

.badge-top-left { top: -20px; left: -30px; }
.badge-bottom-right { bottom: -20px; right: -30px; animation-delay: -2s; }

@keyframes floatBadge {
  0% { transform: translateY(0); }
  100% { transform: translateY(-12px); }
}

/* EXELyzer 16-Card Bento Grid */
.exelyzer-bento-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.25rem;
  margin-top: 3.5rem;
}

.exelyzer-feature-card {
  padding: 1.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}

.exelyzer-feature-card:hover {
  border-color: var(--accent-cyan);
  box-shadow: 0 12px 35px rgba(var(--accent-cyan-rgb), 0.25);
}

.exelyzer-feature-icon {
  width: 44px;
  height: 44px;
  border-radius: var(--radius-md);
  background: rgba(var(--accent-cyan-rgb), 0.15);
  color: var(--accent-cyan);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
}

/* Comparison Table (Traditional vs EXELyzer) */
.comparison-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2.5rem;
  margin-top: 3.5rem;
}

.comparison-card-bad {
  background: rgba(239, 68, 68, 0.05);
  border: 1px solid rgba(239, 68, 68, 0.2);
  border-radius: var(--radius-xl);
  padding: 2.5rem;
}

.comparison-card-good {
  background: linear-gradient(135deg, rgba(var(--accent-cyan-rgb), 0.12), rgba(var(--accent-emerald-rgb), 0.08));
  border: 1px solid rgba(var(--accent-cyan-rgb), 0.4);
  border-radius: var(--radius-xl);
  padding: 2.5rem;
  box-shadow: 0 0 40px rgba(var(--accent-cyan-rgb), 0.2);
}

.comparison-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 1.15rem;
  margin-top: 1.5rem;
}

.comparison-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-size: 1rem;
  font-weight: 500;
}

/* Replaces the emoji that were used as list markers. Fixed box so the text
   column stays aligned regardless of which mark is shown. */
.comparison-mark {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
}

.comparison-mark-bad {
  color: #ef4444;
  background: rgba(239, 68, 68, 0.12);
}

.comparison-mark-good {
  color: var(--accent-emerald);
  background: rgba(var(--accent-emerald-rgb), 0.12);
}

/* Targeted Audience Cards */
.audience-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  margin-top: 3.5rem;
}

.audience-card {
  padding: 2rem;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
}

/* Was an emoji glyph sized by font-size; now holds an inline SVG. */
.audience-icon {
  width: 48px;
  height: 48px;
  border-radius: var(--radius-md);
  background: rgba(var(--accent-cyan-rgb), 0.15);
  color: var(--accent-cyan);
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Process Timeline (EXELyzer 6-Step) */
.exelyzer-process-grid {
  display: grid;
  grid-template-columns: repeat(var(--pipeline-steps, 6), 1fr);
  gap: 1rem;
  margin-top: 3.5rem;
}

.exelyzer-process-step {
  padding: 1.5rem 1rem;
  text-align: center;
  border-radius: var(--radius-md);
  background: var(--surface-glass);
  border: 1px solid var(--surface-glass-border);
  position: relative;
}

.exelyzer-process-step::after {
  content: "→";
  position: absolute;
  right: -12px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--accent-cyan);
  font-weight: 700;
  font-size: 1.1rem;
  opacity: 0.35;
  transition: opacity var(--transition-normal);
}

.exelyzer-process-step:last-child::after { display: none; }

.process-step-icon {
  color: var(--accent-cyan);
  margin-bottom: 0.65rem;
  display: flex;
  justify-content: center;
  opacity: 0.55;
  transition: opacity var(--transition-normal), transform var(--transition-normal);
}

.process-step-title {
  font-weight: 700;
  font-size: 0.9rem;
}

.process-step-desc {
  font-size: 0.75rem;
  color: var(--text-secondary);
}

/* Scroll pipeline state. Only the accents brighten — the text keeps its full
   contrast in both states so nothing becomes harder to read. */
.exelyzer-process-step.active {
  border-color: rgba(var(--accent-cyan-rgb), 0.55);
  box-shadow: 0 0 18px rgba(var(--accent-cyan-rgb), 0.18);
}

.exelyzer-process-step.active .process-step-icon {
  opacity: 1;
  transform: scale(1.08);
}

.exelyzer-process-step.active::after { opacity: 1; }

.arch-tag {
  padding: 0.5rem 1.25rem;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--accent-cyan);
  border-color: rgba(var(--accent-cyan-rgb), 0.3);
  background: rgba(var(--accent-cyan-rgb), 0.1);
}

/* --------------------------------------------------------------------------
   8. Company Metrics
   -------------------------------------------------------------------------- */
.metrics-section {
  padding-top: 2rem;
  padding-bottom: 5rem;
}

.metrics-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5rem;
}

.metric-card {
  text-align: center;
  padding: 2.25rem 1.5rem;
}

.metric-number {
  font-size: 3.25rem;
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 1;
  margin-bottom: 0.5rem;
  background: var(--gradient-text-accent);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.metric-label {
  font-size: 0.95rem;
  color: var(--text-secondary);
  font-weight: 500;
}

/* --------------------------------------------------------------------------
   9. Bento Grid Services Layout
   -------------------------------------------------------------------------- */
.bento-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: minmax(280px, auto);
  gap: 1.5rem;
}

.bento-card {
  padding: 2.25rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  position: relative;
}

.bento-card-large {
  grid-column: span 2;
  grid-row: span 1;
}

.bento-card-tall {
  grid-column: span 1;
  grid-row: span 2;
}

.bento-icon-wrapper {
  width: 52px;
  height: 52px;
  border-radius: var(--radius-md);
  background: rgba(var(--accent-blue-rgb), 0.12);
  border: 1px solid rgba(var(--accent-blue-rgb), 0.25);
  color: var(--accent-blue);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1.5rem;
}

.bento-title {
  font-size: 1.4rem;
  font-weight: 700;
  margin-bottom: 0.75rem;
}

.bento-text {
  color: var(--text-secondary);
  font-size: 0.95rem;
  line-height: 1.6;
  margin-bottom: 1.5rem;
}

.bento-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.bento-tag {
  padding: 0.3rem 0.75rem;
  border-radius: var(--radius-full);
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--surface-glass-border);
  font-size: 0.75rem;
  color: var(--text-secondary);
}

.card-glow-tracker {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(400px circle at var(--mouse-x, 50%) var(--mouse-y, 50%), rgba(var(--accent-blue-rgb), 0.15), transparent 40%);
  opacity: 0;
  transition: opacity var(--transition-fast);
}

.bento-card:hover .card-glow-tracker {
  opacity: 1;
}

/* --------------------------------------------------------------------------
   10. Interactive Industry Solutions
   -------------------------------------------------------------------------- */
.industry-nav {
  display: flex;
  justify-content: center;
  gap: 0.75rem;
  flex-wrap: wrap;
  margin-bottom: 3rem;
}

.industry-tab {
  padding: 0.75rem 1.5rem;
  border-radius: var(--radius-full);
  background: var(--surface-glass);
  border: 1px solid var(--surface-glass-border);
  color: var(--text-secondary);
  font-weight: 500;
  font-size: 0.9rem;
  transition: all var(--transition-fast);
}

.industry-tab.active, .industry-tab:hover {
  background: var(--accent-blue);
  color: #ffffff;
  border-color: var(--accent-blue);
  box-shadow: 0 4px 20px rgba(var(--accent-blue-rgb), 0.35);
}

.industry-content-card {
  padding: 3.5rem;
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 3.5rem;
  align-items: center;
  border-radius: var(--radius-xl);
  background: var(--surface-glass);
  border: 1px solid var(--surface-glass-border);
  box-shadow: var(--shadow-lg), 0 0 40px rgba(var(--accent-blue-rgb), 0.08);
  position: relative;
  overflow: hidden;
  transition: all var(--transition-normal);
}

.industry-metrics-row {
  display: flex;
  gap: 1.5rem;
  align-items: stretch;
}

.industry-stat-card {
  flex: 1;
  padding: 1.25rem 1.5rem;
  border-radius: var(--radius-md);
  background: var(--bg-tertiary);
  border: 1px solid var(--surface-glass-border);
  box-shadow: var(--shadow-sm);
  transition: transform var(--transition-fast), border-color var(--transition-fast);
}

.industry-stat-card:hover {
  transform: translateY(-3px);
  border-color: rgba(var(--accent-blue-rgb), 0.35);
}

.stat-value-cyan {
  font-size: 2.1rem;
  font-weight: 800;
  color: var(--accent-cyan);
  line-height: 1.2;
}

.stat-value-emerald {
  font-size: 2.1rem;
  font-weight: 800;
  color: var(--accent-emerald);
  line-height: 1.2;
}

.stat-label {
  font-size: 0.82rem;
  color: var(--text-muted);
  font-weight: 600;
  margin-top: 0.35rem;
}

.industry-capabilities-box {
  background: var(--bg-secondary);
  border-radius: var(--radius-lg);
  padding: 2.25rem 2rem;
  border: 1px solid var(--surface-glass-border);
  box-shadow: var(--shadow-md), 0 10px 30px rgba(0, 0, 0, 0.04);
  position: relative;
}

.capabilities-header {
  font-size: 0.8rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  color: var(--accent-blue);
  margin-bottom: 1.5rem;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  text-transform: uppercase;
}

.capabilities-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
}

.capabilities-list li {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  font-size: 0.95rem;
  color: var(--text-primary);
  font-weight: 500;
  line-height: 1.45;
}

.capabilities-list li svg {
  flex-shrink: 0;
  margin-top: 2px;
}

/* --------------------------------------------------------------------------
   11. Interactive Technology Stack Matrix
   -------------------------------------------------------------------------- */
.tech-tabs {
  display: flex;
  justify-content: center;
  gap: 0.5rem;
  flex-wrap: wrap;
  max-width: 100%;
  margin-bottom: 3rem;
}

.tech-tab {
  padding: 0.6rem 1.25rem;
  border-radius: var(--radius-md);
  color: var(--text-secondary);
  font-weight: 600;
  font-size: 0.85rem;
  transition: all var(--transition-fast);
}

.tech-tab.active {
  background: var(--surface-glass);
  border: 1px solid var(--accent-blue);
  color: var(--accent-blue);
}

.tech-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 1.25rem;
}

.tech-item {
  padding: 1.5rem 1rem;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
}

.tech-icon {
  width: 44px;
  height: 44px;
  color: var(--accent-cyan);
}

.tech-name {
  font-size: 0.85rem;
  font-weight: 600;
}

/* --------------------------------------------------------------------------
   12. Horizontal Development Process Timeline
   -------------------------------------------------------------------------- */
.timeline-track {
  display: grid;
  /* Column count is published by the template so editors can add or remove
     steps without the grid overflowing. Falls back to the original six. */
  grid-template-columns: repeat(var(--timeline-steps, 6), 1fr);
  gap: 1rem;
  position: relative;
  margin-top: 3rem;
}

.timeline-line {
  position: absolute;
  top: 24px;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--surface-glass-border);
  z-index: 0;
}

.timeline-progress {
  height: 100%;
  width: 0;
  background: var(--gradient-brand);
  /* Short linear smoothing so the scrub tracks the scrollbar without
     visible rAF stepping. Longer easing here would feel laggy. */
  transition: width 0.15s linear;
}

.timeline-step {
  position: relative;
  z-index: 1;
}

.step-node {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--bg-secondary);
  border: 2px solid var(--accent-blue);
  color: var(--text-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  margin-bottom: 1.5rem;
  transition: all var(--transition-fast);
}

.timeline-step.active .step-node {
  background: var(--accent-blue);
  color: #ffffff;
  box-shadow: 0 0 20px var(--accent-blue);
}

.step-title {
  font-size: 1rem;
  font-weight: 700;
  margin-bottom: 0.5rem;
}

.step-desc {
  font-size: 0.85rem;
  color: var(--text-secondary);
  line-height: 1.5;
}

/* --------------------------------------------------------------------------
   13. Case Studies Horizontal Showcase
   -------------------------------------------------------------------------- */
.case-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
}

.case-card {
  border-radius: var(--radius-xl);
  overflow: hidden;
}

.case-image-wrapper {
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
}

.case-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--transition-normal);
}

.case-card:hover .case-image {
  transform: scale(1.05);
}

.case-overlay-tag {
  position: absolute;
  top: 1rem;
  left: 1rem;
  padding: 0.35rem 0.85rem;
  border-radius: var(--radius-full);
  background: rgba(11, 16, 32, 0.85);
  backdrop-filter: blur(10px);
  color: var(--accent-cyan);
  font-size: 0.75rem;
  font-weight: 600;
}

.case-content {
  padding: 1.75rem;
}

.case-metrics {
  display: flex;
  gap: 1.5rem;
  margin-top: 1.25rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--surface-glass-border);
}

.metric-highlight-value {
  font-weight: 800;
  color: var(--accent-emerald);
  font-size: 1.1rem;
}

.metric-highlight-label {
  font-size: 0.75rem;
  color: var(--text-muted);
}

/* --------------------------------------------------------------------------
   14. Testimonials Carousel
   -------------------------------------------------------------------------- */
.testimonial-slider {
  max-width: 860px;
  margin: 0 auto;
  position: relative;
}

.testimonial-card {
  padding: 3rem;
  text-align: center;
}

.testimonial-quote {
  font-size: 1.35rem;
  line-height: 1.6;
  font-weight: 500;
  margin-bottom: 2rem;
}

.testimonial-author {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
}

.author-avatar {
  width: 54px;
  height: 54px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--accent-blue);
}

.author-name {
  font-weight: 700;
  font-size: 1rem;
}

.author-role {
  font-size: 0.85rem;
  color: var(--text-secondary);
}

/* --------------------------------------------------------------------------
   15. FAQ Accordion
   -------------------------------------------------------------------------- */
.faq-search-wrapper {
  max-width: 600px;
  margin: 0 auto 2.5rem auto;
  position: relative;
}

.faq-search-input {
  width: 100%;
  padding: 1rem 1.5rem 1rem 3rem;
  border-radius: var(--radius-full);
  background: var(--surface-glass);
  border: 1px solid var(--surface-glass-border);
  color: var(--text-primary);
  font-size: 0.95rem;
  backdrop-filter: blur(10px);
}

.faq-search-icon {
  position: absolute;
  left: 1.25rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-muted);
}

.faq-accordion {
  max-width: 800px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.faq-item {
  border-radius: var(--radius-md);
  overflow: hidden;
}

.faq-question {
  width: 100%;
  padding: 1.35rem 1.75rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--text-primary);
  text-align: left;
}

.faq-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height var(--transition-normal), padding var(--transition-normal);
  padding: 0 1.75rem;
  color: var(--text-secondary);
  line-height: 1.6;
  font-size: 0.95rem;
}

.faq-item.open .faq-answer {
  max-height: 300px;
  padding: 0 1.75rem 1.5rem 1.75rem;
}

.faq-icon-chevron {
  transition: transform var(--transition-fast);
}

.faq-item.open .faq-icon-chevron {
  transform: rotate(180deg);
  color: var(--accent-blue);
}

/* --------------------------------------------------------------------------
   16. Contact Section (Split Layout)
   -------------------------------------------------------------------------- */
.contact-grid {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: 3rem;
}

.contact-info {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.contact-detail-item {
  display: flex;
  gap: 1rem;
  margin-bottom: 1.75rem;
}

.contact-icon {
  width: 44px;
  height: 44px;
  border-radius: var(--radius-md);
  background: rgba(var(--accent-blue-rgb), 0.12);
  color: var(--accent-blue);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.contact-form-card {
  padding: 2.5rem;
}

.form-group {
  margin-bottom: 1.5rem;
}

.form-label {
  display: block;
  font-size: 0.85rem;
  font-weight: 600;
  margin-bottom: 0.5rem;
  color: var(--text-primary);
}

.form-input, .form-textarea, .form-select {
  width: 100%;
  padding: 0.85rem 1.25rem;
  border-radius: var(--radius-md);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--surface-glass-border);
  color: var(--text-primary);
  font-size: 0.95rem;
  font-family: inherit;
  transition: border-color var(--transition-fast);
}

.form-select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%233b82f6' stroke-width='2.5' viewBox='0 0 24 24'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1.25rem center;
  background-size: 1.1rem;
  padding-right: 3rem;
  cursor: pointer;
}

.form-select option {
  background-color: #0b1020;
  color: #f8fafc;
  padding: 0.75rem 1rem;
}

[data-theme="light"] .form-select option {
  background-color: #ffffff;
  color: #0f172a;
}

.form-input:focus, .form-textarea:focus, .form-select:focus {
  border-color: var(--accent-blue);
  box-shadow: 0 0 15px rgba(var(--accent-blue-rgb), 0.25);
  outline: none;
}

.form-textarea {
  resize: vertical;
  min-height: 120px;
}

/* Modal Overlay Styling */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(5, 8, 22, 0.85);
  backdrop-filter: blur(16px);
  z-index: 2000;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--transition-normal);
}

.modal-overlay.active {
  opacity: 1;
  pointer-events: auto;
}

.modal-card {
  width: 90%;
  max-width: 720px;
  padding: 2.5rem;
  position: relative;
}

.modal-close {
  position: absolute;
  top: 1.5rem;
  right: 1.5rem;
  color: var(--text-muted);
  font-size: 1.5rem;
  cursor: pointer;
}

/* EXELyzer Grand Final CTA Card */
.exelyzer-cta-card {
  padding: 4.5rem 3rem !important;
  text-align: center !important;
  background: linear-gradient(135deg, rgba(var(--accent-cyan-rgb), 0.15), rgba(var(--accent-blue-rgb), 0.15)) !important;
  border: 1px solid rgba(var(--accent-cyan-rgb), 0.4) !important;
  border-radius: var(--radius-xl) !important;
  box-shadow: var(--shadow-lg), 0 0 50px rgba(var(--accent-cyan-rgb), 0.15) !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
}

.exelyzer-cta-card .section-title {
  text-align: center !important;
  font-size: clamp(1.8rem, 3.8vw, 3.2rem) !important;
  font-weight: 800 !important;
  max-width: 820px !important;
  margin: 0 auto 1.5rem auto !important;
  line-height: 1.2 !important;
}

.exelyzer-cta-card .section-description {
  text-align: center !important;
  max-width: 680px !important;
  margin: 0 auto 2.5rem auto !important;
  font-size: 1.15rem !important;
  color: var(--text-secondary) !important;
}

.cta-buttons-wrapper {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 1.25rem !important;
}

/* --------------------------------------------------------------------------
   17. Enterprise Footer
   -------------------------------------------------------------------------- */
.footer {
  border-top: 1px solid var(--surface-glass-border);
  padding-top: 5rem;
  padding-bottom: 3rem;
  position: relative;
  z-index: 1;
}

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

.footer-title {
  font-size: 0.9rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 1.25rem;
  color: var(--text-primary);
}

.footer-links {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.footer-link {
  color: var(--text-secondary);
  font-size: 0.9rem;
  transition: color var(--transition-fast);
}

.footer-link:hover {
  color: var(--accent-blue);
}

.footer-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 2rem;
  border-top: 1px solid var(--surface-glass-border);
  font-size: 0.85rem;
  color: var(--text-muted);
}

.system-status-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--accent-emerald);
  font-weight: 600;
}

/* Global Overflow Protection */
html, body {
  overflow-x: hidden;
  width: 100%;
}

/* Marquee Infinite Scroll Preservation */
.marquee-strip-section {
  width: 100%;
  overflow: hidden;
  position: relative;
}

.marquee-track {
  display: flex !important;
  flex-wrap: nowrap !important;
  white-space: nowrap !important;
  width: max-content !important;
  max-width: none !important;
  animation: marqueeScroll 25s linear infinite !important;
}

.marquee-track span {
  white-space: nowrap !important;
  display: inline-flex !important;
}

/* --------------------------------------------------------------------------
   18. Responsive Breakpoints & Mobile Optimization
   -------------------------------------------------------------------------- */
@media (max-width: 1024px) {
  .hero-grid {
    grid-template-columns: 1fr;
    gap: 3rem;
  }
  
  .bento-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .bento-card-large {
    grid-column: span 2;
  }
  
  .bento-card-tall {
    grid-column: span 2;
    grid-row: span 1;
  }
  
  .tech-grid {
    grid-template-columns: repeat(3, 1fr);
  }
  
  .case-grid {
    grid-template-columns: 1fr;
  }
  
  .contact-grid {
    grid-template-columns: 1fr;
  }
  
  .footer-grid {
    grid-template-columns: 1fr repeat(2, 1fr);
  }
  
  .exelyzer-bento-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .comparison-container {
    grid-template-columns: 1fr;
  }
  
  .exelyzer-process-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 768px) {
  .mobile-br {
    display: block !important;
  }

  .hero-content, .hero-text-col {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
    box-sizing: border-box;
  }

  .nav-links, .nav-actions .btn {
    display: none;
  }
  
  .mobile-hamburger {
    display: flex;
  }
  
  .section-title {
    font-size: clamp(1.35rem, 4.5vw, 2.1rem);
    word-break: normal !important;
    overflow-wrap: normal !important;
    hyphens: none !important;
  }
  
  .hero-title {
    font-size: clamp(1.35rem, 4.5vw, 1.85rem);
    word-break: normal !important;
    overflow-wrap: normal !important;
    hyphens: none !important;
    line-height: 1.25;
  }

  .exelyzer-cta-card {
    padding: 2.5rem 1.25rem;
  }

  .cta-buttons-wrapper {
    flex-direction: column;
    width: 100%;
    gap: 0.85rem;
  }

  .cta-buttons-wrapper .btn {
    width: 100%;
    justify-content: center;
  }

  .hero-subtitle {
    font-size: 1.05rem;
  }

  .hero-buttons {
    flex-direction: column;
    width: 100%;
    align-items: stretch;
    gap: 0.85rem;
  }

  .hero-buttons .btn {
    width: 100%;
  }

  .badge-pill {
    max-width: 100%;
    white-space: normal;
    word-break: break-word;
    text-align: center;
    line-height: 1.4;
  }

  .hero-trust-bar {
    width: 100%;
    max-width: 100%;
    overflow: hidden;
    margin-top: 1rem;
  }

  .logo-marquee {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 0.65rem 1.25rem !important;
    justify-content: center !important;
    max-width: 100% !important;
    opacity: 0.85;
  }

  .brand-logo-item {
    font-size: 0.78rem;
    white-space: nowrap;
  }

  .ide-container, .exelyzer-mockup-wrapper {
    transform: none !important;
    width: 100%;
    max-width: 100%;
  }

  .ide-header {
    flex-wrap: wrap;
    gap: 0.5rem;
  }

  .ide-body {
    font-size: 0.75rem;
    padding: 1rem;
  }
  
  .metrics-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .bento-grid {
    grid-template-columns: 1fr;
  }
  
  .bento-card-large, .bento-card-tall {
    grid-column: span 1;
  }
  
  .industry-content-card {
    grid-template-columns: 1fr;
    padding: 1.5rem;
    gap: 2rem;
  }
  
  .industry-metrics-row {
    flex-direction: column;
    gap: 1.25rem;
  }
  
  .timeline-track {
    grid-template-columns: 1fr;
  }
  
  .timeline-line {
    display: none;
  }
  
  .exelyzer-bento-grid {
    grid-template-columns: 1fr;
  }
  
  .audience-grid {
    grid-template-columns: 1fr;
  }
  
  .exelyzer-process-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .floating-feature-badge {
    position: static;
    margin: 0.65rem auto;
    display: inline-flex;
    transform: none !important;
    animation: none !important;
  }

  .badge-top-left, .badge-bottom-right {
    top: auto;
    left: auto;
    right: auto;
    bottom: auto;
  }

  .footer-grid {
    grid-template-columns: 1fr;
    gap: 2rem;
  }

  .footer-bottom {
    flex-direction: column;
    gap: 1rem;
    text-align: center;
  }

  .modal-card {
    padding: 1.75rem;
    width: 95%;
  }

  .tech-tabs, .industry-nav {
    gap: 0.35rem;
    flex-wrap: wrap;
    justify-content: center;
    width: 100%;
    margin-bottom: 2rem;
  }

  .tech-tab {
    padding: 0.45rem 0.75rem;
    font-size: 0.78rem;
  }

  .industry-tab {
    padding: 0.5rem 0.85rem;
    font-size: 0.8rem;
  }
}

@media (max-width: 480px) {
  .container {
    width: 100%;
    max-width: 100%;
    padding-left: 0.85rem;
    padding-right: 0.85rem;
    box-sizing: border-box;
  }

  .section {
    padding-top: 3.5rem;
    padding-bottom: 3.5rem;
  }

  .navbar {
    height: 60px;
    padding: 0 0.85rem;
  }

  .brand-logo {
    font-size: 1.05rem;
    gap: 0.4rem;
  }

  .brand-mark {
    width: 28px;
    height: 28px;
    font-size: 0.8rem;
  }

  .hero-title {
    font-size: 1.4rem;
    line-height: 1.3;
    word-break: normal;
    overflow-wrap: break-word;
    max-width: 100%;
  }

  .hero-subtitle {
    font-size: 0.88rem;
    line-height: 1.5;
  }

  .badge-pill {
    font-size: 0.65rem;
    padding: 0.25rem 0.6rem;
    max-width: 100%;
    white-space: normal;
  }

  .hero-trust-bar {
    width: 100%;
    max-width: 100%;
    overflow: hidden;
  }

  .logo-marquee {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    justify-content: center;
    max-width: 100%;
  }

  .brand-logo-item {
    font-size: 0.75rem;
  }

  .ide-header {
    flex-wrap: wrap;
    gap: 0.35rem;
    padding: 0.5rem 0.75rem;
  }

  .ide-tabs {
    flex-wrap: wrap;
    gap: 0.2rem;
  }

  .ide-tab {
    padding: 0.25rem 0.5rem;
    font-size: 0.65rem;
  }

  .ide-body {
    padding: 0.75rem;
    font-size: 0.7rem;
  }

  .ide-terminal {
    padding: 0.5rem 0.75rem;
    font-size: 0.7rem;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.25rem;
  }
  
  .section-title {
    font-size: 1.45rem;
    line-height: 1.3;
  }

  .section-description {
    font-size: 0.88rem;
  }

  .section-header {
    margin-bottom: 2rem;
  }
  
  .metrics-grid {
    grid-template-columns: 1fr;
    gap: 1rem;
  }

  .metric-card {
    padding: 1.5rem 1rem;
  }

  .metric-number {
    font-size: 2.4rem;
  }
  
  .tech-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 0.75rem;
  }

  .tech-item {
    padding: 1rem 0.5rem;
  }
  
  .exelyzer-process-grid {
    grid-template-columns: 1fr;
    gap: 0.75rem;
  }

  .exelyzer-process-step::after {
    display: none;
  }

  .bento-card, .glass-card, .contact-form-card {
    padding: 1.25rem;
  }

  .industry-content-card {
    padding: 1.25rem;
    gap: 1.25rem;
  }

  .industry-tab {
    padding: 0.4rem 0.7rem;
    font-size: 0.75rem;
  }

  .tech-tab {
    padding: 0.4rem 0.6rem;
    font-size: 0.75rem;
  }

  .case-content {
    padding: 1.25rem;
  }

  .case-metrics {
    gap: 1rem;
  }

  .testimonial-card {
    padding: 1.5rem 1rem;
  }

  .testimonial-quote {
    font-size: 1.05rem;
  }

  .faq-search-input {
    font-size: 0.85rem;
    padding: 0.85rem 1rem 0.85rem 2.5rem;
  }

  .faq-question {
    padding: 1rem 1.15rem;
    font-size: 0.92rem;
  }

  .faq-answer {
    padding: 0 1.15rem 1rem 1.15rem;
    font-size: 0.88rem;
  }

  .modal-card {
    width: 96%;
    padding: 1.25rem;
    max-height: 90vh;
    overflow-y: auto;
  }
}

/* Specific 360px Micro Mobile Viewport Override (Samsung Galaxy & Small Phones) */
@media (max-width: 380px) {
  .hero-title {
    font-size: 1.5rem;
  }

  .section-title {
    font-size: 1.45rem;
  }

  .btn {
    padding: 0.75rem 1.25rem;
    font-size: 0.85rem;
  }

  .badge-pill {
    font-size: 0.68rem;
    padding: 0.25rem 0.6rem;
  }

  .industry-tab, .tech-tab {
    font-size: 0.72rem;
    padding: 0.35rem 0.6rem;
  }
}

/* ==========================================================================
   Reduced Motion
   Last in the file so it overrides every animation declared above.
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    transition-delay: 0ms !important;
    scroll-behavior: auto !important;
  }

  /* Reveal content immediately rather than leaving it stuck at opacity 0.
     Doubled class to match the specificity used in the base rule above. */
  .reveal-on-scroll.reveal-on-scroll {
    opacity: 1;
    transform: none;
  }

  /* The marquee is an infinite loop; park it rather than letting it snap
     through 25s of travel in 0.01ms. */
  .marquee-track {
    animation: none !important;
    transform: none !important;
  }

  /* Blinking cursor on the hero rotator. */
  .typing-cursor {
    animation: none !important;
    opacity: 1;
  }

  /* Cancel the mouse-driven 3D tilt applied via inline transform. */
  .exelyzer-mockup-wrapper {
    transform: none !important;
  }
}

/* ============================================================
   LANGUAGE SWITCHER
   Rendered only when more than one language is configured, so
   these rules are inert on a monolingual site.
   ============================================================ */

.lang-switcher {
  position: relative;
  flex-shrink: 0;
}

.lang-switcher-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.5rem 0.75rem;
  background: rgba(var(--accent-cyan-rgb), 0.08);
  border: 1px solid rgba(var(--accent-cyan-rgb), 0.28);
  border-radius: 999px;
  color: var(--text-primary);
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  cursor: pointer;
  transition: background var(--transition-fast), border-color var(--transition-fast);
}

.lang-switcher-toggle:hover,
.lang-switcher-toggle:focus-visible {
  background: rgba(var(--accent-cyan-rgb), 0.16);
  border-color: rgba(var(--accent-cyan-rgb), 0.5);
  outline: none;
}

.lang-switcher-caret {
  width: 0;
  height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 5px solid currentColor;
  opacity: 0.7;
  transition: transform var(--transition-fast);
}

.lang-switcher-toggle[aria-expanded="true"] .lang-switcher-caret {
  transform: rotate(180deg);
}

.lang-switcher-menu {
  position: absolute;
  top: calc(100% + 0.5rem);
  right: 0;
  min-width: 11rem;
  margin: 0;
  padding: 0.4rem;
  list-style: none;
  background: var(--glass-bg, rgba(11, 16, 32, 0.96));
  border: 1px solid rgba(var(--accent-cyan-rgb), 0.25);
  border-radius: 14px;
  box-shadow: var(--shadow-lg);
  backdrop-filter: blur(18px);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity var(--transition-fast), transform var(--transition-fast), visibility var(--transition-fast);
  z-index: 1200;
}

.lang-switcher-toggle[aria-expanded="true"] + .lang-switcher-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.lang-switcher-menu a {
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
  padding: 0.55rem 0.7rem;
  border-radius: 9px;
  color: var(--text-secondary);
  text-decoration: none;
  font-size: 0.88rem;
  transition: background var(--transition-fast), color var(--transition-fast);
}

.lang-switcher-menu a:hover,
.lang-switcher-menu a:focus-visible {
  background: rgba(var(--accent-cyan-rgb), 0.12);
  color: var(--text-primary);
  outline: none;
}

.lang-switcher-menu a[aria-current="true"] {
  color: var(--accent-cyan);
  font-weight: 600;
}

.lang-switcher-code {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  opacity: 0.75;
  min-width: 1.8em;
}

/* In the drawer the list is always open: a nested popover inside a
   slide-in panel is awkward on touch. */
.lang-switcher-drawer {
  margin-top: 1.25rem;
  border-top: 1px solid rgba(148, 163, 184, 0.18);
  padding-top: 1rem;
}

.lang-switcher-drawer .lang-switcher-toggle {
  display: none;
}

.lang-switcher-drawer .lang-switcher-menu {
  position: static;
  opacity: 1;
  visibility: visible;
  transform: none;
  min-width: 0;
  background: none;
  border: none;
  box-shadow: none;
  backdrop-filter: none;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}

@media (max-width: 968px) {
  .lang-switcher-header {
    display: none;
  }
}

/* ============================================================
   TRUST BAR — image logos
   A row may render as a wordmark (the original behaviour) or as
   an uploaded image. Client logos are shown as supplied: no
   greyscale or opacity filter, because altering a company's mark
   is exactly what we do not do with our own.
   ============================================================ */

.brand-logo-item-image {
  display: inline-flex;
  align-items: center;
  line-height: 1;
}

.brand-logo-item-image img {
  display: block;
  width: auto;
  max-width: 180px;
  object-fit: contain;
}

@media (max-width: 640px) {
  .brand-logo-item-image img {
    max-width: 120px;
  }
}

/* ============================================================
   PRODUCTS
   Cards are shared by the home section, the products listing
   and the Products dropdown, so the three cannot drift apart.
   ============================================================ */

.product-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 1.75rem;
}

.product-category-block {
  margin-bottom: 3.5rem;
}

.product-category-title {
  font-size: 1.1rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-secondary);
  margin-bottom: 1.25rem;
}

.product-card {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  padding: 1.75rem;
  border-radius: var(--radius-lg);
  border: 1px solid rgba(var(--accent-cyan-rgb), 0.22);
  background: linear-gradient(135deg, rgba(var(--accent-cyan-rgb), 0.07), rgba(11, 16, 32, 0.6));
  text-decoration: none;
  color: inherit;
  transition: transform var(--transition-normal), border-color var(--transition-normal), box-shadow var(--transition-normal);
}

.product-card:hover,
.product-card:focus-visible {
  transform: translateY(-4px);
  border-color: rgba(var(--accent-cyan-rgb), 0.5);
  box-shadow: var(--shadow-lg);
  outline: none;
}

.product-card-media img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 12px;
}

.product-card-body {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.product-card-head {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex-wrap: wrap;
}

.product-card-icon {
  display: inline-flex;
  color: var(--accent-cyan);
}

.product-card-name {
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--text-primary);
}

.product-card-badge {
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  padding: 0.2rem 0.5rem;
  border-radius: 999px;
  border: 1px solid currentColor;
}

.product-card-badge-beta {
  color: var(--accent-cyan);
}

.product-card-badge-coming-soon {
  color: var(--text-secondary);
}

.product-card-tagline {
  font-size: 0.92rem;
  color: var(--accent-cyan);
}

.product-card-pitch {
  font-size: 0.9rem;
  line-height: 1.6;
  color: var(--text-secondary);
}

.product-card-metrics {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
  margin-top: 0.5rem;
}

.product-card-metric {
  display: flex;
  flex-direction: column;
}

.product-card-metric strong {
  font-size: 1.35rem;
  font-weight: 800;
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
}

.product-card-metric em {
  font-size: 0.75rem;
  font-style: normal;
  letter-spacing: 0.04em;
  color: var(--text-secondary);
}

/* ---- Compact variant used inside the Products dropdown ---- */
.product-card-menu {
  flex-direction: row;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 0.85rem 1rem;
  border-radius: 12px;
}

.product-card-menu .product-card-name {
  font-size: 0.98rem;
}

.product-card-menu .product-card-tagline {
  font-size: 0.82rem;
  color: var(--text-secondary);
}

/* ---- Metric row on a single product page ---- */
.product-metric-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 3rem;
  margin-top: 2.5rem;
}

.product-metric {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.product-metric-value {
  font-size: 2.4rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  background: var(--gradient-brand);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.product-metric-label {
  font-size: 0.82rem;
  letter-spacing: 0.06em;
  color: var(--text-secondary);
}

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

  .product-metric-row {
    gap: 1.75rem;
  }
}

/* ============================================================
   COOKIE CONSENT, FORM CONSENT, CERTIFICATIONS
   ============================================================ */

.cookie-consent {
  position: fixed;
  left: 1.25rem;
  right: 1.25rem;
  bottom: 1.25rem;
  z-index: 2000;
  background: rgba(11, 16, 32, 0.97);
  border: 1px solid rgba(var(--accent-cyan-rgb), 0.3);
  border-radius: 16px;
  box-shadow: var(--shadow-lg);
  backdrop-filter: blur(18px);
  padding: 1.25rem 1.5rem;
  max-width: 720px;
  margin: 0 auto;
  animation: consent-rise 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes consent-rise {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  .cookie-consent { animation: none; }
}

.cookie-consent[hidden] { display: none; }

.cookie-consent-inner {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  flex-wrap: wrap;
}

.cookie-consent-text {
  flex: 1 1 320px;
  margin: 0;
  font-size: 0.88rem;
  line-height: 1.6;
  color: var(--text-secondary);
}

.cookie-consent-text a {
  color: var(--accent-cyan);
}

.cookie-consent-actions {
  display: flex;
  gap: 0.75rem;
  flex-shrink: 0;
}

.cookie-consent-actions .btn {
  padding: 0.6rem 1.4rem;
  font-size: 0.85rem;
}

.btn-ghost {
  background: transparent;
  border: 1px solid rgba(148, 163, 184, 0.4);
  color: var(--text-secondary);
}

.btn-ghost:hover,
.btn-ghost:focus-visible {
  border-color: rgba(148, 163, 184, 0.7);
  color: var(--text-primary);
}

/* ---- Consent tick on forms ---- */
.form-consent {
  display: flex;
  align-items: flex-start;
  gap: 0.65rem;
  margin-bottom: 1.25rem;
}

.form-consent input[type="checkbox"] {
  margin-top: 0.2rem;
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  accent-color: var(--accent-cyan);
}

.form-consent label {
  font-size: 0.82rem;
  line-height: 1.55;
  color: var(--text-secondary);
}

.form-consent a {
  color: var(--accent-cyan);
}

/* ---- Certification band ---- */
.cert-band-label {
  text-align: center;
  font-size: 0.75rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-muted, var(--text-secondary));
  margin: 0 0 1.5rem;
}

.cert-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 2.5rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.cert-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.35rem;
}

.cert-item a {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.35rem;
  text-decoration: none;
  transition: opacity var(--transition-fast);
}

.cert-item a:hover,
.cert-item a:focus-visible {
  opacity: 0.75;
  outline: none;
}

/* Badges are shown as issued: no greyscale filter, because an accreditation
   mark is the issuer's, not ours to restyle. */
.cert-badge {
  display: block;
  height: 48px;
  width: auto;
  max-width: 160px;
  object-fit: contain;
}

.cert-name {
  font-size: 1rem;
  font-weight: 700;
  color: var(--text-primary);
  letter-spacing: 0.02em;
}

.cert-issuer {
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  color: var(--text-secondary);
}

@media (max-width: 640px) {
  .cert-list { gap: 1.75rem; }
  .cert-badge { height: 36px; }
  .cookie-consent-actions { width: 100%; }
  .cookie-consent-actions .btn { flex: 1; }
}

/* ============================================================
   REFERENCE PATTERNS
   Layouts ported from the supplied CRM reference; palette is
   this site's own. Every colour below comes from the existing
   tokens so these sections sit with the rest of the theme
   rather than importing a second visual language.
   ============================================================ */

/* ---- The wipe reveal ----
   The reference reveals a whole column behind one soft-edged mask
   sweeping left to right: heading, titles and body text are all cut at
   the same x position, so it is one mask over the block rather than a
   per-element fade. Reproduced with an oversized gradient mask whose
   position animates; the feathered stop is what gives the soft edge.

   It rides the existing reveal observer, so it inherits the same
   --reveal-i stagger. The doubled class matches the specificity of
   .reveal-on-scroll.reveal-on-scroll and, coming later, wins. */
.reveal-on-scroll.infieone-wipe {
  opacity: 1;
  transform: none;
  -webkit-mask-image: linear-gradient(to right, #000 0 40%, transparent 58%);
  mask-image: linear-gradient(to right, #000 0 40%, transparent 58%);
  -webkit-mask-size: 250% 100%;
  mask-size: 250% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: 100% 0;
  mask-position: 100% 0;
  transition: -webkit-mask-position 1.1s cubic-bezier(0.22, 0.61, 0.36, 1),
              mask-position 1.1s cubic-bezier(0.22, 0.61, 0.36, 1);
  transition-delay: calc(var(--reveal-i, 0) * 90ms);
}

.reveal-on-scroll.infieone-wipe.is-visible {
  -webkit-mask-position: 0 0;
  mask-position: 0 0;
}

@media (prefers-reduced-motion: reduce) {
  .reveal-on-scroll.infieone-wipe,
  .reveal-on-scroll.infieone-wipe.is-visible {
    -webkit-mask-image: none;
    mask-image: none;
    transition: none;
  }
}

/* ---- Shared pattern furniture ---- */
.infieone-section-sub {
  color: var(--text-secondary);
  font-size: 1.02rem;
  max-width: 60ch;
  margin-left: auto;
  margin-right: auto;
}

.infieone-eyebrow {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent-cyan);
}

.infieone-icon-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: 14px;
  background: rgba(var(--accent-cyan-rgb), 0.12);
  border: 1px solid rgba(var(--accent-cyan-rgb), 0.28);
  color: var(--accent-cyan);
  margin-bottom: 1rem;
  flex-shrink: 0;
}

.infieone-icon-chip-sm {
  width: 42px;
  height: 42px;
  border-radius: 12px;
  margin-bottom: 0;
}

/* ---- Module grid ---- */
/* Grid rather than wp-block-columns: columns hold a fixed count at any
   width, so four of them inside the inner-page measure left roughly 90px
   per card and words such as "Encryption" broke mid-word. Grid re-flows on
   available space and stretches every card to the row height, which also
   lines the buttons up. */
/* Qualified with .wp-block-columns deliberately: core's own
   ".wp-block-columns { display: flex }" is the same specificity and is
   enqueued after the theme, so an unqualified selector lost and the row
   stayed flex — which is what left the fourth card 135px wide. */
/* These react to the width of the block they sit in, not the window. An
   inner page caps content at 900px, so on a 1440px screen the row is only
   818px wide — auto-fit then made three tracks and stranded the fourth card
   alone on a second row, and any viewport media query would have "corrected"
   it to four cramped columns. Container queries measure the thing that
   actually constrains the cards. */
.infieone-pattern,
.infieone-ai-panel {
  container-type: inline-size;
}

.wp-block-columns.infieone-module-row,
.wp-block-columns.infieone-industry-row,
.wp-block-columns.infieone-ai-cards {
  display: grid;
  /* Two is the safe default, and the fallback where @container is absent. */
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.5rem;
  align-items: stretch;
}

@container (max-width: 560px) {
  .wp-block-columns.infieone-module-row,
  .wp-block-columns.infieone-industry-row,
  .wp-block-columns.infieone-ai-cards {
    grid-template-columns: minmax(0, 1fr);
  }
}

@container (min-width: 1040px) {
  .wp-block-columns.infieone-module-row,
  .wp-block-columns.infieone-industry-row {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .wp-block-columns.infieone-ai-cards {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.wp-block-columns.infieone-module-row > .wp-block-column,
.wp-block-columns.infieone-industry-row > .wp-block-column,
.wp-block-columns.infieone-ai-cards > .wp-block-column {
  flex-basis: auto !important;
  min-width: 0;
  /* The column is the grid item; without stretching it the card's
     height:100% resolves against its own content and short cards sit
     shorter than their neighbours. */
  align-self: stretch;
  display: flex;
  height: 100%;
}

.infieone-module,
.infieone-industry,
.infieone-ai-card {
  height: 100%;
  display: flex;
  flex-direction: column;
  padding: 1.5rem;
  border-radius: var(--radius-lg);
  /* Theme tokens, not literals: the site runs data-theme="light", so a
     hardcoded dark surface rendered as grey mud with dark text on it. */
  border: 1px solid var(--surface-glass-border);
  background: var(--surface-glass);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  transition: transform var(--transition-normal), border-color var(--transition-normal), box-shadow var(--transition-normal);
}

.infieone-module:hover,
.infieone-industry:hover,
.infieone-ai-card:hover {
  transform: translateY(-4px);
  border-color: rgba(var(--accent-cyan-rgb), 0.45);
  box-shadow: var(--shadow-lg);
}

/* The reference highlights one card with a coloured underline. Reproduced
   as a hover affordance rather than a permanently "active" card, which on
   a static page just looks like a mistake. */
.infieone-module::after,
.infieone-industry::after {
  content: "";
  display: block;
  height: 3px;
  margin: 1.25rem -1.75rem -1.75rem;
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
  background: var(--gradient-brand);
  opacity: 0;
  transition: opacity var(--transition-normal);
}

.infieone-module:hover::after,
.infieone-industry:hover::after {
  opacity: 1;
}

.infieone-module h3,
.infieone-industry h3,
.infieone-ai-card h3 {
  font-size: 1.15rem;
  margin: 0 0 0.5rem;
}

.infieone-module p,
.infieone-industry p,
.infieone-ai-card p {
  font-size: 0.9rem;
  line-height: 1.6;
  color: var(--text-secondary);
}

/* Same wrapper problem: without this the card's flex column contains a
   single child, so margin-top:auto on the button had nothing to push
   against and the buttons only lined up when the text happened to match. */
.infieone-module > .wp-block-group__inner-container,
.infieone-industry > .wp-block-group__inner-container,
.infieone-ai-card > .wp-block-group__inner-container {
  display: flex;
  flex-direction: column;
  flex: 1;
  width: 100%;
}

.infieone-module .wp-block-buttons,
.infieone-industry .wp-block-buttons {
  margin-top: auto;
  padding-top: 1rem;
}

/* ---- Assistant panel ---- */
.infieone-ai-panel {
  padding: 3.5rem 2.5rem;
  border-radius: 28px;
  border: 1px solid var(--surface-glass-border);
  background:
    radial-gradient(circle at 50% 0%, rgba(var(--accent-cyan-rgb), 0.12), transparent 62%),
    var(--bg-tertiary);
}

.infieone-ai-panel > h2 {
  margin-bottom: 0.25rem;
}

.infieone-ai-cards {
  margin-top: 2.5rem;
}

.infieone-ai-card {
  align-items: flex-start;
  text-align: left;
}

.infieone-composer {
  margin-top: 2rem;
  padding: 1.25rem 1.5rem;
  border-radius: 18px;
  border: 1px solid var(--surface-glass-border);
  background: var(--bg-secondary);
}

.infieone-composer-prompt {
  margin: 0 0 0.75rem;
  color: var(--text-primary);
  font-size: 0.98rem;
}

.infieone-composer-chips {
  margin: 0;
  font-size: 0.8rem;
  letter-spacing: 0.04em;
  color: var(--accent-cyan);
}

.infieone-disclaimer {
  margin-top: 1rem;
  font-size: 0.75rem;
  color: var(--text-secondary);
}

/* ---- Reasons + credentials ---- */
.infieone-why {
  gap: 3rem;
  align-items: flex-start;
}

/* Core wraps a group's children in .wp-block-group__inner-container, so
   layout set on the group itself governs one wrapper rather than the icon
   and the text — which is why the chip sat above the heading instead of
   beside it. Both selectors are listed because newer WordPress omits the
   wrapper for some layout types. */
.infieone-why-item,
.infieone-why-item > .wp-block-group__inner-container,
.infieone-contact-row,
.infieone-contact-row > .wp-block-group__inner-container {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
}

.infieone-why-item,
.infieone-contact-row {
  margin-bottom: 1.5rem;
}

.infieone-why-text h3,
.infieone-contact-label {
  font-size: 1rem;
  margin: 0 0 0.2rem;
  color: var(--text-primary);
}

.infieone-why-text p,
.infieone-contact-text p {
  margin: 0;
  font-size: 0.9rem;
  color: var(--text-secondary);
}

.infieone-contact-label {
  font-weight: 700;
}

.infieone-credentials,
.infieone-form-panel {
  padding: 2rem;
  border-radius: var(--radius-lg);
  border: 1px solid var(--surface-glass-border);
  background: var(--surface-glass);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  box-shadow: var(--shadow-md);
}

.infieone-credentials h3,
.infieone-form-panel h3 {
  font-size: 1.1rem;
  margin: 0 0 1.5rem;
}

.infieone-credential {
  padding-bottom: 0.9rem;
  margin-bottom: 0.9rem;
  border-bottom: 1px solid var(--surface-glass-border);
}

.infieone-credential:last-child {
  border-bottom: none;
  margin-bottom: 0;
  padding-bottom: 0;
}

.infieone-credential-label {
  margin: 0 0 0.15rem;
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-secondary);
}

.infieone-credential-value {
  margin: 0;
  font-size: 1rem;
  font-weight: 600;
  color: var(--text-primary);
}

/* ---- Contact split ---- */
.infieone-contact-split {
  gap: 3rem;
  align-items: flex-start;
}

/* ---- Closing CTA ---- */
.infieone-cta-glow {
  position: relative;
  padding: 5rem 1.5rem;
  text-align: center;
  overflow: hidden;
}

.infieone-cta-glow::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 60% 55% at 50% 45%, rgba(var(--accent-emerald-rgb), 0.22), transparent 70%);
  pointer-events: none;
  z-index: 0;
}

.infieone-cta-glow > * {
  position: relative;
  z-index: 1;
}

.infieone-cta-glow h2 {
  font-size: clamp(2rem, 4vw, 3rem);
  max-width: 16ch;
  margin-left: auto;
  margin-right: auto;
  text-wrap: balance;
}

/* ---- FAQ rows: the bordered treatment from the reference ---- */
.infieone-faq-blocks .wp-block-details {
  border: 1px solid var(--surface-glass-border);
  border-radius: 14px;
  padding: 1.1rem 1.4rem;
  margin-bottom: 0.85rem;
  background: var(--surface-glass);
  transition: border-color var(--transition-fast);
}

.infieone-faq-blocks .wp-block-details[open],
.infieone-faq-blocks .wp-block-details:hover {
  border-color: rgba(var(--accent-cyan-rgb), 0.4);
}

.infieone-faq-blocks summary {
  cursor: pointer;
  font-weight: 600;
  color: var(--text-primary);
  list-style: none;
}

.infieone-faq-blocks summary::-webkit-details-marker {
  display: none;
}

@media (max-width: 640px) {
  /* The card rows are grid and re-flow on their own; only the two-column
     splits still need forcing to stack. */
  .infieone-why > .wp-block-column,
  .infieone-contact-split > .wp-block-column {
    flex-basis: 100% !important;
  }

  .infieone-ai-panel { padding: 2.25rem 1.25rem; }
}

/* ============================================================
   PRODUCT PATTERN STYLES
   These classes were emitted by the product patterns but never
   had rules, so those sections rendered as plain stacked text.
   ============================================================ */

.infieone-pipeline {
  counter-reset: infieone-stage;
}

.infieone-pipeline-step {
  counter-increment: infieone-stage;
  position: relative;
  padding: 1.25rem 1.5rem 1.25rem 4rem;
  margin-bottom: 1rem;
  border-radius: var(--radius-lg);
  border: 1px solid var(--surface-glass-border);
  background: var(--surface-glass);
}

.infieone-pipeline-step::before {
  content: counter(infieone-stage);
  position: absolute;
  left: 1.25rem;
  top: 1.35rem;
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--gradient-brand);
  color: #fff;
  font-size: 0.85rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.infieone-pipeline-step h3 {
  font-size: 1.05rem;
  margin: 0 0 0.35rem;
}

.infieone-pipeline-step p {
  margin: 0;
  font-size: 0.9rem;
  color: var(--text-secondary);
}

/* ---- Before / after ---- */
.infieone-comparison {
  gap: 1.5rem;
  align-items: stretch;
}

.infieone-comparison-before,
.infieone-comparison-after {
  height: 100%;
  padding: 1.75rem;
  border-radius: var(--radius-lg);
  border: 1px solid var(--surface-glass-border);
  background: var(--surface-glass);
}

.infieone-comparison-before {
  border-color: rgba(239, 68, 68, 0.28);
}

.infieone-comparison-after {
  border-color: rgba(var(--accent-emerald-rgb), 0.4);
  background:
    linear-gradient(160deg, rgba(var(--accent-emerald-rgb), 0.08), transparent),
    var(--surface-glass);
}

.infieone-comparison h3 {
  font-size: 1.05rem;
  margin: 0 0 1rem;
}

.infieone-comparison-before ul {
  color: var(--text-secondary);
}

/* ---- Architecture tags ---- */
.infieone-arch-tags h3 {
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-secondary);
  margin-bottom: 0.75rem;
}

.infieone-tag-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 0.85rem;
  color: var(--accent-cyan);
  line-height: 2;
}

/* ---- Specification table ---- */
.infieone-spec-table {
  overflow-x: auto;
}

.infieone-spec-table table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.92rem;
}

.infieone-spec-table th {
  text-align: left;
  padding: 0.85rem 1rem;
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-secondary);
  border-bottom: 1px solid rgba(var(--accent-cyan-rgb), 0.3);
}

.infieone-spec-table td {
  padding: 0.85rem 1rem;
  border-bottom: 1px solid var(--surface-glass-border);
  color: var(--text-secondary);
}

.infieone-spec-table td:first-child {
  color: var(--text-primary);
  font-weight: 600;
}

.infieone-spec-table tr:last-child td {
  border-bottom: none;
}

.infieone-spec-table figcaption {
  margin-top: 0.75rem;
  font-size: 0.78rem;
  color: var(--text-secondary);
}

.infieone-module-desc {
  margin-bottom: 1rem;
}

/* ============================================================
   BLOG
   ============================================================ */

.post-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 1.75rem;
  align-items: stretch;
}

.post-card {
  overflow: hidden;
  transition: transform var(--transition-normal), border-color var(--transition-normal), box-shadow var(--transition-normal);
}

.post-card:hover,
.post-card:focus-within {
  transform: translateY(-4px);
  border-color: var(--surface-glass-border-hover);
  box-shadow: var(--shadow-lg);
}

.post-card-link {
  display: flex;
  flex-direction: column;
  height: 100%;
  text-decoration: none;
  color: inherit;
}

.post-card-media {
  display: block;
  overflow: hidden;
  aspect-ratio: 16 / 9;
  background: var(--bg-tertiary);
}

.post-card-image,
.post-card-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.6s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.post-card:hover .post-card-media img {
  transform: scale(1.04);
}

.post-card-body {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  padding: 1.5rem;
  flex: 1;
}

.post-card-category {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent-cyan);
}

.post-card-title {
  font-size: 1.15rem;
  line-height: 1.35;
  font-weight: 700;
  color: var(--text-primary);
  margin: 0;
  text-wrap: balance;
}

.post-card-excerpt {
  font-size: 0.9rem;
  line-height: 1.6;
  color: var(--text-secondary);
}

.post-card-meta {
  margin-top: auto;
  padding-top: 0.75rem;
  font-size: 0.78rem;
  color: var(--text-secondary);
}

.post-meta-sep {
  margin: 0 0.5rem;
  opacity: 0.5;
}

/* The newest article spans the row and reads side-by-side where there is room. */
.post-card-featured {
  grid-column: 1 / -1;
}

@media (min-width: 860px) {
  .post-card-featured .post-card-link {
    flex-direction: row;
  }

  .post-card-featured .post-card-media {
    flex: 0 0 46%;
    aspect-ratio: auto;
  }

  .post-card-featured .post-card-body {
    justify-content: center;
    padding: 2.5rem;
  }

  .post-card-featured .post-card-title {
    font-size: 1.7rem;
  }
}

/* ---- Category chips ---- */
.post-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 2rem;
}

.post-filter {
  padding: 0.45rem 1rem;
  border-radius: 999px;
  border: 1px solid var(--surface-glass-border);
  background: var(--surface-glass);
  color: var(--text-secondary);
  font-size: 0.85rem;
  text-decoration: none;
  transition: color var(--transition-fast), border-color var(--transition-fast);
}

.post-filter:hover,
.post-filter:focus-visible {
  color: var(--text-primary);
  border-color: var(--surface-glass-border-hover);
}

.post-filter.is-current {
  background: var(--gradient-brand);
  border-color: transparent;
  color: #fff;
  font-weight: 600;
}

/* ---- Single article ---- */
.post-header .post-title {
  font-size: clamp(2rem, 4vw, 3rem);
  text-wrap: balance;
}

.post-meta {
  font-size: 0.85rem;
  color: var(--text-secondary);
  margin-top: 0.75rem;
}

.post-hero-image {
  margin: 0;
  border-radius: var(--radius-lg);
  overflow: hidden;
  max-width: 960px;
  margin-inline: auto;
}

.post-hero-image img {
  display: block;
  width: 100%;
  height: auto;
}

/* This is the one template meant to be read rather than scanned, so the
   measure is held near 68 characters. */
.post-content {
  max-width: 68ch;
  margin-inline: auto;
  font-size: 1.05rem;
  line-height: 1.75;
}

.post-content > * + * {
  margin-top: 1.4rem;
}

.post-content h2 {
  font-size: 1.6rem;
  margin-top: 2.75rem;
  text-wrap: balance;
}

.post-content h3 {
  font-size: 1.25rem;
  margin-top: 2rem;
}

.post-content img,
.post-content figure {
  border-radius: 14px;
  max-width: 100%;
  height: auto;
}

.post-content blockquote {
  border-left: 3px solid var(--accent-cyan);
  padding-left: 1.25rem;
  font-style: normal;
  color: var(--text-primary);
}

.post-tags {
  max-width: 68ch;
  margin: 2.5rem auto 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.post-tag {
  font-size: 0.8rem;
  color: var(--text-secondary);
  text-decoration: none;
  padding: 0.3rem 0.7rem;
  border-radius: 999px;
  border: 1px solid var(--surface-glass-border);
}

.post-tag:hover,
.post-tag:focus-visible {
  color: var(--accent-cyan);
  border-color: var(--surface-glass-border-hover);
}

.post-page-links {
  max-width: 68ch;
  margin: 2rem auto 0;
  font-size: 0.9rem;
  color: var(--text-secondary);
}

/* ---- Empty states, pagination, search ---- */
.post-empty {
  padding: 3rem 2rem;
  text-align: center;
}

.post-empty h2 {
  font-size: 1.3rem;
  margin: 0 0 0.5rem;
}

.post-empty p {
  color: var(--text-secondary);
  margin: 0;
}

.wp-block-query-pagination,
.navigation.pagination {
  margin-top: 3rem;
  display: flex;
  justify-content: center;
}

.navigation.pagination .nav-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.navigation.pagination .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  height: 40px;
  padding: 0 0.75rem;
  border-radius: 10px;
  border: 1px solid var(--surface-glass-border);
  background: var(--surface-glass);
  color: var(--text-secondary);
  text-decoration: none;
  font-size: 0.9rem;
}

.navigation.pagination .page-numbers.current {
  background: var(--gradient-brand);
  border-color: transparent;
  color: #fff;
  font-weight: 600;
}

.navigation.pagination a.page-numbers:hover {
  color: var(--text-primary);
  border-color: var(--surface-glass-border-hover);
}

.search-form {
  display: flex;
  gap: 0.6rem;
  margin-top: 1.5rem;
  max-width: 520px;
}

.search-field {
  flex: 1;
  padding: 0.75rem 1rem;
  border-radius: 12px;
  border: 1px solid var(--surface-glass-border);
  background: var(--surface-glass);
  color: var(--text-primary);
  font-size: 0.95rem;
}

.search-field:focus-visible {
  outline: 2px solid var(--accent-cyan);
  outline-offset: 1px;
}

.search-list {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  max-width: 820px;
}

.search-item a {
  display: block;
  padding: 1.4rem 1.6rem;
  text-decoration: none;
  color: inherit;
}

.search-item-type {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent-cyan);
}

.search-item-title {
  font-size: 1.1rem;
  margin: 0.35rem 0 0.4rem;
  color: var(--text-primary);
}

.search-item-excerpt {
  font-size: 0.9rem;
  color: var(--text-secondary);
  margin: 0 0 0.5rem;
}

.search-item-url {
  font-size: 0.78rem;
  font-family: var(--font-mono, ui-monospace, monospace);
  color: var(--accent-cyan);
  opacity: 0.8;
}

@media (max-width: 640px) {
  .post-grid { grid-template-columns: 1fr; }
  .search-form { flex-direction: column; }
}

/* ============================================================
   CASE STUDY PAGES
   ============================================================ */

/* The card became an anchor, so inherited link styling has to be reset. */
a.case-card {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
}

.case-read-more {
  display: inline-block;
  margin-top: 1rem;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--accent-cyan);
}

a.case-card:hover .case-read-more,
a.case-card:focus-visible .case-read-more {
  text-decoration: underline;
}

.case-facts {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 2.5rem;
  margin: 2rem 0 0;
}

.case-fact dt {
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-secondary);
  margin-bottom: 0.25rem;
}

.case-fact dd {
  margin: 0;
  font-size: 1rem;
  font-weight: 600;
  color: var(--text-primary);
}

.case-metric-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 3rem;
  margin-top: 3rem;
}

.case-metric {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.case-metric-value {
  font-size: 2.6rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  background: var(--gradient-brand);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.case-metric-label {
  font-size: 0.8rem;
  letter-spacing: 0.06em;
  color: var(--text-secondary);
  text-align: center;
  max-width: 18ch;
}

.case-hero-image {
  margin: 0 auto;
  max-width: 1000px;
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.case-hero-image img {
  display: block;
  width: 100%;
  height: auto;
}

/* Same reading measure as an article: this is written to be read. */
.case-content {
  max-width: 68ch;
  margin-inline: auto;
  font-size: 1.05rem;
  line-height: 1.75;
}

.case-content > * + * {
  margin-top: 1.4rem;
}

.case-content h2 {
  font-size: 1.6rem;
  margin-top: 2.75rem;
  text-wrap: balance;
}

.case-services {
  max-width: 68ch;
  margin: 3rem auto 0;
}

.case-services-title {
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-secondary);
  margin-bottom: 0.9rem;
}

.case-service-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.case-service-tags li {
  padding: 0.4rem 0.9rem;
  border-radius: 999px;
  border: 1px solid var(--surface-glass-border);
  background: var(--surface-glass);
  font-size: 0.85rem;
  color: var(--text-secondary);
}

.case-quote {
  max-width: 780px;
  margin-inline: auto;
  padding: 2.5rem;
  text-align: center;
}

.case-quote blockquote {
  margin: 0;
  border: none;
  padding: 0;
}

.case-quote blockquote p {
  font-size: 1.25rem;
  line-height: 1.6;
  color: var(--text-primary);
  margin: 0;
  text-wrap: balance;
}

.case-quote figcaption {
  margin-top: 1.25rem;
  font-size: 0.85rem;
  color: var(--accent-cyan);
}

@media (max-width: 640px) {
  .case-facts { gap: 1.5rem; }
  .case-metric-row { gap: 1.75rem; }
  .case-metric-value { font-size: 2rem; }
}

/* ============================================================
   CAREERS
   ============================================================ */

.job-team-block { margin-bottom: 3rem; }

.job-team-title {
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-secondary);
  margin-bottom: 1rem;
}

.job-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.9rem; }

.job-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 1.4rem 1.75rem;
  text-decoration: none;
  color: inherit;
  transition: transform var(--transition-normal), border-color var(--transition-normal);
}

.job-row:hover, .job-row:focus-visible {
  transform: translateX(4px);
  border-color: var(--surface-glass-border-hover);
}

.job-row-main { display: flex; flex-direction: column; gap: 0.3rem; min-width: 0; }
.job-row-title { font-size: 1.1rem; font-weight: 700; color: var(--text-primary); }
.job-row-summary { font-size: 0.88rem; color: var(--text-secondary); }

.job-row-facts, .job-facts {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  flex-shrink: 0;
}

.job-facts { justify-content: center; margin-top: 1.25rem; }

.job-chip {
  padding: 0.3rem 0.8rem;
  border-radius: 999px;
  border: 1px solid var(--surface-glass-border);
  background: var(--surface-glass);
  font-size: 0.78rem;
  color: var(--text-secondary);
  white-space: nowrap;
}

.job-closed {
  margin-top: 1.25rem;
  padding: 0.6rem 1rem;
  border-radius: 10px;
  background: rgba(239, 68, 68, 0.1);
  border: 1px solid rgba(239, 68, 68, 0.3);
  color: var(--text-primary);
  font-size: 0.9rem;
  display: inline-block;
}

.job-content { max-width: 68ch; margin-inline: auto; font-size: 1.02rem; line-height: 1.75; }
.job-content > * + * { margin-top: 1.3rem; }
.job-content h2 { font-size: 1.4rem; margin-top: 2.25rem; }

.job-apply { max-width: 720px; margin-inline: auto; padding: 2.5rem; }
.job-apply h2 { font-size: 1.4rem; margin: 0 0 1.5rem; }

.job-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }

.form-hint { font-size: 0.78rem; color: var(--text-secondary); margin-top: 0.35rem; }

@media (max-width: 720px) {
  .job-row { flex-direction: column; align-items: flex-start; }
  .job-form-row { grid-template-columns: 1fr; }
}

/* ============================================================
   TEAM
   ============================================================ */

.team-group { margin-bottom: 3.5rem; }

.team-group-title {
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-secondary);
  margin-bottom: 1.25rem;
}

.team-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 1.5rem;
  align-items: stretch;
}

.person-card {
  padding: 1.75rem;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 100%;
  transition: transform var(--transition-normal), border-color var(--transition-normal);
}

.person-card:hover {
  transform: translateY(-4px);
  border-color: var(--surface-glass-border-hover);
}

.person-photo {
  width: 96px;
  height: 96px;
  border-radius: 50%;
  overflow: hidden;
  margin-bottom: 1.1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(var(--accent-cyan-rgb), 0.12);
  border: 1px solid rgba(var(--accent-cyan-rgb), 0.28);
  flex-shrink: 0;
}

.person-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Initials rather than a generic silhouette: a placeholder avatar of a
   stranger's face is worse than none. */
.person-initials {
  font-size: 1.6rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--accent-cyan);
}

.person-name {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--text-primary);
  margin: 0 0 0.2rem;
}

.person-role {
  font-size: 0.85rem;
  color: var(--accent-cyan);
  margin: 0 0 0.75rem;
}

.person-bio {
  font-size: 0.86rem;
  line-height: 1.6;
  color: var(--text-secondary);
  margin: 0;
}

.person-links {
  margin: 1rem 0 0;
  display: flex;
  gap: 0.9rem;
  font-size: 0.8rem;
}

.person-links a { color: var(--text-secondary); text-decoration: none; }
.person-links a:hover, .person-links a:focus-visible { color: var(--accent-cyan); }

@media (max-width: 640px) {
  .team-grid { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 1rem; }
  .person-card { padding: 1.25rem; }
  .person-photo { width: 72px; height: 72px; }
}

/* ============================================================
   SERVICE-PAGE PATTERNS
   ============================================================ */

/* ---- Package tiers ---- */
.wp-block-columns.infieone-tier-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.5rem;
  align-items: stretch;
}

.wp-block-columns.infieone-tier-row > .wp-block-column {
  flex-basis: auto !important;
  min-width: 0;
  align-self: stretch;
  display: flex;
  height: 100%;
}

@container (max-width: 560px) {
  .wp-block-columns.infieone-tier-row { grid-template-columns: minmax(0, 1fr); }
}

@container (min-width: 900px) {
  .wp-block-columns.infieone-tier-row { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.infieone-tier {
  display: flex;
  flex-direction: column;
  width: 100%;
  padding: 1.75rem;
  border-radius: var(--radius-lg);
  border: 1px solid var(--surface-glass-border);
  background: var(--surface-glass);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}

.infieone-tier > .wp-block-group__inner-container {
  display: flex;
  flex-direction: column;
  flex: 1;
  width: 100%;
}

/* The chosen tier is marked with the brand gradient rather than a colour
   change, so it reads as emphasis instead of a different product. */
.infieone-tier-featured {
  border-color: transparent;
  box-shadow: 0 0 0 2px var(--accent-emerald), var(--shadow-lg);
}

.infieone-tier-flag {
  align-self: flex-start;
  margin: 0 0 0.75rem;
  padding: 0.25rem 0.7rem;
  border-radius: 999px;
  background: var(--gradient-brand);
  color: #fff;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.infieone-tier h3 { font-size: 1.15rem; margin: 0 0 0.4rem; }

.infieone-tier-price {
  font-size: 1.7rem;
  font-weight: 800;
  color: var(--text-primary);
  margin: 0 0 0.3rem;
  font-variant-numeric: tabular-nums;
}

.infieone-tier-note {
  font-size: 0.88rem;
  color: var(--text-secondary);
  margin: 0 0 1.25rem;
}

.infieone-tier .wp-block-buttons { margin-top: auto; padding-top: 1.25rem; }

/* ---- Scope: included / not included ---- */
.wp-block-columns.infieone-scope { gap: 1.5rem; align-items: stretch; }

.infieone-scope-in,
.infieone-scope-out {
  height: 100%;
  padding: 1.75rem;
  border-radius: var(--radius-lg);
  border: 1px solid var(--surface-glass-border);
  background: var(--surface-glass);
}

.infieone-scope-in { border-color: rgba(var(--accent-emerald-rgb), 0.4); }
.infieone-scope-out { border-color: rgba(148, 163, 184, 0.35); }

.infieone-scope h3 { font-size: 1.05rem; margin: 0 0 1rem; }

/* Exclusion list: a rule through the marker, not the text, so the items stay
   readable — struck-through text reads as a mistake rather than a boundary. */
.is-style-infieone-exclusions {
  list-style: none;
  padding-left: 0;
}

.is-style-infieone-exclusions li {
  position: relative;
  padding-left: 1.75rem;
  margin-bottom: 0.6rem;
  color: var(--text-secondary);
}

.is-style-infieone-exclusions li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 12px;
  height: 2px;
  border-radius: 2px;
  background: var(--text-secondary);
  opacity: 0.7;
}

/* ---- SLA table ---- */
.infieone-sla-table { overflow-x: auto; }

.infieone-sla-table table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.92rem;
  min-width: 560px;
}

.infieone-sla-table th {
  text-align: left;
  padding: 0.85rem 1rem;
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-secondary);
  border-bottom: 1px solid rgba(var(--accent-cyan-rgb), 0.3);
}

.infieone-sla-table td {
  padding: 0.85rem 1rem;
  border-bottom: 1px solid var(--surface-glass-border);
  color: var(--text-secondary);
}

.infieone-sla-table td:first-child {
  color: var(--text-primary);
  font-weight: 700;
}

.infieone-sla-table tbody tr:first-child td:first-child { color: #dc2626; }
.infieone-sla-table tbody tr:nth-child(2) td:first-child { color: #d97706; }

.infieone-sla-table tr:last-child td { border-bottom: none; }

.infieone-sla-table figcaption {
  margin-top: 0.75rem;
  font-size: 0.78rem;
  color: var(--text-secondary);
}

/* ---- Logo wall ---- */
.infieone-logo-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 1rem;
  margin-top: 1.5rem;
}

.infieone-logo-item {
  margin: 0;
  padding: 1.25rem 1rem;
  text-align: center;
  border-radius: 12px;
  border: 1px solid var(--surface-glass-border);
  background: var(--surface-glass);
  font-weight: 700;
  font-size: 0.95rem;
  letter-spacing: 0.02em;
  color: var(--text-secondary);
  transition: color var(--transition-fast), border-color var(--transition-fast);
}

.infieone-logo-item:hover {
  color: var(--text-primary);
  border-color: var(--surface-glass-border-hover);
}

/* ---- Metric with quote ---- */
.wp-block-columns.infieone-metric-quote {
  gap: 2.5rem;
  align-items: center;
}

.infieone-mq-value {
  font-size: clamp(3rem, 7vw, 4.5rem);
  font-weight: 800;
  line-height: 1;
  margin: 0 0 0.5rem;
  font-variant-numeric: tabular-nums;
  background: var(--gradient-brand);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.infieone-mq-label {
  margin: 0;
  font-size: 0.9rem;
  color: var(--text-secondary);
  max-width: 22ch;
}

.infieone-mq-quote blockquote {
  margin: 0;
  padding-left: 1.25rem;
  border-left: 3px solid var(--accent-cyan);
}

.infieone-mq-quote blockquote p {
  font-size: 1.1rem;
  line-height: 1.6;
  color: var(--text-primary);
  margin: 0;
}

.infieone-mq-author {
  margin: 1rem 0 0 1.25rem;
  font-size: 0.85rem;
  color: var(--accent-cyan);
}

/* ---- Key takeaways ---- */
.infieone-takeaways {
  padding: 1.75rem 2rem;
  border-radius: var(--radius-lg);
  border: 1px solid rgba(var(--accent-cyan-rgb), 0.3);
  background:
    linear-gradient(160deg, rgba(var(--accent-cyan-rgb), 0.07), transparent),
    var(--surface-glass);
  max-width: 68ch;
  margin-inline: auto;
}

.infieone-takeaways h2 {
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent-cyan);
  margin: 0 0 1rem;
}

.infieone-takeaways ul { margin-bottom: 0; }

@media (max-width: 640px) {
  .wp-block-columns.infieone-metric-quote { gap: 1.5rem; }
  .infieone-mq-author { margin-left: 0; }
}

.infieone-logo-wall {
  text-align: center;
}

/* ============================================================
   CONVERSION: qualifying fields, booking, newsletter, resources
   ============================================================ */

.form-qualify {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1rem;
  margin-bottom: 1.25rem;
}

.booking-alt {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-top: 1.25rem;
}

.booking-alt-or {
  font-size: 0.8rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-secondary);
  position: relative;
  flex-shrink: 0;
}

.booking-alt-link { flex: 1; justify-content: center; }

/* ---- Newsletter ---- */
.newsletter-band { padding: 2.5rem; text-align: center; }
.newsletter-band h2 { font-size: 1.35rem; margin: 0 0 1.5rem; text-wrap: balance; }

.newsletter-form {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  justify-content: center;
  max-width: 520px;
  margin-inline: auto;
}

.newsletter-input {
  flex: 1 1 240px;
  padding: 0.75rem 1rem;
  border-radius: 12px;
  border: 1px solid var(--surface-glass-border);
  background: var(--surface-glass);
  color: var(--text-primary);
  font-size: 0.95rem;
}

.newsletter-form .form-consent { flex-basis: 100%; margin-top: 0.5rem; text-align: left; }

/* ---- Resources ---- */
.resource-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 1.75rem;
  align-items: stretch;
}

.resource-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  height: 100%;
  transition: transform var(--transition-normal), border-color var(--transition-normal);
}

.resource-card:hover { transform: translateY(-4px); border-color: var(--surface-glass-border-hover); }

.resource-card-cover { display: block; aspect-ratio: 4 / 3; overflow: hidden; background: var(--bg-tertiary); }
.resource-card-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }

.resource-card-body { display: flex; flex-direction: column; gap: 0.55rem; padding: 1.5rem; flex: 1; }

.resource-card-format {
  font-size: 0.7rem; font-weight: 700; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--accent-cyan);
}

.resource-card-title { font-size: 1.12rem; font-weight: 700; color: var(--text-primary); line-height: 1.35; }
.resource-card-summary { font-size: 0.9rem; color: var(--text-secondary); line-height: 1.6; }
.resource-card-cta { margin-top: auto; padding-top: 0.75rem; font-size: 0.85rem; font-weight: 600; color: var(--accent-cyan); }

.resource-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 360px;
  gap: 3rem;
  align-items: start;
}

.resource-content { font-size: 1.02rem; line-height: 1.75; }
.resource-content > * + * { margin-top: 1.3rem; }

.resource-points-title {
  font-size: 0.78rem; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--text-secondary); margin: 2.5rem 0 0.9rem;
}

.resource-points { list-style: none; margin: 0; padding: 0; }

.resource-points li {
  position: relative; padding-left: 1.75rem; margin-bottom: 0.6rem; color: var(--text-secondary);
}

.resource-points li::before {
  content: ""; position: absolute; left: 0; top: 0.5em;
  width: 8px; height: 8px; border-radius: 50%; background: var(--accent-emerald);
}

.resource-gate { padding: 1.75rem; position: sticky; top: 6rem; }
.resource-gate h2 { font-size: 1.15rem; margin: 0 0 0.5rem; }
.resource-gate p { font-size: 0.9rem; color: var(--text-secondary); }
.resource-cover { width: 100%; height: auto; border-radius: 12px; margin-bottom: 1.25rem; display: block; }
.resource-missing { color: var(--text-secondary); font-size: 0.9rem; margin: 0; }

@media (max-width: 900px) {
  .resource-layout { grid-template-columns: minmax(0, 1fr); }
  .resource-gate { position: static; }
}

/* Honeypot wrapper: positioned off-screen rather than display:none, because
   some bots skip hidden inputs and would sail straight past the trap. */
.infieone-trap {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}