/* ═══════════════════════════════════════════════════════════════
   AIRISMAP — Design System v3 · "AERIAL RECON"
   Dark cinematic · instrument-grade · topographic
   Display: Archivo (wide grotesque) · Body: Sora · Telemetry: Spline Sans Mono
   ═══════════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Archivo:wght@500;600;700;800;900&family=Sora:wght@300;400;500;600;700;800&family=Spline+Sans+Mono:wght@400;500;600;700&display=swap');

/* ─── TOKENS ──────────────────────────────────────────────────── */
:root {
  color-scheme: dark;

  /* fonts */
  --font-display: 'Archivo', system-ui, sans-serif;
  --font-body:    'Sora', system-ui, sans-serif;
  --font-mono:    'Spline Sans Mono', ui-monospace, monospace;

  /* base — cold graphite, not pure black */
  --bg:        #06090c;
  --bg2:       #0a0f14;
  --surface:   rgba(255,255,255,0.035);
  --surface2:  rgba(255,255,255,0.06);
  --surface3:  rgba(255,255,255,0.09);
  --border:    rgba(173,201,160,0.10);
  --border2:   rgba(180,255,60,0.22);

  /* signal accent (precision lime) + telemetry ice + warn amber */
  --accent:    #B4FF3C;
  --accent2:   #7CDD00;
  --green:     #B4FF3C;
  --ice:       #7DEBFF;
  --warn:      #FF9F45;
  --danger:    #FF453A;

  --text:      #eef3ec;
  --muted:     #8a958a;
  --muted2:    #aab3a8;

  --glass-bg:     rgba(9,14,18,0.74);
  --glass-blur:   blur(22px) saturate(150%);
  --glass-border: rgba(180,255,60,0.10);
  --glass-shadow: 0 10px 44px rgba(0,0,0,0.55), inset 0 1px 0 rgba(255,255,255,0.05);

  /* sharper, instrument-grade radii */
  --radius-xs: 6px;
  --radius-sm: 9px;
  --radius:    13px;
  --radius-lg: 18px;
  --radius-xl: 24px;

  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-smooth: cubic-bezier(0.22, 0.68, 0, 1.1);
  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
}

