/* ==========================================================================
   Luxury Aesthetics Design System - Matreshka Detailing Studio
   ========================================================================== */

/* Variables & Themes */
:root {
  /* Dark Theme tokens (Default) */
  --bg-base: #070709;
  --bg-surface: #0e0e12;
  --bg-surface-elevated: #16161f;
  --text-primary: #f5f5f7;
  --text-secondary: #8e8e93;
  --accent: #d4af37; /* Luxury Gold */
  --accent-hover: #e5c158;
  --accent-rgb: 212, 175, 55;
  --success: #30d158;
  --error: #ff453a;
  --info: #0a84ff;
  --border: rgba(255, 255, 255, 0.08);
  --border-hover: rgba(212, 175, 55, 0.4);
  --glass-bg: rgba(14, 14, 18, 0.75);
  --glass-border: rgba(255, 255, 255, 0.06);
  --shadow: rgba(0, 0, 0, 0.6);
  --shadow-glow: rgba(212, 175, 55, 0.18);
  --card-glow: 0px 10px 40px rgba(0, 0, 0, 0.5);
  --font-display: 'Montserrat', sans-serif;
  --font-body: 'Inter', sans-serif;
  --transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1);
  --radius-lg: 24px;
  --radius-xl: 32px;
}

body.light-theme {
  /* Light Theme tokens - Redesigned to Premium Turquoise/Cyan */
  --bg-base: #f8f9fa;
  --bg-surface: #ffffff;
  --bg-surface-elevated: #f1f2f4;
  --text-primary: #1c1c1e;
  --text-secondary: #6e6e73;
  --accent: #0099b8; /* Premium Turquoise/Cyan */
  --accent-hover: #007790;
  --accent-rgb: 0, 153, 184;
  --success: #34c759;
  --error: #ff3b30;
  --info: #007aff;
  --border: rgba(0, 0, 0, 0.08);
  --border-hover: rgba(0, 153, 184, 0.4);
  --glass-bg: rgba(255, 255, 255, 0.85);
  --glass-border: rgba(0, 0, 0, 0.05);
  --shadow: rgba(0, 0, 0, 0.04);
  --shadow-glow: rgba(0, 153, 184, 0.08);
  --card-glow: 0px 15px 45px rgba(0, 0, 0, 0.05);
}

/* Base Styles & Resets */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  background-color: var(--bg-base);
  scroll-behavior: smooth;
  font-size: 16px;
}

body {
  font-family: var(--font-body);
  background-color: transparent;
  color: var(--text-primary);
  line-height: 1.6;
  overflow-x: hidden;
  transition: background-color 0.5s ease, color 0.5s ease;
  -webkit-font-smoothing: antialiased;
}

body.menu-open, body.modal-open {
  overflow: hidden;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: 800;
  letter-spacing: -0.02em;
}

a {
  color: inherit;
  text-decoration: none;
  transition: var(--transition);
}

ul {
  list-style: none;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

iframe {
  border: none;
}

/* Reading Scroll Progress */
.scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  height: 3px;
  background-color: var(--accent);
  z-index: 10000;
  width: 0%;
  transition: width 0.1s ease-out;
  box-shadow: 0 0 10px rgba(var(--accent-rgb), 0.5);
}

/* Container & Sections */
.container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
}

.section {
  padding: 100px 0;
  position: relative;
  border-radius: 32px;
  background-color: rgba(255, 255, 255, 0.015);
  border: 1px solid rgba(255, 255, 255, 0.04);
  margin: 80px auto;
  max-width: 1300px;
  width: calc(100% - 48px);
  backdrop-filter: blur(20px);
  box-shadow: 0 20px 50px rgba(0,0,0,0.15);
  overflow: hidden;
}

body.light-theme .section {
  background-color: rgba(255, 255, 255, 0.75);
  border-color: rgba(0, 0, 0, 0.07);
  box-shadow: 0 20px 50px rgba(0,0,0,0.04);
}

/* Headers Hierarchy */
.section-header {
  text-align: center;
  max-width: 650px;
  margin: 0 auto 80px;
}

.section-tagline {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--accent);
  display: inline-block;
  margin-bottom: 16px;
}

.section-title {
  font-size: 2.8rem;
  font-weight: 900;
  line-height: 1.15;
  margin-bottom: 20px;
}

.section-header p {
  color: var(--text-secondary);
  font-size: 1.1rem;
}

body.light-theme .section-header p {
  color: #3a3a3c;
}

/* Text Accent Gradient */
.text-gradient {
  background: linear-gradient(135deg, var(--accent) 0%, #ffffff 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

body.light-theme .text-gradient {
  background: linear-gradient(135deg, var(--accent) 0%, #1c1c1e 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* Buttons System */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 16px 32px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.95rem;
  border-radius: 50px;
  cursor: pointer;
  transition: var(--transition);
  border: none;
  outline: none;
}

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

body.light-theme .btn-primary {
  color: #ffffff;
}

.btn-primary:hover:not(:disabled) {
  background-color: var(--accent-hover);
  transform: translateY(-2px);
  box-shadow: 0 10px 30px var(--shadow-glow);
}

.btn-primary:disabled {
  background-color: var(--bg-surface-elevated);
  color: var(--text-secondary);
  cursor: not-allowed;
}

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

.btn-outline:hover {
  background-color: var(--accent);
  color: #000;
  transform: translateY(-2px);
  box-shadow: 0 10px 30px var(--shadow-glow);
}

.btn-glass {
  background-color: rgba(255, 255, 255, 0.06);
  color: #fff;
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.btn-glass:hover {
  background-color: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.2);
  transform: translateY(-2px);
}

body.light-theme .btn-glass {
  background-color: rgba(0, 0, 0, 0.04);
  color: var(--text-primary);
  border-color: rgba(0, 0, 0, 0.06);
}

body.light-theme .btn-glass:hover {
  background-color: rgba(0, 0, 0, 0.08);
  border-color: rgba(0, 0, 0, 0.12);
}

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

.btn-glow {
  position: relative;
  overflow: hidden;
}

.btn-glow::after {
  content: '';
  position: absolute;
  top: 0;
  left: -50%;
  width: 200%;
  height: 100%;
  background: linear-gradient(to right, transparent, rgba(255,255,255,0.2), transparent);
  transform: skewX(-25deg);
  transition: 0.75s;
  opacity: 0;
}

.btn-glow:hover::after {
  left: 125%;
  opacity: 1;
}

/* Staggered Scroll Animation reveals */
.reveal-up {
  opacity: 0;
  transform: translateY(50px);
  filter: blur(8px);
  transition: opacity 1.2s cubic-bezier(0.16, 1, 0.3, 1), transform 1.2s cubic-bezier(0.16, 1, 0.3, 1), filter 1.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.reveal-up.animated {
  opacity: 1;
  transform: translateY(0);
  filter: blur(0);
}

/* Glassmorphism card effects */
.card-glow-hover {
  position: relative;
  transition: var(--transition);
  background-color: var(--bg-surface);
  border: 1px solid var(--border);
  box-shadow: var(--card-glow);
}

.card-glow-hover::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: inherit;
  pointer-events: none;
  transition: var(--transition);
  box-shadow: 0 0 0 1px transparent;
}

.card-glow-hover:hover {
  transform: translateY(-8px);
  border-color: var(--accent);
}

.card-glow-hover:hover::after {
  box-shadow: 0 0 30px var(--shadow-glow);
}

/* Header Navbar */
.header {
  position: fixed;
  top: 38px;
  left: 0;
  width: 100%;
  z-index: 1000;
  border-bottom: 1px solid var(--glass-border);
  transition: background-color 0.5s ease, border-color 0.5s ease, top 0.2s ease-out; /* Smooth slide up transition */
  backdrop-filter: blur(16px);
  background-color: rgba(7, 7, 9, 0.4);
}

body.light-theme .header {
  background-color: rgba(248, 249, 250, 0.4);
}

.header.scrolled {
  background-color: var(--glass-bg);
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.25);
}

.header-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 80px;
  width: 100%;
}

.logo {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  margin-right: 20px;
}

.nav-menu {
  display: flex;
  justify-content: center;
  align-items: center;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.05);
  padding: 8px 24px;
  border-radius: 40px;
  backdrop-filter: blur(8px);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  flex-grow: 0;
  margin: 0 auto;
}

body.light-theme .nav-menu {
  background: rgba(18, 28, 44, 0.03);
  border-color: rgba(18, 28, 44, 0.05);
  box-shadow: 0 4px 20px rgba(18, 28, 44, 0.02);
}

.nav-menu:hover {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(247, 178, 23, 0.2);
  box-shadow: 0 4px 25px rgba(247, 178, 23, 0.06);
}

.nav-list {
  display: flex;
  align-items: center;
  gap: 20px;
  list-style: none;
  padding: 0;
  margin: 0;
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-shrink: 0;
  margin-left: 20px;
}

.logo {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 1.45rem;
  letter-spacing: 0.05em;
  display: flex;
  align-items: center;
}

.logo-accent {
  color: var(--accent);
  margin-right: 1px;
}

.nav-list {
  display: flex;
  align-items: center;
  gap: 32px;
}

.nav-link {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.82rem;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 6px 0;
  position: relative;
}

.nav-link::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 0;
  height: 1.5px;
  background-color: var(--accent);
  transition: width 0.3s ease, left 0.3s ease;
}

.nav-link:hover::after, .nav-link.active::after {
  width: 100%;
  left: 0;
}

.nav-link:hover, .nav-link.active {
  color: var(--text-primary);
}

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

/* Theme Toggle */
.theme-toggle {
  background: none;
  border: 1px solid var(--border);
  width: 46px;
  height: 46px;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-primary);
  font-size: 1.15rem;
  transition: var(--transition);
}

.theme-toggle:hover {
  background-color: var(--bg-surface-elevated);
  border-color: var(--accent);
}

.theme-toggle .sun-icon {
  display: none;
}

body.light-theme .theme-toggle .moon-icon {
  display: none;
}

body.light-theme .theme-toggle .sun-icon {
  display: block;
}

.theme-toggle.clicked {
  transform: rotate(360deg);
}

/* Burger Button */
.burger {
  display: none;
  flex-direction: column;
  justify-content: space-between;
  width: 26px;
  height: 20px;
  background: none;
  border: none;
  cursor: pointer;
}

.burger-bar {
  width: 100%;
  height: 2px;
  background-color: var(--text-primary);
  transition: var(--transition);
}

/* Hero Section */
.hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-top: 140px;
  padding-bottom: 120px;
  overflow: hidden;
}

/* Mouse cursor glow tracking */
.hero-glow-pointer {
  position: absolute;
  width: 500px;
  height: 500px;
  background: radial-gradient(circle, rgba(var(--accent-rgb), 0.12) 0%, transparent 70%);
  pointer-events: none;
  z-index: 2;
  transform: translate(-50%, -50%);
  opacity: 0;
  transition: opacity 0.5s ease;
}

.hero-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(to bottom, rgba(7,7,9,0.4) 0%, rgba(7,7,9,0.1) 60%, rgba(7,7,9,0.5) 100%);
  z-index: 1;
}

body.light-theme .hero-overlay {
  background: linear-gradient(to bottom, rgba(248,249,250,0.5) 0%, rgba(248,249,250,0.2) 60%, rgba(248,249,250,0.5) 100%);
}

.hero-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  z-index: 0;
  transform: scale(1.05);
}

.hero-grid {
  position: relative;
  z-index: 3;
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 40px;
  align-items: center;
  margin-bottom: 80px;
  width: 100%;
}

.hero-left {
  display: flex;
  flex-direction: column;
}

.hero-right {
  display: flex;
  justify-content: flex-end;
  width: 100%;
}

@media (max-width: 768px) {
  .hero-grid {
    grid-template-columns: 1fr;
    gap: 32px;
    margin-bottom: 40px;
  }
  .hero-right {
    justify-content: center;
  }
}

/* Hero Booking Card & Animations */
.hero-booking-card {
  width: 100%;
  max-width: 440px;
  background-color: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-xl);
  padding: 32px;
  backdrop-filter: blur(20px);
  box-shadow: var(--card-glow);
  display: flex;
  flex-direction: column;
  gap: 24px;
  z-index: 3;
  transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275), box-shadow 0.3s ease, border-color 0.3s ease;
}

.hero-booking-card:hover {
  transform: translateY(-4px);
  border-color: rgba(212, 175, 55, 0.4);
  box-shadow: 0 20px 40px rgba(0,0,0,0.6), 0 0 30px rgba(212, 175, 55, 0.15);
}

@media (max-width: 768px) {
  .hero-booking-card {
    max-width: 100%;
    padding: 24px;
  }
}

.booking-card-header h3 {
  font-family: var(--font-display);
  font-size: 1.45rem;
  font-weight: 800;
  color: var(--text-primary);
  margin-bottom: 6px;
  letter-spacing: -0.01em;
}

.booking-card-header p {
  font-size: 0.85rem;
  color: var(--text-secondary);
  line-height: 1.4;
}

.hero-booking-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.hero-booking-card .form-group {
  position: relative;
  width: 100%;
}

.hero-booking-card .input-wrapper {
  position: relative;
  width: 100%;
  transition: transform 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

/* Micro-interaction: slide wrapper slightly to the right on focus */
.hero-booking-card .input-wrapper:focus-within {
  transform: translateX(6px);
}

.hero-booking-card .input-icon {
  position: absolute;
  left: 15px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-secondary);
  font-size: 0.95rem;
  pointer-events: none;
  transition: color 0.25s ease;
  z-index: 2;
}

/* Specificity overrides to neutralize .form-group input rule at line 2003 */
.hero-booking-card input,
.hero-booking-card select {
  width: 100% !important;
  padding: 13px 16px 13px 44px !important;
  background-color: rgba(255, 255, 255, 0.03) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-md) !important;
  color: var(--text-primary) !important;
  font-size: 0.9rem !important;
  font-family: var(--font-body) !important;
  transition: border-color 0.25s ease, background-color 0.25s ease, box-shadow 0.25s ease !important;
  outline: none !important;
  box-sizing: border-box !important;
}

body.light-theme .hero-booking-card input,
body.light-theme .hero-booking-card select {
  background-color: rgba(0, 0, 0, 0.02) !important;
}

.hero-booking-card input:focus,
.hero-booking-card select:focus {
  border-color: var(--accent) !important;
  background-color: rgba(255, 255, 255, 0.06) !important;
  box-shadow: 0 0 10px rgba(212, 175, 55, 0.15) !important;
}

/* Highlight icon when input is focused */
.hero-booking-card .input-wrapper:focus-within .input-icon {
  color: var(--accent);
  text-shadow: 0 0 8px rgba(212, 175, 55, 0.3);
}

/* Custom select dropdown styling with gold arrow */
.hero-booking-card select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23d4af37' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 14px center !important;
  background-size: 16px !important;
  padding-right: 40px !important;
  cursor: pointer;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  appearance: none !important;
}

.hero-booking-card select option {
  background-color: #121214;
  color: #ffffff;
}

body.light-theme .hero-booking-card select option {
  background-color: #ffffff;
  color: #1c1c1e;
}

.form-divider {
  display: flex;
  align-items: center;
  text-align: center;
  font-size: 0.72rem;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.form-divider::before,
.form-divider::after {
  content: '';
  flex: 1;
  border-bottom: 1px solid var(--border);
}

.form-divider::before {
  margin-right: 12px;
}

.form-divider::after {
  margin-left: 12px;
}

.btn-call-hero {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 12px;
  font-size: 0.95rem;
  font-weight: 700;
}

.rating-badge {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  background-color: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.08);
  padding: 8px 20px;
  border-radius: 50px;
  margin-bottom: 32px;
  font-size: 0.9rem;
  backdrop-filter: blur(8px);
}

body.light-theme .rating-badge {
  background-color: rgba(0, 0, 0, 0.04);
  border-color: rgba(0, 0, 0, 0.06);
}

.hero-title {
  font-size: 3.6rem;
  line-height: 1.15;
  margin-bottom: 28px;
  font-weight: 900;
}

.hero-subtitle {
  font-size: 1.35rem;
  color: var(--text-secondary);
  margin-bottom: 48px;
  max-width: 650px;
  line-height: 1.5;
}

body.light-theme .hero-subtitle {
  color: #3a3a3c;
}

.hero-buttons {
  display: flex;
  gap: 24px;
}

/* Stats counter rows */
.hero-stats {
  position: relative;
  z-index: 3;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
  margin-top: auto;
  border-top: 1px solid var(--border);
  padding-top: 40px;
}

.stat-box {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.stat-number-wrapper {
  display: flex;
  align-items: baseline;
  color: var(--accent);
}

.stat-number {
  font-family: var(--font-display);
  font-size: 3.2rem;
  font-weight: 800;
  line-height: 1;
  color: var(--accent);
}

.stat-plus {
  font-family: var(--font-display);
  font-size: 2.2rem;
  color: var(--accent);
  font-weight: 800;
  vertical-align: super;
}

.stat-label {
  font-size: 0.95rem;
  color: var(--text-secondary);
  margin-top: 8px;
  font-weight: 500;
}

/* Scroll indicator mouse */
.scroll-indicator {
  position: absolute;
  bottom: 40px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  cursor: pointer;
}

.scroll-indicator span {
  font-size: 0.75rem;
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--text-secondary);
  transition: var(--transition);
}

.scroll-indicator:hover span {
  color: var(--accent);
}

.mouse {
  width: 22px;
  height: 38px;
  border: 2px solid var(--border);
  border-radius: 20px;
  position: relative;
}

.wheel {
  width: 4px;
  height: 8px;
  background-color: var(--accent);
  border-radius: 2px;
  position: absolute;
  top: 6px;
  left: 50%;
  transform: translateX(-50%);
  animation: scrollMouse 1.8s infinite;
}

@keyframes scrollMouse {
  0% { opacity: 1; transform: translateX(-50%) translateY(0); }
  100% { opacity: 0; transform: translateX(-50%) translateY(14px); }
}

/* About Grid */
.about-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
}

.about-card {
  padding: 50px 40px;
  border-radius: var(--radius-lg);
  opacity: 0;
  transform: translateY(40px);
}

.about-card.animated {
  opacity: 1;
  transform: translateY(0);
}

.card-icon-wrapper {
  width: 68px;
  height: 68px;
  border-radius: 18px;
  background-color: rgba(212, 175, 55, 0.08);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--accent);
  font-size: 1.9rem;
  margin-bottom: 32px;
}

.about-card h3 {
  font-size: 1.4rem;
  margin-bottom: 20px;
}

.about-card p {
  color: var(--text-secondary);
  font-size: 1rem;
  line-height: 1.6;
}

body.light-theme .about-card p {
  color: #3a3a3c;
}

/* Compare Matrix Table */
.compare-table-wrapper {
  overflow-x: auto;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
  background-color: var(--bg-surface);
}

.compare-table {
  width: 100%;
  border-collapse: collapse;
  text-align: left;
}

.compare-table th, .compare-table td {
  padding: 24px 32px;
  border-bottom: 1px solid var(--border);
  font-size: 1rem;
}

.compare-table th {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.95rem;
  text-transform: uppercase;
  color: var(--text-secondary);
  background-color: rgba(0, 0, 0, 0.2);
}

body.light-theme .compare-table th {
  background-color: rgba(0, 0, 0, 0.02);
}

.compare-table td.feature-name {
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--text-primary);
}

.compare-table td.highlight, .compare-table th.highlight {
  background-color: rgba(212, 175, 55, 0.03);
}

.compare-table td.highlight-premium, .compare-table th.highlight-premium {
  background-color: rgba(212, 175, 55, 0.06);
}

.success-color {
  color: var(--success);
}

.error-color {
  color: var(--error);
}

/* Before / After Image Slider container */
.slider-comparison-container {
  position: relative;
  width: 100%;
  height: 550px;
  border-radius: var(--radius-xl);
  overflow: hidden;
  box-shadow: var(--card-glow);
  cursor: ew-resize;
  border: 1px solid var(--border);
}

.img-side {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.img-side img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
}

.before-side {
  z-index: 2;
  /* Default split width is 50% */
  clip-path: polygon(0 0, 50% 0, 50% 100%, 0 100%);
}

.badge-label {
  position: absolute;
  bottom: 24px;
  background-color: rgba(7, 7, 9, 0.8);
  backdrop-filter: blur(5px);
  color: #fff;
  padding: 8px 18px;
  border-radius: 50px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  z-index: 4;
}

.badge-before {
  left: 24px;
}

.badge-after {
  right: 24px;
}

/* Drag line divider */
.drag-divider {
  position: absolute;
  top: 0;
  left: 50%;
  width: 4px;
  height: 100%;
  background-color: var(--accent);
  z-index: 3;
  transform: translateX(-50%);
  box-shadow: 0 0 10px rgba(var(--accent-rgb), 0.5);
  transition: background-color 0.2s ease;
}

.slider-comparison-container:hover .drag-divider {
  background-color: var(--accent-hover);
}

.drag-handle {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 54px;
  height: 54px;
  background-color: var(--accent);
  border: 4px solid var(--bg-base);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #000;
  font-size: 1.2rem;
  box-shadow: 0 5px 15px rgba(0,0,0,0.5);
  transition: transform 0.2s ease;
}

.slider-comparison-container:hover .drag-handle {
  transform: translate(-50%, -50%) scale(1.08);
}

.slider-comparison-container.dragging {
  cursor: ew-resize;
}

/* Step-by-Step Configurator */
.configurator-grid {
  display: grid;
  grid-template-columns: 1.3fr 0.7fr;
  gap: 24px;
}

.config-steps-card {
  background-color: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  padding: 32px 24px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  box-shadow: var(--card-glow);
}

/* Tabs indicator */
.config-tabs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  border-bottom: 1px solid var(--border);
  padding-bottom: 16px;
  margin-bottom: 24px;
}

.tab-btn {
  background: none;
  border: none;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.85rem;
  color: var(--text-secondary);
  cursor: pointer;
  text-align: center;
  padding: 8px 0;
  position: relative;
  outline: none;
}

.tab-btn.active {
  color: var(--accent);
}

.tab-btn.active::after {
  content: '';
  position: absolute;
  bottom: -17px;
  left: 0;
  width: 100%;
  height: 2px;
  background-color: var(--accent);
  box-shadow: 0 0 10px rgba(var(--accent-rgb), 0.5);
}

.config-content {
  min-height: 290px;
}

.config-step-pane {
  display: none;
}

.config-step-pane.active {
  display: block;
}

.step-title {
  font-size: 1.5rem;
  margin-bottom: 8px;
  font-weight: 800;
}

.step-subtitle {
  color: var(--text-secondary);
  margin-bottom: 24px;
  font-size: 0.9rem;
}

/* Car types grid (Step 1) */
.car-types-grid {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.car-type-card {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 20px;
  border: 1px solid var(--border);
  background-color: var(--bg-surface-elevated);
  border-radius: var(--radius-lg);
  cursor: pointer;
  transition: var(--transition);
}

.car-type-card:hover {
  border-color: var(--border-hover);
}

.car-type-card.active {
  border-color: var(--accent);
  background-color: rgba(var(--accent-rgb), 0.04);
  box-shadow: 0 0 20px var(--shadow-glow);
}
body.light-theme .car-type-card.active {
  background-color: rgba(175, 141, 27, 0.08);
}

.car-icon {
  font-size: 1.8rem;
  color: var(--accent);
  width: 40px;
  text-align: center;
}

.car-info-text h4 {
  font-size: 1rem;
  margin-bottom: 2px;
}

.car-info-text p {
  font-size: 0.8rem;
  color: var(--text-secondary);
}

/* Package Options (Step 2) */
.package-options-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.package-label {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 16px 20px;
  border: 1px solid var(--border);
  background-color: var(--bg-surface-elevated);
  border-radius: var(--radius-lg);
  cursor: pointer;
  transition: var(--transition);
  user-select: none;
}

.package-label:hover {
  border-color: var(--border-hover);
}

.package-label:has(input:checked) {
  border-color: var(--accent);
  background-color: rgba(var(--accent-rgb), 0.04);
}

body.light-theme .package-label:has(input:checked) {
  background-color: rgba(175, 141, 27, 0.08);
}

.package-label input {
  display: none;
}

.pack-checkbox {
  width: 20px;
  height: 20px;
  border: 2px solid var(--border);
  border-radius: 6px;
  margin-top: 3px;
  flex-shrink: 0;
  position: relative;
  transition: var(--transition);
}

.package-label input:checked + .pack-checkbox {
  background-color: var(--accent);
  border-color: var(--accent);
  box-shadow: 0 0 10px rgba(var(--accent-rgb), 0.3);
}

.package-label input:checked + .pack-checkbox::after {
  content: '\f00c';
  font-family: 'Font Awesome 6 Free';
  font-weight: 900;
  font-size: 0.7rem;
  color: #000;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.pack-content {
  width: 100%;
}

.pack-header-row {
  display: flex;
  justify-content: space-between;
  margin-bottom: 4px;
}

.pack-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1rem;
}

.pack-price {
  font-family: var(--font-display);
  font-weight: 800;
  color: var(--accent);
  font-size: 1rem;
}

.pack-desc {
  font-size: 0.85rem;
  color: var(--text-secondary);
  line-height: 1.4;
}

/* Detailing Addons List (Step 3) */
.addons-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.addon-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 20px;
  border: 1px solid var(--border);
  background-color: var(--bg-surface-elevated);
  border-radius: var(--radius-lg);
  gap: 20px;
  transition: var(--transition);
}

