@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap');

  * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
  }

  body {
      overflow-x: hidden;
  }

  .banner {
      width: 100%;
      height: 100vh;
      background: linear-gradient(135deg, #69bcdf 0%, #e73535 25%, #f093fb 50%, #f5576c 75%, #83f285 100%);

      background-size: 400% 400%;
      animation: gradientShift 8s ease infinite;
      position: relative;
      overflow: hidden;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 60px;
      font-family: 'Inter', sans-serif;
  }

  @keyframes gradientShift {
      0% {
          background-position: 0% 50%;
      }

      50% {
          background-position: 100% 50%;
      }

      100% {
          background-position: 0% 50%;
      }
  }

  /* Animated particles */
  .particles {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      overflow: hidden;
      z-index: 1;
  }

  .particle {
      position: absolute;
      width: 4px;
      height: 4px;
      background: rgba(255, 255, 255, 0.6);
      border-radius: 50%;
      animation: particleFloat 15s infinite linear;
  }

  @keyframes particleFloat {
      0% {
          transform: translateY(100vh) rotate(0deg);
          opacity: 0;
      }

      10% {
          opacity: 1;
      }

      90% {
          opacity: 1;
      }

      100% {
          transform: translateY(-10vh) rotate(360deg);
          opacity: 0;
      }
  }

  /* Floating geometric shapes */
  .geometric-shapes {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      z-index: 2;
  }

  .shape {
      position: absolute;
      background: rgba(255, 255, 255, 0.1);
      backdrop-filter: blur(10px);
      border: 1px solid rgba(255, 255, 255, 0.2);
      animation: shapeFloat 12s ease-in-out infinite;
  }

  .shape.circle {
      border-radius: 50%;
  }

  .shape.triangle {
      background: transparent;
      width: 0;
      height: 0;
      border-left: 20px solid transparent;
      border-right: 20px solid transparent;
      border-bottom: 35px solid rgba(255, 255, 255, 0.1);
  }

  .shape.square {
      border-radius: 8px;
  }

  @keyframes shapeFloat {

      0%,
      100% {
          transform: translateY(0px) rotate(0deg) scale(1);
          opacity: 0.3;
      }

      33% {
          transform: translateY(-30px) rotate(120deg) scale(1.1);
          opacity: 0.6;
      }

      66% {
          transform: translateY(-15px) rotate(240deg) scale(0.9);
          opacity: 0.4;
      }
  }

  /* Enhanced wave effect */
  .wave-overlay {
      position: absolute;
      bottom: 0;
      left: 0;
      width: 100%;
      height: 200px;
      background: linear-gradient(180deg, transparent 0%, rgba(255, 255, 255, 0.1) 100%);
      z-index: 3;
  }

  .wave-overlay::before {
      content: '';
      position: absolute;
      bottom: 0;
      left: 0;
      width: 200%;
      height: 100px;
      background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 120'%3E%3Cpath d='M0,60 Q300,0 600,60 T1200,60 V120 H0 Z' fill='rgba(255,255,255,0.1)'/%3E%3C/svg%3E") repeat-x;
      animation: waveMove 8s ease-in-out infinite;
  }

  @keyframes waveMove {

      0%,
      100% {
          transform: translateX(0px);
      }

      50% {
          transform: translateX(-50px);
      }
  }

  .content-left {
      flex: 1;
      z-index: 10;
      max-width: 600px;
      animation: slideInLeft 1s ease-out;
  }

  @keyframes slideInLeft {
      0% {
          transform: translateX(-100px);
          opacity: 0;
      }

      100% {
          transform: translateX(0);
          opacity: 1;
      }
  }

  .badge {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      background: rgba(255, 255, 255, 0.15);
      backdrop-filter: blur(20px);
      border: 1px solid rgba(255, 255, 255, 0.3);
      padding: 10px 20px;
      border-radius: 25px;
      margin-bottom: 30px;
      font-size: 1rem;
      color: white;
      font-weight: 600;
      box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
      animation: badgePulse 3s ease-in-out infinite;
  }

  @keyframes badgePulse {

      0%,
      100% {
          transform: scale(1);
      }

      50% {
          transform: scale(1.05);
      }
  }

  .badge::before {
      content: '⭐';
      font-size: 16px;
      animation: starSpin 4s linear infinite;
  }

  @keyframes starSpin {
      0% {
          transform: rotate(0deg);
      }

      100% {
          transform: rotate(360deg);
      }
  }

  .main-title {
      font-size: 5.5rem;
      font-weight: 900;
      color: white;
      margin-bottom: 20px;
      line-height: 1;
      letter-spacing: -0.02em;
      text-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
      animation: titleGlow 4s ease-in-out infinite;
  }

  @keyframes titleGlow {

      0%,
      100% {
          text-shadow: 0 10px 30px rgba(0, 0, 0, 0.3),
              0 0 20px rgba(255, 255, 255, 0.5);
      }

      50% {
          text-shadow: 0 10px 30px rgba(0, 0, 0, 0.3),
              0 0 40px rgba(255, 255, 255, 0.8),
              0 0 60px rgba(255, 255, 255, 0.4);
      }
  }

  .subtitle {
      font-size: 1.5rem;
      color: rgba(255, 255, 255, 0.9);
      margin-bottom: 40px;
      font-weight: 400;
      line-height: 1.6;
      text-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
      animation: fadeInUp 1s ease-out 0.3s both;
  }

  @keyframes fadeInUp {
      0% {
          transform: translateY(30px);
          opacity: 0;
      }

      100% {
          transform: translateY(0);
          opacity: 1;
      }
  }

  .cta-button {
      background: linear-gradient(45deg, #ff6b6b, #feca57, #48dbfb, #ff9ff3);
      background-size: 300% 300%;
      color: white;
      padding: 20px 40px;
      border-radius: 50px;
      font-size: 1.2rem;
      font-weight: 700;
      border: none;
      cursor: pointer;
      box-shadow: 0 15px 35px rgba(0, 0, 0, 0.2);
      transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
      position: relative;
      overflow: hidden;
      animation: buttonPulse 3s ease-in-out infinite, gradientMove 4s ease infinite;
  }

  @keyframes gradientMove {
      0% {
          background-position: 0% 50%;
      }

      50% {
          background-position: 100% 50%;
      }

      100% {
          background-position: 0% 50%;
      }
  }

  @keyframes buttonPulse {

      0%,
      100% {
          transform: scale(1);
      }

      50% {
          transform: scale(1.05);
      }
  }

  .cta-button::before {
      content: '';
      position: absolute;
      top: 0;
      left: -100%;
      width: 100%;
      height: 100%;
      background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
      transition: left 0.6s;
  }

  .cta-button:hover {
      transform: translateY(-5px) scale(1.1);
      box-shadow: 0 25px 50px rgba(0, 0, 0, 0.3);
  }

  .cta-button:hover::before {
      left: 100%;
  }

  .stats {
      display: flex;
      gap: 40px;
      margin-top: 50px;
      animation: fadeInUp 1s ease-out 0.6s both;
  }

  .stat-item {
      text-align: center;
      position: relative;
  }

  .stat-number {
      font-size: 3rem;
      font-weight: 900;
      color: white;
      line-height: 1;
      text-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
      animation: countUp 2s ease-out 1s both;
  }

  @keyframes countUp {
      0% {
          transform: scale(0);
          opacity: 0;
      }

      50% {
          transform: scale(1.2);
      }

      100% {
          transform: scale(1);
          opacity: 1;
      }
  }

  .stat-label {
      font-size: 1rem;
      color: rgba(255, 255, 255, 0.8);
      font-weight: 500;
      margin-top: 8px;
      text-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
  }

  .content-right {
      flex: 1.2;
      display: flex;
      align-items: center;
      justify-content: center;
      position: relative;
      z-index: 10;
      animation: slideInRight 1s ease-out;
  }

  @keyframes slideInRight {
      0% {
          transform: translateX(100px);
          opacity: 0;
      }

      100% {
          transform: translateX(0);
          opacity: 1;
      }
  }

  .car-showcase {
      position: relative;
      transform: perspective(1500px) rotateY(-20deg) rotateX(10deg);
      filter: drop-shadow(0 30px 60px rgba(0, 0, 0, 0.3));
      animation: carShowcase 6s ease-in-out infinite;
  }

  @keyframes carShowcase {

      0%,
      100% {
          transform: perspective(1500px) rotateY(-20deg) rotateX(10deg) translateY(0px) scale(1);
      }

      25% {
          transform: perspective(1500px) rotateY(-15deg) rotateX(8deg) translateY(-10px) scale(1.02);
      }

      50% {
          transform: perspective(1500px) rotateY(-25deg) rotateX(12deg) translateY(-20px) scale(1.05);
      }

      75% {
          transform: perspective(1500px) rotateY(-18deg) rotateX(9deg) translateY(-15px) scale(1.03);
      }
  }

  .car-image {
      width: 600px;
      height: auto;
      filter: brightness(1.1) contrast(1.1);
  }

  .floating-element {
      position: absolute;
      background: rgba(255, 255, 255, 0.95);
      backdrop-filter: blur(15px);
      border: 1px solid rgba(255, 255, 255, 0.3);
      border-radius: 20px;
      padding: 20px;
      box-shadow: 0 15px 40px rgba(0, 0, 0, 0.2);
      animation: elementFloat 5s ease-in-out infinite;
      transition: all 0.3s ease;
  }

  .floating-element:hover {
      transform: scale(1.1);
      box-shadow: 0 25px 60px rgba(0, 0, 0, 0.3);
  }

  .floating-element.instructor {
      top: 20px;
      right: -60px;
      animation-delay: 0s;
  }

  .floating-element.student {
      bottom: 40px;
      right: 60px;
      animation-delay: 2.5s;
  }

  .floating-element.feature {
      bottom: 100px;
      left: -80px;
      animation-delay: 1.2s;
  }

  @keyframes elementFloat {

      0%,
      100% {
          transform: translateY(0px) rotate(0deg) scale(1);
          opacity: 0.9;
      }

      33% {
          transform: translateY(-15px) rotate(2deg) scale(1.05);
          opacity: 1;
      }

      66% {
          transform: translateY(-8px) rotate(-1deg) scale(1.02);
          opacity: 0.95;
      }
  }

  .person-avatar {
      width: 70px;
      height: 70px;
      border-radius: 50%;
      background: linear-gradient(135deg, #667eea, #764ba2);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 28px;
      margin: 0 auto 12px;
      border: 4px solid white;
      box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2);
      animation: avatarPulse 4s ease-in-out infinite;
  }

  @keyframes avatarPulse {

      0%,
      100% {
          transform: scale(1);
          box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2);
      }

      50% {
          transform: scale(1.1);
          box-shadow: 0 15px 40px rgba(0, 0, 0, 0.3);
      }
  }

  .person-info {
      text-align: center;
      font-size: 0.95rem;
      color: #374151;
      font-weight: 600;
      line-height: 1.4;
  }

  .features-grid {
      position: absolute;
      left: -100px;
      top: 50%;
      transform: translateY(-50%);
      display: flex;
      flex-direction: column;
      gap: 20px;
  }

  .feature-item {
      background: rgba(255, 255, 255, 0.9);
      backdrop-filter: blur(15px);
      border: 1px solid rgba(255, 255, 255, 0.4);
      border-radius: 15px;
      padding: 15px 20px;
      display: flex;
      align-items: center;
      gap: 15px;
      box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
      transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
      animation: featureSlide 0.8s ease-out forwards;
      opacity: 0;
      transform: translateX(-50px) scale(0.8);
  }

  .feature-item:nth-child(1) {
      animation-delay: 1.2s;
  }

  .feature-item:nth-child(2) {
      animation-delay: 1.5s;
  }

  .feature-item:nth-child(3) {
      animation-delay: 1.8s;
  }

  @keyframes featureSlide {
      0% {
          opacity: 0;
          transform: translateX(-50px) scale(0.8);
      }

      60% {
          transform: translateX(10px) scale(1.05);
      }

      100% {
          opacity: 1;
          transform: translateX(0) scale(1);
      }
  }

  .feature-item:hover {
      transform: translateY(-5px) scale(1.05);
      box-shadow: 0 20px 50px rgba(0, 0, 0, 0.25);
  }

  .feature-icon {
      width: 30px;
      height: 30px;
      background: linear-gradient(135deg, #667eea, #764ba2);
      border-radius: 8px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 14px;
      color: white;
      animation: iconSpin 6s ease-in-out infinite;
  }

  @keyframes iconSpin {

      0%,
      100% {
          transform: rotate(0deg) scale(1);
      }

      25% {
          transform: rotate(90deg) scale(1.1);
      }

      50% {
          transform: rotate(180deg) scale(1);
      }

      75% {
          transform: rotate(270deg) scale(1.1);
      }
  }

  .feature-text {
      font-size: 1rem;
      color: #1f2937;
      font-weight: 600;
  }

  .light-ray {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: radial-gradient(circle at 30% 20%, rgba(255, 255, 255, 0.1) 0%, transparent 50%);
      animation: lightMove 10s ease-in-out infinite;
      pointer-events: none;
      z-index: 2;
  }

  @keyframes lightMove {

      0%,
      100% {
          background-position: 30% 20%;
      }

      50% {
          background-position: 70% 80%;
      }
  }

  /* Responsive design */
  @media (max-width: 1024px) {
      .banner {
          flex-direction: column;
          height: auto;
          padding: 40px 20px;
          text-align: center;
      }

      .main-title {
          font-size: 4rem;
      }

      .car-image {
          width: 400px;
      }

      .features-grid {
          position: static;
          flex-direction: row;
          transform: none;
          justify-content: center;
          margin-top: 30px;
      }

      .stats {
          justify-content: center;
      }

      .floating-element.instructor,
      .floating-element.student {
          display: none;
      }
  }

  @media (max-width: 768px) {
      .main-title {
          font-size: 3rem;
      }

      .car-image {
          width: 320px;
      }

      .features-grid {
          flex-direction: column;
          align-items: center;
      }

      .stats {
          flex-direction: column;
          gap: 20px;
          align-items: center;
      }
  }