/*
Theme Name: Vizza Lights Theme
Theme URI: https://vizzalights.com/
Author: Vizza Lights
Author URI: https://vizzalights.com/
Description: Official custom WordPress theme for Vizza Lights - Permanent Outdoor, Accent, and Holiday Lighting.
Version: 1.0.0
Text Domain: vizzalights-theme
*/

/* ==========================================================================
   1. LOCAL FONT DECLARATIONS (Mulish Font Family)
   ========================================================================== */
@font-face {
  font-family: 'Mulish';
  src: url('./fonts/Mulish-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Mulish';
  src: url('./fonts/Mulish-Medium.ttf') format('truetype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Mulish';
  src: url('./fonts/Mulish-SemiBold.ttf') format('truetype');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Mulish';
  src: url('./fonts/Mulish-Bold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Mulish';
  src: url('./fonts/Mulish-Variable.ttf') format('truetype-variations');
  font-weight: 300 900;
  font-style: normal;
  font-display: swap;
}

/* ==========================================================================
   2. DESIGN SYSTEM & TOKENS (Brand Specification Palette)
   ========================================================================== */
:root {
  --vizza-orange: #FDA001;
  --vizza-orange-hover: #E08D00;
  --field-black: #02040C;
  --ink: #0A0D14;
  --surface-card: rgba(15, 23, 42, 0.65);
  --surface-card-hover: rgba(26, 38, 66, 0.75);
  --surface-border: rgba(255, 255, 255, 0.08);
  --surface-border-active: rgba(253, 160, 1, 0.4);
  --white: #FFFFFF;
  --text-muted: #94A3B8;
  --text-dark: #64748B;
  --orange-glow: 0 0 35px rgba(253, 160, 1, 0.45);
  --orange-glow-sm: 0 0 15px rgba(253, 160, 1, 0.3);
  --font-main: 'Mulish', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --radius-lg: 24px;
  --radius-md: 16px;
  --radius-sm: 10px;
  --header-height: 105px;
}

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

html {
  scroll-behavior: smooth;
  font-family: var(--font-main);
  background-color: var(--field-black);
  color: var(--white);
  line-height: 1.6;
  margin: 0 !important;
  padding: 0 !important;
  top: 0 !important;
}

body.vizza-dark-theme {
  background-color: var(--field-black);
  color: var(--white);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  margin: 0 !important;
  padding: 0 !important;
  top: 0 !important;
}

#wpadminbar {
  display: none !important;
}

a {
  color: inherit;
  text-decoration: none;
  transition: all 0.25s ease;
}

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

.vizza-container {
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 24px;
}

/* ==========================================================================
   3. STICKY APPLE-STYLE HEADER & LOGO LOCKUP
   ========================================================================== */
.vizza-site-header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: var(--header-height);
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-bottom: 1px solid transparent;
  box-shadow: none;
  z-index: 1000;
  display: flex;
  align-items: center;
  transition: background 0.35s cubic-bezier(0.16, 1, 0.3, 1), 
              border-color 0.35s cubic-bezier(0.16, 1, 0.3, 1), 
              backdrop-filter 0.35s ease, 
              box-shadow 0.35s ease;
}

.vizza-site-header.scrolled {
  background: rgba(5, 7, 12, 0.88);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6);
}

.vizza-header-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 24px;
}

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

/* VizzaLights Logo Lockup */
.vizza-brand-logo {
  display: flex;
  align-items: center;
  gap: 14px;
}

.vizza-logo-img {
  height: 78px;
  width: auto;
  object-fit: contain;
  display: block;
  transition: transform 0.3s ease;
}

.vizza-brand-logo:hover .vizza-logo-img {
  transform: scale(1.04);
}

.vizza-footer-brand-logo {
  display: inline-block;
  margin-bottom: 20px;
}

.vizza-footer-logo-img {
  height: 72px;
  width: auto;
  object-fit: contain;
  display: block;
}

.vizza-tagline-text {
  font-size: 9px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1.4px;
  color: var(--text-muted);
  margin-top: 3px;
}

/* Nav Menu Links */
.vizza-nav-menu {
  display: flex;
  align-items: center;
  gap: 36px;
}

.vizza-nav-link {
  font-size: 16px;
  font-weight: 700;
  color: #FFFFFF;
  transition: color 0.2s ease;
}

.vizza-nav-link:hover {
  color: var(--vizza-amber);
}

/* Primary Buttons with PermaLights Color-Changing Wave Hover */
.vizza-btn-primary {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: var(--vizza-orange);
  color: #000000;
  font-weight: 800;
  font-size: 14px;
  padding: 12px 26px;
  border-radius: 100px;
  border: none;
  cursor: pointer;
  z-index: 1;
  overflow: hidden;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  text-decoration: none;
}

.vizza-btn-primary::before {
  content: '';
  position: absolute;
  top: -3px;
  left: -3px;
  right: -3px;
  bottom: -3px;
  background: linear-gradient(
    90deg, 
    #FDA001 0%, 
    #EF4444 20%, 
    #8B5CF6 40%, 
    #06B6D4 60%, 
    #10B981 80%, 
    #FDA001 100%
  );
  background-size: 300% 100%;
  border-radius: inherit;
  z-index: -2;
  opacity: 0;
  transition: opacity 0.3s ease;
  animation: permaLightWave 0.8s linear infinite;
}

.vizza-btn-primary::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--vizza-orange);
  border-radius: inherit;
  z-index: -1;
  transition: background 0.3s ease;
}

.vizza-btn-primary:hover::before {
  opacity: 1;
}

.vizza-btn-primary:hover::after {
  background: #FFAF26;
}

.vizza-btn-primary:hover {
  transform: translateY(-2px) scale(1.02);
  box-shadow: 0 0 25px rgba(253, 160, 1, 0.6), 0 0 15px rgba(6, 182, 212, 0.4);
}

@keyframes permaLightWave {
  0% {
    background-position: 0% 50%;
  }
  100% {
    background-position: 300% 50%;
  }
}

.vizza-btn-glass {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: rgba(255, 255, 255, 0.06);
  color: var(--white);
  font-weight: 600;
  font-size: 14px;
  padding: 12px 24px;
  border-radius: 100px;
  border: 1px solid var(--surface-border);
  transition: all 0.3s ease;
}

.vizza-btn-glass:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.2);
}

.vizza-btn-lg {
  padding: 16px 32px;
  font-size: 16px;
}

/* Hamburger */
.vizza-hamburger {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 40px;
  height: 40px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 12px;
  cursor: pointer;
  padding: 0;
  gap: 5px;
  transition: all 0.25s ease;
  z-index: 1000;
}

.vizza-hamburger:hover,
.vizza-hamburger.active {
  background: rgba(253, 160, 1, 0.15);
  border-color: rgba(253, 160, 1, 0.4);
}

.vizza-hamburger span {
  display: block;
  width: 20px;
  height: 2px;
  background: #FFFFFF;
  border-radius: 2px;
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.2s ease, background 0.2s ease;
}

.vizza-hamburger.active span:first-child {
  transform: translateY(3.5px) rotate(45deg);
  background: #FDA001;
}

.vizza-hamburger.active span:last-child {
  transform: translateY(-3.5px) rotate(-45deg);
  background: #FDA001;
}

/* Mobile Sidebar Backdrop Overlay */
.vizza-mobile-drawer-overlay {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(0, 0, 0, 0.82);
  z-index: 99998;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.3s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.3s ease;
  will-change: opacity;
  transform: translateZ(0);
}

.vizza-mobile-drawer-overlay.open {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
}

/* Mobile Sidebar Drawer (Off-Canvas Luxury Sheet) */
.vizza-mobile-drawer {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: 86%;
  max-width: 360px;
  height: 100vh;
  height: 100dvh;
  background: #080B12;
  border-left: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: -15px 0 40px rgba(0, 0, 0, 0.9);
  z-index: 99999;
  transform: translateX(105%) translateZ(0);
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.35s ease;
  will-change: transform;
  display: flex !important;
  flex-direction: column;
  box-sizing: border-box;
  overflow-y: auto;
  overflow-x: hidden;
  visibility: hidden;
}

.vizza-mobile-drawer.open {
  transform: translateX(0) translateZ(0) !important;
  visibility: visible !important;
}

.vizza-drawer-inner {
  display: flex;
  flex-direction: column;
  min-height: 100%;
  padding: 24px 20px;
  box-sizing: border-box;
  justify-content: space-between;
  gap: 16px;
}

/* Drawer Header */
.vizza-drawer-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.vizza-drawer-logo {
  height: 38px;
  width: auto;
  object-fit: contain;
}

.vizza-drawer-close-btn {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: #E2E8F0;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s ease;
}

.vizza-drawer-close-btn:hover {
  background: rgba(253, 160, 1, 0.2);
  border-color: #FDA001;
  color: #FDA001;
  transform: rotate(90deg);
}

/* Drawer Status Badge */
.vizza-drawer-status {
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(253, 160, 1, 0.08);
  border: 1px solid rgba(253, 160, 1, 0.2);
  padding: 8px 14px;
  border-radius: 100px;
  font-size: 11px;
  font-weight: 700;
  color: #FDA001;
  letter-spacing: 0.3px;
}

.vizza-status-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #10B981;
  box-shadow: 0 0 10px #10B981;
  animation: vizzaPulseDot 2s infinite;
}

@keyframes vizzaPulseDot {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.4; transform: scale(0.85); }
}

/* Drawer Navigation */
.vizza-drawer-nav {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1;
}

.vizza-drawer-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 13px 16px;
  border-radius: 14px;
  text-decoration: none;
  color: #F1F5F9;
  font-size: 14.5px;
  font-weight: 700;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.05);
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.v-item-num {
  font-size: 11px;
  font-weight: 800;
  color: #FDA001;
  opacity: 0.75;
  margin-right: 12px;
  font-family: monospace;
}

.v-item-text {
  flex: 1;
}

.v-item-arrow {
  color: #64748B;
  transition: transform 0.2s ease, color 0.2s ease;
}

.vizza-drawer-item:hover,
.vizza-drawer-item:active {
  background: rgba(253, 160, 1, 0.1);
  border-color: rgba(253, 160, 1, 0.3);
  color: #FFFFFF;
  transform: translateX(4px);
}

.vizza-drawer-item:hover .v-item-arrow,
.vizza-drawer-item:active .v-item-arrow {
  color: #FDA001;
  transform: translateX(3px);
}

/* Drawer Footer & Quick Contact Card */
.vizza-drawer-footer {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-top: 14px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.vizza-drawer-contact-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  text-decoration: none;
  transition: all 0.2s ease;
}

.vizza-drawer-contact-card:hover {
  background: rgba(255, 255, 255, 0.07);
  border-color: rgba(253, 160, 1, 0.3);
}

.v-card-icon {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: rgba(253, 160, 1, 0.15);
  color: #FDA001;
  display: flex;
  align-items: center;
  justify-content: center;
}

.v-card-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.v-card-label {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: #94A3B8;
}

.v-card-phone {
  font-size: 13.5px;
  font-weight: 800;
  color: #FFFFFF;
}

.vizza-drawer-cta-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 13px 20px;
  border-radius: 14px;
  font-size: 14px;
  font-weight: 800;
  text-decoration: none;
  box-sizing: border-box;
}

.vizza-drawer-social {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding-top: 4px;
}

.vizza-drawer-social a {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #94A3B8;
  transition: all 0.2s ease;
  text-decoration: none;
}

.vizza-drawer-social a:hover {
  background: rgba(253, 160, 1, 0.15);
  border-color: #FDA001;
  color: #FDA001;
  transform: translateY(-2px);
}

/* ==========================================================================
   4. HERO SECTION STYLING (FULL-BLEED 3D CAD VIDEO BACKGROUND + BOTTOM-LEFT CONTENT)
   ========================================================================== */
.vizza-hero-full-bleed {
  position: relative;
  width: 100%;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  padding-top: calc(var(--header-height) + 20px);
  padding-bottom: 50px;
  overflow: hidden;
  background: #05070B;
}

.vizza-hero-video-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}

.vizza-hero-video-bg video.vizza-hero-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
  transition: opacity 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

.vizza-hero-vignette {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    180deg, 
    rgba(5, 7, 11, 0.4) 0%, 
    rgba(5, 7, 11, 0.2) 40%, 
    rgba(5, 7, 11, 0.95) 95%
  ), radial-gradient(
    circle at 20% 80%,
    rgba(5, 7, 11, 0.9) 0%,
    rgba(5, 7, 11, 0.45) 50%,
    transparent 100%
  );
  z-index: 2;
  pointer-events: none;
}

.vizza-hero-full-container {
  position: relative;
  z-index: 10;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 32px;
  width: 100%;
  max-width: 1340px;
  margin: 0 auto;
  padding: 0 48px;
  box-sizing: border-box;
}

.vizza-hero-bottom-left {
  max-width: 640px;
  text-align: left;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.vizza-hero-bottom-left .vizza-hero-title {
  font-size: 58px;
  font-weight: 900;
  line-height: 1.08;
  letter-spacing: -1.5px;
  margin-bottom: 16px;
  text-shadow: 0 4px 20px rgba(0, 0, 0, 0.8);
}

.vizza-text-amber,
.bold-highlight,
.service-highlight,
.contact-title-highlight,
.about-highlight,
.reviews-highlight {
  color: #c98824 !important;
  opacity: 0.5;
  display: inline-block;
  font-weight: inherit;
  text-shadow: none;
  filter: none;
  transition: 
    color 1.8s cubic-bezier(0.22, 1, 0.36, 1),
    opacity 1.8s cubic-bezier(0.22, 1, 0.36, 1),
    text-shadow 1.8s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: opacity, text-shadow, color;
}

.vizza-text-amber.vizza-lit-glow,
.bold-highlight.vizza-lit-glow,
.service-highlight.vizza-lit-glow,
.contact-title-highlight.vizza-lit-glow,
.about-highlight.vizza-lit-glow,
.reviews-highlight.vizza-lit-glow {
  color: #FDA001 !important;
  opacity: 1 !important;
  text-shadow: 
    0 0 14px rgba(253, 160, 1, 0.45),
    0 0 28px rgba(253, 160, 1, 0.18) !important;
}

/* Clean Static Apple Gold Gradient on Key Header Words */
.vizza-text-gradient {
  background: linear-gradient(135deg, #FFFFFF 30%, #FDA001 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  display: inline;
}

.vizza-hero-subtitle {
  font-size: 18px;
  color: #E2E8F0;
  line-height: 1.5;
  margin-bottom: 28px;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.8);
  font-weight: 500;
}

.vizza-hero-bottom-left .vizza-hero-actions {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 0;
  flex-wrap: wrap;
}

.vizza-hero-scene-controller {
  background: rgba(10, 14, 23, 0.75);
  backdrop-filter: blur(28px);
  -webkit-backdrop-filter: blur(28px);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 100px;
  padding: 8px 16px;
  display: flex;
  align-items: center;
  gap: 14px;
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.8), inset 0 1px 0 rgba(255, 255, 255, 0.15);
  margin-bottom: 10px;
}

.vizza-hero-scene-controller .pill-bar-title {
  font-size: 11px;
  font-weight: 800;
  color: var(--vizza-amber);
  letter-spacing: 1px;
  text-transform: uppercase;
  white-space: nowrap;
  padding-left: 6px;
}

.vizza-hero-scene-controller .pill-bar-buttons {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: nowrap;
}

@media (max-width: 1024px) {
  .vizza-hero-full-container {
    flex-direction: column;
    align-items: flex-start;
    padding: 0 24px;
  }
  .vizza-hero-bottom-left .vizza-hero-title {
    font-size: 38px;
  }
  .vizza-hero-scene-controller {
    width: 100%;
    overflow-x: auto;
    border-radius: 20px;
  }
}

