/* ===================================
   Modern Visual Enhancements
   Open Props-inspired design tokens + modern CSS effects
   =================================== */

/* === Enhanced Design Tokens (Open Props inspired) === */
:root {
  /* Fluid Typography Scale */
  --font-size-fluid-0: clamp(0.75rem, 0.7rem + 0.25vw, 0.875rem);
  --font-size-fluid-1: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
  --font-size-fluid-2: clamp(1.25rem, 1.1rem + 0.75vw, 1.5rem);
  --font-size-fluid-3: clamp(1.5rem, 1.25rem + 1.25vw, 2rem);
  --font-size-fluid-4: clamp(2rem, 1.5rem + 2.5vw, 3rem);
  --font-size-fluid-5: clamp(2.5rem, 1.75rem + 3.75vw, 4rem);

  /* Enhanced Easing Curves (Open Props style) */
  --ease-1: cubic-bezier(0.25, 0, 0.5, 1);
  --ease-2: cubic-bezier(0.25, 0, 0.4, 1);
  --ease-3: cubic-bezier(0.25, 0, 0.3, 1);
  --ease-4: cubic-bezier(0.25, 0, 0.2, 1);
  --ease-5: cubic-bezier(0.25, 0, 0.1, 1);
  --ease-in-1: cubic-bezier(0.25, 0, 1, 1);
  --ease-in-2: cubic-bezier(0.5, 0, 1, 1);
  --ease-in-3: cubic-bezier(0.7, 0, 1, 1);
  --ease-out-1: cubic-bezier(0, 0, 0.75, 1);
  --ease-out-2: cubic-bezier(0, 0, 0.5, 1);
  --ease-out-3: cubic-bezier(0, 0, 0.3, 1);
  --ease-out-4: cubic-bezier(0, 0, 0.1, 1);
  --ease-out-5: cubic-bezier(0, 0, 0.05, 1);
  --ease-in-out-1: cubic-bezier(0.1, 0, 0.9, 1);
  --ease-in-out-2: cubic-bezier(0.3, 0, 0.7, 1);
  --ease-in-out-3: cubic-bezier(0.5, 0, 0.5, 1);
  --ease-elastic-1: cubic-bezier(0.5, 0.75, 0.75, 1.25);

  /* Enhanced Shadows (Layered for depth) */
  --shadow-elevation-low:
    0.3px 0.5px 0.7px hsl(var(--shadow-color, 220 3% 15%) / 0.34),
    0.4px 0.8px 1px -1.2px hsl(var(--shadow-color, 220 3% 15%) / 0.34),
    1px 2px 2.5px -2.5px hsl(var(--shadow-color, 220 3% 15%) / 0.34);
  --shadow-elevation-medium:
    0.3px 0.5px 0.7px hsl(var(--shadow-color, 220 3% 15%) / 0.36),
    0.8px 1.6px 2px -0.8px hsl(var(--shadow-color, 220 3% 15%) / 0.36),
    2.1px 4.1px 5.2px -1.7px hsl(var(--shadow-color, 220 3% 15%) / 0.36),
    5px 10px 12.6px -2.5px hsl(var(--shadow-color, 220 3% 15%) / 0.36);
  --shadow-elevation-high:
    0.3px 0.5px 0.7px hsl(var(--shadow-color, 220 3% 15%) / 0.34),
    1.5px 2.9px 3.7px -0.4px hsl(var(--shadow-color, 220 3% 15%) / 0.34),
    2.7px 5.4px 6.8px -0.7px hsl(var(--shadow-color, 220 3% 15%) / 0.34),
    4.5px 8.9px 11.2px -1.1px hsl(var(--shadow-color, 220 3% 15%) / 0.34),
    7.1px 14.3px 18px -1.4px hsl(var(--shadow-color, 220 3% 15%) / 0.34),
    11.2px 22.3px 28.1px -1.8px hsl(var(--shadow-color, 220 3% 15%) / 0.34),
    17px 34px 42.8px -2.1px hsl(var(--shadow-color, 220 3% 15%) / 0.34),
    25px 50px 62.9px -2.5px hsl(var(--shadow-color, 220 3% 15%) / 0.34);

  /* Gradient definitions */
  --gradient-1: linear-gradient(to bottom right, #15284c, #1e3560);
  --gradient-accent: linear-gradient(135deg, #c3bb00 0%, #9a9400 100%);
  --gradient-navy: linear-gradient(180deg, #15284c 0%, #0d1a33 100%);
  --gradient-radial: radial-gradient(circle at center, #1e3560 0%, #15284c 100%);
  --gradient-mesh:
    radial-gradient(at 40% 20%, hsla(47, 100%, 38%, 0.1) 0px, transparent 50%),
    radial-gradient(at 80% 0%, hsla(220, 55%, 18%, 0.2) 0px, transparent 50%),
    radial-gradient(at 0% 50%, hsla(47, 100%, 38%, 0.05) 0px, transparent 50%),
    radial-gradient(at 80% 50%, hsla(220, 55%, 18%, 0.1) 0px, transparent 50%),
    radial-gradient(at 0% 100%, hsla(47, 100%, 38%, 0.1) 0px, transparent 50%);

  /* Animation durations */
  --duration-fast: 150ms;
  --duration-normal: 300ms;
  --duration-slow: 500ms;
  --duration-slower: 700ms;
  --duration-slowest: 1000ms;

  /* Blur values for glassmorphism */
  --blur-sm: 4px;
  --blur-md: 8px;
  --blur-lg: 16px;
  --blur-xl: 24px;
}

/* === Enhanced Base Styles === */
html {
  scroll-behavior: smooth;
  scroll-padding-top: 100px;
}

body {
  background: var(--gradient-mesh), var(--color-white);
  background-attachment: fixed;
}

/* === Enhanced Typography === */
.hero__title {
  font-size: var(--font-size-fluid-5);
  letter-spacing: -0.02em;
  text-wrap: balance;
}

.page-header__title {
  font-size: var(--font-size-fluid-4);
  letter-spacing: -0.02em;
}

.section-header__title {
  font-size: var(--font-size-fluid-3);
  letter-spacing: -0.01em;
  text-wrap: balance;
}

/* === Glassmorphism Effects === */
.header {
  background: rgba(245, 245, 245, 0.85);
  backdrop-filter: blur(var(--blur-lg));
  -webkit-backdrop-filter: blur(var(--blur-lg));
  border-bottom: 1px solid rgba(21, 40, 76, 0.1);
  transition: all var(--duration-normal) var(--ease-3);
}

.header:hover {
  background: rgba(245, 245, 245, 0.95);
}

/* === Enhanced Cards === */
.card {
  background: rgba(255, 255, 255, 0.95);
  border: 1px solid rgba(21, 40, 76, 0.08);
  transition: all var(--duration-normal) var(--ease-out-3);
}

.card:hover {
  transform: translateY(-8px) scale(1.02);
  border-color: var(--color-accent);
}

/* Fix card text readability on navy/dark sections */
.section--navy .card__title,
.section--primary .card__title {
  color: var(--color-navy);
}

.section--navy .card__text,
.section--primary .card__text {
  color: #444444;
}

.card__icon {
  transition: all var(--duration-normal) var(--ease-elastic-1);
}

.card:hover .card__icon {
  transform: scale(1.1) rotate(-5deg);
  background: var(--gradient-accent);
}

/* === Enhanced Buttons === */
.btn {
  position: relative;
  overflow: hidden;
  transition: all var(--duration-normal) var(--ease-out-3);
}

.btn::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.2),
    transparent
  );
  transition: left var(--duration-slow) var(--ease-out-3);
}

.btn:hover::before {
  left: 100%;
}

.btn--primary:hover {
  transform: translateY(-2px);
}

.btn--accent:hover {
  transform: translateY(-2px);
}

.btn--secondary:hover {
  transform: translateY(-2px);
}

/* === Enhanced Hero Section - Dramatic Light Burst === */
.hero {
  background: #020508;
  position: relative;
  overflow: hidden;
}

/* Base layer - deep space gradient with dramatic light source */
.hero::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background:
    /* Intense bright core of light burst - white hot center */
    radial-gradient(ellipse 25% 25% at 88% 50%, rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0) 60%),
    /* Warm golden glow - expanded light source */
    radial-gradient(ellipse 50% 45% at 88% 50%, rgba(255, 220, 120, 0.6) 0%, transparent 55%),
    radial-gradient(ellipse 70% 55% at 85% 52%, rgba(255, 180, 60, 0.4) 0%, transparent 55%),
    radial-gradient(ellipse 90% 70% at 82% 55%, rgba(255, 140, 30, 0.25) 0%, transparent 55%),
    /* Curved horizon glow - earth-like blue arc */
    radial-gradient(ellipse 180% 50% at 75% 115%, rgba(30, 100, 180, 0.7) 0%, transparent 55%),
    /* Blue atmospheric scatter expanding from light */
    radial-gradient(ellipse 100% 80% at 80% 65%, rgba(40, 120, 200, 0.4) 0%, transparent 60%),
    /* Deep space base with slight blue tint */
    linear-gradient(135deg, #010306 0%, #061224 30%, #0c1e38 60%, #081830 100%);
  z-index: 1;
  animation: heroGlow 10s ease-in-out infinite alternate;
}

