/* BTL access only. No shared dashboard or iSmart selectors. */
.btl-login {
    --btl-navy: #061a40;
    --btl-blue: #0759c9;
    --btl-cyan: #00d8f5;
    --btl-violet: #8738f5;
    margin: 0;
    color: #122653;
    background: #f4f8ff;
    font-family: Inter, "Segoe UI", system-ui, -apple-system, sans-serif;
    -webkit-font-smoothing: antialiased;
}
.btl-login *, .btl-login *::before, .btl-login *::after { box-sizing: border-box; }
.btl-login :where(h1, h2, p, figure, ul) { margin: 0; }
.btl-login :where(button, input) { font: inherit; }
.btl-login button { cursor: pointer; }
.btl-login button:disabled { cursor: default; }
.btl-login svg { display: block; width: 24px; height: 24px; flex-shrink: 0; }
.btl-login a { color: #0759c9; text-underline-offset: 4px; }
.btl-login :where(a, button, input):focus-visible { outline: 3px solid #087fff; outline-offset: 4px; }
.btl-skip-link { position: fixed; z-index: 20; top: 12px; left: 12px; transform: translateY(-180%); background: white; padding: 12px 20px; border-radius: 10px; }
.btl-skip-link:focus { transform: translateY(0); }
.btl-layout { display: grid; grid-template-columns: minmax(0, 1.85fr) minmax(420px, 1fr); grid-template-rows: minmax(0, 1fr); height: 100dvh; min-height: 0; }
.btl-showcase {
    position: relative; isolation: isolate; display: flex; flex-direction: column; overflow: hidden;
    padding: clamp(28px, 2.6vw, 50px) clamp(28px, 4.1vw, 78px) 26px; color: white;
    background: radial-gradient(ellipse at 0 0, #084996 0, transparent 47%), radial-gradient(ellipse at 100% 95%, #1046b2 0, transparent 53%), linear-gradient(145deg, #061a40 30%, #041b4e 64%, #112265);
}
.btl-showcase::before { content: ""; position: absolute; z-index: -1; width: 55%; aspect-ratio: 1; right: -36%; top: -26%; border: 1px solid #9b73ff40; transform: rotate(45deg); background: linear-gradient(110deg, #8738f500, #8738f561); }
.btl-showcase::after { content: ""; position: absolute; z-index: -1; width: 55%; aspect-ratio: 1; left: -32%; bottom: -15%; border: 1px solid #7461ff40; transform: rotate(45deg); background: linear-gradient(150deg, #7544ed70, #087fff0d); }
.btl-ambient { position: absolute; z-index: -1; inset: -20%; background: radial-gradient(ellipse at 80% 28%, #5536f52b, transparent 33%), radial-gradient(ellipse at 32% 78%, #008dff24, transparent 35%); animation: btl-ambient 20s ease-in-out infinite alternate; pointer-events: none; }
.btl-particles { position: absolute; z-index: -1; inset: 0; pointer-events: none; }
.btl-particles span { position: absolute; width: 3px; height: 3px; left: calc(6% + var(--i) * 8%); border-radius: 50%; background: #36d5ff; opacity: .5; box-shadow: 0 0 12px #02c8ff; animation: btl-particle 10s ease-in-out infinite alternate; animation-delay: calc(var(--i) * -.9s); }
.btl-particles span:nth-child(3n) { top: 78%; }
.btl-particles span:nth-child(3n + 1) { top: 30%; }
.btl-particles span:nth-child(3n + 2) { top: 57%; }
.btl-brand-row { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.btl-brand-logo { width: clamp(196px, 18vw, 270px); height: auto; object-fit: contain; }
.btl-motion-toggle { display: inline-flex; align-items: center; gap: 7px; padding: 8px; border: 1px solid transparent; border-radius: 8px; background: transparent; color: #b8ccef; font-size: 11px; line-height: 1.4; transition: color .2s, background .2s; }
.btl-motion-toggle svg { width: 14px; height: 14px; }
.btl-motion-toggle:hover { color: white; background: #ffffff0c; }
.btl-motion-toggle:disabled { opacity: .7; }
.btl-intro { position: relative; z-index: 1; margin-top: clamp(28px, 2.6vw, 48px); animation: btl-enter .7s both; }
.btl-eyebrow { display: flex; align-items: center; gap: 10px; margin-bottom: 15px !important; color: #55e9ff; font-size: 11px; font-weight: 650; text-transform: uppercase; letter-spacing: .43em; }
.btl-eyebrow > span { width: 21px; height: 1px; background: #55e9ff; }
.btl-intro h1 { font-size: clamp(35px, 3.45vw, 65px); font-weight: 730; line-height: 1.1; letter-spacing: -.045em; }
.btl-intro h1 > span { background: linear-gradient(100deg, #14ebef 0%, #39bfff 37%, #aa76ff 65%, #25e6f3 100%); background-size: 230% auto; background-clip: text; -webkit-background-clip: text; color: transparent; animation: btl-gradient 9s ease-in-out infinite alternate; }
.btl-intro-copy { max-width: 570px; margin-top: 20px !important; color: #d4e0f6; font-size: clamp(14px, 1.05vw, 18px); line-height: 1.75; }
.btl-modules { position: relative; z-index: 2; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; margin-top: 24px !important; padding: 0; list-style: none; }
.btl-module { --module-color: #168dff; min-width: 0; padding: 14px 11px; border: 1px solid #2787ef45; border-radius: 15px; background: linear-gradient(135deg, #087fff18, #061a4080); box-shadow: 0 9px 24px #0010331a, inset 0 1px #ffffff05; backdrop-filter: blur(8px); animation: btl-module-enter .65s both; animation-delay: calc(.15s + var(--order) * .09s); transition: transform .25s, border-color .25s, box-shadow .25s; }
.btl-module--violet { --module-color: #a144f8; }
.btl-module--teal { --module-color: #00cbaa; }
.btl-module--orange { --module-color: #ff9d20; }
.btl-module--pink { --module-color: #f33f90; }
.btl-module-icon { display: grid; place-items: center; width: 36px; height: 36px; margin-bottom: 11px; border: 1px solid #ffffff25; border-radius: 10px; color: white; background: var(--module-color); box-shadow: 0 4px 20px color-mix(in srgb, var(--module-color) 28%, transparent); transition: transform .3s; }
.btl-module-icon svg { width: 22px; height: 22px; }
.btl-module strong { display: block; font-size: clamp(10px, .8vw, 13px); font-weight: 600; line-height: 1.45; }
.btl-module-detail { display: block; margin-top: 3px; color: #bacbea; font-size: clamp(9px, .72vw, 12px); line-height: 1.45; }
@media (hover: hover) and (pointer: fine) {
    .btl-module:hover { transform: translateY(-5px); border-color: var(--module-color); box-shadow: 0 10px 26px #00103355, 0 0 18px color-mix(in srgb, var(--module-color) 20%, transparent); }
    .btl-module:hover .btl-module-icon { transform: translateY(-2px) rotate(-5deg); }
}
.btl-scene { position: relative; width: calc(100% + 58px); margin: 6px -29px 0 !important; flex: 1; min-height: 310px; display: flex; flex-direction: column; justify-content: center; }
.btl-scene-art { position: relative; width: min(100%, calc(39svh * 1.915)); margin-inline: auto; aspect-ratio: 900 / 470; max-height: 495px; }
.btl-login .btl-network { position: absolute; width: 100%; height: 100%; inset: 0; overflow: visible; }
.btl-login .btl-truck-layer { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.btl-route-glow { opacity: .5; }
.btl-light-flow { animation: btl-route 12s linear infinite; }
.btl-building-float { animation: btl-building 7s ease-in-out infinite; }
.btl-building-float--late { animation-delay: -3.5s; }
.btl-location-pulse { transform-box: fill-box; transform-origin: center; animation: btl-pulse 3s ease-in-out infinite; }
.btl-map-pin { filter: drop-shadow(0 0 12px #00d8f570); }
.btl-truck-route { offset-path: path("M 220 355 L 410 435 L 665 330"); offset-rotate: 0deg; animation: btl-truck 18s ease-in-out infinite; }
.btl-scene-depth { position: absolute; top: 22%; left: 20%; width: 59%; height: 61%; perspective: 1100px; transform: translate(var(--scene-x, 0px), var(--scene-y, 0px)); transition: transform .35s ease-out; }
.btl-ops-window { width: 100%; height: 100%; overflow: hidden; border: 1px solid #bfdcff; border-radius: 14px; background: #eef5ff; box-shadow: -9px 8px 0 #528df999, -13px 13px 0 #274aaf, 0 34px 75px #0088ff25; transform: rotateX(11deg) rotateY(-13deg) rotateZ(-5deg); transform-origin: center; }
.btl-window-top { display: flex; align-items: center; gap: 4px; height: 24px; padding: 0 12px; background: #deeaff; border-bottom: 1px solid #cedff5; }
.btl-window-top > span { width: 4px; height: 4px; border-radius: 50%; background: #9cb4da; }
.btl-window-top > span:first-child { background: #a98af1; }
.btl-window-top small { margin-left: auto; font-size: 6px; letter-spacing: .17em; font-weight: 650; color: #5975a5; }
.btl-window-top svg { width: 10px; height: 10px; margin-left: 8px; color: #7895bd; }
.btl-window-body { display: flex; height: calc(100% - 24px); }
.btl-window-sidebar { position: relative; display: flex; flex-direction: column; gap: 11px; width: 26%; padding: 14px 10px; background: linear-gradient(155deg, #092e6c, #061a40); color: #c5dcff; }
.btl-mini-brand { display: block; font-size: 15px; font-weight: 750; letter-spacing: .3em; color: white; }
.btl-mini-brand > span { color: #b2db3b; }
.btl-window-sidebar > span:not(.btl-mini-brand) { display: flex; align-items: center; gap: 6px; font-size: 7px; white-space: nowrap; }
.btl-window-sidebar svg { width: 10px; height: 10px; }
.btl-sidebar-active { margin: 0 -4px; padding: 6px 4px; border-radius: 4px; background: #087fff; color: white; }
.btl-sidebar-bottom { display: flex; align-items: center; gap: 5px; margin-top: auto; font-size: 6px; opacity: .7; }
.btl-window-main { width: 74%; padding: 13px 14px; color: #102453; }
.btl-window-heading { display: flex; justify-content: space-between; align-items: center; }
.btl-window-heading small { display: block; margin-bottom: 4px; font-size: 5px; letter-spacing: .2em; color: #708eb3; }
.btl-window-heading strong { display: block; font-size: clamp(11px, 1.1vw, 18px); letter-spacing: -.04em; }
.btl-hub { display: grid; place-items: center; width: 30px; height: 30px; background: #e2edff; border: 1px solid #bfdaff; border-radius: 9px; color: #087fff; animation: btl-hub-glow 5s ease-in-out infinite; }
.btl-hub svg { width: 21px; height: 21px; }
.btl-window-stats { display: flex; gap: 7px; margin-top: 12px; }
.btl-window-stats > div { display: flex; align-items: center; gap: 6px; flex: 1; min-width: 0; padding: 8px 6px; background: #ffffffb0; border: 1px solid white; border-radius: 7px; font-size: 6px; color: #657fa4; }
.btl-window-stats strong { display: block; margin-top: 3px; font-size: 10px; font-weight: 700; color: #183363; }
.btl-mini-icon { display: grid; place-items: center; width: 23px; height: 26px; border-radius: 6px; }
.btl-mini-icon svg { width: 16px; height: 16px; }
.btl-mini-icon--blue { background: #d6ebff; color: #087fff; }
.btl-mini-icon--teal { background: #c6f5eb; color: #00a98d; }
.btl-mini-icon--violet { background: #eaddff; color: #8738f5; }
.btl-activity-chart { margin-top: 11px; padding: 10px; border: 1px solid white; border-radius: 8px; background: #ffffffa0; }
.btl-activity-chart > div { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 6px; }
.btl-activity-chart strong { font-size: 8px; font-weight: 650; }
.btl-activity-chart span { font-size: 5px; color: #6f88b2; }
.btl-login .btl-activity-chart svg { width: 100%; height: clamp(42px, 5vw, 85px); overflow: visible; }
.btl-chart-bars { transform-box: fill-box; transform-origin: bottom; animation: btl-chart-in 1.7s .6s both; }
.btl-chart-line { fill: none; stroke-dasharray: 1; stroke-dashoffset: 1; animation: btl-chart-draw 2.5s .7s forwards; }
.btl-float-card { position: absolute; display: flex; align-items: center; gap: 10px; padding: 15px; border: 1px solid #ffffffb0; border-radius: 14px; background: linear-gradient(120deg, #ffffffed, #e9f5fff0); color: #142c58; box-shadow: 0 12px 35px #00174d40, 0 0 28px #25a3ff15; backdrop-filter: blur(10px); animation: btl-float 7s ease-in-out infinite; }
.btl-float-card > div { min-width: 0; }
.btl-float-card strong { display: block; font-size: clamp(9px, .8vw, 13px); line-height: 1.4; font-weight: 650; letter-spacing: -.02em; }
.btl-float-card div > span { display: block; margin-top: 3px; color: #657fa7; font-size: clamp(7px, .65vw, 10px); }
.btl-float-icon { display: grid; place-items: center; width: 34px; height: 37px; border-radius: 10px; }
.btl-float-icon svg { width: 22px; height: 22px; }
.btl-float-icon--blue { color: #087fff; background: #d9ecff; }
.btl-float-icon--teal { color: #00b399; background: #cef7ed; }
.btl-float-icon--violet { color: #8738f5; background: #ecdfff; }
.btl-float-card--projects { top: 4%; left: 23%; width: 27%; padding: 12px; transform: rotate(-5deg); }
.btl-mini-progress { height: 4px; margin-top: 9px; border-radius: 4px; background: #d6e5ff; overflow: hidden; }
.btl-mini-progress i { display: block; width: 70%; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #087fff, #8738f5); }
.btl-float-card--commercial { display: block; top: 1%; right: 3%; width: 24%; border-color: #86b5ff50; background: linear-gradient(125deg, #1260acb0, #6842c1a0); color: white; transform: rotate(8deg); animation-delay: -2s; }
.btl-float-title { display: flex; align-items: center; justify-content: space-between; gap: 4px; }
.btl-float-title > span { margin: 0 !important; color: #e6f1ff !important; font-weight: 650; font-size: clamp(8px, .7vw, 12px) !important; }
.btl-float-title svg { width: 16px; height: 16px; color: #45f5d9; }
.btl-equalizer { display: flex; align-items: end; gap: 6px; height: clamp(42px, 5vw, 75px); padding-top: 14px; border-bottom: 1px solid #accfff35; }
.btl-equalizer i { display: block; width: 9%; height: var(--bar-height); border-radius: 3px 3px 0 0; background: linear-gradient(0deg, #7c38f5, #21b1ff); transform-origin: bottom; animation: btl-bar 6s ease-in-out infinite; animation-delay: calc(var(--order) * -.5s); }
.btl-float-card--commercial small { display: block; margin-top: 9px; color: #c4d4f9; font-size: 7px; }
.btl-float-card--stock { bottom: 15%; left: 1%; transform: rotate(5deg); animation-delay: -3s; }
.btl-float-card--monthly { bottom: 5%; right: 2%; transform: rotate(-7deg); animation-delay: -5s; }
.btl-scene figcaption { position: relative; margin-top: -4px; color: #a9c4e8; text-align: center; font-size: 9px; letter-spacing: .02em; }
.btl-showcase-footer { display: flex; align-items: center; justify-content: center; gap: 14px; margin-top: 22px; color: #a8c2e6; font-size: 10px; letter-spacing: .04em; text-align: center; }
.btl-footer-line { width: 30px; height: 1px; background: #3a6495; }
.btl-access { position: relative; isolation: isolate; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 30px; overflow: hidden; padding: 52px 28px 30px; background: radial-gradient(ellipse at 100% 0, #dfdcff 0, transparent 42%), radial-gradient(ellipse at 0 100%, #dceeff 0, transparent 54%), #f5f9ff; }
.btl-access::before, .btl-access::after { content: ""; position: absolute; z-index: -1; width: 85%; aspect-ratio: 1; top: -32%; left: -23%; border-radius: 50px; transform: rotate(45deg); background: linear-gradient(120deg, #e6efff, #e9f2ff00); }
.btl-access::after { top: auto; left: auto; right: -40%; bottom: -20%; border: 1px solid #fff9; background: #e5f1ff55; }
.btl-access-dots { position: absolute; top: 35px; right: 34px; z-index: -1; width: 110px; height: 105px; background: radial-gradient(circle, #91b7ff75 1px, transparent 2px) 0 0 / 15px 15px; }
.btl-login-card { width: 100%; max-width: 465px; padding: clamp(26px, 2.4vw, 46px); border: 1px solid #ffffffd0; border-radius: 26px; background: #ffffffed; box-shadow: 0 25px 70px #2065c00c, 0 3px 12px #1c5db504; animation: btl-enter .75s .15s both; }
.btl-card-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 24px; }
.btl-card-top img { width: 112px; height: auto; }
.btl-card-eyebrow { display: flex; align-items: center; gap: 7px; color: #0759c9; font-size: 9px; font-weight: 750; text-transform: uppercase; letter-spacing: .22em; white-space: nowrap; }
.btl-card-eyebrow > span { display: block; width: 5px; height: 5px; border-radius: 50%; background: #087fff; box-shadow: 0 0 0 4px #087fff0e; }
.btl-login-card h2 { color: #0b204a; font-size: clamp(29px, 2.5vw, 43px); font-weight: 730; line-height: 1.12; letter-spacing: -.045em; }
.btl-login-card h2 span { color: #0759c9; }
.btl-card-copy { margin-top: 16px !important; color: #667d9f; font-size: 14px; line-height: 1.7; }
.btl-form { margin-top: 30px; }
.btl-field + .btl-field { margin-top: 22px; }
.btl-field label { display: block; margin-bottom: 9px; color: #1b3158; font-size: 12px; font-weight: 600; }
.btl-input-wrap { display: flex; align-items: center; height: 54px; border: 1.5px solid #dce5f4; border-radius: 11px; background: #fefeff; transition: border-color .2s, box-shadow .2s, background .2s; }
.btl-input-wrap:focus-within { border-color: #087fff; background: white; box-shadow: 0 0 0 4px #087fff0b, 0 3px 15px #087fff09; }
.btl-input-wrap:has(input:not(:placeholder-shown)) { border-color: #8ab8f4; }
.btl-input-wrap:has(input:not(:placeholder-shown)):focus-within { border-color: #087fff; }
.btl-input-wrap .btl-input-icon { width: 19px; height: 19px; margin: 0 14px; color: #8397b8; transition: color .2s; }
.btl-input-wrap:focus-within .btl-input-icon { color: #087fff; }
.btl-input-wrap input { width: 100%; min-width: 0; height: 100%; padding: 0 12px 0 0; border: 0; outline: 0 !important; border-radius: inherit; background: transparent; color: #193058; font-size: 14px; box-shadow: none; }
.btl-input-wrap input::placeholder { color: #7d90b0; opacity: 1; }
.btl-password-toggle { display: grid; place-items: center; align-self: stretch; flex-shrink: 0; width: 43px; border: 0; border-radius: 0 11px 11px 0; background: transparent; color: #6e86af; transition: background .2s, color .2s; }
.btl-password-toggle:hover { background: #edf5ff; color: #0759c9; }
.btl-password-toggle svg { grid-area: 1 / 1; width: 19px; height: 19px; transition: opacity .18s, transform .18s; }
.btl-eye-closed { opacity: 0; transform: scale(.7); }
.btl-password-toggle[aria-pressed="true"] .btl-eye-closed { opacity: 1; transform: scale(1); }
.btl-password-toggle[aria-pressed="true"] .btl-eye-open { opacity: 0; transform: scale(.7); }
.btl-form-options { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 15px 10px; margin: 22px 0 25px; font-size: 10px; line-height: 1.5; }
.btl-remember { display: flex; align-items: center; gap: 7px; color: #324c73; cursor: pointer; }
.btl-remember input { appearance: auto; width: 15px; height: 15px; margin: 0; accent-color: #087fff; cursor: pointer; flex-shrink: 0; }
.btl-form-options a { font-weight: 550; text-decoration: none; }
.btl-form-options a:hover { text-decoration: underline; }
.btl-submit { position: relative; isolation: isolate; display: flex; align-items: center; justify-content: center; gap: 15px; width: 100%; min-height: 55px; padding: 14px 16px; overflow: hidden; border: 1px solid #ffffff20; border-radius: 11px; background: linear-gradient(105deg, #0759c9 0%, #0874f4 38%, #7040f1 78%, #8738f5 100%); color: white; font-size: 14px; font-weight: 600; box-shadow: 0 8px 20px #0759c929, 6px 6px 23px #8738f518; transition: transform .2s, box-shadow .25s; }
.btl-submit::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(105deg, #ffffff00 20%, #ffffff23 48%, #ffffff00 75%); transform: translateX(-110%); transition: transform .65s; }
.btl-submit:hover:not(:disabled) { transform: translateY(-2px); box-shadow: 0 12px 26px #0759c939, 6px 6px 25px #8738f52a; }
.btl-submit:hover::before { transform: translateX(110%); }
.btl-submit .btl-submit-arrow { width: 20px; height: 20px; transition: transform .2s; }
.btl-submit:hover .btl-submit-arrow { transform: translateX(3px); }
.btl-submit:active:not(:disabled) { transform: translateY(0); }
.btl-submit:disabled { opacity: .8; }
.btl-submit-loading, .btl-spinner { display: none; }
.btl-spinner { width: 18px; height: 18px; border: 2px solid #ffffff55; border-top-color: white; border-radius: 50%; animation: btl-spin .7s linear infinite; }
.btl-form[aria-busy="true"] :is(.btl-submit-idle, .btl-submit-arrow) { display: none; }
.btl-form[aria-busy="true"] :is(.btl-submit-loading, .btl-spinner) { display: block; }
.btl-form-note { margin-top: 15px !important; text-align: center; color: #7b8dab; font-size: 10px; }
.btl-security { display: flex; justify-content: center; align-items: center; gap: 12px; margin-top: 28px; padding-top: 25px; border-top: 1px solid #e7eef8; }
.btl-security-icon { display: grid; place-items: center; width: 39px; height: 39px; border-radius: 50%; background: #edf5ff; color: #087fff; flex-shrink: 0; }
.btl-security-icon svg { width: 22px; height: 22px; }
.btl-security strong { display: block; font-size: 11px; font-weight: 600; }
.btl-security p { margin-top: 5px !important; color: #7d8fac; font-size: 10px; line-height: 1.5; }
.btl-access-footer { color: #6e86a8; font-size: 9px; text-align: center; line-height: 1.7; }
.btl-access-footer span { margin: 0 5px; }
.btl-notice { display: flex; gap: 10px; align-items: flex-start; margin-bottom: 22px; padding: 12px; border: 1px solid; border-radius: 10px; font-size: 12px; line-height: 1.6; overflow-wrap: anywhere; }
.btl-notice svg { width: 19px; height: 19px; margin-top: 1px; }
.btl-notice strong { font-weight: 650; }
.btl-notice ul { padding-left: 16px; margin-top: 3px; }
.btl-notice--success { color: #136147; background: #effbf5; border-color: #b9e8cf; }
.btl-notice--error { color: #a5253d; background: #fff3f4; border-color: #f2ccd3; }
.btl-notice--error:focus { outline: 2px solid #d75c71; outline-offset: 3px; }
.btl-input-wrap--invalid, .btl-input-wrap--invalid:has(input:not(:placeholder-shown)) { border-color: #d96178; }
.btl-field-error { margin-top: 7px !important; font-size: 11px; color: #a5253d; line-height: 1.5; overflow-wrap: anywhere; }
@keyframes btl-enter { from { opacity: 0; transform: translateY(15px); } to { opacity: 1; transform: translateY(0); } }
@keyframes btl-module-enter { from { opacity: 0; translate: 0 14px; } to { opacity: 1; translate: 0 0; } }
@keyframes btl-gradient { from { background-position: 0% center; } to { background-position: 100% center; } }
@keyframes btl-ambient { to { transform: translate(4%, -3%) rotate(7deg); } }
@keyframes btl-particle { to { transform: translate(12px, -28px); opacity: .15; } }
@keyframes btl-route { to { stroke-dashoffset: -660; } }
@keyframes btl-building { 50% { translate: 0 -5px; } }
@keyframes btl-pulse { 50% { opacity: .45; scale: 1.5; } }
@keyframes btl-truck { 0%, 8% { offset-distance: 0%; opacity: 0; } 12% { opacity: 1; } 80% { opacity: 1; } 90%, 100% { offset-distance: 100%; opacity: 0; } }
@keyframes btl-float { 50% { translate: 0 -8px; } }
@keyframes btl-chart-in { from { scale: 1 .1; opacity: 0; } to { scale: 1 1; opacity: 1; } }
@keyframes btl-chart-draw { to { stroke-dashoffset: 0; } }
@keyframes btl-bar { 50% { scale: 1 .75; } }
@keyframes btl-hub-glow { 50% { box-shadow: 0 0 18px #087fff45; } }
@keyframes btl-spin { to { transform: rotate(360deg); } }
@media (min-width: 1800px) {
    .btl-showcase { padding-top: 60px; }
    .btl-intro { margin-top: 50px; }
    .btl-modules { gap: 14px; margin-top: 35px !important; }
    .btl-module { padding: 18px 15px; }
    .btl-module-icon { width: 43px; height: 43px; }
    .btl-login-card { max-width: 495px; }
    .btl-form-options { font-size: 11px; }
}
@media (max-width: 1199px) {
    .btl-layout { grid-template-columns: minmax(0, 1.35fr) minmax(380px, 1fr); }
    .btl-showcase { padding: 30px 26px 22px; }
    .btl-brand-logo { width: 180px; }
    .btl-motion-toggle span { max-width: 65px; text-align: left; }
    .btl-intro { margin-top: 38px; }
    .btl-intro h1 { font-size: 37px; }
    .btl-intro-copy { font-size: 13px; line-height: 1.7; }
    .btl-modules { gap: 7px; }
    .btl-module { padding: 11px 7px; border-radius: 11px; }
    .btl-module-icon { width: 30px; height: 30px; }
    .btl-module-icon svg { width: 19px; height: 19px; }
    .btl-module strong { font-size: 9px; }
    .btl-module-detail { font-size: 8px; }
    .btl-scene { min-height: 0; width: calc(100% + 40px); margin-inline: -20px !important; }
    .btl-window-sidebar { gap: 7px; padding: 10px 7px; }
    .btl-window-sidebar > span:not(.btl-mini-brand) { font-size: 5px; gap: 3px; }
    .btl-window-main { padding: 9px; }
    .btl-window-stats { gap: 4px; margin-top: 7px; }
    .btl-window-stats > div { padding: 5px 3px; font-size: 5px; gap: 3px; }
    .btl-window-stats strong { font-size: 7px; }
    .btl-mini-icon { width: 17px; height: 20px; }
    .btl-mini-icon svg { width: 13px; height: 13px; }
    .btl-activity-chart { margin-top: 6px; padding: 6px; }
    .btl-activity-chart strong { font-size: 6px; }
    .btl-activity-chart span { display: none; }
    .btl-float-card { padding: 10px; gap: 7px; border-radius: 10px; }
    .btl-float-card--projects { left: 20%; width: 29%; }
    .btl-float-icon { width: 25px; height: 29px; border-radius: 7px; }
    .btl-float-icon svg { width: 17px; height: 17px; }
    .btl-showcase-footer { font-size: 8px; }
    .btl-access { padding: 40px 20px 25px; }
    .btl-login-card { padding: 27px; border-radius: 23px; }
    .btl-card-top { margin-bottom: 25px; }
    .btl-card-top img { width: 100px; }
    .btl-login-card h2 { font-size: 34px; }
    .btl-card-copy { font-size: 13px; }
}
@media (min-width: 761px) and (max-width: 960px) {
    .btl-layout { grid-template-columns: minmax(0, 1fr) minmax(360px, 1fr); }
    .btl-showcase { padding-inline: 22px; }
    .btl-brand-logo { width: 156px; }
    .btl-motion-toggle { padding: 5px; }
    .btl-motion-toggle span { display: none; }
    .btl-intro h1 { font-size: 31px; }
    .btl-intro-copy { font-size: 12px; }
    .btl-modules { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .btl-module { padding: 10px; }
    .btl-module strong { font-size: 10px; }
    .btl-module-detail { font-size: 9px; }
    .btl-module-icon { width: 27px; height: 27px; margin-bottom: 7px; }
    .btl-module-icon svg { width: 19px; height: 19px; }
    .btl-scene { min-height: 0; margin-top: 16px !important; }
    .btl-float-card--projects, .btl-window-sidebar, .btl-window-stats > div:last-child { display: none; }
    .btl-window-main { width: 100%; }
    .btl-window-heading strong { font-size: 10px; }
    .btl-ops-window { height: 100%; }
    .btl-window-top { height: 18px; }
    .btl-window-body { height: calc(100% - 18px); }
    .btl-hub { width: 22px; height: 22px; border-radius: 6px; }
    .btl-hub svg { width: 16px; height: 16px; }
    .btl-login .btl-activity-chart svg { height: 35px; }
    .btl-window-stats strong { font-size: 8px; }
    .btl-float-card--commercial { top: -9%; }
    .btl-float-card--monthly { bottom: -3%; right: 0; }
    .btl-float-card--stock { left: 0; bottom: 7%; }
    .btl-float-card strong { font-size: 8px; }
    .btl-float-card div > span { font-size: 6px; }
    .btl-scene figcaption { margin-top: 20px; font-size: 7px; }
    .btl-showcase-footer { margin-top: 16px; }
    .btl-footer-line { display: none; }
}
@media (max-width: 760px) {
    .btl-layout { display: block; }
    .btl-showcase { display: block; padding: 22px 24px; }
    .btl-brand-row { justify-content: center; }
    .btl-brand-logo { width: 190px; }
    .btl-motion-toggle, .btl-particles, .btl-modules, .btl-scene, .btl-showcase-footer { display: none; }
    .btl-intro { margin-top: 18px; text-align: center; }
    .btl-eyebrow { justify-content: center; font-size: 9px; margin-bottom: 10px !important; }
    .btl-eyebrow > span { display: none; }
    .btl-intro h1 { font-size: clamp(28px, 5.7vw, 37px); line-height: 1.14; }
    .btl-intro h1 br { display: none; }
    .btl-intro-copy { display: none; }
    .btl-access { min-height: 0; padding: 25px 20px 24px; gap: 20px; }
    .btl-login-card { padding: 27px; max-width: 465px; border-radius: 22px; }
    .btl-card-top { margin-bottom: 18px; }
    .btl-card-top img { width: 105px; }
    .btl-login-card h2 { font-size: 30px; }
    .btl-card-copy { margin-top: 12px !important; font-size: 13px; }
    .btl-form { margin-top: 25px; }
    .btl-input-wrap input { font-size: 16px; }
    .btl-field + .btl-field { margin-top: 20px; }
    .btl-form-options { margin-block: 21px; font-size: 11px; }
    .btl-access-footer { font-size: 9px; }
}
@media (max-width: 380px) {
    .btl-showcase { padding: 23px 20px; }
    .btl-intro h1 { font-size: 26px; }
    .btl-access { padding-inline: 14px; }
    .btl-login-card { padding: 23px 20px; }
    .btl-login-card h2 { font-size: 27px; }
    .btl-card-eyebrow { font-size: 8px; letter-spacing: .15em; }
    .btl-card-top img { width: 95px; }
}
.btl-motion-paused *, .btl-motion-paused *::before, .btl-motion-paused *::after { animation-play-state: paused !important; }
.btl-motion-paused .btl-chart-line { animation: none; stroke-dashoffset: 0; }
.btl-motion-paused .btl-truck-route { offset-distance: 36%; opacity: 1; }
.btl-motion-paused :is(.btl-intro, .btl-login-card, .btl-module, .btl-chart-bars) { animation: none; }
@media (prefers-reduced-motion: reduce) {
    .btl-login *, .btl-login *::before, .btl-login *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
    .btl-chart-line { stroke-dashoffset: 0; }
    .btl-truck-route { offset-distance: 36%; opacity: 1; }
}

@media (min-width: 1200px) {
    .btl-scene-art { width: min(100%, calc(37svh * 1.915)); }
}
@media (min-width: 761px) and (max-height: 850px) {
    .btl-showcase { padding-top: 27px; }
    .btl-intro { margin-top: 28px; }
    .btl-intro h1 { font-size: clamp(31px, 3.2vw, 48px); }
    .btl-intro-copy { margin-top: 14px !important; }
    .btl-modules { margin-top: 20px !important; }
    .btl-showcase-footer { margin-top: 12px; }
    .btl-access { padding-block: 28px; gap: 20px; }
    .btl-login-card { padding: 29px; }
    .btl-login-card h2 { font-size: 33px; }
    .btl-card-top { margin-bottom: 20px; }
    .btl-form { margin-top: 24px; }
    .btl-security { margin-top: 22px; padding-top: 20px; }
}

/* Fit the login to the visible viewport; reserve space for the real form. */
.btl-showcase, .btl-access { min-height: 0; }
.btl-brand-row, .btl-intro, .btl-modules, .btl-showcase-footer, .btl-login-card, .btl-access-footer { flex-shrink: 0; }
.btl-scene { container-type: size; flex: 1 1 0; min-height: 0; }
.btl-scene-art { width: min(100%, calc((100cqh - 24px) * 1.915)); max-height: none; flex-shrink: 0; }
.btl-showcase-footer { padding-top: 0; }
.btl-login:has(.btl-notice) .btl-card-copy,
.btl-login:has(.btl-notice) .btl-form-note { display: none; }
.btl-login:has(.btl-notice) .btl-security { margin-top: 16px; padding-top: 14px; }
.btl-notice { margin-bottom: 14px; }
.btl-field-error { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

@media (max-width: 760px) {
    .btl-layout { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); }
    .btl-showcase { padding: 16px 20px; }
    .btl-brand-logo { width: 165px; }
    .btl-intro { margin-top: 10px; }
    .btl-eyebrow { display: none; }
    .btl-intro h1 { font-size: clamp(22px, 5.4vw, 28px); line-height: 1.15; }
    .btl-access { padding: 16px; gap: 12px; }
    .btl-login-card { padding: 20px; }
    .btl-card-top { margin-bottom: 14px; }
    .btl-login-card h2 { font-size: 28px; }
    .btl-card-copy, .btl-form-note { display: none; }
    .btl-form { margin-top: 16px; }
    .btl-field + .btl-field { margin-top: 16px; }
    .btl-field label { margin-bottom: 7px; }
    .btl-input-wrap { height: 48px; }
    .btl-form-options { margin-block: 16px; gap: 10px; font-size: 10px; }
    .btl-submit { min-height: 50px; padding-block: 12px; }
    .btl-security { margin-top: 16px; padding-top: 16px; }
    .btl-security-icon { width: 32px; height: 32px; }
    .btl-security p { margin-top: 3px !important; }
}

@media (max-height: 780px) {
    .btl-showcase { padding-block: 20px; }
    .btl-brand-logo { width: 175px; }
    .btl-intro { margin-top: 20px; }
    .btl-eyebrow { margin-bottom: 10px !important; }
    .btl-intro h1 { font-size: clamp(28px, 3.1vw, 43px); }
    .btl-intro-copy { margin-top: 12px !important; font-size: 12px; line-height: 1.6; }
    .btl-modules { margin-top: 16px !important; }
    .btl-module { padding: 10px 8px; }
    .btl-module-icon { width: 28px; height: 28px; margin-bottom: 7px; }
    .btl-module-icon svg { width: 18px; height: 18px; }
    .btl-showcase-footer { margin-top: 10px; }
    .btl-access { padding: 16px; gap: 12px; }
    .btl-login-card { padding: 22px; }
    .btl-card-top { margin-bottom: 16px; }
    .btl-login-card h2 { font-size: 28px; }
    .btl-card-copy { margin-top: 10px !important; font-size: 12px; line-height: 1.5; }
    .btl-form { margin-top: 18px; }
    .btl-field + .btl-field { margin-top: 16px; }
    .btl-field label { margin-bottom: 6px; font-size: 11px; }
    .btl-input-wrap { height: 46px; }
    .btl-form-options { margin-block: 16px; gap: 10px; }
    .btl-submit { min-height: 48px; padding-block: 11px; }
    .btl-form-note { display: none; }
    .btl-security { margin-top: 16px; padding-top: 14px; }
    .btl-security-icon { width: 32px; height: 32px; }
    .btl-security p { margin-top: 3px !important; }
    .btl-notice { padding: 10px; font-size: 11px; line-height: 1.45; }
}
@media (max-width: 760px) and (max-height: 780px) {
    .btl-showcase { padding: 12px 18px; }
    .btl-brand-logo { width: 150px; }
    .btl-intro, .btl-access-footer { display: none; }
    .btl-access { padding: 12px 16px; }
    .btl-login-card { padding: 18px; }
    .btl-login:has(.btl-notice) .btl-security { display: none; }
}
@media (max-height: 620px) {
    .btl-intro-copy, .btl-showcase-footer, .btl-card-copy, .btl-access-footer { display: none; }
    .btl-login-card { padding: 18px; }
    .btl-card-top { margin-bottom: 12px; }
    .btl-login-card h2 { font-size: 24px; }
    .btl-login-card h2 br { display: none; }
    .btl-form { margin-top: 14px; }
    .btl-field + .btl-field { margin-top: 12px; }
    .btl-input-wrap { height: 44px; }
    .btl-form-options { margin-block: 14px; }
    .btl-submit { min-height: 46px; }
    .btl-security { margin-top: 12px; padding-top: 12px; }
    .btl-security p { display: none; }
}
@media (max-height: 460px) {
    .btl-showcase { padding-block: 12px; }
    .btl-brand-logo { width: 145px; }
    .btl-intro { margin-top: 12px; }
    .btl-intro h1 { font-size: 26px; }
    .btl-module { padding: 6px; }
    .btl-module-icon { width: 22px; height: 22px; margin-bottom: 5px; }
    .btl-module-icon svg { width: 16px; height: 16px; }
    .btl-module-detail { display: none; }
    .btl-access { padding: 10px; }
    .btl-login-card { padding: 14px; }
    .btl-card-top { margin-bottom: 10px; }
    .btl-login-card h2 { font-size: 23px; }
    .btl-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 12px; }
    .btl-field + .btl-field { margin-top: 0; }
    .btl-notice, .btl-form-options, .btl-submit { grid-column: 1 / -1; }
    .btl-notice { margin-bottom: 0; }
    .btl-form-options { margin: 0; }
    .btl-submit { min-height: 42px; padding-block: 9px; font-size: 12px; }
    .btl-security { margin-top: 10px; padding-top: 10px; }
    .btl-security strong { font-size: 10px; }
    .btl-login:has(.btl-notice) .btl-security { display: none; }
}
@media (max-width: 760px) and (max-height: 460px) {
    .btl-showcase { padding-block: 8px; }
    .btl-brand-logo { width: 130px; }
    .btl-login-card { max-width: 520px; }
    .btl-security { display: none; }
}
@media (max-width: 760px) and (max-height: 460px) {
    .btl-showcase { display: none; }
    .btl-layout { grid-template-rows: minmax(0, 1fr); }
}
@media (max-width: 760px) and (max-height: 380px) {
    .btl-login-card { position: relative; }
    .btl-card-top { position: absolute; top: 14px; right: 14px; margin: 0; }
    .btl-card-eyebrow { display: none; }
    .btl-login-card h2 { max-width: calc(100% - 115px); }
}