:root {

--bg-space: #020617;          
--bg-space-deep: #01040f;
--bg-panel: rgba(15, 23, 42, 0.88); 
--bg-panel-light: rgba(30, 41, 59, 0.7);
--bg-panel-solid: #0f172a;
--border-cyan: rgba(56, 189, 248, 0.28);
--border-cyan-glow: rgba(56, 189, 248, 0.55);
--text-main: #f8fafc;
--text-muted: #94a3b8;
--text-dim: #a0aec2;
--text-bright: #ffffff;


--deck-01-bridge: #fbbf24;    
--deck-02-reactor: #38bdf8;   
--deck-03-science: #2dd4bf;   
--deck-04-tactical: #fb923c;  
--deck-05-inspection: #c084fc;


--accent-emerald: #10b981;    
--accent-emerald-glow: rgba(16, 185, 129, 0.4);
--accent-cyan: #38bdf8;
--accent-amber: #fbbf24;
--accent-purple: #c084fc;
--accent-rose: #f43f5e;


--font-sans: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
--font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
--font-heading: 'Inter', system-ui, sans-serif;


--header-height: 72px;
--max-content-width: 1240px;
--border-radius-sm: 8px;
--border-radius-md: 14px;
--border-radius-lg: 20px;
--transition-fast: 0.18s ease;
--transition-normal: 0.28s cubic-bezier(0.16, 1, 0.3, 1);
}


html[lang="he"] {
--font-sans: 'Heebo', 'Inter', system-ui, sans-serif;
--font-heading: 'Heebo', 'Inter', system-ui, sans-serif;
--font-mono: 'Heebo', system-ui, sans-serif;
}


*, *::before, *::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}

html {
font-size: 16px;
scroll-behavior: smooth;
color-scheme: dark;
overflow-x: clip;
max-width: 100%;
width: 100%;
}

body {
font-family: var(--font-sans);
background-color: var(--bg-space);
background-image: radial-gradient(circle at 50% 20%, rgba(56, 189, 248, 0.08) 0%, transparent 60%),
radial-gradient(circle at 80% 80%, rgba(192, 132, 252, 0.06) 0%, transparent 50%),
radial-gradient(circle at 10% 90%, rgba(45, 212, 191, 0.05) 0%, transparent 50%);
background-attachment: fixed;
color: var(--text-main);
line-height: 1.6;
min-height: 100vh;
overflow-x: clip;
max-width: 100%;
width: 100%;
position: relative;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}


.scanline-overlay {
position: fixed;
inset: 0;
pointer-events: none;
background: linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.22) 50%);
background-size: 100% 4px;
z-index: 999;
opacity: 0.35;
}


