/* =========================================================
   DATAXSYS DESIGN SYSTEM v2.2
   Reusable tokens for typography, spacing, color, radius,
   elevation, layout, controls, and motion.
   ========================================================= */
:root {
  /* Brand */
  --dx-brand-50: #fff5f5;
  --dx-brand-100: #fbe5e5;
  --dx-brand-200: #f4c7c7;
  --dx-brand-500: #bd0000;
  --dx-brand-600: #aa0000;
  --dx-brand-700: #870000;
  --dx-brand-800: #690000;

  /* Neutrals */
  --dx-neutral-0: #ffffff;
  --dx-neutral-25: #fcfcfb;
  --dx-neutral-50: #f7f7f5;
  --dx-neutral-100: #f0f0ed;
  --dx-neutral-200: #dfdfdb;
  --dx-neutral-300: #c9c9c4;
  --dx-neutral-500: #777772;
  --dx-neutral-700: #494947;
  --dx-neutral-900: #15151a;

  /* Semantic */
  --dx-success: #147a52;
  --dx-warning: #c67800;
  --dx-info: #2467d1;

  /* Typography */
  --dx-font-display: "League Spartan", "Arial Black", Arial, sans-serif;
  --dx-font-body: "Inter", Arial, sans-serif;
  --dx-text-xs: 0.75rem;
  --dx-text-sm: 0.875rem;
  --dx-text-md: 1rem;
  --dx-text-lg: 1.125rem;
  --dx-text-xl: 1.25rem;
  --dx-display-1: clamp(2.75rem, 4.22vw, 3.94rem);
  --dx-display-2: clamp(2.09rem, 3.23vw, 3.18rem);
  --dx-display-3: clamp(1.66rem, 2.33vw, 2.42rem);
  --dx-leading-display: 0.94;
  --dx-leading-copy: 1.62;
  --dx-tracking-display: -0.045em;

  /* Spacing: 4px base scale */
  --dx-space-1: 0.25rem;
  --dx-space-2: 0.5rem;
  --dx-space-3: 0.75rem;
  --dx-space-4: 1rem;
  --dx-space-5: 1.25rem;
  --dx-space-6: 1.5rem;
  --dx-space-8: 2rem;
  --dx-space-10: 2.5rem;
  --dx-space-12: 3rem;
  --dx-space-16: 4rem;
  --dx-space-20: 5rem;
  --dx-space-24: 6rem;
  --dx-space-28: 7rem;
  --dx-space-32: 8rem;

  /* Layout */
  --dx-container: 76rem;
  --dx-container-wide: 86rem;
  --dx-gutter: clamp(1.125rem, 3vw, 3rem);
  --dx-section-y: clamp(5rem, 8vw, 7.5rem);
  --dx-header-height: 5rem;

  /* Radius */
  --dx-radius-xs: 0.5rem;
  --dx-radius-sm: 0.75rem;
  --dx-radius-md: 1rem;
  --dx-radius-lg: 1.5rem;
  --dx-radius-xl: 2rem;
  --dx-radius-pill: 999px;

  /* Elevation */
  --dx-shadow-1: 0 1px 2px rgba(21,21,26,.05), 0 8px 24px rgba(21,21,26,.06);
  --dx-shadow-2: 0 18px 50px rgba(21,21,26,.10);
  --dx-shadow-3: 0 30px 90px rgba(21,21,26,.14);

  /* Motion */
  --dx-ease-standard: cubic-bezier(.2,.75,.25,1);
  --dx-duration-fast: 180ms;
  --dx-duration-base: 320ms;
  --dx-duration-slow: 650ms;
}

/* System primitives */
.ds-container,
.container {
  width: min(var(--dx-container), calc(100% - (var(--dx-gutter) * 2)));
  margin-inline: auto;
}

.section-pad { padding-block: var(--dx-section-y); }

body {
  font-family: var(--dx-font-body);
  font-size: var(--dx-text-md);
  line-height: var(--dx-leading-copy);
  color: var(--dx-neutral-900);
  background: var(--dx-neutral-0);
}

h1, h2, h3 { text-wrap: balance; }
p { text-wrap: pretty; }

