/* ==========================================================================
   DESIGN SYSTEM & VARIABLES
   ========================================================================== */
:root {
    /* Color Palette */
    --color-bg-dark: #090d16;
    --color-bg-light: #f5f7fa;
    --color-panel-dark: rgba(15, 23, 42, 0.6);
    --color-panel-light: rgba(255, 255, 255, 0.7);
    --color-border-dark: rgba(255, 255, 255, 0.08);
    --color-border-light: rgba(15, 23, 42, 0.08);
    
    --color-gold: #d1a85e;
    --color-gold-hover: #e5bd73;
    --color-gold-glow: rgba(209, 168, 94, 0.4);
    
    --color-text-primary-dark: #f8fafc;
    --color-text-secondary-dark: #94a3b8;
    --color-text-primary-light: #0f172a;
    --color-text-secondary-light: #475569;
    
    --color-accent-green: #10b981;
    
    /* Layout */
    --header-height: 80px;
    --font-heading: 'Outfit', sans-serif;
    --font-body: 'Inter', sans-serif;
    
    /* Transitions */
    --transition-smooth: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    --transition-fast: all 0.2s ease;
}

/* ==========================================================================
   GLOBAL STYLES & RESET
   ========================================================================== */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: var(--font-body);
    background-color: var(--color-bg-dark);
    color: var(--color-text-primary-dark);
    min-height: 100vh;
    overflow-x: hidden;
    transition: background-color 0.8s ease;
}

/* Theme State Classes */
body.night-mode {
    --bg-img: url('assets/pune_skyline_bg.png');
    --text-primary: var(--color-text-primary-dark);
    --text-secondary: var(--color-text-secondary-dark);
    --panel-bg: var(--color-panel-dark);
    --panel-border: var(--color-border-dark);
}

body.day-mode {
    --bg-img: url('assets/pune_skyline_bg.png'); /* We can tint it or swap it */
    --text-primary: var(--color-text-primary-light);
    --text-secondary: var(--color-text-secondary-light);
    --panel-bg: var(--color-panel-light);
    --panel-border: var(--color-border-light);
}

/* Background Setup */
.bg-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: var(--bg-img);
    background-size: cover;
    background-position: center;
    z-index: -2;
    transition: var(--transition-smooth);
}

/* Overlay gradient for cinematic look */
.bg-overlay::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, rgba(9, 13, 22, 0.95) 0%, rgba(9, 13, 22, 0.75) 50%, rgba(9, 13, 22, 0.9) 100%);
    z-index: -1;
    transition: var(--transition-smooth);
}

body.day-mode .bg-overlay::before {
    background: linear-gradient(135deg, rgba(245, 247, 250, 0.92) 0%, rgba(245, 247, 250, 0.7) 50%, rgba(245, 247, 250, 0.88) 100%);
}

/* Scrollbar styling */
::-webkit-scrollbar {
    width: 6px;
}
::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.3);
}
::-webkit-scrollbar-thumb {
    background: var(--color-gold);
    border-radius: 3px;
}

/* ==========================================================================
   REUSABLE UI COMPONENTS
   ========================================================================== */
.btn {
    font-family: var(--font-heading);
    font-weight: 500;
    font-size: 14px;
    padding: 12px 24px;
    border-radius: 30px;
    border: none;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: var(--transition-smooth);
    letter-spacing: 0.5px;
}

.btn-primary {
    background-color: var(--color-gold);
    color: #000;
}

.btn-primary:hover {
    background-color: var(--color-gold-hover);
    transform: translateY(-2px);
    box-shadow: 0 4px 15px var(--color-gold-glow);
}

.btn-outline {
    background-color: transparent;
    border: 1px solid var(--color-gold);
    color: var(--color-gold);
}

.btn-outline:hover {
    background-color: var(--color-gold);
    color: #000;
    transform: translateY(-2px);
}

.btn-gold {
    background: linear-gradient(90deg, #c5a880 0%, #d1a85e 100%);
    color: #000;
    font-weight: 600;
}

.btn-gold:hover {
    background: linear-gradient(90deg, #d1a85e 0%, #e5bd73 100%);
    transform: translateY(-2px);
    box-shadow: 0 4px 15px var(--color-gold-glow);
}

.btn-block {
    display: flex;
    width: 100%;
}

.icon-right {
    margin-left: 8px;
}

/* Glassmorphism Panel style */
.glass-panel {
    background: var(--panel-bg);
    backdrop-filter: blur(16px) saturate(180%);
    -webkit-backdrop-filter: blur(16px) saturate(180%);
    border: 1px solid var(--panel-border);
    border-radius: 16px;
}

/* ==========================================================================
   HEADER / NAVBAR
   ========================================================================== */
header {
    height: var(--header-height);
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 4%;
    position: relative;
    z-index: 10;
    border-bottom: 1px solid var(--panel-border);
}

.logo {
    display: flex;
    align-items: center;
    gap: 12px;
}

.logo-icon {
    font-size: 28px;
    color: var(--color-gold);
}

.logo-text h1 {
    font-family: var(--font-heading);
    font-size: 22px;
    font-weight: 700;
    letter-spacing: 2px;
    line-height: 1;
}

.logo-text span {
    font-size: 9px;
    letter-spacing: 4px;
    color: var(--color-gold);
    font-weight: 500;
}

nav {
    display: flex;
    gap: 30px;
}

nav a {
    text-decoration: none;
    font-family: var(--font-heading);
    font-size: 14px;
    font-weight: 500;
    color: var(--text-secondary);
    position: relative;
    padding: 8px 0;
    transition: var(--transition-fast);
}

nav a:hover, nav a.active {
    color: var(--color-gold);
}

nav a::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 2px;
    background-color: var(--color-gold);
    transition: var(--transition-fast);
}

nav a.active::after, nav a:hover::after {
    width: 100%;
}

nav a.accent {
    color: var(--color-gold);
}

.header-actions {
    display: flex;
    align-items: center;
    gap: 15px;
}

.mobile-menu-btn {
    display: none;
    background: none;
    border: none;
    color: #fff;
    font-size: 24px;
    cursor: pointer;
}

/* ==========================================================================
   LANDING PAGE HERO LAYOUT
   ========================================================================== */
.hero-container {
    display: flex;
    justify-content: space-between;
    padding: 2% 4%;
    height: calc(100vh - var(--header-height) - 100px); /* Adjust for footer stats */
    align-items: center;
    gap: 20px;
    position: relative;
    z-index: 1;
}

/* Left Column Styling */
.hero-left {
    width: 25%;
    display: flex;
    flex-direction: column;
    gap: 20px;
    animation: fadeIn 1s ease-out;
}

.badge-title {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    align-self: flex-start;
    padding: 6px 14px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    background-color: rgba(209, 168, 94, 0.15);
    border: 1px solid rgba(209, 168, 94, 0.3);
    color: var(--color-gold);
}

.hero-heading {
    font-family: var(--font-heading);
    font-size: 56px;
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -0.5px;
}

.hero-description {
    font-size: 15px;
    color: var(--text-secondary);
    line-height: 1.6;
}

#explore-views-btn {
    align-self: flex-start;
    padding: 14px 28px;
}

/* Drone Preview Card */
.drone-thumbnail {
    margin-top: 20px;
    width: 100%;
    height: 90px;
    border-radius: 12px;
    position: relative;
    background-image: url('assets/pune_skyline_bg.png');
    background-size: cover;
    background-position: center;
    border: 1px solid rgba(255, 255, 255, 0.1);
    overflow: hidden;
    cursor: pointer;
    display: flex;
    align-items: flex-end;
    padding: 12px;
    transition: var(--transition-smooth);
}

.drone-thumbnail::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(180deg, rgba(9, 13, 22, 0) 0%, rgba(9, 13, 22, 0.8) 100%);
    z-index: 1;
}

.drone-thumbnail:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4);
    border-color: var(--color-gold);
}

.thumbnail-overlay {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 32px;
    height: 32px;
    background: rgba(209, 168, 94, 0.9);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #000;
    font-size: 12px;
    z-index: 2;
    transition: var(--transition-smooth);
}

.drone-thumbnail:hover .thumbnail-overlay {
    background: #fff;
    transform: translate(-50%, -50%) scale(1.1);
}

.thumbnail-info {
    position: relative;
    z-index: 2;
}

.thumbnail-info h4 {
    font-family: var(--font-heading);
    font-size: 13px;
    font-weight: 600;
    margin-bottom: 2px;
}

.thumbnail-info span {
    font-size: 10px;
    color: #94a3b8;
}

/* Center Column Styling: The Building */
.hero-center {
    width: 50%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.building-wrapper {
    height: 100%;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    /* Limit building width relative to screen */
    max-width: 320px;
}

.building-image {
    height: auto;
    max-height: calc(100vh - var(--header-height) - 150px);
    object-fit: contain;
    filter: brightness(0.85) contrast(1.05);
    transition: var(--transition-smooth);
    user-select: none;
}

/* Interactive Overlay */
.floors-overlay {
    position: absolute;
    top: 6%;
    left: 17%;
    width: 66%;
    height: 87.5%;
    display: flex;
    flex-direction: column;
    z-index: 5;
}

.floor-row {
    height: 4%; /* Exactly 1/25th of height */
    width: 100%;
    cursor: pointer;
    position: relative;
    border: 1px solid transparent;
    border-radius: 2px;
    transition: var(--transition-fast);
}

/* Floor Row Highlight States */
.floor-row:hover, .floor-row.active {
    background: linear-gradient(90deg, rgba(209, 168, 94, 0.25) 0%, rgba(209, 168, 94, 0.05) 100%);
    border: 1px solid var(--color-gold);
    box-shadow: 0 0 10px rgba(209, 168, 94, 0.2);
}

/* Vertical Floor Slider HUD */
.floor-selector-hud {
    position: absolute;
    left: calc(50% + 150px);
    display: flex;
    align-items: center;
    height: 80%;
    z-index: 5;
}

.slider-track {
    width: 2px;
    height: 100%;
    background: rgba(255, 255, 255, 0.1);
    position: relative;
    margin-right: 15px;
}

.slider-handle {
    position: absolute;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 32px;
    height: 32px;
    background: var(--color-gold);
    color: #000;
    border-radius: 50%;
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 13px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 15px var(--color-gold-glow);
    transition: top 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.floor-numbers {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
    user-select: none;
}

.floor-num-btn {
    font-family: var(--font-heading);
    font-size: 12px;
    font-weight: 500;
    color: var(--text-secondary);
    background: none;
    border: none;
    cursor: pointer;
    transition: var(--transition-fast);
    padding: 2px 5px;
    position: relative;
    text-align: left;
}

.floor-num-btn:hover {
    color: #fff;
}

.floor-num-btn.active {
    color: var(--color-gold);
    font-weight: 700;
    font-size: 14px;
    transform: scale(1.1);
}

/* Leader Lines linking Active Floor to UI */
.leader-line {
    position: absolute;
    right: 48%;
    height: 1px;
    background: linear-gradient(90deg, var(--color-gold) 0%, rgba(209, 168, 94, 0) 100%);
    pointer-events: none;
    z-index: 4;
    transition: var(--transition-smooth);
    opacity: 0.7;
}

/* Right Column Styling */
.hero-right {
    width: 25%;
    display: flex;
    flex-direction: column;
    gap: 30px;
    align-items: flex-end;
    animation: fadeIn 1.2s ease-out;
}

/* Top Widget: Weather & Theme */
.top-widget {
    display: flex;
    flex-direction: column;
    gap: 15px;
    align-items: flex-end;
    width: 100%;
}

.weather-info {
    display: flex;
    align-items: center;
    gap: 12px;
    text-align: right;
}

.weather-icon {
    font-size: 24px;
    color: var(--color-gold);
}

.weather-info .temp {
    font-family: var(--font-heading);
    font-size: 20px;
    font-weight: 700;
    display: block;
}

.weather-info .city {
    font-size: 11px;
    color: var(--text-secondary);
    display: block;
}

.theme-toggles {
    display: flex;
    background: rgba(0, 0, 0, 0.2);
    border: 1px solid var(--panel-border);
    padding: 4px;
    border-radius: 30px;
}

.toggle-btn {
    background: none;
    border: none;
    padding: 8px 16px;
    border-radius: 20px;
    font-family: var(--font-heading);
    font-size: 11px;
    font-weight: 600;
    color: var(--text-secondary);
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
    transition: var(--transition-fast);
}

.toggle-btn:hover {
    color: #fff;
}

.toggle-btn.active {
    background-color: var(--panel-bg);
    color: var(--color-gold);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
}

/* Floor HUD Card */
.floor-hud-card {
    width: 100%;
    background: var(--panel-bg);
    backdrop-filter: blur(16px) saturate(180%);
    -webkit-backdrop-filter: blur(16px) saturate(180%);
    border: 1px solid var(--panel-border);
    border-radius: 20px;
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 20px;
    transition: var(--transition-smooth);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}

.card-header h3 {
    font-family: var(--font-heading);
    font-size: 28px;
    font-weight: 700;
    margin-bottom: 4px;
}

.card-header span {
    font-size: 12px;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.floor-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.floor-tags span {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--panel-border);
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 11px;
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    gap: 6px;
}

/* Preview Image Box */
.floor-preview-box {
    width: 100%;
    height: 140px;
    border-radius: 12px;
    overflow: hidden;
    position: relative;
    cursor: pointer;
    border: 1px solid var(--panel-border);
}

.floor-preview-box img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: var(--transition-smooth);
}

.preview-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(9, 13, 22, 0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 36px;
    color: #fff;
    opacity: 0.8;
    z-index: 2;
    transition: var(--transition-smooth);
}

.floor-preview-box:hover img {
    transform: scale(1.05);
}

.floor-preview-box:hover .preview-overlay {
    opacity: 1;
    background: rgba(9, 13, 22, 0.1);
    color: var(--color-gold);
}

/* ==========================================================================
   BOTTOM STAT BAR
   ========================================================================== */
.bottom-stats {
    height: 100px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 40px;
    background: linear-gradient(180deg, rgba(9, 13, 22, 0) 0%, rgba(9, 13, 22, 0.6) 100%);
    border-top: 1px solid var(--panel-border);
    position: relative;
    z-index: 10;
}

.stat-item {
    display: flex;
    align-items: center;
    gap: 16px;
}

.stat-item i {
    font-size: 24px;
    color: var(--color-gold);
    opacity: 0.8;
}

.stat-item h3 {
    font-family: var(--font-heading);
    font-size: 22px;
    font-weight: 700;
}

.stat-item span {
    font-size: 11px;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    display: block;
}

.stat-divider {
    width: 1px;
    height: 40px;
    background: var(--panel-border);
}

/* ==========================================================================
   TRANSITION LOADER SCREEN
   ========================================================================== */
#loading-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--color-bg-dark);
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.6s ease;
}

#loading-overlay.hidden {
    opacity: 0;
    pointer-events: none;
}

.loader-content {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
}

.spinner-ring {
    width: 64px;
    height: 64px;
    border: 2px solid rgba(209, 168, 94, 0.1);
    border-top: 2px solid var(--color-gold);
    border-radius: 50%;
    position: relative;
    animation: spin 1.2s linear infinite;
}

.spinner-dot {
    position: absolute;
    top: 6px;
    right: 6px;
    width: 6px;
    height: 6px;
    background-color: var(--color-gold);
    border-radius: 50%;
    box-shadow: 0 0 8px var(--color-gold);
}