@keyframes heroGlow {
  0%, 100% {
    filter: brightness(1);
  }
  50% {
    filter: brightness(1.1);
  }
}

/* Light rays layer - dramatic streaks radiating from light source */
.hero::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background:
    /* Intense golden lens flare streaks - long dramatic rays */
    conic-gradient(from 190deg at 88% 50%,
      transparent 0deg,
      rgba(255, 240, 150, 0.35) 2deg,
      transparent 6deg,
      rgba(255, 220, 100, 0.25) 12deg,
      transparent 18deg,
      rgba(255, 200, 80, 0.2) 26deg,
      transparent 34deg,
      rgba(255, 180, 60, 0.18) 42deg,
      transparent 52deg,
      rgba(195, 187, 0, 0.15) 62deg,
      transparent 74deg,
      rgba(255, 200, 50, 0.12) 88deg,
      transparent 102deg,
      rgba(255, 220, 100, 0.08) 120deg,
      transparent 140deg,
      transparent 360deg
    ),
    /* Blue energy rays - ethereal glow spreading outward */
    conic-gradient(from 165deg at 85% 55%,
      transparent 0deg,
      rgba(100, 180, 255, 0.2) 5deg,
      transparent 15deg,
      rgba(80, 160, 255, 0.18) 28deg,
      transparent 42deg,
      rgba(50, 130, 220, 0.15) 58deg,
      transparent 75deg,
      rgba(40, 120, 200, 0.12) 95deg,
      transparent 115deg,
      rgba(60, 140, 240, 0.08) 135deg,
      transparent 155deg,
      transparent 360deg
    );
  z-index: 2;
  animation: lightRays 10s ease-in-out infinite alternate;
}

/* Animated glow pulse overlay */
.hero .container {
  position: relative;
  z-index: 10;
}

/* Hero content positioning */
.hero__content {
  margin-left: 0;
  position: relative;
}

/* === Hero Title Backdrop Rings === */
.hero__title-rings {
  position: absolute;
  top: 45%;
  left: 30%;
  transform: translate(-50%, -50%);
  width: 600px;
  height: 600px;
  pointer-events: none;
  z-index: 0;
  opacity: 0.25;
}

.hero__title-rings::before,
.hero__title-rings::after {
  content: '';
  position: absolute;
  border-radius: 50%;
  box-sizing: border-box;
}

/* Large outer ring */
.hero__title-rings::before {
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  border: 5px solid transparent;
  border-top-color: rgba(195, 187, 0, 1);
  border-right-color: rgba(195, 187, 0, 0.6);
  animation: titleRingSpin 45s linear infinite;
  filter: drop-shadow(0 0 10px rgba(195, 187, 0, 0.3));
}

