/* Spectare Urbis — second edition. Motion follows the information. */
:root{--ease-out: cubic-bezier(.2,.75,.2,1);--header-height:88px}
.header{position:sticky;top:0;transition:box-shadow .4s,background .4s;backdrop-filter:blur(18px);background:#fafbf7f5}.header.scrolled{box-shadow:0 6px 35px #102a3310;background:#fafbf7ee}.header nav a{position:relative;padding:8px 0}.header nav a:after{content:'';height:1px;background:#1d8864;position:absolute;bottom:0;left:0;right:0;transform:scaleX(0);transform-origin:left;transition:transform .4s var(--ease-out)}.header nav a:hover:after,.header nav a.current:after{transform:scaleX(1)}.reading-progress{position:fixed;z-index:30;top:87px;left:0;right:0;height:2px;pointer-events:none}.reading-progress>span{display:block;height:100%;background:#278c64;transform:scaleX(0);transform-origin:left}.button{position:relative;overflow:hidden;transition:transform .4s var(--ease-out),box-shadow .4s}.button:hover{transform:translateY(-3px);box-shadow:0 10px 28px #4cbd8920}.button span,.nav-cta span,.under-link span,.text-link span{display:inline-block;transition:transform .4s var(--ease-out)}.button:hover span,.nav-cta:hover span{transform:translate(3px,-3px)}.text-link:hover span{transform:translateY(4px)}.under-link:hover span{transform:translate(4px,4px)}
.hero{isolation:isolate}.hero-copy{will-change:transform}.city-scene{will-change:transform;transition:none}.hero h1{perspective:600px}.title-line{display:block;overflow:hidden;padding-bottom:.08em;margin-bottom:-.08em}.title-line>span{display:block;animation:hero-line 1.25s var(--ease-out) both;animation-delay:var(--line-delay,0ms)}.hero-copy>.eyebrow,.hero-copy>p,.hero-actions,.hero-note{animation:hero-fade 1.3s .2s var(--ease-out) both}.hero-copy>p{animation-delay:.3s}.hero-actions{animation-delay:.4s}.hero-note{animation-delay:.5s}.hero .city-scene>svg{animation:city-arrive 1.7s var(--ease-out) both}.hero .detection{animation:hero-fade 1.2s .65s var(--ease-out) both}.hero-bottom{z-index:2}.hero-bottom a span{display:inline-block;animation:arrow-nudge 2.5s ease-in-out infinite}.reveal{opacity:0;transform:translateY(36px);transition:opacity .95s var(--ease-out),transform 1.1s var(--ease-out);transition-delay:var(--reveal-delay,0ms)}.reveal.is-visible{opacity:1;transform:translateY(0)}
@keyframes hero-line{from{transform:translateY(112%) rotateX(12deg);opacity:0}to{transform:translateY(0);opacity:1}}@keyframes hero-fade{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}@keyframes city-arrive{from{opacity:0;transform:translate(30px,45px) scale(.96)}to{opacity:1;transform:translate(0,0) scale(1)}}@keyframes arrow-nudge{0%,100%{transform:translateY(0)}50%{transform:translateY(5px)}}
/* A pinned chapter index changes as the story advances. */
.process{padding-top:110px;padding-bottom:100px;background:#e8eee6}.process-layout{display:grid;grid-template-columns:1fr 1fr;gap:12%}.process-sticky{position:sticky;top:155px;align-self:start}.process-sticky h2{margin-top:28px;font-size:clamp(44px,4.5vw,66px)}.process-sticky>p{font-size:12px;max-width:260px;color:#687e70;margin-top:27px}.process-meter{margin-top:50px;display:grid;grid-template-columns:100px 1fr;align-items:center;gap:15px;max-width:310px}.process-meter>span{font-size:86px;line-height:1;letter-spacing:-7px;color:#458269;font-variant-numeric:tabular-nums}.meter-track{height:1px;background:#b3c9b9;position:relative}.meter-track i{display:block;position:absolute;left:0;top:-1px;height:3px;width:25%;background:#42886c;transition:width .7s var(--ease-out)}.process-meter small{grid-column:2;font:8px 'Courier New',monospace;letter-spacing:1.5px;color:#607d6b;margin-top:-35px}.process-chapter{padding:35px 0 65px;border-top:1px solid #bdcebf;opacity:.35;transition:opacity .6s var(--ease-out);min-height:325px;position:relative}.process-chapter:last-child{padding-bottom:20px}.process-chapter:before{content:'';position:absolute;top:-1px;left:0;right:0;height:2px;background:#2f8762;transform:scaleX(0);transform-origin:left;transition:transform .8s var(--ease-out)}.process-chapter.is-current{opacity:1}.process-chapter.is-current:before{transform:scaleX(1)}.chapter-index{font:9px 'Courier New',monospace;letter-spacing:1.2px;color:#44735b}.process-chapter h3{font-size:36px;font-weight:400;letter-spacing:-1.6px;line-height:1.16;margin:23px 0 20px}.process-chapter p{font-size:13px;color:#596f61;max-width:420px}.chapter-tags{display:flex;gap:9px;flex-wrap:wrap;margin-top:25px}.chapter-tags span{font-size:9px;color:#5e7b67;border:1px solid #c6d7c7;padding:7px 10px}
/* One coordinate space for streets, route, vehicle, and occurrences. */
.platform{padding-top:110px;padding-bottom:95px}.product{border-radius:6px;border-color:#3b5357;background:#0e2730;box-shadow:0 35px 100px #0002}.product-toolbar{padding:24px 25px}.product-filters{display:flex;align-items:center;justify-content:space-between;padding:13px 19px;gap:20px;border-bottom:1px solid #2b444a}.filters{flex-direction:row;gap:6px}.filters button{font-size:10px;padding:10px 12px;gap:18px;border-radius:3px}.filter-hint{font-size:9px;color:#829d9f}.product-layout{grid-template-columns:minmax(0,1fr) 280px}.map-column{min-width:0;background:#112c34}.demo-map{height:auto;aspect-ratio:1000/660;position:relative;isolation:isolate;overflow:hidden}.flat-map{height:100%;width:100%;position:absolute;inset:0}.map-compass{position:absolute;top:18px;right:20px;color:#a0b9b0;display:flex;flex-direction:column;gap:4px;align-items:center;font:8px 'Courier New',monospace;pointer-events:none}.map-compass svg{height:27px;width:20px}.map-scale{position:absolute;bottom:17px;left:20px;color:#6f9693;font:7px 'Courier New',monospace;display:flex;gap:8px;align-items:center}.map-scale>span{display:block;width:38px;height:5px;border:1px solid #6f9693;border-top:0}.marker{width:30px;height:30px;padding:0;border:0;background:transparent!important;box-shadow:none!important;display:flex;align-items:center;justify-content:center;z-index:3}.marker:before{content:'';height:9px;width:9px;background:#eab57e;border:2px solid #15332f;border-radius:50%;box-shadow:0 0 0 1px #cfb491;transition:transform .35s,box-shadow .35s}.marker[data-kind="sinalizacao"]:before{background:#97cdee;box-shadow:0 0 0 1px #78acd0}.marker[data-kind="iluminacao"]:before{background:#dbeb9c;box-shadow:0 0 0 1px #b4c684}.marker.selected:before{transform:scale(1.12);box-shadow:0 0 0 1px #e5e8cc,0 0 0 7px #aac6ab20}.marker:hover:before{transform:scale(1.3)}.marker:after{content:attr(data-number);position:absolute;left:29px;top:8px;font:8px 'Courier New',monospace;color:#d9e8d5;opacity:0;transform:translateX(-3px);transition:opacity .3s,transform .3s}.marker:hover:after,.marker.selected:after{opacity:1;transform:translateX(0)}.marker[hidden]{display:none}.route-control{display:flex;align-items:center;gap:14px;padding:17px 21px;border-top:1px solid #2b454a;background:#102b32}.route-control button{display:flex;align-items:center;justify-content:center;border:1px solid #507969;background:#23433b;width:32px;height:32px;border-radius:50%;color:#a9e8c5;flex-shrink:0;font-size:11px}.route-control strong{font-size:10px;font-weight:400}.route-control strong span{color:#8ba7a3}.route-control small{display:block;font-size:8px;color:#688e86;margin-top:5px}.route-meter{height:2px;flex:1;background:#294740;margin-left:20px}.route-meter span{display:block;width:0;height:100%;background:#8eddb0}.route-control>span{font:8px 'Courier New',monospace;color:#a8c7bb;min-width:26px}.event-inspector{padding:23px;border-left:1px solid #2d454a;display:flex;flex-direction:column;min-width:0;background:#112c33}.inspector-head{display:flex;justify-content:space-between;color:#839f9e;font:7px 'Courier New',monospace;letter-spacing:.7px;margin-bottom:20px}.evidence-photo{height:124px;overflow:hidden;position:relative;margin-bottom:25px;background:#193a3b}.evidence-photo img{width:100%;height:100%;object-fit:cover;transition:object-position .6s,transform .8s var(--ease-out);filter:saturate(.6)}.evidence-photo span{position:absolute;bottom:7px;left:9px;color:#dae6d6;background:#142e2acc;padding:4px 5px;font:6px 'Courier New',monospace;letter-spacing:1px}.event-inspector>small{font:8px 'Courier New',monospace;color:#8bddb0;letter-spacing:1px}.event-inspector h3{font-size:19px;line-height:1.3;font-weight:400;letter-spacing:-.6px;margin:13px 0 10px;min-height:50px}.event-inspector>p{font-size:10px;color:#9db4ae}.event-meta{display:flex;gap:10px;align-items:center;font-size:8px;margin-top:19px}.event-meta .severity{background:#d9b0781c;color:#e1bb8a;padding:6px 8px}.event-status{color:#92b7a7}.event-facts{margin-top:26px;border-top:1px solid #2c484a}.event-facts>div{display:flex;justify-content:space-between;gap:10px;padding:12px 0;border-bottom:1px solid #2c484a;font-size:8px}.event-facts span{color:#75948d}.event-facts strong{font-weight:400;color:#afc7bd}.inspector-nav{margin-top:auto;padding-top:22px;display:flex;align-items:center;justify-content:space-between;gap:10px}.inspector-nav button{background:none;border:1px solid #355b50;width:28px;height:28px;color:#99c4ad;border-radius:50%;transition:background .3s}.inspector-nav button:hover{background:#294e41}.inspector-nav>span{font-size:8px;color:#8faf9f}.product-footer{justify-content:space-between;font-size:8px;padding:16px 22px;background:#0d262d;color:#789b92}.product-footer i{display:inline-block;width:13px;height:2px;background:#86e6b1;vertical-align:middle;margin-right:7px}.demo-caption{font-size:10px}.event-inspector.changing h3,.event-inspector.changing>p{animation:detail-in .4s var(--ease-out)}@keyframes detail-in{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}
/* Editorial photographic field of view, instead of decorative icons. */
.applications{background:#f3f4ee;padding-top:110px;padding-bottom:110px}.applications h2{font-size:clamp(39px,4vw,58px)}.observation-layout{display:grid;grid-template-columns:340px minmax(0,1fr);gap:55px;margin-top:60px;align-items:start}.application-tabs{display:flex;flex-direction:column}.application-tab{display:flex;gap:18px;width:100%;text-align:left;align-items:flex-start;padding:24px 0;border:0;border-top:1px solid #c7d4c9;background:transparent;color:#60756a;position:relative}.application-tab:before{content:'';position:absolute;left:0;top:-1px;right:0;height:2px;transform:scaleX(0);transform-origin:left;transition:transform .7s var(--ease-out);background:#328266}.application-tab.active:before{transform:scaleX(1)}.application-number{font:10px 'Courier New',monospace;padding-top:5px;color:#819a86}.application-text{flex:1}.application-text strong{font-size:20px;letter-spacing:-.7px;font-weight:400;color:#476455;transition:color .4s}.application-tab.active .application-text strong{color:#1d4433}.application-description{font-size:12px;line-height:1.75;color:#6c7c70;display:grid;grid-template-rows:0fr;max-height:0;overflow:hidden;opacity:0;margin-top:0;transition:max-height .65s var(--ease-out),margin .65s,opacity .5s}.application-tab.active .application-description{max-height:110px;opacity:1;margin-top:17px}.application-arrow{font-size:18px;color:#669578;transition:transform .5s}.application-tab.active .application-arrow{transform:rotate(45deg)}.application-footnote{font-size:9px;color:#889689;line-height:1.7;margin-top:15px}.observation-stage{width:100%;aspect-ratio:1672/941;background:#17312e;overflow:hidden;position:relative;border-radius:2px;isolation:isolate}.observation-world{position:absolute;inset:0;transition:transform 1.6s cubic-bezier(.2,.7,.2,1);will-change:transform;transform:scale(1.16);transform-origin:30% 85%}.observation-world img{display:block;width:100%;height:100%;object-fit:cover;filter:saturate(.65) brightness(.83);max-width:none}.observation-stage[data-view="sinalizacao"] .observation-world{transform:scale(1.9);transform-origin:76% 47%}.observation-stage[data-view="iluminacao"] .observation-world{transform:scale(1.65);transform-origin:69% 7%}.observation-stage:after{content:'';position:absolute;inset:0;pointer-events:none;background:linear-gradient(#05241b22,transparent 25%,transparent 55%,#06261cd9)}.observation-topline{position:absolute;top:22px;left:23px;right:23px;display:flex;justify-content:space-between;z-index:2;color:#e0e6d6;font:7px 'Courier New',monospace;letter-spacing:1.5px}.observation-topline i{width:5px;height:5px;border-radius:50%;background:#ace4b8;display:inline-block;margin-right:6px}.detection-box{position:absolute;left:13%;top:81%;width:27%;height:10%;border:1px solid #b8edb247;background:#adeeb108;transition:all 1.6s cubic-bezier(.2,.7,.2,1)}.detection-box i{position:absolute;width:9px;height:9px;border-color:#d4efb9;border-style:solid}.detection-box i:nth-child(1){top:-1px;left:-1px;border-width:1px 0 0 1px}.detection-box i:nth-child(2){top:-1px;right:-1px;border-width:1px 1px 0 0}.detection-box i:nth-child(3){bottom:-1px;left:-1px;border-width:0 0 1px 1px}.detection-box i:nth-child(4){bottom:-1px;right:-1px;border-width:0 1px 1px 0}.observation-stage[data-view="sinalizacao"] .detection-box{left:72%;top:41%;width:4%;height:7%}.observation-stage[data-view="iluminacao"] .detection-box{left:63%;top:1%;width:12%;height:33%}.observation-caption{position:absolute;z-index:2;bottom:27px;left:25px;right:25px;color:#e7efd8}.observation-caption small{font:7px 'Courier New',monospace;letter-spacing:1.7px;color:#c0dfb2;display:block;margin-bottom:10px}.observation-caption strong{font-size:18px;letter-spacing:-.6px;font-weight:400;line-height:1.4;display:block}.scan-line{position:absolute;z-index:1;top:0;bottom:0;left:-5%;width:1px;background:#d8f6b94d;box-shadow:-10px 0 35px 8px #b8eead0d;opacity:0;pointer-events:none}.observation-stage.scanning .scan-line{animation:scan-scene 1.6s .1s ease-in-out both}@keyframes scan-scene{0%{left:0;opacity:0}15%,80%{opacity:1}100%{left:100%;opacity:0}}.frame-corner{position:absolute;width:12px;height:12px;border-style:solid;border-color:#d5e4c880;z-index:3;pointer-events:none}.c-tl{left:12px;top:12px;border-width:1px 0 0 1px}.c-br{bottom:12px;right:12px;border-width:0 1px 1px 0}.image-note{font-size:8px;color:#869385;line-height:1.5;margin-top:12px}.privacy-symbol{position:relative}.privacy-symbol:before{content:'';position:absolute;inset:-30px;border:1px solid #548b6a20;border-radius:50%;transform:scale(.8);transition:transform 1.8s var(--ease-out)}.privacy-symbol.is-visible:before{transform:scale(1.1)}.contact .button:hover{box-shadow:0 15px 50px #90f2b320}
@media(min-width:1600px){.product-layout{grid-template-columns:minmax(0,1fr) 310px}.observation-layout{grid-template-columns:350px minmax(0,1fr)}}
@media(max-width:1100px){.process-layout{gap:8%}.process-sticky h2{font-size:50px}.process-chapter h3{font-size:31px}.product-layout{grid-template-columns:minmax(0,1fr) 245px}.event-inspector{padding:18px}.evidence-photo{height:100px}.filter-hint{display:none}.filters button{gap:12px}.event-inspector h3{font-size:17px}.route-meter{margin-left:0}.route-control strong span{display:none}.observation-layout{grid-template-columns:280px minmax(0,1fr);gap:35px}.application-text strong{font-size:18px}.observation-stage{aspect-ratio:1.35}.observation-world{top:0;bottom:0;left:-16%;right:-16%}.observation-caption strong{font-size:16px}.application-tab{padding:20px 0}.application-description{font-size:11px}}
@media(max-width:760px){:root{--header-height:76px}html{scroll-padding-top:95px}.reading-progress{top:75px}.header nav a{padding:4px 0}.hero-copy{transform:none!important}.city-scene{transform:none!important}.process{padding-top:65px;padding-bottom:60px}.process-layout{display:block}.process-sticky{position:relative;top:auto}.process-sticky h2{font-size:43px}.process-sticky>p{max-width:none}.process-meter{display:none}.process-chapters{margin-top:40px}.process-chapter{min-height:0;opacity:1;padding:28px 0 40px}.process-chapter h3{font-size:30px;margin:18px 0}.process-chapter p{font-size:12px}.chapter-tags{margin-top:20px}.chapter-tags span{font-size:8px}.platform{padding-top:65px;padding-bottom:55px}.product-toolbar{padding:18px 14px}.product-filters{padding:10px 8px;display:block}.filters{gap:2px}.filters button{padding:10px 6px;gap:5px;justify-content:center;flex:1;font-size:8px}.filters button:first-child{font-size:0}.filters button:first-child:before{content:'Todas';font-size:8px}.filters span{font-size:7px}.product-layout{display:block}.demo-map{aspect-ratio:1000/700}.street-labels{font-size:12px}.route-control{padding:13px;gap:10px}.route-control strong{font-size:9px}.route-control small{font-size:7px}.route-control button{width:29px;height:29px}.route-meter{margin-left:6px}.marker{width:30px;height:30px}.marker:before{width:7px;height:7px}.marker:after{font-size:6px}.event-inspector{display:grid;grid-template-columns:90px 1fr;column-gap:17px;padding:19px 15px;border-left:0;border-top:1px solid #304a48}.inspector-head{grid-column:1/3;margin-bottom:16px;font-size:6px}.evidence-photo{grid-column:1;grid-row:2/7;height:120px;margin:0}.evidence-photo img{object-fit:cover;object-position:35% 80%;transform:scale(1.3)}.evidence-photo span{font-size:4px;bottom:4px;left:4px;padding:3px;letter-spacing:.3px}.event-inspector>small{font-size:6px;margin-top:3px;grid-column:2}.event-inspector h3{font-size:16px;min-height:0;margin:8px 0 5px;grid-column:2}.event-inspector>p{font-size:8px;grid-column:2}.event-meta{margin-top:12px;gap:8px;font-size:7px;grid-column:2}.event-meta .severity{padding:5px}.event-facts{display:none}.inspector-nav{grid-column:1/3;margin-top:10px;padding-top:13px;border-top:1px solid #304943}.inspector-nav>span{font-size:8px}.product-footer{padding:12px 14px;font-size:7px;gap:10px;align-items:center}.product-footer>span:last-child{display:none}.demo-caption{font-size:8px}.map-compass{top:12px;right:12px;font-size:6px;gap:0}.map-compass svg{height:19px}.map-scale{bottom:9px;left:12px;font-size:5px}.map-scale>span{width:22px}.applications{padding-top:65px;padding-bottom:65px}.applications h2{font-size:37px}.observation-layout{grid-template-columns:1fr;gap:28px;margin-top:35px}.application-tab{padding:20px 0;gap:15px}.application-text strong{font-size:20px}.application-description{font-size:12px}.application-tab.active .application-description{max-height:100px;margin-top:13px}.application-footnote{display:none}.observation-stage{aspect-ratio:1.23}.observation-world{left:-22%;right:-22%}.observation-topline{top:19px;left:18px;right:18px;font-size:6px;letter-spacing:.8px}.observation-caption{bottom:24px;left:20px;right:20px}.observation-caption strong{font-size:18px}.image-note{font-size:7px}.privacy-symbol:before{inset:-14px}.reveal{transform:translateY(24px);transition-duration:.7s}.hero h1 .title-line{padding-bottom:.1em;margin-bottom:-.1em}}
@media(max-width:360px){.filters button{padding:9px 4px;font-size:7px}.filters span{font-size:6px}.event-inspector{grid-template-columns:72px 1fr;gap:0 12px;padding:16px 12px}.event-inspector h3{font-size:14px}.evidence-photo{height:120px}.applications h2{font-size:34px}.route-control{gap:8px}.route-control>span{font-size:7px}.product-footer{font-size:6px}.observation-caption strong{font-size:16px}}
@media(prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none}.hero-copy,.city-scene{transform:none!important}.process-chapter{opacity:1}.observation-world,.detection-box{transition:none}.scan-line{display:none}*,*:before,*:after{animation:none!important;transition:none!important}}
/* Keep the HTML marker overlay registered to the SVG viewBox at every width. */
.demo-map{aspect-ratio:1000/660}
.skip{top:12px;opacity:0;pointer-events:none;transform:translateY(-200%)}.skip:focus{opacity:1;pointer-events:auto;transform:none}
.observation-world{transform:scale(1.8);transform-origin:15% 100%}
.observation-stage[data-view="iluminacao"] .observation-world{transform-origin:69% 0%}
#route-guide{stroke-opacity:.34;stroke-dasharray:5 5;stroke-width:3}
.inspector-head{font-size:8px}.event-facts>div{font-size:9px}.inspector-nav>span{font-size:9px}
@media(max-width:760px){.observation-world{transform-origin:0% 100%}.inspector-head{font-size:6px}.inspector-nav>span{font-size:8px}}
@media(min-width:761px){.process-chapter{opacity:.55}.process-chapter.is-current{opacity:1}}

/* Opening: one responsive composition, sized by both viewport dimensions. */
.hero {
  --opening-width: 1640px;
  display: flex;
  flex-direction: column;
  min-height: calc(100svh - var(--header-height));
  padding: clamp(24px, 4svh, 64px) 6% 0;
  background: radial-gradient(ellipse at 74% 45%, #14383e 0, transparent 61%), #091e28;
}
.hero-stage {
  display: grid;
  grid-template-columns: minmax(0, .95fr) minmax(0, 1.15fr);
  align-items: center;
  width: 100%;
  max-width: var(--opening-width);
  margin: auto;
  flex: 1;
  min-height: 0;
  position: relative;
  z-index: 1;
}
.hero .hero-copy { width: 100%; max-width: 740px; padding: 20px 0; }
.hero h1 {
  font-size: clamp(60px, min(6.65vw, 10.2svh), 124px);
  line-height: 1.03;
  margin: clamp(20px, 3svh, 40px) 0;
  letter-spacing: -.065em;
}
.hero-copy > p { font-size: clamp(14px, 1.08vw, 18px); max-width: 440px; }
.hero-actions { margin-top: clamp(23px, 3.7svh, 40px); gap: 26px; flex-wrap: wrap; }
.hero-note { margin-top: clamp(22px, 3.5svh, 42px); }
.hero .city-scene {
  position: relative;
  width: 120%;
  height: auto;
  aspect-ratio: 1310 / 810;
  top: auto;
  right: auto;
  margin: 0 0 0 -5%;
  transform-origin: 50% 55%;
  align-self: center;
}
.city-scene > svg { display: block; width: 100%; height: 100%; overflow: visible; }
.hero .map-label { top: 1%; right: 8%; font-size: 8px; letter-spacing: 1.4px; }
.hero .detection {
  left: 46%; top: 62%; padding: 15px 18px;
  width: max-content; max-width: 50%;
  border-color: #5e8a7966; background: #14343bea;
}
.hero .detection strong { font-size: clamp(10px, .82vw, 13px); }
.hero .detection div > span { font-size: clamp(7px, .56vw, 9px); }
.hero .map-coordinates { bottom: 0; left: 9%; right: 8%; font-size: 7px; }
.hero-bottom {
  width: 100%; max-width: var(--opening-width); margin: 25px auto 0;
  flex-shrink: 0; padding: 23px 0 75px;
  border-color: #8dbbad20; position: relative;
}
.hero-bottom::after {
  content: ''; width: 1px; height: 60px;
  position: absolute; left: 50%; bottom: 0;
  background: linear-gradient(transparent, #93dcb77d);
}
/* The pale surface enters over the hero; its edges open with the scroll. */
.opening-continuation {
  --handoff-inset: 22px; --handoff-radius: 34px;
  position: relative; z-index: 3; margin-top: -40px;
  padding-top: 34px; background: var(--paper);
  clip-path: inset(0 var(--handoff-inset) 0 round var(--handoff-radius) var(--handoff-radius) 0 0);
}
.opening-continuation::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 170px;
  background: linear-gradient(#e4eee4, #f6f7f200); pointer-events: none;
}
.handoff-signal {
  position: absolute; top: 0; left: 50%; width: 1px; height: 30px;
  background: #6ba28660;
}
.handoff-signal span {
  display: block; width: 5px; height: 5px; margin-left: -2px;
  border-radius: 50%; background: #318b65;
  transform: translateY(var(--signal-travel, 0px));
  box-shadow: 0 0 13px #529c7550;
}
.opening-continuation .audience-bar {
  position: relative; padding: 25px max(6%, calc((100vw - 1640px) / 2)) 34px;
  background: transparent; border-bottom-color: #d6e2d5;
}
.opening-continuation .intro { background: var(--paper); }
@media (min-width: 1800px) {
  .hero .eyebrow { font-size: 11px; }
  .hero .map-label { font-size: 9px; }
  .hero .map-coordinates { font-size: 8px; }
  .hero .detection { padding: 18px 23px; }
}
@media (min-width: 901px) and (max-height: 740px) {
  .hero { padding-top: 18px; }
  .hero .hero-copy { padding: 12px 0; }
  .hero h1 { font-size: clamp(52px, min(6.4vw, 10svh), 76px); margin: 19px 0; }
  .hero-copy > p { font-size: 14px; max-width: 400px; }
  .hero-actions { margin-top: 22px; }
  .hero-actions .button { padding: 15px 19px; }
  .hero-note { margin-top: 20px; }
  .hero-bottom { margin-top: 15px; padding-top: 18px; padding-bottom: 60px; }
}
@media (min-width: 901px) and (max-height: 610px) {
  .hero h1 { font-size: 53px; margin: 14px 0; }
  .hero-copy > p { font-size: 12px; }
  .hero-note { display: none; }
  .hero .city-scene { max-height: 360px; }
  .hero-actions { margin-top: 17px; }
}
@media (min-width: 761px) and (max-width: 900px) {
  .hero { min-height: calc(100svh - var(--header-height)); padding-top: 30px; }
  .hero-stage { grid-template-columns: 1fr 1fr; }
  .hero h1 { font-size: clamp(48px, 6.8vw, 61px); }
  .hero-copy > p { font-size: 13px; }
  .hero .city-scene { width: 145%; margin-left: -14%; }
  .hero .detection { left: 42%; padding: 11px 12px; max-width: 58%; }
  .hero .detection strong { font-size: 9px; }
  .hero .detection div > span { font-size: 6px; }
  .hero .map-label { font-size: 6px; }
  .hero .map-coordinates { font-size: 5px; }
  .hero-actions { gap: 20px; }
  .hero-actions .button { padding: 15px 17px; font-size: 11px; }
  .hero-actions .text-link { font-size: 10px; }
}
@media (max-width: 760px) {
  .hero { min-height: calc(100svh - var(--header-height)); padding: 24px 6% 0; }
  .hero-stage { grid-template-columns: minmax(0, 1fr); align-content: center; gap: 3px; flex: 1; }
  .hero .hero-copy { padding: 5px 0 0; max-width: 540px; margin: 0 auto; }
  .hero h1 { font-size: clamp(47px, 12.65vw, 76px); margin: 21px 0; line-height: 1.02; }
  .hero-copy > p { font-size: 14px; max-width: 390px; }
  .hero-actions { margin-top: 22px; gap: 20px; flex-wrap: nowrap; }
  .hero-actions .button { padding: 15px 17px; font-size: 11px; gap: 22px; }
  .hero-actions .text-link { font-size: 10px; gap: 10px; }
  .hero-note { margin-top: 21px; font-size: 8px; }
  .hero .city-scene { width: 114%; max-width: 700px; max-height: none; margin: 10px 0 0 -7%; aspect-ratio: 1310 / 810; }
  .hero .map-label { top: 0; right: 10%; font-size: 5px; letter-spacing: .8px; }
  .hero .detection { left: 43%; top: 61%; padding: 9px 11px; max-width: 55%; gap: 7px; }
  .hero .detect-icon { font-size: 18px; }
  .hero .detection small { font-size: 5px; letter-spacing: .5px; }
  .hero .detection strong { font-size: 8px; margin: 5px 0; }
  .hero .detection div > span { font-size: 5px; }
  .hero .map-coordinates { bottom: -3%; left: 9%; right: 9%; font-size: 4px; letter-spacing: .6px; }
  .hero-bottom { margin: 23px auto 0; padding: 19px 0 65px; }
  .hero-bottom > span { font-size: 6px; line-height: 1.6; max-width: 140px; }
  .hero-bottom a { font-size: 7px; max-width: 123px; }
  .hero-bottom::after { height: 42px; }
  .opening-continuation { --handoff-inset: 10px; --handoff-radius: 22px; margin-top: -30px; padding-top: 27px; }
  .handoff-signal { height: 22px; }
  .opening-continuation .audience-bar { padding: 20px 6% 27px; }
}
@media (max-width: 360px) {
  .hero { padding-top: 22px; }
  .hero h1 { font-size: 47px; }
  .hero .eyebrow { font-size: 7px; letter-spacing: .7px; }
  .hero-copy > p { font-size: 13px; }
  .hero-actions { gap: 12px; }
  .hero-actions .button { padding: 14px 12px; font-size: 10px; gap: 13px; }
  .hero-actions .text-link { font-size: 9px; gap: 6px; }
  .hero .detection { left: 41%; gap: 5px; padding: 8px; max-width: 56%; }
  .hero .detection strong { font-size: 7px; }
  .hero .detection div > span { font-size: 4px; }
}
@media (prefers-reduced-motion: reduce) {
  .opening-continuation { clip-path: none; }
  .handoff-signal span { transform: none; }
}
@media (min-width: 901px) and (max-height: 820px) {
  .hero { padding-top: 22px; }
  .hero .hero-copy { padding-top: 14px; padding-bottom: 14px; }
  .hero-bottom { margin-top: 18px; padding-top: 19px; padding-bottom: 66px; }
}
@media (min-width: 901px) and (max-height: 740px) {
  .hero { padding-top: 16px; }
  .hero .hero-copy { padding-top: 8px; padding-bottom: 8px; }
  .hero .city-scene { width: min(120%, calc((100svh - 225px) * 1.617284)); }
  .hero-bottom { margin-top: 14px; padding-top: 16px; padding-bottom: 60px; }
}

/* Formulário de contato */
.contact-form{display:grid;gap:14px;margin:25px 0 18px;max-width:580px}.contact-form label{display:grid;gap:7px;color:#b8d0c7;font-size:10px;letter-spacing:.04em}.contact-form input,.contact-form textarea{width:100%;border:1px solid #5d8079;background:#0a252c;color:#eff8ef;border-radius:2px;padding:12px;font:13px Manrope,Arial,sans-serif;outline:0;resize:vertical}.contact-form input:focus,.contact-form textarea:focus{border-color:#82e6b0;box-shadow:0 0 0 3px #82e6b01c}.contact-form .button{justify-self:start;border:0;margin-top:3px}.form-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}.contact-feedback{padding:10px 12px;border-left:2px solid #7be1ad;background:#69dc9d12;color:#c6efd5;font-size:12px;line-height:1.5}.contact-feedback.is-error{border-color:#ebaa96;background:#e7a18b12;color:#f6c2b1}
@media(max-width:760px){.form-row{grid-template-columns:1fr}.contact-form{gap:12px}.contact-form input,.contact-form textarea{font-size:16px}}

/* Responsive layout: keep content readable and controls comfortable to touch. */
.nav-contact { display: none; }
.demo-map { aspect-ratio: 1000 / 660; }
.form-row > label, .contact-grid > *, .section-heading > * { min-width: 0; }

@media (max-width: 1000px) {
  :root { --header-height: 76px; }
  html { scroll-padding-top: calc(var(--header-height) + 20px); }
  .header { height: var(--header-height); padding-inline: 5%; }
  .header .brand { width: 200px; }
  .header .nav-cta { display: none; }
  .menu {
    display: grid; place-items: center; width: 44px; height: 44px;
    padding: 0; border: 1px solid #c3cec6; border-radius: 4px;
    background: transparent; color: #16392d; font-size: 23px;
  }
  .header nav {
    display: none; position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column; gap: 6px; padding: 16px 5% 24px;
    max-height: calc(100dvh - var(--header-height)); overflow-y: auto;
    background: var(--paper); border-bottom: 1px solid var(--line);
    box-shadow: 0 18px 30px #091e2818;
  }
  .header nav.open { display: flex; }
  .header nav a { display: flex; align-items: center; min-height: 48px; padding: 10px 12px; font-size: 16px; }
  .header nav .nav-contact { margin-top: 8px; background: var(--green); border-radius: 3px; color: var(--navy); }
  .reading-progress { top: calc(var(--header-height) - 1px); }
  .section-heading { display: block; }
  .section-heading > p { margin-top: 22px; font-size: 14px; }
  .product-layout { grid-template-columns: minmax(0, 1fr) 260px; }
  .product-name span { display: none; }
  .privacy-tags { flex-wrap: wrap; }
  .contact-grid { grid-template-columns: 1fr 1fr; gap: 6%; }
  .contact h2 { font-size: clamp(38px, 5vw, 48px); }
  .form-row { grid-template-columns: 1fr; }
  .contact-form input, .contact-form textarea { font-size: 16px; }
  footer { flex-wrap: wrap; }
}

@media (max-width: 900px) {
  .hero { min-height: auto; padding: 32px 6% 0; }
  .hero-stage { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .hero .hero-copy { max-width: 620px; padding: 0; margin-inline: auto; transform: none !important; }
  .hero h1 { font-size: clamp(46px, 10.8vw, 76px); margin-block: 24px; }
  .hero-copy > p { font-size: 16px; max-width: 460px; }
  .hero .eyebrow { font-size: 10px; letter-spacing: .9px; }
  .hero-actions { flex-wrap: wrap; gap: 12px 24px; margin-top: 24px; }
  .hero-actions .button { font-size: 14px; min-height: 48px; padding: 14px 18px; gap: 24px; }
  .hero-actions .text-link { font-size: 14px; min-height: 44px; gap: 12px; }
  .hero-note { font-size: 11px; margin-top: 16px; }
  .hero .city-scene {
    display: flex; flex-direction: column; width: 100%; max-width: 620px;
    margin: 0 auto; aspect-ratio: auto; transform: none !important;
  }
  .hero .city-scene > svg { aspect-ratio: 1310 / 810; height: auto; }
  .hero .map-label { position: static; align-self: center; font-size: 9px; letter-spacing: .8px; }
  .hero .detection {
    position: relative; left: auto; top: auto; align-self: center;
    max-width: 100%; margin-top: -24px; padding: 12px 14px; gap: 12px;
  }
  .hero .detect-icon { font-size: 24px; }
  .hero .detection small { font-size: 9px; letter-spacing: .6px; }
  .hero .detection strong { font-size: 13px; margin-block: 6px; }
  .hero .detection div > span { font-size: 10px; line-height: 1.5; display: block; }
  .hero .map-coordinates { position: static; margin-top: 18px; font-size: 8px; gap: 16px; line-height: 1.6; flex-wrap: wrap; }
  .hero-bottom { gap: 20px; margin-top: 24px; padding-bottom: 65px; }
  .hero-bottom > span, .hero-bottom a { font-size: 10px; line-height: 1.6; max-width: 46%; }
  .hero-bottom a { min-height: 44px; }
  .audience-bar { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
  .audience-bar b { display: none; }
  .audience-bar p { font-size: 14px; }
  .process-layout { display: block; }
  .process-sticky { position: static; }
  .process-sticky h2 { font-size: clamp(36px, 6vw, 50px); }
  .process-sticky > p { font-size: 14px; max-width: none; }
  .process-meter { display: none; }
  .process-chapters { margin-top: 36px; }
  .process-chapter { min-height: 0; opacity: 1; padding: 28px 0 36px; }
  .process-chapter p { max-width: 600px; font-size: 15px; }
  .chapter-index, .chapter-tags span { font-size: 11px; }
  .product-layout { display: block; }
  .product-toolbar { flex-wrap: wrap; gap: 12px; padding: 18px 16px; }
  .product-name { font-size: 14px; }
  .demo-badge { font-size: 9px; }
  .product-filters { display: block; padding: 12px; }
  .filters { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .filters button { min-height: 44px; font-size: 12px; gap: 8px; padding: 10px; align-items: center; }
  .filters button:first-child { font-size: 12px; }
  .filters button:first-child::before { content: none; }
  .filters span { font-size: 11px; }
  .filter-hint { display: block; font-size: 11px; margin: 12px 0 2px; }
  .marker { width: 44px; height: 44px; }
  .marker::before { width: 9px; height: 9px; }
  .marker::after { left: 33px; top: 13px; font-size: 9px; }
  .route-control { padding: 14px; gap: 12px; }
  .route-control button, .inspector-nav button { width: 44px; height: 44px; font-size: 16px; }
  .route-control strong { font-size: 13px; }
  .route-control small { font-size: 11px; }
  .route-control > span { font-size: 11px; }
  .event-inspector { display: flex; padding: 20px; border-left: 0; border-top: 1px solid #304a48; }
  .inspector-head { font-size: 10px; gap: 12px; margin-bottom: 16px; }
  .evidence-photo { width: 100%; height: auto; aspect-ratio: 2 / 1; margin-bottom: 20px; }
  .evidence-photo span { font-size: 9px; padding: 5px; left: 10px; bottom: 10px; }
  .event-inspector > small { font-size: 11px; }
  .event-inspector h3 { font-size: 22px; min-height: 0; margin: 10px 0; }
  .event-inspector > p { font-size: 14px; }
  .event-meta { font-size: 12px; flex-wrap: wrap; margin-top: 16px; }
  .event-meta .severity { padding: 7px 9px; }
  .event-facts { display: block; margin-top: 20px; }
  .event-facts > div { font-size: 12px; flex-wrap: wrap; }
  .inspector-nav { margin-top: 20px; padding-top: 16px; }
  .inspector-nav > span { font-size: 12px; }
  .product-footer { flex-wrap: wrap; font-size: 10px; padding: 14px; }
  .product-footer > span:last-child { display: block; }
  .demo-caption { font-size: 12px; line-height: 1.7; }
  .observation-layout { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .application-text strong { font-size: 20px; }
  .application-description { font-size: 14px; }
  .application-tab.active .application-description { max-height: none; }
  .application-number { font-size: 12px; }
  .observation-stage { aspect-ratio: 1.35; }
  .observation-topline { font-size: 9px; letter-spacing: .5px; }
  .observation-caption small { font-size: 10px; letter-spacing: .8px; }
  .image-note { font-size: 11px; }
  .contact-grid { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .contact-form { max-width: none; }
  .contact-form label { font-size: 13px; }
  .contact-form .button { min-height: 48px; font-size: 14px; }
}

@media (max-width: 600px) {
  .section { padding: 56px 6%; }
  h2, .applications h2, .privacy h2, .contact h2 { font-size: clamp(32px, 8.6vw, 46px); }
  .eyebrow { font-size: 10px; letter-spacing: .8px; }
  .intro-grid > div > p, .principles p, .privacy p, .contact p { font-size: 15px; }
  .intro-grid .lead { font-size: 18px; }
  .principles h3 { font-size: 18px; }
  .under-link { min-height: 44px; font-size: 14px; gap: 14px; line-height: 1.7; }
  .privacy-tags { font-size: 13px; }
  .route-meter { display: none; }
  #route-percent { margin-left: auto; }
  .contact-form .button { width: 100%; }
  footer { grid-template-columns: minmax(0, 1fr); gap: 14px; padding-block: 28px; }
  footer .brand { width: min(230px, 100%); }
  footer p, footer > span { grid-column: 1; grid-row: auto; font-size: 12px; }
  footer > a:not(.brand) { margin: 0; font-size: 13px; min-height: 44px; display: flex; align-items: center; }
}

@media (max-width: 360px) {
  .hero .eyebrow { font-size: 9px; }
  .hero-actions { align-items: stretch; flex-direction: column; gap: 6px; }
  .hero-actions .text-link { justify-content: center; }
  .hero .detection { padding: 10px; gap: 8px; }
  .hero .detection strong { font-size: 12px; }
  .filters button, .filters button:first-child { font-size: 11px; }
  .event-inspector { padding: 16px; }
}