/* ============================================================
   PREMIUM-COMPONENTS.CSS
   Injects on top of components.css — Premium overrides only
   Glass cards, kinetic buttons, teal stats, kinetic process
   ============================================================ */

/* ══════════════════════════════════════════════════════════════
   SECTION LAYOUT UPGRADES
   ══════════════════════════════════════════════════════════════ */

.section--light {
  background-color: var(--color-surface) !important;
  border-top: 1px solid var(--color-border) !important;
  border-bottom: 1px solid var(--color-border) !important;
}

/* Section tag — teal accent */
.section-tag {
  display: inline-block;
  font-family: var(--font-label);
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--tracking-widest);
  color: var(--color-secondary);
  background: var(--color-secondary-light);
  padding: 4px 12px;
  border-radius: var(--radius-full);
  border: 1px solid rgba(0,104,117,0.20);
  margin-bottom: var(--space-4);
}

/* Section title — Manrope extrabold */
.section-title {
  font-family: var(--font-display) !important;
  font-weight: 800 !important;
  letter-spacing: -0.04em !important;
  color: var(--color-text-primary) !important;
}

/* ══════════════════════════════════════════════════════════════
   BUTTONS — Premium
   ══════════════════════════════════════════════════════════════ */

.btn {
  font-family: var(--font-body);
  font-weight: 700;
  letter-spacing: 0.01em;
  border-radius: var(--radius-md);
  transition:
    transform var(--duration-default) var(--ease-spring),
    box-shadow var(--duration-default) var(--ease-standard),
    background-color var(--duration-default) var(--ease-standard),
    border-color var(--duration-default) var(--ease-standard) !important;
}

/* Primary — Gold with bloom shadow */
.btn-primary {
  background: var(--color-gold) !important;
  color: #fff !important;
  border-color: var(--color-gold) !important;
  box-shadow: 0 4px 16px rgba(201,168,76,0.30);
}
.btn-primary:hover {
  background: var(--color-gold-bright) !important;
  border-color: var(--color-gold-bright) !important;
  box-shadow: 0 8px 28px rgba(201,168,76,0.45) !important;
  transform: translateY(-3px) !important;
}
.btn-primary:active {
  transform: translateY(0) scale(0.97) !important;
}

/* Secondary — Ghost with border */
.btn-secondary {
  background: transparent;
  color: var(--color-text-primary) !important;
  border: 2px solid rgba(25,28,29,0.20) !important;
}
.btn-secondary:hover {
  border-color: var(--color-primary) !important;
  color: var(--color-primary) !important;
  background: var(--color-primary-light) !important;
  transform: translateY(-2px) !important;
}

/* Pulse ring */
.btn-pulse::before {
  content: '';
  position: absolute;
  inset: -5px;
  border-radius: inherit;
  animation: pulse-ring 2.5s ease-out infinite;
}

/* ══════════════════════════════════════════════════════════════
   PILL TAG — Premium
   ══════════════════════════════════════════════════════════════ */

.pill-tag {
  background: rgba(0,104,117,0.07) !important;
  border: 1px solid rgba(0,104,117,0.20) !important;
  color: var(--color-secondary) !important;
}
.pill-tag .pulse-dot {
  background: var(--color-secondary) !important;
  box-shadow: 0 0 0 0 rgba(0,104,117,0.5);
  animation: pulse-dot-teal 2s ease-out infinite !important;
}

@keyframes pulse-dot-teal {
  0%   { box-shadow: 0 0 0 0 rgba(0,104,117,0.55); }
  70%  { box-shadow: 0 0 0 8px rgba(0,104,117,0); }
  100% { box-shadow: 0 0 0 0 rgba(0,104,117,0); }
}

/* ══════════════════════════════════════════════════════════════
   CARDS — Premium Glass
   ══════════════════════════════════════════════════════════════ */

