/* TruDealers homepage-only styles: TruOrbit spin, 3D product ring, trade-in widget. Split out of site.css. */
.hero-left{display: flex; flex-direction: column; gap: 20px; width: 100%; min-width: 0; max-width: 100%; overflow: hidden; align-items: center;}
@media (min-width: 1024px){
.hero-left{align-items: flex-start; flex: 1.15 1 0; max-width: 640px;}
}
.hero-right{width: 100%; min-width: 0; max-width: 100%; overflow: hidden; display: flex; justify-content: center; align-items: center;}
@media (min-width: 1024px){
.hero-right{flex: 0.95 1 0; max-width: 470px;}
}
.trust-badge-item{display: inline-flex; align-items: center; gap: 7px; padding: 6px 14px; background: linear-gradient(180deg, #131E2E 0%, #0A101C 100%); border: 1px solid rgba(86, 225, 233, 0.22); border-top: 1px solid rgba(255, 255, 255, 0.35); border-radius: var(--radius-full); font-family: var(--font-sans); font-size: 12px; font-weight: 600; color: #E2E8F0; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 2px 0 #040810, 0 4px 12px rgba(0, 0, 0, 0.5); transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);}
.trust-badge-item:hover{border-color: rgba(86, 225, 233, 0.5); border-top-color: rgba(255, 255, 255, 0.5); color: #FFFFFF; transform: translateY(-2px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3), 0 4px 0 #040810, 0 8px 18px rgba(0, 0, 0, 0.65), 0 0 14px rgba(86, 225, 233, 0.2);}
.trust-badge-item svg{color: var(--accent); flex-shrink: 0;}
.workflow-card{background: linear-gradient(160deg, rgba(15, 23, 36, 0.6) 0%, rgba(8, 14, 22, 0.72) 100%); border: 1px solid rgba(255, 255, 255, 0.1); border-top: 1px solid rgba(255, 255, 255, 0.28); border-radius: var(--radius-lg); padding: 24px 22px; display: flex; flex-direction: column; gap: 10px; box-shadow: 0 14px 36px -4px rgba(0, 0, 0, 0.7), inset 0 1px 1px 0 rgba(255, 255, 255, 0.18); transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.28s ease, border-color 0.28s ease;}
.workflow-card:hover{transform: translateY(-3px); border-color: rgba(86, 225, 233, 0.45); border-top-color: rgba(255, 255, 255, 0.45); box-shadow: 0 20px 48px -8px rgba(0, 0, 0, 0.85), 0 0 24px rgba(86, 225, 233, 0.18), inset 0 1px 1px rgba(255, 255, 255, 0.25);}
.workflow-card:nth-child(2):hover,
.workflow-card:nth-child(4):hover{border-color: rgba(187, 99, 255, 0.45); box-shadow: 0 20px 48px -8px rgba(0, 0, 0, 0.85), 0 0 24px rgba(187, 99, 255, 0.22), inset 0 1px 1px rgba(255, 255, 255, 0.25);}
.live-preview-body{position: relative; height: 220px; background: var(--paper);}
.live-preview-load{position: absolute; inset: 0; margin: auto; width: max-content; height: max-content; padding: 10px 18px; border-radius: 9999px; background: var(--accent); color: #fff; border: none; font-weight: 600; font-size: 13px; cursor: pointer; transition: all 0.2s ease;}
.live-preview-load:hover{background: var(--accent-hover); transform: translateY(-1px);}
.module-card{background: linear-gradient(160deg, rgba(15, 23, 36, 0.62) 0%, rgba(8, 14, 22, 0.74) 100%); border: 1px solid rgba(255, 255, 255, 0.1); border-top: 1px solid rgba(255, 255, 255, 0.28); border-radius: var(--radius-lg); padding: 26px 24px; display: flex; flex-direction: column; justify-content: space-between; gap: 16px; box-shadow: 0 16px 40px -12px rgba(0, 0, 0, 0.8), inset 0 1px 1px 0 rgba(255, 255, 255, 0.2), 0 0 20px rgba(45, 212, 191, 0.05); transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);}
.module-card:hover{transform: translateY(-4px); border-color: rgba(45, 212, 191, 0.45); border-top-color: rgba(255, 255, 255, 0.5); box-shadow: 0 24px 54px -12px rgba(0, 0, 0, 0.9), 0 0 32px rgba(45, 212, 191, 0.2), inset 0 1px 1px 0 rgba(255, 255, 255, 0.35);}
.module-tags{display: flex; flex-wrap: wrap; gap: 6px; margin-top: auto;}
.module-tags span{font-family: var(--font-mono); font-size: 10px; font-weight: 600; color: #CBD5E1; background: linear-gradient(180deg, #151F2E 0%, #0A111C 100%); border: 1px solid rgba(255, 255, 255, 0.12); border-top: 1px solid rgba(255, 255, 255, 0.28); padding: 3px 9px; border-radius: var(--radius-full); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15), 0 2px 0 #040810, 0 3px 8px rgba(0, 0, 0, 0.4);}
.module-tags span:nth-child(n+4){display: none;}
.module-tags.is-expanded span:nth-child(n+4){display: inline-block;}
.module-tag-more{font-family: var(--font-mono); font-size: 10px; font-weight: 700; color: #56E1E9; background: linear-gradient(180deg, #16243A 0%, #0A1220 100%); border: 1px solid rgba(86, 225, 233, 0.35); border-top: 1px solid rgba(255, 255, 255, 0.35); padding: 3px 9px; border-radius: var(--radius-full); cursor: pointer; line-height: 1.4; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 2px 0 #040810, 0 3px 8px rgba(0, 0, 0, 0.4); transition: all 0.2s ease;}
.module-tag-more:hover{background: linear-gradient(180deg, #1E3352 0%, #0D192B 100%); border-color: rgba(86, 225, 233, 0.6); color: #FFFFFF; transform: translateY(-1px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3), 0 3px 0 #040810, 0 6px 14px rgba(0, 0, 0, 0.5), 0 0 10px rgba(86, 225, 233, 0.25);}
@media (max-width: 1023px){
.hero-right{margin-top: 32px;}
}
@media (prefers-reduced-motion: no-preference){
.module-card{transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.25s ease, box-shadow 0.25s ease;}
.module-card:hover{transform: translateY(-3px); border-color: rgba(86, 225, 233, 0.35); box-shadow: 0 18px 40px -18px rgba(0, 0, 0, 0.6);}
.workflow-card{transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.25s ease, box-shadow 0.25s ease;}
.workflow-card:hover{transform: translateY(-3px); border-color: rgba(86, 225, 233, 0.45); box-shadow: 0 18px 40px -18px rgba(0, 0, 0, 0.5);}
.trust-badge-item{transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.25s ease;}
.trust-badge-item:hover{transform: translateY(-3px);}
}
.orbit-shell{position: relative; width: 100%; aspect-ratio: 4 / 3; border-radius: var(--radius-xl, 22px); overflow: hidden; border: 1.5px solid rgba(86, 225, 233, 0.22); background: radial-gradient(ellipse 70% 35% at 50% 0%, rgba(86, 225, 233, 0.1) 0%, transparent 70%), linear-gradient(180deg, #0D1624 0%, #070B12 50%, #0A111C 100%); box-shadow: 0 28px 70px -12px rgba(0, 0, 0, 0.9), 0 10px 30px rgba(0, 0, 0, 0.6), 0 0 45px rgba(86, 225, 233, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.18), inset 0 -30px 50px -10px rgba(86, 225, 233, 0.05); cursor: grab; touch-action: pan-y; -webkit-tap-highlight-color: transparent; outline: none; transition: border-color 0.3s ease, box-shadow 0.3s ease, transform 0.25s ease;}
.orbit-shell:hover{border-color: rgba(86, 225, 233, 0.4); box-shadow: 0 32px 80px -10px rgba(0, 0, 0, 0.95), 0 12px 36px rgba(0, 0, 0, 0.7), 0 0 60px rgba(86, 225, 233, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.25);}
.orbit-shell:active{cursor: grabbing;}
.orbit-shell:focus-visible{border-color: #56E1E9; box-shadow: 0 0 0 3px rgba(86, 225, 233, 0.45), 0 28px 70px rgba(0, 0, 0, 0.8);}
.orbit-softbox{position: absolute; top: 0; left: 5%; right: 5%; height: 35%; background: radial-gradient(ellipse 65% 50% at 50% 0%, rgba(255, 255, 255, 0.18) 0%, rgba(86, 225, 233, 0.08) 45%, transparent 80%); pointer-events: none; z-index: 2;}
.orbit-vignette{position: absolute; inset: 0; background: radial-gradient(ellipse at center, transparent 45%, rgba(3, 5, 8, 0.65) 100%); pointer-events: none; z-index: 2;}
.orbit-sheen{position: absolute; inset: 0; background: linear-gradient(110deg, transparent 15%, rgba(255, 255, 255, 0.03) 45%, rgba(86, 225, 233, 0.08) 50%, rgba(255, 255, 255, 0.03) 55%, transparent 85%); transform: translateX(var(--orbit-sheen-x, 0%)); pointer-events: none; mix-blend-mode: screen; z-index: 2; transition: transform 0.1s linear;}
.orbit-stage{position: absolute; inset: 0; z-index: 2;}
.orbit-frame{width: 100%; height: 100%; object-fit: cover; display: block; user-select: none; -webkit-user-select: none; -webkit-user-drag: none; opacity: 1; filter: brightness(1.1) contrast(1.04);}
.orbit-frame.orbit-ready{opacity: 1;}
/* Video mode: the lap clip takes over once its metadata arrives and site.js adds
   .orbit-ready to it; the frame <img> is the fallback. Both are hidden through the
   attribute too, because .orbit-frame's display:block would otherwise beat [hidden].
   The clip is composited on every frame, so it also drops the still-frame brightness
   filter, the screen blend on the sheen and the box-shadow will-change hint: each of
   those forces a full re-composite of the video surface while the page scrolls. */
.orbit-video{display: none; filter: none;}
.orbit-video.orbit-ready{display: block;}
.orbit-frame[hidden]{display: none;}
.orbit-shell.is-video .orbit-sheen{mix-blend-mode: normal; opacity: 0.45;}
.orbit-shell.is-video{}
.orbit-telemetry{position: absolute; top: 14px; right: 14px; z-index: 4; display: inline-flex; align-items: center; gap: 7px; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.08em; text-transform: uppercase; color: #FFFFFF; background: linear-gradient(180deg, #152232 0%, #070F1A 100%); border: 1px solid rgba(86, 225, 233, 0.35); border-top: 1.5px solid rgba(255, 255, 255, 0.45); border-radius: 999px; padding: 6px 14px; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.7), inset 0 1px 0 rgba(255, 255, 255, 0.25);}
.orbit-compass-needle{display: inline-block; color: #56E1E9; font-size: 10px; transform: rotate(0deg); transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1); text-shadow: 0 0 8px rgba(86, 225, 233, 0.8);}
.orbit-telemetry-deg{font-weight: 800; color: #56E1E9; letter-spacing: 0.04em;}
.orbit-telemetry-sep{color: rgba(255, 255, 255, 0.3);}
.orbit-telemetry-label{font-weight: 600; color: #E2E8F0; letter-spacing: 0.06em;}
.orbit-btn{position: absolute; top: 50%; transform: translateY(-50%); z-index: 4; width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; border: 1px solid rgba(86, 225, 233, 0.35); border-top: 1.5px solid rgba(255, 255, 255, 0.45); background: linear-gradient(180deg, #172436 0%, #070F1A 100%); box-shadow: 0 4px 14px rgba(0, 0, 0, 0.7), inset 0 1px 0 rgba(255, 255, 255, 0.25); color: rgba(230, 245, 255, 0.9); cursor: pointer; opacity: 0.9; transition: all 0.2s ease;}
.orbit-btn:hover, .orbit-btn:focus-visible{opacity: 1; border-color: #56E1E9; color: #56E1E9; box-shadow: 0 0 18px rgba(86, 225, 233, 0.4); transform: translateY(-50%) scale(1.08);}
.orbit-btn:focus-visible{outline: none;}
.orbit-prev{left: 14px;}
.orbit-next{right: 14px;}
.orbit-badge{position: absolute; top: 14px; left: 14px; z-index: 4; display: inline-flex; align-items: center; gap: 7px; font-family: var(--font-mono); font-size: 10.5px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: #E0F2FE; background: linear-gradient(180deg, #152232 0%, #070F1A 100%); border: 1px solid rgba(86, 225, 233, 0.35); border-top: 1.5px solid rgba(255, 255, 255, 0.45); border-radius: 999px; padding: 6px 14px; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.7), inset 0 1px 0 rgba(255, 255, 255, 0.25);}
.orbit-dot{width: 7px; height: 7px; border-radius: 50%; background: #56E1E9; box-shadow: 0 0 8px rgba(86, 225, 233, 0.9); animation: orbitPulse 2.2s ease-in-out infinite;}
@keyframes orbitPulse{ 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }
@media (max-width: 480px){
.orbit-badge{top: 10px; left: 10px; padding: 5px 10px; font-size: 9.5px; letter-spacing: 0.04em;}
.orbit-badge-sub{display: none;}
.orbit-telemetry{top: 10px; right: 10px; padding: 5px 10px; font-size: 9.5px; gap: 5px;}
.orbit-prev{left: 8px; width: 38px; height: 38px;}
.orbit-next{right: 8px; width: 38px; height: 38px;}
}
.orbit-bottom-bar{position: absolute; bottom: 14px; left: 14px; right: 14px; display: flex; align-items: center; justify-content: space-between; z-index: 4; pointer-events: none;}
.orbit-dial-track{display: inline-flex; align-items: center; gap: 6px; background: rgba(8, 13, 20, 0.76); border: 1px solid rgba(255, 255, 255, 0.14); border-radius: 999px; padding: 6px 12px; pointer-events: auto; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5);}
.orbit-pip{position: relative; width: 6px; height: 6px; border-radius: 50%; background: rgba(255, 255, 255, 0.25); border: none; padding: 0; cursor: pointer; transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);}
.orbit-pip::before{content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 32px; height: 44px; background: transparent;}
.orbit-pip:hover{background: rgba(86, 225, 233, 0.7); transform: scale(1.3);}
.orbit-pip.active{width: 16px; border-radius: 999px; background: #56E1E9; box-shadow: 0 0 10px rgba(86, 225, 233, 0.9);}
.orbit-auto-btn{display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-mono); font-size: 10.5px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: #CBD5E1; background: rgba(8, 13, 20, 0.76); border: 1px solid rgba(255, 255, 255, 0.16); border-radius: 999px; padding: 8px 16px; min-height: 40px; cursor: pointer; pointer-events: auto; transition: all 0.2s ease; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5);}
.orbit-auto-btn:hover{background: rgba(86, 225, 233, 0.15); border-color: #56E1E9; color: #56E1E9; box-shadow: 0 0 14px rgba(86, 225, 233, 0.35);}
.orbit-auto-btn.active{background: rgba(86, 225, 233, 0.22); border-color: #56E1E9; color: #FFFFFF; box-shadow: 0 0 18px rgba(86, 225, 233, 0.55);}
.orbit-auto-btn svg{stroke: currentColor; transition: transform 0.3s ease;}
.orbit-auto-btn.active svg{animation: orbitSpin 3s linear infinite;}
@keyframes orbitSpin{
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
.orbit-hint{position: absolute; left: 50%; bottom: 48px; transform: translateX(-50%) translateY(6px); z-index: 4; display: inline-flex; align-items: center; gap: 8px; font-size: 12px; font-family: var(--font-mono); letter-spacing: 0.04em; color: #DFF7FF; background: rgba(8, 13, 20, 0.8); border: 1px solid rgba(86, 225, 233, 0.32); border-radius: 999px; padding: 6px 14px; opacity: 0; pointer-events: none; transition: opacity 0.4s ease, transform 0.4s ease; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.6);}
.orbit-hint-show{opacity: 1; transform: translateX(-50%) translateY(0); animation: hintNudge 2s ease-in-out infinite;}
.orbit-hint-hide{opacity: 0; transform: translateX(-50%) translateY(6px); animation: none;}
@media (min-width: 640px){
.ti-field:nth-child(3){grid-column: span 2;}
}
.ti-field{display: flex; flex-direction: column; gap: 6px; min-width: 0;}
.ti-field label{font-family: var(--font-mono); font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.07em; color: #8FA5B5;}
.ti-field select,
.ti-field input{width: 100%; box-sizing: border-box; padding: 12px 14px; background: #060A10; border: 1px solid rgba(86, 225, 233, 0.22); border-radius: var(--radius-sm, 10px); color: #F8FAFC; font-size: 15px; font-family: inherit; appearance: none; -webkit-appearance: none;}
.ti-field select{background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2300F2FE' stroke-width='2.5'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; padding-right: 38px;}
.ti-field select:disabled, .ti-field input:disabled{opacity: 0.5; cursor: not-allowed;}
.ti-field select, .ti-field select option, .ti-field select optgroup{color-scheme: dark; background-color: #0B0E14 !important; color: #F8FAFC !important;}
.ti-field select:focus-visible, .ti-field input:focus-visible{outline: none; border-color: #56E1E9; box-shadow: 0 0 0 3px rgba(86, 225, 233, 0.2);}
.ti-specs-badge{display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px 10px; background: rgba(86, 225, 233, 0.05); border: 1px solid rgba(86, 225, 233, 0.22); border-radius: 8px; padding: 8px 12px; font-family: var(--font-mono); font-size: 11.5px; color: #B2D7EB; width: 100%; box-sizing: border-box;}
.ti-specs-badge .ti-badge-verified{display: inline-flex; align-items: center; gap: 5px; color: #56E1E9; font-weight: 700;}
.ti-specs-badge .ti-spec-tag{background: rgba(255, 255, 255, 0.06); border-radius: 4px; padding: 2px 7px; color: #E2E8F0; font-weight: 600;}
.ti-specs-badge .ti-spec-mm{color: #64748B; font-size: 11px;}
.ti-specs-card{display: grid; grid-template-columns: repeat(auto-fit, minmax(105px, 1fr)); gap: 8px; background: rgba(10, 16, 24, 0.7); border: 1px solid rgba(86, 225, 233, 0.18); border-radius: 8px; padding: 12px; margin: 8px 0;}
.ti-spec-box{display: flex; flex-direction: column; gap: 2px;}
.ti-spec-k{font-size: 10px; color: #64748B; text-transform: uppercase; letter-spacing: 0.05em; font-weight: 600;}
.ti-spec-v{font-family: var(--font-mono); font-size: 13px; color: #E2E8F0; font-weight: 600;}
.ti-price, .ti-range{display: flex; align-items: baseline; justify-content: space-between; gap: 12px; border-bottom: 1px solid rgba(148, 180, 210, 0.12); padding-bottom: 10px;}
.ti-price strong{font-family: var(--font-mono); font-size: clamp(24px, 5vw, 34px); color: #56E1E9; white-space: nowrap; font-variant-numeric: tabular-nums;}
.ti-price-label, .ti-range span{font-size: 13px; color: #8FA5B5;}
.ti-range strong{font-family: var(--font-mono); font-size: clamp(16px, 3.4vw, 20px); color: #E6F6FF; white-space: nowrap; font-variant-numeric: tabular-nums;}
.ti-stats{display: flex; flex-wrap: wrap; gap: 8px 18px; font-size: 12.5px; color: #8FA5B5;}
.ti-stats b{color: #E6F6FF;}
.ti-src{font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.04em; color: #94A3B8;}
.ti-searchlink{font-size: 13px; color: #56E1E9; text-decoration: none;}
.ti-searchlink:hover{text-decoration: underline;}
.ti-disclaim{font-size: 11.5px; color: #94A3B8; line-height: 1.55; margin: 2px 0 0;}
.ti-error{font-size: 14px; color: #FCA5A5; background: rgba(220, 38, 38, 0.10); border: 1px solid rgba(248, 113, 113, 0.3); border-radius: var(--radius-sm, 10px); padding: 12px 14px; line-height: 1.55;}
.gal-open{position: relative; display: flex; align-items: flex-end; justify-content: center; height: min(500px, 80vw); width: 100%; padding: 0; margin: 0; border: none; background: none; cursor: zoom-in; text-align: center;}
.gal-open img{width: 100%; height: auto; display: block; transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1); filter: drop-shadow(0 28px 55px rgba(0, 0, 0, 0.55)) drop-shadow(0 0 38px rgba(86, 225, 233, 0.06));}
.gal-open:hover img, .gal-open:focus-visible img{transform: translateY(-8px) scale(1.045); filter: drop-shadow(0 38px 75px rgba(0, 0, 0, 0.68)) drop-shadow(0 0 55px rgba(86, 225, 233, 0.24));}
.gal-open:focus-visible{outline: none;}
.gal-cta{margin-top: 18px;}
.gal-card{display: flex; flex-direction: column; justify-content: space-between; align-items: center; text-align: center; background: linear-gradient(180deg, rgba(14, 22, 34, 0.72) 0%, rgba(8, 12, 18, 0.95) 100%); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: var(--radius-xl); padding: 36px 26px 32px; box-shadow: 0 16px 45px -10px rgba(0, 0, 0, 0.75), inset 0 1px 0 rgba(255, 255, 255, 0.08); transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.28s ease, box-shadow 0.28s ease;}
.gal-card:hover{transform: translateY(-4px); border-color: rgba(86, 225, 233, 0.35); box-shadow: 0 24px 55px -10px rgba(0, 0, 0, 0.9), 0 0 28px rgba(86, 225, 233, 0.14);}
.gal-cta{margin-top: auto; width: 100%; max-width: 280px; justify-content: center;}
.gal3d-modal{position: fixed; inset: 0; z-index: 220; display: grid; place-items: center;}
.gal3d-modal[hidden]{display: none;}
.gal3d-backdrop{position: absolute; inset: 0; background: radial-gradient(ellipse 70% 55% at 50% 42%, rgba(86, 225, 233, 0.08), transparent 65%), rgba(3, 6, 10, 0.94); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);}
.gal3d-stage{position: relative; width: min(1380px, 98vw); height: min(78vh, 740px); perspective: 1600px; touch-action: none; cursor: grab; outline: none;}
.gal3d-stage:active{cursor: grabbing;}
.gal3d-ring{position: absolute; inset: 0; transform-style: preserve-3d;}
.gal3d-item{position: absolute; left: 50%; top: 50%; margin: 0; width: clamp(340px, 72vw, 840px); backface-visibility: hidden; transform-style: preserve-3d; cursor: pointer; transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.3s ease;}
.gal3d-item.gal3d-item-phone{width: clamp(170px, 34vw, 300px);}
.gal3d-item img{width: 100%; height: auto; display: block; opacity: 0.38; filter: drop-shadow(0 20px 45px rgba(0, 0, 0, 0.7)) saturate(0.65) brightness(0.68); transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.35s ease, filter 0.35s ease;}
.gal3d-item.is-front{z-index: 10; cursor: zoom-in;}
.gal3d-item.is-front img{opacity: 1; transform: scale(1.14); filter: drop-shadow(0 36px 75px rgba(0, 0, 0, 0.85)) drop-shadow(0 0 45px rgba(86, 225, 233, 0.22));}
.gal3d-modal.is-zoomed .gal3d-item.is-front{z-index: 50; cursor: zoom-out;}
.gal3d-modal.is-zoomed .gal3d-item.is-front img{transform: scale(1.48); filter: drop-shadow(0 50px 105px rgba(0, 0, 0, 0.95)) drop-shadow(0 0 70px rgba(86, 225, 233, 0.4));}
.gal3d-modal.is-zoomed .gal3d-item:not(.is-front){opacity: 0.08 !important; filter: blur(5px) brightness(0.3) !important; pointer-events: none;}
.gal3d-item figcaption{position: absolute; left: -9999px;}
.gal3d-hud{position: absolute; left: 50%; bottom: 26px; transform: translateX(-50%); display: flex; align-items: center; gap: 16px; background: rgba(8, 13, 20, 0.78); border: 1px solid rgba(86, 225, 233, 0.22); border-radius: 999px; padding: 10px 16px; backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); z-index: 3;}
.gal3d-meta{display: flex; flex-direction: column; align-items: center; gap: 2px; min-width: 190px; text-align: center;}
.gal3d-meta strong{font-size: 13.5px; color: #F1F7FB; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 240px;}
.gal3d-count{font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.1em; color: #7C8DA0;}
.gal3d-btn{width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; border: 1px solid rgba(86, 225, 233, 0.28); background: rgba(8, 13, 20, 0.6); color: rgba(230, 245, 255, 0.9); cursor: pointer; transition: border-color 0.2s ease, color 0.2s ease; flex: 0 0 auto;}
.gal3d-btn:hover, .gal3d-btn:focus-visible{border-color: #56E1E9; color: #56E1E9;}
.gal3d-btn:focus-visible{outline: none; box-shadow: 0 0 0 3px rgba(86, 225, 233, 0.3);}
.gal3d-zoom-btn{width: auto; min-width: 82px; height: 44px; padding: 0 14px; border-radius: 999px; gap: 6px; font-family: var(--font-mono); font-size: 11px; font-weight: 700; letter-spacing: 0.05em; background: rgba(86, 225, 233, 0.08); border: 1px solid rgba(86, 225, 233, 0.35); color: #B8E9F5; transition: all 0.22s ease;}
.gal3d-zoom-btn:hover{background: rgba(86, 225, 233, 0.22); border-color: #56E1E9; color: #FFFFFF; box-shadow: 0 0 16px rgba(86, 225, 233, 0.4); transform: translateY(-1px);}
.gal3d-zoom-btn.active{background: #56E1E9; color: #04070C; border-color: #56E1E9; box-shadow: 0 0 20px rgba(86, 225, 233, 0.7);}
.gal3d-close{position: absolute; top: 18px; right: 18px; z-index: 4;}
.gal3d-hint{position: absolute; left: 50%; top: 20px; transform: translateX(-50%); font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: #9FE8F5; background: rgba(8, 13, 20, 0.66); border: 1px solid rgba(86, 225, 233, 0.22); border-radius: 999px; padding: 7px 14px; z-index: 3; transition: opacity 0.4s ease; pointer-events: none;}
.gal3d-hint-hide{opacity: 0;}
@media (max-width: 640px){
.gal3d-stage{height: 60vh;}
.gal3d-item{width: clamp(280px, 86vw, 460px);}
.gal3d-modal.is-zoomed .gal3d-item.is-front img{transform: scale(1.28);}
.gal3d-meta{min-width: 120px;}
.gal3d-meta strong{max-width: 130px; font-size: 11.5px;}
.gal3d-zoom-btn{min-width: 65px; padding: 0 10px; font-size: 10px;}
}
@media (prefers-reduced-motion: reduce){
.gal3d-item img{transition: none;}
}
@media (min-width: 900px){
.module-card{ border: 1px solid rgba(86, 225, 233, 0.16); transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.4s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.35s ease;}
.module-card:hover{transform: translateY(-3px); box-shadow: 0 22px 46px -12px rgba(0, 0, 0, 0.8), 0 0 0 1px rgba(86, 225, 233, 0.14), 0 0 28px rgba(86, 225, 233, 0.12); border-color: rgba(86, 225, 233, 0.35);}
.proof-card{ transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.4s ease;}
.proof-card:hover{transform: translateY(-6px); box-shadow: 0 24px 50px rgba(0, 0, 0, 0.4), 0 0 60px rgba(86, 225, 233, 0.05);}
}
@media (min-width: 900px){
.gal-card{display: flex; flex-direction: column;}
.gal-open{flex: 1; display: flex; align-items: center; justify-content: center; height: auto; min-height: 380px;}
.gal-open img{max-height: 380px; width: auto; max-width: 100%; object-fit: contain;}
}
.module-card{position: relative; overflow: hidden;}
.module-card::before{content: ''; position: absolute; inset: 0; padding: 1px; border-radius: inherit; background: conic-gradient( from var(--card-angle, 0deg), transparent 0deg, rgba(45, 212, 191, 0.28) 60deg, transparent 120deg, rgba(255, 255, 255, 0.08) 180deg, transparent 240deg, rgba(20, 184, 166, 0.2) 300deg, transparent 360deg ); -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask-composite: exclude; opacity: 0; transition: opacity 0.5s ease; pointer-events: none;}
.module-card:hover::before{opacity: 1; animation: rotateBorder 4s linear infinite;}
.module-card .card-spotlight{position: absolute; inset: 0; pointer-events: none; z-index: 1; opacity: 0; transition: opacity 0.4s ease; border-radius: inherit; background: radial-gradient( 400px circle at var(--mouse-x, 50%) var(--mouse-y, 50%), rgba(45, 212, 191, 0.08), transparent 60% );}
.module-card:hover .card-spotlight{opacity: 1;}
.module-card{transform-style: preserve-3d; transition: transform 0.12s ease-out, border-color 0.25s ease, box-shadow 0.25s ease;}

.trust-badge-item{white-space: nowrap; font-size: 11px; padding: 5px 12px; flex-shrink: 0;}
@media (max-width: 767px){
.hero-left{padding-bottom: 8px;}
.hero-right{position: relative; z-index: 1;}
}
@media (max-width: 767px){
.orbit-shell{aspect-ratio: 1 / 1;}
}
.ti-field.has-error select,
.ti-field.has-error input{border-color: #EF4444 !important; box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.28) !important; animation: tiShake 0.35s ease;}
@keyframes tiShake{
  0%, 100% { transform: translateX(0); }
  20%, 60% { transform: translateX(-4px); }
  40%, 80% { transform: translateX(4px); }
}
.ti-field select:valid,
.ti-field input:valid{border-color: rgba(86, 225, 233, 0.28);}
.future-dash{height: 3.5px; width: 32px; border-radius: 2px; background: rgba(255, 255, 255, 0.22); border: none; padding: 0; cursor: pointer; transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);}
.future-dash:hover{background: rgba(255, 255, 255, 0.5);}
.future-dash.active{width: 48px; background: #FFFFFF; box-shadow: 0 0 10px rgba(255, 255, 255, 0.95), 0 0 18px rgba(86, 225, 233, 0.75), 0 0 26px rgba(187, 99, 255, 0.65);}
#platform > *,
#workflow > *,
#growth > *,
#pricing > *,
#faq > *{position: relative; z-index: 2;}
#platform{position: relative;}
#platform::before{content: ''; position: absolute; inset: -50px -40px -30px -40px; background-image: linear-gradient(to right, rgba(255, 255, 255, 0.064) 1px, transparent 1px), linear-gradient(to bottom, rgba(255, 255, 255, 0.064) 1px, transparent 1px); background-size: 48px 48px; background-position: center top; mask-image: radial-gradient(ellipse 92% 82% at 50% 50%, #000 30%, transparent 95%); -webkit-mask-image: radial-gradient(ellipse 92% 82% at 50% 50%, #000 30%, transparent 95%); pointer-events: none; z-index: 1;}
#platform::after{content: ''; position: absolute; top: 10%; left: -60px; width: 600px; height: 600px; background: radial-gradient(circle at 30% 30%, rgba(86, 225, 233, 0.09) 0%, transparent 65%); pointer-events: none; z-index: 1;}
#workflow{position: relative;}
#workflow::before{content: ''; position: absolute; inset: -30px -30px; background-image: linear-gradient(to right, rgba(255, 255, 255, 0.064) 1px, transparent 1px), linear-gradient(to bottom, rgba(255, 255, 255, 0.064) 1px, transparent 1px); background-size: 48px 48px; background-position: center top; mask-image: linear-gradient(180deg, transparent 0%, #000 20%, #000 80%, transparent 100%); -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 20%, #000 80%, transparent 100%); pointer-events: none; z-index: 1;}
#workflow::after{content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 90%; height: 280px; background: radial-gradient(ellipse 80% 50% at 50% 50%, rgba(86, 225, 233, 0.08) 0%, rgba(187, 99, 255, 0.05) 50%, transparent 80%); pointer-events: none; z-index: 1;}
#tradein{position: relative;}
#tradein::before{content: ''; position: absolute; inset: -40px -30px; background-image: linear-gradient(to right, rgba(255, 255, 255, 0.062) 1px, transparent 1px), linear-gradient(to bottom, rgba(255, 255, 255, 0.062) 1px, transparent 1px); background-size: 48px 48px; background-position: center top; mask-image: radial-gradient(ellipse 85% 75% at 50% 45%, #000 25%, transparent 88%); -webkit-mask-image: radial-gradient(ellipse 85% 75% at 50% 45%, #000 25%, transparent 88%); pointer-events: none; z-index: 1;}
#tradein::after{content: ''; position: absolute; top: 15%; left: 50%; transform: translateX(-50%); width: 750px; height: 500px; background: radial-gradient(ellipse 65% 55% at 50% 50%, rgba(86, 225, 233, 0.1) 0%, transparent 70%); pointer-events: none; z-index: 1;}
#growth{position: relative;}
#growth::before{content: ''; position: absolute; top: 15%; right: -5%; width: 600px; height: 550px; background: radial-gradient(circle at 75% 50%, rgba(187, 99, 255, 0.1) 0%, rgba(91, 88, 235, 0.03) 45%, transparent 70%); pointer-events: none; z-index: 1;}
#pricing{position: relative;}
#pricing::before{content: ''; position: absolute; inset: -50px -40px -40px -40px; background-image: linear-gradient(to right, rgba(255, 255, 255, 0.032) 1px, transparent 1px), linear-gradient(to bottom, rgba(255, 255, 255, 0.032) 1px, transparent 1px); background-size: 48px 48px; background-position: center top; mask-image: radial-gradient(ellipse 90% 80% at 50% 40%, #000 35%, transparent 92%); -webkit-mask-image: radial-gradient(ellipse 90% 80% at 50% 40%, #000 35%, transparent 92%); pointer-events: none; z-index: 1;}
#pricing::after{content: ''; position: absolute; top: 8%; left: 50%; transform: translateX(-50%); width: 850px; height: 600px; background: radial-gradient(ellipse 55% 55% at 50% 40%, rgba(86, 225, 233, 0.10) 0%, rgba(187, 99, 255, 0.04) 50%, transparent 75%); pointer-events: none; z-index: 1;}
#faq{position: relative;}
#faq::before{content: ''; position: absolute; inset: -30px; background-image: linear-gradient(to right, rgba(255, 255, 255, 0.028) 1px, transparent 1px), linear-gradient(to bottom, rgba(255, 255, 255, 0.028) 1px, transparent 1px); background-size: 48px 48px; background-position: center top; mask-image: radial-gradient(ellipse 85% 75% at 50% 50%, #000 30%, transparent 90%); -webkit-mask-image: radial-gradient(ellipse 85% 75% at 50% 50%, #000 30%, transparent 90%); pointer-events: none; z-index: 1;}

/* ============================================================
   MOBILE NAVIGATION: hamburger + side drawer (homepage)
   ============================================================ */

.nav-burger {
  display: none;
  background: none;
  border: none;
  padding: 8px;
  cursor: pointer;
  z-index: 1010;
}
.nav-burger span {
  display: block;
  width: 22px;
  height: 2px;
  background: #4FE3DC;
  margin: 5px 0;
  border-radius: 2px;
}

.tray-backdrop {
  display: none !important;
  position: fixed;
  inset: 0;
  background: rgba(3, 5, 8, 0.7);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  z-index: 998;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

.mobile-drawer {
  display: none !important;
  position: fixed;
  top: 0;
  right: 0;
  width: 290px;
  max-width: 82vw;
  height: 100vh;
  height: 100dvh;
  background: #030508;
  color: #F8FAFC;
  border-left: 1px solid rgba(79, 227, 220, 0.2);
  box-shadow: -10px 0 40px rgba(0, 0, 0, 0.7);
  z-index: 999;
  transform: translateX(100%);
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  flex-direction: column;
  padding: 20px;
  box-sizing: border-box;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  pointer-events: none;
}

#mainNav.open ~ .tray-backdrop,
body.nav-open .tray-backdrop {
  display: block !important;
  opacity: 1 !important;
  pointer-events: auto !important;
}

#mainNav.open ~ .mobile-drawer,
body.nav-open .mobile-drawer {
  display: flex !important;
  transform: translateX(0) !important;
  pointer-events: auto !important;
}

.drawer-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(79, 227, 220, 0.2);
}
.drawer-socials {
  display: flex;
  align-items: center;
  gap: 12px;
}
.drawer-social-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #94A3B8;
  text-decoration: none;
  transition: color 0.2s ease;
}
.drawer-social-link:hover {
  color: #4FE3DC;
}
.drawer-social-link svg {
  width: 18px;
  height: 18px;
}
.drawer-close {
  background: none;
  border: none;
  color: #F8FAFC;
  font-size: 26px;
  line-height: 1;
  cursor: pointer;
  padding: 0 4px;
  opacity: 0.8;
  transition: opacity 0.2s ease;
}
.drawer-close:hover {
  opacity: 1;
  color: #4FE3DC;
}

.drawer-nav {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 28px;
}
.drawer-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  color: #CBD5E1;
  font-size: 15px;
  font-weight: 500;
  text-decoration: none;
  border-radius: 8px;
  transition: background 0.2s, color 0.2s;
}
.drawer-item:hover {
  background: rgba(79, 227, 220, 0.1);
  color: #4FE3DC;
}
.drawer-num {
  color: #4FE3DC;
  font-weight: 700;
  font-size: 13px;
  min-width: 22px;
}
.drawer-label {
  flex: 1;
}

.drawer-contact {
  margin-top: auto;
  padding-top: 20px;
  border-top: 1px solid rgba(79, 227, 220, 0.2);
  margin-bottom: 20px;
}
.drawer-contact-line {
  display: block;
  color: #94A3B8;
  font-size: 14px;
  text-decoration: none;
  margin: 6px 0;
  transition: color 0.2s ease;
}
.drawer-contact-line:hover,
.drawer-contact-line.drawer-contact-email {
  color: #4FE3DC;
}

.tray-foot {
  padding-top: 16px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}
.tray-foot img {
  width: 110px;
  height: auto;
}

/* Mobile: hide desktop nav links, show burger */
@media (max-width: 899px) {
  .nav__links { display: none !important; }
  .nav-burger { display: block !important; }
}

/* Desktop: hide burger and drawer */
@media (min-width: 900px) {
  .nav__links { display: flex !important; flex-wrap: wrap; align-items: center; gap: 16px; }
  .nav-burger { display: none !important; }
  .tray-backdrop,
  .mobile-drawer {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
    opacity: 0 !important;
  }
}

/* 2026-10-24 spacing pass: the walkaround stage no longer hosts the 360 spin */
#tdxStage { min-height: 0 !important; }
#tdxHotspots { gap: 8px; }
#tdxHotspots .td-btn { padding: 9px 16px; font-size: 0.84rem; }
@media (max-width: 560px) {
  #tdxHotspots { display: grid !important; grid-template-columns: 1fr 1fr; }
  #tdxHotspots .td-btn { padding: 9px 10px; }
}