/* =========================================================
   VISUAL HIERARCHY — CONTROLLED COLOR SYSTEM
   Goal: reserve gradients/glow for high-value focal moments.
   ========================================================= */

:root{
  --vh-surface:#070c16;
  --vh-surface-2:#0a111f;
  --vh-surface-3:#0d1526;
  --vh-line:rgba(156,171,205,.14);
  --vh-line-strong:rgba(156,171,205,.22);
  --vh-text:#eef3ff;
  --vh-muted:#8e9bb5;
  --vh-shadow:0 18px 46px rgba(0,0,0,.22);
  --vh-shadow-soft:0 14px 38px rgba(31,43,78,.07);
  --vh-accent:#00f5ff;
}

.visual-home{--vh-accent:#00f5ff}
.solutions-page{--vh-accent:#5572ff}
.restaurant-solution-page{--vh-accent:#00f5ff}
.homestay-solution-page{--vh-accent:#5572ff}
.tourism-solution-page{--vh-accent:#c7ff3d}
.maps-solution-page{--vh-accent:#00f5ff}
.qr-solution-page{--vh-accent:#8b5cf6}
.about-page{--vh-accent:#00f5ff}
.pricing-page{--vh-accent:#5572ff}
.projects-page{--vh-accent:#8b5cf6}
.audit-page{--vh-accent:#ff3cac}
.privacy-page{--vh-accent:#5572ff}
.terms-page{--vh-accent:#8b5cf6}

/* 1. Signal strips become separators, not rainbow billboards */
.signal-strip,
.rest-signal-strip,
.stay-signal-strip,
.tour-signal-strip,
.qr-signal-strip,
.about-signal-strip,
.pricing-signal-strip,
.projects-signal-strip,
.audit-signal-strip{
  background:var(--vh-surface-2);
  box-shadow:none;
  border-top:1px solid color-mix(in srgb,var(--vh-accent) 34%,transparent);
  border-bottom:1px solid rgba(255,255,255,.055);
}

.signal-strip,
.rest-signal-strip,
.stay-signal-strip,
.tour-signal-strip,
.qr-signal-strip,
.about-signal-strip,
.pricing-signal-strip,
.projects-signal-strip,
.audit-signal-strip{
  color:#dbe5f7;
}

/* 2. Secondary highlighted words use one page accent, not full-spectrum text */
.section-heading h2 em,
.metrics-copy h2 em,
.rest-section-heading h2 span,
.rest-guest-copy h2 span,
.conversion-copy h2 span,
.rest-audit-copy h2 span,
.stay-section-heading h2 span,
.stay-location-copy h2 span,
.stay-direct-copy h2 span,
.stay-audit-copy h2 span,
.tour-section-heading h2 span,
.tour-pickup-copy h2 span,
.tour-trust-copy h2 span,
.qr-section-heading h2 span,
.qr-architecture-copy h2 span,
.qr-data-copy h2 span,
.about-section-heading h2 span,
.capability-copy h2 span,
.about-not-copy h2 span,
.region-copy h2 span,
.pricing-section-heading h2 span,
.pricing-anatomy-copy h2 span,
.pricing-cost-copy h2 span,
.projects-section-heading h2 span,
.transparency-copy h2 span,
.audit-section-heading h2 span,
.audit-output-copy h2 span,
.audit-form-intro h2 span,
.privacy-section-heading h2 span,
.privacy-data-copy h2 span,
.terms-section-heading h2 span,
.terms-lifecycle-copy h2 span,
.maps-section-heading h2 span,
.maps-profile-copy h2 span,
.review-loop-copy h2 span{
  color:var(--vh-accent);
  -webkit-text-fill-color:currentColor;
  background:none;
  -webkit-background-clip:border-box;
  background-clip:border-box;
  filter:none;
}

/* 3. Keep final CTA and hero highlights expressive.
   No override on final CTA spans / hero h1 spans by design. */

/* 4. Flatten repeated dark-section auroras into calm editorial surfaces */
.impact-section,
.process-section,
.audit-cinematic,
.solution-problem-section,
.solution-stack-section,
.maps-profile-section,
.maps-review-section,
.maps-audit-section,
.rest-guest-section,
.rest-conversion-section,
.rest-dashboard-section,
.rest-audit-section,
.stay-room-section,
.stay-trust-section,
.stay-ops-section,
.stay-audit-section,
.tour-itinerary-section,
.tour-pickup-section,
.tour-trust-section,
.tour-deliverables-section,
.qr-live-demo-section,
.qr-ops-section,
.qr-upgrade-section,
.about-name-section,
.about-principles-section,
.about-not-section,
.pricing-selector-section,
.pricing-compare-section,
.pricing-process-section,
.project-explorer-section,
.project-transparency-section,
.audit-friction-section,
.audit-process-section,
.privacy-data-section,
.terms-lifecycle-section{
  background:var(--vh-surface);
}

/* alternate a few long dark chapters so the scroll rhythm still has depth */
.rest-dashboard-section,
.stay-ops-section,
.tour-trust-section,
.qr-upgrade-section,
.about-not-section,
.pricing-process-section,
.project-transparency-section,
.audit-process-section{
  background:var(--vh-surface-2);
}

/* 5. Utility cards / floating labels become neutral information layers */
.float-card,
.rest-float-card,
.stay-float-card,
.tour-float-card,
.maps-float-card,
.qr-float-card,
.about-float-card,
.pricing-float-card,
.projects-float-card,
.audit-float-card,
.privacy-float-card,
.terms-float-card,
.brand-node,
.vault-node,
.diagnostic-node,
.privacy-node,
.terms-node,
.anatomy-node,
.ff-node,
.distance-node,
.cap-node,
.radar-node{
  background:rgba(9,16,29,.94);
  border-color:var(--vh-line);
  box-shadow:var(--vh-shadow);
  filter:none;
}

.float-card small,
.rest-float-card small,
.stay-float-card small,
.tour-float-card small,
.maps-float-card small,
.qr-float-card small,
.about-float-card small,
.pricing-float-card small,
.projects-float-card small,
.audit-float-card small,
.privacy-float-card small,
.terms-float-card small{
  color:var(--vh-muted);
}

/* 6. Repeated dark cards stop competing with the primary visual */
.guest-mode-card,
.conversion-card,
.rest-audit-grid>div,
.room-detail-card,
.trust-card,
.stay-audit-grid>div,
.selector-signals,
.transparency-stack article,
.audit-privacy-card,
.audit-form-card.form-card{
  background:var(--vh-surface-3);
  border-color:var(--vh-line);
  box-shadow:var(--vh-shadow);
}

.guest-card-top{
  background:rgba(255,255,255,.035);
  border-color:rgba(255,255,255,.06)
}

/* 7. Light cards use restraint: border and structure over floating shadow */
.card,
.price-card,
.step,
.case,
.form-card,
.rest-menu-panel,
.rest-deliverable-grid article,
.stay-deliverable-grid article,
.tour-service-card,
.language-card,
.qr-problem-card,
.pricing-package-card,
.cost-card,
.project-vault-card,
.audit-output-stack article,
.region-card{
  box-shadow:var(--vh-shadow-soft);
}

.card:hover,
.price-card:hover,
.step:hover,
.project-vault-card:hover,
.project-vault-card.selected{
  box-shadow:0 20px 48px rgba(31,43,78,.11);
}

/* 8. Pastel icon tiles become clean single-surface badges */
.rest-deliverable-grid article>span,
.stay-deliverable-grid article>span,
.audit-output-stack span{
  background:#eef3ff;
  color:#5366ff
}

/* 9. Pricing matrix: neutral cards, color stays in numbers and featured state */
.price-chip{
  background:var(--vh-surface-3);
  border-color:var(--vh-line);
  box-shadow:var(--vh-shadow);
  backdrop-filter:none
}

.pricing-package-card.companion{
  background:#f8faff
}

.package-badge{
  background:#5572ff;
  box-shadow:none
}

/* Featured pricing is allowed to stay expressive */
.pricing-package-card.featured{
  box-shadow:0 26px 70px rgba(28,38,78,.16)
}

/* 10. Remove decorative glow from standard devices/containers, preserve depth */
.restaurant-phone,
.stay-phone,
.tour-phone,
.qr-phone,
.gbp-card,
.case-browser,
.storefront-browser{
  box-shadow:0 34px 82px rgba(0,0,0,.36);
}

/* 11. Nodes and dots should signal, not glow continuously */
.distance-node i,
.audit-process-grid article:before{
  box-shadow:none
}

/* 12. Final CTA / hero / core product visuals remain intentionally vivid.
   Their original gradients are the scarce high-emphasis moments. */

@media(max-width:760px){
  .signal-strip,
  .rest-signal-strip,
  .stay-signal-strip,
  .tour-signal-strip,
  .qr-signal-strip,
  .about-signal-strip,
  .pricing-signal-strip,
  .projects-signal-strip,
  .audit-signal-strip{
    border-top-color:rgba(156,171,205,.16)
  }
}

@media(prefers-reduced-motion:reduce){
  .float-card,
  .rest-float-card,
  .stay-float-card,
  .tour-float-card,
  .maps-float-card,
  .qr-float-card,
  .about-float-card,
  .pricing-float-card,
  .projects-float-card,
  .audit-float-card{
    transition:none!important
  }
}