/* ============================================================
   ORDYX GROUP — Apple-grade interaction polish
   Loaded AFTER each page's inline <style> so it refines the shared
   elements (buttons, CTAs, nav, focus, scroll) site-wide in one place,
   without touching the dark + gold brand.
   ============================================================ */

:root { --ease: cubic-bezier(0.16, 1, 0.3, 1); }

/* Softly rounded, springy buttons + CTAs (the defining Apple move vs. the
   old sharp rectangles) — motion is subtle so the luxury feel is preserved. */
.btn,
.nav-cta,
.nav-portal,
.cs-cta-btn,
.qual-submit,
.qual-confirm,
.path-cta,
.pc-btn {
  border-radius: 9px;
  transition: background 0.22s var(--ease),
              color 0.22s var(--ease),
              border-color 0.22s var(--ease),
              transform 0.22s var(--ease),
              box-shadow 0.22s var(--ease),
              gap 0.2s var(--ease);
  will-change: transform;
}

.btn:hover,
.nav-cta:hover,
.nav-portal:hover,
.cs-cta-btn:hover,
.path-cta:hover,
.pc-btn:hover { transform: translateY(-2px); }

.btn:active,
.nav-cta:active,
.nav-portal:active,
.cs-cta-btn:active,
.path-cta:active,
.pc-btn:active { transform: translateY(0) scale(0.985); }

/* Gold primary buttons get a soft, lit gold glow that deepens on hover. */
.btn-g,
.cs-cta-btn,
.qual-submit,
.qual-confirm {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.28),
              0 6px 20px rgba(201, 176, 55, 0.22);
}
.btn-g:hover,
.cs-cta-btn:hover {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.34),
              0 10px 30px rgba(201, 176, 55, 0.38);
}

/* Keyboard focus — a precise gold ring (accessible + premium). */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid rgba(201, 176, 55, 0.6);
  outline-offset: 3px;
  border-radius: 8px;
}

/* Apple floating-pill scrollbar. */
::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: rgba(242, 242, 238, 0.18);
  border-radius: 10px;
  border: 3px solid transparent;
  background-clip: padding-box;
}
::-webkit-scrollbar-thumb:hover {
  background: rgba(242, 242, 238, 0.3);
  background-clip: padding-box;
}
* { scrollbar-width: thin; scrollbar-color: rgba(242, 242, 238, 0.2) transparent; }

/* Gold text selection. */
::selection { background: rgba(201, 176, 55, 0.28); color: #fff; }

/* Optical typography + crisp rendering (Apple UI feel). */
body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-optical-sizing: auto;
  text-rendering: optimizeLegibility;
}
h1, h2, h3 { text-wrap: balance; }

/* ── Cards & panels — softly rounded, with a gentle Apple hover lift ── */
.prob-card,
.sv-item,
.t-card,
.sector-card,
.portal-card,
.proof-metrics,
.partnership-card,
.pc-card {
  border-radius: 14px;
}
.prob-card,
.t-card,
.sector-card,
.portal-card {
  transition: transform 0.34s var(--ease),
              box-shadow 0.34s var(--ease),
              border-color 0.24s var(--ease),
              background 0.24s var(--ease);
}
.prob-card:hover,
.t-card:hover,
.sector-card:hover,
.portal-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.20);
}

/* ── Refine the site's existing scroll reveals to a springier Apple easing ── */
.r { transition: opacity 0.7s var(--ease), transform 0.7s var(--ease); }

/* ── Dark-section cards: a faint gold ring + deeper shadow on hover (reads on dark) ── */
.t-card:hover,
.sector-card:hover,
.portal-card:hover {
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.40), 0 0 0 1px rgba(201, 176, 55, 0.18);
}

/* ── Smooth anchor scrolling that clears the fixed nav ── */
html { scroll-behavior: smooth; scroll-padding-top: 96px; }

/* ── A gentle page-load settle (Apple pages fade in, they don't snap) ── */
@media (prefers-reduced-motion: no-preference) {
  body { animation: ordyx-page-in 0.5s var(--ease) both; }
  @keyframes ordyx-page-in { from { opacity: 0; } to { opacity: 1; } }
}

/* ── Form fields — rounder with a soft gold focus glow ── */
input:not([type="checkbox"]):not([type="radio"]),
textarea,
select {
  border-radius: 8px !important;
  transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease);
}
input:focus,
textarea:focus,
select:focus {
  outline: none;
  border-color: var(--gold) !important;
  box-shadow: 0 0 0 3px rgba(201, 176, 55, 0.14) !important;
}

/* ── Film-grain luxe overlay — a whisper of tactile texture over the whole site.
   Kills banding on the dark gradients and gives that rich, "expensive" feel that
   luxury + Apple pages have. Non-interactive; sits above content, below nothing you
   click. ── */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9998;
  opacity: 0.05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 160px 160px;
}

/* ── Resting card depth — white cards float ever so slightly (Apple material) ── */
.prob-card,
.sv-item,
.portal-card {
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04), 0 12px 34px rgba(0, 0, 0, 0.06);
}

/* ============================================================
   LUXE LAYER — ambient gold glow · frosted glass · hover
   micro-zoom · hero parallax. Motion-safe + progressively enhanced.
   ============================================================ */

