/*
 * ============================================================
 *  HOME ART - LUXURY REDESIGN LAYER v3.0
 *  Ultra-premium dark aesthetic: Rolls Royce x Basalte x Apple
 * ============================================================
 */

/* ============================================================
   LUXURY DESIGN TOKENS
   ============================================================ */
:root {
  --lux-black:       #080b14;
  --lux-deep:        #030508;
  --lux-card:        rgba(10,13,24,0.92);
  --lux-glass:       rgba(255,255,255,0.04);
  --lux-gold:        #c9a84c;
  --lux-gold-light:  #e8d5a3;
  --lux-gold-bright: #f0d97a;
  --lux-gold-glow:   rgba(201,168,76,0.18);
  --lux-gold-border: rgba(201,168,76,0.22);
  --lux-gold-border-h:rgba(201,168,76,0.50);
  --lux-white:       #f5f5f7;
  --lux-muted:       rgba(255,255,255,0.52);
  --lux-subtle:      rgba(255,255,255,0.30);
  --lux-radius-sm:   12px;
  --lux-radius-md:   20px;
  --lux-radius-lg:   28px;
  --lux-radius-xl:   40px;
  --lux-ease:        cubic-bezier(0.16,1,0.3,1);
}

/* ============================================================
   BASE - DEEP OBSIDIAN
   ============================================================ */
body {
  background-color: #080b14 !important;
  background-image:
    radial-gradient(ellipse 80% 60% at 20% -10%, rgba(201,168,76,0.05) 0%, transparent 60%),
    radial-gradient(ellipse 60% 50% at 85% 110%, rgba(56,189,248,0.05) 0%, transparent 55%) !important;
  background-attachment: fixed !important;
}

.glow-bloom {
  position: fixed;
  top: -400px; left: 50%;
  transform: translateX(-50%);
  width: 900px; height: 900px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(201,168,76,0.04) 0%, transparent 70%);
  pointer-events: none; z-index: 0;
  animation: bloomPulse 12s ease-in-out infinite alternate;
}
@keyframes bloomPulse {
  from { opacity:0.6; transform:translateX(-50%) scale(1); }
  to   { opacity:1;   transform:translateX(-50%) scale(1.15); }
}

/* ============================================================
   TYPOGRAPHY
   ============================================================ */
