/* ═══════════════════════════════════════════════════════════════
   STACKFLOW GLASS TILE SYSTEM + HOVER ANIMATIONS
   Applied globally via /css/glass.css
   Theme: Light (white/off-white) with teal + blue accents
   ═══════════════════════════════════════════════════════════════ */

/* ── Custom Properties ──────────────────────────────────────── */
:root {
  --glass-bg:      rgba(255,255,255,0.72);
  --glass-bg-h:    rgba(255,255,255,0.92);
  --glass-blur:    blur(24px) saturate(180%);
  --glass-border:  rgba(11,61,145,0.10);
  --glass-border-h:rgba(0,191,165,0.50);
  --teal:          #00BFA5;
  --teal-dk:       #007A68;
  --blue:          #0B3D91;
  --glow-teal:     0 0 0 4px rgba(0,191,165,0.10), 0 24px 64px rgba(0,191,165,0.13), 0 8px 32px rgba(11,61,145,0.10);
  --glow-blue:     0 0 0 4px rgba(11,61,145,0.08), 0 24px 64px rgba(11,61,145,0.14), 0 8px 32px rgba(0,0,0,0.06);
  --ease-spring:   cubic-bezier(0.16,1,0.3,1);
  --ease-out:      cubic-bezier(0.25,0.46,0.45,0.94);
  --dur-fast:      180ms;
  --dur-base:      280ms;
  --dur-slow:      420ms;
}

/* ══════════════════════════════════════════════════════════════
   1. GLASS CARD BASE
   ══════════════════════════════════════════════════════════════ */
.card {
  background:      var(--glass-bg) !important;
  backdrop-filter: var(--glass-blur) !important;
  -webkit-backdrop-filter: var(--glass-blur) !important;
  border:          1px solid var(--glass-border) !important;
  border-radius:   20px !important;
  box-shadow:      0 2px 12px rgba(13,27,42,0.05),
                   inset 0 1px 0 rgba(255,255,255,0.80) !important;
  transition:      transform var(--dur-base) var(--ease-spring),
                   border-color var(--dur-base) var(--ease-out),
                   box-shadow var(--dur-base) var(--ease-out),
                   background var(--dur-base) var(--ease-out) !important;
  position: relative !important;
  overflow: hidden !important;
}

/* Teal→blue gradient top accent bar (slides in on hover) */
.card::before {
  content: '' !important;
  position: absolute !important;
  top: 0; left: 0; right: 0 !important;
  height: 2.5px !important;
  background: linear-gradient(90deg, var(--blue) 0%, var(--teal) 100%) !important;
  transform: scaleX(0) !important;
  transform-origin: left !important;
  transition: transform var(--dur-slow) var(--ease-spring) !important;
  z-index: 2 !important;
  border-radius: 20px 20px 0 0 !important;
}

/* Inner shimmer overlay */
.card::after {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  background: linear-gradient(135deg,
    rgba(255,255,255,0.18) 0%,
    rgba(255,255,255,0.04) 40%,
    transparent 70%) !important;
  pointer-events: none !important;
  border-radius: inherit !important;
  opacity: 0.5 !important;
  transition: opacity var(--dur-base) !important;
}

/* Hover state */
.card:hover {
  background:      var(--glass-bg-h) !important;
  border-color:    var(--glass-border-h) !important;
  box-shadow:      var(--glow-teal) !important;
  transform:       translateY(-8px) !important;
}
.card:hover::before { transform: scaleX(1) !important; }
.card:hover::after  { opacity: 1 !important; }

/* Heading color shift on hover */
.card:hover h3 { color: var(--teal-dk) !important; transition: color var(--dur-fast) !important; }
.card:hover h2 { color: var(--blue) !important; transition: color var(--dur-fast) !important; }

/* Image zoom on card hover */
.card img:not(.photo-icon-sm):not([alt="StackFlow logo"]) {
  transition: transform var(--dur-slow) var(--ease-spring) !important;
  will-change: transform !important;
}
.card:hover img:not(.photo-icon-sm):not([alt="StackFlow logo"]) {
  transform: scale(1.06) !important;
}

