/* Brochure palette and screenshots from the Monitrag portal. */
:root{--bg:#004b87;--surface:#005994;--line:#3b7baf;--muted:#dcecf6;--blue:#c2e7ff;--white:#fff}
[hidden]{display:none!important}
.button{color:#004b87;box-shadow:0 4px 15px #001f361a}.button:hover{color:#002e50}.button:disabled{color:#c8e2f3;background:#3d6b90;border-color:#688faf}
.site-header{background:#004b87}.site-header nav{color:#e3f1fa}.site-header nav a:hover{color:#fff}
.hero{grid-template-columns:minmax(0,.86fr) minmax(0,1.35fr);gap:52px;padding-block:80px 88px;min-height:760px}
.hero h1{font-size:clamp(3.25rem,4.2vw,4.5rem);line-height:1.05;letter-spacing:-1.8px;max-width:540px;margin-top:23px}
.hero-copy h1>span{color:#c8e9ff;background:linear-gradient(110deg,#c2e7ff,#fff,#c2e7ff);background-clip:text;-webkit-background-clip:text}
.hero .intro{max-width:485px}.hero-note{color:#d1e6f4}.hero-actions{gap:18px 23px}
.brand-landscape svg{opacity:.86;bottom:-95px;width:max(118vw,1450px)}
.landscape-contour{opacity:.5}.hero-gallery{min-width:0;align-self:center;position:relative;box-shadow:0 30px 65px #001f3638}
.gallery-tabs{display:flex;align-items:stretch;gap:3px;padding:7px;background:#002e50;border:1px solid #6095c1;border-bottom:0;border-radius:12px 12px 0 0}
.gallery-tabs button{flex:1;min-width:0;border:1px solid transparent;border-radius:6px;background:none;color:#e1f3ff;padding:11px 10px;font-size:.9375rem;font-weight:600;line-height:1.3;min-height:44px;transition:background .2s,color .2s}
.gallery-tabs button:hover{background:#075ea5;color:#fff}.gallery-tabs button[aria-selected=true]{background:#fff;border-color:#fff;color:#004b87}
.portal-shot{margin:0;min-width:0}.screenshot-open{position:relative;display:block;width:100%;padding:0;border:0;background:#f4f8fb;overflow:hidden;border-radius:10px;cursor:zoom-in}
.screenshot-open img{width:100%;height:auto;display:block;transition:filter .2s}.screenshot-open:hover img{filter:brightness(.96)}
.zoom-label{position:absolute;right:14px;bottom:14px;background:#003f70;color:white;border:1px solid #c2def0;border-radius:5px;padding:6px 11px;font-size:.8125rem;font-weight:600;box-shadow:0 3px 12px #10355326}
.portal-shot figcaption{display:flex;align-items:baseline;justify-content:space-between;gap:12px;padding:13px 2px 0;font-size:.9375rem;color:#e4f2fb;line-height:1.4}
.portal-shot figcaption>span+span{white-space:nowrap;font-size:.75rem;color:#c2dced}
.gallery-panel{min-width:0;background:#002e50;border:1px solid #6095c1;border-top:0;border-radius:0 0 12px 12px;overflow:hidden}
.gallery-panel .screenshot-open{border-radius:0}.gallery-panel figcaption{padding:14px 17px 16px}
.field-showcase{display:grid;grid-template-columns:minmax(0,1fr) 320px;align-items:center;gap:85px;max-width:1080px;margin:80px auto 0;padding-top:64px;border-top:1px solid #6095c1}
.field-copy h3{font-size:2.75rem;line-height:1.12;letter-spacing:-.9px;margin:21px 0 25px}.field-copy h3 span{color:#c5e4f8}.field-copy>p:not(.eyebrow){color:var(--muted);max-width:550px}
.field-notes{display:grid;margin-top:30px;gap:15px}.field-notes>span{display:flex;align-items:center;gap:19px;color:#b9d9ef;font-size:.875rem}.field-notes b{color:#f2faff;font-weight:400;font-size:1.0625rem}
.phone-shot{width:100%;max-width:290px;justify-self:center}.phone-shot .screenshot-open{border:7px solid #f7fcff;border-radius:26px;box-shadow:0 24px 50px #001f3640}.phone-shot .zoom-label{font-size:.75rem;bottom:9px;right:9px}.phone-shot figcaption{flex-direction:column;align-items:center;gap:3px;text-align:center}
.type-card .portal-shot{margin-top:auto;padding-top:20px}.type-card .portal-shot figcaption{font-size:.8125rem;flex-wrap:wrap;gap:4px}.type-card .screenshot-open{border-radius:7px}
.detail-showcase{margin-top:74px}.showcase-heading{display:grid;grid-template-columns:1fr 1fr;gap:70px;align-items:end;margin-bottom:28px}.showcase-heading h3{font-size:2.375rem;font-weight:600;line-height:1.16;letter-spacing:-.6px}.showcase-heading p{color:var(--muted);max-width:480px}.detail-showcase .gallery-tabs{justify-content:flex-start}.detail-showcase .gallery-tabs button{flex:0 1 auto;padding-inline:24px}.detail-showcase .portal-gallery{max-width:1180px;margin-inline:auto}
.report-showcase{margin-top:42px}.report-showcase .screenshot-open{border:1px solid #83a5c1;box-shadow:0 18px 50px #001f3630}
.benefit-strip span:before{color:#c2e7ff}.section .eyebrow{color:#ceebff}.feature-index{color:#c2e1f5}.step-top svg{color:#cfecff}.type-title .tag{color:#c8e2f4}
.alarm-strip{background:#005994;border-color:#6095c1}.alarm-label,.alarm-strip p span,.alarm-timeline,.alarm-duration{color:#d6ebf9}.export-tags>span{color:#d5e8f5}.export-tags b{color:#fff}
.contact::before{background:#0873b990}.contact-copy,.contact-direct>span{color:#d9edfa}.contact-direct{border-color:#6e9dc4}.contact h2>span{color:#d1edff}.form-grid label{color:#e2f3fe}.form-grid input,.form-grid textarea{background:#002e50;border-color:#6e9dc4}.form-grid label>span{color:#d8efff}.consent,.contact-form .form-notice,.form-bottom>span{color:#d6eaf7}
.screenshot-dialog{padding:0;border:1px solid #8eb6d0;border-radius:12px;background:#f4f8fb;color:#173955;max-width:min(96vw,1800px);width:max-content;max-height:95dvh;overflow:hidden;box-shadow:0 30px 100px #0a253b99}
.screenshot-dialog::backdrop{background:#10334fe8;backdrop-filter:blur(5px)}
.dialog-toolbar{display:flex;align-items:center;justify-content:space-between;gap:25px;padding:15px 21px;border-bottom:1px solid #d4e3ed;background:#fff}.dialog-toolbar h2{font-size:1.0625rem;font-weight:600;line-height:1.35}.dialog-close{flex-shrink:0;display:flex;align-items:center;gap:13px;background:#004b87;color:#fff;border:0;border-radius:5px;padding:9px 13px;font-size:.9375rem;min-height:44px}.dialog-close span{font-size:1.5rem;line-height:1}
.dialog-scroll{overflow:auto;max-height:calc(95dvh - 125px);overscroll-behavior:contain}.dialog-scroll img{width:auto;max-width:100%;height:auto;margin:auto}.screenshot-dialog.is-phone{max-width:min(96vw,530px)}.dialog-note{padding:9px 20px;font-size:.8125rem;color:#526c81;border-top:1px solid #d8e6ef}
body.image-open{overflow:hidden}
.dialog-pan-hint{display:none}
@media(max-width:600px){.screenshot-dialog:not(.is-phone) .dialog-scroll img{width:1200px;max-width:none}.screenshot-dialog:not(.is-phone) .dialog-pan-hint{display:inline}}
@media(hover:hover) and (pointer:fine){.type-card:hover{background:#07599c;border-color:#93b9d3}.feature:hover{background:#005994}.feature:hover .feature-index{color:white}}
@media(min-width:1500px){.hero h1{font-size:4.5rem}}
@media(max-width:1100px){.hero{gap:28px;grid-template-columns:minmax(0,.9fr) minmax(0,1.2fr);padding-block:64px;min-height:0}.hero h1{font-size:3.4rem;letter-spacing:-1.3px}.gallery-tabs button{font-size:.875rem;padding:9px 6px}.field-showcase{gap:55px}.hero-gallery figcaption{flex-wrap:wrap;gap:5px}.field-copy h3{font-size:2.5rem}}
@media(max-width:800px){.hero{grid-template-columns:1fr;gap:42px;padding-block:44px 54px}.hero h1{font-size:clamp(3rem,7.7vw,4rem);max-width:620px;letter-spacing:-1.4px}.hero-copy{max-width:660px}.hero-gallery{width:100%;max-width:720px;justify-self:center}.hero-gallery figcaption{flex-wrap:nowrap}.brand-landscape svg{opacity:.85;top:40px;bottom:auto;width:1200px;left:55%}.field-showcase{grid-template-columns:1fr 270px;gap:30px;margin-top:56px;padding-top:48px}.field-copy h3{font-size:2.1rem}.showcase-heading{grid-template-columns:1fr;gap:18px}.showcase-heading p{max-width:620px}.detail-showcase{margin-top:50px}.showcase-heading h3{font-size:2.25rem}}
@media(max-width:600px){.field-showcase{grid-template-columns:1fr;gap:30px}.field-copy h3{font-size:2.375rem}.phone-shot{max-width:280px}.portal-shot figcaption{flex-direction:column;gap:4px}.gallery-tabs button{font-size:.875rem;padding:10px 6px}.hero-gallery figcaption{gap:3px}.detail-showcase .gallery-tabs button{flex:1;padding-inline:10px}.dialog-toolbar{padding:10px 12px;gap:12px}.dialog-toolbar h2{font-size:.9375rem}.dialog-close{font-size:.875rem;padding-inline:10px}.dialog-note{padding:8px 12px}.screenshot-dialog{max-width:98vw;border-radius:8px}.dialog-scroll{max-height:calc(95dvh - 145px)}.zoom-label{right:9px;bottom:9px;font-size:.75rem;padding:5px 8px}.showcase-heading h3{font-size:2rem}}
@media(max-width:380px){.hero h1{font-size:2.9rem}.gallery-tabs button{font-size:.8125rem}.hero .eyebrow{letter-spacing:.5px}.gallery-tabs{gap:1px;padding:5px}.hero-gallery figcaption{font-size:.8125rem}}
@media(prefers-reduced-motion:reduce){.hero-copy h1>span{color:#c8e9ff;background:none}}

/* Depth surfaces: a stationary wrapper makes movement stable near the image. */
.depth-stage{position:relative;min-width:0;isolation:isolate}
.hero-depth{align-self:center;width:100%}.detail-depth{max-width:1180px;margin-inline:auto}
.phone-depth{width:100%;max-width:290px;justify-self:center}
.depth-surface{position:relative;transform:perspective(1500px) translateY(var(--depth-lift,0px)) rotateX(var(--depth-rx,0deg)) rotateY(var(--depth-ry,0deg));transform-origin:50% 50%;transition:transform .65s cubic-bezier(.16,1,.3,1),box-shadow .6s;border-radius:12px}
.depth-surface::after{content:'';position:absolute;inset:0;z-index:3;pointer-events:none;border-radius:inherit;opacity:var(--shine-opacity,0);background:radial-gradient(550px circle at var(--shine-x,50%) var(--shine-y,50%),#fff,transparent 72%);transition:opacity .4s}
.depth-active>.depth-surface{transition-duration:.22s,.5s;box-shadow:0 35px 75px #1134514d,0 0 0 1px #b8e3ff55}
.depth-stage .screenshot-open:hover img{filter:none}
.phone-depth .depth-surface{border-radius:26px}

/* Large panels lift into place; text and rows follow a quieter stagger. */
.reveal.reveal-cinematic{transition:opacity .95s cubic-bezier(.16,1,.3,1),transform 1.15s cubic-bezier(.16,1,.3,1);transform:perspective(1400px) translate3d(0,0,0) rotateX(0deg) scale(1);transform-origin:50% 15%;translate:none}
.js-motion .reveal-cinematic:not(.visible){opacity:0;translate:none;transform:perspective(1400px) translate3d(0,55px,0) rotateX(7deg) scale(.965)}
.js-motion .phone-depth.reveal-cinematic:not(.visible){transform:translate3d(0,55px,0) rotate(5deg) scale(.94)}
.js-motion .audience-list article.reveal:not(.visible){translate:-32px 12px}
.js-motion .audience-list article:nth-child(2).reveal:not(.visible){translate:32px 12px}
.audience{position:relative;isolation:isolate;overflow:hidden}
.audience::before{content:'';position:absolute;inset:-70px -8%;z-index:-1;pointer-events:none;background:#70a2ca24;mask:url('/assets/brand-landscape.svg') center/cover no-repeat;-webkit-mask:url('/assets/brand-landscape.svg') center/cover no-repeat;transform:translate3d(0,var(--section-drift,0px),0)}
.audience-list article{position:relative}.audience-list article::after{content:'';position:absolute;inset:auto 0 -1px;height:1px;background:linear-gradient(90deg,#bde5ff,#7dc3f1,transparent);transform:scaleX(0);transform-origin:left;pointer-events:none}
.js-motion .audience-list article.visible::after{animation:line-grow 1.2s cubic-bezier(.16,1,.3,1) var(--reveal-delay,0ms) both}
.purchase-panel{position:relative;isolation:isolate;overflow:hidden;background:linear-gradient(120deg,#0873b9,#003f70 75%);box-shadow:0 22px 55px #14395730}
.purchase-panel::after{content:'';position:absolute;inset:-50% auto -50% -70%;width:48%;pointer-events:none;background:linear-gradient(90deg,transparent,#dbf1ff19,transparent);transform:skewX(-18deg);opacity:0}
.js-motion .purchase-panel.visible::after{animation:panel-light 1.5s ease-out .3s both}
.contact::before{inset:-60px 0;transform:translate3d(0,var(--section-drift,0px),0)}
.screenshot-dialog[open]{animation:dialog-arrive .28s cubic-bezier(.16,1,.3,1) both}
@keyframes panel-light{0%{translate:0 0;opacity:0}15%{opacity:1}80%{opacity:1}100%{translate:400% 0;opacity:0}}
@keyframes dialog-arrive{from{opacity:0;transform:translateY(14px) scale(.975)}to{opacity:1;transform:translateY(0) scale(1)}}
@media(max-width:800px){.hero-depth{max-width:720px;justify-self:center}.js-motion .reveal-cinematic:not(.visible){transform:translate3d(0,30px,0) scale(.98)}.js-motion .phone-depth.reveal-cinematic:not(.visible){transform:translate3d(0,30px,0) rotate(3deg)}}
@media(max-width:600px){.phone-depth{max-width:280px}.js-motion .audience-list article.reveal:not(.visible){translate:-14px 10px}.js-motion .audience-list article:nth-child(2).reveal:not(.visible){translate:14px 10px}}
@media(prefers-reduced-motion:reduce){.depth-surface,.reveal.reveal-cinematic,.js-motion .reveal-cinematic:not(.visible),.audience::before,.contact::before{transform:none!important}.depth-surface::after,.purchase-panel::after{display:none}.js-motion .reveal:not(.visible){opacity:1;translate:none}.audience-list article::after{transform:scaleX(1)}}

/* One invitation to contact, with blue / cyan accents. */
.contact-unified{max-width:940px;text-align:center}.contact-unified .eyebrow{justify-content:center}.contact-unified h2{font-size:clamp(3rem,5.4vw,5rem);line-height:1.06;letter-spacing:-2px;margin:25px 0}.contact-unified .contact-copy{max-width:590px;margin-inline:auto;color:#e1f2ff}.contact-actions{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:24px 36px;margin-top:32px}.contact-phone{display:inline-flex;align-items:center;gap:11px;font-size:1.25rem;min-height:44px}.contact-phone svg{width:22px;height:22px}.contact-phone:hover{text-decoration:underline;text-underline-offset:5px}.contact-address{display:inline-block;margin-top:24px;font-size:1.0625rem;text-decoration:underline;text-underline-offset:5px}.contact::before{opacity:.65}
@media(max-width:600px){.contact-unified h2{font-size:3rem;letter-spacing:-1.2px}.contact-actions{gap:15px;flex-direction:column}.contact-unified .contact-copy{font-size:1.125rem}.contact-address{overflow-wrap:anywhere}}

/* Bright data packets follow the original M contour; no permanent animation loop. */
.hero-stage .landscape-contour{stroke:#8cdfff;stroke-width:1.6;opacity:.7}.brand-flow-trail{fill:none;stroke-linecap:round;vector-effect:non-scaling-stroke;opacity:0;pointer-events:none}.flow-glow{stroke:#36c9ff;stroke-width:17;stroke-dasharray:.055 2;filter:blur(5px)}.flow-core{stroke:#6ee3ff;stroke-width:4;stroke-dasharray:.045 2;filter:drop-shadow(0 0 5px #00bdff)}.flow-head{stroke:#fff;stroke-width:6;stroke-dasharray:.004 2;filter:drop-shadow(0 0 6px #b8f5ff)}
.flow-receiver{position:absolute;inset:-2px;z-index:5;pointer-events:none;border:2px solid #79e4ff;border-radius:14px;box-shadow:0 0 20px #28c8ff66,0 0 60px #00baff33;opacity:0}.flow-controls{display:flex;justify-content:flex-end;margin-top:10px}.flow-toggle{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:8px 12px;border:1px solid #94d6ff66;border-radius:5px;background:#003f704d;color:#e1f6ff;font-size:.8125rem;line-height:1.3}.flow-toggle svg{width:17px;height:17px;flex-shrink:0}.flow-toggle:hover{border-color:#b4e8ff;background:#003f70}.flow-toggle:focus-visible{outline:3px solid #c9f5ff;outline-offset:4px}
@media(max-width:800px){.flow-glow{stroke-width:14}.flow-core{stroke-width:3.5}.flow-head{stroke-width:5}.flow-controls{margin-top:7px}}
@media(prefers-reduced-motion:reduce){.brand-flow-trails,.flow-controls,.flow-receiver{display:none}.hero-stage .landscape-contour{stroke:#8cdfff;stroke-dasharray:none;opacity:.55}}
/* Preserve reflow when visitors enlarge text. */
.hero-copy,.hero-depth,.feature,.purchase-panel>div{min-width:0}
.hero h1,.type-title h3,.purchase-panel h2,.contact h2{overflow-wrap:anywhere}
.purchase-steps{flex-wrap:wrap}