/* ============================================================
   PLATINUM — Advanced Animations & Effects (2026)
   SVG patterns, canvas-ready, micro-interactions, parallax,
   scroll-driven animations, glassmorphism, morphing shapes
   ============================================================ */

/* ===========================================
   1. ADVANCED KEYFRAME LIBRARY
   =========================================== */

/* Smooth entrance with spring physics */
@keyframes springIn {
  0%   { opacity: 0; transform: translateY(40px) scale(0.95); }
  60%  { opacity: 1; transform: translateY(-4px) scale(1.01); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}

/* Slide in from left with blur */
@keyframes slideInLeft {
  0%   { opacity: 0; transform: translateX(-60px); filter: blur(6px); }
  100% { opacity: 1; transform: translateX(0); filter: blur(0); }
}

/* Slide in from right with blur */
@keyframes slideInRight {
  0%   { opacity: 0; transform: translateX(60px); filter: blur(6px); }
  100% { opacity: 1; transform: translateX(0); filter: blur(0); }
}

/* Scale bounce in */
@keyframes bounceIn {
  0%   { opacity: 0; transform: scale(0.3); }
  50%  { opacity: 1; transform: scale(1.06); }
  70%  { transform: scale(0.97); }
  100% { transform: scale(1); }
}

/* Rotate and fade in */
@keyframes rotateIn {
  0%   { opacity: 0; transform: rotate(-8deg) scale(0.9); }
  100% { opacity: 1; transform: rotate(0) scale(1); }
}

/* Blur fade in */
@keyframes blurFadeIn {
  0%   { opacity: 0; filter: blur(12px); transform: translateY(16px); }
  100% { opacity: 1; filter: blur(0); transform: translateY(0); }
}

/* Continuous shimmer effect */
@keyframes shimmer {
  0%   { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

/* Pulse glow for CTA */
@keyframes pulseGlow {
  0%, 100% { box-shadow: 0 0 0 0 rgba(27, 111, 196, 0.4); }
  50%      { box-shadow: 0 0 0 12px rgba(27, 111, 196, 0); }
}

/* Morphing blob shape */
@keyframes morphBlob {
  0%, 100% { border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%; }
  25%      { border-radius: 30% 60% 70% 40% / 50% 60% 30% 60%; }
  50%      { border-radius: 50% 60% 30% 60% / 30% 40% 70% 60%; }
  75%      { border-radius: 60% 30% 60% 40% / 70% 50% 40% 60%; }
}

/* Rotate slowly (for decorative elements) */
@keyframes spinSlow {
  0%   { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* Counter-rotate */
@keyframes spinReverse {
  0%   { transform: rotate(0deg); }
  100% { transform: rotate(-360deg); }
}

/* Orbit */
@keyframes orbit {
  0%   { transform: rotate(0deg) translateX(120px) rotate(0deg); }
  100% { transform: rotate(360deg) translateX(120px) rotate(-360deg); }
}

/* Breathing / scale pulse */
@keyframes breathe {
  0%, 100% { transform: scale(1); opacity: 0.7; }
  50%      { transform: scale(1.08); opacity: 1; }
}

/* Typing cursor blink */
@keyframes cursorBlink {
  0%, 50% { border-color: var(--color-primary); }
  51%, 100% { border-color: transparent; }
}

/* Number reveal wipe */
@keyframes revealWipe {
  0%   { clip-path: inset(0 100% 0 0); }
  100% { clip-path: inset(0 0 0 0); }
}

/* Slide up stagger for grids */
@keyframes staggerUp {
  0%   { opacity: 0; transform: translateY(30px); }
  100% { opacity: 1; transform: translateY(0); }
}

/* Elastic pop */
@keyframes elasticPop {
  0%   { transform: scale(0); }
  55%  { transform: scale(1.08); }
  70%  { transform: scale(0.96); }
  85%  { transform: scale(1.02); }
  100% { transform: scale(1); }
}

/* Diagonal wipe */
@keyframes diagonalReveal {
  0%   { clip-path: polygon(0 0, 0 0, 0 100%, 0 100%); }
  100% { clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); }
}

/* Gradient orbit for backgrounds */
@keyframes gradientOrbit {
  0%   { background-position: 0% 50%; }
  25%  { background-position: 100% 0%; }
  50%  { background-position: 100% 100%; }
  75%  { background-position: 0% 100%; }
  100% { background-position: 0% 50%; }
}

/* Underline grow */
@keyframes underlineGrow {
  0%   { transform: scaleX(0); transform-origin: left; }
  100% { transform: scaleX(1); transform-origin: left; }
}

/* Float with rotation */
@keyframes floatRotate {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  25%      { transform: translateY(-8px) rotate(2deg); }
  50%      { transform: translateY(-14px) rotate(0deg); }
  75%      { transform: translateY(-6px) rotate(-2deg); }
}

/* Dash animation for SVG strokes */
@keyframes dashDraw {
  0%   { stroke-dashoffset: 1000; }
  100% { stroke-dashoffset: 0; }
}

/* Particle rise */
@keyframes particleRise {
  0%   { opacity: 0; transform: translateY(30px) scale(0); }
  20%  { opacity: 1; transform: translateY(20px) scale(1); }
  100% { opacity: 0; transform: translateY(-80px) scale(0.5); }
}


/* ===========================================
   2. SCROLL-DRIVEN ANIMATION CLASSES
   =========================================== */

/* Spring entrance */
.anim-spring {
  opacity: 0;
  transform: translateY(32px) scale(0.96);
  transition: opacity 0.65s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.65s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform;
}
.anim-spring.visible {
  opacity: 1;
  transform: translateY(0) scale(1);
}

/* Blur fade in */
.anim-blur {
  opacity: 0;
  filter: blur(8px);
  transform: translateY(18px);
  transition: opacity 0.75s cubic-bezier(0.16, 1, 0.3, 1),
              filter 0.75s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.75s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, filter, transform;
}
.anim-blur.visible {
  opacity: 1;
  filter: blur(0);
  transform: translateY(0);
}

/* Scale pop */
.anim-scale {
  opacity: 0;
  transform: scale(0.85);
  transition: opacity 0.6s ease, transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.anim-scale.visible {
  opacity: 1;
  transform: scale(1);
}

/* Slide from left */
.anim-left {
  opacity: 0;
  transform: translateX(-50px);
  transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}
.anim-left.visible {
  opacity: 1;
  transform: translateX(0);
}

/* Slide from right */
.anim-right {
  opacity: 0;
  transform: translateX(50px);
  transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}
.anim-right.visible {
  opacity: 1;
  transform: translateX(0);
}

/* Rotate in */
.anim-rotate {
  opacity: 0;
  transform: rotate(-6deg) translateY(20px);
  transition: opacity 0.6s ease, transform 0.7s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.anim-rotate.visible {
  opacity: 1;
  transform: rotate(0) translateY(0);
}

/* Stagger delays (for child elements) */
.stagger-children > :nth-child(1) { transition-delay: 0.05s; }
.stagger-children > :nth-child(2) { transition-delay: 0.1s; }
.stagger-children > :nth-child(3) { transition-delay: 0.15s; }
.stagger-children > :nth-child(4) { transition-delay: 0.2s; }
.stagger-children > :nth-child(5) { transition-delay: 0.25s; }
.stagger-children > :nth-child(6) { transition-delay: 0.3s; }
.stagger-children > :nth-child(7) { transition-delay: 0.35s; }
.stagger-children > :nth-child(8) { transition-delay: 0.4s; }

/* Deep stagger for large grids */
.stagger-deep > :nth-child(1)  { transition-delay: 0.04s; }
.stagger-deep > :nth-child(2)  { transition-delay: 0.08s; }
.stagger-deep > :nth-child(3)  { transition-delay: 0.12s; }
.stagger-deep > :nth-child(4)  { transition-delay: 0.16s; }
.stagger-deep > :nth-child(5)  { transition-delay: 0.2s; }
.stagger-deep > :nth-child(6)  { transition-delay: 0.24s; }
.stagger-deep > :nth-child(7)  { transition-delay: 0.28s; }
.stagger-deep > :nth-child(8)  { transition-delay: 0.32s; }
.stagger-deep > :nth-child(9)  { transition-delay: 0.36s; }
.stagger-deep > :nth-child(10) { transition-delay: 0.4s; }


/* ===========================================
   3. SVG DECORATIVE BACKGROUNDS
   =========================================== */

/* Hero mesh gradient background with SVG noise */
.hero--animated-bg::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    url("data:image/svg+xml,%3Csvg viewBox='0 0 400 400' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.03'/%3E%3C/svg%3E"),
    radial-gradient(ellipse at 25% 20%, rgba(27, 111, 196, 0.08) 0%, transparent 50%),
    radial-gradient(ellipse at 75% 80%, rgba(139, 92, 246, 0.05) 0%, transparent 50%),
    radial-gradient(ellipse at 50% 50%, rgba(46, 150, 229, 0.04) 0%, transparent 60%);
  z-index: 0;
  pointer-events: none;
}

/* Animated SVG grid pattern */
.bg-grid-pattern::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%231B6FC4' fill-opacity='0.03'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  pointer-events: none;
  z-index: 0;
  opacity: 0.6;
}

/* Dot pattern */
.bg-dots-pattern::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle, rgba(27, 111, 196, 0.06) 1px, transparent 1px);
  background-size: 24px 24px;
  pointer-events: none;
  z-index: 0;
}

/* Animated diagonal lines */
.bg-lines-pattern::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg width='40' height='40' viewBox='0 0 40 40' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' stroke='%231B6FC4' stroke-opacity='0.04' stroke-width='1'%3E%3Cpath d='M0 40L40 0M-10 10L10 -10M30 50L50 30'/%3E%3C/g%3E%3C/svg%3E");
  pointer-events: none;
  z-index: 0;
}


/* ===========================================
   4. MORPHING BLOB DECORATIONS
   =========================================== */
.blob-decor {
  position: absolute;
  border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;
  animation: morphBlob 12s ease-in-out infinite;
  pointer-events: none;
  z-index: 0;
}

.blob-decor--1 {
  width: 500px;
  height: 500px;
  background: radial-gradient(circle, rgba(27, 111, 196, 0.06), transparent 70%);
  top: -10%;
  right: -8%;
  animation-duration: 15s;
}

.blob-decor--2 {
  width: 400px;
  height: 400px;
  background: radial-gradient(circle, rgba(139, 92, 246, 0.05), transparent 70%);
  bottom: -5%;
  left: -6%;
  animation-duration: 18s;
  animation-delay: 3s;
}

.blob-decor--3 {
  width: 300px;
  height: 300px;
  background: radial-gradient(circle, rgba(34, 197, 94, 0.04), transparent 70%);
  top: 40%;
  left: 50%;
  animation-duration: 20s;
  animation-delay: 6s;
}

/* Smaller accent blob */
.blob-decor--accent {
  width: 200px;
  height: 200px;
  background: radial-gradient(circle, rgba(46, 150, 229, 0.08), transparent 60%);
  animation-duration: 10s;
}


/* ===========================================
   5. FLOATING PARTICLES (CSS-only)
   =========================================== */
.particles {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}

.particle {
  position: absolute;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-primary);
  opacity: 0;
  animation: particleRise 8s ease-in-out infinite;
}

