/* ============================================================
   Landify – Dark + Red Theme Override
   Place this file AFTER main.css to switch the whole site
   to a dark UI with red accents.
   ============================================================ */

/* -------- Global color tokens (override) -------- */
:root {
  /* Base */
  --background-color: #0b0f13;        /* page bg */
  --surface-color:    #12161d;        /* cards, sections */
  --default-color:    #cbd5e1;        /* body text (slate-300) */
  --heading-color:    #ffffff;        /* headings */
  --accent-color:     #e11d48;        /* red/rose-600 */
  --contrast-color:   #ffffff;        /* text on accent */
}

/* -------- Navigation palette (override) -------- */
:root {
  --nav-color: #e5e7eb;                         /* top-level links */
  --nav-hover-color: #f43f5e;                   /* hover/active */
  --nav-mobile-background-color: #0e1318;       /* mobile menu panel */
  --nav-dropdown-background-color: #0e1318;     /* dropdown bg */
  --nav-dropdown-color: #cbd5e1;                /* dropdown links */
  --nav-dropdown-hover-color: #f43f5e;
}

/* -------- Header behaviours -------- */
.scrolled .header,
.index-page.scrolled .header {
  --background-color: rgba(10, 14, 18, 0.9);
  backdrop-filter: saturate(150%) blur(6px);
  box-shadow: 0 0 24px rgba(0, 0, 0, 0.6);
}

/* Mobile nav fine‑tuning for dark */
@media (max-width: 1199px) {
  .mobile-nav-active .navmenu { background: rgba(7,9,12,0.85); }
  .navmenu .dropdown ul { border-color: rgba(255,255,255,0.06); }
  .navmenu .dropdown ul ul { background-color: rgba(255,255,255,0.03); }
  .navmenu a i { background-color: rgba(225, 29, 72, 0.12); } /* icon bubble */
}

/* -------- Hero section -------- */
.hero {
  background: radial-gradient(1100px 600px at 15% 85%,
              color-mix(in srgb, var(--accent-color), transparent 85%) 0%,
              transparent 60%),
              linear-gradient(135deg,
                color-mix(in srgb, var(--surface-color), black 8%) 0%,
                color-mix(in srgb, var(--surface-color), black 18%) 100%);
}
.hero::before {
  background: radial-gradient(700px 400px at 80% 20%,
              color-mix(in srgb, var(--accent-color), transparent 82%) 0%,
              transparent 60%);
}
.hero .hero-content .hero-description {
  color: color-mix(in srgb, var(--default-color), transparent 10%);
}

/* -------- Cards & boxes -------- */
.features .tabs-wrapper,
.about .features-section,
.about .stat-item,
.about .main-image-container .overlay-card,
.feature-card,
.compliance-card,
.section,
section {
  box-shadow: 0 16px 40px rgba(0,0,0,0.35);
  border-color: rgba(255,255,255,0.06) !important;
}

/* Feature tabs – darker idle tile */
.features .nav-link {
  background: color-mix(in srgb, var(--surface-color), black 6%);
  border-color: rgba(255,255,255,0.06);
}
.features .nav-link:hover,
.features .nav-link.active {
  box-shadow: 0 20px 55px color-mix(in srgb, var(--accent-color), transparent 68%);
}

/* Section title watermark tone‑down for dark */
.section-title span {
  color: color-mix(in srgb, var(--heading-color), transparent 92%);
}

/* Buttons keep red accent */
.hero .hero-content .hero-actions .btn-primary,
.features .content-wrapper .btn-primary,
.header .btn-getstarted {
  background: var(--accent-color);
  color: var(--contrast-color);
}
.hero .hero-content .hero-actions .btn-primary:hover,
.features .content-wrapper .btn-primary:hover,
.header .btn-getstarted:hover {
  background: color-mix(in srgb, var(--accent-color), black 10%);
  box-shadow: 0 10px 30px color-mix(in srgb, var(--accent-color), transparent 65%);
  transform: translateY(-2px);
}

/* Links */
a { color: color-mix(in srgb, var(--accent-color), white 8%); }
a:hover { color: color-mix(in srgb, var(--accent-color), transparent 12%); }

/* Footer subtle band */
.footer .copyright {
  background-color: rgba(255,255,255,0.035);
}

/* Scroll‑to‑top button */
.scroll-top { background-color: var(--accent-color); }
.scroll-top:hover { background-color: color-mix(in srgb, var(--accent-color), black 15%); }