.addon-item:has(input:checked) {
  border-color: var(--accent);
  background-color: rgba(var(--accent-rgb), 0.04);
}

body.light-theme .addon-item:has(input:checked) {
  background-color: rgba(175, 141, 27, 0.08);
}

.addon-info h4 {
  font-size: 1rem;
  margin-bottom: 2px;
}

.addon-info p {
  font-size: 0.82rem;
  color: var(--text-secondary);
}

.addon-control {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-shrink: 0;
}

.addon-price {
  font-family: var(--font-display);
  font-weight: 800;
  color: var(--accent);
  font-size: 0.95rem;
}

/* Sleek toggle switch */
.switch {
  position: relative;
  display: inline-block;
  width: 48px;
  height: 24px;
}

.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.slider-round {
  position: absolute;
  cursor: pointer;
  top: 0; left: 0; right: 0; bottom: 0;
  background-color: var(--border);
  border-radius: 34px;
  transition: 0.4s;
}

.slider-round::before {
  content: "";
  position: absolute;
  height: 16px;
  width: 16px;
  left: 4px;
  bottom: 4px;
  background-color: var(--text-primary);
  border-radius: 50%;
  transition: 0.4s;
}

.switch input:checked + .slider-round {
  background-color: var(--accent);
}

.switch input:checked + .slider-round::before {
  transform: translateX(24px);
  background-color: #000;
}

/* Configurator footer buttons */
.config-footer {
  display: flex;
  justify-content: space-between;
  border-top: 1px solid var(--border);
  padding-top: 16px;
  margin-top: 24px;
}

/* Configurator Billing Card (Right Column) */
.config-billing-card {
  background-color: var(--bg-surface-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  padding: 28px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  box-shadow: var(--card-glow);
  height: max-content;
}

.config-billing-card h3 {
  font-size: 1.25rem;
  margin-bottom: 20px;
  font-weight: 800;
}

.billing-details {
  display: flex;
  flex-direction: column;
}

.bill-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.9rem;
}

.bill-label {
  color: var(--text-secondary);
}

.bill-value {
  font-weight: 600;
}

.bill-divider {
  height: 1px;
  background-color: var(--border);
  margin: 16px 0;
}

.bill-services-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-height: 160px;
  overflow-y: auto;
}

.bill-service-item {
  display: flex;
  justify-content: space-between;
  font-size: 0.9rem;
  line-height: 1.4;
}

.bill-service-item span:first-child {
  color: var(--text-primary);
  font-weight: 500;
}

.bill-service-item span:last-child {
  color: var(--text-secondary);
  font-weight: 700;
  flex-shrink: 0;
}

.empty-bill-text {
  color: var(--text-secondary);
  font-size: 0.85rem;
  font-style: italic;
}

.billing-total {
  margin: 36px 0;
}

.total-label {
  font-size: 0.85rem;
  text-transform: uppercase;
  color: var(--text-secondary);
  letter-spacing: 0.05em;
  display: block;
  margin-bottom: 8px;
}

.price-block {
  display: flex;
  align-items: baseline;
  gap: 12px;
}

/* Billing actions */
.billing-actions {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* Process Timeline (Linear layout) */
.process-timeline {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
}

@media (max-width: 992px) {
  .process-timeline {
    grid-template-columns: repeat(2, 1fr);
    gap: 30px;
  }
}

@media (max-width: 576px) {
  .process-timeline {
    grid-template-columns: 1fr;
    gap: 24px;
  }
}

.timeline-step {
  position: relative;
  background-color: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 40px;
  opacity: 0;
  transform: translateY(30px);
  transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275), box-shadow 0.4s ease, border-color 0.4s ease, opacity 0.6s ease !important;
}

/* Staggered transition entrance delays */
.timeline-step:nth-child(1) { transition-delay: 0.05s; }
.timeline-step:nth-child(2) { transition-delay: 0.15s; }
.timeline-step:nth-child(3) { transition-delay: 0.25s; }
.timeline-step:nth-child(4) { transition-delay: 0.35s; }
.timeline-step:nth-child(5) { transition-delay: 0.45s; }
.timeline-step:nth-child(6) { transition-delay: 0.55s; }

.timeline-step.animated {
  opacity: 1;
  transform: translateY(0);
}

.timeline-step:hover {
  transform: translateY(-8px);
  border-color: var(--accent);
  box-shadow: 0 15px 30px rgba(0,0,0,0.4), 0 0 20px rgba(212, 175, 55, 0.15);
}

body.light-theme .timeline-step:hover {
  box-shadow: 0 15px 30px rgba(0,0,0,0.06), 0 0 20px rgba(175, 141, 27, 0.1);
}

/* Connecting dashed timeline paths */
@media (min-width: 992px) {
  .timeline-step:not(:nth-child(3n))::after {
    content: '';
    position: absolute;
    top: 68px;
    left: 100%;
    width: 40px;
    border-top: 2.5px dashed rgba(var(--accent-rgb), 0.25);
    z-index: 1;
    transition: border-color 0.3s ease;
  }
  .timeline-step:not(:nth-child(3n)):hover::after {
    border-top-color: var(--accent);
  }
}

.step-number {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background-color: rgba(var(--accent-rgb), 0.05);
  border: 1px solid rgba(var(--accent-rgb), 0.25);
  font-family: var(--font-display);
  font-size: 1.35rem;
  font-weight: 900;
  color: var(--accent);
  margin-bottom: 24px;
  transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275), background-color 0.3s ease, color 0.3s ease, box-shadow 0.3s ease;
  box-shadow: 0 0 10px rgba(var(--accent-rgb), 0.05);
}

.timeline-step:hover .step-number {
  background-color: var(--accent);
  color: #000000;
  box-shadow: 0 0 15px rgba(var(--accent-rgb), 0.4);
  transform: scale(1.1) rotate(5deg);
}

.timeline-step h3 {
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 800;
  margin-bottom: 12px;
  transition: color 0.3s ease;
}

.timeline-step:hover h3 {
  color: var(--accent);
}

.timeline-step p {
  color: var(--text-secondary);
  font-size: 0.9rem;
  line-height: 1.5;
}

/* Accordion FAQs */
.faq-accordion-list {
  max-width: 850px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.faq-item {
  border: 1px solid var(--border);
  background-color: var(--bg-surface);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: var(--transition);
  opacity: 0;
  transform: translateY(20px);
}

.faq-item.animated {
  opacity: 1;
  transform: translateY(0);
}

.faq-question {
  width: 100%;
  background: none;
  border: none;
  padding: 28px 36px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  text-align: left;
  cursor: pointer;
  outline: none;
}

.faq-question span:first-child {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.15rem;
  color: var(--text-primary);
}

.faq-icon-arrow {
  color: var(--accent);
  font-size: 1rem;
  transition: transform 0.4s ease;
}

.faq-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.faq-answer p {
  padding: 0 36px 32px;
  color: var(--text-secondary);
  font-size: 0.98rem;
  line-height: 1.6;
}

/* FAQ active state */
.faq-item.active {
  border-color: var(--accent);
}

.faq-item.active .faq-icon-arrow {
  transform: rotate(180deg);
}

/* Reviews Testimonials Marquee */
.reviews-marquee-container {
  overflow: hidden;
  width: 100%;
  position: relative;
  padding: 20px 0 40px;
}

/* Beautiful fading mask on the edges for a premium luxury feel */
.reviews-marquee-container::before,
.reviews-marquee-container::after {
  content: '';
  position: absolute;
  top: 0;
  width: 200px;
  height: 100%;
  z-index: 2;
  pointer-events: none;
}
.reviews-marquee-container::before {
  left: 0;
  background: linear-gradient(to right, var(--bg-base) 0%, rgba(7, 7, 9, 0) 100%);
}
.reviews-marquee-container::after {
  right: 0;
  background: linear-gradient(to left, var(--bg-base) 0%, rgba(7, 7, 9, 0) 100%);
}

body.light-theme .reviews-marquee-container::before {
  background: linear-gradient(to right, var(--bg-base) 0%, rgba(248, 249, 250, 0) 100%);
}
body.light-theme .reviews-marquee-container::after {
  background: linear-gradient(to left, var(--bg-base) 0%, rgba(248, 249, 250, 0) 100%);
}

.reviews-marquee-track {
  display: flex;
  gap: 32px;
  width: max-content;
  animation: marqueeContinuous 50s linear infinite;
  /* Translates left-to-right to match user's direction request */
}

.reviews-marquee-track:hover {
  animation-play-state: paused;
}

@keyframes marqueeContinuous {
  0% {
    transform: translateX(calc(-50% - 16px));
  }
  100% {
    transform: translateX(0);
  }
}

.review-card {
  position: relative;
  width: 370px;
  flex-shrink: 0;
  padding: 24px;
  border-radius: var(--radius-lg);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 330px;
  background-color: var(--glass-bg);
  border: 1px solid var(--border);
  transition: var(--transition);
  overflow: hidden;
  backdrop-filter: blur(12px);
}

.review-card::before {
  content: "\f10e";
  font-family: 'Font Awesome 6 Free';
  font-weight: 900;
  position: absolute;
  top: 20px;
  right: 24px;
  font-size: 3rem;
  color: rgba(212, 175, 55, 0.04);
  transition: var(--transition);
  pointer-events: none;
}

.review-card:hover::before {
  color: rgba(212, 175, 55, 0.09);
  transform: translateY(-4px) scale(1.05);
}

.review-card:hover {
  transform: translateY(-8px);
  border-color: var(--accent);
  box-shadow: 0 15px 35px var(--shadow-glow);
  background-color: rgba(212, 175, 55, 0.02);
}

.review-card .user-avatar {
  transition: var(--transition);
  border: 2px dashed transparent;
}

.review-card:hover .user-avatar {
  transform: scale(1.08) rotate(5deg);
  border-color: var(--accent);
  background-color: rgba(212, 175, 55, 0.15);
}

.review-card .rating-stars i {
  transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275), color 0.3s ease;
  display: inline-block;
}

.review-card:hover .rating-stars i {
  transform: scale(1.3);
  color: #ffb800;
  text-shadow: 0 0 12px rgba(255, 184, 0, 0.6);
}

.review-card:hover .rating-stars i:nth-child(1) { transition-delay: 0.04s; }
.review-card:hover .rating-stars i:nth-child(2) { transition-delay: 0.08s; }
.review-card:hover .rating-stars i:nth-child(3) { transition-delay: 0.12s; }
.review-card:hover .rating-stars i:nth-child(4) { transition-delay: 0.16s; }
.review-card:hover .rating-stars i:nth-child(5) { transition-delay: 0.20s; }

.review-header {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-bottom: 28px;
}

.user-avatar {
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background-color: rgba(212, 175, 55, 0.08);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--accent);
  font-size: 1.35rem;
}

.user-avatar.text-female {
  background-color: rgba(255, 69, 58, 0.08);
  color: var(--error);
}

.user-info h4 {
  font-size: 1.1rem;
  margin-bottom: 4px;
}

.user-info .rating-stars {
  font-size: 0.8rem;
  color: var(--accent);
}

.review-text {
  color: var(--text-secondary);
  font-size: 0.98rem;
  line-height: 1.6;
  margin-bottom: 28px;
}

body.light-theme .review-text {
  color: var(--text-primary);
}

.review-date {
  font-size: 0.85rem;
  color: var(--text-secondary);
  align-self: flex-start;
}

/* Contacts Layout */
.contacts-grid {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: 60px;
  align-items: center;
}

.contacts-info h2 {
  font-size: 2.5rem;
}

.contacts-intro {
  color: var(--text-secondary);
  margin-bottom: 44px;
  font-size: 1.05rem;
}

.contacts-list {
  display: flex;
  flex-direction: column;
  gap: 32px;
  margin-bottom: 48px;
}

.contact-item {
  display: flex;
  gap: 24px;
}

.contact-icon {
  width: 52px;
  height: 52px;
  border-radius: 14px;
  background-color: rgba(212, 175, 55, 0.08);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--accent);
  font-size: 1.3rem;
  flex-shrink: 0;
}

.contact-text h4 {
  font-size: 0.85rem;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 6px;
}

.contact-text p {
  font-size: 1.1rem;
  font-weight: 600;
}

.contact-link:hover {
  color: var(--accent);
}

.map-container-relative {
  position: relative;
  width: 100%;
  height: 480px;
  overflow: hidden;
  border-radius: 24px;
}

.contacts-map iframe {
  box-shadow: var(--card-glow);
  filter: grayscale(1) invert(0.92) contrast(1.2) brightness(0.8);
  transition: filter 0.5s ease;
}

.map-card:hover iframe {
  filter: grayscale(0.3) invert(0.92) contrast(1.2) brightness(0.85);
}

body.light-theme .contacts-map iframe {
  filter: grayscale(0.5) contrast(1.1) brightness(0.95);
}

body.light-theme .map-card:hover iframe {
  filter: grayscale(0.1) contrast(1.1) brightness(0.98);
}

/* Pulsing Sonar Marker Overlay */
.map-pulse-overlay {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  z-index: 3;
}

.map-sonar-ring {
  position: absolute;
  width: 60px;
  height: 60px;
  border: 2px solid var(--accent);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  background-color: rgba(212, 175, 55, 0.1);
  animation: mapSonar 2.5s infinite ease-out;
}

body.light-theme .map-sonar-ring {
  background-color: rgba(175, 141, 27, 0.1);
}

@keyframes mapSonar {
  0% {
    width: 20px;
    height: 20px;
    opacity: 0.9;
  }
  100% {
    width: 90px;
    height: 90px;
    opacity: 0;
  }
}

.map-marker-dot {
  position: absolute;
  width: 14px;
  height: 14px;
  background-color: var(--accent);
  border: 2.5px solid #ffffff;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  box-shadow: 0 0 15px var(--accent);
}

body.light-theme .map-marker-dot {
  border-color: #ffffff;
}

/* Floating Glass Info Card */
.map-info-glass-card {
  position: absolute;
  top: 24px;
  left: 24px;
  z-index: 4;
  background: rgba(14, 14, 18, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(12px);
  border-radius: 16px;
  padding: 24px;
  width: 290px;
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.4);
  transition: transform 0.4s ease, border-color 0.4s ease;
}

.map-card:hover .map-info-glass-card {
  transform: translateY(-2px);
  border-color: var(--accent);
}

body.light-theme .map-info-glass-card {
  background: rgba(255, 255, 255, 0.85);
  border-color: rgba(0, 0, 0, 0.08);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.06);
}

.map-logo {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 1.15rem;
  letter-spacing: 0.05em;
  margin-bottom: 14px;
  color: var(--text-primary);
}

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

.map-details {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 20px;
}

.map-details p {
  font-size: 0.82rem;
  color: var(--text-secondary);
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
}

.map-details p i {
  color: var(--accent);
  width: 14px;
}

.map-nav-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 11px 14px;
  border-radius: 10px;
  background-color: var(--accent);
  color: #000000;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  transition: background-color 0.3s ease, transform 0.3s ease;
}

.map-nav-btn:hover {
  background-color: var(--accent-hover);
  transform: translateY(-1px);
}

body.light-theme .map-nav-btn {
  color: #ffffff;
}

@media (max-width: 576px) {
  .map-info-glass-card {
    position: relative;
    top: auto;
    left: auto;
    width: 100%;
    margin-top: 16px;
    border-radius: 20px;
  }
  .map-container-relative {
    height: auto;
  }
  .contacts-map iframe {
    height: 320px;
  }
}

/* Footer Section */
.footer {
  border-top: 1px solid var(--border);
  padding: 100px 0 40px;
  background-color: var(--bg-surface);
}

.footer-content {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: 60px;
  margin-bottom: 80px;
}

.footer-brand .logo {
  margin-bottom: 24px;
}

.footer-brand p {
  color: var(--text-secondary);
  max-width: 350px;
}

.footer-links h4, .footer-socials h4 {
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-secondary);
  margin-bottom: 28px;
}

.footer-links ul {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.footer-links a {
  color: var(--text-secondary);
  font-size: 0.95rem;
  font-weight: 500;
}

.footer-links a:hover {
  color: var(--accent);
}

.social-icons {
  display: flex;
  gap: 16px;
}

.social-icons a {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-secondary);
  font-size: 1.15rem;
}

.social-icons a:hover {
  color: #000;
  background-color: var(--accent);
  border-color: var(--accent);
  transform: translateY(-4px);
  box-shadow: 0 10px 20px var(--shadow-glow);
}

.footer-bottom {
  border-top: 1px solid var(--border);
  padding-top: 40px;
  display: flex;
  justify-content: space-between;
  color: var(--text-secondary);
  font-size: 0.85rem;
}

/* Modal Overlay & Card Glow */
.modal-overlay {
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background-color: rgba(0, 0, 0, 0.8);
  backdrop-filter: blur(16px);
  z-index: 2000;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.4s ease, visibility 0.4s ease;
}

.modal-overlay.active {
  opacity: 1;
  visibility: visible;
}

.modal {
  width: 100%;
  max-width: 550px;
  padding: 48px;
  border-radius: var(--radius-xl);
  transform: scale(0.92);
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 30px 70px rgba(0,0,0,0.7);
}

.modal-overlay.active .modal {
  transform: scale(1);
}

.modal-close {
  position: absolute;
  top: 28px;
  right: 28px;
  background: none;
  border: 1px solid var(--border);
  width: 38px;
  height: 38px;
  border-radius: 50%;
  color: var(--text-primary);
  font-size: 1.05rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: var(--transition);
}

.modal-close:hover {
  border-color: var(--accent);
  color: var(--accent);
}

.modal-header h3 {
  font-size: 1.7rem;
  margin-bottom: 8px;
}

.modal-header p {
  color: var(--text-secondary);
  font-size: 0.9rem;
  margin-bottom: 28px;
}

.selected-summary {
  background-color: var(--bg-base);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 24px;
  margin-bottom: 32px;
}

.selected-summary h4 {
  font-size: 0.85rem;
  text-transform: uppercase;
  color: var(--text-secondary);
  letter-spacing: 0.05em;
  margin-bottom: 16px;
}

.modal-car-class-row {
  font-size: 0.95rem;
  margin-bottom: 12px;
}

.modal-car-class-row strong {
  color: var(--accent);
}

.selected-summary ul {
  padding-left: 20px;
  list-style-type: disc;
  margin-bottom: 20px;
}

.selected-summary li {
  font-size: 0.9rem;
  margin-bottom: 8px;
}

.modal-total {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 16px;
  border-top: 1px solid var(--border);
}

.modal-total span {
  font-weight: 500;
}

.modal-total strong {
  color: var(--accent);
  font-family: var(--font-display);
  font-size: 1.3rem;
}

/* Forms styling */
.booking-form {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.form-group label {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.85rem;
  color: var(--text-secondary);
}

.form-group input {
  background-color: var(--bg-base);
  border: 1px solid var(--border);
  color: var(--text-primary);
  padding: 16px 20px;
  border-radius: var(--radius-lg);
  outline: none;
  font-family: inherit;
  font-size: 0.95rem;
  transition: var(--transition);
}

.form-group input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent);
}

/* Card Glow Effect Overlay Layer */
.card-glow-overlay {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  pointer-events: none;
  border-radius: inherit;
  overflow: hidden;
  z-index: 1;
}

/* Toast alert elements */
.toast-container {
  position: fixed;
  top: 36px;
  right: 36px;
  z-index: 10000;
  display: flex;
  flex-direction: column;
  gap: 16px;
  pointer-events: none;
}

.toast {
  background-color: var(--bg-surface);
  border: 1px solid var(--border);
  padding: 18px 26px;
  border-radius: var(--radius-lg);
  box-shadow: 0 15px 40px rgba(0,0,0,0.4);
  display: flex;
  align-items: center;
  gap: 18px;
  min-width: 340px;
  max-width: 480px;
  opacity: 0;
  transform: translateX(60px);
  transition: opacity 0.4s ease, transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  pointer-events: auto;
}

.toast.visible {
  opacity: 1;
  transform: translateX(0);
}

.toast-icon {
  font-size: 1.4rem;
  flex-shrink: 0;
}

.toast-success .toast-icon {
  color: var(--success);
}

.toast-error .toast-icon {
  color: var(--error);
}

.toast-info .toast-icon {
  color: var(--info);
}

.toast-message {
  font-size: 0.92rem;
  font-weight: 600;
  line-height: 1.4;
}

/* Sticky Bottom Mobile CTA */
.sticky-mobile-cta {
  position: fixed;
  bottom: 24px;
  left: 24px;
  right: 24px;
  z-index: 999;
  transform: translateY(120px);
  transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
  display: none;
}

.sticky-mobile-cta.visible {
  transform: translateY(0);
}

.sticky-cta-content {
  display: grid;
  grid-template-columns: 1fr 64px;
  gap: 12px;
  background-color: var(--glass-bg);
  border: 1px solid var(--glass-border);
  padding: 10px;
  border-radius: 50px;
  backdrop-filter: blur(20px);
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.3);
}

.sticky-btn-main {
  padding: 14px 22px;
  font-size: 0.92rem;
}

.btn-glass-sticky {
  background-color: var(--accent);
  color: #000;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.3rem;
  padding: 0;
  width: 64px;
  height: 64px;
  box-shadow: var(--shadow);
  border: none;
}

/* Responsive Viewports */
@media (max-width: 1024px) {
  .hero-title {
    font-size: 3.8rem;
  }

  .configurator-grid {
    grid-template-columns: 1fr;
    gap: 32px;
  }
}

