:root {
  --midnight-navy: #0F172A;
  --champagne-gold: #C5A059;
  --sand-glow: #E2CF9F;
  --slate-pearl: #F8FAFC;
  --obsidian: #1E293B;
  --steel-mist: #64748B;
  --paper-white: #FFFFFF;

  --orange: var(--champagne-gold);
  --pink: var(--sand-glow);
  --gold: var(--champagne-gold);
  --cream: var(--slate-pearl);
}

body {
  background:
    radial-gradient(circle at 12% 8%, rgba(197, 160, 89, 0.16), transparent 32%),
    radial-gradient(circle at 88% 92%, rgba(226, 207, 159, 0.22), transparent 36%),
    var(--slate-pearl);
  color: var(--obsidian);
}

section {
  position: relative;
}

section::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.28) 0%, rgba(255, 255, 255, 0) 100%);
  z-index: 0;
}

section > * {
  position: relative;
  z-index: 1;
}

h1,
h2,
h3,
h4,
h5,
h6,
.font-syne {
  color: var(--midnight-navy);
  letter-spacing: -0.02em;
}

p {
  color: var(--steel-mist);
}

.max-w-7xl,
.max-w-5xl,
.max-w-4xl {
  filter: saturate(1.02);
}

nav.fixed {
  background: rgba(248, 250, 252, 0.86) !important;
  border-color: rgba(197, 160, 89, 0.28) !important;
  box-shadow: 0 14px 36px rgba(15, 23, 42, 0.08);
}

.gradient-bg {
  background: linear-gradient(135deg, var(--midnight-navy) 0%, var(--champagne-gold) 100%) !important;
}

.gradient-text {
  display: inline;
  font-weight: inherit;

  /* fallback color */
  color: var(--champagne-gold);
}

/* Chrome, Safari, Edge */
@supports (-webkit-background-clip: text) {
  .gradient-text {
    background: linear-gradient(
      135deg,
      var(--midnight-navy) 0%,
      var(--champagne-gold) 100%
    );
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;

    /* IMPORTANT */
    display: inline;
  }
}

/* Firefox */
@supports (background-clip: text) {
  .gradient-text {
    background: linear-gradient(
      135deg,
      var(--midnight-navy) 0%,
      var(--champagne-gold) 100%
    );
    background-clip: text;
    color: transparent;
  }
}

.gold-border {
  border-color: var(--champagne-gold) !important;
}

.nav-link::after {
  background: var(--champagne-gold) !important;
}

.text-slate-900,
.text-slate-800,
.text-slate-700 {
  color: var(--obsidian) !important;
}

.text-slate-600,
.text-slate-500,
.text-slate-400 {
  color: var(--steel-mist) !important;
}

.bg-slate-900 {
  background-color: var(--midnight-navy) !important;
}

.bg-white {
  background-color: rgba(255, 255, 255, 0.94) !important;
}

.rounded-2xl,
.rounded-3xl,
.rounded-\[2rem\],
.rounded-\[2\.5rem\],
.rounded-\[3rem\],
.rounded-\[3\.5rem\],
.rounded-\[4rem\] {
  box-shadow: 0 16px 36px rgba(15, 23, 42, 0.07);
}

.bg-slate-50 {
  background-color: #f5f7fb !important;
}

.border-slate-100 {
  border-color: #e6ecf3 !important;
}

.placeholder\:text-slate-300::placeholder {
  color: #94a3b8 !important;
}

.bg-orange-50,
.bg-pink-50,
.bg-yellow-50,
.bg-blue-50 {
  background-color: #f7f2e5 !important;
}

.bg-orange-100,
.bg-pink-100,
.bg-yellow-100,
.bg-blue-100 {
  background-color: #efe4c9 !important;
}

.border-orange-100,
.border-pink-100,
.border-yellow-100,
.border-blue-100 {
  border-color: #e2cf9f !important;
}

.bg-orange-200,
.bg-pink-200,
.bg-yellow-200,
.bg-blue-200 {
  background-color: #e2cf9f !important;
}

.border-orange-200,
.border-pink-200,
.border-yellow-200,
.border-blue-200 {
  border-color: #d5bc80 !important;
}

.bg-orange-400,
.bg-pink-400,
.bg-yellow-400,
.bg-blue-400,
.bg-orange-500,
.bg-pink-500,
.bg-yellow-500,
.bg-blue-500 {
  background-color: var(--champagne-gold) !important;
}

.border-orange-500,
.border-pink-500,
.border-yellow-500,
.border-blue-500 {
  border-color: var(--champagne-gold) !important;
}

.text-orange-400,
.text-pink-400,
.text-yellow-400,
.text-blue-400,
.text-orange-500,
.text-pink-500,
.text-yellow-500,
.text-blue-500,
.text-orange-600,
.text-pink-600,
.text-yellow-600,
.text-blue-600 {
  color: var(--champagne-gold) !important;
}

.fill-orange-400,
.fill-pink-400,
.fill-yellow-400,
.fill-blue-400,
.fill-orange-500,
.fill-pink-500,
.fill-yellow-500,
.fill-blue-500 {
  fill: var(--champagne-gold) !important;
}

