:root {
  --bg:#0f172a;
  --card:#1e293b;
  --accent:#38bdf8;
  --text:#e5e7eb;
  --muted:#9ca3af;

  --building-color:#ad72d4;
  --snowflake-color:#38bdf8;
  --fan-color:#60a5fa;
  --plug-color:#9aa6b9;
  --flame-color:#ef4444;
  --wrench-color:#d2d9e6;
  --rcd-color:#22c55e;
  --pole-color:#a16207;
  --lightbulb-color:#e4f360;
  --zap-color:#ecd38f;
}

html, body {
  min-height:100%;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: 100px; /* adjust to your header height */
}

body {
  margin:0;
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial;
  background:var(--bg);
  color:var(--text);
  font-size:115%;
  display:flex;
  flex-direction:column;
}

main {
  flex:1;
}

a {
  text-decoration:none;
  color:inherit;
}

.container {
  max-width:1150px;
  margin:0 auto;
  padding:20px;
}

/* HEADER */

.site-header {
  position:sticky;
  top:0;
  z-index:1000;
  background:rgba(15,23,42,0.8);
  backdrop-filter:blur(10px);
  border-bottom:1px solid rgba(255,255,255,0.05);
}

.header-inner {
  display:flex;
  justify-content:space-between;
  align-items:center;
}

.brand {
  font-size:1.8rem;
  font-weight:600;
}

.nav a {
  margin:0 10px;
  padding:6px 10px;
  border-radius:10px;
  border:1px solid transparent;
  color:var(--muted);
  transition:all .25s ease;
}

.nav a:hover {
  color:var(--text);
  transform:translateY(-3px);
  border-color:rgba(255,255,255,0.1);
  box-shadow:0 6px 15px rgba(0,0,0,0.25);
}

/* BUTTONS */

.btn,
.btn-primary {
  display:inline-block;
  position:relative;
  overflow:hidden;
  padding:10px 16px;
  border-radius:10px;
  border:1px solid rgba(255,255,255,0.08);
  background:#1e293b;
  color:white;
  transition:transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s cubic-bezier(.2,.8,.2,1), background .2s ease;
  will-change:transform;
}

.btn-primary {
  background:var(--accent);
  color:#0f172a;
}

.btn::after,
.btn-primary::after {
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  background:radial-gradient(circle at 50% 0%, rgba(255,255,255,0.18), transparent 65%);
  opacity:0;
  transition:.35s cubic-bezier(.2,.8,.2,1);
}

.btn:hover::after,
.btn-primary:hover::after {
  opacity:1;
}

.btn:hover,
.btn-primary:hover {
  transform:translateY(-3px) scale(1.01);
  box-shadow:0 10px 24px rgba(0,0,0,0.35);
}

.btn:active,
.btn-primary:active {
  transform:translateY(-1px) scale(0.99);
  box-shadow:0 5px 15px rgba(0,0,0,0.4);
}

/* HERO */

.hero {
  padding:80px 20px;
  text-align:center;
}

.hero h2 {
  font-size:40px;
  margin-bottom:10px;
}

.lead {
  color:var(--muted);
}

/* SERVICES */

.services {
  padding:50px 0;
}

.grid {
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:20px;
}

.card {
  font-size:0.9rem;
  background:var(--card);
  padding:20px;
  border-radius:16px;
  border:1px solid transparent;
  cursor:pointer;
  transition:transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s cubic-bezier(.2,.8,.2,1), border-color .2s ease;
  will-change:transform;
}

.card:hover {
  transform:translateY(-4px) scale(1.01);
  border-color:rgba(56,189,248,0.6);
  box-shadow:0 10px 24px rgba(0,0,0,0.35);
}

.card:hover .icon {
  transform:scale(1.05);
  transition:transform .35s cubic-bezier(.2,.8,.2,1);
}

.icon {
  width:32px;
  height:32px;
  color:var(--accent);
}

.small {
  color:var(--muted);
}

/* ABOUT */

.about {
  padding:0 0 30px;
}

/* CTA */

.cta-strip {
  background:var(--card);
  text-align:center;
  padding:40px 20px;
}

/* GALLERY */

.gallery {
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
  gap:15px;
}

.gallery img {
  width:100%;
  height:400px;
  border-radius:12px;
  object-fit:cover;
  object-position:center;
  transition:.25s ease;
}

.gallery img:hover {
  transform:scale(1.05);
}

.see-more {
  text-align:center;
  padding:50px 0;
}

/* CONTACT */

.contact-grid {
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:20px;
}

.contact-card {
  background:var(--card);
  padding:20px;
  border-radius:16px;
  transition:.25s ease;
}

.contact-card:hover {
  transform:translateY(-5px);
  box-shadow:0 10px 25px rgba(0,0,0,0.4);
}

input,
textarea,
select {
  font-family:sans-serif;
  box-sizing:border-box;
  width:100%;
  padding:10px;
  margin-bottom:10px;
  border-radius:8px;
  border:none;
  background:#334155;
  color:white;
}

.contact button {
  cursor:pointer;
}

/* FOOTER */

footer {
  padding:20px;
  text-align:center;
  color:var(--muted);
}

/* HEADER STATE */

.site-header.scrolled {
  box-shadow:0 6px 20px rgba(0,0,0,0.5);
}