/* ELEGANT BLACK & GOLD THEME - ORIGINAL CONTENT */
:root {
  --bg-light: #FDFBF7;
  --bg-card: #FFFFFF;
  --bg-card-hover: #FFFDF8;
  --gold: #C6A43B;
  --gold-dark: #A6862A;
  --gold-light: #E8D594;
  --gold-subtle: rgba(198, 164, 59, 0.08);
  --black: #1E1E1E;
  --black-soft: #2C2C2C;
  --gray-light: #F5F3EF;
  --gray-mid: #8A8580;
  --text-dark: #2A2A2A;
  --text-muted: #6B6B6B;
  --border-gold: rgba(198, 164, 59, 0.25);
  --shadow-sm: 0 4px 20px rgba(0, 0, 0, 0.02);
  --shadow-md: 0 8px 30px rgba(0, 0, 0, 0.04);
  --shadow-lg: 0 15px 40px rgba(0, 0, 0, 0.06);
  --shadow-gold: 0 8px 25px rgba(198, 164, 59, 0.08);
  --transition: all 0.3s cubic-bezier(0.2, 0.9, 0.4, 1.1);
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: 'Outfit', sans-serif;
  background: var(--bg-light);
  color: var(--text-dark);
  overflow-x: hidden;
}

/* Subtle pattern for rest of the site */
.gold-bg-pattern {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0.015;
  pointer-events: none;
  z-index: 0;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><path fill="%23C6A43B" d="M50,5 L61,35 L95,35 L68,55 L79,85 L50,65 L21,85 L32,55 L5,35 L39,35 Z"/></svg>');
  background-size: 60px 60px;
  background-repeat: repeat;
}

/* Spinner */
#spinner {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: var(--bg-light);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  transition: opacity 0.4s;
}

.gold-spinner {
  width: 50px;
  height: 50px;
  border: 2px solid var(--gold-subtle);
  border-top: 2px solid var(--gold);
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

/* Navbar - Elegant Light with Gold */
.navbar-gold {
  background: rgba(253, 251, 247, 0.98);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border-gold);
  padding: 0.5rem 0;
  box-shadow: var(--shadow-sm);
}

/* Navbar Logo with Very Large, Dark, Premium Shadow */
.navbar-brand img {
  filter: drop-shadow(0 15px 30px rgba(0, 0, 0, 0.45)) drop-shadow(0 6px 12px rgba(0, 0, 0, 0.3)) drop-shadow(0 0 20px rgba(198, 164, 59, 0.5));
  transition: all 0.3s ease;
}

.navbar-brand img:hover {
  filter: drop-shadow(0 20px 40px rgba(0, 0, 0, 0.55)) drop-shadow(0 8px 16px rgba(0, 0, 0, 0.35)) drop-shadow(0 0 30px rgba(198, 164, 59, 0.7));
  transform: scale(1.02);
}

.navbar-nav .nav-link-gold {
  color: var(--text-dark) !important;
  font-weight: 500;
  margin: 0 0.25rem;
  padding: 0.7rem 1.2rem;
  border-radius: 40px;
  transition: var(--transition);
  letter-spacing: 0.3px;
}

.navbar-nav .nav-link-gold:hover,
.navbar-nav .nav-link-gold.active {
  background: var(--gold);
  color: white !important;
}

.btn-gold-primary {
  background: var(--gold);
  color: white;
  padding: 8px 28px;
  border-radius: 40px;
  font-weight: 600;
  text-decoration: none;
  transition: var(--transition);
  border: 1px solid var(--gold);
  display: inline-block;
}

.btn-gold-primary:hover {
  background: transparent;
  color: var(--gold);
  border-color: var(--gold);
}

.btn-gold-outline {
  background: transparent;
  color: var(--gold);
  padding: 8px 28px;
  border-radius: 40px;
  font-weight: 600;
  text-decoration: none;
  border: 1px solid var(--gold);
  transition: var(--transition);
  display: inline-block;
}

.btn-gold-outline:hover {
  background: var(--gold);
  color: white;
  border-color: var(--gold);
}

/* ========== HERO SECTION - ZEBRA STRIPE BLACK & GOLD ========== */
.hero-gold {
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, #0a0a0a 0%, #1a1a1a 50%, #0a0a0a 100%);
}

/* Zebra Stripe Pattern - Black & Gold Stripes */
.hero-gold .zebra-stripe-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
  background-image: repeating-linear-gradient(115deg,
      rgba(212, 175, 55, 0.08) 0px,
      rgba(212, 175, 55, 0.08) 3px,
      transparent 3px,
      transparent 25px,
      rgba(212, 175, 55, 0.04) 25px,
      rgba(212, 175, 55, 0.04) 28px,
      transparent 28px,
      transparent 50px,
      rgba(212, 175, 55, 0.06) 50px,
      rgba(212, 175, 55, 0.06) 53px,
      transparent 53px,
      transparent 80px);
}

