:root{
      --bg:#0f1724; /* deep navy */
      --card:#0b1220;
      --muted:#94a3b8;
      --accent:#7c5cff; /* purple */
      --accent-2:#ffb347; /* orange */
      --glass: rgba(255,255,255,0.04);
      --glass-2: rgba(255,255,255,0.03);
      --white:#f8fafc;
      --success:#22c55e;
      --danger:#ef4444;
      font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
    }
    *{box-sizing:border-box}
    html,body{height:100%}
    body{
      margin:0;
      background: radial-gradient(1200px 600px at 10% 10%, rgba(124,92,255,0.12), transparent),
                  radial-gradient(900px 400px at 90% 90%, rgba(255,179,71,0.06), transparent),
                  var(--bg);
      color:var(--white);
      -webkit-font-smoothing:antialiased;
      -moz-osx-font-smoothing:grayscale;
      line-height:1.45;
      padding-bottom:120px; /* space for sticky footer */
    }
    .container{max-width:1150px;margin:0 auto;padding:28px}

    /* Header */
    header{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:12px 0}
    .brand{display:flex;align-items:center;gap:12px}
    .logo{
      width:54px;height:54px;border-radius:12px;
      background:linear-gradient(135deg,var(--accent),var(--accent-2));
      display:grid;place-items:center;font-weight:700;color:#061024;box-shadow:0 6px 18px rgba(124,92,255,0.12),0 2px 6px rgba(0,0,0,0.5)
    }
    .logo img{
        animation: logoGlow 3s ease-in-out infinite;
        width:98%;height:98%;
    }
    .brand h1{font-size:18px;margin:0}
    nav{display:flex;gap:18px;align-items:center}
    nav a{color:var(--muted);text-decoration:none;font-weight:600}
    nav a:hover{color:var(--white)}

    /* Mobile nav */
    .hamburger{display:none;background:transparent;border:0;color:var(--white);font-size:22px}
    @media (max-width:880px){nav{display:none}.hamburger{display:block}}

    /* Hero */
    .hero{display:grid;grid-template-columns:1fr 420px;gap:28px;align-items:center;padding:24px 0}
    .eyebrow{display:inline-block;padding:6px 10px;border-radius:999px;background:linear-gradient(90deg,rgba(124,92,255,0.12),rgba(255,179,71,0.06));color:var(--accent-2);font-weight:700;font-size:13px}
    .headline{font-size:36px;margin:12px 0 10px;color:var(--white);line-height:1.05}
    .sub{color:var(--muted);font-size:16px}
    .cta-row{margin-top:18px;display:flex;gap:12px;flex-wrap:wrap}
    .btn{padding:12px 18px;border-radius:10px;border:0;font-weight:700;cursor:pointer}
    .btn-primary{background:linear-gradient(90deg,var(--accent),#5f3bff);box-shadow:0 8px 30px rgba(124,92,255,0.16)}
    .btn-ghost{background:transparent;border:1px solid rgba(255,255,255,0.06);color:var(--white)}

    /* Feature cards */
    .services{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:24px}
    .card{background:linear-gradient(180deg,var(--glass),var(--glass-2));padding:18px;border-radius:14px;border:1px solid rgba(255,255,255,0.03)}
    .service h3{margin:8px 0 6px}
    .service p{color:var(--muted);font-size:14px}

    /* Right hero */
    .visual{background:linear-gradient(180deg, rgba(255,255,255,0.02), transparent);border-radius:14px;padding:18px;border:1px solid rgba(255,255,255,0.03)}
    .grid-small{display:grid;grid-template-columns:1fr 1fr;gap:12px}
    .stat{background:rgba(255,255,255,0.02);padding:12px;border-radius:10px}
    .stat h4{margin:0}

    /* About / Institute */
    .split{display:grid;grid-template-columns:1fr 420px;gap:24px;align-items:center;margin-top:40px}
    .institute-card{background:linear-gradient(90deg, rgba(124,92,255,0.06), rgba(255,179,71,0.03));padding:18px;border-radius:12px}

    /* Projects */
    .projects{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:24px}
    .project{padding:14px;border-radius:12px;background:linear-gradient(180deg, rgba(255,255,255,0.01), transparent);border:1px solid rgba(255,255,255,0.03)}

    /* Contact */
    .contact{margin-top:36px;padding:20px;border-radius:12px;background:linear-gradient(90deg, rgba(255,179,71,0.03), rgba(124,92,255,0.03));border:1px solid rgba(255,255,255,0.03)}
    form{display:grid;grid-template-columns:1fr 1fr;gap:12px}
    form input, form textarea{padding:12px;border-radius:10px;border:1px solid rgba(255,255,255,0.05);background:transparent;color:var(--white)}
    form textarea{grid-column:1/3;min-height:120px}

    /* Footer */
    footer.sticky{position:fixed;left:0;right:0;bottom:0;background:linear-gradient(180deg, rgba(6,10,20,0.9), rgba(6,10,20,0.98));backdrop-filter:blur(6px);padding:12px 0;box-shadow:0 -10px 30px rgba(2,6,23,0.6)}
    .footer-inner{max-width:1150px;margin:0 auto;display:flex;justify-content:space-between;align-items:center;padding:0 22px}
    .foot-links{display:flex;gap:14px}
    .small{color:var(--muted);font-size:13px}

    @media (max-width:1150px){.hero,.split{grid-template-columns:1fr;}.projects{grid-template-columns:repeat(2,1fr)}.services{grid-template-columns:repeat(2,1fr)} }
    @media (max-width:680px){.projects{grid-template-columns:1fr}.card{padding:14px}.container{padding:18px}.headline{font-size:28px}.visual{padding:12px}.brand h1{font-size:16px}}

    /* Micro animations */
    .pulse{animation:pulse 6s infinite}
    @keyframes pulse{0%{transform:translateY(0)}50%{transform:translateY(-6px)}100%{transform:translateY(0)}}

    /* subtle focus */
    input:focus,textarea:focus,button:focus{outline:2px solid rgba(124,92,255,0.14);outline-offset:2px}

    .service-icon {
      transition: filter 0.5s, transform 0.3s;
    }
    .service-icon:hover {
      filter: drop-shadow(0 0 10px var(--accent));
      transform: scale(1.05);
    }


    /*FOR CHAT US BUTTON*/
    /* Floating chat button */
    .chat-button {
      position: fixed;
      bottom: 50px;
      right: 24px;
      background: linear-gradient(135deg, #0070d8, #48b0ff);
      color: white;
      border: none;
      border-radius: 50px;
      padding: 14px 22px;
      font-weight: bold;
      font-size: 15px;
      cursor: pointer;
      box-shadow: 0 6px 20px rgba(0, 112, 216, 0.4);
      transition: all 0.3s ease;
      z-index: 9999; /* stays above everything */
    }

    .chat-button:hover {
      transform: scale(1.05);
      box-shadow: 0 0 25px rgba(72, 176, 255, 0.6);
    }

    /* Optional chat icon */
    .chat-button::before {
      content: "💬";
      margin-right: 8px;
    }

    #mobile-menu-screen{
      position: fixed;
      top: 0;
      left: 0;
      z-index: 1000;
      width: 100%;
      height: 100%;
      min-height: 100%;
      opacity: 1.0;
      display: none;
      background-color: #0f1724;
    }