::-webkit-scrollbar {
width: 6px;
height: 6px;
}
::-webkit-scrollbar-track {
background: rgba(2, 6, 23, 0.8);
}
::-webkit-scrollbar-thumb {
background: rgba(56, 189, 248, 0.4);
border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover {
background: rgba(56, 189, 248, 0.7);
}


.font-mono { font-family: var(--font-mono); }
code, pre, .mono-data, .hash, .font-mono-data {
font-family: var(--font-mono);
direction: ltr !important;
unicode-bidi: isolate;
word-break: break-all;
overflow-wrap: break-word;
max-width: 100%;
}

a {
color: inherit;
text-decoration: none;
}

button {
cursor: pointer;
border: none;
background: none;
font-family: inherit;
color: inherit;
}

img, svg {
display: inline-block;
vertical-align: middle;
max-width: 100%;
height: auto;
}


.hidden-mobile {
display: inline;
}
@media (max-width: 640px) {
.hidden-mobile {
display: none !important;
}
}


h1, h2, h3, h4, h5, h6 {
font-family: var(--font-heading);
font-weight: 700;
line-height: 1.25;
color: var(--text-bright);
overflow-wrap: break-word;
word-break: break-word;
min-width: 0;
}

.text-gradient-cyan {
background: linear-gradient(135deg, #38bdf8 0%, #2dd4bf 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}

.text-gradient-amber {
background: linear-gradient(135deg, #fbbf24 0%, #f97316 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}

.text-gradient-purple {
background: linear-gradient(135deg, #c084fc 0%, #e879f9 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}


.badge {
display: inline-flex;
align-items: center;
gap: 0.4rem;
padding: 0.25rem 0.65rem;
border-radius: 9999px;
font-size: 0.72rem;
font-weight: 700;
font-family: var(--font-mono);
letter-spacing: 0.04em;
text-transform: uppercase;
max-width: 100%;
overflow-wrap: break-word;
}
.badge-emerald {
background: rgba(16, 185, 129, 0.15);
border: 1px solid rgba(16, 185, 129, 0.4);
color: #34d399;
}
.badge-cyan {
background: rgba(56, 189, 248, 0.15);
border: 1px solid rgba(56, 189, 248, 0.4);
color: #38bdf8;
}
.badge-amber {
background: rgba(251, 191, 36, 0.15);
border: 1px solid rgba(251, 191, 36, 0.4);
color: #fbbf24;
}
.badge-purple {
background: rgba(192, 132, 252, 0.15);
border: 1px solid rgba(192, 132, 252, 0.4);
color: #c084fc;
}


.pulse-dot {
width: 7px;
height: 7px;
border-radius: 50%;
background-color: var(--accent-emerald);
box-shadow: 0 0 10px var(--accent-emerald);
animation: pulseAnim 2s infinite ease-in-out;
flex-shrink: 0;
}
@keyframes pulseAnim {
0%, 100% { opacity: 1; transform: scale(1); }
50% { opacity: 0.4; transform: scale(0.85); }
}


.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.6rem;
padding: 0.75rem 1.4rem;
border-radius: var(--border-radius-md);
font-weight: 700;
font-size: 0.88rem;
font-family: var(--font-mono);
text-transform: uppercase;
letter-spacing: 0.04em;
transition: all var(--transition-normal);
cursor: pointer;
max-width: 100%;
min-width: 0;
box-sizing: border-box;
word-break: break-word;
overflow-wrap: break-word;
white-space: normal;
text-align: center;
line-height: 1.35;
}
.btn:hover {
transform: translateY(-2px);
}
.btn:active {
transform: translateY(0);
}

.btn-primary {
background: linear-gradient(135deg, #06b6d4, #0ea5e9);
border: 1px solid #38bdf8;
color: #020617;
box-shadow: 0 0 20px rgba(56, 189, 248, 0.35);
}
.btn-primary:hover {
background: linear-gradient(135deg, #06b6d4, #0ea5e9);
box-shadow: 0 0 30px rgba(56, 189, 248, 0.55);
}

.btn-whatsapp {
background: linear-gradient(135deg, #10b981, #059669);
border: 1px solid #34d399;
color: #020617;
box-shadow: 0 0 20px rgba(16, 185, 129, 0.35);
}
.btn-whatsapp:hover {
background: linear-gradient(135deg, #10b981, #059669);
box-shadow: 0 0 30px rgba(16, 185, 129, 0.6);
}

.btn-secondary {
background: rgba(15, 23, 42, 0.75);
border: 1px solid var(--border-cyan);
color: var(--text-main);
backdrop-filter: blur(10px);
}
.btn-secondary:hover {
border-color: #38bdf8;
color: #38bdf8;
box-shadow: 0 0 15px rgba(56, 189, 248, 0.25);
}

.btn-amber {
background: rgba(251, 191, 36, 0.12);
border: 1px solid rgba(251, 191, 36, 0.45);
color: #fbbf24;
}
.btn-amber:hover {
background: rgba(251, 191, 36, 0.25);
box-shadow: 0 0 18px rgba(251, 191, 36, 0.35);
}

.btn-purple {
background: rgba(192, 132, 252, 0.12);
border: 1px solid rgba(192, 132, 252, 0.45);
color: #c084fc;
}
.btn-purple:hover {
background: rgba(192, 132, 252, 0.25);
box-shadow: 0 0 18px rgba(192, 132, 252, 0.35);
}


.deck-action-btn {
flex: 1 1 180px;
min-width: 0;
}


.icon-arrow {
width: 1rem;
height: 1rem;
transition: transform var(--transition-fast);
}
[dir="rtl"] .icon-arrow {
transform: scaleX(-1);
}


.holo-panel {
background: var(--bg-panel);
backdrop-filter: blur(18px);
-webkit-backdrop-filter: blur(18px);
border: 1px solid var(--border-cyan);
box-shadow: 0 12px 40px rgba(0, 0, 0, 0.6), inset 0 0 25px rgba(56, 189, 248, 0.06);
border-radius: var(--border-radius-md);
position: relative;
max-width: 100%;
box-sizing: border-box;
}

.holo-bracket {
position: relative;
}
.holo-bracket::before {
content: '';
position: absolute;
top: -1px;
inset-inline-start: -1px;
width: 10px;
height: 10px;
border-top: 2px solid #38bdf8;
border-inline-start: 2px solid #38bdf8;
pointer-events: none;
}
.holo-bracket::after {
content: '';
position: absolute;
bottom: -1px;
inset-inline-end: -1px;
width: 10px;
height: 10px;
border-bottom: 2px solid #38bdf8;
border-inline-end: 2px solid #38bdf8;
pointer-events: none;
}


.site-header {
position: sticky;
top: 0;
z-index: 100;
width: 100%;
max-width: 100%;
background: rgba(2, 6, 23, 0.88);
backdrop-filter: blur(16px);
-webkit-backdrop-filter: blur(16px);
border-bottom: 1px solid rgba(56, 189, 248, 0.15);
overflow-x: clip;
}

.header-container {
max-width: var(--max-content-width);
margin: 0 auto;
padding: 0.75rem 1.25rem;
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
width: 100%;
min-width: 0;
box-sizing: border-box;
}

.header-brand {
display: flex;
align-items: center;
gap: 0.85rem;
min-width: 0;
flex-shrink: 1;
}

.brand-icon {
width: 40px;
height: 40px;
border-radius: var(--border-radius-sm);
background: rgba(56, 189, 248, 0.15);
border: 1px solid #38bdf8;
display: flex;
align-items: center;
justify-content: center;
color: #38bdf8;
font-weight: 900;
font-size: 1.2rem;
box-shadow: 0 0 16px rgba(56, 189, 248, 0.4);
flex-shrink: 0;
}

.brand-info {
display: flex;
flex-direction: column;
min-width: 0;
}

.brand-title {
font-size: 0.88rem;
font-weight: 800;
letter-spacing: 0.08em;
color: #38bdf8;
display: flex;
align-items: center;
gap: 0.5rem;
min-width: 0;
white-space: nowrap;
}

.brand-tag {
font-size: 0.68rem;
font-family: var(--font-mono);
color: var(--text-dim);
}

.brand-status {
font-size: 0.7rem;
font-family: var(--font-mono);
color: var(--text-muted);
display: flex;
align-items: center;
gap: 0.4rem;
white-space: nowrap;
}

.header-nav {
display: flex;
align-items: center;
gap: 0.4rem;
}

.nav-link {
padding: 0.5rem 0.85rem;
border-radius: var(--border-radius-sm);
font-size: 0.82rem;
font-weight: 600;
color: var(--text-muted);
transition: all var(--transition-fast);
border: 1px solid transparent;
}
.nav-link:hover {
color: #38bdf8;
background: rgba(56, 189, 248, 0.08);
border-color: rgba(56, 189, 248, 0.2);
}
.nav-link.active {
color: #ffffff;
background: rgba(56, 189, 248, 0.16);
border-color: #38bdf8;
box-shadow: 0 0 12px rgba(56, 189, 248, 0.25);
}


.header-actions {
display: flex;
align-items: center;
gap: 0.6rem;
flex-shrink: 0;
}

.lang-switch {
display: flex;
align-items: center;
background: rgba(15, 23, 42, 0.8);
border: 1px solid var(--border-cyan);
border-radius: var(--border-radius-sm);
padding: 0.2rem;
gap: 0.15rem;
flex-shrink: 0;
}

.lang-pill {
padding: 0.25rem 0.55rem;
border-radius: 6px;
font-size: 0.72rem;
font-family: var(--font-mono);
font-weight: 700;
color: var(--text-muted);
transition: all var(--transition-fast);
}
.lang-pill:hover {
color: #38bdf8;
}
.lang-pill.active {
background: rgba(56, 189, 248, 0.25);
color: #ffffff;
border: 1px solid rgba(56, 189, 248, 0.6);
}

.btn-tool {
padding: 0.45rem 0.75rem;
border-radius: var(--border-radius-sm);
font-size: 0.76rem;
font-family: var(--font-mono);
font-weight: 700;
display: inline-flex;
align-items: center;
gap: 0.35rem;
transition: all var(--transition-fast);
border: 1px solid var(--border-cyan);
background: rgba(15, 23, 42, 0.7);
flex-shrink: 0;
}
.btn-tool:hover {
border-color: #38bdf8;
color: #38bdf8;
box-shadow: 0 0 10px rgba(56, 189, 248, 0.3);
}


.mobile-nav-toggle {
display: none;
padding: 0.5rem;
border-radius: var(--border-radius-sm);
border: 1px solid var(--border-cyan);
background: rgba(15, 23, 42, 0.8);
color: #38bdf8;
flex-shrink: 0;
}


.telemetry-bar {
background: rgba(2, 6, 23, 0.94);
border-bottom: 1px solid rgba(56, 189, 248, 0.12);
padding: 0.45rem 1.25rem;
font-size: 0.78rem;
font-family: var(--font-mono);
display: flex;
align-items: center;
justify-content: space-between;
cursor: pointer;
transition: background var(--transition-fast);
width: 100%;
max-width: 100%;
min-width: 0;
box-sizing: border-box;
overflow: hidden;
}
.telemetry-bar:hover {
background: rgba(15, 23, 42, 0.95);
}

.telemetry-stream {
display: flex;
align-items: center;
gap: 0.75rem;
overflow: hidden;
min-width: 0;
flex: 1;
}

.telemetry-badge {
display: inline-flex;
align-items: center;
gap: 0.35rem;
padding: 0.2rem 0.55rem;
border-radius: 4px;
background: rgba(16, 185, 129, 0.15);
border: 1px solid rgba(16, 185, 129, 0.4);
color: #34d399;
font-weight: 700;
font-size: 0.68rem;
white-space: nowrap;
flex-shrink: 0;
}

.telemetry-message {
color: var(--text-main);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
min-width: 0;
flex: 1;
}

.telemetry-cta {
color: #38bdf8;
font-size: 0.72rem;
font-weight: 700;
white-space: nowrap;
padding-inline-start: 0.75rem;
flex-shrink: 0;
}


.viewfinder-container {
position: relative;
width: 100%;
max-width: 100%;
height: calc(100vh - var(--header-height) - 34px);
min-height: 560px;
overflow: hidden;
}

#ship3d-canvas {
position: absolute;
inset: 0;
width: 100% !important;
max-width: 100% !important;
height: 100%;
z-index: 1;
cursor: grab;
touch-action: pan-y;
}
#ship3d-canvas:active {
cursor: grabbing;
}


.viewfinder-container.mode-art #ship3d-canvas {
display: none !important;
}



.hero-art {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
z-index: 2;
overflow: hidden;
background-color: var(--bg-space-deep);
animation: shipAuraBreath 7s ease-in-out infinite;
}

@keyframes shipAuraBreath {
0%, 100% {
filter: drop-shadow(0 0 25px rgba(56, 189, 248, 0.16)) brightness(1);
}
50% {
filter: drop-shadow(0 0 52px rgba(56, 189, 248, 0.4)) brightness(1.06);
}
}

.hero-picture {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
display: block;
}

.hero-img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center center;
display: block;
user-select: none;
-webkit-user-drag: none;
}


.hero-holo-fx {
position: absolute;
inset: 0;
pointer-events: none;
z-index: 4;
}


.hero-holo-fx::before {
content: '';
position: absolute;
inset: 0;
background: repeating-linear-gradient(
to bottom,
rgba(56, 189, 248, 0.06) 0px,
rgba(56, 189, 248, 0.06) 1.5px,
transparent 1.5px,
transparent 4.5px
);
pointer-events: none;
}


.hero-holo-fx::after {
content: '';
position: absolute;
inset: 0;
background: radial-gradient(circle at 50% 50%, transparent 45%, rgba(2, 6, 23, 0.65) 95%);
pointer-events: none;
animation: holoGlitchFlicker 9s infinite;
}

@keyframes holoGlitchFlicker {
0%, 93%, 95.5%, 97.5%, 100% {
opacity: 1;
transform: translate(0, 0);
}
93.5% {
opacity: 0.88;
transform: translate(-1px, 1px);
background-color: rgba(56, 189, 248, 0.04);
}
94% {
opacity: 0.96;
transform: translate(1px, -0.5px);
}
96% {
opacity: 0.85;
transform: translate(-2px, 0);
background-color: rgba(192, 132, 252, 0.04);
}
97% {
opacity: 1;
transform: translate(0, 0);
}
}


.deck-hotspots {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
pointer-events: none;
z-index: 5;
}

.desktop-hotspots {
display: block;
}
.mobile-hotspots {
display: none;
}

.deck-hotspot {
pointer-events: auto;
cursor: pointer;
fill: transparent;
stroke: transparent;
stroke-width: 2px;
stroke-linejoin: round;
transition: fill 0.25s ease, stroke 0.25s ease, filter 0.25s ease;
outline: none;
}


.deck-hotspot-0 {
--deck-color: #fbbf24;
--deck-rgb: 251, 191, 36;
}
.deck-hotspot-1 {
--deck-color: #38bdf8;
--deck-rgb: 56, 189, 248;
}
.deck-hotspot-2 {
--deck-color: #2dd4bf;
--deck-rgb: 45, 212, 191;
}
.deck-hotspot-3 {
--deck-color: #fb923c;
--deck-rgb: 251, 146, 60;
}
.deck-hotspot-4 {
--deck-color: #c084fc;
--deck-rgb: 192, 132, 252;
}


.deck-hotspot:hover,
.deck-hotspot:focus-visible {
fill: rgba(var(--deck-rgb), 0.18);
stroke: var(--deck-color);
stroke-width: 2px;
filter: drop-shadow(0 0 10px rgba(var(--deck-rgb), 0.7));
}


.deck-hotspot.active {
fill: rgba(var(--deck-rgb), 0.22);
stroke: var(--deck-color);
stroke-width: 2.5px;
stroke-dasharray: 14 6;
filter: drop-shadow(0 0 18px rgba(var(--deck-rgb), 0.85));
animation: hotspotDashScan 2.5s linear infinite;
}

@keyframes hotspotDashScan {
0% {
stroke-dashoffset: 80;
}
100% {
stroke-dashoffset: 0;
}
}


.deck-scanline {
display: none;
stroke-width: 2px;
stroke-linecap: round;
pointer-events: none;
}

.deck-scanline.active {
display: block;
stroke: var(--deck-color);
filter: drop-shadow(0 0 10px var(--deck-color));
animation: scanlineSweep 2.2s ease-in-out infinite alternate;
}

.deck-scanline.scanline-0 { --deck-color: #fbbf24; }
.deck-scanline.scanline-1 { --deck-color: #38bdf8; }
.deck-scanline.scanline-2 { --deck-color: #2dd4bf; }
.deck-scanline.scanline-3 { --deck-color: #fb923c; }
.deck-scanline.scanline-4 { --deck-color: #c084fc; }

@keyframes scanlineSweep {
0% {
transform: translateY(-14px);
opacity: 0.35;
}
50% {
opacity: 1;
}
100% {
transform: translateY(14px);
opacity: 0.35;
}
}


.hud-layer {
position: absolute;
inset: 0;
z-index: 10;
pointer-events: none;
padding: 1.25rem;
display: flex;
flex-direction: column;
justify-content: space-between;
width: 100%;
max-width: 100%;
box-sizing: border-box;
}

.hud-top-bar {
display: flex;
justify-content: flex-end;
pointer-events: auto;
gap: 0.5rem;
}


.deck-strip {
position: absolute;
top: 50%;
inset-inline-start: 1.25rem;
transform: translateY(-50%);
pointer-events: auto;
display: flex;
flex-direction: column;
gap: 0.55rem;
background: rgba(2, 6, 23, 0.86);
backdrop-filter: blur(16px);
-webkit-backdrop-filter: blur(16px);
border: 1px solid var(--border-cyan);
border-radius: var(--border-radius-md);
padding: 0.6rem;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6);
z-index: 15;
max-width: 100%;
box-sizing: border-box;
}

.deck-strip-header {
font-size: 0.65rem;
font-family: var(--font-mono);
color: #38bdf8;
font-weight: 800;
text-align: center;
padding-bottom: 0.35rem;
border-bottom: 1px solid rgba(56, 189, 248, 0.2);
}

.deck-pill {
display: flex;
align-items: center;
gap: 0.75rem;
padding: 0.55rem 0.8rem;
border-radius: var(--border-radius-sm);
background: transparent;
border: 1px solid transparent;
transition: all var(--transition-fast);
text-align: start;
}
.deck-pill:hover {
background: rgba(56, 189, 248, 0.08);
border-color: rgba(56, 189, 248, 0.25);
}
.deck-pill.active {
background: rgba(15, 23, 42, 0.95);
border-color: var(--pill-accent, #38bdf8);
box-shadow: 0 0 16px rgba(56, 189, 248, 0.25);
}

.deck-icon-wrap {
width: 34px;
height: 34px;
border-radius: 8px;
background: rgba(255, 255, 255, 0.04);
border: 1px solid rgba(255, 255, 255, 0.15);
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.deck-pill.active .deck-icon-wrap {
border-color: var(--pill-accent, #38bdf8);
box-shadow: 0 0 12px var(--pill-accent-glow, rgba(56, 189, 248, 0.4));
}

.deck-text-wrap {
display: flex;
flex-direction: column;
}
.deck-number {
font-size: 0.74rem;
font-weight: 800;
font-family: var(--font-mono);
color: var(--pill-accent, #38bdf8);
}
.deck-label {
font-size: 0.7rem;
color: var(--text-muted);
line-height: 1.2;
}


.holo-hud {
position: absolute;
top: 50%;
inset-inline-end: 1.25rem;
transform: translateY(-50%);
width: 360px;
max-width: 100%;
max-height: 85vh;
overflow-y: auto;
pointer-events: auto;
z-index: 15;
padding: 1.25rem;
box-sizing: border-box;
transition: transform var(--transition-normal), opacity var(--transition-normal);
}
.holo-hud.hidden-hud {
opacity: 0;
pointer-events: none;
visibility: hidden;
transform: translateY(-50%) translateX(calc(120% * var(--dir-sign, 1)));
}
[dir="rtl"] {
--dir-sign: -1;
}


.hud-illuminator {
position: relative;
width: 100%;
height: 140px;
border-radius: var(--border-radius-sm);
overflow: hidden;
margin-bottom: -24px;
border: 1px solid var(--border-cyan);
background: #020617;
box-shadow: inset 0 0 25px rgba(0, 0, 0, 0.8), 0 4px 16px rgba(0, 0, 0, 0.5);
flex-shrink: 0;
}

.hud-interior-img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
opacity: 0;
transition: opacity 0.55s ease-in-out;
pointer-events: none;
}

.hud-interior-img.active {
opacity: 1;
}

.hud-illuminator-vignette {
position: absolute;
inset: 0;
pointer-events: none;
background: radial-gradient(circle at 50% 50%, transparent 35%, rgba(2, 6, 23, 0.7) 100%),
linear-gradient(to bottom, transparent 65%, rgba(2, 6, 23, 0.9) 100%);
}

.hud-illuminator-scanlines {
position: absolute;
inset: 0;
pointer-events: none;
background: linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.3) 50%);
background-size: 100% 3px;
opacity: 0.45;
}

.hud-officer-header {
position: relative;
z-index: 2;
display: flex;
align-items: flex-end;
gap: 1rem;
margin-bottom: 1rem;
padding-bottom: 0.85rem;
border-bottom: 1px solid rgba(56, 189, 248, 0.2);
min-width: 0;
}

.hud-avatar {
width: 58px;
height: 58px;
border-radius: var(--border-radius-sm);
object-fit: cover;
border: 2px solid #38bdf8;
box-shadow: 0 4px 14px rgba(0, 0, 0, 0.7), 0 0 15px rgba(56, 189, 248, 0.35);
flex-shrink: 0;
position: relative;
z-index: 3;
}

.hud-officer-meta {
display: flex;
flex-direction: column;
min-width: 0;
}
.hud-deck-tag {
font-size: 0.7rem;
font-family: var(--font-mono);
font-weight: 700;
color: #fbbf24;
}
.hud-officer-name {
font-size: 0.95rem;
font-weight: 800;
color: #ffffff;
overflow-wrap: break-word;
word-break: break-word;
}
.hud-officer-botid {
font-size: 0.68rem;
font-family: var(--font-mono);
color: var(--text-dim);
}

.hud-service-badge {
font-size: 0.7rem;
font-family: var(--font-mono);
font-weight: 700;
color: #38bdf8;
margin-bottom: 0.3rem;
}
.hud-service-title {
font-size: 0.88rem;
font-weight: 700;
margin-bottom: 0.45rem;
color: #ffffff;
overflow-wrap: break-word;
word-break: break-word;
}
.hud-service-desc {
font-size: 0.78rem;
color: var(--text-muted);
margin-bottom: 1rem;
line-height: 1.45;
overflow-wrap: break-word;
word-break: break-word;
}


.hud-report {
background: rgba(2, 6, 23, 0.6);
border: 1px solid rgba(56, 189, 248, 0.2);
border-radius: var(--border-radius-sm);
padding: 0.75rem;
margin-bottom: 1rem;
display: flex;
flex-direction: column;
gap: 0.45rem;
font-size: 0.74rem;
min-width: 0;
}
.hud-report-row {
display: flex;
flex-direction: column;
min-width: 0;
}
.hud-report-label {
font-family: var(--font-mono);
font-size: 0.66rem;
font-weight: 700;
color: #38bdf8;
text-transform: uppercase;
}
.hud-report-value {
color: var(--text-main);
line-height: 1.35;
overflow-wrap: break-word;
word-break: break-word;
min-width: 0;
}


.hud-bottom-bar {
display: flex;
align-items: center;
justify-content: space-between;
pointer-events: auto;
gap: 1rem;
min-width: 0;
}


.page-container {
width: 100%;
max-width: var(--max-content-width);
margin: 0 auto;
padding: 2.5rem 1.25rem 5rem;
box-sizing: border-box;
min-width: 0;
}

.page-hero {
margin-bottom: 3rem;
text-align: center;
max-width: 860px;
margin-inline: auto;
min-width: 0;
}

.page-badge {
margin-bottom: 1rem;
}

.page-title {
font-size: clamp(1.6rem, 4vw, 2.7rem);
font-weight: 800;
letter-spacing: -0.01em;
margin-bottom: 1rem;
overflow-wrap: break-word;
word-break: break-word;
}

.page-subtitle {
font-size: clamp(0.95rem, 2vw, 1.2rem);
color: #38bdf8;
font-weight: 600;
margin-bottom: 1.25rem;
line-height: 1.4;
overflow-wrap: break-word;
word-break: break-word;
}

.page-lead {
font-size: 0.95rem;
color: var(--text-muted);
line-height: 1.7;
margin-bottom: 1.5rem;
overflow-wrap: break-word;
word-break: break-word;
}

.page-lead p + p {
margin-top: 0.85rem;
}

.page-hero-actions {
display: flex;
align-items: center;
justify-content: center;
gap: 1rem;
flex-wrap: wrap;
margin-top: 1.5rem;
min-width: 0;
}


.grid-cards {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
gap: 1.5rem;
width: 100%;
min-width: 0;
}

.card {
background: var(--bg-panel);
border: 1px solid var(--border-cyan);
border-radius: var(--border-radius-md);
padding: 1.5rem;
backdrop-filter: blur(14px);
-webkit-backdrop-filter: blur(14px);
display: flex;
flex-direction: column;
justify-content: space-between;
transition: all var(--transition-normal);
max-width: 100%;
box-sizing: border-box;
min-width: 0;
}
.card:hover {
border-color: #38bdf8;
transform: translateY(-4px);
box-shadow: 0 14px 35px rgba(0, 0, 0, 0.5), 0 0 20px rgba(56, 189, 248, 0.15);
}


.deck-card {
position: relative;
overflow: hidden;
background: var(--bg-panel);
border: 1px solid var(--border-cyan);
}

.deck-card-bg {
position: absolute;
inset: 0;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
transition: transform 600ms cubic-bezier(0.16, 1, 0.3, 1);
will-change: transform;
pointer-events: none;
z-index: 1;
}



.deck-card-bg::after {
content: '';
position: absolute;
inset: 0;
background:
linear-gradient(to top, rgba(2, 6, 23, 0.96) 0%, rgba(2, 6, 23, 0.85) 45%, rgba(2, 6, 23, 0.72) 100%),
linear-gradient(to bottom, rgba(2, 6, 23, 0.65) 0%, transparent 45%);
pointer-events: none;
}

.deck-card-content {
position: relative;
z-index: 2;
display: flex;
flex-direction: column;
justify-content: space-between;
height: 100%;
}

@media (hover: hover) and (pointer: fine) {
.deck-card:hover .deck-card-bg {
transform: scale(1.03);
}
}
@media (max-width: 768px) {
.deck-card:hover .deck-card-bg {
transform: none !important;
}
}

.deck-card-header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 1rem;
padding-bottom: 0.75rem;
border-bottom: 1px solid rgba(56, 189, 248, 0.2);
min-width: 0;
}

.deck-code {
font-size: 0.74rem;
font-family: var(--font-mono);
font-weight: 700;
}

.deck-service-name {
font-size: 1.15rem;
font-weight: 700;
color: #ffffff;
margin-bottom: 0.5rem;
overflow-wrap: break-word;
word-break: break-word;
}

.deck-service-desc {
font-size: 0.86rem;
color: var(--text-muted);
margin-bottom: 1.25rem;
line-height: 1.5;
overflow-wrap: break-word;
word-break: break-word;
}

.bullets-list {
list-style: none;
margin-bottom: 1.25rem;
display: flex;
flex-direction: column;
gap: 0.6rem;
min-width: 0;
}
.bullets-list li {
font-size: 0.82rem;
color: var(--text-main);
position: relative;
padding-inline-start: 1.4rem;
line-height: 1.4;
overflow-wrap: break-word;
word-break: break-word;
}
.bullets-list li::before {
content: '◆';
position: absolute;
inset-inline-start: 0;
color: #38bdf8;
font-weight: 700;
}

.deck-artifact-box {
background: rgba(2, 6, 23, 0.65);
border: 1px solid rgba(56, 189, 248, 0.2);
border-radius: var(--border-radius-sm);
padding: 0.75rem;
margin-bottom: 1.25rem;
font-size: 0.76rem;
min-width: 0;
}
.deck-artifact-label {
font-family: var(--font-mono);
font-size: 0.65rem;
font-weight: 700;
color: #fbbf24;
text-transform: uppercase;
margin-bottom: 0.25rem;
}
.deck-artifact-name {
font-family: var(--font-mono);
color: #38bdf8;
word-break: break-all;
overflow-wrap: break-word;
}


.crew-page-container {
overflow-x: clip;
max-width: 100%;
}


.crew-filter-bar {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
justify-content: center;
align-items: center;
margin: 1.5rem 0 2.5rem;
width: 100%;
max-width: 100%;
box-sizing: border-box;
}

.crew-filter-btn {
padding: 0.55rem 1.15rem;
border-radius: var(--border-radius-sm);
font-family: var(--font-mono);
font-size: 0.8rem;
font-weight: 700;
border: 1px solid var(--border-cyan);
background: rgba(15, 23, 42, 0.85);
color: var(--text-muted);
cursor: pointer;
transition: all var(--transition-fast);
text-transform: uppercase;
letter-spacing: 0.04em;
line-height: 1.2;
box-sizing: border-box;
}
.crew-filter-btn:hover {
border-color: #38bdf8;
color: #ffffff;
background: rgba(56, 189, 248, 0.14);
transform: translateY(-1px);
}
.crew-filter-btn.active {
background: rgba(56, 189, 248, 0.22);
border-color: #38bdf8;
color: #ffffff;
box-shadow: 0 0 14px rgba(56, 189, 248, 0.35);
}


.section-header {
margin-bottom: 2.25rem;
width: 100%;
}
.section-header.text-center {
text-align: center;
}
.section-title {
font-size: clamp(1.4rem, 4vw, 2.1rem);
font-weight: 800;
margin: 0.5rem 0 0.35rem;
color: #ffffff;
overflow-wrap: break-word;
word-break: break-word;
}
.section-subtitle {
font-size: 0.92rem;
color: var(--text-muted);
line-height: 1.6;
max-width: 760px;
margin: 0 auto;
overflow-wrap: break-word;
word-break: break-word;
}


.crew-admiral-wrap {
margin-bottom: 2.75rem;
width: 100%;
max-width: 100%;
}

.crew-card-admiral {
border-color: rgba(251, 191, 36, 0.55) !important;
background: linear-gradient(135deg, rgba(30, 27, 75, 0.45) 0%, rgba(15, 23, 42, 0.95) 100%) !important;
box-shadow: 0 12px 35px rgba(0, 0, 0, 0.6), 0 0 25px rgba(251, 191, 36, 0.18) !important;
padding: 1.75rem;
}
.crew-card-admiral:hover {
border-color: #fbbf24 !important;
box-shadow: 0 14px 45px rgba(0, 0, 0, 0.7), 0 0 32px rgba(251, 191, 36, 0.35) !important;
}

.crew-avatar-admiral {
width: 96px;
height: 96px;
border-radius: var(--border-radius-sm);
border: 2px solid #fbbf24;
background: radial-gradient(circle, rgba(251, 191, 36, 0.3) 0%, rgba(15, 23, 42, 0.92) 75%);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
box-shadow: 0 0 22px rgba(251, 191, 36, 0.4);
flex-shrink: 0;
user-select: none;
}
.admiral-crown-icon {
font-size: 2.6rem;
line-height: 1;
}
.admiral-star-icon {
font-size: 0.85rem;
color: #fbbf24;
margin-top: 0.15rem;
}


.crew-compartment-section {
margin-bottom: 3.5rem;
width: 100%;
max-width: 100%;
}

.crew-compartment-header {
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
gap: 1rem;
margin-bottom: 1.25rem;
padding-bottom: 0.75rem;
border-bottom: 1px solid rgba(56, 189, 248, 0.2);
width: 100%;
box-sizing: border-box;
}

.crew-compartment-title-block {
display: flex;
align-items: center;
gap: 0.75rem;
flex-wrap: wrap;
min-width: 0;
}

.crew-deck-name {
font-size: 1.25rem;
font-weight: 800;
color: #ffffff;
overflow-wrap: break-word;
}

.crew-channel-badge {
display: inline-flex;
align-items: center;
gap: 0.45rem;
font-family: var(--font-mono);
font-size: 0.76rem;
padding: 0.35rem 0.75rem;
border-radius: var(--border-radius-sm);
background: rgba(15, 23, 42, 0.85);
border: 1px solid rgba(56, 189, 248, 0.25);
color: var(--text-muted);
max-width: 100%;
overflow-wrap: break-word;
word-break: break-word;
}


.crew-card {
transition: all var(--transition-normal);
background: var(--bg-panel);
border: 1px solid var(--border-cyan);
border-radius: var(--border-radius-md);
box-sizing: border-box;
max-width: 100%;
}


.crew-card[data-deck="bridge"]:hover {
border-color: var(--deck-01-bridge) !important;
box-shadow: 0 12px 35px rgba(0, 0, 0, 0.6), 0 0 22px rgba(251, 191, 36, 0.28) !important;
}
.crew-card[data-deck="engineering"]:hover {
border-color: var(--deck-02-reactor) !important;
box-shadow: 0 12px 35px rgba(0, 0, 0, 0.6), 0 0 22px rgba(56, 189, 248, 0.28) !important;
}
.crew-card[data-deck="science"]:hover {
border-color: var(--deck-03-science) !important;
box-shadow: 0 12px 35px rgba(0, 0, 0, 0.6), 0 0 22px rgba(45, 212, 191, 0.28) !important;
}
.crew-card[data-deck="tactical"]:hover {
border-color: var(--deck-04-tactical) !important;
box-shadow: 0 12px 35px rgba(0, 0, 0, 0.6), 0 0 22px rgba(251, 146, 60, 0.28) !important;
}
.crew-card[data-deck="inspection"]:hover {
border-color: var(--deck-05-inspection) !important;
box-shadow: 0 12px 35px rgba(0, 0, 0, 0.6), 0 0 22px rgba(192, 132, 252, 0.28) !important;
}


.crew-card-head {
padding: 1.5rem;
margin-bottom: 1.5rem;
width: 100%;
}

.crew-card-head-grid {
display: grid;
grid-template-columns: auto 1fr;
gap: 1.5rem;
align-items: flex-start;
min-width: 0;
}

.crew-head-avatar-col {
display: flex;
flex-direction: column;
align-items: center;
flex-shrink: 0;
}

.crew-avatar-head {
width: 96px;
height: 96px;
border-radius: var(--border-radius-sm);
object-fit: cover;
border: 2px solid #38bdf8;
box-shadow: 0 0 18px rgba(56, 189, 248, 0.3);
flex-shrink: 0;
}

.crew-head-info-col {
display: flex;
flex-direction: column;
gap: 0.45rem;
min-width: 0;
flex: 1;
}

.crew-card-header-line {
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.5rem;
flex-wrap: wrap;
margin-bottom: 0.2rem;
}

.crew-botid {
font-size: 0.72rem;
color: var(--text-dim);
}

.crew-head-name-row {
display: flex;
align-items: center;
gap: 0.65rem;
flex-wrap: wrap;
}

.crew-head-name {
font-size: 1.25rem;
font-weight: 800;
color: #ffffff;
line-height: 1.25;
overflow-wrap: break-word;
word-break: break-word;
}

.crew-callsign-tag {
font-size: 0.85rem;
font-weight: 700;
letter-spacing: 0.05em;
}

.crew-head-position {
font-size: 0.88rem;
color: var(--text-muted);
line-height: 1.5;
overflow-wrap: break-word;
word-break: break-word;
}

.crew-head-actions {
display: flex;
align-items: center;
gap: 0.75rem;
flex-wrap: wrap;
margin-top: 0.5rem;
}

.crew-head-deck-btn {
padding: 0.45rem 0.95rem;
font-size: 0.76rem;
border-radius: var(--border-radius-sm);
}


.crew-specialists-block {
margin-top: 1rem;
width: 100%;
}

.crew-specialists-subheading {
font-size: 0.76rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.06em;
margin-bottom: 0.85rem;
display: flex;
align-items: center;
gap: 0.4rem;
}

.crew-specialists-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr));
gap: 1.15rem;
width: 100%;
min-width: 0;
}

.crew-card-specialist {
padding: 1.15rem;
display: flex;
flex-direction: column;
justify-content: space-between;
gap: 0.85rem;
border-radius: var(--border-radius-md);
min-width: 0;
max-width: 100%;
}

.crew-card-top {
display: flex;
align-items: flex-start;
gap: 0.85rem;
min-width: 0;
}

.crew-avatar-sm {
width: 68px;
height: 68px;
border-radius: var(--border-radius-sm);
object-fit: cover;
border: 1.5px solid #38bdf8;
flex-shrink: 0;
}

.crew-card-meta {
display: flex;
flex-direction: column;
gap: 0.2rem;
min-width: 0;
flex: 1;
}

.crew-specialist-callsign-row {
display: flex;
align-items: center;
gap: 0.4rem;
flex-wrap: wrap;
}

.crew-specialist-callsign {
font-size: 0.82rem;
font-weight: 800;
letter-spacing: 0.04em;
}

.crew-specialist-name {
font-size: 0.95rem;
font-weight: 700;
color: #ffffff;
line-height: 1.3;
overflow-wrap: break-word;
word-break: break-word;
}

.crew-specialist-position {
font-size: 0.8rem;
color: var(--text-muted);
line-height: 1.45;
overflow-wrap: break-word;
word-break: break-word;
}


.crew-avatar-placeholder {
border-radius: var(--border-radius-sm);
background: rgba(15, 23, 42, 0.9);
border: 1.5px solid var(--deck-color, #38bdf8);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
flex-shrink: 0;
padding: 0.25rem;
box-sizing: border-box;
box-shadow: 0 0 10px rgba(56, 189, 248, 0.15);
user-select: none;
}
.crew-avatar-placeholder.crew-avatar-head {
width: 96px;
height: 96px;
}
.crew-avatar-placeholder.crew-avatar-sm {
width: 68px;
height: 68px;
}
.avatar-silhouette-svg {
width: 30px;
height: 30px;
fill: var(--deck-color, #38bdf8);
opacity: 0.65;
}
.crew-avatar-placeholder.crew-avatar-head .avatar-silhouette-svg {
width: 44px;
height: 44px;
}
.avatar-pending-callsign {
font-size: 0.62rem;
font-weight: 700;
color: var(--deck-color, #38bdf8);
margin-top: 0.15rem;
line-height: 1.1;
word-break: break-all;
text-align: center;
}


.crew-former-name {
font-size: 0.72rem;
color: #f59e0b;
display: block;
margin-top: 0.2rem;
opacity: 0.95;
overflow-wrap: break-word;
word-break: break-word;
}


.crew-observer-inactive-badge {
display: inline-flex;
align-items: center;
gap: 0.35rem;
padding: 0.18rem 0.55rem;
border-radius: 9999px;
font-family: var(--font-mono);
font-size: 0.68rem;
font-weight: 700;
color: #fda4af;
background: rgba(244, 63, 94, 0.15);
border: 1px solid rgba(244, 63, 94, 0.4);
margin-top: 0.25rem;
width: fit-content;
text-transform: uppercase;
}


.crew-mandate-toggle {
margin-top: 0.65rem;
border-top: 1px solid rgba(56, 189, 248, 0.15);
padding-top: 0.45rem;
}
.crew-mandate-btn {
list-style: none;
cursor: pointer;
font-family: var(--font-mono);
font-size: 0.72rem;
font-weight: 700;
color: #38bdf8;
display: inline-flex;
align-items: center;
gap: 0.35rem;
padding: 0.22rem 0.55rem;
border-radius: 4px;
background: rgba(56, 189, 248, 0.08);
border: 1px solid rgba(56, 189, 248, 0.2);
transition: all var(--transition-fast);
}
.crew-mandate-btn::-webkit-details-marker {
display: none;
}
.crew-mandate-btn:hover {
background: rgba(56, 189, 248, 0.18);
border-color: #38bdf8;
color: #ffffff;
}
.crew-mandate-body {
margin-top: 0.45rem;
font-size: 0.78rem;
color: var(--text-muted);
line-height: 1.55;
background: rgba(2, 6, 23, 0.65);
padding: 0.65rem;
border-radius: var(--border-radius-sm);
border: 1px solid rgba(56, 189, 248, 0.12);
overflow-wrap: break-word;
word-break: break-word;
}


.crew-hierarchy-section {
margin: 4rem 0 3.5rem;
width: 100%;
max-width: 100%;
}

.hierarchy-graph-wrap {
width: 100%;
max-width: 100%;
background: var(--bg-panel);
border: 1px solid var(--border-cyan);
border-radius: var(--border-radius-md);
padding: 1.5rem;
box-sizing: border-box;
overflow: hidden;
}

.hierarchy-hint-mobile {
display: none;
font-size: 0.72rem;
color: #38bdf8;
margin-bottom: 0.75rem;
text-align: center;
}

.hierarchy-legend {
display: flex;
align-items: center;
justify-content: center;
gap: 1.25rem;
flex-wrap: wrap;
margin-bottom: 1.5rem;
font-size: 0.74rem;
color: var(--text-muted);
}
.legend-item {
display: flex;
align-items: center;
gap: 0.45rem;
white-space: nowrap;
}
.legend-line {
display: inline-block;
width: 22px;
height: 3px;
border-radius: 2px;
}
.legend-line.solid-gold {
background: #fbbf24;
}
.legend-line.solid-cyan {
background: #38bdf8;
}
.legend-line.dashed-purple {
border-top: 2px dashed #c084fc;
height: 0;
}
.legend-line.dashed-teal {
border-top: 2px dashed #2dd4bf;
height: 0;
}

.hierarchy-svg-container {
width: 100%;
max-width: 100%;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
border-radius: var(--border-radius-sm);
background: rgba(2, 6, 23, 0.7);
border: 1px solid rgba(56, 189, 248, 0.15);
padding: 1rem 0.5rem;
box-sizing: border-box;
}

.hierarchy-svg {
display: block;
width: 100%;
min-width: 780px;
height: auto;
margin: 0 auto;
}


.hierarchy-tree-mobile {
display: none;
flex-direction: column;
gap: 0.85rem;
margin-top: 1rem;
width: 100%;
box-sizing: border-box;
}

.tree-node {
display: flex;
align-items: center;
gap: 0.75rem;
padding: 0.75rem 1rem;
border-radius: var(--border-radius-sm);
background: rgba(15, 23, 42, 0.85);
border: 1px solid var(--border-cyan);
font-family: var(--font-mono);
box-sizing: border-box;
}

.tree-node-admiral {
border-color: #fbbf24;
background: rgba(251, 191, 36, 0.1);
}
.tree-node-commander {
border-color: #fbbf24;
margin-inline-start: 1rem;
}
.tree-node-special {
border-color: #2dd4bf;
margin-inline-start: 1.5rem;
background: rgba(45, 212, 191, 0.08);
}

.tree-badge {
font-size: 1.2rem;
flex-shrink: 0;
}

.tree-info {
display: flex;
flex-direction: column;
min-width: 0;
gap: 0.15rem;
}
.tree-callsign {
font-size: 0.82rem;
font-weight: 800;
color: #ffffff;
}
.tree-desc {
font-size: 0.72rem;
color: var(--text-muted);
}

.tree-deck-group {
margin-inline-start: 1.5rem;
border-inline-start: 2px solid var(--border-cyan);
padding-inline-start: 0.75rem;
display: flex;
flex-direction: column;
gap: 0.5rem;
}
.tree-deck-engineering {
border-inline-start-color: #38bdf8;
}
.tree-deck-science {
border-inline-start-color: #2dd4bf;
}
.tree-deck-tactical {
border-inline-start-color: #fb923c;
}
.tree-deck-inspection {
border-inline-start-color: #c084fc;
}

.tree-children {
display: flex;
flex-direction: column;
gap: 0.4rem;
padding-inline-start: 0.65rem;
}

.tree-leaf {
font-family: var(--font-mono);
font-size: 0.74rem;
color: var(--text-muted);
display: flex;
align-items: center;
gap: 0.4rem;
overflow-wrap: break-word;
word-break: break-word;
}

.tree-leaf-inspector {
color: #c084fc;
font-weight: 700;
}


.fleet-logic-section {
margin: 4rem 0 3rem;
width: 100%;
max-width: 100%;
}

.directive-steps-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
gap: 1.15rem;
width: 100%;
}

.directive-step-card {
background: var(--bg-panel);
border: 1px solid var(--border-cyan);
border-radius: var(--border-radius-md);
padding: 1.25rem;
display: flex;
flex-direction: column;
gap: 0.65rem;
transition: all var(--transition-normal);
position: relative;
box-sizing: border-box;
}
.directive-step-card:hover {
border-color: #38bdf8;
transform: translateY(-2px);
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5), 0 0 15px rgba(56, 189, 248, 0.2);
}

.directive-step-header {
display: flex;
align-items: center;
justify-content: space-between;
}

.directive-step-badge {
width: 28px;
height: 28px;
border-radius: 50%;
background: rgba(56, 189, 248, 0.15);
border: 1px solid #38bdf8;
color: #38bdf8;
display: flex;
align-items: center;
justify-content: center;
font-size: 0.8rem;
font-weight: 800;
flex-shrink: 0;
}

.directive-step-icons {
display: flex;
align-items: center;
gap: 0.45rem;
}
.directive-svg-icon {
width: 28px;
height: 28px;
display: block;
}
.directive-step-emoji {
font-size: 1.1rem;
}

.directive-step-title {
font-size: 0.98rem;
font-weight: 800;
color: #ffffff;
overflow-wrap: break-word;
word-break: break-word;
}

.directive-step-desc {
font-size: 0.82rem;
color: var(--text-muted);
line-height: 1.5;
overflow-wrap: break-word;
word-break: break-word;
}


.report-formula-bar {
margin-top: 2.5rem;
background: rgba(2, 6, 23, 0.92);
border: 1px solid rgba(251, 191, 36, 0.4);
border-radius: var(--border-radius-md);
padding: 2rem;
box-shadow: 0 12px 35px rgba(0, 0, 0, 0.6);
box-sizing: border-box;
width: 100%;
}

.report-formula-header {
text-align: center;
margin-bottom: 1.5rem;
}

.report-formula-title {
font-size: 1.25rem;
font-weight: 800;
color: #ffffff;
margin-bottom: 0.35rem;
overflow-wrap: break-word;
word-break: break-word;
}

.report-formula-rule {
font-size: 0.82rem;
color: #fbbf24;
letter-spacing: 0.04em;
overflow-wrap: break-word;
word-break: break-word;
}

.report-formula-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr));
gap: 1rem;
width: 100%;
}

.report-formula-item {
background: rgba(15, 23, 42, 0.75);
border: 1px solid rgba(251, 191, 36, 0.25);
border-radius: var(--border-radius-sm);
padding: 1rem;
text-align: center;
box-sizing: border-box;
}

.formula-badge-icon {
font-size: 1.5rem;
margin-bottom: 0.35rem;
}

.formula-item-title {
font-size: 0.95rem;
font-weight: 800;
color: #fbbf24;
margin-bottom: 0.25rem;
}

.formula-item-desc {
font-size: 0.78rem;
color: var(--text-muted);
line-height: 1.4;
overflow-wrap: break-word;
word-break: break-word;
}


@media (max-width: 768px) {
.crew-card-head-grid {
grid-template-columns: 1fr;
gap: 1rem;
text-align: center;
}
.crew-head-avatar-col {
margin: 0 auto;
}
.crew-head-actions {
justify-content: center;
}
.crew-card-header-line {
justify-content: center;
}
.crew-head-name-row {
justify-content: center;
}
.hierarchy-hint-mobile {
display: block;
}
.hierarchy-tree-mobile {
display: flex;
}
}

@media (max-width: 480px) {
.crew-filter-btn {
flex: 1 1 calc(50% - 0.5rem);
padding: 0.45rem 0.6rem;
font-size: 0.74rem;
text-align: center;
}
.crew-specialists-grid {
grid-template-columns: 1fr !important;
}
.tree-node {
padding: 0.6rem 0.75rem;
font-size: 0.75rem;
}
.tree-deck-group {
margin-inline-start: 0.75rem;
padding-inline-start: 0.5rem;
}
.tree-node-commander {
margin-inline-start: 0.5rem;
}
.tree-node-special {
margin-inline-start: 0.75rem;
}
}


.verifier-box {
background: var(--bg-panel);
border: 1px solid var(--border-cyan);
border-radius: var(--border-radius-md);
padding: 2rem;
margin-bottom: 3rem;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
max-width: 100%;
box-sizing: border-box;
min-width: 0;
}

.verifier-header {
display: flex;
align-items: center;
gap: 0.75rem;
margin-bottom: 1rem;
min-width: 0;
}

.verifier-title {
font-size: 1.2rem;
font-weight: 800;
overflow-wrap: break-word;
word-break: break-word;
}


.verifier-demo-selector {
display: flex;
flex-direction: column;
gap: 0.65rem;
margin-bottom: 1.25rem;
min-width: 0;
}

.verifier-demo-item {
display: flex;
align-items: center;
justify-content: space-between;
background: rgba(2, 6, 23, 0.75);
border: 1px solid rgba(56, 189, 248, 0.2);
border-radius: var(--border-radius-sm);
padding: 0.65rem 0.85rem;
gap: 0.75rem;
flex-wrap: wrap;
min-width: 0;
}

.verifier-demo-info {
display: flex;
align-items: center;
gap: 0.6rem;
flex-wrap: wrap;
min-width: 0;
flex: 1;
}

.verifier-demo-filename {
font-family: var(--font-mono);
font-size: 0.82rem;
font-weight: 700;
color: #38bdf8;
word-break: break-all;
}

.verifier-demo-btn {
padding: 0.45rem 0.85rem;
font-size: 0.74rem;
flex-shrink: 0;
}

.verifier-result {
padding: 0.85rem 1rem;
border-radius: var(--border-radius-sm);
font-family: var(--font-mono);
font-size: 0.78rem;
font-weight: 700;
display: none;
overflow-wrap: break-word;
word-break: break-word;
}
.verifier-result.valid {
display: block;
background: rgba(16, 185, 129, 0.15);
border: 1px solid rgba(16, 185, 129, 0.45);
color: #34d399;
}
.verifier-result.invalid {
display: block;
background: rgba(244, 63, 94, 0.15);
border: 1px solid rgba(244, 63, 94, 0.45);
color: #fb7185;
}


.artifact-card {
display: flex;
flex-direction: column;
gap: 0.75rem;
min-width: 0;
}

.artifact-name {
font-family: var(--font-mono);
font-size: 0.95rem;
font-weight: 700;
color: #38bdf8;
word-break: break-all;
overflow-wrap: break-word;
}

.artifact-hash-box {
background: rgba(2, 6, 23, 0.7);
border: 1px solid rgba(56, 189, 248, 0.2);
border-radius: var(--border-radius-sm);
padding: 0.5rem 0.75rem;
font-family: var(--font-mono);
font-size: 0.72rem;
color: #fbbf24;
word-break: break-all;
overflow-wrap: break-word;
}


.metrics-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 1rem;
margin-bottom: 2.5rem;
width: 100%;
min-width: 0;
}

.metric-card {
background: var(--bg-panel);
border: 1px solid var(--border-cyan);
border-radius: var(--border-radius-md);
padding: 1.25rem;
text-align: center;
max-width: 100%;
box-sizing: border-box;
min-width: 0;
}

.metric-value {
font-size: clamp(1.4rem, 3.5vw, 1.8rem);
font-weight: 800;
font-family: var(--font-mono);
color: #34d399;
margin-bottom: 0.35rem;
overflow-wrap: break-word;
word-break: break-word;
}

.metric-label {
font-size: 0.78rem;
color: var(--text-muted);
overflow-wrap: break-word;
word-break: break-word;
}


.contact-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(100%, 290px), 1fr));
gap: 2rem;
margin-bottom: 3rem;
width: 100%;
min-width: 0;
}

.channel-card {
background: var(--bg-panel);
border: 1px solid var(--border-cyan);
border-radius: var(--border-radius-md);
padding: 2rem;
text-align: center;
display: flex;
flex-direction: column;
align-items: center;
gap: 1rem;
max-width: 100%;
box-sizing: border-box;
min-width: 0;
}

.channel-icon {
width: 54px;
height: 54px;
border-radius: 50%;
background: rgba(16, 185, 129, 0.15);
border: 1px solid rgba(16, 185, 129, 0.4);
display: flex;
align-items: center;
justify-content: center;
color: #34d399;
flex-shrink: 0;
}


.protocol-box {
background: rgba(2, 6, 23, 0.7);
border: 1px solid rgba(56, 189, 248, 0.25);
border-radius: var(--border-radius-md);
padding: 1.75rem;
margin-top: 2rem;
max-width: 100%;
box-sizing: border-box;
min-width: 0;
}
.protocol-title {
font-size: 1.1rem;
font-weight: 800;
margin-bottom: 1rem;
color: #ffffff;
overflow-wrap: break-word;
word-break: break-word;
}
.protocol-list {
list-style: none;
display: flex;
flex-direction: column;
gap: 0.75rem;
min-width: 0;
}
.protocol-list li {
font-size: 0.88rem;
color: var(--text-main);
padding-inline-start: 1.5rem;
position: relative;
overflow-wrap: break-word;
word-break: break-word;
}
.protocol-list li::before {
content: '🛡️';
position: absolute;
inset-inline-start: 0;
font-size: 0.85rem;
}


.sim-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
gap: 1.25rem;
margin-bottom: 2.5rem;
width: 100%;
min-width: 0;
}