.loader-content h3 {
    font-family: var(--font-heading);
    font-size: 20px;
    font-weight: 600;
    color: #fff;
    margin-top: 10px;
}

.loader-content p {
    font-size: 12px;
    color: var(--color-text-secondary-dark);
}

/* ==========================================================================
   360° PANORAMA VIEWER OVERLAY
   ========================================================================== */
#viewer-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 50;
    background-color: #000;
    transition: opacity 0.8s ease, transform 0.8s ease;
}

#viewer-overlay.hidden {
    opacity: 0;
    transform: scale(0.95);
    pointer-events: none;
}

/* Pannellum canvas fits screen */
#panorama {
    width: 100%;
    height: 100%;
}

/* Override Pannellum styles to hide native UI and fit themes */
.pnlm-load-box {
    display: none !important; /* Use our custom loader */
}
.pnlm-control-bar {
    display: none !important; /* Hide native controls */
}

/* Custom Styled Hotspot Pins */
.custom-hotspot {
    width: 24px;
    height: 24px;
    position: relative;
    cursor: pointer;
}

.hotspot-pin {
    width: 12px;
    height: 12px;
    background-color: var(--color-gold);
    border: 2px solid #fff;
    border-radius: 50%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    box-shadow: 0 0 10px rgba(0,0,0,0.5), 0 0 0 4px rgba(209, 168, 94, 0.4);
    transition: var(--transition-fast);
}

.custom-hotspot:hover .hotspot-pin {
    background-color: #fff;
    border-color: var(--color-gold);
    transform: translate(-50%, -50%) scale(1.2);
    box-shadow: 0 0 15px var(--color-gold), 0 0 0 6px rgba(255, 255, 255, 0.3);
}

/* Pulse ring */
.custom-hotspot::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 24px;
    height: 24px;
    border: 2px solid var(--color-gold);
    border-radius: 50%;
    opacity: 0.8;
    animation: pulse-ring 2s cubic-bezier(0.215, 0.610, 0.355, 1) infinite;
}

.hotspot-tooltip {
    position: absolute;
    bottom: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%) translateY(5px);
    background: rgba(15, 23, 42, 0.85);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: #fff;
    padding: 6px 12px;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 600;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: var(--transition-fast);
    box-shadow: 0 5px 15px rgba(0,0,0,0.3);
}

.custom-hotspot:hover .hotspot-tooltip {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

/* Left panel HUD in 360 View */
.viewer-left-panel {
    position: absolute;
    top: 40px;
    left: 40px;
    width: 320px;
    background: rgba(9, 13, 22, 0.65);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 20px;
    padding: 28px;
    display: flex;
    flex-direction: column;
    gap: 24px;
    z-index: 60;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
    animation: slideInLeft 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.viewer-left-panel .panel-header h2 {
    font-family: var(--font-heading);
    font-size: 26px;
    font-weight: 700;
    color: #fff;
    margin-bottom: 4px;
}

.viewer-left-panel .panel-header span {
    font-size: 11px;
    color: #94a3b8;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.viewer-theme-toggles {
    display: flex;
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.05);
    padding: 4px;
    border-radius: 30px;
}

.viewer-toggle-btn {
    flex: 1;
    background: none;
    border: none;
    padding: 10px;
    border-radius: 20px;
    font-family: var(--font-heading);
    font-size: 11px;
    font-weight: 600;
    color: #94a3b8;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    transition: var(--transition-fast);
}

.viewer-toggle-btn:hover {
    color: #fff;
}

.viewer-toggle-btn.active {
    background-color: rgba(255, 255, 255, 0.1);
    color: var(--color-gold);
}

.visibility-checklist h4 {
    font-family: var(--font-heading);
    font-size: 13px;
    font-weight: 600;
    color: #fff;
    margin-bottom: 12px;
}

.visibility-checklist ul {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.visible-item {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 13px;
    color: #94a3b8;
}

.visible-item i {
    color: var(--color-gold);
    width: 16px;
    text-align: center;
}

.back-to-building-btn {
    margin-top: 10px;
}

/* Center Drag helper guide */
.drag-guide {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    pointer-events: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
    z-index: 55;
    opacity: 0.7;
    transition: opacity 1s ease;
}

.drag-guide.fade-out {
    opacity: 0;
}

.drag-icon-container {
    width: 60px;
    height: 60px;
    background: rgba(9, 13, 22, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    color: #fff;
    animation: float 2.5s ease-in-out infinite;
}

.drag-guide span {
    font-family: var(--font-heading);
    font-size: 12px;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: #fff;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
}

/* Right Toolbar in Viewer */
.viewer-right-toolbar {
    position: absolute;
    top: 40px;
    right: 40px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    z-index: 60;
    animation: fadeIn 1s ease-out;
}

.toolbar-btn {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(9, 13, 22, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.08);
    color: #fff;
    font-size: 16px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--transition-fast);
    box-shadow: 0 5px 15px rgba(0,0,0,0.2);
}

.toolbar-btn:hover {
    background-color: var(--color-gold);
    color: #000;
    transform: scale(1.08);
}

/* Bottom Switcher Carousel in Viewer */
.viewer-bottom-carousel {
    position: absolute;
    bottom: 40px;
    left: 50%;
    transform: translateX(-50%);
    width: 700px;
    z-index: 60;
    animation: slideInUp 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.carousel-container {
    background: rgba(9, 13, 22, 0.65);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 20px;
    padding: 16px 24px;
    display: flex;
    align-items: center;
    gap: 20px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
}

.carousel-label {
    text-align: center;
    flex-shrink: 0;
}

.carousel-label span {
    font-size: 10px;
    color: #94a3b8;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    display: block;
}

.carousel-label h3 {
    font-family: var(--font-heading);
    font-size: 26px;
    font-weight: 800;
    color: var(--color-gold);
    line-height: 1;
}

.carousel-divider {
    width: 1px;
    height: 44px;
    background: rgba(255, 255, 255, 0.1);
    flex-shrink: 0;
}

.carousel-track {
    display: flex;
    gap: 12px;
    overflow-x: auto;
    width: 100%;
    padding: 4px 0;
}

.carousel-track::-webkit-scrollbar {
    height: 3px;
}
.carousel-track::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.1);
}

.carousel-card {
    flex: 0 0 85px;
    height: 52px;
    border-radius: 8px;
    overflow: hidden;
    position: relative;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: none;
    cursor: pointer;
    padding: 0;
    transition: var(--transition-fast);
}

.carousel-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.5;
    transition: var(--transition-fast);
}

.carousel-card span {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 14px;
    color: #fff;
    z-index: 2;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.8);
}

.carousel-card:hover {
    border-color: rgba(255, 255, 255, 0.4);
    transform: translateY(-2px);
}

.carousel-card:hover img {
    opacity: 0.7;
}

.carousel-card.active {
    border-color: var(--color-gold);
    box-shadow: 0 0 10px var(--color-gold-glow);
    transform: translateY(-2px);
}

.carousel-card.active img {
    opacity: 0.95;
}

/* ==========================================================================
   DRONE PERSPECTIVE MODAL
   ========================================================================== */
.modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(9, 13, 22, 0.9);
    backdrop-filter: blur(8px);
    z-index: 200;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.4s ease;
}

.modal.hidden {
    opacity: 0;
    pointer-events: none;
}

.modal-content {
    background: #0f172a;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 20px;
    width: 90%;
    max-width: 800px;
    padding: 30px;
    position: relative;
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.5);
    animation: scaleIn 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.modal-close-btn {
    position: absolute;
    top: 20px;
    right: 20px;
    background: none;
    border: none;
    color: #94a3b8;
    font-size: 24px;
    cursor: pointer;
    transition: var(--transition-fast);
}

.modal-close-btn:hover {
    color: #fff;
    transform: scale(1.1);
}

.video-container {
    width: 100%;
    height: 380px;
    border-radius: 12px;
    overflow: hidden;
    position: relative;
    background-color: #000;
    border: 1px solid rgba(255, 255, 255, 0.05);
}

.drone-video-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Drone Flight HUD styling */
.drone-hud-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    padding: 16px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    font-family: monospace;
    font-size: 11px;
    color: #00ff00; /* Neon Green Drone HUD style */
    text-shadow: 0 1px 2px rgba(0,0,0,0.8);
    z-index: 5;
}

.hud-top {
    display: flex;
    justify-content: space-between;
    width: 100%;
}

.hud-center-mark {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1;
}

.hud-crosshair {
    width: 40px;
    height: 40px;
    border: 1px solid rgba(0, 255, 0, 0.4);
    border-radius: 50%;
    position: relative;
}

.hud-crosshair::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 4px;
    height: 4px;
    background-color: #00ff00;
    border-radius: 50%;
}

.hud-bottom {
    display: flex;
    justify-content: space-between;
    width: 100%;
}

.text-green {
    color: #00ff00;
}

.modal-info {
    margin-top: 20px;
}

.modal-info h3 {
    font-family: var(--font-heading);
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 8px;
    color: #fff;
}

.modal-info p {
    font-size: 14px;
    color: #94a3b8;
    line-height: 1.5;
}

/* ==========================================================================
   ANIMATIONS & KEYFRAMES
   ========================================================================== */
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

@keyframes pulse-ring {
    0% { transform: scale(0.6); opacity: 1; }
    100% { transform: scale(1.6); opacity: 0; }
}

@keyframes float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-8px); }
}

@keyframes slideInLeft {
    from { transform: translateX(-50px); opacity: 0; }
    to { transform: translateX(0); opacity: 1; }
}

@keyframes slideInUp {
    from { transform: translate(-50%, 50px); opacity: 0; }
    to { transform: translate(-50%, 0); opacity: 1; }
}

@keyframes scaleIn {
    from { transform: scale(0.92); opacity: 0; }
    to { transform: scale(1); opacity: 1; }
}

/* ==========================================================================
   RESPONSIVE DESIGN (MEDIA QUERIES)
   ========================================================================== */
@media (max-width: 1200px) {
    .hero-heading {
        font-size: 44px;
    }
    .hero-left, .hero-right {
        width: 30%;
    }
    .hero-center {
        width: 40%;
    }
    .floor-selector-hud {
        left: calc(50% + 110px);
    }
    .viewer-bottom-carousel {
        width: 90%;
        max-width: 600px;
    }
}

@media (max-width: 992px) {
    header nav {
        display: none; /* Mobile menu needed */
    }
    .mobile-menu-btn {
        display: block;
    }
    .hero-container {
        flex-direction: column;
        height: auto;
        padding-top: 40px;
        padding-bottom: 40px;
        gap: 50px;
        overflow-y: auto;
    }
    .hero-left, .hero-center, .hero-right {
        width: 100%;
        align-items: center;
        text-align: center;
    }
    .hero-left {
        order: 1;
    }
    .hero-center {
        order: 2;
        height: 60vh;
        margin: 30px 0;
    }
    .hero-right {
        order: 3;
        align-items: center;
    }
    .badge-title {
        align-self: center;
    }
    #explore-views-btn {
        align-self: center;
    }
    .top-widget {
        align-items: center;
    }
    .floor-selector-hud {
        left: calc(50% + 140px);
    }
    .bottom-stats {
        flex-wrap: wrap;
        height: auto;
        padding: 30px 20px;
        gap: 20px;
    }
    .stat-divider {
        display: none;
    }
    .stat-item {
        width: 45%;
        justify-content: center;
    }
    .viewer-left-panel {
        top: 20px;
        left: 20px;
        width: calc(100% - 40px);
        max-height: 250px;
        overflow-y: auto;
        padding: 16px;
        gap: 15px;
    }
    .viewer-theme-toggles, .visibility-checklist {
        display: none; /* Hide clutter on small screens inside viewer */
    }
    .viewer-right-toolbar {
        top: 280px;
        right: 20px;
    }
    .viewer-bottom-carousel {
        bottom: 20px;
        width: calc(100% - 40px);
    }
    .carousel-divider, .carousel-label {
        display: none;
    }
}

@media (max-width: 576px) {
    .hero-heading {
        font-size: 36px;
    }
    .stat-item {
        width: 100%;
    }
    .floor-selector-hud {
        left: calc(50% + 100px);
    }
    .video-container {
        height: 220px;
    }
}

/* ==========================================================================
   GLOBAL SMOOTH SCROLLING
   ========================================================================== */
html {
    scroll-behavior: smooth;
}

/* ==========================================================================
   UPGRADED LUXURY AMENITIES SECTION
   ========================================================================== */
.amenities-section {
    padding: 120px 4% 140px 4%;
    position: relative;
    z-index: 1;
    /* Subtle dark gradient, soft vignette */
    background: radial-gradient(circle at center, rgba(15, 23, 42, 0.3) 0%, rgba(9, 13, 22, 0.98) 100%), 
                linear-gradient(180deg, #090d16 0%, #05070c 100%);
    /* Dotted blueprints grid representing the low-opacity architectural grid */
    background-image: radial-gradient(rgba(209, 168, 94, 0.02) 1px, transparent 1px);
    background-size: 40px 40px;
    border-top: 1px solid rgba(209, 168, 94, 0.1);
    overflow: hidden;
}

.amenities-container {
    max-width: 1400px;
    margin: 0 auto;
    width: 100%;
}

.amenities-header {
    text-align: center;
    max-width: 800px;
    margin: 0 auto 60px auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
}

.amenities-header .section-heading {
    font-family: var(--font-heading);
    font-size: 46px;
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: -0.5px;
    color: #fff;
    margin-top: 5px;
}

.amenities-header .section-subtitle {
    font-size: 16px;
    color: var(--color-text-secondary-dark);
    line-height: 1.6;
    font-style: italic;
    max-width: 650px;
}

/* Responsive Grid Layout */
.amenities-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr); /* 4 columns for desktop */
    gap: 24px;
    width: 100%;
}

/* Glass Card Design */
.amenity-card {
    background: rgba(15, 23, 42, 0.45);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.05);
    /* Subtle gold border default */
    border-color: rgba(209, 168, 94, 0.12);
    border-radius: 24px;
    padding: 32px 28px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
    transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
    position: relative;
    overflow: hidden;
    /* For JS reveal animation */
    opacity: 0;
    transform: translateY(30px);
}

.amenity-card.reveal {
    opacity: 1;
    transform: translateY(0);
}

/* Card Glow Effect */
.card-glow {
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, rgba(209, 168, 94, 0.06) 0%, transparent 60%);
    opacity: 0;
    transition: opacity 0.35s ease;
    pointer-events: none;
    z-index: 0;
}

.amenity-card:hover .card-glow {
    opacity: 1;
}

/* Card Content styling */
.amenity-card .card-icon {
    position: relative;
    z-index: 1;
    font-size: 28px;
    color: var(--color-gold);
    margin-bottom: 20px;
    transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
    display: inline-block;
}

.amenity-card:hover .card-icon {
    transform: rotate(5deg) scale(1.1);
    color: var(--color-gold-hover);
}

.amenity-card h3 {
    position: relative;
    z-index: 1;
    font-family: var(--font-heading);
    font-size: 19px;
    font-weight: 600;
    color: #fff;
    margin-bottom: 10px;
    transition: var(--transition-fast);
}

.amenity-card p {
    position: relative;
    z-index: 1;
    font-size: 13px;
    color: var(--color-text-secondary-dark);
    line-height: 1.5;
    font-style: italic;
    opacity: 0.85;
    transition: all 0.35s ease;
}