.btn {
  min-height: 3.125rem;
  padding-inline: 1.35rem;
  border-radius: var(--dx-radius-pill);
  font-size: var(--dx-text-sm);
  transition:
    transform var(--dx-duration-fast) var(--dx-ease-standard),
    background-color var(--dx-duration-fast) var(--dx-ease-standard),
    border-color var(--dx-duration-fast) var(--dx-ease-standard),
    box-shadow var(--dx-duration-fast) var(--dx-ease-standard);
}

.btn-primary { background: var(--dx-brand-600); }
.btn-primary:hover { background: var(--dx-brand-700); }
.btn-secondary { background: var(--dx-neutral-0); border-color: var(--dx-neutral-300); }

:focus-visible {
  outline: 3px solid rgba(170,0,0,.28);
  outline-offset: 3px;
}

@media (max-width: 640px) {
  :root {
    --dx-display-1: clamp(2.23rem, 9.98vw, 3.04rem);
    --dx-display-2: clamp(1.9rem, 8.55vw, 2.57rem);
    --dx-section-y: 4.5rem;
  }
}

.btn-client-website{
display:inline-flex;align-items:center;justify-content:center;
padding:16px 30px;border-radius:999px;
background:#fff!important;color:#111!important;
border:2px solid #fff!important;font-weight:700;
text-decoration:none;transition:all .25s ease}
.btn-client-website:hover{
background:#f2f2f2!important;color:#111!important;
border-color:#f2f2f2!important;
box-shadow:0 10px 24px rgba(0,0,0,.18);
transform:translateY(-2px)}


/* =========================================================
   DATAXSYS DESIGN SYSTEM v3.1.2
   MOBILE HORIZONTAL OVERFLOW / SIDE-SCROLL FIX
   ========================================================= */

html {
  width: 100%;
  max-width: 100%;
  overflow-x: clip;
  overscroll-behavior-x: none;
}

body {
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
  position: relative;
  overscroll-behavior-x: none;
}

img,
svg,
video,
canvas,
iframe {
  max-width: 100%;
  height: auto;
}

/* Allow grid and flex children to shrink instead of widening the page. */
.site-header,
.header-shell,
main,
section,
footer,
.container,
.hero,
.hero-grid,
.hero-grid > *,
.header-shell > *,
.container > *,
section > * {
  min-width: 0;
  max-width: 100%;
}

@media (max-width: 860px) {
  html,
  body {
    touch-action: pan-y pinch-zoom;
  }

  /* Clip decorative and animated elements to their own sections. */
  .hero,
  .about-hero,
  .results,
  .portfolio-proof,
  .client-proof-strip,
  .immersive,
  .immersive-section,
  .cta,
  .site-footer,
  .about-section,
  .client-story,
  .business-growth-page main,
  .line-story-page main {
    overflow-x: clip;
  }

  /* The off-canvas navigation must be positioned without enlarging the document. */
  .primary-nav {
    position: fixed !important;
    right: 0 !important;
    left: auto !important;
    width: min(88vw, 360px) !important;
    max-width: 100vw !important;
    transform: translate3d(105%, 0, 0) !important;
    overflow-x: hidden !important;
    will-change: transform;
    contain: layout paint;
  }

  .primary-nav.open,
  .primary-nav.is-open,
  body.menu-open .primary-nav {
    transform: translate3d(0, 0, 0) !important;
  }

  /* Prevent oversized hero/dashboard children and floating cards. */
  .hero-visual,
  .dashboard,
  .dashboard-shell,
  .dashboard-window,
  .results-panel,
  .proof-portfolio-panel,
  .proof-client-ticker,
  .client-ticker,
  .immersive-art,
  .client-story__sticky,
  .floating-card,
  .hero-card {
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }

  .floating-card,
  .hero-card {
    max-width: calc(100vw - 32px);
  }

  /* Decorative objects can extend visually but cannot capture gestures. */
  .hero-orb,
  .hero-orb-one,
  .hero-orb-two,
  .cta-orb,
  [class*="orb"],
  [class*="glow"] {
    pointer-events: none;
  }
}