/*
Theme Name: DZNEXPERTS
Description: Custom theme for DZNEXPERTS, converted from the Framer export. Content managed via ACF / ACF Pro field groups.
Author: DZNEXPERTS
Version: 1.0.0
Text Domain: dznexperts
*/

:root {
  /* Brand accents (extracted from the original Framer export) */
  --color-accent-pink: #ca3782;
  --color-accent-green: #72ff13;

  /* Dark / plum surface family */
  --color-plum-900: #230a1b;
  --color-plum-800: #371e2f;
  --color-plum-800-90: #371e2f9e;
  --color-plum-800-16: #371e2f29;

  /* Neutrals */
  --color-black: #000;
  --color-ink: #111;
  --color-ink-2: #2a2a2a;
  --color-ink-3: #313131;
  --color-gray-500: #a2a2a2;
  --color-gray-200: #e8e8e8;
  --color-gray-100: #f3f3f3;
  --color-gray-50: #f5f5f5;
  --color-gray-25: #f9f9f9;
  --color-white: #fff;
  --color-page-lavender: #f2e9ee;

  /* Overlay/alpha helpers */
  --overlay-black-06: #0000000a;
  --overlay-black-10: #0000001a;
  --overlay-black-30: #0000004d;
  --overlay-white-10: #ffffff1a;
  --overlay-white-30: #ffffff4d;

  /* Typography */
  --font-display: "Clash Display", "Zalando Sans Expanded", sans-serif;
  --font-heading: "Zalando Sans Expanded", "Clash Display", sans-serif;
  --font-body: "DM Sans", "Inter", sans-serif;
  --font-ui: "Inter", "DM Sans", sans-serif;

  /* Layout — 72px side padding is the spec at a 1920px viewport (3.75vw),
     scaling proportionally on every other viewport, clamped to a sane
     minimum on small phones. */
  --container-max: 1920px;
  --container-pad: clamp(20px, 3.75vw, 72px);
  --radius-sm: 8px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 16px;
  --space-4: 24px;
  --space-5: 40px;
  --space-6: 64px;
  --space-7: 96px;

  /* Motion */
  --ease-premium: cubic-bezier(0.22, 1, 0.36, 1);
  --dur-reveal: 0.8s;
  --dur-image-reveal: 1.1s;
  --dur-hover: 0.35s;
}

html, body, #main { box-sizing: border-box; margin: 0; padding: 0; }
*, *::before, *::after { box-sizing: inherit; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
/* NOTE: deliberately no `overflow-x: hidden` here — it disables
   `position: sticky` for every descendant (services-stack scroll,
   the sticky header, sticky FAQ intro), which is a worse trade than the
   rare stray-overflow case it would guard against. Fix overflow sources
   directly (see the pricing-grid and impact-card-wrap fixes) instead. */
body {
  font-family: var(--font-body);
  color: var(--color-ink);
  background: var(--color-white);
  -webkit-font-smoothing: antialiased;
}
img, video, svg { max-width: 100%; height: auto; }
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  margin: 0 0 var(--space-3);
  line-height: 1.1;
}
p { margin: 0 0 var(--space-3); }
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }

.container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-pad);
}

/* prefers-color-scheme dark accent kept for parity with the original site */
@media (prefers-color-scheme: dark) {
  :root {
    --color-accent-pink: #ca3782;
    --color-plum-800-16: #371e2f29;
  }
}

@media (prefers-reduced-motion: reduce) {
  *:not([data-marquee] *) { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; }
  [data-marquee] .marquee__track { animation-play-state: paused !important; }
  [data-mouse-parallax] { transform: none !important; }
}

/* Before JS runs (or if it never does), every scroll-reveal target is
   already visible — reveal.js only adds movement, never hides content. */
.no-js [data-reveal],
.no-js [data-reveal-text] .reveal-text__inner,
.no-js [data-reveal-image] img {
  opacity: 1 !important;
  transform: none !important;
  clip-path: none !important;
}