.amenity-card:hover p {
    color: #fff;
    opacity: 1;
}

.card-accent-line {
    position: relative;
    z-index: 1;
    width: 0;
    height: 2px;
    background: var(--color-gold);
    margin-top: 14px;
    transition: width 0.35s cubic-bezier(0.16, 1, 0.3, 1);
    border-radius: 1px;
}

.amenity-card:hover .card-accent-line {
    width: 40px;
}

/* Hover States (Slight lift, soft gold glow, border highlight) */
.amenity-card:hover {
    transform: translateY(-8px) scale(1.03);
    border-color: rgba(209, 168, 94, 0.45);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4), 0 0 15px rgba(209, 168, 94, 0.15);
    background: rgba(15, 23, 42, 0.6);
}

/* Bottom Highlight Row */
.amenities-bottom-highlights {
    display: flex;
    justify-content: space-around;
    align-items: center;
    flex-wrap: wrap;
    gap: 30px;
    margin-top: 80px;
    padding-top: 48px;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    width: 100%;
}

.highlight-card {
    display: flex;
    align-items: center;
    gap: 16px;
    background: rgba(15, 23, 42, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.03);
    padding: 18px 28px;
    border-radius: 20px;
    transition: var(--transition-smooth);
}

.highlight-card:hover {
    transform: translateY(-2px);
    border-color: rgba(209, 168, 94, 0.2);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
}

.highlight-icon {
    font-size: 28px;
}

.highlight-info h4 {
    font-family: var(--font-heading);
    font-size: 24px;
    font-weight: 700;
    color: var(--color-gold);
    line-height: 1.1;
}

.highlight-info span {
    font-size: 11px;
    color: var(--color-text-secondary-dark);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    display: block;
}

/* ==========================================================================
   AMENITIES MEDIA QUERIES
   ========================================================================== */
@media (max-width: 1200px) {
    .amenities-grid {
        grid-template-columns: repeat(3, 1fr); /* 3 columns for smaller desktop */
    }
}

@media (max-width: 992px) {
    .amenities-grid {
        grid-template-columns: repeat(2, 1fr); /* 2 columns for tablet */
        gap: 20px;
    }
    .amenities-header .section-heading {
        font-size: 38px;
    }
    .amenities-section {
        padding: 80px 4% 100px 4%;
    }
}

@media (max-width: 768px) {
    .amenities-bottom-highlights {
        justify-content: center;
    }
    .highlight-card {
        width: 45%;
        justify-content: center;
    }
}

@media (max-width: 576px) {
    .amenities-grid {
        grid-template-columns: 1fr; /* 1 column for mobile */
    }
    .amenities-header .section-heading {
        font-size: 32px;
    }
    .highlight-card {
        width: 100%;
    }
}

/* ==========================================================================
   UPGRADED CONNECTIVITY & LOCATION SECTION
   ========================================================================== */
.location-section {
    padding: 120px 4% 140px 4%;
    position: relative;
    z-index: 1;
    /* Subtle dark blue gradient, soft vignette */
    background: radial-gradient(circle at center, rgba(15, 23, 42, 0.25) 0%, rgba(9, 13, 22, 0.99) 100%), 
                linear-gradient(180deg, #05070c 0%, #090d16 100%);
    /* Very subtle grid/city blueprint texture overlay */
    background-image: radial-gradient(rgba(209, 168, 94, 0.015) 1px, transparent 1px);
    background-size: 30px 30px;
    border-top: 1px solid rgba(209, 168, 94, 0.08);
    overflow: hidden;
}

.location-container {
    max-width: 1400px;
    margin: 0 auto;
    width: 100%;
}

.location-header {
    text-align: center;
    max-width: 800px;
    margin: 0 auto 60px auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
}

.location-header .section-heading {
    font-family: var(--font-heading);
    font-size: 46px;
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: -0.5px;
    color: #fff;
    margin-top: 5px;
}

.location-header .section-subtitle {
    font-size: 16px;
    color: var(--color-text-secondary-dark);
    line-height: 1.6;
    font-style: italic;
    max-width: 650px;
}

/* Grid Layout */
.location-grid-row {
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    gap: 40px;
    align-items: start;
    width: 100%;
}

/* Left Side: Interactive Map Card Container */
.map-card-container {
    width: 100%;
    height: 520px;
    perspective: 1000px;
    /* JS entrance animation */
    opacity: 0;
    transform: translateX(-50px);
    transition: opacity 1s cubic-bezier(0.16, 1, 0.3, 1), transform 1s cubic-bezier(0.16, 1, 0.3, 1);
}

.map-card-container.reveal {
    opacity: 1;
    transform: translateX(0);
}

.map-card {
    width: 100%;
    height: 100%;
    background: rgba(15, 23, 42, 0.45);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(209, 168, 94, 0.12);
    border-radius: 24px;
    position: relative;
    overflow: hidden;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.4);
}

.map-glow {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 60%;
    height: 60%;
    background: radial-gradient(circle, rgba(209, 168, 94, 0.03) 0%, transparent 70%);
    pointer-events: none;
}

.svg-map-wrapper {
    width: 100%;
    height: 100%;
    position: relative;
}

.custom-architectural-map {
    width: 100%;
    height: 100%;
    opacity: 0.85;
}

/* SVG Elements Styling */
.map-green-area {
    fill: rgba(16, 185, 129, 0.015);
    stroke: rgba(16, 185, 129, 0.05);
    stroke-width: 1.5;
}

.map-river {
    stroke: rgba(56, 189, 248, 0.05);
    fill: none;
}

.map-river-inner {
    stroke: rgba(56, 189, 248, 0.08);
    fill: none;
}

.map-road {
    fill: none;
    stroke: rgba(255, 255, 255, 0.03);
    stroke-width: 3;
    stroke-linecap: round;
}

.map-road.principal {
    stroke: rgba(255, 255, 255, 0.05);
    stroke-width: 5;
}

.map-road.diagonal {
    stroke: rgba(255, 255, 255, 0.02);
    stroke-width: 2.5;
}

.map-metro-line-under {
    stroke: rgba(16, 185, 129, 0.05);
    stroke-width: 6;
}

.map-metro-line {
    stroke: rgba(16, 185, 129, 0.35);
    stroke-width: 2.5;
    stroke-dasharray: 6 4;
}

/* Connection Lines (Golden dashed paths connecting center to landmarks) */
.conn-line {
    fill: none;
    stroke: var(--color-gold);
    stroke-width: 1.5;
    stroke-dasharray: 5 5;
    stroke-dashoffset: 40;
    opacity: 0;
    transition: opacity 0.4s ease, stroke-dashoffset 0.4s ease;
}

.conn-line.active {
    opacity: 0.85;
    stroke-width: 2px;
    animation: drawLine 1s linear infinite;
}

@keyframes drawLine {
    to {
        stroke-dashoffset: 0;
    }
}

/* Map Pins Base */
.map-pin {
    position: absolute;
    transform: translate(-50%, -50%);
    z-index: 10;
    cursor: pointer;
}

/* Project Location Pin (Skyline Residences) */
.project-pin {
    z-index: 15;
}

.project-pin .pin-pulse {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 54px;
    height: 54px;
    background: rgba(209, 168, 94, 0.3);
    border-radius: 50%;
    animation: pulse-ring 2s cubic-bezier(0.215, 0.610, 0.355, 1) infinite;
}

.project-pin .pin-core {
    width: 38px;
    height: 38px;
    background: var(--color-gold);
    color: #000;
    border: 2px solid #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    box-shadow: 0 0 20px var(--color-gold-glow);
    position: relative;
    z-index: 2;
    transition: var(--transition-smooth);
}

.project-pin:hover .pin-core {
    transform: scale(1.1);
    background: #fff;
    color: var(--color-gold);
    border-color: var(--color-gold);
}

/* Destination Pins */
.destination-pin {
    z-index: 12;
}

.destination-pin .pin-marker {
    width: 26px;
    height: 26px;
    background: rgba(15, 23, 42, 0.85);
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: #94a3b8;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
    transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.destination-pin:hover .pin-marker,
.destination-pin.active .pin-marker {
    background: var(--color-gold);
    color: #000;
    border-color: #fff;
    transform: scale(1.25);
    box-shadow: 0 0 15px var(--color-gold-glow);
}

/* Pin tooltips styling */
.map-tooltip {
    position: absolute;
    bottom: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%) translateY(5px);
    background: rgba(9, 13, 22, 0.9);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-color: rgba(209, 168, 94, 0.25);
    color: #fff;
    padding: 6px 12px;
    border-radius: 8px;
    font-size: 11px;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.4);
    z-index: 25;
}

.map-tooltip::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 5px solid transparent;
    border-top-color: rgba(9, 13, 22, 0.9);
}

.destination-pin:hover .map-tooltip,
.destination-pin.active .map-tooltip,
.project-pin:hover .project-tooltip {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

/* Right Side: Scrollable Cards Container */
.connectivity-scroll-container {
    width: 100%;
    height: 520px;
    overflow-y: auto;
    padding-right: 12px;
    /* JS entrance animation */
    opacity: 0;
    transform: translateY(50px);
    transition: opacity 1s cubic-bezier(0.16, 1, 0.3, 1), transform 1s cubic-bezier(0.16, 1, 0.3, 1);
}

.connectivity-scroll-container.reveal {
    opacity: 1;
    transform: translateY(0);
}

/* Custom Scrollbar for list container */
.connectivity-scroll-container::-webkit-scrollbar {
    width: 4px;
}
.connectivity-scroll-container::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.02);
}
.connectivity-scroll-container::-webkit-scrollbar-thumb {
    background: rgba(209, 168, 94, 0.3);
    border-radius: 2px;
}
.connectivity-scroll-container::-webkit-scrollbar-thumb:hover {
    background: var(--color-gold);
}

.connectivity-list {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding-bottom: 20px;
}

/* Connectivity Card Styling */
.conn-card {
    background: rgba(15, 23, 42, 0.45);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-color: rgba(209, 168, 94, 0.12);
    border-radius: 20px;
    padding: 20px;
    display: flex;
    gap: 18px;
    cursor: pointer;
    transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.conn-card-icon {
    font-size: 20px;
    color: var(--color-gold);
    background: rgba(209, 168, 94, 0.08);
    border: 1px solid rgba(209, 168, 94, 0.2);
    width: 44px;
    height: 44px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: var(--transition-smooth);
}

.conn-card-body {
    flex-grow: 1;
}

.conn-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 6px;
}

.conn-card-header h3 {
    font-family: var(--font-heading);
    font-size: 16px;
    font-weight: 600;
    color: #fff;
    transition: var(--transition-fast);
}

.conn-meta {
    font-size: 12px;
    color: var(--color-gold);
    font-weight: 600;
    background: rgba(209, 168, 94, 0.1);
    padding: 3px 10px;
    border-radius: 12px;
    transition: var(--transition-fast);
}

.conn-card p {
    font-size: 13px;
    color: var(--color-text-secondary-dark);
    line-height: 1.4;
    transition: var(--transition-fast);
}

/* Card Hover / Active State styling */
.conn-card:hover,
.conn-card.active {
    transform: translateY(-4px);
    border-color: rgba(209, 168, 94, 0.45);
    background: rgba(15, 23, 42, 0.65);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3), 0 0 12px rgba(209, 168, 94, 0.15);
}

.conn-card:hover .conn-card-icon,
.conn-card.active .conn-card-icon {
    background: var(--color-gold);
    color: #000;
    border-color: #fff;
    transform: scale(1.05);
}

.conn-card:hover .conn-meta,
.conn-card.active .conn-meta {
    background: #fff;
    color: #000;
}

.conn-card:hover p,
.conn-card.active p {
    color: #fff;
}

/* Bottom Summary Badges */
.connectivity-bottom-badges {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 16px;
    margin-top: 60px;
    width: 100%;
}

.summary-badge {
    flex: 1 1 15%;
    min-width: 170px;
    background: rgba(15, 23, 42, 0.4);
    border: 1px solid rgba(209, 168, 94, 0.12);
    padding: 14px 20px;
    border-radius: 16px;
    display: flex;
    align-items: center;
    gap: 12px;
    transition: var(--transition-smooth);
}

.summary-badge:hover {
    transform: translateY(-2px);
    border-color: rgba(209, 168, 94, 0.35);
    box-shadow: 0 5px 15px rgba(0,0,0,0.2);
}

.badge-icon {
    font-size: 16px;
    color: var(--color-gold);
}

.summary-badge span:last-child {
    font-family: var(--font-heading);
    font-size: 12px;
    font-weight: 600;
    color: #fff;
}

/* ==========================================================================
   CONNECTIVITY RESPONSIVE MEDIA QUERIES
   ========================================================================== */
@media (max-width: 992px) {
    .location-grid-row {
        grid-template-columns: 1fr; /* Stack vertically */
        gap: 30px;
    }
    .map-card-container {
        height: 480px;
    }
    .location-header .section-heading {
        font-size: 38px;
    }
    .location-section {
        padding: 80px 4% 100px 4%;
    }
}

@media (max-width: 768px) {
    .connectivity-bottom-badges {
        justify-content: center;
    }
    .summary-badge {
        flex: 1 1 30%;
    }
}

    .highlight-card {
        width: 100%;
    }
}

/* ==========================================================================
   UPGRADED CONTACT & SITE VISIT SECTION
   ========================================================================== */
.contact-section {
    padding: 120px 4% 140px 4%;
    position: relative;
    z-index: 1;
    /* Subtle dark gradient, soft vignette */
    background: radial-gradient(circle at center, rgba(15, 23, 42, 0.2) 0%, rgba(9, 13, 22, 0.99) 100%), 
                linear-gradient(180deg, #090d16 0%, #05070c 100%);
    border-top: 1px solid rgba(209, 168, 94, 0.08);
    overflow: hidden;
}

.contact-container {
    max-width: 1400px;
    margin: 0 auto;
    width: 100%;
}

.contact-header {
    text-align: center;
    max-width: 800px;
    margin: 0 auto 60px auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
}

.contact-header .section-heading {
    font-family: var(--font-heading);
    font-size: 46px;
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: -0.5px;
    color: #fff;
    margin-top: 5px;
}

.contact-header .section-subtitle {
    font-size: 16px;
    color: var(--color-text-secondary-dark);
    line-height: 1.6;
    font-style: italic;
    max-width: 650px;
}

/* Two-Column Grid */
.contact-grid-row {
    display: grid;
    grid-template-columns: 0.8fr 1.2fr; /* 40% Left, 60% Right */
    gap: 40px;
    align-items: start;
    width: 100%;
}

/* Left Panel: Info, Actions & Advisor */
.contact-left-panel {
    display: flex;
    flex-direction: column;
    width: 100%;
    /* JS entrance animation */
    opacity: 0;
    transform: translateX(-50px);
    transition: opacity 1s cubic-bezier(0.16, 1, 0.3, 1), transform 1s cubic-bezier(0.16, 1, 0.3, 1);
}

.contact-left-panel.reveal {
    opacity: 1;
    transform: translateX(0);
}

/* Info Card */
.contact-info-card {
    padding: 32px;
    background: rgba(15, 23, 42, 0.45);
    border-color: rgba(209, 168, 94, 0.12);
}

.contact-info-card h3 {
    font-family: var(--font-heading);
    font-size: 22px;
    font-weight: 700;
    color: #fff;
    margin-bottom: 24px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    padding-bottom: 12px;
}

.contact-info-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.contact-info-list li {
    display: flex;
    align-items: flex-start;
    gap: 16px;
}

.contact-info-list li i {
    font-size: 18px;
    color: var(--color-gold);
    margin-top: 3px;
    width: 20px;
    text-align: center;
}

.contact-info-list li strong {
    font-family: var(--font-heading);
    font-size: 13px;
    font-weight: 600;
    color: #fff;
    display: block;
    margin-bottom: 2px;
}

.contact-info-list li span {
    font-size: 13px;
    color: var(--color-text-secondary-dark);
    line-height: 1.4;
}

/* Quick Action Buttons Grid */
.quick-actions-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
    margin-top: 24px;
    width: 100%;
}