/* Medium ring */
.hero__title-rings::after {
  width: 70%;
  height: 70%;
  top: 15%;
  left: 15%;
  border: 4px solid transparent;
  border-bottom-color: rgba(195, 187, 0, 0.9);
  border-left-color: rgba(195, 187, 0, 0.5);
  animation: titleRingSpin 32s linear infinite reverse;
}

/* Inner ring - using the title wrapper */
.hero__title {
  position: relative;
}

.hero__title::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 35%;
  transform: translate(-50%, -50%);
  width: 350px;
  height: 350px;
  border-radius: 50%;
  border: 3px solid transparent;
  border-top-color: rgba(195, 187, 0, 0.5);
  border-right-color: rgba(195, 187, 0, 0.25);
  animation: titleRingSpin 25s linear infinite;
  pointer-events: none;
  z-index: -1;
}

/* Innermost accent ring */
.hero__title::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 30%;
  transform: translate(-50%, -50%);
  width: 220px;
  height: 220px;
  border-radius: 50%;
  border: 2px solid transparent;
  border-bottom-color: rgba(195, 187, 0, 0.6);
  border-left-color: rgba(195, 187, 0, 0.3);
  animation: titleRingSpin 18s linear infinite reverse;
  pointer-events: none;
  z-index: -1;
}

@keyframes titleRingSpin {
  from { transform: translate(-50%, -50%) rotate(0deg); }
  to { transform: translate(-50%, -50%) rotate(360deg); }
}

@media (max-width: 992px) {
  .hero__content {
    margin-left: 0;
  }

  .hero__title-rings {
    width: 350px;
    height: 350px;
    left: 50%;
    opacity: 0.1;
  }

  .hero__title::before,
  .hero__title::after {
    display: none;
  }
}

@media (max-width: 576px) {
  .hero__title-rings {
    width: 250px;
    height: 250px;
  }
}

/* Diagonal Cut Design Element - Inspired by eProseed Logo */
.hero--diagonal {
  padding-top: var(--space-4xl);
}

.hero__diagonal-cut {
  position: absolute;
  top: 0;
  left: -10%;
  width: 45%;
  height: 100%;
  background: linear-gradient(135deg, #010204 0%, #030810 50%, #050d1a 100%);
  clip-path: polygon(0 0, 100% 0, 70% 100%, 0 100%);
  z-index: 3;
}

.hero__diagonal-cut::after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 4px;
  height: 100%;
  background: linear-gradient(180deg,
    var(--color-accent) 0%,
    rgba(255, 200, 80, 0.8) 20%,
    rgba(195, 187, 0, 0.4) 50%,
    rgba(195, 187, 0, 0.1) 80%,
    transparent 100%
  );
  transform: skewX(-20deg);
  box-shadow:
    0 0 15px rgba(255, 200, 80, 0.6),
    0 0 30px rgba(195, 187, 0, 0.4),
    0 0 60px rgba(195, 187, 0, 0.2);
}

/* Light rays animation */
@keyframes lightRays {
  0% {
    opacity: 0.8;
    transform: scale(1);
  }
  50% {
    opacity: 1;
    transform: scale(1.02);
  }
  100% {
    opacity: 0.85;
    transform: scale(1.01);
  }
}

@keyframes glowPulse {
  0%, 100% {
    transform: scale(1);
    opacity: 0.9;
  }
  50% {
    transform: scale(1.15);
    opacity: 1;
  }
}

/* === Spinning Wheel Animation === */
/* Inspired by Linkurious - Bold gold rings on navy background */

.hero__wheel {
  position: absolute;
  top: 50%;
  right: -12%;
  transform: translateY(-50%);
  width: 800px;
  height: 800px;
  z-index: 2;
  pointer-events: none;
}

.hero__wheel-ring {
  position: absolute;
  border-radius: 50%;
  box-sizing: border-box;
  will-change: transform;
}

/* Ring 1 - Large outer ring */
.hero__wheel-ring--1 {
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  border: 8px solid rgba(195, 187, 0, 0.25);
  animation: wheelSpin 90s linear infinite;
  filter: drop-shadow(0 0 20px rgba(195, 187, 0, 0.15));
}

.hero__wheel-ring--1::before {
  content: '';
  position: absolute;
  inset: -8px;
  border-radius: 50%;
  border: 8px solid transparent;
  border-top-color: rgba(195, 187, 0, 0.8);
  border-right-color: rgba(195, 187, 0, 0.5);
}

/* Ring 2 - Large offset ring (creates the overlap) */
.hero__wheel-ring--2 {
  width: 95%;
  height: 95%;
  top: 30%;
  left: -25%;
  border: 10px solid rgba(195, 187, 0, 0.2);
  animation: wheelSpin 70s linear infinite reverse;
  filter: drop-shadow(0 0 25px rgba(195, 187, 0, 0.1));
}

.hero__wheel-ring--2::before {
  content: '';
  position: absolute;
  inset: -10px;
  border-radius: 50%;
  border: 10px solid transparent;
  border-top-color: rgba(195, 187, 0, 0.75);
  border-left-color: rgba(195, 187, 0, 0.45);
}

/* Ring 3 - Medium intersecting ring */
.hero__wheel-ring--3 {
  width: 75%;
  height: 75%;
  top: -5%;
  left: 8%;
  border: 7px solid rgba(195, 187, 0, 0.18);
  animation: wheelSpin 55s linear infinite;
}

.hero__wheel-ring--3::before {
  content: '';
  position: absolute;
  inset: -7px;
  border-radius: 50%;
  border: 7px solid transparent;
  border-bottom-color: rgba(195, 187, 0, 0.7);
  border-right-color: rgba(195, 187, 0, 0.4);
}

