:root{
  --bg:#050508; /* near black */
  --panel:#0b1220;
  --gold:#D4AF37;
  --gold-2:#b8912d;
  --blue-grad-start:#0f2027;
  --blue-grad-mid:#203a43;
  --blue-grad-end:#2c5364;
  --accent-purple:#6f42c1;
  --muted:#9aa4b2;
  --glass: rgba(255,255,255,0.04);
  --max-w:1200px;
  --radius:12px;
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
}

*{box-sizing:border-box}
html,body,#root{height:100%}
body{
  margin:0;
  background: linear-gradient(180deg,var(--bg), #071024 140%);
  color: #edf0f6;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  line-height:1.45;
  font-size:16px;
  padding-bottom:80px; /* ensure footer visible */
}

/* Site container */
.site{
  max-width:var(--max-w);
  margin:0 auto;
  padding:18px;
}

/* NAV (mobile-first) */
.nav{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:8px 0;
  position:sticky;
  top:0;
  z-index:50;
  backdrop-filter: blur(6px);
  background:linear-gradient(180deg, rgba(11,18,32,0.6), rgba(11,18,32,0.35));
  border-radius:14px;
}
.brand{
  display:flex;
  align-items:center;
  gap:10px;
  text-decoration:none;
  color:inherit;
}
.logo{
  width:48px;
  height:48px;
  display:inline-grid;
  place-items:center;
  background:linear-gradient(135deg,var(--gold), var(--gold-2));
  border-radius:10px;
  box-shadow: 0 6px 18px rgba(212,175,55,0.15), inset 0 -6px 16px rgba(0,0,0,0.25);
  font-weight:700;
  color:#06121b;
}
.nav-links{
  display:flex;
  gap:8px;
  align-items:center;
}
.nav-links a{
  color:var(--muted);
  text-decoration:none;
  padding:8px 10px;
  border-radius:8px;
  font-weight:600;
  transition:all .18s ease;
}
.nav-links a:hover,
.nav-links a:focus{
  color: #fff;
  transform:translateY(-2px);
  outline:none;
}
.cta{
  background: linear-gradient(90deg,var(--gold), #f0ce7a);
  color:#07121a;
  padding:10px 14px;
  border-radius:10px;
  font-weight:700;
  text-decoration:none;
  box-shadow:0 6px 18px rgba(212,175,55,0.15);
}

/* Hero */
.hero{
  display:grid;
  gap:18px;
  align-items:center;
  padding:28px 0 40px;
}
.hero-inner{
  background:linear-gradient(135deg, rgba(45,63,100,0.18), rgba(95,63,120,0.06));
  border-radius:14px;
  padding:20px;
  display:flex;
  flex-direction:column;
  gap:18px;
  box-shadow: 0 8px 30px rgba(2,6,23,0.6);
}
.headline{
  font-size:clamp(1.6rem, 4vw, 2.6rem);
  font-weight:800;
  letter-spacing:-0.02em;
  margin:0;
  background: linear-gradient(90deg, #fff, #e9e9ff 40%, var(--gold) 100%);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  line-height:1.02;
}
.sub{
  color:var(--muted);
  font-weight:500;
}
.hero-actions{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}
.btn{
  padding:10px 14px;
  border-radius:10px;
  text-decoration:none;
  font-weight:700;
  color:#fff;
  background:linear-gradient(90deg,var(--blue-grad-start),var(--blue-grad-end));
  box-shadow:0 8px 20px rgba(18,41,57,0.45);
  transition:transform .18s ease, box-shadow .18s ease;
}
.btn.secondary{
  background:transparent;
  color:var(--gold);
  border:1px solid rgba(212,175,55,0.15);
  box-shadow:none;
}
.btn:hover{ transform:translateY(-4px) }

/* Sections */
.section{
  margin-top:22px;
  padding:18px;
  border-radius:12px;
  background: linear-gradient(180deg, rgba(255,255,255,0.02), transparent);
  box-shadow: 0 6px 18px rgba(0,0,0,0.45);
}

/* About */
.about-grid{
  display:grid;
  gap:12px;
}

/* Services grid */
.services-grid{
  display:grid;
  grid-template-columns: repeat(1,1fr);
  gap:12px;
}
.service-card{
  display:flex;
  gap:12px;
  align-items:flex-start;
  padding:14px;
  border-radius:12px;
  background:rgba(255,255,255,0.02);
  transition:transform .18s ease, box-shadow .18s ease;
  border:1px solid rgba(255,255,255,0.02);
}
.service-card:hover{
  transform:translateY(-8px) scale(1.01);
  box-shadow:0 14px 36px rgba(32,45,78,0.45);
  border-color: rgba(111,66,193,0.08);
}
.service-icon{
  width:56px;
  height:56px;
  border-radius:12px;
  display:grid;
  place-items:center;
  background:linear-gradient(135deg,var(--blue-grad-mid), var(--blue-grad-end));
  color: #fff;
  flex-shrink:0;
  box-shadow: inset 0 -6px 16px rgba(0,0,0,0.25);
}
.service-body h4{ margin:0 0 6px 0; font-size:1.05rem }
.service-body p{ margin:0; color:var(--muted); font-size:0.95rem }

/* Why choose us */
.benefits{
  display:grid;
  gap:10px;
}
.benefit{
  display:flex;
  gap:12px;
  align-items:flex-start;
  padding:12px;
  border-radius:10px;
  background:linear-gradient(90deg, rgba(111,66,193,0.06), rgba(212,175,55,0.02));
}

/* Contact form */
.contact-grid{
  display:grid;
  gap:12px;
}
.form-row{
  display:flex;
  gap:10px;
  flex-direction:column;
}
.input, textarea{
  width:100%;
  padding:12px;
  border-radius:10px;
  border:1px solid rgba(255,255,255,0.04);
  background:transparent;
  color:inherit;
  outline:none;
  transition:box-shadow .12s ease, border-color .12s ease;
}
.input:focus, textarea:focus{
  box-shadow:0 8px 20px rgba(12,24,40,0.6);
  border-color:var(--gold);
}
.row-2{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }

/* Portfolio simple */
.portfolio-grid{
  display:grid;
  grid-template-columns: repeat(1,1fr);
  gap:10px;
}
.portfolio-card{
  height:160px;
  border-radius:12px;
  overflow:hidden;
  background:linear-gradient(135deg, rgba(16,28,44,0.6), rgba(60,45,90,0.2));
  display:flex;
  align-items:flex-end;
  padding:12px;
}

/* Footer */
.footer{
  position:fixed;
  bottom:12px;
  left:50%;
  transform:translateX(-50%);
  background:linear-gradient(90deg, rgba(5,5,8,0.8), rgba(12,18,28,0.6));
  padding:12px 18px;
  border-radius:14px;
  display:flex;
  gap:16px;
  align-items:center;
  color:var(--muted);
  z-index:60;
  box-shadow:0 10px 40px rgba(2,6,23,0.6);
}
.footer .tag{ color:var(--gold); font-weight:700 }

/* WhatsApp floating button */
.whatsapp{
  position:fixed;
  right:18px;
  bottom:92px;
  width:64px;
  height:64px;
  border-radius:999px;
  background:linear-gradient(135deg,#25D366,#12B33E);
  display:grid;
  place-items:center;
  box-shadow:0 12px 30px rgba(37,211,102,0.18);
  z-index:80;
  text-decoration:none;
  color:white;
}
.whatsapp svg{ width:28px;height:28px; }

/* Responsive adjustments */
@media (min-width:700px){
  .hero{ grid-template-columns: 1fr 380px; align-items:center; }
  .about-grid{ grid-template-columns: 1fr 360px; align-items:start; gap:18px; }
  .services-grid{ grid-template-columns: repeat(2, 1fr); }
  .portfolio-grid{ grid-template-columns: repeat(2, 1fr); }
  .row-2{ grid-template-columns: 1fr 1fr; }
}
@media (min-width:1100px){
  .site{ padding:28px; }
  .services-grid{ grid-template-columns: repeat(3, 1fr); }
  .portfolio-grid{ grid-template-columns: repeat(3, 1fr); }
}

/* Utilities for visually-hidden (accessibility) */
.sr-only{
  position:absolute!important;
  height:1px;width:1px;
  overflow:hidden;clip:rect(1px,1px,1px,1px);
  white-space:nowrap;border:0;padding:0;margin:-1px;
}