:root {
  --mx-ink: #061725;
  --mx-steel: #12354a;
  --mx-gold: #f2bd55;
  --mx-sand: #f2eee5;
  --mx-glass: rgba(7, 25, 39, 0.72);
}

body {
  background: #eef2f3;
  color: #152b36;
}

.site-header {
  height: 86px !important;
  border-bottom: 1px solid rgba(242, 189, 85, 0.16) !important;
  background: rgba(4, 19, 33, 0.82) !important;
}

.site-header.is-scrolled {
  height: 70px !important;
  background: rgba(4, 19, 33, 0.96) !important;
}

.brand img {
  border-radius: 15px;
  border: 1px solid rgba(242, 189, 85, 0.45);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.28);
}

.brand strong { color: #fff !important; letter-spacing: -0.02em; }
.brand small { color: rgba(255, 255, 255, 0.62) !important; }
.main-nav { gap: 24px; }
.main-nav a { color: rgba(255, 255, 255, 0.82) !important; }
.main-nav a:hover, .main-nav a.is-active { color: var(--mx-gold) !important; }
.main-nav a::after { background: var(--mx-gold) !important; }

.header-cta,
.btn-primary {
  border-radius: 999px !important;
  background: linear-gradient(135deg, #ffd776, #c88020) !important;
  box-shadow: 0 12px 30px rgba(225, 157, 46, 0.25) !important;
}

.hero {
  min-height: min(880px, 100svh) !important;
  isolation: isolate;
  background: var(--mx-ink) !important;
}

.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  opacity: 0.42;
  background-image: linear-gradient(rgba(242, 189, 85, 0.14) 1px, transparent 1px), linear-gradient(90deg, rgba(242, 189, 85, 0.14) 1px, transparent 1px);
  background-size: 70px 70px;
  mask-image: linear-gradient(90deg, #000, transparent 72%);
}

.hero-bg {
  filter: saturate(0.82) contrast(1.08);
  background: linear-gradient(90deg, rgba(4, 19, 33, 0.98) 0%, rgba(4, 19, 33, 0.88) 37%, rgba(4, 19, 33, 0.24) 74%, rgba(4, 19, 33, 0.36) 100%), url("../assets/matrix-hero-v2.png") center / cover no-repeat !important;
}

.hero-bg::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 20% 30%, rgba(242, 189, 85, 0.18), transparent 34%);
}

.hero-grid { padding-block: 78px 52px; }
.hero .eyebrow { color: var(--mx-gold) !important; letter-spacing: 0.08em; }
.hero h1 { max-width: 12ch !important; font-weight: 900; }
.hero-text { max-width: 60ch !important; color: rgba(255, 255, 255, 0.76) !important; }
.btn-outline { border-radius: 999px !important; border-color: rgba(255, 255, 255, 0.5) !important; }

.hero-signals {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 30px;
}

.hero-signals span {
  padding: 9px 14px;
  border: 1px solid rgba(242, 189, 85, 0.34);
  border-radius: 999px;
  color: #fff;
  background: rgba(255, 255, 255, 0.07);
  backdrop-filter: blur(12px);
  font-size: 0.85rem;
  font-weight: 800;
}

