/* Premium finish: one refined typeface, layered shadows, inner highlights, balanced text, quiet details.
   Loaded last, on every page. It changes how things are finished, not what they are. */
:root, body, body.apple {
  --ap-font: -apple-system, BlinkMacSystemFont, "Inter", "SF Pro Text", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
}
body, body.apple, body:not(.apple) {
  font-family: var(--ap-font);
  font-optical-sizing: auto;
  font-feature-settings: "kern", "liga", "calt", "tnum" 0;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
h1, h2, h3, h4, .h1, .h2, .h3, .hd-title, .hd-h, .ap-h1, .ap-h2, .ap-h3, .apx-title { text-wrap: balance; font-feature-settings: "kern", "calt", "ss01"; }
p, li, .lede, .ap-body, .ap-sub { text-wrap: pretty; }
.metric__value, .bt-big, .hero__float strong { font-variant-numeric: tabular-nums; }

::selection { background: #0071e3; color: #fff; }
html { scrollbar-width: thin; scrollbar-color: #8e8e93 transparent; }
a { text-underline-offset: 0.22em; text-decoration-thickness: 1px; }

/* ---------- buttons: a lit edge and a soft lift ---------- */
body:not(.apple) .btn--primary, .ap-pill:not(.ap-pill--ghost) {
  background-image: linear-gradient(180deg, #2f93ff 0%, #0071e3 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35), inset 0 -1px 0 rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 60, 140, 0.35), 0 8px 20px -10px rgba(0, 113, 227, 0.7);
}
body:not(.apple) .btn--primary:hover, .ap-pill:not(.ap-pill--ghost):hover { background-image: linear-gradient(180deg, #4aa3ff 0%, #0a7cf0 100%); }
body:not(.apple) .btn--secondary { backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }

/* ---------- light surfaces: hairline border, layered shadow ---------- */
body:not(.apple) .tile, body:not(.apple) .product, body:not(.apple) .cap, body:not(.apple) .dir-item, body:not(.apple) .office,
body:not(.apple) .metric, body:not(.apple) .sol, body:not(.apple) .client, body:not(.apple) .form {
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05), 0 1px 2px rgba(0, 0, 0, 0.04), 0 10px 30px -18px rgba(0, 0, 0, 0.16);
}
body:not(.apple) .client { box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04), 0 10px 26px -16px rgba(0, 0, 0, 0.18); }
body:not(.apple) .sol { box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.04), 0 24px 60px -34px rgba(0, 0, 0, 0.22); background: linear-gradient(180deg, #f9f9fb 0%, #f2f2f5 100%); }
body:not(.apple) .product:hover, body:not(.apple) .client:hover, body:not(.apple) .cap:hover, body:not(.apple) .dir-item:hover {
  box-shadow: 0 0 0 1px rgba(0, 113, 227, 0.25), 0 2px 4px rgba(0, 0, 0, 0.05), 0 28px 50px -24px rgba(0, 40, 110, 0.32); }

/* ---------- dark surfaces: top light, depth ---------- */
body:not(.apple) .workflow, body:not(.apple) .path, body.home-dark .hd-why__c, .hd-products .product {
  background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.045) 0%, rgba(255, 255, 255, 0) 55%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.09), inset 0 0 0 1px rgba(255, 255, 255, 0.06), 0 30px 60px -36px rgba(0, 0, 0, 0.9);
}
body:not(.apple) .node { background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08); }
.hd-tile { box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.08), 0 30px 60px -34px rgba(0, 0, 0, 0.9); }
.hd-why__c:hover { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), inset 0 0 0 1px rgba(41, 151, 255, 0.55), 0 24px 50px -26px rgba(41, 151, 255, 0.5); }

/* ---------- header: a lit hairline instead of a flat rule ---------- */
body:not(.apple) .site-header::after { background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.16) 20%, rgba(255, 255, 255, 0.16) 80%, transparent); }

/* ---------- hero: fine grain over the glow, so black reads as film not flat ---------- */
.hd-hero::before, body:not(.apple) .hero:not(.hero--light)::before {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; opacity: 0.07; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 .9 0'/></filter><rect width='160' height='160' filter='url(%23n)'/></svg>");
}

/* ---------- section edges: soft dividers, not hard cuts ---------- */
.hd-sec { border-top: 0; background-image: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.12) 25%, rgba(255, 255, 255, 0.12) 75%, transparent); background-size: 100% 1px; background-repeat: no-repeat; background-position: top; }
body:not(.apple) .section--paper { box-shadow: inset 0 1px 0 rgba(0, 0, 0, 0.04), inset 0 -1px 0 rgba(0, 0, 0, 0.04); }

/* ---------- imagery: rounded, quiet fade-in ---------- */
img { image-rendering: auto; }
.js main img[loading="lazy"] { opacity: 0; transition: opacity .7s ease, transform .9s cubic-bezier(.2, .7, .2, 1); }
.js main img[loading="lazy"].is-loaded { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .js main img[loading="lazy"] { opacity: 1; transition: none; } }

/* ---------- forms: calm, precise ---------- */
body:not(.apple) .field input, body:not(.apple) .field select, body:not(.apple) .field textarea, .fl input, .fl select, .fl textarea {
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.04); transition: border-color .2s ease, box-shadow .25s ease; }

/* ---------- footer: finer type ---------- */
body:not(.apple) .footer { letter-spacing: -0.005em; }
body:not(.apple) .footer h4 { letter-spacing: 0.01em; }