/* Ring 4 - Inner accent ring */
.hero__wheel-ring--4 {
  width: 55%;
  height: 55%;
  top: 35%;
  left: 5%;
  border: 6px solid rgba(195, 187, 0, 0.15);
  animation: wheelSpin 40s linear infinite reverse;
}

.hero__wheel-ring--4::before {
  content: '';
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  border: 6px solid transparent;
  border-top-color: rgba(195, 187, 0, 0.65);
  border-left-color: rgba(195, 187, 0, 0.3);
}

/* Ring 5 - Small fast-spinning ring */
.hero__wheel-ring--5 {
  width: 40%;
  height: 40%;
  top: 15%;
  left: 25%;
  border: 5px solid rgba(195, 187, 0, 0.12);
  animation: wheelSpin 28s linear infinite;
}

.hero__wheel-ring--5::before {
  content: '';
  position: absolute;
  inset: -5px;
  border-radius: 50%;
  border: 5px solid transparent;
  border-bottom-color: rgba(195, 187, 0, 0.6);
  border-right-color: rgba(195, 187, 0, 0.25);
}

/* Arc 1 - Bold highlight arc */
.hero__wheel-arc {
  position: absolute;
  border-radius: 50%;
  box-sizing: border-box;
}

.hero__wheel-arc--1 {
  width: 85%;
  height: 85%;
  top: 5%;
  left: -5%;
  border: 12px solid transparent;
  border-top-color: rgba(195, 187, 0, 0.55);
  border-right-color: rgba(195, 187, 0, 0.25);
  animation: wheelSpin 65s linear infinite;
  filter: drop-shadow(0 0 15px rgba(195, 187, 0, 0.2));
}

/* Arc 2 - Secondary accent arc */
.hero__wheel-arc--2 {
  width: 65%;
  height: 65%;
  top: 25%;
  left: 15%;
  border: 8px solid transparent;
  border-bottom-color: rgba(195, 187, 0, 0.5);
  border-left-color: rgba(195, 187, 0, 0.2);
  animation: wheelSpin 50s linear infinite reverse;
}

/* Center glow - focal point */
.hero__wheel-center {
  position: absolute;
  width: 25%;
  height: 25%;
  top: 32%;
  left: 28%;
  border-radius: 50%;
  background: radial-gradient(circle at 40% 40%,
    rgba(195, 187, 0, 0.4) 0%,
    rgba(195, 187, 0, 0.2) 25%,
    rgba(195, 187, 0, 0.08) 50%,
    transparent 75%
  );
  animation: centerPulse 6s ease-in-out infinite;
  filter: blur(3px);
}

@keyframes wheelSpin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

@keyframes centerPulse {
  0%, 100% {
    transform: scale(1);
    opacity: 0.8;
  }
  50% {
    transform: scale(1.2);
    opacity: 1;
  }
}

/* Responsive adjustments for wheel */
@media (max-width: 1200px) {
  .hero__wheel {
    width: 550px;
    height: 550px;
    right: -15%;
  }
}

@media (max-width: 992px) {
  .hero__wheel {
    width: 450px;
    height: 450px;
    right: -20%;
    opacity: 0.7;
  }
}

@media (max-width: 768px) {
  .hero__wheel {
    width: 350px;
    height: 350px;
    right: -25%;
    top: 60%;
    opacity: 0.5;
  }
}

@media (max-width: 576px) {
  .hero__wheel {
    width: 280px;
    height: 280px;
    right: -30%;
    top: 65%;
    opacity: 0.4;
  }
}

/* Hero Tagline - "WE SIMPLIFY COMPLEXITY." style */
.hero__tagline {
  display: inline-block;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--color-accent);
  margin-bottom: var(--space-lg);
  position: relative;
  padding-left: 3rem;
}

.hero__tagline::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 2rem;
  height: 2px;
  background: var(--color-accent);
}

/* Enhanced Hero Title */
.hero__title {
  font-size: var(--font-size-fluid-5);
  font-weight: var(--font-weight-bold);
  line-height: 1.05;
  letter-spacing: -0.02em;
  text-shadow: 0 4px 30px rgba(0, 0, 0, 0.3);
}

/* === Enhanced Page Header - Matching Light Burst === */
.page-header {
  position: relative;
  overflow: hidden;
  background: #040a14;
}

/* Light burst effect for page headers */
.page-header::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background:
    /* Horizon glow - scaled for shorter header */
    radial-gradient(ellipse 150% 100% at 90% 120%, rgba(30, 80, 140, 0.35) 0%, transparent 50%),
    /* Light burst - positioned bottom right */
    radial-gradient(ellipse 100% 80% at 95% 100%, rgba(255, 220, 100, 0.2) 0%, transparent 40%),
    /* Blue energy glow */
    radial-gradient(ellipse 120% 100% at 85% 100%, rgba(30, 100, 180, 0.25) 0%, transparent 50%),
    /* Deep space base */
    radial-gradient(ellipse 150% 100% at 50% 100%, #0a1628 0%, #040a14 70%);
  z-index: 0;
}

/* Light rays for page header */
.page-header::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background:
    /* Golden lens flare streaks - angled from bottom right */
    conic-gradient(from 220deg at 95% 100%,
      transparent 0deg,
      rgba(255, 200, 50, 0.06) 10deg,
      transparent 25deg,
      rgba(195, 187, 0, 0.04) 40deg,
      transparent 60deg,
      transparent 360deg
    ),
    /* Blue energy rays */
    conic-gradient(from 200deg at 90% 100%,
      transparent 0deg,
      rgba(50, 130, 220, 0.08) 15deg,
      transparent 35deg,
      rgba(30, 100, 180, 0.05) 50deg,
      transparent 70deg,
      transparent 360deg
    );
  z-index: 1;
  animation: pageHeaderGlow 12s ease-in-out infinite alternate;
}

.page-header .container {
  position: relative;
  z-index: 10;
}

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

/* === Enhanced Navigation === */
.nav__link {
  position: relative;
  transition: all var(--duration-normal) var(--ease-out-3);
}