/* Diagonal Zebra Lines */
.hero-gold .zebra-diagonal {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
  background-image: repeating-linear-gradient(-45deg,
      rgba(212, 175, 55, 0.05) 0px,
      rgba(212, 175, 55, 0.05) 2px,
      transparent 2px,
      transparent 35px,
      rgba(255, 255, 255, 0.02) 35px,
      rgba(255, 255, 255, 0.02) 37px,
      transparent 37px,
      transparent 70px);
}

/* Gold Glow Orbs */
.hero-gold .gold-orb-1 {
  position: absolute;
  top: -20%;
  right: -10%;
  width: 500px;
  height: 500px;
  background: radial-gradient(circle, rgba(212, 175, 55, 0.2) 0%, rgba(212, 175, 55, 0) 70%);
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
}

.hero-gold .gold-orb-2 {
  position: absolute;
  bottom: -25%;
  left: -15%;
  width: 450px;
  height: 450px;
  background: radial-gradient(circle, rgba(212, 175, 55, 0.12) 0%, rgba(212, 175, 55, 0) 70%);
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
}

.hero-gold .gold-orb-3 {
  position: absolute;
  top: 30%;
  left: 20%;
  width: 200px;
  height: 200px;
  background: radial-gradient(circle, rgba(212, 175, 55, 0.08) 0%, rgba(212, 175, 55, 0) 70%);
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
}

.hero-gold .container {
  position: relative;
  z-index: 2;
}

.hero-badge-gold {
  display: inline-block;
  background: rgba(212, 175, 55, 0.15);
  backdrop-filter: blur(5px);
  padding: 6px 20px;
  border-radius: 40px;
  font-size: 0.85rem;
  margin-bottom: 1.5rem;
  color: var(--gold-light);
  font-weight: 500;
  letter-spacing: 0.5px;
  border-left: 3px solid var(--gold);
}