.particle:nth-child(1) { left: 10%; animation-delay: 0s; animation-duration: 7s; width: 4px; height: 4px; opacity: 0.15; }
.particle:nth-child(2) { left: 25%; animation-delay: 1.5s; animation-duration: 9s; width: 5px; height: 5px; opacity: 0.1; }
.particle:nth-child(3) { left: 40%; animation-delay: 3s; animation-duration: 8s; width: 3px; height: 3px; opacity: 0.2; }
.particle:nth-child(4) { left: 55%; animation-delay: 0.8s; animation-duration: 10s; width: 6px; height: 6px; opacity: 0.08; }
.particle:nth-child(5) { left: 70%; animation-delay: 2.2s; animation-duration: 7.5s; width: 4px; height: 4px; opacity: 0.12; }
.particle:nth-child(6) { left: 85%; animation-delay: 4s; animation-duration: 9s; width: 5px; height: 5px; opacity: 0.15; }
.particle:nth-child(7) { left: 15%; animation-delay: 5s; animation-duration: 11s; width: 3px; height: 3px; opacity: 0.1; }
.particle:nth-child(8) { left: 60%; animation-delay: 6.5s; animation-duration: 8.5s; width: 4px; height: 4px; opacity: 0.12; }
.particle:nth-child(9) { left: 35%; animation-delay: 7s; animation-duration: 10s; width: 5px; height: 5px; opacity: 0.08; }
.particle:nth-child(10) { left: 80%; animation-delay: 2s; animation-duration: 9.5s; width: 3px; height: 3px; opacity: 0.18; }


/* ===========================================
   6. ENHANCED MICRO-INTERACTIONS
   =========================================== */

/* Card tilt on hover (3D perspective) */
.card-3d {
  perspective: 1000px;
  transform-style: preserve-3d;
}

.card-3d:hover {
  transform: perspective(1000px) rotateX(2deg) rotateY(-2deg) translateY(-6px);
  box-shadow: 8px 16px 32px rgba(15, 40, 50, 0.12),
              -4px -4px 16px rgba(255, 255, 255, 0.6);
}

/* Magnetic hover effect class (JS-enhanced) */
.magnetic-hover {
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Ripple click effect */
.ripple-effect {
  position: relative;
  overflow: hidden;
}

.ripple-effect::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.3);
  transform: translate(-50%, -50%);
  transition: width 0.5s ease, height 0.5s ease, opacity 0.5s ease;
  opacity: 0;
}

.ripple-effect:active::after {
  width: 300px;
  height: 300px;
  opacity: 1;
  transition: width 0s, height 0s, opacity 0s;
}

/* Glow on hover */
.glow-hover {
  transition: box-shadow 0.4s ease;
}

.glow-hover:hover {
  box-shadow: 0 0 30px rgba(27, 111, 196, 0.2),
              0 0 60px rgba(27, 111, 196, 0.08);
}

/* Underline animation on links */
.link-underline {
  position: relative;
}

.link-underline::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 100%;
  height: 2px;
  background: var(--color-primary);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.link-underline:hover::after {
  transform: scaleX(1);
  transform-origin: left;
}