.sim-card {
background: var(--bg-panel);
border: 1px dashed rgba(251, 191, 36, 0.35);
border-radius: var(--border-radius-md);
padding: 1.5rem;
position: relative;
max-width: 100%;
box-sizing: border-box;
min-width: 0;
}

.sim-lock-badge {
position: absolute;
top: 1rem;
inset-inline-end: 1rem;
font-size: 0.7rem;
font-family: var(--font-mono);
color: #fbbf24;
}


.modal-backdrop {
position: fixed;
inset: 0;
background: rgba(1, 4, 15, 0.85);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
z-index: 200;
display: flex;
align-items: center;
justify-content: center;
padding: 1.25rem;
opacity: 0;
pointer-events: none;
transition: opacity var(--transition-fast);
}
.modal-backdrop.open {
opacity: 1;
pointer-events: auto;
}

.modal-window {
background: var(--bg-panel);
border: 1px solid var(--border-cyan);
border-radius: var(--border-radius-lg);
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.8), 0 0 30px rgba(56, 189, 248, 0.2);
width: 100%;
max-width: min(640px, calc(100vw - 1.5rem));
max-height: 85vh;
overflow-y: auto;
padding: 1.75rem;
position: relative;
box-sizing: border-box;
}

.modal-header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 1.25rem;
padding-bottom: 0.85rem;
border-bottom: 1px solid rgba(56, 189, 248, 0.2);
min-width: 0;
}

