*{box-sizing:border-box}
    html,body{margin:0;padding:0;background:linear-gradient(180deg,var(--bg),#071022);color:var(--text);font-family:Inter, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";}
    a{color:var(--text);text-decoration:none}
    img{max-width:100%;display:block}
    .container{width:100%;max-width:1280px;margin:0 auto;padding:0 28px}

    /* Header */
    header{position:sticky;top:0;z-index:1000;background:rgba(8,13,26,.55);backdrop-filter:blur(10px);border-bottom:1px solid rgba(255,255,255,.06)}
    .nav{display:flex;align-items:center;justify-content:space-between;height:86px}
    .brand{font-weight:900;letter-spacing:.4px;font-size:clamp(20px,2.6vw,28px);line-height:1.1}
    nav ul{display:flex;list-style:none;gap:28px;margin:0;padding:0}
    nav a{color:var(--muted)}
    nav a:hover{color:var(--text)}
    .cta-btn{display:inline-flex;align-items:center;gap:10px;background:linear-gradient(135deg,var(--brand),var(--brand-2));color:#071022;padding:12px 18px;border-radius:12px;font-weight:800}
    .lang-switch{display:flex;gap:10px;align-items:center}
    .lang-btn{border:1px solid rgba(255,255,255,.16);background:transparent;color:var(--muted);padding:8px 12px;border-radius:12px;cursor:pointer}
    .lang-btn.active{color:#071022;background:linear-gradient(135deg,var(--brand),var(--brand-2));border-color:transparent;font-weight:800}

    /* Hero */
    .hero{position:relative;overflow:hidden}
    .hero-inner{display:grid;grid-template-columns:1.15fr 1fr;gap:var(--gap-lg);padding:110px 0}
    .badge{display:inline-flex;align-items:center;gap:8px;border:1px solid rgba(255,255,255,.12);color:var(--muted);padding:10px 14px;border-radius:999px;background:rgba(255,255,255,.04)}
    .hero h1{font-size:clamp(36px,6vw,64px);line-height:1.03;margin:22px 0}
    .hero p{font-size:20px;color:var(--muted);max-width:60ch}
    .hero-card{background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.02));border:1px solid rgba(255,255,255,.08);border-radius:var(--radius-lg);padding:22px;box-shadow:var(--shadow)}
    .hero-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:18px;margin-top:18px}
    .stat{background:var(--card);border:1px solid rgba(255,255,255,.06);border-radius:14px;padding:18px}
    .stat h3{margin:8px 0 2px 0;font-size:22px}
    .stat p{margin:0;color:var(--muted)}

    .hero-art{position:relative}
    .truck-img{border-radius:20px;overflow:hidden;border:1px solid rgba(255,255,255,.08);box-shadow:0 40px 80px rgba(0,0,0,.55)}
    .floating-tag{position:absolute;right:-6px;bottom:-6px;background:#0b1327;border:1px solid rgba(255,255,255,.10);padding:12px 16px;border-radius:14px;display:flex;gap:10px;align-items:center}
    .dot{width:10px;height:10px;border-radius:50%;background:#22c55e;box-shadow:0 0 14px #22c55e}

    /* Sections */
    section{padding:92px 0}
    .section-head{display:flex;align-items:flex-end;justify-content:space-between;margin-bottom:28px;gap:16px}
    .section-head h2{margin:0;font-size:clamp(26px,3vw,36px)}
    .section-sub{color:var(--muted);margin-top:8px;font-size:18px}

    .cards{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gap);margin-top:10px}
    .card{background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.02));border:1px solid rgba(255,255,255,.08);border-radius:var(--radius);padding:24px;min-height:160px}
    .card h3{margin:10px 0 6px}
    .chip{display:inline-block;border:1px solid rgba(255,255,255,.12);padding:8px 12px;border-radius:999px;color:var(--muted);font-size:14px}

    /* Team */
    .team{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--gap)}
    .person{display:flex;gap:40px;align-items:center;background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.02));border:1px solid rgba(255,255,255,.08);border-radius:var(--radius);padding:30px}
    .avatar{width:72px;height:72px;border-radius:50%;overflow:hidden;border:1px solid rgba(255,255,255,.1);flex:0 0 72px}
    .avatar img{width:100%;height:100%;object-fit:cover}
    .person h4{margin:0;font-size:18px}
    .person p{margin:4px 0 0;color:var(--muted)}
    .person a{color:var(--brand)}

    /* CTA */
    .cta{background:radial-gradient(1200px 500px at 20% -20%, rgba(35,213,227,.15), transparent), radial-gradient(900px 400px at 120% 0%, rgba(10,132,255,.18), transparent);border-top:1px solid rgba(255,255,255,.06);border-bottom:1px solid rgba(255,255,255,.06)}
    .cta-inner{display:grid;grid-template-columns:1.1fr 1fr;gap:var(--gap);align-items:center}
    .cta-card{background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.02));border:1px solid rgba(255,255,255,.08);border-radius:var(--radius);padding:22px}
    .cta-actions{display:flex;gap:14px;flex-wrap:wrap;margin-top:14px}
    .btn{display:inline-flex;align-items:center;gap:10px;padding:14px 18px;border-radius:14px;font-weight:800}
    .btn.primary{background:linear-gradient(135deg,var(--brand),var(--brand-2));color:#061128}
    .btn.secondary{border:1px solid rgba(255,255,255,.16);color:var(--text)}
    .wa-icon{width:18px;height:18px;display:inline-block}

    /* Footer */
    footer{border-top:1px solid rgba(255,255,255,.06);padding:40px 0;color:var(--muted)}
    .footer-grid{display:grid;grid-template-columns:1fr auto;gap:18px;align-items:center}

    /* Responsive */
    @media (max-width: 1080px){
      .hero-inner, .cta-inner{grid-template-columns:1fr}
      .cards{grid-template-columns:1fr 1fr}
      .team{grid-template-columns:1fr}
    }
    @media (max-width: 640px){
      nav ul{display:none}
      .cards{grid-template-columns:1fr}
      .hero-inner{padding:64px 0}
    }

/* === Interactive card hover  ========================================= */
.card {
    position: relative;
    overflow: hidden;
    transition: transform .45s cubic-bezier(.2, .7, .3, 1),
        box-shadow .45s,
        background .45s;
}

.card:hover {
    transform: translateY(-8px) scale(1.03);
    background: linear-gradient(135deg, var(--brand) 0%, var(--brand-2)100%);
    box-shadow: 0 32px 70px rgba(0, 0, 0, .55);
}

.card:hover h3,
.card:hover p,
.card:hover .chip {
    color: #fff
}

/* pop-up layer */
.card--details {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 32px;
    text-align: center;
    background: rgba(0, 0, 0, .55);
    backdrop-filter: blur(6px);
    color: #fff;
    font-size: 16px;
    line-height: 1.4;
    opacity: 0;
    transition: opacity .35s ease-in-out;
}

.card:hover .card--details {
    opacity: 1
}

/* Operation Managers: hover to expand and focus card */

.team{ gap: 44px; }

.person {
    transition: transform .4s cubic-bezier(.2, .7, .3, 1),
        box-shadow .4s ease,
        background .4s ease,
        padding .4s ease;
    will-change: transform;
    transform-origin: center;
}

.person:hover {
    transform: translateY(-12px) scale(1.08);
    box-shadow: 0 40px 100px rgba(0, 0, 0, .6);
    background: linear-gradient(180deg, rgba(255, 255, 255, .12), rgba(255, 255, 255, .06));
    padding: 24px;
    z-index: 5;
}

.avatar {
    transition: transform .4s ease;
}

.person:hover .avatar {
    transform: scale(1.15);
}

/* WhatsApp contact buttons */
.contact-links {
    display: flex;
    gap: 8px;
    align-items: center;
    margin-top: 8px;
}

.wa-contact {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #25d366;
    color: white;
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    transition: background .3s ease;
}

.wa-contact:hover {
    background: #1da851;
    color: white;
}

.wa-icon-small {
    width: 14px;
    height: 14px;
}

/* Clients: infinite logo carousel */
.clients{ border-top:1px solid rgba(255,255,255,.06); }
.logo-ticker{
  position: relative;
  overflow: hidden;
  mask-image: linear-gradient(to right, transparent, black 8%, black 92%, transparent);
}
.logo-track{
  display: flex;
  gap: 48px;
  padding: 20px 0;
  animation: ticker-scroll 28s linear infinite;
}
.logo-item{
  flex: 0 0 auto;
  width: 140px; height: 64px;
  display:flex; align-items:center; justify-content:center;
  border:1px solid rgba(255,255,255,.10);
  border-radius: 12px;
  background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
  box-shadow: 0 8px 24px rgba(0,0,0,.25) inset;
}
.logo-item img{ max-width: 80%; max-height: 70%; opacity:.9 }

@keyframes ticker-scroll{
  0%{ transform: translateX(0); }
  100%{ transform: translateX(-50%); }
}

/* Partners/Subcontractors list */
.partners{ border-top:1px solid rgba(255,255,255,.06); }

.partner-grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* 3 per row on desktop */
  gap: 20px; /* tighter gap */
  margin-top: 10px;
}

.partner-card{
  background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
  border:1px solid rgba(255,255,255,.08);
  border-radius: 12px;        /* smaller radius */
  padding: 14px;              /* smaller padding */
}

.partner-card h4{ margin: 0 0 4px 0; font-size:16px }
.partner-meta{ color: var(--muted); line-height:1.45; margin:0 }

/* Responsive: 2 cols on tablets, 1 col on mobile */
@media (max-width: 1080px){
  .partner-grid{ grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px){
  .partner-grid{ grid-template-columns: 1fr; }
}