/* Icon bounce on card hover */
.icon-bounce {
  transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.card:hover .icon-bounce,
.feature-card:hover .icon-bounce,
.hard-truth-card:hover .icon-bounce,
.role-card:hover .icon-bounce,
.support-card:hover .icon-bounce {
  transform: translateY(-4px) scale(1.1);
}

/* Number highlight effect */
.number-highlight {
  position: relative;
  display: inline-block;
}

.number-highlight::after {
  content: '';
  position: absolute;
  bottom: 4px;
  left: -4px;
  right: -4px;
  height: 30%;
  background: rgba(27, 111, 196, 0.1);
  border-radius: 4px;
  z-index: -1;
  transform: scaleX(0);
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
  transform-origin: left;
}

.number-highlight.visible::after {
  transform: scaleX(1);
}


/* ===========================================
   7. ENHANCED HERO EFFECTS
   =========================================== */

/* Hero title entrance with gradient reveal */
.hero__title {
  animation: blurFadeIn 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.1s both;
}

.hero__subtitle {
  animation: blurFadeIn 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.25s both;
}

.hero__badge {
  animation: blurFadeIn 0.6s ease 0s both;
}

.hero__actions {
  animation: blurFadeIn 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.4s both;
}

/* Gradient text shimmer */
.text-gradient-shimmer {
  background: linear-gradient(
    90deg,
    var(--color-primary) 0%,
    var(--color-accent) 25%,
    #8b5cf6 50%,
    var(--color-accent) 75%,
    var(--color-primary) 100%
  );
  background-size: 300% 100%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: shimmer 6s linear infinite;
}

/* CTA button pulse glow */
.btn--gradient {
  animation: gradientShift 4s ease infinite, pulseGlow 3s ease-in-out infinite 1s;
}

/* Float elements enhanced */
.float-element {
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  background: rgba(255, 255, 255, 0.9);
}

.float-element--1 {
  animation: floatRotate 7s ease-in-out infinite;
}

.float-element--2 {
  animation: floatRotate 8s ease-in-out infinite 2s;
}

/* Third float element */
.float-element--3 {
  top: 55%;
  right: -30px;
  animation: floatRotate 9s ease-in-out infinite 4s;
}


/* ===========================================
   8. ENHANCED DASHBOARD MOCK
   =========================================== */

/* Shimmer loading skeleton effect */
.skeleton-shimmer {
  background: linear-gradient(
    90deg,
    var(--color-border-light) 25%,
    #f0f4f8 50%,
    var(--color-border-light) 75%
  );
  background-size: 200% 100%;
  animation: shimmer 2s linear infinite;
  border-radius: var(--radius-sm);
}

/* Animated bars in dashboard */
.dashboard-mock__bar--animated {
  animation: revealWipe 1.5s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.dashboard-mock__bar--animated:nth-child(1) { animation-delay: 0.3s; }
.dashboard-mock__bar--animated:nth-child(2) { animation-delay: 0.5s; }
.dashboard-mock__bar--animated:nth-child(3) { animation-delay: 0.7s; }
.dashboard-mock__bar--animated:nth-child(4) { animation-delay: 0.9s; }

/* Widget entrance */
.dashboard-mock__widget {
  animation: springIn 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

.dashboard-mock__row:nth-child(1) .dashboard-mock__widget:nth-child(1) { animation-delay: 0.3s; }
.dashboard-mock__row:nth-child(1) .dashboard-mock__widget:nth-child(2) { animation-delay: 0.4s; }
.dashboard-mock__row:nth-child(2) .dashboard-mock__widget:nth-child(1) { animation-delay: 0.5s; }
.dashboard-mock__row:nth-child(2) .dashboard-mock__widget:nth-child(2) { animation-delay: 0.6s; }

/* Dashboard hover lift */
.dashboard-mock {
  transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 0.5s ease;
}

.hero__image:hover .dashboard-mock {
  transform: translateY(-4px);
  box-shadow: 0 24px 60px rgba(15, 40, 50, 0.14);
}


/* ===========================================
   9. ENHANCED CARD ANIMATIONS
   =========================================== */

/* Card top-border — handled in styles.css with soft 3D system */

/* Outcome card number parallax */
.outcome-card__number {
  transition: transform 0.4s ease;
}

.outcome-card:hover .outcome-card__number {
  transform: translateY(-4px) scale(1.05);
}

/* Role card icon rotation on hover */
.role-card__icon {
  transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1),
              box-shadow 0.3s ease;
}

.role-card:hover .role-card__icon {
  transform: scale(1.1) rotate(5deg);
  box-shadow: 0 4px 12px rgba(27, 111, 196, 0.15);
}


/* ===========================================
   10. ENHANCED STAT COUNTERS
   =========================================== */

/* Big number entrance */
.stat__number {
  transition: opacity 0.6s ease, transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.stat__number.counted {
  opacity: 1;
  transform: translateY(0);
}

/* Stat hover effect */
.stat {
  transition: transform 0.3s ease;
  border-radius: var(--radius-lg);
}

.stat:hover {
  transform: scale(1.05);
}

.stat:hover .stat__number {
  filter: brightness(1.1);
}


/* ===========================================
   11. ENHANCED ICON TABS
   =========================================== */

/* Tab icon entrance */
.icon-tab {
  animation: springIn 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

.icon-tab:nth-child(1) { animation-delay: 0.1s; }
.icon-tab:nth-child(2) { animation-delay: 0.15s; }
.icon-tab:nth-child(3) { animation-delay: 0.2s; }
.icon-tab:nth-child(4) { animation-delay: 0.25s; }
.icon-tab:nth-child(5) { animation-delay: 0.3s; }
.icon-tab:nth-child(6) { animation-delay: 0.35s; }

/* Active tab ring animation */
.icon-tab.active .icon-tab__icon {
  animation: elasticPop 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

/* Tab panel visual card entrance */
.tab-panel.active .tab-panel__visual {
  animation: slideInRight 0.5s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.tab-panel.active .tab-panel__info {
  animation: slideInLeft 0.5s cubic-bezier(0.16, 1, 0.3, 1) both;
}


/* ===========================================
   12. ENHANCED CTA
   =========================================== */

/* Animated gradient background */
.cta-section {
  background: linear-gradient(135deg,
    var(--color-primary) 0%,
    #1a5da8 30%,
    var(--color-primary-dark) 60%,
    #0d4a82 100%
  );
  background-size: 300% 300%;
  animation: gradientOrbit 12s ease infinite;
}

/* Decorative circles in CTA */
.cta-section::before {
  animation: breathe 6s ease-in-out infinite;
}

.cta-section::after {
  animation: breathe 8s ease-in-out infinite 2s;
}


/* ===========================================
   13. ENHANCED WORKFLOW VISUAL
   =========================================== */

/* Workflow line pulse */
.workflow-visual__line {
  position: relative;
  overflow: visible;
}

.workflow-visual__line::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 2px;
  height: 100%;
  background: linear-gradient(180deg, var(--color-primary), transparent);
  animation: revealWipe 1s ease both;
}

/* Node pulse when active */
.workflow-visual__node--active {
  animation: pulseGlow 2s ease-in-out infinite;
}

/* Connector dots pulse */
.shift-connector__dot {
  animation: breathe 3s ease-in-out infinite;
}

.shift-connector__dot--orange { animation-delay: 0.5s; }
.shift-connector__dot--green { animation-delay: 1s; }
.shift-connector__dot--purple { animation-delay: 1.5s; }


/* ===========================================
   14. ENHANCED TESTIMONIALS
   =========================================== */

/* Quote mark animation */
.testimonial__quote-mark {
  animation: blurFadeIn 0.6s ease 0.3s both;
}

/* Featured testimonial gradient animation */
.testimonial--featured {
  background: linear-gradient(135deg,
    var(--color-primary),
    var(--color-primary-dark),
    #0d4a82
  );
  background-size: 200% 200%;
  animation: gradientOrbit 10s ease infinite;
}

/* Stat number entrance in testimonial */
.testimonial__stat-number {
  transition: transform 0.3s ease;
}

.testimonial:hover .testimonial__stat-number {
  transform: scale(1.08);
}


/* ===========================================
   15. ENHANCED TRUST BAR
   =========================================== */

/* Smooth fade edges */
.trust-bar__marquee {
  -webkit-mask-image: linear-gradient(
    90deg,
    transparent 0%,
    black 10%,
    black 90%,
    transparent 100%
  );
  mask-image: linear-gradient(
    90deg,
    transparent 0%,
    black 10%,
    black 90%,
    transparent 100%
  );
}

/* Pause on hover */
.trust-bar__marquee:hover .trust-bar__track {
  animation-play-state: paused;
}


/* ===========================================
   16. SVG DRAWING ANIMATIONS
   =========================================== */

/* SVG path draw effect */
.svg-draw path,
.svg-draw line,
.svg-draw polyline,
.svg-draw circle,
.svg-draw rect {
  stroke-dasharray: 200;
  stroke-dashoffset: 200;
  transition: stroke-dashoffset 1s cubic-bezier(0.16, 1, 0.3, 1);
}

.svg-draw.visible path,
.svg-draw.visible line,
.svg-draw.visible polyline,
.svg-draw.visible circle,
.svg-draw.visible rect {
  stroke-dashoffset: 0;
}

/* SVG icons in cards draw on hover */
.hard-truth-card:hover .svg-draw path,
.hard-truth-card:hover .svg-draw line,
.hard-truth-card:hover .svg-draw polyline,
.role-card:hover .svg-draw path,
.role-card:hover .svg-draw line,
.role-card:hover .svg-draw polyline {
  stroke-dashoffset: 0;
}


/* ===========================================
   17. GLASSMORPHISM COMPONENTS
   =========================================== */

/* Glass card */
.glass-card {
  background: rgba(255, 255, 255, 0.65);
  backdrop-filter: blur(16px) saturate(1.6);
  -webkit-backdrop-filter: blur(16px) saturate(1.6);
  border: 1px solid rgba(255, 255, 255, 0.3);
  box-shadow: 0 8px 32px rgba(15, 40, 50, 0.08);
}

/* Glass header (already exists but enhance) */
.header {
  backdrop-filter: blur(20px) saturate(1.8);
  -webkit-backdrop-filter: blur(20px) saturate(1.8);
}

.header.scrolled {
  box-shadow: 0 1px 16px rgba(15, 40, 50, 0.06),
              0 0 0 1px rgba(27, 111, 196, 0.04);
}


/* ===========================================
   18. CANVAS CONTAINER
   =========================================== */

/* Canvas element positioning for JS-driven effects */
#heroCanvas,
.canvas-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
  opacity: 0.5;
}

/* Canvas for section backgrounds */
.section-canvas {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

/* Ensure content stays above canvas/decorations */
.hero .container,
.section .container {
  position: relative;
  z-index: 1;
}


/* ===========================================
   19. SCROLL PROGRESS INDICATOR
   =========================================== */
.scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--color-primary), var(--color-accent), #8b5cf6);
  z-index: 10000;
  transition: width 0.1s linear;
  border-radius: 0 2px 2px 0;
}


/* ===========================================
   20. CURSOR FOLLOWER (JS-driven)
   =========================================== */
.cursor-glow {
  position: fixed;
  width: 180px;
  height: 180px;
  border-radius: 50%;
  background: radial-gradient(circle,
    rgba(255, 255, 255, 0.13) 0%,
    rgba(255, 255, 255, 0.05) 50%,
    transparent 70%
  );
  pointer-events: none;
  z-index: 0;
  transform: translate(-50%, -50%);
  transition: opacity 0.35s ease;
  opacity: 0;
}

.cursor-glow.active {
  opacity: 1;
}


/* ===========================================
   21. ENHANCED CHAT WIDGET
   =========================================== */

.chat-widget__btn {
  animation: pulseGlow 3s ease-in-out infinite;
  transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.chat-widget__btn:hover {
  animation: none;
  transform: scale(1.15) rotate(10deg);
}

.chat-widget__btn:active {
  transform: scale(0.95);
}


/* ===========================================
   22. RESPONSIVE — Disable heavy anims
   =========================================== */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  .trust-bar__track {
    animation: none;
  }

  .blob-decor,
  .particles,
  .cursor-glow {
    display: none;
  }
}

@media (max-width: 768px) {
  .blob-decor { display: none; }
  .particles { display: none; }
  .light-particles { display: none; }
  .cursor-glow { display: none; }
  .aurora { display: none; }
  .global-bg-canvas { display: none; }

  .card-3d:hover {
    transform: translateY(-4px);
  }

  .float-element--3 {
    display: none;
  }
}


/* ===========================================
   23. PREMIUM BACKGROUND SYSTEM (2026)
   =========================================== */

/* Global flowing background canvas */
.global-bg-canvas {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: -1;
  opacity: 0.35;
}

/* Hero canvas layers */
.hero-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
}

.hero-canvas--particles {
  z-index: 1;
  opacity: 0.6;
}

/* Aurora orbs — premium gradient blobs */
.aurora {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}

.aurora__orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  opacity: 0.5;
  will-change: transform;
  animation: auroraFloat 20s ease-in-out infinite;
}

.aurora__orb--1 {
  width: 600px;
  height: 600px;
  background: radial-gradient(circle, rgba(27, 111, 196, 0.12) 0%, rgba(46, 150, 229, 0.04) 50%, transparent 70%);
  top: -15%;
  right: -5%;
  animation-duration: 22s;
}

.aurora__orb--2 {
  width: 500px;
  height: 500px;
  background: radial-gradient(circle, rgba(139, 92, 246, 0.1) 0%, rgba(139, 92, 246, 0.03) 50%, transparent 70%);
  bottom: 5%;
  left: -8%;
  animation-duration: 28s;
  animation-delay: -5s;
}

.aurora__orb--3 {
  width: 400px;
  height: 400px;
  background: radial-gradient(circle, rgba(34, 197, 94, 0.06) 0%, rgba(46, 150, 229, 0.03) 50%, transparent 70%);
  top: 40%;
  left: 45%;
  animation-duration: 25s;
  animation-delay: -10s;
}

@keyframes auroraFloat {
  0%, 100% {
    transform: translate(0, 0) scale(1) rotate(0deg);
    border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;
  }
  25% {
    transform: translate(30px, -40px) scale(1.05) rotate(3deg);
    border-radius: 30% 60% 70% 40% / 50% 60% 30% 60%;
  }
  50% {
    transform: translate(-20px, 20px) scale(0.95) rotate(-2deg);
    border-radius: 50% 60% 30% 60% / 30% 40% 70% 60%;
  }
  75% {
    transform: translate(15px, 30px) scale(1.02) rotate(4deg);
    border-radius: 60% 30% 60% 40% / 70% 50% 40% 60%;
  }
}

/* Light particles — floating specks */
.light-particles {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 1;
}

.light-particle {
  position: absolute;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: var(--color-primary);
  opacity: 0;
  animation: lightFloat linear infinite;
}

.light-particle:nth-child(1)  { left: 8%;  animation-duration: 14s; animation-delay: 0s;   width: 2px; height: 2px; }
.light-particle:nth-child(2)  { left: 18%; animation-duration: 18s; animation-delay: -2s;  width: 3px; height: 3px; }
.light-particle:nth-child(3)  { left: 28%; animation-duration: 12s; animation-delay: -4s;  width: 2px; height: 2px; }
.light-particle:nth-child(4)  { left: 38%; animation-duration: 20s; animation-delay: -1s;  width: 4px; height: 4px; }
.light-particle:nth-child(5)  { left: 48%; animation-duration: 16s; animation-delay: -6s;  width: 2px; height: 2px; }
.light-particle:nth-child(6)  { left: 58%; animation-duration: 22s; animation-delay: -3s;  width: 3px; height: 3px; }
.light-particle:nth-child(7)  { left: 68%; animation-duration: 15s; animation-delay: -8s;  width: 2px; height: 2px; }
.light-particle:nth-child(8)  { left: 78%; animation-duration: 19s; animation-delay: -5s;  width: 3px; height: 3px; }
.light-particle:nth-child(9)  { left: 88%; animation-duration: 13s; animation-delay: -7s;  width: 2px; height: 2px; }
.light-particle:nth-child(10) { left: 93%; animation-duration: 17s; animation-delay: -9s;  width: 4px; height: 4px; }
.light-particle:nth-child(11) { left: 5%;  animation-duration: 21s; animation-delay: -11s; width: 2px; height: 2px; }
.light-particle:nth-child(12) { left: 55%; animation-duration: 24s; animation-delay: -13s; width: 3px; height: 3px; }

@keyframes lightFloat {
  0% {
    opacity: 0;
    transform: translateY(100vh) scale(0);
  }
  5% {
    opacity: 0.4;
    transform: translateY(90vh) scale(1);
  }
  50% {
    opacity: 0.15;
  }
  95% {
    opacity: 0.3;
    transform: translateY(-10vh) scale(0.8);
  }
  100% {
    opacity: 0;
    transform: translateY(-15vh) scale(0);
  }
}

/* Hero wave separator */
.hero-wave {
  position: absolute;
  bottom: -1px;
  left: 0;
  right: 0;
  z-index: 2;
  pointer-events: none;
  line-height: 0;
}

.hero-wave svg {
  width: 100%;
  height: 80px;
  display: block;
}

.hero-wave__path--1 {
  animation: waveFlow1 8s ease-in-out infinite;
}

.hero-wave__path--2 {
  animation: waveFlow2 10s ease-in-out infinite;
  animation-delay: -2s;
}

.hero-wave__path--3 {
  animation: waveFlow3 12s ease-in-out infinite;
  animation-delay: -4s;
}

@keyframes waveFlow1 {
  0%, 100% { d: path("M0,80 C360,120 720,20 1080,60 C1260,80 1380,40 1440,50 L1440,120 L0,120Z"); }
  50%      { d: path("M0,60 C240,30 600,100 900,50 C1100,20 1320,80 1440,70 L1440,120 L0,120Z"); }
}

@keyframes waveFlow2 {
  0%, 100% { d: path("M0,90 C240,50 480,110 720,70 C960,30 1200,90 1440,60 L1440,120 L0,120Z"); }
  50%      { d: path("M0,70 C300,100 540,40 780,80 C1020,110 1260,50 1440,85 L1440,120 L0,120Z"); }
}

@keyframes waveFlow3 {
  0%, 100% { d: path("M0,100 C180,80 360,110 540,95 C720,80 900,105 1080,90 C1260,75 1380,100 1440,95 L1440,120 L0,120Z"); }
  50%      { d: path("M0,95 C200,105 400,85 600,100 C800,110 1000,80 1200,95 C1350,105 1420,90 1440,92 L1440,120 L0,120Z"); }
}

/* Section flow dividers */
.section-wave {
  position: relative;
  height: 60px;
  overflow: hidden;
  margin-top: -1px;
  pointer-events: none;
}

.section-wave svg {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 100%;
}

/* Smooth section transitions */
.section--bg-white + .section--bg-tinted,
.section--bg-tinted + .section--bg-white {
  position: relative;
}

/* Section background glow effects */
.section--glow::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 60%;
  height: 60%;
  background: radial-gradient(ellipse, rgba(27, 111, 196, 0.04) 0%, transparent 70%);
  pointer-events: none;
  z-index: 0;
  filter: blur(60px);
}

