.animated-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 24px;
}

.logo-svg {
  width: 200px;
  height: 200px;
}

/* ===== U12 ANIMATIONS ===== */

@keyframes u12-orbit-spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

@keyframes u12-orbit-reverse {
  from { transform: rotate(360deg); }
  to { transform: rotate(0deg); }
}

@keyframes u12-orbit-slow {
  from { transform: rotate(0deg); }
  to { transform: rotate(-360deg); }
}

@keyframes u12-center-breathe {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.75; transform: scale(1.06); }
}

@keyframes u12-core-pulse {
  0%, 100% { opacity: 0.6; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.15); }
}

@keyframes u12-particle-twinkle {
  0%, 100% { opacity: 0.15; transform: scale(0.6); }
  25% { opacity: 0.9; transform: scale(1.5); }
  50% { opacity: 0.3; transform: scale(0.8); }
  75% { opacity: 1; transform: scale(1.2); }
}

@keyframes u12-particle-drift {
  0%, 100% { opacity: 0.2; transform: translate(0, 0) scale(0.7); }
  30% { opacity: 0.8; transform: translate(4px, -8px) scale(1.4); }
  60% { opacity: 0.15; transform: translate(-3px, -4px) scale(0.5); }
  80% { opacity: 0.9; transform: translate(2px, -10px) scale(1.6); }
}

@keyframes u12-orbiter-glow {
  0%, 100% { filter: drop-shadow(0 0 3px rgba(255,255,255,0.1)); }
  50% { filter: drop-shadow(0 0 12px rgba(255,255,255,0.5)); }
}

@keyframes u12-ray-pulse {
  0%, 100% { opacity: 0.03; }
  50% { opacity: 0.1; }
}

.u12-core-glow {
  transform-origin: 100px 100px;
  animation: u12-core-pulse 4s ease-in-out infinite;
}

.u12-orbit-ring-1 {
  transform-origin: 100px 100px;
  animation: u12-orbit-spin 18s linear infinite;
}

.u12-orbit-ring-2 {
  transform-origin: 100px 100px;
  animation: u12-orbit-reverse 13s linear infinite;
}

.u12-orbit-ring-3 {
  transform-origin: 100px 100px;
  animation: u12-orbit-slow 25s linear infinite;
}

.u12-center-text {
  transform-origin: 100px 100px;
  animation: u12-center-breathe 3s ease-in-out infinite;
}

.u12-orbiter-1 {
  transform-origin: 100px 100px;
  animation: u12-orbit-spin 7s linear infinite, u12-orbiter-glow 2.5s ease-in-out infinite;
}

.u12-orbiter-2 {
  transform-origin: 100px 100px;
  animation: u12-orbit-reverse 9s linear infinite, u12-orbiter-glow 3s ease-in-out infinite 0.8s;
}

.u12-orbiter-3 {
  transform-origin: 100px 100px;
  animation: u12-orbit-spin 11s linear infinite, u12-orbiter-glow 3.5s ease-in-out infinite 1.5s;
}

.u12-orbiter-4 {
  transform-origin: 100px 100px;
  animation: u12-orbit-reverse 14s linear infinite, u12-orbiter-glow 4s ease-in-out infinite 0.3s;
}

.u12-particle-1 { animation: u12-particle-twinkle 3s ease-in-out infinite; }
.u12-particle-2 { animation: u12-particle-drift 4.5s ease-in-out infinite 0.4s; }
.u12-particle-3 { animation: u12-particle-twinkle 3.8s ease-in-out infinite 0.8s; }
.u12-particle-4 { animation: u12-particle-drift 5s ease-in-out infinite 1.2s; }
.u12-particle-5 { animation: u12-particle-twinkle 2.8s ease-in-out infinite 1.8s; }
.u12-particle-6 { animation: u12-particle-drift 4s ease-in-out infinite 0.6s; }
.u12-particle-7 { animation: u12-particle-twinkle 3.2s ease-in-out infinite 2.2s; }
.u12-particle-8 { animation: u12-particle-drift 5.5s ease-in-out infinite 1s; }