.vizza-hero-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.vizza-day-img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.5s ease;
  pointer-events: none;
}

.vizza-lighting-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  transition: all 0.5s ease;
  box-shadow: inset 0 0 90px rgba(253, 160, 1, 0.55), 0 0 120px rgba(253, 160, 1, 0.55);
}

/* Video Control (Play/Pause Bottom Right) */
.vizza-video-control {
  position: absolute;
  bottom: 24px;
  right: 24px;
  background: rgba(2, 4, 12, 0.75);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid var(--surface-border);
  color: var(--white);
  padding: 8px 16px;
  border-radius: 100px;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  z-index: 20;
  display: flex;
  align-items: center;
  gap: 8px;
  transition: all 0.25s ease;
}

.vizza-video-control:hover {
  background: rgba(253, 160, 1, 0.2);
  border-color: var(--vizza-orange);
  color: var(--vizza-orange);
}

.vctrl-icon {
  font-size: 10px;
  letter-spacing: -1px;
}

/* Floating Apple Glass Pill Interactive Lighting Controller (Bottom Center) */
.vizza-floating-pill-bar {
  position: absolute;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(2, 4, 12, 0.85);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  padding: 10px 20px;
  border-radius: 100px;
  border: 1px solid var(--surface-border);
  display: flex;
  align-items: center;
  gap: 14px;
  max-width: 90%;
  flex-wrap: wrap;
  justify-content: center;
  z-index: 20;
  box-shadow: 0 15px 35px rgba(0,0,0,0.6);
}

.pill-bar-title {
  font-size: 10px;
  font-weight: 800;
  color: var(--text-muted);
  letter-spacing: 1.2px;
}

.pill-bar-buttons {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.sim-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--surface-border);
  color: var(--text-muted);
  font-size: 12px;
  font-weight: 600;
  padding: 6px 14px;
  border-radius: 100px;
  cursor: pointer;
  transition: all 0.25s ease;
}

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

.sim-btn.active, .sim-btn:hover {
  background: rgba(255, 255, 255, 0.15);
  color: var(--white);
  border-color: var(--vizza-orange);
}

/* 3D CAD Remote Controller Scene Pills */
.scene-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 9px 18px;
  border-radius: 30px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.75);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  font-family: inherit;
}

.scene-btn:hover {
  background: rgba(255, 255, 255, 0.12);
  color: #FFFFFF;
  border-color: rgba(255, 255, 255, 0.25);
  transform: translateY(-1px);
}

.scene-btn.active {
  background: #FDA001;
  color: #000000 !important;
  border-color: #FDA001;
  font-weight: 800;
  box-shadow: 0 4px 20px rgba(253, 160, 1, 0.5);
  transform: scale(1.03);
}

.preset-btn.active, .preset-btn:hover {
  background: rgba(255, 255, 255, 0.15);
  border-color: var(--vizza-orange);
}

.preset-btn .dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
}

/* ==========================================================================
   5. BENCHMARK & BENTO GRID SECTION
   ========================================================================== */
.vizza-section {
  padding: 100px 0;
  position: relative;
}

.vizza-section-header {
  text-align: center;
  max-width: 800px;
  margin: 0 auto 60px;
}

.vizza-eyebrow {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 2px;
  color: var(--vizza-orange);
  text-transform: uppercase;
  margin-bottom: 12px;
  display: block;
}

.vizza-section-title {
  font-size: 48px;
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -1px;
  margin-bottom: 20px;
}

.vizza-section-desc {
  font-size: 18px;
  color: var(--text-muted);
}

/* ==========================================================================
   SECTION 4: THE VIZZA ADVANTAGE (APPLE PRO COMMAND CONSOLE)
   ========================================================================== */
.vizza-adv-console {
  display: grid;
  grid-template-columns: 380px 1fr;
  gap: 32px;
  margin-top: 48px;
  align-items: stretch;
}

.vizza-adv-nav {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.adv-nav-item {
  position: relative;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 18px 20px;
  background: rgba(11, 14, 23, 0.65);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 20px;
  text-align: left;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  overflow: hidden;
}

.adv-nav-item:hover {
  background: rgba(18, 24, 38, 0.85);
  border-color: rgba(255, 255, 255, 0.2);
  transform: translateX(4px);
}

.adv-nav-item.active {
  background: rgba(253, 160, 1, 0.08);
  border-color: rgba(253, 160, 1, 0.4);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(253, 160, 1, 0.2);
}

.adv-nav-icon {
  width: 42px;
  height: 42px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: #94A3B8;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: all 0.3s ease;
}

.adv-nav-item:hover .adv-nav-icon {
  color: #FFFFFF;
  border-color: rgba(255, 255, 255, 0.25);
}

.adv-nav-item.active .adv-nav-icon {
  background: #FDA001;
  color: #000000;
  border-color: #FDA001;
  box-shadow: 0 4px 15px rgba(253, 160, 1, 0.4);
}

.adv-nav-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.adv-nav-title {
  font-size: 14px;
  font-weight: 800;
  color: #FFFFFF;
  line-height: 1.25;
}

.adv-nav-sub {
  font-size: 12px;
  font-weight: 600;
  color: #94A3B8;
}

.adv-active-beam {
  position: absolute;
  left: 6px;
  top: 12px;
  bottom: 12px;
  width: 4px;
  border-radius: 4px;
  background: #FDA001;
  box-shadow: 0 0 10px rgba(253, 160, 1, 0.8);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.adv-nav-item.active .adv-active-beam {
  opacity: 1;
}

/* Mobile-Only Dropdown Pill Elements (Strictly Hidden on Desktop) */
.vizza-occ-mobile-dropdown-pill,
.vizza-adv-mobile-dropdown-pill {
  display: none !important;
}

/* Interactive Switcher Button Children Pointer-Events Reset */
.adv-nav-item *,
.occ-tab-btn *,
.vm-angle-btn *,
.vm-time-btn *,
.hotspot-btn *,
.vizza-service-pill *,
.scene-btn * {
  pointer-events: none;
}

/* Right Feature Display Spotlight Panel (Full Cover Background Image Container) */
.vizza-adv-display {
  position: relative;
  background: #0B0E17;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 28px;
  padding: 0;
  overflow: hidden;
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.85);
  min-height: 480px;
}

.adv-panel-card {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: none;
  flex-direction: column;
  justify-content: flex-end;
  animation: panelFadeIn 0.45s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.adv-panel-card.active {
  display: flex;
}

@keyframes panelFadeIn {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.adv-panel-img-box {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  overflow: hidden;
}

.adv-panel-img-box img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.adv-panel-vignette {
  position: absolute;
  inset: 0;
  z-index: 2;
  background: linear-gradient(
    to top,
    rgba(5, 7, 11, 0.82) 0%,
    rgba(5, 7, 11, 0.35) 45%,
    rgba(5, 7, 11, 0.05) 100%
  );
  pointer-events: none;
}

.adv-panel-content {
  position: relative;
  z-index: 5;
  padding: 48px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.adv-panel-headline {
  font-size: 32px;
  font-weight: 900;
  color: #FFFFFF;
  line-height: 1.2;
  letter-spacing: -0.8px;
  margin: 0;
  text-shadow: 0 4px 20px rgba(0, 0, 0, 0.9);
}

.adv-panel-body {
  font-size: 16px;
  color: #E2E8F0;
  line-height: 1.6;
  margin: 0;
  max-width: 620px;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.9);
}

.adv-panel-stats {
  display: flex;
  gap: 36px;
  margin-top: 8px;
  padding-top: 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.15);
}

.adv-stat-box {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.adv-stat-box .stat-val {
  font-size: 26px;
  font-weight: 900;
  color: #FDA001;
  line-height: 1;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.9);
}

.adv-stat-box .stat-lbl {
  font-size: 12px;
  font-weight: 700;
  color: #CBD5E1;
  letter-spacing: 0.5px;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.9);
}

@media (max-width: 1024px) {
  .vizza-adv-console {
    grid-template-columns: 1fr;
  }
  .vizza-adv-display {
    min-height: 420px;
  }
  .adv-panel-content {
    padding: 28px 24px;
  }
}

.vizza-bento-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 24px;
}

.bento-card {
  background: var(--surface-card);
  border: 1px solid var(--surface-border);
  border-radius: var(--radius-lg);
  padding: 40px;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.bento-card:hover {
  border-color: var(--surface-border-active);
  transform: translateY(-4px);
  box-shadow: 0 20px 40px rgba(0,0,0,0.5);
}

.bento-lg {
  grid-column: span 7;
}

.bento-sm {
  grid-column: span 5;
}

.bento-tag {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 1.5px;
  color: var(--vizza-orange);
  margin-bottom: 12px;
  display: block;
}

.bento-card h3 {
  font-size: 26px;
  font-weight: 700;
  margin-bottom: 14px;
  line-height: 1.25;
}

.bento-card p {
  color: var(--text-muted);
  font-size: 15px;
  line-height: 1.6;
}

.bento-visual {
  margin-top: 24px;
  border-radius: var(--radius-md);
  overflow: hidden;
  border: 1px solid var(--surface-border);
}

.bento-visual img {
  width: 100%;
  height: 240px;
  object-fit: cover;
  display: block;
}

.bento-stat {
  margin-top: 30px;
  padding-top: 20px;
  border-top: 1px solid var(--surface-border);
  display: flex;
  flex-direction: column;
}

.bento-stat .num {
  font-size: 54px;
  font-weight: 900;
  color: var(--vizza-orange);
  line-height: 1;
}

.bento-stat .lbl {
  font-size: 13px;
  color: var(--text-muted);
  font-weight: 600;
}

/* ==========================================================================
   6. DAY VS NIGHT COMPARISON DISPLAY (MINIMALIST FLOATING CONTROLS & SPLIT SLIDER)
   ========================================================================== */
.vizza-minimal-showcase {
  position: relative;
  background: var(--ink);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: 0 30px 60px rgba(0, 0, 0, 0.8);
}

.vm-viewport {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #000;
  overflow: hidden;
  user-select: none;
}

.vm-img-layer {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.vm-day-clip-wrapper {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
  overflow: hidden;
  transition: none !important;
}

/* Split Slider Divider & Handle */
.vm-split-divider {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 3px;
  background: #FFFFFF;
  z-index: 5;
  transform: translateX(-50%);
  pointer-events: none;
  box-shadow: 0 0 12px rgba(0, 0, 0, 0.9), 0 0 6px rgba(253, 160, 1, 0.8);
  transition: none !important;
}

.vm-split-handle {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: #FDA001;
  color: #000000;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.8);
  pointer-events: auto;
  cursor: ew-resize;
  border: 2px solid #FFFFFF;
}

.vm-handle-arr {
  font-size: 20px;
  font-weight: 900;
  letter-spacing: -2px;
  line-height: 1;
}

/* Floating Bottom Control Bar Inside Image */
.vm-control-bar {
  position: absolute;
  bottom: 24px;
  left: 24px;
  right: 24px;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 16px;
  background: rgba(0, 0, 0, 0.75);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 40px;
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.9), inset 0 1px 0 rgba(255, 255, 255, 0.2);
  flex-wrap: wrap;
  gap: 12px;
}

/* Segmented Time Switch (Night / Day / Split View) */
.vm-time-segmented {
  display: inline-flex;
  background: rgba(0, 0, 0, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.18);
  padding: 4px;
  border-radius: 30px;
}

.vm-time-btn {
  padding: 8px 18px;
  border-radius: 24px;
  background: transparent;
  border: none;
  color: #E2E8F0;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s ease;
}

.vm-time-btn:hover {
  color: #FFFFFF;
}

.vm-time-btn.active {
  background: #FDA001;
  color: #000000 !important;
  font-weight: 900;
  box-shadow: 0 0 15px rgba(253, 160, 1, 0.5);
}

/* Angle Selector Pills */
.vm-angle-pills {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.vm-angle-btn {
  padding: 8px 16px;
  border-radius: 20px;
  background: rgba(0, 0, 0, 0.5);
  border: 1px solid rgba(255, 255, 255, 0.18);
  color: #E2E8F0;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  backdrop-filter: blur(8px);
}

.vm-angle-btn:hover {
  background: rgba(255, 255, 255, 0.2);
  color: #FFFFFF;
  border-color: rgba(255, 255, 255, 0.4);
}

.vm-angle-btn.active {
  background: #FFFFFF;
  border-color: #FFFFFF;
  color: #000000 !important;
  font-weight: 900;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.7);
}

@media (max-width: 768px) {
  .vizza-minimal-showcase {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    overflow: visible !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
  }
  .vm-viewport {
    border-radius: 20px !important;
    overflow: hidden !important;
    border: 1px solid rgba(255, 255, 255, 0.14) !important;
    box-shadow: 0 20px 45px rgba(0, 0, 0, 0.85) !important;
    width: 100% !important;
    aspect-ratio: 16 / 10 !important;
  }
  .vm-control-bar {
    position: relative !important;
    bottom: auto !important;
    left: auto !important;
    right: auto !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 12px !important;
    border-radius: 20px !important;
    background: rgba(11, 14, 23, 0.95) !important;
    border: 1px solid rgba(255, 255, 255, 0.14) !important;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.7) !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
    box-sizing: border-box !important;
  }
  .vm-time-segmented {
    width: 100% !important;
    display: flex !important;
  }
  .vm-time-btn {
    flex: 1 !important;
    text-align: center !important;
    padding: 8px 10px !important;
    font-size: 12px !important;
  }
  .vm-angle-pills {
    width: 100% !important;
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 6px !important;
  }
  .vm-angle-btn {
    width: 100% !important;
    text-align: center !important;
    padding: 8px 6px !important;
    font-size: 11.5px !important;
  }
}

/* ==========================================================================
   7. HARDWARE ANATOMY SECTION
   ========================================================================== */
.vizza-hardware-card {
  background: var(--surface-card);
  border: 1px solid var(--surface-border);
  border-radius: var(--radius-lg);
  padding: 48px;
}

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

.hardware-visual {
  position: relative;
  border-radius: var(--radius-md);
  overflow: hidden;
  border: 1px solid var(--surface-border);
}

.hardware-visual img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.visual-badge {
  position: absolute;
  bottom: 20px;
  left: 20px;
  background: rgba(2, 4, 12, 0.85);
  backdrop-filter: blur(12px);
  border: 1px solid var(--vizza-orange);
  padding: 8px 16px;
  border-radius: 100px;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  font-weight: 700;
  color: var(--vizza-orange);
}

.spec-block {
  display: flex;
  gap: 20px;
  margin-bottom: 32px;
}

.spec-block:last-child {
  margin-bottom: 0;
}

