/* ==========================================================================
   enhance.css — Visual polish + wow-factor layer
   Loaded AFTER style.css, so these rules refine on top of the base design.
   Kept deliberately restrained for the luxury positioning: no redundant
   effects (the base already has button sweeps, card accents, nav underlines),
   only tasteful material, motion, and micro-interaction upgrades + device tuning.
   Self-contained: own keyframes, no dependency on base animation names.
   ========================================================================== */

/* ── 1. Global rendering polish ─────────────────────────────────────────── */
html { scroll-behavior: smooth; }
body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
img { max-width: 100%; height: auto; }

/* Brand-tinted text selection */
::selection      { background: rgba(232, 184, 75, 0.26); color: #fff; }
::-moz-selection { background: rgba(232, 184, 75, 0.26); color: #fff; }

/* Accessible, on-brand keyboard focus ring */
:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
  border-radius: 3px;
}
a, button, [role="button"] { -webkit-tap-highlight-color: rgba(232, 184, 75, 0.14); }

/* Refined gradient scrollbar thumb (track is styled in the base) */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb {
  background: linear-gradient(var(--orange), var(--gold));
  border: 2px solid var(--dark);
  border-radius: 10px;
}
::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(var(--orange-light), var(--gold-light));
}

/* ── 2. Navbar — frosted glass once scrolled ────────────────────────────── */
.navbar.scrolled {
  -webkit-backdrop-filter: blur(16px) saturate(125%);
  backdrop-filter: blur(16px) saturate(125%);
  background: rgba(18, 18, 18, 0.70);
  border-bottom: 1px solid rgba(232, 184, 75, 0.10);
}

/* ── 3. Shimmering gold→copper accent on the italic key-words in headings ── */
@keyframes enhanceSheen {
  0%   { background-position: 0% center; }
  100% { background-position: 200% center; }
}
.section-title em,
.page-hero-title em {
  background: linear-gradient(100deg,
              var(--gold-light), var(--gold), var(--orange-light), var(--orange), var(--gold));
  background-size: 220% auto;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: var(--orange); /* graceful fallback */
  animation: enhanceSheen 9s linear infinite;
}

/* ── 4. Primary button — soft brand glow on hover (base keeps its sweep) ─── */
.btn-primary { transition: transform var(--transition), box-shadow var(--transition); }
.btn-primary:hover {
  box-shadow: 0 16px 44px rgba(196, 98, 45, 0.34), 0 0 0 1px rgba(232, 184, 75, 0.22);
}
.btn-ghost:hover { box-shadow: 0 0 26px rgba(232, 184, 75, 0.14); }

/* ── 5. Prose + footer links — elegant underline grow ───────────────────── */
.faq-a a, .legal-content a, .footer-col a, .footer-brand a,
.svc-invest a, .mob-footer a {
  background-image: linear-gradient(currentColor, currentColor);
  background-size: 0% 1px;
  background-repeat: no-repeat;
  background-position: left 100%;
  padding-bottom: 1px;
  transition: background-size var(--transition), color var(--transition);
}
.faq-a a:hover, .legal-content a:hover, .footer-col a:hover, .footer-brand a:hover,
.svc-invest a:hover, .mob-footer a:hover { background-size: 100% 1px; }

/* ── 6. Cards — smoother compositing (accents/lift come from the base) ───── */
.service-card, .include-item, .industry-card, .process-step,
.pair-card, .why-card, .port-card { will-change: transform; }

/* ── 7. Mobile & touch tuning ───────────────────────────────────────────── */
/* Prevent hover states sticking on touch devices */
@media (hover: none) {
  .service-card:hover, .include-item:hover, .industry-card:hover,
  .pair-card:hover, .why-card:hover, .port-card:hover,
  .process-step:hover { transform: none; }
}

/* ==========================================================================
   Progressive wow-factor styles (paired with js/enhance.js)
   ========================================================================== */

/* ── Sticky mobile call-to-action ───────────────────────────────────────── */
.mobile-cta { display: none; }
@media (max-width: 768px) {
  .mobile-cta {
    position: fixed; left: 50%; bottom: 18px; z-index: 992;
    display: inline-flex; align-items: center; gap: 0.55rem;
    padding: 0.85rem 1.6rem; border-radius: 100px;
    font-family: var(--font-body); font-size: 0.8rem; font-weight: 700;
    letter-spacing: 0.08em; text-transform: uppercase;
    color: #17100a; white-space: nowrap; text-decoration: none;
    background: linear-gradient(120deg, var(--gold-light), var(--gold), var(--orange-light));
    box-shadow: 0 14px 34px rgba(0,0,0,0.55), 0 0 22px rgba(232,184,75,0.30);
    opacity: 0; transform: translate(-50%, 150%); pointer-events: none;
    transition: transform 0.55s cubic-bezier(0.22,1,0.36,1), opacity 0.4s ease, box-shadow var(--transition);
  }
  .mobile-cta.show { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; }
  .mobile-cta:active { box-shadow: 0 16px 40px rgba(0,0,0,0.6), 0 0 30px rgba(232,184,75,0.45); }
  .mobile-cta i { font-size: 0.82em; }
}

/* ── Count-up numerals: steady width, no reflow ─────────────────────────── */
.stat-bar-val[data-final] { font-variant-numeric: tabular-nums; }

/* ── Hero parallax: clip decorative motion + own compositing layer ──────── */
/* NOTE: do NOT put overflow:hidden on .fxhero — its scene stage uses
   position:sticky to pin while scrolling, and overflow:hidden on this
   ancestor silently breaks the pin (the hero scrolls away and the scenes
   never advance). Horizontal spill is already clipped by body{overflow-x:hidden}. */
.page-hero { overflow: hidden; }
.page-hero-accent, .hero-orb { will-change: transform; }

/* ── Seamless section blends ────────────────────────────────────────────── */
/* Soft edge-fade layered over each flat section colour so adjacent charcoal/
   dark bands melt together instead of meeting at a hard line. Excludes the
   one section that owns a real gradient background (.approach). */
.section-pad:not(.approach) {
  background-image: linear-gradient(to bottom,
    rgba(0,0,0,0.22) 0%, rgba(0,0,0,0) 6%, rgba(0,0,0,0) 94%, rgba(0,0,0,0.22) 100%) !important;
}