@media (max-width: 1024px) {
  .section {
    padding: 60px 0;
    margin: 30px auto;
    border-radius: 20px;
    width: calc(100% - 32px);
  }

  .section-title {
    font-size: 2.2rem;
  }

  .header-cta {
    display: none;
  }

  .burger {
    display: flex;
  }

  /* Full screen Navigation Overlay */
  .nav-menu {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background-color: var(--glass-bg);
    backdrop-filter: blur(30px);
    z-index: 99;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.4s ease, visibility 0.4s ease;
  }

  .nav-menu.active {
    opacity: 1;
    visibility: visible;
  }

  .nav-list {
    flex-direction: column;
    align-items: center;
    gap: 36px;
  }

  .nav-link {
    font-size: 1.5rem;
    font-family: var(--font-display);
    font-weight: 800;
    color: var(--text-primary);
  }

  .burger.active .burger-bar:nth-child(1) {
    transform: translateY(9px) rotate(45deg);
  }
  
  .burger.active .burger-bar:nth-child(2) {
    opacity: 0;
  }

  .burger.active .burger-bar:nth-child(3) {
    transform: translateY(-9px) rotate(-45deg);
  }

  /* Hero Section Mobile */
  .hero {
    min-height: auto;
    padding-top: 130px;
    padding-bottom: 80px;
  }

  .hero-title {
    font-size: 2.6rem;
  }

  .hero-subtitle {
    font-size: 1.1rem;
    margin-bottom: 36px;
  }

  .hero-buttons {
    flex-direction: column;
    gap: 16px;
  }

  .hero-stats {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .stat-number {
    font-size: 2.6rem;
  }

  /* Slider comparison height */
  .slider-comparison-container {
    height: 380px;
  }

  /* Grid lists */
  .about-grid {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .process-timeline {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  /* Configurator card mobile layout */
  .config-steps-card {
    padding: 32px 24px;
  }

  .config-tabs {
    gap: 8px;
  }

  .tab-btn {
    font-size: 0.8rem;
  }

  /* Marquee on Mobile */
  .review-card {
    width: 320px;
    padding: 28px;
    min-height: 340px;
  }

  .contacts-grid {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .footer-content {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .footer-bottom {
    flex-direction: column;
    gap: 16px;
    text-align: center;
  }

  .sticky-mobile-cta {
    display: block;
  }
}

@media (max-width: 480px) {
  .hero-title {
    font-size: 2.2rem;
  }

  .section-title {
    font-size: 1.9rem;
  }

  .tab-btn {
    font-size: 0.72rem;
  }

  .modal {
    padding: 32px 20px;
  }
  
  .toast {
    min-width: calc(100vw - 72px);
  }
}

/* ==========================================================================
   Site Background Video Integration
   ========================================================================== */
.site-bg-video-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  z-index: -2;
  overflow: hidden;
  pointer-events: none;
}

.site-bg-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.18;
  filter: saturate(0.5) contrast(1.1) brightness(0.65) blur(0px);
  transition: opacity 0.3s ease; /* Removed filter transition to prevent layout reflow conflicts with JS scroll events */
  transform: translate3d(0, 0, 0); /* Force GPU Hardware Acceleration */
  backface-visibility: hidden;
  will-change: transform, opacity, filter;
}

body.light-theme .site-bg-video {
  opacity: 0.04;
  filter: grayscale(1) contrast(1.1) brightness(1.05);
}

.site-bg-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: radial-gradient(circle at 50% 50%, transparent 20%, var(--bg-base) 80%);
  opacity: 0.75;
  transition: var(--transition);
}

body.light-theme .site-bg-overlay {
  background: radial-gradient(circle at 50% 50%, rgba(248, 249, 250, 0.85) 0%, var(--bg-base) 100%);
  opacity: 0.95;
}

/* ==========================================================================
   Gallery Section Styles
   ========================================================================== */
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 32px;
  margin-top: 40px;
}

.gallery-card {
  position: relative;
  background-color: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: var(--transition);
}

.gallery-img-wrapper {
  width: 100%;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  position: relative;
  background-size: cover;
  background-position: center;
  background-color: #0b0f19;
}

/* Background blurred cover for vertical/different aspect images */
.gallery-img-wrapper::before {
  content: "";
  position: absolute;
  top: -15px;
  left: -15px;
  right: -15px;
  bottom: -15px;
  background-image: inherit;
  background-size: cover;
  background-position: center;
  filter: blur(12px) brightness(0.5);
  z-index: 1;
  pointer-events: none;
}

body.light-theme .gallery-img-wrapper::before {
  filter: blur(12px) brightness(0.85);
}

.gallery-img-wrapper img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: contain; /* show entire image without crop */
  z-index: 2;
  transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.gallery-card:hover .gallery-img-wrapper img {
  transform: scale(1.03);
}

.gallery-info {
  padding: 24px;
  position: relative;
  z-index: 2;
}

.gallery-info h4 {
  font-size: 1.4rem;
  font-weight: 700;
  margin-bottom: 8px;
  color: var(--text-primary);
}

.gallery-info p {
  color: var(--text-secondary);
  font-size: 0.95rem;
}

@media (max-width: 768px) {
  .gallery-grid {
    grid-template-columns: 1fr;
    gap: 24px;
  }
}



/* ==========================================================================
   Light Theme Luxury & Contrast Optimizations
   ========================================================================== */
body.light-theme .site-bg-overlay {
  background: radial-gradient(circle at 50% 50%, rgba(245, 248, 252, 0.96) 0%, var(--bg-base) 100%);
  opacity: 0.98;
}

body.light-theme .stat-card {
  background: #ffffff !important;
  border: 1px solid rgba(18, 28, 44, 0.08) !important;
  box-shadow: 0 10px 30px rgba(18, 28, 44, 0.04) !important;
}

body.light-theme .stat-card:hover {
  background: #ffffff !important;
  border-color: rgba(var(--accent-rgb), 0.3) !important;
  box-shadow: 0 15px 35px rgba(18, 28, 44, 0.08) !important;
}

body.light-theme .about-luxury-card {
  background: #ffffff !important;
  border: 1px solid rgba(18, 28, 44, 0.08) !important;
  box-shadow: 0 10px 30px rgba(18, 28, 44, 0.04) !important;
}

body.light-theme .about-luxury-card:hover {
  background: #ffffff !important;
  border-color: rgba(var(--accent-rgb), 0.3) !important;
  box-shadow: 0 15px 35px rgba(18, 28, 44, 0.08) !important;
}

body.light-theme .luxury-card-num {
  color: rgba(18, 28, 44, 0.09) !important;
}

body.light-theme .about-philosophy-card {
  background: #ffffff !important;
  border: 1px solid rgba(18, 28, 44, 0.08) !important;
  box-shadow: 0 15px 35px rgba(18, 28, 44, 0.04) !important;
}

body.light-theme .review-item-card {
  background: #ffffff !important;
  border: 1px solid rgba(18, 28, 44, 0.08) !important;
  box-shadow: 0 10px 30px rgba(18, 28, 44, 0.04) !important;
}

body.light-theme .review-item-card:hover {
  background: #ffffff !important;
  border-color: rgba(var(--accent-rgb), 0.3) !important;
  box-shadow: 0 15px 35px rgba(18, 28, 44, 0.08) !important;
}

body.light-theme .timeline-step {
  background: #ffffff !important;
  border: 1px solid rgba(18, 28, 44, 0.08) !important;
  box-shadow: 0 10px 30px rgba(18, 28, 44, 0.03) !important;
}

body.light-theme .timeline-step:hover {
  background: #ffffff !important;
  border-color: rgba(var(--accent-rgb), 0.3) !important;
  box-shadow: 0 15px 35px rgba(18, 28, 44, 0.08) !important;
}

body.light-theme .services-showcase-panel {
  background: #ffffff !important;
  border: 1px solid rgba(18, 28, 44, 0.08) !important;
  box-shadow: 0 15px 35px rgba(18, 28, 44, 0.04) !important;
}

body.light-theme .service-list-item {
  background: #ffffff !important;
  border: 1px solid rgba(18, 28, 44, 0.08) !important;
  box-shadow: 0 6px 15px rgba(18, 28, 44, 0.02) !important;
}

body.light-theme .service-list-item:hover {
  background: #ffffff !important;
  border-color: rgba(var(--accent-rgb), 0.3) !important;
  box-shadow: 0 10px 20px rgba(18, 28, 44, 0.06) !important;
}

body.light-theme .service-list-item.active {
  background: rgba(247, 178, 23, 0.08) !important;
  border-color: rgba(247, 178, 23, 0.3) !important;
}

body.light-theme .review-filter-btn {
  background: rgba(18, 28, 44, 0.03) !important;
  border-color: rgba(18, 28, 44, 0.08) !important;
  color: var(--text-secondary) !important;
}

body.light-theme .review-filter-btn:hover {
  background: rgba(18, 28, 44, 0.06) !important;
}

body.light-theme .review-filter-btn.active {
  background: var(--accent) !important;
  border-color: var(--accent) !important;
  color: #000000 !important;
}

body.light-theme .car-type-card {
  background: #ffffff !important;
  border: 1px solid rgba(18, 28, 44, 0.08) !important;
}

body.light-theme .car-type-card.active {
  border-color: var(--accent) !important;
  background: rgba(247, 178, 23, 0.08) !important;
}

body.light-theme .package-option-item, body.light-theme .addon-item {
  background: #ffffff !important;
  border: 1px solid rgba(18, 28, 44, 0.08) !important;
  box-shadow: 0 4px 12px rgba(18, 28, 44, 0.02) !important;
}

body.light-theme .package-option-item:hover, body.light-theme .addon-item:hover {
  border-color: rgba(var(--accent-rgb), 0.3) !important;
}

body.light-theme .config-billing-card {
  background: #ffffff !important;
  border: 1px solid rgba(18, 28, 44, 0.08) !important;
  box-shadow: 0 15px 35px rgba(18, 28, 44, 0.04) !important;
}

body.light-theme .faq-item {
  background: #ffffff !important;
  border: 1px solid rgba(18, 28, 44, 0.08) !important;
}

body.light-theme .faq-question {
  color: var(--text-primary) !important;
}


/* ==========================================================================
   Smooth Swiper & Step 4 Final Checkout Styles
   ========================================================================== */
.vk-clips-slider-container {
  overflow: hidden;
  width: 100%;
  padding: 4px;
}

.vk-clips-slider-track {
  display: flex;
  gap: 24px;
  transition: transform 0.5s cubic-bezier(0.25, 1, 0.5, 1);
  will-change: transform;
}

.final-checkout-container {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 24px;
  margin-top: 24px;
}

@media (max-width: 768px) {
  .final-checkout-container {
    grid-template-columns: 1fr;
    gap: 20px;
  }
}

.final-summary-card {
  background-color: rgba(255, 255, 255, 0.01);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 24px;
}

.summary-header {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1rem;
  margin-bottom: 16px;
  color: var(--text-primary);
  display: flex;
  align-items: center;
}

.final-actions-card {
  background-color: rgba(255, 255, 255, 0.01);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 24px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.messenger-btn {
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.25s ease, box-shadow 0.25s ease, background-color 0.25s ease !important;
}

.messenger-btn:hover {
  transform: translateY(-3px) scale(1.02);
}

.messenger-btn.wa-btn:hover {
  background: rgba(48, 209, 88, 0.12) !important;
  border-color: #30d158 !important;
  box-shadow: 0 8px 25px rgba(48, 209, 88, 0.25) !important;
}

.messenger-btn.tg-btn:hover {
  background: rgba(68, 180, 232, 0.12) !important;
  border-color: #44B4E8 !important;
  box-shadow: 0 8px 25px rgba(68, 180, 232, 0.25) !important;
}

/* Light Theme overrides */
body.light-theme .final-summary-card,
body.light-theme .final-actions-card {
  background-color: #ffffff !important;
  border-color: rgba(18, 28, 44, 0.08) !important;
  box-shadow: 0 6px 20px rgba(18, 28, 44, 0.02) !important;
}

body.light-theme .messenger-btn.wa-btn {
  border-color: rgba(48, 209, 88, 0.3) !important;
  background: rgba(48, 209, 88, 0.04) !important;
}

body.light-theme .messenger-btn.wa-btn div div {
  color: #121c2c !important;
}

body.light-theme .messenger-btn.tg-btn {
  border-color: rgba(68, 180, 232, 0.3) !important;
  background: rgba(68, 180, 232, 0.04) !important;
}

body.light-theme .messenger-btn.tg-btn div div {
  color: #121c2c !important;
}



/* === RECONSTRUCTED TAIL CSS RULES === */

/* Header styles */
.header-tg-btn:hover {
  transform: scale(1.1);
}

.header-phone-beveled {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 20px;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.85rem;
}

.header-phone-beveled:hover {
  background: var(--accent) !important;
  color: #000000 !important;
  border-color: var(--accent) !important;
}

/* Stat card styles */
.stat-card {
  padding: 24px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  backdrop-filter: blur(10px);
}

.stat-card:hover {
  background: rgba(255, 255, 255, 0.03);
  border-color: rgba(247, 178, 23, 0.25);
  transform: translateY(-4px);
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.25), 0 0 20px rgba(247, 178, 23, 0.05);
}

body.light-theme .stat-card {
  background: rgba(0, 0, 0, 0.01);
  border-color: rgba(0, 0, 0, 0.04);
  box-shadow: none;
}

body.light-theme .stat-card:hover {
  background: rgba(0, 0, 0, 0.02);
  border-color: rgba(247, 178, 23, 0.3);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.03);
}

.stat-card-badge {
  position: absolute;
  top: 12px;
  right: 16px;
  font-family: var(--font-display);
  font-size: 0.65rem;
  font-weight: 800;
  color: var(--accent);
  letter-spacing: 0.05em;
  opacity: 0.8;
}

@keyframes scrollMouse {
  0% { opacity: 1; transform: translateX(-50%) translateY(0); }
  100% { opacity: 0; transform: translateX(-50%) translateY(14px); }
}

/* About Grid */
.about-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
}

.about-card {
  padding: 50px 40px;
  border-radius: var(--radius-lg);
  opacity: 0;
  transform: translateY(40px);
}

.about-card.animated {
  opacity: 1;
  transform: translateY(0);
}

.card-icon-wrapper {
  width: 68px;
  height: 68px;
  border-radius: 18px;
  background-color: rgba(var(--accent-rgb), 0.08);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--accent);
  font-size: 1.9rem;
  margin-bottom: 32px;
}

.about-card h3 {
  font-size: 1.4rem;
  margin-bottom: 20px;
}

.about-card p {
  color: var(--text-secondary);
  font-size: 1rem;
  line-height: 1.6;
}

body.light-theme .about-card p {
  color: #3a3a3c;
}

/* Compare Matrix Panels */
.comparison-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 32px;
  margin-top: 40px;
}

@media (max-width: 768px) {
  .comparison-grid {
    grid-template-columns: 1fr;
    gap: 24px;
  }
}

.comparison-card {
  background-color: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  padding: 36px;
  box-shadow: var(--card-glow);
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  position: relative;
  overflow: hidden;
}

.garage-card {
  opacity: 0.65;
  filter: grayscale(0.2);
}

.garage-card:hover {
  opacity: 0.85;
  border-color: rgba(255, 69, 58, 0.3);
  box-shadow: 0 15px 35px rgba(0,0,0,0.4);
}

.fastdetailing-card {
  border-color: rgba(var(--accent-rgb), 0.35);
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.5), 0 0 30px rgba(var(--accent-rgb), 0.08);
}

.fastdetailing-card:hover {
  transform: translateY(-4px);
  border-color: var(--accent);
  box-shadow: 0 20px 45px rgba(0, 0, 0, 0.6), 0 0 35px rgba(var(--accent-rgb), 0.12);
}

.comparison-item {
  display: flex;
  flex-direction: column;
  gap: 6px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
  padding-bottom: 14px;
}

.comparison-item:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

body.light-theme .comparison-item {
  border-color: rgba(0, 0, 0, 0.04);
}

.feature-label {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-secondary);
}

.compare-content {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.compare-content i {
  font-size: 1.15rem;
  margin-top: 3px;
  font-size: 0.8rem;
  color: var(--text-secondary);
}

/* Package Options (Step 2) */
.package-options-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.package-label {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 16px 20px;
  border: 1px solid var(--border);
  background-color: var(--bg-surface-elevated);
  border-radius: var(--radius-lg);
  cursor: pointer;
  transition: var(--transition);
  user-select: none;
}

.package-label:hover {
  border-color: var(--border-hover);
}

.package-label:has(input:checked) {
  border-color: rgba(var(--accent-rgb), 0.5);
  background-color: rgba(var(--accent-rgb), 0.06);
}

body.light-theme .package-label:has(input:checked) {
  background-color: rgba(var(--accent-rgb), 0.1);
}

.package-label input {
  display: none;
}

.pack-checkbox {
  width: 20px;
  height: 20px;
  border: 2px solid var(--border);
  border-radius: 6px;
  margin-top: 3px;
  flex-shrink: 0;
  position: relative;
  transition: var(--transition);
}

.package-label input:checked + .pack-checkbox {
  background-color: var(--accent);
  border-color: rgba(var(--accent-rgb), 0.5);
  box-shadow: 0 0 10px rgba(var(--accent-rgb), 0.3);
}

.package-label input:checked + .pack-checkbox::after {
  content: '\f00c';
  font-family: 'Font Awesome 6 Free';
  font-weight: 900;
  font-size: 0.75rem;
  color: #000000;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.timeline-step:nth-child(4) { transition-delay: 0.26s; }
.timeline-step:nth-child(5) { transition-delay: 0.33s; }
.timeline-step:nth-child(6) { transition-delay: 0.4s; }

.timeline-step:hover {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(var(--accent-rgb), 0.25);
  transform: translateY(-2px) scale(1.01);
  box-shadow: 0 10px 30px rgba(0,0,0,0.25), 0 0 20px rgba(var(--accent-rgb), 0.04);
}

body.light-theme .timeline-step {
  background: rgba(0, 0, 0, 0.02);
  border-color: rgba(0, 0, 0, 0.05);
}

body.light-theme .timeline-step:hover {
  background: rgba(0, 0, 0, 0.03);
  border-color: rgba(var(--accent-rgb), 0.3);
  box-shadow: 0 10px 30px rgba(0,0,0,0.05);
}

.step-node {
  position: absolute;
  left: -70px;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--bg-base);
}

/* ==========================================================================
   Site Background Video Integration
   ========================================================================== */
.site-bg-video-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  z-index: -2;
  overflow: hidden;
  pointer-events: none;
}

.site-bg-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.35;
  filter: saturate(0.8) contrast(1.15) brightness(0.7);
}

body.light-theme .site-bg-video {
  opacity: 0.04;
  filter: grayscale(1) contrast(1.1) brightness(1.05);
}

.site-bg-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: radial-gradient(circle at 50% 50%, transparent 20%, var(--bg-base) 80%);
  opacity: 0.75;
}

body.light-theme .site-bg-overlay {
  background: radial-gradient(circle at 50% 50%, rgba(248, 249, 250, 0.85) 0%, var(--bg-base) 100%);
  opacity: 0.95;
}

/* VK Clips Card Interactions */
.vk-clips-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  margin-top: 40px;
}

@media (max-width: 992px) {
  .vk-clips-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
  }
}

@media (max-width: 576px) {
  .vk-clips-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }
}

.vk-clip-card {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--border);
  aspect-ratio: 9 / 16;
  background-color: #070b11;
  display: block;
  transition: var(--transition);
  box-shadow: 0 10px 20px rgba(0,0,0,0.4);
  flex: 0 0 280px;
  scroll-snap-align: start;
}

.vk-clip-card:hover {
  transform: translateY(-6px);
  border-color: rgba(var(--accent-rgb), 0.4);
  box-shadow: 0 15px 30px rgba(0,0,0,0.6), 0 0 20px rgba(var(--accent-rgb), 0.15);
}

.vk-clip-video-wrapper {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.vk-clip-video-wrapper video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.vk-clip-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  padding: 24px 16px 16px 16px;
  background: linear-gradient(to top, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0.4) 60%, transparent 100%);
  color: #ffffff;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.vk-clip-overlay h4 {
  font-family: var(--font-display);
  font-size: 0.95rem;
  font-weight: 700;
  line-height: 1.3;
  margin: 0;
  color: #ffffff;
}

.vk-clip-overlay p {
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.7);
  margin: 0;
  display: flex;
  align-items: center;
  gap: 6px;
}

.vk-clip-badge {
  font-size: 0.7rem;
  font-weight: 700;
  color: #000000;
  background: var(--accent);
  padding: 3px 8px;
  border-radius: 20px;
  text-transform: uppercase;
  width: fit-content;
}

.vk-clip-play-hover {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0.8);
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: rgba(var(--accent-rgb), 0.9);
  color: #000000;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.3rem;
  opacity: 0;
  transition: all 0.3s cubic-bezier(0.25, 1, 0.5, 1);
  z-index: 3;
}

.vk-clip-card:hover .vk-clip-play-hover {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}

.about-philosophy-card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  overflow: hidden;
  box-shadow: 0 25px 50px rgba(0, 0, 0, 0.4);
  background: rgba(13, 17, 23, 0.65);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 24px;
  padding: 48px;
  backdrop-filter: blur(20px);
}

body.light-theme .about-philosophy-card {
  background: linear-gradient(135deg, rgba(0, 0, 0, 0.01) 0%, rgba(0, 0, 0, 0.02) 100%);
  border-color: rgba(0, 0, 0, 0.05);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.02);
}

.philosophy-header h2 {
  font-family: var(--font-display);
  font-size: 2.2rem;
  line-height: 1.2;
  font-weight: 900;
  text-transform: uppercase;
  color: #ffffff;
  margin-top: 16px;
  margin-bottom: 24px;
}

body.light-theme .philosophy-header h2 {
  color: #121c2c;
}

.philosophy-tag {
  color: var(--accent);
  font-family: var(--font-display);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.15em;
  text-transform: uppercase;
}

.philosophy-text {
  color: var(--text-secondary);
  font-size: 1.05rem;
  line-height: 1.7;
  margin-bottom: 32px;
}

.philosophy-signature {
  display: flex;
  align-items: center;
  gap: 16px;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
  padding-top: 24px;
}

body.light-theme .philosophy-signature {
  border-top-color: rgba(0, 0, 0, 0.05);
}

.sig-badge {
  background: var(--accent);
  color: #000000;
  padding: 5px 12px;
  border-radius: 6px;
  font-weight: 800;
  font-size: 0.72rem;
  letter-spacing: 0.05em;
  pointer-events: none;
  z-index: 1;
}

