@charset "UTF-8";

:root {
  --void: #05080d;
  --void-soft: #080d14;
  --panel: rgba(13, 20, 29, .86);
  --panel-solid: #0d141d;
  --panel-light: #121c27;
  --line: rgba(151, 178, 196, .16);
  --line-bright: rgba(105, 249, 211, .3);
  --ink: #f4f8f8;
  --muted: #8998a5;
  --muted-light: #b8c4cc;
  --cyan: #69f9d3;
  --cyan-strong: #21e6bd;
  --cyan-dark: #0f947a;
  --orange: #ff6b35;
  --orange-light: #ff9b72;
  --green: #6cff8f;
  --danger: #ff6a67;
  --shadow: 0 30px 90px rgba(0, 0, 0, .45);
  --glow: 0 0 34px rgba(105, 249, 211, .14);
  font-family: Inter, "Segoe UI", ui-sans-serif, -apple-system, BlinkMacSystemFont, sans-serif;
  color: var(--ink);
  background: var(--void);
  font-synthesis: none;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--void); }
body { min-width: 320px; margin: 0; overflow-x: hidden; background: var(--void); color: var(--ink); }
body::before {
  content: "";
  position: fixed;
  z-index: -4;
  inset: 0;
  background:
    radial-gradient(circle at 76% 8%, rgba(39, 228, 190, .09), transparent 30%),
    radial-gradient(circle at 10% 50%, rgba(255, 107, 53, .055), transparent 24%),
    linear-gradient(180deg, #070b11 0%, #05080d 45%, #070b11 100%);
}
button, input, select, textarea { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
button { color: inherit; }
::selection { color: #04100d; background: var(--cyan); }

.ambient-grid {
  position: fixed;
  z-index: -3;
  inset: 0;
  opacity: .42;
  background-image:
    linear-gradient(rgba(117, 148, 164, .055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(117, 148, 164, .055) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: linear-gradient(to bottom, black 0%, transparent 92%);
  pointer-events: none;
}
.ambient-glow { position: fixed; z-index: -2; width: 420px; height: 420px; border-radius: 50%; filter: blur(110px); opacity: .09; pointer-events: none; }
.glow-one { top: 8%; right: -180px; background: var(--cyan); }
.glow-two { top: 72%; left: -220px; background: var(--orange); }

.topbar {
  position: relative;
  z-index: 1000;
  height: 84px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 24px;
  padding: 0 clamp(20px, 4vw, 72px);
  border-bottom: 1px solid var(--line);
  background: rgba(5, 8, 13, .8);
  backdrop-filter: blur(22px);
}
.topbar::after { content: ""; position: absolute; bottom: -1px; left: clamp(20px, 4vw, 72px); width: 92px; height: 1px; background: var(--cyan); box-shadow: 0 0 16px var(--cyan); }
.brand { display: inline-flex; width: max-content; align-items: center; gap: 15px; color: var(--ink); text-decoration: none; }
.brand-type { display: flex; flex-direction: column; gap: 2px; }
.brand strong { font-size: 17px; font-weight: 850; letter-spacing: .18em; }
.brand small { color: var(--cyan); font-family: "SFMono-Regular", Consolas, monospace; font-size: 8px; font-weight: 800; letter-spacing: .22em; }
.brand-mark { position: relative; width: 40px; height: 40px; transform: rotate(45deg); }
.brand-mark::before, .brand-mark::after { content: ""; position: absolute; top: 19px; left: 1px; width: 38px; height: 2px; background: linear-gradient(90deg, var(--cyan), var(--orange)); box-shadow: 0 0 9px rgba(105, 249, 211, .5); }
.brand-mark::after { transform: rotate(90deg); }
.brand-mark i { position: absolute; z-index: 2; width: 9px; height: 9px; border: 2px solid var(--cyan); border-radius: 50%; background: var(--void); box-shadow: 0 0 9px rgba(105, 249, 211, .35); }
.brand-mark i:first-child { top: 1px; left: 1px; }
.brand-mark i:nth-child(2) { right: 1px; bottom: 1px; border-color: var(--orange); }
.brand-mark b { position: absolute; z-index: 3; top: 14px; left: 14px; width: 12px; height: 12px; border: 2px solid #fff; border-radius: 3px; background: var(--void); }
.topbar-center { display: flex; align-items: center; gap: 10px; color: #657582; font-family: "SFMono-Regular", Consolas, monospace; font-size: 8px; letter-spacing: .14em; }
.topbar-center i { width: 3px; height: 3px; border-radius: 50%; background: #43505a; }
.system-state { justify-self: end; display: flex; align-items: center; gap: 9px; color: var(--muted-light); font-family: "SFMono-Regular", Consolas, monospace; font-size: 9px; font-weight: 750; letter-spacing: .11em; }
.system-state small { margin-left: 4px; padding: 5px 8px; border: 1px solid rgba(108, 255, 143, .25); border-radius: 999px; color: var(--green); background: rgba(108, 255, 143, .07); font-size: 7px; }
.pulse { position: relative; width: 7px; height: 7px; border-radius: 50%; background: var(--green); box-shadow: 0 0 12px rgba(108, 255, 143, .8); }
.pulse::after { content: ""; position: absolute; inset: -5px; border: 1px solid rgba(108, 255, 143, .35); border-radius: 50%; animation: pulse-ring 2s ease-out infinite; }

main { width: min(1500px, calc(100% - clamp(28px, 7vw, 116px))); margin: 0 auto; }
.intro { position: relative; display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(360px, .68fr); align-items: center; gap: clamp(42px, 7vw, 120px); min-height: 670px; padding: clamp(62px, 8vw, 112px) 0 76px; }
.intro::before { content: "DRONKARE / DIGITAL TERRAIN SYSTEM"; position: absolute; right: -55px; top: 50%; color: rgba(143, 166, 179, .2); font-family: "SFMono-Regular", Consolas, monospace; font-size: 7px; letter-spacing: .28em; transform: rotate(90deg); }
.intro-content { position: relative; z-index: 2; }
.eyebrow { margin: 0 0 21px; color: var(--cyan); font-family: "SFMono-Regular", Consolas, monospace; font-size: 9px; font-weight: 800; letter-spacing: .18em; line-height: 1.7; }
.eyebrow > span { display: inline-block; margin-right: 13px; padding: 5px 8px; border: 1px solid rgba(105, 249, 211, .28); color: var(--cyan); background: rgba(105, 249, 211, .055); }
h1 { max-width: 840px; margin: 0; font-size: clamp(51px, 6.4vw, 101px); font-weight: 690; line-height: .91; letter-spacing: -.067em; }
h1 em { position: relative; color: transparent; background: linear-gradient(90deg, var(--cyan) 5%, #d8fff4 55%, var(--orange) 115%); background-clip: text; -webkit-background-clip: text; font-style: normal; }
h1 em::after { content: ""; position: absolute; right: -22px; bottom: 4px; width: 8px; height: 8px; border: 2px solid var(--orange); }
.intro-copy { max-width: 680px; margin: 35px 0 0; color: var(--muted-light); font-size: clamp(15px, 1.35vw, 19px); line-height: 1.72; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 11px; margin-top: 35px; }
.hero-actions span { display: inline-flex; align-items: center; gap: 9px; padding: 10px 13px; border: 1px solid var(--line); color: #91a0aa; background: rgba(10, 15, 22, .62); font-family: "SFMono-Regular", Consolas, monospace; font-size: 8px; letter-spacing: .09em; }
.hero-actions b { color: var(--orange); font-size: 8px; }

.hero-visual { position: relative; display: grid; place-items: center; min-height: 470px; }
.radar-card { position: relative; width: min(100%, 485px); aspect-ratio: 1 / 1.02; display: flex; flex-direction: column; justify-content: space-between; padding: 23px; border: 1px solid rgba(129, 161, 178, .19); background: linear-gradient(145deg, rgba(14, 22, 31, .88), rgba(7, 11, 17, .48)); box-shadow: var(--shadow), inset 0 0 70px rgba(105, 249, 211, .025); backdrop-filter: blur(14px); }
.radar-card::before { content: ""; position: absolute; inset: 8px; border: 1px solid rgba(126, 151, 165, .07); pointer-events: none; }
.corner { position: absolute; width: 15px; height: 15px; border-color: var(--cyan); opacity: .7; }
.corner-tl { top: -1px; left: -1px; border-top: 2px solid; border-left: 2px solid; }
.corner-tr { top: -1px; right: -1px; border-top: 2px solid; border-right: 2px solid; }
.corner-bl { bottom: -1px; left: -1px; border-bottom: 2px solid; border-left: 2px solid; }
.corner-br { right: -1px; bottom: -1px; border-right: 2px solid; border-bottom: 2px solid; }
.radar-label { z-index: 3; display: flex; align-items: center; justify-content: space-between; color: #687987; font-family: "SFMono-Regular", Consolas, monospace; font-size: 8px; letter-spacing: .16em; }
.radar-label span::before { content: ""; display: inline-block; width: 5px; height: 5px; margin-right: 8px; border-radius: 50%; background: var(--green); box-shadow: 0 0 8px var(--green); }
.radar-label b { color: var(--orange); font-size: 8px; }
.radar { position: relative; width: 76%; aspect-ratio: 1; margin: auto; overflow: hidden; border: 1px solid rgba(105, 249, 211, .28); border-radius: 50%; background: radial-gradient(circle, rgba(105, 249, 211, .065) 0 1px, transparent 2px), repeating-radial-gradient(circle, transparent 0 34px, rgba(119, 160, 174, .07) 35px 36px); box-shadow: inset 0 0 45px rgba(105, 249, 211, .035), 0 0 45px rgba(105, 249, 211, .035); }
.orbit { position: absolute; border: 1px solid rgba(105, 249, 211, .13); border-radius: 50%; }
.orbit-a { inset: 16%; }
.orbit-b { inset: 31%; }
.orbit-c { top: 47%; left: 47%; width: 6%; height: 6%; background: var(--cyan); box-shadow: 0 0 18px var(--cyan); }
.crosshair { position: absolute; background: rgba(105, 249, 211, .13); }
.crosshair-x { top: 50%; left: 0; width: 100%; height: 1px; }
.crosshair-y { top: 0; left: 50%; width: 1px; height: 100%; }
.radar-sweep { position: absolute; inset: -1px; border-radius: 50%; background: conic-gradient(from 10deg, transparent 0 305deg, rgba(105, 249, 211, .02) 322deg, rgba(105, 249, 211, .22) 359deg); animation: radar-spin 5s linear infinite; }
.drone-symbol { position: absolute; z-index: 2; top: 50%; left: 50%; width: 64px; height: 64px; transform: translate(-50%, -50%) rotate(45deg); }
.drone-symbol::before, .drone-symbol::after { content: ""; position: absolute; top: 31px; left: 2px; width: 60px; height: 2px; background: var(--ink); box-shadow: 0 0 12px rgba(255,255,255,.35); }
.drone-symbol::after { transform: rotate(90deg); }
.drone-symbol i { position: absolute; z-index: 2; width: 14px; height: 14px; border: 2px solid var(--cyan); border-radius: 50%; background: var(--void); }
.drone-symbol i:first-child { top: 0; left: 0; }
.drone-symbol i:nth-child(2) { right: 0; bottom: 0; border-color: var(--orange); }
.drone-symbol b { position: absolute; z-index: 3; top: 25px; left: 25px; width: 14px; height: 14px; border-radius: 3px; background: var(--ink); }
.radar-metrics { z-index: 3; display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--line); }
.radar-metrics span { display: flex; flex-direction: column; gap: 4px; padding: 15px 12px 0; border-right: 1px solid var(--line); }
.radar-metrics span:last-child { border-right: 0; }
.radar-metrics small { color: #62727e; font-family: "SFMono-Regular", Consolas, monospace; font-size: 7px; letter-spacing: .16em; }
.radar-metrics b { color: var(--muted-light); font-size: 11px; letter-spacing: .08em; }
.radar-metrics span:last-child b { color: var(--green); }

.module-tabs { position: relative; z-index: 3; display: grid; grid-template-columns: 1fr 1fr; gap: 1px; padding: 1px; border: 1px solid var(--line); background: rgba(116, 146, 162, .08); box-shadow: 0 18px 50px rgba(0,0,0,.25); }
.module-tab { position: relative; appearance: none; min-height: 102px; display: grid; grid-template-columns: auto auto 1fr auto; align-items: center; gap: 19px; padding: 20px 25px; overflow: hidden; border: 0; background: rgba(11, 17, 24, .94); text-align: left; cursor: pointer; transition: background .25s, color .25s, transform .25s; }
.module-tab::before { content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 2px; background: linear-gradient(90deg, transparent, var(--cyan), transparent); opacity: 0; transform: scaleX(.25); transition: opacity .25s, transform .25s; }
.module-tab:hover { background: #101923; }
.module-tab.active { background: linear-gradient(115deg, rgba(18, 34, 40, .98), rgba(12, 18, 27, .98)); }
.module-tab.active::before { opacity: 1; transform: scaleX(1); }
.tab-index { color: #50606c; font-family: "SFMono-Regular", Consolas, monospace; font-size: 10px; font-weight: 800; }
.module-tab.active .tab-index { color: var(--cyan); }
.tab-icon { position: relative; width: 45px; height: 45px; display: grid; place-items: center; border: 1px solid var(--line); background: rgba(255,255,255,.015); }
.module-tab.active .tab-icon { border-color: rgba(105, 249, 211, .28); background: rgba(105, 249, 211, .05); box-shadow: var(--glow); }
.tab-icon-drone::before, .tab-icon-drone::after { content: ""; position: absolute; width: 24px; height: 1px; background: currentColor; }
.tab-icon-drone::after { transform: rotate(90deg); }
.tab-icon-drone i { position: absolute; width: 5px; height: 5px; border: 1px solid; border-radius: 50%; }
.tab-icon-drone i:first-child { top: 8px; left: 8px; }
.tab-icon-drone i:last-child { right: 8px; bottom: 8px; }
.tab-icon-tour::before { content: "360"; color: currentColor; font-family: "SFMono-Regular", Consolas, monospace; font-size: 8px; font-weight: 800; }
.tab-icon-tour i { position: absolute; inset: 7px; border: 1px solid; border-radius: 50%; transform: rotate(-22deg); }
.tab-copy { display: flex; flex-direction: column; gap: 7px; }
.tab-copy strong { font-size: 15px; letter-spacing: -.01em; }
.tab-copy small { color: #637480; font-family: "SFMono-Regular", Consolas, monospace; font-size: 7px; letter-spacing: .14em; }
.module-tab.active .tab-copy small { color: #8fa39f; }
.tab-arrow { color: #4b5b66; font-size: 20px; transition: color .2s, transform .2s; }
.module-tab:hover .tab-arrow, .module-tab.active .tab-arrow { color: var(--cyan); transform: translate(2px, -2px); }

.module-panel { position: relative; padding: clamp(32px, 4.7vw, 72px); overflow: hidden; border: 1px solid var(--line); border-top: 0; background: rgba(8, 13, 19, .92); box-shadow: var(--shadow); }
.module-panel[hidden] { display: none; }
.module-panel::after { content: ""; position: absolute; top: 0; right: 0; width: 260px; height: 1px; background: linear-gradient(90deg, transparent, var(--orange)); opacity: .55; }
.panel-grid { position: absolute; inset: 0; opacity: .3; background-image: linear-gradient(rgba(125, 153, 168, .035) 1px, transparent 1px), linear-gradient(90deg, rgba(125, 153, 168, .035) 1px, transparent 1px); background-size: 34px 34px; pointer-events: none; }
.section-heading { position: relative; z-index: 2; display: grid; grid-template-columns: minmax(0, 1fr) minmax(290px, 430px); align-items: end; gap: 45px; margin-bottom: 43px; }
.section-title-wrap { display: flex; align-items: center; gap: clamp(20px, 3vw, 42px); }
.section-number { color: rgba(105, 249, 211, .11); font-family: "SFMono-Regular", Consolas, monospace; font-size: clamp(57px, 7vw, 102px); font-weight: 800; line-height: .8; letter-spacing: -.08em; }
.section-heading .eyebrow { margin-bottom: 11px; }
.section-heading h2 { margin: 0; font-size: clamp(35px, 4vw, 61px); font-weight: 660; letter-spacing: -.052em; }
.section-description { justify-self: end; max-width: 430px; }
.section-description p { margin: 14px 0 0; color: var(--muted); font-size: 13px; line-height: 1.7; }
.status-chip { display: inline-flex; align-items: center; gap: 8px; padding: 7px 9px; border: 1px solid rgba(108, 255, 143, .18); color: var(--green); background: rgba(108, 255, 143, .045); font-family: "SFMono-Regular", Consolas, monospace; font-size: 7px; font-weight: 800; letter-spacing: .13em; }
.status-chip i { width: 5px; height: 5px; border-radius: 50%; background: var(--green); box-shadow: 0 0 8px var(--green); }

.drone-layout { position: relative; z-index: 2; display: grid; grid-template-columns: minmax(365px, 455px) 1fr; min-height: 650px; border: 1px solid var(--line); background: var(--panel-solid); box-shadow: 0 25px 70px rgba(0,0,0,.35); }
.flight-profile { grid-column: 1 / -1; }
.flight-profile small { display: block; margin-top: 7px; color: var(--muted); font-size: 10px; line-height: 1.35; }
.lookup-button.active { border-color: var(--cyan); color: var(--cyan); box-shadow: 0 0 0 1px rgba(85, 249, 220, .25), 0 0 18px rgba(85, 249, 220, .14); }
.control-card { position: relative; z-index: 2; padding: 0 31px 31px; border-right: 1px solid var(--line); background: linear-gradient(180deg, #101923, #0b121a); }
.control-head, .viewer-topline { height: 53px; display: flex; align-items: center; justify-content: space-between; margin: 0 -31px 29px; padding: 0 22px; border-bottom: 1px solid var(--line); color: #637481; font-family: "SFMono-Regular", Consolas, monospace; font-size: 7px; letter-spacing: .14em; }
.control-head b { color: var(--orange); font-size: 7px; }
.step-label { display: flex; align-items: center; gap: 11px; margin: 0 0 17px; color: var(--muted-light); font-family: "SFMono-Regular", Consolas, monospace; font-size: 9px; font-weight: 800; letter-spacing: .11em; text-transform: uppercase; }
.step-label:not(:first-of-type) { margin-top: 31px; }
.step-label > b { display: grid; width: 27px; height: 27px; place-items: center; border: 1px solid rgba(105, 249, 211, .28); color: var(--cyan); background: rgba(105, 249, 211, .04); font-size: 8px; }
.step-label > i { flex: 1; height: 1px; background: linear-gradient(90deg, var(--line), transparent); }
.field-label { display: block; margin: 0 0 8px; color: #8797a2; font-size: 10px; font-weight: 750; letter-spacing: .04em; }
input, select, textarea { width: 100%; min-height: 43px; border: 1px solid rgba(148, 174, 189, .2); border-radius: 0; outline: 0; background: rgba(4, 8, 13, .66); color: var(--ink); padding: 11px 12px; transition: border-color .2s, box-shadow .2s, background .2s; }
input::placeholder, textarea::placeholder { color: #4f5e69; }
input:focus, select:focus, textarea:focus { border-color: rgba(105, 249, 211, .62); background: rgba(5, 12, 17, .88); box-shadow: 0 0 0 3px rgba(105, 249, 211, .06), inset 2px 0 0 var(--cyan); }
select { color-scheme: dark; }
.lookup-grid, .style-grid, .agent-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 11px; }
.lookup-grid label, .style-grid label, .agent-grid label { min-width: 0; }
.lookup-grid label > span, .style-grid label > span, .agent-grid label > span { display: block; margin-bottom: 7px; color: #748692; font-size: 8px; font-weight: 750; letter-spacing: .04em; }
.lookup-grid .full { grid-column: 1 / -1; }
.lookup-button { display: flex; align-items: center; justify-content: center; margin-top: 12px; }
.color-control { min-height: 43px; display: flex !important; align-items: center; gap: 10px; margin: 0 !important; padding: 7px 10px; border: 1px solid rgba(148, 174, 189, .2); background: rgba(4, 8, 13, .66); }
.color-control input[type="color"] { width: 44px; min-height: 29px; height: 29px; padding: 0; border: 0; background: transparent; cursor: pointer; }
.color-control b { color: var(--cyan); font-family: "SFMono-Regular", Consolas, monospace; font-size: 8px; letter-spacing: .08em; }
.compact-file input[type="file"] { min-height: 43px; padding: 8px; color: #657681; font-size: 7px; }
.compact-file input[type="file"]::file-selector-button { margin-right: 8px; border: 1px solid rgba(105,249,211,.24); padding: 5px 7px; color: var(--cyan); background: rgba(105,249,211,.05); font-size: 7px; cursor: pointer; }
.voice-toggle { display: flex; align-items: center; gap: 11px; border: 1px solid rgba(105,249,211,.2); padding: 11px; background: linear-gradient(90deg, rgba(105,249,211,.07), rgba(4,8,13,.3)); cursor: pointer; }
.voice-toggle input { width: 18px; min-height: 18px; accent-color: var(--cyan); }
.voice-toggle span { display: grid; gap: 3px; }
.voice-toggle b { color: var(--ink); font-size: 10px; }
.voice-toggle small, .voiceover-field small { color: #6e828e; font-size: 8px; font-weight: 500; letter-spacing: 0; text-transform: none; }
.voiceover-field { display: block; margin-top: 11px; }
.voiceover-field > span { display: block; margin-bottom: 7px; color: #748692; font-size: 8px; font-weight: 750; letter-spacing: .04em; }
.voiceover-field textarea { resize: vertical; min-height: 74px; line-height: 1.45; }
.input-shell { position: relative; }
.input-shell > span { position: absolute; z-index: 2; top: 50%; left: 13px; color: var(--cyan); font-size: 15px; transform: translateY(-50%); }
.input-shell input { padding-left: 38px; }
.field-help, .instruction { margin: 9px 0 0; color: #6e7e89; font-size: 10px; line-height: 1.62; }
.instruction { padding-left: 11px; border-left: 1px solid rgba(255, 107, 53, .4); }
.reference-link { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 20px; padding: 13px 14px; border: 1px solid var(--line); color: var(--muted-light); background: rgba(255,255,255,.02); text-decoration: none; transition: border-color .2s, background .2s; }
.reference-link:hover { border-color: rgba(105, 249, 211, .3); background: rgba(105, 249, 211, .04); }
.reference-link > span { display: flex; flex-direction: column; gap: 4px; font-size: 11px; font-weight: 750; }
.reference-link small { color: #61717c; font-family: "SFMono-Regular", Consolas, monospace; font-size: 6px; letter-spacing: .16em; }
.reference-link b { color: var(--cyan); font-size: 17px; }
.selection-state { display: flex; align-items: center; gap: 9px; margin: 17px 0; padding: 11px 12px; border: 1px solid rgba(148, 174, 189, .11); color: #6e7d87; background: rgba(255,255,255,.02); font-family: "SFMono-Regular", Consolas, monospace; font-size: 8px; letter-spacing: .05em; }
.selection-state span { width: 6px; height: 6px; border-radius: 50%; background: #5c6972; }
.selection-state.ready { border-color: rgba(108, 255, 143, .22); color: #a8eabb; background: rgba(108, 255, 143, .05); }
.selection-state.ready span { background: var(--green); box-shadow: 0 0 8px var(--green); }
.primary-button { width: 100%; min-height: 49px; display: flex; align-items: center; justify-content: space-between; border: 1px solid var(--cyan); border-radius: 0; padding: 0 17px; overflow: hidden; background: var(--cyan); color: #04110e; font-size: 11px; font-weight: 900; letter-spacing: .03em; cursor: pointer; box-shadow: 0 12px 30px rgba(33, 230, 189, .15); transition: color .2s, background .2s, box-shadow .2s, transform .2s; }
.primary-button:hover:not(:disabled) { background: #9effe7; box-shadow: 0 15px 38px rgba(33, 230, 189, .24); transform: translateY(-2px); }
.primary-button:disabled { border-color: rgba(123, 144, 155, .17); color: #53616a; background: rgba(130, 151, 162, .07); box-shadow: none; cursor: not-allowed; }
.primary-button b { font-size: 18px; }
.secure-note { margin: 13px 0 0; color: #52616b; font-family: "SFMono-Regular", Consolas, monospace; font-size: 7px; text-align: center; letter-spacing: .04em; }
.secure-note i { margin-right: 5px; color: var(--green); font-style: normal; }

.map-shell { position: relative; min-width: 0; overflow: hidden; background: #111921; }
.map-shell::after { content: ""; position: absolute; z-index: 450; inset: 0; border: 1px solid rgba(105, 249, 211, .055); box-shadow: inset 0 0 80px rgba(3, 8, 12, .35); pointer-events: none; }
#parcel-map { z-index: 0; width: 100%; height: 100%; min-height: 650px; filter: saturate(.65) contrast(1.06) brightness(.78); }
.map-topline { position: absolute; z-index: 500; top: 0; left: 0; right: 0; height: 44px; display: flex; align-items: center; justify-content: space-between; padding: 0 17px; border-bottom: 1px solid rgba(105, 249, 211, .12); color: rgba(224, 237, 239, .8); background: rgba(5, 10, 15, .82); backdrop-filter: blur(10px); font-family: "SFMono-Regular", Consolas, monospace; font-size: 7px; letter-spacing: .12em; pointer-events: none; }
.map-topline span { display: flex; align-items: center; gap: 7px; }
.map-topline i { width: 5px; height: 5px; border-radius: 50%; background: var(--green); box-shadow: 0 0 8px var(--green); }
.map-topline b { color: var(--cyan); font-size: 7px; }
.map-caption { position: absolute; z-index: 500; left: 17px; bottom: 21px; display: flex; flex-direction: column; gap: 6px; padding: 11px 14px; border-left: 2px solid var(--cyan); color: white; background: rgba(5, 10, 15, .82); backdrop-filter: blur(12px); pointer-events: none; }
.map-caption > span { display: flex; align-items: center; gap: 7px; font-size: 10px; }
.map-caption i { width: 5px; height: 5px; border-radius: 50%; background: var(--green); }
.map-caption small { color: #72848f; font-family: "SFMono-Regular", Consolas, monospace; font-size: 6px; letter-spacing: .14em; }
.map-coordinates { position: absolute; z-index: 500; right: 17px; bottom: 21px; padding: 7px 9px; color: #71838f; background: rgba(5,10,15,.8); font-family: "SFMono-Regular", Consolas, monospace; font-size: 6px; letter-spacing: .1em; pointer-events: none; }
.leaflet-control-container { filter: none; }
.leaflet-bar { border: 1px solid rgba(105, 249, 211, .25) !important; border-radius: 0 !important; box-shadow: 0 8px 22px rgba(0,0,0,.28) !important; }
.leaflet-bar a { border-bottom-color: rgba(105, 249, 211, .12) !important; border-radius: 0 !important; background-color: rgba(7, 13, 19, .94) !important; color: var(--cyan) !important; }
.leaflet-bar a:hover { background-color: #15232c !important; }
.leaflet-draw-toolbar { margin-top: 54px !important; }
.leaflet-draw-toolbar a { filter: invert(88%) sepia(31%) saturate(978%) hue-rotate(103deg) brightness(100%); }
.leaflet-control-attribution { color: #667680 !important; background: rgba(5,10,15,.78) !important; font-size: 7px !important; }
.leaflet-control-attribution a { color: var(--cyan) !important; }

.job-card { position: relative; z-index: 2; margin-top: 22px; padding: 28px; border: 1px solid rgba(105, 249, 211, .21); background: linear-gradient(120deg, rgba(13, 29, 31, .95), rgba(9, 15, 22, .95)); box-shadow: var(--glow); }
.job-topline { display: flex; justify-content: space-between; align-items: center; gap: 20px; }
.job-topline > div { display: flex; flex-direction: column; gap: 6px; }
.job-kicker { color: var(--cyan); font-family: "SFMono-Regular", Consolas, monospace; font-size: 7px; font-weight: 900; letter-spacing: .16em; }
.job-topline strong { font-size: 19px; }
#job-percent { color: var(--cyan); font-family: "SFMono-Regular", Consolas, monospace; font-size: 29px; }
.progress-track { height: 5px; margin: 22px 0 13px; overflow: hidden; background: #1c2830; }
.progress-track span { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--cyan-dark), var(--cyan), white); box-shadow: 0 0 12px var(--cyan); transition: width .45s ease; }
#job-detail { margin: 0; color: #81909a; font-size: 11px; }
#job-video { width: 100%; max-height: 620px; margin-top: 24px; border: 1px solid var(--line); background: black; }

.tour-workspace { position: relative; z-index: 2; display: grid; grid-template-columns: minmax(320px, 400px) 1fr; min-height: 740px; border: 1px solid var(--line); background: var(--panel-solid); box-shadow: 0 25px 70px rgba(0,0,0,.35); }
.tour-sidebar { border-right: 1px solid var(--line); background: linear-gradient(180deg, #101923, #0b121a); }
.tour-sidebar > .control-head { margin: 0; padding: 0 25px; }
.side-section { padding: 27px 29px; border-bottom: 1px solid var(--line); transition: opacity .2s; }
.side-section .step-label { margin-top: 0; }
.disabled-section { opacity: .35; filter: saturate(.3); pointer-events: none; }
.inline-field { display: grid; grid-template-columns: 1fr auto; gap: 8px; }
.small-button, .icon-button { min-height: 43px; border: 1px solid rgba(105, 249, 211, .28); border-radius: 0; padding: 0 15px; color: #07110f; background: var(--cyan); font-size: 9px; font-weight: 850; cursor: pointer; transition: border-color .2s, background .2s, color .2s; }
.small-button:hover, .icon-button:hover { background: #a3ffe9; }
.small-button.ghost, .icon-button { color: var(--muted-light); background: rgba(255,255,255,.035); }
.small-button.ghost:hover, .icon-button:hover { border-color: var(--cyan); color: var(--cyan); }
.small-button.full { width: 100%; margin-top: 12px; }
.divider { display: flex; align-items: center; gap: 9px; margin: 18px 0; color: #54636e; font-family: "SFMono-Regular", Consolas, monospace; font-size: 6px; letter-spacing: .13em; }
.divider::before, .divider::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.drop-zone { position: relative; display: flex; align-items: center; flex-direction: column; margin: 13px 0; padding: 23px 12px; border: 1px dashed rgba(105, 249, 211, .25); background: rgba(105, 249, 211, .025); text-align: center; cursor: pointer; transition: border-color .2s, background .2s; }
.drop-zone:hover { border-color: var(--cyan); background: rgba(105, 249, 211, .055); }
.drop-zone input { position: absolute; width: 1px; min-height: 0; height: 1px; opacity: 0; }
.upload-icon { display: grid; width: 38px; height: 38px; place-items: center; margin-bottom: 10px; border: 1px solid rgba(105, 249, 211, .25); color: var(--cyan); background: rgba(105, 249, 211, .06); font-size: 21px; }
.drop-zone strong { font-size: 11px; }
.drop-zone small { margin-top: 5px; color: #657681; font-size: 8px; }
.drop-zone em { max-width: 100%; margin-top: 10px; overflow: hidden; color: var(--orange-light); font-family: "SFMono-Regular", Consolas, monospace; font-size: 7px; font-style: normal; text-overflow: ellipsis; white-space: nowrap; }
.angle-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 10px; }
.angle-fields span { display: block; margin-bottom: 5px; color: #657680; font-size: 8px; }
.hotspot-draft { display: grid; gap: 7px; margin: 12px 0; }
.hotspot-item { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 10px; border: 1px solid var(--line); background: rgba(255,255,255,.025); font-size: 9px; }
.hotspot-item button { border: 0; color: var(--danger); background: none; font-size: 8px; cursor: pointer; }

.tour-main { position: relative; min-width: 0; overflow: hidden; background: radial-gradient(circle at center, #111f29, #080d13 68%); }
.viewer-topline { position: absolute; z-index: 5; top: 0; right: 0; left: 0; height: 45px; margin: 0; background: rgba(5, 10, 15, .68); backdrop-filter: blur(8px); pointer-events: none; }
.viewer-topline span { display: flex; align-items: center; gap: 7px; }
.viewer-topline i { width: 5px; height: 5px; border-radius: 50%; background: var(--green); box-shadow: 0 0 8px var(--green); }
.viewer-topline b { color: var(--cyan); font-size: 7px; }
.tour-empty { min-height: 740px; display: grid; place-content: center; justify-items: center; padding: 76px 30px 50px; text-align: center; }
.tour-empty h3 { margin: 0; font-size: clamp(27px, 3vw, 42px); font-weight: 650; letter-spacing: -.04em; }
.tour-empty > p:not(.eyebrow) { max-width: 460px; margin: 17px auto 0; color: #748590; font-size: 12px; line-height: 1.65; }
.panorama-orbit { position: relative; width: 145px; height: 145px; margin-bottom: 31px; border: 1px solid rgba(105, 249, 211, .2); border-radius: 50%; box-shadow: inset 0 0 35px rgba(105, 249, 211, .04), 0 0 45px rgba(105, 249, 211, .04); }
.panorama-orbit::before, .panorama-orbit::after { content: ""; position: absolute; border: 1px solid rgba(105, 249, 211, .14); border-radius: 50%; }
.panorama-orbit::before { inset: 19px 46px; }
.panorama-orbit::after { inset: 46px 19px; }
.panorama-orbit i { position: absolute; top: 50%; left: -9px; width: 161px; height: 1px; background: linear-gradient(90deg, transparent, var(--cyan), transparent); }
.panorama-orbit b { position: absolute; top: 50%; left: 50%; width: 9px; height: 9px; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 16px var(--cyan); transform: translate(-50%, -50%); }
.panorama-orbit span { position: absolute; inset: -1px; border: 1px solid transparent; border-top-color: var(--orange); border-radius: 50%; animation: radar-spin 6s linear infinite; }
.empty-telemetry { display: flex; gap: 7px; margin-top: 30px; }
.empty-telemetry span { padding: 7px 9px; border: 1px solid var(--line); color: #596b77; font-family: "SFMono-Regular", Consolas, monospace; font-size: 6px; letter-spacing: .12em; }
#tour-content { padding-top: 45px; }
.tour-toolbar { min-height: 69px; display: flex; align-items: center; justify-content: space-between; gap: 15px; padding: 12px 17px; border-bottom: 1px solid var(--line); background: rgba(7,12,18,.94); }
.tour-toolbar > div:first-child { display: flex; align-items: center; gap: 12px; }
.tour-toolbar strong { font-size: 14px; }
.mode-badge { padding: 6px 8px; border: 1px solid rgba(105, 249, 211, .25); color: var(--cyan); background: rgba(105, 249, 211, .05); font-family: "SFMono-Regular", Consolas, monospace; font-size: 7px; font-weight: 850; letter-spacing: .1em; }
.toolbar-actions { display: flex; gap: 7px; }
.icon-button { min-height: 35px; padding: 0 11px; font-size: 8px; }
.icon-button.accent { color: #07110f; background: var(--cyan); }
.tour-viewer { position: relative; height: 570px; display: flex; flex-direction: column; overflow: hidden; background: #05080d; }
.pannellum-stage, .viewer-stage { width: 100%; min-height: 0; flex: 1 1 auto; }
.gallery-stage { width: 100%; height: 100%; }
.gallery-stage { position: relative; overflow: hidden; background: #05080d; }
.gallery-stage img { width: 100%; height: 100%; object-fit: cover; }
.gallery-caption { position: absolute; right: 18px; bottom: 18px; left: 18px; padding: 13px 15px; border-left: 2px solid var(--cyan); color: white; background: rgba(5,10,15,.78); backdrop-filter: blur(8px); font-size: 12px; }
.viewer-nav { display: flex; flex: 0 0 auto; gap: 7px; padding: 11px 15px; overflow-x: auto; border-top: 1px solid var(--line); background: #0a1118; }
.viewer-nav button, .transition-buttons button { border: 1px solid var(--line); padding: 8px 10px; color: #82939e; background: rgba(255,255,255,.025); font-size: 9px; white-space: nowrap; cursor: pointer; }
.viewer-nav button.active, .viewer-nav button:hover, .transition-buttons button:hover { border-color: rgba(105, 249, 211, .35); color: var(--cyan); background: rgba(105,249,211,.06); }
.transition-buttons { position: absolute; z-index: 2; right: 15px; bottom: 15px; display: flex; flex-direction: column; gap: 7px; }
.orbit-control { position: absolute; z-index: 4; right: 15px; top: 58px; border: 1px solid rgba(105,249,211,.34); padding: 8px 10px; color: #82939e; background: rgba(5,12,19,.76); font: 800 8px/1 "SFMono-Regular", Consolas, monospace; letter-spacing: .11em; cursor: pointer; }
.orbit-control.active { color: var(--cyan); border-color: rgba(105,249,211,.72); box-shadow: 0 0 18px rgba(105,249,211,.16); }
.gallery-stage img { animation: gallery-breathe 12s ease-in-out infinite alternate; }
.panorama-fallback { display: grid; place-items: center; }
.panorama-fallback img { width: auto; min-width: 230%; max-width: none; height: 100%; object-fit: cover; animation: panorama-drift 18s cubic-bezier(.45,0,.55,1) infinite alternate; }
.fallback-note { position: absolute; z-index: 2; right: 14px; bottom: 14px; max-width: 260px; padding: 8px 10px; color: #b8c8d1; background: rgba(5,10,15,.82); font-size: 9px; line-height: 1.45; }
@keyframes panorama-drift { from { transform: translateX(13%); } to { transform: translateX(-13%); } }
@keyframes gallery-breathe { from { transform: scale(1.02) translate3d(-.5%, 0, 0); } to { transform: scale(1.10) translate3d(.5%, -.5%, 0); } }
.scene-list { display: flex; flex-wrap: wrap; gap: 7px; padding: 13px 16px; border-top: 1px solid var(--line); background: #0a1118; }
.scene-chip { display: inline-flex; align-items: center; gap: 7px; padding: 7px 9px; border: 1px solid var(--line); color: #85949e; font-family: "SFMono-Regular", Consolas, monospace; font-size: 7px; }
.scene-chip i { width: 5px; height: 5px; border-radius: 50%; background: var(--orange); }
.scene-chip.panorama i { background: var(--cyan); box-shadow: 0 0 7px var(--cyan); }
.embed-box { margin: 14px; padding: 15px; border: 1px solid var(--line); background: #0b1219; }
.embed-box textarea { resize: vertical; }
.tour-video-job { display: grid; grid-template-columns: 1fr auto; gap: 10px 18px; margin-top: 14px; border: 1px solid rgba(105,249,211,.26); padding: 16px; background: linear-gradient(110deg, rgba(10,26,31,.9), rgba(8,15,27,.82)); }
.tour-video-job > div:first-child { display: grid; gap: 5px; }
.tour-video-job span { color: var(--cyan); font: 800 8px/1 "SFMono-Regular", Consolas, monospace; letter-spacing: .13em; }
.tour-video-job strong { color: var(--ink); font-size: 12px; }
.tour-video-job > b { color: var(--cyan); align-self: center; font-size: 18px; }
.tour-video-job .progress-track { grid-column: 1 / -1; }
.tour-video-job video { grid-column: 1 / -1; width: min(100%, 330px); max-height: 530px; margin: 4px auto 0; background: #020507; }
.icon-button.ai { border-color: rgba(187, 126, 255, .42); color: #dfc7ff; background: rgba(110, 61, 184, .14); }
.ai-tour-panel { margin-top: 14px; padding: 18px; border: 1px solid rgba(187, 126, 255, .38); background: linear-gradient(120deg, rgba(24, 14, 39, .94), rgba(7, 18, 29, .94)); box-shadow: inset 0 1px rgba(255,255,255,.04); }
.ai-tour-heading { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.ai-tour-heading > div { display: grid; gap: 6px; }
.ai-tour-heading span { color: #c8a0ff; font: 800 8px/1 "SFMono-Regular", Consolas, monospace; letter-spacing: .15em; }
.ai-tour-heading strong { color: var(--ink); font-size: 15px; }
.ai-tour-heading > b { padding: 7px 9px; border: 1px solid rgba(187,126,255,.36); color: #d6b8ff; font: 800 7px/1 "SFMono-Regular", Consolas, monospace; letter-spacing: .12em; white-space: nowrap; }
.ai-tour-heading > b.ready { border-color: rgba(105,249,211,.36); color: var(--cyan); }
.ai-tour-panel > p { margin: 14px 0; color: #95a4b1; font-size: 11px; line-height: 1.7; }
.ai-tour-controls { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.ai-tour-controls label { display: grid; gap: 6px; color: #aebdca; font: 700 8px/1.2 "SFMono-Regular", Consolas, monospace; letter-spacing: .08em; }
.ai-tour-controls select { min-width: 0; }
.ai-tour-action-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 14px; }
.ai-tour-action-row small { color: #9baab5; font-size: 10px; line-height: 1.5; }
.ai-primary { flex: 0 0 auto; min-height: 45px; border-color: rgba(187,126,255,.65); background: linear-gradient(90deg, #7637d7, #1d6cff); }
.ai-tour-panel .tour-video-job { margin-bottom: 0; }
.embed-box .small-button { margin-top: 8px; }
.viewer-error { display: grid; width: 100%; height: 100%; min-height: 250px; place-content: center; color: var(--muted); text-align: center; }
.viewer-runtime-error { position: absolute; z-index: 8; right: 15px; top: 15px; max-width: calc(100% - 30px); padding: 10px 12px; border: 1px solid rgba(255,106,103,.45); color: #ffd7d5; background: rgba(46,12,15,.9); font-size: 9px; }

.toast { position: fixed; z-index: 3000; right: 23px; bottom: 23px; max-width: min(390px, calc(100% - 46px)); padding: 15px 18px; border: 1px solid rgba(105, 249, 211, .3); color: var(--ink); background: rgba(10, 20, 25, .96); box-shadow: 0 20px 50px rgba(0,0,0,.5), var(--glow); opacity: 0; transform: translateY(14px); pointer-events: none; transition: opacity .2s, transform .2s; font-size: 11px; }
.toast.show { opacity: 1; transform: translateY(0); }
.toast.error { border-color: rgba(255, 106, 103, .4); background: rgba(45, 16, 18, .96); }
.hidden { display: none !important; }
footer { width: min(1500px, calc(100% - clamp(28px, 7vw, 116px))); display: flex; justify-content: space-between; gap: 20px; margin: 28px auto 38px; color: #50606c; font-family: "SFMono-Regular", Consolas, monospace; font-size: 7px; letter-spacing: .1em; }
footer b { color: #84949e; }
footer i { display: inline-block; width: 5px; height: 5px; margin: 0 4px; border-radius: 50%; background: var(--green); box-shadow: 0 0 7px var(--green); }

.embed-page { width: 100vw; height: 100vh; overflow: hidden; background: var(--void); }
.embed-viewer { width: 100%; height: 100%; }
.embed-loading { display: grid; width: 100%; height: 100%; place-content: center; color: white; text-align: center; }
.embed-loading span { width: 38px; height: 38px; margin: 0 auto; border: 2px solid #26343e; border-top-color: var(--cyan); border-radius: 50%; animation: radar-spin .8s linear infinite; }
.embed-brand { position: fixed; z-index: 20; top: 14px; left: 14px; padding: 8px 10px; border: 1px solid rgba(105,249,211,.25); color: var(--cyan); background: rgba(5,10,15,.78); text-decoration: none; font-family: "SFMono-Regular", Consolas, monospace; font-size: 8px; font-weight: 900; letter-spacing: .14em; backdrop-filter: blur(8px); }

@keyframes radar-spin { to { transform: rotate(360deg); } }
@keyframes pulse-ring { 0% { opacity: .7; transform: scale(.65); } 75%, 100% { opacity: 0; transform: scale(1.45); } }

@media (prefers-reduced-motion: no-preference) {
  .intro-content { animation: rise-in .75s both; }
  .hero-visual { animation: rise-in .9s .1s both; }
  .module-tabs { animation: rise-in .75s .18s both; }
  @keyframes rise-in { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: translateY(0); } }
}

@media (max-width: 1080px) {
  .topbar-center { display: none; }
  .topbar { grid-template-columns: 1fr auto; }
  .intro { grid-template-columns: 1fr; min-height: auto; }
  .hero-visual { min-height: 400px; }
  .radar-card { width: min(100%, 540px); }
  .section-heading { grid-template-columns: 1fr; gap: 22px; }
  .section-description { justify-self: start; }
  .drone-layout, .tour-workspace { grid-template-columns: 1fr; }
  .control-card, .tour-sidebar { border-right: 0; border-bottom: 1px solid var(--line); }
  #parcel-map { min-height: 560px; }
  .tour-empty { min-height: 540px; }
}

@media (max-width: 720px) {
  .topbar { height: 70px; padding: 0 17px; }
  .brand-mark { width: 34px; height: 34px; transform: rotate(45deg) scale(.82); }
  .brand-mark::before, .brand-mark::after { top: 16px; width: 34px; }
  .brand-mark b { top: 11px; left: 11px; }
  .brand strong { font-size: 14px; }
  .system-state > span:not(.pulse), .system-state small { display: none; }
  main { width: calc(100% - 18px); }
  .intro { gap: 36px; padding: 54px 7px 50px; }
  .intro::before { display: none; }
  h1 { font-size: clamp(46px, 15vw, 70px); }
  .intro-copy { margin-top: 26px; font-size: 14px; }
  .hero-visual { min-height: 320px; }
  .radar-card { padding: 18px; }
  .radar { width: 70%; }
  .radar-metrics span { padding: 12px 7px 0; }
  .radar-metrics b { font-size: 9px; }
  .module-tabs { grid-template-columns: 1fr; }
  .module-tab { min-height: 86px; grid-template-columns: auto auto 1fr auto; gap: 13px; padding: 15px; }
  .tab-icon { width: 39px; height: 39px; }
  .tab-copy strong { font-size: 13px; }
  .module-panel { padding: 32px 14px; }
  .section-title-wrap { align-items: flex-start; gap: 15px; }
  .section-number { font-size: 58px; }
  .section-heading h2 { font-size: 34px; }
  .control-card { padding: 0 18px 24px; }
  .control-head { margin-right: -18px; margin-left: -18px; }
  #parcel-map { min-height: 480px; }
  .map-coordinates { display: none; }
  .tour-sidebar > .control-head { padding: 0 18px; }
  .side-section { padding: 24px 18px; }
  .tour-empty { min-height: 480px; padding-inline: 20px; }
  .tour-viewer { height: 500px; }
  .tour-toolbar { align-items: flex-start; flex-direction: column; }
  .toolbar-actions { width: 100%; }
  .icon-button { flex: 1; }
  .ai-tour-controls { grid-template-columns: 1fr; }
  .ai-tour-action-row { align-items: stretch; flex-direction: column; }
  .ai-primary { width: 100%; }
  footer { width: calc(100% - 28px); align-items: flex-start; flex-direction: column; }
  footer span:nth-child(2) { line-height: 1.7; }
}

@media (max-width: 430px) {
  .eyebrow { font-size: 7px; }
  .eyebrow > span { display: block; width: max-content; margin: 0 0 9px; }
  .hero-actions { display: grid; grid-template-columns: 1fr; }
  .radar-card { aspect-ratio: .92; }
  .radar { width: 78%; }
  .module-tab { grid-template-columns: auto 1fr auto; }
  .tab-index { display: none; }
  .section-number { display: none; }
  .inline-field { grid-template-columns: 1fr; }
  .lookup-grid, .style-grid, .agent-grid { grid-template-columns: 1fr; }
  .lookup-grid .full { grid-column: auto; }
  .small-button { min-height: 41px; }
  .map-topline b { display: none; }
}