/* ============================================================
   GTMsnap.io — 2026 Landing Page Modernization Layer
   ------------------------------------------------------------
   Additive: layers on top of styles.css. Reuses existing tokens
   (--primary, --bg-*, --text-*, --shadow-*) so light/dark themes
   inherit automatically. Designed around 4 modern principles:
     1. Fluid type / spacing  — scales to any viewport
     2. Vibrant gradients     — multi-stop, animated where it counts
     3. Glassmorphism         — depth via blur and translucency
     4. Motion with intent    — entrance animations, spring easing,
                                respects prefers-reduced-motion
   ============================================================ */

/* ------------------------------------------------------------
   1. Tokens — extend, don't override existing palette
   ------------------------------------------------------------ */
:root {
  /* Vibrant 2026 brand gradient */
  --grad-aurora: linear-gradient(135deg, #6366f1 0%, #8b5cf6 35%, #ec4899 70%, #f97316 100%);
  --grad-aurora-soft: linear-gradient(135deg, rgba(99, 102, 241, 0.12) 0%, rgba(139, 92, 246, 0.10) 50%, rgba(236, 72, 153, 0.08) 100%);
  --grad-cta: linear-gradient(120deg, #0a84ff 0%, #00d4ff 50%, #5b6cff 100%);
  --grad-cta-hover: linear-gradient(120deg, #0061cc 0%, #0098c6 50%, #4252d4 100%);

  /* Glass surfaces */
  --glass-blur: blur(18px) saturate(140%);
  --glass-blur-strong: blur(28px) saturate(160%);
  --glass-bg-elev1: rgba(255, 255, 255, 0.65);
  --glass-bg-elev2: rgba(255, 255, 255, 0.78);
  --glass-stroke: rgba(255, 255, 255, 0.32);

  /* Spring easings — 2026 standard */
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out-quart: cubic-bezier(0.76, 0, 0.24, 1);

  /* Motion durations */
  --dur-instant: 80ms;
  --dur-quick: 160ms;
  --dur-base: 280ms;
  --dur-slow: 480ms;
  --dur-aurora: 14s;

  /* Fluid type scale (320px → 1440px viewport) */
  --fs-display: clamp(2.5rem, 1.4rem + 5.4vw, 5rem);
  --fs-h1: clamp(2rem, 1.2rem + 3.8vw, 3.75rem);
  --fs-h2: clamp(1.6rem, 1.1rem + 2.4vw, 2.75rem);
  --fs-h3: clamp(1.25rem, 1rem + 1.2vw, 1.75rem);
  --fs-body-lg: clamp(1rem, 0.9rem + 0.6vw, 1.25rem);
  --fs-body: clamp(0.95rem, 0.9rem + 0.2vw, 1.0625rem);

  /* Layered shadows for depth */
  --shadow-elev-1: 0 1px 2px rgba(15, 23, 42, 0.04), 0 2px 6px rgba(15, 23, 42, 0.04);
  --shadow-elev-2: 0 2px 4px rgba(15, 23, 42, 0.05), 0 8px 24px rgba(15, 23, 42, 0.08);
  --shadow-elev-3: 0 4px 8px rgba(15, 23, 42, 0.06), 0 24px 48px rgba(15, 23, 42, 0.12);
  --shadow-glow-primary: 0 0 0 1px rgba(10, 132, 255, 0.18), 0 12px 32px rgba(10, 132, 255, 0.22);
}

[data-theme="dark"] {
  --grad-aurora-soft: linear-gradient(135deg, rgba(99, 102, 241, 0.18) 0%, rgba(139, 92, 246, 0.14) 50%, rgba(236, 72, 153, 0.12) 100%);
  --glass-bg-elev1: rgba(17, 22, 31, 0.62);
  --glass-bg-elev2: rgba(17, 22, 31, 0.78);
  --glass-stroke: rgba(255, 255, 255, 0.08);
  --shadow-elev-1: 0 1px 2px rgba(0, 0, 0, 0.32), 0 2px 6px rgba(0, 0, 0, 0.28);
  --shadow-elev-2: 0 2px 4px rgba(0, 0, 0, 0.4), 0 8px 24px rgba(0, 0, 0, 0.4);
  --shadow-elev-3: 0 4px 8px rgba(0, 0, 0, 0.5), 0 24px 48px rgba(0, 0, 0, 0.55);
  --shadow-glow-primary: 0 0 0 1px rgba(108, 178, 255, 0.32), 0 12px 32px rgba(108, 178, 255, 0.18);
}

/* ------------------------------------------------------------
   2. Aurora background for hero — animated, performant, GPU
   ------------------------------------------------------------ */
.hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}
.hero::before,
.hero::after {
  content: '';
  position: absolute;
  inset: -20%;
  z-index: -1;
  pointer-events: none;
  filter: blur(60px);
  opacity: 0.6;
  will-change: transform, opacity;
}
.hero::before {
  background: var(--grad-aurora-soft);
  animation: aurora-drift var(--dur-aurora) ease-in-out infinite alternate;
}
.hero::after {
  background:
    radial-gradient(60% 50% at 30% 20%, rgba(99, 102, 241, 0.18) 0%, transparent 60%),
    radial-gradient(50% 40% at 80% 70%, rgba(236, 72, 153, 0.16) 0%, transparent 60%);
  animation: aurora-drift calc(var(--dur-aurora) * 1.4) ease-in-out infinite alternate-reverse;
}
[data-theme="dark"] .hero::before { opacity: 0.42; }
[data-theme="dark"] .hero::after  { opacity: 0.55; }

@keyframes aurora-drift {
  0%   { transform: translate3d(-2%, -1%, 0) scale(1.02); }
  50%  { transform: translate3d(2%, 1.5%, 0) scale(1.06); }
  100% { transform: translate3d(-1%, 2%, 0) scale(1.04); }
}

/* ------------------------------------------------------------
   3. Hero typography — fluid, gradient accent
   ------------------------------------------------------------ */
.hero h1#hero-title,
.hero #hero-title {
  font-size: var(--fs-display);
  line-height: 1.04;
  letter-spacing: -0.025em;
  font-weight: 800;
}
.hero .hero-title-accent {
  background: var(--grad-aurora);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  background-size: 200% 200%;
  animation: gradient-shift 8s ease-in-out infinite;
}
@keyframes gradient-shift {
  0%, 100% { background-position: 0% 50%; }
  50%      { background-position: 100% 50%; }
}
.hero .hero-subtitle {
  font-size: var(--fs-body-lg);
  line-height: 1.55;
  max-width: 62ch;
}

/* ------------------------------------------------------------
   4. Glassmorphism — applied to hero badge, input wrapper, cards
   ------------------------------------------------------------ */
.hero-badge {
  background: var(--glass-bg-elev1);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-stroke);
  box-shadow: var(--shadow-elev-1);
}

