/* Animations */
    
    @keyframes fadeInUp {
      from {
        opacity: 0;
        transform: translateY(20px);
      }
      to {
        opacity: 1;
        transform: translateY(0);
      }
    }

    @keyframes slideIn {
      from {
        opacity: 0;
        transform: translateX(-30px);
      }
      to {
        opacity: 1;
        transform: translateX(0);
      }
    }

    @keyframes pulse {
      0% { transform: scale(1); }
      50% { transform: scale(1.05); }
      100% { transform: scale(1); }
    }

    @keyframes shine {
      from { transform: translateX(-100%) rotate(35deg); }
      to { transform: translateX(200%) rotate(35deg); }
    }

    @keyframes float {
      0% { transform: translateY(0px); }
      50% { transform: translateY(-10px); }
      100% { transform: translateY(0px); }
    }

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

    @keyframes highlight {
      0% { background-position: -100% 0; }
      100% { background-position: 200% 0; }
    }

    /* Additional Styles */
    .section-title {
      font-size: 2.5rem;
      margin-bottom: 2rem;
      position: relative;
      display: inline-block;
    }

    .section-title::after {
      content: '';
      position: absolute;
      bottom: -10px;
      left: 0;
      width: 60%;
      height: 4px;
      background: linear-gradient(90deg, var(--primary-color), var(--accent-color));
      border-radius: 2px;
      animation: highlight 3s linear infinite;
      background-size: 200% 100%;
    }

    .accent-gradient {
      background: linear-gradient(120deg, #60a5fa, #3b82f6, #1d4ed8);
      background-size: 200% 200%;
      -webkit-background-clip: text;
      background-clip: text;
      color: transparent;
      animation: gradientMove 5s ease infinite;
    }

    .floating-element {
      animation: float 3s ease-in-out infinite;
    }

    .highlight-card {
      position: relative;
      overflow: hidden;
      transition: all 0.3s ease;
      border: 1px solid rgba(96, 165, 250, 0.2);
    }

    .highlight-card::before {
      content: '';
      position: absolute;
      top: -50%;
      left: -50%;
      width: 200%;
      height: 200%;
      background: linear-gradient(
        45deg,
        transparent,
        rgba(96, 165, 250, 0.1),
        transparent
      );
      transform: rotate(45deg);
      animation: shine 3s infinite;
    }

    .highlight-card:hover {
      transform: translateY(-5px);
      box-shadow: 0 10px 20px rgba(37, 99, 235, 0.15);
      border-color: rgba(96, 165, 250, 0.4);
    }

    /* -----------------------------
       RESET / BASE
       ----------------------------- */
    :root{
      --accent:#1e40af;
      --accent-2:#3b82f6;
      --muted:#64748b;
      --bg:#f7fbff;
      --card:#ffffff;
      --glass: rgba(255,255,255,0.7);
      --radius:18px;
      --shadow: 0 12px 30px rgba(15,23,42,0.08);
      --nav-height:72px;
    }
    *{box-sizing:border-box}
    @import url('https://fonts.googleapis.com/css2?family=Quicksand:wght@400;500;600;700&family=DM+Sans:wght@400;500;700&display=swap');
        html,body{height:100%; margin:0; color:#0f172a; background:var(--bg); -webkit-font-smoothing:antialiased}
    a{color:inherit; text-decoration:none}
    img{max-width:100%; display:block; height:auto}

    /* -----------------------------
       NAVBAR
       ----------------------------- */

       
    .navbar{
      position:fixed;
      top:0; left:0; right:0;
      height:var(--nav-height);
      display:flex; align-items:center;
      background:rgba(255,255,255,0.7);
      backdrop-filter: blur(6px);
      z-index:1200;
      box-shadow: 0 6px 18px rgba(15,23,42,0.06);
    }
    .nav-container{
      width:100%; max-width:1200px; margin:0 auto; padding:0 20px;
      display:flex; align-items:center; justify-content:space-between;
    }
    .logo{
      display:flex; 
      align-items:center; 
      gap:12px;
      position: relative;
      overflow: hidden;
    }
    .logo-img{
      width:48px; 
      height:48px; 
      object-fit:contain; 
      border-radius:8px;
      transition: transform 0.3s ease;
    }
    .logo:hover .logo-img {
      transform: scale(1.1);
    }
    .logo::after {
      content: '';
      position: absolute;
      top: 0;
      width: 50px;
      height: 100%;
      background: rgba(255,255,255,0.4);
      animation: shine 3s infinite;
    }
    .logo-text h1{
      font-size:1.15rem; 
      margin:0; 
      letter-spacing:0.2px; 
      font-family:'Quicksand',sans-serif;
      animation: slideIn 0.5s ease;
    }
    .logo-text .tagline{
      display:block; 
      font-size:0.78rem; 
      color:var(--muted); 
      margin-top:2px; 
      font-family:'DM Sans',sans-serif;
      animation: slideIn 0.5s ease 0.2s forwards;
      opacity: 0;
    }

    .nav-right{display:flex; align-items:center; gap:20px}
    .nav-links{display:flex; gap:18px; list-style:none; margin:0; padding:0; align-items:center}
    .nav-links a{
      padding:8px 6px; 
      color:#0b1220; 
      font-weight:600; 
      opacity:0.95;
      position: relative;
      transition: color 0.3s ease;
    }
    .nav-links a::after {
      content: '';
      position: absolute;
      bottom: 0;
      left: 50%;
      width: 0;
      height: 2px;
      background: linear-gradient(90deg,var(--accent-2),var(--accent));
      transition: width 0.3s ease, left 0.3s ease;
    }
    .nav-links a:hover::after {
      width: 100%;
      left: 0;
    }
    .nav-links a.active{
      color:var(--accent);
    }
    .nav-links a.active::after {
      width: 100%;
      left: 0;
    }
    .nav-cta{
      background:linear-gradient(90deg,var(--accent-2),var(--accent));
      color:white; 
      border:0; 
      padding:10px 16px; 
      border-radius:10px; 
      cursor:pointer; 
      font-weight:700;
      box-shadow: 0 8px 25px rgba(59,130,246,0.18);
      transition: transform 0.3s ease, box-shadow 0.3s ease;
      animation: pulse 2s infinite;
    }
    .nav-cta:hover {
      transform: translateY(-3px);
      box-shadow: 0 12px 30px rgba(59,130,246,0.25);
    }

    /* hamburger */
   .hamburger {
    display: none;
    flex-direction: column;
    gap: 6px;
    cursor: pointer;
    padding: 0.5rem;
    z-index: 1001;
}

.hamburger span {
    width: 25px;
    height: 2px;
    background-color: var(--text-color);
    transition: all 0.3s ease;
    transform-origin: 1px;
}

.hamburger.active span:first-child {
    transform: rotate(45deg);
}

.hamburger.active span:nth-child(2) {
    opacity: 0;
}

.hamburger.active span:last-child {
    transform: rotate(-45deg);
}

.mobile-menu {
    position: fixed;
    top: var(--nav-height);
    left: 0;
    width: 100%;
    height: calc(100vh - var(--nav-height));
    background: var(--white);
    padding: 2rem;
    transform: translateY(-150%);
    transition: transform 0.3s ease-in-out;
    z-index: 998;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    display: flex;
    flex-direction: column;
    align-items: center;
    backdrop-filter: blur(10px);
}

.mobile-menu.active {
    transform: translateY(0);
}

.mobile-nav-links {
    list-style: none;
    padding: 0;
    margin: 0;
    width: 100%;
    text-align: center;
}

.mobile-nav-links li {
    margin-bottom: 1.5rem;
    opacity: 0;
    transform: translateY(-20px);
    transition: all 0.3s ease;
}

.mobile-menu.active .mobile-nav-links li {
    opacity: 1;
    transform: translateY(0);
}

.mobile-menu.active .mobile-nav-links li:nth-child(1) { transition-delay: 0.1s; }
.mobile-menu.active .mobile-nav-links li:nth-child(2) { transition-delay: 0.2s; }
.mobile-menu.active .mobile-nav-links li:nth-child(3) { transition-delay: 0.3s; }
.mobile-menu.active .mobile-nav-links li:nth-child(4) { transition-delay: 0.4s; }
.mobile-menu.active .mobile-nav-links li:nth-child(5) { transition-delay: 0.5s; }

.mobile-nav-links a {
    display: block;
    font-size: 1.4rem;
    color: var(--text-color);
    text-decoration: none;
    padding: 1rem 0;
    transition: color 0.3s ease;
    font-weight: 500;
}

.mobile-nav-links a:hover,
.mobile-nav-links a.active {
    color: var(--primary-color);
}

.mobile-cta {
    width: 80%;
    max-width: 300px;
    background: var(--background-gradient);
    color: var(--white);
    border: none;
    padding: 1rem;
    border-radius: 50px;
    font-size: 1.1rem;
    font-weight: 600;
    margin-top: 2rem;
    cursor: pointer;
    transition: all 0.3s ease;
    opacity: 0;
    transform: translateY(20px);
}

.mobile-menu.active .mobile-cta {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 0.6s;
}

.mobile-cta:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.2);
}