.spec-num {
  font-size: 18px;
  font-weight: 800;
  color: var(--vizza-orange);
  background: rgba(253, 160, 1, 0.1);
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.spec-info h3 {
  font-size: 20px;
  font-weight: 700;
  margin-bottom: 6px;
}

.spec-info p {
  font-size: 14px;
  color: var(--text-muted);
}

/* ==========================================================================
   8. SMART APP SHOWCASE
   ========================================================================== */
.vizza-app-wrapper {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: center;
  background: var(--ink);
  border: 1px solid var(--surface-border);
  border-radius: var(--radius-lg);
  padding: 60px;
}

.app-feature-list {
  margin: 32px 0;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.af-item {
  display: flex;
  gap: 16px;
  align-items: flex-start;
}

.af-item i {
  font-size: 20px;
  color: var(--vizza-orange);
  background: rgba(253, 160, 1, 0.1);
  padding: 12px;
  border-radius: 12px;
}

.af-item strong {
  display: block;
  font-size: 16px;
  color: var(--white);
}

.af-item span {
  font-size: 13px;
  color: var(--text-muted);
}

.app-img {
  width: 100%;
  border-radius: var(--radius-md);
  box-shadow: 0 20px 40px rgba(0,0,0,0.7);
}

/* ==========================================================================
   9. REVIEWS GRID
   ========================================================================== */
.vizza-reviews-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.review-card {
  background: var(--surface-card);
  border: 1px solid var(--surface-border);
  border-radius: var(--radius-md);
  padding: 32px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.review-card .stars {
  color: var(--vizza-orange);
  font-size: 14px;
  margin-bottom: 16px;
}

.review-text {
  font-size: 15px;
  color: var(--text-muted);
  margin-bottom: 24px;
  font-style: italic;
}

.review-author strong {
  display: block;
  font-size: 15px;
  color: var(--white);
}

.review-author span {
  font-size: 12px;
  color: var(--vizza-orange);
}

/* ==========================================================================
   10. INSTANT PRICE ESTIMATOR / CTA SECTION
   ========================================================================== */
.vizza-quote-card {
  background: radial-gradient(circle at 50% 0%, #162038 0%, var(--ink) 80%);
  border: 1px solid var(--surface-border-active);
  border-radius: var(--radius-lg);
  padding: 60px;
  box-shadow: 0 30px 80px rgba(253, 160, 1, 0.15);
}

.quote-header {
  text-align: center;
  max-width: 600px;
  margin: 0 auto 40px;
}

.quote-header h2 {
  font-size: 40px;
  font-weight: 800;
  margin-bottom: 12px;
}

.quote-header p {
  color: var(--text-muted);
  font-size: 16px;
}

.calc-step {
  margin-bottom: 32px;
}

.calc-label {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 1px;
  color: var(--vizza-orange);
  margin-bottom: 14px;
  display: block;
}

.type-options {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

.type-btn {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--surface-border);
  padding: 16px;
  border-radius: var(--radius-md);
  color: var(--white);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  transition: all 0.25s ease;
}

.type-btn i {
  font-size: 24px;
  color: var(--text-muted);
}

.type-btn.active, .type-btn:hover {
  background: rgba(253, 160, 1, 0.1);
  border-color: var(--vizza-orange);
}

.type-btn.active i {
  color: var(--vizza-orange);
}

.slider-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.feet-val {
  font-size: 24px;
  font-weight: 800;
  color: var(--vizza-orange);
}

.vizza-range-slider {
  width: 100%;
  height: 8px;
  border-radius: 4px;
  background: var(--surface-border);
  accent-color: var(--vizza-orange);
  outline: none;
  cursor: pointer;
  margin-top: 10px;
}

.calc-result-box {
  background: rgba(2, 4, 12, 0.8);
  border: 1px solid var(--surface-border);
  border-radius: var(--radius-md);
  padding: 24px;
  text-align: center;
  margin-bottom: 32px;
}

.res-info span {
  font-size: 14px;
  color: var(--text-muted);
}

.res-price {
  font-size: 42px;
  font-weight: 900;
  color: var(--vizza-orange);
  margin: 6px 0;
}

.res-info small {
  font-size: 12px;
  color: var(--text-dark);
}

/* Fast Form */
.quote-fast-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 16px;
}

.form-row.full-width {
  grid-template-columns: 1fr;
}

.vizza-input {
  width: 100%;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--surface-border);
  border-radius: var(--radius-sm);
  padding: 16px 20px;
  color: var(--white);
  font-family: var(--font-main);
  font-size: 15px;
  outline: none;
  transition: all 0.25s ease;
}

select.vizza-input option {
  background: #0F172A;
  color: #FFFFFF;
}

textarea.vizza-input {
  resize: vertical;
  min-height: 90px;
}

.vizza-input:focus {
  border-color: var(--vizza-orange);
  background: rgba(255, 255, 255, 0.08);
}

.vizza-btn-block {
  width: 100%;
  padding: 18px;
  font-size: 16px;
}

.form-success-msg {
  display: none;
  text-align: center;
  padding: 40px;
  background: rgba(16, 185, 129, 0.1);
  border: 1px solid #10B981;
  border-radius: var(--radius-md);
}

.form-success-msg i {
  font-size: 48px;
  color: #10B981;
  margin-bottom: 12px;
}

/* ==========================================================================
   11. FOOTER STYLING (SPACIOUS APPLE DESIGN WITH SOCIAL BOXES)
   ========================================================================== */
.vizza-site-footer {
  background: var(--ink);
  border-top: 1px solid var(--surface-border);
  padding: 80px 0 40px;
}

.vizza-footer-container {
  width: 100%;
  max-width: 1340px;
  margin: 0 auto;
  padding: 0 48px;
  box-sizing: border-box;
}

.vizza-footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1.3fr 1.7fr;
  gap: 48px;
  margin-bottom: 60px;
}

.vizza-fcol-brand .vizza-footer-brand-logo {
  display: inline-block;
  margin-bottom: 16px;
}

.vizza-footer-logo-img {
  height: 72px;
  width: auto;
  max-width: 240px;
  object-fit: contain;
  display: block;
}

.vizza-footer-desc {
  font-size: 14px;
  color: var(--text-muted);
  line-height: 1.6;
}

.vizza-ftitle {
  font-size: 15px;
  font-weight: 800;
  letter-spacing: 0.5px;
  margin-bottom: 20px;
  color: var(--white);
}

.uppercase-title {
  text-transform: uppercase;
  letter-spacing: 1px;
}

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

.vizza-flinks a {
  font-size: 14px;
  color: var(--text-muted);
  transition: color 0.2s ease;
}

.vizza-flinks a:hover {
  color: var(--vizza-amber);
}

.vizza-footer-contact {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.vizza-phone-link, .vizza-email-link {
  display: flex;
  flex-direction: column;
  gap: 4px;
  color: var(--white);
  text-decoration: none;
}

.vizza-phone-link span, .vizza-email-link span {
  font-size: 11px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.vizza-phone-link strong, .vizza-email-link strong {
  font-size: 15px;
  font-weight: 700;
  color: var(--white);
}

/* Col 4: Connect With Us Social Section */
.vizza-footer-social-desc {
  font-size: 14px;
  color: var(--text-muted);
  line-height: 1.6;
  margin-bottom: 20px;
}

.vizza-footer-social-icons {
  display: flex;
  align-items: center;
  gap: 14px;
}

.social-box-btn {
  width: 52px;
  height: 52px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.12);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--white);
  transition: all 0.25s ease;
  text-decoration: none;
}

.social-box-btn:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.3);
  color: var(--vizza-amber);
  transform: translateY(-3px);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.4);
}

.vizza-footer-bottom {
  border-top: 1px solid var(--surface-border);
  padding-top: 30px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}

.vizza-footer-bottom p {
  font-size: 13px;
  color: var(--text-muted);
  margin: 0;
}

.vizza-footer-legal {
  display: flex;
  align-items: center;
  gap: 24px;
}

.vizza-footer-legal a {
  font-size: 13px;
  color: var(--text-muted);
  text-decoration: none;
  transition: color 0.2s ease;
}

.vizza-footer-legal a:hover {
  color: #FFFFFF;
}

/* Text Link CTA */
.vizza-text-link {
  color: var(--vizza-orange);
  font-weight: 700;
  font-size: 15px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: color 0.25s ease;
}

.vizza-text-link:hover {
  color: var(--white);
}

/* 5 Pillars / Differentiators Grid */
.vizza-diff-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.diff-card {
  background: var(--surface-card);
  border: 1px solid var(--surface-border);
  border-radius: var(--radius-lg);
  padding: 36px;
  transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.diff-card:hover {
  border-color: var(--surface-border-active);
  transform: translateY(-4px);
  box-shadow: 0 20px 40px rgba(0,0,0,0.5);
}

.diff-card.diff-highlight {
  grid-column: span 2;
  background: radial-gradient(circle at 0% 0%, rgba(253, 160, 1, 0.12) 0%, var(--surface-card) 75%);
  border-color: var(--vizza-orange);
}

.diff-num {
  font-size: 12px;
  font-weight: 900;
  color: var(--vizza-orange);
  letter-spacing: 1.5px;
  margin-bottom: 14px;
}

.diff-card h3 {
  font-size: 20px;
  font-weight: 700;
  margin-bottom: 12px;
  line-height: 1.3;
}

.diff-card p {
  font-size: 14px;
  color: var(--text-muted);
  line-height: 1.6;
}

/* Interactive Component Diagram */
.vizza-diagram-wrapper {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 36px;
  align-items: center;
}

.diagram-canvas {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--surface-border);
  box-shadow: 0 25px 50px rgba(0,0,0,0.8);
}

.diagram-base-img {
  width: 100%;
  height: auto;
  display: block;
}

.hotspot-btn {
  position: absolute;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--ink);
  color: var(--white);
  border: 2px solid var(--vizza-orange);
  font-weight: 800;
  font-size: 13px;
  cursor: pointer;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.25s ease;
  transform: translate(-50%, -50%);
}

.hotspot-btn.active, .hotspot-btn:hover {
  transform: translate(-50%, -50%) scale(1.15);
  background: var(--vizza-orange);
  color: var(--field-black);
  border-color: var(--white);
}

/* Inspector Spec Panel */
.diagram-inspector {
  background: var(--ink);
  border: 1px solid var(--surface-border);
  border-radius: var(--radius-lg);
  padding: 36px;
  min-height: 400px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.spec-panel {
  display: none;
  animation: fadeIn 0.4s ease;
}

.spec-panel.active {
  display: block;
}

.panel-num {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 1.5px;
  color: var(--vizza-orange);
  margin-bottom: 8px;
}

.spec-panel h3 {
  font-size: 24px;
  font-weight: 800;
  margin-bottom: 10px;
}

.panel-intro {
  font-size: 14px;
  color: var(--text-muted);
  margin-bottom: 24px;
}

.spec-details-table {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.sd-row {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 10px 14px;
  background: rgba(255, 255, 255, 0.03);
  border-radius: var(--radius-sm);
  border-left: 2px solid var(--vizza-orange);
}

.sd-label {
  font-size: 12px;
  font-weight: 700;
  color: var(--text-muted);
}

.sd-val {
  font-size: 14px;
  font-weight: 700;
  color: var(--white);
}

/* Day/Night Caption Strip */
.daynight-caption-strip {
  display: flex;
  align-items: center;
  justify-content: space-around;
  background: var(--ink);
  border-top: 1px solid var(--surface-border);
  padding: 24px;
}

.cap-col {
  display: flex;
  flex-direction: column;
  gap: 4px;
  text-align: center;
}

.cap-col strong {
  font-size: 16px;
  font-weight: 700;
  color: var(--white);
}

.cap-col span {
  font-size: 13px;
  color: var(--text-muted);
}

.cap-divider {
  width: 1px;
  height: 40px;
  background: var(--surface-border);
}
  color: var(--white);
}

/* 48-72 Hour Timeline */
.vizza-process-steps {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
}

.pstep-card {
  flex: 1;
  min-width: 260px;
  background: var(--surface-card);
  border: 1px solid var(--surface-border);
  border-radius: var(--radius-lg);
  padding: 32px;
}

.pstep-card.pstep-highlight {
  border-color: var(--vizza-orange);
  background: radial-gradient(circle at 100% 100%, rgba(253, 160, 1, 0.15) 0%, var(--surface-card) 80%);
}

.pstep-num {
  font-size: 12px;
  font-weight: 900;
  color: var(--vizza-orange);
  letter-spacing: 1px;
  margin-bottom: 10px;
}

.pstep-card h3 {
  font-size: 20px;
  font-weight: 700;
  margin-bottom: 10px;
}

.pstep-card p {
  font-size: 14px;
  color: var(--text-muted);
}

.pstep-arrow {
  font-size: 20px;
  color: var(--vizza-orange);
}

/* Technical Research Comparison Table */
.vizza-table-swipe-hint {
  display: none;
}

.vizza-compare-table-wrapper {
  overflow-x: auto;
  border-radius: var(--radius-lg);
  border: 1px solid var(--surface-border);
  background: var(--ink);
}

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

.vizza-compare-table th, .vizza-compare-table td {
  padding: 18px 24px;
  border-bottom: 1px solid var(--surface-border);
  font-size: 14px;
}

.vizza-compare-table th {
  background: rgba(255, 255, 255, 0.04);
  font-size: 15px;
  font-weight: 800;
  color: var(--white);
}

.vizza-compare-table th.th-vizza, .vizza-compare-table td.td-vizza {
  background: rgba(253, 160, 1, 0.08);
  color: var(--white);
  font-weight: 700;
}

.vizza-compare-table td.td-vizza i {
  color: var(--vizza-orange);
  margin-right: 6px;
}

.vizza-compare-table td i.fa-circle-xmark {
  color: #EF4444;
  margin-right: 6px;
}

.vizza-compare-table td i.fa-triangle-exclamation {
  color: #F59E0B;
  margin-right: 6px;
}

/* ==========================================================================
   12. RESPONSIVE BREAKPOINTS
   ========================================================================== */
@media (max-width: 1024px) {
  .vizza-hero-title { font-size: 48px; }
  .vizza-bento-grid { grid-template-columns: 1fr; }
  .bento-lg, .bento-sm { grid-column: span 12; }
  .hardware-grid, .vizza-app-wrapper, .vizza-diagram-wrapper { grid-template-columns: 1fr; }
  .vizza-diff-grid { grid-template-columns: 1fr; }
  .diff-card.diff-highlight { grid-column: span 1; }
  .vizza-reviews-grid { grid-template-columns: 1fr; }
  .vizza-footer-grid { grid-template-columns: 1fr 1fr; }
  .pstep-arrow { display: none; }
}

@media (max-width: 768px) {
  .vizza-nav-menu { display: none; }
  .vizza-hamburger { display: flex; }
  .vizza-hero-title { font-size: 36px; }
  .vizza-section-title { font-size: 30px; }
  .vizza-hero-actions { flex-direction: column; }
  .type-options { grid-template-columns: 1fr; }
  .form-row { grid-template-columns: 1fr; }
  .vizza-footer-grid { grid-template-columns: 1fr; }
  .vizza-quote-card, .vizza-hardware-card, .vizza-app-wrapper, .diagram-inspector { padding: 24px; }
}

/* ==========================================================================
   APPLE / JELLYFISH MINIMALIST SHOWCASE CARDS (PRODUCTS & OCCASIONS)
   ========================================================================== */
.vizza-occasion-grid,
.vizza-products-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  margin-top: 40px;
}

/* ==========================================================================
   2. OCCASION SHOWCASE: 4-SEASONS INTERACTIVE ARCHITECTURAL CANVAS
   ========================================================================== */
.vizza-occasion-section {
  padding: 100px 0;
  background: #05070B;
}

/* Animated Running Border Light Beam for House Canvas */
@property --border-angle {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}

.vizza-occasion-viewport {
  position: relative;
  width: 100%;
  max-width: 1200px;
  height: 640px;
  margin: 0 auto 40px;
  border-radius: 28px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: 0 35px 80px rgba(0, 0, 0, 0.85);
  background: #0B0E17;
}

.vizza-occasion-viewport::before {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: 29px;
  padding: 2px;
  background: conic-gradient(
    from var(--border-angle, 0deg),
    transparent 0%,
    transparent 65%,
    rgba(253, 160, 1, 0.3) 80%,
    #FDA001 92%,
    #FFFFFF 97%,
    #FDA001 99%,
    transparent 100%
  );
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  animation: borderBeamSweep 7s linear infinite;
  pointer-events: none;
  z-index: 15;
}

@keyframes borderBeamSweep {
  0% {
    --border-angle: 0deg;
  }
  100% {
    --border-angle: 360deg;
  }
}