/* Smooth gradient noise overlay for depth */
.hero--animated-bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 30% 20%, rgba(27, 111, 196, 0.06) 0%, transparent 50%),
    radial-gradient(ellipse at 70% 80%, rgba(139, 92, 246, 0.04) 0%, transparent 50%),
    radial-gradient(ellipse at 50% 50%, rgba(46, 150, 229, 0.03) 0%, transparent 60%);
  z-index: 0;
  pointer-events: none;
  animation: bgShift 20s ease-in-out infinite;
}

@keyframes bgShift {
  0%, 100% {
    background-position: 0% 0%, 100% 100%, 50% 50%;
  }
  33% {
    background-position: 30% 20%, 70% 60%, 40% 80%;
  }
  66% {
    background-position: 60% 40%, 30% 30%, 70% 20%;
  }
}

/* Responsive: reduce on mobile */
@media (max-width: 768px) {
  .hero-wave svg {
    height: 50px;
  }

  .aurora__orb {
    filter: blur(60px);
  }

  .aurora__orb--1 { width: 300px; height: 300px; }
  .aurora__orb--2 { width: 250px; height: 250px; }
  .aurora__orb--3 { display: none; }
}

@media (max-width: 480px) {
  .hero-wave svg {
    height: 35px;
  }

  .aurora__orb--1 { width: 200px; height: 200px; }
  .aurora__orb--2 { display: none; }
}

