/* ══════════════════════════════════════════════════════
   VISUALAURA — Homepage color unification (scoped to body.vx-home)
   Aligns the homepage with the shared Visualaura burgundy palette
   used by every service page (Royal Burgundy #6E1423, Velvet #54101b,
   gold #C9A96E kept as the supporting luxury accent).
   COLOR ONLY — no layout, spacing, type, or animation changes.
   Everything is scoped to body.vx-home so no other page is affected.
   ══════════════════════════════════════════════════════ */

/* ── Tokens (flips every var()-driven colour) ── */
body.vx-home {
  --primary:   #6E1423;
  --primary-d: #54101b;
  --primary-l: #8a2433;
  --border:    rgba(110,20,35,.14);
  --shadow-sm: 0 2px 12px rgba(110,20,35,.10);
  --shadow-md: 0 8px 32px rgba(110,20,35,.14);
  --shadow-lg: 0 20px 60px rgba(110,20,35,.18);
}

/* ── Buttons ── */
body.vx-home .btn-primary { box-shadow: 0 4px 20px rgba(110,20,35,.34); }
body.vx-home .btn-primary:hover { box-shadow: 0 8px 32px rgba(110,20,35,.45); }
body.vx-home .btn-ghost { background: rgba(110,20,35,.08); border-color: rgba(110,20,35,.2); }
body.vx-home .btn-ghost:hover { background: rgba(110,20,35,.14); }