.nav__link::after {
  transition: width var(--duration-normal) var(--ease-elastic-1);
}

.nav__number {
  transition: all var(--duration-normal) var(--ease-out-3);
}

.nav__item:hover .nav__number {
  transform: translateY(-2px);
  color: var(--color-accent-dark);
}

/* === Enhanced Feature Items === */
.feature-item {
  transition: all var(--duration-normal) var(--ease-out-3);
}

.feature-item:hover {
  transform: translateX(8px);
}

.feature-item__icon {
  transition: all var(--duration-normal) var(--ease-elastic-1);
}

.feature-item:hover .feature-item__icon {
  transform: scale(1.1);
  background: var(--gradient-accent);
}

/* === Enhanced Value Items === */
.value-item {
  transition: all var(--duration-normal) var(--ease-out-3);
}

.value-item:hover {
  transform: translateY(-8px);
}

.value-item__icon {
  transition: all var(--duration-normal) var(--ease-elastic-1);
}

.value-item:hover .value-item__icon {
  transform: scale(1.1) rotate(5deg);
  background: rgba(195, 187, 0, 0.2);
}

/* === Enhanced Team Members === */
.team-member {
  transition: all var(--duration-normal) var(--ease-out-3);
}

.team-member:hover {
  transform: translateY(-8px);
}

.team-member__photo {
  transition: all var(--duration-normal) var(--ease-elastic-1);
  border: 4px solid transparent;
}

.team-member:hover .team-member__photo {
  transform: scale(1.05);
  border-color: var(--color-accent);
}

/* === Enhanced Office Cards === */
.office {
  transition: all var(--duration-normal) var(--ease-out-3);
  border: 2px solid transparent;
}

.office:hover {
  transform: translateY(-8px);
  border-color: var(--color-accent);
}

.office--hq {
  position: relative;
  overflow: hidden;
}

.office--hq::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--gradient-mesh);
  opacity: 0.3;
  pointer-events: none;
}

/* Clickable Office Cards */
.office--clickable {
  cursor: pointer;
  position: relative;
}

.office--clickable:focus {
  outline: 3px solid var(--color-accent);
  outline-offset: 2px;
}

.office__view-map {
  display: block;
  margin-top: var(--space-md);
  padding-top: var(--space-sm);
  border-top: 1px solid rgba(21, 40, 76, 0.1);
  font-size: var(--font-size-sm);
  color: var(--color-accent);
  font-weight: var(--font-weight-semibold);
  opacity: 0;
  transform: translateY(8px);
  transition: all var(--duration-normal) var(--ease-out-3);
}

.office--clickable:hover .office__view-map,
.office--clickable:focus .office__view-map {
  opacity: 1;
  transform: translateY(0);
}

/* Selected Office State */
.office.office--selected {
  border-color: var(--color-accent);
  transform: translateY(-4px);
}

.office--selected .office__view-map {
  opacity: 1;
  transform: translateY(0);
  color: var(--color-navy);
}

.office--selected::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: var(--gradient-accent);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}

/* Map Location Name Display */
.map-location-name {
  display: none;
  color: var(--color-accent) !important;
  font-weight: var(--font-weight-semibold);
  font-size: var(--font-size-lg);
  margin-top: var(--space-sm);
}

/* === Enhanced Icon List === */
.icon-list__item {
  transition: all var(--duration-normal) var(--ease-out-3);
}

.icon-list__item:hover {
  transform: translateX(8px);
}

.icon-list__icon {
  transition: all var(--duration-normal) var(--ease-elastic-1);
}

.icon-list__item:hover .icon-list__icon {
  transform: scale(1.2);
  color: var(--color-accent);
}

/* === Enhanced Two Column Layout === */
.two-col__image {
  transition: all var(--duration-slow) var(--ease-out-3);
}

.two-col:hover .two-col__image {
  transform: scale(1.02);
}

.two-col__image svg {
  transition: all var(--duration-slow) var(--ease-out-3);
}

.two-col:hover .two-col__image svg {
  filter: drop-shadow(0 20px 40px rgba(21, 40, 76, 0.15));
}

/* === Enhanced CTA Section === */
.cta {
  position: relative;
  overflow: hidden;
}

.cta::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: radial-gradient(circle, rgba(195, 187, 0, 0.1) 0%, transparent 50%);
  animation: ctaPulse 8s ease-in-out infinite;
}

@keyframes ctaPulse {
  0%, 100% {
    transform: translate(0, 0) scale(1);
    opacity: 0.5;
  }
  50% {
    transform: translate(10%, 10%) scale(1.2);
    opacity: 0.3;
  }
}

/* === Enhanced Footer === */
.footer {
  position: relative;
  overflow: hidden;
}

.footer::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--gradient-mesh);
  opacity: 0.1;
  pointer-events: none;
}

.footer__links a {
  transition: all var(--duration-normal) var(--ease-out-3);
}

.footer__links a:hover {
  transform: translateX(4px);
  color: var(--color-accent);
}

.footer__social a {
  transition: all var(--duration-normal) var(--ease-elastic-1);
}

.footer__social a:hover {
  transform: translateY(-4px) scale(1.1);
}

/* === Form Enhancements === */
.form__input,
.form__textarea {
  transition: all var(--duration-normal) var(--ease-out-3);
  border: 2px solid var(--color-light-gray);
}

.form__input:focus,
.form__textarea:focus {
  border-color: var(--color-accent);
  box-shadow: 0 0 0 4px rgba(195, 187, 0, 0.15);
  transform: translateY(-2px);
}

/* === Map Container Enhancement === */
.map-container {
  transition: all var(--duration-normal) var(--ease-out-3);
}

.map-container:hover {
  /* Hover effect removed for flat design */
}

/* === Section Dividers === */
.section {
  position: relative;
}

.section--navy::before,
.section--primary::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--color-accent), transparent);
}

/* === Accent Line Animation === */
.section-header__label {
  position: relative;
  display: inline-block;
}