/* ─── GLOBAL ──────────────────────────────────────────────────── */
html, body {
  background: var(--bg) !important;
  color: var(--text) !important;
  font-family: var(--font-body) !important;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Topographic + grain atmosphere (every page) */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  background:
    radial-gradient(ellipse 80% 60% at 18% -8%, rgba(180,255,60,0.055) 0%, transparent 58%),
    radial-gradient(ellipse 60% 55% at 88% 112%, rgba(125,235,255,0.045) 0%, transparent 55%),
    radial-gradient(ellipse 50% 40% at 50% 45%, rgba(10,40,70,0.05) 0%, transparent 72%);
  pointer-events: none;
  z-index: 0;
}
/* fine contour-line weave — subtle topographic survey texture */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  background-image:
    repeating-linear-gradient(0deg, rgba(180,255,60,0.022) 0 1px, transparent 1px 92px),
    repeating-linear-gradient(90deg, rgba(180,255,60,0.018) 0 1px, transparent 1px 92px);
  -webkit-mask-image: radial-gradient(ellipse 120% 90% at 50% 40%, #000 35%, transparent 88%);
          mask-image: radial-gradient(ellipse 120% 90% at 50% 40%, #000 35%, transparent 88%);
  pointer-events: none;
  z-index: 0;
  opacity: 0.55;
}

/* Display typography */
h1, h2, h3, .logo, .hero, .page-title, .land-section-title,
.price-main, .area-val, .bento-val {
  font-family: var(--font-display) !important;
}
/* Telemetry / coordinate read-outs */
.mono, .coord, code, kbd, .tlm { font-family: var(--font-mono) !important; }

/* ─── NAVIGATION ──────────────────────────────────────────────── */
nav {
  background: var(--glass-bg) !important;
  backdrop-filter: var(--glass-blur) !important;
  -webkit-backdrop-filter: var(--glass-blur) !important;
  border-bottom: 1px solid var(--glass-border) !important;
  box-shadow: 0 1px 0 rgba(255,255,255,0.03), 0 6px 26px rgba(0,0,0,0.4) !important;
}
nav::after {
  background: linear-gradient(90deg, transparent, var(--accent), var(--ice), transparent) !important;
  opacity: 0.34 !important;
  height: 1px !important;
}
.logo {
  font-family: var(--font-display) !important;
  font-weight: 800 !important;
  font-size: 19px !important;
  letter-spacing: 0.5px !important;
  font-stretch: 118%;
  background: linear-gradient(110deg, #fff 18%, var(--accent) 62%, #E8FF8A) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
}
.brand-logo-img {
  height: 30px;
  max-height: calc(var(--nav-h, 60px) - 12px);
  width: auto;
  border-radius: 6px;
  vertical-align: middle;
  display: none;
}

/* ─── BUTTONS ─────────────────────────────────────────────────── */
.btn-nav, .btn-sm, .btn-action, .btn-clear, .btn-back, .btn-next {
  font-family: var(--font-mono) !important;
  border-radius: var(--radius-xs) !important;
  font-size: 11.5px !important;
  font-weight: 500 !important;
  letter-spacing: 0.4px !important;
  text-transform: uppercase !important;
  transition: all 0.22s var(--ease-out) !important;
}
.btn-nav:hover, .btn-sm:hover, .btn-action:hover {
  background: rgba(180,255,60,0.05) !important;
  border-color: var(--border2) !important;
  color: var(--accent) !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 6px 16px rgba(180,255,60,0.14) !important;
}
.btn-cta, .btn-add, .btn-primary, .btn-action.primary {
  font-family: var(--font-display) !important;
  background: linear-gradient(135deg, var(--accent2), var(--accent)) !important;
  color: #06090c !important;
  border: none !important;
  border-radius: var(--radius-sm) !important;
  font-weight: 800 !important;
  letter-spacing: 0.3px !important;
  position: relative !important;
  overflow: hidden !important;
  transition: all 0.25s var(--ease-out) !important;
  box-shadow: 0 6px 24px rgba(124,221,0,0.32) !important;
}
.btn-cta::before, .btn-add::before {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  background: linear-gradient(135deg, rgba(255,255,255,0.18), transparent 55%) !important;
  pointer-events: none !important;
}
/* sweeping highlight on hover */
.btn-cta::after, .btn-primary::after {
  content: '';
  position: absolute;
  top: 0; left: -120%;
  width: 60%; height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,0.45), transparent);
  transform: skewX(-18deg);
  transition: left 0.6s var(--ease-out);
  pointer-events: none;
}
.btn-cta:hover::after, .btn-primary:hover::after { left: 160%; }
.btn-cta:hover, .btn-add:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 10px 34px rgba(124,221,0,0.5) !important;
}

/* ─── CARDS / SURFACES ────────────────────────────────────────── */
.card, .ordine-card, .sim-card, .gcp-section {
  background: var(--glass-bg) !important;
  backdrop-filter: var(--glass-blur) !important;
  -webkit-backdrop-filter: var(--glass-blur) !important;
  border: 1px solid var(--glass-border) !important;
  border-radius: var(--radius) !important;
  box-shadow: var(--glass-shadow) !important;
  transition: border-color 0.25s, box-shadow 0.25s, transform 0.25s !important;
}
.ordine-card:hover {
  border-color: var(--border2) !important;
  box-shadow: 0 16px 54px rgba(0,0,0,0.55), inset 0 1px 0 rgba(255,255,255,0.06) !important;
  transform: translateY(-2px) !important;
}
.ordine-card::before, .card::before, .sim-card::before, .tbl-wrap::before {
  background: linear-gradient(90deg, var(--accent2), var(--accent), var(--ice)) !important;
  opacity: 0.55 !important;
  height: 1px !important;
}

