/* Responsibility: reset, document shell, global layout, page-state system, and shared animation primitives. */

*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
html {
  scroll-behavior: smooth;
}
body {
  background: var(--black);
  color: var(--white);
  font-family: var(--font-body);
  font-weight: 300;
  line-height: 1.6;
  overflow-x: hidden;
  cursor: auto;
}
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E");
  opacity: 0.28;
}
::-webkit-scrollbar {
  width: 3px;
}
::-webkit-scrollbar-track {
  background: var(--black);
}
::-webkit-scrollbar-thumb {
  background: var(--lime);
}
img {
  max-width: 100%;
  height: auto;
  display: block;
}
a {
  cursor: pointer;
}

.cursor,
.cursor-ring {
  display: none !important;
}

/* ===== 04. SHARED SYSTEMS / PAGE SYSTEM ===== */
      .page {
        display: none;
        min-height: 100vh;
      }
      .page.active {
        display: block;
      }
      .page-transition {
        position: fixed;
        inset: 0;
        background: var(--lime);
        z-index: 9500;
        transform: scaleY(0);
        transform-origin: bottom;
        pointer-events: none;
      }
      .page-transition.entering {
        animation: curtain-in 0.38s ease forwards;
      }
      .page-transition.leaving {
        animation: curtain-out 0.38s ease forwards;
      }
      @keyframes curtain-in {
        from {
          transform: scaleY(0);
          transform-origin: bottom;
        }
        to {
          transform: scaleY(1);
          transform-origin: bottom;
        }
      }
      @keyframes curtain-out {
        from {
          transform: scaleY(1);
          transform-origin: top;
        }
        to {
          transform: scaleY(0);
          transform-origin: top;
        }
      }

/* ===== 04A. SHARED SYSTEMS / ANIMATIONS ===== */
      @keyframes fade-up {
        from {
          opacity: 0;
          transform: translateY(28px);
        }
        to {
          opacity: 1;
          transform: translateY(0);
        }
      }
      @keyframes orb-pulse {
        from {
          transform: scale(1);
        }
        to {
          transform: scale(1.14);
        }
      }
      @keyframes ticker-scroll {
        from {
          transform: translateX(0);
        }
        to {
          transform: translateX(-50%);
        }
      }
      @keyframes scroll-line {
        0% {
          transform: scaleY(0);
          transform-origin: top;
        }
        50% {
          transform: scaleY(1);
          transform-origin: top;
        }
        50.01% {
          transform: scaleY(1);
          transform-origin: bottom;
        }
        100% {
          transform: scaleY(0);
          transform-origin: bottom;
        }
      }
      .reveal {
        opacity: 0;
        transform: translateY(32px);
        transition:
          opacity 0.65s ease,
          transform 0.65s ease;
      }
      .reveal.visible {
        opacity: 1;
        transform: translateY(0);
      }
      .reveal-d1 {
        transition-delay: 0.1s;
      }
      .reveal-d2 {
        transition-delay: 0.2s;
      }
      .reveal-d3 {
        transition-delay: 0.3s;
      }
      .reveal-d4 {
        transition-delay: 0.4s;
      }

html {
  scroll-behavior: smooth;
}
body {
  background:
    radial-gradient(
      circle at 16% 12%,
      rgba(200, 255, 0, 0.08),
      transparent 26%
    ),
    radial-gradient(
      circle at 84% 18%,
      rgba(0, 229, 255, 0.07),
      transparent 20%
    ),
    linear-gradient(180deg, #090b0e 0%, #080a0c 42%, #090b10 100%);
  color: var(--text-primary);
  font-weight: 400;
  line-height: 1.65;
  text-rendering: optimizeLegibility;
  cursor: auto;
}
body::before {
  opacity: 0.14;
}
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(
    180deg,
    rgba(8, 10, 12, 0) 0%,
    rgba(8, 10, 12, 0.1) 42%,
    rgba(8, 10, 12, 0.42) 100%
  );
}
main,
footer,
.cursor,
.cursor-ring,
.page-transition {
  position: relative;
  z-index: 2;
}

/* ----- 07A. Global Shell / Stacking / Spacing ----- */
      #nav {
        padding-left: clamp(20px, 3.5vw, 48px);
        padding-right: clamp(20px, 3.5vw, 48px);
      }
      .hero,
      .mission-section,
      .services-section,
      .industries-section,
      .adv-section,
      .cta-band,
      .pricing-hero,
      .value-section,
      .pricing-section,
      .faq-section,
      .contact-hero,
      .contact-body,
      .pain-section,
      .solution-section,
      .case-section,
      .ind-pricing,
      footer {
        padding-left: clamp(24px, 4.5vw, 72px);
        padding-right: clamp(24px, 4.5vw, 72px);
      }
      ::-webkit-scrollbar {
        width: 8px;
      }
      ::-webkit-scrollbar-track {
        background: rgba(8, 10, 12, 0.95);
      }
      ::-webkit-scrollbar-thumb {
        background: linear-gradient(
          180deg,
          rgba(200, 255, 0, 0.88),
          rgba(200, 255, 0, 0.56)
        );
        border-radius: 999px;
      }
      ::selection {
        background: rgba(200, 255, 0, 0.28);
        color: var(--black);
      }
      a {
        color: inherit;
        text-decoration: none;
        cursor: pointer;
      }
      button,
      input,
      textarea,
      select {
        font: inherit;
      }
      button {
        cursor: pointer;
      }
      p {
        color: var(--text-secondary);
      }

      a,
      button,
      input,
      select,
      textarea,
      [tabindex] {
        transition:
          color var(--transition-fast),
          background-color var(--transition-fast),
          border-color var(--transition-fast),
          box-shadow var(--transition-fast),
          transform var(--transition-fast),
          opacity var(--transition-fast);
      }
      a:focus-visible,
      button:focus-visible,
      input:focus-visible,
      select:focus-visible,
      textarea:focus-visible,
      [tabindex]:focus-visible {
        outline: none;
        border-color: rgba(200, 255, 0, 0.66) !important;
        box-shadow:
          0 0 0 2px rgba(8, 10, 12, 0.95),
          0 0 0 4px rgba(200, 255, 0, 0.32);
      }

      .cursor,
      .cursor-ring {
        display: none !important;
      }
      body {
        cursor: auto;
      }
      a,
      button,
      .ind-card,
      .faq-q,
      .nav-hamburger {
        cursor: pointer;
      }