.section-header__label::after {
  content: '';
  position: absolute;
  bottom: -4px;
  left: 0;
  width: 0;
  height: 2px;
  background: var(--color-accent);
  transition: width var(--duration-slow) var(--ease-out-4);
}

.section-header:hover .section-header__label::after,
.two-col__content:hover .section-header__label::after {
  width: 100%;
}

/* === Stats Number Animation (if used) === */
.stat__number {
  background: var(--gradient-1);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* === Scroll Progress Indicator === */
.scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  height: 3px;
  background: var(--gradient-accent);
  z-index: 9999;
  transform-origin: left;
  transition: transform 0.1s linear;
}

/* === Selection Styling === */
::selection {
  background: var(--color-accent);
  color: var(--color-navy);
}

/* === Focus Visible Enhancement === */
:focus-visible {
  outline: 3px solid var(--color-accent);
  outline-offset: 3px;
  box-shadow: 0 0 0 6px rgba(195, 187, 0, 0.25);
}

/* === Print Styles Override === */
@media print {
  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
  }
}

/* === 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;
  }

  html {
    scroll-behavior: auto;
  }

  .hero::before,
  .cta::before,
  .hero__wheel-ring,
  .hero__wheel-ring::before,
  .hero__wheel-arc,
  .hero__wheel-center {
    animation: none;
  }
}

/* === Partners Carousel === */
.partners-carousel-section {
  padding-top: var(--space-2xl);
  padding-bottom: var(--space-2xl);
  background: linear-gradient(180deg, #f8f9fa 0%, #ffffff 50%, #f8f9fa 100%);
  overflow: hidden;
}

.section-header--compact {
  margin-bottom: var(--space-xl);
}

.section-header--compact .section-header__title {
  font-size: var(--font-size-fluid-2);
}

.partners-carousel {
  position: relative;
  width: 100%;
  overflow: hidden;
  padding: var(--space-lg) 0;
}

/* Gradient fade edges for smooth visual */
.partners-carousel::before,
.partners-carousel::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  width: 150px;
  z-index: 10;
  pointer-events: none;
}

.partners-carousel::before {
  left: 0;
  background: linear-gradient(to right, #f8f9fa 0%, transparent 100%);
}

.partners-carousel::after {
  right: 0;
  background: linear-gradient(to left, #f8f9fa 0%, transparent 100%);
}

.partners-carousel__track {
  display: flex;
  gap: var(--space-2xl);
  width: max-content;
  animation: partnersScroll 30s linear infinite;
}

.partners-carousel:hover .partners-carousel__track {
  animation-play-state: paused;
}

.partners-carousel__item {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 160px;
  height: 80px;
  padding: var(--space-md);
  background: white;
  border-radius: var(--radius-lg);
  border: 1px solid rgba(21, 40, 76, 0.08);
  transition: all var(--duration-normal) var(--ease-out-3);
  cursor: pointer;
  text-decoration: none;
  position: relative;
}

/* External link indicator on hover */
.partners-carousel__item::after {
  content: '';
  position: absolute;
  top: 8px;
  right: 8px;
  width: 12px;
  height: 12px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23c3bb00' stroke-width='2'%3E%3Cpath d='M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6'/%3E%3Cpolyline points='15 3 21 3 21 9'/%3E%3Cline x1='10' y1='14' x2='21' y2='3'/%3E%3C/svg%3E");
  background-size: contain;
  opacity: 0;
  transform: translate(4px, -4px);
  transition: all var(--duration-normal) var(--ease-out-3);
}

.partners-carousel__item:hover {
  transform: translateY(-8px) scale(1.05);
  border-color: var(--color-accent);
  box-shadow:
    0 20px 40px rgba(21, 40, 76, 0.15),
    0 0 0 3px rgba(195, 187, 0, 0.1);
}

.partners-carousel__item:hover::after {
  opacity: 1;
  transform: translate(0, 0);
}

/* Focus state for keyboard navigation */
.partners-carousel__item:focus {
  outline: none;
  border-color: var(--color-accent);
  box-shadow:
    0 0 0 3px rgba(195, 187, 0, 0.3),
    0 10px 20px rgba(21, 40, 76, 0.1);
}

.partners-carousel__item:focus .partners-carousel__logo {
  filter: grayscale(0%);
  opacity: 1;
}

.partners-carousel__logo {
  max-width: 120px;
  max-height: 50px;
  width: auto;
  height: auto;
  object-fit: contain;
  filter: grayscale(100%);
  opacity: 0.6;
  transition: all var(--duration-normal) var(--ease-out-3);
}

.partners-carousel__item:hover .partners-carousel__logo {
  filter: grayscale(0%);
  opacity: 1;
  transform: scale(1.05);
}

@keyframes partnersScroll {
  0% {
    transform: translateX(0);
  }
  100% {
    /* Move by exactly half (one full set of logos) for seamless loop */
    transform: translateX(calc(-50% - var(--space-xl)));
  }
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .partners-carousel::before,
  .partners-carousel::after {
    width: 60px;
  }

  .partners-carousel__track {
    gap: var(--space-lg);
    animation-duration: 20s;
  }

  .partners-carousel__item {
    width: 120px;
    height: 60px;
    padding: var(--space-sm);
  }

  .partners-carousel__logo {
    max-width: 90px;
    max-height: 40px;
  }
}

/* Reduced motion - disable auto-scroll, show static */
@media (prefers-reduced-motion: reduce) {
  .partners-carousel__track {
    animation: none;
    flex-wrap: wrap;
    justify-content: center;
    width: 100%;
    gap: var(--space-lg);
  }

  .partners-carousel::before,
  .partners-carousel::after {
    display: none;
  }
}

/* === Success Stories Carousel === */
.success-stories-section {
  background: linear-gradient(180deg, #f5f6f8 0%, #eef0f3 100%);
  overflow: hidden;
}

.stories-carousel {
  position: relative;
  max-width: 900px;
  margin: 0 auto;
  padding: 0 60px;
}

.stories-carousel__viewport {
  overflow: hidden;
  border-radius: 16px;
}

.stories-carousel__track {
  display: flex;
  transition: transform 0.5s var(--ease-out-3);
}

.story-card {
  flex: 0 0 100%;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--space-2xl);
  align-items: center;
  background: #ffffff;
  border-radius: 16px;
  padding: var(--space-2xl) var(--space-3xl);
  min-height: 320px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
}

.story-card__content {
  flex: 1;
}

.story-card__location {
  display: inline-block;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-accent);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: var(--space-md);
}

.story-card__title {
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-bold);
  color: var(--color-navy);
  margin-bottom: var(--space-md);
  line-height: 1.3;
}