.u12-ray-1 { animation: u12-ray-pulse 4s ease-in-out infinite; }
.u12-ray-2 { animation: u12-ray-pulse 4s ease-in-out infinite 1s; }
.u12-ray-3 { animation: u12-ray-pulse 4s ease-in-out infinite 2s; }
.u12-ray-4 { animation: u12-ray-pulse 4s ease-in-out infinite 3s; }

/* ===== U9 ANIMATIONS ===== */

@keyframes u9-screen-glow {
  0%, 100% { filter: drop-shadow(0 0 4px rgba(168,85,247,0.05)); }
  50% { filter: drop-shadow(0 0 16px rgba(168,85,247,0.15)); }
}

@keyframes u9-play-pulse {
  0%, 100% { opacity: 0.85; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.1); }
}

@keyframes u9-float-1 {
  0%, 100% { transform: translate(0, 0); }
  25% { transform: translate(4px, -8px); }
  50% { transform: translate(-2px, -12px); }
  75% { transform: translate(6px, -5px); }
}

@keyframes u9-float-2 {
  0%, 100% { transform: translate(0, 0); }
  30% { transform: translate(-5px, -6px); }
  60% { transform: translate(3px, -10px); }
}

@keyframes u9-float-3 {
  0%, 100% { transform: translate(0, 0); }
  35% { transform: translate(6px, 5px); }
  70% { transform: translate(-4px, 8px); }
}

@keyframes u9-float-4 {
  0%, 100% { transform: translate(0, 0); }
  40% { transform: translate(-6px, -4px); }
  80% { transform: translate(3px, 6px); }
}

@keyframes u9-spark-pop {
  0%, 100% { opacity: 0.1; transform: scale(0.5); }
  20% { opacity: 1; transform: scale(1.6); }
  40% { opacity: 0.3; transform: scale(0.8); }
  70% { opacity: 0.8; transform: scale(1.2); }
}

@keyframes u9-conn-fade {
  0%, 100% { opacity: 0.3; }
  50% { opacity: 1; }
}

.u9-gamepad {
  animation: u9-screen-glow 4s ease-in-out infinite;
}

.u9-btn-pulse {
  animation: u9-play-pulse 2.5s ease-in-out infinite;
}

.u9-block-1 { animation: u9-float-1 5s ease-in-out infinite; }
.u9-block-2 { animation: u9-float-2 6s ease-in-out infinite 0.5s; }
.u9-block-3 { animation: u9-float-3 5.5s ease-in-out infinite 1s; }
.u9-block-4 { animation: u9-float-4 7s ease-in-out infinite 0.3s; }

.u9-spark-1 { animation: u9-spark-pop 2.8s ease-in-out infinite; }
.u9-spark-2 { animation: u9-spark-pop 3.2s ease-in-out infinite 0.5s; }
.u9-spark-3 { animation: u9-spark-pop 3.6s ease-in-out infinite 1s; }
.u9-spark-4 { animation: u9-spark-pop 2.5s ease-in-out infinite 1.5s; }
.u9-spark-5 { animation: u9-spark-pop 3s ease-in-out infinite 0.8s; }
.u9-spark-6 { animation: u9-spark-pop 3.4s ease-in-out infinite 1.2s; }

.u9-conn-1 { animation: u9-conn-fade 5s ease-in-out infinite; }
.u9-conn-2 { animation: u9-conn-fade 6s ease-in-out infinite 0.5s; }
.u9-conn-3 { animation: u9-conn-fade 5.5s ease-in-out infinite 1s; }
.u9-conn-4 { animation: u9-conn-fade 7s ease-in-out infinite 0.3s; }

/* ===== U16 ANIMATIONS ===== */

@keyframes u16-terminal-glow {
  0%, 100% { filter: drop-shadow(0 0 5px rgba(255,255,255,0.03)); }
  50% { filter: drop-shadow(0 0 18px rgba(255,255,255,0.1)); }
}

@keyframes u16-cursor-blink {
  0%, 49% { opacity: 0.9; }
  50%, 100% { opacity: 0; }
}

@keyframes u16-typing {
  0%, 5% { opacity: 0; transform: translateX(-8px); }
  10%, 85% { opacity: 1; transform: translateX(0); }
  95%, 100% { opacity: 0; transform: translateX(0); }
}

