:root {
  --ease-expo:    cubic-bezier(0.16, 1, 0.3, 1);
  --motion-fast:  180ms cubic-bezier(0.2, 0.8, 0.2, 1);
  --motion-base:  280ms cubic-bezier(0.22, 1, 0.36, 1);
  --motion-slow:  560ms cubic-bezier(0.16, 1, 0.3, 1);
  --lift-distance: 7px;
  --header-offset: 118px;
}

html {
  scroll-padding-top: var(--header-offset);
}

[id] {
  scroll-margin-top: var(--header-offset);
}

body {
  background:
    radial-gradient(circle at 10% -12%, rgba(47, 143, 240, 0.08), transparent 38%),
    radial-gradient(circle at 90% -16%, rgba(76, 201, 240, 0.09), transparent 36%),
    var(--white);
}

.site-main {
  position: relative;
  isolation: isolate;
}

.site-main::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(244, 249, 255, 0.4) 100%);
  z-index: -1;
}

/* ── Link transitions ── */
a:not(.btn):not(.custom-logo-link):not(.skip-link) {
  transition: color var(--motion-fast), opacity var(--motion-fast), text-shadow var(--motion-fast);
}

a:not(.btn):not(.custom-logo-link):not(.skip-link):hover {
  text-shadow: 0 0 0.6px currentColor;
}

.text-link {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.text-link::after {
  content: "";
  width: 0.85em;
  height: 0.12em;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--blue-600), var(--cyan-400));
  transform: translateX(0);
  transition: transform var(--motion-fast);
}

.text-link:hover::after {
  transform: translateX(4px);
}

/* ── Buttons ── */
.btn {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  transform: translateZ(0);
  transition:
    transform var(--motion-base),
    box-shadow var(--motion-base),
    background-color var(--motion-base),
    border-color var(--motion-base),
    color var(--motion-base),
    filter var(--motion-base);
}

/* Shimmer sweep */
.btn::after {
  content: "";
  position: absolute;
  inset: -2px auto -2px -110%;
  width: 42%;
  background: linear-gradient(120deg, transparent 0%, rgba(255, 255, 255, 0.35) 50%, transparent 100%);
  transform: skewX(-18deg);
  opacity: 0;
  pointer-events: none;
  z-index: 0;
  transition: opacity var(--motion-fast), transform 680ms var(--ease-expo);
}

.btn > * {
  position: relative;
  z-index: 1;
}

@media (hover: hover) and (pointer: fine) {
  .btn:hover {
    transform: translateY(-3px);
  }

  .btn:hover::after {
    opacity: 0.95;
    transform: translateX(305%) skewX(-18deg);
  }
}

.btn:active {
  transform: translateY(1px) scale(0.99);
}

/* ── Header ── */
.site-header {
  transition:
    box-shadow var(--motion-base),
    border-color var(--motion-base),
    background-color var(--motion-base),
    backdrop-filter var(--motion-base);
}

.site-header::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 2px;
  transform-origin: left center;
  transform: scaleX(var(--scroll-progress, 0));
  background: linear-gradient(90deg, var(--blue-700), var(--blue-500), var(--cyan-400));
  opacity: calc(0.12 + (var(--scroll-progress, 0) * 0.9));
  transition: opacity var(--motion-fast);
  pointer-events: none;
}

.site-header.scrolled {
  background: rgba(255, 255, 255, 0.58);
  backdrop-filter: blur(14px);
}

.page-hero,
.section,
.section-tight {
  position: relative;
}

/* ══════════════════════════════════════════════════════
   CARD HOVER SYSTEM
   All interactive cards get lift + scale + shadow on hover
   ══════════════════════════════════════════════════════ */

:where(
  .content-card,
  .post-card,
  .savino-proof-card,
  .savino-segment-card,
  .savino-kpi-card,
  .savino-doc-card,
  .savino-profile-card,
  .savino-media-card,
  .savino-route-card,
  .savino-legal-card,
  .savino-faq-item,
  .savino-resource-card,
  .cta-panel,
  .timeline-item,
  .home-story-card,
  .trust-pill,
  .footer-col,
  .footer-command-panel,
  .footprint-office-node,
  .home-process-step,
  .focus-card
) {
  transition:
    transform var(--motion-base),
    box-shadow var(--motion-base),
    border-color var(--motion-base),
    background-color var(--motion-base);
}