.modal-title {
font-size: 1.15rem;
font-weight: 800;
color: #ffffff;
overflow-wrap: break-word;
word-break: break-word;
}

.btn-close {
width: 32px;
height: 32px;
border-radius: 6px;
display: flex;
align-items: center;
justify-content: center;
color: var(--text-muted);
border: 1px solid rgba(255, 255, 255, 0.1);
transition: all var(--transition-fast);
flex-shrink: 0;
}
.btn-close:hover {
color: #ffffff;
border-color: #38bdf8;
background: rgba(56, 189, 248, 0.1);
}


.intercom-drawer {
position: fixed;
bottom: 1rem;
inset-inline-start: 1rem;
width: 380px;
max-width: calc(100% - 2rem);
background: rgba(2, 6, 23, 0.95);
border: 1px solid var(--border-cyan);
border-radius: var(--border-radius-md);
box-shadow: 0 15px 45px rgba(0, 0, 0, 0.7);
z-index: 150;
display: flex;
flex-direction: column;
overflow: hidden;
backdrop-filter: blur(16px);
-webkit-backdrop-filter: blur(16px);
box-sizing: border-box;
}
.intercom-drawer.collapsed {
display: none;
}

.intercom-log {
height: 200px;
overflow-y: auto;
padding: 0.85rem;
font-family: var(--font-mono);
font-size: 0.74rem;
display: flex;
flex-direction: column;
gap: 0.55rem;
border-bottom: 1px solid rgba(56, 189, 248, 0.15);
min-width: 0;
}