/* ============================================================
   2026 ADVANCED ANIMATION ENHANCEMENTS
   Micro-interactions, scroll-linked motion, refined entrances
   ============================================================ */

/* --- Smooth fade-up entrance with blur --- */
.anim-fade-up {
  opacity: 0;
  transform: translateY(32px);
  filter: blur(6px);
  transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.6s cubic-bezier(0.16, 1, 0.3, 1),
              filter 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}
.anim-fade-up.visible {
  opacity: 1;
  transform: translateY(0);
  filter: blur(0);
}

/* --- Scale pop with overshoot --- */
.anim-pop {
  opacity: 0;
  transform: scale(0.85);
  transition: opacity 0.4s ease, transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.anim-pop.visible {
  opacity: 1;
  transform: scale(1);
}

/* --- Slide-in from left --- */
.anim-slide-left {
  opacity: 0;
  transform: translateX(-40px);
  transition: opacity 0.5s ease, transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}
.anim-slide-left.visible {
  opacity: 1;
  transform: translateX(0);
}

/* --- Slide-in from right --- */
.anim-slide-right {
  opacity: 0;
  transform: translateX(40px);
  transition: opacity 0.5s ease, transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}
.anim-slide-right.visible {
  opacity: 1;
  transform: translateX(0);
}

/* --- Continuous floating animation for badges --- */
@keyframes gentleFloat {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  25% { transform: translateY(-6px) rotate(0.5deg); }
  75% { transform: translateY(4px) rotate(-0.5deg); }
}
.float-badge {
  animation: gentleFloat 4s ease-in-out infinite;
}
.float-badge--info {
  animation-delay: -1s;
}
.float-badge--ai {
  animation-delay: -2s;
}

/* --- Gradient text shimmer enhancement --- */
.text-gradient-shimmer {
  background-size: 200% auto;
  animation: shimmerGradient 3s linear infinite;
}
@keyframes shimmerGradient {
  0% { background-position: 0% center; }
  100% { background-position: 200% center; }
}

/* --- Card tilt micro-interaction refinement --- */
@media (hover: hover) and (min-width: 768px) {
  .card-3d {
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1),
                box-shadow 0.4s ease;
    will-change: transform;
  }
  .card-3d:hover {
    box-shadow: 0 20px 60px rgba(15, 40, 50, 0.1),
                0 8px 20px rgba(15, 40, 50, 0.06);
  }
}

/* --- Button ripple effect enhancement --- */
.btn .ripple {
  position: absolute;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.35);
  transform: scale(0);
  animation: rippleExpand 0.6s cubic-bezier(0.16, 1, 0.3, 1);
  pointer-events: none;
}
@keyframes rippleExpand {
  to { transform: scale(4); opacity: 0; }
}

/* --- Stagger children with refined timing --- */
.stagger-refined > *:nth-child(1) { transition-delay: 0s; }
.stagger-refined > *:nth-child(2) { transition-delay: 0.06s; }
.stagger-refined > *:nth-child(3) { transition-delay: 0.12s; }
.stagger-refined > *:nth-child(4) { transition-delay: 0.18s; }
.stagger-refined > *:nth-child(5) { transition-delay: 0.24s; }
.stagger-refined > *:nth-child(6) { transition-delay: 0.30s; }
.stagger-refined > *:nth-child(7) { transition-delay: 0.36s; }
.stagger-refined > *:nth-child(8) { transition-delay: 0.42s; }
.stagger-refined > *:nth-child(9) { transition-delay: 0.48s; }

/* --- Scroll progress indicator refinement --- */
.scroll-progress {
  background: linear-gradient(90deg, var(--color-primary), #8b5cf6, var(--color-accent));
  background-size: 200% 100%;
  animation: progressGradient 2s linear infinite;
}
@keyframes progressGradient {
  0% { background-position: 0% 0; }
  100% { background-position: 200% 0; }
}

/* --- Reduce motion preference respect --- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .aurora, .light-particles, .hero-canvas,
  .global-bg-canvas, .float-badge {
    display: none !important;
  }
}


/* ============================================================
   24. PROFESSIONAL PAGE TRANSITIONS
   Smooth entry / exit for every page-to-page navigation
   ============================================================ */

/* View transition API support — morphing cross-fade */
@supports (view-transition-name: root) {
  ::view-transition-old(root) {
    animation: pageFadeOut 0.28s cubic-bezier(0.4, 0, 0.6, 1) both;
  }
  ::view-transition-new(root) {
    animation: pageFadeIn 0.5s cubic-bezier(0.16, 1, 0.3, 1) both;
  }
}

@keyframes pageFadeOut {
  from { opacity: 1; transform: translateY(0); }
  to   { opacity: 0; transform: translateY(-8px); }
}

@keyframes pageFadeIn {
  from { opacity: 0; transform: translateY(10px); filter: blur(3px); }
  to   { opacity: 1; transform: translateY(0);    filter: blur(0); }
}

/* Fallback overlay for browsers without view-transition */
#pt-overlay {
  position: fixed;
  inset: 0;
  z-index: 99999;
  background: #ffffff;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.28s cubic-bezier(0.4, 0, 0.6, 1);
}