.action-btn {
    background: rgba(15, 23, 42, 0.45);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-color: rgba(209, 168, 94, 0.12);
    padding: 20px 16px;
    border-radius: 16px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    text-decoration: none;
    font-family: var(--font-heading);
    font-size: 13px;
    font-weight: 600;
    color: #fff;
    text-align: center;
    transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
    /* JS entrance animation */
    opacity: 0;
    transform: translateY(20px);
}

.action-btn.reveal {
    opacity: 1;
    transform: translateY(0);
}

.action-btn i {
    font-size: 20px;
    transition: var(--transition-smooth);
}

.action-btn.btn-gold-action {
    background: rgba(209, 168, 94, 0.08);
    border-color: var(--color-gold);
    color: var(--color-gold);
}

.action-btn:hover {
    transform: translateY(-4px);
    border-color: rgba(209, 168, 94, 0.45);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3), 0 0 10px rgba(209, 168, 94, 0.15);
}

.action-btn:hover i {
    transform: scale(1.1);
}

.text-gold-accent {
    color: var(--color-gold);
}
.text-green {
    color: var(--color-accent-green);
}
.text-blue-accent {
    color: #38bdf8;
}

/* Advisor Card */
.advisor-card {
    margin-top: 24px;
    padding: 24px;
    background: rgba(15, 23, 42, 0.45);
    border-color: rgba(209, 168, 94, 0.12);
}

.advisor-profile {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    padding-bottom: 16px;
}

.advisor-avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: rgba(209, 168, 94, 0.12);
    border: 1.5px solid var(--color-gold);
    color: var(--color-gold);
    font-size: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.advisor-name h4 {
    font-family: var(--font-heading);
    font-size: 16px;
    font-weight: 600;
    color: #fff;
}

.advisor-name span {
    font-size: 11px;
    color: var(--color-text-secondary-dark);
}

.advisor-details {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.advisor-details li {
    font-size: 13px;
    color: var(--color-text-secondary-dark);
}

.advisor-details li strong {
    color: #fff;
}

.response-badge {
    display: flex;
    align-items: center;
    gap: 12px;
    background: rgba(16, 185, 129, 0.08);
    border: 1px solid rgba(16, 185, 129, 0.2);
    padding: 10px 14px;
    border-radius: 12px;
    margin-top: 6px;
}

.response-badge i {
    font-size: 14px;
    color: var(--color-accent-green);
    animation: flash 1.5s ease infinite;
}

.response-badge strong {
    font-family: var(--font-heading);
    font-size: 11px;
    color: var(--color-accent-green) !important;
    display: block;
}

.response-badge span {
    font-size: 11px;
    color: #fff;
    display: block;
}

/* Right Panel: Form & Availability */
.contact-right-panel {
    display: flex;
    flex-direction: column;
    width: 100%;
    /* JS entrance animation */
    opacity: 0;
    transform: translateX(50px);
    transition: opacity 1s cubic-bezier(0.16, 1, 0.3, 1), transform 1s cubic-bezier(0.16, 1, 0.3, 1);
}

.contact-right-panel.reveal {
    opacity: 1;
    transform: translateX(0);
}

/* Form Card */
.booking-form-card {
    padding: 40px;
    background: rgba(15, 23, 42, 0.45);
    border-color: rgba(209, 168, 94, 0.12);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
}

.booking-form-card h3 {
    font-family: var(--font-heading);
    font-size: 24px;
    font-weight: 700;
    color: #fff;
    margin-bottom: 30px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    padding-bottom: 12px;
}

.form-row-double {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}

/* Luxury Input Fields with Floating Labels */
.form-group {
    position: relative;
    margin-bottom: 24px;
}

.form-group input,
.form-group select,
.form-group textarea {
    width: 100%;
    background: rgba(9, 13, 22, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-color: rgba(209, 168, 94, 0.15);
    padding: 16px;
    border-radius: 12px;
    color: #fff;
    font-family: var(--font-body);
    font-size: 14px;
    transition: all 0.3s ease;
    outline: none;
}

.form-group label {
    position: absolute;
    top: 17px;
    left: 16px;
    color: var(--color-text-secondary-dark);
    font-size: 13px;
    pointer-events: none;
    transition: all 0.3s ease;
}

/* Floating behavior */
.form-group input:focus ~ label,
.form-group input:not(:placeholder-shown) ~ label,
.form-group textarea:focus ~ label,
.form-group textarea:not(:placeholder-shown) ~ label,
.form-group select:focus ~ label,
.form-group select:valid ~ label {
    top: -10px;
    left: 12px;
    font-size: 11px;
    background: #090d16; /* Matches dark bg to mask outline line */
    padding: 2px 8px;
    color: var(--color-gold);
    font-weight: 600;
    border-radius: 4px;
    letter-spacing: 0.5px;
}

/* Focused input border outline glow */
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    border-color: var(--color-gold);
    box-shadow: 0 0 10px rgba(209, 168, 94, 0.2);
    background: rgba(9, 13, 22, 0.6);
}

/* Custom Select Dropdown Styling */
.select-group {
    position: relative;
}

.select-group select {
    appearance: none;
    -webkit-appearance: none;
    cursor: pointer;
}

.select-arrow {
    position: absolute;
    right: 18px;
    top: 20px;
    color: var(--color-gold);
    font-size: 12px;
    pointer-events: none;
}

/* Radio buttons container */
.contact-method-group {
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: calc(100% - 24px); /* Align with input boxes heights */
}

.group-label {
    font-family: var(--font-heading);
    font-size: 12px;
    color: var(--color-text-secondary-dark);
    margin-bottom: 8px;
    font-weight: 500;
}

.radio-options {
    display: flex;
    gap: 16px;
}

.radio-label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: #fff;
    cursor: pointer;
}

.radio-label input[type="radio"] {
    appearance: none;
    -webkit-appearance: none;
    width: 16px;
    height: 16px;
    border: 1px solid var(--color-gold);
    border-radius: 50%;
    outline: none;
    cursor: pointer;
    position: relative;
    transition: var(--transition-fast);
}

.radio-label input[type="radio"]:checked {
    background-color: var(--color-gold);
    box-shadow: 0 0 8px var(--color-gold-glow);
}

.radio-label input[type="radio"]:checked::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 6px;
    height: 6px;
    background-color: #000;
    border-radius: 50%;
}

.textarea-group {
    margin-bottom: 30px;
}

.textarea-group textarea {
    resize: none;
}

.form-submit-btn {
    padding: 16px !important;
    font-size: 15px !important;
}

/* Live Availability Card */
.live-availability-card {
    margin-top: 24px;
    padding: 20px 24px;
    background: rgba(15, 23, 42, 0.45);
    border-color: rgba(209, 168, 94, 0.12);
    display: flex;
    justify-content: space-around;
    align-items: center;
}

.live-stat-item {
    display: flex;
    align-items: center;
    gap: 14px;
}

.live-stat-item i {
    font-size: 20px;
}

.live-stat-item h4 {
    font-family: var(--font-heading);
    font-size: 18px;
    font-weight: 700;
    color: #fff;
    line-height: 1.1;
}

.live-stat-item span {
    font-size: 11px;
    color: var(--color-text-secondary-dark);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    display: block;
}

.live-stat-divider {
    width: 1px;
    height: 36px;
    background: rgba(255, 255, 255, 0.08);
}

.live-pulse-text {
    animation: text-pulse 2s infinite;
}

.live-advisor-active {
    color: var(--color-accent-green) !important;
}

@keyframes text-pulse {
    0%, 100% { opacity: 1; text-shadow: 0 0 10px rgba(209, 168, 94, 0.2); }
    50% { opacity: 0.8; text-shadow: 0 0 2px rgba(209, 168, 94, 0); }
}

@keyframes flash {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.4; }
}

/* Trust Indicators Grid */
.trust-indicators-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    margin-top: 24px;
    width: 100%;
}

.trust-badge {
    background: rgba(15, 23, 42, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.03);
    padding: 12px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    gap: 8px;
    /* JS entrance animation */
    opacity: 0;
    transform: translateY(15px);
    transition: all 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.trust-badge.reveal {
    opacity: 1;
    transform: translateY(0);
}

.trust-badge i {
    font-size: 12px;
    color: var(--color-gold);
}

.trust-badge span {
    font-family: var(--font-heading);
    font-size: 11px;
    font-weight: 500;
    color: var(--color-text-secondary-dark);
}

/* Interactive Vicinity Map Preview (Bottom of Section) */
.contact-map-preview {
    margin-top: 48px;
    padding: 24px;
    background: rgba(15, 23, 42, 0.45);
    border-color: rgba(209, 168, 94, 0.12);
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.3);
    /* JS entrance animation */
    opacity: 0;
    transform: scale(0.98);
    transition: opacity 1s cubic-bezier(0.16, 1, 0.3, 1), transform 1s cubic-bezier(0.16, 1, 0.3, 1);
}

.contact-map-preview.reveal {
    opacity: 1;
    transform: scale(1);
}

.map-preview-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 18px;
}

.map-preview-header h4 {
    font-family: var(--font-heading);
    font-size: 15px;
    font-weight: 600;
    color: #fff;
}

.map-preview-header h4 i {
    color: var(--color-gold);
    margin-right: 6px;
}

.map-preview-body {
    width: 100%;
    height: 240px;
    border-radius: 12px;
    overflow: hidden;
    background-color: #0b0f19;
    border: 1px solid rgba(255, 255, 255, 0.05);
}

.svg-vicinity-map {
    width: 100%;
    height: 100%;
}

.btn-sm {
    padding: 8px 16px;
    font-size: 11px;
}

/* Final Call-to-Action Full-Width Banner */
.final-cta-banner {
    margin-top: 80px;
    padding: 80px 40px;
    background: radial-gradient(circle at center, rgba(209, 168, 94, 0.12) 0%, rgba(15, 23, 42, 0.6) 100%), 
                rgba(15, 23, 42, 0.45);
    border-color: var(--color-gold);
    box-shadow: 0 0 30px rgba(209, 168, 94, 0.15);
    text-align: center;
    position: relative;
    overflow: hidden;
}

.cta-banner-content {
    max-width: 700px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
}

.final-cta-banner h2 {
    font-family: var(--font-heading);
    font-size: 38px;
    font-weight: 800;
    line-height: 1.2;
    color: #fff;
    letter-spacing: -0.5px;
}

.final-cta-banner p {
    font-size: 15px;
    color: var(--color-text-secondary-dark);
    line-height: 1.6;
}

.btn-large {
    padding: 16px 36px !important;
    font-size: 15px !important;
    margin-top: 10px;
}

/* ==========================================================================
   CONTACT SECTION MEDIA QUERIES
   ========================================================================== */
@media (max-width: 992px) {
    .contact-grid-row {
        grid-template-columns: 1fr; /* Stack vertically */
        gap: 30px;
    }
    .contact-header .section-heading {
        font-size: 38px;
    }
    .contact-section {
        padding: 80px 4% 100px 4%;
    }
    .booking-form-card {
        padding: 30px;
    }
    .final-cta-banner {
        padding: 60px 24px;
    }
    .final-cta-banner h2 {
        font-size: 32px;
    }
}

@media (max-width: 768px) {
    .form-row-double {
        grid-template-columns: 1fr; /* Form inputs stack on tablet/mobile */
        gap: 0;
    }
    .contact-method-group {
        margin-bottom: 24px;
    }
    .trust-indicators-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .live-availability-card {
        flex-direction: column;
        gap: 16px;
        align-items: flex-start;
    }
    .live-stat-divider {
        width: 100%;
        height: 1px;
    }
}

@media (max-width: 576px) {
    .contact-header .section-heading {
        font-size: 32px;
    }
    .trust-indicators-grid {
        grid-template-columns: 1fr;
    }
    .quick-actions-grid {
        grid-template-columns: 1fr;
    }
    .final-cta-banner h2 {
        font-size: 26px;
    }
    .map-preview-body {
        height: 180px;
    }
}

/* ==========================================================================
   VIEW QUALITY INTELLIGENCE™ SECTION
   ========================================================================== */
.view-iq-section {
    padding: 120px 4% 140px 4%;
    position: relative;
    z-index: 1;
    background: radial-gradient(circle at center, rgba(15, 23, 42, 0.25) 0%, rgba(9, 13, 22, 0.99) 100%), 
                linear-gradient(180deg, #05070c 0%, #090d16 100%);
    background-image: radial-gradient(rgba(209, 168, 94, 0.015) 1px, transparent 1px);
    background-size: 30px 30px;
    border-top: 1px solid rgba(209, 168, 94, 0.08);
    overflow: hidden;
}

.view-iq-container {
    max-width: 1400px;
    margin: 0 auto;
    width: 100%;
}

.view-iq-header {
    text-align: center;
    max-width: 800px;
    margin: 0 auto 60px auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
}

.view-iq-header .section-heading {
    font-family: var(--font-heading);
    font-size: 46px;
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: -0.5px;
    color: #fff;
    margin-top: 5px;
}

.view-iq-header .section-subtitle {
    font-size: 16px;
    color: var(--color-text-secondary-dark);
    line-height: 1.6;
    font-style: italic;
    max-width: 650px;
}

/* Two-Column Grid */
.view-iq-grid-row {
    display: grid;
    grid-template-columns: 180px 1fr; /* Fixed selector, flexible dashboard */
    gap: 40px;
    align-items: start;
    width: 100%;
}

/* Left Panel: Floor Selector */
.floor-selector-panel {
    width: 100%;
    /* JS entrance animation */
    opacity: 0;
    transform: translateX(-40px);
    transition: opacity 1s cubic-bezier(0.16, 1, 0.3, 1), transform 1s cubic-bezier(0.16, 1, 0.3, 1);
}

.floor-selector-panel.reveal {
    opacity: 1;
    transform: translateX(0);
}

.selector-card {
    padding: 24px 16px;
    background: rgba(15, 23, 42, 0.45);
    border-color: rgba(209, 168, 94, 0.12);
    border-radius: 20px;
}

.selector-card h4 {
    font-family: var(--font-heading);
    font-size: 15px;
    font-weight: 700;
    color: #fff;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 20px;
    text-align: center;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    padding-bottom: 12px;
}

.floor-buttons-scroll {
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-height: 520px;
    overflow-y: auto;
    padding-right: 4px;
}

/* Custom Scrollbar for selector */
.floor-buttons-scroll::-webkit-scrollbar {
    width: 4px;
}
.floor-buttons-scroll::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.02);
}
.floor-buttons-scroll::-webkit-scrollbar-thumb {
    background: rgba(209, 168, 94, 0.3);
    border-radius: 2px;
}