@keyframes u16-node-pulse {
  0%, 100% { opacity: 0.5; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.3); }
}

@keyframes u16-flow-dash {
  0% { stroke-dashoffset: 0; }
  100% { stroke-dashoffset: -12; }
}

@keyframes u16-dot-breathe {
  0%, 100% { opacity: 0.14; }
  50% { opacity: 0.45; }
}

@keyframes u16-scan {
  0% { transform: translateY(0); opacity: 0; }
  10% { opacity: 0.08; }
  90% { opacity: 0.08; }
  100% { transform: translateY(95px); opacity: 0; }
}

.u16-terminal {
  animation: u16-terminal-glow 5s ease-in-out infinite;
}

.u16-cursor {
  animation: u16-cursor-blink 1s step-end infinite;
}

.u16-scan-line {
  animation: u16-scan 4s linear infinite;
}

.u16-line-1 { animation: u16-typing 10s ease-in-out infinite; }
.u16-line-2 { animation: u16-typing 10s ease-in-out infinite 1.2s; }
.u16-line-3 { animation: u16-typing 10s ease-in-out infinite 2.4s; }
.u16-line-4 { animation: u16-typing 10s ease-in-out infinite 3.6s; }
.u16-line-5 { animation: u16-typing 10s ease-in-out infinite 4.8s; }

.u16-node-1 {
  transform-origin: 55px 160px;
  animation: u16-node-pulse 3s ease-in-out infinite;
}

.u16-node-2 {
  transform-origin: 145px 160px;
  animation: u16-node-pulse 3s ease-in-out infinite 1s;
}

.u16-node-3 {
  transform-origin: 85px 175px;
  animation: u16-node-pulse 3s ease-in-out infinite 0.5s;
}

.u16-node-4 {
  transform-origin: 115px 175px;
  animation: u16-node-pulse 3s ease-in-out infinite 1.5s;
}

.u16-node-5 {
  transform-origin: 100px 190px;
  animation: u16-node-pulse 3s ease-in-out infinite 2s;
}

.u16-data-flow-1 { animation: u16-flow-dash 1.5s linear infinite; }
.u16-data-flow-2 { animation: u16-flow-dash 2s linear infinite 0.5s; }
.u16-data-flow-3 { animation: u16-flow-dash 2s linear infinite 1s; }

.u16-dot-1 { animation: u16-dot-breathe 2s ease-in-out infinite; }
.u16-dot-2 { animation: u16-dot-breathe 2s ease-in-out infinite 0.3s; }
.u16-dot-3 { animation: u16-dot-breathe 2s ease-in-out infinite 0.6s; }

/* ===== SHARED RESPONSIVE ===== */

.page-header .animated-logo {
  margin-bottom: 16px;
  margin-top: 0;
}

.page-header .logo-svg {
  width: 150px;
  height: 150px;
}

@media (max-width: 768px) {
  .logo-svg {
    width: 160px;
    height: 160px;
  }

  .page-header .logo-svg {
    width: 120px;
    height: 120px;
  }
}

@media (max-width: 480px) {
  .logo-svg {
    width: 130px;
    height: 130px;
  }

  .page-header .logo-svg {
    width: 100px;
    height: 100px;
  }
}

.diff-card {
  text-align: center;
}

.diff-icon {
  width: 72px;
  height: 72px;
  margin: 0 auto 16px;
  color: var(--text-secondary);
}

.diff-icon svg {
  width: 100%;
  height: 100%;
}

