:root {
      --black: #050609;
      --black-2: #080a0f;
      --black-3: #0d1017;

      --white: #ffffff;
      --text: #f3f5f8;
      --muted: #929aaa;
      --muted-2: #70798c; /* lightened from #687184 — was 4.13:1 on --black, below WCAG AA 4.5:1 for the small disclaimer/label text that uses it; now 4.63:1 */

      --purple: #8257ff;
      --purple-light: #a98dff;
      --blue: #35c8ff;
      --cyan: #56e0ff;
      --green: #3ee3a1;
      --red: #ff5c7a;

      --border: rgba(255,255,255,.08);
      --border-hover: rgba(255,255,255,.16);

      --max: 1220px;
      --radius: 24px;
    }

    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }

    html {
      scroll-behavior: smooth;
    }

    body {
      background:
        radial-gradient(
          circle at 50% -10%,
          rgba(130,87,255,.20),
          transparent 32%
        ),
        radial-gradient(
          circle at 5% 30%,
          rgba(53,200,255,.06),
          transparent 25%
        ),
        var(--black);

      color: var(--text);

      font-family:
        Inter,
        ui-sans-serif,
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;

      line-height: 1.6;
      overflow-x: hidden;
    }

    body::before {
      content: "";

      position: fixed;
      inset: 0;

      pointer-events: none;

      background-image:
        linear-gradient(
          rgba(255,255,255,.015) 1px,
          transparent 1px
        ),
        linear-gradient(
          90deg,
          rgba(255,255,255,.015) 1px,
          transparent 1px
        );

      background-size: 64px 64px;

      mask-image:
        linear-gradient(
          to bottom,
          black,
          transparent 80%
        );

      z-index: -1;
    }

    ::selection {
      background: rgba(130,87,255,.45);
      color: white;
    }

    a {
      color: inherit;
      text-decoration: none;
    }

    button,
    input,
    textarea {
      font: inherit;
    }

    html, body {
      overflow-x: hidden;
      max-width: 100%;
    }

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

    .visually-hidden {
      position: absolute;
      width: 1px;
      height: 1px;
      padding: 0;
      margin: -1px;
      overflow: hidden;
      clip: rect(0, 0, 0, 0);
      white-space: nowrap;
      border: 0;
    }

    .container {
      width: min(
        calc(100% - 42px),
        var(--max)
      );

      margin: 0 auto;
    }

    /* =========================================================
       NAVIGATION
    ========================================================= */

    header {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;

      z-index: 100;

      padding: 25px 0;

      transition: padding .25s ease, background .25s ease, backdrop-filter .25s ease, box-shadow .25s ease, transform .35s cubic-bezier(.4,0,.2,1);
    }

    header.is-scrolled {
      padding: 14px 0;
      background: rgba(10, 10, 16, .72);
      backdrop-filter: blur(14px);
      -webkit-backdrop-filter: blur(14px);
      box-shadow: 0 1px 0 rgba(255, 255, 255, .06);
    }

    /* Hidden on scroll-down intent, revealed the instant the visitor
       scrolls back up — see assets/js/sticky-header.js. Never applied
       while the mobile nav menu is open (script checks .nav-links.open). */
    header.is-hidden {
      transform: translateY(-100%);
    }

    /* --- Back-to-top button: appears on upward-scroll intent once deep
       enough into a page, mirroring the header's own show-on-scroll-up
       behavior — see assets/js/sticky-header.js. Injected via JS, not
       page markup, so every page gets it for free. --- */
    .back-to-top {
      position: fixed;
      right: 22px;
      bottom: 22px;
      z-index: 90;

      width: 46px;
      height: 46px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;

      background: rgba(14, 14, 22, .78);
      border: 1px solid var(--border);
      backdrop-filter: blur(10px);
      -webkit-backdrop-filter: blur(10px);
      color: var(--text);
      cursor: pointer;

      opacity: 0;
      transform: translateY(10px) scale(.9);
      pointer-events: none;
      transition: opacity .3s ease, transform .3s cubic-bezier(.34,1.56,.64,1), border-color .2s ease;
    }

    .back-to-top svg {
      width: 18px;
      height: 18px;
    }

    .back-to-top.is-visible {
      opacity: 1;
      transform: translateY(0) scale(1);
      pointer-events: auto;
    }

    .back-to-top:hover {
      border-color: var(--purple-light);
      color: var(--purple-light);
    }

    @media (max-width: 600px) {
      .back-to-top {
        right: 14px;
        bottom: 14px;
        width: 42px;
        height: 42px;
      }
    }

    /* --- Exit/scroll-intent lead-capture prompt (assets/js/exit-intent.js).
       A genuine "soft fade" — opacity + a small scale, not a slam-in modal —
       and, like every other animation on this site, collapses to an instant
       state change under prefers-reduced-motion via the global override
       below (no special-case handling needed here). */

    .lead-popup-backdrop {
      position: fixed;
      inset: 0;
      z-index: 200;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 20px;

      background: rgba(5, 6, 9, .6);
      backdrop-filter: blur(3px);
      -webkit-backdrop-filter: blur(3px);

      opacity: 0;
      pointer-events: none;
      transition: opacity .35s ease;
    }

    .lead-popup-backdrop.is-visible {
      opacity: 1;
      pointer-events: auto;
    }

    .lead-popup {
      position: relative;
      width: 100%;
      max-width: 420px;
      padding: 34px 30px;
      border-radius: var(--radius);
      border: 1px solid var(--border-hover);
      background: var(--black-2);
      box-shadow: 0 30px 80px rgba(0,0,0,.5);

      opacity: 0;
      transform: translateY(14px) scale(.97);
      transition: opacity .35s ease, transform .35s cubic-bezier(.2,.8,.2,1);
    }

    .lead-popup-backdrop.is-visible .lead-popup {
      opacity: 1;
      transform: translateY(0) scale(1);
    }

    .lead-popup h2 {
      margin: 0 0 10px;
      font-family: "Manrope", Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
      font-weight: 800;
      font-size: 1.4rem;
      letter-spacing: -.02em;
      padding-right: 24px;
    }

    .lead-popup p {
      margin: 0 0 22px;
      color: var(--muted);
      font-size: .92rem;
      line-height: 1.6;
    }

    .lead-popup-actions {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 14px;
    }

    .lead-popup-actions .button {
      flex: 1 1 auto;
      text-align: center;
    }

    .lead-popup-dismiss {
      background: none;
      border: none;
      color: var(--muted-2);
      font-size: .82rem;
      cursor: pointer;
      padding: 8px 4px;
      transition: color .2s ease;
    }

    .lead-popup-dismiss:hover {
      color: var(--text);
    }

    .lead-popup-close {
      position: absolute;
      top: 16px;
      right: 16px;
      width: 30px;
      height: 30px;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 50%;
      border: 1px solid var(--border);
      background: rgba(255,255,255,.03);
      color: var(--muted);
      cursor: pointer;
      transition: color .2s ease, border-color .2s ease;
    }

    .lead-popup-close:hover {
      color: var(--text);
      border-color: var(--border-hover);
    }

    .lead-popup-close svg {
      width: 14px;
      height: 14px;
    }

    @media (max-width: 480px) {
      .lead-popup-actions { flex-direction: column; align-items: stretch; }
      .lead-popup-actions .button { width: 100%; }
    }

    /* --- Scroll-progress bar: thin indicator of how far through a long
       page the visitor is, pinned under the header. Opt-in per page via
       <body data-scroll-progress> — see assets/js/sticky-header.js. --- */
    .scroll-progress-track {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      height: 2px;
      z-index: 101;
      background: transparent;
    }

    .scroll-progress-bar {
      height: 100%;
      width: 0%;
      background: linear-gradient(90deg, var(--purple), var(--blue), var(--green));
      transform-origin: left;
      transition: width .12s linear;
    }

    /* --- Sticky mini-CTA: appears once a visitor has scrolled well past
       the hero's own CTA (signaling real engagement with the content),
       and hides again near the very top or the very bottom of the page
       (where a full CTA is already directly visible, so a floating one
       would be redundant). Opt-in via <body data-sticky-cta>, and reads
       its href/label straight from the page's own #primary-cta link, so
       it never goes out of sync with the hero button beside it. See
       assets/js/sticky-header.js. --- */
    .sticky-cta {
      position: fixed;
      left: 22px;
      bottom: 22px;
      z-index: 90;

      display: inline-flex;
      align-items: center;
      gap: 8px;

      padding: 13px 20px;
      border-radius: 999px;
      border: 1px solid rgba(130, 87, 255, .4);
      background: rgba(14, 14, 22, .88);
      backdrop-filter: blur(10px);
      -webkit-backdrop-filter: blur(10px);
      box-shadow: 0 10px 28px rgba(0, 0, 0, .3);

      font-size: .84rem;
      font-weight: 700;
      color: var(--text);
      text-decoration: none;
      white-space: nowrap;

      opacity: 0;
      transform: translateY(14px) scale(.96);
      pointer-events: none;
      transition: opacity .3s ease, transform .3s cubic-bezier(.34,1.56,.64,1), border-color .2s ease, background .2s ease;
    }

    .sticky-cta.is-visible {
      opacity: 1;
      transform: translateY(0) scale(1);
      pointer-events: auto;
    }

    .sticky-cta:hover {
      border-color: var(--purple-light);
      background: rgba(130, 87, 255, .16);
    }

    @media (max-width: 760px) {
      .sticky-cta {
        /* Right edge stops short of .back-to-top's mobile position (42px
           wide + 14px offset) so the two floating elements never overlap
           if both happen to be visible at once. */
        left: 14px;
        right: 66px;
        bottom: 14px;
        justify-content: center;
        text-align: center;
      }
    }

    nav {
      display: flex;
      align-items: center;
      justify-content: space-between;
      position: relative;
    }

    .logo {
      display: block;
    }

    .logo img {
      width: 175px;
      height: auto;
    }

    .nav-links {
      display: flex;
      align-items: center;
      gap: 30px;

      color: var(--muted);
      font-size: .84rem;
      font-weight: 600;
    }

    .nav-links a {
      position: relative;
      transition: color .2s ease;
    }

    .nav-links a:hover {
      color: white;
    }

    .nav-links a:not(.nav-login):not(.nav-cta)::after {
      content: "";
      position: absolute;
      left: 0;
      bottom: -4px;
      width: 100%;
      height: 1px;
      background: linear-gradient(90deg, var(--purple), var(--blue));
      transform: scaleX(0);
      transform-origin: left;
      transition: transform .25s ease;
    }

    .nav-links a:not(.nav-login):not(.nav-cta):hover::after {
      transform: scaleX(1);
    }

    .nav-login {
      display: flex;
      align-items: center;
      gap: 6px;

      padding-left: 22px;

      border-left: 1px solid var(--border);

      color: var(--muted-2) !important;
      font-size: .8rem;
    }

    .nav-login::before {
      content: "";

      width: 6px;
      height: 6px;

      border-radius: 50%;

      background: var(--green);

      box-shadow: 0 0 8px rgba(62,227,161,.6);
    }

    .nav-cta {
      padding: 10px 17px;

      border: 1px solid
        rgba(255,255,255,.12);

      border-radius: 999px;

      background:
        rgba(255,255,255,.04);

      color: white !important;

      transition:
        background .2s ease,
        border-color .2s ease,
        transform .2s ease;
    }

    .nav-cta:hover {
      background:
        rgba(255,255,255,.09);

      border-color:
        rgba(255,255,255,.25);

      transform:
        translateY(-1px);
    }

    .nav-toggle {
      display: none;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 5px;

      width: 34px;
      height: 34px;
      padding: 0;

      border: 1px solid var(--border);
      border-radius: 9px;

      background: rgba(255,255,255,.03);

      cursor: pointer;
      z-index: 101;

      /* Without this, some mobile browsers hold the tap for ~300ms while
         they check whether it's the first half of a double-tap-to-zoom
         gesture before firing click — the exact "delayed on touch" feel.
         manipulation disables that check for this element (pinch-zoom
         elsewhere on the page is unaffected). */
      touch-action: manipulation;
    }

    .nav-toggle span {
      display: block;
      width: 16px;
      height: 2px;

      background: var(--text);
      border-radius: 2px;

      transition:
        transform .25s ease,
        opacity .25s ease;
    }

    .nav-toggle.active span:nth-child(1) {
      transform: translateY(7px) rotate(45deg);
    }

    .nav-toggle.active span:nth-child(2) {
      opacity: 0;
    }

    .nav-toggle.active span:nth-child(3) {
      transform: translateY(-7px) rotate(-45deg);
    }

    /* =========================================================
       HERO
    ========================================================= */

    .hero {
      min-height: 930px;

      display: flex;
      align-items: center;

      padding:
        160px 0
        90px;

      position: relative;
      overflow: hidden;
    }

    .hero-content {
      text-align: center;
    }

    .eyebrow {
      display: inline-flex;
      align-items: center;
      gap: 9px;

      padding:
        8px 14px;

      border:
        1px solid
        rgba(130,87,255,.25);

      background:
        rgba(130,87,255,.07);

      border-radius: 999px;

      color:
        #cfc3ff;

      font-size: .71rem;
      font-weight: 800;

      letter-spacing: .14em;
      text-transform: uppercase;

      margin-bottom: 30px;
    }

    .eyebrow-dot {
      width: 6px;
      height: 6px;

      background:
        var(--purple-light);

      border-radius: 50%;

      box-shadow:
        0 0 15px
        var(--purple);
    }

    h1 {
      max-width: 1050px;

      margin:
        0 auto;

      font-family:
        "Manrope",
        Inter,
        ui-sans-serif,
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;

      font-size:
        clamp(
          3.5rem,
          8vw,
          8rem
        );

      line-height: .89;

      letter-spacing:
        -.08em;

      font-weight: 800;
    }

    .gradient {
      background:
        linear-gradient(
          105deg,
          #ffffff 5%,
          #b7a3ff 43%,
          #4edbff 92%
        );

      -webkit-background-clip:
        text;

      background-clip:
        text;

      color:
        transparent;
    }

    .hero-copy {
      max-width: 760px;

      margin:
        35px auto 0;

      color:
        var(--muted);

      font-size:
        clamp(
          1rem,
          2vw,
          1.18rem
        );

      line-height:
        1.8;
    }

    .hero-copy strong {
      color:
        var(--muted-2);

      font-weight:
        700;
    }

    .hero-buttons {
      display:
        flex;

      align-items:
        center;

      justify-content:
        center;

      gap:
        12px;

      flex-wrap:
        wrap;

      margin-top:
        35px;
    }

    .hero-pricing-note {
      margin-top: 16px;
      text-align: center;
      font-size: .82rem;
      color: var(--muted-2);
    }

    .hero-pricing-note a {
      color: var(--green);
      font-weight: 700;
      text-decoration: none;
    }

    .hero-pricing-note a:hover {
      text-decoration: underline;
    }

    .button {
      display:
        inline-flex;

      align-items:
        center;

      justify-content:
        center;

      padding:
        14px 21px;

      border-radius:
        12px;

      font-size:
        .87rem;

      font-weight:
        750;

      position: relative;
      overflow: hidden;
      cursor: pointer;

      transition:
        transform .25s ease,
        box-shadow .25s ease,
        background .25s ease,
        opacity .25s ease;
    }

    .button::before {
      content: "";
      position: absolute;
      top: 0;
      left: -75%;
      width: 45%;
      height: 100%;
      background: linear-gradient(120deg, transparent, rgba(255,255,255,.4), transparent);
      transform: skewX(-20deg);
      transition: left .65s ease;
      pointer-events: none;
    }

    .button:hover::before {
      left: 130%;
    }

    .button:active {
      transform: translateY(0) scale(.96);
    }

    .button:focus-visible {
      outline: 2px solid var(--purple-light);
      outline-offset: 3px;
    }

    .button:disabled,
    .button[disabled] {
      opacity: .55;
      cursor: not-allowed;
      pointer-events: none;
      transform: none !important;
    }

    .button.is-loading {
      cursor: wait;
      pointer-events: none;
    }

    .button.is-loading::after {
      content: "";
      display: inline-block;
      width: 13px;
      height: 13px;
      margin-left: 10px;
      border-radius: 50%;
      border: 2px solid rgba(255,255,255,.3);
      border-top-color: currentColor;
      vertical-align: -2px;
      animation: btn-spin .7s linear infinite;
    }

    @keyframes btn-spin {
      to { transform: rotate(360deg); }
    }

    .button-primary {
      background:
        linear-gradient(
          135deg,
          var(--purple),
          #6843dd
        );

      color:
        white;

      font-weight: 800;

      box-shadow:
        0 18px 50px
        rgba(130,87,255,.28),
        inset 0 1px 0 rgba(255,255,255,.16);
    }

    .button-primary:hover {
      transform:
        translateY(-2px);

      box-shadow:
        0 22px 60px
        rgba(130,87,255,.48),
        inset 0 1px 0 rgba(255,255,255,.2);
    }

    /* Idle glow pulse for the site's two highest-priority CTAs only
       (hero + final contact) — applied via .cta-pulse rather than to
       every .button-primary, so it's a spotlight, not noise.
       Box-shadow only, no absolute-positioned pseudo-element, so it
       can never contribute to horizontal overflow. Paused on hover
       so it doesn't fight the existing hover box-shadow transition. */
    @keyframes cta-pulse-glow {
      0%, 100% {
        box-shadow:
          0 18px 50px rgba(130,87,255,.28),
          inset 0 1px 0 rgba(255,255,255,.16),
          0 0 0 0 rgba(130,87,255,0);
      }
      50% {
        box-shadow:
          0 18px 50px rgba(130,87,255,.28),
          inset 0 1px 0 rgba(255,255,255,.16),
          0 0 28px 6px rgba(130,87,255,.32);
      }
    }

    .cta-pulse {
      animation: cta-pulse-glow 3.2s ease-in-out infinite;
    }

    .cta-pulse:hover {
      animation-play-state: paused;
    }

    /* Secondary stays visually quieter than primary on purpose —
       smaller lift + softer shadow keeps the eye on the primary CTA. */
    .button-secondary {
      border:
        1px solid
        var(--border-hover);

      background:
        rgba(255,255,255,.035);

      color:
        var(--muted);

      font-weight: 600;
    }

    .button-secondary:hover {
      background:
        rgba(255,255,255,.065);

      color:
        var(--text);

      transform:
        translateY(-1px);

      box-shadow:
        0 8px 20px
        rgba(0,0,0,.22);
    }

    /* =========================================================
       TRUST BADGE — reusable pill for already-true, factual
       statements (e.g. "24/7 monitoring", "Built in-house").
       Copy lives wherever it's used; this only supplies the chrome.
    ========================================================= */

    .trust-badge {
      display: inline-flex;
      align-items: center;
      gap: 7px;

      padding: 7px 13px;

      border: 1px solid rgba(62,227,161,.28);
      border-radius: 999px;

      background: rgba(62,227,161,.08);

      color: #a8f2d4;
      font-size: .72rem;
      font-weight: 700;
      letter-spacing: .01em;
    }

    .trust-badge::before {
      content: "";
      flex-shrink: 0;

      width: 6px;
      height: 6px;

      border-radius: 50%;

      background: var(--green);
      box-shadow: 0 0 8px rgba(62,227,161,.6);
    }

    /* Neutral variant for trust statements that aren't "live status"
       style (e.g. "Built in-house", "One platform") — same chrome,
       purple/blue accent instead of the green "online" dot. */
    .trust-badge.is-neutral {
      border-color: rgba(130,87,255,.28);
      background: rgba(130,87,255,.08);
      color: #d9d0ff;
    }

    .trust-badge.is-neutral::before {
      background: linear-gradient(135deg, var(--purple), var(--blue));
      box-shadow: 0 0 8px rgba(130,87,255,.5);
    }

    /* =========================================================
       HERO TECHNOLOGY VISUAL
    ========================================================= */

    .hero-system {
      max-width:
        1000px;

      margin:
        85px auto 0;

      padding:
        10px;

      border:
        1px solid
        rgba(255,255,255,.08);

      border-radius:
        30px;

      background:
        linear-gradient(
          145deg,
          rgba(255,255,255,.07),
          rgba(255,255,255,.015)
        );

      box-shadow:
        0 55px 130px
        rgba(0,0,0,.5);
    }

    .system {
      min-height:
        330px;

      border-radius:
        22px;

      position:
        relative;

      overflow:
        hidden;

      background:
        radial-gradient(
          circle at 50% 50%,
          rgba(130,87,255,.12),
          transparent 38%
        ),
        #090c13;

      display:
        flex;

      align-items:
        center;

      justify-content:
        center;
    }

    .system-network {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      z-index: 1;
      opacity: .55;
    }

    .system-network line {
      stroke: rgba(130,87,255,.35);
      stroke-width: 1;
    }

    .system-network circle {
      fill: var(--blue);
    }

    .system::before {
      content: "";

      position:
        absolute;

      inset:
        0;

      background:
        linear-gradient(
          transparent 49%,
          rgba(255,255,255,.025) 50%,
          transparent 51%
        );

      background-size:
        100% 45px;
    }

    .core {
      width:
        100px;

      height:
        100px;

      border-radius:
        28px;

      background:
        linear-gradient(
          135deg,
          var(--purple),
          var(--blue)
        );

      display:
        grid;

      place-items:
        center;

      position:
        relative;

      z-index:
        5;

      box-shadow:
        0 0 80px
        rgba(130,87,255,.45);
    }

    .core::after {
      content:
        "EPIC";

      font-size:
        .8rem;

      font-weight:
        900;

      letter-spacing:
        .12em;

      color:
        white;
    }

    .orbit {
      position:
        absolute;

      width:
        250px;

      height:
        250px;

      border:
        1px solid
        rgba(130,87,255,.25);

      border-radius:
        50%;
    }

    .orbit.two {
      width:
        410px;

      height:
        410px;

      border-color:
        rgba(53,200,255,.12);

      transform:
        rotate(35deg);
    }

    .orbit.three {
      width:
        600px;

      height:
        600px;

      border-color:
        rgba(255,255,255,.055);

      transform:
        rotate(-20deg);
    }

    .system-label {
      position:
        absolute;

      padding:
        8px 12px;

      border:
        1px solid
        rgba(255,255,255,.09);

      border-radius:
        9px;

      background:
        rgba(8,10,15,.8);

      backdrop-filter:
        blur(12px);

      color:
        #aeb6c5;

      font-size:
        .68rem;

      font-weight:
        650;
    }

    .label-a {
      top:
        20%;

      left:
        12%;
    }

    .label-b {
      top:
        25%;

      right:
        11%;
    }

    .label-c {
      bottom:
        19%;

      left:
        20%;
    }

    .label-d {
      bottom:
        18%;

      right:
        18%;
    }

    /* =========================================================
       HERO SYSTEM — MOTION
    ========================================================= */

    @keyframes spin-cw {
      from { transform: rotate(0deg); }
      to { transform: rotate(360deg); }
    }

    @keyframes spin-ccw {
      from { transform: rotate(35deg); }
      to { transform: rotate(-325deg); }
    }

    @keyframes spin-ccw-slow {
      from { transform: rotate(-20deg); }
      to { transform: rotate(-380deg); }
    }

    @keyframes core-pulse {
      0%, 100% { box-shadow: 0 0 80px rgba(130,87,255,.45); transform: scale(1); }
      50% { box-shadow: 0 0 120px rgba(130,87,255,.7); transform: scale(1.045); }
    }

    @keyframes label-float {
      0%, 100% { transform: translateY(0); }
      50% { transform: translateY(-8px); }
    }

    @keyframes drift {
      0%, 100% { transform: translate(0, 0) scale(1); }
      50% { transform: translate(3%, -4%) scale(1.06); }
    }

    @keyframes fade-in-up {
      from { opacity: 0; transform: translateY(28px) scale(.98); }
      to { opacity: 1; transform: translateY(0) scale(1); }
    }

    .orbit {
      animation: spin-cw 46s linear infinite;
    }

    .orbit.two {
      animation: spin-ccw 64s linear infinite;
    }

    .orbit.three {
      animation: spin-ccw-slow 90s linear infinite;
    }

    .core {
      animation: core-pulse 4.5s ease-in-out infinite;
    }

    .system-label {
      animation: label-float 6s ease-in-out infinite;
    }

    .label-b { animation-delay: 1.2s; }
    .label-c { animation-delay: 2.4s; }
    .label-d { animation-delay: 3.6s; }

    .hero::before,
    .hero::after {
      content: "";
      position: absolute;
      width: 640px;
      height: 640px;
      border-radius: 50%;
      filter: blur(90px);
      opacity: .35;
      pointer-events: none;
      z-index: 0;
      animation: drift 18s ease-in-out infinite;
    }

    .hero::before {
      top: -220px;
      left: -160px;
      background: radial-gradient(circle, rgba(130,87,255,.55), transparent 65%);
    }

    .hero::after {
      top: -120px;
      right: -220px;
      background: radial-gradient(circle, rgba(53,200,255,.4), transparent 65%);
      animation-delay: 4s;
      animation-duration: 22s;
    }

    .hero .container {
      position: relative;
      z-index: 1;
    }

    .hero-content > * {
      animation: fade-in-up .65s cubic-bezier(.16,1,.3,1) both;
    }

    .eyebrow { animation-delay: 0s; }
    .hero h1 { animation-delay: .06s; }
    .hero-copy { animation-delay: .12s; }
    .hero-buttons { animation-delay: .18s; }
    .hero-system { animation-delay: .24s; }

    /* =========================================================
       SCROLL REVEAL
    ========================================================= */

    .reveal {
      opacity: 0;
      transform: translateY(26px) scale(.98);
      transition: opacity .85s cubic-bezier(.16,1,.3,1), transform .85s cubic-bezier(.16,1,.3,1);
    }

    .reveal.visible {
      opacity: 1;
      transform: translateY(0) scale(1);
    }

    .pillars .reveal:nth-child(2),
    .service-grid .reveal:nth-child(2),
    .faq-list .reveal:nth-child(2),
    .impact-chart .reveal:nth-child(2) { transition-delay: .08s; }

    .pillars .reveal:nth-child(3),
    .service-grid .reveal:nth-child(3),
    .faq-list .reveal:nth-child(3),
    .impact-chart .reveal:nth-child(3) { transition-delay: .16s; }

    .pillars .reveal:nth-child(4),
    .service-grid .reveal:nth-child(4),
    .faq-list .reveal:nth-child(4) { transition-delay: .24s; }

    .service-grid .reveal:nth-child(5) { transition-delay: .32s; }
    .service-grid .reveal:nth-child(6) { transition-delay: .4s; }

    /* Generic stagger utility — add class="stagger" to any grid/list
       container whose direct children carry .reveal, and each child gets
       an increasing transition-delay. Keeps new grids (pricing cards,
       tier cards, timeline steps, industry cards, etc.) consistent with
       the hand-listed containers above without hand-listing every one. */
    .stagger > .reveal:nth-child(1),
    .stagger > *:nth-child(1) .reveal { transition-delay: 0s; }
    .stagger > .reveal:nth-child(2),
    .stagger > *:nth-child(2) .reveal { transition-delay: .07s; }
    .stagger > .reveal:nth-child(3),
    .stagger > *:nth-child(3) .reveal { transition-delay: .14s; }
    .stagger > .reveal:nth-child(4),
    .stagger > *:nth-child(4) .reveal { transition-delay: .21s; }
    .stagger > .reveal:nth-child(5),
    .stagger > *:nth-child(5) .reveal { transition-delay: .28s; }
    .stagger > .reveal:nth-child(6),
    .stagger > *:nth-child(6) .reveal { transition-delay: .35s; }
    .stagger > .reveal:nth-child(7),
    .stagger > *:nth-child(7) .reveal { transition-delay: .42s; }
    .stagger > .reveal:nth-child(8),
    .stagger > *:nth-child(8) .reveal { transition-delay: .49s; }
    .stagger > .reveal:nth-child(n+9),
    .stagger > *:nth-child(n+9) .reveal { transition-delay: .55s; }

    /* =========================================================
       HOVER MICRO-INTERACTIONS
    ========================================================= */

    /* Generic lift-on-hover utility for cards that don't already define
       their own :hover transform (industry-card, pricing-card, etc.
       keep their bespoke rules — this is for newly-touched cards). */
    .hover-lift {
      transition: transform .3s cubic-bezier(.22,.85,.32,1), box-shadow .3s ease, border-color .25s ease;
    }

    .hover-lift:hover {
      transform: translateY(-4px);
      border-color: var(--border-hover);
      box-shadow: 0 18px 40px -26px rgba(130,87,255,.55);
    }

    /* Subtle press/scale feedback for buttons that don't already have it. */
    .button {
      transition: transform .25s cubic-bezier(.22,.85,.32,1), box-shadow .25s ease, filter .25s ease;
    }

    .button:hover {
      transform: translateY(-2px);
    }

    .button:active {
      transform: translateY(0) scale(.98);
    }

    /* =========================================================
       AMBIENT SCROLL BACKGROUND (drifting blobs + dot grid)
       GPU-cheap: only transform/opacity are animated. Fully inert
       under prefers-reduced-motion: reduce via the global override
       near the end of this file.
    ========================================================= */

    .bg-ambient {
      position: absolute;
      inset: 0;
      overflow: hidden;
      pointer-events: none;
      z-index: 0;
    }

    .bg-ambient .bg-blob {
      position: absolute;
      border-radius: 50%;
      filter: blur(90px);
      opacity: .3;
      will-change: transform;
    }

    .bg-ambient .bg-blob-a {
      width: 560px;
      height: 560px;
      top: -180px;
      left: -140px;
      background: radial-gradient(circle, rgba(130,87,255,.55), transparent 65%);
    }

    .bg-ambient .bg-blob-b {
      width: 500px;
      height: 500px;
      bottom: -160px;
      right: -120px;
      background: radial-gradient(circle, rgba(53,200,255,.42), transparent 65%);
    }

    .bg-ambient .bg-blob-c {
      width: 420px;
      height: 420px;
      top: 40%;
      left: 50%;
      background: radial-gradient(circle, rgba(62,227,161,.3), transparent 65%);
    }

    .bg-ambient .bg-dotgrid {
      position: absolute;
      inset: -12% -12%;
      background-image: radial-gradient(rgba(255,255,255,.07) 1px, transparent 1.6px);
      background-size: 30px 30px;
      opacity: .4;
      will-change: transform;
    }

    @media (prefers-reduced-motion: no-preference) {

      .bg-ambient .bg-blob-a {
        animation: aurora-drift-a 32s ease-in-out infinite;
      }

      .bg-ambient .bg-blob-b {
        animation: aurora-drift-b 38s ease-in-out infinite;
        animation-delay: -6s;
      }

      .bg-ambient .bg-blob-c {
        animation: aurora-drift-a 44s ease-in-out infinite;
        animation-delay: -14s;
      }

      .bg-ambient .bg-dotgrid {
        animation: grid-drift 70s linear infinite;
      }

    }

    @keyframes aurora-drift-a {
      0%, 100% { transform: translate3d(-3%, -4%, 0) scale(1); }
      50% { transform: translate3d(4%, 3%, 0) scale(1.1); }
    }

    @keyframes aurora-drift-b {
      0%, 100% { transform: translate3d(3%, 3%, 0) scale(1.04); }
      50% { transform: translate3d(-4%, -3%, 0) scale(.94); }
    }

    @keyframes grid-drift {
      0% { transform: translate3d(0, 0, 0); }
      100% { transform: translate3d(-30px, -30px, 0); }
    }

    /* =========================================================
       MINI CHARTS — hand-built SVG/CSS bar & line visuals
       (draws in via .reveal.visible so it only plays on-scroll)
    ========================================================= */

    /* Category quick-nav — replaces a bar chart that used to compare raw
       service COUNTS per category (6 vs 3 vs 4 vs 4). That's not a
       meaningful comparison for a visitor (why would having more IT
       service lines than security ones matter to them?), so it read as
       chart-shaped decoration without a real point. This does an actual
       job instead: jump-links straight to each category section below. */
    .category-nav {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
    }

    .category-nav-chip {
      display: inline-flex;
      align-items: center;
      gap: 9px;
      padding: 10px 16px 10px 12px;
      border: 1px solid var(--border);
      border-radius: 999px;
      background: rgba(255,255,255,.02);
      color: var(--text);
      font-size: .84rem;
      font-weight: 650;
      text-decoration: none;
      transition: border-color .2s ease, background .2s ease, transform .2s ease;
    }

    .category-nav-chip:hover {
      border-color: var(--cat-color, var(--purple-light));
      background: var(--cat-tint, rgba(130,87,255,.08));
      transform: translateY(-2px);
    }

    .category-nav-chip svg {
      width: 16px;
      height: 16px;
      color: var(--cat-color, var(--purple-light));
      flex-shrink: 0;
    }

    .category-nav-chip .count {
      color: var(--muted-2);
      font-weight: 700;
      font-size: .76rem;
    }

    /* Animated count-up numbers — JS sets the text; this just gives the
       digits a gentle settle-in so the swap doesn't feel abrupt. */
    [data-count-to] {
      display: inline-block;
      font-variant-numeric: tabular-nums;
    }

    /* =========================================================
       SECTION STRUCTURE
    ========================================================= */

    section {
      padding:
        120px 0;
    }

    .kicker {
      color:
        var(--purple-light);

      font-size:
        .7rem;

      font-weight:
        850;

      letter-spacing:
        .14em;

      text-transform:
        uppercase;

      margin-bottom:
        14px;
    }

    /* Display font pairing: Manrope (800) for large headings,
       Inter for body copy — applies to every <h2> across index.html,
       services.php (incl. category headings) and get-started.php. */
    h2 {
      font-family:
        "Manrope",
        Inter,
        ui-sans-serif,
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;

      font-weight: 800;
    }

    .section-title {
      max-width:
        850px;

      font-family:
        "Manrope",
        Inter,
        ui-sans-serif,
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;

      font-size:
        clamp(
          2.5rem,
          5vw,
          4.8rem
        );

      line-height:
        .97;

      letter-spacing:
        -.065em;

      font-weight: 800;
    }

    .section-copy {
      max-width:
        730px;

      margin-top:
        22px;

      color:
        var(--muted);

      font-size:
        1rem;

      line-height:
        1.8;
    }

    /* =========================================================
       FOUR PILLARS
    ========================================================= */

    .pillars {
      margin-top:
        60px;

      display:
        grid;

      grid-template-columns:
        repeat(4, 1fr);

      gap:
        14px;
    }

    .pillar {
      min-height:
        310px;

      padding:
        28px;

      border:
        1px solid
        var(--border);

      border-radius:
        var(--radius);

      background:
        linear-gradient(
          150deg,
          rgba(255,255,255,.045),
          rgba(255,255,255,.012)
        );

      position:
        relative;

      overflow:
        hidden;

      transition:
        transform .3s ease,
        border-color .3s ease;
    }

    .pillar:hover {
      transform:
        translateY(-6px);

      border-color:
        rgba(130,87,255,.35);
    }

    .pillar-number {
      color:
        rgba(167,141,255,.65);

      font-size:
        .68rem;

      font-weight:
        850;

      letter-spacing:
        .12em;
    }

    .pillar-icon {
      margin-top:
        48px;

      width:
        48px;

      height:
        48px;

      border-radius:
        14px;

      display:
        grid;

      place-items:
        center;

      background:
        rgba(130,87,255,.1);

      border:
        1px solid
        rgba(130,87,255,.16);

      font-size:
        1.3rem;

      color: var(--purple-light);
    }

    .pillar-icon svg {
      display: block;
    }

    .pillar-link {
      display: block;
      color: inherit;
      text-decoration: none;
      height: 100%;
    }

    .pillar-cta {
      position: absolute;
      left: 28px;
      right: 28px;
      bottom: 24px;

      display: flex;
      align-items: center;
      justify-content: space-between;

      font-size: .74rem;
      font-weight: 700;
      color: var(--muted-2);
      letter-spacing: .02em;

      padding-top: 14px;
      border-top: 1px solid var(--border);
    }

    .pillar-cta .arrow {
      transition: transform .25s ease, color .25s ease;
      color: var(--purple-light);
    }

    .pillar:hover .pillar-cta {
      color: var(--text);
    }

    .pillar:hover .pillar-cta .arrow {
      transform: translateX(4px);
    }

    .pillar h3 {
      margin-top:
        20px;

      font-size:
        1.15rem;

      letter-spacing:
        -.025em;
    }

    .pillar p {
      margin-top:
        9px;

      margin-bottom:
        70px;

      color:
        var(--muted);

      font-size:
        .84rem;

      line-height:
        1.65;
    }

    /* =========================================================
       IMPACT COMPARISON
    ========================================================= */

    .impact-section {
      padding: 100px 0;
    }

    .impact-chart {
      margin-top: 50px;
      display: flex;
      flex-direction: column;
      gap: 14px;
    }

    /* Caption now rendered as real, accessible HTML text (.impact-caption
       in index.html) instead of CSS-generated content. */

    .impact-row {
      display: grid;
      grid-template-columns: 150px 1fr 40px 1fr;
      align-items: center;
      gap: 18px;

      padding: 26px 28px;
      border: 1px solid var(--border);
      border-radius: var(--radius);
      background:
        linear-gradient(
          150deg,
          rgba(255,255,255,.035),
          rgba(255,255,255,.01)
        );
      transition: border-color .3s ease, transform .3s ease;
    }

    .impact-row:hover {
      border-color: var(--border-hover);
      transform: translateY(-2px);
    }

    .impact-label {
      font-size: .82rem;
      font-weight: 800;
      color: var(--text);
      letter-spacing: -.01em;
    }

    .impact-side {
      display: flex;
      flex-wrap: wrap;
      align-items: flex-start;
      gap: 10px;
      font-size: .84rem;
      line-height: 1.55;

      position: relative;
    }

    .impact-before {
      color: var(--muted);
    }

    .impact-after {
      color: var(--text);
      font-weight: 550;
    }

    /* =========================================================
       IMPACT BAR CHART — real inline SVG, paired before/after
       bars per metric. Proportions are fixed/illustrative only
       (no digits or percentages rendered) — the shorter/taller
       bar communicates direction, not a measured value.
    ========================================================= */

    .impact-chart-visual {
      margin-top: 46px;
      padding: 28px 24px 10px;
      border: 1px solid var(--border);
      border-radius: var(--radius);
      background:
        linear-gradient(
          150deg,
          rgba(255,255,255,.035),
          rgba(255,255,255,.01)
        );
    }

    .impact-chart-legend {
      display: flex;
      flex-wrap: wrap;
      gap: 10px 22px;
      margin-bottom: 22px;
      font-size: .78rem;
      color: var(--muted);
    }

    .legend-chip {
      display: inline-flex;
      align-items: center;
      gap: 7px;
      font-weight: 650;
    }

    .legend-chip i {
      width: 10px;
      height: 10px;
      border-radius: 3px;
      display: inline-block;
    }

    .legend-before i { background: var(--red); }
    .legend-after i { background: var(--green); }

    .impact-chart-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
      gap: 32px 28px;
      align-items: end;
    }

    .impact-chart-card {
      text-align: center;
    }

    .impact-chart-card svg {
      width: 100%;
      height: auto;
      aspect-ratio: 200 / 150;
      display: block;
      overflow: visible;
    }

    .impact-chart-card figcaption {
      display: flex;
      flex-direction: column;
      gap: 4px;
      margin-top: 16px;
    }

    .impact-chart-disclaimer {
      margin-top: 28px;
      font-size: .72rem;
      color: var(--muted-2);
      text-align: center;
    }

    .impact-chart-title {
      font-weight: 700;
      font-size: .92rem;
      color: var(--text);
    }

    .impact-chart-trend {
      font-size: .74rem;
      font-weight: 650;
      color: var(--green);
    }

    .impact-chart-attribution {
      font-size: .66rem;
      font-weight: 500;
      color: var(--muted-2);
    }

    .impact-chart-card .chart-baseline {
      stroke: rgba(255,255,255,.14);
      stroke-width: 1;
    }

    /* --- Qualified leads: animated draw-in line + gradient area --- */

    /* Draw-in length is the path's real arc length (~181.5 units for this
       curve), not a normalized "1" — WebKit/Safari has long-standing
       inconsistent handling of the SVG pathLength attribute on curved
       (cubic-bezier) paths, where dash-based reveal animations can stall,
       jump, or fail to reach the true end of the path. Using the actual
       absolute length (same technique already used for the donut and
       gauge circles below, which are computed from real circumference)
       avoids relying on pathLength normalization at all. */
    .impact-line-path {
      fill: none;
      stroke: var(--purple-light);
      stroke-width: 3;
      stroke-linecap: round;
      stroke-linejoin: round;
      stroke-dasharray: 182;
      stroke-dashoffset: 182;
      transition: stroke-dashoffset 1.3s cubic-bezier(.2,.8,.2,1);
    }

    .impact-chart-visual.visible .impact-line-path {
      stroke-dashoffset: 0;
    }

    .impact-area {
      opacity: 0;
      transition: opacity 1.1s ease .35s;
    }

    .impact-chart-visual.visible .impact-area {
      opacity: 1;
    }

    .impact-dot {
      opacity: 0;
      transform-box: fill-box;
      transform-origin: center;
      transform: scale(.4);
      transition: opacity .5s ease, transform .5s cubic-bezier(.34,1.56,.64,1);
    }

    .impact-chart-visual.visible .impact-dot {
      opacity: 1;
      transform: scale(1);
    }

    .impact-dot-before {
      fill: var(--red);
      transition-delay: .1s;
    }

    .impact-dot-after {
      fill: var(--green);
      transition-delay: 1.2s;
    }

    .impact-dot-value {
      font-size: 9px;
      font-weight: 800;
      opacity: 0;
      transition: opacity .5s ease;
    }

    .impact-chart-visual.visible .impact-dot-value {
      opacity: 1;
    }

    .impact-dot-value-before {
      fill: var(--red);
      transition-delay: .3s;
    }

    .impact-dot-value-after {
      fill: var(--green);
      transition-delay: 1.4s;
    }

    /* --- Cost of your stack: animated concentric radial gauge --- */

    .gauge-track {
      stroke: rgba(255,255,255,.06);
    }

    .impact-gauge-outer {
      stroke: var(--red);
      stroke-linecap: round;
      stroke-dashoffset: 389.5;
      opacity: .85;
      transition: stroke-dashoffset 1.1s cubic-bezier(.2,.8,.2,1);
    }

    /* Reveal target is the gap length (circumference minus the visible
       311.6 arc), not 0 — dasharray is a full-circumference "389.5 389.5"
       pattern so the arc genuinely grows into place. Animating dashoffset
       to 0 here would be a no-op (0 and 389.5 render identically on a
       389.5-circumference path), producing a pointless full-circle spin
       instead of a fill. */
    .impact-chart-visual.visible .impact-gauge-outer {
      stroke-dashoffset: 77.9;
    }

    .impact-gauge-inner {
      stroke: var(--green);
      stroke-linecap: round;
      stroke-dashoffset: 263.9;
      transition: stroke-dashoffset 1.1s .2s cubic-bezier(.2,.8,.2,1);
    }

    .impact-chart-visual.visible .impact-gauge-inner {
      stroke-dashoffset: 190;
    }

    .gauge-center-value {
      font-size: 21px;
      font-weight: 800;
      fill: var(--text);
      text-anchor: middle;
      opacity: 0;
      transition: opacity .5s ease 1.3s;
    }

    .gauge-center-label {
      font-size: 7px;
      font-weight: 650;
      fill: var(--muted);
      text-anchor: middle;
      letter-spacing: .04em;
      text-transform: uppercase;
      opacity: 0;
      transition: opacity .5s ease 1.4s;
    }

    .impact-chart-visual.visible .gauge-center-value,
    .impact-chart-visual.visible .gauge-center-label {
      opacity: 1;
    }

    .impact-squiggle {
      display: block;
      width: 220px;
      height: auto;
      margin: 30px auto 0;
      opacity: .5;
    }

    .impact-squiggle path {
      fill: none;
      stroke: var(--purple-light);
      stroke-width: 2.4;
      stroke-linecap: round;
    }

    .impact-squiggle circle {
      fill: var(--blue);
    }

    .impact-icon {
      flex-shrink: 0;
      width: 22px;
      height: 22px;
      margin-top: 1px;
      border-radius: 50%;
      display: grid;
      place-items: center;
      font-size: .68rem;
      font-weight: 800;
    }

    .impact-before .impact-icon {
      background: rgba(255,92,122,.12);
      border: 1px solid rgba(255,92,122,.3);
      color: var(--red);
    }

    .impact-after .impact-icon {
      background: rgba(62,227,161,.12);
      border: 1px solid rgba(62,227,161,.3);
      color: var(--green);
    }

    .impact-arrow {
      text-align: center;
      color: var(--purple-light);
      font-size: 1.1rem;
      font-weight: 700;
    }

    /* =========================================================
       TESTIMONIALS
    ========================================================= */

    .testimonial-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
      gap: 22px;
      margin-top: 44px;
    }

    .testimonial-card {
      margin: 0;
      padding: 30px 28px;
      border: 1px solid var(--border);
      border-radius: var(--radius);
      background:
        linear-gradient(
          150deg,
          rgba(255,255,255,.035),
          rgba(255,255,255,.01)
        );
      display: flex;
      flex-direction: column;
      gap: 20px;
      transition: transform .3s ease, border-color .3s ease;
    }

    .testimonial-card:hover {
      transform: translateY(-4px);
      border-color: var(--border-hover);
    }

    .testimonial-card blockquote {
      margin: 0;
      color: var(--text);
      font-size: .96rem;
      line-height: 1.65;
    }

    .testimonial-card figcaption {
      display: flex;
      flex-direction: column;
      gap: 2px;
    }

    .testimonial-name {
      font-family: "Manrope", Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
      font-weight: 800;
      color: var(--text);
      font-size: .88rem;
    }

    .testimonial-role {
      color: var(--muted-2);
      font-size: .74rem;
    }

    /* =========================================================
       SERVICES
    ========================================================= */

    .services-header {
      display:
        flex;

      align-items:
        flex-end;

      justify-content:
        space-between;

      gap:
        40px;
    }

    .services-header .section-copy {
      margin:
        0;

      max-width:
        500px;
    }

    .catalog-cta {
      display: flex;
      flex-wrap: wrap;
      align-items: stretch;
      gap: 16px;
      margin-top: 40px;
    }

    .catalog-cta .button {
      flex: 1 1 280px;
      text-align: center;
    }

    .services-chart {
      display: flex;
      align-items: center;
      gap: 44px;
      flex-wrap: wrap;
      margin-top: 44px;
      padding-top: 40px;
      border-top: 1px solid var(--border);
    }

    /* Single-ring "complete ecosystem" badge — deliberately not a
       multi-segment donut of the four category counts (6/3/4/4):
       those splits are too close to each other to read as a
       meaningful proportion at a glance, so a segmented pie just
       looked like arbitrary color blocks. A single unbroken gradient
       ring reads as "one complete system" instead, which is the
       actual point. */
    .stat-ring {
      position: relative;
      width: 168px;
      height: 168px;
      border-radius: 50%;
      flex-shrink: 0;
      box-shadow: 0 30px 70px rgba(0,0,0,.4);
    }

    .stat-ring-svg {
      display: block;
      width: 100%;
      height: 100%;
    }

    .stat-ring-track {
      stroke: rgba(255,255,255,.06);
    }

    .stat-ring-fill {
      stroke: url(#statRingGrad);
      stroke-linecap: round;
    }

    .stat-ring-hole {
      position: absolute;
      inset: 22px;
      border-radius: 50%;
      background: var(--black-2);
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
    }

    .stat-ring-total {
      font-size: 1.9rem;
      font-weight: 850;
      letter-spacing: -.03em;
    }

    .stat-ring-label {
      font-size: .65rem;
      color: var(--muted);
      text-transform: uppercase;
      letter-spacing: .1em;
      text-align: center;
      max-width: 92px;
    }

    .stat-tiles {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
      gap: 14px;
      flex: 1 1 380px;
    }

    .stat-tile {
      padding: 18px 20px;
      border: 1px solid var(--border);
      border-radius: var(--radius);
      background: rgba(255,255,255,.02);
      transition: transform .3s ease, border-color .3s ease;
    }

    .stat-tile:hover {
      transform: translateY(-3px);
      border-color: var(--border-hover);
    }

    .stat-tile-icon {
      width: 20px;
      height: 20px;
      color: var(--purple-light);
      margin-bottom: 10px;
    }

    .stat-tile-icon svg { display: block; width: 100%; height: 100%; }

    .stat-tile-value {
      display: block;
      font-family: "Manrope", Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
      font-size: 1.5rem;
      font-weight: 800;
      letter-spacing: -.02em;
      color: var(--text);
    }

    .stat-tile-label {
      display: block;
      margin-top: 4px;
      color: var(--muted-2);
      font-size: .74rem;
    }

    @keyframes donut-spin-in {
      from { transform: rotate(-90deg) scale(.7); opacity: 0; }
      to { transform: rotate(0deg) scale(1); opacity: 1; }
    }

    .services-chart.visible .stat-ring {
      animation: donut-spin-in .9s cubic-bezier(.2,.8,.2,1) both;
    }

    .service-grid {
      margin-top:
        60px;

      display:
        grid;

      grid-template-columns:
        repeat(auto-fill, minmax(320px, 1fr));

      gap:
        14px;
    }

    .service-grid.cols-2 {
      grid-template-columns: repeat(2, 1fr);
    }

    .service-grid.cols-3 {
      grid-template-columns: repeat(3, 1fr);
    }

    .service-card-link {
      display: block;
    }

    .service {
      padding:
        28px;

      min-height:
        340px;

      border:
        1px solid
        var(--border);

      border-radius:
        20px;

      background:
        rgba(255,255,255,.022);

      transition:
        background .25s ease,
        border-color .25s ease,
        transform .25s ease;
    }

    .service:hover {
      background:
        rgba(255,255,255,.045);

      border-color:
        rgba(255,255,255,.15);

      transform:
        translateY(-4px);
    }

    .service-top {
      display:
        flex;

      justify-content:
        space-between;

      align-items:
        center;
    }

    .service-index {
      color:
        var(--purple-light);

      font-size:
        .68rem;

      font-weight:
        850;

      letter-spacing:
        .1em;
    }

    .service-arrow {
      color:
        var(--muted-2);

      font-size:
        1rem;
    }

    .service-icon {
      margin-top:
        26px;

      width:
        36px;

      height:
        36px;

      border-radius:
        10px;

      display:
        grid;

      place-items:
        center;

      background:
        rgba(130,87,255,.1);

      border:
        1px solid
        rgba(130,87,255,.16);

      font-size:
        1rem;
    }

    .service h3 {
      margin-top:
        16px;

      font-size:
        1.1rem;

      letter-spacing:
        -.025em;
    }

    .service p {
      margin-top:
        9px;

      color:
        var(--muted);

      font-size:
        .82rem;

      line-height:
        1.65;
    }

    .service-includes {
      margin-top:
        14px;

      list-style:
        none;

      display:
        grid;

      gap:
        6px;
    }

    .service-includes li {
      padding-left:
        14px;

      position:
        relative;

      color:
        var(--muted-2);

      font-size:
        .76rem;
    }

    .service-includes li::before {
      content:
        "—";

      position:
        absolute;

      left:
        0;

      color:
        var(--purple-light);
    }

    /* =========================================================
       TECHNOLOGY STACK
    ========================================================= */

    .stack-section {
      background:
        linear-gradient(
          180deg,
          transparent,
          rgba(130,87,255,.025),
          transparent
        );
    }

    /* =========================================================
       LIFECYCLE STAGES
       Visual support for the .lifecycle-section copy — a row of
       stage chips (strategy → growth) instead of a flat paragraph.
       Pattern matches the existing .tag / .tags chip language.
    ========================================================= */

    .lifecycle-stages {
      margin-top: 44px;
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 10px 6px;
    }

    .lifecycle-stage {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 10px 16px 10px 12px;
      border: 1px solid var(--border);
      border-radius: 999px;
      background: rgba(255,255,255,.022);
      font-size: .8rem;
      font-weight: 600;
      color: var(--text);
      transition: border-color .25s ease, background .25s ease, transform .25s ease;
    }

    .lifecycle-stage svg {
      width: 15px;
      height: 15px;
      color: var(--green);
      flex-shrink: 0;
    }

    .lifecycle-stage:hover {
      border-color: var(--border-hover);
      background: rgba(255,255,255,.045);
      transform: translateY(-2px);
    }

    .lifecycle-connector {
      display: inline-flex;
      align-items: center;
      flex-shrink: 0;
      color: var(--muted-2);
    }

    .lifecycle-connector svg {
      width: 13px;
      height: 13px;
      display: block;
    }

    @media (max-width: 700px) {
      .lifecycle-connector { display: none; }
      .lifecycle-stages { gap: 10px; }
    }

    .stack-grid {
      margin-top:
        60px;

      display:
        grid;

      grid-template-columns:
        repeat(2, 1fr);

      gap:
        15px;
    }

    .stack-card {
      padding:
        30px;

      border:
        1px solid
        var(--border);

      border-radius:
        22px;

      background:
        rgba(255,255,255,.025);

      transition:
        transform .25s ease,
        border-color .25s ease,
        background .25s ease;
    }

    .stack-card:hover {
      transform: translateY(-3px);
      border-color: var(--border-hover);
      background: rgba(255,255,255,.04);
    }

    .stack-card h3 {
      font-size:
        1rem;

      margin-bottom:
        18px;
    }

    .tags {
      display:
        flex;

      flex-wrap:
        wrap;

      gap:
        8px;
    }

    .tag {
      padding:
        7px 10px;

      border:
        1px solid
        rgba(255,255,255,.07);

      border-radius:
        8px;

      background:
        rgba(255,255,255,.025);

      color:
        #aab2c1;

      font-size:
        .72rem;

      transition: border-color .2s ease, background .2s ease, color .2s ease, transform .2s ease;
    }

    .tag:hover {
      border-color: var(--border-hover);
      background: rgba(255,255,255,.05);
      color: var(--text);
      transform: translateY(-1px);
    }

    /* =========================================================
       AI SECTION
    ========================================================= */

    .ai-section {
      padding:
        100px 0;
    }

    .ai-box {
      padding:
        70px;

      border:
        1px solid
        rgba(130,87,255,.22);

      border-radius:
        34px;

      background:
        radial-gradient(
          circle at 85% 15%,
          rgba(53,200,255,.11),
          transparent 30%
        ),
        radial-gradient(
          circle at 10% 90%,
          rgba(130,87,255,.14),
          transparent 35%
        ),
        #0a0d14;

      position: relative;
      overflow: hidden;
      transition: border-color .35s ease, box-shadow .35s ease;
    }

    .ai-box:hover {
      border-color: rgba(130,87,255,.4);
      box-shadow: 0 30px 70px -40px rgba(130,87,255,.5);
    }

    .ai-box h2 {
      max-width:
        900px;

      font-size:
        clamp(
          2.6rem,
          5vw,
          5.2rem
        );

      line-height:
        .96;

      letter-spacing:
        -.065em;
    }

    .ai-box p {
      max-width:
        700px;

      margin-top:
        25px;

      color:
        var(--muted);

      line-height:
        1.8;
    }

    .ai-human-note {
      margin-top: 18px;
      max-width: 640px;
      color: var(--muted);
      font-size: .92rem;
      line-height: 1.65;
    }

    .ai-trust-row {
      margin-top: 16px;
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
    }

    .ai-list {
      margin-top:
        45px;

      display:
        grid;

      grid-template-columns:
        repeat(3, 1fr);

      gap:
        10px;
    }

    .ai-item {
      padding:
        18px;

      border:
        1px solid
        rgba(255,255,255,.07);

      border-radius:
        13px;

      background:
        rgba(255,255,255,.025);

      color:
        #bfc6d2;

      font-size:
        .8rem;

      transition:
        transform .25s ease,
        border-color .25s ease,
        background .25s ease;
    }

    .ai-item:hover {
      transform: translateY(-3px);
      border-color: rgba(130,87,255,.35);
      background: rgba(255,255,255,.045);
    }

    /* =========================================================
       IT / SOFTWARE ECOSYSTEM
    ========================================================= */

    .ecosystem {
      margin-top:
        60px;

      display:
        grid;

      grid-template-columns:
        repeat(3, 1fr);

      gap:
        15px;
    }

    .eco {
      padding:
        27px;

      border:
        1px solid
        var(--border);

      border-radius:
        20px;

      background:
        rgba(255,255,255,.02);

      transition:
        transform .25s ease,
        border-color .25s ease,
        background .25s ease;
    }

    .eco:hover {
      transform: translateY(-3px);
      border-color: var(--border-hover);
      background: rgba(255,255,255,.035);
    }

    .eco h3 {
      font-size:
        .95rem;

      margin-bottom:
        18px;
    }

    .eco ul {
      list-style:
        none;

      display:
        grid;

      gap:
        9px;
    }

    .eco li {
      color:
        var(--muted);

      font-size:
        .78rem;

      padding-left:
        16px;

      position:
        relative;
    }

    .eco li::before {
      content:
        "→";

      position:
        absolute;

      left:
        0;

      color:
        var(--purple-light);
    }

    /* =========================================================
       PHILOSOPHY
    ========================================================= */

    .philosophy {
      text-align:
        center;

      padding:
        150px 20px;
    }

    .philosophy h2 {
      max-width:
        1050px;

      margin:
        0 auto;

      font-size:
        clamp(
          3rem,
          7vw,
          7rem
        );

      line-height:
        .9;

      letter-spacing:
        -.08em;
    }

    .philosophy p {
      max-width:
        670px;

      margin:
        30px auto 0;

      color:
        var(--muted);

      line-height:
        1.8;
    }

    /* =========================================================
       FAQ
    ========================================================= */

    .faq-list {
      margin-top: 50px;
      max-width: 800px;

      display: grid;
      gap: 12px;
    }

    .faq-item {
      border: 1px solid var(--border);
      border-radius: 16px;
      background: rgba(255,255,255,.022);
      padding: 22px 26px;

      transition: border-color .2s ease, background .2s ease;
    }

    .faq-item:hover {
      border-color: var(--border-hover);
    }

    .faq-item summary {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 20px;

      cursor: pointer;
      list-style: none;

      font-weight: 700;
      font-size: .95rem;
      letter-spacing: -.01em;
    }

    .faq-item summary::-webkit-details-marker {
      display: none;
    }

    .faq-item summary::after {
      content: "+";
      flex-shrink: 0;

      width: 24px;
      height: 24px;

      display: grid;
      place-items: center;

      border-radius: 50%;
      border: 1px solid var(--border-hover);

      color: var(--purple-light);
      font-size: 1rem;

      transition: transform .25s ease;
    }

    .faq-item[open] summary::after {
      transform: rotate(45deg);
    }

    .faq-item p {
      margin-top: 14px;
      color: var(--muted);
      font-size: .87rem;
      line-height: 1.75;
    }

    /* Inline text links inside body copy previously inherited the global
       `a { color: inherit; text-decoration: none; }` reset with zero
       affordance — no color distinction, no hover state. Give them the
       same underline-sweep language already used by .nav-links a. */
    .faq-item p a,
    .eco li a {
      position: relative;
      color: var(--purple-light);
      transition: color .2s ease;
    }

    .faq-item p a::after,
    .eco li a::after {
      content: "";
      position: absolute;
      left: 0;
      bottom: -2px;
      width: 100%;
      height: 1px;
      background: linear-gradient(90deg, var(--purple), var(--blue));
      transform: scaleX(0);
      transform-origin: left;
      transition: transform .25s ease;
    }

    .faq-item p a:hover,
    .eco li a:hover {
      color: var(--text);
    }

    .faq-item p a:hover::after,
    .eco li a:hover::after {
      transform: scaleX(1);
    }

    /* =========================================================
       CONTACT
    ========================================================= */

    .contact {
      display:
        grid;

      grid-template-columns:
        1fr 1fr;

      gap:
        70px;

      align-items:
        start;
    }

    .contact h2 {
      font-size:
        clamp(
          2.7rem,
          5vw,
          5rem
        );

      line-height:
        .95;

      letter-spacing:
        -.065em;
    }

    .contact-copy {
      max-width:
        540px;

      margin-top:
        22px;

      color:
        var(--muted);

      line-height:
        1.8;
    }

    .contact-card {
      padding:
        32px;

      border:
        1px solid
        var(--border);

      border-radius:
        22px;

      background:
        rgba(255,255,255,.025);

      position: relative;
      overflow: hidden;
      transition: transform .3s ease, border-color .3s ease;
    }

    .contact-card:hover {
      transform: translateY(-3px);
      border-color: var(--border-hover);
    }

    .form-group {
      margin-bottom:
        16px;
    }

    label {
      display:
        block;

      margin-bottom:
        7px;

      color:
        #b8c0ce;

      font-size:
        .74rem;

      font-weight:
        700;
    }

    .required-mark {
      color: var(--red, #ff5c7a);
    }

    input,
    textarea,
    select {
      width:
        100%;

      padding:
        13px 14px;

      border:
        1px solid
        var(--border);

      border-radius:
        10px;

      outline:
        none;

      background:
        rgba(255,255,255,.035);

      color:
        white;

      transition:
        border-color .2s ease,
        box-shadow .2s ease;
    }

    input:focus-visible,
    textarea:focus-visible,
    select:focus-visible {
      border-color:
        rgba(130,87,255,.65);

      box-shadow:
        0 0 0 3px rgba(130,87,255,.18);
    }

    .option-card:has(input:focus-visible) {
      outline: 2px solid var(--purple-light);
      outline-offset: 2px;
    }

    textarea {
      min-height:
        125px;

      resize:
        vertical;
    }

    select {
      appearance: none;
      -webkit-appearance: none;
      -moz-appearance: none;

      padding-right: 40px;
      cursor: pointer;

      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23929aaa' stroke-width='1.6' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
      background-repeat: no-repeat;
      background-position: right 14px center;
      background-size: 12px;
    }

    select option {
      background: var(--black-2);
      color: white;
    }

    .submit {
      width:
        100%;

      border:
        0;

      cursor:
        pointer;
    }

    .submit:disabled {
      opacity: .6;
      cursor: not-allowed;
    }

    .form-status {
      display: none;

      padding: 12px 14px;

      border-radius: 10px;

      font-size: .84rem;

      margin-bottom: 16px;
    }

    .form-status.visible {
      display: block;
    }

    .form-status.success {
      background: rgba(62,227,161,.1);
      border: 1px solid rgba(62,227,161,.3);
      color: #a8f2d4;
    }

    .form-status.error {
      background: rgba(255,92,122,.1);
      border: 1px solid rgba(255,92,122,.3);
      color: #ffb1c0;
    }

    /* =========================================================
       FOOTER
    ========================================================= */

    footer {
      padding:
        35px 0
        45px;

      border-top:
        1px solid
        var(--border);

      color:
        #5e6675;

      font-size:
        .73rem;
    }

    .footer-inner {
      display:
        flex;

      align-items:
        center;

      justify-content:
        space-between;

      gap:
        20px;
    }

    .footer-logo img {
      width:
        125px;

      opacity:
        .72;
    }

    .footer-login {
      color: var(--muted-2) !important;
      font-size: .72rem;
      transition: color .2s ease;
    }

    .footer-login:hover {
      color: var(--text) !important;
    }

    /* =========================================================
       DECORATIVE GRAPHICS — ambient section glows
       Additive layer only: extends sections that already exist
       (some styled here, some styled in a page's own inline
       <style> block) with the same blurred-orb visual language
       already established by .hero::before / .hero::after.
       Kept subtle (low opacity, heavy blur) so text stays legible.
    ========================================================= */

    #solutions,
    #catalog,
    .lifecycle-section,
    #industries,
    .impact-section,
    #process,
    #faq,
    #contact,
    #security,
    .philosophy {
      position: relative;
      overflow: hidden;
    }

    #solutions::before,
    #catalog::before,
    .lifecycle-section::before,
    #industries::before,
    .impact-section::before,
    #process::before,
    #faq::before,
    #contact::before,
    #security::before,
    .philosophy::before,
    .philosophy::after {
      content: "";
      position: absolute;
      border-radius: 50%;
      filter: blur(100px);
      pointer-events: none;
      z-index: 0;
    }

    #solutions::before {
      width: 480px;
      height: 480px;
      top: -160px;
      right: -120px;
      opacity: .3;
      background: radial-gradient(circle, rgba(130,87,255,.15), transparent 65%);
      animation: drift 23s ease-in-out infinite;
      animation-delay: .8s;
    }

    #catalog::before {
      width: 440px;
      height: 440px;
      bottom: -180px;
      left: -120px;
      opacity: .32;
      background: radial-gradient(circle, rgba(53,200,255,.14), transparent 65%);
      animation: drift 20s ease-in-out infinite;
      animation-delay: 2.4s;
    }

    .lifecycle-section::before {
      width: 420px;
      height: 420px;
      top: -160px;
      right: -100px;
      opacity: .28;
      background: radial-gradient(circle, rgba(62,227,161,.14), transparent 65%);
      animation: drift 24s ease-in-out infinite;
      animation-delay: 1.2s;
    }

    #industries::before {
      width: 520px;
      height: 520px;
      top: -180px;
      right: -140px;
      opacity: .5;
      background: radial-gradient(circle, rgba(53,200,255,.16), transparent 65%);
      animation: drift 20s ease-in-out infinite;
    }

    .impact-section::before {
      width: 460px;
      height: 460px;
      bottom: -200px;
      left: -120px;
      opacity: .45;
      background: radial-gradient(circle, rgba(130,87,255,.14), transparent 65%);
      animation: drift 24s ease-in-out infinite;
      animation-delay: 2s;
    }

    #process::before {
      width: 500px;
      height: 500px;
      top: -180px;
      left: calc(50% - 250px);
      opacity: .35;
      background: radial-gradient(circle, rgba(62,227,161,.13), transparent 65%);
      animation: drift 26s ease-in-out infinite;
    }

    #faq::before {
      width: 420px;
      height: 420px;
      top: -140px;
      right: -100px;
      opacity: .4;
      background: radial-gradient(circle, rgba(130,87,255,.15), transparent 65%);
      animation: drift 22s ease-in-out infinite;
      animation-delay: 3s;
    }

    #contact::before {
      width: 480px;
      height: 480px;
      bottom: -220px;
      right: -160px;
      opacity: .4;
      background: radial-gradient(circle, rgba(53,200,255,.15), transparent 65%);
      animation: drift 21s ease-in-out infinite;
    }

    #security::before {
      width: 460px;
      height: 460px;
      top: -180px;
      left: -140px;
      opacity: .35;
      background: radial-gradient(circle, rgba(130,87,255,.13), transparent 65%);
      animation: drift 25s ease-in-out infinite;
      animation-delay: 1.5s;
    }

    .philosophy::before {
      width: 560px;
      height: 560px;
      top: -220px;
      left: -180px;
      opacity: .38;
      background: radial-gradient(circle, rgba(130,87,255,.2), transparent 65%);
      animation: drift 19s ease-in-out infinite;
    }

    .philosophy::after {
      width: 480px;
      height: 480px;
      bottom: -220px;
      right: -160px;
      opacity: .32;
      background: radial-gradient(circle, rgba(53,200,255,.16), transparent 65%);
      animation: drift 23s ease-in-out infinite;
      animation-delay: 4s;
    }

    #solutions .container,
    #catalog .container,
    .lifecycle-section .container,
    #industries .container,
    .impact-section .container,
    #process .container,
    #faq .container,
    #contact .container,
    #security .container,
    .philosophy .container {
      position: relative;
      z-index: 1;
    }

    /* Dot-grid texture over the industries section — a second,
       section-scoped variation on the body-wide line grid. */
    #industries::after {
      content: "";
      position: absolute;
      inset: 0;
      background-image: radial-gradient(rgba(255,255,255,.05) 1px, transparent 1px);
      background-size: 26px 26px;
      mask-image: radial-gradient(circle at 85% 0%, black, transparent 55%);
      -webkit-mask-image: radial-gradient(circle at 85% 0%, black, transparent 55%);
      pointer-events: none;
      z-index: 0;
    }

    /* Dot-grid texture over the services/catalog section — mirrored
       corner from the industries variant above, for alternating
       section-to-section rhythm rather than repeating the same
       placement everywhere. */
    #catalog::after {
      content: "";
      position: absolute;
      inset: 0;
      background-image: radial-gradient(rgba(255,255,255,.045) 1px, transparent 1px);
      background-size: 26px 26px;
      mask-image: radial-gradient(circle at 10% 100%, black, transparent 55%);
      -webkit-mask-image: radial-gradient(circle at 10% 100%, black, transparent 55%);
      pointer-events: none;
      z-index: 0;
    }

    /* Abstract 8-node connector graphic behind the "technology
       ecosystem" section — geometric only, hand-authored inline SVG.
       Echoes the eight lifecycle stages already named in that
       section's copy (strategy, architecture, implementation,
       security, automation, management, optimization, growth)
       as an abstract shape instead of repeating them as text.
       Faded out to the right so it reads as ambient texture. */
    .lifecycle-section::after {
      content: "";
      position: absolute;
      inset: 0;
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='620' height='160' viewBox='0 0 620 160'%3E%3Cg fill='none' stroke='%238257ff' stroke-opacity='0.35' stroke-width='1'%3E%3Cline x1='30' y1='110' x2='110' y2='60'/%3E%3Cline x1='110' y1='60' x2='190' y2='120'/%3E%3Cline x1='190' y1='120' x2='270' y2='50'/%3E%3Cline x1='270' y1='50' x2='350' y2='100'/%3E%3Cline x1='350' y1='100' x2='430' y2='45'/%3E%3Cline x1='430' y1='45' x2='510' y2='105'/%3E%3Cline x1='510' y1='105' x2='590' y2='55'/%3E%3C/g%3E%3Cg%3E%3Ccircle cx='30' cy='110' r='5' fill='%238257ff'/%3E%3Ccircle cx='110' cy='60' r='4' fill='%2335c8ff'/%3E%3Ccircle cx='190' cy='120' r='4' fill='%233ee3a1'/%3E%3Ccircle cx='270' cy='50' r='4' fill='%23ffb347'/%3E%3Ccircle cx='350' cy='100' r='5' fill='%238257ff'/%3E%3Ccircle cx='430' cy='45' r='4' fill='%2335c8ff'/%3E%3Ccircle cx='510' cy='105' r='4' fill='%233ee3a1'/%3E%3Ccircle cx='590' cy='55' r='4' fill='%23ffb347'/%3E%3C/g%3E%3C/svg%3E");
      background-repeat: no-repeat;
      background-position: bottom -10px left -20px;
      background-size: 640px 170px;
      opacity: .5;
      mask-image: linear-gradient(to right, black, transparent 65%);
      -webkit-mask-image: linear-gradient(to right, black, transparent 65%);
      pointer-events: none;
      z-index: 0;
    }

    /* Abstract node/connection-line graphic behind "How we work" —
       small hand-built inline SVG (a few hundred bytes, geometric
       only), faded out to the left so it reads as ambient texture
       rather than competing with the step cards. */
    #process::after {
      content: "";
      position: absolute;
      inset: 0;
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='220' viewBox='0 0 400 220'%3E%3Cg fill='none' stroke='%238257ff' stroke-opacity='0.35' stroke-width='1'%3E%3Cline x1='40' y1='40' x2='150' y2='95'/%3E%3Cline x1='150' y1='95' x2='270' y2='55'/%3E%3Cline x1='150' y1='95' x2='205' y2='170'/%3E%3Cline x1='270' y1='55' x2='365' y2='105'/%3E%3Cline x1='205' y1='170' x2='335' y2='180'/%3E%3Cline x1='270' y1='55' x2='205' y2='170'/%3E%3C/g%3E%3Cg fill='%2356e0ff'%3E%3Ccircle cx='40' cy='40' r='4'/%3E%3Ccircle cx='150' cy='95' r='5'/%3E%3Ccircle cx='270' cy='55' r='4'/%3E%3Ccircle cx='365' cy='105' r='4'/%3E%3Ccircle cx='205' cy='170' r='5'/%3E%3Ccircle cx='335' cy='180' r='4'/%3E%3C/g%3E%3C/svg%3E");
      background-repeat: no-repeat;
      background-position: top 10px right -20px;
      background-size: 420px 230px;
      opacity: .55;
      mask-image: linear-gradient(to left, black, transparent 65%);
      -webkit-mask-image: linear-gradient(to left, black, transparent 65%);
      pointer-events: none;
      z-index: 0;
    }

    /* =========================================================
       DECORATIVE GRAPHICS — card texture
       Additive gradient top-accent + corner highlight for every
       card-shaped component sitewide. Pure pseudo-elements, so
       this layers on top of each card's own base rules (whether
       those live here or in a page's inline <style> block)
       without overriding any existing property.
    ========================================================= */

    .pillar,
    .service,
    .faq-item,
    .contact-card,
    .industry-card,
    .stack-card,
    .eco {
      position: relative;
    }

    .service,
    .faq-item,
    .contact-card,
    .industry-card,
    .stack-card,
    .eco {
      overflow: hidden;
    }

    .pillar::before,
    .service::before,
    .faq-item::before,
    .contact-card::before,
    .industry-card::before,
    .stack-card::before,
    .eco::before {
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      height: 2px;
      background: linear-gradient(90deg, var(--purple), var(--blue), var(--green));
      opacity: 0;
      transform: scaleX(.6);
      transform-origin: left;
      transition: opacity .3s ease, transform .3s ease;
      pointer-events: none;
    }

    .pillar:hover::before,
    .service:hover::before,
    .faq-item:hover::before,
    .contact-card:hover::before,
    .industry-card:hover::before,
    .stack-card:hover::before,
    .eco:hover::before,
    .tier-card:hover::before,
    .timeline-step:hover::before,
    .wd-showcase-card:hover::before {
      opacity: 1;
      transform: scaleX(1);
    }

    .tier-card::before,
    .timeline-step::before,
    .wd-showcase-card::before {
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      height: 2px;
      background: linear-gradient(90deg, var(--purple), var(--blue), var(--green));
      opacity: 0;
      transform: scaleX(.6);
      transform-origin: left;
      transition: opacity .3s ease, transform .3s ease;
      pointer-events: none;
    }

    .pillar::after,
    .service::after {
      content: "";
      position: absolute;
      inset: 0;
      background: radial-gradient(circle at 85% 12%, rgba(255,255,255,.05), transparent 45%);
      opacity: 0;
      transition: opacity .35s ease;
      pointer-events: none;
    }

    .pillar:hover::after,
    .service:hover::after {
      opacity: 1;
    }

    /* =========================================================
       DECORATIVE GRAPHICS — icon treatment
       Adds depth (inner highlight, hover ring, ambient pulse) to
       the small icon tiles used across pillars, services, and
       industries, and boxes the previously-bare industry glyph
       into the same tile language as the other two.
    ========================================================= */

    .pillar-icon,
    .service-icon,
    .industry-icon {
      position: relative;
      box-shadow: inset 0 1px 0 rgba(255,255,255,.12);
    }

    /* .industry-icon starts as a bare glyph (styled inline on the
       page); these are new properties only — no existing property
       is overridden — so this turns it into a tile matching
       .pillar-icon / .service-icon without fighting that rule. */
    .industry-icon {
      width: 44px;
      height: 44px;
      display: grid;
      place-items: center;
      border-radius: 12px;
      background: rgba(53,200,255,.1);
      border: 1px solid rgba(53,200,255,.18);
    }

    .pillar-icon::before,
    .service-icon::before,
    .industry-icon::before {
      content: "";
      position: absolute;
      inset: -6px;
      border-radius: inherit;
      border: 1px solid rgba(130,87,255,.2);
      opacity: 0;
      transform: scale(.9);
      transition: opacity .3s ease, transform .3s ease;
      pointer-events: none;
    }

    .pillar:hover .pillar-icon::before,
    .service:hover .service-icon::before,
    .industry-card:hover .industry-icon::before {
      opacity: 1;
      transform: scale(1);
    }

    @keyframes icon-ring-pulse {
      0%, 100% { box-shadow: inset 0 1px 0 rgba(255,255,255,.12), 0 0 0 0 rgba(130,87,255,.28); }
      50% { box-shadow: inset 0 1px 0 rgba(255,255,255,.12), 0 0 0 7px rgba(130,87,255,0); }
    }

    .pillar-icon {
      animation: icon-ring-pulse 3.6s ease-in-out infinite;
    }

    .pillars .pillar:nth-child(2) .pillar-icon { animation-delay: .6s; }
    .pillars .pillar:nth-child(3) .pillar-icon { animation-delay: 1.2s; }
    .pillars .pillar:nth-child(4) .pillar-icon { animation-delay: 1.8s; }

    /* =========================================================
       DECORATIVE GRAPHICS — process steps + trust/platform badges
       Process numbers get a pill treatment (new properties only,
       matching the .industry-icon approach above) plus per-step
       accent color pulled from the same 4-color palette used by
       the services donut chart. Badge dots gain a slow glow pulse.
    ========================================================= */

    .process-number {
      display: inline-block;
      padding: 5px 11px;
      border-radius: 999px;
      background: rgba(130,87,255,.08);
      border: 1px solid rgba(130,87,255,.2);
    }

    .process-step:nth-child(1) .process-number {
      background: rgba(130,87,255,.08);
      border-color: rgba(130,87,255,.22);
    }

    .process-step:nth-child(3) .process-number {
      background: rgba(53,200,255,.08);
      border-color: rgba(53,200,255,.25);
    }

    .process-step:nth-child(5) .process-number {
      background: rgba(62,227,161,.08);
      border-color: rgba(62,227,161,.25);
    }

    .process-step:nth-child(7) .process-number {
      background: rgba(255,179,71,.08);
      border-color: rgba(255,179,71,.25);
    }

    .process-step {
      position: relative;
      transition: transform .3s ease, border-color .3s ease, box-shadow .3s ease;
    }

    .process-step:hover {
      transform: translateY(-5px);
      border-color: rgba(130,87,255,.3);
      box-shadow: 0 20px 45px rgba(130,87,255,.14);
    }

    .process-connector {
      text-shadow: 0 0 12px rgba(130,87,255,.4);
    }

    @keyframes badge-glow-pulse {
      0%, 100% { box-shadow: 0 0 12px rgba(130,87,255,.5); }
      50% { box-shadow: 0 0 20px rgba(130,87,255,.85); }
    }

    @keyframes trust-dot-pulse {
      0%, 100% { box-shadow: 0 0 8px rgba(62,227,161,.6); }
      50% { box-shadow: 0 0 14px rgba(62,227,161,.95); }
    }

    .trust-badge::before {
      animation: trust-dot-pulse 2.4s ease-in-out infinite;
    }

    .trust-badge.is-neutral::before {
      animation: badge-glow-pulse 2.4s ease-in-out infinite;
    }

    .nav-login::before {
      animation: trust-dot-pulse 2.4s ease-in-out infinite;
    }

    /* =========================================================
       RESPONSIVE
    ========================================================= */

    @media (max-width: 1050px) {

      .pillars {
        grid-template-columns:
          repeat(2, 1fr);
      }

      .ecosystem {
        grid-template-columns:
          repeat(2, 1fr);
      }

      .ai-list {
        grid-template-columns:
          repeat(2, 1fr);
      }

      .service-grid.cols-3 {
        grid-template-columns: repeat(2, 1fr);
      }
    }

    @media (max-width: 800px) {

      .impact-row {
        grid-template-columns: 1fr;
        gap: 12px;
      }

      .impact-arrow {
        transform: rotate(90deg);
      }

      .nav-toggle {
        display: flex;
      }

      .nav-links {
        display: none;

        position: absolute;
        top: 100%;
        left: 0;
        right: 0;

        margin-top: 14px;

        flex-direction: column;
        align-items: stretch;
        gap: 0;

        padding: 10px 16px;

        background: rgba(8,10,15,.97);
        backdrop-filter: blur(16px);

        border: 1px solid var(--border);
        border-radius: 16px;

        box-shadow: 0 30px 80px rgba(0,0,0,.5);
      }

      .nav-links.open {
        display: flex;
      }

      .nav-links a {
        padding: 14px 4px;
        border-bottom: 1px solid var(--border);
      }

      .nav-links a:last-child,
      .nav-links a.nav-cta {
        border-bottom: none;
      }

      .nav-login {
        border-left: none;
        padding-left: 4px;
      }

      .nav-links a.nav-cta {
        display: block;
        text-align: center;
        padding: 13px 20px;
        margin: 10px 0 6px;
        border-bottom: none;
      }

      .services-header {
        display:
          block;
      }

      .services-header .section-copy {
        margin-top:
          22px;
      }

      .stack-grid {
        grid-template-columns:
          1fr;
      }

      .contact {
        grid-template-columns:
          1fr;
      }

      .ai-box {
        padding:
          45px 30px;
      }

      /* Node/connection graphic behind "How we work" is tuned for
         the wide desktop row layout — once .process-steps stacks
         (rule lives in index.html's inline stylesheet), hide it so
         it doesn't float oddly behind the vertical cards. */
      #process::after,
      .lifecycle-section::after {
        display: none;
      }

      /* .system has a fixed min-height (330px desktop) that does NOT
         scale with viewport width — it only shrinks below 600px (see
         that query below). Between 601-800px (phones in landscape,
         phablets, small tablets, foldables) the decorative orbit
         rings stayed at full desktop scale (up to 600px diameter)
         inside that same ~330px-tall clipped box, so a large share of
         each ring got cropped away — the "badly cropped" pattern this
         graphic needs to avoid on any mobile-class viewport, not just
         narrow portrait ones. Applying the same tuned sizing here
         closes that gap; the 600px query below tunes it further for
         narrow phones. */
      .hero-system {
        margin-top: 55px;
      }

      .system {
        min-height: 250px;
      }

      .orbit.two {
        width: 320px;
        height: 320px;
      }

      .orbit.three {
        width: 450px;
        height: 450px;
      }

      .system-label {
        display: none;
      }
    }

    @media (max-width: 600px) {

      .container {
        width:
          calc(100% - 28px);
      }

      header {
        padding:
          20px 0;
      }

      .logo img {
        width:
          135px;
      }

      .hero {
        min-height:
          auto;

        padding:
          135px 0
          75px;
      }

      h1 {
        font-size:
          clamp(
            3.15rem,
            16vw,
            5rem
          );
      }

      .hero-copy {
        font-size:
          .95rem;
      }

      .hero-system {
        margin-top:
          55px;
      }

      .system {
        min-height:
          250px;
      }

      .orbit.two {
        width:
          320px;

        height:
          320px;
      }

      .orbit.three {
        width:
          450px;

        height:
          450px;
      }

      .system-label {
        display:
          none;
      }

      section {
        padding:
          85px 0;
      }

      .pillars,
      .ecosystem,
      .ai-list,
      .service-grid.cols-2,
      .service-grid.cols-3 {
        grid-template-columns:
          1fr;
      }

      .pillar {
        min-height:
          auto;
      }

      .service {
        min-height:
          auto;
      }

      .ai-box {
        border-radius:
          24px;

        padding:
          35px 23px;
      }

      .philosophy {
        padding:
          100px 15px;
      }

      .footer-inner {
        flex-direction:
          column;

        align-items:
          flex-start;
      }

      /* Scale down the ambient background glows on small screens —
         same graphic, smaller footprint so it stays a background
         accent rather than dominating a narrow viewport. */
      #solutions::before,
      #catalog::before,
      .lifecycle-section::before,
      #industries::before,
      .impact-section::before,
      #process::before,
      #faq::before,
      #contact::before,
      #security::before,
      .philosophy::before,
      .philosophy::after {
        width: 300px;
        height: 300px;
        filter: blur(70px);
      }

      #industries::after,
      #catalog::after {
        display: none;
      }

      /* .services-chart (donut + legend) previously had no explicit
         narrow-viewport rule at all — it only "worked" on phones
         because flexbox happened to wrap the legend under the donut
         once the row ran out of room. That's fragile (depends on
         exact font metrics/word lengths) rather than deliberate.
         Stack and center it on purpose, and let the legend use the
         full row width instead of shrinking to its own content
         width, so the count column lines up cleanly. */
      .services-chart {
        flex-direction: column;
        align-items: center;
        text-align: left;
      }

      .donut-legend {
        width: 100%;
        max-width: 320px;
      }
    }

    @media (prefers-reduced-motion: reduce) {

      *,
      *::before,
      *::after {
        animation:
          none !important;

        transition:
          none !important;
      }

      html {
        scroll-behavior:
          auto;
      }
    }

/* ===== Click-to-load video facade (assets/js/video-embed.js) ===== */

.video-embed-facade {
  position: relative;
  display: block;
  width: 100%;
  max-width: 720px;
  margin: 40px auto 0;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius, 24px);
  overflow: hidden;
  border: 1px solid var(--border);
  background: var(--black-2);
  cursor: pointer;
}

.video-embed-facade img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.video-embed-play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 76px;
  height: 76px;
  border-radius: 50%;
  background: rgba(5,6,9,.55);
  border: 1px solid rgba(255,255,255,.25);
  color: var(--white);
  font-size: 1.6rem;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-left: 4px;
  backdrop-filter: blur(4px);
  transition: background .15s, transform .15s;
}

.video-embed-facade:hover .video-embed-play,
.video-embed-facade:focus-visible .video-embed-play {
  background: var(--purple);
  transform: translate(-50%, -50%) scale(1.06);
}

.video-embed-facade:focus-visible {
  outline: 2px solid var(--purple-light);
  outline-offset: 3px;
}

.video-embed-facade.is-playing {
  cursor: default;
}

.video-embed-facade.is-playing iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}