/* Floor Button Sleek Design */
.iq-floor-btn {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-color: rgba(209, 168, 94, 0.08);
    padding: 12px;
    border-radius: 12px;
    font-family: var(--font-heading);
    font-size: 14px;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.6);
    cursor: pointer;
    text-align: center;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.iq-floor-btn:hover {
    background: rgba(255, 255, 255, 0.06);
    color: #fff;
    border-color: rgba(209, 168, 94, 0.25);
}

.iq-floor-btn.active {
    background: rgba(209, 168, 94, 0.12);
    border-color: var(--color-gold);
    color: var(--color-gold);
    box-shadow: 0 0 12px rgba(209, 168, 94, 0.15);
    transform: scale(1.05);
}

/* Right Panel: View Intelligence Dashboard */
.dashboard-panel {
    width: 100%;
    /* JS entrance animation */
    opacity: 0;
    transform: translateX(40px);
    transition: opacity 1s cubic-bezier(0.16, 1, 0.3, 1), transform 1s cubic-bezier(0.16, 1, 0.3, 1);
}

.dashboard-panel.reveal {
    opacity: 1;
    transform: translateX(0);
}

.dashboard-card {
    padding: 40px;
    background: rgba(15, 23, 42, 0.45);
    border-color: rgba(209, 168, 94, 0.12);
    border-radius: 24px;
    box-shadow: 0 20px 50px rgba(0,0,0,0.4);
}

/* Dashboard Header Row */
.db-header-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    padding-bottom: 20px;
}

.db-title-area h2 {
    font-family: var(--font-heading);
    font-size: 36px;
    font-weight: 800;
    color: #fff;
    line-height: 1.1;
    margin-bottom: 6px;
}

.db-rating {
    display: flex;
    align-items: center;
    gap: 10px;
}

/* Star rating system */
.stars-outer {
    position: relative;
    display: inline-block;
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    font-size: 14px;
    color: rgba(255, 255, 255, 0.1);
}
.stars-outer::before {
    content: "\f005 \f005 \f005 \f005 \f005";
}
.stars-inner {
    position: absolute;
    top: 0;
    left: 0;
    white-space: nowrap;
    overflow: hidden;
    color: var(--color-gold);
    width: 0%; /* JS fills this dynamically */
    transition: width 0.8s ease;
}
.stars-inner::before {
    content: "\f005 \f005 \f005 \f005 \f005";
}

#iq-rating-text {
    font-size: 12px;
    color: var(--color-text-secondary-dark);
    font-weight: 500;
}

.view-badge {
    background: rgba(209, 168, 94, 0.1);
    border: 1px solid var(--color-gold);
    color: var(--color-gold);
    padding: 6px 14px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    box-shadow: 0 0 10px rgba(209, 168, 94, 0.05);
    transition: all 0.3s ease;
}

.floor-summary-text {
    font-size: 15px;
    color: var(--color-text-secondary-dark);
    line-height: 1.5;
    font-style: italic;
    margin-bottom: 30px;
}

/* Stats Row: Circular Ring, AI Insights, Investment */
.db-stats-row {
    display: grid;
    grid-template-columns: 0.85fr 1.15fr 1fr;
    gap: 24px;
    margin-bottom: 40px;
}

/* Circular progress ring */
.view-score-card {
    background: rgba(9, 13, 22, 0.3);
    border: 1px solid rgba(255,255,255,0.02);
    border-color: rgba(209, 168, 94, 0.08);
    border-radius: 20px;
    padding: 24px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px;
    box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.2);
}

.score-ring-wrapper {
    position: relative;
    width: 110px;
    height: 110px;
}

.score-svg {
    width: 100%;
    height: 100%;
}

.ring-bg {
    fill: none;
    stroke: rgba(255, 255, 255, 0.03);
    stroke-width: 8;
}

.ring-fill {
    fill: none;
    stroke: var(--color-gold);
    stroke-width: 8;
    stroke-linecap: round;
    transform: rotate(-90deg);
    transform-origin: 50% 50%;
    transition: stroke-dashoffset 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.score-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
}

.score-text h3 {
    font-family: var(--font-heading);
    font-size: 32px;
    font-weight: 800;
    color: var(--color-gold);
    line-height: 1;
}

.score-text span {
    font-size: 10px;
    color: var(--color-text-secondary-dark);
}

.score-label {
    font-family: var(--font-heading);
    font-size: 12px;
    font-weight: 600;
    color: #fff;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* AI Insights card */
.insights-card {
    padding: 20px;
    background: rgba(15, 23, 42, 0.35);
    border-color: rgba(209, 168, 94, 0.08);
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.insights-card h4 {
    font-family: var(--font-heading);
    font-size: 13px;
    font-weight: 700;
    color: #fff;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-bottom: 1px solid rgba(255,255,255,0.05);
    padding-bottom: 8px;
}

.insights-card p {
    font-size: 12px;
    color: var(--color-text-secondary-dark);
    line-height: 1.5;
}

.investment-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.investment-list li {
    font-size: 12px;
    color: var(--color-text-secondary-dark);
    display: flex;
    align-items: center;
    gap: 8px;
}

.investment-list li i {
    font-size: 12px;
}

/* Metrics Progress Bars Grid */
.metrics-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px 40px;
    margin-bottom: 40px;
}

.metric-bar-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.metric-info {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.metric-info span {
    font-size: 13px;
    color: var(--color-text-secondary-dark);
    display: flex;
    align-items: center;
    gap: 8px;
}

.metric-info span i {
    color: var(--color-gold);
    font-size: 14px;
}

.metric-info strong {
    font-family: var(--font-heading);
    font-size: 13px;
    font-weight: 600;
    color: #fff;
}

.progress-track {
    width: 100%;
    height: 6px;
    background: rgba(255, 255, 255, 0.03);
    border-radius: 3px;
    overflow: hidden;
}

.progress-fill {
    height: 100%;
    background: linear-gradient(90deg, rgba(209, 168, 94, 0.4) 0%, var(--color-gold) 100%);
    border-radius: 3px;
    width: 0%; /* Animate width in JS */
    transition: width 1s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Mini 360 Panorama Preview */
.mini-360-preview {
    margin-bottom: 40px;
    padding: 24px;
    background: rgba(15, 23, 42, 0.4);
    border-color: rgba(209, 168, 94, 0.08);
}

.mini-preview-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
}

.mini-preview-header span {
    font-family: var(--font-heading);
    font-size: 14px;
    font-weight: 600;
    color: #fff;
}

.mini-preview-header span i {
    margin-right: 6px;
}

.mini-preview-body {
    width: 100%;
    height: 180px;
    border-radius: 12px;
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.05);
}

.mini-pan-wrapper {
    width: 100%;
    height: 100%;
    position: relative;
    overflow: hidden;
    cursor: grab;
}

.mini-pan-wrapper:active {
    cursor: grabbing;
}

.mini-pan-img {
    height: 100%;
    width: auto;
    position: absolute;
    top: 0;
    left: 0;
    max-width: none;
    pointer-events: none; /* Let drag event pass to wrapper */
    transition: transform 0.1s ease-out; /* Smooth drag tracking */
}

.mini-drag-indicator {
    position: absolute;
    bottom: 12px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(4px);
    border: 1px solid rgba(255,255,255,0.1);
    color: #fff;
    font-size: 10px;
    padding: 4px 10px;
    border-radius: 20px;
    pointer-events: none;
    display: flex;
    align-items: center;
    gap: 6px;
    animation: drag-guide 2.5s infinite;
}

@keyframes drag-guide {
    0%, 100% { transform: translate(-50%, 0); }
    50% { transform: translate(-50%, -3px); }
}

/* Floor Comparison Layout */
.floor-comparison-wrapper {
    margin-top: 40px;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    padding-top: 30px;
}

.compare-header {
    margin-bottom: 20px;
}

.compare-header h4 {
    font-family: var(--font-heading);
    font-size: 15px;
    font-weight: 700;
    color: #fff;
    margin-bottom: 4px;
}

.compare-header span {
    font-size: 12px;
    color: var(--color-text-secondary-dark);
}

.compare-checklist {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    margin-bottom: 24px;
}

.compare-checkbox-label {
    background: rgba(15, 23, 42, 0.4);
    border: 1px solid rgba(255,255,255,0.03);
    border-color: rgba(209, 168, 94, 0.12);
    padding: 10px 18px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    font-family: var(--font-heading);
    font-size: 13px;
    color: var(--color-text-secondary-dark);
    transition: all 0.3s ease;
}

.compare-checkbox-label input[type="checkbox"] {
    appearance: none;
    -webkit-appearance: none;
    width: 16px;
    height: 16px;
    border: 1.5px solid var(--color-gold);
    border-radius: 4px;
    outline: none;
    cursor: pointer;
    position: relative;
    transition: var(--transition-fast);
}

.compare-checkbox-label input[type="checkbox"]:checked {
    background: var(--color-gold);
    box-shadow: 0 0 8px var(--color-gold-glow);
}

.compare-checkbox-label input[type="checkbox"]:checked::after {
    content: "\f00c";
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    font-size: 10px;
    color: #000;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.compare-checkbox-label:hover,
.compare-checkbox-label.checked {
    border-color: rgba(209, 168, 94, 0.45);
    background: rgba(15, 23, 42, 0.65);
    color: #fff;
}

/* Comparison Table Styling */
.compare-table-container {
    width: 100%;
    overflow-x: auto;
    border: 1px solid rgba(209, 168, 94, 0.12);
    border-radius: 16px;
    background: rgba(9, 13, 22, 0.3);
    margin-top: 15px;
    box-shadow: inset 0 0 15px rgba(0,0,0,0.3);
    opacity: 0;
    transform: translateY(10px);
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.compare-table-container.show {
    opacity: 1;
    transform: translateY(0);
}

.compare-table {
    width: 100%;
    border-collapse: collapse;
    min-width: 500px;
}

.compare-table th,
.compare-table td {
    padding: 14px 18px;
    font-size: 13px;
    text-align: center;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.compare-table th {
    font-family: var(--font-heading);
    font-weight: 700;
    color: #fff;
    background: rgba(15, 23, 42, 0.5);
}

.compare-table td:first-child,
.compare-table th:first-child {
    text-align: left;
    font-weight: 600;
    color: #fff;
    background: rgba(15, 23, 42, 0.2);
    border-right: 1px solid rgba(255, 255, 255, 0.05);
}

.compare-table tr:last-child td {
    border-bottom: none;
}

/* Gold highlighted cell */
.highlight-gold {
    color: var(--color-gold) !important;
    font-weight: 700;
    text-shadow: 0 0 10px rgba(209, 168, 94, 0.25);
}

/* ==========================================================================
   VIEW IQ SECTION RESPONSIVE MEDIA QUERIES
   ========================================================================== */
@media (max-width: 992px) {
    .view-iq-grid-row {
        grid-template-columns: 1fr; /* Stack selector & dashboard */
        gap: 30px;
    }
    .floor-selector-panel {
        max-width: 100%;
    }
    .floor-buttons-scroll {
        flex-direction: row; /* Horizontal scroll on tablet/mobile */
        max-height: none;
        overflow-x: auto;
        overflow-y: hidden;
        padding-bottom: 8px;
        gap: 12px;
    }
    .iq-floor-btn {
        min-width: 60px;
    }
    .dashboard-card {
        padding: 30px;
    }
    .view-iq-header .section-heading {
        font-size: 38px;
    }
    .view-iq-section {
        padding: 80px 4% 100px 4%;
    }
}

@media (max-width: 768px) {
    .db-stats-row {
        grid-template-columns: 1fr; /* Stack stats vertically */
        gap: 20px;
    }
    .metrics-grid {
        grid-template-columns: 1fr; /* Stack metrics */
        gap: 16px;
    }
}

@media (max-width: 576px) {
    .view-iq-header .section-heading {
        font-size: 32px;
    }
    .db-header-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }
    .view-badge {
        align-self: flex-start;
    }
}

/* ==========================================================================
   PREMIUM LUXURY CUSTOM CURSOR SYSTEM
   ========================================================================== */
/* Hide default cursor on desktop screens (fine pointers only) */
@media (pointer: fine) {
    html, body, a, button, input, select, textarea, [role="button"], .carousel-card, .floor-row, .floor-num-btn, .iq-floor-btn, .compare-checkbox-label {
        cursor: none !important;
    }
}

/* Cursor Dot (Inner Center) */
.cursor-dot {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 6px;
    height: 6px;
    background-color: var(--color-gold);
    border-radius: 50%;
    z-index: 100000;
    pointer-events: none;
    transform: translate(-50%, -50%);
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
    transition: width 0.25s ease, height 0.25s ease, background-color 0.25s ease, opacity 0.2s ease;
}

/* Cursor Ring (Outer Circle) */
.cursor-ring {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 32px;
    height: 32px;
    border: 1.5px solid var(--color-gold);
    border-radius: 50%;
    z-index: 99999;
    pointer-events: none;
    transform: translate(-50%, -50%);
    box-shadow: 0 0 8px rgba(209, 168, 94, 0.15), inset 0 0 4px rgba(209, 168, 94, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    /* Trailing transition easing is done inside JS via requestAnimationFrame for silky smooth performance */
    transition: width 0.25s cubic-bezier(0.25, 1, 0.5, 1), 
                height 0.25s cubic-bezier(0.25, 1, 0.5, 1), 
                border-color 0.25s ease, 
                background-color 0.25s ease, 
                box-shadow 0.25s ease,
                opacity 0.25s ease;
}

/* Show only on screens with a mouse pointer */
@media (pointer: fine) {
    .cursor-dot,
    .cursor-ring {
        display: flex;
    }
}

/* Text inside explorer cursor */
.cursor-text {
    position: absolute;
    font-family: var(--font-heading);
    font-size: 8px;
    font-weight: 800;
    color: var(--color-gold);
    letter-spacing: 0.8px;
    opacity: 0;
    transform: scale(0.8);
    transition: opacity 0.25s ease, transform 0.25s ease;
}

/* Arrow inside primary button cursor */
.cursor-arrow {
    position: absolute;
    font-size: 11px;
    color: #000;
    opacity: 0;
    transform: scale(0.6);
    transition: opacity 0.25s ease, transform 0.25s ease;
}

/* Standard Hover State over clickable elements */
.cursor-ring.hovered {
    width: 44px;
    height: 44px;
    border-color: #fff;
    box-shadow: 0 0 15px rgba(255, 255, 255, 0.25), inset 0 0 8px rgba(255, 255, 255, 0.05);
}

.cursor-dot.hovered {
    width: 8px;
    height: 8px;
    background-color: #fff;
}

/* Hover State over interactive windows (Floor rows) */
.cursor-ring.window-hover {
    width: 58px;
    height: 58px;
    border-color: var(--color-gold);
    background-color: rgba(9, 13, 22, 0.7);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    box-shadow: 0 0 15px var(--color-gold-glow);
    animation: cursorPulse 2s infinite ease-in-out;
}

.cursor-ring.window-hover .cursor-text {
    opacity: 1;
    transform: scale(1);
}

.cursor-dot.window-hover {
    opacity: 0;
}

/* Hover State over primary call-to-action buttons */
.cursor-ring.primary-hover {
    width: 46px;
    height: 46px;
    border-color: #fff;
    background-color: var(--color-gold);
    box-shadow: 0 0 18px var(--color-gold-glow);
}

.cursor-ring.primary-hover .cursor-arrow {
    opacity: 1;
    transform: scale(1);
}

.cursor-dot.primary-hover {
    opacity: 0;
}

/* Click Animation (Luxury Ripple effect) */
.cursor-ring.clicked {
    width: 72px;
    height: 72px;
    border-color: var(--color-gold);
    opacity: 0;
    /* Overriding transitions to force instant click response */
    transition: width 0.35s cubic-bezier(0.1, 0.8, 0.3, 1), 
                height 0.35s cubic-bezier(0.1, 0.8, 0.3, 1), 
                opacity 0.35s cubic-bezier(0.1, 0.8, 0.3, 1);
}

/* Easing support for magnetic button pulling */
.btn-gold, .btn-gold-action, .btn-large, .form-submit-btn {
    transition: transform 0.2s cubic-bezier(0.25, 1, 0.5, 1), 
                box-shadow 0.3s ease, 
                border-color 0.3s ease, 
                background-color 0.3s ease;
}

@keyframes cursorPulse {
    0%, 100% { transform: translate(-50%, -50%) scale(1); }
    50% { transform: translate(-50%, -50%) scale(1.05); }
}

/* ==========================================================================
   SMART BACK TO TOP COMPONENT
   ========================================================================== */
.back-to-top-btn {
    position: fixed;
    bottom: 40px;
    right: 40px;
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: rgba(9, 13, 22, 0.75);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1.5px solid rgba(209, 168, 94, 0.22);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5), 0 0 15px rgba(209, 168, 94, 0.1);
    z-index: 99998;
    cursor: pointer;
    outline: none;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.4s ease, 
                transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), 
                border-color 0.3s ease, 
                background-color 0.3s ease,
                box-shadow 0.3s ease;
}

/* Hide on initial load until scrolled */
.back-to-top-btn.hidden {
    opacity: 0;
    transform: translateY(30px) scale(0.8);
    pointer-events: none;
}

/* Hover effects */
.back-to-top-btn:hover {
    transform: translateY(-4px) scale(1.05);
    border-color: rgba(209, 168, 94, 0.6);
    background: rgba(15, 23, 42, 0.85);
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.6), 0 0 20px rgba(209, 168, 94, 0.25);
}

.back-to-top-btn:hover .btt-icon {
    transform: translateY(-3px);
    color: #fff;
}

.back-to-top-btn:hover .scroll-percent {
    color: var(--color-gold);
}

/* Click Easing transition scale */
.back-to-top-btn:active {
    transform: translateY(1px) scale(0.95);
    box-shadow: 0 5px 15px rgba(0,0,0,0.4);
}

/* Circular SVG Progress Ring Layout */
.progress-ring-svg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.ring-track {
    fill: none;
    stroke: rgba(255, 255, 255, 0.02);
    stroke-width: 3.5;
}

.ring-progress {
    fill: none;
    stroke: var(--color-gold);
    stroke-width: 3.5;
    stroke-linecap: round;
    transform: rotate(-90deg);
    transform-origin: 50% 50%;
    transition: stroke-dashoffset 0.1s linear, stroke 0.3s ease;
}

/* Center Content */
.btt-inner {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1px;
}

.scroll-percent {
    font-family: var(--font-heading);
    font-size: 10px;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.85);
    line-height: 1;
    transition: color 0.3s ease;
}