.intercom-commands-panel {
display: flex;
flex-direction: column;
padding: 0.65rem 0.85rem;
background: rgba(15, 23, 42, 0.85);
border-top: 1px solid rgba(56, 189, 248, 0.15);
gap: 0.5rem;
min-width: 0;
}

.intercom-commands-label {
display: flex;
align-items: center;
gap: 0.45rem;
font-family: var(--font-mono);
font-size: 0.65rem;
font-weight: 700;
color: var(--text-dim);
text-transform: uppercase;
letter-spacing: 0.04em;
}

.intercom-commands-grid {
display: flex;
flex-direction: column;
gap: 0.4rem;
max-height: 180px;
overflow-y: auto;
min-width: 0;
}

.btn-command {
display: flex;
align-items: center;
gap: 0.55rem;
padding: 0.45rem 0.65rem;
border-radius: var(--border-radius-sm);
background: rgba(56, 189, 248, 0.08);
border: 1px solid rgba(56, 189, 248, 0.22);
color: #f8fafc;
font-family: var(--font-mono);
font-size: 0.74rem;
text-align: start;
cursor: pointer;
transition: all var(--transition-fast);
width: 100%;
box-sizing: border-box;
overflow-wrap: break-word;
word-break: break-word;
min-width: 0;
}

.btn-command:hover {
background: rgba(56, 189, 248, 0.2);
border-color: #38bdf8;
color: #ffffff;
transform: translateX(2px);
box-shadow: 0 0 10px rgba(56, 189, 248, 0.25);
}

