:root{
  --bg: #ffffff;
  --bg-soft: #f6f8fb;
  --text: #0b1220;
  --muted: #5a6577;
  --card: rgba(255,255,255,0.8);
  --border: rgba(0,0,0,0.08);
  --primary: #ebd67b;
  --primary-2: #f5e000;
  --accent: #ffb703;
  --shadow: 0 18px 60px rgba(10, 20, 40, .12);

  /* Focus color changes with theme */
  --focus: rgba(101, 126, 188, 0.45);
  --radius: 18px;
}

html[data-theme="dark"]{
  --bg: #070b12;
  --bg-soft: #0a1120;
  --text: #eaf0ff;
  --muted: #a6b1c6;
  --card: rgba(12,18,32,0.75);
  --border: rgba(255,255,255,0.10);
  --primary: #64769e;
  --primary-2: #cdff05;
  --accent: #ffd166;
  --shadow: 0 18px 70px rgba(0,0,0,.45);

  --focus: rgba(122,162,255,.55);
}


* { box-sizing: border-box; }
body{
  background: var(--bg);
  color: var(--text);
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  text-rendering: optimizeLegibility;
}

a{ color: inherit; }
img{ max-width: 100%; display: block; }

/* Accessibility focus */
:focus-visible{
  outline: 3px solid var(--focus);
  outline-offset: 3px;
  border-radius: 10px;
}
.btn:focus-visible,
.form-control:focus-visible,
.form-select:focus-visible{
  box-shadow: 0 0 0 0.25rem var(--focus) !important;
}

.fs-12{
  font-size: 12px !important;
}

/* Skip link */
.skip-link{
  position: absolute;
  left: 12px;
  top: -50px;
  padding: 10px 14px;
  background: var(--bg);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 12px;
  z-index: 9999;
  transition: top .2s ease;
}
.skip-link:focus{ top: 12px; }

.section-pad{ padding: 72px 0; }
.section-title{
  font-weight: 800;
  letter-spacing: -0.02em;
  margin-bottom: 10px;
}
.bg-soft{ background: var(--bg-soft); }

/* Topbar */
.topbar{
  background: color-mix(in srgb, var(--bg) 90%, transparent);
}
.link-muted{
  color: var(--muted);
  text-decoration: none;
}
.link-muted:hover{ text-decoration: underline; }

/* Navbar blur */
.navbar-blur{
  background: color-mix(in srgb, var(--bg) 80%, transparent);
  backdrop-filter: blur(10px);
}
.brand-mark{
  width: 100px; height: 100px;
  display: grid; place-items: center;
  border-radius: 14px;
  background: transparent;
  font-weight: 900;
}