.occ-viewport-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Floating Specs Pill Tag (Top Left Inside Canvas) */
.vizza-occ-spec-tag {
  position: absolute;
  top: 24px;
  left: 24px;
  background: rgba(5, 7, 11, 0.75);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 40px;
  padding: 10px 22px;
  display: flex;
  align-items: center;
  gap: 10px;
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.7);
  z-index: 10;
}

/* Apple Segmented Control Tab Bar (Floating Bottom Center Inside Canvas) */
.vizza-occasion-control-bar {
  position: absolute;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: calc(100% - 48px);
  max-width: 780px;
  margin: 0;
  background: rgba(5, 7, 11, 0.65);
  backdrop-filter: blur(28px);
  -webkit-backdrop-filter: blur(28px);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 100px;
  padding: 6px;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.75);
  z-index: 10;
}

/* Dark Vignette Overlay for Canvas Readability */
.occ-viewport-vignette {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(
    180deg,
    rgba(5, 7, 11, 0.75) 0%,
    rgba(5, 7, 11, 0.1) 45%,
    rgba(5, 7, 11, 0.85) 100%
  );
  pointer-events: none;
  z-index: 2;
}

/* Dynamic In-Canvas Floating Info Box */
.vizza-occ-canvas-info {
  position: absolute;
  bottom: 80px;
  left: 50%;
  transform: translateX(-50%);
  width: calc(100% - 48px);
  max-width: 780px;
  background: rgba(5, 7, 11, 0.75);
  backdrop-filter: blur(28px);
  -webkit-backdrop-filter: blur(28px);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 20px;
  padding: 16px 24px 18px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.8);
  z-index: 10;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 4px;
  pointer-events: auto;
  box-sizing: border-box;
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  overflow: hidden;
  max-height: 220px;
}

/* Minimized State: Collapses description for full un-obscured house view */
.vizza-occ-canvas-info.minimized {
  max-height: 58px;
  padding: 10px 24px;
  background: rgba(5, 7, 11, 0.6);
  opacity: 0.85;
}

.vizza-occ-canvas-info.minimized .occ-info-desc {
  opacity: 0;
  max-height: 0;
  margin: 0;
  pointer-events: none;
  transition: opacity 0.2s ease, max-height 0.3s ease, margin 0.3s ease;
}

.vizza-occ-canvas-info.minimized .toggle-icon {
  transform: rotate(180deg);
}

.vizza-occ-canvas-info:hover {
  opacity: 1;
}

/* Toggle Button */
.occ-info-toggle-btn {
  position: absolute;
  top: 12px;
  right: 16px;
  background: rgba(255, 255, 255, 0.08) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  color: #CBD5E1 !important;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.25s ease;
  z-index: 12;
  outline: none;
}

.occ-info-toggle-btn:hover {
  background: rgba(255, 255, 255, 0.2) !important;
  color: #FFFFFF !important;
  transform: scale(1.08);
}

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

.occ-info-badge {
  font-size: 11px;
  font-weight: 800;
  color: #FDA001;
  letter-spacing: 1.5px;
  text-transform: uppercase;
}

.occ-info-title {
  font-size: 19px;
  font-weight: 800;
  color: #FFFFFF;
  line-height: 1.25;
  margin: 0;
}

.occ-info-desc {
  font-size: 13.5px;
  color: #CBD5E1;
  line-height: 1.5;
  margin: 4px 0 2px;
  max-width: 660px;
  opacity: 1;
  max-height: 100px;
  transition: opacity 0.35s ease, max-height 0.4s ease, margin 0.3s ease;
}

/* Floating Spec Tag inside Info Box */
.vizza-occ-spec-tag {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 40px;
  padding: 5px 14px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: fit-content;
}

.spec-season {
  font-size: 10px;
  font-weight: 800;
  color: #FDA001;
  letter-spacing: 1px;
  text-transform: uppercase;
}

.spec-sep {
  color: rgba(255, 255, 255, 0.3);
  font-size: 10px;
}

.spec-preset {
  font-size: 11px;
  font-weight: 700;
  color: #E2E8F0;
  letter-spacing: 0.4px;
}

/* Apple Segmented Control Tab Bar (Floating Bottom Center Inside Canvas) */
.vizza-occasion-control-bar {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: calc(100% - 48px);
  max-width: 780px;
  margin: 0;
  background: rgba(5, 7, 11, 0.75);
  backdrop-filter: blur(28px);
  -webkit-backdrop-filter: blur(28px);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 100px;
  padding: 6px;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.75);
  z-index: 10;
  box-sizing: border-box;
}

.occ-tab-btn {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 18px;
  border-radius: 50px;
  background: transparent !important;
  border: none !important;
  color: #CBD5E1 !important;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  font-family: inherit;
  white-space: nowrap;
  outline: none;
}

.occ-tab-btn .tab-icon {
  display: flex;
  align-items: center;
  justify-content: center;
}

.occ-tab-btn .tab-icon svg {
  stroke: currentColor;
}

.occ-tab-btn:hover {
  color: #FFFFFF !important;
  background: rgba(255, 255, 255, 0.12) !important;
}

.occ-tab-btn.active {
  background: #FDA001 !important;
  color: #000000 !important;
  font-weight: 800;
  box-shadow: 0 6px 20px rgba(253, 160, 1, 0.45);
}

.occ-tab-btn.active .tab-icon svg {
  stroke: #000000;
}

.occ-card-header {
  display: flex;
  align-items: center;
  gap: 8px;
}

.occ-card-header .occ-icon {
  font-size: 18px;
  width: auto;
  height: auto;
  background: transparent;
  border: none;
}

.occ-card-header .occ-tag {
  font-size: 11px;
  font-weight: 800;
  color: #FDA001;
  letter-spacing: 1px;
  margin-top: 0;
}

.vizza-occ-grid-sync .vizza-occ-card h3 {
  font-size: 16px;
  font-weight: 700;
  color: #FFFFFF;
  line-height: 1.35;
}

.vizza-occ-grid-sync .vizza-occ-card p {
  font-size: 13px;
  color: var(--text-muted);
  line-height: 1.5;
  margin: 0;
}

/* Products Grid Card (Full Image Card with Frosted Glass Caption Overlay) */
.vizza-prod-card {
  position: relative;
  height: 520px;
  background: #0B0E17;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 24px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.6);
}

.vizza-prod-card:hover {
  transform: translateY(-8px);
  border-color: rgba(253, 160, 1, 0.4);
  box-shadow: 0 30px 60px rgba(0, 0, 0, 0.85);
}

.prod-img-box {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: #000;
}

.prod-img-box img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.vizza-prod-card:hover .prod-img-box img {
  transform: scale(1.08);
}

.prod-card-body {
  position: relative;
  z-index: 5;
  padding: 20px 24px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  background: rgba(5, 7, 11, 0.65);
  backdrop-filter: blur(28px);
  -webkit-backdrop-filter: blur(28px);
  border-top: 1px solid rgba(255, 255, 255, 0.15);
  transition: background 0.3s ease;
}

.vizza-prod-card:hover .prod-card-body {
  background: rgba(5, 7, 11, 0.8);
}

.prod-category {
  font-size: 11px;
  font-weight: 800;
  color: #FDA001;
  letter-spacing: 1.2px;
  text-transform: uppercase;
}

.prod-card-body h3 {
  font-size: 15.5px;
  font-weight: 800;
  color: #FFFFFF;
  line-height: 1.35;
  margin: 0;
}

