:root {
  --ink: #0e1a20;
  --ink-2: #16262e;
  --paper: #f4f5f2;
  --paper-2: #e8eae4;
  --white: #fff;
  --stone: #667078;
  --line: #d9ded8;
  --teal: #1c5970;
  --navy: #004771;
  --orange: #e8620a;
  --lime: #7ca82a;
  --amber: #efa83a;
  --accent: var(--teal);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--ink); background: var(--paper); font: 400 var(--type-body)/1.55 var(--font-body); }
a { color: inherit; text-decoration: none; }
button { font: inherit; }
.container { width: min(100% - 48px, 1120px); margin-inline: auto; }
.skip-link { position: fixed; top: -4rem; left: 1rem; z-index: 30; padding: .6rem 1rem; background: white; }
.skip-link:focus { top: 1rem; }
.site-header { position: sticky; top: 0; z-index: 50; border-bottom: 1px solid transparent; background: rgb(14 26 32 / 96%); color: white; transition: background .2s, border-color .2s, box-shadow .2s; }
.site-header.is-scrolled { border-color: #2a3a42; background: rgb(14 26 32 / 99%); box-shadow: 0 5px 20px rgb(0 0 0 / 18%); }
.nav { display: flex; align-items: center; justify-content: flex-start; min-height: 78px; gap: 24px; transition: min-height .2s; }
.site-header.is-scrolled .nav { min-height: 78px; }
.brand { display: inline-flex; align-items: center; gap: 10px; font: 700 var(--type-brand)/1 var(--font-display); letter-spacing: -.03em; white-space: nowrap; }
.brand::before { display: block; width: 34px; height: 34px; border-radius: 50%; background: #fff url("assets/logo-grupo-mm-symbol.png") center / 78% auto no-repeat; content: ""; transition: width .2s, height .2s; }
.site-header.is-scrolled .brand::before { width: 29px; height: 29px; }
.brand-symbol { display: none; }
.brand-symbol { width: 28px; height: 28px; }
.header-context { position: relative; display: grid; place-items: center; width: 32px; height: 32px; margin-left: 2px; overflow: visible; border: 1px solid #40535b; border-radius: 50%; background: white; }
.header-context::before { position: absolute; right: calc(100% + 12px); width: 1px; height: 24px; background: #40535b; content: ""; }
.header-context img { display: block; width: 100%; height: 100%; border-radius: inherit; object-fit: cover; }
.header-context--central img { background: #061929; object-fit: contain; }
.header-context--geomuni img { object-fit: contain; }
.header-context--iluminacao { background: #fff url("assets/logo-mf-govtech.png") center / 78% auto no-repeat; }
.header-context--iluminacao img { opacity: 0; }
.nav-links { display: flex; align-items: center; gap: 26px; margin: 0 0 0 auto; padding: 0; list-style: none; font-size: var(--type-nav); }
.nav-links a { color: #c8d0d2; transition: color .2s; }
.nav-links a:hover, .nav-links a[aria-current="page"] { color: white; }
.nav-button { display: none; border: 1px solid #49606a; border-radius: 3px; padding: 8px 10px; background: transparent; color: white; cursor: pointer; }
.hero { position: relative; overflow: hidden; background: var(--ink); color: white; }
.hero::before { position: absolute; inset: -8% -4%; background: url("assets/neural-network.svg") center / cover no-repeat; content: ""; opacity: .11; pointer-events: none; animation: neural-drift 28s ease-in-out infinite alternate; }
.hero.has-vanta::before { opacity: 0; }
.hero canvas { position: absolute !important; inset: 0; z-index: 0; opacity: .42; }
.hero-inner { position: relative; z-index: 1; display: grid; align-items: center; grid-template-columns: minmax(0, 1.05fr) minmax(300px, .95fr); min-height: 490px; padding-block: 54px 74px; gap: 52px; }
.hero--home .hero-inner, .hero--centered .hero-inner { display: block; min-height: auto; padding: 58px 0 64px; text-align: center; }
.hero--home h1, .hero--centered h1 { max-width: 820px; margin-inline: auto; }
.hero--home .lede, .hero--centered .lede { margin-inline: auto; }
.eyebrow { display: inline-flex; align-items: center; gap: 9px; margin-bottom: 14px; color: #aab6ba; font-size: var(--type-eyebrow); font-weight: 600; letter-spacing: .13em; text-transform: uppercase; }
.eyebrow .dot { width: 9px; height: 9px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 5px color-mix(in srgb, var(--accent) 20%, transparent); }
h1, h2, h3 { margin-top: 0; font-family: var(--font-display); letter-spacing: -.035em; line-height: 1.13; }
h1 { margin-bottom: 20px; font-size: var(--type-h1); font-weight: 600; }
h2 { margin-bottom: 14px; font-size: var(--type-h2); font-weight: 600; }
h3 { margin-bottom: 8px; font-size: var(--type-card-title); }
.lede { max-width: 600px; margin: 0 0 28px; color: #bbc4c7; font-size: var(--type-lead); }
.button { display: inline-flex; align-items: center; justify-content: center; gap: 9px; min-height: 48px; padding: 12px 22px; border: 1px solid var(--accent); border-radius: 3px; background: var(--accent); color: white; font-size: var(--type-button); font-weight: 600; transition: filter .2s, transform .2s; }
.button:hover { filter: brightness(1.08); transform: translateY(-1px); }
.button--light { border-color: white; background: white; color: var(--ink); }
.hero-note { margin: 14px 0 0; color: #aeb9b8; font-size: 13px; }
.machine-photo { position: relative; min-height: 330px; margin: 0; overflow: hidden; border: 1px solid #506045; border-radius: 10px; background: #122017; box-shadow: 0 24px 60px #07100945; }
.machine-photo::after { position: absolute; inset: 0; background: linear-gradient(90deg, #0b130c22 20%, #0b130cb8 100%), linear-gradient(0deg, #0b130caa, transparent 45%); content: ""; pointer-events: none; }
.machine-photo > img { display: block; width: 100%; height: 100%; min-height: 330px; object-fit: cover; object-position: 50% 64%; transform: scale(1.42); transform-origin: 45% 63%; filter: saturate(.82) contrast(1.04); }
.machine-photo figcaption { position: absolute; right: 24px; bottom: 22px; z-index: 1; display: flex; align-items: center; gap: 10px; color: #e4e9e1; font-size: 12px; line-height: 1.35; text-transform: uppercase; letter-spacing: .08em; }.machine-photo figcaption img { width: 38px; height: 38px; }.machine-photo figcaption strong { color: #c7e37f; font-family: "Space Grotesk", sans-serif; font-size: 14px; letter-spacing: 0; text-transform: none; }
.lighting-graphic { position: relative; min-height: 330px; margin: 0; overflow: hidden; border: 1px solid #42515a; border-radius: 10px; background: #16262e; box-shadow: 0 24px 60px #07100935; }.lighting-graphic svg { display: block; width: 100%; height: 100%; min-height: 330px; }.lamp-pole { fill: none; stroke: #7d8a8f; stroke-width: 3; stroke-linecap: round; }.lamp-pole ellipse { fill: #7d8a8f; stroke: none; }.lamp-glow circle { fill: #f3d999; }.lamp-glow circle:nth-child(1) { opacity: .14; }.lamp-glow circle:nth-child(2) { opacity: .3; }.lamp-glow circle:nth-child(3) { opacity: 1; }.lighting-graphic figcaption { position: absolute; right: 28px; bottom: 24px; color: #e5e8e5; font-size: 12px; line-height: 1.35; text-transform: uppercase; letter-spacing: .08em; }.lighting-graphic figcaption strong { color: #f3d999; font-family: "Space Grotesk", sans-serif; font-size: 17px; letter-spacing: 0; text-transform: none; }
.ai-graphic { position: relative; min-height: 330px; margin: 0; overflow: hidden; border: 1px solid #3a5e70; border-radius: 10px; background: radial-gradient(circle at 50% 50%, #2877a02b, transparent 40%), #16262e; box-shadow: 0 24px 60px #07100935; }.ai-graphic svg { display: block; width: 100%; height: 100%; min-height: 330px; }.ai-orbit { fill: none; stroke: #4a9dc6; stroke-opacity: .38; stroke-width: 1.5; }.ai-links { fill: none; stroke: #4c7183; stroke-width: 2; }.ai-node circle { fill: #456674; stroke: #83c7e6; stroke-width: 2; }.ai-core { fill: #2877a0; stroke: #91d3ef; stroke-width: 2; }.ai-core-dot { fill: #fff; }.ai-labels { fill: #9eb7c2; font: 600 11px "Work Sans", sans-serif; letter-spacing: 1.5px; }.ai-graphic figcaption { position: absolute; right: 28px; bottom: 24px; color: #d8e7ed; font-size: 12px; line-height: 1.35; text-transform: uppercase; letter-spacing: .08em; }.ai-graphic figcaption strong { color: #91d3ef; font-family: "Space Grotesk", sans-serif; font-size: 16px; letter-spacing: 0; text-transform: none; }
.geomuni-graphic { position: relative; min-height: 330px; margin: 0; overflow: hidden; border: 1px solid #4b5b61; border-radius: 10px; background: radial-gradient(circle at 80% 18%, #e8620a24, transparent 22%), #16262e; box-shadow: 0 24px 60px #07100935; }.geomuni-graphic__grid { position: absolute; inset: 20px; border: 1px solid #78909a45; border-radius: 4px; background-image: linear-gradient(#78909a38 1px, transparent 1px), linear-gradient(90deg, #78909a38 1px, transparent 1px); background-size: 48px 38px; transform: rotate(-7deg) scale(1.1); }.geomuni-graphic__grid::before { position: absolute; inset: 25% 14% 18% 20%; border: 1px solid #e8620a88; border-radius: 3px; content: ""; }.geomuni-graphic__marker { position: absolute; z-index: 1; width: 12px; height: 12px; border: 3px solid #f8b16f; border-radius: 50%; background: #e8620a; box-shadow: 0 0 0 7px #e8620a2a; }.geomuni-graphic__marker--one { top: 20%; left: 18%; }.geomuni-graphic__marker--two { right: 13%; bottom: 28%; }.geomuni-graphic__logo { position: absolute; z-index: 2; top: 50%; left: 50%; display: grid; place-items: center; width: min(67%, 300px); min-height: 156px; padding: 22px 28px; border: 1px solid #ffffffaa; border-radius: 6px; transform: translate(-50%, -50%); background: #f4f5f2; box-shadow: 0 18px 32px #07100955; }.geomuni-graphic__logo img { display: block; width: 100%; height: auto; }.geomuni-graphic figcaption { position: absolute; right: 28px; bottom: 24px; z-index: 3; color: #d9e0df; font-size: 12px; line-height: 1.35; text-transform: uppercase; letter-spacing: .08em; }.geomuni-graphic figcaption strong { color: #f4a05a; font-family: "Space Grotesk", sans-serif; font-size: 16px; letter-spacing: 0; text-transform: none; }
.home-illustration { width: min(100%, 820px); margin: 38px auto 0; }
.section { padding-block: clamp(62px, 8vw, 110px); }
.section--white { background: white; }
.section--dark { background: var(--ink); color: white; }
.section--dark h2 { color: white; }
.section--dark .section-intro, .section--dark .card p { color: #b7c1c4; }
.section--field { background: #e7ebe4; }.field-proof { display: grid; grid-template-columns: minmax(0, .7fr) minmax(0, 1.3fr); gap: 42px; align-items: center; }.field-proof__intro h2 { margin: 0 0 14px; font-size: clamp(27px, 3.1vw, 40px); line-height: 1.08; }.field-proof__intro p { margin: 0; color: var(--stone); }.field-proof__photos { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }.field-proof figure { position: relative; min-height: 275px; margin: 0; overflow: hidden; border-radius: 7px; background: var(--ink); }.field-proof figure::after { position: absolute; inset: 0; background: linear-gradient(0deg, #071009bf, transparent 55%); content: ""; }.field-proof figure img { display: block; width: 100%; height: 100%; object-fit: cover; }.field-proof figure:first-child img { object-position: 74% center; }.field-proof figcaption { position: absolute; bottom: 17px; left: 17px; z-index: 1; color: white; font: 600 14px/1.2 "Space Grotesk", sans-serif; }
.section--hose { background: #e8ece5; }
.section--hose .section-head { margin-bottom: 30px; }
.section--hose .eyebrow { color: #526a27 !important; }
.hose-offer { overflow: hidden; border: 1px solid #ced7c9; border-radius: 8px; box-shadow: 0 16px 34px #0e1a2010; }
.hose-offer__intro { padding: 38px; background: linear-gradient(120deg, #132018, #1d2d22); color: white; }.hose-offer__eyebrow { display: block; margin-bottom: 12px; color: #b7db6e; font-size: 12px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; }.hose-offer__intro h3 { margin: 0 0 10px; color: white; font-size: clamp(21px, 3vw, 28px); }.hose-offer__intro p { max-width: 680px; margin: 0; color: #c6d0c3; }
.hose-offer__models { gap: 1px; background: #ced7c9; }.hose-offer__models .card { border: 0; border-radius: 0; }.hose-offer__models .tag { color: #628621; }
.section-head { max-width: 670px; margin: 0 auto 42px; text-align: center; }
.section-intro { margin: 0; color: var(--stone); }
.grid { display: grid; gap: 18px; }
.grid--4 { grid-template-columns: repeat(4, 1fr); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--2 { grid-template-columns: repeat(2, 1fr); }
.card { padding: 26px; border: 1px solid var(--line); border-radius: 7px; background: white; }
.card .number { display: block; margin-bottom: 22px; color: var(--accent); font: 600 30px/1 "Space Grotesk", sans-serif; }
.card p { margin: 0; color: var(--stone); font-size: var(--type-card-body); }
.card--dark { border-color: #2b3d44; background: var(--ink-2); }
.card--dark h3 { color: white; }
.reframe { display: grid; grid-template-columns: 1fr 1.35fr; gap: 50px; align-items: start; }
.reframe .statement { color: var(--accent); font: 600 clamp(27px, 3vw, 40px)/1.14 "Space Grotesk", sans-serif; letter-spacing: -.035em; }
.reframe p { margin: 0; color: #c0c8ca; font-size: 18px; }
.steps { counter-reset: steps; }
.step { position: relative; padding: 28px 20px 24px 70px; }
.step::before { position: absolute; left: 24px; top: 25px; counter-increment: steps; content: "0" counter(steps); color: var(--accent); font: 600 18px "Space Grotesk", sans-serif; }
.step h3 { font-size: 17px; }
.metric-band { display: grid; grid-template-columns: 1.2fr repeat(2, 1fr); margin-bottom: 26px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.metric { padding: 23px 28px; border-right: 1px solid var(--line); }
.metric:last-child { border: 0; }
.metric b { display: block; color: var(--accent); font: 600 clamp(26px, 3vw, 38px)/1.1 "Space Grotesk", sans-serif; }
.metric span { color: var(--stone); font-size: 13px; }
.case .number { color: var(--accent); font: 600 34px/1 "Space Grotesk", sans-serif; }
.case small { display: block; margin-bottom: 12px; color: var(--stone); font-size: 12px; font-weight: 600; text-transform: uppercase; }
.case p { font-size: 14px; }
.hub { position: relative; width: min(100%, 720px); margin: 0 auto; }
.hub-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px; }
.hub-card { position: relative; min-height: 194px; padding: 31px 24px 22px; border: 1px solid var(--line); border-radius: 7px; background: white; text-align: center; transition: transform .2s, border-color .2s; }
.hub-card:hover { border-color: var(--ink); transform: translateY(-3px); }
.hub-card::before { position: absolute; top: 0; left: calc(50% - 20px); width: 40px; height: 4px; border-radius: 0 0 3px 3px; background: var(--accent); content: ""; }
.hub-card--teal { --accent: var(--teal); }.hub-card--navy { --accent: var(--navy); }.hub-card--orange { --accent: var(--orange); }.hub-card--lime { --accent: var(--lime); }
.badge { display: grid; place-items: center; width: 58px; height: 58px; margin: 0 auto 13px; border-radius: 50%; background: var(--accent); color: white; font: 600 20px "Space Grotesk", sans-serif; }
.brand-badge { display: grid; place-items: center; width: 68px; height: 68px; margin: 0 auto 15px; border: 1px solid var(--line); border-radius: 50%; background: white; }
.brand-badge img { display: block; width: 100%; height: 100%; border-radius: inherit; }
.brand-badge--centralia { border-color: #173d5c; background: #061929; }
.brand-badge--centralia img { width: 82%; height: 82%; object-fit: contain; }
.brand-badge--iluminacao { border-color: #13879a; background: #fff url("assets/logo-mf-govtech.png") center / 78% auto no-repeat; }
.brand-badge--maquinas { border-color: #0d733e; background: #087637; }
.brand-badge--maquinas img { width: 100%; height: 100%; object-fit: cover; }
.brand-badge--geomuni { border-color: #e8620a; background: #fff; }
.brand-badge--geomuni img { width: 84%; height: 84%; object-fit: contain; }
.hero-brand { display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; margin-right: 10px; border-radius: 50%; overflow: hidden; vertical-align: middle; background: white; }
.hero-brand img { display: block; width: 100%; height: 100%; }
.hub-card p { margin: 0; color: var(--stone); font-size: 12.5px; }
.hub-center { position: absolute; top: 50%; left: 50%; display: grid; place-items: center; width: 100px; height: 100px; border: 8px solid var(--paper); border-radius: 50%; transform: translate(-50%, -50%); background: white; box-shadow: 0 6px 22px #0e1a2020; color: var(--ink); font: 700 19px/1 "Space Grotesk", sans-serif; text-align: center; }
.agent-feature { display: grid; grid-template-columns: 1.2fr .8fr; gap: 28px; padding: 38px; border: 1px solid color-mix(in srgb, var(--accent) 45%, var(--line)); border-radius: 8px; background: white; }
.tag { display: inline-block; margin-bottom: 14px; color: var(--accent); font-size: 12px; font-weight: 600; }
.agent-art { min-height: 200px; border-radius: 6px; background: linear-gradient(140deg, color-mix(in srgb, var(--accent) 80%, #102029), var(--ink)); }
.list { display: grid; gap: 12px; padding: 0; margin: 0; list-style: none; }
.list li { position: relative; padding-left: 22px; color: var(--stone); }
.list li::before { position: absolute; left: 0; color: var(--accent); content: "↗"; }
.contact { display: grid; grid-template-columns: 1.1fr .9fr; gap: 45px; }
.field { display: grid; gap: 7px; margin-bottom: 16px; }
.field label { font-size: 13px; font-weight: 600; }
.field input, .field select, .field textarea { width: 100%; padding: 12px; border: 1px solid var(--line); border-radius: 3px; background: white; color: var(--ink); }
.field textarea { min-height: 130px; resize: vertical; }
.placeholder-notice { display: flex; gap: 12px; align-items: flex-start; padding: 16px; border: 1px dashed #98a5a8; border-radius: 5px; color: var(--stone); font-size: 13px; }
.placeholder-icon { flex: 0 0 32px; width: 32px; height: 32px; }
.cta { text-align: center; }
.cta h2 { max-width: 690px; margin-inline: auto; }
.cta p { max-width: 560px; margin: 0 auto 27px; color: #b7c1c4; }
.site-footer { padding-block: 28px; border-top: 1px solid #2a3a42; background: var(--ink); color: #91a0a5; font-size: 12px; }
.footer-content { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.footer-links { display: flex; gap: 15px; }
.footer-links a:hover { color: white; }
.is-hidden { display: none; }
@keyframes neural-drift { from { transform: translate3d(-1.2%, -.8%, 0) scale(1.01); } to { transform: translate3d(1.2%, .8%, 0) scale(1.04); } }

@media (max-width: 800px) {
  .container { width: min(100% - 36px, 1120px); }.nav, .site-header.is-scrolled .nav { min-height: 67px; }.nav-button { display: block; }.nav-links { display: none; position: absolute; top: 67px; left: 0; right: 0; flex-direction: column; align-items: stretch; gap: 0; padding: 10px 18px 18px; background: var(--ink-2); }.site-header.is-scrolled .nav-links { top: 67px; }.nav-links.is-open { display: flex; }.nav-links a { display: block; padding: 12px 0; border-bottom: 1px solid #2a3a42; }.hero-inner, .reframe, .contact, .agent-feature, .field-proof { grid-template-columns: 1fr; gap: 30px; }.hero-inner { min-height: auto; padding-block: 50px; }.machine-photo, .lighting-graphic, .ai-graphic, .geomuni-graphic { min-height: 260px; }.machine-photo > img, .lighting-graphic svg, .ai-graphic svg { min-height: 260px; }.geomuni-graphic__logo { top: 45%; }.geomuni-graphic figcaption { right: 20px; bottom: 14px; }.grid--4 { grid-template-columns: repeat(2, 1fr); }.grid--3 { grid-template-columns: 1fr; }.metric-band { grid-template-columns: 1fr; }.metric { border-right: 0; border-bottom: 1px solid var(--line); }.metric:last-child { border-bottom: 0; }.hub-center { width: 76px; height: 76px; border-width: 6px; font-size: 14px; }.section { padding-block: 62px; }
}
@media (max-width: 800px) { .header-context { display: none; }.nav-button { margin-left: auto; } }
@media (max-width: 480px) { .container { width: min(100% - 28px, 1120px); }.brand { font-size: 15px; }.hero--home .hero-inner, .hero--centered .hero-inner { padding-block: 42px; }.grid--4, .grid--2 { grid-template-columns: 1fr; }.hub-grid { gap: 13px; }.hub-card { min-height: 180px; padding: 25px 12px 18px; }.hub-card h3 { font-size: 14px; }.hub-card p { font-size: 11px; }.hub-center { display: none; }.card { padding: 22px; }.step { padding: 50px 22px 22px; }.step::before { top: 21px; left: 22px; }.agent-feature { padding: 25px; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; animation: none !important; } }