/* ── Navigation ── */
body.vx-home .nav-circle { box-shadow: 0 3px 12px rgba(110,20,35,.08); }
body.vx-home .nav-circle:hover { box-shadow: 0 8px 20px rgba(110,20,35,.14); }
body.vx-home .nav-toggle { box-shadow: 0 6px 18px rgba(110,20,35,.28); }
body.vx-home .nav-toggle:hover { background: #54101b; box-shadow: 0 10px 24px rgba(110,20,35,.34); }
body.vx-home .gs-panel { box-shadow: 0 30px 80px rgba(110,20,35,.2), 0 10px 30px rgba(110,20,35,.12), inset 0 0 0 1px rgba(255,255,255,.45); }
body.vx-home .gs-cur:hover, body.vx-home .gs-lang:hover { box-shadow: 0 6px 16px rgba(110,20,35,.1); }
body.vx-home .gs-cur.active, body.vx-home .gs-lang.active { box-shadow: 0 0 0 1px var(--primary), 0 6px 18px rgba(110,20,35,.16); }

/* ── Section badge ── */
body.vx-home .section-badge { background: rgba(110,20,35,.08); border-color: rgba(110,20,35,.18); }

/* ── Hero ── */
body.vx-home .hero-orb-2 { background: radial-gradient(circle, rgba(110,20,35,.22) 0%, transparent 70%); }
body.vx-home .hero-grid { background-image: linear-gradient(rgba(110,20,35,.04) 1px, transparent 1px), linear-gradient(90deg, rgba(110,20,35,.04) 1px, transparent 1px); }
body.vx-home .hero-badge { background: rgba(110,20,35,.07); border-color: rgba(110,20,35,.18); }
body.vx-home .hero-ring { border-color: rgba(110,20,35,.12); }
body.vx-home .float-card { box-shadow: 0 8px 32px rgba(110,20,35,.15); }

/* Hero device mockup (decorative preview) */
body.vx-home .ls-bar { background: rgba(110,20,35,.06); }
body.vx-home .ls-dot { background: rgba(110,20,35,.25); }
body.vx-home .ls-url { background: rgba(110,20,35,.1); }
body.vx-home .ls-hero-nav { border-bottom-color: rgba(110,20,35,.08); }
body.vx-home .lhn-links div { background: rgba(110,20,35,.2); }
body.vx-home .lhb-line { background: rgba(110,20,35,.18); }
body.vx-home .lhb-img { background: linear-gradient(135deg, rgba(201,169,110,.4), rgba(110,20,35,.3)); }
body.vx-home .ps-card { background: linear-gradient(90deg, rgba(110,20,35,.2), rgba(201,169,110,.15)); }
body.vx-home .ps-mini { background: rgba(110,20,35,.12); }

/* ── Services ── */
body.vx-home .svc-card:hover { border-color: rgba(110,20,35,.3); }
body.vx-home .svc-tags span { background: rgba(110,20,35,.07); border-color: rgba(110,20,35,.15); }
body.vx-home .svc-arrow { background: rgba(110,20,35,.1); }
body.vx-home .aa-tags span { background: rgba(110,20,35,.06); }
body.vx-home .aa-tags span:hover { background: rgba(110,20,35,.12); border-color: rgba(110,20,35,.25); }

/* ── Portfolio (decorative mockups + hover overlay) ── */
body.vx-home .ws-badge { background: rgba(110,20,35,.1); }
body.vx-home .wg-1 { background: linear-gradient(135deg, rgba(110,20,35,.3), rgba(201,169,110,.2)); }
body.vx-home .wg-2 { background: linear-gradient(135deg, rgba(201,169,110,.4), rgba(110,20,35,.15)); }
body.vx-home .wg-3 { background: linear-gradient(135deg, rgba(110,20,35,.2), rgba(201,169,110,.35)); }
body.vx-home .ws-rsvp div:last-child { border-color: rgba(110,20,35,.2); }
body.vx-home .grs-bg { background: linear-gradient(135deg, #6E1423 0%, #C9A96E 40%, #2E2E2E 100%); }
body.vx-home .as-cards div { background: rgba(110,20,35,.12); border-color: rgba(110,20,35,.08); }
body.vx-home .as-chart div { background: linear-gradient(180deg, rgba(110,20,35,.6), rgba(201,169,110,.3)); }
body.vx-home .pf-overlay { background: linear-gradient(135deg, rgba(110,20,35,.92), rgba(46,46,46,.88)); }

/* ── Why Us (feature icons + review-card mockup) ── */
body.vx-home .feat-icon { background: rgba(110,20,35,.08); border-color: rgba(110,20,35,.15); }
body.vx-home .rc-name { background: rgba(110,20,35,.25); }
body.vx-home .rc-role { background: rgba(110,20,35,.12); }
body.vx-home .rc-text .l { background: rgba(110,20,35,.1); }
body.vx-home .rc-project { background: rgba(110,20,35,.05); }
body.vx-home .rcp-info .l { background: rgba(110,20,35,.18); }
body.vx-home .wuv-deco { border-color: rgba(110,20,35,.2); }

/* ── Pricing ── */
body.vx-home .pricing-note { background: rgba(110,20,35,.05); }
/* Featured ("Most Popular") card sits on a dark burgundy gradient — keep its
   heading and icon legible (a base .price-card rule was overriding them). */
body.vx-home .price-featured h3 { color: #fff; }
body.vx-home .price-featured .pc-icon { color: rgba(255,255,255,.92); }

/* ── CTA dark band (keep cocoa/charcoal base + gold; warm orbs -> burgundy) ── */
body.vx-home .cta-orb.o1 { background: radial-gradient(circle, rgba(110,20,35,.45) 0%, transparent 70%); }
body.vx-home .cta-orb.o3 { background: radial-gradient(circle, rgba(110,20,35,.2) 0%, transparent 70%); }

/* ── Contact ── */
body.vx-home .ci-icon { background: rgba(110,20,35,.08); border-color: rgba(110,20,35,.15); }
body.vx-home .cf-input:focus, body.vx-home .cf-select:focus, body.vx-home .cf-textarea:focus { box-shadow: 0 0 0 3px rgba(110,20,35,.12); }

/* Loader styling now lives entirely in style.css (editorial charcoal reveal). */

/* ══════════════════════════════════════════════════════
   PRICING SECTION — premium refinement (additive, homepage)
   Elevated featured card, luxury hover micro-interactions,
   delivery + value lines, trust strip, custom-project panel.
   ══════════════════════════════════════════════════════ */

/* All cards — luxury hover + icon micro-interaction */
body.vx-home .price-card { transition: transform .5s var(--ease), box-shadow .5s var(--ease), border-color .5s var(--ease); }
body.vx-home .price-card .pc-icon { transition: transform .5s var(--ease), color .4s var(--ease); will-change: transform; }
body.vx-home .price-card:hover { transform: translateY(-10px); border-color: rgba(201,169,110,.55); box-shadow: 0 26px 60px rgba(110,20,35,.16), 0 0 0 1px rgba(201,169,110,.3); }
body.vx-home .price-card:hover .pc-icon { transform: scale(1.08) rotate(-3deg); color: var(--accent); }

/* Value message + delivery timeline (secondary to price) */
body.vx-home .pc-value { font-family: var(--font-body); font-size: .8rem; font-weight: 300; font-style: italic; line-height: 1.5; color: var(--text-m); margin: -12px 0 12px; }
body.vx-home .pc-deliver { display: inline-flex; align-items: center; gap: 7px; font-family: var(--font-body); font-size: .6rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--text-l); margin-bottom: 22px; }
body.vx-home .pc-deliver svg { width: 13px; height: 13px; color: var(--accent); flex-shrink: 0; }
body.vx-home .price-featured .pc-value { color: rgba(255,255,255,.82); }
body.vx-home .price-featured .pc-deliver { color: rgba(255,255,255,.6); }

/* Featured card — animated burgundy→copper gradient, ambient glow, scale, floating badge */
body.vx-home .price-featured {
  overflow: visible; z-index: 2;
  background: linear-gradient(135deg, #54101b 0%, #6E1423 38%, #8c3a2a 72%, #6E1423 100%);
  background-size: 220% 220%;
  animation: pcFeatGradient 12s ease-in-out infinite, pcFeatGlow 5s ease-in-out infinite;
}
body.vx-home .price-featured::after { display: none; } /* replace thin shimmer with the richer gradient */
body.vx-home .price-featured.visible { transform: scale(1.045); }
body.vx-home .price-featured:hover { transform: scale(1.07) translateY(-8px); }
@keyframes pcFeatGradient { 0%,100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } }
@keyframes pcFeatGlow {
  0%,100% { box-shadow: 0 26px 64px rgba(110,20,35,.30), 0 0 50px rgba(140,58,42,.18); }
  50%     { box-shadow: 0 32px 74px rgba(110,20,35,.40), 0 0 72px rgba(201,169,110,.22); }
}
/* Floating premium badge */
body.vx-home .price-featured .pc-popular { animation: pcBadgeFloat 3.2s ease-in-out infinite; box-shadow: 0 8px 22px rgba(201,169,110,.42); }
@keyframes pcBadgeFloat { 0%,100% { transform: translateX(-50%) translateY(0); } 50% { transform: translateX(-50%) translateY(-5px); } }

/* Trust strip */
body.vx-home .trust-strip { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px 30px; margin: 40px auto 0; max-width: 860px; }
body.vx-home .trust-item { display: inline-flex; align-items: center; gap: 9px; font-family: var(--font-body); font-size: .78rem; font-weight: 500; letter-spacing: .03em; color: var(--text-m); }
body.vx-home .trust-item svg { width: 20px; height: 20px; padding: 4px; flex-shrink: 0; color: #fff; background: linear-gradient(135deg, #6E1423, #8a2433); border-radius: 50%; box-shadow: 0 3px 10px rgba(110,20,35,.22); }

/* Custom-project panel (visually connects with the dark CTA band below) */
body.vx-home .custom-panel {
  position: relative; overflow: hidden;
  margin: 46px auto 0; max-width: 920px;
  display: flex; align-items: center; justify-content: space-between; gap: 30px; flex-wrap: wrap;
  background: linear-gradient(135deg, #2E2E2E 0%, #2a1216 55%, #1a1012 100%);
  border: 1px solid rgba(201,169,110,.25); border-radius: 22px;
  padding: 34px 40px;
  box-shadow: 0 24px 60px rgba(46,46,46,.18);
}
body.vx-home .custom-panel::before { content: ''; position: absolute; width: 320px; height: 320px; right: -90px; top: -130px; background: radial-gradient(circle, rgba(201,169,110,.16), transparent 70%); pointer-events: none; }
body.vx-home .cp-text { position: relative; max-width: 560px; }
body.vx-home .cp-text h3 { font-family: var(--font-head); font-size: 1.7rem; font-weight: 400; color: #fff; letter-spacing: -.01em; margin-bottom: 8px; }
body.vx-home .cp-text h3 em { font-style: italic; color: var(--accent); }
body.vx-home .cp-text p { font-family: var(--font-body); font-size: .9rem; font-weight: 300; line-height: 1.75; color: rgba(255,255,255,.66); margin: 0; }
body.vx-home .cp-btn { position: relative; flex-shrink: 0; display: inline-flex; align-items: center; gap: 9px; font-family: var(--font-body); font-size: .74rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: #2E2E2E; text-decoration: none; background: linear-gradient(135deg, #C9A96E, #e0c898); padding: 15px 28px; border-radius: 50px; box-shadow: 0 12px 30px rgba(201,169,110,.28); transition: transform .4s var(--ease), box-shadow .4s var(--ease); }
body.vx-home .cp-btn svg { width: 15px; height: 15px; transition: transform .4s var(--ease); }
body.vx-home .cp-btn:hover { transform: translateY(-3px); box-shadow: 0 18px 42px rgba(201,169,110,.42); }
body.vx-home .cp-btn:hover svg { transform: translateX(4px); }

/* Pricing note — clean centered paragraph (avoids awkward flex-column wrapping
   on mobile) and proper spacing below the trust strip. */
body.vx-home .pricing-note { display: block; max-width: 620px; margin: 30px auto 0; line-height: 1.7; }
body.vx-home .pricing-note svg { display: inline; vertical-align: -4px; margin-right: 7px; }
body.vx-home .pricing-note a { white-space: nowrap; }

@media (max-width: 600px) {
  body.vx-home .custom-panel { padding: 28px 24px; }
  body.vx-home .cp-btn { width: 100%; justify-content: center; }
}

@media (prefers-reduced-motion: reduce) {
  body.vx-home .price-featured { animation: none; }
  body.vx-home .price-featured .pc-popular { animation: none; }
}