@keyframes diffLineGrow1 {
  0%, 10% { width: 0; }
  40%, 100% { width: 28px; }
}
@keyframes diffLineGrow2 {
  0%, 30% { width: 0; }
  60%, 100% { width: 20px; }
}
@keyframes diffLineGrow3 {
  0%, 50% { width: 0; }
  80%, 100% { width: 24px; }
}
@keyframes diffCursorMove {
  0%, 10% { transform: translateX(0) translateY(0); opacity: 1; }
  35% { transform: translateX(26px) translateY(0); opacity: 1; }
  40% { transform: translateX(0) translateY(7px); opacity: 0.5; }
  65% { transform: translateX(18px) translateY(7px); opacity: 1; }
  70% { transform: translateX(0) translateY(14px); opacity: 0.5; }
  95% { transform: translateX(22px) translateY(14px); opacity: 1; }
  100% { transform: translateX(0) translateY(0); opacity: 0; }
}
.diff-line-1 { animation: diffLineGrow1 3s ease-in-out infinite; }
.diff-line-2 { animation: diffLineGrow2 3s ease-in-out infinite; }
.diff-line-3 { animation: diffLineGrow3 3s ease-in-out infinite; }
.diff-cursor { animation: diffCursorMove 3s ease-in-out infinite; }

@keyframes diffBrainPulse {
  0%, 100% { r: 10; opacity: 0.6; }
  50% { r: 11; opacity: 1; }
}
@keyframes diffSparkFlash {
  0%, 40%, 100% { opacity: 0; transform: scale(0.8); }
  50%, 70% { opacity: 1; transform: scale(1); }
}
.diff-brain-ring { animation: diffBrainPulse 2.5s ease-in-out infinite; }
.diff-brain-dot-1 { animation: diffSparkFlash 2s ease-in-out infinite; }
.diff-brain-dot-2 { animation: diffSparkFlash 2s ease-in-out 0.4s infinite; }
.diff-spark-1 { animation: diffSparkFlash 2.5s ease-in-out infinite; }
.diff-spark-2 { animation: diffSparkFlash 2.5s ease-in-out 0.8s infinite; }
.diff-spark-3 { animation: diffSparkFlash 2.5s ease-in-out 1.6s infinite; }

@keyframes diffStarReveal {
  0%, 60% { opacity: 0; transform: scale(0.5) rotate(-30deg); }
  75% { opacity: 1; transform: scale(1.2) rotate(10deg); }
  100% { opacity: 1; transform: scale(1) rotate(0deg); }
}
@keyframes diffPersonSpin {
  from { transform-origin: 32px 26px; transform: rotate(0deg); }
  to { transform-origin: 32px 26px; transform: rotate(360deg); }
}
.diff-trophy-star { animation: diffStarReveal 3s ease-in-out infinite; }
.diff-person-ring { animation: diffPersonSpin 8s linear infinite; }

@keyframes diffTrackPulse1 {
  0%, 100% { opacity: 0.7; }
  50% { opacity: 1; stroke-width: 2.5; }
}
@keyframes diffTrackPulse2 {
  0%, 100% { opacity: 0.7; }
  50% { opacity: 1; stroke-width: 2.5; }
}
@keyframes diffTrackBob1 {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-2px); }
}
@keyframes diffTrackBob2 {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-3px); }
}
.diff-track-u12 { animation: diffTrackPulse1 3s ease-in-out infinite; }
.diff-track-u16 { animation: diffTrackPulse2 3s ease-in-out 1.5s infinite; }
.diff-track-head-1 { animation: diffTrackBob1 2s ease-in-out infinite; }
.diff-track-head-2 { animation: diffTrackBob2 2s ease-in-out 1s infinite; }

@media (prefers-reduced-motion: reduce) {
  .diff-line, .diff-cursor, .diff-brain-ring, .diff-brain-dot-1, .diff-brain-dot-2,
  .diff-spark-1, .diff-spark-2, .diff-spark-3, .diff-trophy-star, .diff-person-ring,
  .diff-track-u12, .diff-track-u16, .diff-track-head-1, .diff-track-head-2 {
    animation: none !important;
  }
  .diff-line-1 { width: 28px; }
  .diff-line-2 { width: 20px; }
  .diff-line-3 { width: 24px; }
  .diff-trophy-star { opacity: 1; }
}

/* ===== ROBOT MASCOT ===== */

.robot-mascot {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.final-cta .robot-mascot {
  margin-bottom: 24px;
}

.final-cta .robot-svg {
  width: 140px;
}

.robot-svg {
  width: 220px;
  height: auto;
  filter: drop-shadow(0 0 20px rgba(255, 255, 255, 0.12));
}

.robot-body-group {
  animation: robotBob 3s ease-in-out infinite;
  transform-origin: 100px 140px;
}

@keyframes robotBob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}

