* { box-sizing: border-box; }
    html, body { height: 100%; margin: 0; padding: 0; }
    .trade-winds { font-family: "Trade Winds", system-ui; }
    .inter { font-family: "Inter", sans-serif; }
    
    :root {
      --primary: #000B58;
      --secondary: #E2DFD0;
      --accent: #040D12;
    }

    @keyframes fadeInUp {
      from { opacity: 0; transform: translateY(30px); }
      to { opacity: 1; transform: translateY(0); }
    }
    @keyframes fadeInLeft {
      from { opacity: 0; transform: translateX(-30px); }
      to { opacity: 1; transform: translateX(0); }
    }
    @keyframes fadeInRight {
      from { opacity: 0; transform: translateX(30px); }
      to { opacity: 1; transform: translateX(0); }
    }
    @keyframes slideInUp {
      from { opacity: 0; transform: translateY(60px); }
      to { opacity: 1; transform: translateY(0); }
    }
    @keyframes scaleIn {
      from { opacity: 0; transform: scale(0.95); }
      to { opacity: 1; transform: scale(1); }
    }
    @keyframes rotateFloat {
      0%, 100% { transform: rotateX(0) rotateY(0); }
      50% { transform: rotateX(5deg) rotateY(5deg); }
    }
    @keyframes glowPulse {
      0%, 100% { box-shadow: 0 0 20px rgba(226, 223, 208, 0.3); }
      50% { box-shadow: 0 0 40px rgba(226, 223, 208, 0.6); }
    }
    @keyframes slideLeft {
      from { opacity: 0; transform: translateX(100px); }
      to { opacity: 1; transform: translateX(0); }
    }

    .animate-fade-up { animation: fadeInUp 0.8s ease forwards; }
    .animate-fade-left { animation: fadeInLeft 0.8s ease forwards; }
    .animate-fade-right { animation: fadeInRight 0.8s ease forwards; }
    .animate-slide-up { animation: slideInUp 0.8s ease forwards; }
    .animate-scale { animation: scaleIn 0.6s ease forwards; }
    .animate-rotate-float { animation: rotateFloat 6s ease-in-out infinite; }
    .animate-glow-pulse { animation: glowPulse 2.5s ease-in-out infinite; }
    .animate-slide-left { animation: slideLeft 0.8s ease forwards; }

    .delay-100 { animation-delay: 0.1s; }
    .delay-200 { animation-delay: 0.2s; }
    .delay-300 { animation-delay: 0.3s; }
    .delay-400 { animation-delay: 0.4s; }
    .delay-500 { animation-delay: 0.5s; }

    .diagonal-clip-left { clip-path: polygon(0 0, 100% 0, 85% 100%, 0% 100%); }
    .diagonal-clip-right { clip-path: polygon(15% 0, 100% 0, 100% 100%, 0% 100%); }

    .service-card { transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1); }
    .service-card:hover { transform: translateY(-15px); box-shadow: 0 20px 50px rgba(0, 11, 88, 0.2); }

    .nav-link { position: relative; overflow: hidden; }
    .nav-link::after {
      content: '';
      position: absolute;
      bottom: -2px;
      left: 0;
      width: 0;
      height: 2px;
      background: #E2DFD0;
      transition: width 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    }
    .nav-link:hover::after { width: 100%; }

    .btn-primary {
      background: #E2DFD0;
      color: #000B58;
      transition: all 0.3s ease;
      box-shadow: 0 0 0 2px #000B58 inset;
    }
    .btn-primary:hover {
      transform: translateY(-3px);
      box-shadow: 0 0 30px rgba(226, 223, 208, 0.6), 0 0 0 2px #000B58 inset;
      color: #040D12;
    }

    .btn-secondary {
      border: 2px solid #E2DFD0;
      color: #E2DFD0;
      transition: all 0.3s ease;
    }
    .btn-secondary:hover {
      background: #E2DFD0;
      color: #000B58;
      transform: translateY(-3px);
      box-shadow: 0 0 30px rgba(226, 223, 208, 0.4);
    }

    .page { display: none; }
    .page.active { display: block; }

    .mobile-menu {
      transform: translateX(-100%);
      transition: transform 0.3s ease;
    }
    .mobile-menu.open {
      transform: translateX(0);
    }

    .project-card {
      transition: all 0.4s ease;
      overflow: hidden;
      border-radius: 12px;
    }
    .project-card:hover {
      transform: translateY(-10px);
      box-shadow: 0 20px 40px rgba(4, 13, 18, 0.4);
    }
    .project-card img {
      transition: transform 0.5s ease;
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
    .project-card:hover img {
      transform: scale(1.05);
    }

    .testimonial-card {
      transition: all 0.4s ease;
    }
    .testimonial-card:hover {
      transform: scale(1.02);
    }

    .tech-icon {
      transition: all 0.3s ease;
    }
    .service-card:hover .tech-icon {
      transform: rotate(10deg) scale(1.1);
    }

    .input-focus {
      transition: all 0.3s ease;
      border-bottom: 2px solid #E2DFD0;
    }
    .input-focus:focus {
      outline: none;
      box-shadow: 0 10px 30px rgba(226, 223, 208, 0.2);
    }