/* Objection cards */
.objection-card {
  background: #fff !important;
  border: 1px solid var(--color-border) !important;
  border-radius: var(--radius-lg) !important;
  box-shadow: var(--shadow-sm) !important;
  transition:
    border-color var(--duration-default) var(--ease-standard),
    box-shadow var(--duration-default) var(--ease-standard),
    transform var(--duration-default) var(--ease-spring) !important;
}
.objection-card:hover {
  border-color: rgba(0,104,117,0.25) !important;
  box-shadow: var(--shadow-md) !important;
  transform: translateY(-4px) !important;
}
.objection-quote-mark {
  color: var(--color-secondary) !important;
  font-family: var(--font-display) !important;
}

/* Service cards */
.service-card {
  background: #fff !important;
  border: 1px solid var(--color-border) !important;
  border-radius: var(--radius-lg) !important;
  box-shadow: var(--shadow-sm) !important;
  position: relative;
  overflow: hidden;
  transition:
    transform var(--duration-default) var(--ease-spring),
    box-shadow var(--duration-default) var(--ease-standard),
    border-color var(--duration-default) var(--ease-standard) !important;
}
.service-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--gradient-kinetic);
  opacity: 0;
  transition: opacity var(--duration-default) var(--ease-standard);
}
.service-card:hover::before { opacity: 1; }
.service-card:hover {
  border-color: rgba(72,0,178,0.15) !important;
  box-shadow:
    var(--shadow-md),
    0 0 0 1px rgba(72,0,178,0.08) !important;
  transform: translateY(-8px) !important;
}
.service-card-icon {
  background: var(--color-secondary-light) !important;
  border-radius: var(--radius-md) !important;
  border: 1px solid rgba(0,104,117,0.15) !important;
  font-size: 28px !important;
}
.service-features-list li .feat-check {
  color: var(--color-secondary) !important;
}
.service-note {
  background: rgba(0,104,117,0.05) !important;
  border: 1px solid rgba(0,104,117,0.15) !important;
  border-radius: var(--radius-md) !important;
}

/* ══════════════════════════════════════════════════════════════
   RESULTS — Teal stats
   ══════════════════════════════════════════════════════════════ */

.result-stat {
  background: #fff !important;
  border: 1px solid var(--color-border) !important;
  border-radius: var(--radius-lg) !important;
  box-shadow: var(--shadow-sm) !important;
  position: relative;
  overflow: hidden;
  transition:
    transform var(--duration-default) var(--ease-spring),
    box-shadow var(--duration-default) var(--ease-standard) !important;
}
.result-stat:hover {
  transform: translateY(-6px) !important;
  box-shadow: var(--shadow-teal) !important;
}
.result-stat::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 3px;
  background: var(--gradient-teal);
  opacity: 0;
  transition: opacity var(--duration-default) var(--ease-standard);
}
.result-stat:hover::after { opacity: 1; }

.result-stat-value {
  font-family: var(--font-display) !important;
  font-weight: 800 !important;
  color: var(--color-secondary) !important;
  font-size: clamp(44px, 7vw, 72px) !important;
  line-height: 1 !important;
}
.result-stat-label {
  font-family: var(--font-label) !important;
  font-weight: 700 !important;
  color: var(--color-on-surface-variant) !important;
  font-size: 10px !important;
  letter-spacing: var(--tracking-widest) !important;
}
.result-stat-bench {
  color: var(--color-text-muted) !important;
  font-style: italic;
}

.result-context {
  background: #fff !important;
  border: 1px solid var(--color-border) !important;
  border-radius: var(--radius-lg) !important;
  box-shadow: var(--shadow-sm) !important;
}
.result-context-tag {
  color: var(--color-secondary) !important;
  background: var(--color-secondary-light) !important;
  border: 1px solid rgba(0,104,117,0.20) !important;
  font-family: var(--font-label) !important;
  font-weight: 700 !important;
}
.result-projection {
  background: rgba(0,104,117,0.06) !important;
  border-left: 3px solid var(--color-secondary) !important;
}