.hero-input-container .input-wrapper-enhanced-v2,
.input-wrapper-enhanced-v2 {
  background: var(--glass-bg-elev2);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-stroke);
  box-shadow: var(--shadow-elev-2);
  transition: box-shadow var(--dur-base) var(--ease-out-expo),
              border-color var(--dur-base) var(--ease-out-expo),
              transform var(--dur-base) var(--ease-out-expo);
}
.input-wrapper-enhanced-v2:focus-within {
  border-color: var(--primary);
  box-shadow: var(--shadow-glow-primary);
  transform: translateY(-2px);
}

/* CTA button — vibrant gradient + glow */
.cta-button-hero-v2 {
  background-image: var(--grad-cta) !important;
  background-size: 200% 100%;
  background-position: 0% 50%;
  transition: background-position var(--dur-base) var(--ease-out-expo),
              transform var(--dur-base) var(--ease-spring),
              box-shadow var(--dur-base) var(--ease-out-expo) !important;
  box-shadow: 0 6px 20px rgba(10, 132, 255, 0.35),
              0 1px 3px rgba(10, 132, 255, 0.2);
}
.cta-button-hero-v2:hover:not([disabled]) {
  background-position: 100% 50%;
  transform: translateY(-2px) scale(1.01);
  box-shadow: 0 12px 32px rgba(10, 132, 255, 0.45),
              0 4px 12px rgba(91, 108, 255, 0.3);
}
.cta-button-hero-v2:active:not([disabled]) {
  transform: translateY(0) scale(0.99);
}

