<style>
    body {
      box-sizing: border-box;
      font-family: 'Inter', sans-serif;
    }
    
    /* Loading Screen Styles */
    .loading-screen {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: linear-gradient(135deg, #0B2B5B 0%, #1e40af 50%, #0B2B5B 100%);
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      z-index: 9999;
      transition: all 0.8s ease-in-out;
    }
    
    .loading-screen.fade-out {
      opacity: 0;
      visibility: hidden;
      transform: scale(1.1);
    }
    
    .loading-logo {
      margin-bottom: 2rem;
      animation: logoFloat 3s ease-in-out infinite;
    }
    
    .loading-svg {
      width: 120px;
      height: 120px;
      animation: svgRotate 2s linear infinite;
      filter: drop-shadow(0 0 20px rgba(251, 191, 36, 0.5));
    }
    
    .loading-svg svg {
      width: 100%;
      height: 100%;
    }
    
    .loading-svg path {
      animation: pathPulse 1.5s ease-in-out infinite alternate;
    }
    
    .loading-text {
      color: white;
      font-size: 1.5rem;
      font-weight: 600;
      margin-bottom: 1rem;
      text-align: center;
      animation: textGlow 2s ease-in-out infinite alternate;
      text-shadow: 0 0 10px rgba(255, 255, 255, 0.3);
    }
    
    .loading-subtitle {
      color: rgba(255, 255, 255, 0.8);
      font-size: 1rem;
      text-align: center;
      margin-bottom: 2rem;
      animation: fadeInOut 3s ease-in-out infinite;
    }
    
    .loading-progress {
      width: 200px;
      height: 4px;
      background: rgba(255, 255, 255, 0.2);
      border-radius: 2px;
      overflow: hidden;
      margin-bottom: 1rem;
    }
    
    .loading-progress-bar {
      height: 100%;
      background: linear-gradient(90deg, #fbbf24, #f59e0b, #fbbf24);
      background-size: 200% 100%;
      border-radius: 2px;
      animation: progressFlow 2s ease-in-out infinite, progressFill 3s ease-out forwards;
      transform-origin: left;
    }
    
    .loading-dots {
      display: flex;
      gap: 0.5rem;
      margin-top: 1rem;
    }
    
    .loading-dot {
      width: 8px;
      height: 8px;
      background: #fbbf24;
      border-radius: 50%;
      animation: dotBounce 1.4s ease-in-out infinite;
    }
    
    .loading-dot:nth-child(1) { animation-delay: 0s; }
    .loading-dot:nth-child(2) { animation-delay: 0.2s; }
    .loading-dot:nth-child(3) { animation-delay: 0.4s; }
    
    .loading-particles {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      pointer-events: none;
      overflow: hidden;
    }
    
    .loading-particle {
      position: absolute;
      width: 4px;
      height: 4px;
      background: rgba(251, 191, 36, 0.6);
      border-radius: 50%;
      animation: particleFloat 4s linear infinite;
    }
    
    @keyframes logoFloat {
      0%, 100% { transform: translateY(0px) scale(1); }
      50% { transform: translateY(-10px) scale(1.05); }
    }
    
    @keyframes svgRotate {
      0% { transform: rotate(0deg); }
      100% { transform: rotate(360deg); }
    }
    
    @keyframes pathPulse {
      0% { fill-opacity: 0.6; }
      100% { fill-opacity: 1; }
    }
    
    @keyframes textGlow {
      0% { text-shadow: 0 0 10px rgba(255, 255, 255, 0.3); }
      100% { text-shadow: 0 0 20px rgba(251, 191, 36, 0.8), 0 0 30px rgba(251, 191, 36, 0.4); }
    }
    
    @keyframes fadeInOut {
      0%, 100% { opacity: 0.6; }
      50% { opacity: 1; }
    }
    
    @keyframes progressFlow {
      0% { background-position: 0% 0%; }
      100% { background-position: 200% 0%; }
    }
    
    @keyframes progressFill {
      0% { width: 0%; }
      20% { width: 15%; }
      40% { width: 35%; }
      60% { width: 60%; }
      80% { width: 85%; }
      100% { width: 100%; }
    }
    
    @keyframes dotBounce {
      0%, 80%, 100% { transform: scale(0.8) translateY(0); opacity: 0.5; }
      40% { transform: scale(1.2) translateY(-10px); opacity: 1; }
    }
    
    @keyframes particleFloat {
      0% {
        transform: translateY(100vh) translateX(0px) rotate(0deg);
        opacity: 0;
      }
      10% { opacity: 1; }
      90% { opacity: 1; }
      100% {
        transform: translateY(-100px) translateX(50px) rotate(360deg);
        opacity: 0;
      }
    }
    
    h1, h2, h3, h4, h5, h6 {
      font-family: 'Poppins', sans-serif;
    }
    
    .font-poppins {
      font-family: 'Poppins', sans-serif;
    }
    
    .font-inter {
      font-family: 'Inter', sans-serif;
    }
    
    .hero-bg {
      background: linear-gradient(135deg, #0B2B5B 0%, #1e40af 100%);
      position: relative;
      overflow: hidden;
    }
    
    .hero-bg::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="grain" width="100" height="100" patternUnits="userSpaceOnUse"><circle cx="25" cy="25" r="1" fill="rgba(255,255,255,0.1)"/><circle cx="75" cy="75" r="1" fill="rgba(255,255,255,0.05)"/><circle cx="50" cy="10" r="0.5" fill="rgba(255,255,255,0.08)"/></pattern></defs><rect width="100" height="100" fill="url(%23grain)"/></svg>');
      animation: float 20s ease-in-out infinite;
    }
    
    @keyframes float {
      0%, 100% { transform: translateY(0px) rotate(0deg); }
      50% { transform: translateY(-20px) rotate(1deg); }
    }
    
    .card-hover {
      transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    }
    
    .card-hover:hover {
      transform: translateY(-10px) scale(1.02);
      box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    }
    
    .step-number {
      background: linear-gradient(135deg, #fbbf24, #f59e0b);
      position: relative;
      overflow: hidden;
    }
    
    .step-number::before {
      content: '';
      position: absolute;
      top: 0;
      left: -100%;
      width: 100%;
      height: 100%;
      background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
      transition: left 0.5s;
    }
    
    .step-number:hover::before {
      left: 100%;
    }
    
    @keyframes fadeInUp {
      from {
        opacity: 0;
        transform: translateY(50px);
      }
      to {
        opacity: 1;
        transform: translateY(0);
      }
    }
    
    @keyframes fadeInLeft {
      from {
        opacity: 0;
        transform: translateX(-50px);
      }
      to {
        opacity: 1;
        transform: translateX(0);
      }
    }
    
    @keyframes fadeInRight {
      from {
        opacity: 0;
        transform: translateX(50px);
      }
      to {
        opacity: 1;
        transform: translateX(0);
      }
    }
    
    @keyframes fadeInScale {
      from {
        opacity: 0;
        transform: scale(0.8);
      }
      to {
        opacity: 1;
        transform: scale(1);
      }
    }
    
    @keyframes slideInDown {
      from {
        opacity: 0;
        transform: translateY(-50px);
      }
      to {
        opacity: 1;
        transform: translateY(0);
      }
    }
    
    @keyframes bounce {
      0%, 20%, 53%, 80%, 100% {
        transform: translate3d(0,0,0);
      }
      40%, 43% {
        transform: translate3d(0, -10px, 0);
      }
      70% {
        transform: translate3d(0, -5px, 0);
      }
      90% {
        transform: translate3d(0, -2px, 0);
      }
    }
    
    @keyframes float-gentle {
      0%, 100% { 
        transform: translateY(0px) scale(1); 
      }
      50% { 
        transform: translateY(-8px) scale(1.02); 
      }
    }
    
    @keyframes wiggle {
      0%, 100% { transform: rotate(0deg); }
      25% { transform: rotate(-3deg); }
      75% { transform: rotate(3deg); }
    }
    
    @keyframes heartbeat {
      0%, 100% { transform: scale(1); }
      50% { transform: scale(1.1); }
    }
    
    @keyframes swing {
      0%, 100% { transform: rotate(0deg); }
      20% { transform: rotate(15deg); }
      40% { transform: rotate(-10deg); }
      60% { transform: rotate(5deg); }
      80% { transform: rotate(-5deg); }
    }
    
    @keyframes glow-pulse {
      0%, 100% { 
        transform: scale(1);
        filter: brightness(1);
      }
      50% { 
        transform: scale(1.05);
        filter: brightness(1.2);
      }
    }
    
    @keyframes pulse {
      0% {
        transform: scale(1);
      }
      50% {
        transform: scale(1.05);
      }
      100% {
        transform: scale(1);
      }
    }
    
    @keyframes shimmer {
      0% {
        background-position: -200px 0;
      }
      100% {
        background-position: calc(200px + 100%) 0;
      }
    }
    
    @keyframes spin-slow {
      from {
        transform: rotate(0deg);
      }
      to {
        transform: rotate(360deg);
      }
    }
    
    .animate-spin-slow {
      animation: spin-slow 8s linear infinite;
    }
    
    .emoji-3d {
      filter: drop-shadow(2px 4px 6px rgba(0, 0, 0, 0.3));
      transition: all 0.3s ease;
    }
    
    .emoji-3d:hover {
      transform: rotateY(15deg) rotateX(15deg) scale(1.1);
      filter: drop-shadow(4px 8px 12px rgba(0, 0, 0, 0.4));
    }
    
    .icon-3d {
      filter: drop-shadow(2px 4px 6px rgba(0, 0, 0, 0.3));
      transition: all 0.3s ease;
    }
    
    .icon-3d:hover {
      transform: rotateY(15deg) rotateX(15deg) scale(1.05);
      filter: drop-shadow(4px 8px 12px rgba(0, 0, 0, 0.4));
    }
    
    .carousel-slide {
      transform: translateX(0);
    }
    
    .carousel-slide.next {
      transform: translateX(100%);
    }
    
    .carousel-slide.prev {
      transform: translateX(-100%);
    }
    
    .indicator.active {
      background-color: rgba(255, 255, 255, 0.9);
      transform: scale(1.2);
    }
    
    .animate-fade-in {
      animation: fadeInUp 0.8s ease-out;
    }
    
    .animate-fade-in-left {
      animation: fadeInLeft 0.8s ease-out;
    }
    
    .animate-fade-in-right {
      animation: fadeInRight 0.8s ease-out;
    }
    
    .animate-fade-in-scale {
      animation: fadeInScale 0.8s ease-out;
    }
    
    .animate-slide-down {
      animation: slideInDown 0.8s ease-out;
    }
    
    .animate-bounce {
      animation: bounce 2s infinite;
    }
    
    .animate-float-gentle {
      animation: float-gentle 3s ease-in-out infinite;
    }
    
    .animate-wiggle {
      animation: wiggle 1s ease-in-out infinite;
    }
    
    .animate-heartbeat {
      animation: heartbeat 1.5s ease-in-out infinite;
    }
    
    .animate-swing {
      animation: swing 2s ease-in-out infinite;
    }
    
    .animate-glow-pulse {
      animation: glow-pulse 2s ease-in-out infinite;
    }
    
    .animate-pulse {
      animation: pulse 2s infinite;
    }
    
    .shimmer {
      background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
      background-size: 200px 100%;
      animation: shimmer 2s infinite;
    }
    
    .gradient-text {
      background: linear-gradient(135deg, #fbbf24, #f59e0b, #d97706);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
    }
    
    .glass-effect {
      background: rgba(255, 255, 255, 0.1);
      backdrop-filter: blur(10px);
      border: 1px solid rgba(255, 255, 255, 0.2);
    }
    
    .floating {
      animation: float 6s ease-in-out infinite;
    }
    
    .floating:nth-child(2) {
      animation-delay: -2s;
    }
    
    .floating:nth-child(3) {
      animation-delay: -4s;
    }
    
    .stagger-1 { animation-delay: 0.1s; }
    .stagger-2 { animation-delay: 0.2s; }
    .stagger-3 { animation-delay: 0.3s; }
    .stagger-4 { animation-delay: 0.4s; }
    
    .hover-glow:hover {
      box-shadow: 0 0 20px rgba(251, 191, 36, 0.5);
      transition: box-shadow 0.3s ease;
    }
    
    .text-shadow {
      text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
    }
    
    .section-divider {
      position: relative;
      overflow: hidden;
    }
    
    .section-divider::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      height: 2px;
      background: linear-gradient(90deg, transparent, #fbbf24, transparent);
      animation: shimmer 3s infinite;
    }
    
    /* Biometric Gradient Animations */
    .biometric-bg {
      position: relative;
      overflow: hidden;
    }
    
    .biometric-bg::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: 
        radial-gradient(circle at 20% 30%, rgba(59, 130, 246, 0.15) 0%, transparent 50%),
        radial-gradient(circle at 80% 70%, rgba(251, 191, 36, 0.1) 0%, transparent 50%),
        radial-gradient(circle at 40% 80%, rgba(16, 185, 129, 0.12) 0%, transparent 50%),
        radial-gradient(circle at 90% 20%, rgba(139, 92, 246, 0.08) 0%, transparent 50%),
        linear-gradient(135deg, rgba(11, 43, 91, 0.05) 0%, rgba(30, 64, 175, 0.03) 100%);
      animation: biometricFlow 15s ease-in-out infinite;
      pointer-events: none;
      z-index: 1;
    }
    
    .biometric-bg > * {
      position: relative;
      z-index: 2;
    }
    
    @keyframes biometricFlow {
      0%, 100% {
        background: 
          radial-gradient(circle at 20% 30%, rgba(59, 130, 246, 0.15) 0%, transparent 50%),
          radial-gradient(circle at 80% 70%, rgba(251, 191, 36, 0.1) 0%, transparent 50%),
          radial-gradient(circle at 40% 80%, rgba(16, 185, 129, 0.12) 0%, transparent 50%),
          radial-gradient(circle at 90% 20%, rgba(139, 92, 246, 0.08) 0%, transparent 50%);
      }
      25% {
        background: 
          radial-gradient(circle at 60% 20%, rgba(59, 130, 246, 0.18) 0%, transparent 50%),
          radial-gradient(circle at 30% 80%, rgba(251, 191, 36, 0.12) 0%, transparent 50%),
          radial-gradient(circle at 80% 40%, rgba(16, 185, 129, 0.15) 0%, transparent 50%),
          radial-gradient(circle at 10% 60%, rgba(139, 92, 246, 0.1) 0%, transparent 50%);
      }
      50% {
        background: 
          radial-gradient(circle at 80% 60%, rgba(59, 130, 246, 0.12) 0%, transparent 50%),
          radial-gradient(circle at 20% 40%, rgba(251, 191, 36, 0.15) 0%, transparent 50%),
          radial-gradient(circle at 70% 20%, rgba(16, 185, 129, 0.1) 0%, transparent 50%),
          radial-gradient(circle at 40% 90%, rgba(139, 92, 246, 0.12) 0%, transparent 50%);
      }
      75% {
        background: 
          radial-gradient(circle at 30% 70%, rgba(59, 130, 246, 0.1) 0%, transparent 50%),
          radial-gradient(circle at 90% 30%, rgba(251, 191, 36, 0.18) 0%, transparent 50%),
          radial-gradient(circle at 10% 50%, rgba(16, 185, 129, 0.08) 0%, transparent 50%),
          radial-gradient(circle at 70% 80%, rgba(139, 92, 246, 0.15) 0%, transparent 50%);
      }
    }
    
    /* Space Theme Animations */
    .space-container {
      position: relative;
      overflow: hidden;
    }
    
    .space-stars {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      pointer-events: none;
      z-index: 1;
    }
    
    .star {
      position: absolute;
      background: white;
      border-radius: 50%;
      animation: twinkle 3s ease-in-out infinite;
    }
    
    .star.small {
      width: 1px;
      height: 1px;
      animation-duration: 2s;
    }
    
    .star.medium {
      width: 2px;
      height: 2px;
      animation-duration: 3s;
      box-shadow: 0 0 6px rgba(255, 255, 255, 0.8);
    }
    
    .star.large {
      width: 3px;
      height: 3px;
      animation-duration: 4s;
      box-shadow: 0 0 10px rgba(255, 255, 255, 0.9);
    }
    
    .floating-particle {
      position: absolute;
      background: radial-gradient(circle, rgba(255, 255, 255, 0.8) 0%, transparent 70%);
      border-radius: 50%;
      pointer-events: none;
      animation: floatInSpace 15s linear infinite;
    }
    
    .cosmic-dust {
      position: absolute;
      width: 100%;
      height: 100%;
      background: 
        radial-gradient(2px 2px at 20px 30px, rgba(255, 255, 255, 0.3), transparent),
        radial-gradient(2px 2px at 40px 70px, rgba(255, 255, 255, 0.2), transparent),
        radial-gradient(1px 1px at 90px 40px, rgba(255, 255, 255, 0.4), transparent),
        radial-gradient(1px 1px at 130px 80px, rgba(255, 255, 255, 0.2), transparent),
        radial-gradient(2px 2px at 160px 30px, rgba(255, 255, 255, 0.3), transparent);
      background-repeat: repeat;
      background-size: 200px 100px;
      animation: cosmicDrift 20s linear infinite;
      pointer-events: none;
      opacity: 0.6;
    }
    
    .nebula-effect {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: 
        radial-gradient(ellipse at 20% 20%, rgba(138, 43, 226, 0.1) 0%, transparent 50%),
        radial-gradient(ellipse at 80% 80%, rgba(30, 144, 255, 0.08) 0%, transparent 60%),
        radial-gradient(ellipse at 40% 90%, rgba(255, 20, 147, 0.06) 0%, transparent 40%),
        radial-gradient(ellipse at 90% 10%, rgba(0, 255, 127, 0.05) 0%, transparent 50%);
      animation: nebulaFlow 25s ease-in-out infinite;
      pointer-events: none;
      z-index: 0;
    }
    
    .planet {
      position: absolute;
      border-radius: 50%;
      background: radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.3), rgba(0, 0, 0, 0.2));
      animation: orbit 30s linear infinite;
      pointer-events: none;
    }
    
    .planet.small {
      width: 20px;
      height: 20px;
      background: radial-gradient(circle at 30% 30%, rgba(255, 215, 0, 0.8), rgba(255, 140, 0, 0.4));
    }
    
    .planet.medium {
      width: 35px;
      height: 35px;
      background: radial-gradient(circle at 30% 30%, rgba(100, 149, 237, 0.7), rgba(25, 25, 112, 0.5));
    }
    
    .shooting-star {
      position: absolute;
      width: 2px;
      height: 2px;
      background: white;
      border-radius: 50%;
      box-shadow: 0 0 10px rgba(255, 255, 255, 0.8);
      animation: shootingStar 3s linear infinite;
      pointer-events: none;
    }
    
    .shooting-star::before {
      content: '';
      position: absolute;
      top: 0;
      right: 0;
      width: 50px;
      height: 1px;
      background: linear-gradient(90deg, rgba(255, 255, 255, 0.8), transparent);
      transform-origin: right;
      animation: shootingTail 3s linear infinite;
    }
    
    @keyframes twinkle {
      0%, 100% { opacity: 0.3; transform: scale(1); }
      50% { opacity: 1; transform: scale(1.2); }
    }
    
    @keyframes floatInSpace {
      0% { 
        transform: translateY(100vh) translateX(-10px) rotate(0deg);
        opacity: 0;
      }
      10% { opacity: 1; }
      90% { opacity: 1; }
      100% { 
        transform: translateY(-100px) translateX(10px) rotate(360deg);
        opacity: 0;
      }
    }
    
    @keyframes cosmicDrift {
      0% { transform: translateX(0) translateY(0); }
      100% { transform: translateX(-200px) translateY(-100px); }
    }
    
    @keyframes nebulaFlow {
      0%, 100% {
        background: 
          radial-gradient(ellipse at 20% 20%, rgba(138, 43, 226, 0.1) 0%, transparent 50%),
          radial-gradient(ellipse at 80% 80%, rgba(30, 144, 255, 0.08) 0%, transparent 60%),
          radial-gradient(ellipse at 40% 90%, rgba(255, 20, 147, 0.06) 0%, transparent 40%),
          radial-gradient(ellipse at 90% 10%, rgba(0, 255, 127, 0.05) 0%, transparent 50%);
      }
      25% {
        background: 
          radial-gradient(ellipse at 80% 30%, rgba(138, 43, 226, 0.12) 0%, transparent 50%),
          radial-gradient(ellipse at 20% 70%, rgba(30, 144, 255, 0.1) 0%, transparent 60%),
          radial-gradient(ellipse at 70% 20%, rgba(255, 20, 147, 0.08) 0%, transparent 40%),
          radial-gradient(ellipse at 10% 80%, rgba(0, 255, 127, 0.07) 0%, transparent 50%);
      }
      50% {
        background: 
          radial-gradient(ellipse at 60% 80%, rgba(138, 43, 226, 0.08) 0%, transparent 50%),
          radial-gradient(ellipse at 40% 20%, rgba(30, 144, 255, 0.12) 0%, transparent 60%),
          radial-gradient(ellipse at 90% 60%, rgba(255, 20, 147, 0.04) 0%, transparent 40%),
          radial-gradient(ellipse at 30% 40%, rgba(0, 255, 127, 0.09) 0%, transparent 50%);
      }
      75% {
        background: 
          radial-gradient(ellipse at 30% 60%, rgba(138, 43, 226, 0.14) 0%, transparent 50%),
          radial-gradient(ellipse at 70% 40%, rgba(30, 144, 255, 0.06) 0%, transparent 60%),
          radial-gradient(ellipse at 20% 80%, rgba(255, 20, 147, 0.1) 0%, transparent 40%),
          radial-gradient(ellipse at 80% 20%, rgba(0, 255, 127, 0.03) 0%, transparent 50%);
      }
    }
    
    @keyframes orbit {
      0% { transform: rotate(0deg) translateX(100px) rotate(0deg); }
      100% { transform: rotate(360deg) translateX(100px) rotate(-360deg); }
    }
    
    @keyframes shootingStar {
      0% { 
        transform: translateX(-100px) translateY(-100px);
        opacity: 0;
      }
      10% { opacity: 1; }
      90% { opacity: 1; }
      100% { 
        transform: translateX(100vw) translateY(100vh);
        opacity: 0;
      }
    }
    
    @keyframes shootingTail {
      0% { transform: scaleX(0); }
      50% { transform: scaleX(1); }
      100% { transform: scaleX(0); }
    }

    /* Padding Biometric Effects - Multiple Variants */
    .padding-biometric {
      position: relative;
      padding: 4rem 1.5rem;
    }
    
    /* Default padding effect */
    .padding-biometric::after {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: 
        radial-gradient(ellipse at top left, rgba(59, 130, 246, 0.08) 0%, transparent 60%),
        radial-gradient(ellipse at bottom right, rgba(251, 191, 36, 0.06) 0%, transparent 60%),
        radial-gradient(ellipse at center, rgba(16, 185, 129, 0.04) 0%, transparent 70%);
      animation: paddingPulse 8s ease-in-out infinite;
      pointer-events: none;
      z-index: 0;
    }
    
    /* Variant 1: Spiral Effect */
    .padding-spiral::after {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: 
        radial-gradient(circle at 20% 20%, rgba(139, 92, 246, 0.1) 0%, transparent 40%),
        radial-gradient(circle at 80% 80%, rgba(236, 72, 153, 0.08) 0%, transparent 50%),
        radial-gradient(circle at 50% 50%, rgba(59, 130, 246, 0.06) 0%, transparent 60%);
      animation: paddingSpiral 12s linear infinite;
      pointer-events: none;
      z-index: 0;
    }
    
    /* Variant 2: Wave Effect */
    .padding-wave::after {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: 
        linear-gradient(45deg, rgba(16, 185, 129, 0.1) 0%, transparent 30%),
        linear-gradient(-45deg, rgba(251, 191, 36, 0.08) 0%, transparent 40%),
        radial-gradient(ellipse at center, rgba(59, 130, 246, 0.06) 0%, transparent 50%);
      animation: paddingWave 10s ease-in-out infinite;
      pointer-events: none;
      z-index: 0;
    }
    
    /* Variant 3: Orbit Effect */
    .padding-orbit::after {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: 
        radial-gradient(circle at 30% 70%, rgba(251, 191, 36, 0.12) 0%, transparent 35%),
        radial-gradient(circle at 70% 30%, rgba(16, 185, 129, 0.1) 0%, transparent 40%),
        radial-gradient(circle at 50% 50%, rgba(139, 92, 246, 0.06) 0%, transparent 60%);
      animation: paddingOrbit 15s ease-in-out infinite;
      pointer-events: none;
      z-index: 0;
    }
    
    /* Variant 4: Flow Effect */
    .padding-flow::after {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: 
        linear-gradient(90deg, rgba(59, 130, 246, 0.08) 0%, transparent 50%, rgba(251, 191, 36, 0.1) 100%),
        radial-gradient(ellipse at 25% 75%, rgba(16, 185, 129, 0.08) 0%, transparent 50%),
        radial-gradient(ellipse at 75% 25%, rgba(236, 72, 153, 0.06) 0%, transparent 60%);
      animation: paddingFlow 14s ease-in-out infinite;
      pointer-events: none;
      z-index: 0;
    }
    
    /* Variant 5: Ripple Effect */
    .padding-ripple::after {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: 
        radial-gradient(circle at 40% 40%, rgba(59, 130, 246, 0.1) 0%, transparent 30%),
        radial-gradient(circle at 60% 60%, rgba(251, 191, 36, 0.08) 0%, transparent 40%),
        radial-gradient(circle at 80% 20%, rgba(16, 185, 129, 0.06) 0%, transparent 50%);
      animation: paddingRipple 9s ease-in-out infinite;
      pointer-events: none;
      z-index: 0;
    }
    
    @keyframes paddingPulse {
      0%, 100% {
        opacity: 1;
        transform: scale(1);
      }
      50% {
        opacity: 0.7;
        transform: scale(1.05);
      }
    }
    
    @keyframes paddingSpiral {
      0% {
        transform: rotate(0deg) scale(1);
        opacity: 0.8;
      }
      50% {
        transform: rotate(180deg) scale(1.1);
        opacity: 1;
      }
      100% {
        transform: rotate(360deg) scale(1);
        opacity: 0.8;
      }
    }
    
    @keyframes paddingWave {
      0%, 100% {
        transform: translateX(0) translateY(0) scale(1);
        opacity: 0.6;
      }
      25% {
        transform: translateX(10px) translateY(-5px) scale(1.05);
        opacity: 0.8;
      }
      50% {
        transform: translateX(0) translateY(-10px) scale(1.1);
        opacity: 1;
      }
      75% {
        transform: translateX(-10px) translateY(-5px) scale(1.05);
        opacity: 0.8;
      }
    }
    
    @keyframes paddingOrbit {
      0%, 100% {
        background: 
          radial-gradient(circle at 30% 70%, rgba(251, 191, 36, 0.12) 0%, transparent 35%),
          radial-gradient(circle at 70% 30%, rgba(16, 185, 129, 0.1) 0%, transparent 40%),
          radial-gradient(circle at 50% 50%, rgba(139, 92, 246, 0.06) 0%, transparent 60%);
      }
      33% {
        background: 
          radial-gradient(circle at 70% 30%, rgba(251, 191, 36, 0.15) 0%, transparent 35%),
          radial-gradient(circle at 30% 70%, rgba(16, 185, 129, 0.12) 0%, transparent 40%),
          radial-gradient(circle at 50% 50%, rgba(139, 92, 246, 0.08) 0%, transparent 60%);
      }
      66% {
        background: 
          radial-gradient(circle at 50% 20%, rgba(251, 191, 36, 0.1) 0%, transparent 35%),
          radial-gradient(circle at 50% 80%, rgba(16, 185, 129, 0.08) 0%, transparent 40%),
          radial-gradient(circle at 50% 50%, rgba(139, 92, 246, 0.12) 0%, transparent 60%);
      }
    }
    
    @keyframes paddingFlow {
      0%, 100% {
        transform: translateX(0) skewX(0deg);
        opacity: 0.7;
      }
      25% {
        transform: translateX(5px) skewX(2deg);
        opacity: 0.9;
      }
      50% {
        transform: translateX(0) skewX(0deg);
        opacity: 1;
      }
      75% {
        transform: translateX(-5px) skewX(-2deg);
        opacity: 0.9;
      }
    }
    
    @keyframes paddingRipple {
      0%, 100% {
        transform: scale(1);
        opacity: 0.6;
      }
      20% {
        transform: scale(1.02);
        opacity: 0.8;
      }
      40% {
        transform: scale(1.05);
        opacity: 1;
      }
      60% {
        transform: scale(1.03);
        opacity: 0.9;
      }
      80% {
        transform: scale(1.01);
        opacity: 0.7;
      }
    }
    
    /* Card Biometric Effects */
    .card-biometric {
      position: relative;
      overflow: hidden;
    }
    
    .card-biometric::before {
      content: '';
      position: absolute;
      top: -50%;
      left: -50%;
      width: 200%;
      height: 200%;
      background: 
        radial-gradient(circle, rgba(59, 130, 246, 0.1) 0%, transparent 30%),
        radial-gradient(circle, rgba(251, 191, 36, 0.08) 0%, transparent 40%);
      animation: cardBiometric 12s linear infinite;
      pointer-events: none;
      z-index: 0;
    }
    
    .card-biometric > * {
      position: relative;
      z-index: 1;
    }
    
    @keyframes cardBiometric {
      0% {
        transform: rotate(0deg) scale(1);
      }
      50% {
        transform: rotate(180deg) scale(1.1);
      }
      100% {
        transform: rotate(360deg) scale(1);
      }
    }
    
    /* Hero Biometric Pattern */
    .hero-biometric::after {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: 
        radial-gradient(circle at 15% 25%, rgba(251, 191, 36, 0.15) 0%, transparent 40%),
        radial-gradient(circle at 85% 75%, rgba(59, 130, 246, 0.12) 0%, transparent 45%),
        radial-gradient(circle at 50% 10%, rgba(16, 185, 129, 0.1) 0%, transparent 35%),
        radial-gradient(circle at 25% 90%, rgba(139, 92, 246, 0.08) 0%, transparent 50%);
      animation: heroBiometric 20s ease-in-out infinite;
      pointer-events: none;
      z-index: 1;
    }
    
    @keyframes heroBiometric {
      0%, 100% {
        background: 
          radial-gradient(circle at 15% 25%, rgba(251, 191, 36, 0.15) 0%, transparent 40%),
          radial-gradient(circle at 85% 75%, rgba(59, 130, 246, 0.12) 0%, transparent 45%),
          radial-gradient(circle at 50% 10%, rgba(16, 185, 129, 0.1) 0%, transparent 35%),
          radial-gradient(circle at 25% 90%, rgba(139, 92, 246, 0.08) 0%, transparent 50%);
      }
      33% {
        background: 
          radial-gradient(circle at 75% 15%, rgba(251, 191, 36, 0.18) 0%, transparent 40%),
          radial-gradient(circle at 25% 85%, rgba(59, 130, 246, 0.15) 0%, transparent 45%),
          radial-gradient(circle at 90% 50%, rgba(16, 185, 129, 0.12) 0%, transparent 35%),
          radial-gradient(circle at 10% 30%, rgba(139, 92, 246, 0.1) 0%, transparent 50%);
      }
      66% {
        background: 
          radial-gradient(circle at 40% 80%, rgba(251, 191, 36, 0.12) 0%, transparent 40%),
          radial-gradient(circle at 60% 20%, rgba(59, 130, 246, 0.18) 0%, transparent 45%),
          radial-gradient(circle at 20% 60%, rgba(16, 185, 129, 0.08) 0%, transparent 35%),
          radial-gradient(circle at 80% 40%, rgba(139, 92, 246, 0.15) 0%, transparent 50%);
      }
    }
      .timeline {
      display: flex;
      flex-direction: column;
      gap: 2.5rem;
    }
    
    .timeline-item {
      display: flex;
      align-items: center;
      justify-content: space-between;
      background: white;
      border-radius: 0 80px 80px 0;
      box-shadow: 0 6px 20px rgba(0,0,0,0.08);
      padding: 25px 35px;
      transition: all 0.3s ease;
      position: relative;
    }
    
    .timeline-item.gold { border-left: 12px solid #EAB308; }
    .timeline-item.navy { border-left: 12px solid #0B2B5B; }
    
    .timeline-item:nth-child(even) {
      flex-direction: row-reverse;
      border-radius: 80px 0 0 80px;
    }
    
    .timeline-item:hover {
      transform: translateY(-6px);
    }
    
    /* === ICON + NUMBER === */
    .number {
      position: relative;
      width: 110px;
      height: 110px;
      background: #0B2B5B;
      border-radius: 35px;
      color: #fff;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 3rem;
      font-weight: 800;
      flex-shrink: 0;
    }
    
    .timeline-item.gold .number {
      background: #EAB308;
    }
    
    .number i {
      position: absolute;
      bottom: 12px;
      right: 12px;
      width: 24px;
      height: 24px;
      opacity: 0.9;
    }
    
    .timeline-item:nth-child(even) .number i {
      right: auto;
      left: 12px;
    }
    
    /* === TEXT === */
    .content {
      flex: 1;
      margin-left: 30px;
    }
    
    .timeline-item:nth-child(even) .content {
      margin-left: 0;
      margin-right: 30px;
    }
    
    .content h3 {
      font-size: 1.3rem;
      font-weight: 700;
      color: #0B2B5B;
      margin-bottom: 8px;
    }
    
    .content p {
      font-size: 0.95rem;
      color: #555;
      line-height: 1.6;
    }
    
    /* === RESPONSIVE === */
    @media (max-width: 768px) {
      .timeline-item {
        flex-direction: column;
        text-align: center;
        border-radius: 25px;
        padding: 20px;
      }
    
      .timeline-item:nth-child(even) {
        flex-direction: column;
      }
    
      .number {
        margin-bottom: 15px;
      }
    
      .content {
        margin: 0;
      }
    }
</style>