[dir="rtl"] .btn-command:hover {
transform: translateX(-2px);
}

.cmd-icon {
flex-shrink: 0;
font-size: 0.8rem;
}

.cmd-text {
flex: 1;
min-width: 0;
line-height: 1.35;
}


.intercom-trigger {
position: fixed;
bottom: 1.25rem;
inset-inline-start: 1.25rem;
z-index: 120;
display: flex;
align-items: center;
gap: 0.6rem;
padding: 0.65rem 1.1rem;
border-radius: 9999px;
background: rgba(2, 6, 23, 0.9);
border: 1px solid #38bdf8;
box-shadow: 0 0 20px rgba(56, 189, 248, 0.35);
color: #38bdf8;
font-family: var(--font-mono);
font-size: 0.78rem;
font-weight: 700;
cursor: pointer;
transition: all var(--transition-fast);
max-width: calc(100% - 2.5rem);
box-sizing: border-box;
}
.intercom-trigger:hover {
transform: scale(1.05);
box-shadow: 0 0 28px rgba(56, 189, 248, 0.55);
}


.site-footer {
background: #01040f;
border-top: 1px solid rgba(56, 189, 248, 0.15);
padding: 3.5rem 1.25rem 2.5rem;
font-size: 0.84rem;
color: var(--text-muted);
width: 100%;
max-width: 100%;
box-sizing: border-box;
overflow: hidden;
}

.footer-container {
max-width: var(--max-content-width);
margin: 0 auto;
display: flex;
flex-direction: column;
gap: 2rem;
width: 100%;
box-sizing: border-box;
}

.footer-top {
display: flex;
justify-content: space-between;
align-items: flex-start;
flex-wrap: wrap;
gap: 2rem;
min-width: 0;
}

.footer-brand-block {
max-width: 380px;
min-width: 0;
}

.footer-nav-links {
display: flex;
gap: 1.5rem;
flex-wrap: wrap;
min-width: 0;
}
.footer-link {
color: var(--text-muted);
transition: color var(--transition-fast);
}
.footer-link:hover {
color: #38bdf8;
}

.footer-bottom {
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
gap: 1rem;
padding-top: 1.5rem;
border-top: 1px solid rgba(255, 255, 255, 0.06);
font-size: 0.74rem;
font-family: var(--font-mono);
color: var(--text-dim);
min-width: 0;
}


@media (max-width: 1024px) {
.deck-strip {
inset-inline-start: 0.75rem;
}
.holo-hud {
inset-inline-end: 0.75rem;
width: 320px;
}
}

@media (max-width: 860px) {
.header-nav {
display: none;
}
.mobile-nav-toggle {
display: flex;
}
.header-nav.mobile-open {
display: flex;
flex-direction: column;
position: absolute;
top: 100%;
inset-inline: 0;
background: rgba(2, 6, 23, 0.98);
border-bottom: 1px solid var(--border-cyan);
padding: 1rem;
gap: 0.5rem;
z-index: 110;
}
.holo-hud {
width: 290px;
padding: 1rem;
}
}

@media (max-width: 768px) {
.viewfinder-container {
height: auto;
min-height: auto;
display: flex;
flex-direction: column;
position: relative;
overflow-x: clip;
width: 100%;
max-width: 100%;
}

.hero-art {
position: relative;
inset: auto;
width: 100%;
height: 55vh;
min-height: 320px;
max-height: 520px;
flex-shrink: 0;
overflow: hidden;
}

#ship3d-canvas {
position: relative;
inset: auto;
width: 100% !important;
height: 55vh;
min-height: 320px;
max-height: 520px;
flex-shrink: 0;
}

.hero-img {
object-position: center top;
}

.desktop-hotspots {
display: none !important;
}

.mobile-hotspots {
display: block !important;
}

.hud-layer {
position: relative;
inset: auto;
padding: 0.75rem 0.5rem 1.75rem;
min-height: auto;
gap: 0.75rem;
width: 100%;
max-width: 100%;
box-sizing: border-box;
display: flex;
flex-direction: column;
pointer-events: auto;
}