/* Industry pills — refined glass + active glow */
.industry-pill {
  transition: background var(--dur-quick) var(--ease-out-expo),
              border-color var(--dur-quick) var(--ease-out-expo),
              color var(--dur-quick) var(--ease-out-expo),
              transform var(--dur-quick) var(--ease-spring),
              box-shadow var(--dur-quick) var(--ease-out-expo);
}
.industry-pill:hover {
  transform: translateY(-1px);
}
.industry-pill.active {
  background-image: var(--grad-cta);
  color: #fff;
  border-color: transparent;
  box-shadow: 0 4px 14px rgba(10, 132, 255, 0.35);
}

/* Sample chips — compact glass tokens */
.hero-sample-btn {
  transition: background var(--dur-quick) var(--ease-out-expo),
              border-color var(--dur-quick) var(--ease-out-expo),
              transform var(--dur-quick) var(--ease-spring);
}
.hero-sample-btn:hover {
  transform: translateY(-1px);
  border-color: var(--primary);
  background: var(--primary-lighter);
}

/* ------------------------------------------------------------
   5. Feature cards — depth, hover lift, dark-mode parity
   ------------------------------------------------------------ */
.feature-card {
  background: var(--bg-secondary);
  border: 1px solid var(--border-light);
  box-shadow: var(--shadow-elev-1);
  transition: transform var(--dur-base) var(--ease-spring),
              box-shadow var(--dur-base) var(--ease-out-expo),
              border-color var(--dur-base) var(--ease-out-expo);
  position: relative;
  overflow: hidden;
}
.feature-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--grad-aurora-soft);
  opacity: 0;
  transition: opacity var(--dur-base) var(--ease-out-expo);
  pointer-events: none;
  z-index: 0;
}
.feature-card > * { position: relative; z-index: 1; }
.feature-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-elev-3);
  border-color: var(--primary);
}
.feature-card:hover::before { opacity: 1; }

.feature-icon {
  background: var(--grad-aurora-soft);
  border: 1px solid var(--glass-stroke);
}

/* ------------------------------------------------------------
   6. Pricing tier cards — premium glass + featured glow
   ------------------------------------------------------------ */
.tier-card {
  background: var(--bg-secondary);
  border: 1px solid var(--border-light);
  box-shadow: var(--shadow-elev-1);
  transition: transform var(--dur-base) var(--ease-spring),
              box-shadow var(--dur-base) var(--ease-out-expo),
              border-color var(--dur-base) var(--ease-out-expo);
}
.tier-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-elev-3);
}
.tier-card--featured,
.tier-card--engineer {
  border-color: var(--primary);
  background: linear-gradient(180deg, var(--bg-secondary) 0%, var(--bg-secondary) 100%);
  position: relative;
}
.tier-card--featured::before,
.tier-card--engineer::before {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  padding: 1px;
  background: var(--grad-aurora);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  pointer-events: none;
  opacity: 0.6;
}

/* ------------------------------------------------------------
   7. Section reveal — IntersectionObserver-driven entrance
   ------------------------------------------------------------ */
[data-reveal] {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity var(--dur-slow) var(--ease-out-expo),
              transform var(--dur-slow) var(--ease-out-expo);
}
[data-reveal].is-revealed {
  opacity: 1;
  transform: translateY(0);
}
[data-reveal][data-reveal-delay="1"].is-revealed { transition-delay: 80ms; }
[data-reveal][data-reveal-delay="2"].is-revealed { transition-delay: 160ms; }
[data-reveal][data-reveal-delay="3"].is-revealed { transition-delay: 240ms; }
[data-reveal][data-reveal-delay="4"].is-revealed { transition-delay: 320ms; }

/* ------------------------------------------------------------
   8. Focus ring — accessibility-first, AAA contrast in both themes
   ------------------------------------------------------------ */
:where(button, a, input, textarea, select, [role="button"], [role="radio"]):focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 3px;
  border-radius: 6px;
}