.about-cards-stack {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.about-luxury-card {
  position: relative;
  background: rgba(15, 20, 28, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.03);
  border-radius: 24px;
  padding: 28px 36px;
  display: flex;
  align-items: center;
  gap: 28px;
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

body.light-theme .about-luxury-card {
  background: #ffffff !important;
  border: 1px solid rgba(18, 28, 44, 0.08) !important;
  box-shadow: 0 10px 30px rgba(18, 28, 44, 0.04) !important;
}

.about-luxury-card:hover {
  background: rgba(15, 20, 28, 0.85);
  border-color: var(--accent);
  box-shadow: 0 0 25px rgba(247, 178, 23, 0.12);
  transform: translateY(-3px);
}

body.light-theme .about-luxury-card:hover {
  background: rgba(18, 28, 44, 0.06) !important;
}

.luxury-card-num {
  font-family: var(--font-display);
  font-size: 1.8rem;
  font-weight: 900;
  color: rgba(255, 255, 255, 0.1);
  letter-spacing: -0.02em;
  transition: color 0.4s ease;
}

.about-luxury-card:hover .luxury-card-num {
  color: var(--accent);
}

.luxury-card-icon {
  width: 50px;
  height: 50px;
  border-radius: 12px;
  background: rgba(247, 178, 23, 0.08);
  border: 1px solid rgba(247, 178, 23, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--accent);
  font-size: 1.25rem;
  flex-shrink: 0;
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.about-luxury-card:hover .luxury-card-icon {
  background: var(--accent);
  color: #000000;
  box-shadow: 0 0 15px rgba(247, 178, 23, 0.35);
  transform: rotate(-3deg) scale(1.05);
}

.luxury-card-text {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.luxury-card-text h3 {
  font-family: var(--font-display);
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 4px;
}

.services-showcase-panel {
  position: relative;
  border-radius: 24px;
  overflow: hidden;
  background: rgba(0, 0, 0, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.03);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 520px;
}

body.light-theme .services-showcase-panel {
  background: #ffffff !important;
  border: 1px solid rgba(18, 28, 44, 0.08) !important;
  box-shadow: 0 15px 35px rgba(18, 28, 44, 0.04) !important;
}

.showcase-image-wrapper {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}

.showcase-image-wrapper img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: opacity 0.5s ease;
}

.service-list-item {
  position: relative;
  background: rgba(255, 255, 255, 0.01);
  border: 1px solid rgba(255, 255, 255, 0.03);
  border-radius: 16px;
  padding: 16px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1), transform 0.3s ease, opacity 0.3s ease;
}

body.light-theme .service-list-item {
  background: #ffffff !important;
  border: 1px solid rgba(18, 28, 44, 0.08) !important;
  box-shadow: 0 6px 15px rgba(18, 28, 44, 0.02) !important;
}

.service-list-item:hover {
  background: rgba(255, 255, 255, 0.03);
  border-color: rgba(255, 255, 255, 0.08);
}

body.light-theme .service-list-item:hover {
  background: #ffffff !important;
  border-color: rgba(var(--accent-rgb), 0.3) !important;
  box-shadow: 0 10px 20px rgba(18, 28, 44, 0.06) !important;
}

.service-list-item.active {
  background: rgba(247, 178, 23, 0.04);
  border-color: rgba(247, 178, 23, 0.3);
  box-shadow: 0 0 15px rgba(247, 178, 23, 0.05);
}

body.light-theme .service-list-item.active {
  background: rgba(247, 178, 23, 0.08) !important;
  border-color: rgba(247, 178, 23, 0.3) !important;
}

.item-icon-box {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.05);
  color: var(--text-secondary);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: all 0.3s ease;
}

.service-details-rich-content h4 {
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 800;
  color: #ffffff;
  margin: 24px 0 12px 0;
}

body.light-theme .service-details-rich-content h4 {
  color: #121c2c;
}

.service-details-rich-content ul {
  margin: 0 0 20px 0;
  padding-left: 20px;
  list-style-type: none;
}

.service-details-rich-content li {
  position: relative;
  margin-bottom: 10px;
  padding-left: 10px;
}

.service-details-rich-content li::before {
  content: "✓";
  position: absolute;
  left: -15px;
  color: var(--accent);
  font-weight: bold;
}

.service-details-footer {
  padding: 24px 32px 32px 32px;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
  display: flex;
  flex-direction: column;
  background: rgba(15, 20, 28, 0.4);
}

body.light-theme .service-details-footer {
  border-top-color: rgba(0, 0, 0, 0.05);
  background: rgba(0, 0, 0, 0.015);
}

@media (max-width: 768px) {
  .service-details-modal-card {
    width: 95%;
  }
  
  .service-details-body {
    padding: 0 20px 20px 20px;
    max-height: 50vh;
  }
  
  .detail-modal-category {
    left: 20px;
    bottom: 12px;
  }
  
  .service-details-body h3 {
    font-size: 1.35rem;
    margin-bottom: 12px;
  }
  
  .service-details-footer {
    padding: 20px;
  }
}

/* ==========================================================================
   Light Theme Luxury & Contrast Optimizations
   ========================================================================== */
body.light-theme .site-bg-overlay {
  background: radial-gradient(circle at 50% 50%, rgba(245, 248, 252, 0.96) 0%, var(--bg-base) 100%);
  opacity: 0.98;
}

body.light-theme .stat-card {
  background: #ffffff !important;
  border: 1px solid rgba(18, 28, 44, 0.08) !important;
  box-shadow: 0 10px 30px rgba(18, 28, 44, 0.04) !important;
}

body.light-theme .stat-card:hover {
  background: #ffffff !important;
  border-color: rgba(var(--accent-rgb), 0.3) !important;
  box-shadow: 0 15px 35px rgba(18, 28, 44, 0.08) !important;
}

body.light-theme .about-luxury-card {
  background: #ffffff !important;
  border: 1px solid rgba(18, 28, 44, 0.08) !important;
  box-shadow: 0 10px 30px rgba(18, 28, 44, 0.04) !important;
}

body.light-theme .about-luxury-card:hover {
  background: rgba(18, 28, 44, 0.06) !important;
}

body.light-theme .review-filter-btn.active {
  background: var(--accent) !important;
  border-color: var(--accent) !important;
  color: #000000 !important;
}

body.light-theme .car-type-card {
  background: #ffffff !important;
  border: 1px solid rgba(18, 28, 44, 0.08) !important;
}

body.light-theme .car-type-card.active {
  border-color: var(--accent) !important;
  background: rgba(247, 178, 23, 0.08) !important;
}

body.light-theme .package-option-item, body.light-theme .addon-item {
  background: #ffffff !important;
  border: 1px solid rgba(18, 28, 44, 0.08) !important;
  box-shadow: 0 4px 12px rgba(18, 28, 44, 0.02) !important;
}

body.light-theme .package-option-item:hover, body.light-theme .addon-item:hover {
  border-color: rgba(var(--accent-rgb), 0.3) !important;
}

body.light-theme .config-billing-card {
  background: #ffffff !important;
  border: 1px solid rgba(18, 28, 44, 0.08) !important;
  box-shadow: 0 15px 35px rgba(18, 28, 44, 0.04) !important;
}

body.light-theme .faq-item {
  background: #ffffff !important;
  border: 1px solid rgba(18, 28, 44, 0.08) !important;
}

body.light-theme .faq-question {
  color: var(--text-primary) !important;
}

/* ==========================================================================
   Video Clips Slider Navigation Buttons
   ========================================================================== */
.clips-nav-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: rgba(18, 28, 44, 0.6);
  border: 1px solid var(--border);
  color: var(--text-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 10;
  transition: all 0.3s ease;
}

.clips-nav-btn:hover {
  background: var(--accent);
  color: #000000;
  border-color: var(--accent);
  box-shadow: 0 0 15px rgba(247, 178, 23, 0.4);
}

.clips-nav-btn.prev {
  left: 10px;
}

.clips-nav-btn.next {
  right: 10px;
}

/* === CUSTOM VK PROMO CSS === */

/* ==========================================================================
   VK Community Promo Banner Styles
   ========================================================================== */
.vk-promo-section {
  position: relative;
  background: radial-gradient(circle at top right, rgba(76, 117, 163, 0.05), transparent 60%);
  border-bottom: 1px solid var(--border);
}

.vk-promo-grid {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 48px;
  align-items: center;
}

@media (max-width: 991px) {
  .vk-promo-grid {
    grid-template-columns: 1fr;
    gap: 40px;
  }
}

.vk-promo-text {
  display: flex;
  flex-direction: column;
}

.vk-tagline {
  color: #4c75a3 !important;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 16px;
}

.vk-promo-desc {
  font-size: 1.05rem;
  line-height: 1.7;
  color: var(--text-secondary);
  margin-bottom: 32px;
}

.vk-metrics {
  display: flex;
  gap: 32px;
  margin-bottom: 40px;
}

.metric-item {
  display: flex;
  flex-direction: column;
}

.metric-val {
  font-size: 2.2rem;
  font-weight: 800;
  font-family: var(--font-display);
  color: var(--text-primary);
  line-height: 1.2;
}

.metric-lbl {
  font-size: 0.88rem;
  color: var(--text-muted);
  margin-top: 4px;
}

.btn-vk-solid {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 32px;
  border-radius: var(--radius-lg);
  font-weight: 700;
  text-decoration: none;
  font-size: 0.95rem;
  letter-spacing: 0.05em;
  background: #4c75a3;
  color: #ffffff;
  border: none;
  transition: var(--transition);
  cursor: pointer;
  width: fit-content;
  box-shadow: 0 4px 15px rgba(76, 117, 163, 0.2);
}

.btn-vk-solid:hover {
  background: #3b5c82;
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(76, 117, 163, 0.35);
}

/* Phone Mockup Styling */
.vk-promo-visual {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 480px;
}

.phone-mockup {
  width: 240px;
  height: 440px;
  border: 10px solid #1c1c1e;
  border-radius: 36px;
  background: #0d0d0f;
  position: relative;
  overflow: hidden;
  box-shadow: var(--shadow-xl), 0 0 40px rgba(76, 117, 163, 0.1);
}

.phone-notch {
  width: 110px;
  height: 20px;
  background: #1c1c1e;
  border-radius: 0 0 14px 14px;
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  z-index: 5;
}

.phone-screen {
  padding: 24px 12px 12px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  height: 100%;
}

.phone-header {
  display: flex;
  align-items: center;
  gap: 8px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  padding-bottom: 8px;
}

.vk-mini-logo {
  width: 28px;
  height: 28px;
  background: #4c75a3;
  color: #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.95rem;
}

.vk-header-info {
  display: flex;
  flex-direction: column;
}

.group-name {
  font-weight: 700;
  font-size: 0.8rem;
  color: #fff;
}

.group-status {
  font-size: 0.65rem;
  color: #4c75a3;
}

.phone-post-card {
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 12px;
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.post-img-wrapper {
  height: 180px;
  background: linear-gradient(135deg, #1e293b, #0f172a);
  border-radius: 8px;
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.post-car-glow {
  position: absolute;
  width: 120px;
  height: 120px;
  background: radial-gradient(circle, rgba(247, 178, 23, 0.15) 0%, transparent 70%);
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.post-car-icon {
  font-size: 3.5rem;
  color: rgba(255, 255, 255, 0.08);
}

.post-caption {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.post-tag {
  color: var(--accent);
  font-size: 0.72rem;
  font-weight: 700;
}

.post-caption p {
  font-size: 0.72rem;
  color: var(--text-secondary);
  line-height: 1.4;
  margin: 0;
}

/* QR Scanner Card Styling */
.qr-scanner-card {
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(12px);
  border-radius: 16px;
  padding: 16px;
  box-shadow: var(--shadow-lg);
  position: relative;
  overflow: hidden;
  transition: var(--transition);
}

.qr-scanner-card:hover {
  transform: translateY(-4px);
  border-color: rgba(76, 117, 163, 0.25);
  box-shadow: 0 10px 30px rgba(76, 117, 163, 0.15);
}

.qr-laser-line {
  width: calc(100% - 32px);
  height: 2px;
  background: #4c75a3;
  box-shadow: 0 0 10px #4c75a3, 0 0 20px #4c75a3;
  position: absolute;
  left: 16px;
  z-index: 2;
  animation: qr-scan-anim 3s infinite ease-in-out;
}

@keyframes qr-scan-anim {
  0% {
    top: 16px;
  }
  50% {
    top: 146px;
  }
  100% {
    top: 16px;
  }
}

.qr-hint {
  display: block;
  text-align: center;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--text-muted);
}

/* === NEW LAYOUT AND SECTION STYLES === */

/* Hero Centered Redesign */
.hero-centered {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  min-height: 100vh;
  padding: 120px 0 60px 0;
  position: relative;
}

.hero-content-centered {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  max-width: 900px;
  margin: 0 auto;
  z-index: 5;
}

.hero-centered .hero-title {
  font-size: clamp(2.3rem, 5.5vw, 4.2rem);
  font-weight: 900;
  line-height: 1.1;
  text-transform: uppercase;
  margin-bottom: 20px;
  letter-spacing: -0.02em;
}

.hero-centered .hero-subtitle {
  font-size: clamp(0.95rem, 1.8vw, 1.15rem);
  max-width: 650px;
  color: var(--text-secondary);
  margin-bottom: 40px;
  line-height: 1.6;
}

/* Feature Icons in Hero */
.hero-features-icons {
  display: flex;
  justify-content: center;
  gap: 32px;
  margin-bottom: 50px;
  width: 100%;
  flex-wrap: wrap;
}

.feature-icon-item {
  display: flex;
  align-items: center;
  gap: 16px;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.04);
  padding: 16px 24px;
  border-radius: var(--radius-lg);
  backdrop-filter: blur(10px);
  min-width: 250px;
  text-align: left;
  transition: var(--transition);
}

.feature-icon-item:hover {
  transform: translateY(-2px);
  border-color: rgba(var(--accent-rgb), 0.25);
  background: rgba(255, 255, 255, 0.03);
}

body.light-theme .feature-icon-item {
  background: #ffffff !important;
  border: 1px solid rgba(18, 28, 44, 0.08) !important;
  box-shadow: 0 8px 25px rgba(18, 28, 44, 0.03) !important;
}

.feature-icon-item .icon-circle {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(var(--accent-rgb), 0.1);
  color: var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  flex-shrink: 0;
}

.feature-icon-item .feature-info {
  display: flex;
  flex-direction: column;
}

.feature-icon-item .feature-info strong {
  font-family: var(--font-display);
  font-size: 0.85rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  color: var(--text-primary);
}

.feature-icon-item .feature-info span {
  font-size: 0.75rem;
  color: var(--text-secondary);
}

/* CTA buttons in Hero */
.hero-cta-buttons {
  display: grid;
  grid-template-columns: repeat(2, 1fr); /* Two columns layout */
  gap: 16px;
  max-width: 580px; /* Reduced max-width for extremely clean, compact alignment */
  margin: 0 auto 30px auto;
  box-sizing: border-box;
}

@media (max-width: 576px) {
  .hero-cta-buttons {
    grid-template-columns: 1fr;
    gap: 12px;
  }
}

.btn-telegram-cta {
  background: var(--accent) !important;
  color: #000000 !important;
  font-weight: 800 !important;
  font-size: 0.9rem !important;
  letter-spacing: 0.05em;
  padding: 14px 20px !important;
  border-radius: 50px !important;
  display: inline-flex;
  align-items: center;
  justify-content: center; /* Centering text inside grid cell */
  height: 56px; /* Uniform height */
  gap: 12px;
  border: none;
  box-shadow: 0 4px 20px rgba(var(--accent-rgb), 0.35);
  transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
  text-decoration: none;
  box-sizing: border-box;
}

.btn-telegram-cta:hover {
  transform: translateY(-3px) scale(1.02);
  box-shadow: 0 8px 25px rgba(var(--accent-rgb), 0.5);
}

.tg-icon-circle-white {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #ffffff;
  color: #24A1DE;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  transition: transform 0.3s ease;
}

.btn-telegram-cta:hover .tg-icon-circle-white {
  transform: rotate(15deg) scale(1.1);
}

.btn-call-cta {
  background: transparent !important;
  color: #ffffff !important;
  font-weight: 800 !important;
  font-size: 0.9rem !important;
  letter-spacing: 0.05em;
  padding: 14px 20px !important;
  border-radius: 50px !important;
  display: inline-flex;
  align-items: center;
  justify-content: center; /* Centering text inside grid cell */
  height: 56px; /* Uniform height */
  gap: 12px;
  border: 2px solid rgba(255, 255, 255, 0.15) !important;
  transition: all 0.3s ease !important;
  text-decoration: none;
  box-sizing: border-box;
}

body.light-theme .btn-call-cta {
  color: var(--text-primary) !important;
  border-color: rgba(18, 28, 44, 0.15) !important;
}

.btn-call-cta:hover {
  background: rgba(255, 255, 255, 0.05) !important;
  border-color: rgba(255, 255, 255, 0.3) !important;
  transform: translateY(-2px);
}

body.light-theme .btn-call-cta:hover {
  background: rgba(18, 28, 44, 0.03) !important;
  border-color: rgba(18, 28, 44, 0.3) !important;
}

.phone-icon-circle-accent {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--accent);
  color: #000000;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.9rem;
}

/* Trust Cards Grid */
.hero-trust-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  width: 100%;
}

@media (max-width: 768px) {
  .hero-trust-cards {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .hero-features-icons {
    gap: 16px;
  }
}

.trust-card {
  background: rgba(255, 255, 255, 0.01);
  border: 1px solid rgba(255, 255, 255, 0.04);
  border-radius: var(--radius-xl);
  padding: 24px;
  backdrop-filter: blur(12px);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  transition: var(--transition);
  position: relative;
  overflow: hidden;
}

.trust-card:hover {
  transform: translateY(-4px);
  border-color: rgba(var(--accent-rgb), 0.15);
  background: rgba(255, 255, 255, 0.02);
}

body.light-theme .trust-card {
  background: #ffffff !important;
  border: 1px solid rgba(18, 28, 44, 0.08) !important;
  box-shadow: 0 10px 30px rgba(18, 28, 44, 0.04) !important;
}

body.light-theme .trust-card:hover {
  border-color: rgba(var(--accent-rgb), 0.3) !important;
  box-shadow: 0 15px 35px rgba(18, 28, 44, 0.08) !important;
}

.trust-card-header {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-display);
  font-size: 0.65rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  color: #55ffb4;
  margin-bottom: 12px;
  text-transform: uppercase;
}

.trust-card:nth-child(2) .trust-card-header {
  color: var(--accent);
}

.trust-card:nth-child(3) .trust-card-header {
  color: #00c6ff;
}

.trust-card-body {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.trust-card-body .stat-number {
  font-size: 2.5rem;
  font-weight: 900;
  font-family: var(--font-display);
  color: var(--text-primary);
  line-height: 1.1;
  margin-bottom: 4px;
}

.trust-card-body strong {
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--text-primary);
  margin-top: 4px;
}

.trust-card-body span {
  font-size: 0.75rem;
  color: var(--text-secondary);
  margin-top: 2px;
}

.stars-row {
  display: flex;
  gap: 4px;
  color: var(--accent);
  font-size: 0.75rem;
  margin-bottom: 4px;
}

/* Live Case Card Modifications */
.case-badge-live {
  position: absolute;
  top: 16px;
  left: 16px;
  background: rgba(255, 69, 58, 0.85);
  color: #ffffff;
  font-family: var(--font-display);
  font-size: 0.65rem;
  font-weight: 900;
  padding: 4px 10px;
  border-radius: 20px;
  display: flex;
  align-items: center;
  gap: 6px;
  letter-spacing: 0.05em;
  z-index: 3;
  backdrop-filter: blur(4px);
}

.case-badge-live i {
  font-size: 0.5rem;
  animation: pulse-red 1.5s infinite ease-in-out;
}

@keyframes pulse-red {
  0%, 100% { opacity: 0.4; transform: scale(0.9); }
  50% { opacity: 1; transform: scale(1.1); }
}

.case-header-row {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-bottom: 12px;
}

.case-subtitle {
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--accent);
  letter-spacing: 0.02em;
}

.case-desc {
  font-size: 0.88rem;
  line-height: 1.55;
  color: var(--text-secondary);
  margin-bottom: 20px;
}

.case-meta-details {
  display: flex;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
  padding-top: 16px;
  gap: 24px;
}

body.light-theme .case-meta-details {
  border-top-color: rgba(18, 28, 44, 0.06);
}

.case-meta-details .meta-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
}

.case-meta-details .meta-label {
  font-size: 0.68rem;
  font-weight: 800;
  color: var(--text-muted);
  letter-spacing: 0.05em;
}

.case-meta-details .meta-val {
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 800;
  color: var(--text-primary);
}

/* VK Promo Social Grid Layout */
.vk-promo-grid-new {
  display: grid;
  grid-template-columns: 1fr 1.3fr;
  gap: 48px;
  align-items: center;
}

@media (max-width: 991px) {
  .vk-promo-grid-new {
    grid-template-columns: 1fr;
    gap: 40px;
  }
  .promo-left-phone {
    justify-content: center;
  }
}

/* === NEW LAYOUT AND SECTION STYLES === */

/* Top Bar Styles */
.top-bar {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1100;
  height: 38px;
  background-color: #070a0f;
  border-bottom: 1px solid rgba(255, 255, 255, 0.03);
  display: flex;
  align-items: center;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  color: var(--text-secondary);
}

body.light-theme .top-bar {
  background-color: #f1f4f9;
  border-bottom-color: rgba(0, 0, 0, 0.05);
  color: #5c6470;
}

.top-bar-content {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 48px;
}

@media (max-width: 768px) {
  .top-bar-content {
    gap: 16px;
    flex-wrap: wrap;
    justify-content: center;
    padding: 8px 16px;
  }
}

.top-bar-item {
  display: flex;
  align-items: center;
  gap: 8px;
}

.top-bar-item i {
  font-size: 0.8rem;
}

.top-bar-item i.text-accent {
  color: var(--accent);
}

.pulse-green {
  color: #34c759;
  animation: pulse-green-anim 2s infinite ease-in-out;
}

@keyframes pulse-green-anim {
  0%, 100% { opacity: 0.5; transform: scale(0.9); }
  50% { opacity: 1; transform: scale(1.1); }
}

/* Telegram Circular Header Button */
.header-tg-circle-btn {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--border);
  color: #229ED9;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  transition: var(--transition);
  text-decoration: none;
  margin-right: 0; /* removed to ensure absolute gap symmetry */
}

.header-tg-circle-btn:hover {
  background: #229ED9;
  color: #ffffff;
  border-color: #229ED9;
  transform: scale(1.05);
  box-shadow: 0 0 15px rgba(34, 158, 217, 0.3);
}

/* Service List Item Pricing */
.item-arrow-price-row {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-left: auto;
}

.service-list-price {
  font-family: var(--font-display);
  font-size: 0.85rem;
  font-weight: 800;
  color: var(--accent);
  background: rgba(247, 178, 23, 0.06);
  padding: 4px 10px;
  border-radius: 8px;
  border: 1px solid rgba(247, 178, 23, 0.12);
  letter-spacing: 0.02em;
  transition: var(--transition);
}

.service-list-item:hover .service-list-price {
  background: var(--accent);
  color: #000000;
  border-color: var(--accent);
}

body.light-theme .service-list-price {
  background: rgba(247, 178, 23, 0.08);
}

body.light-theme .service-list-item:hover .service-list-price {
  color: #000000;
}