.story-card__description {
  font-size: var(--font-size-base);
  color: var(--color-gray);
  line-height: 1.7;
  margin-bottom: var(--space-lg);
}

.story-card__metrics {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm) var(--space-xl);
}

.story-card__metrics li {
  font-size: var(--font-size-sm);
  color: var(--color-navy);
  display: flex;
  align-items: center;
  gap: var(--space-xs);
}

.story-card__metrics li::before {
  content: '';
  width: 6px;
  height: 6px;
  background: var(--color-accent);
  border-radius: 50%;
  flex-shrink: 0;
}

.story-card__metrics strong {
  color: var(--color-accent);
  font-weight: var(--font-weight-bold);
  font-size: var(--font-size-lg);
}

.story-card__visual {
  display: flex;
  align-items: center;
  justify-content: center;
}

.story-card__icon {
  width: 120px;
  height: 120px;
  background: linear-gradient(135deg, var(--color-navy) 0%, #1e3a5f 100%);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 32px rgba(21, 40, 76, 0.2);
}

.story-card__icon svg {
  width: 56px;
  height: 56px;
  stroke: var(--color-accent);
}

.story-card__logo {
  max-width: 180px;
  max-height: 120px;
  width: auto;
  height: auto;
  object-fit: contain;
}

/* Navigation Arrows */
.stories-carousel__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: #ffffff;
  border: 2px solid rgba(21, 40, 76, 0.1);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all var(--duration-normal) var(--ease-out-3);
  z-index: 10;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.stories-carousel__nav:hover {
  background: var(--color-navy);
  border-color: var(--color-navy);
}

.stories-carousel__nav:hover svg {
  stroke: #ffffff;
}

.stories-carousel__nav svg {
  width: 20px;
  height: 20px;
  stroke: var(--color-navy);
  transition: stroke var(--duration-normal) var(--ease-out-3);
}

.stories-carousel__nav--prev {
  left: 0;
}

.stories-carousel__nav--next {
  right: 0;
}

/* Dots Navigation */
.stories-carousel__dots {
  display: flex;
  justify-content: center;
  gap: var(--space-sm);
  margin-top: var(--space-xl);
}

.stories-carousel__dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: rgba(21, 40, 76, 0.2);
  border: none;
  cursor: pointer;
  transition: all var(--duration-normal) var(--ease-out-3);
  padding: 0;
}

.stories-carousel__dot:hover {
  background: rgba(21, 40, 76, 0.4);
}

.stories-carousel__dot--active {
  background: var(--color-accent);
  transform: scale(1.2);
}

/* Responsive Styles */
@media (max-width: 992px) {
  .stories-carousel {
    padding: 0 50px;
  }

  .story-card {
    grid-template-columns: 1fr;
    text-align: center;
    padding: var(--space-xl) var(--space-lg);
  }

  .story-card__visual {
    order: -1;
    margin-bottom: var(--space-lg);
  }

  .story-card__icon {
    width: 100px;
    height: 100px;
  }

  .story-card__icon svg {
    width: 48px;
    height: 48px;
  }

  .story-card__logo {
    max-width: 140px;
    max-height: 90px;
  }

  .story-card__metrics {
    justify-content: center;
  }
}

@media (max-width: 576px) {
  .stories-carousel {
    padding: 0 16px;
  }

  .stories-carousel__nav {
    width: 40px;
    height: 40px;
  }

  .stories-carousel__nav--prev {
    left: -4px;
  }

  .stories-carousel__nav--next {
    right: -4px;
  }

  .story-card {
    padding: var(--space-lg);
    min-height: auto;
  }

  .story-card__title {
    font-size: var(--font-size-lg);
  }

  .story-card__metrics {
    flex-direction: column;
    align-items: center;
    gap: var(--space-sm);
  }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .stories-carousel__track {
    transition: none;
  }
}

/* === Achievements/Stats Section === */
.achievements-section {
  background: linear-gradient(180deg, #f5f6f8 0%, #eef0f3 100%);
  padding: var(--space-3xl) 0;
}

.achievements-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-lg);
  margin-top: var(--space-xl);
}

.achievement-card {
  background: #ffffff;
  border-radius: 12px;
  padding: var(--space-2xl) var(--space-xl);
  text-align: center;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
  transition: transform 0.3s var(--ease-2), box-shadow 0.3s var(--ease-2);
}

.achievement-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
}

.achievement-card__number {
  display: block;
  font-size: clamp(2.5rem, 5vw, 4rem);
  font-weight: var(--font-weight-bold);
  color: var(--color-accent);
  line-height: 1;
  margin-bottom: var(--space-md);
  font-style: italic;
}

.achievement-card__text {
  font-size: var(--font-size-base);
  color: var(--color-gray);
  line-height: 1.5;
  margin: 0;
}

/* Responsive: 2 columns on tablet, 1 on mobile */
@media (max-width: 992px) {
  .achievements-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

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

  .achievement-card {
    padding: var(--space-xl) var(--space-lg);
  }
}

/* Reduced motion for achievements */
@media (prefers-reduced-motion: reduce) {
  .achievement-card {
    transition: none;
  }

  .achievement-card:hover {
    transform: none;
  }
}

