/* MyCleanerAI brand theme — charcoal / gold / electric blue */

@import url("https://fonts.googleapis.com/css2?family=Cinzel:wght@500;600;700&family=Instrument+Sans:wght@400;500;600;700&family=Open+Sans:ital,wght@0,400;0,500;0,600;0,700;1,400&display=swap");

:root {
  --brand--gold: #d4af37;
  --brand--gold-deep: #c5a059;
  --brand--amber: #ff8c00;
  --brand--ai-blue: #4aa3ff;
  --brand--charcoal: #0b0b0c;
  --brand--charcoal-soft: #1a1a1a;
  --brand--charcoal-mid: #242424;
  --brand--silver: #e8e8e8;
  --brand--muted: #a8a8a8;
}

html {
  background-color: var(--brand--charcoal);
}

body {
  background-color: var(--brand--charcoal) !important;
  background-image:
    radial-gradient(ellipse 80% 50% at 50% -10%, rgba(212, 175, 55, 0.12), transparent 55%),
    radial-gradient(ellipse 60% 40% at 100% 30%, rgba(74, 163, 255, 0.06), transparent 50%),
    linear-gradient(180deg, #0b0b0c 0%, #121212 40%, #0b0b0c 100%);
  color: var(--brand--muted) !important;
}

/* Headings — premium serif accent for display titles */
h1,
h2,
.banner-title,
.section-title,
.footer-cta-title,
.footer-widget-title {
  font-family: "Cinzel", "Instrument Sans", serif !important;
  color: var(--brand--silver) !important;
  letter-spacing: 0.02em;
}

.card-title,
.card-title.link {
  color: var(--brand--silver) !important;
}

h3,
h4,
h5,
h6 {
  color: var(--brand--silver) !important;
}

.section-title.white,
.section-title.white-mg-0,
.banner-title.white {
  color: #fff !important;
}

/* Gold keyword highlights */
.section-title span,
.banner-title span,
h1 span,
h2 span {
  color: var(--brand--gold);
}

/* Navbar */
.navbar {
  background: linear-gradient(180deg, rgba(11, 11, 12, 0.92), rgba(11, 11, 12, 0.72)) !important;
  backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(212, 175, 55, 0.18);
}

.nav-link,
.nav-contact-link,
.nav-dropdown-link,
.w-nav-link,
.w-dropdown-link {
  color: var(--brand--silver) !important;
}

p,
.paragraph,
.content-text,
.banner-text {
  color: var(--brand--muted) !important;
}

/* Expert / feature cards — dark panels with light text + gold glow */
.expert-card,
.choose-card,
.why-choose-card {
  background: linear-gradient(165deg, #1a1a1a 0%, #121212 100%) !important;
  border: 1px solid rgba(212, 175, 55, 0.35) !important;
  border-radius: 20px !important;
  padding: 28px 24px !important;
  box-shadow:
    0 0 0 1px rgba(212, 175, 55, 0.1),
    0 0 24px rgba(212, 175, 55, 0.28),
    0 0 48px rgba(255, 140, 0, 0.1),
    0 12px 32px rgba(0, 0, 0, 0.55) !important;
  transition: box-shadow 0.3s ease, transform 0.3s ease, border-color 0.3s ease;
}

.expert-card:hover,
.choose-card:hover,
.why-choose-card:hover {
  border-color: rgba(212, 175, 55, 0.65) !important;
  box-shadow:
    0 0 0 1px rgba(212, 175, 55, 0.3),
    0 0 36px rgba(212, 175, 55, 0.5),
    0 0 64px rgba(255, 140, 0, 0.2),
    0 16px 40px rgba(0, 0, 0, 0.6) !important;
  transform: translateY(-4px);
}

.expert-card-title,
.choose-card .section-title,
.why-choose-card h3,
.expert-card h3 {
  color: #f2f2f2 !important;
  font-family: "Instrument Sans", "Open Sans", sans-serif !important;
}

.expert-card-title::after,
.expert-card h3::after {
  display: none !important;
}

.expert-card-text,
.expert-card p,
.choose-card p,
.why-choose-card p {
  color: #b8b8b8 !important;
}

.expert-card-icon-wrap,
.why-choose-icon-wrap {
  color: var(--brand--gold) !important;
  background: rgba(212, 175, 55, 0.08) !important;
  filter: drop-shadow(0 0 10px rgba(212, 175, 55, 0.55));
}

.expert-card .expert-icon,
.expert-card i,
.choose-card i,
.why-choose-card .expert-icon {
  color: var(--brand--gold) !important;
  font-size: 2rem;
  text-shadow: 0 0 14px rgba(212, 175, 55, 0.45);
}

.expert-card-wrap {
  gap: 24px !important;
}

/* Kill leftover white overlays / panels */
.service-overlay,
.quote-image-overlay,
.story-overlay,
.why-choose-overlay,
.location-overlay,
.service-item-overlay,
.blog-featured-overlay,
.team-overlay,
.portfolio-image-overlay,
.counter-overlay,
.home-service-card-overlay {
  background-color: #0b0b0c !important;
  background-image: linear-gradient(#1a1a1a 49%, #0b0b0c) !important;
}

.home-service-card {
  background-color: #1a1a1a !important;
  border: 1px solid rgba(212, 175, 55, 0.25) !important;
  box-shadow: 0 0 20px rgba(212, 175, 55, 0.18) !important;
}

.home-service-card .card-title,
.home-service-card .card-title.link,
.home-service-link {
  color: #f2f2f2 !important;
}

.home-service-card p {
  color: #b8b8b8 !important;
}

.home-service-link:hover {
  color: var(--brand--gold) !important;
}

.how-it-works-card {
  background-color: #1a1a1a !important;
  border: 1px solid rgba(212, 175, 55, 0.22) !important;
  box-shadow: 0 0 18px rgba(212, 175, 55, 0.15) !important;
}

.how-it-works-card._4 {
  background: linear-gradient(165deg, #1f1a10 0%, #121212 100%) !important;
  border-color: rgba(212, 175, 55, 0.45) !important;
  box-shadow:
    0 0 24px rgba(212, 175, 55, 0.3),
    0 0 48px rgba(255, 140, 0, 0.12) !important;
}

.how-it-works-title,
.how-it-works-title.white,
.how-it-works-card h3,
.how-it-works-card p {
  color: #f2f2f2 !important;
}

.how-it-works-card p {
  color: #b8b8b8 !important;
}

.w-slider-mask,
.w-slide {
  background-color: transparent !important;
}

.nav-link:hover,
.nav-link.w--current,
.nav-contact-link:hover,
.nav-dropdown-link:hover,
.nav-dropdown-link.w--current {
  color: var(--brand--gold) !important;
}

.nav-dropdown-list,
.nav-dropdown-list.w--open {
  background-color: var(--brand--charcoal-soft) !important;
  border: 1px solid rgba(212, 175, 55, 0.25);
}

.nav-contact-icon {
  background-color: var(--brand--gold) !important;
  color: #0b0b0c !important;
  box-shadow: 0 0 16px rgba(212, 175, 55, 0.35);
}

/* Buttons — metallic gold CTAs */
.primary-button,
.footer-submit-button {
  background: linear-gradient(135deg, #ffd76a 0%, #d4af37 45%, #a8842a 100%) !important;
  border-color: #c5a059 !important;
  color: #0b0b0c !important;
  font-weight: 700 !important;
  box-shadow: 0 0 20px rgba(212, 175, 55, 0.25);
}

.primary-button:hover,
.footer-submit-button:hover {
  background: linear-gradient(135deg, #ff8c00 0%, #d4af37 100%) !important;
  border-color: #ff8c00 !important;
  color: #0b0b0c !important;
  box-shadow: 0 0 28px rgba(255, 140, 0, 0.4);
}

.transparent-button,
.secondary-button {
  border-color: rgba(212, 175, 55, 0.55) !important;
  color: var(--brand--silver) !important;
  background: transparent !important;
}

.transparent-button:hover,
.secondary-button:hover {
  background: rgba(212, 175, 55, 0.12) !important;
  border-color: var(--brand--gold) !important;
  color: var(--brand--gold) !important;
}

.get-a-quote-button,
.hireus-badge {
  background-image: linear-gradient(90deg, #d4af37, #ff8c00) !important;
  color: #0b0b0c !important;
}

.hireus-orange-button {
  background-color: var(--brand--amber) !important;
  color: #0b0b0c !important;
}

/* Sections & cards */
.section-regular,
[class*="section"] {
  position: relative;
}

.service-card,
.feature-card,
.blog-card,
.team-card,
.pricing-card,
.testimonial-card,
.card,
.w-form,
.footer-form-wrap,
.footer-input-field {
  background-color: var(--brand--charcoal-soft) !important;
  border: 1px solid rgba(212, 175, 55, 0.15);
  color: var(--brand--muted);
}

.footer-input-field {
  color: #fff !important;
  border-color: rgba(212, 175, 55, 0.3) !important;
}

.footer-input-field::placeholder {
  color: rgba(255, 255, 255, 0.45) !important;
}

.footer-input-field:focus {
  border-color: var(--brand--gold) !important;
  box-shadow: 0 0 0 2px rgba(212, 175, 55, 0.2);
}

/* Footer — always charcoal, gold trim */
.footer-section {
  background-color: #0b0b0c !important;
  background-image:
    radial-gradient(ellipse 70% 60% at 50% 0%, rgba(212, 175, 55, 0.1), transparent 60%) !important;
  border-top: 1px solid rgba(212, 175, 55, 0.25);
}

.footer-text,
.footer-link,
.footer-contact-link {
  color: var(--brand--muted) !important;
}

.footer-link:hover,
.footer-contact-link:hover {
  color: var(--brand--gold) !important;
}

.footer-logo-line,
.nav-button-line {
  background-color: rgba(212, 175, 55, 0.35) !important;
}

/* Links */
a {
  color: var(--brand--gold);
}

a:hover {
  color: var(--brand--amber);
}

/* Form controls */
.w-button {
  background-color: var(--brand--gold) !important;
  color: #0b0b0c !important;
}

.w-input:focus,
.w-select:focus {
  border-color: var(--brand--gold) !important;
}

.w-input,
.w-select,
.w-textarea {
  background-color: #1a1a1a !important;
  color: #f2f2f2 !important;
  border-color: rgba(212, 175, 55, 0.25) !important;
}

/* AI blue accent — logo / tech callouts */
.brand-ai,
.ai-text,
[data-ai-accent] {
  color: var(--brand--ai-blue) !important;
  text-shadow: 0 0 12px rgba(74, 163, 255, 0.45);
}

/* Gold divider under main banner titles */
.banner-title::after {
  content: "";
  display: block;
  width: 72px;
  height: 2px;
  margin-top: 16px;
  background: linear-gradient(90deg, var(--brand--gold), transparent);
  box-shadow: 0 0 10px rgba(212, 175, 55, 0.5);
}

/* Soft gold glow on icon wraps */
.nav-icon,
.button-icon,
.footer-contact-icon-wrap {
  filter: drop-shadow(0 0 6px rgba(212, 175, 55, 0.35));
}

/* Splash / deep blue panels → navy-gold industrial */
.splash-asset-card,
.splash-figma-wrap {
  background-color: #14142b !important;
  border: 1px solid rgba(212, 175, 55, 0.2);
}

/* Mobile nav */
.w-nav-button.w--open,
.w-nav-overlay {
  background-color: rgba(11, 11, 12, 0.96) !important;
}

.w-nav-menu {
  background-color: var(--brand--charcoal) !important;
}

/* Reduce harsh pure-white blocks left from light theme */
.w-slider-dot {
  background-color: rgba(212, 175, 55, 0.35) !important;
}

.w-slider-dot.w-active {
  background-color: var(--brand--gold) !important;
}

/* Subtle film grain for industrial texture */
body::before {
  content: "";
  pointer-events: none;
  position: fixed;
  inset: 0;
  z-index: 9999;
  opacity: 0.035;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* Banner badges */
.home-banner-tag {
  color: #ffffff !important;
}

.home-banner-tag div {
  color: #ffffff !important;
}