:root {
      --bg: #000000;
      --bg-card: #0A0A0C;
      --bg-card-2: #101013;
      --ink: #FFFFFF;
      --muted: rgba(255,255,255,0.62);
      --muted-2: rgba(255,255,255,0.40);
      --line: rgba(255,255,255,0.08);
      --line-2: rgba(255,255,255,0.16);

      --blue: #3636FF;
      --blue-hot: #4E4EFF;
      --blue-ink: #FFFFFF;
      --mint: #2DE5A1;
      --mint-soft: rgba(45,229,161,0.14);

      --display: "Archivo", "Arial Black", system-ui, sans-serif;
      --sans: "Geist", system-ui, -apple-system, sans-serif;
      --mono: "JetBrains Mono", ui-monospace, Menlo, monospace;

      --ease: cubic-bezier(.2,.8,.2,1);
      --max: 1440px;
      --pad: 56px;
    }

    * { margin: 0; padding: 0; box-sizing: border-box; }
    html { scroll-behavior: smooth; }
    body {
      font-family: var(--sans);
      background: var(--bg);
      color: var(--ink);
      line-height: 1.5;
      overflow-x: hidden;
      -webkit-font-smoothing: antialiased;
      letter-spacing: -0.005em;
    }
    a { color: inherit; text-decoration: none; }
    button { font: inherit; cursor: pointer; border: 0; background: none; color: inherit; }
    img, svg { display: block; max-width: 100%; }
    ::selection { background: var(--blue); color: #fff; }

    .wrap { max-width: var(--max); margin: 0 auto; padding: 0 var(--pad); }

    /* ============== + CROSSHAIR FIELD ============== */
    .crosshair-field {
      position: absolute; inset: 0; pointer-events: none;
      background-image:
        url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160' viewBox='0 0 160 160'><g fill='none' stroke='rgba(255,255,255,0.16)' stroke-width='1'><path d='M80 70 v20 M70 80 h20'/></g></svg>");
      background-size: 160px 160px;
      mask-image: radial-gradient(ellipse at center, rgba(0,0,0,1) 30%, rgba(0,0,0,0) 80%);
      -webkit-mask-image: radial-gradient(ellipse at center, rgba(0,0,0,1) 30%, rgba(0,0,0,0) 80%);
    }

    /* ============== NAV ============== */
    .nav {
      position: fixed; top: 0; left: 0; right: 0; z-index: 100;
      display: flex; align-items: center; justify-content: space-between;
      padding: 22px var(--pad);
      transition: background 0.3s var(--ease), backdrop-filter 0.3s var(--ease), border-color 0.3s var(--ease);
      border-bottom: 1px solid transparent;
    }
    .nav.scrolled {
      background: rgba(0,0,0,0.72);
      backdrop-filter: blur(12px);
      -webkit-backdrop-filter: blur(12px);
      border-bottom-color: var(--line);
    }
    .brand {
      display: flex; align-items: center; gap: 10px;
      font-family: var(--display); font-weight: 800;
      font-size: 0.95rem; letter-spacing: 0.04em;
      text-transform: uppercase;
    }
    .brand-mark {
      display: inline-flex; align-items: center; gap: 2px;
      font-family: var(--mono); font-weight: 600;
    }
    .brand-mark::before { content: "≡"; }
    .brand-mark::after { content: "+"; color: var(--blue-hot); }

    .nav-links {
      display: flex; gap: 36px; font-size: 0.85rem;
      font-weight: 500; letter-spacing: 0.01em;
    }
    .nav-links a { color: var(--ink); opacity: 0.78; transition: opacity 0.2s; }
    .nav-links a:hover { opacity: 1; }

    .nav-tools { display: flex; align-items: center; gap: 22px; }
    .icon-btn {
      width: 36px; height: 36px; border-radius: 50%;
      display: grid; place-items: center;
      color: var(--ink); opacity: 0.82; transition: opacity 0.2s;
    }
    .icon-btn:hover { opacity: 1; }
    .icon-btn svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 1.6; }
    .menu-btn { display: flex; flex-direction: column; gap: 5px; width: 24px; height: 24px; padding: 0; }
    .menu-btn span { display: block; width: 100%; height: 1.5px; background: var(--ink); }

    /* ============== STICKY SIDE TAB ============== */
    .side-tab {
      position: fixed; right: 0; top: 50%;
      transform: translateY(-50%) rotate(180deg);
      writing-mode: vertical-rl;
      background: var(--blue);
      color: #fff;
      font-family: var(--display);
      font-weight: 800;
      font-size: 0.78rem;
      letter-spacing: 0.18em;
      text-transform: uppercase;
      padding: 22px 12px;
      border-radius: 4px 0 0 4px;
      z-index: 90;
      cursor: pointer;
      transition: background 0.2s, padding-right 0.2s;
    }
    .side-tab:hover { background: var(--blue-hot); padding-right: 16px; }

    /* ============== FLOATING CTA PILL ============== */
    .float-cta {
      position: fixed; bottom: 24px; left: 50%;
      transform: translateX(-50%);
      z-index: 90;
      background: #0a0a0c;
      border: 1px solid var(--line-2);
      border-radius: 100px;
      padding: 6px 6px 6px 14px;
      display: flex; align-items: center; gap: 18px;
      box-shadow: 0 24px 60px rgba(0,0,0,0.6), 0 4px 12px rgba(0,0,0,0.4);
    }
    .float-cta-thumb {
      width: 40px; height: 40px; border-radius: 100px;
      background: radial-gradient(circle at 30% 30%, #4a4a55 0%, #1a1a22 60%, #000 100%);
      flex-shrink: 0; position: relative; overflow: hidden;
    }
    .float-cta-thumb::after {
      content: "+"; position: absolute; inset: 0;
      display: grid; place-items: center;
      color: var(--blue-hot); font-family: var(--display);
      font-weight: 800; font-size: 1rem;
    }
    .float-cta-label {
      color: var(--blue-hot);
      font-family: var(--display); font-weight: 800;
      font-size: 0.92rem; letter-spacing: 0.04em;
      text-transform: uppercase;
      padding: 0 6px;
    }
    .float-cta-plus {
      width: 40px; height: 40px; border-radius: 50%;
      border: 1px solid var(--line-2);
      display: grid; place-items: center;
      transition: background 0.2s, border-color 0.2s;
    }
    .float-cta-plus svg { width: 14px; height: 14px; stroke: var(--ink); stroke-width: 2; fill: none; }
    .float-cta:hover .float-cta-plus { background: var(--blue); border-color: var(--blue); }

    /* ============== HERO ============== */
    .hero {
      position: relative;
      min-height: 100vh;
      padding: 140px var(--pad) 100px;
      display: flex; align-items: center;
      overflow: hidden;
    }
    .hero-grid {
      width: 100%;
      max-width: var(--max);
      margin: 0 auto;
      display: grid;
      grid-template-columns: 1.05fr 1fr;
      gap: 40px;
      align-items: center;
      position: relative; z-index: 2;
    }
    .hero-eyebrow {
      font-family: var(--mono);
      font-size: 0.72rem;
      letter-spacing: 0.18em;
      text-transform: uppercase;
      color: var(--muted);
      margin-bottom: 28px;
      display: inline-flex; align-items: center; gap: 14px;
    }
    .hero-eyebrow::before {
      content: ""; width: 28px; height: 1px; background: var(--mint);
    }
    .hero-title {
      font-family: var(--display);
      font-weight: 900;
      font-size: clamp(3.4rem, 7.2vw, 6.4rem);
      line-height: 0.92;
      letter-spacing: -0.025em;
      text-transform: uppercase;
      margin-bottom: 28px;
    }
    .hero-title .blue { color: var(--blue-hot); }
    .hero-lead {
      font-size: 1.05rem;
      color: var(--muted);
      max-width: 460px;
      margin-bottom: 36px;
      line-height: 1.6;
    }
    .hero-ctas { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; }
    .btn-primary {
      background: var(--blue);
      color: #fff;
      font-family: var(--display); font-weight: 700;
      font-size: 0.92rem; letter-spacing: 0.02em;
      padding: 16px 28px;
      border-radius: 4px;
      display: inline-flex; align-items: center; gap: 12px;
      transition: background 0.2s, transform 0.2s;
    }
    .btn-primary:hover { background: var(--blue-hot); transform: translateY(-1px); }
    .btn-primary svg { width: 18px; height: 18px; }
    .btn-ghost {
      color: var(--ink);
      font-family: var(--display); font-weight: 600;
      font-size: 0.92rem; letter-spacing: 0.02em;
      padding: 16px 22px;
      border-radius: 4px;
      border: 1px solid var(--line-2);
      transition: border-color 0.2s, background 0.2s;
    }
    .btn-ghost:hover { border-color: var(--mint); background: rgba(255,255,255,0.02); }

    /* hero stage — animated radar instrument */
    .hero-stage {
      position: relative;
      width: 100%;
      aspect-ratio: 1 / 1;
      max-width: 580px;
      margin-left: auto;
      justify-self: end;
    }
    .scope {
      position: absolute; inset: 0;
      display: grid; place-items: center;
    }
    .scope svg {
      width: 100%; height: 100%;
      overflow: visible;
    }
    .scope .ring {
      fill: none;
      stroke: rgba(255,255,255,0.18);
      stroke-dasharray: 2 4;
      transform-origin: 50% 50%;
    }
    .scope .ring.r1 { animation: spin 60s linear infinite; }
    .scope .ring.r2 { animation: spin 90s linear infinite reverse; }
    .scope .ring.r3 { animation: spin 120s linear infinite; }
    .scope .ring.r4 { animation: spin 160s linear infinite reverse; }
    .scope .ring.solid {
      stroke-dasharray: none;
      stroke: rgba(255,255,255,0.08);
    }
    .scope .ring.mint {
      stroke: var(--mint);
      stroke-dasharray: 1 12;
      opacity: 0.7;
    }

    /* radar sweep */
    .scope .sweep {
      transform-origin: 50% 50%;
      animation: spin 6s linear infinite;
    }
    .scope .sweep path { fill: url(#sweepGrad); }
    .scope .sweep line { stroke: var(--blue-hot); stroke-width: 1.2; opacity: 0.9; }

    /* axis lines */
    .scope .axis {
      stroke: rgba(255,255,255,0.12);
      stroke-width: 1;
      stroke-dasharray: 4 6;
    }

    /* center dot */
    .scope .core {
      fill: var(--blue-hot);
      animation: corePulse 2.4s ease-in-out infinite;
      transform-origin: 50% 50%;
    }
    .scope .coreRing {
      fill: none;
      stroke: var(--blue-hot);
      stroke-width: 1;
      transform-origin: 50% 50%;
      animation: ripple 2.4s ease-out infinite;
    }
    .scope .coreRing.b { animation-delay: 1.2s; }

    /* moving blip pings */
    .scope .blip {
      fill: var(--mint);
      animation: blipPulse 3s ease-in-out infinite;
    }
    .scope .blip.b2 { animation-delay: 1s; }
    .scope .blip.b3 { animation-delay: 2s; }

    /* tick labels around scope */
    .scope-label {
      position: absolute;
      font-family: var(--mono);
      font-size: 0.66rem;
      letter-spacing: 0.18em;
      text-transform: uppercase;
      color: var(--muted);
      white-space: nowrap;
    }
    .scope-label .dot {
      display: inline-block; width: 6px; height: 6px;
      border-radius: 50%;
      background: var(--mint);
      margin-right: 8px;
      vertical-align: 1px;
      animation: dotPulse 2s ease-in-out infinite;
    }
    .scope-label .val { color: var(--ink); font-weight: 500; }
    .scope-label.n  { top: 0;    left: 50%; transform: translate(-50%, -100%); }
    .scope-label.e  { top: 50%;  right: 0;  transform: translate(110%, -50%); }
    .scope-label.s  { bottom: 0; left: 50%; transform: translate(-50%, 120%); }
    .scope-label.w  { top: 50%;  left: 0;   transform: translate(-110%, -50%); }

    /* corner cross markers */
    .scope-cross {
      position: absolute;
      width: 20px; height: 20px;
      color: rgba(255,255,255,0.55);
    }
    .scope-cross::before, .scope-cross::after {
      content: ""; position: absolute; background: currentColor;
    }
    .scope-cross::before { left: 50%; top: 0; width: 1px; height: 100%; transform: translateX(-50%); }
    .scope-cross::after  { top: 50%; left: 0; height: 1px; width: 100%; transform: translateY(-50%); }
    .scope-cross.tl { top: 4%;  left: 4%; }
    .scope-cross.tr { top: 4%;  right: 4%; }
    .scope-cross.bl { bottom: 4%; left: 4%; }
    .scope-cross.br { bottom: 4%; right: 4%; }

    /* live signal HUD overlay */
    .scope-hud {
      position: absolute;
      left: 50%; top: 50%;
      transform: translate(-50%, -50%);
      width: 38%;
      pointer-events: none;
      text-align: center;
      mix-blend-mode: screen;
    }
    .scope-hud .hud-num {
      font-family: var(--display);
      font-weight: 900;
      font-size: clamp(1.6rem, 3.4vw, 2.6rem);
      letter-spacing: -0.02em;
      color: #fff;
      line-height: 1;
    }
    .scope-hud .hud-num .pct { color: var(--blue-hot); font-size: 0.6em; vertical-align: top; margin-left: 4px; }
    .scope-hud .hud-lbl {
      font-family: var(--mono);
      font-size: 0.62rem;
      letter-spacing: 0.2em;
      text-transform: uppercase;
      color: var(--mint);
      margin-top: 10px;
    }
    .scope-hud .hud-bar {
      margin-top: 14px;
      height: 2px;
      background: rgba(255,255,255,0.08);
      position: relative; overflow: hidden;
      border-radius: 4px;
    }
    .scope-hud .hud-bar::after {
      content: "";
      position: absolute; inset: 0;
      width: 40%;
      background: linear-gradient(90deg, transparent, var(--blue-hot), transparent);
      animation: barScan 3.2s linear infinite;
    }

    /* live spark line on bottom */
    .scope-spark {
      position: absolute;
      left: 10%; right: 10%; bottom: 18%;
      height: 36px;
      pointer-events: none;
    }
    .scope-spark svg { width: 100%; height: 100%; overflow: visible; }
    .scope-spark .line {
      fill: none; stroke: var(--mint); stroke-width: 1.4;
      stroke-dasharray: 600;
      stroke-dashoffset: 600;
      animation: drawSpark 5s ease-in-out infinite alternate;
      filter: drop-shadow(0 0 6px rgba(45,229,161,0.5));
    }

    @keyframes spin { to { transform: rotate(360deg); } }
    @keyframes corePulse {
      0%, 100% { transform: scale(1); opacity: 1; }
      50%      { transform: scale(1.5); opacity: 0.8; }
    }
    @keyframes ripple {
      0%   { r: 6;  opacity: 0.8; }
      100% { r: 60; opacity: 0; }
    }
    @keyframes blipPulse {
      0%, 100% { opacity: 0.4; transform: scale(0.8); }
      50%      { opacity: 1;   transform: scale(1.2); }
    }
    @keyframes dotPulse {
      0%, 100% { opacity: 0.6; box-shadow: 0 0 0 0 rgba(45,229,161,0.5); }
      50%      { opacity: 1; box-shadow: 0 0 0 6px rgba(45,229,161,0); }
    }
    @keyframes barScan {
      0%   { transform: translateX(-100%); }
      100% { transform: translateX(250%); }
    }
    @keyframes drawSpark {
      0%   { stroke-dashoffset: 600; }
      100% { stroke-dashoffset: 0; }
    }

    /* ============== MARQUEE ============== */
    .marquee {
      border-top: 1px solid var(--line);
      border-bottom: 1px solid var(--line);
      padding: 26px 0;
      overflow: hidden;
      position: relative;
    }
    .marquee-track {
      display: flex; gap: 80px;
      white-space: nowrap;
      animation: marquee 50s linear infinite;
      font-family: var(--display); font-weight: 800;
      font-size: 2.2rem; letter-spacing: -0.01em;
      text-transform: uppercase;
      color: var(--ink);
    }
    .marquee-track span { display: inline-flex; align-items: center; gap: 80px; }
    .marquee-track span::after {
      content: "+";
      color: var(--blue-hot);
      font-weight: 800;
    }
    @keyframes marquee {
      0% { transform: translateX(0); }
      100% { transform: translateX(-50%); }
    }

    /* ============== SERVICE CARDS (full) ============== */
    .svc-grid {
      max-width: var(--max);
      margin: 0 auto;
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 16px;
    }
    .svc {
      background: var(--bg-card);
      border: 1px solid var(--line);
      border-radius: 20px;
      padding: 24px 24px 22px;
      display: flex; flex-direction: column;
      gap: 18px;
      min-height: 500px;
      transition: border-color 0.3s, background 0.3s, transform 0.3s;
      position: relative; overflow: hidden;
    }
    .svc:hover {
      border-color: rgba(54,54,255,0.5);
      background: var(--bg-card-2);
      transform: translateY(-4px);
    }
    .svc-chip {
      align-self: flex-start;
      font-family: var(--mono);
      font-size: 0.7rem;
      letter-spacing: 0.16em;
      text-transform: uppercase;
      color: var(--mint);
      background: var(--mint-soft);
      border: 1px solid rgba(45,229,161,0.32);
      padding: 6px 12px;
      border-radius: 100px;
      white-space: nowrap;
    }
    .svc-art {
      flex: 1;
      position: relative;
      min-height: 200px;
      display: grid; place-items: center;
      margin: 4px 0;
    }
    .svc-art::after {
      /* soft glow base */
      content: "";
      position: absolute;
      left: 18%; right: 18%; bottom: 6%;
      height: 22%;
      background: radial-gradient(ellipse, rgba(54,54,255,0.30), transparent 70%);
      filter: blur(14px);
      z-index: 0;
      pointer-events: none;
    }
    .svc-art > * { position: relative; z-index: 1; }
    .svc-title {
      font-family: var(--display);
      font-weight: 900;
      font-size: clamp(1.5rem, 1.8vw, 1.85rem);
      line-height: 0.98;
      letter-spacing: -0.02em;
      text-transform: uppercase;
    }
    .svc-desc {
      color: var(--muted);
      font-size: 0.95rem;
      line-height: 1.5;
      min-height: 4.5em;
    }
    .svc-cta {
      display: block;
      width: 100%;
      background: var(--blue);
      color: #fff;
      font-family: var(--display); font-weight: 700;
      font-size: 0.92rem; letter-spacing: 0.02em;
      padding: 14px 16px;
      border-radius: 10px;
      text-align: center;
      transition: background 0.2s;
      margin-top: 4px;
    }
    .svc-cta:hover { background: var(--blue-hot); }
    .svc-cta.ghost {
      background: transparent;
      border: 1px solid var(--line-2);
      color: var(--ink);
    }
    .svc-cta.ghost:hover { background: rgba(255,255,255,0.04); border-color: var(--mint); }
    .svc-cta svg {
      display: inline-block; vertical-align: -2px;
      width: 14px; height: 14px;
      margin-left: 6px;
    }

    /* === ART: Website Development — browser mock === */
    .art-browser {
      width: 80%;
      aspect-ratio: 4 / 3;
      background: linear-gradient(180deg, #1a1a22 0%, #0d0d14 100%);
      border-radius: 8px;
      border: 1px solid rgba(255,255,255,0.08);
      padding: 8px 10px;
      position: relative;
      box-shadow: 0 18px 40px rgba(54,54,255,0.18);
    }
    .art-browser-dots {
      display: flex; gap: 5px; margin-bottom: 12px;
    }
    .art-browser-dots i {
      width: 7px; height: 7px; border-radius: 50%;
      background: rgba(255,255,255,0.22);
      display: inline-block;
    }
    .art-browser-line {
      height: 5px; border-radius: 4px;
      background: rgba(255,255,255,0.14);
      margin: 6px 0;
    }
    .art-browser-line.short { width: 50%; }
    .art-browser-line.btn { background: var(--blue-hot); width: 32%; height: 10px; margin-top: 10px; }
    .art-browser-stamp {
      position: absolute;
      bottom: -22px; left: 50%; transform: translateX(-50%);
      font-family: var(--mono); font-size: 0.62rem;
      letter-spacing: 0.18em;
      color: var(--muted);
      text-transform: uppercase;
      white-space: nowrap;
    }

    /* === ART: Web Platforms — vial with label === */
    .art-vial {
      width: 38%;
      aspect-ratio: 2 / 5;
      position: relative;
      filter: drop-shadow(0 26px 30px rgba(54,54,255,0.30));
    }
    .art-vial .body {
      position: absolute;
      inset: 8% 0 0 0;
      background: linear-gradient(180deg, #c8caf2 0%, #8d91ff 35%, #5050ff 70%, #1b1bb0 100%);
      border-radius: 16% 16% 14% 14% / 4% 4% 3% 3%;
      box-shadow:
        inset -4px 0 8px rgba(0,0,0,0.35),
        inset 6px 0 6px rgba(255,255,255,0.22);
    }
    .art-vial .cap {
      position: absolute;
      top: 0; left: 24%; right: 24%; height: 14%;
      background: linear-gradient(180deg, #d4d6de 0%, #8a8d96 100%);
      border-radius: 4px 4px 2px 2px;
      box-shadow: inset 1px 1px 0 rgba(255,255,255,0.4), inset -1px -1px 0 rgba(0,0,0,0.35);
    }
    .art-vial .label {
      position: absolute;
      left: 50%; top: 50%; transform: translate(-50%, -50%);
      color: #fff;
      font-family: var(--display); font-weight: 800;
      font-size: clamp(0.9rem, 1.1vw, 1.1rem);
      letter-spacing: 0.04em;
    }

    /* === ART: Analytics — green vial with chart line === */
    .art-vial.green .body {
      background: linear-gradient(180deg, #c4f5dd 0%, #65e0a5 40%, #1eb37b 75%, #0a6a48 100%);
    }
    .art-vial.green ~ .scribble,
    .art-vial.green .scribble {
      position: absolute; left: 14%; right: 14%; top: 44%;
      height: 18%;
      pointer-events: none;
    }
    .art-vial.green .scribble svg { width: 100%; height: 100%; }
    .art-vial.green .scribble path {
      fill: none; stroke: #000; stroke-width: 2.4; stroke-linecap: round;
    }

    /* === ART: Visualization — bar chart in frame === */
    .art-bars {
      width: 78%;
      aspect-ratio: 4 / 3;
      background: linear-gradient(180deg, #0f0f18 0%, #060609 100%);
      border-radius: 10px;
      border: 1px solid rgba(54,54,255,0.55);
      box-shadow: 0 18px 40px rgba(54,54,255,0.2);
      padding: 18% 14% 12%;
      display: flex; align-items: flex-end; justify-content: space-around;
      gap: 8px;
    }
    .art-bars b {
      display: block;
      width: 12%;
      border-radius: 4px 4px 0 0;
      background: linear-gradient(180deg, #4040ff, #2020c8);
    }
    .art-bars b:nth-child(1) { height: 32%; }
    .art-bars b:nth-child(2) { height: 60%; background: linear-gradient(180deg, #4040ff, #2020c8); }
    .art-bars b:nth-child(3) { height: 86%; background: linear-gradient(180deg, #4be8a8, #1cb47a); }
    .art-bars b:nth-child(4) { height: 50%; background: linear-gradient(180deg, #b9b3ff, #6d65d6); }
    .art-bars b:nth-child(5) { height: 70%; background: linear-gradient(180deg, #f4f4f8, #b8b8c4); }

    /* === ART: Optimization — concentric target === */
    .art-target {
      width: 60%;
      aspect-ratio: 1 / 1;
      position: relative;
      display: grid; place-items: center;
    }
    .art-target svg {
      width: 100%; height: 100%; overflow: visible;
    }
    .art-target .crisp {
      stroke: var(--blue-hot);
      fill: none; stroke-width: 2;
    }
    .art-target .dashed {
      stroke: var(--mint);
      stroke-dasharray: 4 6;
      fill: none; stroke-width: 1.8;
    }
    .art-target .core {
      fill: #fff;
    }
    .art-target .tick {
      stroke: rgba(255,255,255,0.7); stroke-width: 1.4;
    }

    /* === ART: Automation — wavy flow lines === */
    .art-flow {
      width: 88%; height: 70%;
      position: relative;
      display: flex; flex-direction: column; gap: 4px;
      align-items: center;
      justify-content: center;
    }
    .art-flow .tag {
      font-family: var(--mono);
      font-size: 0.72rem;
      letter-spacing: 0.06em;
      color: var(--muted);
      margin-bottom: 4px;
    }
    .art-flow svg { width: 100%; height: 60%; }
    .art-flow .blue-line {
      fill: none; stroke: var(--blue-hot); stroke-width: 3; stroke-linecap: round;
    }
    .art-flow .mint-line {
      fill: none; stroke: var(--mint); stroke-width: 3; stroke-linecap: round;
    }
    .art-flow circle { fill: #fff; }

    /* === ART: Lifecycle — checklist === */
    .art-list {
      width: 72%;
      aspect-ratio: 4 / 3;
      background: linear-gradient(180deg, #14141a 0%, #0a0a10 100%);
      border-radius: 12px;
      border: 1px solid rgba(255,255,255,0.10);
      padding: 18px 18px;
      display: flex; flex-direction: column;
      gap: 12px;
      justify-content: center;
      box-shadow: 0 14px 30px rgba(0,0,0,0.5);
    }
    .art-list .row {
      display: flex; align-items: center; gap: 12px;
    }
    .art-list .row i {
      width: 12px; height: 12px; border-radius: 50%;
      flex-shrink: 0;
    }
    .art-list .row i.m { background: var(--mint); }
    .art-list .row i.b { background: var(--blue-hot); }
    .art-list .row i.g { background: rgba(255,255,255,0.25); }
    .art-list .row span {
      flex: 1; height: 6px;
      background: rgba(255,255,255,0.14);
      border-radius: 4px;
    }
    .art-list .row span.s2 { width: 70%; flex: none; }
    .art-list .row span.s3 { width: 50%; flex: none; }

    @media (max-width: 1180px) {
      .svc-grid { grid-template-columns: repeat(3, 1fr); }
    }
    @media (max-width: 900px) {
      .svc-grid { grid-template-columns: repeat(2, 1fr); }
      .svc { min-height: 440px; }
    }
    @media (max-width: 560px) {
      .svc-grid { grid-template-columns: 1fr; }
    }

    /* ============== BENTO — CAPABILITIES ============== */
    .section { padding: 110px var(--pad); position: relative; }
    .section-head {
      display: flex; justify-content: space-between; align-items: flex-end;
      gap: 32px;
      margin-bottom: 48px;
      max-width: var(--max); margin-left: auto; margin-right: auto;
    }
    .section-head .left { max-width: 720px; }
    .eyebrow {
      font-family: var(--mono);
      font-size: 0.72rem;
      letter-spacing: 0.18em;
      text-transform: uppercase;
      color: var(--muted);
      display: inline-flex; align-items: center; gap: 14px;
      margin-bottom: 22px;
    }
    .eyebrow::before {
      content: ""; width: 28px; height: 1px; background: var(--mint);
    }
    .section-title {
      font-family: var(--display);
      font-weight: 900;
      font-size: clamp(2.4rem, 4.4vw, 3.6rem);
      line-height: 0.96;
      letter-spacing: -0.02em;
      text-transform: uppercase;
    }
    .section-title .mute { color: var(--muted); }
    .section-title .blue { color: var(--blue-hot); }
    .section-sub {
      color: var(--muted);
      max-width: 380px;
      font-size: 0.98rem;
      line-height: 1.55;
    }

    .bento {
      max-width: var(--max);
      margin: 0 auto;
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 14px;
    }
    .bento .tile {
      background: var(--bg-card);
      border: 1px solid var(--line);
      border-radius: 18px;
      padding: 32px;
      min-height: 290px;
      display: flex; flex-direction: column;
      justify-content: space-between;
      transition: border-color 0.3s, background 0.3s, transform 0.3s;
      position: relative; overflow: hidden;
    }
    .bento .tile:hover {
      border-color: rgba(54,54,255,0.55);
      background: var(--bg-card-2);
      transform: translateY(-3px);
    }
    .tile-icon { width: 110px; height: 110px; opacity: 0.92; }
    .tile-icon svg { width: 100%; height: 100%; stroke: #fff; fill: none; stroke-width: 1; }
    .tile-meta {
      font-family: var(--mono);
      font-size: 0.72rem;
      letter-spacing: 0.15em;
      text-transform: uppercase;
      color: var(--muted);
    }
    .tile-label {
      font-family: var(--display);
      font-weight: 900;
      font-size: clamp(2rem, 3vw, 2.6rem);
      line-height: 0.95;
      letter-spacing: -0.02em;
      text-transform: uppercase;
      margin-top: 6px;
    }
    .tile.wide { grid-column: span 2; min-height: 290px; flex-direction: row; align-items: center; gap: 30px; }
    .tile.wide .tile-icon { width: 140px; height: 140px; flex-shrink: 0; }
    .tile.wide .tile-body { flex: 1; }
    .tile.product {
      background:
        radial-gradient(ellipse at 80% 50%, rgba(54,54,255,0.16) 0%, transparent 50%),
        var(--bg-card);
      align-items: stretch;
    }
    .tile.product .tile-body { z-index: 1; }
    .tile-product-art {
      position: absolute;
      right: -10%;
      bottom: -8%;
      width: 70%;
      height: 95%;
      pointer-events: none;
    }
    .tile-product-art .vial {
      position: absolute; right: 14%; bottom: 8%;
      width: 60%; aspect-ratio: 2 / 5;
      background: linear-gradient(180deg, #d8dade 0%, #a4a8b1 35%, #71747c 65%, #2a2c33 100%);
      border-radius: 18% 18% 16% 16% / 6% 6% 4% 4%;
      box-shadow:
        inset -6px 0 8px rgba(0,0,0,0.35),
        inset 8px 0 8px rgba(255,255,255,0.18),
        0 40px 60px rgba(54,54,255,0.2);
    }
    .tile-product-art .vial::before {
      content: ""; position: absolute;
      left: 0; right: 0; bottom: 0;
      height: 28%;
      background:
        linear-gradient(180deg, transparent 0%, rgba(45,229,161,0.45) 35%, rgba(54,54,255,0.5) 65%, rgba(220,80,180,0.35) 100%);
      filter: blur(6px);
      border-radius: 16% 16% 16% 16% / 30% 30% 60% 60%;
      mix-blend-mode: screen;
    }

    /* ============== STACK / PLANS ============== */
    .plans-section {
      padding: 110px var(--pad);
      background: var(--bg);
      position: relative;
    }
    .plans-grid {
      max-width: var(--max);
      margin: 0 auto;
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 80px;
      align-items: center;
    }
    .plans-stage {
      position: relative;
      aspect-ratio: 1 / 1.05;
      max-width: 520px;
    }
    .plans-stage .stage-target {
      position: absolute; inset: 0; display: grid; place-items: center;
    }
    .plans-stage .stage-target svg {
      width: 100%; height: 100%; overflow: visible;
    }
    .plans-stage .stage-target circle {
      fill: none; stroke: rgba(255,255,255,0.12); stroke-dasharray: 1.8 4;
    }
    .plans-stage .stage-mock {
      position: absolute; left: 50%; top: 50%;
      width: 56%; aspect-ratio: 9 / 16;
      transform: translate(-50%, -50%);
      background: linear-gradient(180deg, #1c1c22 0%, #0d0d12 60%, #050507 100%);
      border-radius: 16px;
      border: 1px solid rgba(255,255,255,0.06);
      box-shadow: 0 40px 100px rgba(0,0,0,0.7);
      overflow: hidden;
    }
    .plans-stage .stage-mock::before {
      content: ""; position: absolute; inset: auto 0 0 0; height: 42%;
      background:
        linear-gradient(180deg, transparent 0%, rgba(45,229,161,0.22) 40%, rgba(54,54,255,0.36) 70%, rgba(199,87,255,0.22) 100%);
      filter: blur(8px);
    }
    .plans-stage .stage-mock-name {
      position: absolute; left: 14px; right: 14px; top: 38%;
      color: var(--blue-hot);
      font-family: var(--sans); font-weight: 500;
      font-size: 1.1rem;
      border-bottom: 1px solid var(--blue-hot);
      padding-bottom: 6px;
    }
    .plans-stage .stage-mock-meta {
      position: absolute; left: 14px; right: 14px; bottom: 26%;
      display: flex; justify-content: space-between;
      color: var(--blue-hot);
      font-family: var(--mono);
      font-size: 0.6rem;
      letter-spacing: 0.15em;
      text-transform: uppercase;
    }
    .plans-stage .stage-mock-plus {
      position: absolute; top: 14px; left: 14px;
      color: var(--blue-hot); font-size: 1.2rem;
    }

    .plans-card {
      background: var(--bg-card);
      border: 1px solid var(--line);
      border-radius: 18px;
      padding: 18px;
    }
    .plan {
      display: flex; align-items: center; gap: 18px;
      padding: 22px;
      border: 1px solid transparent;
      border-radius: 12px;
      cursor: pointer;
      transition: border-color 0.2s, background 0.2s;
    }
    .plan + .plan { margin-top: 4px; }
    .plan:hover { background: rgba(255,255,255,0.02); }
    .plan.active {
      border-color: var(--mint);
      background: rgba(255,255,255,0.02);
    }
    .plan-radio {
      width: 22px; height: 22px;
      border-radius: 50%;
      border: 2px solid var(--line-2);
      flex-shrink: 0;
      display: grid; place-items: center;
      transition: border-color 0.2s;
    }
    .plan-radio::after {
      content: ""; width: 10px; height: 10px;
      border-radius: 50%; background: var(--mint);
      opacity: 0; transition: opacity 0.2s;
    }
    .plan.active .plan-radio { border-color: var(--mint); }
    .plan.active .plan-radio::after { opacity: 1; }
    .plan-body { flex: 1; }
    .plan-name {
      font-family: var(--display); font-weight: 700;
      font-size: 1.05rem; letter-spacing: 0.01em;
    }
    .plan-save {
      color: var(--mint);
      font-family: var(--mono); font-size: 0.72rem;
      letter-spacing: 0.12em; text-transform: uppercase;
      margin-top: 4px;
    }
    .plan-best {
      display: inline-block; margin-left: 8px;
      background: var(--mint-soft);
      color: var(--mint);
      border-radius: 4px;
      font-family: var(--mono); font-size: 0.6rem;
      letter-spacing: 0.16em; text-transform: uppercase;
      padding: 3px 7px;
      vertical-align: middle;
    }
    .plan-price {
      text-align: right;
      font-family: var(--display); font-weight: 700;
      font-size: 1.05rem;
    }
    .plan-strike {
      display: block;
      color: var(--muted-2);
      font-family: var(--mono); font-size: 0.75rem;
      text-decoration: line-through;
      font-weight: 400;
    }
    .plans-cta {
      display: block; width: 100%;
      margin-top: 8px;
      background: var(--blue);
      color: #fff;
      font-family: var(--display); font-weight: 700;
      font-size: 0.95rem; letter-spacing: 0.02em;
      padding: 18px;
      border-radius: 10px;
      transition: background 0.2s;
    }
    .plans-cta:hover { background: var(--blue-hot); }

    /* ============== METHOD PILLARS ============== */
    .pillars-section { padding: 110px var(--pad); }
    .pillars-grid {
      max-width: var(--max);
      margin: 0 auto;
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 14px;
    }
    .pillar {
      background: var(--bg-card);
      border: 1px solid var(--line);
      border-radius: 18px;
      padding: 32px;
      min-height: 240px;
      display: flex; flex-direction: column;
      justify-content: space-between;
      transition: border-color 0.3s, background 0.3s;
    }
    .pillar:hover { border-color: rgba(54,54,255,0.4); background: var(--bg-card-2); }
    .pillar.wide { grid-column: span 2; flex-direction: row; align-items: center; gap: 26px; }
    .pillar-icon { width: 96px; height: 96px; }
    .pillar-icon svg { width: 100%; height: 100%; stroke: #fff; fill: none; stroke-width: 1; }
    .pillar-meta {
      font-family: var(--mono); font-size: 0.7rem;
      letter-spacing: 0.15em; text-transform: uppercase;
      color: var(--muted);
    }
    .pillar-name {
      font-family: var(--display); font-weight: 900;
      font-size: 1.9rem; letter-spacing: -0.02em;
      text-transform: uppercase;
      margin-top: 4px;
    }

    /* ============== METRICS STRIP ============== */
    .metrics {
      max-width: var(--max);
      margin: 0 auto;
      padding: 64px var(--pad);
      border-top: 1px solid var(--line);
      border-bottom: 1px solid var(--line);
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 30px;
    }
    .metric .num {
      font-family: var(--display); font-weight: 900;
      font-size: clamp(2.4rem, 4vw, 3.4rem);
      line-height: 1;
      letter-spacing: -0.03em;
    }
    .metric .num .pct {
      color: var(--blue-hot);
      font-size: 0.55em; vertical-align: top;
      margin-left: 4px;
    }
    .metric .lbl {
      font-family: var(--mono); font-size: 0.72rem;
      letter-spacing: 0.16em; text-transform: uppercase;
      color: var(--muted);
      margin-top: 12px;
      max-width: 240px;
      line-height: 1.5;
    }
    .metric .lbl .mint { color: var(--mint); }

    /* ============== BLUE BAND CTA ============== */
    .band-cta {
      padding: 60px var(--pad);
    }
    .band-cta-inner {
      max-width: var(--max);
      margin: 0 auto;
      background: var(--blue);
      border-radius: 14px;
      display: grid;
      grid-template-columns: 1fr 1.1fr;
      gap: 0;
      overflow: hidden;
      position: relative;
    }
    .band-cta-left { padding: 56px 48px; }
    .band-cta-title {
      font-family: var(--display); font-weight: 900;
      font-size: clamp(2rem, 3vw, 2.6rem);
      line-height: 0.96;
      letter-spacing: -0.02em;
      text-transform: uppercase;
    }
    .band-cta-sub {
      color: rgba(255,255,255,0.85);
      font-size: 1rem; margin-top: 16px;
      max-width: 460px;
    }
    .band-cta-form {
      display: flex; gap: 8px; margin-top: 32px;
      max-width: 460px;
    }
    .band-cta-form input {
      flex: 1; background: rgba(0,0,0,0.18);
      border: 1px solid rgba(255,255,255,0.22);
      color: #fff;
      padding: 16px 18px;
      border-radius: 8px;
      font: inherit;
      outline: none;
    }
    .band-cta-form input::placeholder { color: rgba(255,255,255,0.6); }
    .band-cta-form button {
      background: #fff;
      color: var(--blue);
      font-family: var(--display); font-weight: 700;
      padding: 0 24px;
      border-radius: 8px;
      letter-spacing: 0.02em;
    }
    .band-cta-form button:hover { background: rgba(255,255,255,0.92); }
    .band-cta-right {
      position: relative;
      min-height: 320px;
      background: linear-gradient(135deg, #2828c4 0%, #1414a0 100%);
      overflow: hidden;
    }
    .band-cta-right::before {
      /* placeholder: striped abstract */
      content: "";
      position: absolute; inset: 0;
      background:
        repeating-linear-gradient(90deg, rgba(255,255,255,0.04) 0 1px, transparent 1px 24px),
        radial-gradient(ellipse at 30% 60%, rgba(255,255,255,0.18), transparent 60%),
        radial-gradient(ellipse at 75% 40%, rgba(255,255,255,0.10), transparent 60%);
      mix-blend-mode: overlay;
    }
    .band-cta-right::after {
      content: "[ team imagery placeholder — drop a hero photo here ]";
      position: absolute; inset: 0;
      display: grid; place-items: center;
      color: rgba(255,255,255,0.7);
      font-family: var(--mono); font-size: 0.72rem;
      letter-spacing: 0.18em; text-transform: uppercase;
      text-align: center; padding: 24px;
    }

    /* ============== FOOTER ============== */
    .footer {
      padding: 90px var(--pad) 64px;
    }
    .footer-grid {
      max-width: var(--max);
      margin: 0 auto;
      display: grid;
      grid-template-columns: 1.6fr 1fr 1fr 1.2fr;
      gap: 48px;
      padding-bottom: 56px;
      border-bottom: 1px solid var(--line);
    }
    .footer-brand {
      font-family: var(--display); font-weight: 900;
      font-size: 1.4rem; letter-spacing: 0.04em;
      text-transform: uppercase;
      margin-bottom: 14px;
    }
    .footer-tag {
      color: var(--muted); font-size: 0.95rem;
      max-width: 320px;
      line-height: 1.55;
    }
    .footer-col h4 {
      font-family: var(--mono); font-size: 0.7rem;
      letter-spacing: 0.18em; text-transform: uppercase;
      color: var(--muted-2);
      margin-bottom: 16px;
      font-weight: 500;
    }
    .footer-col ul { list-style: none; display: flex; flex-direction: column; gap: 10px; }
    .footer-col a {
      font-size: 0.98rem; color: var(--ink); opacity: 0.85;
      transition: opacity 0.15s;
    }
    .footer-col a:hover { opacity: 1; color: var(--mint); }
    .footer-contact {
      font-family: var(--mono); font-size: 0.72rem;
      letter-spacing: 0.12em; line-height: 1.7;
      color: var(--muted);
    }
    .footer-contact strong {
      display: block; color: var(--ink); font-weight: 500;
      font-size: 0.92rem; margin-bottom: 8px;
      letter-spacing: 0.04em;
      font-family: var(--sans); text-transform: none;
    }
    .footer-meta {
      max-width: var(--max);
      margin: 32px auto 0;
      display: flex; justify-content: space-between; align-items: center;
      flex-wrap: wrap; gap: 20px;
      font-family: var(--mono); font-size: 0.7rem;
      letter-spacing: 0.14em; text-transform: uppercase;
      color: var(--muted-2);
    }
    .footer-meta .links { display: flex; gap: 28px; }
    .footer-meta a { color: var(--muted); transition: color 0.15s; }
    .footer-meta a:hover { color: var(--mint); }

    /* ============== MEGA MENU ============== */
    .mega {
      position: fixed; inset: 0; z-index: 200;
      background: #050507;
      transform: translateY(-101%);
      transition: transform 0.55s var(--ease);
      overflow-y: auto;
      pointer-events: none;
    }
    .mega.open { transform: translateY(0); pointer-events: auto; }

    .mega-top {
      display: flex; align-items: center; justify-content: space-between;
      padding: 22px var(--pad);
      border-bottom: 1px solid var(--line);
    }
    .mega-top .brand { color: var(--ink); }
    .mega-top-right { display: flex; align-items: center; gap: 14px; }
    .mega-cta {
      background: transparent;
      border: 1px solid var(--line-2);
      color: var(--ink);
      font-family: var(--display); font-weight: 600;
      font-size: 0.88rem; letter-spacing: 0.02em;
      padding: 12px 22px;
      border-radius: 4px;
      transition: background 0.2s, border-color 0.2s;
    }
    .mega-cta:hover { background: var(--blue); border-color: var(--blue); }
    .mega-search, .mega-close {
      width: 44px; height: 44px;
      border: 1px solid var(--line-2);
      border-radius: 4px;
      display: grid; place-items: center;
      transition: background 0.2s, border-color 0.2s;
    }
    .mega-search:hover, .mega-close:hover { background: rgba(255,255,255,0.04); border-color: var(--ink); }
    .mega-search svg, .mega-close svg { width: 16px; height: 16px; stroke: var(--ink); stroke-width: 1.6; fill: none; }
    .mega-close { background: var(--ink); border-color: var(--ink); }
    .mega-close:hover { background: rgba(255,255,255,0.88); }
    .mega-close svg { stroke: #000; }

    .mega-grid {
      max-width: 1440px;
      margin: 0 auto;
      padding: 56px var(--pad) 80px;
      display: grid;
      grid-template-columns: 1.1fr 1.6fr 1fr;
      gap: 56px;
    }

    .mega-col-head {
      display: flex; justify-content: space-between; align-items: center;
      padding-bottom: 18px;
      margin-bottom: 32px;
      border-bottom: 1px solid var(--line);
      font-family: var(--mono);
      font-size: 0.74rem;
      letter-spacing: 0.22em;
      text-transform: uppercase;
      color: var(--muted-2);
    }
    .mega-col-head a {
      color: var(--ink);
      text-decoration: underline;
      text-underline-offset: 6px;
      text-decoration-thickness: 1px;
      font-weight: 500;
    }
    .mega-col-head a::after { content: " ↗"; }

    /* nav column */
    .mega-nav {
      list-style: none;
      display: flex; flex-direction: column;
    }
    .mega-nav > li { padding: 6px 0; }
    .mega-nav .top-link,
    .mega-nav .sub-link {
      display: inline-flex;
      align-items: center;
      gap: 16px;
      font-family: var(--display);
      font-weight: 700;
      color: var(--ink);
      letter-spacing: -0.01em;
      transition: color 0.2s, transform 0.25s var(--ease);
      text-transform: none;
    }
    .mega-nav .top-link {
      font-size: clamp(1.5rem, 2.2vw, 2.1rem);
      line-height: 1.15;
      white-space: nowrap;
    }
    .mega-nav .sub-link {
      font-size: clamp(1.1rem, 1.4vw, 1.45rem);
      line-height: 1.5;
      color: var(--ink);
      padding-left: 8px;
      white-space: nowrap;
    }
    .mega-nav .sub-link::before {
      content: "↳";
      color: var(--muted-2);
      font-family: var(--mono); font-weight: 400;
      font-size: 0.95em;
    }
    .mega-nav .top-link:hover,
    .mega-nav .sub-link:hover {
      color: var(--mint);
      transform: translateX(4px);
    }
    .mega-nav .sub-link:hover::before { color: var(--mint); }

    /* news column */
    .mega-news {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 28px;
    }
    .news-card {
      display: flex; flex-direction: column; gap: 14px;
    }
    .news-meta {
      font-family: var(--mono);
      font-size: 0.7rem;
      letter-spacing: 0.18em;
      text-transform: uppercase;
      color: var(--muted-2);
    }
    .news-thumb {
      width: 100%; aspect-ratio: 4 / 3;
      border-radius: 4px;
      position: relative; overflow: hidden;
      background: var(--bg-card-2);
      border: 1px solid var(--line);
    }
    .news-thumb.a {
      background:
        radial-gradient(ellipse at 30% 30%, rgba(54,54,255,0.55), transparent 55%),
        radial-gradient(ellipse at 70% 80%, rgba(45,229,161,0.40), transparent 50%),
        linear-gradient(135deg, #0d0d1a 0%, #060611 100%);
    }
    .news-thumb.b {
      background:
        repeating-linear-gradient(90deg, rgba(255,255,255,0.05) 0 1px, transparent 1px 18px),
        repeating-linear-gradient(0deg, rgba(255,255,255,0.05) 0 1px, transparent 1px 18px),
        radial-gradient(ellipse at 60% 60%, rgba(54,54,255,0.5), transparent 60%),
        linear-gradient(180deg, #0a0a14 0%, #050507 100%);
    }
    .news-thumb::after {
      content: ""; position: absolute;
      inset: auto 14px 14px auto;
      width: 22px; height: 22px;
      background:
        linear-gradient(to right, currentColor 0 100%) center / 100% 1px no-repeat,
        linear-gradient(to bottom, currentColor 0 100%) center / 1px 100% no-repeat;
      color: rgba(255,255,255,0.6);
    }
    .news-title {
      font-family: var(--sans);
      font-weight: 600;
      font-size: 1.05rem;
      line-height: 1.35;
      color: var(--ink);
    }
    .news-body {
      font-size: 0.92rem;
      color: var(--muted);
      line-height: 1.55;
    }
    .news-link {
      font-size: 0.95rem;
      color: var(--ink);
      text-decoration: underline;
      text-underline-offset: 4px;
      margin-top: auto;
    }
    .news-link::before { content: "↳ "; color: var(--muted-2); }
    .news-link:hover { color: var(--mint); }

    /* offerings column */
    .mega-off-body {
      font-size: 1.05rem;
      line-height: 1.55;
      color: var(--ink);
      max-width: 320px;
      margin-bottom: 28px;
    }
    .mega-off-link {
      color: var(--ink);
      text-decoration: underline;
      text-underline-offset: 4px;
      font-size: 1rem;
    }
    .mega-off-link::before { content: "↳ "; color: var(--muted-2); }
    .mega-off-link:hover { color: var(--mint); }

    .mega-foot {
      max-width: 1440px;
      margin: 0 auto;
      padding: 24px var(--pad) 40px;
      display: flex; justify-content: space-between; align-items: center;
      flex-wrap: wrap; gap: 16px;
      border-top: 1px solid var(--line);
      font-family: var(--mono);
      font-size: 0.7rem;
      letter-spacing: 0.18em;
      text-transform: uppercase;
      color: var(--muted-2);
    }
    .mega-foot .ind { display: inline-flex; align-items: center; gap: 8px; }
    .mega-foot .ind::before {
      content: ""; width: 6px; height: 6px;
      border-radius: 50%; background: var(--mint);
      box-shadow: 0 0 0 0 rgba(45,229,161,0.6);
      animation: dotPulse 2s ease-in-out infinite;
    }

    /* stagger animation when menu opens */
    .mega-stagger { opacity: 0; transform: translateY(14px); transition: opacity 0.5s var(--ease), transform 0.5s var(--ease); }
    .mega.open .mega-stagger { opacity: 1; transform: none; }
    .mega.open .mega-stagger:nth-child(1) { transition-delay: 0.10s; }
    .mega.open .mega-stagger:nth-child(2) { transition-delay: 0.14s; }
    .mega.open .mega-stagger:nth-child(3) { transition-delay: 0.18s; }
    .mega.open .mega-stagger:nth-child(4) { transition-delay: 0.22s; }
    .mega.open .mega-stagger:nth-child(5) { transition-delay: 0.26s; }
    .mega.open .mega-stagger:nth-child(6) { transition-delay: 0.30s; }
    .mega.open .mega-stagger:nth-child(7) { transition-delay: 0.34s; }
    .mega.open .mega-stagger:nth-child(8) { transition-delay: 0.38s; }
    .mega.open .mega-stagger:nth-child(9) { transition-delay: 0.42s; }
    .mega.open .mega-stagger:nth-child(10) { transition-delay: 0.46s; }

    body.menu-open { overflow: hidden; }

    @media (max-width: 900px) {
      .mega-grid { grid-template-columns: 1fr; gap: 40px; padding: 32px var(--pad) 60px; }
      .mega-news { grid-template-columns: 1fr; }
      .mega-nav .top-link { font-size: 1.7rem; }
      .mega-nav .sub-link { font-size: 1.2rem; }
    }

    /* ============== REVEAL ============== */
    .reveal { opacity: 0; transform: translateY(28px); transition: opacity 0.7s var(--ease), transform 0.7s var(--ease); }
    .reveal.in { opacity: 1; transform: none; }

    /* ============== RESPONSIVE ============== */
    @media (max-width: 900px) {
      :root { --pad: 32px; }
      .hero-grid { grid-template-columns: 1fr; gap: 60px; }
      .hero-stage { margin: 0 auto; }
      .plans-grid { grid-template-columns: 1fr; gap: 40px; }
      .bento { grid-template-columns: repeat(2, 1fr); }
      .tile.wide { grid-column: span 2; }
      .pillars-grid { grid-template-columns: repeat(2, 1fr); }
      .pillar.wide { grid-column: span 2; }
      .metrics { grid-template-columns: repeat(2, 1fr); }
      .band-cta-inner { grid-template-columns: 1fr; }
      .footer-grid { grid-template-columns: 1fr 1fr; }
      .nav-links { display: none; }
    }
    @media (max-width: 640px) {
      :root { --pad: 22px; }
      .bento, .pillars-grid { grid-template-columns: 1fr; }
      .tile.wide, .pillar.wide { grid-column: span 1; flex-direction: column; align-items: flex-start; }
      .metrics { grid-template-columns: 1fr 1fr; }
      .footer-grid { grid-template-columns: 1fr; }
      .side-tab { display: none; }
      .float-cta-label { font-size: 0.78rem; }
      .marquee-track { font-size: 1.4rem; gap: 50px; }
      .marquee-track span { gap: 50px; }
    }

/* ============== POLISH PASS ============== */
/* Scroll progress bar */
.scroll-progress {
  position: fixed; top: 0; left: 0; right: 0;
  height: 2px;
  background: transparent;
  z-index: 300;
  pointer-events: none;
}
.scroll-progress .bar {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, var(--blue-hot), var(--mint));
  box-shadow: 0 0 8px rgba(54,54,255,0.6);
  transition: width 0.08s linear;
}

/* Email link styling */
.footer-contact a {
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-thickness: 1px;
  text-decoration-color: rgba(255,255,255,0.25);
  transition: color 0.2s, text-decoration-color 0.2s;
}
.footer-contact a:hover {
  color: var(--mint);
  text-decoration-color: var(--mint);
}

/* Copy toast */
.toast {
  position: fixed;
  left: 50%; bottom: 90px;
  transform: translateX(-50%) translateY(20px);
  background: rgba(10,10,12,0.92);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: var(--ink);
  border: 1px solid var(--mint);
  border-radius: 100px;
  padding: 12px 22px;
  font-family: var(--mono);
  font-size: 0.78rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  z-index: 250;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s, transform 0.3s cubic-bezier(.2,.8,.2,1);
}
.toast::before {
  content: "✓ ";
  color: var(--mint);
}
.toast.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* Mouse spotlight in hero — subtle */
.hero-spotlight, .svc-hero-spotlight {
  position: absolute;
  pointer-events: none;
  width: 480px; height: 480px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(54,54,255,0.12), transparent 65%);
  transform: translate(-50%, -50%);
  z-index: 1;
  opacity: 0;
  transition: opacity 0.6s;
  mix-blend-mode: screen;
}
.hero.spotlight-on .hero-spotlight,
.svc-hero.spotlight-on .svc-hero-spotlight { opacity: 1; }

/* Button arrow nudge on hover */
.btn-primary svg, .svc-cta { transition: background 0.2s, transform 0.2s; }
.btn-primary:hover svg { transform: translateX(4px); }

/* Side tab subtle attention pulse */
@keyframes side-tab-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(54,54,255,0.45); }
  50%      { box-shadow: 0 0 0 8px rgba(54,54,255,0); }
}
.side-tab { animation: side-tab-pulse 3s ease-in-out infinite; }

/* Float CTA subtle hover lift */
.float-cta { transition: transform 0.2s, box-shadow 0.2s; }
.float-cta:hover {
  transform: translateX(-50%) translateY(-3px);
  box-shadow: 0 30px 70px rgba(54,54,255,0.5), 0 8px 18px rgba(0,0,0,0.5);
}

/* Service card icon micro-tilt on hover */
.svc:hover .art-target, .svc:hover .art-flow,
.svc:hover .art-vial, .svc:hover .art-bars,
.svc:hover .art-browser, .svc:hover .art-list {
  transform: translateY(-3px) scale(1.03);
  transition: transform 0.4s cubic-bezier(.2,.8,.2,1);
}

/* Section reveal — make smoother for the deliverables/expect/pricing */
.deliv, .expect-card, .svc-plan, .pillar, .tile, .svc {
  transition:
    border-color 0.3s, background 0.3s,
    transform 0.35s cubic-bezier(.2,.8,.2,1),
    box-shadow 0.3s;
}
.deliv:hover, .expect-card:hover, .svc-plan:hover {
  box-shadow: 0 16px 40px rgba(0,0,0,0.4);
}

/* Marquee fade edges */
.marquee {
  mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%);
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%);
}

/* Nav link underline animation */
.nav-links a {
  position: relative;
  padding: 4px 0;
}
.nav-links a::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  background: var(--mint);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.3s cubic-bezier(.2,.8,.2,1);
}
.nav-links a:hover::after {
  transform: scaleX(1);
  transform-origin: left;
}

@media (prefers-reduced-motion: reduce) {
  .side-tab, .hero-spotlight, .svc-hero-spotlight,
  .scroll-progress .bar { animation: none !important; transition: none !important; }
}