/* Process Timeline Cards Redesign */
.process-timeline-new {
  position: relative;
  max-width: 850px;
  margin: 50px auto 0 auto;
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.timeline-line {
  position: absolute;
  left: 32px;
  top: 0;
  bottom: 0;
  width: 2px;
  background: linear-gradient(to bottom, var(--accent) 0%, rgba(247, 178, 23, 0.1) 100%);
  z-index: 1;
}

.timeline-row {
  display: flex;
  align-items: center;
  position: relative;
  z-index: 2;
  width: 100%;
}

.timeline-node {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: #0d121a;
  border: 2px solid var(--accent);
  color: var(--accent);
  font-family: var(--font-display);
  font-size: 0.85rem;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 15px rgba(247, 178, 23, 0.3);
  flex-shrink: 0;
  margin-left: 11px; /* Center circle on the 32px line */
}

body.light-theme .timeline-node {
  background: #ffffff;
  box-shadow: 0 4px 10px rgba(247, 178, 23, 0.15);
}

.timeline-card {
  margin-left: 32px;
  flex: 1;
  background: rgba(255, 255, 255, 0.01);
  border: 1px solid rgba(255, 255, 255, 0.04);
  border-radius: 20px;
  padding: 24px 32px;
  display: flex;
  align-items: center;
  gap: 24px;
  backdrop-filter: blur(12px);
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.timeline-card:hover {
  transform: translateX(6px);
  border-color: rgba(var(--accent-rgb), 0.2);
  background: rgba(255, 255, 255, 0.02);
  box-shadow: var(--shadow-lg);
}

body.light-theme .timeline-card {
  background: #ffffff !important;
  border: 1px solid rgba(18, 28, 44, 0.08) !important;
  box-shadow: 0 8px 30px rgba(18, 28, 44, 0.03) !important;
}

body.light-theme .timeline-card:hover {
  border-color: rgba(var(--accent-rgb), 0.3) !important;
  box-shadow: 0 12px 35px rgba(18, 28, 44, 0.08) !important;
}

.timeline-card .card-icon-box {
  width: 50px;
  height: 50px;
  border-radius: 12px;
  background: rgba(247, 178, 23, 0.08);
  border: 1px solid rgba(247, 178, 23, 0.15);
  color: var(--accent);
  font-size: 1.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.timeline-card .card-text-side {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.timeline-card .card-text-side h3 {
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 800;
  color: var(--text-primary);
  margin: 0;
}

.timeline-card .card-text-side p {
  font-size: 0.9rem;
  line-height: 1.5;
  color: var(--text-secondary);
  margin: 0;
}

/* Review Cards Photo integration */
.review-image-wrapper {
  margin-top: 14px;
  border-radius: 12px;
  overflow: hidden;
  height: 150px;
  border: 1px solid rgba(255, 255, 255, 0.04);
}

body.light-theme .review-image-wrapper {
  border-color: rgba(0, 0, 0, 0.05);
}

.review-image-wrapper img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.review-card:hover .review-image-wrapper img {
  transform: scale(1.04);
}

/* Social Section / VK grid styling */
.vk-promo-grid-new {
  display: grid;
  grid-template-columns: 1fr 1.3fr;
  gap: 50px;
  align-items: center;
}

.promo-left-phone {
  display: flex;
  justify-content: center;
  position: relative;
  animation: float-phone-anim 6s infinite ease-in-out;
}

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

.promo-right-qrs {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.qr-cards-grid {
  display: flex;
  gap: 24px;
}

.qr-link-wrapper {
  flex: 1;
  text-decoration: none;
}

.qr-scanner-card {
  position: relative;
  overflow: hidden;
  border-radius: 20px;
  border: 1px solid rgba(255, 255, 255, 0.04);
  background: rgba(255, 255, 255, 0.01);
  padding: 20px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.15);
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.qr-scanner-card:hover {
  transform: translateY(-5px);
}

body.light-theme .qr-scanner-card {
  background: #ffffff !important;
  border: 1px solid rgba(18, 28, 44, 0.08) !important;
  box-shadow: 0 10px 30px rgba(18, 28, 44, 0.04) !important;
}

body.light-theme .qr-scanner-card:hover {
  box-shadow: 0 15px 35px rgba(18, 28, 44, 0.08) !important;
}

.qr-scanner-card.vk-qr-card:hover {
  border-color: rgba(76, 117, 163, 0.35);
  box-shadow: 0 10px 30px rgba(76, 117, 163, 0.15);
}

.qr-scanner-card.insta-qr-card:hover {
  border-color: rgba(195, 42, 163, 0.35);
  box-shadow: 0 10px 30px rgba(195, 42, 163, 0.15);
}

.qr-scanner-card .qr-img-container {
  background: #ffffff;
  padding: 12px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 12px;
  transition: transform 0.3s ease;
}

.qr-scanner-card:hover .qr-img-container {
  transform: scale(1.03);
}

.qr-scanner-card .qr-img-container img {
  width: 100%;
  height: auto;
  display: block;
}

@media (max-width: 991px) {
  .vk-promo-grid-new {
    grid-template-columns: 1fr;
    gap: 40px;
  }
}

@media (max-width: 576px) {
  .qr-cards-grid {
    flex-direction: column;
    gap: 16px;
  }
}

/* Redesigned Hero Elements to match screenshot exactly */
.hero-centered .feature-icon-item {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  flex-direction: column !important;
  align-items: center !important;
  text-align: center !important;
  padding: 0 !important;
  min-width: 180px !important;
  gap: 10px !important;
}

.hero-centered .feature-top-icon {
  font-size: 1.5rem !important;
  color: var(--accent) !important;
  margin-bottom: 6px !important;
  text-shadow: 0 0 10px rgba(247, 178, 23, 0.3) !important;
}

.hero-centered .feature-icon-item strong {
  font-family: var(--font-display) !important;
  font-size: 0.95rem !important;
  font-weight: 800 !important;
  letter-spacing: 0.05em !important;
  color: var(--text-primary) !important;
}

.hero-centered .feature-icon-item span {
  font-size: 0.8rem !important;
  color: var(--text-secondary) !important;
}

.hero-divider {
  width: 100%;
  max-width: 800px;
  height: 1px;
  background: linear-gradient(to right, transparent, rgba(255, 255, 255, 0.08) 20%, rgba(255, 255, 255, 0.08) 80%, transparent);
  margin: 40px auto;
}

body.light-theme .hero-divider {
  background: linear-gradient(to right, transparent, rgba(0, 0, 0, 0.08) 20%, rgba(0, 0, 0, 0.08) 80%, transparent);
}


/* === ROUND 3 PREMIUM DESIGN SYSTEM FOR FIRST SCREEN === */

/* Pulse Red for closed status */
.pulse-red {
  color: #ff3b30;
  animation: pulse-red-anim 2s infinite ease-in-out;
}

@keyframes pulse-red-anim {
  0%, 100% { opacity: 0.5; transform: scale(0.9); }
  50% { opacity: 1; transform: scale(1.1); }
}

/* Premium coordinate badge */
.hero-top-badge {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  background: rgba(7, 10, 15, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.05);
  padding: 6px 16px;
  border-radius: 30px;
  backdrop-filter: blur(8px);
  margin-bottom: 30px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
  position: relative;
  overflow: hidden;
}

body.light-theme .hero-top-badge {
  background: rgba(255, 255, 255, 0.7);
  border-color: rgba(0, 0, 0, 0.06);
}

.hero-top-badge::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 50%;
  height: 100%;
  background: linear-gradient(to right, transparent, rgba(255, 255, 255, 0.1), transparent);
  transform: skewX(-25deg);
  animation: badge-shimmer 4s infinite linear;
}

@keyframes badge-shimmer {
  0% { left: -100%; }
  30%, 100% { left: 150%; }
}

.hero-top-badge .badge-accent {
  background: linear-gradient(135deg, #f7b217 0%, #c59311 100%);
  color: #000000;
  font-family: var(--font-display);
  font-size: 0.7rem;
  font-weight: 900;
  letter-spacing: 0.05em;
  padding: 4px 10px;
  border-radius: 20px;
  text-transform: uppercase;
}

.hero-top-badge .badge-text {
  font-family: var(--font-display);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-secondary);
  display: flex;
  align-items: center;
  gap: 8px;
}

.hero-top-badge .badge-text i {
  font-size: 0.8rem;
  animation: rotate-compass 8s infinite linear;
}

@keyframes rotate-compass {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* Redesigned Premium Trust Cards */
.hero-trust-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  width: 100%;
  max-width: 900px;
  margin: 40px auto 0 auto;
}

.trust-card {
  background: rgba(255, 255, 255, 0.02) !important;
  border: 1px solid rgba(255, 255, 255, 0.04) !important;
  border-radius: 24px !important;
  padding: 28px 24px !important;
  backdrop-filter: blur(16px) !important;
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1) !important;
  position: relative;
  overflow: hidden;
}

.trust-card::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: radial-gradient(circle at top left, rgba(247, 178, 23, 0.03), transparent 70%);
  pointer-events: none;
}

.trust-card:hover {
  transform: translateY(-4px);
  border-color: rgba(247, 178, 23, 0.15) !important;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.3), 0 0 20px rgba(247, 178, 23, 0.03);
}

body.light-theme .trust-card {
  background: #ffffff !important;
  border: 1px solid rgba(18, 28, 44, 0.08) !important;
  box-shadow: 0 10px 30px rgba(18, 28, 44, 0.03) !important;
}

body.light-theme .trust-card:hover {
  border-color: rgba(247, 178, 23, 0.3) !important;
  box-shadow: 0 15px 40px rgba(18, 28, 44, 0.08) !important;
}

.trust-card-header {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  color: var(--accent); /* Gold color for header tags */
  text-transform: uppercase;
  margin-bottom: 16px;
}

.trust-card-header i {
  font-size: 0.8rem;
  filter: drop-shadow(0 0 4px rgba(247, 178, 23, 0.4));
}

.trust-card-body {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

.trust-card-body .stat-number {
  font-family: var(--font-display);
  font-size: clamp(2.2rem, 4vw, 2.8rem);
  font-weight: 900;
  line-height: 1;
  background: linear-gradient(135deg, #ffe082 0%, #f7b217 50%, #c59311 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  margin-bottom: 8px;
  filter: drop-shadow(0 2px 10px rgba(247, 178, 23, 0.25));
}

.trust-card-body strong {
  font-family: var(--font-display);
  font-size: 0.9rem;
  font-weight: 800;
  color: var(--text-primary);
}

.trust-card-body span {
  font-size: 0.78rem;
  color: var(--text-secondary);
}

.stars-row {
  display: flex;
  gap: 4px;
  color: #f7b217;
  font-size: 0.8rem;
  margin-bottom: 6px;
  filter: drop-shadow(0 0 6px rgba(247, 178, 23, 0.4));
}

/* Phone hover glow animation */
.header-phone-beveled {
  position: relative;
  overflow: hidden;
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.header-phone-beveled:hover {
  transform: scale(1.03);
  border-color: var(--accent);
  color: var(--accent) !important;
  box-shadow: 0 0 15px rgba(247, 178, 23, 0.2);
  background: rgba(247, 178, 23, 0.02);
}

.header-phone-beveled::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 40%;
  height: 100%;
  background: linear-gradient(to right, transparent, rgba(247, 178, 23, 0.15), transparent);
  transform: skewX(-25deg);
  transition: none;
}

.header-phone-beveled:hover::before {
  left: 150%;
  transition: left 0.8s ease-in-out;
}

/* Premium Gold Icons in Hero Features */
.hero-centered .feature-top-icon {
  font-size: 1.8rem !important;
  background: linear-gradient(135deg, #ffe082 0%, #f7b217 50%, #c59311 100%) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  margin-bottom: 12px !important;
  filter: drop-shadow(0 4px 10px rgba(247, 178, 23, 0.4)) !important;
  transition: all 0.3s ease !important;
}

.feature-icon-item:hover .feature-top-icon {
  transform: scale(1.15) rotate(3deg) !important;
  filter: drop-shadow(0 6px 15px rgba(247, 178, 23, 0.6)) !important;
}


/* === ROUND 4 COMPACT HERO & PREMIUM PHONE BUTTON === */

/* Sleek Premium Phone Button in Header */
.header-phone-premium {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-display);
  font-size: 0.85rem;
  font-weight: 800;
  color: #ffffff !important;
  text-decoration: none;
  background: rgba(247, 178, 23, 0.03);
  border: 1px solid rgba(247, 178, 23, 0.35);
  padding: 10px 20px;
  border-radius: 30px;
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  position: relative;
  overflow: hidden;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

body.light-theme .header-phone-premium {
  color: #0d121a !important;
  background: rgba(247, 178, 23, 0.05);
  border-color: rgba(247, 178, 23, 0.5);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
}

.header-phone-premium i {
  color: var(--accent);
  font-size: 0.9rem;
  transition: transform 0.3s ease;
}

.header-phone-premium:hover {
  transform: translateY(-2px);
  border-color: var(--accent);
  background: rgba(247, 178, 23, 0.1);
  box-shadow: 0 8px 25px rgba(247, 178, 23, 0.25), 0 0 10px rgba(247, 178, 23, 0.1);
}

.header-phone-premium:hover i {
  animation: phone-shake 0.5s ease-in-out infinite;
}

@keyframes phone-shake {
  0%, 100% { transform: rotate(0deg); }
  25% { transform: rotate(-15deg); }
  75% { transform: rotate(15deg); }
}

.header-phone-premium::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 50%;
  height: 100%;
  background: linear-gradient(to right, transparent, rgba(255, 255, 255, 0.25), transparent);
  transform: skewX(-25deg);
}

.header-phone-premium:hover::before {
  left: 150%;
  transition: left 0.8s ease-in-out;
}

/* Fix for FontAwesome linear-gradient text clip / half-cut display */
.hero-centered .feature-top-icon {
  font-size: 2.2rem !important;
  display: inline-block !important;
  line-height: 1 !important;
  padding: 4px !important;
  background: linear-gradient(135deg, #ffe082 0%, #f7b217 50%, #c59311 100%) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  margin-bottom: 12px !important;
  filter: drop-shadow(0 4px 10px rgba(247, 178, 23, 0.3)) !important;
  transition: all 0.3s ease !important;
  overflow: visible !important;
}

/* Spacing and Layout optimization to fit content in 100vh without overflow */
.hero-centered {
  padding-top: 100px !important;
  padding-bottom: 40px !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  min-height: 100vh !important;
}

.hero-centered .hero-content-centered {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 12px !important;
}

.hero-centered .hero-title {
  margin-bottom: 0px !important;
  line-height: 1.1 !important;
}

.hero-centered .hero-subtitle {
  margin-bottom: 12px !important;
  line-height: 1.4 !important;
}

.hero-centered .hero-features-icons {
  margin-bottom: 15px !important;
}

.hero-centered .hero-cta-buttons {
  margin-bottom: 0 !important;
}

.hero-divider {
  margin: 15px auto !important;
}

.hero-trust-cards {
  margin-top: 5px !important;
}

/* Hide overlapping indicator */
.scroll-indicator {
  display: none !important;
}


/* === ROUND 5 LOGO & SYMMETRY STYLES === */
.header-logo-img {
  height: 38px;
  width: auto;
  margin-right: 14px;
  display: block;
  filter: drop-shadow(0 0 8px rgba(34, 158, 217, 0.4));
  animation: logo-glow-pulse 3s infinite ease-in-out;
  transition: transform 0.3s ease;
}

.logo:hover .header-logo-img {
  transform: scale(1.08) rotate(-2deg);
}

@keyframes logo-glow-pulse {
  0%, 100% {
    filter: drop-shadow(0 0 6px rgba(34, 158, 217, 0.4)) brightness(1);
  }
  50% {
    filter: drop-shadow(0 0 14px rgba(34, 158, 217, 0.85)) brightness(1.1);
  }
}

/* Push hero section down so it doesn't get covered by top-bar + header (118px total) */
.hero-centered {
  padding-top: 150px !important;
  padding-bottom: 40px !important;
}


/* === ROUND 6 TOP BAR & NAV SYMMETRY UPGRADES === */
.top-bar-link {
  color: var(--text-secondary);
  text-decoration: none;
  transition: var(--transition);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.top-bar-link:hover {
  color: var(--accent);
}

.location-bounce-icon {
  transition: transform 0.3s ease;
}

.top-bar-link:hover .location-bounce-icon {
  animation: bounce-pin 1s infinite ease-in-out;
}

@keyframes bounce-pin {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-4px); }
}

/* Glassmorphism for Top Bar */
.top-bar {
  background: rgba(7, 10, 15, 0.8) !important;
  backdrop-filter: blur(12px) !important;
  box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

body.light-theme .top-bar {
  background: rgba(248, 249, 250, 0.8) !important;
  backdrop-filter: blur(12px) !important;
}

/* Tooltip style */
.top-bar-item[title] {
  cursor: help;
}


/* === ROUND 7 PREMIUM TOOLTIPS & SONAR ANIMATIONS FOR TOP BAR === */

/* Custom separators with vertical gradient glow */
.top-bar-divider {
  width: 1px;
  height: 14px;
  background: linear-gradient(to bottom, transparent, rgba(247, 178, 23, 0.4) 50%, transparent);
}

/* Hover tooltips */
.top-bar-item {
  position: relative;
}

.top-bar-tooltip {
  position: absolute;
  top: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%) translateY(10px);
  background: rgba(7, 10, 15, 0.95);
  border: 1px solid rgba(247, 178, 23, 0.25);
  border-radius: 12px;
  padding: 12px 16px;
  min-width: 250px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5), 0 0 15px rgba(247, 178, 23, 0.05);
  backdrop-filter: blur(12px);
  opacity: 0;
  pointer-events: none;
  transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  z-index: 1200;
  display: flex;
  flex-direction: column;
  gap: 6px;
  text-align: left;
}

.top-bar-item:hover .top-bar-tooltip {
  opacity: 1;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}

body.light-theme .top-bar-tooltip {
  background: rgba(255, 255, 255, 0.98);
  border-color: rgba(247, 178, 23, 0.4);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
}

body.light-theme .top-bar-tooltip span {
  color: #5c6470 !important;
}

/* Sonar radar pulse expand for green status dot */
.pulse-green {
  position: relative;
  color: #34c759;
}

.pulse-green::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: rgba(52, 199, 89, 0.4);
  transform: translate(-50%, -50%);
  animation: sonar-expand-green 2s infinite ease-out;
  z-index: -1;
}

@keyframes sonar-expand-green {
  0% { width: 8px; height: 8px; opacity: 1; }
  100% { width: 24px; height: 24px; opacity: 0; }
}

/* Sonar radar pulse expand for red status dot */
.pulse-red {
  position: relative;
  color: #ff3b30;
}

.pulse-red::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: rgba(255, 59, 48, 0.4);
  transform: translate(-50%, -50%);
  animation: sonar-expand-red 2s infinite ease-out;
  z-index: -1;
}

@keyframes sonar-expand-red {
  0% { width: 8px; height: 8px; opacity: 1; }
  100% { width: 24px; height: 24px; opacity: 0; }
}

/* Ticking/rotating clock hands icon */
.clock-ticking-icon {
  animation: clock-ticking-anim 12s infinite linear;
  transform-origin: center;
}

@keyframes clock-ticking-anim {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}


/* === ROUND 8 SERVICES CATALOG & PHILOSOPHY STYLES === */

/* Philosophy Stack Hover Glow Animation */
.about-luxury-card {
  overflow: hidden;
}

.about-luxury-card::after {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 50%;
  height: 100%;
  background: linear-gradient(to right, transparent, rgba(247, 178, 23, 0.05), transparent);
  transform: skewX(-25deg);
  transition: 0.75s;
}

.about-luxury-card:hover::after {
  left: 125%;
}

.about-luxury-card:hover .luxury-card-num {
  color: var(--accent);
  text-shadow: 0 0 10px rgba(247, 178, 23, 0.3);
  transform: scale(1.05);
}

.luxury-card-num {
  transition: all 0.3s ease;
}

/* Services Catalog Tab Filters */
.services-filters {
  display: flex;
  justify-content: center;
  gap: 14px;
  margin-bottom: 40px;
  flex-wrap: wrap;
}

.filter-tab-btn {
  background: rgba(255, 255, 255, 0.01);
  border: 1px solid rgba(255, 255, 255, 0.03);
  padding: 10px 24px;
  border-radius: 30px;
  color: var(--text-secondary);
  font-family: var(--font-display);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  cursor: pointer;
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  backdrop-filter: blur(8px);
}

.filter-tab-btn:hover {
  background: rgba(255, 255, 255, 0.03);
  border-color: rgba(255, 255, 255, 0.08);
  color: var(--text-primary);
  transform: translateY(-1px);
}

.filter-tab-btn.active {
  background: var(--accent);
  border-color: var(--accent);
  color: #000000;
  box-shadow: 0 0 20px rgba(247, 178, 23, 0.25);
}

body.light-theme .filter-tab-btn {
  background: #ffffff;
  border-color: rgba(18, 28, 44, 0.08);
  box-shadow: 0 4px 15px rgba(18, 28, 44, 0.02);
}

body.light-theme .filter-tab-btn:hover {
  background: rgba(18, 28, 44, 0.02);
  color: #121c2c;
}

body.light-theme .filter-tab-btn.active {
  background: var(--accent);
  color: #000000;
  border-color: var(--accent);
}

/* Services Dashboard Columns */
.services-dashboard {
  display: grid;
  grid-template-columns: 1fr 1.35fr;
  gap: 32px;
  align-items: start;
}

@media (max-width: 991px) {
  .services-dashboard {
    grid-template-columns: 1fr;
  }
}

.services-showcase-panel {
  position: relative;
  border-radius: 28px;
  overflow: hidden;
  background: rgba(7, 10, 15, 0.4);
  border: 1px solid rgba(255, 255, 255, 0.03);
  min-height: 520px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  box-shadow: var(--shadow-lg);
  backdrop-filter: blur(16px);
  height: 100%;
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.showcase-image-wrapper {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}

.showcase-image-wrapper img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: opacity 0.4s ease, transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.services-showcase-panel:hover .showcase-image-wrapper img {
  transform: scale(1.03);
}

.showcase-gradient-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(to bottom, rgba(7, 10, 15, 0.2) 0%, rgba(7, 10, 15, 0.65) 60%, rgba(7, 10, 15, 0.95) 100%);
  z-index: 2;
}

body.light-theme .showcase-gradient-overlay {
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.6) 60%, rgba(255, 255, 255, 0.95) 100%);
}

.showcase-content {
  position: relative;
  z-index: 3;
  padding: 36px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.showcase-category {
  font-family: var(--font-display);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  color: var(--accent);
  text-transform: uppercase;
}

.showcase-content h3 {
  font-family: var(--font-display);
  font-size: 1.45rem;
  font-weight: 900;
  color: #ffffff;
  margin: 0;
  letter-spacing: -0.01em;
}

body.light-theme .showcase-content h3 {
  color: #0d121a;
}

.showcase-content p {
  font-size: 0.9rem;
  line-height: 1.55;
  color: var(--text-secondary);
  margin: 0 0 10px 0;
}

/* Right Scrollable List Panel */
.services-list-panel {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-height: 520px;
  overflow-y: auto;
  padding-right: 10px;
}

/* Custom Scrollbar for list panel */
.services-list-panel::-webkit-scrollbar {
  width: 5px;
}

.services-list-panel::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.01);
  border-radius: 10px;
}

.services-list-panel::-webkit-scrollbar-thumb {
  background: rgba(247, 178, 23, 0.25);
  border-radius: 10px;
}

.services-list-panel::-webkit-scrollbar-thumb:hover {
  background: var(--accent);
}

/* Service Item adjustments to hide duplicate subtexts */
.service-list-item h4 {
  font-family: var(--font-display);
  font-size: 0.95rem;
  font-weight: 800;
  color: var(--text-primary);
  margin: 0;
}

.service-list-item p.mobile-only-desc {
  display: none !important;
}

.service-list-item .item-details {
  flex-grow: 1;
}

/* Compact Review Cards Sizing adjustment for text */
.review-card p.review-text {
  font-size: 0.88rem !important;
  line-height: 1.45 !important;
  margin-bottom: 12px;
}


/* === ROUND 9 MODAL PRICES & SMOOTH TRANSITIONS === */
.sdm-meta-price {
  background: rgba(247, 178, 23, 0.08) !important;
  border: 1px solid rgba(247, 178, 23, 0.3) !important;
  color: var(--accent) !important;
  font-weight: 800;
  text-shadow: 0 0 10px rgba(247, 178, 23, 0.1);
}

/* Hover effect for active/hovered Philosophy Stack Icon */
.about-luxury-card:hover .luxury-card-icon {
  background: var(--accent) !important;
  border-color: var(--accent) !important;
  color: #000000 !important;
  box-shadow: 0 0 15px rgba(247, 178, 23, 0.3);
}

.about-luxury-card:hover .luxury-card-num {
  color: var(--accent) !important;
}

/* Smooth, neat non-sharp animation enhancements */
.reveal-up {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.reveal-up.active {
  opacity: 1;
  transform: translateY(0);
}

/* Glassmorphic modal scale-in animation */
.service-details-modal {
  animation: modal-fade-in 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes modal-fade-in {
  from {
    opacity: 0;
    transform: scale(0.97);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}


/* === ROUND 10 SERVICES DETAILS MODAL LAYOUT & PHILOSOPHY GRID === */

/* Philosophy Section Layout Grid */
.about-luxury-grid {
  display: grid;
  grid-template-columns: 1fr 1.35fr;
  gap: 32px;
  align-items: stretch; /* stretches both columns to equal height */
}

@media (max-width: 991px) {
  .about-luxury-grid {
    grid-template-columns: 1fr;
    gap: 24px;
  }
}

/* Service Details Modal Window Container */
.service-details-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: 2200;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.service-details-modal.active {
  opacity: 1;
  pointer-events: auto;
}

/* Glassmorphic Blur Overlay Background */
.sdm-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(3, 4, 6, 0.82);
  backdrop-filter: blur(20px);
  transition: backdrop-filter 0.4s ease;
}

/* Premium Content Card with Spring Animation */
.sdm-content {
  position: relative;
  z-index: 10;
  width: 90%;
  max-width: 680px; /* Clean, compact width */
  background: rgba(10, 14, 20, 0.98);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 32px;
  overflow: hidden;
  box-shadow: 0 40px 90px rgba(0, 0, 0, 0.8), 0 0 40px rgba(247, 178, 23, 0.03);
  max-height: 85vh;
  display: flex;
  flex-direction: column;
  opacity: 0;
  transform: scale(0.92) translateY(30px);
  transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.4s ease;
}

.service-details-modal.active .sdm-content {
  opacity: 1;
  transform: scale(1) translateY(0);
}

body.light-theme .sdm-content {
  background: rgba(255, 255, 255, 1);
  border-color: rgba(18, 28, 44, 0.08);
  box-shadow: 0 40px 90px rgba(18, 28, 44, 0.08);
}

/* Close Button with spin interaction */
.sdm-close {
  position: absolute;
  top: 20px;
  right: 24px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(7, 10, 15, 0.6);
  color: #ffffff;
  font-size: 1.3rem;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 30;
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 4px 15px rgba(0,0,0,0.2);
}

.sdm-close:hover {
  background: #ffffff;
  color: #000000;
  border-color: #ffffff;
  transform: rotate(90deg) scale(1.05);
  box-shadow: 0 0 20px rgba(255,255,255,0.4);
}

body.light-theme .sdm-close {
  background: rgba(18, 28, 44, 0.04);
  color: #121c2c;
  border-color: rgba(18, 28, 44, 0.08);
}

body.light-theme .sdm-close:hover {
  background: #121c2c;
  color: #ffffff;
  border-color: #121c2c;
}

/* Landscape Hero Banner (shows car beautifully without heavy cropping) */
.sdm-hero-banner {
  position: relative;
  width: 100%;
  height: 220px;
  overflow: hidden;
  background-color: #030406;
  flex-shrink: 0;
}

.sdm-hero-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.65;
  transform: scale(1.04);
  transition: transform 8s ease-out;
}

.service-details-modal.active .sdm-hero-img {
  transform: scale(1);
}

.sdm-hero-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.1) 0%, rgba(10, 14, 20, 0.4) 50%, rgba(10, 14, 20, 0.98) 100%);
  padding: 24px 32px;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  box-sizing: border-box;
}

body.light-theme .sdm-hero-overlay {
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.4) 50%, rgba(255, 255, 255, 1) 100%);
}

/* Luxury Category Badge */
.sdm-luxury-badge {
  font-family: var(--font-display);
  font-size: 0.64rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  color: var(--accent);
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.badge-dot-glowing {
  width: 5px;
  height: 5px;
  background-color: var(--accent);
  border-radius: 50%;
  box-shadow: 0 0 8px var(--accent);
  display: inline-block;
}

/* Price Box */
.sdm-price-box {
  display: flex;
  flex-direction: column;
  gap: 2px;
  text-align: right;
}

.sdm-price-label {
  font-size: 0.58rem;
  font-weight: 800;
  text-transform: uppercase;
  color: var(--text-secondary);
  letter-spacing: 0.08em;
}

.sdm-showcase-price {
  font-family: var(--font-display);
  font-size: 1.8rem;
  font-weight: 900;
  color: #ffffff;
  margin: 0;
  letter-spacing: -0.01em;
  text-shadow: 0 4px 15px rgba(0,0,0,0.5);
}

body.light-theme .sdm-showcase-price {
  color: var(--accent);
  text-shadow: none;
}

/* Scrollable Content Wrapper */
.sdm-body-wrapper {
  padding: 32px 32px 105px 32px; /* Pad bottom for fixed action bar */
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 28px;
  flex-grow: 1;
  box-sizing: border-box;
}

.sdm-details-header h2 {
  font-family: var(--font-display);
  font-size: 1.8rem;
  font-weight: 900;
  color: #ffffff;
  margin: 0 0 10px 0;
  line-height: 1.15;
  letter-spacing: -0.015em;
}

body.light-theme .sdm-details-header h2 {
  color: #121c2c;
}

.sdm-accent-line {
  width: 44px;
  height: 3px;
  background: var(--accent);
  border-radius: 2px;
}

/* Specs Grid (B&O style thin divider grid) */
.sdm-specs-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  border-top: 1px solid rgba(255, 255, 255, 0.05);
  border-left: 1px solid rgba(255, 255, 255, 0.05);
}

body.light-theme .sdm-specs-grid {
  border-color: rgba(18, 28, 44, 0.06);
}

.sdm-spec-cell {
  padding: 14px 18px;
  border-right: 1px solid rgba(255, 255, 255, 0.05);
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  display: flex;
  flex-direction: column;
  gap: 4px;
}

body.light-theme .sdm-spec-cell {
  border-color: rgba(18, 28, 44, 0.06);
}

.spec-span-2 {
  grid-column: span 2;
}

.sdm-spec-label {
  font-size: 0.6rem;
  font-weight: 800;
  text-transform: uppercase;
  color: var(--text-secondary);
  letter-spacing: 0.08em;
}

.sdm-spec-val {
  font-size: 0.92rem;
  font-weight: 700;
  color: #ffffff;
}

body.light-theme .sdm-spec-val {
  color: #121c2c;
}

/* Content Rich Body */
.sdm-rich-body {
  font-size: 0.94rem;
  line-height: 1.65;
  color: var(--text-secondary);
}

.sdm-lead-paragraph {
  font-size: 0.96rem;
  font-weight: 500;
  color: #e4e6eb;
  line-height: 1.6;
  margin-bottom: 20px;
}

body.light-theme .sdm-lead-paragraph {
  color: #3a4454;
}

.sdm-section-divider {
  width: 100%;
  height: 1px;
  background: rgba(255, 255, 255, 0.05);
  margin: 24px 0;
}

body.light-theme .sdm-section-divider {
  background: rgba(18, 28, 44, 0.06);
}

.sdm-benefits-title {
  font-family: var(--font-display);
  font-size: 0.9rem;
  font-weight: 800;
  text-transform: uppercase;
  color: #ffffff;
  letter-spacing: 0.08em;
  margin: 0 0 20px 0;
}

body.light-theme .sdm-benefits-title {
  color: #121c2c;
}

/* Numbered Benefit Rows (Luxury list layout) */
.sdm-luxury-benefits {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.sdm-benefit-row {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  padding-bottom: 16px;
  border-bottom: 1px dashed rgba(255, 255, 255, 0.04);
}

.sdm-benefit-row:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

body.light-theme .sdm-benefit-row {
  border-bottom-color: rgba(18, 28, 44, 0.04);
}

.sdm-benefit-num {
  font-family: var(--font-display);
  font-size: 0.76rem;
  font-weight: 900;
  color: var(--accent);
  background: rgba(247, 178, 23, 0.05);
  border: 1px solid rgba(247, 178, 23, 0.15);
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.sdm-benefit-text h5 {
  font-size: 0.94rem;
  font-weight: 700;
  color: #ffffff;
  margin: 0 0 4px 0;
  line-height: 1.3;
}

body.light-theme .sdm-benefit-text h5 {
  color: #121c2c;
}

.sdm-benefit-text p {
  font-size: 0.88rem;
  line-height: 1.5;
  color: var(--text-secondary);
  margin: 0;
}

/* Sticky Action Bar at bottom */
.sdm-sticky-footer-actions {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  background: linear-gradient(to top, rgba(10, 14, 20, 1) 75%, rgba(10, 14, 20, 0) 100%);
  padding: 20px 32px 32px 32px;
  display: flex;
  gap: 12px;
  margin: 0;
  z-index: 25;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
  box-sizing: border-box;
}

@media (max-width: 576px) {
  .sdm-sticky-footer-actions {
    display: grid;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px !important;
    padding: 16px 20px 24px 20px !important;
  }
}

body.light-theme .sdm-sticky-footer-actions {
  background: linear-gradient(to top, rgba(255, 255, 255, 1) 75%, rgba(255, 255, 255, 0) 100%);
  border-top-color: rgba(18, 28, 44, 0.05);
}

.sdm-sticky-footer-actions .btn {
  flex: 1;
  padding: 14px 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-size: 0.88rem;
  font-weight: 700;
  border-radius: 16px;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.sdm-sticky-footer-actions .btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(247, 178, 23, 0.3);
}

.sdm-sticky-footer-actions .btn-glass:hover {
  transform: translateY(-2px);
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.15);
}

body.light-theme .sdm-sticky-footer-actions .btn-glass {
  background: rgba(18, 28, 44, 0.02);
  border-color: rgba(18, 28, 44, 0.1);
  color: #121c2c;
}

body.light-theme .sdm-sticky-footer-actions .btn-glass:hover {
  background: rgba(18, 28, 44, 0.06);
}
/* === ROUND 24 LIGHTBOX, COOKIES & ACCESSIBILITY COMPLIANCE STYLES === */

/* Lightbox Modal */
.lightbox-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(3, 4, 6, 0.94);
  backdrop-filter: blur(20px);
  z-index: 3000;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s ease;
}