.hud-top-bar {
display: flex;
justify-content: flex-end;
width: 100%;
gap: 0.4rem;
margin-bottom: 0.25rem;
}

.deck-strip {
position: relative;
top: auto;
inset-inline-start: auto;
transform: none;
flex-direction: row;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
width: 100%;
max-width: 100%;
margin: 0.25rem 0;
padding: 0.4rem;
box-sizing: border-box;
justify-content: flex-start;
}
.deck-strip-header {
display: none;
}
.deck-text-wrap {
display: none;
}
.deck-pill {
padding: 0.4rem 0.55rem;
flex-shrink: 0;
}
.deck-icon-wrap {
width: 32px;
height: 32px;
}
.holo-hud {
position: relative;
top: auto;
inset-inline-end: auto;
transform: none !important;
width: 100%;
max-width: 100%;
margin: 0.25rem 0;
padding: 1rem;
box-sizing: border-box;
max-height: none;
}
.holo-hud.hidden-hud {
display: none !important;
}
.hud-bottom-bar {
margin-top: auto;
width: 100%;
gap: 0.5rem;
}
.intercom-drawer {
inset-inline-start: 0.5rem;
width: calc(100% - 1rem);
max-width: calc(100% - 1rem);
bottom: 4rem;
}
}

@media (max-width: 640px) {
.hidden-mobile {
display: none !important;
}
.page-container {
padding: 1.75rem 0.85rem 4rem;
}
}

@media (max-width: 480px) {

.header-container {
padding: 0.4rem 0.5rem;
gap: 0.35rem;
}
.header-brand {
gap: 0.45rem;
min-width: 0;
flex-shrink: 1;
overflow: hidden;
}
.brand-icon {
width: 32px;
height: 32px;
font-size: 1rem;
}
.brand-title {
font-size: 0.78rem;
letter-spacing: 0.02em;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
min-width: 0;
}
.brand-tag {
display: none !important;
}
.brand-status {
display: none !important;
}
.header-actions {
gap: 0.25rem;
flex-shrink: 0;
}
.btn-tool {
padding: 0.35rem 0.45rem;
font-size: 0.75rem;
}
.btn-tool span.hidden-mobile {
display: none !important;
}
.lang-switch {
padding: 0.12rem;
gap: 0.1rem;
}
.lang-pill {
padding: 0.2rem 0.32rem;
font-size: 0.65rem;
}
.mobile-nav-toggle {
padding: 0.35rem;
flex-shrink: 0;
}


.telemetry-bar {
padding: 0.35rem 0.5rem;
font-size: 0.7rem;
}
.telemetry-stream {
gap: 0.35rem;
}
.telemetry-badge {
padding: 0.15rem 0.35rem;
font-size: 0.62rem;
}
.telemetry-cta {
padding-inline-start: 0.35rem;
font-size: 0.65rem;
}


.page-container {
padding: 1.25rem 0.65rem 3.5rem;
}
.page-title {
font-size: clamp(1.4rem, 5vw, 2rem);
}
.page-subtitle {
font-size: clamp(0.9rem, 3.2vw, 1.1rem);
}
.page-hero-actions {
flex-direction: column;
width: 100%;
gap: 0.65rem;
}
.page-hero-actions .btn {
width: 100%;
}


.hud-bottom-bar {
flex-direction: column;
width: 100%;
gap: 0.5rem;
}
.hud-bottom-bar .btn {
width: 100%;
}


.grid-cards,
.sim-grid,
.contact-grid {
grid-template-columns: 1fr !important;
gap: 1rem;
}
.metrics-grid {
grid-template-columns: 1fr !important;
gap: 0.75rem;
}
.card {
padding: 1.1rem 0.85rem;
}


.btn {
width: 100%;
min-width: 0 !important;
padding: 0.65rem 1rem;
font-size: 0.82rem;
}
.deck-action-btn {
flex: 1 1 100% !important;
width: 100% !important;
min-width: 0 !important;
}


.verifier-box {
padding: 1.25rem 0.85rem;
}
.verifier-demo-item {
flex-direction: column;
align-items: stretch;
gap: 0.5rem;
}
.verifier-demo-btn {
width: 100%;
}


.intercom-drawer {
inset-inline: 0.5rem;
width: auto;
max-width: calc(100% - 1rem);
bottom: 3.5rem;
}
.intercom-trigger {
inset-inline-start: 0.5rem;
bottom: 0.5rem;
padding: 0.5rem 0.85rem;
font-size: 0.74rem;
}


.footer-top, .footer-bottom {
flex-direction: column;
align-items: flex-start;
gap: 1.25rem;
}
}


@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
}
.pulse-dot {
animation: none;
}
.hero-art,
.hero-holo-fx::after,
.deck-hotspot,
.deck-hotspot.active,
.deck-scanline.active {
animation: none !important;
filter: none !important;
}
}


.design-icon { display:inline-block; width:1.2em; height:1.2em; vertical-align:middle; flex-shrink:0; }
.preview-note { margin:0; padding:.65rem 1rem; color:var(--text-muted); background:rgba(15,23,42,.92); font-size:.78rem; text-align:center; }
picture:has(.hud-avatar), .hud-illuminator picture { display:contents; }

.deck-card-bg img { width:100%; height:100%; object-fit:cover; }

@media (min-width: 769px) { .hud-top-bar { justify-content: flex-start; } }


.header-brand { flex-shrink: 0; max-width: 19rem; }
.brand-title { flex-wrap: wrap; white-space: normal; row-gap: 0; }
.brand-status { white-space: normal; line-height: 1.35; font-size: .75rem; }
.header-nav { flex: 1 1 auto; min-width: 0; flex-wrap: wrap; justify-content: center; }
.nav-link { white-space: nowrap; padding-inline: .65rem; }
.brand-tag, .footer-bottom { font-size: .78rem; }

html[lang="he"] :is(button, .badge, .font-mono, .brand-status, .deck-number,
.deck-code, .deck-artifact-name, .hud-report, .hud-deck-tag, .footer-bottom) {
letter-spacing: normal;
}

html[lang="he"] :is(code, pre, .mono-data, .artifact-hash-box, .artifact-filename) {
font-family: 'JetBrains Mono', ui-monospace, monospace;
direction: ltr;
unicode-bidi: isolate;
}
html[lang="he"] .font-mono:not(.mono-data):not(.artifact-filename) {
direction: inherit !important;
word-break: normal;
}