/* Ambient gold glow — warm depth pooling into the dark sections */
.avg-section   { background-image: radial-gradient(ellipse 90% 55% at 50% -5%,  rgba(201,176,55,0.09), transparent 60%); }
#services      { background-image: radial-gradient(ellipse 75% 55% at 85% 0%,   rgba(201,176,55,0.08), transparent 58%); }
#audience      { background-image: radial-gradient(ellipse 75% 55% at 12% 100%, rgba(201,176,55,0.08), transparent 58%); }
#how-it-works  { background-image: radial-gradient(ellipse 70% 50% at 50% 0%,   rgba(201,176,55,0.07), transparent 60%); }
#about         { background-image: radial-gradient(ellipse 80% 50% at 90% 100%, rgba(201,176,55,0.06), transparent 60%); }

/* Hover micro-zoom — sector cards breathe slightly toward you */
.sector-card { transition: transform 0.4s var(--ease), background 0.24s var(--ease), border-color 0.24s var(--ease), box-shadow 0.34s var(--ease); }
.sector-card:hover { transform: translateY(-4px) scale(1.015); }

/* Hero parallax — the skyline drifts slower than the scroll (motion; scroll to feel it) */
@media (prefers-reduced-motion: no-preference) and (min-width: 900px) {
  @supports (animation-timeline: scroll()) {
    .hero-img img {
      animation: hero-parallax linear both;
      animation-timeline: scroll();
      animation-range: 0 600px;
    }
    @keyframes hero-parallax { to { transform: translateY(70px) scale(1.06); } }
  }
}
/* ============================================================
   END LUXE LAYER
   ============================================================ */

/* ============================================================
   APPLE FINESSE — a few precise, restrained micro-details.
   (depth-of-field reveals · media focus · underline grow · tabular
   figures · focus-within lift · optical numerals) Nothing loud.
   ============================================================ */

/* Depth-of-field reveal — sections resolve from a whisper of blur as they
   enter, the way Apple pages bring content into focus rather than sliding it. */
@media (prefers-reduced-motion: no-preference) {
  .r { filter: blur(7px); transition: opacity 0.8s var(--ease), transform 0.8s var(--ease), filter 0.8s var(--ease); }
  .r.on { filter: blur(0); }
}

/* Media focus — images inside cards breathe toward you and stay crisply rounded. */
.prob-card img, .sv-item img, .sector-card img, .t-card img, .portal-card img,
.partnership-card img, .pc-card img {
  border-radius: 12px;
  transition: transform 0.5s var(--ease), filter 0.5s var(--ease);
  will-change: transform;
}
.prob-card:hover img, .sector-card:hover img, .t-card:hover img,
.portal-card:hover img, .pc-card:hover img { transform: scale(1.035); }

/* Underline that grows from the left on hover — the classic Apple text-link move.
   Scoped to footer + inline prose links so nav and buttons keep their own styling. */
footer a, .article p a:not(.btn), p a.link {
  background-image: linear-gradient(var(--gold), var(--gold));
  background-size: 0% 1px;
  background-position: 0 100%;
  background-repeat: no-repeat;
  transition: background-size 0.32s var(--ease), color 0.2s var(--ease);
  padding-bottom: 1px;
}
footer a:hover, .article p a:not(.btn):hover, p a.link:hover { background-size: 100% 1px; }

/* Optical numerals — every figure lines up and reads like a spec sheet. */
.proof-metrics, .kpi-value, .stat-value, .kpi-number, .metric, [class*="metric"],
.pc-price, .price { font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1, "ss01" 1; }

/* Gold list markers where native bullets show. */
ul:not([class]) li::marker { color: var(--gold); }

/* Forms lift ever so slightly while you're in them (Apple focus containment). */
form:focus-within { transition: transform 0.3s var(--ease); }
.qual-card:focus-within, .cs-form:focus-within, .pc-card:focus-within {
  box-shadow: 0 18px 46px rgba(0, 0, 0, 0.28), 0 0 0 1px rgba(201, 176, 55, 0.16);
}

/* Buttons carry a hair more optical tracking + tighter icon gap — small, felt not seen. */
.btn, .nav-cta, .nav-portal, .cs-cta-btn, .path-cta, .pc-btn { font-feature-settings: "ss01" 1; }

/* Anchor targets settle with a brief gold breath instead of a hard jump. */
:target { animation: ordyx-target 1.4s var(--ease); }
@keyframes ordyx-target {
  0% { background: rgba(201, 176, 55, 0.10); }
  100% { background: transparent; }
}

/* Gold primary buttons catch a soft light sweep on hover — a whisper of sheen
   that reads as polished metal, never flashy. Scoped to the two primary golds. */
.btn-g, .cs-cta-btn { position: relative; overflow: hidden; isolation: isolate; }
.btn-g::after, .cs-cta-btn::after {
  content: ""; position: absolute; top: 0; left: -150%;
  width: 55%; height: 100%; pointer-events: none;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.45), transparent);
  transform: skewX(-18deg);
  transition: left 0.65s var(--ease);
}
.btn-g:hover::after, .cs-cta-btn:hover::after { left: 150%; }

/* Respect reduced-motion. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .r { filter: none !important; }
}