.btt-icon {
    font-size: 12px;
    color: var(--color-gold);
    transition: transform 0.3s ease, color 0.3s ease;
}

/* Return to top tooltip */
.btt-tooltip {
    position: absolute;
    right: calc(100% + 14px);
    top: 50%;
    transform: translateY(-50%) translateX(10px);
    background: rgba(9, 13, 22, 0.95);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    border: 1px solid rgba(209, 168, 94, 0.3);
    padding: 6px 12px;
    border-radius: 8px;
    font-size: 11px;
    font-weight: 600;
    color: #fff;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
    /* 1s Delay so it only displays when hovered for a moment */
    transition: opacity 0.3s cubic-bezier(0.16, 1, 0.3, 1) 0.8s, 
                transform 0.3s cubic-bezier(0.16, 1, 0.3, 1) 0.8s;
}

.btt-tooltip::after {
    content: '';
    position: absolute;
    left: 100%;
    top: 50%;
    transform: translateY(-50%);
    border: 5px solid transparent;
    border-left-color: rgba(9, 13, 22, 0.95);
}

.back-to-top-btn:hover .btt-tooltip {
    opacity: 1;
    transform: translateY(-50%) translateX(0);
}

/* Glowing high-progress states */
.back-to-top-btn.glowing .ring-progress {
    stroke: #fff;
    filter: drop-shadow(0 0 5px var(--color-gold-glow));
}

.back-to-top-btn.complete-pulse {
    animation: bttPulse 1s ease-in-out;
}

@keyframes bttPulse {
    0% { box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5), 0 0 0px rgba(255, 255, 255, 0.4); }
    50% { box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5), 0 0 20px rgba(255, 255, 255, 0.8); }
    100% { box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5), 0 0 0px rgba(255, 255, 255, 0); }
}

@media (max-width: 768px) {
    .back-to-top-btn {
        bottom: 24px;
        right: 24px;
        width: 56px;
        height: 56px;
    }
    .scroll-percent {
        font-size: 9px;
    }
    .btt-icon {
        font-size: 11px;
    }
}

/* ==========================================================================
   PREMIUM LUXURY BRAND FOOTER
   ========================================================================== */
.luxury-footer {
    position: relative;
    padding: 100px 4% 60px 4%;
    background: linear-gradient(180deg, #05070c 0%, #020305 100%), 
                radial-gradient(circle at 50% 100%, rgba(209, 168, 94, 0.06) 0%, transparent 60%);
    background-image: radial-gradient(rgba(209, 168, 94, 0.01) 1px, transparent 1px);
    background-size: 30px 30px;
    border-top: 1px solid rgba(209, 168, 94, 0.08);
    overflow: hidden;
    z-index: 2;
}

.footer-top-divider {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
}

.footer-top-divider .divider-line {
    background: linear-gradient(90deg, transparent 0%, rgba(209, 168, 94, 0.35) 50%, transparent 100%);
    height: 1.5px;
    width: 100%;
    box-shadow: 0 0 10px rgba(209, 168, 94, 0.15);
}

.footer-container {
    max-width: 1400px;
    margin: 0 auto;
    width: 100%;
    position: relative;
    z-index: 2;
}

/* Animated Skyline SVG Silhouette Background */
.footer-skyline-bg {
    position: absolute;
    left: 0;
    bottom: -40px;
    width: 100%;
    height: 150px;
    pointer-events: none;
    z-index: 1;
    opacity: 0.12;
}

.skyline-svg {
    width: 100%;
    height: 100%;
}

/* Blinking Window Lights in Silhouette */
.win-light {
    fill: rgba(209, 168, 94, 0.15);
    transition: fill 0.5s ease;
}

.win-light.blink-1 {
    animation: blinkWin 3s infinite ease-in-out;
}
.win-light.blink-2 {
    animation: blinkWin 4s infinite ease-in-out 1s;
}
.win-light.blink-3 {
    animation: blinkWin 5s infinite ease-in-out 2.5s;
}

@keyframes blinkWin {
    0%, 100% { fill: rgba(209, 168, 94, 0.15); }
    50% { fill: rgba(209, 168, 94, 0.85); filter: drop-shadow(0 0 2px var(--color-gold)); }
}

/* Columns Grid Layout */
.footer-columns-grid {
    display: grid;
    grid-template-columns: 1.2fr 0.8fr 1fr 1fr 1.2fr;
    gap: 40px;
    margin-bottom: 60px;
    position: relative;
    z-index: 3;
}

.footer-column h4 {
    font-family: var(--font-heading);
    font-size: 15px;
    font-weight: 700;
    color: var(--color-gold);
    text-transform: uppercase;
    letter-spacing: 0.8px;
    margin-bottom: 24px;
    position: relative;
}

.footer-column h4::after {
    content: '';
    position: absolute;
    bottom: -6px;
    left: 0;
    width: 24px;
    height: 1.5px;
    background: var(--color-gold);
}

/* Column 1: Brand */
.col-brand .footer-logo {
    display: flex;
    flex-direction: column;
    margin-bottom: 18px;
}

.col-brand .footer-logo h3 {
    font-family: var(--font-heading);
    font-size: 24px;
    font-weight: 800;
    color: #fff;
    letter-spacing: 1px;
    line-height: 1;
}

.col-brand .footer-logo span {
    font-size: 9px;
    color: var(--color-gold);
    letter-spacing: 4px;
    margin-top: 3px;
}

.brand-tagline {
    font-size: 13px;
    color: var(--color-text-secondary-dark);
    line-height: 1.5;
    margin-bottom: 20px;
}

.brand-details {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.brand-details li {
    font-size: 12px;
    color: var(--color-text-secondary-dark);
}

.brand-details li strong {
    color: #fff;
}

/* Column 2: Navigation Links */
.footer-nav-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.footer-nav-list a {
    text-decoration: none;
    color: var(--color-text-secondary-dark);
    font-size: 13px;
    transition: color 0.3s ease;
    display: inline-block;
    position: relative;
    padding-bottom: 2px;
}

.footer-nav-list a i {
    font-size: 9px;
    margin-right: 8px;
    color: var(--color-gold);
    transition: transform 0.3s ease;
}

.footer-nav-list a::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 1px;
    background: var(--color-gold);
    transition: width 0.3s ease;
}

.footer-nav-list a:hover {
    color: #fff;
}

.footer-nav-list a:hover i {
    transform: translateX(3px);
}

.footer-nav-list a:hover::after {
    width: 100%;
}

/* Column 3: Projects Directory */
.project-links-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.project-thumb-link {
    display: flex;
    align-items: center;
    gap: 12px;
    text-decoration: none;
}

.project-thumb {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    background: rgba(15, 23, 42, 0.45);
    border: 1px solid rgba(209, 168, 94, 0.15);
    color: var(--color-gold);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    flex-shrink: 0;
    transition: all 0.3s ease;
}

.project-link-info {
    display: flex;
    flex-direction: column;
}

.project-link-info strong {
    font-family: var(--font-heading);
    font-size: 13px;
    color: var(--color-text-secondary-dark);
    transition: color 0.3s ease;
}

.project-link-info span {
    font-size: 10px;
    color: rgba(255, 255, 255, 0.3);
}

.project-thumb-link:hover .project-thumb {
    background: var(--color-gold);
    color: #000;
    border-color: #fff;
    transform: scale(1.05);
}

.project-thumb-link:hover .project-link-info strong {
    color: #fff;
}

/* Column 4: Contact Us List */
.footer-contact-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.footer-contact-list li {
    display: flex;
    gap: 14px;
    align-items: flex-start;
}

.footer-contact-list li i {
    font-size: 14px;
    color: var(--color-gold);
    margin-top: 3px;
    width: 16px;
    text-align: center;
}

.footer-contact-list li span {
    font-size: 13px;
    color: var(--color-text-secondary-dark);
    line-height: 1.4;
}

/* Column 5: Stay Connected & Newsletter */
.subscribe-text {
    font-size: 13px;
    color: var(--color-text-secondary-dark);
    line-height: 1.5;
    margin-bottom: 18px;
}

.footer-subscribe-form {
    display: flex;
    background: rgba(9, 13, 22, 0.4);
    border: 1px solid rgba(209, 168, 94, 0.15);
    border-radius: 12px;
    overflow: hidden;
    margin-bottom: 24px;
    transition: border-color 0.3s ease;
}

.footer-subscribe-form:focus-within {
    border-color: var(--color-gold);
}

.footer-subscribe-form input {
    flex-grow: 1;
    background: transparent;
    border: none;
    outline: none;
    padding: 14px 16px;
    color: #fff;
    font-size: 13px;
    width: 70%;
}

.btn-sub-icon {
    padding: 14px 16px !important;
    background: var(--color-gold);
    color: #000;
    border-radius: 0 !important;
    width: 30%;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    cursor: pointer;
    transition: all 0.3s ease;
}

.btn-sub-icon:hover {
    background: #fff;
}

.footer-socials {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.social-circle-btn {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(15, 23, 42, 0.45);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-color: rgba(209, 168, 94, 0.15);
    color: var(--color-gold);
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    font-size: 14px;
    transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.social-circle-btn:hover {
    transform: translateY(-3px) rotate(8deg);
    background: var(--color-gold);
    color: #000;
    border-color: #fff;
    box-shadow: 0 5px 15px var(--color-gold-glow);
}

/* Trust Strip Badges Row */
.footer-trust-strip {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    padding: 24px;
    background: rgba(15, 23, 42, 0.35);
    border-color: rgba(209, 168, 94, 0.12);
    border-radius: 16px;
    margin-bottom: 50px;
    position: relative;
    z-index: 3;
}

.trust-strip-badge {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 16px;
}

.trust-strip-badge i {
    font-size: 13px;
    color: var(--color-gold);
}

.trust-strip-badge span {
    font-family: var(--font-heading);
    font-size: 12px;
    font-weight: 500;
    color: var(--color-text-secondary-dark);
}

/* Bottom Legal Copyright Row */
.footer-bottom-row {
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    padding-top: 35px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    position: relative;
    z-index: 3;
}

.legal-links {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
}

.legal-links a {
    text-decoration: none;
    font-size: 12px;
    color: var(--color-text-secondary-dark);
    transition: color 0.3s ease;
}

.legal-links a:hover {
    color: var(--color-gold);
}

.legal-sep {
    color: rgba(255, 255, 255, 0.1);
    font-size: 11px;
}

.footer-copyright p {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.35);
    text-align: center;
}

.footer-luxury-signature p {
    font-family: Georgia, serif;
    font-style: italic;
    font-size: 15px;
    color: var(--color-gold);
    text-align: center;
    letter-spacing: 0.5px;
    margin-top: 5px;
}

/* ==========================================================================
   FOOTER MEDIA QUERIES
   ========================================================================== */
@media (max-width: 1200px) {
    .footer-columns-grid {
        grid-template-columns: 1.5fr 1fr 1.5fr; /* 3 columns on small desktops */
        gap: 30px;
    }
}

@media (max-width: 992px) {
    .footer-columns-grid {
        grid-template-columns: repeat(2, 1fr); /* 2 columns on tablet */
        gap: 30px;
    }
    .col-brand {
        grid-column: span 2; /* Brand identity takes full width on top */
    }
}

@media (max-width: 768px) {
    .footer-trust-strip {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
        padding: 16px;
    }
    .trust-strip-badge {
        padding: 4px;
    }
}

@media (max-width: 576px) {
    .footer-columns-grid {
        grid-template-columns: 1fr; /* Single column on mobile */
        gap: 35px;
    }
    .col-brand {
        grid-column: span 1;
    }
    .luxury-footer {
        padding: 80px 4% 40px 4%;
    }
    .legal-links {
        flex-direction: column;
        align-items: center;
        gap: 8px;
    }
    .legal-sep {
        display: none;
    }
}

/* ==========================================================================
   GLASS REFLECTION SYSTEM
   ========================================================================== */
.glass-reflection-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 160%;
    height: 160%;
    pointer-events: none;
    z-index: 1; /* Below content, above card bg */
    background: linear-gradient(135deg, 
        rgba(255, 255, 255, 0) 0%,
        rgba(255, 255, 255, 0.02) 25%,
        rgba(255, 255, 255, 0.06) 35%,
        rgba(209, 168, 94, 0.04) 40%, /* Subtle gold hint */
        rgba(255, 255, 255, 0.06) 45%,
        rgba(255, 255, 255, 0.02) 55%,
        rgba(255, 255, 255, 0) 80%
    );
    mix-blend-mode: overlay;
    transform: translate(-30%, -30%) rotate(-35deg);
    filter: blur(1.5px);
    opacity: 0.35;
    transition: opacity 0.5s ease;
}

.glass-edge-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: inherit;
    pointer-events: none;
    z-index: 2;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.05);
    transition: box-shadow 0.3s cubic-bezier(0.25, 1, 0.5, 1);
}