.viewfinder-container { height: calc(100svh - 180px); min-height: 680px; }
.hud-top-bar { flex-wrap: wrap; align-items: center; }
.hud-layer .intercom-trigger {
position: static;
inset: auto;
max-width: 100%;
border-radius: var(--border-radius-sm);
padding: .45rem .75rem;
box-shadow: none;
font-size: .78rem;
}
.hud-layer .intercom-trigger:hover { transform: none; }
.deck-strip { top: 5rem; transform: none; flex-direction: row; flex-wrap: wrap; max-width: calc(100% - 420px); }
.deck-strip-header { flex-basis: 100%; }
.holo-hud {
top: 5rem;
bottom: 5.5rem;
transform: none;
max-height: none;
height: fit-content;
max-height: calc(100% - 10.5rem);
}
.holo-hud.hidden-hud { transform: translateX(calc(120% * var(--dir-sign, 1))); }
.hud-bottom-bar { flex-wrap: wrap; align-items: stretch; }
.hud-bottom-bar .btn { max-width: calc(50% - .5rem); }
.home-intro {
position: absolute;
z-index: 16;
left: 1.25rem;
right: auto;
bottom: 5.5rem;
width: min(480px, calc(100% - 410px));
padding: 1.25rem;
border: 1px solid var(--border-cyan-glow);
border-radius: var(--border-radius-md);
background: rgba(2, 6, 23, .9);
backdrop-filter: blur(16px);
-webkit-backdrop-filter: blur(16px);
box-shadow: 0 12px 36px rgba(0, 0, 0, .3);
}
.home-intro h1 { font-size: clamp(1.45rem, 1.8vw, 1.7rem); line-height: 1.22; margin-bottom: .7rem; }
.home-intro p { color: #cbd5e1; font-size: .95rem; line-height: 1.5; }
.home-intro-actions { display: flex; gap: .6rem; flex-wrap: wrap; margin-top: 1rem; }
.home-intro-actions .btn { flex: 1 1 10rem; padding-inline: .8rem; font-size: .85rem; }
.page-hero-actions .btn-secondary { background: rgba(15, 23, 42, .85); box-shadow: none; border-color: #64748b; color: #e2e8f0; }

.deck-card-bridge { --compartment-accent: var(--deck-01-bridge); }
.deck-card-reactor, .deck-card-engineering { --compartment-accent: var(--deck-02-reactor); }
.deck-card-science { --compartment-accent: var(--deck-03-science); }
.deck-card-tactical { --compartment-accent: var(--deck-04-tactical); }
.deck-card-inspection { --compartment-accent: var(--deck-05-inspection); }
.deck-card { padding: 0; border-color: var(--compartment-accent, var(--border-cyan)); justify-content: flex-start; }
.deck-card-bg {
position: relative;
inset: auto;
display: block;
width: 100%;
aspect-ratio: 1200 / 669;
flex-shrink: 0;
overflow: hidden;
will-change: auto;
}
.deck-card-bg::after { background: linear-gradient(to top, rgba(15, 23, 42, .3), transparent 45%); }
.deck-card:hover .deck-card-bg { transform: none; }
.deck-card-content { height: auto; flex: 1; padding: 1.35rem; background: #0f172a; }
.deck-card-header { flex-wrap: wrap; gap: .55rem 1rem; align-items: flex-start; }
.deck-card-header .badge { flex-shrink: 0; white-space: nowrap; }
.deck-code { word-break: normal; overflow-wrap: normal; line-height: 1.5; }
.deck-code, .deck-officer { color: var(--compartment-accent, var(--accent-cyan)); background: none; -webkit-text-fill-color: currentColor; }
.deck-officer { font-size: .85rem; margin-bottom: .75rem; }
.deck-artifact-name { font-family: var(--font-sans); font-size: .88rem; line-height: 1.5; word-break: normal; overflow-wrap: normal; }
.deck-artifact-label { font-size: .75rem; }
.metric-value { font-family: var(--font-sans); font-size: 1.1rem; line-height: 1.5; word-break: normal; overflow-wrap: normal; }
.metric-label { font-size: .85rem; }
.artifact-filename { display: block; direction: ltr; unicode-bidi: isolate; word-break: normal; overflow-wrap: normal; font-size: clamp(.8rem, 2.7vw, .95rem); }
.artifact-filename > span { display: inline-block; white-space: nowrap; }
.dispatch-meta { flex-wrap: wrap; align-items: flex-start; gap: .6rem; }
.dispatch-meta > :last-child { flex-shrink: 0; white-space: nowrap; }
.preview-note { font-size: .85rem; color: #cbd5e1; }
.hud-report-label, .hud-officer-botid, .deck-label { font-size: .78rem; }


@media (max-width: 1280px) {
.site-header { overflow: visible; }
.header-nav { display: none; }
.mobile-nav-toggle { display: flex; }
.header-nav.mobile-open {
display: flex; flex-direction: column; position: absolute; top: 100%; inset-inline: 0;
background: rgba(2, 6, 23, .98); border-bottom: 1px solid var(--border-cyan);
padding: 1rem; gap: .5rem; z-index: 110;
max-height: calc(100dvh - 5rem); overflow-y: auto;
}
}

@media (width < 1100px) {
.viewfinder-container { height: auto; min-height: 0; display: flex; flex-direction: column; }
.hero-art, #ship3d-canvas { position: relative; inset: auto; width: 100%; height: 55vh; min-height: 300px; max-height: 560px; flex-shrink: 0; }
.home-intro { position: relative; inset: auto; width: auto; margin: .75rem .75rem 0; padding: 1.25rem; }
.home-intro h1 { font-size: clamp(1.5rem, 4vw, 2rem); }
.hud-layer { position: relative; inset: auto; padding: .75rem; gap: .75rem; pointer-events: auto; }
.hud-top-bar { justify-content: flex-start; gap: .5rem; }
.hud-top-bar .btn-tool { white-space: normal; text-align: start; }
.hud-top-bar .hidden-mobile { display: inline !important; }
.deck-strip { position: relative; inset: auto; transform: none; max-width: 100%; display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: .35rem; width: 100%; overflow: visible; padding: .5rem; }
.deck-strip-header { display: block; grid-column: 1 / -1; text-align: start; font-size: .78rem; }
.deck-text-wrap { display: flex; min-width: 0; }
.deck-pill { min-width: 0; padding: .5rem; gap: .45rem; }
.deck-label { overflow-wrap: normal; word-break: normal; }
.holo-hud { position: relative; inset: auto; transform: none; width: 100%; height: auto; max-height: none; padding: 1rem; }
.holo-hud.hidden-hud { display: none !important; }
.hud-bottom-bar { width: 100%; }
}
@media (max-width: 480px) {
.header-brand { flex-shrink: 1; max-width: calc(100% - 170px); }
.brand-title { white-space: normal; overflow-wrap: normal; }
.home-intro-actions { flex-direction: column; }
.home-intro-actions .btn { flex: auto; }
.hud-bottom-bar .btn { max-width: 100%; }
.deck-card { padding: 0; }
.deck-card-content { padding: 1.1rem; }
}


@media (min-width: 1100px) {
.deck-strip { inset-inline-start: auto; left: 1.25rem; right: auto; }
.holo-hud { inset-inline-end: auto; right: 1.25rem; left: auto; }
}


@media (min-width: 1100px) {
.viewfinder-container { min-height: 820px; }
.deck-strip {
width: 200px; max-width: 200px; flex-direction: column; flex-wrap: nowrap;
gap: .25rem; padding: .5rem; background: rgba(2, 6, 23, .62);
}
.deck-strip-header { display: none; }
.deck-pill { min-height: 44px; padding: .3rem; gap: .5rem; }
.deck-text-wrap { min-width: 0; }
.deck-label { font-size: .75rem; }
.home-intro { width: 420px; }

.hero-picture, .desktop-hotspots {
inset: -1rem auto auto 220px; width: calc(100% - 600px); height: auto;
aspect-ratio: 1376 / 768;
}
.hero-img { object-fit: contain; }
}
@media (min-width: 1281px) {
.header-container { max-width: 1440px; gap: .65rem; }
.header-nav { flex-wrap: nowrap; gap: .1rem; }
.header-nav .nav-link { padding-inline: .25rem; letter-spacing: normal; font-size: .78rem; }
.header-actions { gap: .4rem; }
.header-actions .btn-tool .hidden-mobile { display: none; }
}
.contact-phone { direction: ltr; unicode-bidi: isolate; white-space: nowrap; }
.contact-primary, .channel-card .btn:has(.contact-phone) { flex-wrap: wrap; }
.contact-primary { margin-bottom: 1.5rem; }
.demo-label { display: inline-block; color: #fbbf24; background: #1e293b; border: 1px solid #fbbf24; padding: .4rem .7rem; border-radius: .4rem; font-size: .85rem; line-height: 1.4; margin-bottom: .75rem; white-space: normal; }


.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; border:0; }
a:focus-visible, button:focus-visible, [tabindex]:focus-visible { outline:2px solid #fbbf24; outline-offset:3px; }
.skip-link { position:fixed; inset-block-start:.5rem; inset-inline-start:.5rem; z-index:10000; padding:1rem; background:#020617; color:#f8fafc; transform:translateY(-200%); }
.skip-link:focus { transform:none; }
.btn-close, .lang-pill, .btn-tool, .mobile-nav-toggle { min-width:44px; min-height:44px; }
.telemetry-open { display:flex; flex:1; align-items:center; justify-content:space-between; gap:1rem; min-width:0; min-height:44px; text-align:start; background:transparent; border:0; color:inherit; font:inherit; cursor:pointer; }
.ticker-pause { background:#020617; color:#f8fafc; border:1px solid #64748b; border-radius:.3rem; min-height:44px; padding:.3rem .6rem; font:inherit; flex-shrink:0; }
.telemetry-bar { height:auto; min-height:44px; gap:.5rem; }
.telemetry-bar:hover *, .telemetry-bar:focus-within *, .telemetry-bar.is-paused * { animation-play-state:paused !important; }
@media (max-width:768px) { .ticker-pause { max-width:8rem; font-size:.7rem; } }
@media (min-width:1100px) {
.hero-picture, .desktop-hotspots { left:auto; right:auto; inset-inline-start:220px; }
.home-intro { left:auto; right:auto; inset-inline-start:1.25rem; }
.holo-hud { left:auto; right:auto; inset-inline-end:1.25rem; }
.deck-strip { left:auto; right:auto; inset-inline-start:1.25rem; }
.intercom-drawer { inset-inline-start:calc(1rem + 420px + 1rem); width:min(380px, calc(100vw - 852px)); }
}


.deck-card-inspection .deck-card-content { --text-main: #e9d5ff; --text-muted: #e9d5ff; --text-dim: #e9d5ff; }
.deck-card-inspection :is(.deck-service-name, .deck-code, .deck-officer, .deck-artifact-label, .badge) { color: #c084fc; }
.deck-card-inspection :is(.deck-service-desc, .deck-artifact-name, .bullets-list li, .btn-secondary) { color: #e9d5ff; }
.deck-discuss-link { display: inline-flex; align-items: center; gap: .5rem; min-height: 44px; color: var(--compartment-accent); text-decoration: underline; text-underline-offset: .2em; }
.deck-discuss-link:hover { color: #f8fafc; }
.services-final-action { display: flex; justify-content: center; margin-block-start: 2rem; }
.contact-primary { width: 100%; max-width: 560px; margin-inline: auto; }
.contact-primary > span, .contact-phone { white-space: nowrap; }
.contact-copy { margin-block-start: .75rem; }
.evidence-meta { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .5rem; font: .74rem var(--font-mono); color: var(--text-dim); margin-block-end: .75rem; }
.evidence-meta-date { white-space: nowrap; flex-shrink: 0; }
.telemetry-time { white-space: nowrap; flex-shrink: 0; }

@media (min-width: 1100px) {
#compartments { grid-template-columns: repeat(6, minmax(0, 1fr)); }
#compartments > .deck-card { grid-column: span 2; }
#compartments > .deck-card:nth-child(-n + 2) { grid-column: span 3; }

.viewfinder-container { height: calc(100svh - 180px); min-height: 0; }
.holo-hud { position: absolute; top: auto; bottom: auto; inset-block-start: 4rem; height: auto; max-height: calc(100% - 5rem); overflow-y: auto; padding: 12px; overscroll-behavior: contain; }
.holo-hud .hud-illuminator { height: 100px; }
.holo-hud .hud-officer-header { gap: .65rem; margin-block-end: .5rem; padding-block-end: .5rem; }
.holo-hud .hud-service-desc { font-size: 12px; line-height: 1.35; margin-block-end: .5rem; }
.holo-hud .hud-report { padding: 10px 12px; gap: .25rem; margin-block-end: .5rem; font-size: 12px; line-height: 1.35; }
.holo-hud .hud-report-label, .holo-hud .hud-report-value { font-size: 12px; line-height: 1.35; }
.holo-hud .btn { padding: .65rem .5rem; font-size: 12px; }
}
@media (max-width: 480px) {
.btn, .btn-tool, .hud-layer .intercom-trigger { letter-spacing: .06em; font-size: 13px; font-weight: 600; padding: 12px 16px; }

.btn {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
line-clamp: 2;
overflow: hidden;
white-space: normal;
word-break: normal;
overflow-wrap: normal;
text-wrap: balance;
line-height: 1.4;
min-height: 44px;
max-width: 100%;
}
.btn-primary, .btn-whatsapp, .page-hero-actions .btn, .home-intro-actions .btn { white-space: normal; font-family: var(--font-sans); }
.btn > span, .btn-primary > span, .btn-whatsapp > span { white-space: normal; }
.contact-primary .contact-phone { display: inline-block; margin-inline-start: .6rem; }
.contact-primary { flex-wrap: wrap; gap: .3rem .6rem; }
.metrics-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem; }
.metrics-grid .metric-card { min-height: 70px; padding: .5rem; }
.metrics-grid .metric-label { font-size: .75rem; }
.deck-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.deck-strip .deck-pill:last-child { grid-column: span 2; }
}


.art-layer { position: absolute; inset: 0; }
.schematic-layer { position: absolute; inset: 0; width: 100%; height: 100%; direction: inherit; }
.schematic-layer[hidden], .art-layer[hidden] { display: none; }
.ship-schematic { display: block; width: 100%; height: 100%; direction: ltr; unicode-bidi: isolate; transform: none; }
.ship-schematic text { direction: ltr; unicode-bidi: isolate; }
.mode-schema .hero-art { animation: none; }
.schema-scan-beam { display: none; pointer-events: none; position: absolute; inset-block: 0; left: 0; width: 1px; z-index: 4; background: #7dd3fc; box-shadow: 0 0 9px #38bdf8; }
@media (prefers-reduced-motion: no-preference) {
.mode-schema .schema-scan-beam { display: block; animation: schematicSweep 4s linear infinite; }
}
@keyframes schematicSweep { from { left: 0; opacity: 0; } 10%, 90% { opacity: .7; } to { left: 100%; opacity: 0; } }
@media (min-width: 1100px) {
.schematic-layer { inset: -1rem auto auto; inset-inline-start: 220px; width: calc(100% - 600px); height: auto; aspect-ratio: 1376 / 768; }
}
@media (prefers-reduced-motion: reduce) {
.ship-schematic *, .art-layer, .schematic-layer { animation: none !important; transition: none !important; }
.schema-scan-beam { display: none !important; }
}