@media (hover: hover) and (pointer: fine) {
  :where(
    .content-card,
    .post-card,
    .savino-proof-card,
    .savino-segment-card,
    .savino-kpi-card,
    .savino-doc-card,
    .savino-profile-card,
    .savino-media-card,
    .savino-route-card,
    .savino-legal-card,
    .savino-faq-item,
    .savino-resource-card,
    .cta-panel,
    .timeline-item,
    .home-story-card,
    .trust-pill
  ):hover {
    transform: translateY(calc(var(--lift-distance) * -1)) scale(1.012);
    box-shadow: 0 28px 52px rgba(11, 35, 65, 0.12);
  }

  /* Subtle lift only (no scale) for larger block elements */
  :where(
    .footer-col,
    .footer-command-panel,
    .footprint-office-node,
    .home-process-step
  ):hover {
    transform: translateY(calc(var(--lift-distance) * -0.7));
    box-shadow: 0 22px 44px rgba(11, 35, 65, 0.1);
  }
}

/* ══════════════════════════════════════════════════════
   SECTION-HEAD CHILD ORCHESTRATION
   Eyebrow → H2 → P animate in sequentially (Dreelio-style)
   ══════════════════════════════════════════════════════ */

html.js .section-head > .eyebrow,
html.js .section-head > h2,
html.js .section-head > h3,
html.js .section-head > p,
html.js .section-head > a:not(.btn),
html.js .section-head > .btn {
  opacity: 0;
  transform: translateY(24px);
  transition:
    opacity 600ms var(--ease-expo),
    transform 600ms var(--ease-expo);
  will-change: transform, opacity;
}

html.js .section-head > .eyebrow {
  transition-delay: 0ms;
}

html.js .section-head > h2,
html.js .section-head > h3 {
  transition-delay: 90ms;
}

html.js .section-head > p {
  transition-delay: 175ms;
}

html.js .section-head > a,
html.js .section-head > .btn {
  transition-delay: 250ms;
}

/* Trigger: both reveal-up (front page) and elegance (other pages) */
html.js .section-head.is-visible > .eyebrow,
html.js .section-head.is-visible > h2,
html.js .section-head.is-visible > h3,
html.js .section-head.is-visible > p,
html.js .section-head.is-visible > a,
html.js .section-head.is-visible > .btn,
html.js .section-head.is-inview > .eyebrow,
html.js .section-head.is-inview > h2,
html.js .section-head.is-inview > h3,
html.js .section-head.is-inview > p,
html.js .section-head.is-inview > a,
html.js .section-head.is-inview > .btn {
  opacity: 1;
  transform: translateY(0);
}

/* ══════════════════════════════════════════════════════
   ELEGANCE REVEAL SYSTEM
   scroll-triggered: translateY(32px) → 0, opacity 0 → 1
   ══════════════════════════════════════════════════════ */

html.js .savino-elegance-reveal {
  opacity: 0;
  transform: translateY(32px);
  filter: saturate(0.88);
  transition:
    opacity var(--motion-slow),
    transform var(--motion-slow),
    filter 400ms cubic-bezier(0.22, 1, 0.36, 1);
  transition-delay: var(--reveal-delay, 0ms);
  will-change: transform, opacity;
}

html.js .savino-elegance-reveal.is-inview {
  opacity: 1;
  transform: translateY(0);
  filter: saturate(1);
}

/* ── Page nav ── */
.savino-page-nav,
.about-page-nav-shell .savino-page-nav,
.services-page-nav-shell .savino-page-nav {
  border-color: rgba(215, 227, 240, 0.98);
  box-shadow: 0 18px 40px rgba(11, 35, 65, 0.1);
}

/* ── Pagination ── */
.pagination-wrap .page-numbers {
  transition:
    transform var(--motion-fast),
    box-shadow var(--motion-fast),
    border-color var(--motion-fast),
    background-color var(--motion-fast),
    color var(--motion-fast);
}

.pagination-wrap .page-numbers:hover {
  transform: translateY(-2px);
  border-color: #bfd8f4;
  box-shadow: 0 12px 24px rgba(11, 35, 65, 0.08);
}

/* ── Scrollbar ── */
::-webkit-scrollbar {
  width: 12px;
  height: 12px;
}

::-webkit-scrollbar-track {
  background: #e9f2fb;
}

::-webkit-scrollbar-thumb {
  border: 2px solid #e9f2fb;
  border-radius: 999px;
  background: linear-gradient(180deg, #1d74d4, #4cc9f0);
}

::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, #145da0, #2f8ff0);
}

/* ── Mobile ── */
@media (max-width: 820px) {
  :root {
    --lift-distance: 3px;
  }

  .btn {
    min-height: 48px;
  }

  .text-link::after {
    width: 0.74em;
  }
}

/* ── Reduced motion ── */
@media (prefers-reduced-motion: reduce) {
  .btn::after,
  .site-header::after {
    transition: none;
  }

  html.js .savino-elegance-reveal,
  html.js .section-head > .eyebrow,
  html.js .section-head > h2,
  html.js .section-head > h3,
  html.js .section-head > p,
  html.js .section-head > a,
  html.js .section-head > .btn {
    opacity: 1;
    transform: none;
    filter: none;
    transition: none;
  }
}