/* === Events & News Ticker Section === */
.news-ticker-section {
  padding: var(--space-3xl) 0;
  background: linear-gradient(180deg, #f8f9fa 0%, #ffffff 50%, #f0f1f5 100%);
  overflow: hidden;
}

.news-ticker-section .section-header {
  margin-bottom: var(--space-2xl);
}

/* Ticker Container */
.news-ticker {
  position: relative;
  width: 100%;
  overflow: hidden;
  padding: var(--space-md) 0;
}

/* Gradient fade edges */
.news-ticker::before,
.news-ticker::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  width: 100px;
  z-index: 10;
  pointer-events: none;
}

.news-ticker::before {
  left: 0;
  background: linear-gradient(to right, #f8f9fa 0%, transparent 100%);
}

.news-ticker::after {
  right: 0;
  background: linear-gradient(to left, #f8f9fa 0%, transparent 100%);
}

/* Row styling */
.news-ticker__row {
  display: flex;
  width: max-content;
  gap: var(--space-lg);
  padding: var(--space-sm) 0;
}

/* News row scrolls left (content flows right to left) */
.news-ticker__row--news {
  animation: tickerScrollLeft 60s linear infinite;
}

/* Events row scrolls right (content flows left to right) */
.news-ticker__row--events {
  animation: tickerScrollRight 55s linear infinite;
  margin-top: var(--space-lg);
}

/* Pause on hover for readability */
.news-ticker:hover .news-ticker__row {
  animation-play-state: paused;
}

/* Individual ticker cards */
.ticker-card {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: var(--space-md);
  padding: var(--space-md) var(--space-lg);
  background: #ffffff;
  border-radius: var(--radius-lg);
  border: 1px solid rgba(21, 40, 76, 0.08);
  text-decoration: none;
  color: inherit;
  min-width: 320px;
  max-width: 400px;
  transition: all var(--duration-normal) var(--ease-out-3);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

.ticker-card:hover {
  transform: translateY(-4px) scale(1.02);
  border-color: var(--color-accent);
  box-shadow: 0 12px 32px rgba(21, 40, 76, 0.12);
}

.ticker-card:focus {
  outline: none;
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px rgba(195, 187, 0, 0.2);
}

/* Icon container */
.ticker-card__icon {
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all var(--duration-normal) var(--ease-elastic-1);
}

.ticker-card__icon svg {
  width: 24px;
  height: 24px;
}

/* News icon - navy background */
.ticker-card--news .ticker-card__icon {
  background: linear-gradient(135deg, var(--color-navy) 0%, #1e3a5f 100%);
}

.ticker-card--news .ticker-card__icon svg {
  stroke: var(--color-accent);
  fill: none;
  stroke-width: 1.5;
}

/* Event icon - accent background */
.ticker-card--event .ticker-card__icon {
  background: linear-gradient(135deg, var(--color-accent) 0%, #9a9400 100%);
}

.ticker-card--event .ticker-card__icon svg {
  stroke: var(--color-navy);
  fill: none;
  stroke-width: 1.5;
}

.ticker-card:hover .ticker-card__icon {
  transform: scale(1.1) rotate(-5deg);
}

/* Content area */
.ticker-card__content {
  flex: 1;
  min-width: 0;
  overflow: hidden;
}

.ticker-card__date {
  display: inline-block;
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  color: var(--color-accent);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 4px;
}

.ticker-card__title {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-navy);
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin: 0;
}

/* External link indicator */
.ticker-card__arrow {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  opacity: 0;
  transform: translateX(-8px);
  transition: all var(--duration-normal) var(--ease-out-3);
}

.ticker-card__arrow svg {
  width: 100%;
  height: 100%;
  stroke: var(--color-accent);
  stroke-width: 2;
  fill: none;
}

.ticker-card:hover .ticker-card__arrow {
  opacity: 1;
  transform: translateX(0);
}

/* Row labels */
.news-ticker__label {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-gray);
  margin-bottom: var(--space-sm);
  padding-left: var(--space-lg);
}

.news-ticker__label::before {
  content: '';
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--color-accent);
}

/* Animations */
@keyframes tickerScrollLeft {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}

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

/* Responsive adjustments */
@media (max-width: 992px) {
  .ticker-card {
    min-width: 280px;
    max-width: 320px;
    padding: var(--space-sm) var(--space-md);
  }

  .ticker-card__icon {
    width: 40px;
    height: 40px;
  }

  .ticker-card__icon svg {
    width: 20px;
    height: 20px;
  }

  .news-ticker__row--news {
    animation-duration: 45s;
  }

  .news-ticker__row--events {
    animation-duration: 40s;
  }
}

@media (max-width: 768px) {
  .news-ticker::before,
  .news-ticker::after {
    width: 50px;
  }

  .ticker-card {
    min-width: 260px;
    max-width: 300px;
  }

  .news-ticker__row--news {
    animation-duration: 35s;
  }

  .news-ticker__row--events {
    animation-duration: 30s;
  }
}

@media (max-width: 576px) {
  .news-ticker-section {
    padding: var(--space-2xl) 0;
  }

  .ticker-card {
    min-width: 240px;
    max-width: 280px;
    gap: var(--space-sm);
  }

  .ticker-card__title {
    font-size: var(--font-size-xs);
  }

  .news-ticker__row--news {
    animation-duration: 30s;
  }

  .news-ticker__row--events {
    animation-duration: 25s;
  }
}

/* Reduced motion - show static grid */
@media (prefers-reduced-motion: reduce) {
  .news-ticker__row {
    animation: none !important;
    flex-wrap: wrap;
    justify-content: center;
    width: 100%;
    gap: var(--space-md);
  }

  .news-ticker::before,
  .news-ticker::after {
    display: none;
  }

  .ticker-card {
    min-width: auto;
    max-width: 100%;
    flex: 1 1 300px;
  }

  .ticker-card__arrow {
    opacity: 1;
    transform: translateX(0);
  }
}

/* === Dark Mode Preparation (future) === */
@media (prefers-color-scheme: dark) {
  /* Ready for dark mode implementation */
}