:root{
      --bg-dark:#071428;
      --panel:#071226;
      --text:#e6eef8;
      --muted:#94a3b8;
      --primary-1:#00d4ff;
      --primary-2:#3b82f6;
      --white-1: #e6eef8;
      --accent: linear-gradient(90deg,var(--primary-1),var(--primary-2));
      --glass: rgba(255,255,255,0.04);
      --radius:12px;
      --max-width:1200px;
    }

    *{box-sizing:border-box;margin:0;padding:0}
    html,body{height:100%}
    body{
      font-family:'Inter',system-ui,Segoe UI,Roboto,Arial;
      background: radial-gradient(circle at 10% 10%, #071428 0%, var(--bg-dark) 40%);
      color:var(--text);
      -webkit-font-smoothing:antialiased;
      line-height:1.5;
    }

    /* Header */
    header{
      position:absolute;left:0;right:0;top:0;
      display:flex;align-items:center;justify-content:space-between;
      padding:5px 10px;
      background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
      backdrop-filter: blur(8px);
      border-bottom:1px solid rgba(255,255,255,0.03);
      z-index:1000;
    }

    
    #logobase {
      width: 180px;
      height: 120px;
      display: block;
      

    }

    nav a{
      font-size: 20px;
      text-decoration: none;
      color: var(--muted);
      margin-left: 20px;
    }


    .brand{display:flex;align-items:center;gap:12px}
    .brand h1{font-size:60px;font-weight:700;color:var(--text);}

    nav a:hover{color:var(--white-1)}
    .cta-header{margin-left:18px;padding:8px 12px;border-radius:10px;background:var(--accent);color:#001;font-weight:700;border:none;cursor:pointer}

    /* Hero */
    .hero{
      min-height:55vh;
      display:flex;align-items:center;justify-content:center;
      padding:110px 24px 40px;
      text-align:center;
      gap:18px;
      flex-direction:column;
    }
    .hero h2{
      font-size:44px;
      background:var(--accent);
      -webkit-background-clip:text;
      -webkit-text-fill-color:transparent;
      margin-bottom:12px;
    }
    .hero p{max-width:920px;color:var(--muted);font-size:18px}

    /* Layout */
    .container{max-width:var(--max-width);margin:0 auto;padding:36px 20px}
    h2.section-title{font-size:28px;margin-bottom:8px}
    p.lead{color:var(--muted);margin-bottom:18px}

    /* Cards */
    .cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:18px;margin-top:18px}
    .card{
      background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
      border:1px solid rgba(255,255,255,0.03);
      padding:20px;border-radius:12px;
      min-height:140px;
    }
    .card h3{color:var(--text);margin-bottom:8px;font-size:18px}
    .card p{color:var(--muted);font-size:15px}

    /* Services detail with icons */
    .services-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:20px;margin-top:18px}
    .service{
      display:flex;gap:14px;align-items:flex-start;
      background:var(--panel);padding:18px;border-radius:12px;border:1px solid rgba(255,255,255,0.02)
    }
    .service svg{flex:0 0 48px;height:48px}
    .service h4{margin:0;color:var(--primary-1);font-size:16px}
    .service p{color:var(--muted);margin-top:6px;font-size:14px}

    /* Equipment & Partnerships section */
    .supply{
      display:grid;grid-template-columns:1fr 420px;gap:24px;align-items:start;margin-top:18px;
    }
    .supply .content{background:var(--panel);padding:20px;border-radius:12px;border:1px solid rgba(255,255,255,0.02)}
    .supply ul{margin-top:12px;color:var(--muted);list-style:none;padding-left:0}
    .supply li{padding:8px 0;border-bottom:1px dashed rgba(255,255,255,0.02)}
    .supply .partners{background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));padding:18px;border-radius:12px}

    /* Footer */
    footer{padding:28px 24px;margin-top:40px;border-top:1px solid rgba(255,255,255,0.03);color:var(--muted)}
    .footer-grid{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}

    /* WhatsApp floating button (kept as quick contact) */
    .whatsapp-float {
      position:fixed;
      right:20px;
      bottom:20px;
      background:rgb(59, 148, 59);
      color:#001;
      border-radius:999px;
      padding:12px 16px;
      display:flex;
      gap:10px;
      align-items:center;
      box-shadow:0 12px 30px rgba(3,102,214,0.18);
      z-index:1300;
      text-decoration:none;
      font-weight:700;
    }
    .whatsapp-float svg{height:20px;width:20px;flex:0 0 20px}

    a p {
      color: white;
    }

    a svg {
      color: white;
    }

    #logo_wpp {
      width: 30px;
      height: 30px;
    }

    @media (max-width:880px){
      .services-grid{grid-template-columns:1fr}
      .supply{grid-template-columns:1fr}
      header{padding:12px 16px}
      .hero h2{font-size:32px}
      .brand h1{display:none}
      .whatsapp-float{right:14px;bottom:18px;padding:10px 12px}
    }