/* ═══════════════════════════════════════════════════════════════════════════
   LandTracer — Design System
   Aesthetic: Cartographic Precision — survey-grade clarity, professional authority

   Typography: Outfit (display) + Source Sans 3 (body) + Geist Mono (data)
   Palette: Warm neutral surfaces, sage-teal ink, green/amber data encoding
   ═══════════════════════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Geist+Mono:wght@400;500&family=Outfit:wght@300;400;500;600;700&family=Source+Sans+3:ital,opsz,wght@0,9..65,300..700;1,9..65,400&display=swap');

:root {
  color-scheme: light;
  --bg-page:           #F7F6F3;
  --bg-canvas:         #EDECE8;
  --bg-surface:        #FFFFFF;
  --bg-surface-raised: #FFFFFF;
  --bg-hover:          #F0EEEB;
  --bg-active:         #E8E6E2;
  --bg-overlay:        rgba(12, 14, 20, 0.5);
  --ink-primary:       #1A1D23;
  --ink-secondary:     #4A4D54;
  --ink-tertiary:      #7A7D84;
  --ink-muted:         #9A9DA4;
  --ink-faint:         #C0C2C8;
  --brand-primary:     #2B579A;
  --brand-primary-dark: #214478;
  --brand-primary-light:#3567B2;
  --brand-primary-subtle: rgba(43, 87, 154, 0.08);
  --topbar-height:     54px;
  --ribbon-height:     40px;
  --topbar-bg:         #FFFFFF;
  --topbar-border:     #D1D5DA;
  --brand-cta:         #217346;
  --brand-cta-light:   #2B9159;
  --brand-cta-subtle:  rgba(33, 115, 70, 0.10);
  --brand-ribbon:      #F7F8FA;
  --brand-ribbon-border: #D1D5DA;
  --panel-bg:          #F0F2F5;
  --panel-bg-header:   #E1E4E8;
  --panel-border:      #D1D5DA;
  --panel-border-subtle: #E1E4E8;
  --panel-hover:       #EBEEF2;
  --panel-input-bg:    #FFFFFF;
  --brand-sage:        #4F6461;
  --brand-sage-light:  #6B8380;
  --brand-sage-subtle: rgba(79, 100, 97, 0.08);
  --color-vacant:      #1B7543;
  --color-vacant-bg:   #E6F4EA;
  --color-improved:    #A66100;
  --color-improved-bg: #FFF4E5;
  --color-accent:      #0366D6;
  --color-accent-bg:   #F1F8FF;
  --border-default:    #D1D5DA;
  --border-subtle:     #E1E4E8;
  --border-strong:     #959DA5;
  --font-display:      'Outfit', -apple-system, sans-serif;
  --font-body:         'Source Sans 3', -apple-system, sans-serif;
  --font-mono:         'Geist Mono', 'SF Mono', monospace;
  --text-xs:   0.75rem;
  --text-sm:   0.8125rem;
  --text-base: 0.9375rem;
  --text-lg:   1.125rem;
  --text-xl:   1.375rem;
  --text-2xl:  1.75rem;
  --text-3xl:  2.5rem;
  --text-4xl:  3.5rem;
  --text-5xl:  4.5rem;
  --sp-1:  4px; --sp-2:  8px; --sp-3:  12px; --sp-4:  16px;
  --sp-5:  20px; --sp-6:  24px; --sp-8:  32px; --sp-10: 40px;
  --sp-12: 48px; --sp-16: 64px; --sp-20: 80px; --sp-24: 96px;
  --radius-sm: 2px; --radius-md: 4px; --radius-lg: 6px;
  --shadow-sm:   0 1px 2px rgba(0,0,0,0.04);
  --shadow-md:   0 2px 8px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04);
  --shadow-lg:   0 4px 24px rgba(0,0,0,0.08), 0 2px 6px rgba(0,0,0,0.04);
  --shadow-card: 0 1px 3px rgba(0,0,0,0.04), 0 0 0 1px rgba(0,0,0,0.03);
  --ease-out:  cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in:   cubic-bezier(0.55, 0, 1, 0.45);
  --ease-panel: cubic-bezier(0.2, 0, 0, 1);
  --duration:  180ms;
  --duration-panel: 200ms;
  --drawer-width: 400px;
}

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

html {
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

body {
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: 1.6;
  color: var(--ink-primary);
  background: var(--bg-page);
}

a { color: var(--brand-sage); text-decoration: none; }
a:hover { color: var(--ink-primary); }
img, svg { display: block; max-width: 100%; }
button { font: inherit; cursor: pointer; border: none; background: none; color: inherit; }
input { font: inherit; border: none; background: none; outline: none; color: inherit; }

.topo-bg { position: relative; }
.topo-bg::before {
  content: '';
  position: absolute;
  inset: 0;
  opacity: 0.025;
  background-image: repeating-conic-gradient(from 0deg at 50% 50%, transparent 0deg 88deg, var(--brand-sage) 88deg 92deg, transparent 92deg 360deg);
  background-size: 200px 200px;
  pointer-events: none;
  z-index: 0;
}

.nav { position: fixed; top: 0; left: 0; right: 0; z-index: 100; height: var(--topbar-height); padding: 0 var(--sp-6); display: flex; align-items: center; justify-content: space-between; background: var(--topbar-bg); border-bottom: 1px solid var(--topbar-border); box-shadow: 0 1px 0 rgba(26, 29, 35, 0.04); }
.nav-logo, .map-toolbar-logo { display: flex; align-items: center; gap: 0; font-family: var(--font-display); font-weight: 900; font-size: 23px; color: #050608; letter-spacing: -0.03em; text-decoration: none; }
.nav-logo:hover, .map-toolbar-logo:hover { color: #050608; }
.nav-links { display: flex; align-items: center; gap: var(--sp-1); list-style: none; }
.nav-links a { display: inline-flex; align-items: center; justify-content: center; height: 32px; padding: 0 11px; border: 1px solid transparent; border-radius: var(--radius-md); font-size: var(--text-sm); font-weight: 500; color: var(--ink-tertiary); letter-spacing: 0.015em; transition: color var(--duration), background var(--duration), border-color var(--duration); }
.nav-links a:hover { color: var(--ink-secondary); background: #F7F8FA; border-color: transparent; }
.nav-links a:focus-visible { outline: 2px solid var(--brand-primary); outline-offset: 2px; }
.nav-cta { padding: 0 var(--sp-3); background: #FFFFFF; color: var(--ink-primary) !important; border-color: #C8CFD8; font-weight: 600; letter-spacing: 0.01em; transition: background var(--duration), border-color var(--duration), box-shadow var(--duration); box-shadow: 0 1px 0 rgba(26, 29, 35, 0.04); }
.nav-cta:hover { background: #F7F9FC; color: var(--ink-primary) !important; border-color: #AEB7C2; box-shadow: none; }

.hero { padding: calc(var(--sp-24) + var(--topbar-height) + var(--sp-2)) var(--sp-8) var(--sp-24); max-width: 1200px; margin: 0 auto; position: relative; z-index: 1; }
.hero-eyebrow { display: inline-flex; align-items: center; gap: var(--sp-2); padding: var(--sp-1) var(--sp-4) var(--sp-1) var(--sp-3); background: var(--color-vacant-bg); border: 1px solid rgba(45, 155, 90, 0.15); border-radius: 100px; font-family: var(--font-mono); font-size: var(--text-xs); font-weight: 500; color: var(--color-vacant); letter-spacing: 0.04em; text-transform: uppercase; margin-bottom: var(--sp-8); animation: fadeUp 0.8s var(--ease-out) both; }
.hero-eyebrow .dot { width: 6px; height: 6px; background: var(--color-vacant); border-radius: 50%; animation: pulse 2s ease-in-out infinite; }
.hero-title { font-family: var(--font-display); font-size: var(--text-5xl); font-weight: 700; line-height: 1.05; letter-spacing: -0.025em; color: var(--ink-primary); max-width: 800px; margin-bottom: var(--sp-8); animation: fadeUp 0.8s var(--ease-out) 0.1s both; }
.hero-title em { font-style: normal; font-weight: 300; color: var(--brand-sage); }
.hero-subtitle { font-size: var(--text-xl); font-weight: 300; line-height: 1.5; color: var(--ink-secondary); max-width: 560px; margin-bottom: var(--sp-10); animation: fadeUp 0.8s var(--ease-out) 0.2s both; }
.hero-actions { display: flex; align-items: center; gap: var(--sp-4); animation: fadeUp 0.8s var(--ease-out) 0.3s both; }

.btn-primary { display: inline-flex; align-items: center; gap: var(--sp-2); padding: var(--sp-3) var(--sp-6); background: var(--ink-primary); color: #FFFFFF; border-radius: var(--radius-md); font-size: var(--text-base); font-weight: 500; letter-spacing: -0.01em; transition: all var(--duration) var(--ease-out); box-shadow: 0 1px 2px rgba(0,0,0,0.1); }
.btn-primary:hover { background: #2D3038; transform: translateY(-1px); box-shadow: 0 4px 12px rgba(0,0,0,0.12); }
.btn-primary svg { width: 16px; height: 16px; }
.btn-secondary { display: inline-flex; align-items: center; gap: var(--sp-2); padding: var(--sp-3) var(--sp-6); background: transparent; color: var(--ink-secondary); border: 1px solid var(--border-default); border-radius: var(--radius-md); font-size: var(--text-base); font-weight: 500; transition: all var(--duration) var(--ease-out); }
.btn-secondary:hover { background: var(--bg-hover); border-color: var(--border-strong); color: var(--ink-primary); }

.stats-bar { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--border-default); border: 1px solid var(--border-default); border-radius: var(--radius-lg); overflow: hidden; max-width: 720px; margin: var(--sp-16) auto 0; animation: fadeUp 0.8s var(--ease-out) 0.4s both; }
.stat-item { background: var(--bg-surface); padding: var(--sp-5) var(--sp-6); text-align: center; }
.stat-value { font-family: var(--font-mono); font-size: var(--text-xl); font-weight: 500; color: var(--ink-primary); letter-spacing: -0.02em; }
.stat-label { font-size: var(--text-xs); color: var(--ink-tertiary); text-transform: uppercase; letter-spacing: 0.06em; margin-top: var(--sp-1); }

.map-preview { max-width: 1200px; margin: var(--sp-20) auto; padding: 0 var(--sp-8); animation: fadeUp 0.8s var(--ease-out) 0.5s both; }
.map-preview-grid { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(280px, 0.9fr); gap: var(--sp-6); }
.map-preview-frame { position: relative; border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--border-default); box-shadow: var(--shadow-lg); aspect-ratio: 16 / 9; background: var(--bg-canvas); cursor: pointer; transition: box-shadow 0.3s var(--ease-out); }
.map-preview-frame:hover { box-shadow: 0 8px 40px rgba(0,0,0,0.12), 0 2px 8px rgba(0,0,0,0.06); }
.map-preview-frame--atlas { background: linear-gradient(160deg, #f5f1e8 0%, #eef1f6 100%); }
.map-preview-frame img { width: 100%; height: 100%; object-fit: cover; }
.map-preview-overlay { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--sp-4); background: linear-gradient(180deg, rgba(12, 14, 20, 0) 0%, rgba(12, 14, 20, 0.3) 50%, rgba(12, 14, 20, 0.6) 100%); opacity: 0; transition: opacity 0.3s var(--ease-out); }
.map-preview-frame:hover .map-preview-overlay { opacity: 1; }
.map-preview-cta { display: inline-flex; align-items: center; gap: var(--sp-2); padding: var(--sp-3) var(--sp-8); background: #FFFFFF; color: var(--ink-primary); border-radius: var(--radius-md); font-weight: 500; font-size: var(--text-base); box-shadow: var(--shadow-md); transition: transform 80ms; }
.map-preview-cta:hover { transform: scale(1.02); }

.map-placeholder { width: 100%; height: 100%; background: linear-gradient(135deg, #E8E6E2 25%, transparent 25%) -50px 0, linear-gradient(225deg, #E8E6E2 25%, transparent 25%) -50px 0, linear-gradient(315deg, #E8E6E2 25%, transparent 25%), linear-gradient(45deg, #E8E6E2 25%, transparent 25%); background-size: 100px 100px; background-color: #F0EEEB; display: flex; align-items: center; justify-content: center; }
.map-placeholder--atlas { background: radial-gradient(circle at 20% 20%, rgba(43, 87, 154, 0.08), transparent 32%), radial-gradient(circle at 80% 24%, rgba(33, 115, 70, 0.09), transparent 28%), linear-gradient(135deg, rgba(255,255,255,0.7), rgba(237, 236, 232, 0.95)); }
.map-placeholder-inner { text-align: center; color: var(--ink-tertiary); }
.map-placeholder-inner svg { width: 64px; height: 64px; margin: 0 auto var(--sp-4); opacity: 0.4; }
.map-placeholder-inner p { font-size: var(--text-sm); font-weight: 500; }

.features { max-width: 1200px; margin: 0 auto; padding: var(--sp-24) var(--sp-8); }
.features-header { text-align: center; margin-bottom: var(--sp-16); }
.features-eyebrow { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--color-accent); text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: var(--sp-3); }
.features-title { font-family: var(--font-display); font-size: var(--text-3xl); font-weight: 600; color: var(--ink-primary); letter-spacing: -0.02em; }
.features-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-6); }
.feature-card { padding: var(--sp-8); background: var(--bg-surface); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); transition: all 0.25s var(--ease-out); }
.feature-card:hover { border-color: var(--border-default); box-shadow: var(--shadow-md); transform: translateY(-2px); }
.feature-icon { width: 40px; height: 40px; border-radius: var(--radius-md); display: flex; align-items: center; justify-content: center; margin-bottom: var(--sp-5); }
.feature-icon svg { width: 20px; height: 20px; }
.feature-icon--green  { background: var(--color-vacant-bg); color: var(--color-vacant); }
.feature-icon--amber  { background: var(--color-improved-bg); color: var(--color-improved); }
.feature-icon--blue   { background: var(--color-accent-bg); color: var(--color-accent); }
.feature-icon--sage   { background: var(--brand-sage-subtle); color: var(--brand-sage); }
.feature-title { font-size: var(--text-lg); font-weight: 600; margin-bottom: var(--sp-2); letter-spacing: -0.01em; }
.feature-desc { font-size: var(--text-sm); color: var(--ink-secondary); line-height: 1.65; }
.feature-source { margin-top: var(--sp-4); padding-top: var(--sp-3); border-top: 1px solid var(--border-subtle); font-family: var(--font-mono); font-size: 11px; color: var(--ink-muted); letter-spacing: 0.02em; }

.roi-section { max-width: 1200px; margin: 0 auto; padding: var(--sp-20) var(--sp-8); }
.roi-card { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-16); align-items: center; padding: var(--sp-16); background: var(--ink-primary); border-radius: var(--radius-lg); color: #FFFFFF; overflow: hidden; position: relative; }
.roi-card::before { content: ''; position: absolute; top: -100px; right: -100px; width: 400px; height: 400px; background: radial-gradient(circle, rgba(45, 155, 90, 0.1) 0%, transparent 70%); pointer-events: none; }
.roi-eyebrow { font-family: var(--font-mono); font-size: var(--text-xs); color: rgba(255,255,255,0.5); text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: var(--sp-4); }
.roi-title { font-family: var(--font-display); font-size: var(--text-3xl); font-weight: 600; line-height: 1.15; margin-bottom: var(--sp-6); letter-spacing: -0.02em; }
.roi-body { font-size: var(--text-base); color: rgba(255,255,255,0.7); line-height: 1.65; }
.roi-body strong { color: #FFFFFF; font-weight: 600; }
.roi-number { text-align: center; position: relative; z-index: 1; }
.roi-number .big { font-family: var(--font-mono); font-size: 72px; font-weight: 500; color: var(--color-vacant); letter-spacing: -0.04em; line-height: 1; }
.roi-number .label { font-size: var(--text-sm); color: rgba(255,255,255,0.5); margin-top: var(--sp-2); }

.footer { max-width: 1200px; margin: 0 auto; padding: var(--sp-12) var(--sp-8); border-top: 1px solid var(--border-default); display: flex; align-items: center; justify-content: space-between; }
.footer-left { display: flex; align-items: center; gap: var(--sp-3); font-size: var(--text-sm); color: var(--ink-tertiary); }
.footer-left svg { width: 20px; height: 20px; }
.footer-right { font-family: var(--font-mono); font-size: 11px; color: var(--ink-muted); letter-spacing: 0.02em; }

/* Map page */
.map-shell { position: fixed; inset: 0; display: grid; --topbar-height: 44px; grid-template-rows: var(--topbar-height) 1fr; grid-template-columns: 1fr; background: var(--bg-canvas); }
.map-toolbar { display: flex; align-items: center; gap: var(--sp-4); height: var(--topbar-height); padding: 0 var(--sp-5); background: #000000; border-bottom: 1px solid #000000; z-index: 10; }
.map-toolbar-logo, .map-toolbar-logo:hover { color: #FFFFFF !important; }

.map-search { position: relative; flex: 0 1 360px; display: block; }
.map-search-input { width: 100%; height: 30px; padding: 0 var(--sp-3) 0 var(--sp-8); background: #FFFFFF; border: 1px solid var(--brand-ribbon-border); border-radius: var(--radius-sm); font-size: 13px; color: var(--ink-primary); }
.map-search-input::placeholder { color: var(--ink-muted); }
.map-search-input:focus { border-color: var(--brand-primary); box-shadow: 0 0 0 2px var(--brand-primary-subtle); outline: none; }
.map-search-icon { position: absolute; left: var(--sp-2); top: 50%; transform: translateY(-50%); width: 14px; height: 14px; color: var(--ink-muted); pointer-events: none; }
.map-search-clear { position: absolute; right: var(--sp-1); top: 50%; transform: translateY(-50%); width: 22px; height: 22px; display: flex; align-items: center; justify-content: center; color: var(--ink-muted); border-radius: var(--radius-sm); opacity: 0; }
.map-search-input:not(:placeholder-shown) ~ .map-search-clear { opacity: 1; }
.map-search-clear:hover { background: var(--bg-active); color: var(--ink-secondary); }

.search-results { position: absolute; top: calc(100% + 4px); left: 0; right: 0; background: var(--bg-surface); border: 1px solid var(--border-default); border-radius: var(--radius-md); box-shadow: var(--shadow-lg); max-height: 320px; overflow-y: auto; display: none; z-index: 50; }
.search-results.open { display: block; }
.search-option { display: grid; grid-template-columns: 1fr auto; gap: var(--sp-1) var(--sp-3); width: 100%; padding: var(--sp-3) var(--sp-4); text-align: left; border-bottom: 1px solid var(--border-subtle); transition: background var(--duration); }
.search-option:last-child { border-bottom: none; }
.search-option:hover, .search-option.is-active { background: var(--bg-hover); }
.search-option strong { font-size: var(--text-sm); font-weight: 500; grid-column: 1; }
.search-option code { font-family: var(--font-mono); font-size: 11px; color: var(--ink-muted); grid-column: 1; }
.search-status { padding: var(--sp-3) var(--sp-4); font-size: var(--text-xs); color: var(--ink-tertiary); }
.search-status--error { color: #A52834; }

.toolbar-spacer { flex: 1; }
.map-container { width: 100%; height: 100%; position: relative; overflow: hidden; }
.map-canvas { width: 100%; height: 100%; }

.parcel-preview { position: absolute; pointer-events: none; z-index: 30; background: var(--bg-surface); border: 1px solid var(--border-default); border-radius: var(--radius-md); box-shadow: var(--shadow-md); padding: var(--sp-3) var(--sp-4); max-width: 260px; opacity: 0; transition: opacity 100ms; }
.parcel-preview.is-visible { opacity: 1; }
.parcel-preview-address { font-size: var(--text-sm); font-weight: 500; margin-bottom: 2px; }
.parcel-preview-meta { font-size: var(--text-xs); color: var(--ink-tertiary); }

@keyframes fadeUp { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } }
@keyframes slideIn { from { opacity: 0; transform: translateX(8px); } to { opacity: 1; transform: translateX(0); } }

@media (max-width: 768px) {
  .hero-title { font-size: var(--text-3xl); }
  .hero-subtitle { font-size: var(--text-base); }
  .stats-bar { grid-template-columns: repeat(2, 1fr); }
  .map-preview-grid { grid-template-columns: 1fr; }
  .features-grid { grid-template-columns: 1fr; }
  .roi-card { grid-template-columns: 1fr; }
  .nav-links { display: none; }
  .map-search { flex: 1 1 auto; max-width: 320px; }
}

@media (max-width: 480px) {
  .hero { padding-left: var(--sp-5); padding-right: var(--sp-5); }
  .hero-title { font-size: var(--text-2xl); }
  .hero-actions { flex-direction: column; align-items: stretch; }
  .map-search { max-width: none; }
  .map-search-input { font-size: 12px; }
  .map-preview { padding: 0 var(--sp-5); }
}

.maplibregl-ctrl-bottom-left, .maplibregl-ctrl-bottom-right { z-index: 5; }
.maplibregl-ctrl-attrib { font-size: 10px !important; }