/* Hero */
.hero{ position: relative; overflow: clip; }
.hero .eyebrow .badge{
  border-radius: 999px;
  padding: .5rem .75rem;
}
.text-gradient{
  background: linear-gradient(135deg, var(--primary), var(--primary-2));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.hero-card{
  border: 1px solid var(--border);
  background: var(--card);
  border-radius: calc(var(--radius) + 6px);
  box-shadow: var(--shadow);
  overflow: hidden;
}
.hero-card-body{ border-top: 1px solid var(--border); }

.hero-glow{
  position: absolute;
  inset: -200px -200px auto auto;
  width: 520px;
  height: 520px;
  background: linear-gradient(circle at 30% 30%, color-mix(in srgb, var(--primary) 35%, transparent), transparent 60%),
              linear-gradient(circle at 70% 70%, color-mix(in srgb, var(--primary-2) 35%, transparent), transparent 60%);
  filter: blur(14px);
  opacity: .9;
  pointer-events: none;
}

/* Stats */
.hero-stats{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}
.hero-stats .stat{
  padding: 12px 14px;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: var(--card);
}
.stat-num{
  font-weight: 900;
  font-size: 1.25rem;
  letter-spacing: -0.02em;
}
.stat-label{ color: var(--muted); font-size: .85rem; }

/* Chips */
.chip{
  display: inline-flex;
  gap: 8px;
  align-items: center;
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: color-mix(in srgb, var(--bg) 85%, transparent);
  color: var(--muted);
  font-size: .9rem;
}

/* Glass cards */
.glass{
  background: var(--card);
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
}

/* Photo grid */
.grid-photos{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
.photo-card{
  position: relative;
  overflow: hidden;
  border-radius: calc(var(--radius) + 10px);
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
  margin: 0;
}
.photo-card img{
  height: 210px;
  width: 100%;
  object-fit: cover;
  transform: scale(1.02);
  transition: transform .5s ease;
}
.photo-card:hover img{ transform: scale(1.08); }
.photo-card figcaption{
  position: absolute;
  left: 12px; bottom: 12px;
  padding: 8px 10px;
  border-radius: 14px;
  background: color-mix(in srgb, var(--bg) 78%, transparent);
  border: 1px solid var(--border);
  font-weight: 700;
}

/* Service cards */
.service-card{
  border: 1px solid var(--border);
  background: var(--card);
  box-shadow: var(--shadow);
  transition: transform .25s ease, border-color .25s ease;
}
.service-card:hover{
  transform: translateY(-4px);
  border-color: color-mix(in srgb, var(--primary) 35%, var(--border));
}
.icon-badge{
  width: 44px; height: 44px;
  display: grid; place-items: center;
  border-radius: 14px;
  background: color-mix(in srgb, var(--primary) 15%, transparent);
  color: color-mix(in srgb, var(--primary) 75%, var(--text));
  margin-bottom: 10px;
}

/* Feature cards */
.feature{
  border: 1px solid var(--border);
  background: var(--card);
  box-shadow: var(--shadow);
}
.feature-icon{
  width: 44px; height: 44px;
  display: grid; place-items: center;
  border-radius: 14px;
  background: color-mix(in srgb, var(--primary-2) 18%, transparent);
  margin-bottom: 10px;
}

/* Checklist */
.checklist{ padding-left: 1.2rem; }
.checklist li{ margin-bottom: 8px; color: var(--muted); }

/* Note */
.note{
  border: 1px dashed color-mix(in srgb, var(--primary) 35%, var(--border));
  background: color-mix(in srgb, var(--primary) 6%, var(--bg));
}
.note i{ color: color-mix(in srgb, var(--primary) 70%, var(--text)); }

/* Projects */
.project-card{
  border: 1px solid var(--border);
  background: var(--card);
  box-shadow: var(--shadow);
  overflow: hidden;
}
.project-card img{
  height: 190px;
  object-fit: cover;
}

/* Map */
.map-card{
  border: 1px solid var(--border);
  background: var(--card);
  box-shadow: var(--shadow);
  position: relative;
}
.map-card img{ height: 360px; width: 100%; object-fit: cover; }
.map-overlay{
  position: absolute;
  inset: auto 0 0 0;
  padding: 12px;
  background: linear-gradient(180deg, transparent, rgba(0,0,0,.45));
}

/* Contact links */
.contact-link{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid var(--border);
  text-decoration: none;
  color: var(--muted);
  background: color-mix(in srgb, var(--bg) 85%, transparent);
}
.contact-link:hover{ color: var(--text); border-color: color-mix(in srgb, var(--primary) 35%, var(--border)); }

/* Footer */
.footer{ background: color-mix(in srgb, var(--bg) 92%, transparent); }
.icon-link{
  width: 40px; height: 40px;
  display: grid; place-items: center;
  border-radius: 14px;
  border: 1px solid var(--border);
  text-decoration: none;
  color: var(--muted);
  background: color-mix(in srgb, var(--bg) 85%, transparent);
}
.icon-link:hover{ color: var(--text); }

/* Reveal animations */
.reveal{
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .7s ease, transform .7s ease;
}
.reveal.is-visible{
  opacity: 1;
  transform: translateY(0);
}

/* Floating Action Buttons */
.fab-stack{
  position: fixed;
  right: 16px;
  bottom: 18px;
  z-index: 9998;
  display: grid;
  gap: 10px;
  align-items: end;
}
.fab-main{
  width: 54px; height: 54px;
  border: none;
  border-radius: 18px;
  background: linear-gradient(135deg, var(--primary), var(--primary-2));
  color: #fff;
  box-shadow: var(--shadow);
}
.fab-menu{
  display: grid;
  gap: 10px;
  justify-items: end;
}
.fab-item{
  width: 48px; height: 48px;
  border-radius: 18px;
  display: grid; place-items: center;
  text-decoration: none;
  border: 1px solid var(--border);
  background: var(--card);
  box-shadow: var(--shadow);
  color: var(--text);
}
.fab-item.whatsapp{ color: #1db954; }
.fab-item:hover{ transform: translateY(-2px); transition: transform .15s ease; }


[aria-label="Filter services"]{
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  padding: 10px;
  border-radius: 16px;
  background: color-mix(in srgb, var(--bg) 92%, transparent);
  border: 1px solid var(--border);
}

/* Base button */
[aria-label="Filter services"] .btn{
  position: relative;
  padding: 8px 18px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--muted);
  background: transparent;
  border: 1px solid var(--border);
  transition: 
    background 0.25s ease,
    color 0.25s ease,
    transform 0.2s ease,
    box-shadow 0.25s ease;
}

/* Hover */
[aria-label="Filter services"] .btn:hover{
  color: var(--text);
  background: color-mix(in srgb, var(--primary) 10%, transparent);
  transform: translateY(-1px);
}

/* Active tab */
[aria-label="Filter services"] .btn.active{
  color: #fff;
  background: linear-gradient(
    135deg,
    var(--primary),
    var(--primary-2)
  );
  border-color: transparent;
  box-shadow: 0 8px 30px color-mix(in srgb, var(--primary) 35%, transparent);
}

/* Focus (Keyboard accessibility) */
[aria-label="Filter services"] .btn:focus-visible{
  outline: none;
  box-shadow:
    0 0 0 3px var(--focus) !important,
    0 8px 30px color-mix(in srgb, var(--primary) 35%, transparent) !important;
}

.form-control:focus{
  border-color:#8e873c !important;
  box-shadow: 0 0 0 0.25rem rgb(195, 195, 105) !important;
} 
.form-select:focus{
  border-color:#8e873c !important;
  box-shadow: 0 0 0 0.2rem rgb(195, 195, 105) !important;
} 
.nav-item .nav-link:focus{
  color: #f8cb01 !important;
}
.nav-item .nav-link:hover{
  color: #b9990a !important;
}
.f-small{
  font-size: 14px;
  color: rgb(159,163,168);
}
/* Small screens */
@media (max-width: 576px){
  [aria-label="Filter services"]{
    justify-content: center;
  }
}

/* Responsive tweaks */
@media (max-width: 992px){
  .hero-stats{ grid-template-columns: 1fr; }
  .grid-photos{ grid-template-columns: 1fr 1fr; }
}
@media (max-width: 576px){
  .grid-photos{ grid-template-columns: 1fr; }
  .map-card img{ height: 280px; }
}