@media (max-width: 1024px) {
  .vizza-occasion-grid,
  .vizza-products-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ==========================================================================
   4. THE VIZZA ADVANTAGE CONSOLE (5 PILLARS COMMAND CONSOLE)
   ========================================================================== */
.vizza-diff-section {
  padding: 100px 0;
  background: #05070B;
}

.vizza-adv-console {
  display: grid;
  grid-template-columns: 380px 1fr;
  gap: 32px;
  max-width: 1200px;
  margin: 0 auto;
  align-items: stretch;
}

.vizza-adv-nav {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.adv-nav-item {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 24px;
  background: rgba(11, 14, 23, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 18px;
  cursor: pointer;
  text-align: left;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  overflow: hidden;
  outline: none;
  font-family: inherit;
  width: 100%;
  box-sizing: border-box;
}

.adv-nav-item:hover {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.18);
  transform: translateX(4px);
}

.adv-nav-item.active {
  background: rgba(253, 160, 1, 0.08);
  border-color: rgba(253, 160, 1, 0.4);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4), inset 0 0 20px rgba(253, 160, 1, 0.05);
}

.adv-nav-item.active .adv-active-beam {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  background: #FDA001;
  box-shadow: 0 0 12px #FDA001;
}

.adv-nav-text {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.adv-nav-title {
  font-size: 15px;
  font-weight: 800;
  color: #FFFFFF;
  line-height: 1.3;
}

.adv-nav-item.active .adv-nav-title {
  color: #FDA001;
}

.adv-nav-sub {
  font-size: 12px;
  font-weight: 500;
  color: #94A3B8;
}

.vizza-adv-display {
  position: relative;
  min-height: 520px;
  background: #0B0E17;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 28px;
  overflow: hidden;
  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.85);
}

.adv-panel-card {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.4s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.4s;
}

.adv-panel-card.active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.adv-panel-img-box {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.adv-panel-img-box img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.adv-panel-vignette {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(5, 7, 11, 0.2) 0%, rgba(5, 7, 11, 0.88) 75%, #05070B 100%);
  pointer-events: none;
}

.adv-panel-content {
  position: relative;
  z-index: 5;
  padding: 36px 40px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.adv-panel-headline {
  font-size: 28px;
  font-weight: 800;
  color: #FFFFFF;
  line-height: 1.25;
  margin: 0;
}

.adv-panel-body {
  font-size: 15px;
  color: #CBD5E1;
  line-height: 1.6;
  margin: 0;
  max-width: 620px;
}

.adv-panel-stats {
  display: flex;
  align-items: center;
  gap: 32px;
  margin-top: 8px;
}

.adv-stat-box {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.stat-val {
  font-size: 22px;
  font-weight: 900;
  color: #FDA001;
}

.stat-lbl {
  font-size: 11.5px;
  font-weight: 600;
  color: #94A3B8;
  text-transform: uppercase;
  letter-spacing: 0.8px;
}

/* ==========================================================================
   3. MODERN SOFFIT & ARCHITECTURAL PLACEMENT DIAGRAM
   ========================================================================== */
.vizza-diagram-section {
  padding: 100px 0;
  background: #05070B;
}

.vizza-diagram-wrapper {
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: 32px;
  max-width: 1200px;
  margin: 0 auto;
  align-items: stretch;
}

.diagram-canvas {
  position: relative;
  min-height: 520px;
  background: #0B0E17;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 28px;
  overflow: hidden;
  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.85);
  display: flex;
  align-items: center;
  justify-content: center;
}

.diagram-base-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.hotspot-btn {
  position: absolute;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #FDA001;
  border: 3px solid #FFFFFF;
  color: #000000;
  font-size: 15px;
  font-weight: 900;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transform: translate(-50%, -50%);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.7), 0 0 25px rgba(253, 160, 1, 0.7);
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  z-index: 10;
  font-family: inherit;
  outline: none;
}

.hotspot-btn::after {
  content: '';
  position: absolute;
  inset: -8px;
  border-radius: 50%;
  border: 2px solid #FDA001;
  opacity: 0.6;
  animation: hotspotPulse 2s infinite ease-out;
  pointer-events: none;
}

@keyframes hotspotPulse {
  0% {
    transform: scale(0.85);
    opacity: 0.8;
  }
  100% {
    transform: scale(1.6);
    opacity: 0;
  }
}

.hotspot-btn:hover,
.hotspot-btn.active {
  transform: translate(-50%, -50%) scale(1.18);
  background: #FFFFFF;
  border-color: #FDA001;
  color: #000000;
  box-shadow: 0 0 35px #FDA001, 0 8px 30px rgba(0, 0, 0, 0.9);
}

.diagram-inspector {
  background: #0B0E17;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 28px;
  padding: 36px 32px;
  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.85);
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.spec-panel {
  display: none;
  animation: specFadeIn 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.spec-panel.active {
  display: block;
}

@keyframes specFadeIn {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.panel-num {
  font-size: 11px;
  font-weight: 800;
  color: #FDA001;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  margin-bottom: 8px;
}

.spec-panel h3 {
  font-size: 24px;
  font-weight: 800;
  color: #FFFFFF;
  line-height: 1.3;
  margin: 0 0 12px;
}

.panel-intro {
  font-size: 14.5px;
  color: #94A3B8;
  line-height: 1.6;
  margin: 0 0 24px;
}

.spec-details-table {
  display: flex;
  flex-direction: column;
  gap: 12px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  padding-top: 20px;
}

.sd-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.sd-label {
  font-size: 13px;
  font-weight: 600;
  color: #64748B;
}

.sd-val {
  font-size: 13.5px;
  font-weight: 700;
  color: #FFFFFF;
  text-align: right;
}

/* ==========================================================================
   5. DAY VS NIGHT INVISIBILITY SHOWCASE (APPLE MINIMALIST SHOWCASE)
   ========================================================================== */
.vizza-daynight-section {
  padding: 100px 0;
  background: #05070B;
}

.vizza-minimal-showcase {
  position: relative;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  border-radius: 28px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: 0 35px 80px rgba(0, 0, 0, 0.85);
  background: #0B0E17;
}

.vm-viewport {
  position: relative;
  width: 100%;
  height: 640px;
  overflow: hidden;
  background: #000;
  user-select: none;
  -webkit-user-select: none;
}

.vm-img-layer {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  pointer-events: none;
}

.vm-night-layer {
  z-index: 1;
}

.vm-day-clip-wrapper {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
  overflow: hidden;
  pointer-events: none;
}

.vm-day-layer {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
}

/* Interactive Split Slider Drag Handle */
.vm-split-divider {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 3px;
  background: #FDA001;
  z-index: 8;
  transform: translateX(-50%);
  cursor: ew-resize;
  box-shadow: 0 0 15px rgba(253, 160, 1, 0.8);
  display: flex;
  align-items: center;
  justify-content: center;
}

.vm-split-handle {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: #FDA001;
  border: 3px solid #FFFFFF;
  color: #000000;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.6), 0 0 20px rgba(253, 160, 1, 0.6);
  cursor: ew-resize;
}

.vm-handle-arr {
  font-size: 18px;
  font-weight: 900;
  line-height: 1;
  letter-spacing: -1px;
}

/* Floating Bottom Control Bar */
.vm-control-bar {
  position: absolute;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  width: calc(100% - 48px);
  max-width: 920px;
  background: rgba(5, 7, 11, 0.8);
  backdrop-filter: blur(28px);
  -webkit-backdrop-filter: blur(28px);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 100px;
  padding: 8px 12px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.85);
  z-index: 10;
  box-sizing: border-box;
}

/* Segmented Time Switch (Night / Day / Split) */
.vm-time-segmented {
  display: flex;
  align-items: center;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 50px;
  padding: 4px;
  gap: 4px;
}

.vm-time-btn {
  padding: 8px 18px;
  border-radius: 50px;
  border: none;
  background: transparent !important;
  color: #94A3B8 !important;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  font-family: inherit;
  white-space: nowrap;
}

.vm-time-btn:hover {
  color: #FFFFFF !important;
  background: rgba(255, 255, 255, 0.1) !important;
}

.vm-time-btn.active {
  background: #FDA001 !important;
  color: #000000 !important;
  font-weight: 800;
  box-shadow: 0 4px 15px rgba(253, 160, 1, 0.45);
}

/* Angle Selector Pills */
.vm-angle-pills {
  display: flex;
  align-items: center;
  gap: 8px;
}

.vm-angle-btn {
  padding: 8px 16px;
  border-radius: 50px;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  background: rgba(255, 255, 255, 0.05) !important;
  color: #CBD5E1 !important;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  font-family: inherit;
  white-space: nowrap;
}

.vm-angle-btn:hover {
  background: rgba(255, 255, 255, 0.15) !important;
  color: #FFFFFF !important;
  border-color: rgba(255, 255, 255, 0.3) !important;
}

.vm-angle-btn.active {
  background: #FFFFFF !important;
  color: #000000 !important;
  border-color: #FFFFFF !important;
  font-weight: 800;
  box-shadow: 0 4px 15px rgba(255, 255, 255, 0.35);
}

@media (max-width: 900px) {
  .vm-viewport {
    height: 440px;
  }

  .vm-control-bar {
    position: static;
    transform: none;
    width: 100%;
    max-width: 100%;
    margin-top: 16px;
    border-radius: 20px;
    flex-direction: column;
    gap: 12px;
    padding: 14px;
    background: #0B0E17;
  }

  .vm-time-segmented {
    width: 100%;
    justify-content: center;
  }

  .vm-time-btn {
    flex: 1;
    text-align: center;
    padding: 10px 8px;
    font-size: 12px;
  }

  .vm-angle-pills {
    width: 100%;
    overflow-x: auto;
    padding-bottom: 4px;
    justify-content: flex-start;
    -webkit-overflow-scrolling: touch;
  }

  .vm-angle-btn {
    font-size: 12px;
    padding: 8px 12px;
    flex-shrink: 0;
  }
}

/* ==========================================================================
   FULL-WIDTH SEAMLESS APPLE FORM (NO CARD WRAPPER, MAX-WIDTH 1100PX)
   ========================================================================== */
.vizza-quote-container-wide {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 24px;
}

.vizza-quote-section .quote-header .vizza-section-title {
  font-size: 56px;
  font-weight: 900;
  line-height: 1.12;
  letter-spacing: -1.5px;
  margin-bottom: 24px;
}

.vizza-full-width-form {
  display: flex;
  flex-direction: column;
  gap: 32px;
  margin-top: 48px;
}

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

.form-grid-row.full-width {
  grid-template-columns: 1fr;
}

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

.form-label {
  font-size: 13px;
  font-weight: 700;
  color: #94A3B8;
  letter-spacing: 0.5px;
}

.vizza-full-width-form input.vizza-input,
.vizza-full-width-form select.vizza-input {
  width: 100%;
  height: 64px;
  padding: 0 24px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: #FFFFFF;
  font-size: 16px;
  font-weight: 500;
  font-family: inherit;
  transition: all 0.25s ease;
  box-sizing: border-box;
}

.vizza-full-width-form textarea.vizza-input {
  width: 100%;
  padding: 20px 24px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: #FFFFFF;
  font-size: 16px;
  font-weight: 500;
  font-family: inherit;
  transition: all 0.25s ease;
  resize: vertical;
  min-height: 120px;
  box-sizing: border-box;
}

.vizza-full-width-form .vizza-input::placeholder {
  color: rgba(255, 255, 255, 0.35);
}

.vizza-full-width-form .vizza-input:hover {
  border-color: rgba(255, 255, 255, 0.25);
  background: rgba(255, 255, 255, 0.07);
}

.vizza-full-width-form .vizza-input:focus {
  outline: none;
  border-color: #FDA001;
  background: rgba(255, 255, 255, 0.08);
  box-shadow: 0 0 0 4px rgba(253, 160, 1, 0.2), 0 10px 30px rgba(0, 0, 0, 0.5);
}

.vizza-full-width-form select.vizza-input option {
  background: #0A0D14;
  color: #FFFFFF;
  padding: 14px;
}

.form-action-center {
  display: flex;
  justify-content: center;
  margin-top: 16px;
}

.vizza-btn-submit {
  min-width: 320px;
  height: 64px;
  padding: 0 44px;
  border-radius: 40px;
  font-size: 16px;
  font-weight: 800;
  letter-spacing: 0.5px;
  background: #FDA001;
  color: #000000;
  border: none;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 10px 30px rgba(253, 160, 1, 0.35);
}

.vizza-btn-submit:hover {
  transform: translateY(-2px);
  background: #FFAF26;
  box-shadow: 0 15px 35px rgba(253, 160, 1, 0.5);
}

/* Service Selection Pills (Replacing Broken Native Select) */
.vizza-service-pills {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 4px;
}

.vizza-service-pill {
  padding: 12px 22px;
  border-radius: 30px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: #E2E8F0;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer !important;
  transition: all 0.25s ease;
  font-family: inherit;
  user-select: none !important;
  -webkit-user-select: none !important;
  -moz-user-select: none !important;
  outline: none !important;
  pointer-events: auto !important;
}

.vizza-service-pill:hover {
  background: rgba(255, 255, 255, 0.12);
  color: #FFFFFF;
  border-color: rgba(255, 255, 255, 0.3);
}

.vizza-service-pill.active {
  background: #FDA001;
  color: #000000 !important;
  border-color: #FDA001;
  font-weight: 800;
  box-shadow: 0 4px 15px rgba(253, 160, 1, 0.4);
}

@media (max-width: 768px) {
  .form-grid-row {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  .vizza-btn-submit {
    width: 100%;
  }
  .vizza-service-pill {
    flex: 1 1 calc(50% - 10px);
    text-align: center;
    padding: 10px 12px;
    font-size: 12px;
  }
}

/* 21:9 Ultra-Wide Pre-Footer Banner Container */
.vizza-footer-banner-wrapper {
  width: 100%;
  margin: 0 0 60px 0;
  padding: 0;
  box-sizing: border-box;
}

.vizza-footer-banner-21x9 {
  position: relative;
  width: 100%;
  aspect-ratio: 21 / 9;
  max-height: 440px;
  border-radius: 28px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.85);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  background: #0B0E17;
}

.vizza-footer-banner-21x9 .banner-bg-img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.vizza-footer-banner-21x9 .banner-overlay-vignette {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: radial-gradient(circle at center, rgba(5, 7, 11, 0.45) 0%, rgba(5, 7, 11, 0.85) 100%);
  pointer-events: none;
  z-index: 2;
}

.vizza-footer-banner-21x9 .banner-content {
  position: relative;
  z-index: 5;
  max-width: 780px;
  padding: 40px 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}

.banner-content-animated {
  position: relative;
  z-index: 5;
  width: 100%;
  padding: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.banner-big-animated-title {
  font-size: 80px;
  font-weight: 900;
  color: #FFFFFF;
  line-height: 1.08;
  letter-spacing: -2.5px;
  margin: 0;
  text-shadow: 0 8px 35px rgba(0, 0, 0, 0.95);
}

/* Universal Amber Highlighted Text (Styled at line 439) */

.banner-word-rotate {
  display: inline-block;
  color: #FDA001 !important;
  opacity: 1 !important;
  visibility: visible !important;
  text-shadow: 0 0 35px rgba(253, 160, 1, 0.85), 0 4px 25px rgba(0, 0, 0, 0.95);
  margin-top: 4px;
  transition: opacity 0.35s cubic-bezier(0.16, 1, 0.3, 1), transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

@media (max-width: 900px) {
  .vizza-footer-banner-21x9 {
    aspect-ratio: 16 / 9;
    border-radius: 20px;
  }
  .banner-big-animated-title {
    font-size: 38px;
  }
}

/* ==========================================================================
   TECHNICAL RESEARCH COMPARISON MATRIX (APPLE COMPARISON CARD)
   ========================================================================== */
.vizza-compare-table-wrapper {
  position: relative;
  width: 100%;
  overflow-x: auto;
  border-radius: 24px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(11, 14, 23, 0.65);
  backdrop-filter: blur(20px);
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.8);
  margin-top: 32px;
}

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

.vizza-compare-table th {
  padding: 24px 28px;
  font-size: 14px;
  font-weight: 800;
  color: #94A3B8;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(5, 7, 11, 0.5);
  vertical-align: bottom;
}

.vizza-compare-table th.th-vizza {
  position: relative;
  background: rgba(253, 160, 1, 0.08);
  border-left: 1px solid rgba(253, 160, 1, 0.25);
  border-right: 1px solid rgba(253, 160, 1, 0.25);
  border-top: 3px solid #FDA001;
  color: #FFFFFF;
  overflow: hidden;
}

/* Shiny Shimmer Light Beam Effect STRICTLY ON HEADER CELL ONLY */
.vizza-compare-table th.th-vizza::before {
  content: '';
  position: absolute;
  top: 0;
  left: -150%;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    105deg,
    transparent 20%,
    rgba(255, 255, 255, 0.25) 45%,
    rgba(253, 160, 1, 0.45) 50%,
    rgba(255, 255, 255, 0.25) 55%,
    transparent 80%
  );
  animation: headerShinySweep 3.2s ease-in-out infinite;
  pointer-events: none;
}

@keyframes headerShinySweep {
  0% {
    left: -150%;
  }
  35%, 100% {
    left: 200%;
  }
}

.vizza-winner-pill {
  position: relative;
  display: inline-block;
  font-size: 10px;
  font-weight: 900;
  color: #000000;
  background: #FDA001;
  padding: 4px 10px;
  border-radius: 20px;
  letter-spacing: 1px;
  margin-bottom: 8px;
  box-shadow: 0 4px 15px rgba(253, 160, 1, 0.5);
}

.th-brand {
  font-size: 18px;
  font-weight: 900;
  color: #FFFFFF;
}

.th-sub {
  font-size: 13px;
  font-weight: 600;
  color: #CBD5E1;
}

.vizza-compare-table td {
  padding: 20px 28px;
  font-size: 14.5px;
  color: #CBD5E1;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  transition: background 0.25s ease;
}

.vizza-compare-table td.td-vizza {
  background: rgba(253, 160, 1, 0.05);
  border-left: 1px solid rgba(253, 160, 1, 0.2);
  border-right: 1px solid rgba(253, 160, 1, 0.2);
  color: #FFFFFF;
  font-weight: 700;
}

.vizza-compare-table tr:hover td {
  background: rgba(255, 255, 255, 0.03);
}

.vizza-compare-table tr:hover td.td-vizza {
  background: rgba(253, 160, 1, 0.1);
}

.cell-status {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.cell-status.v-gold {
  color: #FDA001;
  font-weight: 800;
}

.cell-status.v-dim {
  color: #94A3B8;
}

/* ==========================================================================
   MOBILE & TABLET RESPONSIVE OVERRIDES (ULTRA POLISHED FOR ALL SCREENS)
   ========================================================================== */

/* --- Medium Desktop Breakpoint (1025px - 1200px) --- */
@media (min-width: 1025px) and (max-width: 1200px) {
  .vizza-site-header {
    height: 90px;
  }

  .vizza-logo-img {
    height: 62px;
  }

  .vizza-nav-menu {
    gap: 20px;
  }

  .vizza-nav-link {
    font-size: 14.5px;
  }

  .vizza-btn-primary {
    padding: 10px 20px;
    font-size: 13.5px;
  }
}

/* --- Tablet Breakpoint (max-width: 1024px) --- */
@media (max-width: 1024px) {
  .vizza-container {
    padding-left: 24px;
    padding-right: 24px;
  }

  /* Header Tablet Switch to Drawer Navigation */
  .vizza-site-header {
    height: 82px !important;
  }

  .vizza-logo-img {
    height: 56px !important;
  }

  .vizza-nav-menu {
    display: none !important;
  }

  .vizza-hamburger {
    display: flex !important;
  }

  .vizza-header-cta {
    display: flex !important;
    align-items: center !important;
    gap: 14px !important;
  }

  .vizza-header-cta .vizza-btn-primary {
    display: inline-flex !important;
    padding: 9px 20px !important;
    font-size: 13px !important;
  }

  .vizza-section-title {
    font-size: 36px;
  }

  .vizza-adv-console {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .vizza-diagram-wrapper {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .diagram-canvas {
    min-height: 380px;
  }

  .vizza-adv-nav {
    display: flex;
    flex-direction: row;
    overflow-x: auto;
    gap: 12px;
    padding-bottom: 8px;
    -webkit-overflow-scrolling: touch;
  }

  .adv-nav-item {
    min-width: 260px;
    flex-shrink: 0;
  }

  .vizza-adv-display {
    min-height: 440px;
  }

  .adv-panel-content {
    padding: 32px 28px;
  }

  .adv-panel-headline {
    font-size: 26px;
  }

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

  .banner-big-animated-title {
    font-size: 54px;
  }
}

/* --- Mobile Breakpoint (max-width: 768px) --- */
@media (max-width: 768px) {
  .vizza-container {
    padding-left: 18px;
    padding-right: 18px;
  }

  .vizza-section {
    padding-top: 60px;
    padding-bottom: 60px;
  }

  .vizza-section-title {
    font-size: 38px !important;
    line-height: 1.15 !important;
    letter-spacing: -0.8px !important;
    font-weight: 800 !important;
  }

  .vizza-section-desc {
    font-size: 16.5px !important;
    line-height: 1.55 !important;
  }

  .vizza-eyebrow {
    font-size: 13px !important;
    letter-spacing: 2.5px !important;
  }

  /* Sticky Navbar Mobile Refinements */
  .vizza-site-header {
    height: 74px !important;
  }

  .vizza-logo-img {
    height: 48px !important;
  }

  .vizza-drawer-logo {
    height: 44px !important;
  }

  .vizza-footer-logo-img {
    height: 60px !important;
  }

  .vizza-header-container {
    padding: 0 16px !important;
  }

  .vizza-header-cta .vizza-btn-primary {
    display: inline-flex !important;
    padding: 8px 16px !important;
    font-size: 12px !important;
  }

  /* Hero Section */
  .vizza-hero-content {
    padding-top: 90px;
    padding-bottom: 50px;
  }

  .vizza-hero-title {
    font-size: 42px !important;
    line-height: 1.12 !important;
    letter-spacing: -1px !important;
    font-weight: 800 !important;
  }

  .vizza-hero-sub {
    font-size: 16.5px !important;
  }

  .vizza-badge-group {
    flex-direction: column;
    align-items: center;
    gap: 8px;
  }

  .vizza-hero-actions,
  .vizza-cta-group {
    display: flex;
    flex-direction: column;
    width: 100%;
    gap: 12px;
    box-sizing: border-box;
  }

  .vizza-hero-actions .vizza-btn-primary,
  .vizza-hero-actions .vizza-btn-glass,
  .vizza-hero-actions .vizza-btn-secondary,
  .vizza-cta-group .vizza-btn-primary,
  .vizza-cta-group .vizza-btn-secondary {
    width: 100% !important;
    max-width: 100% !important;
    text-align: center !important;
    justify-content: center !important;
    box-sizing: border-box !important;
  }

  /* Section 1: Occasions Grid Mobile Dropdown Pill Refinements */
  .vizza-occasion-viewport,
  .vizza-occ-canvas-wrapper {
    height: 480px !important;
    min-height: 480px !important;
    border-radius: 20px !important;
  }

  .vizza-occasion-control-bar {
    display: none !important;
  }

  .vizza-occ-mobile-dropdown-pill {
    position: absolute;
    bottom: 16px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 20;
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: auto;
    max-width: 85%;
  }

  .vizza-occ-mobile-select {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    z-index: 5;
    cursor: pointer;
    -webkit-appearance: none;
    background-color: #0B0E17;
    color: #FFFFFF;
  }

  .vizza-occ-mobile-select option {
    background-color: #0B0E17 !important;
    color: #FFFFFF !important;
    font-family: inherit !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    padding: 12px 16px !important;
  }

  .vizza-occ-mobile-pill-display {
    background: #FDA001;
    color: #000000;
    font-size: 13px;
    font-weight: 800;
    padding: 10px 20px;
    border-radius: 100px;
    display: flex;
    align-items: center;
    gap: 8px;
    box-shadow: 0 8px 25px rgba(253, 160, 1, 0.5), 0 0 15px rgba(0, 0, 0, 0.8);
    pointer-events: none;
    white-space: nowrap;
  }

  .vizza-occ-mobile-pill-display svg {
    stroke: #000000;
    transition: transform 0.25s ease;
  }

  .vizza-occasion-viewport {
    height: 460px !important;
    min-height: 400px !important;
    border-radius: 20px !important;
  }

  .vizza-occ-canvas-info {
    width: calc(100% - 24px) !important;
    height: auto !important;
    max-height: 220px !important;
    padding: 12px 14px !important;
    top: 12px !important;
    bottom: auto !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    box-sizing: border-box !important;
    background: rgba(5, 7, 11, 0.8) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    border-radius: 14px !important;
    align-items: flex-start !important;
    text-align: left !important;
    transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1) !important;
  }

  .vizza-occ-canvas-info.minimized {
    max-height: 46px !important;
    padding: 8px 14px !important;
    background: rgba(5, 7, 11, 0.65) !important;
  }

  .vizza-occ-canvas-info.minimized .occ-info-desc {
    opacity: 0 !important;
    max-height: 0 !important;
    margin: 0 !important;
    pointer-events: none !important;
  }

  .occ-info-toggle-btn {
    top: 10px !important;
    right: 12px !important;
  }

  .occ-info-badge {
    font-size: 10px !important;
    letter-spacing: 1px !important;
  }

  .occ-info-title {
    font-size: 14px !important;
    line-height: 1.25 !important;
    margin-top: 2px !important;
    padding-right: 28px !important;
  }

  .occ-info-desc {
    font-size: 12px !important;
    line-height: 1.4 !important;
    margin-top: 4px !important;
    color: #CBD5E1 !important;
    max-height: 120px !important;
    opacity: 1 !important;
    display: block !important;
    overflow: hidden !important;
    transition: opacity 0.25s ease, max-height 0.35s ease, margin 0.35s ease !important;
  }

  /* Section 4: Advantage Console Mobile Carousel (< 991px) */
  .vizza-adv-console {
    display: block !important;
    width: 100% !important;
    margin-top: 24px !important;
  }

  .vizza-adv-nav,
  .vizza-adv-mobile-dropdown-pill {
    display: none !important;
  }

  .vizza-adv-display-wrapper {
    position: relative;
    width: 100%;
    overflow: hidden;
    margin-top: 16px;
    border-radius: 24px;
  }

  .vizza-adv-display {
    display: flex !important;
    position: relative !important;
    inset: auto !important;
    gap: 16px !important;
    width: 100% !important;
    min-height: auto !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    overflow-x: auto !important;
    touch-action: pan-x pan-y !important;
    scroll-snap-type: x mandatory !important;
    scroll-behavior: smooth !important;
    -webkit-overflow-scrolling: touch !important;
    padding: 8px 16px 16px !important;
    scrollbar-width: none !important;
    box-sizing: border-box !important;
  }

  .vizza-adv-display::-webkit-scrollbar {
    display: none !important;
  }

  .vizza-adv-display .adv-panel-card,
  .vizza-adv-display .adv-panel-card.active {
    position: relative !important;
    inset: auto !important;
    flex: 0 0 calc(100% - 32px) !important;
    max-width: calc(100% - 32px) !important;
    min-width: calc(100% - 32px) !important;
    min-height: 460px !important;
    height: 460px !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-end !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    animation: none !important;
    transform: none !important;
    background: #0B0E17 !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    border-radius: 24px !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
    scroll-snap-align: center !important;
  }

  .vizza-adv-display .adv-panel-img-box,
  .adv-panel-img-box {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    z-index: 1 !important;
    overflow: hidden !important;
  }

  .vizza-adv-display .adv-panel-img-box img,
  .adv-panel-img-box img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
  }

  .vizza-adv-display .adv-panel-vignette,
  .adv-panel-vignette {
    position: absolute !important;
    inset: 0 !important;
    z-index: 2 !important;
    background: linear-gradient(
      to top,
      rgba(5, 7, 11, 0.98) 0%,
      rgba(5, 7, 11, 0.75) 55%,
      rgba(5, 7, 11, 0.2) 100%
    ) !important;
    pointer-events: none !important;
  }

  .vizza-adv-display .adv-panel-content,
  .adv-panel-content {
    position: relative !important;
    z-index: 5 !important;
    padding: 24px 20px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
  }

  .vizza-adv-dots {
    display: flex !important;
    justify-content: center;
    align-items: center;
    gap: 8px;
    margin-top: 16px;
  }

  .vizza-adot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.25);
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  }

  .vizza-adot.active {
    width: 24px;
    border-radius: 12px;
    background: #FDA001;
    box-shadow: 0 0 12px rgba(253, 160, 1, 0.7);
  }

  .adv-panel-content {
    padding: 24px 20px;
  }

  .adv-panel-headline {
    font-size: 22px;
  }

  .adv-panel-body {
    font-size: 14px;
  }

  .adv-panel-stats {
    flex-wrap: wrap;
    gap: 20px;
  }

  .adv-stat-box .stat-val {
    font-size: 22px;
  }

  /* Section 3: Anatomy Diagram Mobile Refinements */
  .vizza-diagram-wrapper {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .diagram-canvas {
    position: relative;
    width: 100%;
    height: auto;
    min-height: 0;
    border-radius: 20px;
    overflow: hidden;
    background: #0B0E17;
  }

  .diagram-base-img {
    width: 100%;
    height: auto;
    display: block;
  }

  .hotspot-btn {
    width: 32px;
    height: 32px;
    font-size: 13px;
  }

  .diagram-inspector {
    padding: 28px 20px !important;
    min-height: auto !important;
    text-align: center !important;
  }

  .spec-panel {
    padding: 0 !important;
    border-radius: 20px;
    text-align: center !important;
    display: none;
    flex-direction: column !important;
    align-items: center !important;
  }

  .spec-panel.active {
    display: flex !important;
  }

  .panel-num {
    text-align: center !important;
    margin: 0 auto 8px !important;
  }

  .spec-panel h3 {
    text-align: center !important;
    font-size: 20px !important;
    margin: 0 auto 10px !important;
  }

  .panel-intro {
    text-align: center !important;
    margin: 0 auto 20px !important;
  }

  .spec-details-table {
    width: 100% !important;
  }

  .sd-row {
    text-align: center !important;
    align-items: center !important;
    border-left: none !important;
    border-top: 2px solid var(--vizza-orange) !important;
  }

  .sd-label,
  .sd-val {
    text-align: center !important;
  }

  /* Section 4: Comparison Table Mobile Refinements */
  .vizza-table-swipe-hint {
    display: flex !important;
    align-items: center;
    justify-content: center;
    gap: 6px;
    font-size: 11px;
    font-weight: 800;
    color: #FDA001;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    margin-bottom: 12px;
    opacity: 0.95;
  }

  .vizza-compare-table-wrapper {
    border-radius: 18px !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.7) !important;
  }

  .vizza-compare-table {
    min-width: 660px !important;
    border-collapse: separate !important;
    border-spacing: 0 !important;
  }

  .vizza-compare-table th,
  .vizza-compare-table td {
    padding: 12px 14px !important;
    font-size: 12.5px !important;
    white-space: nowrap !important;
  }

  .vizza-compare-table th:first-child,
  .vizza-compare-table td:first-child {
    position: sticky !important;
    left: 0 !important;
    z-index: 5 !important;
    background: #0B0E17 !important;
    border-right: 1px solid rgba(255, 255, 255, 0.1) !important;
    box-shadow: 4px 0 12px rgba(0, 0, 0, 0.6) !important;
  }

  .vizza-compare-table thead th:first-child {
    background: #111522 !important;
    z-index: 6 !important;
  }

  .th-vizza,
  .td-vizza {
    background: rgba(253, 160, 1, 0.1) !important;
  }

  /* Section 5: Day / Night Minimal Showcase */
  .vm-viewport {
    height: 340px !important;
    min-height: 300px !important;
    border-radius: 20px !important;
  }

  .vm-control-bar {
    position: relative !important;
    bottom: auto !important;
    left: auto !important;
    right: auto !important;
    width: 100% !important;
    margin: 0 !important;
  }

  /* Section 6: App Showcase Mobile Refinements */
  .vizza-app-wrapper {
    grid-template-columns: 1fr !important;
    gap: 28px !important;
    padding: 28px 20px !important;
    text-align: center !important;
  }

  .vizza-app-text {
    text-align: center !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
  }

  .vizza-app-text .vizza-section-title {
    text-align: center !important;
  }

  .vizza-app-text .vizza-section-desc {
    text-align: center !important;
    margin: 0 auto 20px !important;
  }

  .app-feature-list {
    width: 100% !important;
    margin: 20px 0 24px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
    align-items: center !important;
  }

  .af-item {
    width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    gap: 6px !important;
    padding: 14px 16px !important;
    background: rgba(255, 255, 255, 0.03) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: 14px !important;
    box-sizing: border-box !important;
  }

  .af-item strong {
    font-size: 15px !important;
    color: #FFFFFF !important;
    font-weight: 700 !important;
    display: block !important;
    text-align: center !important;
  }

  .af-item span {
    font-size: 13px !important;
    line-height: 1.45 !important;
    color: #94A3B8 !important;
    display: block !important;
    text-align: center !important;
  }

  .app-cta {
    display: flex !important;
    justify-content: center !important;
    width: 100% !important;
  }

  /* Section 7: Calculator & Form */
  .vizza-quote-section .quote-header .vizza-section-title {
    font-size: 28px !important;
    line-height: 1.18 !important;
    letter-spacing: -0.5px !important;
    margin-bottom: 14px !important;
  }

  .vizza-quote-section .quote-header .vizza-section-desc {
    font-size: 14px !important;
    line-height: 1.45 !important;
    padding: 0 4px !important;
  }

  .form-grid-row {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }

  .vizza-full-width-form {
    gap: 18px !important;
    margin-top: 24px !important;
  }

  .vizza-quote-wrapper {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  .vizza-calc-box,
  .vizza-form-box {
    padding: 24px 20px;
    border-radius: 20px;
  }

  .vizza-form-grid {
    grid-template-columns: 1fr;
  }

  /* Footer Mobile Centering */
  .vizza-footer-container {
    padding: 0 24px !important;
  }

  .vizza-footer-banner-21x9 {
    height: 180px !important;
    border-radius: 20px !important;
  }

  .banner-big-animated-title {
    font-size: 32px !important;
    line-height: 1.15 !important;
  }

  .vizza-footer-grid {
    grid-template-columns: 1fr !important;
    gap: 36px !important;
    text-align: center !important;
    margin-bottom: 40px !important;
  }

  .vizza-fcol {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
  }

  .vizza-fcol-brand .vizza-footer-brand-logo {
    display: inline-flex !important;
    justify-content: center !important;
    margin: 0 auto 14px !important;
  }

  .vizza-footer-logo-img {
    margin: 0 auto !important;
  }

  .vizza-footer-desc {
    text-align: center !important;
    max-width: 420px !important;
    margin: 0 auto !important;
  }

  .vizza-ftitle {
    text-align: center !important;
    margin-bottom: 14px !important;
  }

  .vizza-flinks {
    align-items: center !important;
    text-align: center !important;
  }

  .vizza-flinks li {
    text-align: center !important;
  }

  .vizza-footer-contact {
    align-items: center !important;
    text-align: center !important;
  }

  .vizza-phone-link,
  .vizza-email-link {
    align-items: center !important;
    text-align: center !important;
  }

  .vizza-footer-social-desc {
    text-align: center !important;
    max-width: 380px !important;
    margin: 0 auto 16px !important;
  }

  .vizza-footer-social-icons {
    justify-content: center !important;
    margin: 0 auto !important;
  }

  .vizza-footer-bottom {
    flex-direction: column !important;
    gap: 14px !important;
    text-align: center !important;
    align-items: center !important;
  }

  .vizza-footer-bottom p {
    text-align: center !important;
  }

  .vizza-footer-legal {
    justify-content: center !important;
    gap: 18px !important;
  }
}

/* --- Small Mobile Breakpoint (max-width: 480px) --- */
@media (max-width: 480px) {
  .vizza-hero-title {
    font-size: 28px;
  }

  .vizza-section-title {
    font-size: 26px;
  }

  .banner-big-animated-title {
    font-size: 30px;
  }

  .adv-nav-item {
    min-width: 220px;
  }

  .occ-tab-btn {
    padding: 6px 10px;
    font-size: 10.5px;
  }

  .vizza-occ-canvas-wrapper {
    height: 380px;
  }
}

/* ==========================================================================
   14. SMOOTH SCROLL REVEAL TRANSITION ANIMATIONS (APPLE-GRADE AESTHETIC)
   ========================================================================== */

/* Hero Entrance Cascade */
.vizza-hero-title {
  animation: vizzaFadeUp 0.85s cubic-bezier(0.16, 1, 0.3, 1) 0.1s both;
}

.vizza-hero-subtitle {
  animation: vizzaFadeUp 0.85s cubic-bezier(0.16, 1, 0.3, 1) 0.22s both;
}

.vizza-hero-actions {
  animation: vizzaFadeUp 0.85s cubic-bezier(0.16, 1, 0.3, 1) 0.34s both;
}

.vizza-hero-scene-controller {
  animation: vizzaFadeUp 0.85s cubic-bezier(0.16, 1, 0.3, 1) 0.46s both;
}

@keyframes vizzaFadeUp {
  0% {
    opacity: 0;
    transform: translateY(28px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Base Initial State for All Section Headers, Viewports, Cards & Forms */
.vizza-section-header,
.quote-header,
.spec-header,
.app-header,
.vizza-occasion-viewport,
.vizza-products-grid,
.vizza-prod-card,
.vizza-adv-console,
.vizza-diagram-wrapper,
.diagram-canvas,
.diagram-inspector,
.vizza-minimal-showcase,
.vizza-app-wrapper,
.vizza-app-text,
.vizza-app-visual,
.af-item,
.vizza-compare-table-wrapper,
.vizza-table-swipe-hint,
.vizza-full-width-form,
.vizza-review-card,
.pstep-card,
.bento-card,
.vizza-fcol,
.vizza-reveal {
  opacity: 0;
  transform: translateY(32px);
  transition: opacity 0.85s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.85s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform;
}

/* In-View Active State (Smooth Float Up & Fade In) */
.vizza-section-header.vizza-in-view,
.quote-header.vizza-in-view,
.spec-header.vizza-in-view,
.app-header.vizza-in-view,
.vizza-occasion-viewport.vizza-in-view,
.vizza-products-grid.vizza-in-view,
.vizza-prod-card.vizza-in-view,
.vizza-adv-console.vizza-in-view,
.vizza-diagram-wrapper.vizza-in-view,
.diagram-canvas.vizza-in-view,
.diagram-inspector.vizza-in-view,
.vizza-minimal-showcase.vizza-in-view,
.vizza-app-wrapper.vizza-in-view,
.vizza-app-text.vizza-in-view,
.vizza-app-visual.vizza-in-view,
.af-item.vizza-in-view,
.vizza-compare-table-wrapper.vizza-in-view,
.vizza-table-swipe-hint.vizza-in-view,
.vizza-full-width-form.vizza-in-view,
.vizza-review-card.vizza-in-view,
.pstep-card.vizza-in-view,
.bento-card.vizza-in-view,
.vizza-fcol.vizza-in-view,
.vizza-reveal.vizza-in-view {
  opacity: 1 !important;
  transform: translateY(0) scale(1) !important;
}

/* Staggered Entrance Timing for Product Cards */
.vizza-products-grid .vizza-prod-card:nth-child(1) { transition-delay: 0.04s; }
.vizza-products-grid .vizza-prod-card:nth-child(2) { transition-delay: 0.14s; }
.vizza-products-grid .vizza-prod-card:nth-child(3) { transition-delay: 0.24s; }
.vizza-products-grid .vizza-prod-card:nth-child(4) { transition-delay: 0.34s; }

/* Staggered Entrance Timing for App Feature Items */
.app-feature-list .af-item:nth-child(1) { transition-delay: 0.08s; }
.app-feature-list .af-item:nth-child(2) { transition-delay: 0.20s; }
.app-feature-list .af-item:nth-child(3) { transition-delay: 0.32s; }

/* Staggered Entrance Timing for Footer Columns */
.vizza-footer-grid .vizza-fcol:nth-child(1) { transition-delay: 0.05s; }
.vizza-footer-grid .vizza-fcol:nth-child(2) { transition-delay: 0.15s; }
.vizza-footer-grid .vizza-fcol:nth-child(3) { transition-delay: 0.25s; }
.vizza-footer-grid .vizza-fcol:nth-child(4) { transition-delay: 0.35s; }

/* Micro-Transitions for Interactive Buttons */
.vizza-btn-primary,
.vizza-btn-glass,
.vizza-remote-pill-btn,
.occ-tab-btn,
.vm-time-btn,
.vm-angle-btn,
.scene-btn,
.vizza-service-pill {
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1),
              background 0.25s ease,
              border-color 0.25s ease,
              box-shadow 0.25s ease !important;
}

.vizza-btn-primary:hover,
.vizza-btn-glass:hover,
.occ-tab-btn:hover,
.vm-time-btn:hover,
.vm-angle-btn:hover,
.scene-btn:hover {
  transform: translateY(-2px);
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
    transition: none !important;
  }
}

/* ==========================================================================
   LEGAL PAGES (PRIVACY POLICY, TERMS OF SERVICE, COOKIE POLICY)
   VIZZALIGHTS DARK LUXURY DESIGN SYSTEM
   ========================================================================== */

.privacy-page-wrapper {
  background: #05070B;
  color: #CBD5E1;
  font-family: var(--font-main, 'Mulish', sans-serif);
  min-height: 100vh;
  padding-bottom: 100px;
}

/* Header Banner */
.privacy-hero {
  position: relative;
  padding: 120px 0 60px;
  background: radial-gradient(circle at 50% 0%, rgba(253, 160, 1, 0.12) 0%, rgba(5, 7, 11, 1) 70%);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  text-align: center;
}

.privacy-hero .privacy-container {
  max-width: 800px;
  margin: 0 auto;
  padding: 0 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}

.privacy-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 11.5px;
  font-weight: 800;
  color: #FDA001;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  background: rgba(253, 160, 1, 0.1);
  border: 1px solid rgba(253, 160, 1, 0.3);
  padding: 6px 16px;
  border-radius: 100px;
  margin: 0 auto;
}

.privacy-badge-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #FDA001;
  box-shadow: 0 0 8px #FDA001;
}

.privacy-title {
  font-size: 44px;
  font-weight: 900;
  color: #FFFFFF;
  line-height: 1.15;
  margin: 0;
  letter-spacing: -1px;
}

.privacy-effective {
  font-size: 14px;
  color: #94A3B8;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 8px;
}

.privacy-effective i {
  color: #FDA001;
}

/* Quick Document Search Bar */
.privacy-search-wrapper {
  position: relative;
  width: 100%;
  max-width: 560px;
  margin: 16px auto 0;
}

.privacy-search-wrapper input,
#privacySearchInput {
  width: 100%;
  background: #0B0E17;
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 100px;
  padding: 14px 44px 14px 48px;
  color: #FFFFFF;
  font-size: 14px;
  font-family: inherit;
  outline: none;
  transition: all 0.3s ease;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
  box-sizing: border-box;
}

.privacy-search-wrapper input:focus,
#privacySearchInput:focus {
  border-color: #FDA001;
  box-shadow: 0 0 25px rgba(253, 160, 1, 0.3);
}