/* ══════════════════════════════════════════════════════════════
   PROCESS STEPS — Premium numbered circles
   ══════════════════════════════════════════════════════════════ */

.process-step {
  background: #fff;
  border: 1px solid var(--color-border) !important;
  border-radius: var(--radius-lg) !important;
  padding: var(--space-8) !important;
  box-shadow: var(--shadow-sm);
  transition:
    transform var(--duration-default) var(--ease-spring),
    box-shadow var(--duration-default) var(--ease-standard),
    border-color var(--duration-default) var(--ease-standard) !important;
}
.process-step:hover {
  transform: translateY(-8px) !important;
  box-shadow: var(--shadow-purple) !important;
  border-color: rgba(72,0,178,0.20) !important;
}

.process-circle {
  width: 64px !important;
  height: 64px !important;
  border: none !important;
  background: var(--gradient-kinetic) !important;
  box-shadow: 0 8px 24px rgba(72,0,178,0.30) !important;
  transition: box-shadow var(--duration-default) var(--ease-standard) !important;
}
.process-step:hover .process-circle {
  box-shadow: 0 12px 32px rgba(72,0,178,0.45) !important;
  background: var(--color-primary-mid) !important;
}
.process-number {
  color: #fff !important;
  font-family: var(--font-display) !important;
  font-weight: 800 !important;
  font-size: 22px !important;
}
.process-step:hover .process-number { color: #fff !important; }

.process-badge {
  background: var(--color-secondary-light) !important;
  border: 1px solid rgba(0,104,117,0.20) !important;
  color: var(--color-secondary) !important;
  font-family: var(--font-label) !important;
  font-weight: 700 !important;
}

/* Connector line — teal dashes */
.process-connector {
  background: repeating-linear-gradient(
    90deg,
    rgba(0,104,117,0.25) 0px,
    rgba(0,104,117,0.25) 8px,
    transparent 8px,
    transparent 16px
  ) !important;
}

/* ══════════════════════════════════════════════════════════════
   FAQ — Premium
   ══════════════════════════════════════════════════════════════ */

.faq-item {
  background: #fff;
  border: 1px solid var(--color-border) !important;
  border-radius: var(--radius-md) !important;
  box-shadow: var(--shadow-sm);
  transition:
    border-color var(--duration-default) var(--ease-standard),
    box-shadow var(--duration-default) var(--ease-standard) !important;
}
.faq-item.open {
  border-color: rgba(0,104,117,0.25) !important;
  box-shadow: 0 4px 16px rgba(0,104,117,0.10) !important;
}
.faq-question {
  font-family: var(--font-body) !important;
  font-weight: 600 !important;
}
.faq-chevron { color: var(--color-secondary) !important; }
.faq-item.open .faq-chevron { color: var(--color-primary) !important; }

/* ══════════════════════════════════════════════════════════════
   FORMS — Premium
   ══════════════════════════════════════════════════════════════ */

.form-label {
  font-family: var(--font-label) !important;
  font-weight: 700 !important;
  color: var(--color-on-surface-variant) !important;
  font-size: 10px !important;
  letter-spacing: var(--tracking-widest) !important;
}
.form-input,
.form-select {
  background: var(--color-surface-container-low) !important;
  border: 1px solid var(--color-border) !important;
  border-radius: var(--radius-md) !important;
  font-family: var(--font-body) !important;
  transition:
    border-color var(--duration-default) var(--ease-standard),
    box-shadow var(--duration-default) var(--ease-standard) !important;
}
.form-input:focus,
.form-select:focus {
  border-color: var(--color-secondary) !important;
  box-shadow: 0 0 0 3px rgba(0,104,117,0.12) !important;
  background: #fff !important;
}

/* ══════════════════════════════════════════════════════════════
   AWARENESS QUOTE
   ══════════════════════════════════════════════════════════════ */

.awareness-quote {
  background: #fff !important;
  border-left: 4px solid var(--color-secondary) !important;
  border-radius: 0 var(--radius-lg) var(--radius-lg) 0 !important;
  box-shadow: var(--shadow-md) !important;
}
.awareness-quote p {
  font-family: var(--font-display) !important;
  font-weight: 700 !important;
  color: var(--color-text-primary) !important;
}

/* ══════════════════════════════════════════════════════════════
   CTA FINAL SECTION
   ══════════════════════════════════════════════════════════════ */

.cta-final-section {
  background: var(--gradient-dark) !important;
  border-top: 1px solid rgba(255,255,255,0.06) !important;
}

.cta-final-section .section-title {
  color: #fff !important;
}
.cta-final-section .section-sub,
.cta-final-section .fs-md,
.cta-final-section .color-secondary {
  color: rgba(255,255,255,0.70) !important;
}
.cta-final-section .color-muted {
  color: rgba(255,255,255,0.40) !important;
}
.cta-final-section .btn-secondary {
  border-color: rgba(255,255,255,0.25) !important;
  color: rgba(255,255,255,0.85) !important;
}
.cta-final-section .btn-secondary:hover {
  border-color: rgba(255,255,255,0.55) !important;
  background: rgba(255,255,255,0.08) !important;
  color: #fff !important;
}
.cta-final-section .cta-slots-badge {
  background: rgba(255,255,255,0.08) !important;
  border-color: rgba(255,255,255,0.15) !important;
  color: rgba(255,255,255,0.85) !important;
}

/* ══════════════════════════════════════════════════════════════
   ABOUT SECTION — Monogram
   ══════════════════════════════════════════════════════════════ */

.about-monogram {
  background: var(--gradient-kinetic) !important;
  border: none !important;
  box-shadow: 0 12px 40px rgba(72,0,178,0.30);
}
.about-monogram-text {
  background: #fff !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
}

.differentiator-item {
  background: #fff !important;
  border: 1px solid var(--color-border) !important;
  transition:
    transform var(--duration-default) var(--ease-spring),
    box-shadow var(--duration-default) var(--ease-standard),
    border-color var(--duration-default) var(--ease-standard);
}
.differentiator-item:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
  border-color: rgba(0,104,117,0.20);
}
.differentiator-icon {
  background: var(--color-secondary-light) !important;
  border: 1px solid rgba(0,104,117,0.15) !important;
}

