/* Premium Polish — CreditForge
   RULE: Never use [class*="hero"] — too broad, breaks layout */

/* 1. JESS IMAGES — Copper-framed premium treatment */
img[src*="jess"][src*="nobg"] {
  filter: drop-shadow(0 20px 40px rgba(212, 165, 116, 0.15)) drop-shadow(0 8px 16px rgba(0,0,0,0.4));
  transition: filter 0.5s ease, transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

img[src*="jess"][src*="nobg"]:hover {
  filter: drop-shadow(0 28px 56px rgba(212, 165, 116, 0.22)) drop-shadow(0 12px 24px rgba(0,0,0,0.5));
  transform: translateY(-6px) scale(1.01);
}

img[src*="jess"]:not([src*="nobg"]):not([src*="avatar"]):not([src*="favicon"]):not([src*="icon"]) {
  border-radius: 12px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.4), inset 0 0 0 1px rgba(212, 165, 116, 0.12);
  transition: box-shadow 0.4s ease, transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

img[src*="jess"]:not([src*="nobg"]):not([src*="avatar"]):hover {
  box-shadow: 0 12px 48px rgba(0,0,0,0.5), inset 0 0 0 1px rgba(212, 165, 116, 0.2);
  transform: translateY(-3px);
}

/* 2. GRADIENT TEXT — Shimmer */
.text-copper-gradient {
  background-size: 200% auto !important;
  animation: copper-shimmer 5s linear infinite;
}

@keyframes copper-shimmer {
  0% { background-position: 0% center; }
  100% { background-position: 200% center; }
}

/* 3. CARDS — Premium depth */
.forge-card, .pricing-card, .step-card, .faq-item {
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 0.4s cubic-bezier(0.16, 1, 0.3, 1),
              border-color 0.3s ease !important;
}

.forge-card:hover, .pricing-card:hover, .step-card:hover {
  transform: translateY(-6px) !important;
  box-shadow: 0 20px 60px rgba(212, 165, 116, 0.06),
              0 8px 20px rgba(0,0,0,0.4) !important;
}

/* 4. BUTTONS — Forge sheen */
.btn-amber, .btn-ghost, .btn-copper {
  position: relative;
  overflow: hidden;
}

.btn-amber::after, .btn-ghost::after, .btn-copper::after {
  content: "";
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: linear-gradient(45deg, transparent 40%, rgba(255,255,255,0.08) 50%, transparent 60%);
  transform: translateX(-100%);
  transition: transform 0.6s ease;
  pointer-events: none;
}

.btn-amber:hover::after, .btn-ghost:hover::after, .btn-copper:hover::after {
  transform: translateX(100%);
}

.btn-amber:active, .btn-ghost:active, .btn-copper:active {
  transform: scale(0.97) !important;
}

/* 5. SECTION DIVIDERS — Copper line */
main > section + section::before {
  content: "";
  display: block;
  width: 60px;
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(212, 165, 116, 0.35), transparent);
  margin: 0 auto 3rem;
}

/* 6. FAQ — Active state */
details[open] {
  border-color: rgba(212, 165, 116, 0.3) !important;
  background: rgba(212, 165, 116, 0.03) !important;
}

details[open] summary {
  color: #D4A574 !important;
}

/* 7. SCROLLBAR */
html {
  scrollbar-width: thin;
  scrollbar-color: rgba(212, 165, 116, 0.3) transparent;
}

::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(212, 165, 116, 0.3); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: rgba(212, 165, 116, 0.5); }

/* 8. SELECTION */
::selection {
  background: rgba(212, 165, 116, 0.3);
  color: #fff;
}

/* 9. LINK UNDERLINE */
a:not(.btn-amber):not(.btn-ghost):not(.btn-copper):not(.nav-link):not([class*="nav"]):not(.logo):not(#nav-pill a) {
  text-decoration: none;
  background-image: linear-gradient(rgba(212, 165, 116, 0.4), rgba(212, 165, 116, 0.4));
  background-size: 0% 1px;
  background-repeat: no-repeat;
  background-position: left bottom;
  transition: background-size 0.3s ease;
}

a:not(.btn-amber):not(.btn-ghost):not(.btn-copper):not(.nav-link):not([class*="nav"]):not(.logo):not(#nav-pill a):hover {
  background-size: 100% 1px;
}

/* 10. PRICING highlight */
.pricing-card.featured, .pricing-card.popular {
  position: relative;
  border-color: rgba(212, 165, 116, 0.4) !important;
}

.pricing-card.featured::before, .pricing-card.popular::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 20%;
  right: 20%;
  height: 2px;
  background: linear-gradient(90deg, transparent, #D4A574, transparent);
}

/* 11. RESPONSIVE */
@media (max-width: 768px) {
  main > section + section::before {
    width: 30px;
    margin-bottom: 2rem;
  }
}