#pt-overlay.pt-fade-in {
  opacity: 1;
}

#pt-overlay.pt-fade-out {
  opacity: 0;
  transition: opacity 0.45s cubic-bezier(0.16, 1, 0.3, 1);
}


/* ============================================================
   25. SCROLL ENTRANCE UPGRADES — refined per element type
   ============================================================ */

/* Hero section elements already use blurFadeIn (defined above).
   These are the "second-tier" entrance classes for content sections. */

/* Fade + rise — gentle default for text blocks */
.anim-rise {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.65s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.65s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform;
}
.anim-rise.visible { opacity: 1; transform: translateY(0); }

/* Card entrance — scale from slightly below with blur */
.anim-card {
  opacity: 0;
  transform: translateY(32px) scale(0.97);
  filter: blur(3px);
  transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.7s cubic-bezier(0.16, 1, 0.3, 1),
              filter 0.5s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform;
}
.anim-card.visible { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); }

/* Reveal — clip wipe from left (good for stats / number callouts) */
.anim-reveal {
  opacity: 0;
  clip-path: inset(0 100% 0 0);
  transition: opacity 0.4s ease,
              clip-path 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}
.anim-reveal.visible { opacity: 1; clip-path: inset(0 0% 0 0); }

/* Stagger-delay helpers — finer grain for 9+ children */
.stagger-children > :nth-child(1)  { transition-delay: 0.04s; }
.stagger-children > :nth-child(2)  { transition-delay: 0.10s; }
.stagger-children > :nth-child(3)  { transition-delay: 0.16s; }
.stagger-children > :nth-child(4)  { transition-delay: 0.22s; }
.stagger-children > :nth-child(5)  { transition-delay: 0.28s; }
.stagger-children > :nth-child(6)  { transition-delay: 0.34s; }
.stagger-children > :nth-child(7)  { transition-delay: 0.40s; }
.stagger-children > :nth-child(8)  { transition-delay: 0.46s; }
.stagger-children > :nth-child(9)  { transition-delay: 0.52s; }
.stagger-children > :nth-child(10) { transition-delay: 0.58s; }


/* ============================================================
   26. SECTION-LEVEL SMOOTH ENTRANCE OVERRIDES
   Forces every .section and .container child to feel cohesive
   ============================================================ */

/* Ensure sections that fade in don't show a blank flash */
.section { isolation: isolate; }

/* Hover micro-interaction — universal card lift */
.hover-lift {
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 0.35s ease;
}
.hover-lift:hover {
  transform: translateY(-5px);
  box-shadow: 0 12px 32px rgba(15, 40, 50, 0.1);
}

/* Smooth focus ring for accessibility */
:focus-visible {
  outline: 2.5px solid #2563eb;
  outline-offset: 3px;
  border-radius: 4px;
  transition: outline-offset 0.15s ease;
}

/* ================================================================
   PLATINUM 2026 — ANIMATION REFINEMENTS
   Snappier, more precise, physics-driven.
   ================================================================ */

/* --- Upgraded pulse glow (uses new electric blue) --- */
@keyframes pulseGlow {
  0%, 100% { box-shadow: 0 0 0 0 rgba(37, 99, 235, 0.4); }
  50%      { box-shadow: 0 0 0 14px rgba(37, 99, 235, 0); }
}

/* --- Hero title reveal — word-by-word feel --- */
@keyframes titleReveal {
  0%   { opacity: 0; transform: translateY(30px) skewY(1deg); filter: blur(6px); }
  60%  { opacity: 1; filter: blur(0); }
  100% { opacity: 1; transform: translateY(0) skewY(0deg); }
}

/* --- Section enter — subtle lift with blur --- */
@keyframes sectionEnter {
  0%   { opacity: 0; transform: translateY(24px); filter: blur(4px); }
  100% { opacity: 1; transform: translateY(0); filter: blur(0); }
}

/* --- Card stagger pop --- */
@keyframes cardPop {
  0%   { opacity: 0; transform: translateY(20px) scale(0.97); }
  60%  { opacity: 1; transform: translateY(-3px) scale(1.005); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}

/* --- Stat number count-up feel --- */
@keyframes numberIn {
  0%   { opacity: 0; transform: translateY(16px); filter: blur(4px); }
  100% { opacity: 1; transform: translateY(0); filter: blur(0); }
}

/* --- Float badges — slower, more graceful --- */
@keyframes floatBadge2026 {
  0%   { transform: translateY(0) rotate(-0.5deg); }
  25%  { transform: translateY(-10px) rotate(0.4deg); }
  50%  { transform: translateY(-6px) rotate(-0.3deg); }
  75%  { transform: translateY(-12px) rotate(0.5deg); }
  100% { transform: translateY(0) rotate(-0.5deg); }
}

.float-badge {
  animation: floatBadge2026 8s ease-in-out infinite;
}
.float-badge--info  { animation-delay: -2.5s; }
.float-badge--ai    { animation-delay: -5s; }

/* --- Shimmer on dark text or headings --- */
@keyframes headlineShimmer {
  0%   { background-position: -300% center; }
  100% { background-position: 300% center; }
}

.text-gradient-shimmer {
  background: linear-gradient(
    120deg,
    #1d4ed8 0%,
    #2563eb 18%,
    #60a5fa 36%,
    #818cf8 50%,
    #60a5fa 64%,
    #2563eb 82%,
    #1d4ed8 100%
  );
  background-size: 300% 100%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: headlineShimmer 6s linear infinite;
}

/* --- Announcement dot — two-ring pulse --- */
@keyframes announceDot {
  0%, 100% { box-shadow: 0 0 0 3px rgba(34,197,94,0.25), 0 0 0 6px rgba(34,197,94,0.08); }
  50%       { box-shadow: 0 0 0 5px rgba(34,197,94,0.2),  0 0 0 10px rgba(34,197,94,0.04); }
}

/* --- Subtle background-position drift for mesh sections --- */
@keyframes meshDrift {
  0%, 100% { background-position: 0% 0%, 100% 100%, 50% 50%; }
  33%  { background-position: 10% 5%, 90% 90%, 45% 55%; }
  66%  { background-position: -5% 10%, 105% 85%, 55% 45%; }
}

/* --- Trust bar chip hover — lift pulse --- */
.trust-bar__chip {
  transition: transform 0.22s cubic-bezier(0.34, 1.56, 0.64, 1),
              border-color 0.2s ease,
              box-shadow 0.2s ease;
}

/* --- Card 3D tilt refinement --- */
@media (hover: hover) and (min-width: 768px) {
  .card-3d {
    transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1),
                box-shadow 0.35s ease;
    will-change: transform;
  }
  .card-3d:hover {
    box-shadow: 0 12px 40px rgba(37, 99, 235, 0.10),
                0 6px 16px rgba(15, 23, 42, 0.07);
  }
}

/* --- Module panel transition --- */
@keyframes modPanelIn {
  from { opacity: 0; transform: translateY(14px); filter: blur(3px); }
  to   { opacity: 1; transform: translateY(0); filter: blur(0); }
}