/* Hover intensities */
.glass-panel:hover .glass-reflection-overlay,
.top-widget:hover .glass-reflection-overlay,
.floor-hud-card:hover .glass-reflection-overlay,
.back-to-top-btn:hover .glass-reflection-overlay {
    opacity: 0.5;
}

@media (max-width: 768px) {
    .back-to-top-btn {
        bottom: 24px;
        right: 24px;
        width: 56px;
        height: 56px;
    }
    .scroll-percent {
        font-size: 9px;
    }
    .btt-icon {
        font-size: 11px;
    }
}

/* ==========================================================================
   LIVE INVENTORY EXPLORER™ SYSTEM
   ========================================================================== */
.inventory-section {
    position: relative;
    padding: 100px 4% 60px 4%;
    background: linear-gradient(180deg, #090d16 0%, #05070c 100%);
    border-top: 1px solid rgba(209, 168, 94, 0.08);
}

.inventory-main-container {
    max-width: 1400px;
    margin: 0 auto;
    width: 100%;
}

.inventory-header {
    text-align: center;
    margin-bottom: 40px;
}

/* Filters Panel */
.inventory-filters-panel {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 20px;
    padding: 20px 30px;
    border-radius: 16px;
    margin-bottom: 30px;
}

.inv-search-box {
    position: relative;
    width: 320px;
    max-width: 100%;
}

.inv-search-box .search-icon {
    position: absolute;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--color-gold);
    font-size: 13px;
}

.inv-search-box input {
    width: 100%;
    background: rgba(9, 13, 22, 0.6);
    border: 1px solid rgba(209, 168, 94, 0.2);
    border-radius: 12px;
    padding: 12px 16px 12px 42px;
    color: #fff;
    font-size: 13px;
    outline: none;
    transition: border-color 0.3s ease;
}

.inv-search-box input:focus {
    border-color: var(--color-gold);
}

.inv-filters-row {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
}

.filter-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.filter-group label {
    font-size: 10px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.4);
    font-weight: 600;
}

.filter-group select {
    background: rgba(9, 13, 22, 0.6);
    border: 1px solid rgba(209, 168, 94, 0.2);
    border-radius: 8px;
    padding: 8px 14px;
    color: #fff;
    font-family: var(--font-heading);
    font-size: 13px;
    outline: none;
    cursor: pointer;
    transition: border-color 0.3s ease;
}

.filter-group select:focus {
    border-color: var(--color-gold);
}

/* Two-Column Grid */
.inventory-layout-grid {
    display: grid;
    grid-template-columns: 1.2fr 0.8fr;
    gap: 30px;
    margin-bottom: 40px;
}

/* Left Panel - Tower elevation */
.inventory-left-panel {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.inventory-legend {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    padding: 14px;
    border-radius: 12px;
    gap: 10px;
}

.legend-item {
    font-size: 12px;
    color: var(--color-text-secondary-dark);
    display: flex;
    align-items: center;
    gap: 8px;
}

.dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    display: inline-block;
}

.dot.available { background: #10b981; }
.dot.reserved { background: #d1a85e; }
.dot.sold { background: #ef4444; }
.dot.coming-soon { background: #3b82f6; }
.dot.unreleased { background: #64748b; }

.interactive-tower-scroller {
    padding: 30px 24px;
    border-radius: 20px;
    max-height: 620px;
    overflow-y: auto;
}

/* Facade Facelift Grid */
.tower-facade {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 500px;
}

.facade-floor-row {
    display: flex;
    align-items: center;
    gap: 16px;
    padding-bottom: 6px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.02);
}

.floor-lbl {
    font-family: var(--font-heading);
    font-size: 12px;
    font-weight: 700;
    color: var(--color-gold);
    width: 40px;
    text-align: right;
    opacity: 0.7;
}

.floor-units-row {
    display: flex;
    flex-grow: 1;
    gap: 12px;
}

.inv-unit-tile {
    flex-grow: 1;
    height: 28px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    font-weight: 700;
    color: #fff;
    cursor: pointer;
    border: 1px solid transparent;
    transition: all 0.3s cubic-bezier(0.25, 1, 0.5, 1);
}

/* Pulsing Status Colors */
.inv-unit-tile.available {
    background: rgba(16, 185, 129, 0.15);
    border-color: rgba(16, 185, 129, 0.35);
    color: #10b981;
    animation: emeraldPulse 3s infinite ease-in-out;
}
.inv-unit-tile.available:hover {
    background: rgba(16, 185, 129, 0.35);
    border-color: #10b981;
    transform: scale(1.05);
}

.inv-unit-tile.reserved {
    background: rgba(209, 168, 94, 0.15);
    border-color: rgba(209, 168, 94, 0.35);
    color: var(--color-gold);
    animation: goldGlow 4s infinite ease-in-out;
}
.inv-unit-tile.reserved:hover {
    background: rgba(209, 168, 94, 0.35);
    border-color: var(--color-gold);
    transform: scale(1.05);
}

.inv-unit-tile.sold {
    background: rgba(239, 68, 68, 0.08);
    border-color: rgba(239, 68, 68, 0.25);
    color: rgba(239, 68, 68, 0.45);
}
.inv-unit-tile.sold:hover {
    background: rgba(239, 68, 68, 0.15);
    border-color: rgba(239, 68, 68, 0.4);
    transform: scale(1.02);
}

.inv-unit-tile.coming-soon {
    background: rgba(59, 130, 246, 0.15);
    border-color: rgba(59, 130, 246, 0.35);
    color: #3b82f6;
    animation: blueBreath 2.5s infinite ease-in-out alternate;
}
.inv-unit-tile.coming-soon:hover {
    background: rgba(59, 130, 246, 0.3);
    border-color: #3b82f6;
    transform: scale(1.05);
}

.inv-unit-tile.unreleased {
    background: rgba(100, 116, 139, 0.1);
    border-color: rgba(100, 116, 139, 0.25);
    color: rgba(255, 255, 255, 0.25);
}

/* Highlighted search target */
.inv-unit-tile.search-highlight {
    box-shadow: 0 0 15px #fff;
    border-color: #fff !important;
    transform: scale(1.08);
    z-index: 10;
}

/* Filter Dimming */
.inv-unit-tile.filtered-out {
    opacity: 0.15;
    pointer-events: none;
}

@keyframes emeraldPulse {
    0%, 100% { box-shadow: 0 0 0 rgba(16, 185, 129, 0); }
    50% { box-shadow: 0 0 8px rgba(16, 185, 129, 0.4); }
}

@keyframes goldGlow {
    0%, 100% { box-shadow: 0 0 0 rgba(209, 168, 94, 0); }
    50% { box-shadow: 0 0 8px rgba(209, 168, 94, 0.4); }
}

@keyframes blueBreath {
    0% { opacity: 0.65; }
    100% { opacity: 1; }
}

/* Right Panel - Info details */
.inventory-right-panel {
    padding: 35px 30px;
    border-radius: 20px;
    align-self: start;
    position: sticky;
    top: 100px;
    min-height: 480px;
}

.panel-placeholder-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 16px;
    padding: 80px 20px;
    color: rgba(255, 255, 255, 0.35);
}

.placeholder-main-icon {
    font-size: 54px;
    color: var(--color-gold);
    opacity: 0.3;
}

.panel-placeholder-state h4 {
    font-family: var(--font-heading);
    font-size: 18px;
    color: #fff;
}

.panel-placeholder-state p {
    font-size: 13px;
    line-height: 1.5;
}

/* Active Info Area */
.unit-info-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    padding-bottom: 20px;
    margin-bottom: 20px;
}

.unit-info-header h3 {
    font-family: var(--font-heading);
    font-size: 26px;
    font-weight: 800;
    color: #fff;
}

.unit-info-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
    margin-bottom: 24px;
}

.info-item {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.info-item label {
    font-size: 10px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.4);
    font-weight: 600;
}

.info-item span {
    font-size: 14px;
    font-weight: 700;
    color: #fff;
}

/* Mini Floor Map blueprint */
.mini-floor-map-wrapper {
    background: rgba(9, 13, 22, 0.6);
    border: 1px solid rgba(209, 168, 94, 0.15);
    border-radius: 12px;
    padding: 20px;
    margin-bottom: 24px;
}

.mini-floor-map-wrapper h5 {
    font-family: var(--font-heading);
    font-size: 11px;
    text-transform: uppercase;
    color: var(--color-gold);
    margin-bottom: 14px;
    letter-spacing: 0.5px;
}

.floor-map-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
}

.map-cell {
    height: 32px;
    border-radius: 4px;
    border: 1px solid rgba(255, 255, 255, 0.05);
    background: rgba(255, 255, 255, 0.02);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 9px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.3);
}

.map-cell.active-unit {
    border-color: var(--color-gold);
    background: rgba(209, 168, 94, 0.12);
    color: var(--color-gold);
    font-weight: 800;
    box-shadow: 0 0 8px rgba(209, 168, 94, 0.2);
}

.map-cell.service {
    background: rgba(255, 255, 255, 0.05);
    color: rgba(255, 255, 255, 0.15);
    font-size: 8px;
}

/* Action button strip */
.unit-action-buttons {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 24px;
}

/* Alternative recommendations */
.alternatives-box {
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    padding-top: 20px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.alternatives-box label {
    font-size: 10px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.4);
    font-weight: 600;
}

.alt-row-list {
    display: flex;
    gap: 10px;
}

.alt-pill-btn {
    background: rgba(9, 13, 22, 0.5);
    border: 1px solid rgba(209, 168, 94, 0.2);
    color: var(--color-gold);
    padding: 6px 12px;
    border-radius: 8px;
    font-size: 11px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.3s ease;
}

.alt-pill-btn:hover {
    background: var(--color-gold);
    color: #000;
    border-color: #fff;
}

/* Stats strip */
.inventory-stats-strip {
    display: flex;
    justify-content: space-around;
    padding: 30px 24px;
    border-radius: 16px;
    flex-wrap: wrap;
    gap: 20px;
}

.inventory-stats-strip .inv-stat-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    text-align: center;
}

.inventory-stats-strip h3 {
    font-family: var(--font-heading);
    font-size: 28px;
    font-weight: 800;
    color: #fff;
}

.inventory-stats-strip span {
    font-size: 11px;
    color: var(--color-text-secondary-dark);
    text-transform: uppercase;
    font-weight: 500;
}

/* Responsive configurations */
@media (max-width: 992px) {
    .inventory-layout-grid {
        grid-template-columns: 1fr;
    }
    .inventory-right-panel {
        position: static;
        min-height: auto;
    }
}










/* ==========================================================================
   UPGRADED PREMIUM ADAPTIVE NAVIGATION
   ========================================================================== */
.luxury-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    height: 96px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 5%;
    background: transparent;
    border-bottom: 1px solid rgba(255, 255, 255, 0);
    box-shadow: none;
    transition: height 0.4s cubic-bezier(0.16, 1, 0.3, 1),
                background 0.4s cubic-bezier(0.16, 1, 0.3, 1),
                border-color 0.4s cubic-bezier(0.16, 1, 0.3, 1),
                box-shadow 0.4s cubic-bezier(0.16, 1, 0.3, 1),
                backdrop-filter 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Scrolled Compact Header */
.luxury-header.scrolled {
    height: 76px;
    background: rgba(9, 13, 22, 0.75);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-color: rgba(209, 168, 94, 0.15);
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.35);
}

.luxury-header .logo {
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    transform-origin: left center;
}

.luxury-header.scrolled .logo {
    transform: scale(0.92);
}

.luxury-nav {
    position: relative;
    display: flex;
    gap: 22px;
    align-items: center;
    transition: gap 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.luxury-header.scrolled .luxury-nav {
    gap: 16px;
}

.luxury-nav a {
    font-size: 13px;
    font-weight: 500;
    color: var(--color-text-secondary-dark);
    text-decoration: none;
    transition: color 0.3s ease, transform 0.3s ease;
    padding: 10px 0;
    position: relative;
}

.luxury-nav a:hover {
    color: #fff;
    transform: translateY(-1.5px);
}

/* Underline Hover Grow from Center */
.luxury-nav a::after {
    content: '';
    position: absolute;
    bottom: 2px;
    left: 50%;
    width: 0;
    height: 1.5px;
    background: var(--color-gold);
    transition: width 0.3s ease, left 0.3s ease;
}

.luxury-nav a:hover::after {
    width: 100%;
    left: 0;
}

/* Active Link Glow Underline Indicator */
.nav-active-line {
    position: absolute;
    bottom: 2px;
    height: 1.5px;
    background: var(--color-gold);
    box-shadow: 0 0 8px var(--color-gold-glow);
    transition: left 0.4s cubic-bezier(0.16, 1, 0.3, 1),
                width 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    pointer-events: none;
}

/* Header CTAs */
.search-trigger-btn {
    background: transparent;
    border: none;
    color: var(--color-text-secondary-dark);
    font-size: 15px;
    cursor: pointer;
    padding: 8px;
    transition: color 0.3s, transform 0.3s;
    margin-right: 8px;
}

.search-trigger-btn:hover {
    color: var(--color-gold);
    transform: scale(1.1);
}

.nav-cta-btn {
    padding: 10px 20px !important;
    font-size: 12px;
    font-weight: 700;
    border-radius: 8px;
    border: 1px solid rgba(209, 168, 94, 0.4);
    background: rgba(209, 168, 94, 0.05);
    color: var(--color-gold);
    cursor: pointer;
    transition: all 0.3s ease;
}

.nav-cta-btn:hover {
    background: var(--color-gold);
    color: #000;
    box-shadow: 0 0 15px var(--color-gold-glow);
}

.luxury-header.scrolled .nav-cta-btn {
    padding: 8px 16px !important;
}

/* Hamburger mobile trigger */
.mobile-menu-btn {
    display: none;
    background: transparent;
    border: none;
    color: #fff;
    font-size: 20px;
    cursor: pointer;
    padding: 8px;
    margin-left: 8px;
}

/* SEARCH OVERLAY SCREEN */
.search-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(5, 7, 12, 0.95);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.4s ease;
}

.search-overlay.hidden {
    opacity: 0;
    pointer-events: none;
}

.search-overlay-close {
    position: absolute;
    top: 30px;
    right: 30px;
    background: transparent;
    border: none;
    color: #fff;
    font-size: 32px;
    cursor: pointer;
    transition: color 0.3s;
}

.search-overlay-close:hover {
    color: var(--color-gold);
}

.search-overlay-content {
    width: 90%;
    max-width: 600px;
    padding: 40px;
    border-radius: 24px;
    text-align: center;
}