.lightbox-overlay.active {
  opacity: 1;
  pointer-events: auto;
}

#lightboxImg {
  max-width: 90%;
  max-height: 85vh;
  border-radius: 20px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 30px 75px rgba(0, 0, 0, 0.8);
  transform: scale(0.93) translateY(10px);
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.lightbox-overlay.active #lightboxImg {
  transform: scale(1) translateY(0);
}

.lightbox-close {
  position: absolute;
  top: 24px;
  right: 32px;
  background: none;
  border: none;
  color: #ffffff;
  font-size: 2.8rem;
  cursor: pointer;
  z-index: 3100;
  transition: transform 0.3s ease, color 0.3s ease;
  line-height: 1;
}

.lightbox-close:hover {
  transform: scale(1.1);
  color: var(--accent);
}

/* Cookies Banner */
.cookies-banner {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%) translateY(140%);
  width: 90%;
  max-width: 720px;
  background: rgba(13, 17, 23, 0.95);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 20px;
  padding: 18px 26px;
  z-index: 2500;
  box-shadow: 0 15px 45px rgba(0, 0, 0, 0.5), 0 0 25px rgba(247, 178, 23, 0.03);
  backdrop-filter: blur(20px);
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.cookies-banner.active {
  transform: translateX(-50%) translateY(0);
}

.cookies-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
}

@media (max-width: 768px) {
  .cookies-banner {
    bottom: 92px !important; /* Positions banner above the mobile sticky bottom CTA to prevent overlapping */
    padding: 14px 20px;
    width: 92%;
  }
  .cookies-container {
    flex-direction: column;
    text-align: center;
    gap: 12px;
  }
}

.cookies-container p {
  font-size: 0.8rem;
  line-height: 1.55;
  color: var(--text-secondary);
  margin: 0;
}

.cookies-container p a {
  color: var(--accent);
  text-decoration: underline;
  transition: color 0.2s ease;
}

.cookies-container p a:hover {
  color: #ffffff;
}

.cookies-container .btn-sm {
  padding: 8px 18px;
  font-size: 0.76rem;
  border-radius: 12px;
}

/* Accessibility Toggle button inside menu */
.accessibility-toggle-btn {
  background: none;
  border: none;
  color: var(--text-secondary);
  font-size: 1.05rem;
  cursor: pointer;
  transition: var(--transition);
  padding: 6px 8px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.accessibility-toggle-btn:hover {
  color: var(--accent);
}

/* Accessibility Theme (GOST Compliance for visually impaired) */
body.accessibility-theme {
  filter: grayscale(1) contrast(1.1) !important;
}

body.accessibility-theme * {
  text-shadow: none !important;
  box-shadow: none !important;
}

body.accessibility-theme p, 
body.accessibility-theme span, 
body.accessibility-theme a, 
body.accessibility-theme li,
body.accessibility-theme button {
  font-size: 1.05rem !important;
  line-height: 1.8 !important;
  color: #ffffff !important;
}

body.accessibility-theme h1, 
body.accessibility-theme h2, 
body.accessibility-theme h3, 
body.accessibility-theme h4, 
body.accessibility-theme h5 {
  font-size: 1.25rem !important;
  font-weight: 900 !important;
  color: #ffffff !important;
}


/* === COMBINED CONTACT CHAT PILLS === */
.contact-phone-primary {
  font-size: 1.25rem;
  font-weight: 800;
  color: #ffffff;
  transition: var(--transition);
  letter-spacing: -0.01em;
}

.contact-phone-primary:hover {
  color: var(--accent);
}

body.light-theme .contact-phone-primary {
  color: #121c2c;
}

body.light-theme .contact-phone-primary:hover {
  color: var(--accent);
}

.contact-quick-chats {
  display: flex;
  gap: 12px;
  margin-top: 14px;
  flex-wrap: wrap;
}

.chat-pill-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  border-radius: 14px;
  font-size: 0.78rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  text-decoration: none;
  box-sizing: border-box;
}

.chat-pill-btn.wa-pill {
  background: rgba(37, 211, 102, 0.1);
  border: 1px solid rgba(37, 211, 102, 0.35);
  color: #25d366;
}

.chat-pill-btn.wa-pill:hover {
  background: #25d366;
  color: #ffffff;
  border-color: #25d366;
  box-shadow: 0 0 20px rgba(37, 211, 102, 0.4);
  transform: translateY(-2.5px);
}

.chat-pill-btn.tg-pill {
  background: rgba(34, 158, 217, 0.1);
  border: 1px solid rgba(34, 158, 217, 0.35);
  color: #229ed9;
}

.chat-pill-btn.tg-pill:hover {
  background: #229ed9;
  color: #ffffff;
  border-color: #229ed9;
  box-shadow: 0 0 20px rgba(34, 158, 217, 0.4);
  transform: translateY(-2.5px);
}


/* === ROUND 29 DEEP LIGHT THEME REWORK & CONTRAST OPTIMIZATIONS === */
body.light-theme {
  background-color: #f5f7fa !important;
  color: #1a202c !important;
}

/* Global Text & Header Overrides in Light Theme */
body.light-theme h1,
body.light-theme h2,
body.light-theme h3,
body.light-theme h4,
body.light-theme h5,
body.light-theme h6,
body.light-theme .section-header h2,
body.light-theme .about-philosophy-card h3,
body.light-theme .timeline-step h4,
body.light-theme .accordion-trigger,
body.light-theme .stat-card .stat-num,
body.light-theme .addon-item h4 {
  color: #121c2c !important;
}

body.light-theme p,
body.light-theme span,
body.light-theme li,
body.light-theme .section-header p,
body.light-theme .about-card p,
body.light-theme .review-text,
body.light-theme .timeline-step p,
body.light-theme .faq-answer p,
body.light-theme .addon-desc,
body.light-theme .calculator-summary p {
  color: #4a5568 !important;
}

/* Layout Background Overlay */
body.light-theme .site-bg-overlay {
  background: radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.92) 0%, rgba(240, 244, 248, 0.98) 100%) !important;
  opacity: 1 !important;
}

body.light-theme .site-bg-video {
  opacity: 0.08 !important; /* Softly visible for live atmosphere */
  filter: grayscale(1) contrast(1.1) brightness(1.2) !important;
}

/* Navigation Capsule */
body.light-theme .header {
  background: rgba(255, 255, 255, 0.75) !important;
  border-bottom-color: rgba(18, 28, 44, 0.06) !important;
}

body.light-theme .nav-menu {
  background: rgba(255, 255, 255, 0.8) !important;
  border: 1px solid rgba(18, 28, 44, 0.08) !important;
  box-shadow: 0 4px 20px rgba(18, 28, 44, 0.05) !important;
}

body.light-theme .nav-link {
  color: #4a5568 !important;
}

body.light-theme .nav-link:hover,
body.light-theme .nav-link.active {
  color: var(--accent) !important;
}

/* Hero Section Booking Card */
body.light-theme .hero-booking-card {
  background: #ffffff !important;
  border: 1px solid rgba(18, 28, 44, 0.08) !important;
  box-shadow: 0 20px 40px rgba(18, 28, 44, 0.06) !important;
}

body.light-theme .hero-booking-card h3 {
  color: #121c2c !important;
}

body.light-theme .hero-booking-card input,
body.light-theme .hero-booking-card select {
  background: #f7fafc !important;
  border: 1px solid rgba(18, 28, 44, 0.1) !important;
  color: #121c2c !important;
}

body.light-theme .hero-booking-card select option {
  background: #ffffff !important;
  color: #121c2c !important;
}

/* Cards styling across sections (About, Statistics, Services, Gallery, Reviews, FAQ) */
body.light-theme .stat-card,
body.light-theme .about-luxury-card,
body.light-theme .about-philosophy-card,
body.light-theme .service-list-item,
body.light-theme .gallery-card,
body.light-theme .review-item-card,
body.light-theme .accordion-item,
body.light-theme .addon-item,
body.light-theme .calculator-summary,
body.light-theme .car-type-card {
  background: #ffffff !important;
  border: 1px solid rgba(18, 28, 44, 0.08) !important;
  box-shadow: 0 10px 30px rgba(18, 28, 44, 0.04) !important;
  color: #4a5568 !important;
}

body.light-theme .stat-card:hover,
body.light-theme .about-luxury-card:hover,
body.light-theme .about-philosophy-card:hover,
body.light-theme .gallery-card:hover,
body.light-theme .review-item-card:hover,
body.light-theme .accordion-item:hover,
body.light-theme .addon-item:hover {
  background: #ffffff !important;
  border-color: rgba(var(--accent-rgb), 0.3) !important;
  box-shadow: 0 15px 35px rgba(18, 28, 44, 0.08) !important;
}

/* Services section specific fixes */
body.light-theme .services-showcase-panel {
  background: #ffffff !important;
  border: 1px solid rgba(18, 28, 44, 0.08) !important;
  box-shadow: 0 15px 35px rgba(18, 28, 44, 0.06) !important;
}

body.light-theme .service-list-item.active {
  background: rgba(var(--accent-rgb), 0.08) !important;
  border-color: var(--accent) !important;
  color: #121c2c !important;
}

body.light-theme .service-list-item h4 {
  color: #121c2c !important;
}

body.light-theme .service-showcase-details h3 {
  color: #121c2c !important;
}

/* Calculator Configurator */
body.light-theme .configurator-panel {
  background: #ffffff !important;
  border: 1px solid rgba(18, 28, 44, 0.08) !important;
  box-shadow: 0 15px 35px rgba(18, 28, 44, 0.06) !important;
}

body.light-theme .car-type-card.active {
  background: rgba(var(--accent-rgb), 0.08) !important;
  border-color: var(--accent) !important;
}

body.light-theme .car-type-card h5 {
  color: #121c2c !important;
}

body.light-theme .addon-item:has(input:checked) {
  background: rgba(var(--accent-rgb), 0.06) !important;
  border-color: var(--accent) !important;
}

/* Reviews and Testimonials */
body.light-theme .review-header h4 {
  color: #121c2c !important;
}

body.light-theme .review-filter-btn {
  background: #f7fafc !important;
  border: 1px solid rgba(18, 28, 44, 0.1) !important;
  color: #4a5568 !important;
}

body.light-theme .review-filter-btn.active {
  background: var(--accent) !important;
  color: #ffffff !important;
  border-color: var(--accent) !important;
}

/* FAQ Accordion Section */
body.light-theme .accordion-trigger i {
  color: #4a5568 !important;
}

body.light-theme .accordion-item.active .accordion-trigger {
  color: var(--accent) !important;
}

body.light-theme .accordion-item.active .accordion-trigger i {
  color: var(--accent) !important;
}

/* Contacts Section */
body.light-theme .contact-item {
  background: #ffffff !important;
  border: 1px solid rgba(18, 28, 44, 0.08) !important;
}

body.light-theme .contact-icon {
  background: rgba(var(--accent-rgb), 0.08) !important;
  color: var(--accent) !important;
}

body.light-theme .contacts-map iframe {
  filter: none !important; /* Make maps colorful and clean */
}

