:root {
  color-scheme: dark;
  --bg: #101412;
  --text: #f3f5ef;
  --muted: #a8b0a8;
  --signal: #d4fb70;
  font-family: "Segoe UI", Arial, sans-serif;
  font-synthesis: none;
}
* { box-sizing: border-box; }
html { min-width: 320px; background: var(--bg); }
body { margin: 0; color: var(--text); font-size: 16px; line-height: 1.5; -webkit-font-smoothing: antialiased; }
button, input { font: inherit; }
button { cursor: pointer; }
button:disabled { cursor: wait; }
[hidden] { display: none !important; }
::selection { color: #101412; background: var(--signal); }
.industrial-scene { position: fixed; inset: 0; overflow: hidden; pointer-events: none; }
.scene-photo, .scene-overlay, .scene-grid { position: absolute; inset: 0; }
.scene-photo img { width: 100%; height: 100%; object-fit: cover; object-position: center 55%; filter: saturate(.8); }
.scene-overlay { background: linear-gradient(90deg, rgba(7,14,12,.28), rgba(10,17,14,.02) 62%, rgba(7,14,12,.12)), linear-gradient(0deg, #0b120fec, transparent 40%, #0b120f80); }
.scene-grid { opacity: .11; background-image: repeating-linear-gradient(90deg, transparent 0, transparent calc(25% - 1px), #cbd7c5 25%); mask-image: linear-gradient(#000, transparent 35%, transparent 75%, #000); }
.portal-shell { position: relative; min-height: 100vh; min-height: 100svh; max-width: 1800px; margin: auto; padding: 0 clamp(24px, 5.6vw, 104px); display: flex; flex-direction: column; }
.site-header { display: flex; align-items: center; gap: 32px; min-height: 119px; border-bottom: 1px solid #dbe5d526; }
.brand { display: flex; align-items: center; gap: 13px; }
.brand-symbol { color: var(--signal); }
.wordmark { font-weight: 760; font-size: 31px; letter-spacing: -.8px; display: flex; align-items: center; gap: 12px; }
.brand-wms { font-size: 10px; font-weight: 500; letter-spacing: 1.5px; color: #b7c2b6; padding: 3px 6px; border: 1px solid #b7c2b645; border-radius: 3px; }
.header-caption { color: #bcc4ba; font-size: 12px; border-left: 1px solid #dbe5d533; padding-left: 30px; }
.access-badge { margin-left: auto; font-size: 12px; color: #d2d9ce; display: flex; align-items: center; gap: 9px; }
.access-badge svg { color: var(--signal); }
.main-layout { flex: 1; display: grid; grid-template-columns: 1.4fr 1fr; gap: clamp(40px, 6vw, 110px); align-items: center; padding: 70px 0 85px; }
.eyebrow { display: flex; align-items: center; gap: 12px; font-size: 10px; font-weight: 650; letter-spacing: 2.5px; color: #d3dccb; margin: 0 0 31px; }
.eyebrow span { height: 6px; width: 6px; background: var(--signal); box-shadow: 0 0 18px #d4fb7066; }
h1 { font-size: clamp(48px, 5.25vw, 89px); letter-spacing: -.055em; line-height: 1.07; font-weight: 650; margin: 0; }
h1 em { font-style: normal; color: var(--signal); }
.hero-description { color: #c1c8bd; font-size: 18px; line-height: 1.65; margin: 29px 0 0; }
.hero-bottom { display: flex; align-items: center; gap: 17px; margin-top: 64px; }
.hero-line { width: 37px; height: 1px; background: var(--signal); }
.hero-bottom p { margin: 0; font-size: 12px; color: #e0e6db; line-height: 1.8; }
.hero-bottom p span { color: #aab6a5; }
.download-module { width: 100%; max-width: 450px; justify-self: end; padding: 30px 34px 0; border: 1px solid #a6b89845; border-radius: 12px; background: #141c17f5; box-shadow: 0 24px 90px #0006, inset 0 1px #d4fb7015; position: relative; }
.download-module::before { content: ""; position: absolute; top: -1px; left: 34px; width: 40px; height: 2px; background: var(--signal); }
@supports (backdrop-filter: blur(20px)) { .download-module { background: #141c17db; backdrop-filter: blur(20px); } }
.module-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 30px; }
.module-kicker { font-size: 9px; letter-spacing: 1.9px; color: #a9b5a1; }
.module-number { color: #708268; font: 12px Consolas, monospace; }
.app-heading { display: flex; gap: 15px; align-items: center; }
.app-icon { display: grid; place-items: center; width: 57px; height: 60px; border: 1px solid #d4fb7030; border-radius: 12px; background: linear-gradient(145deg, #d4fb701d, #d4fb7003); color: var(--signal); }
h2 { margin: 0; font-size: 28px; line-height: 1.3; font-weight: 600; letter-spacing: -.8px; }
.platform { display: flex; gap: 7px; align-items: center; color: #a9b3a5; font-size: 11px; margin: 5px 0 0; }
.module-note { font-size: 13px; color: #b0bcaa; line-height: 1.7; margin: 23px 0 25px; }
.field-group label { display: block; font-size: 12px; font-weight: 500; margin-bottom: 9px; color: #e2e8dd; }
.password-control { display: flex; background: #0b120fd9; border: 1px solid #6e7f66; border-radius: 5px; transition: border-color .2s; }
.password-control:focus-within { border-color: var(--signal); box-shadow: 0 0 0 3px #d4fb7014; }
.password-input { width: 100%; min-width: 0; min-height: 53px; padding: 13px 15px; background: transparent; border: 0; outline: 0; color: #f4f7f0; font-size: 16px; }
.password-input::placeholder { color: #98a291; font-size: 13px; }
.password-toggle { min-width: 48px; padding: 0; display: grid; place-items: center; background: none; border: 0; color: #a8b7a0; border-radius: 4px; }
.password-toggle:hover { color: var(--signal); }
.icon-hide, [aria-pressed="true"] .icon-show { display: none; }
[aria-pressed="true"] .icon-hide { display: block; }
:focus-visible { outline: 2px solid var(--signal); outline-offset: 4px; }
.form-status { font-size: 12px; line-height: 1.4; color: #ffbeb0; margin: 8px 0; }
.form-status:empty { height: 8px; margin: 4px 0; }
.has-error { border-color: #ffa18e; }
.download-button { width: 100%; min-height: 55px; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 15px 19px; border: 1px solid transparent; border-radius: 5px; background: var(--signal); color: #18230e; font-size: 14px; font-weight: 650; transition: background .2s, box-shadow .2s; }
.download-button:hover:not(:disabled) { background: #e2ff9c; box-shadow: 0 4px 28px #d4fb7029; }
.download-button:active:not(:disabled) { background: #c4ed5e; }
.download-button:disabled { opacity: .68; }
.button-icon { display: flex; align-items: center; }
.state-checking, .state-preparing, .state-success, .state-error, .button-spinner { display: none; }
:is(.is-loading,.is-preparing,.is-success,.is-error) .state-idle { display: none; }
.is-loading .state-checking, .is-preparing .state-preparing, .is-success .state-success, .is-error .state-error { display: inline; }
:is(.is-loading,.is-preparing) .download-glyph { display: none; }
:is(.is-loading,.is-preparing) .button-spinner { display: block; }
.button-spinner { width: 18px; height: 18px; border: 2px solid #18230e44; border-top-color: #18230e; border-radius: 50%; animation: spin .8s linear infinite; }
.password-hint { font-size: 10px; line-height: 1.6; text-align: center; color: #a5b19d; margin: 13px 0 25px; }
.module-footer { border-top: 1px solid #a8b99a22; display: flex; justify-content: center; align-items: center; gap: 8px; min-height: 56px; font-size: 10px; color: #a7b39e; }
.module-footer svg { color: #c3d7ad; flex-shrink: 0; }
.site-footer { display: flex; align-items: center; justify-content: space-between; gap: 24px; border-top: 1px solid #dbe5d526; padding: 24px 0 28px; color: #aeb8a8; font-size: 11px; }
.footer-divider { padding: 0 13px; color: #64735c; }
.footer-right { display: flex; align-items: center; gap: 20px; }
.footer-right > span { color: var(--signal); font-size: 20px; }
@keyframes spin { to { transform: rotate(360deg); } }
@media (min-width: 1700px) { .main-layout { padding-block: 100px; } }
@media (max-width: 1000px) { .main-layout { gap: 35px; grid-template-columns: 1fr 1fr; } h1 { font-size: clamp(42px, 5.7vw, 60px); } .download-module { padding-inline: 25px; } .header-caption { display: none; } }
@media (max-width: 700px) {
  .portal-shell { padding-inline: 24px; }
  .site-header { min-height: 89px; gap: 12px; }
  .wordmark { font-size: 25px; gap: 8px; }
  .brand { gap: 9px; }
  .brand-symbol { width: 31px; }
  .brand-wms { font-size: 8px; }
  .access-badge { font-size: 10px; gap: 6px; }
  .main-layout { grid-template-columns: 1fr; gap: 37px; padding: 45px 0 38px; }
  .hero { max-width: 460px; }
  .eyebrow { margin-bottom: 20px; font-size: 9px; letter-spacing: 2px; }
  h1 { font-size: clamp(39px, 9vw, 62px); }
  .hero-description { font-size: 15px; margin-top: 18px; }
  .hero-bottom { display: none; }
  .download-module { max-width: none; padding: 25px 24px 0; }
  .module-top { margin-bottom: 25px; }
  .site-footer { font-size: 10px; padding-block: 21px; }
  .footer-right { display: none; }
  .scene-overlay { background: linear-gradient(90deg, #07100dde, #07100d66), linear-gradient(0deg, #0b120f 5%, transparent 70%); }
}
@media (max-width: 360px) { .portal-shell { padding-inline: 18px; } .download-module { padding-inline: 19px; } .brand-wms { display: none; } .module-footer { font-size: 9px; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }
@media (forced-colors: active) { .industrial-scene { display: none; } .download-button, .password-control, .download-module { border: 1px solid ButtonText; } }

.scene-photo { display: none; }
.depth-stage { position: absolute; inset: -24px; overflow: hidden; }
.depth-layer { position: absolute; inset: 0; transform: translate3d(0,0,0); }
.depth-layer img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center 55%; filter: saturate(.8); }
.depth-distant { z-index: 0; }
.depth-gantries { z-index: 1; mask-image: linear-gradient(transparent 4%, #000 15%, #000 34%, transparent 46%); }
.depth-left { z-index: 2; mask-image: linear-gradient(90deg, #000 0%, #000 29%, transparent 48%); }
.depth-right { z-index: 3; mask-image: linear-gradient(90deg, transparent 63%, #000 81%, #000); }
.depth-floor { z-index: 4; mask-image: linear-gradient(transparent 72%, #000 91%); }
.motion-active .depth-layer { will-change: transform; }
@media (max-width: 700px), (pointer: coarse) {
  .depth-stage { inset: 0; }
  .depth-layer:not(.depth-distant) { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .depth-layer { transform: none !important; will-change: auto !important; }
  .depth-layer:not(.depth-distant) { display: none; }
}
@supports not (mask-image: linear-gradient(#000, transparent)) {
  .depth-layer:not(.depth-distant) { display: none; }
}