.hover\:bg-orange-50:hover,
.hover\:bg-pink-50:hover,
.hover\:bg-yellow-50:hover,
.hover\:bg-blue-50:hover {
  background-color: #f3ecd9 !important;
}

.hover\:bg-orange-600:hover,
.hover\:bg-pink-600:hover,
.hover\:bg-yellow-600:hover,
.hover\:bg-blue-600:hover {
  background-color: #a88645 !important;
}

.hover\:text-orange-500:hover,
.hover\:text-orange-600:hover,
.hover\:text-pink-500:hover,
.hover\:text-yellow-500:hover,
.hover\:text-blue-500:hover {
  color: var(--champagne-gold) !important;
}

.focus\:ring-orange-400:focus,
.focus\:ring-pink-400:focus,
.focus\:ring-yellow-400:focus,
.focus\:ring-blue-400:focus {
  --tw-ring-color: rgba(197, 160, 89, 0.55) !important;
}

.border-orange-50,
.border-pink-50,
.border-yellow-50,
.border-blue-50,
.border-orange-100\/50 {
  border-color: #eadfc4 !important;
}

.shadow-orange-100,
.shadow-orange-200,
.shadow-pink-100,
.shadow-pink-200,
.shadow-yellow-100,
.shadow-blue-100 {
  --tw-shadow-color: rgba(197, 160, 89, 0.32) !important;
}

.shadow-xl,
.shadow-2xl {
  box-shadow: 0 24px 50px rgba(15, 23, 42, 0.13) !important;
}

.service-card,
.hero-floating-box,
.offcanvas-panel,
.mobile-menu {
  background-color: rgba(255, 255, 255, 0.93) !important;
  border-color: #e5e7eb !important;
  box-shadow: 0 20px 45px rgba(15, 23, 42, 0.1) !important;
}

.kpi-chip {
  backdrop-filter: blur(10px);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.kpi-chip:hover {
  transform: translateY(-3px);
  box-shadow: 0 16px 28px rgba(15, 23, 42, 0.12);
}

.premium-panel {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.98) 0%, rgba(248, 250, 252, 0.95) 100%);
  transition: transform 0.28s ease, box-shadow 0.28s ease, border-color 0.28s ease;
}

.premium-panel:hover {
  transform: translateY(-6px);
  box-shadow: 0 28px 52px rgba(15, 23, 42, 0.14);
  border-color: rgba(197, 160, 89, 0.45) !important;
}

.price-card {
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

.price-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 30px 58px rgba(15, 23, 42, 0.14);
  border-color: rgba(197, 160, 89, 0.5) !important;
}

.price-card.featured {
  box-shadow: 0 32px 70px rgba(197, 160, 89, 0.2);
}

.text-xs.font-black.uppercase.tracking-\[0\.25em\].text-orange-500,
.text-xs.font-black.uppercase.tracking-\[0\.3em\].text-slate-400,
.text-sm.font-black.text-orange-500.uppercase.tracking-\[0\.35em\] {
  letter-spacing: 0.18em !important;
}

.premium-panel h3,
.premium-panel h4,
.price-card h3,
.price-card h4 {
  letter-spacing: -0.015em;
}

.price-card ul li,
.premium-panel p,
.kpi-chip div:last-child {
  line-height: 1.55;
}

.inline-block.px-5.py-1\.5.rounded-full,
.inline-block.px-4.sm\:px-5.py-1\.5.rounded-full {
  letter-spacing: 0.18em !important;
  border-color: rgba(197, 160, 89, 0.55) !important;
}

input,
select,
textarea {
  border: 1px solid #e2e8f0 !important;
}

input:focus,
select:focus,
textarea:focus {
  border-color: rgba(197, 160, 89, 0.65) !important;
  box-shadow: 0 0 0 3px rgba(197, 160, 89, 0.18) !important;
}

footer {
  background: var(--midnight-navy) !important;
  border-color: #c38c2540 !important;
}

footer .text-slate-900,
footer .text-slate-800,
footer .text-slate-700 {
  color: #f8fafc !important;
}

footer .text-slate-600,
footer .text-slate-500,
footer .text-slate-400 {
  color: #000000 !important;
}

footer a {
  color: #080808;
}

footer a:hover {
  color: var(--champagne-gold) !important;
}

@media (prefers-reduced-motion: no-preference) {
  .service-card,
  .hero-floating-box,
  a.bg-slate-900,
  button.bg-slate-900,
  a.gradient-bg,
  button.gradient-bg {
    transition: transform 0.28s ease, box-shadow 0.28s ease, filter 0.28s ease;
  }

  .service-card:hover,
  .hero-floating-box:hover {
    transform: translateY(-6px);
    box-shadow: 0 28px 56px rgba(15, 23, 42, 0.16) !important;
  }

  a.bg-slate-900:hover,
  button.bg-slate-900:hover,
  a.gradient-bg:hover,
  button.gradient-bg:hover {
    transform: translateY(-2px);
    filter: saturate(1.08);
  }
}