/* Universal Electrical & Electronics - Stylesheet 
 * Design System: Luxury Editorial (Inspired by Flavoury Reference in YouTube Tutorial)
 * Typography: Playfair Display (Serif) + Plus Jakarta Sans (Clean Sans)
 * Palette: Deep Crimson (#8B1E1E), Warm Antique Gold (#C89B3C), Dark Espresso (#0D0B09), Warm Cream (#FAF7F2)
 */

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,500;0,600;0,700;0,800;0,900;1,400;1,600;1,700&family=Plus+Jakarta+Sans:wght@300;400;500;600;700&display=swap');

:root {
  --color-crimson: #8B1E1E;
  --color-crimson-hover: #721616;
  --color-crimson-glow: rgba(139, 30, 30, 0.35);
  --color-gold: #C89B3C;
  --color-gold-light: #E0B969;
  --color-gold-glow: rgba(200, 155, 60, 0.25);
  --color-dark: #0D0B09;
  --color-dark-surface: #17130F;
  --color-cream: #FAF7F2;
  --color-cream-muted: #F2ECE1;
  --color-text-dark: #1C1917;
  --color-text-muted: #78716C;
  --color-text-light: #FAF5EE;
}

* {
  box-sizing: border-box;
  scroll-behavior: smooth;
}

body {
  font-family: 'Plus Jakarta Sans', sans-serif;
  background-color: var(--color-dark);
  color: var(--color-text-light);
  overflow-x: hidden;
  margin: 0;
  padding: 0;
  -webkit-font-smoothing: antialiased;
}

/* Serif Typography for Luxury Headlines */
h1, h2, h3, .font-serif, .hero-title, .section-title {
  font-family: 'Playfair Display', Georgia, serif;
}

.font-sans {
  font-family: 'Plus Jakarta Sans', sans-serif;
}

/* Gold Italic Accent */
.gold-italic {
  font-family: 'Playfair Display', Georgia, serif;
  font-style: italic;
  color: var(--color-gold-light);
}

.gold-text {
  color: var(--color-gold);
}

/* Hero Section with Looping Background Video */
.hero-wrapper {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background-color: #070605;
}

.hero-video-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  z-index: 0;
}

.hero-video-element {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.42;
  filter: contrast(1.15) brightness(0.85);
  transition: opacity 1s ease-in-out;
}

/* Dark Cinematic Vignette Overlay */
.hero-vignette {
  position: absolute;
  inset: 0;
  background: 
    radial-gradient(ellipse at center, rgba(13, 11, 9, 0.45) 0%, rgba(13, 11, 9, 0.85) 65%, #0D0B09 100%),
    linear-gradient(to bottom, rgba(13, 11, 9, 0.6) 0%, rgba(13, 11, 9, 0.2) 40%, #0D0B09 100%);
  z-index: 1;
}

/* Crimson CTA Buttons */
.btn-crimson {
  background-color: var(--color-crimson);
  color: #FFFFFF;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.btn-crimson:hover {
  background-color: var(--color-crimson-hover);
  box-shadow: 0 8px 24px var(--color-crimson-glow);
  transform: translateY(-2px);
}

.btn-crimson:active {
  transform: translateY(0);
}

/* Gold Outline Buttons */
.btn-gold-outline {
  background: rgba(200, 155, 60, 0.08);
  border: 1px solid rgba(200, 155, 60, 0.4);
  color: #F5E8D0;
  transition: all 0.25s ease;
}

.btn-gold-outline:hover {
  background: rgba(200, 155, 60, 0.18);
  border-color: var(--color-gold);
  color: #FFFFFF;
  transform: translateY(-2px);
}

/* Luxury Hero Search / CTA Bar */
.hero-search-bar {
  background: rgba(23, 19, 15, 0.85);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(200, 155, 60, 0.35);
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.6);
  border-radius: 9999px;
  transition: all 0.3s ease;
}

.hero-search-bar:focus-within {
  border-color: var(--color-gold);
  box-shadow: 0 16px 40px var(--color-gold-glow);
}

/* Warm Cream Section Styling */
.section-cream {
  background-color: var(--color-cream);
  color: var(--color-text-dark);
}

.section-cream h1, 
.section-cream h2, 
.section-cream h3, 
.section-cream h4 {
  color: var(--color-text-dark);
}

/* Luxury Product Cards in Light Section */
.card-luxury {
  background: #FFFFFF;
  border: 1px solid rgba(0, 0, 0, 0.07);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04);
  border-radius: 1.25rem;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.card-luxury:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 32px rgba(139, 30, 30, 0.09);
  border-color: rgba(200, 155, 60, 0.3);
}

/* Dark Card in Dark Sections */
.card-dark-luxury {
  background: rgba(23, 19, 15, 0.78);
  backdrop-filter: blur(14px);
  border: 1px solid rgba(200, 155, 60, 0.2);
  border-radius: 1.25rem;
  transition: all 0.3s ease;
}

.card-dark-luxury:hover {
  border-color: var(--color-gold);
  transform: translateY(-3px);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.5);
}

/* Circular Features / Icons */
.feature-circle {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: rgba(139, 30, 30, 0.08);
  border: 1px solid rgba(139, 30, 30, 0.25);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-crimson);
  transition: all 0.3s ease;
}

.feature-circle:hover {
  background: var(--color-crimson);
  color: #FFFFFF;
  transform: scale(1.08);
  box-shadow: 0 8px 20px var(--color-crimson-glow);
}

/* Safe area padding for mobile docks */
.pb-safe {
  padding-bottom: max(1.25rem, env(safe-area-inset-bottom));
}

/* Custom Scrollbar */
::-webkit-scrollbar {
  width: 8px;
}
::-webkit-scrollbar-track {
  background: #0D0B09;
}
::-webkit-scrollbar-thumb {
  background: #2D241D;
  border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
  background: var(--color-crimson);
}