/* --- Stagger with tighter snappy feel (2026) --- */
.stagger-children > *:nth-child(1) { animation-delay: 0s; }
.stagger-children > *:nth-child(2) { animation-delay: 0.04s; }
.stagger-children > *:nth-child(3) { animation-delay: 0.08s; }
.stagger-children > *:nth-child(4) { animation-delay: 0.12s; }
.stagger-children > *:nth-child(5) { animation-delay: 0.16s; }
.stagger-children > *:nth-child(6) { animation-delay: 0.20s; }
.stagger-children > *:nth-child(7) { animation-delay: 0.24s; }
.stagger-children > *:nth-child(8) { animation-delay: 0.28s; }

/* --- Scroll progress bar gradient (2026 electric) --- */
.scroll-progress {
  background: linear-gradient(90deg, #2563eb, #4f46e5, #818cf8, #60a5fa);
  background-size: 200% 100%;
  animation: progressGradient 3s linear infinite;
}

/* --- Hover lift refinement --- */
.hover-lift:hover {
  transform: translateY(-6px);
  box-shadow: 0 16px 40px rgba(37, 99, 235, 0.10),
              0 4px 12px rgba(15, 23, 42, 0.07);
}

/* --- Deep stagger for large grids --- */
.stagger-deep > *:nth-child(1)  { animation-delay: 0s; }
.stagger-deep > *:nth-child(2)  { animation-delay: 0.04s; }
.stagger-deep > *:nth-child(3)  { animation-delay: 0.08s; }
.stagger-deep > *:nth-child(4)  { animation-delay: 0.12s; }
.stagger-deep > *:nth-child(5)  { animation-delay: 0.16s; }
.stagger-deep > *:nth-child(6)  { animation-delay: 0.20s; }
.stagger-deep > *:nth-child(7)  { animation-delay: 0.25s; }
.stagger-deep > *:nth-child(8)  { animation-delay: 0.30s; }
.stagger-deep > *:nth-child(9)  { animation-delay: 0.35s; }
.stagger-deep > *:nth-child(10) { animation-delay: 0.40s; }


/* ============================================================
   PREMIUM ANIMATION ENHANCEMENTS — Platinum Healthcare SaaS
   Appended 2026-03-27
   ============================================================ */


/* ===========================================
   1. NEW KEYFRAMES
   =========================================== */

/* Subtle up/down float for decorative elements */
@keyframes gentleFloat {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-12px); }
}

/* Background gradient position animation */
@keyframes gradientShift {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* Subtle scale pulse */
@keyframes scaleBreath {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.02); }
}

/* Animated border glow intensity */
@keyframes borderGlow {
  0%, 100% { box-shadow: 0 0 4px rgba(27, 111, 196, 0.3), 0 0 8px rgba(27, 111, 196, 0.1); }
  50%      { box-shadow: 0 0 12px rgba(27, 111, 196, 0.6), 0 0 24px rgba(27, 111, 196, 0.2); }
}

/* Typewriter width reveal */
@keyframes typewriter {
  0%   { width: 0; }
  100% { width: 100%; }
}

/* Counter number reveal */
@keyframes countUp {
  0%   { opacity: 0; transform: translateY(20px); }
  60%  { opacity: 1; transform: translateY(-2px); }
  100% { opacity: 1; transform: translateY(0); }
}

/* Expanding ring from center */
@keyframes ripple {
  0%   { transform: scale(0); opacity: 0.6; }
  100% { transform: scale(4); opacity: 0; }
}

/* Spring-back after mouse leave */
@keyframes magneticReturn {
  0%   { transform: translate(var(--mx, 0), var(--my, 0)); }
  50%  { transform: translate(calc(var(--mx, 0) * -0.15), calc(var(--my, 0) * -0.15)); }
  100% { transform: translate(0, 0); }
}

/* Light reflection sweep across glassmorphism surfaces */
@keyframes glassShimmer {
  0%   { background-position: -150% 0; }
  100% { background-position: 250% 0; }
}

/* Notification dot pulse */
@keyframes dotPulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50%      { transform: scale(1.6); opacity: 0.5; }
}

/* Staggered card entrance with subtle rotation */
@keyframes cardEntrance {
  0%   { opacity: 0; transform: translateY(30px) rotate(-1.5deg) scale(0.96); }
  60%  { opacity: 1; transform: translateY(-3px) rotate(0.3deg) scale(1.005); }
  100% { opacity: 1; transform: translateY(0) rotate(0) scale(1); }
}

/* Progress bar width fill */
@keyframes progressBar {
  0%   { width: 0%; }
  100% { width: 100%; }
}

/* Slide from below with spring physics */
@keyframes slideInUp {
  0%   { opacity: 0; transform: translateY(50px); }
  65%  { opacity: 1; transform: translateY(-5px); }
  85%  { transform: translateY(2px); }
  100% { opacity: 1; transform: translateY(0); }
}

/* Slide from above */
@keyframes slideInDown {
  0%   { opacity: 0; transform: translateY(-50px); }
  65%  { opacity: 1; transform: translateY(5px); }
  85%  { transform: translateY(-2px); }
  100% { opacity: 1; transform: translateY(0); }
}

/* Complex border-radius morphing */
@keyframes morphShape {
  0%   { border-radius: 40% 60% 60% 40% / 60% 40% 60% 40%; }
  25%  { border-radius: 60% 40% 40% 60% / 40% 60% 40% 60%; }
  50%  { border-radius: 50% 50% 60% 40% / 60% 50% 40% 50%; }
  75%  { border-radius: 40% 60% 50% 50% / 50% 40% 60% 50%; }
  100% { border-radius: 40% 60% 60% 40% / 60% 40% 60% 40%; }
}

/* Neon glow intensity pulse */
@keyframes neonPulse {
  0%, 100% {
    text-shadow: 0 0 4px rgba(27, 111, 196, 0.5),
                 0 0 12px rgba(27, 111, 196, 0.3),
                 0 0 24px rgba(27, 111, 196, 0.1);
  }
  50% {
    text-shadow: 0 0 8px rgba(27, 111, 196, 0.8),
                 0 0 20px rgba(27, 111, 196, 0.5),
                 0 0 40px rgba(27, 111, 196, 0.2);
  }
}

/* Particle rise for particle field */
@keyframes particleRise {
  0%   { opacity: 0; transform: translateY(0) scale(0); }
  20%  { opacity: 1; transform: translateY(-20px) scale(1); }
  100% { opacity: 0; transform: translateY(-120px) scale(0.4); }
}


/* ===========================================
   2. ENHANCED SCROLL-DRIVEN CLASSES
   =========================================== */

/* Reveal from below with spring overshoot */
.anim-reveal-up {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1),
              transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: opacity, transform;
}
.anim-reveal-up.visible {
  opacity: 1;
  transform: translateY(0);
}

/* Reveal from left */
.anim-reveal-left {
  opacity: 0;
  transform: translateX(-50px);
  transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1),
              transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: opacity, transform;
}
.anim-reveal-left.visible {
  opacity: 1;
  transform: translateX(0);
}

/* Reveal from right */
.anim-reveal-right {
  opacity: 0;
  transform: translateX(50px);
  transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1),
              transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: opacity, transform;
}
.anim-reveal-right.visible {
  opacity: 1;
  transform: translateX(0);
}

/* Fade in with zoom */
.anim-zoom-in {
  opacity: 0;
  transform: scale(0.88);
  transition: opacity 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94),
              transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  will-change: opacity, transform;
}
.anim-zoom-in.visible {
  opacity: 1;
  transform: scale(1);
}

/* Clip reveal (wipe from left) */
.anim-clip-reveal {
  clip-path: inset(0 100% 0 0);
  transition: clip-path 0.8s cubic-bezier(0.77, 0, 0.175, 1);
}
.anim-clip-reveal.visible {
  clip-path: inset(0 0 0 0);
}

/* Counter number reveal */
.anim-counter {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.5s cubic-bezier(0.22, 1, 0.36, 1),
              transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}