.main-title-gold {
  font-size: 4rem;
  font-weight: 800;
  background: linear-gradient(135deg, #FFFFFF 20%, var(--gold) 60%, #FFFFFF 90%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  letter-spacing: -0.02em;
}

.hero-gold .subtitle {
  font-size: 1.2rem;
  color: rgba(255, 255, 255, 0.7);
}

.hero-gold .lead {
  color: rgba(255, 255, 255, 0.8);
}

.hero-gold .btn-gold-primary {
  background: var(--gold);
  color: #0a0a0a;
}

.hero-gold .btn-gold-primary:hover {
  background: transparent;
  color: var(--gold);
}

.hero-gold .btn-gold-outline {
  color: var(--gold);
  border-color: var(--gold);
}

.hero-gold .btn-gold-outline:hover {
  background: var(--gold);
  color: #0a0a0a;
}

.hero-image-large {
  max-width: 100%;
  filter: drop-shadow(0 20px 40px rgba(0, 0, 0, 0.4));
  border-radius: 32px;
  position: relative;
  z-index: 2;
}

/* ========== END OF HERO SECTION ========== */

/* Stats Grid - Elegant Cards */
.stats-grid-gold {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1.5rem;
  margin: 3rem 0;
}

.stat-item-gold {
  background: var(--bg-card);
  padding: 1rem 2rem;
  border-radius: 60px;
  text-align: center;
  border: 1px solid var(--border-gold);
  box-shadow: var(--shadow-sm);
  min-width: 120px;
  transition: var(--transition);
}

.stat-item-gold:hover {
  border-color: var(--gold);
  transform: translateY(-3px);
  box-shadow: var(--shadow-gold);
}

.stat-number-gold {
  font-size: 1.8rem;
  font-weight: 700;
  color: var(--gold);
  display: block;
}

.stat-item-gold div:last-child {
  color: var(--text-muted);
  font-size: 0.9rem;
}

.stat-item-gold a {
  color: var(--gold);
  text-decoration: none;
}

/* Glass Cards - Elegant White with Gold Border */
.glass-card-gold {
  background: var(--bg-card);
  border-radius: 40px;
  padding: 2rem;
  border: 1px solid var(--border-gold);
  box-shadow: var(--shadow-md);
  transition: var(--transition);
}

.glass-card-gold:hover {
  border-color: var(--gold);
  box-shadow: var(--shadow-gold);
}

.glass-card-gold-light {
  background: var(--bg-card);
  border-radius: 40px;
  padding: 2rem;
  border: 1px solid var(--border-gold);
  box-shadow: var(--shadow-md);
}

.tv-img {
  max-width: 100%;
  border-radius: 28px;
}

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

/* App Cards - Elegant with Significantly Increased Image Size */
.app-card-gold {
  background: var(--bg-card);
  border-radius: 32px;
  padding: 2rem 1.5rem;
  text-align: center;
  transition: var(--transition);
  border: 1px solid var(--border-gold);
  box-shadow: var(--shadow-sm);
}

.app-card-gold:hover {
  transform: translateY(-8px);
  border-color: var(--gold);
  background: var(--bg-card-hover);
  box-shadow: var(--shadow-gold);
}

.app-icon-circle-gold {
  width: 120px;
  height: 120px;
  background: var(--gold-subtle);
  border-radius: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 1.2rem;
  border: 1px solid var(--border-gold);
  transition: var(--transition);
}

.app-card-gold:hover .app-icon-circle-gold {
  border-color: var(--gold);
  background: rgba(198, 164, 59, 0.12);
  transform: scale(1.02);
}

.app-icon-circle-gold img {
  width: 85px;
}

.btn-app-gold {
  background: transparent;
  border: 1px solid var(--gold);
  padding: 8px 20px;
  border-radius: 40px;
  color: var(--gold);
  text-decoration: none;
  font-size: 0.85rem;
  margin: 0 5px;
  transition: var(--transition);
  display: inline-block;
}

.btn-app-gold:hover {
  background: var(--gold);
  color: white;
}

.app-buttons {
  margin-top: 15px;
}

.app-card-gold h6 {
  font-size: 1rem;
  font-weight: 600;
  margin: 0.8rem 0;
}

/* Pricing Cards - Elegant */
.pricing-card-gold {
  background: var(--bg-card);
  border-radius: 40px;
  padding: 2rem;
  transition: var(--transition);
  border: 1px solid var(--border-gold);
  height: 100%;
  box-shadow: var(--shadow-sm);
}

.pricing-card-gold:hover {
  transform: translateY(-6px);
  border-color: var(--gold);
  box-shadow: var(--shadow-gold);
}

.price-amount-gold {
  font-size: 3rem;
  font-weight: 800;
  color: var(--gold);
}

.price-period {
  color: var(--text-muted);
}

.price-features {
  list-style: none;
  padding-left: 0;
  margin-top: 1rem;
}

.price-features li {
  margin-bottom: 0.7rem;
  color: var(--text-dark);
}

.price-features li::before {
  content: "✓";
  color: var(--gold);
  font-weight: bold;
  margin-right: 10px;
}

.btn-gradient-gold {
  background: var(--gold);
  color: white;
  padding: 12px 24px;
  border-radius: 50px;
  font-weight: 600;
  text-decoration: none;
  display: inline-block;
  transition: var(--transition);
  border: none;
  text-align: center;
}

.btn-gradient-gold:hover {
  background: var(--gold-dark);
  color: white;
}

/* FAQ Accordion - Elegant */
.faq-item-gold {
  background: var(--bg-card);
  border-radius: 24px;
  margin-bottom: 1rem;
  overflow: hidden;
  border: 1px solid var(--border-gold);
  transition: var(--transition);
}

.faq-item-gold:hover {
  border-color: var(--gold);
}

.faq-question-gold {
  padding: 1.2rem 1.8rem;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: var(--bg-card);
  color: var(--text-dark);
}

.faq-question-gold .fas {
  color: var(--gold);
  transition: transform 0.3s;
  font-size: 1rem;
}

.faq-answer-gold {
  padding: 0 1.8rem;
  max-height: 0;
  overflow: hidden;
  transition: all 0.4s ease;
  color: var(--text-muted);
  line-height: 1.6;
}

.faq-item-gold.active .faq-answer-gold {
  padding: 0 1.8rem 1.2rem 1.8rem;
  max-height: 300px;
}

.faq-item-gold.active .faq-question-gold .fas {
  transform: rotate(180deg);
}

/* Features icons - Significantly Larger Size */
.feature-item-gold {
  background: var(--bg-card);
  padding: 1.8rem;
  border-radius: 100px;
  width: 140px;
  transition: var(--transition);
  border: 1px solid var(--border-gold);
  box-shadow: var(--shadow-sm);
}

.feature-item-gold:hover {
  border-color: var(--gold);
  transform: translateY(-6px);
  box-shadow: var(--shadow-gold);
}

.feature-icon {
  width: 85px;
  filter: none !important;
  opacity: 1 !important;
  display: block;
  margin: 0 auto;
}

/* ========== FOOTER - INCREASED TEXT SIZE & REMOVED BORDER ========== */
.footer-gold {
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, #0a0a0a 0%, #1a1a1a 50%, #0a0a0a 100%);
  border-top: 2px solid var(--gold);
  padding: 3rem 0 1.5rem;
  margin-top: 2rem;
  color: #ccc;
}

/* Same Zebra Stripe Pattern for Footer */
.footer-gold .zebra-stripe-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
  background-image: repeating-linear-gradient(115deg,
      rgba(212, 175, 55, 0.08) 0px,
      rgba(212, 175, 55, 0.08) 3px,
      transparent 3px,
      transparent 25px,
      rgba(212, 175, 55, 0.04) 25px,
      rgba(212, 175, 55, 0.04) 28px,
      transparent 28px,
      transparent 50px,
      rgba(212, 175, 55, 0.06) 50px,
      rgba(212, 175, 55, 0.06) 53px,
      transparent 53px,
      transparent 80px);
}

