/* ═══════════════════════════════════════════
   Renova Marketing Solutions — Main Stylesheet
═══════════════════════════════════════════ */

/* ── Hide default cursor on desktop ─────── */
@media (pointer: fine) {
  body, a, button { cursor: none !important; }
}

/* ── Navbar transition ───────────────────── */
#navbar { transition: background 0.4s ease, box-shadow 0.4s ease; }

/* ── Service card 3D transform base ─────── */
.service-card { transform-style: preserve-3d; }

/* ── Gold shimmer on headings ────────────── */
@keyframes shimmer {
  0%   { background-position: -200% center; }
  100% { background-position: 200% center; }
}
.gold-text {
  background-size: 200% auto;
  animation: shimmer 4s linear infinite;
}

/* ── Smooth clip reveals ─────────────────── */
.clip-reveal {
  clip-path: inset(0 100% 0 0);
  transition: clip-path 0.9s cubic-bezier(0.77, 0, 0.175, 1);
}
.clip-reveal.revealed { clip-path: inset(0 0% 0 0); }

/* ── Page load fade-in ───────────────────── */
body { animation: pageFadeIn 0.5s ease forwards; }
@keyframes pageFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

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

html { scroll-behavior: auto; } /* Lenis handles smooth scroll */

body {
  background-color: #fafaf8;
  color: #111110;
  font-family: 'Inter', system-ui, sans-serif;
  overflow-x: hidden;
}

/* ── Gold gradient text ──────────────────── */
.gold-text {
  background: linear-gradient(135deg, #b8922a 0%, #d4a93a 50%, #8a6b1e 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ── Navbar ──────────────────────────────── */
#navbar {
  background: transparent;
  transition: background 0.3s ease, box-shadow 0.3s ease;
}
#navbar.nav-scrolled {
  background: rgba(250, 250, 248, 0.94) !important;
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.06);
}

/* Mobile menu hidden by default */
#mobile-menu { display: none; }
#mobile-menu.open { display: block; }

/* ── Buttons ─────────────────────────────── */
.btn-gold {
  background: linear-gradient(135deg, #b8922a 0%, #d4a93a 55%, #8a6b1e 100%);
  color: #fff;
  font-weight: 700;
  letter-spacing: 0.05em;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
  position: relative;
}
.btn-gold:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(184, 146, 42, 0.35);
}

.btn-outline {
  border: 1.5px solid rgba(184, 146, 42, 0.55);
  color: #b8922a;
  font-weight: 600;
  letter-spacing: 0.05em;
  transition: all 0.25s ease;
}
.btn-outline:hover {
  background: rgba(184, 146, 42, 0.07);
  border-color: #b8922a;
  transform: translateY(-2px);
}

/* ── Hero word animation ─────────────────── */
.hero-word { display: inline-block; overflow: hidden; }
.hero-word span { display: inline-block; transform: translateY(110%); }

/* ── Service card ────────────────────────── */
.service-card {
  background: #fff;
  border: 1px solid #e8e7e2;
  transition: box-shadow 0.3s ease, border-color 0.3s ease;
}
.service-card:hover {
  box-shadow: 0 4px 32px rgba(184, 146, 42, 0.12);
  border-color: rgba(184, 146, 42, 0.3);
}

/* ── Package card ────────────────────────── */
.package-card {
  background: #fff;
  border: 1px solid #e8e7e2;
  transition: box-shadow 0.3s ease, transform 0.3s ease, border-color 0.3s ease;
}
.package-card:hover {
  box-shadow: 0 8px 40px rgba(184, 146, 42, 0.13);
  border-color: rgba(184, 146, 42, 0.35);
}
.package-card.featured {
  border: 1.5px solid rgba(184, 146, 42, 0.5);
  background: linear-gradient(160deg, #fffef8 0%, #fff 60%);
}

/* ── Portfolio ───────────────────────────── */
.portfolio-item {
  background: #f0efe9;
  border: 1px solid #e4e3dc;
  transition: box-shadow 0.3s ease;
  overflow: hidden;
}
.portfolio-item:hover {
  box-shadow: 0 8px 32px rgba(184, 146, 42, 0.14);
}
.portfolio-overlay {
  opacity: 0;
  transition: opacity 0.35s ease;
  background: rgba(184, 146, 42, 0.06);
  backdrop-filter: blur(4px);
}
.portfolio-item:hover .portfolio-overlay { opacity: 1; }

/* ── Gold divider ────────────────────────── */
.gold-divider {
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(184, 146, 42, 0.35) 30%,
    rgba(184, 146, 42, 0.7) 50%,
    rgba(184, 146, 42, 0.35) 70%,
    transparent 100%
  );
}

/* ── Icon box ────────────────────────────── */
.icon-box {
  background: rgba(184, 146, 42, 0.09);
  border: 1px solid rgba(184, 146, 42, 0.15);
}

/* ── Form inputs ─────────────────────────── */
.form-input {
  background: #f5f4f0;
  border: 1.5px solid #e0dfd9;
  color: #111110;
  transition: border-color 0.25s ease, box-shadow 0.25s ease;
}
.form-input:focus {
  outline: none;
  border-color: rgba(184, 146, 42, 0.55);
  box-shadow: 0 0 0 3px rgba(184, 146, 42, 0.1);
  background: #fff;
}
.form-input::placeholder { color: #b0afa8; }

/* ── FAQ ─────────────────────────────────── */
.faq-item {
  background: #fff;
  border: 1px solid #e8e7e2;
}
.faq-item:hover { border-color: rgba(184, 146, 42, 0.25); }

/* ── About why-card ──────────────────────── */
.why-card {
  border: 1px solid #e8e7e2;
  background: #fff;
  transition: border-color 0.25s ease, box-shadow 0.25s ease;
}
.why-card:hover {
  border-color: rgba(184, 146, 42, 0.3);
  box-shadow: 0 4px 20px rgba(184, 146, 42, 0.08);
}

/* ── Reveal (GSAP sets from JS) ──────────── */
.reveal { will-change: transform, opacity; }

/* ── Form validation states ──────────────── */
.form-input.input-error {
  border-color: #ef4444 !important;
  box-shadow: 0 0 0 3px rgba(239,68,68,0.1) !important;
}
.field-error { display: none; }

/* ── Scrollbar ───────────────────────────── */
::-webkit-scrollbar { width: 4px; }
::-webkit-scrollbar-track { background: #f0efe9; }
::-webkit-scrollbar-thumb { background: rgba(184, 146, 42, 0.4); border-radius: 2px; }