/* ─── PRICE BOX ───────────────────────────────────────────────── */
.price-box {
  background: linear-gradient(135deg, rgba(124,221,0,0.09), rgba(125,235,255,0.04)) !important;
  border: 1px solid rgba(180,255,60,0.18) !important;
  border-radius: var(--radius) !important;
  backdrop-filter: var(--glass-blur) !important;
  box-shadow: 0 6px 28px rgba(124,221,0,0.12), inset 0 1px 0 rgba(255,255,255,0.05) !important;
}
.price-main {
  font-family: var(--font-display) !important;
  font-weight: 900 !important;
  font-size: 44px !important;
  letter-spacing: -2px !important;
  font-stretch: 112%;
  background: linear-gradient(120deg, #fff, var(--accent)) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
}

/* ─── TABLES ──────────────────────────────────────────────────── */
.tbl-wrap {
  background: var(--glass-bg) !important;
  backdrop-filter: var(--glass-blur) !important;
  border: 1px solid var(--glass-border) !important;
  border-radius: var(--radius) !important;
  box-shadow: var(--glass-shadow) !important;
  overflow: hidden !important;
}
th {
  font-family: var(--font-mono) !important;
  background: rgba(255,255,255,0.02) !important;
  font-size: 9.5px !important;
  letter-spacing: 1px !important;
  text-transform: uppercase !important;
  color: var(--muted) !important;
  border-bottom: 1px solid var(--border) !important;
}
tr:hover td { background: rgba(180,255,60,0.035) !important; }

/* ─── INPUTS ──────────────────────────────────────────────────── */
.form-input, .sim-inp, .search-inp, .inp, input[type=text], input[type=email],
input[type=tel], input[type=password], textarea, select.inp {
  background: rgba(255,255,255,0.035) !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  border-radius: var(--radius-xs) !important;
  color: var(--text) !important;
  font-family: var(--font-body) !important;
  transition: border-color 0.2s, box-shadow 0.2s, background 0.2s !important;
}
select { background: #0d1318 !important; color: var(--text) !important; color-scheme: dark; }
select option { background: #0d1318 !important; color: var(--text) !important; }
.form-input:focus, .sim-inp:focus, .search-inp:focus,
input[type=text]:focus, input[type=email]:focus,
input[type=tel]:focus, input[type=password]:focus, textarea:focus {
  border-color: var(--border2) !important;
  box-shadow: 0 0 0 3px rgba(180,255,60,0.1) !important;
  outline: none !important;
  background: rgba(180,255,60,0.035) !important;
}

/* ─── BADGES / STATO ──────────────────────────────────────────── */
.badge, .stato-badge {
  font-family: var(--font-mono) !important;
  font-size: 9.5px !important;
  font-weight: 600 !important;
  letter-spacing: 0.7px !important;
  text-transform: uppercase !important;
  border-radius: 100px !important;
}

/* ─── STEP WIZARD ─────────────────────────────────────────────── */
.step-dot {
  width: 30px !important; height: 30px !important;
  border-radius: 50% !important;
  backdrop-filter: var(--glass-blur) !important;
  transition: all 0.3s var(--ease-spring) !important;
}
.step-dot.active {
  background: rgba(180,255,60,0.1) !important;
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 4px rgba(180,255,60,0.1), 0 0 18px rgba(180,255,60,0.3) !important;
}
.step-dot.done { background: var(--green) !important; box-shadow: 0 0 12px rgba(180,255,60,0.35) !important; }
.step-line { height: 1px !important; background: var(--border) !important; }
.step-line.done { background: linear-gradient(90deg, var(--green), rgba(180,255,60,0.5)) !important; }

/* ─── MAP CONTROLS ────────────────────────────────────────────── */
.ctrl-btn {
  background: var(--glass-bg) !important;
  backdrop-filter: var(--glass-blur) !important;
  -webkit-backdrop-filter: var(--glass-blur) !important;
  border: 1px solid var(--glass-border) !important;
  border-radius: var(--radius-xs) !important;
  font-family: var(--font-mono) !important;
  font-size: 11px !important;
  letter-spacing: 0.3px;
  box-shadow: 0 2px 12px rgba(0,0,0,0.35) !important;
  transition: all 0.2s !important;
}
.ctrl-btn:hover { border-color: var(--border2) !important; color: var(--accent) !important; transform: translateX(-1px) !important; }
.ctrl-btn.on {
  background: rgba(180,255,60,0.08) !important;
  border-color: var(--border2) !important;
  box-shadow: 0 2px 12px rgba(0,0,0,0.35), 0 0 0 1px rgba(180,255,60,0.15) !important;
}

/* ─── MAP BAR ─────────────────────────────────────────────────── */
.map-bar { background: var(--glass-bg) !important; backdrop-filter: var(--glass-blur) !important; border-bottom: 1px solid var(--glass-border) !important; }
.map-foot { background: var(--glass-bg) !important; backdrop-filter: var(--glass-blur) !important; border-top: 1px solid var(--glass-border) !important; }
.area-val {
  font-family: var(--font-display) !important;
  font-weight: 800 !important;
  font-size: 27px !important;
  background: linear-gradient(120deg, var(--accent), var(--ice)) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  letter-spacing: -1px !important;
}

/* ─── HERO TEXT ───────────────────────────────────────────────── */
.hero {
  font-family: var(--font-display) !important;
  font-weight: 800 !important;
  font-size: 23px !important;
  letter-spacing: -0.6px !important;
  line-height: 1.16 !important;
}
.hero em {
  font-style: normal;
  background: linear-gradient(120deg, var(--accent), var(--ice)) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
}

/* ─── PAGE TITLES ─────────────────────────────────────────────── */
.page-title, .step-title, .sim-title, .sec-label { letter-spacing: -0.4px !important; }
.sec-label, .card-lbl, .bento-lbl { font-family: var(--font-mono) !important; }

/* ─── RADIO / DELIVERY OPTIONS ────────────────────────────────── */
.radio-opt, .delivery-opt {
  background: rgba(255,255,255,0.02) !important;
  border: 1px solid var(--glass-border) !important;
  border-radius: var(--radius-sm) !important;
  transition: all 0.2s var(--ease-out) !important;
}
.radio-opt:hover, .delivery-opt:hover {
  background: rgba(180,255,60,0.045) !important;
  border-color: var(--border2) !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 6px 18px rgba(0,0,0,0.28) !important;
}
.radio-opt.on, .delivery-opt.on {
  background: rgba(180,255,60,0.04) !important;
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 1px rgba(180,255,60,0.16), 0 6px 18px rgba(124,221,0,0.16) !important;
}

/* ─── MODAL / OVERLAY ─────────────────────────────────────────── */
.overlay, #overlay {
  background: rgba(2,5,9,0.82) !important;
  backdrop-filter: blur(18px) saturate(170%) !important;
  -webkit-backdrop-filter: blur(18px) saturate(170%) !important;
}
.modal {
  background: rgba(9,14,18,0.92) !important;
  backdrop-filter: var(--glass-blur) !important;
  border: 1px solid var(--glass-border) !important;
  border-radius: var(--radius-lg) !important;
  box-shadow: 0 28px 90px rgba(0,0,0,0.62), inset 0 1px 0 rgba(255,255,255,0.06) !important;
}

/* ─── TOAST ───────────────────────────────────────────────────── */
.toast {
  background: rgba(9,14,18,0.94) !important;
  backdrop-filter: var(--glass-blur) !important;
  border: 1px solid var(--glass-border) !important;
  border-radius: var(--radius-sm) !important;
  box-shadow: 0 10px 36px rgba(0,0,0,0.5) !important;
  font-size: 13px !important;
}

/* ─── USER DROPDOWN ───────────────────────────────────────────── */
.user-dropdown {
  background: rgba(9,14,18,0.97) !important;
  backdrop-filter: var(--glass-blur) !important;
  -webkit-backdrop-filter: var(--glass-blur) !important;
  border: 1px solid rgba(180,255,60,0.12) !important;
  border-radius: var(--radius-sm) !important;
  box-shadow: 0 18px 52px rgba(0,0,0,0.7), inset 0 1px 0 rgba(255,255,255,0.05) !important;
}
.user-dropdown-name { font-family: var(--font-body) !important; font-size: 12px !important; color: var(--muted) !important; }
.user-dropdown-name strong { font-family: var(--font-display) !important; font-size: 13px !important; font-weight: 700 !important; color: var(--text) !important; letter-spacing: -0.2px !important; }
.dropdown-item { font-family: var(--font-body) !important; font-size: 13px !important; font-weight: 500 !important; color: var(--text) !important; letter-spacing: -0.1px !important; text-decoration: none !important; }
.dropdown-item:hover { background: rgba(180,255,60,0.06) !important; color: var(--accent) !important; }
.dropdown-item.danger { color: var(--danger) !important; }
.dropdown-item.danger:hover { color: var(--danger) !important; background: rgba(255,69,58,0.08) !important; }
.dropdown-divider { background: rgba(255,255,255,0.07) !important; }
.user-avatar { background: var(--accent2) !important; color: #06090c !important; font-family: var(--font-display) !important; font-weight: 800 !important; }
.user-trigger { font-family: var(--font-body) !important; font-size: 13px !important; }

/* ─── ANIMATIONS ──────────────────────────────────────────────── */
@keyframes glassIn { from { opacity:0; transform:translateY(12px) scale(0.97); filter:blur(4px); } to { opacity:1; transform:translateY(0) scale(1); filter:blur(0); } }
@keyframes fadeUp { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:translateY(0); } }
@keyframes scanSweep { 0% { background-position:-200% 0; } 100% { background-position:200% 0; } }
@keyframes hudBlink { 0%,100% { opacity:1; } 50% { opacity:0.35; } }

.card, .ordine-card { animation: glassIn 0.4s var(--ease-smooth) both; }
.ordine-card:nth-child(1){animation-delay:.04s;} .ordine-card:nth-child(2){animation-delay:.09s;}
.ordine-card:nth-child(3){animation-delay:.14s;} .ordine-card:nth-child(4){animation-delay:.19s;}
.ordine-card:nth-child(5){animation-delay:.24s;}

/* Shared scroll-reveal utility (driven by /js/airis-fx.js) */
.reveal { opacity: 0; transform: translateY(22px); transition: opacity .8s var(--ease-out), transform .8s var(--ease-out); will-change: opacity, transform; }
.reveal.in { opacity: 1; transform: none; }
.reveal-delay-1 { transition-delay: .08s; }
.reveal-delay-2 { transition-delay: .16s; }
.reveal-delay-3 { transition-delay: .24s; }
.reveal-delay-4 { transition-delay: .32s; }

/* ─── BENTO GRID ──────────────────────────────────────────────── */
.bento-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; }
.bento-cell {
  background: var(--glass-bg); backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-border); border-radius: var(--radius-sm);
  padding: 16px; box-shadow: var(--glass-shadow);
  position: relative; overflow: hidden; transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s;
}
.bento-cell:hover { transform: translateY(-2px); border-color: var(--border2); box-shadow: 0 14px 44px rgba(0,0,0,0.5); }
.bento-cell::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, transparent, var(--accent), transparent); opacity: .5; }
.bento-val { font-family: var(--font-display); font-size: 27px; font-weight: 800; letter-spacing: -1px; color: var(--text); }
.bento-lbl { font-family: var(--font-mono); font-size: 9.5px; color: var(--muted); text-transform: uppercase; letter-spacing: 1px; font-weight: 600; margin-bottom: 6px; }