/* ------------------------------------------------------------
   9. Header — frosted glass for both themes
   ------------------------------------------------------------ */
header[role="banner"] {
  background: var(--glass-bg-elev2);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border-bottom: 1px solid var(--glass-stroke);
}

/* ------------------------------------------------------------
   10. Sticky CTA on long scroll — appears once user is past hero
   ------------------------------------------------------------ */
.sticky-mini-cta {
  position: fixed;
  inset: auto 0 0 0;
  display: flex;
  justify-content: center;
  padding: 12px 16px;
  z-index: 90;
  pointer-events: none;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity var(--dur-base) var(--ease-out-expo),
              transform var(--dur-base) var(--ease-out-expo);
}
.sticky-mini-cta.is-visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
.sticky-mini-cta__btn {
  pointer-events: auto;
  background-image: var(--grad-cta);
  color: #fff;
  border: none;
  padding: 12px 28px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 14px;
  cursor: pointer;
  box-shadow: 0 12px 32px rgba(10, 132, 255, 0.35);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: transform var(--dur-quick) var(--ease-spring);
}
.sticky-mini-cta__btn:hover { transform: translateY(-2px); }

/* Mobile: don't show the sticky CTA — already have native CTAs */
@media (max-width: 768px) {
  .sticky-mini-cta { display: none; }
}

/* ------------------------------------------------------------
   11. Reduced motion — strip all of the above
   ------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  .hero::before,
  .hero::after,
  .hero-title-accent {
    animation: none !important;
  }
  [data-reveal] {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  *,
  *::before,
  *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}

/* ------------------------------------------------------------
   12. High contrast / forced-colors — ensure semantic visibility
   ------------------------------------------------------------ */
@media (forced-colors: active) {
  .hero-title-accent { color: CanvasText !important; -webkit-text-fill-color: CanvasText !important; }
  .cta-button-hero-v2,
  .industry-pill.active,
  .sticky-mini-cta__btn { background: ButtonFace; color: ButtonText; border: 1px solid ButtonText; }
}

/* ------------------------------------------------------------
   13. Dark-mode rescue for sections that hardcoded white in HTML
   The educational + cta sections use inline `style="background:..."`,
   which beats CSS unless we use a higher-specificity selector. We
   target via attribute-selector + class so we don't bump !important.
   ------------------------------------------------------------ */
[data-theme="dark"] .educational-section,
[data-theme="dark"] section[class*="educational"][style] {
  background: linear-gradient(180deg, var(--bg-primary) 0%, var(--bg-secondary) 100%) !important;
}
[data-theme="dark"] .educational-section [style*="background: white"],
[data-theme="dark"] .educational-section [style*="background:#fff"],
[data-theme="dark"] .educational-section [style*="background: #fff"] {
  background: var(--bg-secondary) !important;
  color: var(--text-primary) !important;
  border-color: var(--border-light) !important;
}
[data-theme="dark"] .educational-section h2,
[data-theme="dark"] .educational-section h3,
[data-theme="dark"] .educational-section h4 { color: var(--text-primary); }
[data-theme="dark"] .educational-section p,
[data-theme="dark"] .educational-section li { color: var(--text-secondary); }

[data-theme="dark"] .cta-section {
  background: linear-gradient(135deg, #11161f 0%, #0e1320 100%);
}

/* Hardcoded color tokens used by inline styles in features/educational */
[data-theme="dark"] [style*="color: var(--text-secondary)"] { color: var(--text-secondary) !important; }

/* ------------------------------------------------------------
   14. Mobile refinements — hero spacing + input scale
   ------------------------------------------------------------ */
@media (max-width: 640px) {
  .hero { padding-top: clamp(48px, 14vw, 96px); padding-bottom: clamp(40px, 10vw, 80px); }
  .hero-input-container .input-wrapper-enhanced-v2 { flex-wrap: wrap; }
  .hero-input-container .cta-button-hero-v2 { width: 100%; }
  .industry-pills { gap: 6px; }
  .industry-pill { padding: 6px 12px; font-size: 12px; }
}