.search-overlay-content h3 {
    font-family: var(--font-heading);
    font-size: 20px;
    color: #fff;
    margin-bottom: 24px;
}

.search-overlay-input-wrap {
    position: relative;
    margin-bottom: 20px;
}

.search-overlay-input-wrap .search-icon {
    position: absolute;
    left: 18px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--color-gold);
    font-size: 16px;
}

.search-overlay-input-wrap input {
    width: 100%;
    background: rgba(9, 13, 22, 0.6);
    border: 1px solid rgba(209, 168, 94, 0.25);
    border-radius: 14px;
    padding: 16px 20px 16px 52px;
    color: #fff;
    font-size: 16px;
    outline: none;
    transition: border-color 0.3s;
}

.search-overlay-input-wrap input:focus {
    border-color: var(--color-gold);
}

.search-suggestions-row {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    font-size: 13px;
    color: rgba(255, 255, 255, 0.4);
}

.search-suggestions-row a {
    color: var(--color-gold);
    text-decoration: none;
    border-bottom: 1px dashed rgba(209, 168, 94, 0.3);
    transition: border-color 0.3s;
}

.search-suggestions-row a:hover {
    border-color: var(--color-gold);
}

/* MOBILE MENU OVERLAY */
.mobile-menu-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(180deg, rgba(9, 13, 22, 0.98) 0%, rgba(5, 7, 12, 0.99) 100%);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    z-index: 10001;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.4s ease;
}

.mobile-menu-overlay.hidden {
    opacity: 0;
    pointer-events: none;
}

.mobile-menu-close {
    position: absolute;
    top: 30px;
    right: 30px;
    background: transparent;
    border: none;
    color: #fff;
    font-size: 32px;
    cursor: pointer;
    transition: color 0.3s;
}

.mobile-menu-close:hover {
    color: var(--color-gold);
}

.mobile-menu-links {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 28px;
    width: 80%;
}

.mobile-menu-links a {
    font-family: var(--font-heading);
    font-size: 20px;
    font-weight: 700;
    color: #fff;
    text-decoration: none;
    transition: color 0.3s, transform 0.3s;
}

.mobile-menu-links a:hover {
    color: var(--color-gold);
    transform: translateY(-2px);
}

/* Responsive navigation queries */
@media (max-width: 1024px) {
    .luxury-nav {
        display: none;
    }
    .mobile-menu-btn {
        display: block;
    }
}

/* ==========================================================================
   PREMIUM LUXURY SECTION TRANSITION SYSTEM™
   ========================================================================== */
.section-transition {
    position: relative;
    height: 120px;
    width: 100%;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #090d16;
    z-index: 5;
}

.divider-line-gold {
    height: 1px;
    width: 80%;
    max-width: 1200px;
    background: radial-gradient(circle, rgba(209, 168, 94, 0.4) 0%, rgba(209, 168, 94, 0.1) 60%, transparent 100%);
    box-shadow: 0 0 10px rgba(209, 168, 94, 0.15);
    transition: background 0.5s ease, box-shadow 0.5s ease;
    position: relative;
    z-index: 3;
}

.ambient-glow {
    position: absolute;
    width: 400px;
    height: 120px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(209, 168, 94, 0.04) 0%, transparent 70%);
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    pointer-events: none;
    opacity: 0.5;
    transition: opacity 0.6s ease;
    z-index: 2;
}

.particles-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 1;
}

/* Scroll Approach Reveal Classes */
.section-transition.in-view .divider-line-gold {
    background: radial-gradient(circle, rgba(209, 168, 94, 0.8) 0%, rgba(209, 168, 94, 0.15) 60%, transparent 100%);
    box-shadow: 0 0 15px rgba(209, 168, 94, 0.3);
}

.section-transition.in-view .ambient-glow {
    opacity: 1;
}

/* Floating Particles Styles */
.transition-particle {
    position: absolute;
    background: var(--color-gold);
    border-radius: 50%;
    pointer-events: none;
    animation: floatUp 8s infinite linear;
}

@keyframes floatUp {
    0% {
        transform: translateY(60px) translateX(0);
        opacity: 0;
    }
    15% {
        opacity: 0.15;
    }
    85% {
        opacity: 0.15;
    }
    100% {
        transform: translateY(-60px) translateX(15px);
        opacity: 0;
    }
}

/* Adaptive Divided Themes */
.hero-to-amenities {
    background: linear-gradient(180deg, #090d16 0%, #06080e 50%, #090d16 100%);
}

.amenities-to-connectivity {
    background-image: linear-gradient(rgba(209, 168, 94, 0.02) 1px, transparent 1px), 
                      linear-gradient(90deg, rgba(209, 168, 94, 0.02) 1px, transparent 1px);
    background-size: 24px 24px;
    background-position: center;
}

.connectivity-to-viewiq {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0) 40%, rgba(255, 255, 255, 0.02) 50%, rgba(255, 255, 255, 0) 60%);
}

.viewiq-to-inventory {
    background-image: repeating-linear-gradient(90deg, transparent, transparent 30px, rgba(255, 255, 255, 0.01) 30px, rgba(255, 255, 255, 0.01) 60px);
}

.inventory-to-contact {
    background: linear-gradient(180deg, #090d16 0%, #05070c 100%);
}

.contact-to-footer {
    background: linear-gradient(180deg, #05070c 0%, #030408 100%);
}

/* Accessibility Reduced Motion Checks */
@media (prefers-reduced-motion: reduce) {
    .transition-particle {
        animation: none !important;
        display: none !important;
    }
    .section-transition {
        transition: none !important;
    }
    .divider-line-gold {
        transition: none !important;
    }
}

/* ==========================================================================
   PREMIUM LUXURY AMBIENT ATMOSPHERE SYSTEM™
   ========================================================================== */
.ambient-atmosphere-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    pointer-events: none;
    z-index: 1; /* Sits behind text, logo, cards but above base body background */
    overflow: hidden;
}

.ambient-particle {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    will-change: transform, opacity;
    transition: transform 0.8s cubic-bezier(0.25, 1, 0.5, 1),
                opacity 0.8s ease;
}

/* Three Depth Layers */
.ambient-particle.layer-bg {
    opacity: 0.05;
    filter: blur(0.5px);
    -webkit-filter: blur(0.5px);
}

.ambient-particle.layer-mid {
    opacity: 0.09;
    filter: blur(1px);
    -webkit-filter: blur(1px);
}

.ambient-particle.layer-fg {
    opacity: 0.13;
    filter: blur(1.5px);
    -webkit-filter: blur(1.5px);
}

/* Ambient Light Blooms Behind Important Sections */
.hero-building-haze {
    position: absolute;
    top: 15%;
    left: 50%;
    transform: translateX(-50%);
    width: 700px;
    height: 700px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(209, 168, 94, 0.025) 0%, transparent 70%);
    pointer-events: none;
    z-index: 1;
}

.amenities-section {
    background: radial-gradient(circle at 80% 50%, rgba(209, 168, 94, 0.02) 0%, #090d16 60%) !important;
}

.location-section {
    background: radial-gradient(circle at 20% 50%, rgba(209, 168, 94, 0.02) 0%, #090d16 60%) !important;
}

.view-iq-section {
    background: radial-gradient(circle at 50% 80%, rgba(209, 168, 94, 0.025) 0%, #090d16 70%) !important;
}

.inventory-section {
    background: radial-gradient(circle at 50% 50%, rgba(209, 168, 94, 0.02) 0%, #090d16 60%) !important;
}

.contact-section {
    background: radial-gradient(circle at 50% 20%, rgba(209, 168, 94, 0.03) 0%, #090d16 70%) !important;
}

/* ==========================================================================
   THE GRAND ARRIVAL™ CINEMATIC INTRO STYLES
   ========================================================================== */
.arrival-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: #000000;
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    transition: opacity 1.2s cubic-bezier(0.25, 1, 0.5, 1),
                visibility 1.2s;
}

/* Stage 1 & 2: Soft warm glow (Sunrise before creation) */
.arrival-overlay.stage-gradient {
    background: radial-gradient(circle at center, #0f1624 0%, #000000 100%);
}

.arrival-haze {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle at center, rgba(209, 168, 94, 0.035) 0%, transparent 60%);
    opacity: 0;
    transition: opacity 2s cubic-bezier(0.25, 1, 0.5, 1);
    z-index: 1;
}

.arrival-overlay.stage-gradient .arrival-haze {
    opacity: 1;
}

/* Scene 3: Tracing Blueprint Reveal */
.arrival-blueprint {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    pointer-events: none;
    opacity: 0;
    background-image: linear-gradient(rgba(209, 168, 94, 0.015) 1px, transparent 1px), 
                      linear-gradient(90deg, rgba(209, 168, 94, 0.015) 1px, transparent 1px);
    background-size: 36px 36px;
    background-position: center;
    transition: opacity 2.2s cubic-bezier(0.25, 1, 0.5, 1);
    z-index: 2;
}

.arrival-overlay.stage-blueprint .arrival-blueprint {
    opacity: 1;
}

/* Scene 6: Environment Awakens (Clouds & Birds) */
.arrival-environment {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 3;
}

.arrival-cloud {
    position: absolute;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.012) 0%, transparent 70%);
    opacity: 0;
    transition: opacity 3s ease;
}

.arrival-cloud.cloud-1 {
    top: 15%;
    left: 10%;
    width: 400px;
    height: 150px;
}

.arrival-cloud.cloud-2 {
    top: 25%;
    right: 15%;
    width: 500px;
    height: 180px;
}

.arrival-overlay.stage-env .arrival-cloud {
    opacity: 1;
}

.arrival-birds {
    position: absolute;
    top: 30%;
    left: 25%;
    display: flex;
    gap: 8px;
    opacity: 0;
    transform: translate(-30px, 60px) scale(0.6);
}

.arrival-overlay.stage-env .arrival-birds {
    animation: birdsFlight 4.5s cubic-bezier(0.25, 1, 0.5, 1) forwards;
}

.arrival-birds .bird {
    color: rgba(255, 255, 255, 0.12);
    font-size: 8px;
    transform: rotate(50deg);
}

.arrival-birds .bird-2 {
    transform: rotate(50deg) translate(5px, -5px);
}

.arrival-birds .bird-3 {
    transform: rotate(50deg) translate(-5px, 5px);
}

@keyframes birdsFlight {
    0% {
        opacity: 0;
        transform: translate(-40px, 80px) scale(0.5);
    }
    15% {
        opacity: 0.5;
    }
    85% {
        opacity: 0.5;
    }
    100% {
        opacity: 0;
        transform: translate(180px, -120px) scale(0.5);
    }
}

/* Center Box Brand Signature (Scene 2) */
.arrival-center-box {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    z-index: 10;
}

/* Progress Halo around Logo */
.progress-halo {
    width: 140px;
    height: 140px;
    transform: rotate(-90deg);
    position: absolute;
    top: -29px;
    pointer-events: none;
    z-index: 9;
}

.progress-halo .halo-bg {
    stroke: rgba(255, 255, 255, 0.02);
    stroke-width: 1.5px;
    fill: none;
}

.progress-halo .halo-fill {
    stroke: var(--color-gold);
    stroke-width: 1.5px;
    fill: none;
    stroke-dasharray: 339.29;
    stroke-dashoffset: 339.29;
    box-shadow: 0 0 12px var(--color-gold-glow);
    transition: stroke-dashoffset 4.2s cubic-bezier(0.25, 1, 0.5, 1);
}

/* Brand logo reveal */
.arrival-brand {
    opacity: 0;
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 8px;
    clip-path: inset(0 100% 0 0); /* Scene 2: Illuminate/Reveal sweep */
    transition: clip-path 1.8s cubic-bezier(0.25, 1, 0.5, 1),
                opacity 1.5s cubic-bezier(0.25, 1, 0.5, 1);
}

.arrival-overlay.stage-brand .arrival-brand {
    opacity: 1;
    clip-path: inset(0 0 0 0);
}

.arrival-logo-icon {
    font-size: 32px;
    color: var(--color-gold);
    text-shadow: 0 0 10px rgba(209, 168, 94, 0.35);
}

.arrival-logo-text h1 {
    font-family: var(--font-heading);
    font-size: 26px;
    font-weight: 700;
    color: #fff;
    margin: 0;
    letter-spacing: 3px;
}

.arrival-logo-text span {
    font-size: 10px;
    color: var(--color-gold);
    letter-spacing: 5px;
    font-weight: 600;
    display: block;
}

/* Tagline below Logo */
.arrival-tagline {
    opacity: 0;
    font-size: 11px;
    color: rgba(255, 255, 255, 0.35);
    letter-spacing: 4px;
    text-transform: uppercase;
    margin-top: 64px;
    transition: opacity 1.5s cubic-bezier(0.25, 1, 0.5, 1);
}

.arrival-overlay.stage-brand .arrival-tagline {
    opacity: 1;
}

/* Blueprint building outline sketch */
.arrival-building-sketch {
    position: absolute;
    bottom: 4%;
    left: 50%;
    transform: translateX(-50%);
    width: 190px;
    height: 390px;
    opacity: 0;
    pointer-events: none;
    transition: opacity 1.8s cubic-bezier(0.25, 1, 0.5, 1);
    z-index: 5;
}

.arrival-overlay.stage-blueprint .arrival-building-sketch {
    opacity: 1;
}

.sketch-svg {
    width: 100%;
    height: 100%;
}

.sketch-path {
    stroke: rgba(209, 168, 94, 0.25);
    stroke-width: 1.2px;
    fill: none;
    stroke-dasharray: 850;
    stroke-dashoffset: 850;
    transition: stroke-dashoffset 1.5s ease;
}

/* Sequential Drawing lines */
.arrival-overlay.stage-blueprint .path-foundation {
    animation: sketchDraw 1.2s forwards cubic-bezier(0.25, 1, 0.5, 1);
    animation-delay: 0.1s;
}

.arrival-overlay.stage-blueprint .path-columns {
    animation: sketchDraw 1.5s forwards cubic-bezier(0.25, 1, 0.5, 1);
    animation-delay: 0.6s;
}

.arrival-overlay.stage-blueprint .path-balconies {
    animation: sketchDraw 1.5s forwards cubic-bezier(0.25, 1, 0.5, 1);
    animation-delay: 1.4s;
}

.arrival-overlay.stage-blueprint .path-windows {
    animation: sketchDraw 1.2s forwards cubic-bezier(0.25, 1, 0.5, 1);
    animation-delay: 2.2s;
}

.arrival-overlay.stage-blueprint .path-roof {
    animation: sketchDraw 0.9s forwards cubic-bezier(0.25, 1, 0.5, 1);
    animation-delay: 2.8s;
}

/* Scene 5: Window Lights Came Alive */
.win-glow {
    opacity: 0;
    transition: opacity 1.2s cubic-bezier(0.25, 1, 0.5, 1);
}

.arrival-overlay.stage-lights .win-glow {
    opacity: 0.75;
}

.arrival-overlay.stage-lights .glow-1 {
    transition-delay: 0.2s;
}

.arrival-overlay.stage-lights .glow-2 {
    transition-delay: 0.6s;
}

.arrival-overlay.stage-lights .glow-3 {
    transition-delay: 1.0s;
}

@keyframes sketchDraw {
    to {
        stroke-dashoffset: 0;
    }
}

/* Transition Out Aligning Hero */
.arrival-overlay.fade-out {
    opacity: 0;
    pointer-events: none;
    visibility: hidden;
}