.stats-band {
  position: relative;
  overflow: hidden;
  color: #071a2e !important;
  background: linear-gradient(110deg, #facd73, #d18a24 56%, #f3c35f) !important;
}

.stats-band::after {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0.22;
  background: repeating-linear-gradient(130deg, transparent 0 18px, rgba(255,255,255,.45) 18px 19px);
}

.stats-grid { position: relative; z-index: 1; }
.stats-grid article { min-height: 150px; border-color: rgba(7, 26, 46, 0.2) !important; }
.stats-grid strong { color: #071a2e !important; font-size: clamp(2rem, 4vw, 3.25rem) !important; }
.stats-grid span { color: rgba(7, 26, 46, 0.78) !important; }

.about, .partners { position: relative; background: #f7f7f2 !important; }
.about::before, .partners::before {
  content: "";
  position: absolute;
  width: min(46vw, 630px);
  height: 100%;
  inset: 0 auto 0 0;
  pointer-events: none;
  background: linear-gradient(90deg, rgba(242, 189, 85, 0.1), transparent);
}

.section-heading h2 { color: var(--mx-ink) !important; letter-spacing: -0.035em; }
.eyebrow { color: #b26c11 !important; letter-spacing: 0.06em; }
.about-copy { color: #52636a; font-size: 1.18rem; line-height: 2.05; }

.services { background: #edf2f2 !important; }
.service-card, .why-item {
  border: 1px solid rgba(12, 48, 64, 0.1) !important;
  border-radius: 28px !important;
  background: linear-gradient(145deg, #fff, #f4f8f7) !important;
}
.service-card { min-height: 340px; padding: 36px !important; }
.service-card::before { content: ""; position: absolute; top: 0; right: 0; width: 100%; height: 5px; background: linear-gradient(90deg, transparent, var(--mx-gold)); }
.service-logo { padding: 9px; border-radius: 18px; background: #082235; box-shadow: 0 14px 26px rgba(6, 23, 37, 0.16); }
.service-card a { color: #b26c11 !important; }

.why { background: #071a2e !important; }
.why .section-heading h2, .why .eyebrow { color: #fff !important; }
.why .eyebrow { color: var(--mx-gold) !important; }
.why-item { min-height: 250px; background: rgba(255,255,255,.06) !important; border-color: rgba(255,255,255,.13) !important; box-shadow: none !important; }
.why-item h3 { color: #fff !important; }
.why-item p { color: rgba(255,255,255,.7) !important; }
.why-item:hover { background: rgba(255,255,255,.11) !important; }

.quality { background: radial-gradient(circle at 90% 0, rgba(242,189,85,.2), transparent 32%), linear-gradient(125deg, #061725, #0c3442) !important; }
.quality-panel { max-width: 820px; padding: clamp(26px, 5vw, 56px); border-right: 4px solid var(--mx-gold); background: rgba(255,255,255,.06); backdrop-filter: blur(10px); }

.steps { background: #e9efef !important; }
.step-list article { border-radius: 26px !important; background: linear-gradient(150deg, #0a2a3a, #071a2e) !important; }
.step-list article::after { content: ""; position: absolute; width: 160px; height: 160px; border: 1px solid rgba(242,189,85,.25); border-radius: 50%; left: -80px; bottom: -90px; }
.step-number { border-radius: 50% !important; background: var(--mx-gold) !important; color: #071a2e; }

.gallery { background: #071a2e !important; }
.gallery .section-heading h2 { color: #fff !important; }
.gallery .eyebrow { color: var(--mx-gold) !important; }
.gallery-grid { gap: 18px !important; }
.gallery-tile { border-radius: 24px !important; }
.gallery-tile span { padding: 8px 12px; border-radius: 999px; background: rgba(5, 22, 35, .58); backdrop-filter: blur(8px); }

.partners { background: #f4f0e7 !important; }
.partner-card { border-radius: 24px !important; }
.visual-overlay { padding: 28px 22px 22px !important; }

.quote { position: relative; overflow: hidden; background: #051924 !important; }
.quote::before { content: ""; position: absolute; inset: 0; opacity: .2; background: radial-gradient(circle at 15% 15%, #f2bd55, transparent 32%); }
.quote-grid { position: relative; z-index: 1; }
.quote-form { background: rgba(255,255,255,.96) !important; box-shadow: 0 28px 80px rgba(0,0,0,.28); }
.quote-form input, .quote-form select, .quote-form textarea { border-radius: 12px !important; background: #f8fbfa; }
#project-map { border-radius: 16px; overflow: hidden; }

.faq { background: #f6f7f3 !important; }
.faq details { border-radius: 16px !important; transition: transform .2s ease, box-shadow .2s ease; }
.faq details[open] { border-color: rgba(210, 138, 36, .48) !important; box-shadow: 0 16px 36px rgba(10,39,66,.1); }

.site-footer { background: #020c13 !important; }
.footer-logo { border-radius: 18px; border: 1px solid rgba(242,189,85,.35); }
.whatsapp-float { background: linear-gradient(135deg, #28b86a, #118447) !important; }

@media (max-width: 720px) {
  .site-header { height: 72px !important; }
  .hero { min-height: 690px !important; }
  .hero h1 { font-size: clamp(2.6rem, 11vw, 3.55rem) !important; }
  .hero-bg { background-position: 63% center !important; }
  .hero-grid { padding-block: 70px 28px; }
  .hero-signals span { font-size: .75rem; }
  .section { padding-block: 78px !important; }
  .service-card { min-height: 0; }
  .quality-panel { margin-inline: -2px; }
}