/* ─── INFO GRID ───────────────────────────────────────────────── */
.info-grid .info-item { background: rgba(255,255,255,0.03) !important; border: 1px solid var(--glass-border) !important; border-radius: var(--radius-xs) !important; backdrop-filter: blur(12px) !important; }

/* ─── SIDEBAR ─────────────────────────────────────────────────── */
.sidebar { background: rgba(6,10,14,0.55) !important; border-left: 1px solid var(--glass-border) !important; }

/* ─── SCROLLBAR ───────────────────────────────────────────────── */
::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(180,255,60,0.16); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: rgba(180,255,60,0.4); }

/* ─── SELECTION ───────────────────────────────────────────────── */
::selection { background: rgba(180,255,60,0.26); color: #fff; }

/* ─── TABS ────────────────────────────────────────────────────── */
.tabs { border-bottom: 1px solid var(--glass-border) !important; }
.tab { font-family: var(--font-mono) !important; font-size: 11.5px !important; letter-spacing: 0.4px !important; text-transform: uppercase !important; border-radius: var(--radius-xs) var(--radius-xs) 0 0 !important; transition: all 0.2s !important; }
.tab:hover { background: rgba(180,255,60,0.04) !important; }
.tab.active { color: var(--accent) !important; border-bottom-color: var(--accent) !important; text-shadow: 0 0 20px rgba(180,255,60,0.45) !important; }

/* ─── SEMAPHORE ───────────────────────────────────────────────── */
.sem-housing { background: rgba(0,0,0,0.5) !important; border: 1px solid rgba(255,255,255,0.06) !important; border-radius: 100px !important; box-shadow: inset 0 2px 8px rgba(0,0,0,0.5), 0 2px 8px rgba(0,0,0,0.3) !important; }

/* ─── NOTIF CHANNEL CARDS ─────────────────────────────────────── */
#notifEmailCard, #notifWaCard { border-radius: var(--radius-sm) !important; transition: all 0.2s !important; }

/* ─── LOGIN CARD ──────────────────────────────────────────────── */
.card.login-card, .card { box-shadow: var(--glass-shadow) !important; }

/* ─── EMPTY STATE ─────────────────────────────────────────────── */
.empty-icon { filter: drop-shadow(0 4px 16px rgba(180,255,60,0.22)); }
.empty-title { letter-spacing: -0.4px !important; }

/* ─── PROGRESS STEPS ──────────────────────────────────────────── */
.progress-steps .step.done { text-shadow: 0 0 12px rgba(180,255,60,0.32); }
.progress-steps .step.active { text-shadow: 0 0 12px rgba(180,255,60,0.32); }

/* ─── APP PAGE (hidden until landing exit) ────────────────────── */
#appPage { display: none; }

/* ─── GLASS MAP LEFT PANEL ────────────────────────────────────── */
.left {
  background: rgba(6,10,14,0.86) !important;
  backdrop-filter: blur(26px) saturate(150%) !important;
  -webkit-backdrop-filter: blur(26px) saturate(150%) !important;
  border-right: 1px solid var(--glass-border) !important;
}

/* ─── SERVICE CARDS ───────────────────────────────────────────── */
.svc-card { background: rgba(255,255,255,0.03) !important; border: 1px solid rgba(255,255,255,0.08) !important; border-radius: var(--radius-sm) !important; transition: transform .2s, border-color .2s, box-shadow .2s !important; }
.svc-card:hover { border-color: var(--border2) !important; box-shadow: 0 10px 34px rgba(0,0,0,0.5) !important; transform: translateY(-2px) !important; }
.svc-card.on { border-color: var(--accent) !important; background: rgba(180,255,60,0.06) !important; box-shadow: 0 0 0 2px rgba(180,255,60,0.16), 0 8px 28px rgba(124,221,0,0.2) !important; }
.svc-card-check { background: var(--accent) !important; }

/* ─── ACCENT BUTTONS ──────────────────────────────────────────── */
.btn-next, .btn-cta { background: linear-gradient(135deg, #7CDD00, #B4FF3C) !important; color: #06090c !important; }
.btn-search, .btn-pf-cerca { background: var(--accent2) !important; }

/* ─── APP NAV LOGO (text hidden, image shown) ─────────────────── */
nav .logo { display: none !important; }

#btnRegister {
  background: linear-gradient(135deg, #7CDD00, #B4FF3C) !important; color: #06090c !important;
  border-color: transparent !important;
  box-shadow: 0 2px 12px rgba(180,255,60,0.25) !important;
}

/* ─── CUSTOM CROSSHAIR CURSOR (injected by airis-fx.js) ───────── */
.airis-cursor {
  position: fixed; top: 0; left: 0; z-index: 99999;
  width: 26px; height: 26px; margin: -13px 0 0 -13px;
  pointer-events: none; mix-blend-mode: difference;
  transition: transform .12s var(--ease-out), opacity .2s, width .15s, height .15s;
  opacity: 0;
}
.airis-cursor::before, .airis-cursor::after {
  content: ''; position: absolute; background: var(--accent);
}
.airis-cursor::before { left: 50%; top: 0; width: 1px; height: 100%; transform: translateX(-50%); }
.airis-cursor::after  { top: 50%; left: 0; height: 1px; width: 100%; transform: translateY(-50%); }
.airis-cursor .ring {
  position: absolute; inset: 5px; border: 1px solid var(--accent); border-radius: 50%;
}
.airis-cursor.hot { transform: scale(1.5); }
@media (hover: none), (pointer: coarse) { .airis-cursor { display: none !important; } }

/* ─── GRAIN OVERLAY (injected by airis-fx.js) ─────────────────── */
.airis-grain {
  position: fixed; inset: 0; z-index: 9998; pointer-events: none;
  opacity: 0.05; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ─── TELEMETRY / HUD HELPERS (used on landing + panels) ──────── */
.tlm { font-family: var(--font-mono) !important; font-size: 11px; letter-spacing: 0.5px; color: var(--muted2); }
.tlm .dot { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 8px var(--accent); animation: hudBlink 1.8s infinite; vertical-align: middle; }
.hud-rule { height: 1px; background: linear-gradient(90deg, transparent, var(--border2), transparent); border: 0; }

/* Reduced motion: respect user preference */
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; }
  .reveal { opacity: 1 !important; transform: none !important; }
  .airis-cursor, .airis-grain { display: none !important; }
}

/* ─── MOBILE GLOBAL ───────────────────────────────────────────── */
@media (max-width: 768px) {
  input[type=text], input[type=email], input[type=tel],
  input[type=password], select, textarea { min-height: 44px !important; font-size: 16px !important; }
  .modal { width: calc(100vw - 24px) !important; max-width: 480px !important; margin: 0 auto !important; }
  .toast { right: 12px !important; left: 12px !important; bottom: 16px !important; text-align: center !important; }
  .airis-cursor { display: none !important; }
}
@media (max-width: 480px) {
  .form-row, .fg-row { flex-direction: column !important; gap: 0 !important; }
}

/* ═══════════════════════════════════════════════════════════════
   LANDING (homepage) — override "Aerial Recon" (solo CSS, no JS)
   Caricato DOPO design.css e DOPO lo <style> inline della homepage:
   gli !important vincono sulle regole class-based della landing.
   ═══════════════════════════════════════════════════════════════ */
.land-logo{font-family:var(--font-display)!important;font-stretch:118%;text-transform:uppercase;letter-spacing:.6px!important;}
.land-title{font-family:var(--font-display)!important;font-stretch:115%;text-transform:uppercase;letter-spacing:-1.5px!important;line-height:.98!important;}
.land-stat-val,.land-step-num,.land-final-title,.land-problems-title,.land-section-title{
  font-family:var(--font-display)!important;font-stretch:112%;text-transform:uppercase;}
.land-eyebrow,.land-section-label,.land-problems-label,.land-stat-lbl,.land-problem-tag{
  font-family:var(--font-mono)!important;letter-spacing:2px!important;text-transform:uppercase;}
.land-sub,.land-section-sub,.land-problems-sub,.land-step-desc,.land-problem-desc,.land-problem-teaser,.land-btn-ghost,.land-nav-link{
  font-family:var(--font-body)!important;}
/* eyebrow & nav: bordi netti "strumento" */
.land-eyebrow{border-radius:4px!important;}