.privacy-search-icon {
  position: absolute;
  left: 20px;
  top: 50%;
  transform: translateY(-50%);
  color: #FDA001;
  font-size: 15px;
  pointer-events: none;
}

.privacy-search-clear {
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  background: transparent;
  border: none;
  color: #94A3B8;
  cursor: pointer;
  padding: 4px;
  display: none;
}

/* Main Layout Grid */
.privacy-container {
  max-width: 1240px;
  margin: 0 auto;
  padding: 60px 24px 0;
}

.privacy-content-grid {
  display: grid;
  grid-template-columns: 320px 1fr;
  gap: 40px;
  align-items: start;
}

/* Sidebar Table of Contents & Search */
.privacy-sidebar {
  position: sticky;
  top: 100px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.privacy-search-box {
  position: relative;
}

.privacy-search-box input {
  width: 100%;
  background: rgba(11, 14, 23, 0.8);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 14px;
  padding: 12px 40px 12px 42px;
  color: #FFFFFF;
  font-size: 14px;
  outline: none;
  transition: border-color 0.3s ease;
  box-sizing: border-box;
}

.privacy-search-box input:focus {
  border-color: #FDA001;
  box-shadow: 0 0 15px rgba(253, 160, 1, 0.25);
}

.privacy-search-icon {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: #64748B;
  font-size: 14px;
}

.privacy-search-clear {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  background: transparent;
  border: none;
  color: #94A3B8;
  cursor: pointer;
  display: none;
}

.privacy-nav-card,
.privacy-sidebar-inner {
  background: #0B0E17;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 20px;
  padding: 24px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
}

.sidebar-header {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 16px;
  font-weight: 800;
  color: #FFFFFF;
  margin-bottom: 24px;
  padding-bottom: 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.sidebar-header i,
.sidebar-header svg {
  color: #FDA001;
  font-size: 16px;
}

.privacy-nav-card h4 {
  font-size: 12px;
  font-weight: 800;
  color: #FDA001;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  margin: 0 0 20px;
}

.privacy-nav ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.privacy-nav a {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 14px;
  padding: 12px 16px;
  border-radius: 12px;
  color: #94A3B8;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  transition: all 0.25s ease;
}

.privacy-nav a i,
.privacy-nav a svg {
  font-size: 16px;
  width: 20px;
  text-align: center;
  color: #FDA001;
  flex-shrink: 0;
}

.privacy-nav a:hover {
  color: #FFFFFF;
  background: rgba(255, 255, 255, 0.06);
}

.privacy-nav a.active {
  color: #FDA001;
  background: rgba(253, 160, 1, 0.14);
  border: 1px solid rgba(253, 160, 1, 0.5);
  box-shadow: 0 4px 20px rgba(253, 160, 1, 0.15);
  font-weight: 700;
}

.privacy-nav a.active i,
.privacy-nav a.active svg {
  color: #FDA001;
  transform: scale(1.1);
  filter: drop-shadow(0 0 6px rgba(253, 160, 1, 0.6));
}

/* Content Area & Sections */
.privacy-content-section,
.privacy-content,
.privacy-article {
  display: flex;
  flex-direction: column;
  gap: 36px;
}

.privacy-intro-card {
  background: #0B0E17;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 24px;
  padding: 36px 40px;
  margin-bottom: 36px;
  display: flex;
  align-items: flex-start;
  gap: 24px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
}

.privacy-intro-icon {
  width: 52px;
  height: 52px;
  min-width: 52px;
  background: rgba(253, 160, 1, 0.12);
  border: 1px solid rgba(253, 160, 1, 0.3);
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #FDA001;
  font-size: 22px;
}

.privacy-intro-text p {
  font-size: 15px;
  line-height: 1.7;
  color: #CBD5E1;
  margin: 0 0 12px;
}

.privacy-intro-text p:last-child {
  margin-bottom: 0;
}

.privacy-section {
  background: #0B0E17;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 24px;
  padding: 40px;
  margin-bottom: 36px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
}

.privacy-section:last-child,
.privacy-intro-card:last-child {
  margin-bottom: 0;
}

.section-heading-wrapper {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 24px;
  padding-bottom: 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.section-num {
  font-size: 12px;
  font-weight: 900;
  color: #FDA001;
  background: rgba(253, 160, 1, 0.12);
  border: 1px solid rgba(253, 160, 1, 0.3);
  padding: 4px 10px;
  border-radius: 8px;
}

.section-heading-wrapper h2 {
  font-size: 24px;
  font-weight: 800;
  color: #FFFFFF;
  margin: 0;
}

.privacy-section h3 {
  font-size: 18px;
  font-weight: 700;
  color: #FFFFFF;
  margin: 24px 0 12px;
}

.privacy-section p {
  font-size: 14.5px;
  line-height: 1.75;
  color: #94A3B8;
  margin: 0 0 16px;
}

.privacy-section ul, .privacy-section ol {
  padding-left: 20px;
  margin: 0 0 20px;
}

.privacy-section li {
  font-size: 14.5px;
  line-height: 1.75;
  color: #94A3B8;
  margin-bottom: 8px;
}

/* Feature & Definition Cards Grid */
.def-grid, .sharing-grid, .analytics-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 24px;
  margin: 28px 0;
}

.purpose-grid {
  display: flex;
  flex-direction: column;
  gap: 24px;
  margin: 28px 0;
}

.def-card, .purpose-item, .sharing-box, .analytics-card, .general-block, .policy-card {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 20px;
  padding: 28px 32px;
  margin-bottom: 24px;
  transition: all 0.3s ease;
}

.def-card:last-child, .purpose-item:last-child, .sharing-box:last-child, .analytics-card:last-child, .general-block:last-child, .policy-card:last-child {
  margin-bottom: 0;
}

.def-card:hover, .purpose-item:hover, .sharing-box:hover, .analytics-card:hover, .general-block:hover {
  border-color: rgba(253, 160, 1, 0.4);
  background: rgba(255, 255, 255, 0.05);
  transform: translateY(-2px);
}

.def-card-header, .sharing-box-header, .analytics-card-header, .general-block-title, .policy-card-title {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}

.def-card-header i, .sharing-box-header i, .general-block-title i, .policy-card-title i {
  color: #FDA001;
  font-size: 18px;
}

.def-card-header h4, .sharing-box-header h4, .analytics-card-header h3, .general-block-title h3, .policy-card-title h3 {
  font-size: 16px;
  font-weight: 700;
  color: #FFFFFF;
  margin: 0;
}

/* Contact Us Card in Legal Pages */
.privacy-contact-card {
  background: linear-gradient(135deg, #0B0E17 0%, rgba(253, 160, 1, 0.08) 100%);
  border: 1px solid rgba(253, 160, 1, 0.3);
  border-radius: 24px;
  padding: 36px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.6);
}

.contact-card-header {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-bottom: 24px;
  padding-bottom: 20px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.contact-header-icon {
  width: 54px;
  height: 54px;
  background: rgba(253, 160, 1, 0.15);
  border: 1px solid rgba(253, 160, 1, 0.3);
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #FDA001;
  font-size: 22px;
}

.contact-card-header h3 {
  font-size: 20px;
  font-weight: 800;
  color: #FFFFFF;
  margin: 0 0 4px;
}

.contact-card-header p {
  font-size: 14px;
  color: #94A3B8;
  margin: 0;
}

.contact-methods-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
}

.contact-method-item {
  display: flex;
  align-items: center;
  gap: 14px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 16px;
  padding: 18px;
  color: #FFFFFF;
  text-decoration: none;
  transition: all 0.3s ease;
}

.contact-method-item:not(.non-link):hover {
  background: rgba(253, 160, 1, 0.12);
  border-color: #FDA001;
  transform: translateY(-3px);
}

.contact-item-icon {
  width: 40px;
  height: 40px;
  min-width: 40px;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #FDA001;
  font-size: 16px;
}

.contact-item-text {
  display: flex;
  flex-direction: column;
}

.contact-item-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: #64748B;
  margin-bottom: 2px;
}

.contact-item-val {
  font-size: 13.5px;
  font-weight: 700;
  color: #FFFFFF;
  word-break: break-all;
}

/* Floating Back To Top Button */
.privacy-back-to-top {
  position: fixed;
  bottom: 30px;
  right: 30px;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: #0B0E17;
  color: #FDA001;
  border: 1px solid rgba(253, 160, 1, 0.4);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.8);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  cursor: pointer;
  z-index: 99;
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  outline: none;
}