/* Text Gradient fixes - text-gradient should not use white gradients in light theme */
body.light-theme .text-gradient {
  background: linear-gradient(135deg, #121c2c 0%, #3a4454 100%) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
}

/* Cookies Consent Banner */
body.light-theme .cookies-banner {
  background: #ffffff !important;
  border: 1px solid rgba(18, 28, 44, 0.1) !important;
  box-shadow: 0 15px 45px rgba(18, 28, 44, 0.1) !important;
}

body.light-theme .cookies-container p {
  color: #4a5568 !important;
}

/* General glassmorphic fixes */
body.light-theme .glass-card {
  background: rgba(255, 255, 255, 0.8) !important;
  border-color: rgba(18, 28, 44, 0.08) !important;
}


/* === ROUND 30 DEEP LUXURY LIGHT THEME REDESIGN === */
body.light-theme {
  background-color: #f3f5f9 !important;
  color: #1a2332 !important;
}

/* Luxury Architectural Grid & Glowing Background */
body.light-theme .site-bg-overlay {
  background-image: 
    radial-gradient(circle at 15% 25%, rgba(255, 255, 255, 0.95) 0%, transparent 55%),
    radial-gradient(circle at 85% 75%, rgba(0, 153, 184, 0.06) 0%, transparent 60%),
    linear-gradient(to right, rgba(18, 28, 44, 0.015) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(18, 28, 44, 0.015) 1px, transparent 1px),
    linear-gradient(135deg, #f5f7fb 0%, #e2e8f1 100%) !important;
  background-size: 100% 100%, 100% 100%, 50px 50px, 50px 50px, 100% 100% !important;
  opacity: 1 !important;
}

body.light-theme .site-bg-video {
  opacity: 0.07;
  filter: grayscale(1) contrast(1.1) brightness(1.2);
}

/* Metallic Hero Title Gradient */
body.light-theme .hero-title {
  background: linear-gradient(135deg, #121c2c 30%, #3c4c62 100%) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
}

/* Premium Light Glassmorphism Cards (Frosted Glass Plates) */
body.light-theme .feature-icon-item,
body.light-theme .trust-card,
body.light-theme .stat-card,
body.light-theme .about-luxury-card,
body.light-theme .about-philosophy-card,
body.light-theme .service-list-item,
body.light-theme .gallery-card,
body.light-theme .review-item-card,
body.light-theme .accordion-item,
body.light-theme .addon-item,
body.light-theme .calculator-summary,
body.light-theme .car-type-card,
body.light-theme .hero-booking-card,
body.light-theme .services-showcase-panel,
body.light-theme .configurator-panel,
body.light-theme .contact-item {
  background: rgba(255, 255, 255, 0.58) !important;
  backdrop-filter: blur(16px) !important;
  border: 1px solid rgba(255, 255, 255, 0.6) !important;
  box-shadow: 
    0 15px 35px rgba(142, 154, 173, 0.08), 
    inset 0 1px 0 rgba(255, 255, 255, 0.7) !important;
  color: #121c2c !important;
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

/* Hover effects for light glass cards */
body.light-theme .feature-icon-item:hover,
body.light-theme .trust-card:hover,
body.light-theme .stat-card:hover,
body.light-theme .about-luxury-card:hover,
body.light-theme .about-philosophy-card:hover,
body.light-theme .gallery-card:hover,
body.light-theme .review-item-card:hover,
body.light-theme .accordion-item:hover,
body.light-theme .addon-item:hover,
body.light-theme .car-type-card:hover {
  background: rgba(255, 255, 255, 0.78) !important;
  border-color: rgba(0, 153, 184, 0.5) !important;
  box-shadow: 
    0 20px 45px rgba(142, 154, 173, 0.12), 
    0 0 15px rgba(0, 153, 184, 0.15),
    inset 0 1px 0 rgba(255, 255, 255, 0.8) !important;
  transform: translateY(-4px) !important;
}

/* Circular Dashboard Backing for Top Feature Icons (FIXED: Reset webkit properties so icons are visible) */
body.light-theme .feature-top-icon {
  background: rgba(0, 153, 184, 0.1) !important;
  border: 1px solid rgba(0, 153, 184, 0.25) !important;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  margin-bottom: 14px;
  box-shadow: 0 4px 10px rgba(0, 153, 184, 0.1) !important;
  color: var(--accent) !important;
  -webkit-background-clip: initial !important;
  -webkit-text-fill-color: initial !important;
}

/* Circular Dashboard Backing for Trust Card Headers */
body.light-theme .trust-card-header i {
  background: rgba(0, 153, 184, 0.1) !important;
  border: 1px solid rgba(0, 153, 184, 0.25) !important;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  color: var(--accent) !important;
  box-shadow: 0 3px 8px rgba(0, 153, 184, 0.08) !important;
}

/* Top Coordinate Badge Glassmorphism */
body.light-theme .hero-top-badge {
  background: rgba(255, 255, 255, 0.55) !important;
  border: 1px solid rgba(255, 255, 255, 0.5) !important;
  backdrop-filter: blur(10px) !important;
  box-shadow: 0 4px 15px rgba(142, 154, 173, 0.05) !important;
}

body.light-theme .hero-top-badge .badge-text {
  color: #4a5568 !important;
}

/* Navigation & Header Glassmorphism */
body.light-theme .header {
  background: rgba(255, 255, 255, 0.4) !important;
  backdrop-filter: blur(12px) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.3) !important;
}

body.light-theme .nav-menu {
  background: rgba(255, 255, 255, 0.5) !important;
  backdrop-filter: blur(12px) !important;
  border: 1px solid rgba(255, 255, 255, 0.5) !important;
  box-shadow: 0 10px 30px rgba(18, 28, 44, 0.04) !important;
}

body.light-theme .header-contacts .btn-glass,
body.light-theme .theme-toggle {
  background: rgba(255, 255, 255, 0.55) !important;
  border: 1px solid rgba(255, 255, 255, 0.6) !important;
  backdrop-filter: blur(10px) !important;
  box-shadow: 0 4px 15px rgba(142, 154, 173, 0.04) !important;
}

body.light-theme .header-contacts .btn-glass:hover,
body.light-theme .theme-toggle:hover {
  background: rgba(255, 255, 255, 0.8) !important;
  border-color: rgba(0, 153, 184, 0.4) !important;
}

/* Premium Turquoise Gradient for Primary Telegram CTA Button */
body.light-theme .btn-telegram-cta {
  background: linear-gradient(135deg, #00b4d8 0%, #0077b6 100%) !important;
  border: none !important;
  color: #ffffff !important;
  font-weight: 800 !important;
  box-shadow: 0 8px 25px rgba(0, 153, 184, 0.25) !important;
}

body.light-theme .btn-telegram-cta:hover {
  background: linear-gradient(135deg, #00c4ec 0%, #00669c 100%) !important;
  box-shadow: 0 12px 30px rgba(0, 153, 184, 0.4) !important;
  transform: translateY(-2px) !important;
}

/* Glassmorphism for Secondary Phone CTA Button */
body.light-theme .btn-call-cta {
  background: rgba(255, 255, 255, 0.55) !important;
  border: 1px solid rgba(255, 255, 255, 0.6) !important;
  box-shadow: 
    0 8px 20px rgba(142, 154, 173, 0.06), 
    inset 0 1px 0 rgba(255, 255, 255, 0.7) !important;
  backdrop-filter: blur(10px) !important;
  color: #121c2c !important;
  font-weight: 800 !important;
}

body.light-theme .btn-call-cta:hover {
  border-color: rgba(0, 153, 184, 0.4) !important;
  background: rgba(255, 255, 255, 0.75) !important;
  box-shadow: 
    0 10px 25px rgba(142, 154, 173, 0.1), 
    inset 0 1px 0 rgba(255, 255, 255, 0.8) !important;
  transform: translateY(-2px) !important;
}

/* === ROUND 31 SERVICES CALCULATION & DISCOUNT MARKETING STYLES === */
.sdm-marketing-banner {
  background: rgba(247, 178, 23, 0.08);
  border: 1px solid rgba(247, 178, 23, 0.25);
  border-radius: 14px;
  padding: 12px 16px;
  font-size: 0.78rem;
  font-weight: 800;
  color: var(--accent);
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 4px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  line-height: 1.4;
  box-shadow: 0 4px 15px rgba(247, 178, 23, 0.03);
}

body.light-theme .sdm-marketing-banner {
  background: rgba(0, 153, 184, 0.06);
  border-color: rgba(0, 153, 184, 0.25);
  color: #007790;
}


/* === ROUND 32 BOOKING CHOICE MODAL REDESIGN === */
.booking-discount-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(247, 178, 23, 0.08);
  border: 1px solid rgba(247, 178, 23, 0.2);
  border-radius: 12px;
  padding: 8px 16px;
  font-size: 0.76rem;
  font-weight: 800;
  color: var(--accent);
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

body.light-theme .booking-discount-badge {
  background: rgba(0, 153, 184, 0.06);
  border-color: rgba(0, 153, 184, 0.25);
  color: #007790;
}



@media (max-width: 576px) {
  .booking-messenger-grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }
}

.booking-grid-card {
  position: relative;
  cursor: pointer;
  padding: 28px 20px;
  text-align: center;
  border-radius: 20px;
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  overflow: hidden;
}

.booking-card-icon {
  font-size: 2.2rem;
  line-height: 1;
  transition: transform 0.4s ease;
}

.booking-grid-card:hover .booking-card-icon {
  transform: scale(1.1) translateY(-2px);
}

.booking-card-sub {
  font-size: 0.65rem;
  font-weight: 800;
  text-transform: uppercase;
  color: var(--text-secondary);
  letter-spacing: 0.08em;
}

.booking-card-title {
  font-size: 0.85rem;
  font-weight: 700;
  color: #ffffff;
  margin: 0;
  line-height: 1.35;
}

body.light-theme .booking-card-title {
  color: #121c2c;
}

/* WhatsApp Option Card styling */
.wa-grid-card {
  background: rgba(37, 211, 102, 0.04);
  border: 1px solid rgba(37, 211, 102, 0.15);
}

.wa-grid-card .booking-card-icon {
  color: #25d366;
  text-shadow: 0 0 15px rgba(37, 211, 102, 0.2);
}

.wa-grid-card:hover {
  background: rgba(37, 211, 102, 0.08);
  border-color: rgba(37, 211, 102, 0.45);
  box-shadow: 0 12px 30px rgba(37, 211, 102, 0.12);
  transform: translateY(-3px);
}

body.light-theme .wa-grid-card {
  background: rgba(37, 211, 102, 0.05);
  border-color: rgba(37, 211, 102, 0.2);
}

body.light-theme .wa-grid-card:hover {
  background: rgba(37, 211, 102, 0.08);
  border-color: rgba(37, 211, 102, 0.5);
  box-shadow: 0 12px 30px rgba(37, 211, 102, 0.15);
}

/* Telegram Option Card styling */
.tg-grid-card {
  background: rgba(34, 158, 217, 0.04);
  border: 1px solid rgba(34, 158, 217, 0.15);
}

.tg-grid-card .booking-card-icon {
  color: #229ed9;
  text-shadow: 0 0 15px rgba(34, 158, 217, 0.2);
}

.tg-grid-card:hover {
  background: rgba(34, 158, 217, 0.08);
  border-color: rgba(34, 158, 217, 0.45);
  box-shadow: 0 12px 30px rgba(34, 158, 217, 0.12);
  transform: translateY(-3px);
}

body.light-theme .tg-grid-card {
  background: rgba(34, 158, 217, 0.05);
  border-color: rgba(34, 158, 217, 0.2);
}

body.light-theme .tg-grid-card:hover {
  background: rgba(34, 158, 217, 0.08);
  border-color: rgba(34, 158, 217, 0.5);
  box-shadow: 0 12px 30px rgba(34, 158, 217, 0.15);
}

/* === COMBINED CONTACT CHAT PILLS === */
.contact-phone-primary {
  font-size: 1.25rem;
  font-weight: 800;
  color: #ffffff;
  transition: var(--transition);
  letter-spacing: -0.01em;
}

.contact-phone-primary:hover {
  color: var(--accent);
}

body.light-theme .contact-phone-primary {
  color: #121c2c;
}

body.light-theme .contact-phone-primary:hover {
  color: var(--accent);
}

.contact-quick-chats {
  display: flex;
  gap: 12px;
  margin-top: 14px;
  flex-wrap: wrap;
}

.chat-pill-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  border-radius: 14px;
  font-size: 0.78rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  text-decoration: none;
  box-sizing: border-box;
}

.chat-pill-btn.wa-pill {
  background: rgba(37, 211, 102, 0.1);
  border: 1px solid rgba(37, 211, 102, 0.35);
  color: #25d366;
}

.chat-pill-btn.wa-pill:hover {
  background: #25d366;
  color: #ffffff;
  border-color: #25d366;
  box-shadow: 0 0 20px rgba(37, 211, 102, 0.4);
  transform: translateY(-2.5px);
}

.chat-pill-btn.tg-pill {
  background: rgba(34, 158, 217, 0.1);
  border: 1px solid rgba(34, 158, 217, 0.35);
  color: #229ed9;
}

.chat-pill-btn.tg-pill:hover {
  background: #229ed9;
  color: #ffffff;
  border-color: #229ed9;
  box-shadow: 0 0 20px rgba(34, 158, 217, 0.4);
  transform: translateY(-2.5px);
}


/* === ROUND 37 SPLIT CALLS AND MESSAGING CONTACTS === */
.btn-whatsapp-cta {
  background: linear-gradient(135deg, #11998e 0%, #38ef7d 100%) !important;
  border: none !important;
  color: #ffffff !important;
  font-weight: 800 !important;
  font-size: 0.9rem !important;
  letter-spacing: 0.05em;
  padding: 14px 20px !important;
  border-radius: 50px !important;
  display: inline-flex;
  align-items: center;
  justify-content: center; /* Centering text inside grid cell */
  height: 56px; /* Uniform height */
  gap: 12px;
  box-shadow: 0 4px 20px rgba(56, 239, 125, 0.25) !important;
  transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
  text-decoration: none;
  box-sizing: border-box;
}

body.light-theme .btn-whatsapp-cta {
  background: linear-gradient(135deg, #11998e 0%, #2ecc71 100%) !important;
  box-shadow: 0 4px 20px rgba(46, 204, 113, 0.25) !important;
}

.btn-whatsapp-cta:hover {
  transform: translateY(-3px) scale(1.02);
  box-shadow: 0 8px 25px rgba(56, 239, 125, 0.45) !important;
}

body.light-theme .btn-whatsapp-cta:hover {
  box-shadow: 0 8px 25px rgba(46, 204, 113, 0.45) !important;
}

.wa-icon-circle-white {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #ffffff;
  color: #25d366;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  transition: transform 0.3s ease;
}

.btn-whatsapp-cta:hover .wa-icon-circle-white {
  transform: rotate(15deg) scale(1.1);
}

.btn-whatsapp-cta-modal {
  background: linear-gradient(135deg, #11998e 0%, #38ef7d 100%) !important;
  border: none !important;
  color: #ffffff !important;
  font-weight: 800 !important;
  box-shadow: 0 8px 25px rgba(56, 239, 125, 0.2) !important;
}

body.light-theme .btn-whatsapp-cta-modal {
  background: linear-gradient(135deg, #11998e 0%, #2ecc71 100%) !important;
  box-shadow: 0 8px 25px rgba(46, 204, 113, 0.2) !important;
}

.btn-whatsapp-cta-modal:hover {
  background: linear-gradient(135deg, #13a89c 0%, #3bf985 100%) !important;
  box-shadow: 0 12px 30px rgba(56, 239, 125, 0.35) !important;
  transform: translateY(-2px);
}

body.light-theme .btn-whatsapp-cta-modal:hover {
  background: linear-gradient(135deg, #13a89c 0%, #33e07b 100%) !important;
  box-shadow: 0 12px 30px rgba(46, 204, 113, 0.35) !important;
}


/* === ROUND 38 MAX MESSENGER INTEGRATION === */
.btn-max-cta {
  background: linear-gradient(135deg, #4a90e2 0%, #9b59d6 100%) !important;
  border: none !important;
  color: #ffffff !important;
  font-weight: 800 !important;
  font-size: 0.9rem !important;
  letter-spacing: 0.05em;
  padding: 14px 20px !important;
  border-radius: 50px !important;
  display: inline-flex;
  align-items: center;
  justify-content: center; /* Centering text inside grid cell */
  height: 56px; /* Uniform height */
  gap: 12px;
  box-shadow: 0 4px 20px rgba(155, 89, 214, 0.25) !important;
  transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
  text-decoration: none;
  box-sizing: border-box;
}

.btn-max-cta:hover {
  transform: translateY(-3px) scale(1.02);
  box-shadow: 0 8px 25px rgba(155, 89, 214, 0.45) !important;
}

.max-icon-circle-white {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #ffffff;
  color: #9b59d6;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.95rem;
  font-weight: 900;
  transition: transform 0.3s ease;
}

.btn-max-cta:hover .max-icon-circle-white {
  transform: rotate(15deg) scale(1.1);
}

.btn-max-cta-modal {
  background: linear-gradient(135deg, #4a90e2 0%, #9b59d6 100%) !important;
  border: none !important;
  color: #ffffff !important;
  font-weight: 800 !important;
  box-shadow: 0 8px 25px rgba(155, 89, 214, 0.2) !important;
}

.btn-max-cta-modal:hover {
  background: linear-gradient(135deg, #539df1 0%, #a86de4 100%) !important;
  box-shadow: 0 12px 30px rgba(155, 89, 214, 0.35) !important;
  transform: translateY(-2px);
}

.chat-pill-btn.max-pill {
  background: rgba(155, 89, 214, 0.1);
  border: 1px solid rgba(155, 89, 214, 0.35);
  color: #9b59d6;
}

.chat-pill-btn.max-pill:hover {
  background: #9b59d6;
  color: #ffffff;
  border-color: #9b59d6;
  box-shadow: 0 0 20px rgba(155, 89, 214, 0.4);
  transform: translateY(-2.5px);
}

/* MAX Card styling inside booking modal */
.max-grid-card {
  background: rgba(155, 89, 214, 0.04);
  border: 1px solid rgba(155, 89, 214, 0.15);
}

.max-grid-card .booking-card-icon {
  color: #9b59d6;
  text-shadow: 0 0 15px rgba(155, 89, 214, 0.2);
}

.max-grid-card:hover {
  background: rgba(155, 89, 214, 0.08);
  border-color: rgba(155, 89, 214, 0.45);
  box-shadow: 0 12px 30px rgba(155, 89, 214, 0.12);
  transform: translateY(-3px);
}

body.light-theme .max-grid-card {
  background: rgba(155, 89, 214, 0.05);
  border-color: rgba(155, 89, 214, 0.2);
}

body.light-theme .max-grid-card:hover {
  background: rgba(155, 89, 214, 0.08);
  border-color: rgba(155, 89, 214, 0.5);
  box-shadow: 0 12px 30px rgba(155, 89, 214, 0.15);
}


/* === ROUND 40 UN-CRAMPED GRID & MODAL MENUS === */
.btn-max-cta-glass {
  background: rgba(155, 89, 214, 0.08) !important;
  border: 2px solid rgba(155, 89, 214, 0.25) !important;
  color: #ffffff !important;
  font-weight: 800 !important;
  font-size: 0.9rem !important;
  letter-spacing: 0.05em;
  padding: 14px 20px !important;
  border-radius: 50px !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 56px;
  gap: 12px;
  transition: all 0.3s ease !important;
  text-decoration: none;
  box-sizing: border-box;
}

body.light-theme .btn-max-cta-glass {
  background: rgba(155, 89, 214, 0.05) !important;
  border-color: rgba(155, 89, 214, 0.2) !important;
  color: #9b59d6 !important;
}

.btn-max-cta-glass:hover {
  background: rgba(155, 89, 214, 0.15) !important;
  border-color: rgba(155, 89, 214, 0.5) !important;
  transform: translateY(-2px);
}

.booking-messenger-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 14px;
}

.booking-list-row {
  display: flex;
  align-items: center;
  padding: 18px 24px;
  border-radius: 18px;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.05);
}

body.light-theme .booking-list-row {
  border-color: rgba(0, 0, 0, 0.05);
}

.booking-row-icon {
  font-size: 1.8rem;
  margin-right: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  transition: transform 0.3s ease;
}

.booking-list-row:hover .booking-row-icon {
  transform: scale(1.1);
}

.booking-row-text {
  flex: 1;
  display: flex;
  flex-direction: column;
  text-align: left;
}

.booking-row-sub {
  font-size: 0.68rem;
  font-weight: 800;
  text-transform: uppercase;
  color: var(--text-secondary);
  letter-spacing: 0.05em;
  margin-bottom: 2px;
}

.booking-row-title {
  font-size: 0.92rem;
  font-weight: 700;
  color: #ffffff;
  margin: 0;
}

body.light-theme .booking-row-title {
  color: #121c2c;
}

.booking-row-arrow {
  font-size: 1rem;
  color: var(--text-secondary);
  opacity: 0.5;
  transition: all 0.3s ease;
}

.booking-list-row:hover .booking-row-arrow {
  transform: translateX(4px);
  opacity: 1;
  color: var(--accent);
}

/* WA Row styling */
.wa-row {
  background: rgba(37, 211, 102, 0.03);
  border-color: rgba(37, 211, 102, 0.12);
}

.wa-row .booking-row-icon {
  color: #25d366;
}

.wa-row:hover {
  background: rgba(37, 211, 102, 0.08);
  border-color: rgba(37, 211, 102, 0.35);
  box-shadow: 0 8px 25px rgba(37, 211, 102, 0.08);
}

/* TG Row styling */
.tg-row {
  background: rgba(34, 158, 217, 0.03);
  border-color: rgba(34, 158, 217, 0.12);
}

.tg-row .booking-row-icon {
  color: #229ed9;
}

.tg-row:hover {
  background: rgba(34, 158, 217, 0.08);
  border-color: rgba(34, 158, 217, 0.35);
  box-shadow: 0 8px 25px rgba(34, 158, 217, 0.08);
}

/* MAX Row styling */
.max-row {
  background: rgba(155, 89, 214, 0.03);
  border-color: rgba(155, 89, 214, 0.12);
}

.max-row .booking-row-icon {
  color: #9b59d6;
}

.max-row:hover {
  background: rgba(155, 89, 214, 0.08);
  border-color: rgba(155, 89, 214, 0.35);
  box-shadow: 0 8px 25px rgba(155, 89, 214, 0.08);
}


/* === ROUND 41 DEEP MOBILE INTEGRATION & THEME LOCK === */

/* Force hide theme toggle styles since element is removed */
.theme-toggle {
  display: none !important;
}

/* Base Viewport Overflow Guard */
html, body {
  max-width: 100vw;
  overflow-x: hidden;
}

/* Safe Area Inset Support for modern notch phones */
.sticky-mobile-cta {
  padding-bottom: calc(12px + env(safe-area-inset-bottom)) !important;
}

/* Header actions responsive layout */
@media (max-width: 576px) {
  .phone-text-desktop {
    display: none !important;
  }
  
  .header-phone-premium {
    padding: 0 !important;
    border-radius: 50% !important;
    width: 40px !important;
    height: 40px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-color: rgba(247, 178, 23, 0.3) !important;
    background: rgba(247, 178, 23, 0.05) !important;
  }
  
  .header-phone-premium i {
    font-size: 1.05rem !important;
    margin: 0 !important;
  }
  
  .header-actions {
    gap: 8px !important;
  }
  
  .header-tg-circle-btn {
    width: 40px !important;
    height: 40px !important;
    font-size: 1.15rem !important;
  }
}

/* Section sizing and general mobile layouts spacing */
@media (max-width: 1024px) {
  .section {
    padding: 44px 16px !important;
    margin: 18px auto !important;
    width: calc(100% - 24px) !important;
    box-sizing: border-box !important;
  }
  
  .section-title {
    font-size: 1.85rem !important;
    line-height: 1.25 !important;
    margin-bottom: 12px !important;
  }
  
  .section-tagline {
    font-size: 0.72rem !important;
    letter-spacing: 0.12em !important;
    margin-bottom: 6px !important;
  }
  
  .hero {
    padding-top: 130px !important;
    padding-bottom: 60px !important;
    min-height: auto !important;
  }
  
  .hero-title {
    font-size: clamp(2.1rem, 7.5vw, 3rem) !important;
    line-height: 1.15 !important;
    margin-bottom: 12px !important;
  }
  
  .hero-tagline {
    font-size: 0.8rem !important;
    margin-bottom: 16px !important;
  }
  
  /* Hero grid CTA buttons stacked for 100% tap targets on smartphones */
  .hero-cta-buttons {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
    width: 100% !important;
    max-width: 420px !important;
    margin: 0 auto !important;
    padding: 0 12px !important;
  }
  
  .hero-cta-buttons .btn {
    width: 100% !important;
    height: 54px !important;
    font-size: 0.88rem !important;
    border-radius: 50px !important;
  }
  
  .hero-cta-buttons .btn-max-cta-glass {
    height: 54px !important;
  }
  
  .hero-features-icons {
    gap: 16px !important;
    margin-top: 20px !important;
  }
  
  .feature-icon-item {
    font-size: 0.8rem !important;
  }
  
  /* Adjust Trust cards in hero for mobile */
  .hero-trust-cards {
    flex-direction: column !important;
    align-items: center !important;
    gap: 12px !important;
  }
  
  .trust-card {
    width: 100% !important;
    max-width: 320px !important;
    box-sizing: border-box !important;
  }
}

/* Service Details Popup Footer layout adjustment for mobile */
@media (max-width: 480px) {
  .sdm-sticky-footer-actions {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px !important;
    padding: 14px 16px 20px 16px !important;
  }
  
  .sdm-sticky-footer-actions .btn {
    padding: 12px 8px !important;
    font-size: 0.82rem !important;
    border-radius: 12px !important;
    height: 48px !important;
  }
}

/* === ROUND 47 DEPLOYWEB FOOTER CREDIT === */
.footer-dev-link:hover {
  color: var(--accent) !important;
}


/* === ROUND 49 COOKIES ACTIONS & MOBILE ALIGNMENT === */
.cookies-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

@media (max-width: 768px) {
  .cookies-actions {
    width: 100%;
    justify-content: center;
    gap: 10px;
    margin-top: 4px;
  }
}

/* Hide Top Bar on mobile devices to prevent header collision/overlapping */
@media (max-width: 768px) {
  .top-bar {
    display: none !important;
  }
  
  .header {
    top: 0 !important; /* Touch absolute top of browser window */
  }
  
  /* Reset hero top padding to account for hidden top-bar (saves 38px of space) */
  .hero-centered {
    min-height: auto !important; /* Allow layout to grow naturally without squeezing */
    padding-top: 105px !important;
    padding-bottom: 60px !important;
  }
  
  /* Mobile Cookies bottom sheet styling (covers bottom CTA, prevents clipping) */
  .cookies-banner {
    bottom: 0 !important;
    left: 0 !important;
    transform: translateX(-50%) translateY(100%) !important;
    width: 100% !important;
    max-width: 100% !important;
    border-radius: 24px 24px 0 0 !important;
    padding: 20px 24px calc(20px + env(safe-area-inset-bottom)) 24px !important;
    border-left: none !important;
    border-right: none !important;
    border-bottom: none !important;
    background: rgba(10, 14, 20, 0.98) !important;
    box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.6) !important;
    z-index: 3500 !important; /* Cover sticky bottom mobile CTA while active */
  }
  
  .cookies-banner.active {
    transform: translateX(-50%) translateY(0) !important;
  }
}

/* === ROUND 50 MOBILE VERSION DEEP REVAMP === */

/* Force hide the mobile sticky bottom bar */
#mobileStickyCta {
  display: none !important;
}

@media (max-width: 768px) {
  /* 1. Cookies Floating Card (prevents cutoffs and browser conflicts) */
  .cookies-banner {
    position: fixed !important;
    bottom: 20px !important;
    left: 16px !important;
    right: 16px !important;
    width: auto !important;
    max-width: none !important;
    transform: translateY(150%) !important;
    border-radius: 20px !important;
    padding: 16px 20px !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    background: rgba(10, 14, 20, 0.98) !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6) !important;
    z-index: 3500 !important;
  }
  .cookies-banner.active {
    transform: translateY(0) !important;
  }
  .cookies-container {
    flex-direction: column !important;
    text-align: center !important;
    gap: 12px !important;
  }
  .cookies-container p {
    font-size: 0.78rem !important;
    line-height: 1.4 !important;
    margin: 0 !important;
  }

  /* 2. Top-bar hide and header reset */
  .top-bar {
    display: none !important;
  }
  .header {
    top: 0 !important;
  }

  /* 3. Compact inline Hero Features (no more bulky vertical stacks) */
  .hero-features-icons {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 8px !important;
    margin-top: 16px !important;
    margin-bottom: 16px !important;
    width: 100% !important;
  }
  .feature-icon-item {
    background: rgba(255, 255, 255, 0.03) !important;
    border: 1px solid rgba(255, 255, 255, 0.05) !important;
    padding: 6px 12px !important;
    border-radius: 30px !important;
    display: inline-flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 6px !important;
    margin: 0 !important;
  }
  .feature-top-icon {
    width: 16px !important;
    height: 16px !important;
    min-width: 16px !important;
    font-size: 0.72rem !important;
    margin-bottom: 0 !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    color: var(--accent) !important;
  }
  .feature-info {
    text-align: left !important;
  }
  .feature-info strong {
    font-size: 0.68rem !important;
    font-weight: 800 !important;
    letter-spacing: 0.02em !important;
    display: inline-block !important;
    margin: 0 !important;
  }
  .feature-info span {
    display: none !important; /* Hide long description to save spaces */
  }

  /* 4. Perfectly even 3-column Trust Cards Row */
  .hero-trust-cards {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 8px !important;
    margin-top: 24px !important;
    max-width: 100% !important;
    padding: 0 10px !important;
  }
  .trust-card {
    padding: 12px 6px !important;
    border-radius: 16px !important;
    text-align: center !important;
  }
  .trust-card-header {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 2px !important;
    font-size: 0.52rem !important;
    margin-bottom: 6px !important;
    text-transform: uppercase !important;
    font-weight: 800 !important;
    letter-spacing: 0.05em !important;
  }
  .trust-card-header i {
    font-size: 0.8rem !important;
    margin: 0 !important;
  }
  .trust-card-body {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
  }
  .trust-card-body .stat-number {
    font-size: 1.1rem !important;
    font-weight: 800 !important;
    line-height: 1 !important;
    margin-bottom: 4px !important;
  }
  .trust-card-body strong {
    font-size: 0.6rem !important;
    line-height: 1.2 !important;
    color: var(--text-secondary) !important;
    font-weight: 700 !important;
    display: block !important;
    margin: 0 !important;
  }
  .trust-card-body span {
    display: none !important;
  }
  .stars-row {
    display: none !important; /* Hide stars for identical layouts */
  }

  /* 5. Un-squeezed Hero container paddings */
  .hero-centered {
    min-height: auto !important;
    padding-top: 110px !important;
    padding-bottom: 48px !important;
  }

  /* 6. Compact Philosophy grid & cards */
  .about-philosophy-card {
    padding: 24px 20px !important;
    border-radius: 20px !important;
  }
  .philosophy-header h2 {
    font-size: 1.5rem !important;
    margin-top: 8px !important;
    margin-bottom: 12px !important;
  }
  .philosophy-text {
    font-size: 0.85rem !important;
    line-height: 1.6 !important;
    margin-bottom: 16px !important;
  }
  .philosophy-signature {
    margin-top: 10px !important;
  }
  .about-luxury-card {
    padding: 16px 18px !important;
    gap: 16px !important;
    border-radius: 20px !important;
  }
  .luxury-card-num {
    font-size: 1.3rem !important;
  }
  .luxury-card-icon {
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
    font-size: 1rem !important;
  }
  .luxury-card-text h3 {
    font-size: 0.92rem !important;
    margin-bottom: 4px !important;
  }
  .luxury-card-text p {
    font-size: 0.8rem !important;
    line-height: 1.45 !important;
  }

  /* 7. Fully functional Services list and horizontal tab scrolling */
  .services-showcase-panel {
    display: none !important;
  }
  .services-dashboard {
    grid-template-columns: 1fr !important;
  }
  .services-list-panel {
    max-height: none !important;
  }
  .service-list-item {
    padding: 14px 18px !important;
    border-radius: 16px !important;
    margin-bottom: 8px !important;
  }
  .services-filters {
    display: flex !important;
    overflow-x: auto !important;
    white-space: nowrap !important;
    gap: 8px !important;
    padding-bottom: 10px !important;
    justify-content: flex-start !important;
    -webkit-overflow-scrolling: touch !important;
  }
  .filter-tab-btn {
    flex: 0 0 auto !important;
    padding: 8px 16px !important;
    font-size: 0.78rem !important;
  }

  /* 8. Super compact Workflow Process timeline */
  .process-timeline-new {
    gap: 16px !important;
    margin-top: 24px !important;
  }
  .timeline-line {
    left: 20px !important;
  }
  .timeline-node {
    width: 32px !important;
    height: 32px !important;
    font-size: 0.7rem !important;
    margin-left: 4px !important;
  }
  .timeline-card {
    margin-left: 16px !important;
    padding: 12px 16px !important;
    gap: 12px !important;
    border-radius: 16px !important;
  }
  .timeline-card .card-icon-box {
    width: 36px !important;
    height: 36px !important;
    border-radius: 8px !important;
    font-size: 0.95rem !important;
  }
  .timeline-card .card-text-side h3 {
    font-size: 0.9rem !important;
  }
  .timeline-card .card-text-side p {
    font-size: 0.78rem !important;
    line-height: 1.4 !important;
  }

  /* 9. Sleeker Marquee Reviews */
  .review-card {
    width: 290px !important;
    padding: 16px 20px !important;
    min-height: 240px !important;
  }
  .review-card p.review-text {
    font-size: 0.82rem !important;
    line-height: 1.45 !important;
    margin-bottom: 12px !important;
  }
  .review-card .user-info h4 {
    font-size: 0.85rem !important;
  }
  .review-card .user-info span {
    font-size: 0.72rem !important;
  }
}

/* Pause reviews marquee on tap/hold for better mobile reading experience */
.reviews-marquee:active .reviews-marquee-track {
  animation-play-state: paused !important;
}


/* === ROUND 51 MOBILE VERSION POLISH & FIXES === */
@media (max-width: 768px) {
  /* 1. Revamp Reviews to Swipeable Scroll-Snap Carousel (Instagram/AppStore style) */
  .reviews-marquee-container {
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scroll-snap-type: x mandatory !important;
    -webkit-overflow-scrolling: touch !important;
    padding: 10px 16px 20px 16px !important;
    margin: 0 !important;
    display: block !important;
  }
  .reviews-marquee-container::-webkit-scrollbar {
    display: none !important; /* Hide scrollbars for clean looks */
  }
  .reviews-marquee-track {
    display: flex !important;
    animation: none !important; /* Turn off slow marquee auto-scroll */
    gap: 16px !important;
    width: max-content !important;
  }
  .review-card {
    flex: 0 0 280px !important; /* Fixed slide width */
    scroll-snap-align: center !important; /* Snap to viewport center */
    min-height: auto !important;
    padding: 18px !important;
    border-radius: 20px !important;
    background: rgba(255, 255, 255, 0.02) !important;
    border: 1px solid rgba(255, 255, 255, 0.06) !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    margin: 0 !important;
  }
  .review-card p.review-text {
    font-size: 0.8rem !important;
    line-height: 1.4 !important;
    margin-bottom: 12px !important;
    flex-grow: 1 !important;
  }
  .review-image-wrapper {
    height: 110px !important;
    margin-bottom: 8px !important;
    border-radius: 12px !important;
    overflow: hidden !important;
  }

  /* 2. Fix webkit text-clip gradient icon blur rendering bug */
  .hero-centered .feature-top-icon {
    filter: none !important; /* Remove drop shadow that triggers browser pixelation/blur */
    -webkit-filter: none !important;
  }

  /* 3. Increase padding inside service details modal wrapper to prevent text collision/overlaps */
  .sdm-body-wrapper {
    padding-bottom: 160px !important; /* Provide ample room so description text is never covered by the double-row button grid! */
  }

  /* 4. Fix service list layout to prevent price overflows */
  .service-list-item {
    gap: 10px !important;
    padding: 14px 16px !important;
  }
  .item-details {
    flex: 1 !important;
    min-width: 0 !important; /* Enforces text wrapping, preventing width expansion */
  }
  .service-list-item h4 {
    font-size: 0.85rem !important;
    line-height: 1.3 !important;
    margin: 0 !important;
    word-break: normal !important; overflow-wrap: break-word !important;
  }
  .service-list-item span {
    font-size: 0.78rem !important;
    flex-shrink: 0 !important; /* Keeps price text intact without shrinking or wrapping */
  }
}


/* === ROUND 52 MOBILE POLISH & CACHE-BUSTING UPDATES === */
@media (max-width: 768px) {
  /* Crisp clear icons without webkit text gradient filter issues */
  .hero-centered .feature-top-icon {
    background: none !important;
    background-image: none !important;
    -webkit-background-clip: border-box !important;
    -webkit-text-fill-color: var(--accent) !important;
    color: var(--accent) !important;
    filter: none !important;
    -webkit-filter: none !important;
    box-shadow: none !important;
  }

  /* Prevent service list prices from wrapping or overflowing */
  .service-list-item {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    gap: 12px !important;
  }
  .item-details {
    flex: 1 !important;
    min-width: 0 !important; /* Forces title to wrap in its bounds */
  }
  .service-list-item h4 {
    font-size: 0.85rem !important;
    line-height: 1.3 !important;
    margin: 0 !important;
    word-break: normal !important; overflow-wrap: break-word !important;
  }
  .service-list-price {
    flex-shrink: 0 !important; /* Prevent price from shrinking */
    white-space: nowrap !important;
    font-size: 0.78rem !important;
    color: var(--accent) !important;
    font-weight: 700 !important;
    text-align: right !important;
  }

  /* Luxury review card visual overhaul (B&O style, clean elements) */
  .review-card {
    background: rgba(20, 24, 33, 0.95) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4) !important;
    padding: 20px !important;
    border-radius: 20px !important;
  }
  .review-card p.review-text {
    font-size: 0.82rem !important;
    line-height: 1.5 !important;
    color: var(--text-secondary) !important;
  }
  .review-image-wrapper img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    border-radius: 10px !important;
  }
  .rating-stars i {
    color: var(--accent) !important; /* Bright gold stars */
    font-size: 0.7rem !important;
  }
}


/* === ROUND 53 REVIEWS NAV & MAP POINT ALIGNMENTS === */

/* Prevent price text from wrapping under any circumstance */
.sdm-showcase-price {
  white-space: nowrap !important;
}

/* Reviews slider navigation buttons styling */
.reviews-carousel-nav {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  margin-bottom: 20px;
  padding-right: 10px;
}
.reviews-nav-btn {
  width: 42px;
  height: 42px;
  min-width: 42px;
  border-radius: 50% !important;
  display: flex !important;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.02) !important;
  border: 1px solid rgba(255, 255, 255, 0.06) !important;
  color: var(--text-secondary) !important;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  padding: 0 !important;
  font-size: 0.9rem !important;
}
.reviews-nav-btn:hover {
  border-color: var(--accent) !important;
  color: var(--accent) !important;
  background: rgba(247, 178, 23, 0.04) !important;
  box-shadow: 0 0 15px rgba(247, 178, 23, 0.15) !important;
}

/* Social QR caption styling */
.qr-help-caption {
  text-align: center;
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.25);
  margin-top: 20px;
  line-height: 1.5;
  width: 100%;
}
.qr-help-caption i {
  color: var(--accent);
  margin-right: 6px;
}

@media (max-width: 768px) {
  /* Center reviews nav buttons on mobile */
  .reviews-carousel-nav {
    justify-content: center !important;
    padding-right: 0 !important;
    margin-bottom: 16px !important;
    margin-top: -8px !important;
  }
  
  /* Reduce modal price block font sizes and paddings on mobile to avoid overflows */
  .sdm-showcase-price {
    font-size: 1.25rem !important;
  }
  .sdm-hero-overlay {
    padding: 14px 16px !important;
  }
  .sdm-luxury-badge {
    font-size: 0.58rem !important;
  }
  
  /* QR help text adjustments for mobile screens */
  .qr-help-caption {
    font-size: 0.76rem !important;
    padding: 0 10px !important;
    margin-top: 14px !important;
  }
}


/* === ROUND 55 MOBILE HERO ALIGNMENTS & CENTERING === */
@media (max-width: 768px) {
  /* Enforce clean vertical centering and spacing on Hero container */
  .hero-centered {
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
    text-align: center !important;
    padding-top: 110px !important;
    padding-bottom: 40px !important;
  }
  
  .hero-content-centered {
    width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
  }

  /* Center the main tagline subtitle */
  .hero-subtitle {
    text-align: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
    display: block !important;
    width: 100% !important;
  }

  /* Center features list vertically as a clean list of text tags */
  .hero-features-icons {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 12px !important;
    margin-top: 20px !important;
    margin-bottom: 20px !important;
    width: 100% !important;
  }
  .feature-icon-item {
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0 !important; /* Explicit margin spacing instead of flex gap for safety */
    margin: 0 !important;
    box-shadow: none !important;
    width: auto !important;
  }
  .feature-top-icon {
    font-size: 0.85rem !important;
    margin: 0 8px 0 0 !important; /* Enforces strict 8px gap between icon and title on mobile */
    padding: 0 !important;
  }
  .feature-info strong {
    font-size: 0.8rem !important;
    font-weight: 700 !important;
    color: var(--text-primary) !important;
  }

  /* Stack CTA buttons vertically with unified width and center alignment */
  .hero-cta-buttons {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 12px !important;
    width: 100% !important;
    margin: 0 auto !important;
  }
  .hero-cta-buttons .btn {
    width: 100% !important;
    max-width: 290px !important; /* Uniform centered width */
    margin: 0 auto !important;
    justify-content: center !important;
  }

  /* Enforce clean vertical margins and grid alignment for Trust Cards (95px height symmetry) */
  .hero-subtitle {
    margin-bottom: 12px !important;
  }
  .hero-title {
    margin-bottom: 16px !important;
  }
  .hero-features-icons {
    margin-bottom: 24px !important;
  }
  .hero-cta-buttons {
    margin-bottom: 32px !important;
  }
  /* Hide features capsules from mobile main screen to center focus on booking/calls */
  .hero-features-icons {
    display: none !important;
  }
  
  /* Stack animated trust credentials vertically with full labels and stars */
  .hero-trust-cards {
    display: grid !important;
    grid-template-columns: 1fr !important; /* Stack vertically for legibility */
    gap: 12px !important;
    margin-top: 10px !important;
    width: 100% !important;
    max-width: 310px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding: 0 !important;
  }
  .trust-card {
    height: auto !important;
    min-height: auto !important;
    display: flex !important;
    flex-direction: row !important; /* Horizontal layout */
    align-items: center !important;
    text-align: left !important;
    padding: 14px 18px !important;
    border-radius: 20px !important;
    background: var(--glass-bg) !important;
    border: 1px solid var(--border) !important;
    gap: 16px !important;
    box-shadow: none !important;
    backdrop-filter: blur(8px) !important;
    margin: 0 !important;
  }
  .trust-card-header {
    margin-bottom: 0 !important;
    font-size: 1.2rem !important;
    color: var(--accent) !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    width: 46px !important;
    height: 46px !important;
    min-width: 46px !important;
    border-radius: 50% !important;
    background: rgba(247, 178, 23, 0.05) !important;
  }
  .trust-card-header span {
    display: none !important; /* Hide tiny category label */
  }
  .trust-card-header i {
    font-size: 1.2rem !important;
    margin: 0 !important;
  }
  .trust-card-body {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 2px !important;
  }
  .trust-card-body .stat-number {
    font-size: 1.45rem !important; /* Clear readable anim numbers */
    font-weight: 900 !important;
    line-height: 1 !important;
    margin: 0 !important;
  }
  .trust-card-body strong {
    font-size: 0.82rem !important;
    color: var(--text-primary) !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
    display: block !important;
    margin: 0 !important;
  }
  .trust-card-body span {
    display: block !important; /* Show descriptions */
    font-size: 0.72rem !important;
    color: var(--text-secondary) !important;
    line-height: 1.2 !important;
    margin: 0 !important;
  }
  .stars-row {
    display: flex !important; /* Show rating stars */
    gap: 2px !important;
    margin: 2px 0 !important;
  }
  .stars-row i {
    font-size: 0.75rem !important;
    color: var(--accent) !important;
  }
}


/* === ROUND 58 REVIEWS OVERLAYS AND MOUNTING PILLS === */
@media (max-width: 768px) {
  /* Hide desktop gradient mask overlays that sit on top of the first/last cards and darken them */
  .reviews-marquee-container::before,
  .reviews-marquee-container::after {
    display: none !important;
  }
}

/* === PREMIUM CUSTOM GOLD MAP MARKER === */
.map-pulse-overlay {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -100%); /* Centers the bottom tip of the pin at coordinates */
  pointer-events: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  z-index: 5;
}
.map-marker-dot {
  width: 38px;
  height: 38px;
  background: var(--accent);
  border: 3px solid #ffffff;
  border-radius: 50% 50% 50% 0; /* Tear-drop map pin geometry */
  transform: rotate(-45deg);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 20px rgba(247, 178, 23, 0.4);
}
.map-marker-dot i {
  transform: rotate(45deg); /* Counter-rotate internal icon to stand upright */
  color: #ffffff;
  font-size: 0.95rem;
}
.map-sonar-ring {
  position: absolute;
  bottom: 0;
  width: 44px;
  height: 44px;
  border: 2px solid var(--accent);
  border-radius: 50%;
  animation: sonar-pulse 2s infinite ease-out;
  transform: scale(0.5);
  opacity: 0;
}
@keyframes sonar-pulse {
  0% {
    transform: scale(0.5);
    opacity: 0;
  }
  50% {
    opacity: 0.6;
  }
  100% {
    transform: scale(2.4);
    opacity: 0;
  }
}
body.light-theme .map-marker-dot {
  border-color: #ffffff;
  box-shadow: 0 4px 15px rgba(247, 178, 23, 0.3);
}


/* === ROUND 61 COMPLIANT COOKIES SETUP === */
.cookies-container {
  display: flex;
  flex-direction: column !important;
  align-items: stretch !important;
  gap: 12px !important;
}
.cookies-main-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  width: 100%;
}
@media (max-width: 768px) {
  .cookies-main-content {
    flex-direction: column;
    text-align: center;
    gap: 12px;
  }
}
.cookies-btn-decline {
  background: rgba(255, 255, 255, 0.03) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  color: var(--text-secondary) !important;
}
.cookies-btn-decline:hover {
  background: rgba(255, 255, 255, 0.08) !important;
  color: #ffffff !important;
}
.cookies-btn-settings {
  background: transparent !important;
  border: 1px solid transparent !important;
  color: var(--accent) !important;
}
.cookies-btn-settings:hover {
  text-decoration: underline !important;
}

body.light-theme .cookies-btn-decline {
  background: rgba(0, 0, 0, 0.02) !important;
  border-color: rgba(0, 0, 0, 0.08) !important;
  color: var(--text-secondary) !important;
}
body.light-theme .cookies-btn-decline:hover {
  background: rgba(0, 0, 0, 0.05) !important;
  color: var(--text-primary) !important;
}
body.light-theme .cookies-settings-panel {
  border-top-color: rgba(0, 0, 0, 0.08) !important;
}


/* === ROUND 62 MOBILE SECTIONS REORDERING === */
@media (max-width: 1024px) {
  /* Set mainContent to flex column to allow flex order layout shifts */
  #mainContent {
    display: flex !important;
    flex-direction: column !important;
  }
  
  /* Layout ordering:
     1. Hero Section (#heroSection)
     2. Services Catalog (#services)
     3. Video Clips (#clips)
     4. Philosophy / Art of Care (#philosophy)
     5. All other sections sequentially
  */
  #heroSection {
    order: 1 !important;
  }
  #services {
    order: 2 !important;
  }
  #before-after {
    order: 3 !important;
  }
  #gallery {
    order: 4 !important;
  }
  #philosophy {
    order: 5 !important;
  }
  #clips {
    order: 6 !important;
  }
  #process {
    order: 7 !important;
  }
  #faq {
    order: 8 !important;
  }
  #reviews {
    order: 9 !important;
  }
  #vk-promo {
    order: 10 !important;
  }
  #contacts {
    order: 11 !important;
  }
}