/* ══════════════════════════════════════════════════════════════
   2. MODULE ACCENT VARIANTS (override glass glow colour)
   ══════════════════════════════════════════════════════════════ */
.card-itsm:hover  { box-shadow: 0 0 0 4px rgba(99,102,241,0.10), 0 24px 64px rgba(99,102,241,0.15), 0 8px 32px rgba(0,0,0,0.06) !important; border-color: rgba(99,102,241,0.45) !important; }
.card-itsm::before  { background: linear-gradient(90deg,#4f46e5,#818cf8) !important; }
.card-itom:hover  { box-shadow: 0 0 0 4px rgba(6,182,212,0.10), 0 24px 64px rgba(6,182,212,0.15), 0 8px 32px rgba(0,0,0,0.06) !important; border-color: rgba(6,182,212,0.45) !important; }
.card-itom::before  { background: linear-gradient(90deg,#0891b2,#22d3ee) !important; }
.card-cloud:hover { box-shadow: 0 0 0 4px rgba(16,185,129,0.10), 0 24px 64px rgba(16,185,129,0.15), 0 8px 32px rgba(0,0,0,0.06) !important; border-color: rgba(16,185,129,0.45) !important; }
.card-cloud::before { background: linear-gradient(90deg,#059669,#34d399) !important; }
.card-ai:hover    { box-shadow: 0 0 0 4px rgba(139,92,246,0.10), 0 24px 64px rgba(139,92,246,0.15), 0 8px 32px rgba(0,0,0,0.06) !important; border-color: rgba(139,92,246,0.45) !important; }
.card-ai::before    { background: linear-gradient(90deg,#7c3aed,#c4b5fd) !important; }

/* ══════════════════════════════════════════════════════════════
   3. STAT CARDS
   ══════════════════════════════════════════════════════════════ */
.stat-card {
  background:      rgba(255,255,255,0.75) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  border:          1px solid rgba(11,61,145,0.09) !important;
  box-shadow:      0 2px 8px rgba(13,27,42,0.04), inset 0 1px 0 rgba(255,255,255,0.75) !important;
  transition:      all var(--dur-base) var(--ease-spring) !important;
  position: relative !important; overflow: hidden !important;
}
.stat-card::before {
  content: '' !important; position: absolute !important;
  bottom: 0; left: 0; right: 0 !important; height: 2px !important;
  background: linear-gradient(90deg, var(--blue), var(--teal)) !important;
  transform: scaleX(0) !important; transform-origin: left !important;
  transition: transform var(--dur-slow) var(--ease-spring) !important;
}
.stat-card:hover {
  transform: translateY(-6px) !important;
  border-color: rgba(0,191,165,0.40) !important;
  box-shadow: 0 0 0 3px rgba(0,191,165,0.08), 0 16px 48px rgba(0,191,165,0.14), 0 6px 20px rgba(11,61,145,0.08) !important;
}
.stat-card:hover::before { transform: scaleX(1) !important; }
.stat-card:hover .stat-number { color: var(--teal) !important; transition: color var(--dur-fast) !important; }

/* ══════════════════════════════════════════════════════════════
   4. HERO STAT BAR
   ══════════════════════════════════════════════════════════════ */
.hero-stat {
  transition: background var(--dur-fast) !important;
  position: relative !important; overflow: hidden !important;
}
.hero-stat:hover { background: rgba(0,191,165,0.04) !important; }
.hero-stat:hover .hero-stat-n { color: var(--teal) !important; transition: color var(--dur-fast) !important; }

/* ══════════════════════════════════════════════════════════════
   5. HIGHLIGHTS / METRIC STRIPS
   ══════════════════════════════════════════════════════════════ */
.highlight {
  transition: background var(--dur-fast), transform var(--dur-base) var(--ease-spring) !important;
  position: relative !important; overflow: hidden !important;
}
.highlight::before { height: 3px !important; background: linear-gradient(90deg, var(--blue), var(--teal)) !important; }
.highlight:hover { background: rgba(0,191,165,0.035) !important; transform: translateY(-2px) !important; }
.highlight:hover .highlight-n { color: var(--teal) !important; transition: color var(--dur-fast) !important; }

/* ══════════════════════════════════════════════════════════════
   6. BUTTONS — enhanced spring animation + shimmer
   ══════════════════════════════════════════════════════════════ */
.btn {
  transition: transform var(--dur-base) var(--ease-spring),
              box-shadow var(--dur-base) var(--ease-out),
              background var(--dur-fast) !important;
  will-change: transform !important;
  position: relative !important; overflow: hidden !important;
}
/* Shimmer overlay on hover */
.btn::after {
  content: '' !important; position: absolute !important; inset: 0 !important;
  background: linear-gradient(105deg, transparent 40%, rgba(255,255,255,0.22) 50%, transparent 60%) !important;
  background-size: 200% 100% !important; background-position: 200% 0 !important;
  transition: background-position 0.5s var(--ease-out) !important;
  pointer-events: none !important; border-radius: inherit !important;
}
.btn:hover::after { background-position: -50% 0 !important; }

.btn-teal:hover  { transform: translateY(-4px) scale(1.02) !important; box-shadow: 0 12px 40px rgba(0,191,165,0.40), 0 4px 14px rgba(0,191,165,0.20) !important; }
.btn-primary:hover { transform: translateY(-4px) scale(1.02) !important; box-shadow: 0 12px 40px rgba(255,255,255,0.40), 0 4px 14px rgba(11,61,145,0.20) !important; }
.btn-teal { box-shadow: 0 4px 16px rgba(0,191,165,0.20) !important; }
.footer-cta-btn-primary:hover { transform: translateY(-3px) !important; box-shadow: 0 10px 32px rgba(0,191,165,0.35) !important; }

/* ══════════════════════════════════════════════════════════════
   7. FEATURE LIST ITEMS
   ══════════════════════════════════════════════════════════════ */
.feature-item {
  transition: all var(--dur-base) var(--ease-spring) !important;
  border-radius: 14px !important;
  margin-left: -14px !important; margin-right: -14px !important;
  padding-left: 14px !important; padding-right: 14px !important;
}
.feature-item:hover {
  background: rgba(0,191,165,0.04) !important;
  transform: translateX(6px) !important;
  border-bottom-color: transparent !important;
}
.feature-item:hover .feature-icon { transform: scale(1.1) rotate(3deg) !important; }
.feature-icon { transition: transform var(--dur-base) var(--ease-spring) !important; }

/* ══════════════════════════════════════════════════════════════
   8. NAV DROPDOWN LINKS — left-border slide
   ══════════════════════════════════════════════════════════════ */
.nav-drop-menu-inner a {
  transition: all var(--dur-fast) !important;
  border-left: 2px solid transparent !important;
  margin-left: -2px !important;
}
.nav-drop-menu-inner a:hover {
  border-left-color: var(--teal) !important;
  padding-left: 18px !important;
  background: rgba(0,191,165,0.04) !important;
  color: var(--blue) !important;
}

/* ══════════════════════════════════════════════════════════════
   9. FOOTER NAV LINKS
   ══════════════════════════════════════════════════════════════ */
.footer-nav-col a {
  transition: color var(--dur-fast), transform var(--dur-fast), padding-left var(--dur-base) var(--ease-spring) !important;
}
.footer-nav-col a:hover {
  padding-left: 10px !important;
  color: var(--teal) !important;
}

/* ══════════════════════════════════════════════════════════════
   10. CTA BANNER — animated shimmer sweep
   ══════════════════════════════════════════════════════════════ */
.cta-banner {
  position: relative !important; overflow: hidden !important;
}
.cta-banner::after {
  content: '' !important; position: absolute !important;
  top: 0; left: -100% !important; width: 50% !important; height: 100% !important;
  background: linear-gradient(105deg, transparent 30%, rgba(255,255,255,0.07) 50%, transparent 70%) !important;
  animation: cta-shimmer 5s ease-in-out infinite !important;
  pointer-events: none !important;
}
@keyframes cta-shimmer {
  0%   { left: -100%; }
  100% { left: 200%;  }
}

/* ══════════════════════════════════════════════════════════════
   11. BADGE / PILL HOVER EFFECTS
   ══════════════════════════════════════════════════════════════ */
.badge, .pill {
  transition: transform var(--dur-fast) var(--ease-spring),
              border-color var(--dur-fast),
              box-shadow var(--dur-fast) !important;
  cursor: default !important;
}
.badge:hover {
  transform: scale(1.06) translateY(-1px) !important;
  border-color: rgba(0,191,165,0.45) !important;
  box-shadow: 0 4px 12px rgba(0,191,165,0.15) !important;
}
.pill.teal:hover { box-shadow: 0 4px 12px rgba(0,191,165,0.20) !important; }

/* ══════════════════════════════════════════════════════════════
   12. LINK ARROWS — slide on hover
   ══════════════════════════════════════════════════════════════ */
a[href]:not(.btn):not(.nav-link):not(.nav-btn):not(.footer-nav-col a) {
  transition: color var(--dur-fast) !important;
}
a[style*="font-weight:600"]:hover,
a[class*="learn"]:hover {
  text-decoration: underline !important;
}

/* ══════════════════════════════════════════════════════════════
   13. INDUSTRY CARDS (grid items with overlay)
   ══════════════════════════════════════════════════════════════ */
[class*="card"][style*="cursor:pointer"] {
  transition: transform var(--dur-base) var(--ease-spring),
              box-shadow var(--dur-base) var(--ease-out),
              border-color var(--dur-base) !important;
}
[class*="card"][style*="cursor:pointer"]:hover {
  transform: translateY(-8px) !important;
}

/* ══════════════════════════════════════════════════════════════
   14. COMPARE TABLE ROWS
   ══════════════════════════════════════════════════════════════ */
.comp-table tr {
  transition: background var(--dur-fast) !important;
}
.comp-table tr:hover td {
  background: rgba(0,191,165,0.04) !important;
}
.comp-table tr:hover td.sf-col {
  background: rgba(0,191,165,0.08) !important;
}

/* ══════════════════════════════════════════════════════════════
   15. FOOTER AI BADGES
   ══════════════════════════════════════════════════════════════ */
.footer-ai-badge {
  transition: all var(--dur-fast) !important;
}
.footer-ai-badge:hover {
  border-color: rgba(0,191,165,0.3) !important;
  transform: translateX(4px) !important;
  color: rgba(255,255,255,0.65) !important;
}

/* ══════════════════════════════════════════════════════════════
   16. TIMELINE NODES
   ══════════════════════════════════════════════════════════════ */
.timeline-node {
  transition: transform var(--dur-base) var(--ease-spring) !important;
  cursor: default !important;
}
.timeline-node:hover { transform: translateY(-6px) !important; }
.timeline-node:hover div[style*="border-radius:50%"] {
  box-shadow: 0 0 0 8px rgba(0,191,165,0.15), 0 0 20px rgba(0,191,165,0.3) !important;
  transition: box-shadow var(--dur-base) !important;
}

/* ══════════════════════════════════════════════════════════════
   17. REDUCED MOTION SAFETY
   ══════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ══════════════════════════════════════════════════════════════
   18. MOBILE — softer transforms
   ══════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  .card:hover          { transform: translateY(-4px) !important; }
  .stat-card:hover     { transform: translateY(-3px) !important; }
  .highlight:hover     { transform: none !important; }
  .feature-item:hover  { transform: translateX(3px) !important; }
  .btn-teal:hover,
  .btn-primary:hover   { transform: translateY(-2px) scale(1.01) !important; }
}

/* ═══════════════════════════════════════════════════════════════
   GLOBAL SPACING & BREATHING ROOM SYSTEM
   Prevents overlaps, adds consistent rhythm between all elements
   ═══════════════════════════════════════════════════════════════ */

/* ── 1. Hero → First Section gap ─────────────────────────────── */
/* Any section that immediately follows a full-height hero */
section[style*="min-height:640px"] + section,
section[style*="min-height:620px"] + section,
section[style*="min-height:580px"] + section,
section[style*="padding:160px"] + section,
section[style*="padding-top:160px"] + section,
section[style*="padding:140px"] + section {
  padding-top: 72px !important;
}
/* Zero-top-padding featured sections after hero */
section[style*="padding:0 0 64px"],
section[style*="padding:0 0 56px"] {
  padding-top: 72px !important;
}

/* ── 2. Section-level padding (consistent vertical rhythm) ───── */
.section        { padding-top: 96px !important; padding-bottom: 96px !important; }
.section-sm     { padding-top: 64px !important; padding-bottom: 64px !important; }
.section-xs     { padding-top: 48px !important; padding-bottom: 48px !important; }

/* ── 3. Card grid gaps — generous breathing room ─────────────── */
.grid-2 { gap: 36px !important; }
.grid-3 { gap: 32px !important; }
.grid-4 { gap: 28px !important; }

/* Cards stacked vertically in the same container */
.container > .card + .card,
.container > div > .card + .card { margin-top: 28px !important; }

/* ── 4. Section header → grid gap ────────────────────────────── */
.section-header         { margin-bottom: 56px !important; }
.section-header.center  { margin-bottom: 60px !important; }

/* ── 5. Cards — internal padding and min-height ──────────────── */
.card { padding: 36px !important; }

/* Restore tile/image cards that rely on padding:0 */
.card[style*="padding:0"] { padding: 0 !important; }

/* ── 6. Feature items — vertical breathing ───────────────────── */
.feature-item {
  padding-top: 28px !important;
  padding-bottom: 28px !important;
}

/* ── 7. Hero stat bar ─────────────────────────────────────────── */
.hero-stats  { margin-top: 60px !important; }
.hero-stat   { padding: 28px 32px !important; }

/* ── 8. Highlights strip ─────────────────────────────────────── */
.highlights  { margin-top: 52px !important; }
.highlight   { padding: 32px 28px !important; }

/* ── 9. Ticker strip ─────────────────────────────────────────── */
.ticker-wrap { margin: 0 !important; }

/* ── 10. Comparison table spacing ────────────────────────────── */
.comp-table th, .comp-table td { padding: 16px 22px !important; }

/* ── 11. CTA Banner breathing room ───────────────────────────── */
.cta-banner { padding: 84px 72px !important; }

/* ── 12. Footer CTA strip ────────────────────────────────────── */
.footer-cta-strip { padding: 48px 56px !important; margin-bottom: 72px !important; }

/* ── 13. Footer sitemap ──────────────────────────────────────── */
.footer-sitemap { padding-bottom: 64px !important; gap: 48px !important; }

/* ── 14. Container max-width guard ───────────────────────────── */
.container { padding-left: 32px !important; padding-right: 32px !important; }

/* ── 15. Badge / eyebrow top spacing ─────────────────────────── */
.badge { margin-bottom: 4px !important; }

/* ── 16. Legal docs (privacy/terms) ─────────────────────────── */
.legal-wrap  { padding-top: 80px !important; padding-bottom: 120px !important; }
.legal-content h2 { margin-top: 56px !important; }

/* ── 17. Mobile adjustments ─────────────────────────────────── */
@media (max-width: 768px) {
  .section        { padding-top: 56px !important; padding-bottom: 56px !important; }
  .section-sm     { padding-top: 40px !important; padding-bottom: 40px !important; }
  .grid-2, .grid-3 { gap: 20px !important; }
  .card           { padding: 24px !important; }
  .hero-stats     { margin-top: 36px !important; }
  .highlights     { margin-top: 32px !important; }
  .cta-banner     { padding: 44px 28px !important; }
  .footer-cta-strip { padding: 32px 24px !important; }
  section[style*="min-height:640px"] + section { padding-top: 48px !important; }
  section[style*="padding:0 0 64px"]           { padding-top: 48px !important; }
  .section-header { margin-bottom: 36px !important; }
}