:root{
  --bg:#0b0f14; --surface:#0f1620; --muted:#9fb0c6; --text:#eaf0f7;
  --brand:#c6a052; --accent:#1f7a8c; --ok:#16a34a; --warn:#d97706; --done:#0891b2;
  --shadow:0 10px 30px rgba(0,0,0,.35); --radius:18px; --gap:18px;
}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0; font-family:Inter, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial; color:var(--text); background:linear-gradient(180deg, #0a0e13 0%, #0b1118 100%);}
a{color:inherit; text-decoration:none}
img{max-width:100%; display:block}
.container{width:min(1200px, 92%); margin-inline:auto}

/* Header */
header{position:sticky; top:0; z-index:50; background:rgba(10,14,19,.8); backdrop-filter: blur(10px); border-bottom:1px solid rgba(255,255,255,.06)}
.nav{display:flex; align-items:center; justify-content:space-between; padding:14px 0}
.brand{display:flex; align-items:center; gap:10px; font-family:Poppins, Inter; font-weight:700}
.brand-logo{width:36px; height:36px; border-radius:10px; background:linear-gradient(135deg,var(--brand),#e9cd84); display:grid; place-items:center; color:#1a1a1a; box-shadow: var(--shadow)}
.nav a{opacity:.9}
.nav-links{display:flex; gap:18px; align-items:center}
.btn{display:inline-flex; align-items:center; gap:8px; padding:10px 14px; border-radius:12px; border:1px solid rgba(255,255,255,.1); background:#121a24; font-weight:600}
.btn.primary{background:linear-gradient(135deg, var(--brand), #e9cd84); color:#111; border:none}

/* Hero */
.hero{padding:64px 0 40px; background: radial-gradient(900px 400px at 70% -10%, rgba(198,160,82,.18), transparent 60%)}
.hero h1{font-family:Poppins, Inter; font-weight:700; font-size:clamp(28px, 5vw, 46px); margin:0 0 10px}
.hero p.lead{color:var(--muted); font-size:clamp(14px, 2.2vw, 18px)}
.hero-ctas{display:flex; gap:12px; flex-wrap:wrap; margin-top:18px}
.highlight{background:linear-gradient(135deg,var(--brand),#e9cd84); -webkit-background-clip:text; background-clip:text; color:transparent}

/* USP */
.usps{display:grid; grid-template-columns:repeat(4,1fr); gap:var(--gap); margin:32px 0}
.card{background:var(--surface); border:1px solid rgba(255,255,255,.06); border-radius:var(--radius); padding:18px; box-shadow:var(--shadow)}
.card h3{margin:0 0 6px; font-size:18px}
.muted{color:var(--muted)}

/* Projects */
.section-title{display:flex; align-items:end; justify-content:space-between; gap:10px; margin:48px 0 16px}
.section-title h2{font-family:Poppins; margin:0}
.filters{display:flex; gap:8px; flex-wrap:wrap}
.chip{padding:8px 12px; border-radius:999px; background:#121a24; border:1px solid rgba(255,255,255,.08); cursor:pointer; font-weight:600}
.chip.active{background:var(--brand); color:#111; border:none}

.grid{display:grid; grid-template-columns:repeat(3,1fr); gap:var(--gap)}
.project{overflow:hidden; position:relative}
.project .thumb{position:relative; border-radius:14px; overflow:hidden}
.badge{position:absolute; top:10px; left:10px; padding:6px 10px; border-radius:10px; font-weight:700; font-size:12px}
.badge.running{background:rgba(22,163,74,.18); color:#abf7c8; border:1px solid rgba(22,163,74,.35)}
.badge.completed{background:rgba(8,145,178,.18); color:#b7f0ff; border:1px solid rgba(8,145,178,.35)}
.badge.upcoming{background:rgba(217,119,6,.18); color:#ffd8a1; border:1px solid rgba(217,119,6,.35)}
.project .content{padding:12px 4px}
.title{font-weight:700}
.meta{display:flex; gap:12px; flex-wrap:wrap; color:var(--muted); font-size:14px}
.actions{display:flex; gap:10px; margin-top:10px; flex-wrap:wrap}

/* Numbers (if used) */
.numbers{display:grid; grid-template-columns:repeat(4,1fr); gap:var(--gap); margin:48px 0}
.stat h3{font-family:Poppins; font-size:28px; margin:0}

/* Testimonials (if used) */
.testimonials{display:grid; grid-template-columns:repeat(3,1fr); gap:var(--gap)}

/* Contact / Form */
form{display:grid; gap:12px}
input, select, textarea{background:#0c131c; color:#eaf0f7; border:1px solid rgba(255,255,255,.12); padding:12px 14px; border-radius:12px}
label{font-size:14px; color:var(--muted)}

/* Footer */
footer{margin-top:56px; padding:28px 0; border-top:1px solid rgba(255,255,255,.08); color:var(--muted)}
.footer-flex{display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap}
.footer-links{display:flex; gap:10px}

/* Modal */
.modal{position:fixed; inset:0; background:rgba(0,0,0,.6); display:none; align-items:center; justify-content:center; padding:20px; z-index:60}
.modal.active{display:flex}
.modal-card{width:min(900px,95%); background:var(--surface); border:1px solid rgba(255,255,255,.1); border-radius:16px; box-shadow:var(--shadow); overflow:hidden}
.modal-header{display:flex; align-items:center; justify-content:space-between; padding:14px 16px; border-bottom:1px solid rgba(255,255,255,.06)}
.modal-body{padding:16px}

/* Floating CTA */
.float-cta{position:fixed; right:16px; bottom:16px; display:flex; flex-direction:column; gap:10px; z-index:55}
.fab{display:inline-flex; align-items:center; gap:8px; padding:12px 14px; border-radius:999px; background:linear-gradient(135deg, var(--brand), #e9cd84); color:#111; font-weight:800; box-shadow:var(--shadow)}
.fab.secondary{background:#1b2836; color:#eaf0f7; border:1px solid rgba(255,255,255,.12)}

/* Responsive */
@media (max-width: 980px){
  .grid{grid-template-columns:1fr 1fr}
  .usps{grid-template-columns:1fr 1fr}
  .testimonials{grid-template-columns:1fr 1fr}
  .numbers{grid-template-columns:1fr 1fr}
}
@media (max-width: 640px){
  .grid{grid-template-columns:1fr}
  .usps,.testimonials,.numbers{grid-template-columns:1fr}
  .nav-links{display:none}
}

/* ===== Mobile Responsive Navbar ===== */
.site-header { position: sticky; top: 0; z-index: 9999; background:#000; }
.nav { display:flex; align-items:center; justify-content:space-between; padding:12px 0; position:relative; }
.nav-links { display:flex; gap:20px; align-items:center; }
.nav-links a { color:#fff; text-decoration:none; font-weight:500; }
.menu-toggle { display:none; font-size:26px; cursor:pointer; color:#fff; background:transparent; border:0; }

/* Mobile dropdown */
@media (max-width: 768px) {
  .nav-links {
    display:none;
    position:absolute;
    top:100%;           /* header के नीचे खुले */
    right:0;
    background:#111;
    flex-direction:column;
    gap:14px;
    padding:16px;
    width: min(85vw, 280px);
    border-radius:10px;
    box-shadow:0 12px 24px rgba(0,0,0,.5);
  }
  .nav-links.show { display:flex; }
  .menu-toggle { display:block; }
  /* buttons full width दिखें तो अच्छा लगता है */
  .nav-links .btn { width:100%; text-align:center; }
}

/* ===== Beautiful Basera Layout ===== */

/* Hero Section */
.hero-section{position:relative;width:100%;height:500px;overflow:hidden}
.hero-img{width:100%;height:100%;object-fit:cover}
.hero-overlay{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;color:#fff;text-align:center;padding:20px;
  background:linear-gradient(rgba(0,0,0,.6),rgba(0,0,0,.4))}
.hero-overlay h1{font-size:48px;font-weight:700;margin-bottom:10px}
.hero-subtitle{font-size:20px;margin-bottom:20px;opacity:.9}
.btn-whatsapp{background:#25D366;color:#fff;padding:14px 24px;border-radius:8px;font-weight:700;text-decoration:none;transition:background .3s}
.btn-whatsapp:hover{background:#20b558}

/* Sections */
.section{margin-top:60px}
.section-title{font-size:28px;margin-bottom:20px;text-align:center;font-weight:600}
.card{background:#111;padding:20px;border-radius:12px;box-shadow:0 4px 12px rgba(0,0,0,.4)}
.grid-2{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:15px}
.highlight-card{background:#1a1a1a;padding:15px;border-radius:8px;text-align:center;font-weight:500}

/* Specs Table */
.specs-table{width:100%;border-collapse:collapse}
.specs-table th,.specs-table td{border:1px solid rgba(255,255,255,.1);padding:10px;text-align:left}
.specs-table th{background:rgba(255,255,255,.05);font-weight:600}

/* Map */
.map-card{height:300px;border-radius:14px;overflow:hidden;box-shadow:0 4px 12px rgba(0,0,0,.4)}

/* Responsive */
@media (max-width:768px){
  .hero-section{height:350px}
  .hero-overlay h1{font-size:28px}
  .hero-subtitle{font-size:16px}
}
/* ===== Responsive Navbar (global, keep at end) ===== */
:root { --muted:#b8b8b8; }

.site-header{position:sticky; top:0; z-index:10000; background:#000;}
.nav{display:flex; align-items:center; justify-content:space-between; padding:12px 0; position:relative;}
.brand{display:flex; align-items:center; gap:10px;}
.brand-logo{width:36px; height:36px; border-radius:50%; background:#222; color:#fff; display:grid; place-items:center; font-weight:800;}
.nav-links{display:flex; gap:18px; align-items:center;}
.nav-links a{color:#fff; text-decoration:none; font-weight:500; opacity:.95;}
.btn{background:#ffa600; color:#000; padding:10px 14px; border-radius:8px; font-weight:700; text-decoration:none;}
.menu-toggle{display:none; font-size:26px; cursor:pointer; color:#fff; background:transparent; border:0;}

@media (max-width:768px){
  .menu-toggle{display:block;}
  .nav{position:relative;}
  .nav-links{
    display:none; position:absolute; top:100%; right:0;
    background:#111; padding:16px; border-radius:12px; width:min(86vw,320px);
    box-shadow:0 12px 24px rgba(0,0,0,.55);
    flex-direction:column; gap:14px;
  }
  .nav-links.show{display:flex;}
  .nav-links .btn{width:100%; text-align:center;}
}

/* Defensive: make sure hero overlays don't cover the header */
.hero, .hero-section, .hero-bg { position:relative; }