h1,h2,h3 { letter-spacing:-0.03em !important; color:#f5f5f7 !important; }

.hero-luxury-title, .text-gradient-gold {
  font-weight:600 !important;
  letter-spacing:-0.025em !important;
}

::-webkit-scrollbar { width:3px; }
::-webkit-scrollbar-track { background:#030508; }
::-webkit-scrollbar-thumb {
  background:linear-gradient(180deg,#c9a84c,transparent);
  border-radius:100px;
}

/* ============================================================
   NAVBAR (Sculpted Ultra-Luxury, Compact & Dropdown Master)
   ============================================================ */
.navbar {
  position: fixed !important;
  top: 0 !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  width: min(1360px, 94%) !important;
  height: 56px !important;
  max-height: 56px !important;
  padding: 0 !important;
  margin-top: 14px !important;
  display: flex !important;
  align-items: center !important;
  background: rgba(6, 8, 16, 0.85) !important;
  backdrop-filter: blur(40px) saturate(200%) !important;
  -webkit-backdrop-filter: blur(40px) saturate(200%) !important;
  border: 1px solid rgba(201, 168, 76, 0.24) !important;
  border-radius: 100px !important;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.08) inset, 0 16px 40px -10px rgba(0, 0, 0, 0.85) !important;
  box-sizing: border-box !important;
  z-index: 1000 !important;
  overflow: visible !important;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
}
.navbar.scrolled {
  background: rgba(4, 6, 12, 0.96) !important;
  border-color: rgba(201, 168, 76, 0.40) !important;
  margin-top: 8px !important;
  box-shadow: 0 12px 35px rgba(0, 0, 0, 0.9) !important;
}
.nav-container {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  width: 100% !important;
  height: 100% !important;
  padding: 0 20px !important;
  box-sizing: border-box !important;
}
.logo {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  justify-content: center !important;
  line-height: 1 !important;
  gap: 2px !important;
  text-decoration: none !important;
  flex-shrink: 0 !important;
}
.logo-brandmark {
  display: flex !important;
  align-items: center !important;
  gap: 5px !important;
}
.logo-txt-home { font-size: 0.94rem !important; letter-spacing: 0.16em !important; font-weight: 800 !important; color: #fff !important; }
.logo-txt-art {
  font-size: 0.94rem !important; letter-spacing: 0.16em !important; font-weight: 800 !important;
  background: linear-gradient(135deg, #fff 0%, #e8d5a3 40%, #c9a84c 100%) !important;
  -webkit-background-clip: text !important; -webkit-text-fill-color: transparent !important; background-clip: text !important;
}
.logo-divider { color: #c9a84c !important; font-size: 0.55rem !important; text-shadow: 0 0 10px #c9a84c !important; }
.logo-tagline { font-size: 0.40rem !important; letter-spacing: 0.30em !important; color: #c9a84c !important; opacity: 0.8 !important; }

/* Desktop Navigation Links */
.nav-links {
  display: flex !important;
  align-items: center !important;
  gap: 3px !important;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}
.nav-item {
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
}
.nav-links a.nav-link {
  font-size: 0.72rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  color: rgba(255, 255, 255, 0.65) !important;
  padding: 6px 11px !important;
  border-radius: 100px !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  text-decoration: none !important;
  border: 1px solid transparent !important;
  transition: all 0.22s ease !important;
  white-space: nowrap !important;
}
.nav-links a.nav-link:hover {
  color: #ffffff !important;
  background: rgba(255, 255, 255, 0.06) !important;
}
.nav-links a.nav-link.active {
  color: #e8d5a3 !important;
  background: rgba(201, 168, 76, 0.10) !important;
  border-color: rgba(201, 168, 76, 0.28) !important;
}
.dropdown-chevron {
  width: 9px !important;
  height: 9px !important;
  stroke: rgba(255, 255, 255, 0.50) !important;
  stroke-width: 2.5 !important;
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), stroke 0.25s ease !important;
  pointer-events: none !important;
  margin-left: 2px !important;
}
.nav-item.has-dropdown:hover .dropdown-chevron,
.nav-item.has-dropdown.open .dropdown-chevron {
  transform: rotate(180deg) !important;
  stroke: #c9a84c !important;
}

/* Floating Luxury Dropdown Mega Menu */
.nav-dropdown-menu {
  position: absolute !important;
  top: calc(100% + 10px) !important;
  left: 50% !important;
  transform: translateX(-50%) translateY(8px) !important;
  background: rgba(7, 10, 20, 0.97) !important;
  backdrop-filter: blur(40px) saturate(200%) !important;
  -webkit-backdrop-filter: blur(40px) saturate(200%) !important;
  border: 1px solid rgba(201, 168, 76, 0.26) !important;
  border-radius: 18px !important;
  box-shadow: 0 28px 70px -10px rgba(0, 0, 0, 0.95), 0 0 25px rgba(201, 168, 76, 0.08) !important;
  padding: 8px !important;
  width: max-content !important;
  min-width: 330px !important;
  max-width: 420px !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  transition: opacity 0.22s cubic-bezier(0.16, 1, 0.3, 1), transform 0.22s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.22s !important;
  z-index: 1200 !important;
}
.nav-dropdown-menu::before {
  content: '' !important;
  position: absolute !important;
  top: -14px !important;
  left: 0 !important;
  right: 0 !important;
  height: 14px !important;
  background: transparent !important;
}
.nav-item.has-dropdown:hover .nav-dropdown-menu,
.nav-item.has-dropdown:focus-within .nav-dropdown-menu,
.nav-item.has-dropdown.open .nav-dropdown-menu {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  transform: translateX(-50%) translateY(0) !important;
}

.dropdown-inner {
  display: flex !important;
  flex-direction: column !important;
  gap: 2px !important;
}
.dropdown-item {
  display: flex !important;
  align-items: center !important;
  gap: 11px !important;
  padding: 8px 12px !important;
  border-radius: 12px !important;
  background: transparent !important;
  border: 1px solid transparent !important;
  text-decoration: none !important;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
}
.dropdown-item:hover {
  background: rgba(201, 168, 76, 0.08) !important;
  border-color: rgba(201, 168, 76, 0.22) !important;
  transform: translateX(3px) !important;
}
.dropdown-icon {
  font-size: 1.15rem !important;
  width: 32px !important;
  height: 32px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: rgba(255, 255, 255, 0.04) !important;
  border: 1px solid rgba(255, 255, 255, 0.06) !important;
  border-radius: 9px !important;
  flex-shrink: 0 !important;
  transition: all 0.2s ease !important;
}
.dropdown-item:hover .dropdown-icon {
  background: rgba(201, 168, 76, 0.15) !important;
  border-color: rgba(201, 168, 76, 0.35) !important;
  transform: scale(1.05) !important;
}
.dropdown-text {
  display: flex !important;
  flex-direction: column !important;
  text-align: left !important;
  min-width: 0 !important;
}
.dropdown-text strong {
  color: #f5f5f7 !important;
  font-size: 0.78rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.01em !important;
  line-height: 1.25 !important;
  transition: color 0.2s ease !important;
}
.dropdown-item:hover .dropdown-text strong {
  color: #e8d5a3 !important;
}
.dropdown-text span {
  color: rgba(255, 255, 255, 0.42) !important;
  font-size: 0.67rem !important;
  letter-spacing: 0.01em !important;
  line-height: 1.3 !important;
  margin-top: 1px !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

/* Nav Actions & Call CTA */
.nav-actions {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  flex-shrink: 0 !important;
}
.nav-luxury-cta {
  background: linear-gradient(135deg, rgba(201, 168, 76, 0.15), rgba(201, 168, 76, 0.06)) !important;
  border: 1px solid rgba(201, 168, 76, 0.45) !important;
  color: #e8d5a3 !important;
  font-size: 0.70rem !important;
  letter-spacing: 0.08em !important;
  padding: 6px 14px !important;
  border-radius: 100px !important;
  box-shadow: 0 0 20px rgba(201, 168, 76, 0.08) !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  text-decoration: none !important;
  transition: all 0.3s ease !important;
  white-space: nowrap !important;
}
.nav-luxury-cta:hover {
  background: linear-gradient(135deg, #e8d5a3, #c9a84c) !important;
  color: #08090f !important;
  box-shadow: 0 6px 28px rgba(201, 168, 76, 0.4) !important;
  transform: translateY(-1px) !important;
}

/* ============================================================
   HERO
   ============================================================ */
.hero {
  min-height:100svh !important; padding:160px 0 100px !important;
  background:var(--lux-deep) !important; overflow:hidden !important;
}
.hero::after {
  content:'' !important; position:absolute !important; inset:0 !important;
  background:linear-gradient(to bottom,rgba(3,5,8,0.35) 0%,transparent 30%,transparent 60%,rgba(3,5,8,0.80) 100%) !important;
  z-index:1 !important; pointer-events:none !important;
}
.hero-content { z-index:3 !important; }
.hero-bg-overlay { opacity:0.32 !important; filter:brightness(0.50) contrast(1.15) saturate(0.85) !important; }
.hero-video { opacity:0.38 !important; filter:brightness(0.65) contrast(1.1) saturate(0.8) !important; }

.prestige-pill {
  display:inline-flex !important; align-items:center !important; gap:10px !important;
  background:rgba(201,168,76,0.08) !important; border:1px solid rgba(201,168,76,0.22) !important;
  padding:7px 20px !important; border-radius:100px !important;
  font-size:0.72rem !important; letter-spacing:0.16em !important;
  color:#e8d5a3 !important; font-weight:600 !important; text-transform:uppercase !important;
  margin-bottom:32px !important; backdrop-filter:blur(8px) !important;
  animation:fadeInSmooth 0.8s ease both !important;
}
.prestige-sparkle { color:#c9a84c !important; text-shadow:0 0 10px #c9a84c !important; }

.hero-luxury-title {
  font-size:clamp(3.2rem,9vw,7.5rem) !important;
  line-height:1.0 !important;
  color:#f5f5f7 !important; margin-bottom:28px !important; font-weight:600 !important;
  animation:fadeInSmooth 0.8s 0.1s ease both !important;
  text-shadow:0 2px 40px rgba(0,0,0,0.5) !important;
}
.hero-luxury-desc {
  font-size:clamp(0.95rem,1.8vw,1.15rem) !important; line-height:1.75 !important;
  color:rgba(255,255,255,0.60) !important; max-width:620px !important;
  margin:0 auto 40px !important; animation:fadeInSmooth 0.8s 0.2s ease both !important;
}
.luxury-hero-btns {
  display:flex !important; gap:14px !important; justify-content:center !important;
  flex-wrap:wrap !important; animation:fadeInSmooth 0.8s 0.3s ease both !important;
  margin-bottom:52px !important;
}

/* Gold shimmer button */
.btn-gold-shimmer {
  background:linear-gradient(135deg,rgba(201,168,76,0.20),rgba(201,168,76,0.10)) !important;
  border:1px solid rgba(201,168,76,0.50) !important; color:#e8d5a3 !important;
  font-size:0.88rem !important; font-weight:700 !important; letter-spacing:0.05em !important;
  padding:16px 36px !important; border-radius:100px !important;
  box-shadow:0 0 30px rgba(201,168,76,0.10),0 4px 20px rgba(0,0,0,0.4) !important;
  position:relative !important; overflow:hidden !important;
  transition:all 0.4s ease !important;
}
.btn-gold-shimmer::before {
  content:'' !important; position:absolute !important;
  top:-50% !important; left:-60% !important; width:50% !important; height:200% !important;
  background:linear-gradient(105deg,transparent 40%,rgba(255,255,255,0.18) 50%,transparent 60%) !important;
  transform:skewX(-20deg) !important;
  animation:shimmerSlide 4s 2s ease-in-out infinite !important;
}
@keyframes shimmerSlide { 0%{left:-60%;} 100%{left:160%;} }
.btn-gold-shimmer:hover {
  background:linear-gradient(135deg,#e8d5a3,#c9a84c) !important;
  color:#060911 !important; border-color:#f0d97a !important;
  box-shadow:0 8px 40px rgba(201,168,76,0.45) !important;
  transform:translateY(-3px) scale(1.03) !important;
}

/* Glass outline button */
.btn-luxury-glass {
  background:rgba(255,255,255,0.04) !important; border:1px solid rgba(255,255,255,0.12) !important;
  color:rgba(255,255,255,0.75) !important; font-size:0.88rem !important;
  font-weight:600 !important; padding:16px 32px !important; border-radius:100px !important;
  transition:all 0.4s ease !important; backdrop-filter:blur(8px) !important;
}
.btn-luxury-glass:hover {
  background:rgba(255,255,255,0.08) !important; border-color:rgba(255,255,255,0.22) !important;
  color:#f5f5f7 !important; transform:translateY(-2px) !important;
}

.hero-reassurance-strip {
  display:flex !important; align-items:center !important; justify-content:center !important;
  flex-wrap:wrap !important; gap:10px 20px !important;
  font-size:0.78rem !important; color:rgba(255,255,255,0.45) !important;
  letter-spacing:0.04em !important; margin-bottom:48px !important;
  animation:fadeInSmooth 0.8s 0.4s ease both !important;
}
.dot-sep { opacity:0.25 !important; }

.trust-matrix-bar {
  display:flex !important; justify-content:center !important;
  background:rgba(255,255,255,0.03) !important; border:1px solid rgba(255,255,255,0.07) !important;
  border-radius:18px !important; padding:6px !important; backdrop-filter:blur(16px) !important;
  animation:fadeInSmooth 0.8s 0.5s ease both !important; max-width:700px !important; margin:0 auto !important;
}
.trust-matrix-card { flex:1 !important; display:flex !important; flex-direction:column !important; align-items:center !important; padding:14px 16px !important; border-radius:13px !important; }
.trust-matrix-card:hover { background:rgba(201,168,76,0.06) !important; }
.trust-matrix-number {
  font-size:1.55rem !important; font-weight:800 !important;
  background:linear-gradient(135deg,#f5f5f7 0%,#e8d5a3 100%) !important;
  -webkit-background-clip:text !important; -webkit-text-fill-color:transparent !important; background-clip:text !important;
  line-height:1.1 !important; letter-spacing:-0.02em !important;
}
.trust-matrix-label { font-size:0.68rem !important; color:rgba(255,255,255,0.42) !important; text-align:center !important; line-height:1.4 !important; }

/* Spheres */
.sphere { filter:blur(120px) !important; opacity:0.10 !important; }
.sphere-1 { width:600px !important; height:600px !important; background:radial-gradient(circle,rgba(201,168,76,0.5),transparent) !important; }
.sphere-2 { width:500px !important; height:500px !important; background:radial-gradient(circle,rgba(56,189,248,0.5),transparent) !important; }

/* ============================================================
   SECTIONS
   ============================================================ */
section { padding:100px 0 !important; }
.badge {
  background:rgba(201,168,76,0.07) !important; border:1px solid rgba(201,168,76,0.22) !important;
  color:#c9a84c !important; font-size:0.68rem !important; letter-spacing:0.18em !important;
  font-weight:700 !important; padding:6px 18px !important; border-radius:100px !important;
}
.badge-gold { background:rgba(201,168,76,0.10) !important; border-color:rgba(201,168,76,0.50) !important; }
.section-title p { font-size:1rem !important; color:rgba(255,255,255,0.50) !important; max-width:560px !important; margin:0 auto !important; }
.text-gradient {
  background:linear-gradient(135deg,#fff 0%,#e8d5a3 60%,#c9a84c 100%) !important;
  -webkit-background-clip:text !important; -webkit-text-fill-color:transparent !important; background-clip:text !important;
}
.text-gradient-gold {
  background:linear-gradient(135deg,#e8d5a3 0%,#c9a84c 50%,#aa771c 100%) !important;
  -webkit-background-clip:text !important; -webkit-text-fill-color:transparent !important; background-clip:text !important;
}
::selection { background:rgba(201,168,76,0.25) !important; color:#f5f5f7 !important; }
:focus-visible { outline:2px solid #c9a84c !important; outline-offset:3px !important; }

/* ============================================================
   DISCOVERY CARDS
   ============================================================ */
.service-discovery-section { background:#080b14 !important; border-top:1px solid rgba(255,255,255,0.04) !important; }
.discovery-grid { display:grid !important; grid-template-columns:repeat(3,1fr) !important; gap:20px !important; }
.discovery-card {
  background:rgba(8,11,22,0.88) !important; border:1px solid rgba(255,255,255,0.07) !important;
  border-radius:28px !important; overflow:hidden !important; display:flex !important; flex-direction:column !important;
  transition:border-color 0.4s ease,transform 0.4s ease,box-shadow 0.4s ease !important;
  text-decoration:none !important; position:relative !important;
}
.discovery-card:hover {
  border-color:rgba(201,168,76,0.50) !important; transform:translateY(-6px) !important;
  box-shadow:0 30px 60px rgba(0,0,0,0.6),0 0 30px rgba(201,168,76,0.06) !important;
}
.discovery-img-wrap { position:relative !important; overflow:hidden !important; aspect-ratio:16/10 !important; }
.discovery-img {
  width:100% !important; height:100% !important; object-fit:cover !important;
  transition:transform 0.7s ease !important; filter:brightness(0.85) saturate(0.90) !important;
}
.discovery-card:hover .discovery-img { transform:scale(1.06) !important; filter:brightness(0.95) saturate(1.05) !important; }
.discovery-img-wrap::after {
  content:'' !important; position:absolute !important; bottom:0 !important; left:0 !important; right:0 !important;
  height:50% !important; background:linear-gradient(to top,rgba(8,11,22,0.9),transparent) !important; z-index:1 !important;
}
.discovery-badge {
  position:absolute !important; top:14px !important; left:14px !important; z-index:2 !important;
  background:rgba(8,11,22,0.85) !important; border:1px solid rgba(201,168,76,0.22) !important;
  color:#c9a84c !important; font-size:0.65rem !important; font-weight:700 !important;
  letter-spacing:0.14em !important; text-transform:uppercase !important;
  padding:4px 12px !important; border-radius:100px !important; backdrop-filter:blur(8px) !important;
}
.discovery-body { padding:22px 24px 26px !important; flex:1 !important; }
.discovery-body h3 { font-size:1.05rem !important; font-weight:700 !important; color:#f5f5f7 !important; margin-bottom:8px !important; }
.discovery-body p { font-size:0.83rem !important; color:rgba(255,255,255,0.52) !important; line-height:1.65 !important; margin-bottom:18px !important; }
.discovery-link { display:inline-flex !important; align-items:center !important; gap:6px !important; font-size:0.78rem !important; font-weight:700 !important; color:#c9a84c !important; letter-spacing:0.05em !important; text-transform:uppercase !important; }
.discovery-card:hover .discovery-link { gap:10px !important; }

/* ============================================================
   MATRIX TILES
   ============================================================ */
.matrix-section { background:#030508 !important; }
.matrix-grid { display:grid !important; grid-template-columns:repeat(4,1fr) !important; gap:16px !important; }
.matrix-tile {
  background:rgba(10,13,26,0.90) !important; border:1px solid rgba(255,255,255,0.06) !important;
  border-radius:20px !important; padding:28px 24px !important;
  transition:all 0.4s ease !important; position:relative !important; overflow:hidden !important;
}
.matrix-tile::before {
  content:'' !important; position:absolute !important; top:0 !important; left:0 !important; right:0 !important; height:1px !important;
  background:linear-gradient(90deg,transparent,rgba(201,168,76,0.35),transparent) !important;
  opacity:0 !important; transition:opacity 0.4s ease !important;
}
.matrix-tile:hover { border-color:rgba(201,168,76,0.22) !important; transform:translateY(-4px) !important; box-shadow:0 20px 40px rgba(0,0,0,0.5) !important; }
.matrix-tile:hover::before { opacity:1 !important; }
.matrix-icon { font-size:1.8rem !important; margin-bottom:14px !important; display:block !important; }
.matrix-tile h4 { font-size:0.95rem !important; font-weight:700 !important; color:#f5f5f7 !important; margin-bottom:8px !important; }
.matrix-tile p { font-size:0.80rem !important; color:rgba(255,255,255,0.52) !important; line-height:1.6 !important; margin-bottom:16px !important; }
.matrix-tags span { font-size:0.65rem !important; font-weight:600 !important; color:#c9a84c !important; background:rgba(201,168,76,0.08) !important; border:1px solid rgba(201,168,76,0.22) !important; padding:3px 10px !important; border-radius:100px !important; }

/* ============================================================
   SCENE TABS
   ============================================================ */
.scenes-section { background:linear-gradient(180deg,#080b14 0%,#030508 100%) !important; }
.scene-tab-btn {
  display:flex !important; align-items:center !important; gap:8px !important; padding:10px 22px !important;
  border:1px solid rgba(255,255,255,0.08) !important; border-radius:100px !important;
  background:rgba(255,255,255,0.03) !important; color:rgba(255,255,255,0.52) !important;
  font-size:0.82rem !important; font-weight:600 !important; cursor:pointer !important; transition:all 0.3s ease !important;
}
.scene-tab-btn:hover { border-color:rgba(201,168,76,0.22) !important; color:#e8d5a3 !important; }
.scene-tab-btn.active { background:rgba(201,168,76,0.10) !important; border-color:rgba(201,168,76,0.50) !important; color:#e8d5a3 !important; box-shadow:0 0 20px rgba(201,168,76,0.08) !important; }

.scene-display-card {
  background:rgba(8,11,22,0.95) !important; border:1px solid rgba(255,255,255,0.07) !important;
  border-radius:40px !important; overflow:hidden !important;
  display:grid !important; grid-template-columns:1fr 1fr !important; min-height:360px !important;
}
.scene-info { padding:48px !important; display:flex !important; flex-direction:column !important; justify-content:center !important; }
.scene-info h3 { font-size:1.6rem !important; font-weight:700 !important; color:#f5f5f7 !important; margin-bottom:14px !important; }
.scene-info p { font-size:0.88rem !important; color:rgba(255,255,255,0.55) !important; line-height:1.75 !important; margin-bottom:24px !important; }
.scene-action-item {
  display:flex !important; align-items:center !important; gap:12px !important;
  padding:10px 0 !important; border-bottom:1px solid rgba(255,255,255,0.04) !important;
  font-size:0.83rem !important; color:rgba(255,255,255,0.68) !important;
}
.scene-action-icon {
  font-size:1.1rem !important; width:36px !important; height:36px !important;
  background:rgba(201,168,76,0.07) !important; border:1px solid rgba(201,168,76,0.22) !important;
  border-radius:10px !important; display:flex !important; align-items:center !important;
  justify-content:center !important; flex-shrink:0 !important;
}
.scene-visual-preview img {
  width:100% !important; height:100% !important; object-fit:cover !important;
  filter:brightness(0.85) saturate(0.9) !important; transition:transform 0.7s ease !important;
}
.scene-display-card:hover .scene-visual-preview img { transform:scale(1.04) !important; }

/* ============================================================
   EDITORIAL VIDEO SECTIONS
   ============================================================ */
.editorial-feature-section { background:#080b14 !important; }
.editorial-grid { display:grid !important; grid-template-columns:1.1fr 1fr !important; gap:60px !important; align-items:center !important; }
.editorial-grid.reversed { direction:rtl !important; }
.editorial-grid.reversed > * { direction:ltr !important; }
.video-switch-tab {
  padding:10px 20px !important; border:1px solid rgba(255,255,255,0.18) !important;
  border-radius:100px !important; background:rgba(255,255,255,0.06) !important;
  color:rgba(255,255,255,0.88) !important; font-size:0.78rem !important; font-weight:600 !important;
  cursor:pointer !important; transition:all 0.3s ease !important;
  min-height:44px !important; display:inline-flex !important; align-items:center !important; justify-content:center !important;
}
.video-switch-tab.active,.video-switch-tab:hover { background:rgba(201,168,76,0.20) !important; border-color:rgba(201,168,76,0.70) !important; color:#fffdf7 !important; }
.video-showcase-container { border-radius:28px !important; overflow:hidden !important; border:1px solid rgba(255,255,255,0.07) !important; box-shadow:0 30px 60px rgba(0,0,0,0.6) !important; }
.video-badge {
  position:absolute !important; top:14px !important; left:14px !important; z-index:5 !important;
  background:rgba(8,11,22,0.88) !important; border:1px solid rgba(201,168,76,0.22) !important;
  color:#e8d5a3 !important; font-size:0.65rem !important; font-weight:700 !important;
  letter-spacing:0.12em !important; padding:5px 12px !important; border-radius:100px !important;
  backdrop-filter:blur(10px) !important; display:flex !important; align-items:center !important; gap:7px !important;
}
.product-video-pill {
  position:absolute !important; top:12px !important; left:12px !important; z-index:5 !important;
  background:rgba(8,11,22,0.88) !important; border:1px solid rgba(201,168,76,0.28) !important;
  color:#e8d5a3 !important; font-size:0.65rem !important; font-weight:700 !important;
  letter-spacing:0.12em !important; padding:4px 10px !important; border-radius:100px !important;
  backdrop-filter:blur(10px) !important; display:inline-flex !important; align-items:center !important; gap:6px !important;
  box-shadow:0 4px 12px rgba(0,0,0,0.4) !important;
}
.pulse-dot {
  width:6px !important; height:6px !important; border-radius:50% !important;
  background:#34d399 !important; display:inline-block !important;
  box-shadow:0 0 8px #34d399 !important; animation:pulseDot 2s infinite !important;
}
@keyframes pulseDot {
  0%, 100% { opacity:1; transform:scale(1); }
  50% { opacity:0.4; transform:scale(0.85); }
}
.editorial-content p { font-size:0.92rem !important; color:rgba(255,255,255,0.55) !important; line-height:1.80 !important; }
.spec-badge-card {
  background:rgba(10,13,26,0.90) !important; border:1px solid rgba(255,255,255,0.07) !important;
  border-radius:12px !important; padding:14px 16px !important; transition:border-color 0.3s ease !important;
}
.spec-badge-card:hover { border-color:rgba(201,168,76,0.22) !important; }
.spec-badge-card strong { display:block !important; font-size:0.82rem !important; font-weight:700 !important; color:#f5f5f7 !important; margin-bottom:4px !important; }
.spec-badge-card span { font-size:0.73rem !important; color:rgba(255,255,255,0.52) !important; }

/* ============================================================
   VILLA SECTION
   ============================================================ */
.villa-section { background:linear-gradient(180deg,#030508 0%,#080b14 100%) !important; }
.villa-blueprint-card {
  background:rgba(8,11,22,0.95) !important; border:1px solid rgba(201,168,76,0.22) !important;
  border-radius:40px !important; padding:64px 56px !important; position:relative !important;
  box-shadow:0 0 80px rgba(201,168,76,0.04) !important;
}
.villa-blueprint-card::before {
  content:'' !important; position:absolute !important; top:0 !important; left:0 !important; right:0 !important; height:1px !important;
  background:linear-gradient(90deg,transparent,rgba(201,168,76,0.5),transparent) !important;
}
.villa-pillars-grid { display:grid !important; grid-template-columns:repeat(3,1fr) !important; gap:32px !important; margin-top:48px !important; }
.villa-pillar-item {
  padding:28px !important; background:rgba(255,255,255,0.025) !important;
  border:1px solid rgba(255,255,255,0.06) !important; border-radius:20px !important; transition:all 0.4s ease !important;
}
.villa-pillar-item:hover { border-color:rgba(201,168,76,0.22) !important; background:rgba(201,168,76,0.04) !important; transform:translateY(-3px) !important; }
.villa-pillar-item h4 { font-size:1rem !important; font-weight:700 !important; color:#f5f5f7 !important; margin-bottom:10px !important; }
.villa-pillar-item p { font-size:0.82rem !important; color:rgba(255,255,255,0.52) !important; line-height:1.70 !important; }

/* ============================================================
   PROCESS CARDS
   ============================================================ */
.process-section { background:#030508 !important; }
.process-grid { display:grid !important; grid-template-columns:repeat(5,1fr) !important; gap:18px !important; }
.process-card {
  background:rgba(8,11,22,0.95) !important; border:1px solid rgba(255,255,255,0.06) !important;
  border-radius:20px !important; padding:28px 22px !important; position:relative !important;
  transition:all 0.4s ease !important; overflow:hidden !important;
}
.process-card::before {
  content:'' !important; position:absolute !important; top:0 !important; left:0 !important; right:0 !important; height:1px !important;
  background:linear-gradient(90deg,transparent,rgba(201,168,76,0.4),transparent) !important;
  opacity:0 !important; transition:opacity 0.4s ease !important;
}
.process-card:hover { border-color:rgba(201,168,76,0.22) !important; transform:translateY(-4px) !important; box-shadow:0 20px 40px rgba(0,0,0,0.5) !important; }
.process-card:hover::before { opacity:1 !important; }
.process-num {
  font-size:2.5rem !important; font-weight:900 !important; line-height:1 !important;
  color:rgba(201,168,76,0.12) !important; margin-bottom:14px !important; display:block !important; letter-spacing:-0.04em !important;
}
.process-card h4 { font-size:0.92rem !important; font-weight:700 !important; color:#f5f5f7 !important; margin-bottom:8px !important; }
.process-card p { font-size:0.78rem !important; color:rgba(255,255,255,0.52) !important; line-height:1.65 !important; }

/* ============================================================
   TECH CARDS
   ============================================================ */
.tech-section { background:#080b14 !important; }
.tech-grid-arch { display:grid !important; grid-template-columns:repeat(4,1fr) !important; gap:18px !important; }
.tech-card-arch {
  background:rgba(8,11,22,0.92) !important; border:1px solid rgba(255,255,255,0.06) !important;
  border-radius:20px !important; padding:30px 24px !important; text-align:center !important;
  transition:all 0.4s ease !important;
}
.tech-card-arch:hover { border-color:rgba(201,168,76,0.22) !important; transform:translateY(-5px) !important; box-shadow:0 24px 48px rgba(0,0,0,0.5) !important; }
.tech-logo-wrap {
  font-size:2rem !important; width:56px !important; height:56px !important;
  background:rgba(201,168,76,0.08) !important; border:1px solid rgba(201,168,76,0.22) !important;
  border-radius:16px !important; display:flex !important; align-items:center !important; justify-content:center !important; margin:0 auto 18px !important;
}
.tech-card-arch h4 { font-size:0.95rem !important; font-weight:700 !important; color:#f5f5f7 !important; margin-bottom:10px !important; }
.tech-card-arch p { font-size:0.79rem !important; color:rgba(255,255,255,0.52) !important; line-height:1.65 !important; }

/* ============================================================
   FAQ
   ============================================================ */
.faq-item { background:rgba(8,11,22,0.90) !important; border:1px solid rgba(255,255,255,0.06) !important; border-radius:20px !important; }
.faq-item:hover,.faq-item.active { border-color:rgba(201,168,76,0.22) !important; }
.faq-question { color:#f5f5f7 !important; padding:20px 26px !important; }
.faq-question::after { color:#c9a84c !important; }
.faq-answer { color:rgba(255,255,255,0.55) !important; }

/* ============================================================
   FORMS
   ============================================================ */
input,textarea,select {
  background:rgba(255,255,255,0.04) !important; border:1px solid rgba(255,255,255,0.10) !important;
  border-radius:14px !important; color:#f5f5f7 !important; padding:16px 20px !important;
}
input::placeholder,textarea::placeholder { color:rgba(255,255,255,0.28) !important; }
input:focus,textarea:focus,select:focus {
  border-color:rgba(201,168,76,0.50) !important; background:rgba(201,168,76,0.04) !important;
  box-shadow:0 0 0 3px rgba(201,168,76,0.08) !important; outline:none !important;
}

/* ============================================================
   FOOTER
   ============================================================ */
footer { background:#030508 !important; border-top:1px solid rgba(201,168,76,0.22) !important; }
footer a:hover { color:#e8d5a3 !important; text-shadow:none !important; }

/* ============================================================
   ANIMATIONS
   ============================================================ */
@keyframes fadeInSmooth { from{opacity:0;} to{opacity:1;} }
@keyframes fadeInDown { from{opacity:0;transform:translateY(-20px);} to{opacity:1;transform:translateY(0);} }
@keyframes fadeInUp   { from{opacity:0;transform:translateY(30px);}  to{opacity:1;transform:translateY(0);} }

.reveal { opacity:0; transform:translateY(24px); transition:opacity 0.7s ease,transform 0.7s ease !important; }
.reveal.visible { opacity:1 !important; transform:translateY(0) !important; }

/* ============================================================
   MOBILE RESPONSIVE
   ============================================================ */
@media (max-width:900px) {
  .discovery-grid { grid-template-columns:repeat(2,1fr) !important; }
  .matrix-grid { grid-template-columns:repeat(2,1fr) !important; }
  .tech-grid-arch { grid-template-columns:repeat(2,1fr) !important; }
  .editorial-grid,.editorial-grid.reversed { grid-template-columns:1fr !important; direction:ltr !important; gap:40px !important; }
  .villa-pillars-grid { grid-template-columns:1fr !important; }
}
@media (max-width:768px) {
  .hero { padding:140px 0 80px !important; }
  .hero-luxury-title { font-size:clamp(2.5rem,12vw,4rem) !important; }
  .scene-display-card { grid-template-columns:1fr !important; }
  .villa-blueprint-card { padding:36px 24px !important; }
  section { padding:70px 0 !important; }
  .process-grid { grid-template-columns:1fr 1fr !important; gap:12px !important; }
  .luxury-hero-btns { flex-direction:column !important; align-items:center !important; }
}
@media (max-width:580px) {
  .discovery-grid { grid-template-columns:1fr !important; }
  .trust-matrix-bar { display:grid !important; grid-template-columns:1fr 1fr !important; }
  .process-grid { grid-template-columns:1fr !important; }
  .tech-grid-arch { grid-template-columns:1fr !important; }
}


/* ============================================================
   RESPONSIVE NAVIGATION (Tablet & Mobile <= 1080px)
   ============================================================ */
@media (max-width: 1080px) {
  .navbar {
    width: 94% !important;
    height: 54px !important;
    max-height: 54px !important;
    margin-top: 10px !important;
  }
  .nav-container {
    padding: 0 16px !important;
  }
  .menu-toggle {
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 4px !important;
    width: 38px !important;
    height: 38px !important;
    background: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid rgba(201, 168, 76, 0.3) !important;
    border-radius: 10px !important;
    cursor: pointer !important;
    padding: 0 !important;
    z-index: 1010 !important;
    transition: all 0.3s ease !important;
  }
  .menu-toggle:hover {
    background: rgba(201, 168, 76, 0.12) !important;
    border-color: rgba(201, 168, 76, 0.6) !important;
  }
  .menu-toggle .bar {
    width: 18px !important;
    height: 2px !important;
    background: #e8d5a3 !important;
    border-radius: 2px !important;
    transition: all 0.3s ease !important;
  }
  .menu-toggle.active .bar:nth-child(1) {
    transform: translateY(6px) rotate(45deg) !important;
  }
  .menu-toggle.active .bar:nth-child(2) {
    opacity: 0 !important;
  }
  .menu-toggle.active .bar:nth-child(3) {
    transform: translateY(-6px) rotate(-45deg) !important;
  }
  .nav-drawer-overlay {
    position: fixed !important;
    inset: 0 !important;
    background: rgba(0, 0, 0, 0.75) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    z-index: 1004 !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    transition: all 0.3s ease !important;
  }
  .nav-drawer-overlay.active {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
  }
  .nav-links {
    position: fixed !important;
    top: 0 !important;
    right: 0 !important;
    width: 340px !important;
    max-width: 86vw !important;
    height: 100vh !important;
    height: 100dvh !important;
    background: rgba(6, 8, 16, 0.98) !important;
    backdrop-filter: blur(40px) saturate(200%) !important;
    -webkit-backdrop-filter: blur(40px) saturate(200%) !important;
    border-left: 1px solid rgba(201, 168, 76, 0.25) !important;
    box-shadow: -15px 0 50px rgba(0, 0, 0, 0.9) !important;
    flex-direction: column !important;
    align-items: stretch !important;
    padding: 75px 20px 30px !important;
    gap: 4px !important;
    overflow-y: auto !important;
    transform: translateX(105%) !important;
    transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1) !important;
    z-index: 1005 !important;
  }
  .nav-links.active {
    transform: translateX(0) !important;
  }
  .nav-item {
    width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
  }
  .nav-links a.nav-link {
    width: 100% !important;
    box-sizing: border-box !important;
    padding: 12px 16px !important;
    font-size: 0.88rem !important;
    font-weight: 600 !important;
    color: #ffffff !important;
    border-radius: 12px !important;
    justify-content: space-between !important;
    background: rgba(255, 255, 255, 0.03) !important;
    border: 1px solid rgba(255, 255, 255, 0.05) !important;
    margin-bottom: 2px !important;
  }
  .nav-links a.nav-link:hover, .nav-links a.nav-link.active {
    background: rgba(201, 168, 76, 0.12) !important;
    border-color: rgba(201, 168, 76, 0.35) !important;
    color: #e8d5a3 !important;
  }
  .nav-links a.nav-link .dropdown-chevron {
    stroke: #c9a84c !important;
    width: 12px !important;
    height: 12px !important;
  }
  .nav-dropdown-menu {
    position: static !important;
    transform: none !important;
    width: 100% !important;
    min-width: 100% !important;
    max-width: 100% !important;
    background: rgba(255, 255, 255, 0.02) !important;
    border: 1px solid rgba(201, 168, 76, 0.14) !important;
    border-radius: 12px !important;
    box-shadow: none !important;
    padding: 6px !important;
    margin: 4px 0 8px !important;
    display: none !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
  }
  .nav-item.has-dropdown.open .nav-dropdown-menu {
    display: flex !important;
  }
  .dropdown-item {
    padding: 8px 10px !important;
  }
}


/* Accessibility & SEO - Touch Targets & Contrast Hardening */
.nav-icon-link {
  min-width: 48px !important;
  min-height: 48px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.cta-channels-bar {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 12px !important;
  justify-content: center !important;
  align-items: center !important;
  margin: 20px 0 !important;
}

.cta-channel-pill {
  min-height: 48px !important;
  padding: 12px 24px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 100px !important;
  font-size: 0.9rem !important;
  font-weight: 600 !important;
  text-decoration: none !important;
  transition: all 0.3s ease !important;
}

.mobile-bottom-bar .mobile-bottom-btn {
  min-height: 48px !important;
}

/* Prevent CLS during font swaps */
.hero-luxury-title {
  min-height: 1.2em;
}

.hero-luxury-desc {
  min-height: 3.6em;
}