.privacy-back-to-top.visible {
  opacity: 1;
  visibility: visible;
}

.privacy-back-to-top:hover {
  background: #FDA001;
  color: #000000;
  transform: translateY(-4px);
  box-shadow: 0 15px 35px rgba(253, 160, 1, 0.5);
}

/* Cookie Types & Cookie Purpose Cards */
.cookies-list-container {
  display: flex;
  flex-direction: column;
  gap: 28px;
  margin-top: 28px;
}

.cookie-type-card {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 20px;
  padding: 28px 32px;
  margin-bottom: 24px;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
}

.cookie-type-card:last-child {
  margin-bottom: 0;
}

.cookie-type-card:hover {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(253, 160, 1, 0.4);
  transform: translateY(-2px);
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.6);
}

.cookie-card-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  margin-bottom: 14px;
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.cookie-title-meta {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
}

.cookie-name {
  font-size: 18px;
  font-weight: 800;
  color: #FFFFFF;
  margin: 0;
}

.cookie-badges {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}

.badge-type {
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  padding: 4px 12px;
  border-radius: 100px;
  background: rgba(253, 160, 1, 0.15);
  color: #FDA001;
  border: 1px solid rgba(253, 160, 1, 0.3);
}

.badge-type.session {
  background: rgba(59, 130, 246, 0.15);
  color: #60A5FA;
  border-color: rgba(59, 130, 246, 0.3);
}

.badge-admin {
  font-size: 11.5px;
  font-weight: 600;
  color: #94A3B8;
  background: rgba(255, 255, 255, 0.06);
  padding: 4px 12px;
  border-radius: 100px;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.badge-admin.third-party {
  color: #F87171;
  background: rgba(239, 68, 68, 0.12);
  border-color: rgba(239, 68, 68, 0.3);
}

.cookie-purpose {
  font-size: 14.5px;
  line-height: 1.7;
  color: #CBD5E1;
  margin: 0;
}

.cookie-purpose strong {
  color: #FDA001;
  font-weight: 700;
}

/* Browser Opt-Out Grid */
.browser-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 20px;
  margin-top: 24px;
}

.browser-card {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 18px;
  padding: 22px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 16px;
  transition: all 0.3s ease;
}

.browser-card:hover {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(253, 160, 1, 0.4);
  transform: translateY(-2px);
}

.browser-card-header {
  display: flex;
  align-items: center;
  gap: 14px;
}

.browser-icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: rgba(253, 160, 1, 0.12);
  border: 1px solid rgba(253, 160, 1, 0.25);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #FDA001;
  font-size: 18px;
}

.browser-card-header h3 {
  font-size: 16px;
  font-weight: 700;
  color: #FFFFFF;
  margin: 0;
}

/* Link Button */
.privacy-link-btn {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  background: rgba(253, 160, 1, 0.1);
  border: 1px solid rgba(253, 160, 1, 0.3);
  border-radius: 12px;
  padding: 10px 18px;
  font-size: 13px;
  font-weight: 700;
  color: #FDA001;
  text-decoration: none;
  transition: all 0.25s ease;
}

.privacy-link-btn:hover {
  background: #FDA001;
  color: #000000;
  border-color: #FDA001;
}

/* Highlight & Special Policy Cards */
.policy-card.highlight-card {
  border-left: 4px solid #FDA001;
  background: rgba(253, 160, 1, 0.04);
}

