:root{
      --brand:#ffd700;          /* gold */
      --bg:#0f172a;             /* slate-900 */
      --bg-2:#0b1220;           /* deep navy */
      --text:#e5e7eb;           /* gray-200 */
      --muted:#94a3b8;          /* slate-400 */
      --card:#1f2937;           /* gray-800 */
      --accent:#22c55e;         /* green */
      --accent-2:#06b6d4;       /* cyan */
      --danger:#dc3545;         /* red */
      --success:#28a745;        /* green2 */
    }
    *{box-sizing:border-box}
    html{scroll-behavior:smooth}
    
    
    
    body {
      background: linear-gradient(-45deg, #1e3a8a, #6d28d9, #0d9488, #3b82f6, #9333ea, #14b8a6);
      background-size: 400% 400%;
      animation: gradientShift 8s ease-in-out infinite;
      color: var(--text);
    }
    @keyframes gradientShift {
      0%, 100% { background-position: 0% 50%; }
      50% { background-position: 100% 50%; }
    }
    @keyframes pulse-glow {
      0% { box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.6); transform: scale(1); }
      50% { box-shadow: 0 0 0 25px rgba(37, 211, 102, 0); transform: scale(1.05); }
      100% { box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.6); transform: scale(1); }
    }
    .whatsapp-float {
      animation: pulse-glow 8s ease-in-out infinite;
    }

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

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


    /* ========== 01) HEADER / NAV ========== */
    .site-header{position:sticky;top:0;z-index:1000;background:linear-gradient(180deg,rgba(156, 107, 241, 0.97),rgba(155, 232, 162, 0.9));backdrop-filter:saturate(140%) blur(6px);border-bottom:1px solid rgba(148,163,184,.15)}
    .nav-wrap{max-width:1200px;margin:auto;display:flex;align-items:center;justify-content:space-between;padding:14px 20px}
    .brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--text)}
    .brand img{width:150px;height:150px;object-fit:contain;border-radius:10px;background:#111;border:1px solid rgba(255,255,255,.08)}
    .brand .name{font-size:4.5rem;font-weight:900;letter-spacing:.4px;color: #f71818;}

    .nav{display:flex;align-items:center;gap:6px}
    .nav a{display:inline-block;padding:10px 12px;border-radius:10px;color:var(--text);text-decoration:none;font-weight:800;font-size:.96rem;opacity:.9;transition:all .2s ease;color: #000;}
    .nav a:hover{opacity:1;background:rgba(246, 238, 238, 0.06)}
    .nav a.active{background:var(--brand);color:#030303}

    .nav-toggle{display:none;cursor:pointer;border:1px solid rgba(243, 245, 248, 0.25);padding:8px 10px;border-radius:10px;background:#0b1220;color:var(--text)}
    .nav-toggle:focus{outline:2px solid var(--brand)}
    @media (max-width: 900px){
      .nav{position:fixed;right:16px;top:70px;flex-direction:column;background:#0b1220;border:1px solid rgba(148,163,184,.2);padding:10px;border-radius:12px;display:none}
      .nav.open{display:flex}
      .nav-toggle{display:inline-flex;align-items:center;gap:8px}
    }

    /* ===== Base sections & utilities ===== */
    section{min-height:100vh;display:flex;align-items:center;justify-content:center;text-align:center;padding:120px 20px 80px;scroll-margin-top:90px}
    .container{max-width:1200px;margin:auto}
    .two-col{display:grid;grid-template-columns:1.1fr .9fr;gap:26px;align-items:center}
    @media (max-width: 900px){.two-col{grid-template-columns:1fr}}

    .reveal{opacity:0;transform:translateY(22px);transition:opacity .8s ease, transform .8s ease}
    .reveal.visible{opacity:1;transform:none}

    .btn{display:inline-flex;align-items:center;gap:8px;padding:12px 16px;border-radius:12px;border:1px solid rgba(255,255,255,.15);text-decoration:none;font-weight:800;cursor:pointer}
    .btn-primary{background:var(--brand);color:#111;border-color:transparent}
    .btn-ghost{background:rgba(255,255,255,.06);color:var(--text)}
    .btn:disabled{opacity:.6;cursor:not-allowed}

    .section-head{display:flex;flex-direction:column;gap:8px;margin-bottom:26px}
    .section-eyebrow{color:var(--accent-2);font-weight:800;letter-spacing:.14em;text-transform:uppercase;font-size:.8rem}
    .section-title{font-size:clamp(1.7rem,4vw,2.4rem);font-weight:900}
    .muted{color:var(--muted)}

    /* ========== 02) HERO (HOME) ========== */
    #home{position:relative;isolation:isolate;background:linear-gradient(180deg,#0b1020 0%, #0a0f1a 100%)}
    .hero-bg{position:absolute;inset:0;background:url('images/hero\ background.jpg') center/cover no-repeat;z-index:-2;opacity:.8}
    .hero-overlay{position:absolute;inset:0;background:radial-gradient(80% 70% at 50% 30%, rgba(173, 198, 232, 0.15), rgba(146, 142, 142, 0.85));z-index:-1}
    .hero h1{font-size:clamp(2.1rem,5vw,3.6rem);font-weight:900;line-height:1.1;margin:0}
    .hero p{font-size:clamp(1rem,2.2vw,1.2rem);color:#d1d5db;margin:10px auto 0;max-width:850px}
    .cta{margin-top:18px;display:flex;gap:12px;justify-content:center;flex-wrap:wrap}

    /* ========== 03) ABOUT US ========== */
    #about{background:linear-gradient(180deg,#0a0f1a 0%, #0b1220 100%)}
    .about-img{width:100%;height:340px;border-radius:16px;border:1px solid rgba(148,163,184,.2);background:#0b1220 url('images/about.jpg') center/cover no-repeat}

    /* ========== 04) PRODUCTS ========== */
    #products{background:linear-gradient(180deg,#0b1220 0%, #08101c 100%)}
    .grid{display:grid;grid-template-columns:repeat(12,1fr);gap:18px}
    .card{grid-column:span 4;background:var(--card);border:1px solid rgba(148,163,184,.15);border-radius:16px;padding:14px;text-align:left;display:flex;flex-direction:column;gap:10px;transition:transform .2s, box-shadow .2s}
    .card:hover{transform:translateY(-4px);box-shadow:0 10px 24px rgba(0,0,0,.35)}
    .thumb{width:100%;height:170px;border-radius:12px;background:#0b1220;overflow:hidden;border:1px solid rgba(148,163,184,.15);display:flex;align-items:center;justify-content:center}
    .thumb img{width:100%;height:100%;object-fit:cover}
    .card h3{margin:6px 0 0;font-size:1.06rem}
    .card p{margin:0 0 8px;color:#cbd5e1;font-size:.95rem}
    .card .actions{margin-top:auto;display:flex;gap:8px}
    .enq{background:var(--brand);color:#111;border:none}
    @media (max-width:1024px){.card{grid-column:span 6}}
    @media (max-width:640px){.card{grid-column:span 12}}
    .brands{margin-top:24px;display:flex;gap:18px;flex-wrap:wrap;justify-content:center;opacity:.95}
    .brands img{height:80px;filter:none(100%);opacity:.9;transition:all .2s}
    .brands img:hover{filter:none;opacity:1}

    /* ========== 05) SERVICES ========== */
    #services{background:linear-gradient(180deg,#08101c 0%, #071018 100%)}
    .service-card{grid-column:span 4;background:var(--card);border:1px solid rgba(148,163,184,.15);border-radius:16px;padding:14px;text-align:left;display:flex;gap:12px;align-items:flex-start}
    .svc-img{flex:0 0 68px;height:68px;border-radius:12px;background:#0b1220;border:1px solid rgba(148,163,184,.18);overflow:hidden}
    .svc-img img{width:100%;height:100%;object-fit:cover}
    .service-card h4{margin:2px 0 4px;font-size:1.04rem}
    .service-card p{margin:0 0 8px;color:#cbd5e1;font-size:.95rem}

    /* ========== 06) SOFTWARE ========== */
    #software{background:linear-gradient(180deg,#071018 0%, #060e16 100%)}

    /* ========== 07) SPARE PARTS ========== */
    #spares{background:linear-gradient(180deg,#060e16 0%, #060c14 100%)}

    /* ========== 08) CONTACT (Form + toast) ========== */
    #contact{background:linear-gradient(180deg,#060c14 0%, #060a10 100%)}
    .contact-wrap{max-width:680px;margin:auto;background:rgba(0,0,0,.35);border:1px solid rgba(148,163,184,.15);padding:22px;border-radius:16px;text-align:left}
    .contact-wrap label{display:block;margin:10px 0 6px;font-weight:700}
    .contact-wrap input,.contact-wrap textarea{width:100%;padding:12px;border-radius:10px;border:1px solid rgba(148,163,184,.25);background:#0b1220;color:var(--text);font-size:1rem}
    .contact-wrap textarea{height:130px;resize:vertical}
    .pill{display:inline-block;padding:6px 10px;border-radius:999px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.15);font-size:.85rem;margin-left:8px}

    /* Spinner */
    .spinner{border:3px solid rgba(255,255,255,.3);border-top:3px solid var(--brand);border-radius:50%;width:18px;height:18px;animation:spin 1s linear infinite;display:inline-block;vertical-align:middle;margin-right:8px}
    @keyframes spin{0%{transform:rotate(0)}100%{transform:rotate(360deg)}}

    /* Toast (top-right) */
    #toast{visibility:hidden;min-width:280px;background:#333;color:#fff;border-radius:10px;padding:14px 40px 14px 14px;position:fixed;z-index:9999;top:20px;right:20px;font-size:1rem;opacity:0;transition:opacity .5s, transform .5s;transform:translateY(-20px)}
    #toast.show{visibility:visible;opacity:1;transform:translateY(0)}
    #toast.success{background:var(--success)}
    #toast.error{background:var(--danger)}
    #toast-close{position:absolute;top:8px;right:12px;font-size:1.1rem;font-weight:900;cursor:pointer}

    footer{padding:34px 20px;text-align:center;color:#a3aab8;border-top:1px solid rgba(148,163,184,.15);background:#060a10}

    /* WhatsApp Floating Button */
    .whatsapp-float {
      position: fixed;
      width: 60px;
      height: 60px;
      bottom: 20px;
      right: 20px;
      background-color: #25d366;
      color: #fff;
      border-radius: 50%;
      text-align: center;
      font-size: 32px;
      box-shadow: 0 4px 8px rgba(0,0,0,0.3);
      z-index: 10000;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: transform 0.2s ease;
    }
    
    @keyframes pulse-old {
      0% { transform: scale(1); }
      50% { transform: scale(1.1); }
      100% { transform: scale(1); }
    }
    .whatsapp-float {
      animation: pulse-glow 2s infinite;
    }

    .whatsapp-float:hover {
      transform: scale(1.1);
      color: #fff;
    }

  
    section {
      opacity: 0;
      transform: translateY(20px);
      animation: fadeInUp 1.2s ease forwards;
    }
    section:nth-of-type(1) { animation-delay: 0.3s; }
    section:nth-of-type(2) { animation-delay: 0.6s; }
    section:nth-of-type(3) { animation-delay: 0.9s; }
    section:nth-of-type(4) { animation-delay: 1.2s; }
    section:nth-of-type(5) { animation-delay: 1.5s; }
    section:nth-of-type(6) { animation-delay: 1.8s; }
    section:nth-of-type(7) { animation-delay: 2.1s; }
    section:nth-of-type(8) { animation-delay: 2.4s; }
    @keyframes fadeInUp {
      from { opacity: 0; transform: translateY(20px); }
      to { opacity: 1; transform: translateY(0); }
    }


    section {
      opacity: 0;
      transform: translateY(20px);
      transition: opacity 1s ease, transform 1s ease;
    }
    section.visible {
      opacity: 1;
      transform: translateY(0);
    }


    section .stagger {
      opacity: 0;
      transform: translateY(20px);
      transition: opacity 0.8s ease, transform 0.8s ease;
    }
    section.visible .stagger {
      opacity: 1;
      transform: translateY(0);
    }


    #hero {
      background-attachment: fixed;
      background-position: center;
      background-size: cover;
      position: relative;
      z-index: 1;
    }
    #hero::before {
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: rgba(0, 0, 0, 0.4);
      z-index: -1;
    }
    /* Refined animations for smoother, more professional look */
    .stagger {
      opacity: 0;
      transform: translateY(40px);
      transition: opacity 0.9s cubic-bezier(0.25, 0.8, 0.25, 1), transform 0.9s cubic-bezier(0.25, 0.8, 0.25, 1);
    }
    section.visible .stagger {
      opacity: 1;
      transform: translateY(0);
    }


    .btn {
      transition: all 0.3s ease;
      position: relative;
      overflow: hidden;
      z-index: 1;
    }
    .btn::before {
      content: "";
      position: absolute;
      top: 0;
      left: -100%;
      width: 100%;
      height: 100%;
      background: linear-gradient(120deg, rgba(255,255,255,0.3), rgba(255,255,255,0));
      transition: all 0.4s ease;
      z-index: -1;
    }
    .btn:hover::before {
      left: 100%;
    }
    .btn:hover {
      box-shadow: 0 0 15px rgba(255, 255, 255, 0.4);
      transform: translateY(-2px);
    }