* { box-sizing: border-box; }
html, body { height: 100%; }
body {
    font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
    background: #070A12;
    color: #EAF0FF;
    position: relative;
    overflow-x: hidden;
}
.app-bg {
    position: fixed;
    inset: 0;
    background:
        radial-gradient(900px 500px at 15% 10%, rgba(85, 160, 255, 0.22), transparent 60%),
        radial-gradient(900px 500px at 85% 20%, rgba(118, 255, 196, 0.14), transparent 60%),
        radial-gradient(900px 500px at 55% 85%, rgba(196, 112, 255, 0.18), transparent 60%),
        linear-gradient(180deg, #05060A 0%, #070A12 100%);
    z-index: -1;
}
.navbar { background: rgba(9, 12, 22, 0.55); backdrop-filter: blur(16px); border-bottom: 1px solid rgba(255,255,255,0.08); }
.brand-logo { height: 34px; width: auto; border-radius: 8px; }
.brand-logo-sm { height: 22px; border-radius: 6px; }
.brand-dot { width: 12px; height: 12px; border-radius: 999px; background: linear-gradient(135deg, #4EA1FF, #38E6B5); display: inline-block; }

.glass-card {
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.10);
    box-shadow: 0 18px 60px rgba(0, 0, 0, 0.35);
    backdrop-filter: blur(18px);
    border-radius: 18px;
}
.muted { color: rgba(234, 240, 255, 0.72); }
.form-control, .form-select {
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.14);
    color: #EAF0FF;
}
.form-control:focus, .form-select:focus {
    border-color: rgba(78, 161, 255, 0.55);
    box-shadow: 0 0 0 .25rem rgba(78, 161, 255, 0.15);
    background: rgba(255,255,255,0.07);
    color: #EAF0FF;
}
.form-control::placeholder { color: rgba(234, 240, 255, 0.55); }
.btn-primary {
    border: none;
    background: linear-gradient(135deg, #4EA1FF, #38E6B5);
    color: #06101A;
    font-weight: 700;
}
.btn-outline-light { border-color: rgba(255,255,255,0.18); }
.btn-outline-light:hover { background: rgba(255,255,255,0.08); }
.badge-soft {
    background: rgba(78, 161, 255, 0.16);
    border: 1px solid rgba(78, 161, 255, 0.26);
    color: rgba(234,240,255,0.92);
}

.stepper {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
}
.step {
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.10);
    border-radius: 14px;
    padding: 12px 12px;
    position: relative;
}
.step.active { border-color: rgba(78, 161, 255, 0.45); background: rgba(78, 161, 255, 0.10); }
.step.complete { border-color: rgba(56, 230, 181, 0.45); background: rgba(56, 230, 181, 0.08); }
.step .label { font-size: 12px; color: rgba(234, 240, 255, 0.70); }
.step .title { font-weight: 700; font-size: 14px; }

.map-shell {
    border-radius: 18px;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,0.10);
    background: rgba(0,0,0,0.15);
}
#map { width: 100%; height: clamp(320px, 55vh, 520px); }
@media (max-width: 575.98px) {
    #map { height: clamp(320px, 52vh, 460px); }
    .stepper { grid-template-columns: 1fr; }
}

.loading-overlay {
    position: fixed;
    inset: 0;
    background: rgba(4, 5, 8, 0.72);
    backdrop-filter: blur(12px);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 9999;
}
.loading-overlay.show { display: flex; }
.loader-card { width: min(560px, 92vw); }
.shimmer {
    height: 10px;
    border-radius: 999px;
    background: linear-gradient(90deg, rgba(255,255,255,0.05), rgba(255,255,255,0.20), rgba(255,255,255,0.05));
    background-size: 200% 100%;
    animation: shimmer 1.2s infinite;
}
@keyframes shimmer { 0% { background-position: 0% 0; } 100% { background-position: 200% 0; } }

.chatbot {
    position: fixed;
    right: 18px;
    bottom: 18px;
    z-index: 9998;
}
.chatbot-panel {
    width: min(390px, 92vw);
    height: min(560px, 70vh);
    display: none;
    flex-direction: column;
}
.chatbot-panel.show { display: flex; }
.chat-messages { overflow: auto; padding: 14px; }
.chat-bubble {
    padding: 10px 12px;
    border-radius: 14px;
    border: 1px solid rgba(255,255,255,0.10);
    margin-bottom: 10px;
    white-space: pre-wrap;
}
.chat-bubble.user { background: rgba(78, 161, 255, 0.12); border-color: rgba(78, 161, 255, 0.22); }
.chat-bubble.ai { background: rgba(56, 230, 181, 0.08); border-color: rgba(56, 230, 181, 0.18); }

.before-after {
    position: relative;
    width: 100%;
    border-radius: 18px;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,0.10);
    background: rgba(0,0,0,0.15);
}
.before-after-img { display: block; width: 100%; height: auto; }
.before-after-after {
    position: absolute;
    inset: 0;
    overflow: hidden;
    border-right: 2px solid rgba(255,255,255,0.65);
}
.before-after-range {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: ew-resize;
}
.before-after-handle {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 2px;
    background: rgba(255,255,255,0.75);
    left: 55%;
    transform: translateX(-1px);
    pointer-events: none;
}
.before-after-handle::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 44px;
    height: 44px;
    border-radius: 999px;
    transform: translate(-50%, -50%);
    background: rgba(9, 12, 22, 0.72);
    border: 1px solid rgba(255,255,255,0.22);
    box-shadow: 0 12px 30px rgba(0,0,0,0.45);
}
.zone-preview {
    position: relative;
    width: 100%;
    border-radius: 18px;
    overflow: hidden;
}
.zone-preview img { display: block; width: 100%; height: auto; }
.zone-preview .zone-overlay {
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity 700ms ease;
    mix-blend-mode: screen;
}
.zone-preview .zone-overlay.show { opacity: 1; }
.zone-preview:hover .zone-overlay { opacity: 1; }

@media (max-width: 575.98px) {
    .glass-card { box-shadow: 0 10px 28px rgba(0, 0, 0, 0.30); backdrop-filter: blur(12px); border-radius: 16px; }
    .navbar { backdrop-filter: blur(10px); }
    .chatbot { right: 12px; bottom: 12px; }
}

@media (prefers-reduced-motion: reduce) {
    .shimmer { animation: none; }
    .zone-preview .zone-overlay { transition: none; }
}