.note-text {
  font-size: 13.5px !important;
  font-weight: 700;
  color: #FDA001 !important;
  background: rgba(253, 160, 1, 0.12);
  border: 1px solid rgba(253, 160, 1, 0.25);
  padding: 12px 16px;
  border-radius: 12px;
  margin-top: 16px !important;
  margin-bottom: 0 !important;
}

.disclosure-subblock {
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px dashed rgba(255, 255, 255, 0.1);
}

.styled-privacy-list {
  padding-left: 20px;
  margin-top: 10px;
}

.styled-privacy-list li {
  font-size: 14px;
  line-height: 1.7;
  color: #94A3B8;
  margin-bottom: 6px;
}

.search-hidden {
  display: none !important;
}

/* Responsive Overrides for Legal Pages */
@media (max-width: 992px) {
  .privacy-content-grid {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  .privacy-sidebar {
    position: static;
    top: 0;
    margin-bottom: 24px;
  }

  .privacy-nav ul {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 10px;
  }

  .def-grid, .sharing-grid, .analytics-grid, .browser-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .privacy-title {
    font-size: 34px;
  }
}

@media (max-width: 768px) {
  .privacy-hero {
    padding: 100px 0 36px;
  }

  .privacy-hero .privacy-container {
    padding: 0 16px;
  }

  .privacy-title {
    font-size: 30px;
  }

  .privacy-effective {
    font-size: 13px;
  }

  .privacy-container {
    padding: 32px 16px 0;
  }

  .privacy-section,
  .privacy-intro-card {
    padding: 24px 20px;
    border-radius: 18px;
    margin-bottom: 24px !important;
  }

  .section-heading-wrapper {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 20px;
    padding-bottom: 14px;
  }

  .def-card-header,
  .sharing-box-header,
  .analytics-card-header,
  .general-block-title,
  .policy-card-title {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }

  .section-heading-wrapper h2 {
    font-size: 20px;
  }

  .cookie-card-top {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }

  .cookie-type-card {
    padding: 20px;
  }

  .def-card, .purpose-item, .sharing-box, .analytics-card, .general-block, .policy-card {
    padding: 20px 24px;
  }

  .contact-card-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
  }

  .contact-methods-grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }
}

@media (max-width: 480px) {
  .privacy-hero {
    padding: 90px 0 30px;
  }

  .privacy-title {
    font-size: 24px;
  }

  .privacy-nav ul {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .privacy-sidebar-inner {
    padding: 18px;
  }

  .privacy-intro-card {
    flex-direction: column;
    gap: 16px;
  }

  .privacy-section,
  .privacy-intro-card {
    padding: 20px 16px;
    border-radius: 16px;
  }

  .privacy-search-wrapper input,
  #privacySearchInput {
    padding: 12px 36px 12px 42px;
    font-size: 13px;
  }

  .privacy-search-icon {
    left: 14px;
    font-size: 14px;
  }

  .privacy-back-to-top {
    bottom: 20px;
    right: 20px;
    width: 42px;
    height: 42px;
    font-size: 16px;
  }
}

/* ==========================================================================
   SMS OPT-IN CONSENT CHECKBOX (HOME ESTIMATE FORM)
   ========================================================================== */
.vizza-consent-group {
  margin-top: 14px;
  margin-bottom: 24px;
  width: 100%;
}

.vizza-checkbox-label {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  cursor: pointer;
  user-select: none;
  position: relative;
}

.vizza-checkbox-input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}

.vizza-checkbox-custom {
  position: relative;
  width: 20px;
  height: 20px;
  min-width: 20px;
  min-height: 20px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 6px;
  margin-top: 2px;
  transition: all 0.25s ease;
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.4);
}

.vizza-checkbox-label:hover .vizza-checkbox-custom {
  border-color: #FDA001;
  background: rgba(253, 160, 1, 0.1);
}

.vizza-checkbox-input:checked ~ .vizza-checkbox-custom {
  background: #FDA001;
  border-color: #FDA001;
  box-shadow: 0 0 12px rgba(253, 160, 1, 0.4);
}

.vizza-checkbox-custom::after {
  content: "";
  position: absolute;
  display: none;
  left: 6px;
  top: 2px;
  width: 5px;
  height: 10px;
  border: solid #000000;
  border-width: 0 2.5px 2.5px 0;
  transform: rotate(45deg);
}

.vizza-checkbox-input:checked ~ .vizza-checkbox-custom::after {
  display: block;
}

.vizza-checkbox-text {
  font-size: 13px;
  line-height: 1.6;
  color: #94A3B8;
  font-weight: 500;
  text-align: left;
}

.vizza-checkbox-text a {
  color: #FDA001;
  text-decoration: underline;
  transition: color 0.2s ease;
}

.vizza-checkbox-text a:hover {
  color: #FFB834;
}

/* Premium Form Success Status Display */
.form-success-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: rgba(11, 14, 23, 0.95);
  border: 1px solid rgba(253, 160, 1, 0.4);
  border-radius: 24px;
  padding: 48px 32px;
  max-width: 600px;
  margin: 20px auto 0;
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.8), 0 0 30px rgba(253, 160, 1, 0.2);
  backdrop-filter: blur(16px);
  text-align: center;
  transition: all 0.4s ease;
}

.success-icon-badge {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: rgba(253, 160, 1, 0.15);
  border: 2px solid #FDA001;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #FDA001;
  font-size: 36px;
  margin-bottom: 20px;
  box-shadow: 0 0 20px rgba(253, 160, 1, 0.3);
  animation: vizzaPulse 2s infinite ease-in-out;
}

@keyframes vizzaPulse {
  0% { transform: scale(1); box-shadow: 0 0 20px rgba(253, 160, 1, 0.3); }
  50% { transform: scale(1.06); box-shadow: 0 0 30px rgba(253, 160, 1, 0.5); }
  100% { transform: scale(1); box-shadow: 0 0 20px rgba(253, 160, 1, 0.3); }
}

.success-title {
  font-size: 26px;
  font-weight: 800;
  color: #FFFFFF;
  margin: 0 0 12px;
  letter-spacing: -0.5px;
}

.success-desc {
  font-size: 15px;
  line-height: 1.6;
  color: #CBD5E1;
  max-width: 480px;
  margin: 0 0 20px;
}

.success-badge-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(253, 160, 1, 0.1);
  border: 1px solid rgba(253, 160, 1, 0.3);
  padding: 8px 18px;
  border-radius: 20px;
  font-size: 13px;
  font-weight: 700;
  color: #FDA001;
}

.vizza-fade-in {
  animation: vizzaFadeIn 0.4s ease forwards;
}

@keyframes vizzaFadeIn {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ==========================================================================
   FORM STATUS OVERLAY STYLING (JS FORM HANDLER)
   ========================================================================== */
.form-status-overlay {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  background: rgba(11, 14, 23, 0.95);
  border: 1px solid rgba(253, 160, 1, 0.4);
  border-radius: 24px;
  padding: 48px 32px;
  width: 100%;
  max-width: 600px;
  margin: 0 auto;
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.8), 0 0 30px rgba(253, 160, 1, 0.2);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  opacity: 0;
  transform: translateY(16px);
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  box-sizing: border-box;
}

.form-status-overlay.active {
  opacity: 1;
  transform: translateY(0);
}

.form-status-icon {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: rgba(253, 160, 1, 0.15);
  border: 2px solid #FDA001;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #FDA001;
  font-size: 36px;
  margin: 0 auto 20px;
  box-shadow: 0 0 24px rgba(253, 160, 1, 0.35);
  animation: statusIconPulse 2s infinite ease-in-out;
}

.form-status-icon.loading {
  border-color: rgba(255, 255, 255, 0.3);
  color: #FDA001;
  box-shadow: none;
  animation: none;
}

.form-status-icon.error {
  background: rgba(239, 68, 68, 0.15);
  border-color: #EF4444;
  color: #EF4444;
  box-shadow: 0 0 20px rgba(239, 68, 68, 0.4);
  animation: none;
}

@keyframes statusIconPulse {
  0% { transform: scale(1); box-shadow: 0 0 20px rgba(253, 160, 1, 0.35); }
  50% { transform: scale(1.06); box-shadow: 0 0 32px rgba(253, 160, 1, 0.55); }
  100% { transform: scale(1); box-shadow: 0 0 20px rgba(253, 160, 1, 0.35); }
}

.form-status-title {
  font-size: 26px;
  font-weight: 800;
  color: #FFFFFF;
  margin: 0 0 12px;
  letter-spacing: -0.5px;
}

.form-status-desc {
  font-size: 15px;
  line-height: 1.6;
  color: #CBD5E1;
  max-width: 480px;
  margin: 0 0 20px;
}

.form-status-desc strong {
  color: #FDA001;
}

.form-status-phone-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(253, 160, 1, 0.1);
  border: 1px solid rgba(253, 160, 1, 0.3);
  padding: 10px 20px;
  border-radius: 20px;
  font-size: 13.5px;
  font-weight: 700;
  color: #FDA001;
}

.form-status-phone-cta a {
  color: #FDA001;
  text-decoration: underline;
  transition: color 0.2s ease;
}

.form-status-phone-cta a:hover {
  color: #FFB834;
}

/* ==========================================================================
   PRODUCTS SHOWCASE & MOBILE AUTO-LOOP CAROUSEL
   ========================================================================== */
.vizza-products-wrapper {
  position: relative;
  width: 100%;
  margin-top: 48px;
}

.vizza-products-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}

.vizza-prod-card {
  background: rgba(11, 14, 23, 0.75);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 24px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: all 0.35s ease;
}

.vizza-prod-card:hover {
  transform: translateY(-4px);
  border-color: rgba(253, 160, 1, 0.4);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.7);
}

.prod-img-box {
  position: relative;
  width: 100%;
  aspect-ratio: 3/4;
  overflow: hidden;
  background: #000000;
}

.prod-img-box img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.vizza-prod-card:hover .prod-img-box img {
  transform: scale(1.05);
}

.prod-card-body {
  padding: 24px 20px;
  background: rgba(11, 14, 23, 0.95);
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex-grow: 1;
}

.prod-category {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 1.5px;
  color: #FDA001;
  text-transform: uppercase;
}

.prod-card-body h3 {
  font-size: 16px;
  font-weight: 700;
  color: #FFFFFF;
  line-height: 1.35;
  margin: 0;
}

.vizza-products-dots {
  display: none;
}

/* Mobile responsive carousel overlay (< 991px) */
@media (max-width: 991px) {
  .vizza-products-wrapper {
    position: relative;
    width: 100%;
    overflow: hidden;
    margin-top: 24px;
  }

  .vizza-products-grid {
    display: flex !important;
    gap: 16px !important;
    width: 100% !important;
    overflow-x: auto !important;
    touch-action: pan-x pan-y !important;
    scroll-snap-type: x mandatory !important;
    scroll-behavior: smooth !important;
    -webkit-overflow-scrolling: touch !important;
    padding: 8px 16px 16px !important;
    scrollbar-width: none !important;
    box-sizing: border-box !important;
  }

  .vizza-products-grid::-webkit-scrollbar {
    display: none !important;
  }

  .vizza-prod-card {
    flex: 0 0 calc(100% - 32px) !important;
    max-width: calc(100% - 32px) !important;
    min-width: calc(100% - 32px) !important;
    border-radius: 24px !important;
    box-sizing: border-box !important;
    scroll-snap-align: center !important;
  }

  .prod-card-body {
    padding: 18px 16px !important;
  }

  .prod-card-body h3 {
    font-size: 14.5px !important;
  }

  .vizza-products-dots {
    display: flex !important;
    justify-content: center;
    align-items: center;
    gap: 8px;
    margin-top: 16px;
  }

  .vizza-pdot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.25);
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  }

  .vizza-pdot.active {
    width: 24px;
    border-radius: 12px;
    background: #FDA001;
    box-shadow: 0 0 12px rgba(253, 160, 1, 0.7);
  }
}

/* Small Mobile Screen Header Refinements (< 480px) */
@media (max-width: 480px) {
  .vizza-section-title {
    font-size: 32px !important;
    line-height: 1.16 !important;
    letter-spacing: -0.6px !important;
  }

  .vizza-hero-title {
    font-size: 36px !important;
    line-height: 1.14 !important;
    letter-spacing: -0.8px !important;
  }
}

/* ==========================================================================
   Global Scroll Margin & Legal Page Navigation Enhancements
   ========================================================================== */
section[id], 
.privacy-section,
[id^="section-"] {
  scroll-margin-top: calc(var(--header-height, 105px) - 15px);
}

.privacy-back-to-top {
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.3s ease;
  transform: translateY(10px);
}

.privacy-back-to-top.show,
.privacy-back-to-top.visible {
  opacity: 1 !important;
  visibility: visible !important;
  transform: translateY(0) !important;
}

.search-hidden {
  display: none !important;
}

/* ==========================================================================
   404 ERROR PAGE STYLES (Apple Minimal Aesthetic)
   ========================================================================== */
.vizza-404-page {
  position: relative;
  min-height: 85vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 140px 0 80px;
  background: radial-gradient(circle at 50% 30%, rgba(253, 160, 1, 0.08) 0%, rgba(2, 4, 12, 1) 70%);
  text-align: center;
  overflow: hidden;
}

.vizza-404-glow {
  position: absolute;
  top: 25%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 500px;
  height: 500px;
  background: radial-gradient(circle, rgba(253, 160, 1, 0.15) 0%, rgba(0, 0, 0, 0) 70%);
  pointer-events: none;
  z-index: 1;
}

.vizza-404-container {
  position: relative;
  z-index: 2;
  max-width: 760px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
}

.vizza-404-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 800;
  color: #FDA001;
  text-transform: uppercase;
  letter-spacing: 1.8px;
  background: rgba(253, 160, 1, 0.1);
  border: 1px solid rgba(253, 160, 1, 0.3);
  padding: 6px 18px;
  border-radius: 100px;
}

.vizza-404-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #FDA001;
  box-shadow: 0 0 10px #FDA001;
}

.vizza-404-title {
  font-size: 56px;
  font-weight: 900;
  color: #FFFFFF;
  line-height: 1.1;
  letter-spacing: -1.5px;
  margin: 0;
}

.vizza-404-desc {
  font-size: 17px;
  color: #94A3B8;
  max-width: 580px;
  line-height: 1.6;
  margin: 0;
}

.vizza-404-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin-top: 8px;
  flex-wrap: wrap;
}

.vizza-404-quick-links {
  margin-top: 40px;
  padding-top: 32px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  width: 100%;
}

.quick-links-title {
  display: block;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: #64748B;
  margin-bottom: 16px;
}

.quick-links-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px 14px;
}

.qlink-item {
  font-size: 13.5px;
  font-weight: 600;
  color: #CBD5E1;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  padding: 8px 18px;
  border-radius: 100px;
  transition: all 0.25s ease;
}

.qlink-item:hover {
  color: #FDA001;
  border-color: rgba(253, 160, 1, 0.4);
  background: rgba(253, 160, 1, 0.08);
  transform: translateY(-2px);
}

@media (max-width: 768px) {
  .vizza-404-page {
    padding: 110px 0 60px;
    min-height: 75vh;
  }

  .vizza-404-title {
    font-size: 38px;
  }

  .vizza-404-desc {
    font-size: 15px;
  }

  .vizza-404-actions {
    flex-direction: column;
    width: 100%;
  }

  .vizza-404-actions .vizza-btn-primary,
  .vizza-404-actions .vizza-btn-glass {
    width: 100%;
  }
}

.vizza-phone-or {
  font-size: 13px;
  font-style: italic;
  color: #94A3B8;
  margin: -4px 0 -2px;
  line-height: 1;
  display: block;
}

.vizza-drawer-phone-or {
  font-size: 12px;
  font-style: italic;
  color: #94A3B8;
  text-align: center;
  margin: 2px 0;
  display: block;
}