@media (max-width: 768px) {
    .nav-links, .nav-cta {
        display: none;
    }

    .hamburger {
        display: flex;
    }
}

    /* -----------------------------
       HERO
       ----------------------------- */
    .hero {
      padding-top: calc(var(--nav-height) + 28px);
      padding-bottom: 60px;
      position: relative;
      overflow: hidden;
      background: linear-gradient(135deg, 
        rgba(59,130,246,0.03) 0%,
        rgba(255,255,255,0) 50%,
        rgba(30,64,175,0.03) 100%
      );
    }

    .hero::before {
      content: '';
      position: absolute;
      top: -50%;
      left: -50%;
      width: 200%;
      height: 200%;
      background: radial-gradient(
        circle,
        rgba(59,130,246,0.03) 0%,
        transparent 70%
      );
      animation: rotate-hero-bg 25s linear infinite;
    }

    @keyframes rotate-hero-bg {
      0% { transform: rotate(0deg); }
      100% { transform: rotate(360deg); }
    }

    .hero-content {
      max-width: 1400px;
      margin: 0 auto;
      padding: 40px 20px;
      display: grid;
      grid-template-columns: 700px 1fr;
      gap: 60px;
      align-items: center;
      position: relative;
      z-index: 1;
    }

    /* left text */
    .hero-badges {
      display: flex;
      gap: 12px;
      margin-bottom: 20px;
      flex-wrap: wrap;
    }

    .badge {
      background: rgba(255,255,255,0.95);
      border: 1px solid rgba(59,130,246,0.2);
      color: var(--accent);
      padding: 10px 16px;
      border-radius: 999px;
      font-weight: 700;
      display: inline-flex;
      gap: 10px;
      align-items: center;
      font-size: 0.92rem;
      transition: all 0.4s ease;
      animation: fadeInUp 0.5s ease forwards;
      opacity: 0;
      box-shadow: 0 4px 15px rgba(59,130,246,0.1);
      position: relative;
      overflow: hidden;
    }

    .badge::before {
      content: '';
      position: absolute;
      top: -50%;
      left: -50%;
      width: 200%;
      height: 200%;
      background: linear-gradient(
        45deg,
        transparent,
        rgba(59,130,246,0.1),
        transparent
      );
      transform: rotate(45deg);
      animation: shine 3s infinite;
    }

    .badge:hover {
      transform: translateY(-5px);
      box-shadow: 0 8px 20px rgba(59,130,246,0.15);
      border-color: var(--accent-2);
    }

    .badge i {
      font-size: 1.1rem;
      background: linear-gradient(135deg, var(--accent), var(--accent-2));
      -webkit-background-clip: text;
      background-clip: text;
      color: transparent;
    }

    .animated-text {
      font-size: 2.8rem;
      line-height: 1.2;
      margin: 0 0 20px;
      color: #071233;
      font-weight: 800;
      font-family: 'Quicksand', sans-serif;
      opacity: 0;
      animation: fadeInUp 0.5s ease 0.2s forwards;
      position: relative;
      display: inline-block;
    }

    .animated-text::after {
      content: '';
      position: absolute;
      bottom: -8px;
      left: 0;
      width: 100px;
      height: 4px;
      background: linear-gradient(90deg, var(--accent-2), var(--accent));
      border-radius: 2px;
      animation: widthGrow 1s ease forwards;
      transform-origin: left;
    }

    @keyframes widthGrow {
      from { width: 0; }
      to { width: 100px; }
    }

    .hero-description {
      color: var(--muted);
      margin-bottom: 25px;
      max-width: 560px;
      opacity: 0;
      animation: fadeInUp 0.5s ease 0.4s forwards;
      font-size: 1.1rem;
      line-height: 1.7;
      position: relative;
      padding-left: 20px;
      border-left: 3px solid var(--accent-2);
      background: linear-gradient(90deg, 
        rgba(59,130,246,0.03),
        transparent
      );
      padding: 15px 20px;
      border-radius: 0 10px 10px 0;
    }

    .cta-buttons{display:flex; gap:12px; flex-wrap:wrap}
    .primary-btn{background:linear-gradient(90deg,var(--accent-2),var(--accent)); color:white; padding:12px 18px; border-radius:12px; border:0; font-weight:700; display:inline-flex; gap:10px; align-items:center; cursor:pointer; box-shadow: 0 14px 30px rgba(59,130,246,0.14)}
    .outline-btn{background:white; border:2px solid rgba(13,42,89,0.06); padding:12px 16px; border-radius:12px; display:inline-flex; gap:10px; align-items:center; cursor:pointer; font-weight:700}
    .cleaning-nav-link,
    .cleaning-cta {
      color: #6d28d9 !important;
      font-weight: 800;
    }

    .cleaning-nav-link {
      border: 1px solid rgba(124, 58, 237, 0.3);
      border-radius: 999px;
      padding: 0.55rem 0.9rem !important;
      background: linear-gradient(135deg, rgba(237, 233, 254, 0.95), rgba(250, 245, 255, 0.95));
      box-shadow: 0 5px 16px rgba(124, 58, 237, 0.14);
    }

    .cleaning-nav-link::before { display: none; }

    .cleaning-cta {
      position: relative;
      overflow: hidden;
      background: linear-gradient(135deg, #7c3aed, #a855f7 55%, #c026d3);
      color: #fff !important;
      padding: 12px 18px;
      border-radius: 12px;
      display: inline-flex;
      gap: 10px;
      align-items: center;
      cursor: pointer;
      box-shadow: 0 12px 28px rgba(124, 58, 237, 0.32);
      animation: cleaningPulse 2.8s ease-in-out infinite;
    }

    .cleaning-cta::after {
      content: '';
      position: absolute;
      inset: 0;
      background: linear-gradient(105deg, transparent 25%, rgba(255,255,255,0.38) 50%, transparent 75%);
      transform: translateX(-120%);
      animation: cleaningShimmer 3.8s ease-in-out infinite;
    }

    .cleaning-cta > * { position: relative; z-index: 1; }

    @keyframes cleaningPulse {
      0%, 100% { transform: translateY(0); box-shadow: 0 12px 28px rgba(124, 58, 237, 0.32); }
      50% { transform: translateY(-2px); box-shadow: 0 16px 34px rgba(124, 58, 237, 0.48); }
    }

    @keyframes cleaningShimmer {
      0%, 35% { transform: translateX(-120%); }
      70%, 100% { transform: translateX(120%); }
    }

    @media (prefers-reduced-motion: reduce) {
      .cleaning-cta,
      .cleaning-cta::after { animation: none; }
    }

    @keyframes float-shadow {
      0%, 100% { 
        box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.15),
                   0 0 30px rgba(59, 130, 246, 0.2); 
      }
      50% { 
        box-shadow: 0 35px 60px -15px rgba(59, 130, 246, 0.25),
                   0 0 50px rgba(59, 130, 246, 0.3); 
      }
    }

    @keyframes spotlight {
      0%, 100% { 
        background-position: -50% 0%;
        opacity: 0.7;
      }
      50% { 
        background-position: 150% 0%;
        opacity: 0.9;
      }
    }

    /* right visual stack */
    .image-stack {
      position: relative;
      width: 100%;
      max-width: 700px;
      margin: 0 auto;
      animation: fadeInUp 0.5s ease 0.6s forwards;
      opacity: 0;
    }

    .main-image {
      border-radius: 30px;
      overflow: hidden;
      background: linear-gradient(180deg,#fff, #fbfcff);
      transform-style: preserve-3d;
      perspective: 1000px;
      position: relative;
      animation: float-shadow 6s ease-in-out infinite;
      border: 3px solid rgba(59, 130, 246, 0.15);
      transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    }

    .main-image::before {
      content: '';
      position: absolute;
      inset: 0;
      background: linear-gradient(
        45deg,
        rgba(59, 130, 246, 0.4),
        transparent 40%,
        rgba(30, 64, 175, 0.4)
      );
      mix-blend-mode: overlay;
      z-index: 1;
      animation: gradientMove 8s ease-in-out infinite;
    }

    .main-image::after {
      content: '';
      position: absolute;
      inset: 0;
      background: linear-gradient(
        90deg,
        transparent,
        rgba(255, 255, 255, 0.4),
        transparent
      );
      transform: translateX(-100%);
      animation: spotlight 6s ease-in-out infinite;
      z-index: 2;
    }

    .main-image img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
      aspect-ratio: 16/10;
      transition: all 0.7s cubic-bezier(0.4, 0, 0.2, 1);
      filter: brightness(1.2) contrast(1.08) saturate(1.15);
      transform: translateZ(0) scale(1.02);
    }

    .main-image:hover {
      border-color: rgba(59, 130, 246, 0.4);
      transform: translateY(-10px) scale(1.02);
    }

    .main-image:hover img {
      transform: scale(1.1);
      filter: brightness(1.25) contrast(1.1) saturate(1.2);
    }

    .image-overlay {
      position: absolute;
      inset: 0;
      border-radius: 30px;
      pointer-events: none;
      background: linear-gradient(
        180deg,
        transparent,
        rgba(59,130,246,0.03)
      );
    }

    /* Removed floating cards */

    /* subtle floating animation for main image */
    .floating { transform-origin:center; animation: floaty 6s ease-in-out infinite; }
    @keyframes floaty {
      0% { transform: translateY(0px) }
      50% { transform: translateY(-10px) }
      100% { transform: translateY(0px) }
    }

    /* -----------------------------
       FEATURES & SERVICE CARDS
       ----------------------------- */
    .section{padding:48px 0}
    .container{max-width:1200px;margin:0 auto;padding:0 20px}
    .features-grid{
      display:grid; 
      grid-template-columns:repeat(4,1fr); 
      gap:18px;
      margin-top: 30px;
    }
    .feature-item{
      background:linear-gradient(180deg,#fff,#fbfdff); 
      padding:28px 22px; 
      border-radius:18px; 
      text-align:center; 
      box-shadow:var(--shadow); 
      border:1px solid rgba(13,42,89,0.04);
      transition: all 0.4s ease;
      position: relative;
      overflow: hidden;
    }
    .feature-item::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: linear-gradient(120deg, rgba(59,130,246,0.03), rgba(30,64,175,0.03));
      opacity: 0;
      transition: opacity 0.4s ease;
    }
    .feature-item:hover {
      transform: translateY(-5px);
      box-shadow: 0 15px 30px rgba(37, 99, 235, 0.1);
    }
    .feature-item:hover::before {
      opacity: 1;
    }
    .feature-item i{
      font-size:2rem; 
      background: linear-gradient(120deg, var(--accent-2), var(--accent));
      -webkit-background-clip: text;
      background-clip: text;
      color: transparent;
      margin-bottom:15px;
      display: inline-block;
      transition: transform 0.3s ease;
    }
    .feature-item:hover i {
      transform: scale(1.2);
    }
    .feature-item h3{
      margin:6px 0 12px; 
      font-size:1.15rem;
      color: var(--accent);
      position: relative;
      display: inline-block;
    }
    .feature-item p{
      color:var(--muted); 
      font-size:0.95rem; 
      margin:0;
      line-height: 1.6;
    }

    .services-grid {
      display: grid;
      grid-template-columns: repeat(3,1fr);
      gap: 30px;
      margin-top: 40px;
      position: relative;
    }

    .service-card {
      background: linear-gradient(180deg,#fff,#fbfdff);
      border-radius: 24px;
      overflow: hidden;
      box-shadow: var(--shadow);
      border: 1px solid rgba(13,42,89,0.04);
      transition: all 0.4s ease;
      position: relative;
      z-index: 1;
    }

    .service-card:hover {
      transform: translateY(-10px);
      box-shadow: 0 25px 50px rgba(37, 99, 235, 0.15);
    }

    .service-image-wrapper {
      position: relative;
      overflow: hidden;
      height: 240px;
    }

    .service-image {
      width: 100%;
      height: 100%;
      object-fit: cover;
      transition: transform 0.6s ease;
    }

    .service-card:hover .service-image {
      transform: scale(1.1);
    }

    .service-image-overlay {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: linear-gradient(to bottom, 
        rgba(30, 64, 175, 0.1),
        rgba(59, 130, 246, 0.05)
      );
      opacity: 0;
      transition: opacity 0.4s ease;
    }

    .service-card:hover .service-image-overlay {
      opacity: 1;
    }

    .service-content {
      padding: 25px;
      position: relative;
    }

    .service-content::before {
      content: '';
      position: absolute;
      top: 0;
      left: 50%;
      transform: translateX(-50%);
      width: 90%;
      height: 3px;
      background: linear-gradient(90deg, transparent, var(--accent-2), transparent);
      opacity: 0;
      transition: opacity 0.4s ease;
    }

    .service-card:hover .service-content::before {
      opacity: 1;
    }

    .service-content h3 {
      margin: 0 0 15px;
      font-size: 1.4rem;
      font-weight: 700;
      background: linear-gradient(135deg, var(--accent), var(--accent-2));
      -webkit-background-clip: text;
      background-clip: text;
      color: transparent;
    }

    .service-description {
      color: var(--muted);
      margin-bottom: 20px;
      line-height: 1.6;
    }

    .service-list {
      list-style: none;
      padding: 0;
      margin: 15px 0;
      color: var(--muted);
    }

    .service-list li {
      margin: 10px 0;
      display: flex;
      gap: 12px;
      align-items: center;
      font-size: 0.95rem;
      transition: transform 0.3s ease;
    }

    .service-list li i {
      color: var(--accent-2);
      font-size: 1.1rem;
    }

    .service-list li:hover {
      transform: translateX(5px);
    }

    .service-link {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 12px 20px;
      border-radius: 12px;
      background: linear-gradient(90deg,var(--accent-2),var(--accent));
      color: white;
      font-weight: 700;
      transition: all 0.3s ease;
      margin-top: 10px;
    }

    .service-link:hover {
      transform: translateY(-2px);
      box-shadow: 0 10px 20px rgba(37, 99, 235, 0.2);
    }

    .service-link i {
      transition: transform 0.3s ease;
    }

    .service-link:hover i {
      transform: translateX(4px);
    }

    /* About block card (to insert after mission) — fancy card */
    .who-card{
      margin-top:24px;
      display:flex; 
      gap:24px; 
      align-items:center; 
      padding:32px; 
      border-radius:24px;
      background: linear-gradient(135deg, 
        rgba(59,130,246,0.08) 0%,
        rgba(37,99,235,0.06) 50%,
        rgba(30,64,175,0.04) 100%
      );
      box-shadow: 0 15px 35px rgba(2,6,23,0.06);
      border:1px solid rgba(59,130,246,0.1);
      position: relative;
      overflow: hidden;
      transition: all 0.4s ease;
    }
    .who-card::before {
      content: '';
      position: absolute;
      top: -50%;
      left: -50%;
      width: 200%;
      height: 200%;
      background: radial-gradient(
        circle,
        rgba(59,130,246,0.08),
        transparent 70%
      );
      transform: rotate(0deg);
      animation: rotate-gradient 15s linear infinite;
    }
    @keyframes rotate-gradient {
      0% { transform: rotate(0deg); }
      100% { transform: rotate(360deg); }
    }
    .who-card:hover {
      transform: translateY(-5px);
      box-shadow: 0 20px 40px rgba(2,6,23,0.08);
    }
    .who-badge{
      background: linear-gradient(135deg, var(--accent-2), var(--accent));
      padding: 10px 16px;
      border-radius: 999px;
      font-weight: 800;
      color: white;
      box-shadow: 0 8px 20px rgba(59,130,246,0.15);
      transition: all 0.3s ease;
      position: relative;
      z-index: 1;
    }
    .who-card:hover .who-badge {
      transform: scale(1.05);
      box-shadow: 0 10px 25px rgba(59,130,246,0.2);
    }
    .who-content {
      position: relative;
      z-index: 1;
    }
    .who-content h3{
      margin:0 0 12px; 
      font-size:1.4rem;
      background: linear-gradient(135deg, var(--accent), var(--accent-2));
      -webkit-background-clip: text;
      background-clip: text;
      color: transparent;
      font-weight: 800;
    }
    .who-content p{
      color:var(--muted); 
      margin:0;
      line-height: 1.7;
      font-size: 1.02rem;
    }

    /* Quick highlights */
    .highlights{display:flex; gap:12px; margin-top:16px; flex-wrap:wrap}
    .highlight-card{background:white; padding:14px 18px; border-radius:12px; box-shadow:var(--shadow); min-width:140px; text-align:center}
    .highlight-card .num{font-size:1.2rem; font-weight:800; color:var(--accent)}
    .highlight-card .label{color:var(--muted); font-size:0.9rem}

    /* CONTACT */
    .contact{padding:48px 0; background:linear-gradient(180deg,#fff,#f8fbff)}
    .contact-content{display:grid; grid-template-columns:1fr 360px; gap:24px}
    .contact-form{background:white; padding:20px; border-radius:14px; box-shadow:var(--shadow)}
    .form-group{display:flex; flex-direction:column; gap:8px; margin-bottom:12px}
    .form-group input, .form-group textarea, .form-group select{padding:10px;border-radius:8px;border:1px solid rgba(13,42,89,0.06); font-size:0.95rem}
    .submit-button{background:linear-gradient(90deg,var(--accent-2),var(--accent)); color:white; padding:12px 16px; border-radius:10px; border:0; cursor:pointer; font-weight:800}

    .contact-info{background:linear-gradient(180deg,#fff,#fbfdff); padding:18px; border-radius:12px; box-shadow:var(--shadow)}
    .info-item{display:flex; gap:12px; align-items:center; margin-bottom:12px}
    .info-item i{font-size:1.25rem; color:var(--accent)}

    /* Footer styles moved to footer.css */

    /* -----------------------------
       RESPONSIVE
       ----------------------------- */
    @media (max-width:1400px){
      .hero-content{
        max-width: 1200px;
        grid-template-columns: 600px 1fr;
      }
      .image-stack{max-width: 600px;}
    }
    @media (max-width:1100px){
      .hero-content{
        grid-template-columns: 1fr;
        gap: 40px;
      }
      .image-stack{max-width: 700px;}
      .services-grid{grid-template-columns:repeat(2,1fr)}
      .features-grid{grid-template-columns:repeat(2,1fr)}
    }
    @media (max-width:880px){
      .hero-content{gap:30px; padding-bottom:8px}
      .image-stack{max-width:500px; margin-left:auto; margin-right:auto}
      .floating-card{position:static; transform:none; width:100%; right:auto; margin-top:12px}
      .stats-card{order:1}
      .review-card{order:2}
      .mobile-menu{right:12px}
    }
    @media (max-width:720px){
      .nav-links{display:none}
      .hamburger{display:flex}
      .nav-cta{display:none}
      .mobile-menu{width:92%; left:4%; right:4%}
      .features-grid{grid-template-columns:1fr}
      .services-grid{grid-template-columns:1fr}
      .contact-content{grid-template-columns:1fr}
      .footer-content{grid-template-columns:1fr 1fr}
      .hero-badges{justify-content:flex-start}
      .animated-text{font-size:1.6rem}
      .main-image img{aspect-ratio: 4/3; object-position:center}
      .who-card{flex-direction:column; align-items:flex-start}
    }

    /* small nicety: active hamburger animation */
    .hamburger.active span:nth-child(1){ transform: translateY(9px) rotate(45deg) }
    .hamburger.active span:nth-child(2){ opacity:0 }
    .hamburger.active span:nth-child(3){ transform: translateY(-9px) rotate(-45deg) }

    /* subtle reveal transitions */
    .reveal{opacity:1; transform:none; transition:all .7s cubic-bezier(.2,.9,.2,1)}
    .reveal.visible{opacity:1; transform:none}

    /* Floating WhatsApp Button */
    .whatsapp-float {
      position: fixed;
      bottom: 30px;
      right: 30px;
      background: #25D366;
      color: white;
      width: 60px;
      height: 60px;
      border-radius: 50%;
      text-align: center;
      font-size: 30px;
      display: flex;
      align-items: center;
      justify-content: center;
      text-decoration: none;
      box-shadow: 2px 2px 15px rgba(0, 0, 0, 0.15);
      transition: all 0.3s ease;
      z-index: 1000;
    }

    .whatsapp-float:hover {
      transform: scale(1.1);
      box-shadow: 2px 2px 20px rgba(37, 211, 102, 0.3);
    }

    .whatsapp-float::after {
      content: '';
      position: absolute;
      width: 100%;
      height: 100%;
      background: #25D366;
      border-radius: 50%;
      z-index: -1;
      animation: pulse-whatsapp 2s infinite;
    }

    @keyframes pulse-whatsapp {
      0% {
        transform: scale(1);
        opacity: 0.5;
      }
      70% {
        transform: scale(1.3);
        opacity: 0;
      }
      100% {
        transform: scale(1.3);
        opacity: 0;
      }
    }

    @media (max-width: 768px) {
      .whatsapp-float {
        bottom: 20px;
        right: 20px;
        width: 50px;
        height: 50px;
        font-size: 25px;
      }
    }