.robot-antenna-bulb {
  animation: robotAntennaPulse 2s ease-in-out infinite;
}

.robot-antenna-ring {
  animation: robotAntennaRing 2s ease-in-out infinite;
  transform-origin: center;
}

@keyframes robotAntennaPulse {
  0%, 100% { opacity: 0.8; filter: drop-shadow(0 0 4px rgba(255,255,255,0.4)); }
  50% { opacity: 1; filter: drop-shadow(0 0 12px rgba(255,255,255,0.7)); }
}

@keyframes robotAntennaRing {
  0%, 100% { opacity: 0.2; transform: scale(1); }
  50% { opacity: 0.5; transform: scale(1.4); }
}

.robot-eyelid-left,
.robot-eyelid-right {
  animation: robotBlink 4s ease-in-out infinite;
}

@keyframes robotBlink {
  0%, 90%, 100% { opacity: 0; }
  94%, 96% { opacity: 1; }
}

.robot-mouth {
  animation: robotSmile 4s ease-in-out infinite;
  transform-origin: 100px 96px;
}

@keyframes robotSmile {
  0%, 100% { transform: scaleY(1); }
  50% { transform: scaleY(1.15); }
}

.robot-chest-glow {
  animation: robotChestGlow 2.5s ease-in-out infinite;
  transform-origin: center;
}

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

.robot-chest-pulse {
  animation: robotChestPulse 2.5s ease-in-out infinite;
  transform-origin: center;
}

@keyframes robotChestPulse {
  0% { opacity: 0.4; transform: scale(0.7); }
  100% { opacity: 0; transform: scale(1.4); }
}

.robot-chest-light {
  animation: robotChestLightPulse 2.5s ease-in-out infinite;
}

@keyframes robotChestLightPulse {
  0%, 100% { filter: drop-shadow(0 0 2px rgba(255,255,255,0.4)); }
  50% { filter: drop-shadow(0 0 12px rgba(255,255,255,0.8)); }
}

.robot-indicator-1 { animation: robotIndicatorPulse 3s ease-in-out infinite; }
.robot-indicator-2 { animation: robotIndicatorPulse 3s ease-in-out infinite 1s; }
.robot-indicator-3 { animation: robotIndicatorPulse 3s ease-in-out infinite 2s; }

@keyframes robotIndicatorPulse {
  0%, 100% { fill: rgba(255,255,255,0.06); }
  50% { fill: rgba(255,255,255,0.25); }
}

.robot-arm-right {
  transform-origin: 150px 125px;
  animation: robotArmIdle 3s ease-in-out infinite;
}

@keyframes robotArmIdle {
  0%, 100% { transform: rotate(0deg); }
  50% { transform: rotate(-2deg); }
}

.robot-arm-left {
  transform-origin: 50px 125px;
  animation: robotArmIdleLeft 3s ease-in-out infinite 0.5s;
}

@keyframes robotArmIdleLeft {
  0%, 100% { transform: rotate(0deg); }
  50% { transform: rotate(2deg); }
}

.robot-mascot.waving .robot-arm-right {
  animation: robotWave 0.6s ease-in-out 3;
}

@keyframes robotWave {
  0%, 100% { transform: rotate(0deg); }
  25% { transform: rotate(-25deg); }
  75% { transform: rotate(-15deg); }
}

.robot-mascot.tracking .robot-pupil-left,
.robot-mascot.tracking .robot-pupil-right {
  transition: transform 0.15s ease-out;
}

@media (max-width: 900px) {
  .robot-svg {
    width: 160px;
  }
}

@media (max-width: 480px) {
  .robot-svg {
    width: 130px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .robot-body-group,
  .robot-antenna-bulb,
  .robot-antenna-ring,
  .robot-eyelid-left,
  .robot-eyelid-right,
  .robot-mouth,
  .robot-chest-glow,
  .robot-chest-pulse,
  .robot-chest-light,
  .robot-arm-right,
  .robot-arm-left,
  .robot-indicator-1,
  .robot-indicator-2,
  .robot-indicator-3 {
    animation: none !important;
  }
}