/* Diagonal Zebra Lines for Footer */
.footer-gold .zebra-diagonal {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
  background-image: repeating-linear-gradient(-45deg,
      rgba(212, 175, 55, 0.05) 0px,
      rgba(212, 175, 55, 0.05) 2px,
      transparent 2px,
      transparent 35px,
      rgba(255, 255, 255, 0.02) 35px,
      rgba(255, 255, 255, 0.02) 37px,
      transparent 37px,
      transparent 70px);
}

.footer-gold .container {
  position: relative;
  z-index: 2;
}

/* Increased Footer Heading Size */
.footer-gold h5 {
  color: var(--gold);
  font-weight: 700;
  position: relative;
  display: inline-block;
  margin-bottom: 1.5rem;
  font-size: 1.3rem;
  letter-spacing: 0.5px;
}

.footer-gold h5:after {
  content: '';
  position: absolute;
  bottom: -8px;
  left: 0;
  width: 40px;
  height: 3px;
  background: var(--gold);
  border-radius: 2px;
}

/* Increased Footer Links Size */
.footer-links-gold {
  list-style: none;
  padding: 0;
}

.footer-links-gold li {
  margin-bottom: 0.8rem;
}

.footer-links-gold a {
  color: #ccc;
  text-decoration: none;
  transition: var(--transition);
  font-size: 1rem;
  font-weight: 500;
}

.footer-links-gold a:hover {
  color: var(--gold);
  padding-left: 8px;
}

/* Increased Footer Divider */
.footer-divider {
  border-color: rgba(212, 175, 55, 0.3);
  margin: 2rem 0;
}

/* Increased Copyright Text Size */
.copyright-mixed {
  text-align: center;
  color: #aaa;
  font-size: 1rem;
  font-weight: 400;
}

.highlight-project {
  color: var(--gold);
  font-weight: 700;
}

.highlight-link {
  color: var(--gold);
  text-decoration: underline;
  transition: var(--transition);
  font-weight: 500;
}

.highlight-link:hover {
  color: var(--gold-light);
}

/* Footer App Box - No Border */
.footer-app-box img {
  max-width: 100%;
  border-radius: 20px;
  border: none;
  transition: var(--transition);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
}

.footer-app-box img:hover {
  transform: scale(1.02);
  box-shadow: 0 8px 25px rgba(212, 175, 55, 0.3);
}

/* ========== END OF FOOTER ========== */

/* WhatsApp Float & Back to Top */
.whatsapp-float {
  position: fixed;
  bottom: 30px;
  right: 30px;
  background: #25D366;
  color: white;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.8rem;
  text-decoration: none;
  box-shadow: var(--shadow-md);
  z-index: 1000;
  transition: transform 0.2s;
}

.whatsapp-float:hover {
  transform: scale(1.08);
  color: white;
  background: #20b859;
}

.back-to-top {
  position: fixed;
  bottom: 30px;
  left: 30px;
  background: var(--gold);
  color: #0a0a0a;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s;
  z-index: 1000;
  box-shadow: var(--shadow-sm);
}

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

.back-to-top:hover {
  background: var(--gold-dark);
  transform: translateY(-3px);
}

.rounded-4 {
  border-radius: 1rem;
}

.faq-container {
  max-width: 900px;
  margin: auto;
}

.lead {
  font-size: 1.1rem;
}

.btn-outline-gold {
  background: transparent;
  border: 1px solid var(--gold);
  color: var(--gold);
  padding: 8px 24px;
  border-radius: 40px;
  text-decoration: none;
  display: inline-block;
}

.btn-outline-gold:hover {
  background: var(--gold);
  color: white;
}


html,
body {
  overflow-x: hidden;
}

img,
iframe {
  max-width: 100%;
}