.anim-counter.visible {
  opacity: 1;
  transform: translateY(0);
}

/* Stagger children with progressive delays */
.stagger-children > *:nth-child(1)  { transition-delay: 0.00s; }
.stagger-children > *:nth-child(2)  { transition-delay: 0.06s; }
.stagger-children > *:nth-child(3)  { transition-delay: 0.12s; }
.stagger-children > *:nth-child(4)  { transition-delay: 0.18s; }
.stagger-children > *:nth-child(5)  { transition-delay: 0.24s; }
.stagger-children > *:nth-child(6)  { transition-delay: 0.30s; }
.stagger-children > *:nth-child(7)  { transition-delay: 0.36s; }
.stagger-children > *:nth-child(8)  { transition-delay: 0.42s; }
.stagger-children > *:nth-child(9)  { transition-delay: 0.48s; }
.stagger-children > *:nth-child(10) { transition-delay: 0.54s; }
.stagger-children > *:nth-child(11) { transition-delay: 0.60s; }
.stagger-children > *:nth-child(12) { transition-delay: 0.66s; }


/* ===========================================
   3. HOVER MICRO-INTERACTIONS
   =========================================== */

/* Magnetic hover — subtle attraction effect */
.hover-magnetic {
  transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}
.hover-magnetic:hover {
  transform: translate(var(--mx, 2px), var(--my, -2px));
}
.hover-magnetic:not(:hover) {
  animation: magneticReturn 0.5s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

/* Glow hover — adds glow on hover */
.hover-glow {
  transition: box-shadow 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}
.hover-glow:hover {
  box-shadow: 0 0 16px rgba(27, 111, 196, 0.35),
              0 0 32px rgba(27, 111, 196, 0.12);
}

/* Tilt hover — 3D tilt on hover */
.hover-tilt {
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
  transform-style: preserve-3d;
  perspective: 600px;
}
.hover-tilt:hover {
  transform: perspective(600px) rotateX(-3deg) rotateY(4deg) scale(1.02);
}

/* Underline grow — animated underline on hover */
.hover-underline {
  position: relative;
  text-decoration: none;
}
.hover-underline::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 0;
  height: 2px;
  background: var(--color-primary, #1b6fc4);
  transition: width 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}
.hover-underline:hover::after {
  width: 100%;
}

/* Arrow slide — arrow moves right on hover */
.hover-arrow-slide svg,
.hover-arrow-slide .arrow {
  transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}
.hover-arrow-slide:hover svg,
.hover-arrow-slide:hover .arrow {
  transform: translateX(5px);
}

/* Icon spin — icon rotates on card hover */
.hover-icon-spin .icon {
  transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}
.hover-icon-spin:hover .icon {
  transform: rotate(12deg) scale(1.08);
}

/* Card shimmer — light sweep on card hover */
.hover-shimmer {
  position: relative;
  overflow: hidden;
}
.hover-shimmer::before {
  content: '';
  position: absolute;
  top: 0;
  left: -75%;
  width: 50%;
  height: 100%;
  background: linear-gradient(
    100deg,
    transparent 0%,
    rgba(255, 255, 255, 0.08) 40%,
    rgba(255, 255, 255, 0.16) 50%,
    rgba(255, 255, 255, 0.08) 60%,
    transparent 100%
  );
  transform: skewX(-20deg);
  transition: left 0s 0.4s;
  pointer-events: none;
  z-index: 1;
}
.hover-shimmer:hover::before {
  left: 125%;
  transition: left 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

/* Scale bounce — bouncy scale on hover */
.hover-bounce {
  transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.hover-bounce:hover {
  transform: scale(1.06);
}

/* Border gradient — gradient border on hover */
.hover-border-gradient {
  position: relative;
  border: 2px solid transparent;
  background-clip: padding-box;
  transition: border-color 0.3s ease;
}
.hover-border-gradient::after {
  content: '';
  position: absolute;
  inset: -2px;
  border-radius: inherit;
  background: linear-gradient(135deg, #1b6fc4, #4f46e5, #818cf8);
  z-index: -1;
  opacity: 0;
  transition: opacity 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}
.hover-border-gradient:hover::after {
  opacity: 1;
}


/* ===========================================
   4. LOADING & TRANSITION STATES
   =========================================== */

/* Skeleton loading shimmer */
.skeleton {
  background: linear-gradient(
    90deg,
    rgba(15, 23, 42, 0.06) 0%,
    rgba(15, 23, 42, 0.12) 40%,
    rgba(15, 23, 42, 0.06) 80%
  );
  background-size: 200% 100%;
  animation: shimmer 1.5s ease-in-out infinite;
  border-radius: 6px;
}

/* Page transition out */
.page-transition-out {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 0.35s cubic-bezier(0.55, 0, 1, 0.45),
              transform 0.35s cubic-bezier(0.55, 0, 1, 0.45);
}
.page-transition-out.leaving {
  opacity: 0;
  transform: translateY(-16px);
}

/* Section fade-in on scroll */
.section-reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.8s cubic-bezier(0.22, 1, 0.36, 1),
              transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}
.section-reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

/* Image lazy load fade */
.lazy-fade {
  opacity: 0;
  filter: blur(8px);
  transition: opacity 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94),
              filter 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.lazy-fade.loaded {
  opacity: 1;
  filter: blur(0);
}


/* ===========================================
   5. DECORATIVE ELEMENT ANIMATIONS
   =========================================== */

/* Floating orbs */
.floating-orb {
  animation: gentleFloat 8s cubic-bezier(0.45, 0.05, 0.55, 0.95) infinite;
  will-change: transform;
}
.floating-orb:nth-child(2) {
  animation-delay: -2s;
  animation-duration: 9s;
}
.floating-orb:nth-child(3) {
  animation-delay: -4s;
  animation-duration: 10s;
}

/* Gradient mesh — animated mesh gradient background */
.gradient-mesh {
  background: linear-gradient(
    -45deg,
    #1b6fc4,
    #4f46e5,
    #818cf8,
    #06b6d4,
    #1b6fc4
  );
  background-size: 400% 400%;
  animation: gradientShift 6s ease infinite;
}

/* Particle field — CSS-only subtle particles */
.particle-field {
  position: relative;
  overflow: hidden;
}
.particle-field span {
  position: absolute;
  display: block;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: rgba(27, 111, 196, 0.3);
  animation: particleRise 6s linear infinite;
  opacity: 0;
}
.particle-field span:nth-child(2) { left: 20%; animation-delay: -1s; animation-duration: 7s; }
.particle-field span:nth-child(3) { left: 40%; animation-delay: -2.5s; animation-duration: 5s; }
.particle-field span:nth-child(4) { left: 60%; animation-delay: -0.5s; animation-duration: 8s; }
.particle-field span:nth-child(5) { left: 80%; animation-delay: -3s; animation-duration: 6.5s; }
.particle-field span:nth-child(6) { left: 10%; animation-delay: -4s; animation-duration: 7.5s; }
.particle-field span:nth-child(7) { left: 50%; animation-delay: -1.5s; animation-duration: 5.5s; }
.particle-field span:nth-child(8) { left: 70%; animation-delay: -3.5s; animation-duration: 9s; }
.particle-field span:nth-child(9) { left: 90%; animation-delay: -2s; animation-duration: 6s; }

/* Dot grid — subtle animated dot pattern */
.dot-grid-animated {
  background-image: radial-gradient(circle, rgba(27, 111, 196, 0.15) 1px, transparent 1px);
  background-size: 24px 24px;
  animation: scaleBreath 4s cubic-bezier(0.45, 0.05, 0.55, 0.95) infinite;
}


/* ===========================================
   6. REDUCED MOTION SUPPORT
   =========================================== */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  .anim-spring,
  .anim-blur,
  .anim-scale,
  .anim-reveal-up,
  .anim-reveal-left,
  .anim-reveal-right,
  .anim-zoom-in,
  .anim-clip-reveal {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    clip-path: none !important;
  }
}