/* ══════════════════════════════════════════════════════════════
   FOOTER
   ══════════════════════════════════════════════════════════════ */

.site-footer {
  background: var(--color-surface) !important;
  border-top: 1px solid var(--color-border) !important;
}

.nav-logo.d-block {
  background: var(--gradient-kinetic);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  font-weight: 800;
  font-size: 20px;
  letter-spacing: -0.04em;
}

/* ══════════════════════════════════════════════════════════════
   SCROLL INDICATOR — Overridden by hero-premium.css
   Keep gold dot here as fallback
   ══════════════════════════════════════════════════════════════ */

.scroll-indicator {
  color: var(--color-secondary) !important;
}

/* ══════════════════════════════════════════════════════════════
   CONTACT SECTION — Card wrapper
   ══════════════════════════════════════════════════════════════ */

.contact-wrapper {
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  padding: var(--space-10);
  box-shadow: var(--shadow-md);
}

@media (max-width: 767px) {
  .contact-wrapper { padding: var(--space-6); border-radius: var(--radius-lg); }
}

.budget-disclaimer {
  background: rgba(0,104,117,0.05) !important;
  border: 1px solid rgba(0,104,117,0.15) !important;
  border-radius: var(--radius-md) !important;
}

/* ══════════════════════════════════════════════════════════════
   MAGNETIC BUTTON PREP (JS adds .magnetic class)
   ══════════════════════════════════════════════════════════════ */

.magnetic {
  display: inline-flex;
  position: relative;
  transform-style: preserve-3d;
  will-change: transform;
}