/* FAQ DETAILS STYLED LISTS & GRIDS (ROUND 64) */
.faq-details-list {
  list-style: none !important;
  padding: 0 36px 24px 36px !important;
  margin: -12px 0 0 0 !important;
  display: flex;
  flex-direction: column;
  gap: 10px;
  box-sizing: border-box;
}

.faq-details-list li {
  display: flex !important;
  align-items: flex-start !important;
  gap: 12px !important;
  color: var(--text-secondary) !important;
  font-size: 0.88rem !important;
  line-height: 1.5 !important;
}

.faq-details-list li i {
  margin-top: 3px !important;
  font-size: 0.85rem !important;
  color: var(--accent) !important;
  flex-shrink: 0;
}

.faq-details-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)) !important;
  gap: 10px 16px !important;
  margin: -12px 0 0 0 !important;
  padding: 0 36px 24px 36px !important;
  list-style: none !important;
  box-sizing: border-box;
}

.faq-details-grid li {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  color: var(--text-secondary) !important;
  font-size: 0.88rem !important;
  line-height: 1.4 !important;
}

.faq-details-grid li i {
  font-size: 0.8rem !important;
  color: var(--accent) !important;
  flex-shrink: 0;
}

@media (max-width: 576px) {
  .faq-details-grid {
    grid-template-columns: 1fr !important;
    gap: 8px !important;
  }
}

/* === BEFORE/AFTER SECTION === */
.before-after-section {
  position: relative;
  background: var(--bg-surface);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

body.light-theme .before-after-section {
  background: #f7f9fc !important;
}

.ba-slider-container {
  position: relative;
  max-width: 550px;
  margin: 0 auto;
  background: rgba(15, 20, 28, 0.4);
  border: 1px solid rgba(255, 255, 255, 0.04);
  border-radius: 28px;
  padding: 24px;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
  box-sizing: border-box;
}

body.light-theme .ba-slider-container {
  background: #ffffff !important;
  border: 1px solid rgba(18, 28, 44, 0.06) !important;
  box-shadow: 0 15px 35px rgba(18, 28, 44, 0.04) !important;
}

.ba-slide {
  display: none;
}

.ba-slide.active {
  display: block;
  animation: fadeIn 0.5s ease-in-out;
}

.ba-comparison-box {
  position: relative;
  width: 100%;
  aspect-ratio: 3 / 4;
  border-radius: 18px;
  overflow: hidden;
  user-select: none;
  border: 1px solid rgba(255, 255, 255, 0.05);
}

body.light-theme .ba-comparison-box {
  border-color: rgba(18, 28, 44, 0.08);
}

.ba-comparison-box img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  pointer-events: none;
}

.ba-image-after {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}

.ba-image-before {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
}

/* ДО/ПОСЛЕ Labels */
.ba-label {
  position: absolute;
  bottom: 20px;
  padding: 6px 14px;
  background: rgba(10, 15, 24, 0.85);
  backdrop-filter: blur(8px);
  color: #fff;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  border-radius: 8px;
  z-index: 5;
  pointer-events: none;
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.ba-label-before {
  left: 20px;
  border-left: 3px solid var(--accent);
}

.ba-label-after {
  right: 20px;
  border-right: 3px solid var(--accent);
}

/* Drag Slider Control overlay */
.ba-range-slider {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: ew-resize;
  z-index: 10;
  margin: 0;
}

/* Handle line and button marker */
.ba-handle {
  position: absolute;
  top: 0;
  height: 100%;
  width: 0;
  z-index: 6;
  pointer-events: none;
  transform: translateX(-50%);
}

.ba-handle-line {
  position: absolute;
  top: 0;
  left: 0;
  width: 2px;
  height: 100%;
  background: var(--accent);
  box-shadow: 0 0 10px rgba(247, 178, 23, 0.5);
}

.ba-handle-button {
  position: absolute;
  top: 50%;
  left: 0;
  transform: translate(-50%, -50%);
  width: 44px;
  height: 44px;
  background: var(--accent);
  color: #0b0f19;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.9rem;
  box-shadow: 0 0 15px rgba(247, 178, 23, 0.4);
  border: 4px solid #0b0f19;
}

body.light-theme .ba-handle-button {
  border-color: #ffffff;
}

/* Navigation controls display */
.ba-nav-controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 24px;
  gap: 20px;
}

.ba-nav-btn {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.05);
  color: #fff;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  transition: all 0.3s ease;
  flex-shrink: 0;
}

body.light-theme .ba-nav-btn {
  background: #ffffff;
  border-color: rgba(18, 28, 44, 0.08);
  color: #121c2c;
}

.ba-nav-btn:hover {
  background: var(--accent);
  border-color: var(--accent);
  color: #0b0f19;
  transform: scale(1.05);
  box-shadow: 0 0 15px rgba(247, 178, 23, 0.25);
}

.ba-meta-info {
  text-align: center;
  flex-grow: 1;
}

.ba-meta-info h3 {
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 700;
  margin-bottom: 6px;
  color: #fff;
}

body.light-theme .ba-meta-info h3 {
  color: #121c2c;
}

.ba-meta-info p {
  font-size: 0.88rem;
  color: var(--text-secondary);
  line-height: 1.5;
  max-width: 500px;
  margin: 0 auto;
}

@media (max-width: 768px) {
  .ba-comparison-box {
    aspect-ratio: 3 / 4;
  }
  .ba-meta-info h3 {
    font-size: 1.05rem;
  }
  .ba-meta-info p {
    font-size: 0.8rem;
  }
}

/* Mobile Before/After Slider Enhancements (Round 65) */
@media (max-width: 576px) {
  .ba-slider-container {
    padding: 12px !important;
    border-radius: 18px !important;
  }
  .ba-comparison-box {
    border-radius: 12px !important;
  }
  .ba-label {
    bottom: 12px !important;
    padding: 4px 8px !important;
    font-size: 0.65rem !important;
  }
  .ba-label-before {
    left: 12px !important;
  }
  .ba-label-after {
    right: 12px !important;
  }
  .ba-handle-button {
    width: 36px !important;
    height: 36px !important;
    font-size: 0.75rem !important;
    border-width: 3px !important;
  }
  .ba-nav-btn {
    width: 40px !important;
    height: 40px !important;
    font-size: 0.85rem !important;
  }
  .ba-meta-info h3 {
    font-size: 0.95rem !important;
  }
  .ba-meta-info p {
    font-size: 0.75rem !important;
    line-height: 1.4 !important;
  }
  .ba-nav-controls {
    margin-top: 16px !important;
    gap: 10px !important;
  }
}

/* Russian typography hyphenation & tiny viewports header fixes (Round 65) */
h1, h2, h3, h4, h5, h6, .section-title, .hero-title {
  overflow-wrap: break-word !important;
  word-wrap: break-word !important;
  hyphens: auto !important;
  -webkit-hyphens: auto !important;
  -ms-hyphens: auto !important;
}

@media (max-width: 390px) {
  .logo {
    font-size: 0.9rem !important;
    margin-right: 8px !important;
  }
  .header-logo-img {
    height: 30px !important;
    margin-right: 6px !important;
  }
  .header-actions {
    gap: 6px !important;
  }
  .header-phone-premium, .header-tg-circle-btn {
    width: 34px !important;
    height: 34px !important;
    font-size: 0.95rem !important;
  }
  .burger {
    width: 24px !important;
    height: 18px !important;
  }
}

/* Mobile Header Overrides and Burger Menu Removal (Round 66) */
@media (max-width: 1024px) {
  .burger {
    display: none !important;
  }
}

@media (max-width: 768px) {
  .header-container {
    padding: 0 16px !important;
  }
  
  .phone-text-desktop {
    display: none !important;
  }
  
  .header-phone-premium {
    padding: 0 !important;
    border-radius: 50% !important;
    width: 40px !important;
    height: 40px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-color: rgba(247, 178, 23, 0.3) !important;
    background: rgba(247, 178, 23, 0.05) !important;
  }
  
  .header-phone-premium i {
    font-size: 1.05rem !important;
    margin: 0 !important;
  }
  
  .header-actions {
    gap: 8px !important;
  }
  
  .header-tg-circle-btn {
    width: 40px !important;
    height: 40px !important;
    font-size: 1.15rem !important;
  }

  /* Services list layout optimization for mobile (Round 67) */
  .service-list-item {
    display: grid !important;
    grid-template-areas: 
      "icon title"
      "icon price" !important;
    grid-template-columns: auto 1fr !important;
    align-items: center !important;
    gap: 4px 14px !important;
    padding: 12px 16px !important;
  }
  
  .item-icon-box {
    grid-area: icon !important;
  }
  
  .item-details {
    grid-area: title !important;
    flex: none !important;
    min-width: 0 !important;
    padding-right: 0 !important;
  }
  
  .service-list-item h4 {
    font-size: 0.88rem !important;
    line-height: 1.35 !important;
    margin: 0 !important;
    word-break: normal !important;
    overflow-wrap: break-word !important;
  }
  
  .service-list-price {
    grid-area: price !important;
    text-align: left !important;
    margin-top: 2px !important;
    font-size: 0.8rem !important;
    font-weight: 700 !important;
    color: var(--accent) !important;
    display: block !important;
    width: fit-content !important;
    white-space: nowrap !important;
  }
}

@media (max-width: 390px) {
  .header-phone-premium, .header-tg-circle-btn {
    width: 34px !important;
    height: 34px !important;
    font-size: 0.95rem !important;
  }
}

/* Gallery Slider Styles (Round 68) */
.gallery-slider-wrapper {
  position: relative;
  width: 100%;
}

.gallery-slider-container {
  width: 100%;
}

.gallery-nav-btn {
  display: none;
}

/* Tabs for Mobile Cases (Round 68) */
.gallery-tabs-container {
  display: none;
}

@media (max-width: 768px) {
  .gallery-tabs-container {
    display: flex !important;
    gap: 8px !important;
    overflow-x: auto !important;
    padding: 10px 0 16px 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    scrollbar-width: none !important;
    -webkit-overflow-scrolling: touch !important;
  }
  
  .gallery-tabs-container::-webkit-scrollbar {
    display: none !important;
  }
  
  .gallery-tab {
    background: rgba(255, 255, 255, 0.03) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    color: var(--text-secondary) !important;
    padding: 8px 16px !important;
    border-radius: 20px !important;
    font-size: 0.82rem !important;
    font-family: var(--font-body) !important;
    font-weight: 600 !important;
    white-space: nowrap !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
  }
  
  .gallery-tab.active {
    background: var(--accent) !important;
    color: #000 !important;
    border-color: var(--accent) !important;
    box-shadow: 0 0 15px rgba(var(--accent-rgb), 0.3) !important;
  }
  
  body.light-theme .gallery-tab {
    background: rgba(0, 0, 0, 0.03) !important;
    border-color: rgba(0, 0, 0, 0.08) !important;
    color: var(--text-secondary) !important;
  }
  
  body.light-theme .gallery-tab.active {
    background: var(--accent) !important;
    color: #fff !important;
    border-color: var(--accent) !important;
  }

  #gallery {
    overflow: visible !important;
  }
  
  #gallery > .container {
    padding: 0 24px !important;
    width: 100% !important;
    max-width: 1200px !important;
  }
  
  #gallery .section-header {
    padding: 0 !important;
  }

  .gallery-slider-wrapper {
    position: relative !important;
    margin: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    overflow: visible !important;
  }
  
  .gallery-slider-container {
    overflow: visible !important;
    width: 100% !important;
    padding: 10px 0 !important;
    box-sizing: border-box !important;
  }
  
  .gallery-grid {
    display: block !important;
    width: 100% !important;
    margin-top: 0 !important;
    transform: none !important;
    transition: none !important;
  }
  
  .gallery-card {
    display: none !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    box-sizing: border-box !important;
  }
  
  .gallery-card.active-case {
    display: block !important;
  }
  
  .gallery-img-wrapper {
    aspect-ratio: 16 / 10 !important;
    width: 100% !important;
  }
  
  .gallery-info {
    padding: 20px !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
  }
  
  .gallery-info h4 {
    font-size: 1.3rem !important;
    margin-bottom: 6px !important;
  }
  
  .case-subtitle {
    font-size: 0.8rem !important;
    white-space: normal !important;
    word-wrap: break-word !important;
    display: block !important;
  }
  
  .case-desc {
    font-size: 0.86rem !important;
    line-height: 1.5 !important;
    margin-bottom: 16px !important;
    white-space: normal !important;
    word-wrap: break-word !important;
  }
  
  .case-meta-details {
    padding-top: 16px !important;
    gap: 24px !important;
  }
  
  .case-meta-details .meta-item {
    gap: 2px !important;
  }
  
  .case-meta-details .meta-val {
    font-size: 1.1rem !important;
  }
  
  .gallery-nav-btn {
    display: flex !important;
    position: absolute !important;
    top: 90px !important;
    transform: translateY(-50%) !important;
    width: 40px !important;
    height: 40px !important;
    border-radius: 50% !important;
    background: rgba(7, 10, 15, 0.9) !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    color: var(--text-primary) !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    z-index: 10 !important;
    transition: all 0.3s ease !important;
  }
  
  .gallery-nav-btn:hover {
    background: var(--accent) !important;
    color: #000 !important;
    border-color: var(--accent) !important;
  }
  
  .gallery-nav-btn.prev {
    left: 8px !important;
  }
  
  .gallery-nav-btn.next {
    right: 8px !important;
  }
  
  .case-badge-live {
    display: none !important;
  }
  
  .header-tg-circle-btn {
    display: none !important;
  }
  
  .logo {
    font-size: 1.15rem !important;
    margin-right: 0 !important;
    flex-shrink: 1 !important;
    white-space: nowrap !important;
  }
  
  .header-logo-img {
    height: 28px !important;
    margin-right: 8px !important;
  }
  
  .header-phone-premium {
    width: 40px !important;
    height: 40px !important;
    flex-shrink: 0 !important;
  }
  
  @media (max-width: 380px) {
    .logo {
      font-size: 1.0rem !important;
    }
    .header-logo-img {
      height: 24px !important;
      margin-right: 6px !important;
    }
  }
}


/* ==========================================
   Premium Modal Lists & Spacing Overrides
   ========================================== */
.sdm-rich-body {
  font-size: 0.96rem;
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.85);
}

body.light-theme .sdm-rich-body {
  color: #2c3e50;
}

.sdm-rich-body p {
  margin-top: 0;
  margin-bottom: 16px;
  line-height: 1.7;
}

.sdm-rich-body h4 {
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #ffffff;
  margin-top: 32px;
  margin-bottom: 18px;
  border-left: 3px solid var(--accent);
  padding-left: 12px;
  line-height: 1.3;
}

body.light-theme .sdm-rich-body h4 {
  color: #121c2c;
}

.sdm-rich-body ul, 
.sdm-rich-body ol {
  list-style: none;
  padding-left: 0;
  margin: 20px 0;
}

.sdm-rich-body li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding-left: 0;
  margin-bottom: 12px;
}

.sdm-li-marker {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  min-width: 24px;
  font-size: 1.1rem;
  line-height: 1.2;
  text-align: center;
}

.sdm-li-marker.sdm-li-dot {
  color: var(--accent);
  font-size: 1.4rem;
  line-height: 0.8;
}

.sdm-li-text {
  flex: 1;
  font-size: 0.94rem;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.85);
}

body.light-theme .sdm-li-text {
  color: #2c3e50;
}

/* Fix emoji renderings on Windows */
.sdm-li-marker img {
  display: inline-block;
  vertical-align: middle;
  height: 1.2em;
  width: 1.2em;
}