.gradient-text {
      background: linear-gradient(
        90deg,
        var(--purple-300) 0%,
        var(--orange-300) 25%,
        #fbcfe8 50%,
        var(--orange-300) 75%,
        var(--purple-300) 100%
      );
      background-size: 200% auto;
      -webkit-background-clip: text; -webkit-text-fill-color: transparent;
      background-clip: text;
      animation: gradient-shimmer 8s ease-in-out infinite;
    }

    /* Premium: grain texture overlay */
    body::after {
      content: ''; position: fixed; inset: 0; z-index: 100;
      pointer-events: none; opacity: 0.035; mix-blend-mode: overlay;
      background-image: url("data:image/svg+xml;utf8,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' seed='5'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.9 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    }

    /* Premium: aurora drift background */
    .aurora {
      position: fixed; inset: 0; z-index: -30; pointer-events: none; overflow: hidden;
    }
    .aurora-blob {
      position: absolute; width: 600px; height: 600px; border-radius: 50%;
      filter: blur(120px); opacity: 0.25; will-change: transform;
    }
    .aurora-blob.a1 {
      background: radial-gradient(circle, rgba(139,92,246,0.8) 0%, transparent 70%);
      top: -200px; left: -100px;
      animation: aurora-drift-1 28s ease-in-out infinite;
    }
    .aurora-blob.a2 {
      background: radial-gradient(circle, rgba(249,115,22,0.55) 0%, transparent 70%);
      bottom: -200px; right: -100px;
      animation: aurora-drift-2 34s ease-in-out infinite;
    }
    .aurora-blob.a3 {
      background: radial-gradient(circle, rgba(139,92,246,0.35) 0%, transparent 70%);
      top: 40%; left: 50%;
      animation: aurora-drift-3 42s ease-in-out infinite;
    }

    /* ── Animations ── */
    @keyframes fade-up { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: translateY(0); } }
    @keyframes bounce-arrow { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(8px); } }
    @keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } }
    @keyframes aurora-drift-1 {
      0%, 100% { transform: translate(0, 0) scale(1); }
      33% { transform: translate(200px, 100px) scale(1.2); }
      66% { transform: translate(80px, 240px) scale(0.9); }
    }
    @keyframes aurora-drift-2 {
      0%, 100% { transform: translate(0, 0) scale(1); }
      50% { transform: translate(-180px, -120px) scale(1.15); }
    }
    @keyframes aurora-drift-3 {
      0%, 100% { transform: translate(-50%, -50%) scale(1); }
      50% { transform: translate(-30%, -70%) scale(1.3); }
    }
    @keyframes glow-border {
      0%, 100% { box-shadow: 0 0 0px rgba(249,115,22,0); border-color: var(--white-20); }
      50% { box-shadow: 0 0 30px rgba(168,85,247,0.3); border-color: rgba(168,85,247,0.4); }
    }
    @keyframes gradient-shimmer {
      0%, 100% { background-position: 0% 50%; }
      50% { background-position: 100% 50%; }
    }
    @keyframes price-glow {
      0%, 100% { text-shadow: 0 0 0 rgba(249,115,22,0); }
      50% { text-shadow: 0 0 24px rgba(249,115,22,0.45); }
    }
    @keyframes shine-sweep {
      0% { transform: translateX(-120%) skewX(-12deg); }
      100% { transform: translateX(220%) skewX(-12deg); }
    }
    @keyframes conic-spin {
      from { transform: rotate(0deg); }
      to { transform: rotate(360deg); }
    }

    /* Premium fade-in with subtle scale + longer cubic-bezier */
    .fade-in {
      opacity: 0; transform: translateY(32px) scale(0.98);
      transition: opacity 0.9s cubic-bezier(0.16, 1, 0.3, 1), transform 0.9s cubic-bezier(0.16, 1, 0.3, 1);
    }
    .fade-in.visible { opacity: 1; transform: translateY(0) scale(1); }
    /* Stagger children inside visible fade-in sections */
    .fade-in.visible .stagger > * {
      animation: fade-up 0.8s cubic-bezier(0.16, 1, 0.3, 1) both;
    }
    .fade-in.visible .stagger > *:nth-child(1) { animation-delay: 0.05s; }
    .fade-in.visible .stagger > *:nth-child(2) { animation-delay: 0.15s; }
    .fade-in.visible .stagger > *:nth-child(3) { animation-delay: 0.25s; }
    .fade-in.visible .stagger > *:nth-child(4) { animation-delay: 0.35s; }
    .fade-in.visible .stagger > *:nth-child(5) { animation-delay: 0.45s; }

    @media (prefers-reduced-motion: reduce) {
      .fade-in { opacity: 1; transform: none; transition: none; }
      .bounce, .aurora-blob, .dot, .gradient-text, .stat-number, .service-card::before,
      .price-amount, .shine, .marquee-track, .kinetic-word, .logo-img, .hero-audit-logo,
      .hero-platform-proof,
      .hero-audit-ad, .hero-audit-ad::before, .hero-audit-ad::after,
      .hero-audit-step::after { animation: none !important; }
      .fade-in.visible .stagger > * { animation: none !important; }
      body::after { display: none; }
      html { scroll-behavior: auto; }
    }

    /* Mobile: lighter aurora blur to keep scroll smooth */
    @media (max-width: 640px) {
      .aurora-blob { filter: blur(80px); opacity: 0.2; width: 420px; height: 420px; }
    }

    /* ── Premium: Cursor glow (hero only) ── */
    .cursor-glow {
      position: fixed; pointer-events: none; z-index: 3;
      width: 520px; height: 520px; border-radius: 50%;
      background: radial-gradient(circle, rgba(139,92,246,0.12) 0%, rgba(249,115,22,0.04) 40%, transparent 70%);
      transform: translate(-50%, -50%);
      opacity: 0; transition: opacity 0.5s;
      mix-blend-mode: screen; will-change: transform;
    }

    /* ── Premium: Chapter Navigation (floating right side, desktop only) ── */
    .chapter-nav {
      position: fixed; right: 28px; top: 50%; transform: translateY(-50%);
      z-index: 40; display: none; flex-direction: column; gap: 18px;
    }
    @media (min-width: 1100px) {
      .chapter-nav { display: flex; }
    }
    .chapter-nav a {
      display: flex; align-items: center; gap: 12px;
      text-decoration: none; color: var(--zinc-500);
      font-family: var(--font-display); font-size: 11px; font-weight: 600;
      text-transform: uppercase; letter-spacing: 1.5px;
      transition: color 0.3s;
    }
    .chapter-nav .dot {
      width: 8px; height: 8px; border-radius: 50%;
      background: var(--zinc-700);
      transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1),
                  background 0.4s, box-shadow 0.4s;
    }
    .chapter-nav .label {
      opacity: 0; transform: translateX(-6px);
      transition: opacity 0.3s, transform 0.3s;
    }
    .chapter-nav a:hover .label,
    .chapter-nav a.active .label {
      opacity: 1; transform: translateX(0);
    }
    .chapter-nav a.active {
      color: white;
    }
    .chapter-nav a.active .dot {
      background: linear-gradient(135deg, var(--purple-400), var(--orange-400));
      transform: scale(1.4);
      box-shadow: 0 0 14px rgba(139,92,246,0.6);
    }
    .chapter-nav a:hover .dot {
      background: var(--purple-400);
    }

    /* ════════════════════════════════════
       HEADER
    ════════════════════════════════════ */
    .site-header {
      position: fixed; top: 0; left: 0; right: 0; z-index: 50;
      background: rgba(9,9,11,0.8);
      backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
      border-bottom: 1px solid var(--white-5);
    }
    .header-inner {
      max-width: 1280px; margin: 0 auto; padding: 0 16px;
      height: 64px; display: flex; align-items: center; justify-content: space-between;
    }
    .logo {
      display: flex; align-items: center; gap: 10px;
      text-decoration: none; color: var(--zinc-100);
      font-family: var(--font-display); font-weight: 700; font-size: 18px;
      letter-spacing: -0.3px;
    }
    .logo:hover { color: var(--zinc-100); }
    .logo-img {
      width: 32px; height: 32px; object-fit: contain;
      animation: conic-spin 24s linear infinite;
      transform-origin: 50% 50%;
      will-change: transform;
    }
    .logo:hover .logo-img { animation-duration: 2.4s; }
    @media (prefers-reduced-motion: reduce) {
      .logo-img { animation: none; }
    }

    /* ── Desktop Nav ── */
    .nav-desktop {
      display: none; align-items: center; gap: 32px;
    }
    .nav-desktop a {
      font-size: 14px; font-weight: 500; color: var(--zinc-400);
      text-decoration: none; transition: color 0.2s;
    }
    .nav-desktop a:hover, .nav-desktop a.active { color: white; }
    .nav-cta {
      padding: 10px 22px; border-radius: 9999px;
      background: white; color: var(--zinc-950) !important;
      font-weight: 600 !important; font-size: 14px !important;
      transition: background 0.2s;
    }
    .nav-cta:hover { background: #e4e4e7; color: var(--zinc-950) !important; }
    @media (min-width: 768px) {
      .nav-desktop { display: flex; }
    }

    /* ── Mobile Hamburger ── */
    .menu-toggle {
      display: flex; align-items: center; justify-content: center;
      width: 44px; height: 44px; margin-right: -8px;
      background: none; border: none; cursor: pointer; color: var(--zinc-400);
      transition: color 0.2s;
    }
    .menu-toggle:hover { color: white; }
    @media (min-width: 768px) {
      .menu-toggle { display: none; }
    }
    .mobile-nav-backdrop {
      display: none; position: fixed; inset: 0; top: 64px;
      background: rgba(0,0,0,0.6); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
      z-index: 40;
    }
    .mobile-nav {
      display: none; position: absolute; top: 64px; left: 0; right: 0;
      background: var(--zinc-950); border-bottom: 1px solid var(--white-5);
      padding: 24px 16px; z-index: 50;
      flex-direction: column; gap: 4px;
    }
    .mobile-nav a {
      display: block; font-size: 18px; font-weight: 500; color: var(--zinc-400);
      padding: 12px; border-radius: 12px; text-decoration: none; transition: all 0.2s;
    }
    .mobile-nav a:hover, .mobile-nav a:active { color: white; background: var(--white-5); }
    .mobile-nav .nav-cta-mobile {
      display: block; margin-top: 16px; padding: 14px;
      border-radius: 9999px; background: white; color: var(--zinc-950);
      font-weight: 600; text-align: center;
    }
    .mobile-nav .nav-cta-mobile:hover { background: #e4e4e7; }
    .mobile-open .mobile-nav,
    .mobile-open .mobile-nav-backdrop { display: flex; }
    @media (min-width: 640px) {
      .mobile-nav { top: 80px; }
      .mobile-nav-backdrop { top: 80px; }
    }

    /* ── Sticky mobile "Book audit" button ── */
    .sticky-book {
      position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 90;
      display: none;
      padding: 14px 20px; border-radius: 9999px;
      background: linear-gradient(135deg, #ffffff 0%, #f4f4f5 100%);
      color: var(--zinc-950);
      font-family: var(--font-display); font-weight: 600; font-size: 15px;
      text-align: center; text-decoration: none;
      box-shadow: 0 10px 30px rgba(0,0,0,0.5),
                  0 0 0 1px rgba(139,92,246,0.2),
                  0 0 24px rgba(139,92,246,0.15);
      align-items: center; justify-content: center; gap: 8px;
      transform: translateY(120%); opacity: 0;
      transition: transform 0.35s cubic-bezier(0.16,1,0.3,1), opacity 0.35s;
    }
    .sticky-book.is-visible { transform: translateY(0); opacity: 1; }
    .sticky-book svg { width: 16px; height: 16px; }
    @media (max-width: 820px) {
      .sticky-book { display: inline-flex; }
    }
    /* Hide sticky when mobile nav is open or when near contact CTA */
    .mobile-open .sticky-book { opacity: 0; pointer-events: none; transform: translateY(120%); }

    /* ── Desktop floating contact pill ── */
    .ask-max {
      position: fixed; right: 24px; bottom: 24px; z-index: 90;
      display: none;
    }
    @media (min-width: 821px) {
      .ask-max { display: block; }
    }
    .ask-max-pill {
      display: inline-flex; align-items: center; gap: 10px;
      padding: 12px 18px 12px 14px; border-radius: 9999px;
      background: linear-gradient(135deg, rgba(20,20,23,0.92), rgba(15,15,18,0.92));
      backdrop-filter: saturate(140%) blur(10px);
      -webkit-backdrop-filter: saturate(140%) blur(10px);
      border: 1px solid rgba(139,92,246,0.35);
      color: white; font-family: var(--font-display); font-weight: 600;
      font-size: 14px; text-decoration: none; cursor: pointer;
      box-shadow: 0 20px 50px rgba(0,0,0,0.45),
                  0 0 0 1px rgba(255,255,255,0.03) inset,
                  0 0 40px rgba(139,92,246,0.2);
      transition: transform 0.3s cubic-bezier(0.16,1,0.3,1),
                  box-shadow 0.3s, border-color 0.3s;
      transform: translateY(0);
    }
    .ask-max-pill:hover {
      transform: translateY(-3px);
      border-color: rgba(249,115,22,0.45);
      box-shadow: 0 24px 60px rgba(0,0,0,0.5),
                  0 0 0 1px rgba(255,255,255,0.05) inset,
                  0 0 50px rgba(249,115,22,0.25);
    }
    .ask-max-avatar {
      width: 28px; height: 28px; border-radius: 50%;
      background: linear-gradient(135deg, var(--purple-500), var(--orange-500));
      position: relative; overflow: hidden; flex-shrink: 0;
      background-image: url('/max-avatar.jpg');
      background-size: cover; background-position: center;
    }
    .ask-max-avatar::after {
      content: ''; position: absolute; right: -2px; bottom: -2px;
      width: 10px; height: 10px; border-radius: 50%;
      background: #22c55e; border: 2px solid #0a0a0c;
      box-shadow: 0 0 0 0 rgba(34,197,94,0.5);
      animation: pulse 2s infinite;
    }
    .ask-max-panel {
      position: absolute; right: 0; bottom: calc(100% + 12px);
      width: 320px;
      padding: 18px;
      background: linear-gradient(180deg, rgba(20,20,23,0.96), rgba(12,12,15,0.96));
      backdrop-filter: saturate(140%) blur(14px);
      -webkit-backdrop-filter: saturate(140%) blur(14px);
      border: 1px solid var(--white-10);
      border-radius: 16px;
      box-shadow: 0 30px 80px rgba(0,0,0,0.55),
                  0 0 0 1px rgba(139,92,246,0.12) inset;
      opacity: 0; transform: translateY(8px) scale(0.98);
      pointer-events: none;
      transition: opacity 0.25s, transform 0.25s cubic-bezier(0.16,1,0.3,1);
    }
    .ask-max.is-open .ask-max-panel {
      opacity: 1; transform: translateY(0) scale(1);
      pointer-events: auto;
    }
    .ask-max-panel-head {
      display: flex; align-items: center; gap: 12px;
      padding-bottom: 14px; margin-bottom: 14px;
      border-bottom: 1px solid var(--white-5);
    }
    .ask-max-panel-head .ask-max-avatar { width: 40px; height: 40px; }
    .ask-max-name {
      font-family: var(--font-display); font-weight: 600; font-size: 15px;
      color: white; display: block;
    }
    .ask-max-status {
      font-size: 12px; color: #22c55e;
      display: inline-flex; align-items: center; gap: 6px;
    }
    .ask-max-status::before {
      content: ''; width: 6px; height: 6px; border-radius: 50%;
      background: #22c55e;
    }
    .ask-max-options {
      list-style: none; display: grid; gap: 6px; margin: 0; padding: 0;
    }
    .ask-max-options a, .ask-max-options button {
      display: flex; align-items: center; gap: 12px; width: 100%;
      padding: 10px 12px; border-radius: 10px;
      background: transparent; border: 1px solid transparent;
      color: var(--zinc-200); font-family: var(--font-body);
      font-size: 14px; text-align: left; text-decoration: none;
      cursor: pointer;
      transition: background 0.2s, border-color 0.2s, color 0.2s;
    }
    .ask-max-options a:hover, .ask-max-options button:hover {
      background: rgba(139,92,246,0.08);
      border-color: rgba(139,92,246,0.25);
      color: white;
    }
    .ask-max-options svg { width: 16px; height: 16px; color: var(--purple-300); flex-shrink: 0; }
    .ask-max-options a:hover svg, .ask-max-options button:hover svg { color: var(--orange-400); }
    .ask-max-hint {
      margin-top: 14px; padding-top: 12px;
      border-top: 1px dashed var(--white-5);
      font-size: 12px; color: var(--zinc-500);
      line-height: 1.5;
    }
    .ask-max-close {
      position: absolute; top: 10px; right: 10px;
      background: transparent; border: none; cursor: pointer;
      color: var(--zinc-500); font-size: 18px;
      width: 28px; height: 28px; border-radius: 8px;
      display: grid; place-items: center;
      transition: background 0.2s, color 0.2s;
    }
    .ask-max-close:hover { background: var(--white-5); color: white; }
    .ask-max-pill .ask-max-label-short { display: none; }
    @media (max-width: 1080px) {
      .ask-max-pill .ask-max-label-long { display: none; }
      .ask-max-pill .ask-max-label-short { display: inline; }
    }

    /* ════════════════════════════════════
       HERO
    ════════════════════════════════════ */
    .hero {
      min-height: calc(100vh - 64px);
      min-height: calc(100svh - 64px);
      display: flex; flex-direction: column;
      position: relative; overflow: hidden; margin-top: 64px;
    }
    .hero-bg {
      position: absolute; inset: 0; z-index: -20;
    }
    .hero-bg img {
      width: 100%; height: 100%; object-fit: cover;
      object-position: 72% 35%;
    }
    .hero-overlay {
      position: absolute; inset: 0; z-index: -10;
      background: linear-gradient(to right, rgba(9,9,11,0.90) 0%, rgba(9,9,11,0.60) 40%, rgba(9,9,11,0.10) 100%);
    }
    @media (max-width: 639px) {
      /* Balanced overlay — image peeks through the middle, text zones stay dark */
      .hero-overlay {
        background:
          linear-gradient(180deg,
            rgba(9,9,11,0.92) 0%,
            rgba(9,9,11,0.62) 38%,
            rgba(9,9,11,0.48) 58%,
            rgba(9,9,11,0.88) 100%);
      }
      /* Show more of the mascot/right side on mobile */
      .hero-bg img { object-position: 62% 38%; }
      /* Title + subtitle stay LEFT-aligned (inherited from .hero-content) */
      /* Only center the CTA buttons, match their widths */
      .hero-buttons {
        width: 100%;
        flex-direction: column;
        align-items: center;
        justify-content: center;
      }
      .hero-buttons .btn-white,
      .hero-buttons .btn-glass {
        width: 100%;
        max-width: 280px;
        justify-content: center;
        padding: 14px 24px;
        box-sizing: border-box;
      }
      /* Explore arrow: horizontally centered on mobile */
      .explore-arrow { left: 50%; right: auto; transform: translateX(-50%); }
      /* Extra legibility for the sub-tagline now that bg shows through */
      .hero-sub p {
        text-shadow:
          0 1px 2px rgba(0,0,0,0.95),
          0 2px 14px rgba(0,0,0,0.85),
          0 4px 40px rgba(9,9,11,0.7);
      }
    }
    .hero-fade-bottom {
      position: absolute; left: 0; right: 0; bottom: 0; height: 160px; z-index: -10;
      background: linear-gradient(to top, var(--zinc-950), transparent);
    }
    .hero-purple-glow {
      position: absolute; top: 0; left: 0; width: 100%; max-width: 672px; height: 100%;
      background: rgba(139,92,246,0.10); filter: blur(120px); z-index: -10;
    }
    .hero-content {
      max-width: 1280px; margin: 0 auto; padding: 0 16px;
      display: flex; flex-direction: column; align-items: flex-start; justify-content: center;
      flex-grow: 1; width: 100%; padding-bottom: 80px;
    }
    .hero h1 {
      font-size: clamp(36px, 6vw, 72px);
      max-width: 900px; color: white;
      text-shadow: 0 2px 20px rgba(0,0,0,0.3);
      animation: fade-up 0.5s 0.1s ease both;
    }
    .hero-sub {
      margin-top: 20px; font-size: clamp(16px, 2vw, 20px);
      color: white; max-width: 640px;
      font-weight: 500;
      text-shadow: 0 1px 12px rgba(0,0,0,0.7), 0 2px 32px rgba(0,0,0,0.5);
      animation: fade-up 0.5s 0.2s ease both;
    }
    .hero-buttons {
      margin-top: 28px; display: flex; flex-wrap: wrap; gap: 12px;
      animation: fade-up 0.5s 0.3s ease both;
    }
    .hero-platform-proof {
      position: absolute;
      right: clamp(422px, 35vw, 540px);
      bottom: clamp(118px, 14vh, 164px);
      width: clamp(230px, 18vw, 294px);
      z-index: 5;
      display: grid;
      gap: 8px;
      padding: 13px 14px 12px;
      border-radius: 17px;
      color: white;
      text-decoration: none;
      background:
        linear-gradient(145deg, rgba(9,9,11,0.78), rgba(24,24,27,0.52)),
        radial-gradient(circle at 20% 18%, rgba(236,72,153,0.16), transparent 52%),
        radial-gradient(circle at 88% 78%, rgba(249,115,22,0.12), transparent 44%);
      border: 1px solid rgba(255,255,255,0.12);
      box-shadow:
        0 16px 44px rgba(0,0,0,0.38),
        inset 0 1px 0 rgba(255,255,255,0.08),
        0 0 36px rgba(168,85,247,0.12);
      backdrop-filter: blur(14px);
      -webkit-backdrop-filter: blur(14px);
      overflow: hidden;
      animation: audit-card-in 0.78s 0.95s cubic-bezier(0.16,1,0.3,1) both,
                 platform-float 7s 2s ease-in-out infinite;
    }
    .hero-platform-proof::after {
      content: '';
      position: absolute;
      inset: auto 14px 0;
      height: 1px;
      background: linear-gradient(90deg, transparent, rgba(236,72,153,0.75), rgba(249,115,22,0.7), transparent);
      opacity: 0.6;
    }
    .hero-platform-proof:hover {
      color: white;
      transform: translateY(-4px);
      border-color: rgba(255,255,255,0.2);
      box-shadow:
        0 22px 58px rgba(0,0,0,0.46),
        inset 0 1px 0 rgba(255,255,255,0.1),
        0 0 54px rgba(236,72,153,0.16);
    }
    .hero-platform-label {
      color: var(--zinc-400);
      font-family: var(--font-display);
      font-size: 10px;
      font-weight: 800;
      line-height: 1;
      letter-spacing: 1.6px;
      text-transform: uppercase;
    }
    .hero-platform-logo {
      display: block;
      width: 100%;
      max-width: 250px;
      height: auto;
      margin-left: -4px;
      filter: drop-shadow(0 0 14px rgba(236,72,153,0.22)) drop-shadow(0 0 12px rgba(249,115,22,0.12));
    }
    .hero-platform-note {
      max-width: 245px;
      color: var(--zinc-300);
      font-size: 12px;
      line-height: 1.3;
    }
    .hero-audit-ad {
      position: absolute;
      right: clamp(18px, 5.5vw, 82px);
      bottom: clamp(96px, 13vh, 142px);
      width: clamp(318px, 27vw, 386px);
      z-index: 5;
      display: block;
      padding: 16px;
      border-radius: 18px;
      color: white;
      text-decoration: none;
      background:
        linear-gradient(135deg, rgba(9,9,11,0.82), rgba(24,24,27,0.66)),
        radial-gradient(circle at 16% 14%, rgba(249,115,22,0.18), transparent 44%),
        radial-gradient(circle at 94% 76%, rgba(139,92,246,0.16), transparent 42%);
      border: 1px solid rgba(255,255,255,0.14);
      box-shadow:
        0 18px 54px rgba(0,0,0,0.44),
        inset 0 1px 0 rgba(255,255,255,0.08),
        0 0 48px rgba(249,115,22,0.12);
      backdrop-filter: blur(16px);
      -webkit-backdrop-filter: blur(16px);
      overflow: hidden;
      isolation: isolate;
      animation: audit-card-in 0.85s 0.8s cubic-bezier(0.16,1,0.3,1) both,
                 audit-float 6s 1.7s ease-in-out infinite;
    }
    .hero-audit-ad::before {
      content: '';
      position: absolute; inset: -1px;
      background: linear-gradient(120deg, transparent 0%, rgba(255,255,255,0.16) 42%, transparent 68%);
      transform: translateX(-120%);
      animation: audit-sheen 5.5s 2.2s ease-in-out infinite;
      z-index: -1;
    }
    .hero-audit-ad::after {
      content: '';
      position: absolute;
      left: 16px; right: 16px; top: 54px;
      height: 1px;
      background: linear-gradient(90deg, transparent, rgba(249,115,22,0.9), rgba(167,139,250,0.7), transparent);
      opacity: 0.72;
      transform-origin: left;
      animation: audit-scan 3.8s 1.2s ease-in-out infinite;
    }
    .hero-audit-ad:hover {
      color: white;
      transform: translateY(-5px);
      box-shadow:
        0 24px 68px rgba(0,0,0,0.52),
        inset 0 1px 0 rgba(255,255,255,0.11),
        0 0 68px rgba(249,115,22,0.18);
    }
    .hero-audit-ad-top {
      display: flex; align-items: center; justify-content: space-between; gap: 12px;
      margin-bottom: 15px;
    }
    .hero-audit-brand {
      display: inline-flex;
      align-items: center;
      gap: 9px;
    }
    .hero-audit-eyebrow {
      color: var(--orange-300);
      font-family: var(--font-display);
      font-size: 14px;
      line-height: 1;
      font-weight: 700;
      letter-spacing: 1.25px;
      text-transform: uppercase;
    }
    .hero-audit-logo {
      width: 28px;
      height: 28px;
      object-fit: contain;
      flex: 0 0 auto;
      filter: drop-shadow(0 0 12px rgba(168,85,247,0.45)) drop-shadow(0 0 10px rgba(249,115,22,0.3));
      transform-origin: 50% 50%;
      animation: conic-spin 18s linear infinite;
      will-change: transform;
    }
    .hero-audit-ad:hover .hero-audit-logo {
      animation-duration: 2.8s;
    }
    .hero-audit-value {
      color: var(--zinc-950);
      background: white;
      border-radius: 9999px;
      padding: 5px 9px;
      font-size: 12px;
      font-weight: 800;
      white-space: nowrap;
    }
    .hero-audit-title {
      font-family: var(--font-display);
      font-size: clamp(22px, 1.9vw, 26px);
      line-height: 1.07;
      letter-spacing: -0.02em;
      margin-bottom: 8px;
      max-width: 320px;
    }
    .hero-audit-copy {
      color: var(--zinc-300);
      font-size: 13px;
      line-height: 1.35;
      max-width: 320px;
    }
    .hero-audit-flow {
      display: flex;
      flex-wrap: wrap;
      gap: 7px;
      margin: 13px 0 14px;
    }
    .hero-audit-step {
      min-height: auto;
      border-radius: 9999px;
      border: 1px solid rgba(255,255,255,0.1);
      background: rgba(255,255,255,0.045);
      padding: 7px 10px 8px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      position: relative;
      overflow: hidden;
    }
    .hero-audit-step::after {
      content: '';
      position: absolute; inset: auto 10px 5px 10px;
      height: 2px; border-radius: 9999px;
      background: linear-gradient(90deg, var(--orange-400), var(--purple-400));
      transform: scaleX(0.2);
      transform-origin: left;
      opacity: 0.85;
      animation: audit-fill 3.6s ease-in-out infinite;
    }
    .hero-audit-step:nth-child(2)::after { animation-delay: 0.45s; }
    .hero-audit-step:nth-child(3)::after { animation-delay: 0.9s; }
    .hero-audit-step strong {
      font-family: var(--font-display);
      font-size: 11px;
      color: white;
    }
    .hero-audit-step span {
      display: none;
    }
    .hero-audit-bottom {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      padding-top: 2px;
    }
    .hero-audit-note {
      color: var(--zinc-400);
      font-size: 11.5px;
      line-height: 1.25;
    }
    .hero-audit-cta {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      color: white;
      font-family: var(--font-display);
      font-size: 13px;
      font-weight: 700;
      white-space: nowrap;
    }
    .hero-audit-cta svg {
      transition: transform 0.3s cubic-bezier(0.16,1,0.3,1);
    }
    .hero-audit-ad:hover .hero-audit-cta svg {
      transform: translateX(4px);
    }
    @keyframes audit-card-in {
      from { opacity: 0; transform: translateY(24px) scale(0.96); filter: blur(8px); }
      to { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); }
    }
    @keyframes audit-float {
      0%, 100% { translate: 0 0; }
      50% { translate: 0 -5px; }
    }
    @keyframes platform-float {
      0%, 100% { translate: 0 0; }
      50% { translate: 0 -4px; }
    }
    @keyframes audit-sheen {
      0%, 58% { transform: translateX(-130%); opacity: 0; }
      64% { opacity: 1; }
      82%, 100% { transform: translateX(130%); opacity: 0; }
    }
    @keyframes audit-scan {
      0%, 100% { transform: scaleX(0.08); opacity: 0.35; }
      50% { transform: scaleX(1); opacity: 0.9; }
    }
    @keyframes audit-fill {
      0%, 100% { transform: scaleX(0.2); opacity: 0.45; }
      48%, 72% { transform: scaleX(1); opacity: 1; }
    }
    @media (max-width: 1020px) {
      .hero-audit-ad,
      .hero-platform-proof { display: none; }
    }
    .btn-white {
      display: inline-flex; align-items: center; gap: 8px;
      padding: 14px 32px; border-radius: 9999px;
      background: white; color: var(--zinc-950);
      font-weight: 600; font-size: 15px; font-family: var(--font-body);
      border: none; cursor: pointer; text-decoration: none;
      transition: background 0.3s, transform 0.3s cubic-bezier(0.16, 1, 0.3, 1),
                  box-shadow 0.3s;
      position: relative; overflow: hidden; will-change: transform;
    }
    .btn-white:hover {
      background: #e4e4e7; color: var(--zinc-950);
      transform: translateY(-2px);
      box-shadow: 0 12px 30px rgba(255,255,255,0.15),
                  0 0 40px rgba(139,92,246,0.2);
    }
    .btn-white::after {
      content: ''; position: absolute; inset: 0;
      background: linear-gradient(
        90deg, transparent 0%, rgba(139,92,246,0.15) 50%, transparent 100%
      );
      transform: translateX(-120%); transition: transform 0.6s;
    }
    .btn-white:hover::after { transform: translateX(120%); }
    .btn-white svg { transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1); }
    .btn-white:hover svg { transform: translateX(4px); }
    .btn-glass {
      display: inline-flex; align-items: center;
      padding: 14px 32px; border-radius: 9999px;
      background: rgba(24,24,27,0.5); color: white;
      font-weight: 600; font-size: 15px; font-family: var(--font-body);
      border: 1px solid var(--white-20);
      backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
      cursor: pointer; text-decoration: none;
      transition: background 0.2s;
    }
    .btn-glass:hover { background: rgba(39,39,42,0.5); color: white; }
    /* ── Premium: Kinetic cycling word in H1 ── */
    .kinetic-wrap {
      display: inline-block; position: relative;
      min-width: 1ch; vertical-align: baseline;
    }
    .kinetic-word {
      display: inline-block;
      background: linear-gradient(
        90deg,
        var(--purple-300) 0%,
        var(--orange-300) 25%,
        #fbcfe8 50%,
        var(--orange-300) 75%,
        var(--purple-300) 100%
      );
      background-size: 200% auto;
      -webkit-background-clip: text; -webkit-text-fill-color: transparent;
      background-clip: text;
      animation: gradient-shimmer 6s ease-in-out infinite;
      transition: opacity 0.35s cubic-bezier(0.65, 0, 0.35, 1),
                  transform 0.45s cubic-bezier(0.16, 1, 0.3, 1),
                  filter 0.35s;
    }
    .kinetic-word.exiting {
      opacity: 0.24; transform: translateY(-14px); filter: blur(4px);
    }
    .kinetic-word.entering {
      opacity: 0.24; transform: translateY(14px); filter: blur(4px);
    }
    @media (prefers-reduced-motion: reduce) {
      .kinetic-word.exiting, .kinetic-word.entering {
        opacity: 1; transform: none; filter: none;
      }
    }

    /* ── Premium: Segment Picker (who are you?) ── */
    .segment-picker {
      display: inline-flex; align-items: center; gap: 4px;
      padding: 4px; border-radius: 9999px;
      background: rgba(24,24,27,0.5);
      border: 1px solid var(--white-10);
      backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
      margin-top: 28px; margin-bottom: 4px;
      position: relative;
      animation: fade-up 0.5s 0.35s ease both;
    }
    .segment-btn {
      position: relative;
      padding: 9px 20px; border: none; cursor: pointer;
      background: transparent; color: var(--zinc-400);
      font-family: var(--font-display); font-weight: 600; font-size: 13px;
      letter-spacing: 0.3px; border-radius: 9999px;
      transition: color 0.3s;
      z-index: 2;
      white-space: nowrap;
    }
    .segment-btn:hover { color: white; }
    .segment-btn.active { color: white; }
    .segment-btn.active::before {
      content: ''; position: absolute; inset: 0;
      border-radius: 9999px;
      background: linear-gradient(135deg, var(--purple-500) 0%, var(--orange-500) 100%);
      z-index: -1;
      box-shadow: 0 6px 20px rgba(139,92,246,0.3), 0 0 30px rgba(249,115,22,0.15);
    }
    @media (max-width: 540px) {
      .segment-picker { flex-wrap: wrap; justify-content: center; }
      .segment-btn { padding: 8px 14px; font-size: 12px; }
    }

    /* Hero sub paragraphs (morph per segment) */
    .hero-sub { position: relative; min-height: 90px; }
    .hero-sub p {
      position: relative;
      transition: opacity 0.35s, transform 0.45s cubic-bezier(0.16, 1, 0.3, 1);
    }
    .hero-sub p[hidden] {
      display: none;
    }

    .explore-arrow {
      position: absolute; bottom: 20px; left: 0; right: 0;
      display: flex; flex-direction: column; align-items: center; justify-content: center;
      gap: 4px; pointer-events: none;
      color: var(--zinc-400); font-size: 11px; letter-spacing: 2px; text-transform: uppercase;
      animation: fade-up 1s 1s ease both;
    }
    .explore-arrow > * { pointer-events: auto; }
    /* Counteract trailing letter-spacing so the word is optically centered */
    .explore-arrow span { padding-left: 2px; }
    .explore-arrow svg { animation: bounce-arrow 1.5s infinite ease-in-out; }

    /* ════════════════════════════════════
       SECTIONS
    ════════════════════════════════════ */
    .section {
      padding: 64px 0; border-top: 1px solid var(--white-5);
    }
    .section-header {
      text-align: center; margin-bottom: 64px;
    }
    .section-header h2 {
      font-size: clamp(28px, 4.2vw, 40px); margin-bottom: 16px;
      line-height: 1.15; text-wrap: balance;
    }
    .section-header p {
      color: var(--zinc-400); font-size: 18px; max-width: 640px; margin: 0 auto;
    }
    .section-header-note {
      color: var(--zinc-500); font-size: 14px; font-style: italic;
      margin-top: 14px; letter-spacing: 0.01em;
    }
    .section-lead-split {
      display: flex; flex-direction: column; gap: 4px;
      color: var(--zinc-400); font-size: 18px;
      max-width: 680px; margin: 0 auto;
      text-wrap: balance;
    }
    .section-lead-split span { display: block; }

    /* ── Services Cards ── */
    .services-grid {
      display: grid; gap: 24px;
      grid-template-columns: 1fr;
    }
    .service-card {
      padding: 32px; border-radius: 16px;
      background: rgba(255,255,255,0.02);
      border: 1px solid var(--white-5);
      transition: background 0.5s cubic-bezier(0.16, 1, 0.3, 1),
                  transform 0.5s cubic-bezier(0.16, 1, 0.3, 1),
                  box-shadow 0.5s cubic-bezier(0.16, 1, 0.3, 1);
      position: relative; overflow: hidden;
      will-change: transform;
      transform-style: preserve-3d;
      display: flex; flex-direction: column;
    }
    /* When tilting, override transition timing for snappy follow */
    .service-card.is-tilting {
      transition: transform 0.1s linear, background 0.5s, box-shadow 0.5s;
    }
    .service-card:hover, .service-card:focus-within {
      background: rgba(255,255,255,0.04);
      transform: translateY(-6px);
      box-shadow: 0 20px 60px rgba(0,0,0,0.45),
                  0 0 0 1px rgba(139,92,246,0.5),
                  0 0 60px rgba(139,92,246,0.22),
                  0 0 120px rgba(249,115,22,0.1);
    }
    /* Touch / active state for mobile */
    .service-card:active {
      transform: translateY(-3px);
      box-shadow: 0 12px 40px rgba(0,0,0,0.4),
                  0 0 0 1px rgba(139,92,246,0.45),
                  0 0 40px rgba(139,92,246,0.2);
      transition-duration: 0.1s;
    }
    /* Rotating conic gradient border */
    .service-card::before {
      content: ''; position: absolute;
      top: 50%; left: 50%; width: 200%; height: 200%;
      transform: translate(-50%, -50%);
      background: conic-gradient(
        from 0deg,
        transparent 0deg,
        var(--purple-500) 60deg,
        var(--orange-500) 120deg,
        transparent 180deg,
        transparent 360deg
      );
      opacity: 0; transition: opacity 0.5s; pointer-events: none;
      z-index: 0;
    }
    .service-card:hover::before, .service-card:focus-within::before {
      opacity: 1;
      animation: conic-spin 3s linear infinite;
    }
    .service-card::after {
      content: ''; position: absolute; inset: 1px;
      border-radius: 15px; background: var(--zinc-950);
      z-index: 1; pointer-events: none;
    }
    /* Ensure card content sits above the pseudo-elements */
    .service-card > * { position: relative; z-index: 2; }
    /* Shimmer sweep on hover */
    .service-card .shimmer {
      position: absolute; top: 0; left: 0; width: 60%; height: 100%;
      background: linear-gradient(
        to right,
        transparent 0%,
        rgba(255,255,255,0.06) 50%,
        transparent 100%
      );
      transform: translateX(-120%) skewX(-12deg);
      pointer-events: none; z-index: 3;
    }
    .service-card:hover .shimmer {
      animation: shine-sweep 1.2s cubic-bezier(0.16, 1, 0.3, 1);
    }
    .service-label {
      font-family: var(--font-display); font-size: 12px; font-weight: 600;
      text-transform: uppercase; letter-spacing: 1.5px;
      color: var(--zinc-500); margin-bottom: 10px;
    }
    .service-title {
      font-size: 22px; margin-bottom: 8px; color: white;
    }
    .service-price {
      font-family: var(--font-display); font-size: 20px; font-weight: 700;
      color: var(--orange-400); margin-bottom: 16px;
      transition: text-shadow 0.4s;
    }
    .service-price-unit {
      font-size: 14px; font-weight: 500; color: var(--zinc-400);
      letter-spacing: 0.02em;
    }
    .service-card:hover .service-price {
      animation: price-glow 2s ease-in-out infinite;
    }
    .service-desc {
      color: var(--zinc-400); font-size: 15px; line-height: 1.7; margin-bottom: 20px;
    }
    .service-fit {
      font-size: 14px; color: var(--zinc-500); font-style: italic;
    }

    /* ── Why Us (Traps) ── */
    .traps-grid {
      display: grid; gap: 24px; grid-template-columns: 1fr;
    }
    .trap-card {
      padding: 32px; border-radius: 16px;
      background: rgba(255,255,255,0.02);
      border: 1px solid var(--white-5);
      position: relative; overflow: hidden;
      transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1),
                  border-color 0.5s,
                  box-shadow 0.5s;
    }
    .trap-card:hover {
      transform: translateY(-4px);
      border-color: rgba(249,115,22,0.3);
      box-shadow: 0 16px 40px rgba(0,0,0,0.3),
                  0 0 30px rgba(249,115,22,0.08);
    }
    .trap-card::before {
      content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px;
      background: linear-gradient(90deg, var(--purple-500), var(--orange-500), transparent);
    }
    .trap-icon {
      display: inline-flex; align-items: center; justify-content: center;
      width: 52px; height: 52px; border-radius: 14px;
      background: linear-gradient(135deg, rgba(139,92,246,0.12) 0%, rgba(249,115,22,0.08) 100%);
      border: 1px solid rgba(139,92,246,0.22);
      margin-bottom: 24px;
      transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1),
                  background 0.5s, border-color 0.5s,
                  box-shadow 0.5s;
      position: relative; overflow: hidden;
    }
    .trap-icon::before {
      content: ''; position: absolute; inset: 0;
      background: linear-gradient(135deg, rgba(139,92,246,0.25), rgba(249,115,22,0.18));
      opacity: 0; transition: opacity 0.5s;
    }
    .trap-icon svg {
      width: 24px; height: 24px; color: var(--purple-300);
      position: relative; z-index: 1;
      transition: color 0.4s, transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
    }
    .trap-card:hover .trap-icon {
      transform: scale(1.08) rotate(-4deg);
      border-color: rgba(249,115,22,0.4);
      box-shadow: 0 10px 28px rgba(139,92,246,0.2);
    }
    .trap-card:hover .trap-icon::before { opacity: 1; }
    .trap-card:hover .trap-icon svg { color: white; }
    .trap-card h3 { font-size: 20px; color: white; margin-bottom: 8px; }
    .trap-card .trap-problem {
      color: var(--orange-400); font-weight: 600; font-size: 15px; margin-bottom: 12px;
    }
    .trap-card p { color: var(--zinc-400); font-size: 15px; }
    @media (min-width: 768px) {
      .traps-grid { grid-template-columns: repeat(3, 1fr); }
    }

    /* ── Social Proof ── */
    .proof-stats {
      display: flex; flex-wrap: wrap; justify-content: center; gap: 48px;
      padding: 48px 0; border-bottom: 1px solid var(--white-5);
      margin-bottom: 64px;
    }
    .proof-stat { text-align: center; }
    .proof-stat {
      position: relative; transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    }
    .proof-stat:hover { transform: translateY(-4px); }
    .proof-stat .stat-number {
      font-family: var(--font-display); font-size: 36px; font-weight: 700;
      background: linear-gradient(
        135deg,
        var(--purple-300) 0%,
        var(--orange-300) 50%,
        var(--purple-300) 100%
      );
      background-size: 200% auto;
      -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
      animation: gradient-shimmer 6s ease-in-out infinite;
    }
    .proof-stat .stat-label {
      color: var(--zinc-500); font-size: 14px; margin-top: 4px;
    }
    .testimonials {
      display: grid; gap: 24px; grid-template-columns: 1fr;
      margin-top: 48px;
    }
    .testimonial {
      padding: 28px; border-radius: 16px;
      background: rgba(255,255,255,0.02);
      border: 1px solid var(--white-5);
    }
    .testimonial blockquote {
      font-family: var(--font-quote); font-style: italic;
      font-size: 18px; color: rgba(255,255,255,0.85); line-height: 1.6;
      margin-bottom: 16px;
    }
    .testimonial-author {
      display: flex; align-items: center; gap: 12px;
    }
    .testimonial-avatar {
      width: 40px; height: 40px; border-radius: 50%;
      background: linear-gradient(135deg, var(--purple-500), var(--orange-500));
      display: flex; align-items: center; justify-content: center;
      font-family: var(--font-display); font-weight: 700; font-size: 16px; color: white;
    }
    .testimonial-name { font-weight: 600; color: white; font-size: 15px; }
    .testimonial-role { color: var(--zinc-500); font-size: 13px; }
    @media (min-width: 768px) {
      .testimonials { grid-template-columns: repeat(2, 1fr); }
    }

    /* ── Service Card CTA ── */
    .service-cta {
      display: inline-flex; align-items: center; gap: 6px;
      padding: 10px 20px; border-radius: 9999px;
      border: 1px solid var(--white-20); background: transparent;
      color: white; font-weight: 600; font-size: 14px; font-family: var(--font-body);
      text-decoration: none; transition: all 0.2s; cursor: pointer;
      align-self: flex-start;
    }
    /* Tight, even trailing-copy spacing */
    .service-card .service-fit  { margin-bottom: 8px; }
    .service-card .service-price-note { margin-top: 4px; margin-bottom: 0; }
    /* Divider absorbs the empty space → CTAs line up across cards */
    .service-card .service-cta-divider {
      display: block; height: 1px; margin: 28px 0 20px;
      margin-top: auto;
      background: linear-gradient(90deg, transparent, rgba(255,255,255,0.08), transparent);
    }
    .service-cta:hover {
      background: var(--white-10); color: white; border-color: var(--purple-400);
    }
    .service-cta svg { width: 14px; height: 14px; }
    .service-price-note {
      color: var(--zinc-500); font-size: 13px; margin-top: 6px; font-style: normal;
    }

    /* ── Process (How we work) ── */
    .process-section {
      position: relative;
    }
    .process-rail {
      position: relative;
      margin: 56px auto 0;
      max-width: 1080px;
    }
    .process-rail::before {
      content: ''; position: absolute;
      left: 4%; right: 4%; top: 34px; height: 2px;
      background: linear-gradient(90deg,
        transparent,
        rgba(139,92,246,0.35) 10%,
        rgba(139,92,246,0.6) 30%,
        rgba(249,115,22,0.55) 70%,
        rgba(249,115,22,0.35) 90%,
        transparent);
      z-index: 0;
    }
    .process-rail::after {
      content: ''; position: absolute;
      left: 4%; right: 4%; top: 34px; height: 2px;
      background-image: repeating-linear-gradient(90deg,
        transparent 0, transparent 10px,
        rgba(255,255,255,0.08) 10px, rgba(255,255,255,0.08) 12px);
      z-index: 1; opacity: 0.6;
    }
    .process-track {
      display: grid; grid-template-columns: repeat(5, 1fr);
      gap: 14px; position: relative; z-index: 2;
    }
    .process-node {
      display: flex; flex-direction: column; align-items: center; text-align: center;
      padding: 0 6px;
    }
    .process-dot {
      width: 68px; height: 68px; border-radius: 50%;
      display: grid; place-items: center;
      background: radial-gradient(circle at 30% 30%, #1a1a1d, #0a0a0c);
      border: 1px solid rgba(255,255,255,0.12);
      box-shadow: 0 0 0 4px rgba(10,10,12,1),
                  0 10px 30px rgba(0,0,0,0.45),
                  inset 0 1px 0 rgba(255,255,255,0.06);
      color: var(--purple-300);
      position: relative; z-index: 2;
      transition: transform 0.5s cubic-bezier(0.16,1,0.3,1),
                  border-color 0.5s, color 0.5s, box-shadow 0.5s;
    }
    .process-dot svg { width: 26px; height: 26px; }
    .process-node:nth-child(even) .process-dot { color: var(--orange-400); }
    @media (hover: hover) {
      .process-node:hover .process-dot {
        transform: translateY(-3px) scale(1.04);
        border-color: rgba(139,92,246,0.45);
        box-shadow: 0 0 0 4px rgba(10,10,12,1),
                    0 14px 36px rgba(139,92,246,0.2),
                    inset 0 1px 0 rgba(255,255,255,0.08);
      }
    }
    .process-num {
      position: absolute; top: -8px; right: -8px;
      width: 22px; height: 22px; border-radius: 50%;
      background: linear-gradient(135deg, var(--purple-500), var(--orange-500));
      display: grid; place-items: center;
      font-family: var(--font-display); font-weight: 700; font-size: 11px;
      color: white; letter-spacing: 0;
      box-shadow: 0 0 0 3px #0a0a0c;
    }
    .process-label {
      margin-top: 18px;
      font-family: var(--font-display); font-size: 14px; font-weight: 600;
      color: white; letter-spacing: 0.2px;
    }
    .process-detail {
      margin-top: 6px;
      font-size: 12.5px; color: var(--zinc-400); line-height: 1.45;
      max-width: 160px;
    }
    .process-meta {
      margin-top: 40px; display: flex; justify-content: center; flex-wrap: wrap;
      gap: 14px 26px; color: var(--zinc-500); font-size: 13px;
      font-family: var(--font-display);
    }
    .process-meta span { display: inline-flex; align-items: center; gap: 8px; }
    .process-meta .pm-dot {
      width: 6px; height: 6px; border-radius: 50%;
      background: linear-gradient(135deg, var(--purple-400), var(--orange-400));
    }

    @media (max-width: 820px) {
      .process-rail {
        margin-top: 40px;
        padding-left: 8px;
      }
      .process-rail::before, .process-rail::after { display: none; }
      .process-track {
        grid-template-columns: 1fr; gap: 0;
        max-width: 520px; margin: 0 auto;
      }
      .process-node {
        display: grid;
        grid-template-columns: 56px 1fr;
        grid-template-areas:
          "dot    label"
          "dot    detail";
        column-gap: 18px; row-gap: 2px;
        align-items: start; text-align: left;
        padding: 16px 0;
        position: relative;
      }
      .process-node .process-dot    { grid-area: dot; align-self: start; }
      .process-node .process-label  { grid-area: label; }
      .process-node .process-detail { grid-area: detail; }
      .process-dot {
        width: 56px; height: 56px;
      }
      .process-dot svg { width: 22px; height: 22px; }
      .process-num {
        width: 20px; height: 20px; font-size: 10px;
        top: -6px; right: -6px;
      }
      /* Vertical connector line between dots */
      .process-node::after {
        content: ''; position: absolute;
        left: 27px; top: 72px; bottom: 0; width: 2px;
        background: linear-gradient(180deg,
          rgba(139,92,246,0.45) 0%,
          rgba(139,92,246,0.2) 50%,
          rgba(249,115,22,0.35) 100%);
        opacity: 0.55;
      }
      .process-node:last-child::after { display: none; }
      .process-label {
        margin-top: 4px; font-size: 15px;
        line-height: 1.2;
      }
      .process-detail {
        max-width: none; font-size: 14px; line-height: 1.55;
        color: var(--zinc-300);
        margin-top: 4px;
      }
    }

    /* ── Proof Cards ── */
    .proof-grid {
      display: grid; gap: 24px;
      grid-template-columns: 1fr;
    }
    .proof-card {
      border-radius: 16px;
      background: rgba(255,255,255,0.02);
      border: 1px solid var(--white-5);
      transition: background 0.5s cubic-bezier(0.16, 1, 0.3, 1),
                  transform 0.5s cubic-bezier(0.16, 1, 0.3, 1),
                  box-shadow 0.5s cubic-bezier(0.16, 1, 0.3, 1),
                  border-color 0.5s;
      position: relative; overflow: hidden;
      will-change: transform;
    }
    .proof-card:hover {
      background: rgba(255,255,255,0.04);
      transform: translateY(-5px);
      border-color: rgba(139,92,246,0.25);
      box-shadow: 0 20px 50px rgba(0,0,0,0.35),
                  0 0 30px rgba(139,92,246,0.08);
    }
    .proof-card::before {
      content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px;
      background: linear-gradient(90deg, var(--purple-500), var(--orange-500), transparent);
      transform: scaleX(0); transform-origin: left;
      transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
    }
    .proof-card:hover::before { transform: scaleX(1); }
    .proof-card::after {
      content: ''; position: absolute; top: -50%; right: -30%;
      width: 300px; height: 300px; border-radius: 50%;
      background: radial-gradient(circle, rgba(139,92,246,0.12) 0%, transparent 70%);
      opacity: 0; transition: opacity 0.6s; pointer-events: none;
    }
    .proof-card:hover::after { opacity: 1; }
    .proof-card:hover .proof-media img { transform: scale(1.04); }
    .proof-media {
      position: relative; overflow: hidden;
      aspect-ratio: 16 / 9;
      background:
        radial-gradient(ellipse 80% 70% at 20% 10%, rgba(139,92,246,0.26), transparent 58%),
        radial-gradient(ellipse 70% 60% at 80% 80%, rgba(249,115,22,0.18), transparent 58%),
        rgba(9,9,11,0.92);
      border-bottom: 1px solid var(--white-5);
    }
    .proof-media::after {
      content: ''; position: absolute; inset: 0;
      background:
        linear-gradient(180deg, transparent 45%, rgba(9,9,11,0.34) 100%),
        linear-gradient(115deg, transparent 0%, rgba(255,255,255,0.10) 42%, transparent 62%);
      background-size: 100% 100%, 220% 100%;
      mix-blend-mode: screen;
      opacity: 0.45;
      animation: proof-sheen 8s ease-in-out infinite;
      pointer-events: none;
    }
    .proof-media img {
      width: 100%; height: 100%; object-fit: cover;
      transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
    }
    .proof-card--icon .proof-media {
      display: grid; place-items: center;
      background:
        radial-gradient(circle at 50% 45%, rgba(239,68,68,0.28), transparent 34%),
        radial-gradient(ellipse 90% 80% at 50% 50%, rgba(139,92,246,0.18), transparent 62%),
        linear-gradient(135deg, rgba(15,23,42,0.95), rgba(24,24,27,0.92));
    }
    .proof-card--icon .proof-media img {
      width: min(44%, 180px); height: auto; object-fit: contain;
      filter: drop-shadow(0 22px 42px rgba(0,0,0,0.38));
      animation: proof-float 7s ease-in-out infinite;
    }
    .proof-body { padding: 24px; position: relative; z-index: 1; }
    .proof-kicker {
      display: block; margin-bottom: 10px;
      font-family: var(--font-display); font-size: 10px; font-weight: 700;
      color: var(--purple-300); letter-spacing: 1.6px; text-transform: uppercase;
    }
    .proof-card h3 { font-size: 20px; margin-bottom: 10px; color: white; }
    .proof-card p { color: var(--zinc-400); font-size: 15px; margin-bottom: 16px; }
    .proof-outcome {
      display: flex; align-items: flex-start; gap: 10px;
      padding: 12px 14px; margin-bottom: 16px;
      border-radius: 12px;
      background: rgba(255,255,255,0.035);
      border: 1px solid var(--white-5);
      color: var(--zinc-300); font-size: 14px; line-height: 1.45;
    }
    .proof-outcome::before {
      content: ''; flex: 0 0 8px; width: 8px; height: 8px; margin-top: 6px;
      border-radius: 999px;
      background: linear-gradient(135deg, var(--purple-400), var(--orange-400));
      box-shadow: 0 0 16px rgba(249,115,22,0.5);
    }
    .tag {
      display: inline-block; font-family: var(--font-display); font-size: 11px; font-weight: 500;
      background: rgba(139,92,246,0.12); color: var(--purple-400);
      padding: 3px 10px; border-radius: 4px; margin: 3px 4px 3px 0;
      border: 1px solid rgba(139,92,246,0.15); letter-spacing: 0.3px;
    }
    .proof-link {
      margin-top: 28px; text-align: center;
    }
    .proof-link a {
      display: inline-flex; align-items: center; gap: 8px;
      color: var(--zinc-300);
      font-family: var(--font-display); font-size: 14px; font-weight: 600;
      border-bottom: 1px solid rgba(255,255,255,0.22);
      padding-bottom: 4px;
    }
    .proof-link a:hover { color: white; }
    @keyframes proof-sheen {
      0%, 100% { background-position: 0 0, 120% 0; }
      50% { background-position: 0 0, -60% 0; }
    }
    @keyframes proof-float {
      0%, 100% { transform: translateY(0) rotate(-1deg); }
      50% { transform: translateY(-8px) rotate(2deg); }
    }
    @media (prefers-reduced-motion: reduce) {
      .proof-media::after,
      .proof-card--icon .proof-media img { animation: none; }
      .proof-card:hover .proof-media img { transform: none; }
    }
    @media (min-width: 900px) {
      .proof-card--wide {
        grid-column: 1 / -1;
        display: grid;
        grid-template-columns: minmax(0, 1.12fr) minmax(340px, 0.88fr);
      }
      .proof-card--wide .proof-media {
        min-height: 340px;
        aspect-ratio: auto;
        border-bottom: 0;
        border-right: 1px solid var(--white-5);
      }
      .proof-card--wide .proof-body {
        align-self: center;
        padding: 32px;
      }
      .proof-card--wide h3 { font-size: 26px; }
    }
    @media (max-width: 520px) {
      .proof-body { padding: 20px; }
      .proof-card h3 { font-size: 18px; }
      .proof-card p,
      .proof-outcome { font-size: 14px; }
    }

    /* ── Fit Section ── */
    .fit-intro {
      color: var(--zinc-400); font-size: 18px; max-width: 700px; margin-bottom: 32px;
    }
    .fit-list { list-style: none; max-width: 700px; }
    .fit-list li {
      color: var(--zinc-300); font-size: 17px; padding: 14px 0;
      border-bottom: 1px solid var(--white-5);
      transition: padding-left 0.3s, color 0.3s;
    }
    .fit-list li:hover { padding-left: 8px; color: white; }
    .fit-list li .arrow {
      background: linear-gradient(135deg, var(--purple-400), var(--orange-400));
      -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
      font-weight: 700; margin-right: 12px;
    }
    .fit-closing {
      color: var(--zinc-500); font-style: italic; margin-top: 32px; max-width: 700px;
    }

    /* ── Approach ── */
    .approach-grid {
      display: grid; gap: 24px; grid-template-columns: 1fr;
      margin-top: 48px;
    }
    .approach-card {
      padding: 28px; border-radius: 16px;
      background: rgba(255,255,255,0.02);
      border: 1px solid var(--white-5);
      transition: background 0.3s, transform 0.3s;
    }
    .approach-card:hover {
      background: rgba(255,255,255,0.04);
      transform: translateY(-3px);
    }
    .approach-card h3 {
      font-size: 18px; color: white; margin-bottom: 10px;
      display: flex; align-items: center; gap: 10px;
    }
    .approach-card h3 .approach-icon {
      display: inline-flex; align-items: center; justify-content: center;
      width: 36px; height: 36px; border-radius: 10px; flex-shrink: 0;
      background: linear-gradient(135deg, rgba(139,92,246,0.12) 0%, rgba(249,115,22,0.08) 100%);
      border: 1px solid rgba(139,92,246,0.22);
      font-size: 0; line-height: 1;
      transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1),
                  background 0.5s, border-color 0.5s;
    }
    .approach-card h3 .approach-icon svg {
      width: 18px; height: 18px; color: var(--purple-300);
      transition: color 0.4s, transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
    }
    .approach-card:hover .approach-icon {
      border-color: rgba(249,115,22,0.35);
      background: linear-gradient(135deg, rgba(139,92,246,0.2), rgba(249,115,22,0.15));
      transform: rotate(-6deg);
    }
    .approach-card:hover .approach-icon svg {
      color: white; transform: scale(1.1);
    }
    .approach-card p { color: var(--zinc-400); font-size: 15px; }
    .approach-eval { margin-top: 48px; max-width: 700px; }
    .approach-eval h3 {
      font-size: 20px; color: white; margin-bottom: 20px;
    }
    .approach-eval li {
      color: var(--zinc-300); font-size: 16px; padding: 10px 0;
      border-bottom: 1px solid var(--white-5);
      list-style: none;
    }
    .approach-eval li strong { color: white; }
    @media (min-width: 768px) {
      .approach-grid { grid-template-columns: repeat(2, 1fr); }
    }

    /* ── About ── */
    .about-layout {
      display: grid; gap: 40px;
      grid-template-columns: 1fr;
      align-items: start;
    }
    @media (min-width: 820px) {
      .about-layout { grid-template-columns: 320px 1fr; gap: 56px; }
    }
    @media (min-width: 1100px) {
      .about-layout { grid-template-columns: 360px 1fr; gap: 72px; }
    }
    .about-text { max-width: 100%; }
    .about-text p { color: var(--zinc-400); font-size: 17px; margin-bottom: 20px; line-height: 1.8; }

    .about-portrait {
      margin: 0; position: relative;
      max-width: 360px;
    }
    .about-portrait::before {
      content: ''; position: absolute;
      inset: -14px -14px 64px -14px;
      border-radius: 22px;
      background:
        radial-gradient(ellipse 80% 60% at 20% 10%, rgba(139,92,246,0.35), transparent 70%),
        radial-gradient(ellipse 80% 60% at 90% 90%, rgba(249,115,22,0.25), transparent 70%);
      filter: blur(28px); opacity: 0.9; z-index: 0;
    }
    .about-portrait img {
      position: relative; z-index: 1;
      width: 100%; height: auto; aspect-ratio: 1003 / 1100;
      object-fit: cover;
      border-radius: 14px;
      border: 1px solid var(--white-10);
      box-shadow: 0 24px 60px rgba(0,0,0,0.5),
                  0 0 0 1px rgba(139,92,246,0.18),
                  0 0 40px rgba(139,92,246,0.14);
    }
    .about-portrait figcaption {
      position: relative; z-index: 1;
      margin-top: 18px;
      padding-left: 14px;
      border-left: 2px solid;
      border-image: linear-gradient(180deg, var(--purple-400), var(--orange-400)) 1;
      display: flex; flex-direction: column; gap: 2px;
    }
    .portrait-name {
      font-family: var(--font-display); font-weight: 700; font-size: 15px;
      color: white; letter-spacing: 0.2px;
    }
    .portrait-role {
      font-size: 13px; color: var(--zinc-400);
    }
    .portrait-socials {
      display: flex; gap: 10px; margin-top: 14px;
    }
    .portrait-social-link {
      display: grid; place-items: center;
      width: 36px; height: 36px; border-radius: 9999px;
      background: rgba(255,255,255,0.04);
      border: 1px solid rgba(255,255,255,0.1);
      color: var(--zinc-400);
      transition: color 0.2s, background 0.2s, border-color 0.2s, transform 0.25s;
    }
    .portrait-social-link svg { width: 15px; height: 15px; }
    @media (hover: hover) {
      .portrait-social-link:hover {
        color: white;
        background: rgba(139,92,246,0.15);
        border-color: rgba(139,92,246,0.4);
        transform: translateY(-2px);
      }
    }

    .about-scarcity {
      font-family: var(--font-display); font-size: 22px; font-weight: 700;
      color: var(--purple-400) !important;
      margin-top: 36px !important; padding-top: 28px;
      border-top: 1px solid var(--white-5);
      text-shadow: 0 0 40px rgba(139,92,246,0.15);
    }

    /* ── FAQ ── */
    .faq-grid { max-width: 800px; margin: 0 auto; }
    .faq-item {
      padding: 24px 0; border-bottom: 1px solid var(--white-5);
    }
    .faq-item:first-child { border-top: 1px solid var(--white-5); }
    .faq-q {
      font-family: var(--font-display); font-size: 18px; font-weight: 600;
      color: white; margin-bottom: 10px;
    }
    .faq-a { color: var(--zinc-400); font-size: 15px; line-height: 1.7; }

    /* ── CTA ── */
    .cta-section {
      position: relative; overflow: hidden;
      padding: 96px 0 112px;
      background:
        radial-gradient(ellipse 900px 520px at 20% 30%, rgba(139,92,246,0.09) 0%, transparent 65%),
        radial-gradient(ellipse 700px 420px at 85% 80%, rgba(249,115,22,0.06) 0%, transparent 70%);
    }
    .cta-section::before {
      content: ''; position: absolute; top: 0; left: 10%; right: 10%; height: 1px;
      background: linear-gradient(90deg, transparent, rgba(139,92,246,0.28), rgba(249,115,22,0.2), transparent);
    }
    .cta-section::after {
      content: ''; position: absolute; inset: 0;
      background-image:
        linear-gradient(rgba(255,255,255,0.025) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,0.025) 1px, transparent 1px);
      background-size: 48px 48px;
      mask-image: radial-gradient(ellipse 60% 60% at 50% 50%, black, transparent 80%);
      -webkit-mask-image: radial-gradient(ellipse 60% 60% at 50% 50%, black, transparent 80%);
      opacity: 0.5; pointer-events: none;
    }
    .cta-shell {
      max-width: 1180px; margin: 0 auto; padding: 0 20px;
      position: relative; z-index: 2;
    }
    .cta-grid {
      display: grid; grid-template-columns: 1fr; gap: 28px;
      align-items: stretch;
    }
    @media (min-width: 960px) {
      .cta-grid { grid-template-columns: 1.1fr 1fr; gap: 48px; }
    }

    /* ── CTA Left (lede) ── */
    .cta-kicker {
      display: inline-flex; align-items: center; gap: 8px;
      padding: 6px 14px; border-radius: 9999px;
      background: rgba(139,92,246,0.10);
      border: 1px solid rgba(139,92,246,0.28);
      font-family: var(--font-display); font-size: 11px; font-weight: 600;
      letter-spacing: 1.8px; text-transform: uppercase;
      color: var(--purple-300); margin-bottom: 22px;
    }
    .cta-kicker-dot {
      width: 6px; height: 6px; border-radius: 50%;
      background: var(--orange-500);
      box-shadow: 0 0 0 3px rgba(249,115,22,0.15);
      animation: pulse 2s infinite;
    }
    .cta-section h2 {
      font-size: clamp(30px, 4.4vw, 48px);
      line-height: 1.08; margin-bottom: 20px;
      letter-spacing: -0.01em;
      text-wrap: balance;
    }
    .cta-subtitle {
      display: flex; flex-direction: column; gap: 6px;
      color: var(--zinc-300); font-size: 17px; line-height: 1.55;
      margin: 0 0 28px; max-width: 540px;
      text-wrap: balance;
    }
    .cta-subtitle span:first-child { color: white; font-weight: 500; font-size: 18px; }

    .cta-actions {
      display: flex; flex-wrap: wrap; align-items: center;
      gap: 14px 20px; margin-bottom: 28px;
    }
    .cta-primary { margin: 0; }
    .cta-secondary {
      display: inline-flex; align-items: center; gap: 8px;
      color: var(--zinc-300); font-size: 15px; font-family: var(--font-body);
      padding: 12px 0; text-decoration: none;
      transition: color 0.3s;
      border-bottom: 1px solid transparent;
    }
    .cta-secondary svg { color: var(--purple-300); transition: color 0.3s; }
    .cta-secondary:hover { color: white; }
    .cta-secondary:hover svg { color: var(--orange-400); }

    .cta-socials {
      display: flex; align-items: center; gap: 12px;
      padding-top: 22px; border-top: 1px solid var(--white-5);
    }
    .cta-socials a {
      display: inline-flex; align-items: center; justify-content: center;
      width: 38px; height: 38px; border-radius: 10px;
      background: rgba(255,255,255,0.025);
      border: 1px solid var(--white-10); color: var(--zinc-400);
      transition: background 0.3s, border-color 0.3s, color 0.3s, transform 0.3s;
    }
    .cta-socials a svg { width: 16px; height: 16px; }
    .cta-socials a:hover {
      background: rgba(139,92,246,0.1);
      border-color: rgba(139,92,246,0.35);
      color: white;
      transform: translateY(-2px);
    }

    /* ── CTA Right (panel) ── */
    .cta-panel {
      position: relative;
      padding: 32px;
      border-radius: 20px;
      background: linear-gradient(180deg, rgba(255,255,255,0.035), rgba(255,255,255,0.015));
      border: 1px solid var(--white-10);
      box-shadow: 0 40px 100px rgba(0,0,0,0.35),
                  inset 0 1px 0 rgba(255,255,255,0.05);
      overflow: hidden;
    }
    .cta-panel-bar {
      position: absolute; top: 0; left: 0; right: 0; height: 2px;
      background: linear-gradient(90deg, var(--purple-500), var(--orange-500), transparent 80%);
    }
    .cta-panel::after {
      content: ''; position: absolute; inset: -1px;
      border-radius: 20px; pointer-events: none;
      background: linear-gradient(135deg, rgba(139,92,246,0.15), transparent 40%);
      mask: linear-gradient(black, black) content-box, linear-gradient(black, black);
      -webkit-mask: linear-gradient(black, black) content-box, linear-gradient(black, black);
      -webkit-mask-composite: xor; mask-composite: exclude;
      padding: 1px; opacity: 0.6;
    }
    .cta-panel h3 {
      font-size: 15px; font-family: var(--font-display); font-weight: 600;
      text-transform: uppercase; letter-spacing: 1.6px;
      color: var(--zinc-500); margin-bottom: 20px;
    }
    .cta-audit-list { list-style: none; display: grid; gap: 16px; }
    .cta-audit-list li {
      display: grid; grid-template-columns: 32px 1fr; gap: 14px;
      align-items: start;
    }
    .cta-audit-list li svg {
      width: 20px; height: 20px;
      color: var(--purple-300);
      margin-top: 2px;
    }
    .cta-audit-list li:nth-child(even) svg { color: var(--orange-400); }
    .cta-audit-list strong {
      display: block; color: white; font-size: 15px; font-weight: 600;
      margin-bottom: 2px;
    }
    .cta-audit-list span {
      display: block; color: var(--zinc-400); font-size: 14px; line-height: 1.55;
    }
    .cta-panel-foot {
      margin-top: 24px; padding-top: 24px;
      border-top: 1px dashed var(--white-10);
    }
    .cta-panel-foot > span {
      font-family: var(--font-display); font-size: 11px; font-weight: 600;
      text-transform: uppercase; letter-spacing: 1.8px;
      color: var(--orange-400); display: block; margin-bottom: 8px;
    }
    .cta-panel-foot p {
      color: var(--zinc-300); font-size: 14.5px; line-height: 1.65;
      margin: 0;
    }

    /* ── CTA endnote ── */
    .cta-endnote {
      display: inline-flex; align-items: center; gap: 10px; flex-wrap: wrap;
      margin: 56px auto 0;
      padding: 12px 22px; border-radius: 9999px;
      background: rgba(255,255,255,0.03);
      border: 1px solid var(--white-5);
      color: var(--zinc-500); font-size: 13.5px;
      justify-content: center;
    }
    .cta-shell > .cta-endnote { display: flex; width: fit-content; }
    .cta-endnote-pulse {
      width: 8px; height: 8px; border-radius: 50%;
      background: var(--orange-500);
      box-shadow: 0 0 0 4px rgba(249,115,22,0.12);
      animation: pulse 2.2s infinite;
    }
    .cta-endnote a {
      color: var(--purple-300); text-decoration: none;
      border-bottom: 1px solid rgba(139,92,246,0.35);
      padding-bottom: 1px;
      transition: color 0.3s, border-color 0.3s;
    }
    .cta-endnote a:hover { color: white; border-color: white; }

    @media (max-width: 700px) {
      .cta-section { padding: 72px 0 88px; }
      .cta-panel { padding: 26px 22px; }
      .cta-actions { gap: 12px; }
      .cta-primary { width: 100%; justify-content: center; }
      .cta-secondary { width: 100%; justify-content: center; }
      .cta-endnote { margin-top: 40px; }
    }

    /* ── Tool Constellation ── */
    .tools-section {
      padding: 72px 0; position: relative;
      border-top: 1px solid var(--white-5);
    }
    .tools-head {
      text-align: center; margin-bottom: 48px;
    }
    .tools-kicker, .section-kicker {
      display: inline-block;
      font-family: var(--font-display); font-size: 11px; font-weight: 600;
      text-transform: uppercase; letter-spacing: 2px;
      color: var(--orange-400); margin-bottom: 12px;
    }
    .tools-head h2 {
      font-size: clamp(22px, 3.2vw, 34px); color: white; margin-bottom: 10px;
    }
    .tools-head p {
      color: var(--zinc-400); max-width: 600px; margin: 0 auto; font-size: 16px;
    }
    .tools-grid {
      display: grid; gap: 16px;
      grid-template-columns: 1fr;
      max-width: 1100px; margin: 0 auto;
    }
    @media (min-width: 640px) { .tools-grid { grid-template-columns: repeat(2, 1fr); } }
    @media (min-width: 960px) { .tools-grid { grid-template-columns: repeat(3, 1fr); } }

    .tool-node {
      padding: 22px 22px 20px; border-radius: 14px;
      background: rgba(255,255,255,0.02);
      border: 1px solid var(--white-5);
      position: relative; overflow: hidden;
      transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1),
                  background 0.5s, border-color 0.5s, box-shadow 0.5s;
    }
    .tool-node:hover {
      transform: translateY(-3px);
      background: rgba(255,255,255,0.04);
      border-color: rgba(139,92,246,0.25);
      box-shadow: 0 12px 32px rgba(0,0,0,0.3), 0 0 24px rgba(139,92,246,0.08);
    }
    .tool-node::before {
      content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px;
      background: linear-gradient(90deg, transparent, rgba(139,92,246,0.4), rgba(249,115,22,0.3), transparent);
      transform: scaleX(0); transform-origin: left;
      transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
    }
    .tool-node:hover::before { transform: scaleX(1); }
    .tool-node-head {
      display: flex; align-items: center; gap: 12px; margin-bottom: 10px;
    }
    .tool-mark {
      display: inline-flex; align-items: center; justify-content: center;
      width: 32px; height: 32px; border-radius: 8px; flex-shrink: 0;
      background: linear-gradient(135deg, rgba(139,92,246,0.15), rgba(249,115,22,0.1));
      border: 1px solid rgba(139,92,246,0.25);
      font-family: var(--font-display); font-weight: 700; font-size: 13px;
      color: var(--purple-300);
      transition: all 0.4s;
    }
    .tool-node:hover .tool-mark {
      color: white;
      background: linear-gradient(135deg, rgba(139,92,246,0.28), rgba(249,115,22,0.2));
      border-color: rgba(249,115,22,0.4);
    }
    .tool-node h4 {
      font-family: var(--font-display); font-size: 15px; font-weight: 700;
      color: white; letter-spacing: -0.2px;
    }
    .tool-node p {
      color: var(--zinc-400); font-size: 14px; line-height: 1.6;
    }
    .tools-footnote {
      color: var(--zinc-500); font-size: 13px; text-align: center; margin-top: 32px;
      font-style: italic;
    }

    /* ── Integrations Marquee ── */
    .integrations-section {
      padding: 88px 0 96px; position: relative;
      border-top: 1px solid var(--white-5);
      background:
        radial-gradient(ellipse 1200px 400px at 50% 0%, rgba(168,85,247,0.06), transparent 60%),
        radial-gradient(ellipse 1200px 400px at 50% 100%, rgba(249,115,22,0.04), transparent 60%);
    }
    .integrations-head { text-align: center; max-width: 720px; margin: 0 auto 48px; padding: 0 20px; }
    .integrations-kicker {
      display: inline-block; font-family: var(--font-display); font-size: 12px;
      font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase;
      color: var(--purple-400); margin-bottom: 16px;
    }
    .integrations-head h2 {
      font-family: var(--font-display); font-size: clamp(24px, 4vw, 40px);
      font-weight: 700; color: white; margin-bottom: 16px; letter-spacing: -0.5px;
      line-height: 1.15;
    }
    .integrations-head p {
      color: var(--zinc-400); font-size: 17px; line-height: 1.65; max-width: 600px; margin: 0 auto;
    }
    .integrations-stats {
      display: flex; justify-content: center; gap: 40px; flex-wrap: wrap;
      margin: 32px auto 0; max-width: 700px;
    }
    .integrations-stat { text-align: center; }
    .integrations-stat-num {
      font-family: var(--font-display); font-size: 28px; font-weight: 700;
      background: linear-gradient(135deg, var(--purple-300), var(--orange-300));
      -webkit-background-clip: text; background-clip: text;
      -webkit-text-fill-color: transparent;
      letter-spacing: -0.5px;
    }
    .integrations-stat-label {
      font-size: 12px; color: var(--zinc-500); text-transform: uppercase;
      letter-spacing: 0.15em; margin-top: 4px;
    }

    .marquee {
      overflow: hidden; position: relative;
      padding: 12px 0; margin: 0 auto;
      -webkit-mask-image: linear-gradient(to right, transparent 0%, black 8%, black 92%, transparent 100%);
              mask-image: linear-gradient(to right, transparent 0%, black 8%, black 92%, transparent 100%);
    }
    .marquee + .marquee { margin-top: 14px; }
    .marquee-track {
      display: flex; gap: 14px; width: max-content;
      animation: marquee-scroll 80s linear infinite;
      will-change: transform;
    }
    .marquee-reverse .marquee-track {
      animation-name: marquee-scroll-rev;
      animation-duration: 95s;
    }
    .marquee:hover .marquee-track { animation-play-state: paused; }
    @keyframes marquee-scroll {
      from { transform: translateX(0); }
      to   { transform: translateX(-50%); }
    }
    @keyframes marquee-scroll-rev {
      from { transform: translateX(-50%); }
      to   { transform: translateX(0); }
    }
    @media (prefers-reduced-motion: reduce) {
      .marquee-track { animation: none !important; transform: translateX(0); }
      .marquee { -webkit-mask-image: none; mask-image: none; overflow-x: auto; }
    }

    .marquee-logo {
      flex: 0 0 auto;
      display: inline-flex; align-items: center; gap: 10px;
      padding: 10px 18px; border-radius: 9999px;
      background: rgba(255,255,255,0.035);
      border: 1px solid var(--white-10);
      color: var(--zinc-300);
      transition: background 0.3s, border-color 0.3s, transform 0.3s, color 0.3s;
      white-space: nowrap;
    }
    .marquee-logo:hover {
      background: rgba(168,85,247,0.08);
      border-color: rgba(168,85,247,0.35);
      color: white;
      transform: translateY(-1px);
    }
    .marquee-logo img {
      width: 18px; height: 18px; flex-shrink: 0;
      filter: brightness(0) invert(1) opacity(0.85);
      transition: filter 0.3s;
    }
    .marquee-logo:hover img { filter: none; }
    .marquee-logo span {
      font-family: var(--font-display); font-size: 13px; font-weight: 500;
      letter-spacing: -0.1px;
    }

    .integrations-foot {
      text-align: center; margin-top: 40px; padding: 0 20px;
    }
    .integrations-foot p {
      color: var(--zinc-400); font-size: 15px;
    }
    .integrations-foot a {
      color: var(--orange-400); font-weight: 600; text-decoration: none;
      border-bottom: 1px solid transparent; transition: border-color 0.2s;
    }
    .integrations-foot a:hover { border-bottom-color: var(--orange-400); }

    /* ══════════════════════════════════════════════
       CHATOPS — "your stack, from the apps your team lives in"
    ══════════════════════════════════════════════ */
    .chatops-section {
      position: relative; overflow: hidden;
      background:
        radial-gradient(ellipse 800px 480px at 90% 30%, rgba(74,21,75,0.18) 0%, transparent 65%),
        radial-gradient(ellipse 700px 420px at 10% 80%, rgba(34,158,217,0.10) 0%, transparent 65%);
    }
    .chatops-section::before {
      content: ''; position: absolute; inset: 0; pointer-events: none;
      background-image:
        linear-gradient(rgba(255,255,255,0.02) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,0.02) 1px, transparent 1px);
      background-size: 56px 56px;
      mask-image: radial-gradient(ellipse 70% 70% at 50% 50%, black, transparent 85%);
      -webkit-mask-image: radial-gradient(ellipse 70% 70% at 50% 50%, black, transparent 85%);
      opacity: 0.5;
    }
    .chatops-grid {
      display: grid; grid-template-columns: 1fr; gap: 48px;
      align-items: center;
      position: relative; z-index: 2;
    }
    @media (min-width: 960px) {
      .chatops-grid { grid-template-columns: 1fr 1.05fr; gap: 56px; }
    }

    /* LEFT lede */
    .chatops-kicker {
      display: inline-flex; align-items: center; gap: 8px;
      padding: 6px 14px; border-radius: 9999px;
      background: linear-gradient(135deg, rgba(74,21,75,0.25), rgba(88,101,242,0.18));
      border: 1px solid rgba(139,92,246,0.35);
      color: #c9b8ff;
      font-family: var(--font-display); font-size: 11px; font-weight: 600;
      letter-spacing: 1.8px; text-transform: uppercase;
      margin-bottom: 22px;
    }
    .chatops-kicker svg { width: 13px; height: 13px; }
    .chatops-lede h2 {
      font-size: clamp(28px, 4vw, 44px); line-height: 1.1;
      margin-bottom: 18px; letter-spacing: -0.01em;
      text-wrap: balance;
    }
    .chatops-subtitle {
      display: flex; flex-direction: column; gap: 6px;
      color: var(--zinc-300); font-size: 16.5px; line-height: 1.55;
      margin: 0 0 24px; max-width: 520px;
      text-wrap: balance;
    }
    .chatops-subtitle span:first-child { color: white; font-weight: 500; font-size: 17.5px; }
    .chatops-points {
      list-style: none; margin: 0 0 28px; padding: 0;
      display: grid; gap: 12px;
    }
    .chatops-points li {
      display: grid; grid-template-columns: 24px 1fr; gap: 12px;
      align-items: start;
      color: var(--zinc-300); font-size: 15px; line-height: 1.55;
    }
    .chatops-points li strong { color: white; font-weight: 600; }
    .chatops-point-ico {
      display: inline-flex; align-items: center; justify-content: center;
      width: 22px; height: 22px; border-radius: 6px;
      background: linear-gradient(135deg, rgba(139,92,246,0.22), rgba(249,115,22,0.14));
      border: 1px solid rgba(139,92,246,0.3);
      color: var(--purple-200);
      margin-top: 1px;
    }
    .chatops-point-ico svg { width: 13px; height: 13px; }

    /* Platform row */
    .chatops-platforms {
      display: flex; flex-wrap: wrap; gap: 8px;
      margin: 24px 0 28px;
    }
    .chatops-platform {
      display: inline-flex; align-items: center; gap: 8px;
      padding: 8px 12px; border-radius: 10px;
      background: rgba(255,255,255,0.03);
      border: 1px solid var(--white-10);
      color: var(--zinc-300); font-family: var(--font-display);
      font-size: 13px; font-weight: 500;
      transition: background 0.3s, border-color 0.3s, transform 0.3s, color 0.3s;
    }
    .chatops-platform:hover {
      background: rgba(255,255,255,0.05);
      border-color: rgba(139,92,246,0.35);
      color: white; transform: translateY(-2px);
    }
    .chatops-platform img,
    .chatops-platform svg {
      width: 16px; height: 16px;
      filter: grayscale(0.2) brightness(1.1);
    }
    /* Keep Slack full-color (brand identity) */
    .chatops-platform-ico-slack,
    .chatops-tab-ico-slack {
      filter: none !important;
    }

    .chatops-cta {
      display: inline-flex; align-items: center; gap: 8px;
      padding: 12px 22px; border-radius: 9999px;
      background: white; color: var(--zinc-950);
      font-family: var(--font-body); font-weight: 600; font-size: 14px;
      text-decoration: none; cursor: pointer;
      transition: background 0.3s, transform 0.3s cubic-bezier(0.16,1,0.3,1), box-shadow 0.3s;
      box-shadow: 0 8px 24px rgba(0,0,0,0.35);
    }
    .chatops-cta:hover {
      background: #e4e4e7; transform: translateY(-2px);
      box-shadow: 0 14px 34px rgba(0,0,0,0.4), 0 0 30px rgba(139,92,246,0.2);
    }
    .chatops-cta svg { transition: transform 0.3s cubic-bezier(0.16,1,0.3,1); }
    .chatops-cta:hover svg { transform: translateX(3px); }

    /* ── iPhone 17 Pro frame (3D glass · ~2.1:1 aspect) ── */
    .chatops-phone {
      position: relative;
      width: 100%; max-width: 360px;
      margin: 0 auto;
      padding: 11px 11px 13px;
      border-radius: 56px;
      background:
        linear-gradient(135deg, #3a3a42 0%, #1a1a1f 22%, #0a0a0d 52%, #18181d 78%, #36363d 100%);
      box-shadow:
        0 80px 140px -20px rgba(0,0,0,0.75),
        0 40px 70px -10px rgba(0,0,0,0.55),
        0 0 60px rgba(139,92,246,0.18),
        inset 0 0 0 1px rgba(255,255,255,0.08),
        inset 0 2px 0 rgba(255,255,255,0.14),
        inset 0 -2px 0 rgba(0,0,0,0.5);
      transform: perspective(2400px) rotateY(-7deg) rotateX(3deg) rotateZ(-0.6deg);
      transform-origin: center;
      transition: transform 0.8s cubic-bezier(0.16,1,0.3,1);
      isolation: isolate;
    }
    @media (hover: hover) {
      .chatops-phone:hover { transform: perspective(2400px) rotateY(-3deg) rotateX(1deg) rotateZ(0deg) translateY(-4px); }
    }
    @media (max-width: 959px) {
      .chatops-phone { transform: none; max-width: 340px; }
    }
    /* Ambient glow behind phone */
    .chatops-phone-glow {
      position: absolute; inset: -40px -60px -80px;
      background:
        radial-gradient(ellipse 60% 50% at 20% 20%, rgba(139,92,246,0.25), transparent 60%),
        radial-gradient(ellipse 60% 50% at 80% 80%, rgba(249,115,22,0.14), transparent 60%);
      filter: blur(40px);
      z-index: -1; pointer-events: none;
    }
    /* Top-left glass reflection sweep */
    .chatops-phone-reflection {
      position: absolute; inset: 0; border-radius: inherit;
      background:
        linear-gradient(135deg, rgba(255,255,255,0.18) 0%, rgba(255,255,255,0.04) 18%, transparent 42%),
        linear-gradient(225deg, rgba(255,255,255,0.06) 0%, transparent 30%);
      pointer-events: none; z-index: 5;
      mix-blend-mode: screen;
    }
    /* Phone frame overlay (Dynamic Island + statusbar live here, above the screen) */
    .chatops-phone-frame {
      position: absolute; top: 11px; left: 11px; right: 11px;
      height: 56px;
      z-index: 4; pointer-events: none;
    }
    .chatops-phone-island {
      position: absolute; top: 12px; left: 50%; transform: translateX(-50%);
      width: 120px; height: 34px; border-radius: 9999px;
      background: #000;
      box-shadow:
        inset 0 0 0 1px rgba(255,255,255,0.05),
        inset 0 2px 4px rgba(0,0,0,0.8),
        0 1px 0 rgba(255,255,255,0.04);
    }
    .chatops-phone-island::after {
      content: ''; position: absolute;
      top: 50%; right: 10px; transform: translateY(-50%);
      width: 9px; height: 9px; border-radius: 50%;
      background: radial-gradient(circle at 30% 30%, #3a3a44, #05050a 60%);
      box-shadow: inset 0 0 0 1px rgba(255,255,255,0.06);
    }
    .chatops-phone-statusbar {
      position: absolute; top: 20px; left: 0; right: 0;
      display: flex; justify-content: space-between; align-items: center;
      padding: 0 24px;
      font-family: var(--font-display); font-size: 13px; font-weight: 600;
      color: white; letter-spacing: 0.2px;
    }
    .chatops-phone-time { font-variant-numeric: tabular-nums; }
    .chatops-phone-icons {
      display: inline-flex; align-items: center; gap: 5px; color: white;
    }
    .chatops-phone-icons svg { height: 11px; width: auto; }
    .chatops-phone-battery { height: 12px !important; }
    .chatops-phone-homebar {
      position: absolute; bottom: 7px; left: 50%; transform: translateX(-50%);
      width: 120px; height: 4px; border-radius: 9999px;
      background: rgba(255,255,255,0.35);
      z-index: 3;
    }

    /* RIGHT chat window — phone screen at iPhone 17 Pro ~2.1:1 ratio */
    .chatops-window {
      position: relative;
      display: flex; flex-direction: column;
      height: 740px;
      border-radius: 46px; overflow: hidden;
      background: linear-gradient(180deg, #0e0e12 0%, #0a0a0d 100%);
      padding-top: 58px;
      box-shadow:
        inset 0 0 0 1px rgba(255,255,255,0.04),
        inset 0 0 40px rgba(0,0,0,0.5);
    }
    @media (max-width: 959px) {
      .chatops-window { height: 700px; }
    }
    @media (max-width: 700px) {
      .chatops-window { height: 680px; border-radius: 42px; }
    }
    .chatops-window::before {
      content: ''; position: absolute; inset: 0;
      background:
        radial-gradient(ellipse 60% 30% at 50% 0%, rgba(139,92,246,0.14), transparent 70%),
        linear-gradient(135deg, rgba(139,92,246,0.05), transparent 50%);
      pointer-events: none; z-index: 1;
    }
    /* (stagger animation moved next to pane styles — see below) */

    /* Platform tabs — iOS 26 Liquid Glass */
    .chatops-window-tabs {
      position: relative; z-index: 3;
      display: flex;
      gap: 3px;
      margin: 8px 12px 4px;
      padding: 4px;
      border-radius: 9999px;
      background:
        radial-gradient(ellipse 80% 100% at 50% 0%, rgba(255,255,255,0.10) 0%, rgba(255,255,255,0.04) 60%, rgba(255,255,255,0.02) 100%);
      backdrop-filter: blur(24px) saturate(200%);
      -webkit-backdrop-filter: blur(24px) saturate(200%);
      border: 1px solid rgba(255,255,255,0.08);
      box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.22),
        inset 0 -1px 0 rgba(0,0,0,0.3),
        0 6px 18px rgba(0,0,0,0.32);
      overflow: hidden;
    }
    .chatops-window-tabs::-webkit-scrollbar { display: none; }
    .chatops-tab {
      position: relative;
      flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 6px;
      padding: 8px 6px; border: none; cursor: pointer;
      background: transparent; color: rgba(255,255,255,0.55);
      font-family: var(--font-display); font-size: 11.5px; font-weight: 600;
      letter-spacing: 0.1px;
      white-space: nowrap;
      border-radius: 9999px;
      transition:
        transform 0.5s cubic-bezier(0.34,1.56,0.64,1),
        color 0.25s,
        box-shadow 0.35s;
    }
    .chatops-tab img, .chatops-tab svg { width: 14px; height: 14px; }
    .chatops-tab:hover { color: rgba(255,255,255,0.85); }
    .chatops-tab:active { transform: scale(0.94); }
    .chatops-tab.is-active {
      color: white;
      background:
        radial-gradient(ellipse 80% 100% at 50% 0%, rgba(255,255,255,0.35) 0%, rgba(255,255,255,0.12) 55%, rgba(255,255,255,0.05) 100%);
      box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.5),
        inset 0 -0.5px 0 rgba(0,0,0,0.18),
        inset 0 0 0 0.5px rgba(255,255,255,0.15),
        0 4px 12px rgba(0,0,0,0.35);
      transform: translateY(-1px) scale(1.02);
    }
    .chatops-tab.is-active::after {
      content: ''; position: absolute;
      left: 10%; right: 10%; top: 2px; height: 30%;
      border-radius: 9999px;
      background: linear-gradient(180deg, rgba(255,255,255,0.45), rgba(255,255,255,0) 70%);
      pointer-events: none; filter: blur(0.5px);
    }

    /* ── Pane system: only one app at a time, fills remaining window height ── */
    .chatops-pane { display: none; position: relative; z-index: 2; flex-direction: column; min-height: 0; }
    .chatops-window[data-active="slack"]    .chatops-pane[data-pane="slack"],
    .chatops-window[data-active="telegram"] .chatops-pane[data-pane="telegram"],
    .chatops-window[data-active="discord"]  .chatops-pane[data-pane="discord"],
    .chatops-window[data-active="whatsapp"] .chatops-pane[data-pane="whatsapp"] { display: flex; flex: 1; }

    .chatops-pane-head {
      display: flex; align-items: center; gap: 12px;
      padding: 11px 16px;
      color: white; font-family: var(--font-display);
    }
    .chatops-head-stack { display: flex; flex-direction: column; line-height: 1.2; min-width: 0; }
    .chatops-head-title { color: white; font-size: 14.5px; font-weight: 600; letter-spacing: -0.01em; }
    .chatops-head-sub { color: rgba(255,255,255,0.55); font-size: 11.5px; font-weight: 400; }
    .chatops-head-spacer { flex: 1; }
    .chatops-head-ico-btn { width: 18px; height: 18px; color: rgba(255,255,255,0.5); flex-shrink: 0; }
    .chatops-head-back { width: 18px; height: 18px; color: rgba(255,255,255,0.85); flex-shrink: 0; }

    /* Slack pane head */
    .chatops-head-slack {
      background: linear-gradient(180deg, #4A154B 0%, #3D0F3E 100%);
      box-shadow: 0 1px 0 rgba(0,0,0,0.3);
    }
    .chatops-head-slack .chatops-head-hash { color: rgba(255,255,255,0.55); font-weight: 400; margin-right: 2px; }
    .chatops-head-slack .chatops-head-sub { color: rgba(255,255,255,0.55); }
    .chatops-head-wsicon {
      width: 30px; height: 30px; border-radius: 7px;
      display: grid; place-items: center;
      background: linear-gradient(135deg, #611F69, #9F1F69);
      color: white; font-weight: 800; font-size: 14px;
      box-shadow: inset 0 1px 0 rgba(255,255,255,0.15), 0 1px 2px rgba(0,0,0,0.3);
      flex-shrink: 0;
    }

    /* Telegram pane head */
    .chatops-head-telegram {
      background: linear-gradient(180deg, #2AABEE 0%, #229ED9 100%);
      padding: 10px 14px;
    }
    .chatops-tg-avatar {
      width: 34px; height: 34px; border-radius: 50%;
      display: grid; place-items: center;
      background: linear-gradient(135deg, #F37335, #FDC830);
      color: white; font-weight: 700; font-size: 15px;
      box-shadow: 0 1px 3px rgba(0,0,0,0.2);
      flex-shrink: 0;
    }
    .chatops-head-telegram .chatops-head-sub { color: rgba(255,255,255,0.78); display: flex; align-items: center; gap: 5px; }
    .chatops-dot-online { width: 7px; height: 7px; border-radius: 50%; background: #53E682; box-shadow: 0 0 4px #53E682; display: inline-block; }

    /* Discord pane head */
    .chatops-head-discord {
      background: #2B2D31;
      box-shadow: 0 1px 0 rgba(0,0,0,0.2);
      padding: 12px 16px;
    }
    .chatops-dc-hash {
      color: #949ba4; font-size: 22px; font-weight: 500; line-height: 1;
      margin-right: -2px;
    }
    .chatops-head-discord .chatops-head-title { font-size: 15px; margin-right: 4px; }
    .chatops-dc-divider { width: 1px; height: 18px; background: #3f4147; }
    .chatops-dc-topic { color: #b5bac1; font-size: 13px; font-weight: 500; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

    /* WhatsApp pane head */
    .chatops-head-wa {
      background: linear-gradient(180deg, #1F2C33 0%, #111B21 100%);
      padding: 10px 14px;
    }
    .chatops-wa-avatar {
      width: 34px; height: 34px; border-radius: 50%;
      display: grid; place-items: center;
      background: linear-gradient(135deg, #25D366, #128C7E);
      color: white; font-weight: 700; font-size: 15px;
      flex-shrink: 0;
    }
    .chatops-wa-verified {
      display: inline-grid; place-items: center;
      width: 14px; height: 14px; border-radius: 50%;
      background: #25D366; color: white; font-size: 9px; font-weight: 900;
      margin-left: 2px; vertical-align: 1px;
    }
    .chatops-head-wa .chatops-head-sub { color: #8696A0; }

    /* ── Pane body (base) — fills remaining height, clips overflow ── */
    .chatops-pane-body {
      position: relative;
      flex: 1; min-height: 0;
      padding: 16px 18px 10px;
      display: flex; flex-direction: column; gap: 14px;
      overflow: hidden;
    }
    .chatops-pane-head,
    .chatops-pane-input { position: relative; z-index: 2; flex-shrink: 0; }

    /* ── Pane input (base; each app restyles) ── */
    .chatops-pane-input {
      display: flex; align-items: center; gap: 10px;
      padding: 11px 14px; margin: 4px 12px 12px;
      border-radius: 12px;
      background: rgba(255,255,255,0.04);
      border: 1px solid rgba(255,255,255,0.06);
      color: rgba(255,255,255,0.45); font-size: 13px;
      font-family: var(--font-display);
    }
    .chatops-pane-input span { flex: 1; }
    .chatops-pane-input svg { width: 18px; height: 18px; flex-shrink: 0; }

    .chatops-input-slack { background: rgba(255,255,255,0.03); }
    .chatops-input-slack svg:first-of-type { color: rgba(255,255,255,0.35); }
    .chatops-input-slack svg:last-of-type { color: #a78bfa; }

    .chatops-input-tg {
      background: #182533;
      border-color: rgba(255,255,255,0.04);
      border-radius: 22px;
      color: #8CA2BD;
    }
    .chatops-input-tg .chatops-input-send { color: #6AB8FF; width: 20px; height: 20px; }
    .chatops-input-tg > svg:first-of-type { color: #6D8BA3; }

    .chatops-input-dc {
      background: #383a40;
      border-color: transparent;
      border-radius: 10px;
      color: #b5bac1;
    }
    .chatops-input-dc .chatops-dc-plus {
      width: 22px; height: 22px; border-radius: 50%;
      background: #b5bac1; color: #383a40;
      display: grid; place-items: center; font-weight: 700; font-size: 15px; line-height: 1;
    }
    .chatops-input-dc .chatops-dc-gif {
      padding: 1px 6px; border-radius: 4px; background: rgba(255,255,255,0.06);
      color: #b5bac1; font-size: 11px; font-weight: 700; letter-spacing: 0.5px;
    }

    .chatops-input-wa {
      background: #1F2C33;
      border: none; border-radius: 22px;
      color: #8696A0;
    }
    .chatops-input-wa > svg:first-of-type { color: #8696A0; }
    .chatops-input-wa .chatops-input-send {
      width: 32px; height: 32px; padding: 6px;
      background: #00A884; border-radius: 50%; color: white;
      flex-shrink: 0;
    }

    /* Little use-case chip pinned bottom of pane (rotates with tab) */
    .chatops-usecase-chip {
      position: absolute;
      top: 62px; right: 14px;
      z-index: 5;
      padding: 5px 11px; border-radius: 9999px;
      background: rgba(0,0,0,0.55);
      backdrop-filter: blur(14px) saturate(180%);
      -webkit-backdrop-filter: blur(14px) saturate(180%);
      border: 1px solid rgba(255,255,255,0.12);
      color: rgba(255,255,255,0.92);
      font-family: var(--font-display); font-size: 10.5px; font-weight: 600;
      letter-spacing: 0.3px; text-transform: uppercase;
      box-shadow: 0 6px 16px rgba(0,0,0,0.35), inset 0 1px 0 rgba(255,255,255,0.15);
    }
    .chatops-msg {
      display: grid; grid-template-columns: 36px 1fr; gap: 12px;
      align-items: start;
    }
    .chatops-avatar {
      width: 36px; height: 36px; border-radius: 8px;
      display: grid; place-items: center;
      flex-shrink: 0; overflow: hidden;
    }
    .chatops-avatar-user {
      background-image: url('/max-avatar.jpg');
      background-size: cover; background-position: center;
      background-color: #333;
    }
    .chatops-avatar-agent {
      background: linear-gradient(135deg, #4A154B, var(--purple-600));
      color: white;
      box-shadow: 0 0 0 1px rgba(139,92,246,0.3), inset 0 1px 0 rgba(255,255,255,0.1);
    }
    .chatops-avatar-agent svg { width: 20px; height: 20px; }
    .chatops-msg-head {
      display: inline-flex; align-items: baseline; gap: 8px;
      margin-bottom: 4px;
    }
    .chatops-msg-name {
      color: white; font-family: var(--font-display);
      font-size: 14px; font-weight: 600;
    }
    .chatops-msg-time {
      color: var(--zinc-500); font-size: 11.5px;
      font-family: var(--font-display);
    }
    .chatops-badge {
      display: inline-block; padding: 1px 5px;
      background: rgba(139,92,246,0.2); color: var(--purple-300);
      border-radius: 3px; font-size: 9.5px;
      letter-spacing: 0.5px; font-weight: 600;
      margin-left: 2px;
      vertical-align: 1px;
    }
    .chatops-bubble {
      color: var(--zinc-200); font-size: 14.5px; line-height: 1.55;
      padding: 10px 14px; border-radius: 12px;
      background: rgba(255,255,255,0.03);
      border: 1px solid rgba(255,255,255,0.05);
      max-width: 92%;
    }
    .chatops-bubble-agent {
      background: linear-gradient(180deg, rgba(139,92,246,0.08), rgba(139,92,246,0.04));
      border-color: rgba(139,92,246,0.18);
    }
    .chatops-steps {
      list-style: none; margin: 10px 0 0; padding: 0;
      display: grid; gap: 6px;
    }
    .chatops-steps li {
      display: grid; grid-template-columns: 18px 1fr; gap: 8px;
      align-items: start;
      color: var(--zinc-300); font-size: 13.5px; line-height: 1.55;
    }
    .chatops-steps li strong { color: white; }
    .chatops-step-ico {
      display: inline-flex; align-items: center; justify-content: center;
      width: 16px; height: 16px; border-radius: 50%;
      font-size: 10px; font-weight: 700; margin-top: 2px;
    }
    .chatops-steps li.is-done .chatops-step-ico {
      background: rgba(34,197,94,0.18); color: #4ade80;
    }
    .chatops-steps li.is-warn .chatops-step-ico {
      background: rgba(249,115,22,0.18); color: var(--orange-400);
    }
    .chatops-steps li.is-warn { color: var(--zinc-200); }
    .chatops-mention {
      color: var(--purple-300);
      background: rgba(139,92,246,0.14);
      padding: 0 4px; border-radius: 4px;
      font-weight: 500;
    }

    .chatops-inline-actions {
      display: flex; flex-wrap: wrap; gap: 8px;
      margin-top: 12px;
    }
    .chatops-chip {
      font-family: var(--font-body); font-size: 12.5px; font-weight: 600;
      padding: 6px 12px; border-radius: 6px; cursor: pointer;
      border: 1px solid var(--white-10);
      background: rgba(255,255,255,0.025);
      color: var(--zinc-200);
      transition: background 0.2s, border-color 0.2s, color 0.2s;
    }
    .chatops-chip:hover {
      background: rgba(255,255,255,0.06);
      border-color: rgba(139,92,246,0.35);
      color: white;
    }
    .chatops-chip-primary {
      background: rgba(249,115,22,0.12);
      border-color: rgba(249,115,22,0.32);
      color: var(--orange-400);
    }
    .chatops-chip-primary:hover {
      background: rgba(249,115,22,0.2);
      color: white;
    }

    /* Typing indicator */
    .chatops-msg-typing .chatops-bubble-agent {
      padding: 12px 16px;
    }
    .chatops-typing {
      display: inline-flex; gap: 5px; align-items: center;
    }
    .chatops-typing-dot {
      width: 6px; height: 6px; border-radius: 50%;
      background: var(--purple-400);
      animation: chatops-bounce 1.3s infinite;
    }
    .chatops-typing-dot:nth-child(2) { animation-delay: 0.18s; }
    .chatops-typing-dot:nth-child(3) { animation-delay: 0.36s; }
    @keyframes chatops-bounce {
      0%, 80%, 100% { transform: translateY(0); opacity: 0.4; }
      40% { transform: translateY(-4px); opacity: 1; }
    }

    /* ══════════════════════════════════════════════
       PANE-SPECIFIC BODY STYLING
    ══════════════════════════════════════════════ */

    /* TELEGRAM bubble layout (bubble-tail, side alignment) */
    .chatops-body-tg {
      background:
        radial-gradient(circle at 20% 10%, rgba(34,158,217,0.06), transparent 50%),
        linear-gradient(180deg, #0E1621 0%, #17212B 100%);
      padding: 14px 12px 8px;
    }
    .chatops-tg-date {
      align-self: center;
      padding: 3px 10px; border-radius: 12px;
      background: rgba(26,49,71,0.7); color: #8CA2BD;
      font-size: 11.5px; font-weight: 500;
      margin-bottom: 4px;
    }
    .chatops-tg-msg { display: flex; max-width: 86%; }
    .chatops-tg-them { align-self: flex-start; }
    .chatops-tg-me   { align-self: flex-end; }
    .chatops-tg-bubble {
      position: relative;
      padding: 7px 12px 8px;
      border-radius: 14px;
      font-size: 14px; line-height: 1.45;
      color: #E8EDF2;
      max-width: 100%;
      word-wrap: break-word;
    }
    .chatops-tg-them .chatops-tg-bubble {
      background: #182533;
      border-bottom-left-radius: 4px;
      box-shadow: 0 1px 2px rgba(0,0,0,0.3);
    }
    .chatops-tg-me .chatops-tg-bubble {
      background: linear-gradient(180deg, #2B5278, #1E3A5A);
      border-bottom-right-radius: 4px;
      box-shadow: 0 1px 2px rgba(0,0,0,0.3);
    }
    .chatops-tg-time {
      display: inline-block; float: right;
      margin: 6px 0 -2px 10px;
      font-size: 10.5px; color: rgba(255,255,255,0.4);
      font-variant-numeric: tabular-nums;
    }
    .chatops-tg-check { color: #6AB8FF; margin-left: 2px; }
    .chatops-tg-alert {
      color: #FFCB70; margin-bottom: 4px;
    }
    .chatops-tg-bubble code {
      background: rgba(0,0,0,0.3); padding: 1px 5px; border-radius: 4px;
      font-family: 'SF Mono', 'Menlo', monospace; font-size: 12px;
      color: #7BD3F5;
    }
    .chatops-tg-actions { margin-top: 10px; clear: both; }
    .chatops-body-tg .chatops-steps { margin: 8px 0 4px; }

    /* DISCORD bubble layout (flat rows, role color names, embed card) */
    .chatops-body-dc {
      background: #313338;
      padding: 12px 16px 8px;
      gap: 16px;
    }
    .chatops-dc-msg { grid-template-columns: 40px 1fr; gap: 14px; }
    .chatops-dc-msg .chatops-avatar,
    .chatops-dc-msg .chatops-dc-avatar-bot {
      width: 40px; height: 40px; border-radius: 50%;
      overflow: hidden;
    }
    .chatops-dc-avatar-bot {
      display: grid; place-items: center;
      background: linear-gradient(135deg, #5865F2, #404EED);
      box-shadow: inset 0 1px 0 rgba(255,255,255,0.1);
    }
    .chatops-dc-avatar-bot svg { width: 22px; height: 22px; }
    .chatops-dc-msg .chatops-msg-head { margin-bottom: 2px; gap: 6px; }
    .chatops-dc-name { font-size: 15px; font-weight: 600; }
    .chatops-dc-name-user { color: #f2d675; }
    .chatops-dc-name-bot  { color: #c39cf5; }
    .chatops-dc-msg .chatops-msg-time { color: #949ba4; font-size: 12px; }
    .chatops-dc-badge {
      background: #5865F2; color: white;
      font-size: 10px; padding: 1px 5px; border-radius: 3px;
      vertical-align: 1px;
    }
    .chatops-dc-text {
      color: #dbdee1; font-size: 15px; line-height: 1.45;
    }
    .chatops-dc-text code, .chatops-dc-embed code {
      background: #2b2d31; padding: 1px 5px; border-radius: 4px;
      font-family: 'SF Mono', 'Menlo', monospace; font-size: 13px;
      color: #dbdee1;
    }
    .chatops-dc-embed {
      margin-top: 8px;
      padding: 12px 14px;
      border-radius: 6px;
      background: #2b2d31;
      border-left: 4px solid #5865F2;
      color: #dbdee1; font-size: 14px;
    }
    .chatops-dc-embed-title {
      color: white; font-weight: 700; font-size: 14px;
      margin-bottom: 6px;
    }
    .chatops-dc-embed .chatops-steps li { color: #dbdee1; }
    .chatops-dc-reactions {
      display: flex; flex-wrap: wrap; gap: 4px;
      margin-top: 8px;
    }
    .chatops-dc-reaction {
      display: inline-flex; align-items: center; gap: 4px;
      padding: 3px 7px; border-radius: 8px;
      background: rgba(88,101,242,0.15);
      border: 1px solid rgba(88,101,242,0.3);
      font-size: 13px; color: white;
      cursor: pointer;
      transition: background 0.2s;
    }
    .chatops-dc-reaction span { color: #c7d4ff; font-weight: 600; font-size: 12px; }
    .chatops-dc-reaction:hover { background: rgba(88,101,242,0.25); }
    .chatops-dc-reaction-add {
      width: 26px; height: 22px;
      display: inline-grid; place-items: center;
      border-radius: 8px;
      background: rgba(255,255,255,0.04);
      border: 1px solid rgba(255,255,255,0.06);
      color: #949ba4; font-size: 13px;
      cursor: pointer;
    }

    /* WHATSAPP bubble layout (chat tails, double-check marks, dark teal bg) */
    .chatops-body-wa {
      background:
        linear-gradient(180deg, #0B141A 0%, #111B21 100%);
      padding: 14px 10px 8px;
      position: relative;
    }
    .chatops-body-wa::before {
      content: ''; position: absolute; inset: 0;
      background-image:
        radial-gradient(circle at 20% 30%, rgba(37,211,102,0.05) 0%, transparent 50%),
        radial-gradient(circle at 80% 70%, rgba(37,211,102,0.04) 0%, transparent 50%);
      pointer-events: none;
    }
    .chatops-wa-date {
      align-self: center;
      margin: 2px 0 6px;
    }
    .chatops-wa-date span {
      padding: 4px 10px; border-radius: 12px;
      background: #1F2C33; color: #8696A0;
      font-size: 10.5px; font-weight: 600; letter-spacing: 0.5px;
    }
    .chatops-wa-msg { display: flex; max-width: 88%; position: relative; z-index: 1; }
    .chatops-wa-them { align-self: flex-start; }
    .chatops-wa-me   { align-self: flex-end; }
    .chatops-wa-bubble {
      padding: 6px 10px 7px;
      border-radius: 7.5px;
      color: #E9EDEF; font-size: 14px; line-height: 1.4;
      box-shadow: 0 1px 0.5px rgba(0,0,0,0.13);
      max-width: 100%;
      word-wrap: break-word;
    }
    .chatops-wa-them .chatops-wa-bubble {
      background: #1F2C33;
      border-top-left-radius: 0;
    }
    .chatops-wa-me .chatops-wa-bubble {
      background: #005C4B;
      border-top-right-radius: 0;
    }
    .chatops-wa-title { color: #53BDEB; font-weight: 600; margin-bottom: 4px; font-size: 13.5px; }
    .chatops-wa-time {
      display: inline-block; float: right;
      font-size: 10.5px; color: rgba(255,255,255,0.5);
      margin: 6px 0 -2px 10px;
    }
    .chatops-wa-check { color: #53BDEB; margin-left: 2px; }
    .chatops-wa-actions { margin-top: 8px; clear: both; }
    .chatops-body-wa .chatops-steps { margin: 6px 0 4px; }
    .chatops-body-wa .chatops-chip {
      background: rgba(0,168,132,0.15);
      border-color: rgba(0,168,132,0.4);
      color: #53E682;
    }
    .chatops-body-wa .chatops-chip-primary {
      background: rgba(0,168,132,0.3);
      border-color: rgba(0,168,132,0.5);
      color: white;
    }

    /* ── Replayable stagger: re-runs on tab switch because display:none→flex ── */
    .chatops-pane .chatops-msg {
      opacity: 0; transform: translateY(10px);
      animation: chatops-msg-build 0.55s cubic-bezier(0.16,1,0.3,1) forwards;
    }
    .chatops-pane .chatops-msg:nth-child(1) { animation-delay: 0.18s; }
    .chatops-pane .chatops-msg:nth-child(2) { animation-delay: 0.85s; }
    .chatops-pane .chatops-msg:nth-child(3) { animation-delay: 1.7s; }
    .chatops-pane .chatops-msg:nth-child(4) { animation-delay: 2.5s; }
    .chatops-pane .chatops-msg:nth-child(5) { animation-delay: 3.3s; }
    .chatops-pane .chatops-wa-date,
    .chatops-pane .chatops-tg-date { animation: none; opacity: 1; }
    @keyframes chatops-msg-build {
      to { opacity: 1; transform: none; }
    }
    /* Wait for scroll-into-view before starting the very first playthrough */
    .chatops-window:not(.is-live) .chatops-pane .chatops-msg {
      animation-play-state: paused;
      opacity: 0; transform: translateY(10px);
    }
    @media (prefers-reduced-motion: reduce) {
      .chatops-pane .chatops-msg { opacity: 1; transform: none; animation: none; }
    }

    @media (max-width: 700px) {
      .chatops-pane-body { padding: 14px 12px 6px; min-height: auto; }
      .chatops-body-tg, .chatops-body-wa { padding: 12px 8px 6px; }
      .chatops-body-dc { padding: 10px 12px 6px; }
      .chatops-bubble { max-width: 100%; font-size: 14px; }
      .chatops-pane-input { margin: 4px 8px 10px; padding: 10px 12px; font-size: 12.5px; }
      .chatops-tab { padding: 7px 4px; font-size: 10.5px; }
      .chatops-tab span { display: none; }
      .chatops-tab img, .chatops-tab svg { width: 18px; height: 18px; }
      .chatops-usecase-chip { top: 58px; right: 10px; font-size: 9.5px; padding: 4px 9px; }
      .chatops-lede h2 { font-size: clamp(26px, 8vw, 34px); }
    }

    /* ── Which package fits (aligned to 3 tiers) ── */
    .fit-grid {
      display: grid; gap: 20px; grid-template-columns: 1fr;
      margin-top: 48px; align-items: stretch;
    }
    @media (min-width: 960px) { .fit-grid { grid-template-columns: repeat(3, 1fr); gap: 22px; } }

    .fit-card {
      position: relative; overflow: hidden;
      /* 52px top reserves badge slot on every card so titles align across
         the row whether the card has a "Start here" / "Most common" badge or not. */
      padding: 52px 28px 28px; border-radius: 20px;
      background: rgba(255,255,255,0.02);
      border: 1px solid var(--white-5);
      display: flex; flex-direction: column;
      transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1),
                  background 0.5s, border-color 0.5s, box-shadow 0.5s;
    }
    .fit-card::before {
      content: attr(data-num);
      position: absolute; top: 16px; right: 22px;
      font-family: var(--font-display); font-weight: 700;
      font-size: 64px; color: rgba(255,255,255,0.035);
      line-height: 1; letter-spacing: -2px;
      transition: color 0.5s;
    }
    @media (hover: hover) {
      .fit-card:hover {
        transform: translateY(-4px);
        background: rgba(255,255,255,0.035);
        border-color: rgba(139,92,246,0.28);
        box-shadow: 0 18px 48px rgba(0,0,0,0.35), 0 0 30px rgba(139,92,246,0.1);
      }
      .fit-card:hover::before { color: rgba(139,92,246,0.14); }
    }
    .fit-card.is-featured {
      border-color: rgba(139,92,246,0.35);
      background: linear-gradient(180deg, rgba(139,92,246,0.06), rgba(255,255,255,0.02));
      box-shadow: 0 0 0 1px rgba(139,92,246,0.12), 0 20px 60px rgba(139,92,246,0.08);
    }
    .fit-card.is-featured::after {
      content: ''; position: absolute; inset: 0 0 auto 0; height: 1px;
      background: linear-gradient(90deg, transparent, rgba(139,92,246,0.7), rgba(249,115,22,0.5), transparent);
    }
    .fit-badge {
      position: absolute; top: 16px; left: 22px;
      font-family: var(--font-display); font-size: 10px; font-weight: 600;
      text-transform: uppercase; letter-spacing: 1.5px;
      color: var(--purple-300);
      padding: 4px 10px; border-radius: 999px;
      background: rgba(139,92,246,0.12);
      border: 1px solid rgba(139,92,246,0.3);
    }
    /* (padding-top: 52px is now baked into .fit-card base — no override needed) */
    .fit-tier {
      display: inline-block;
      font-family: var(--font-display); font-size: 11px; font-weight: 600;
      text-transform: uppercase; letter-spacing: 1.4px;
      color: var(--orange-400); margin-bottom: 14px;
      padding: 5px 10px; border-radius: 6px;
      background: rgba(249,115,22,0.08);
      border: 1px solid rgba(249,115,22,0.22);
    }
    .fit-card h3 {
      font-size: 22px; color: white; margin-bottom: 14px;
      letter-spacing: -0.3px; line-height: 1.25;
    }
    .fit-pain {
      color: var(--zinc-300); font-size: 14.5px; margin-bottom: 18px;
      line-height: 1.65;
    }
    .fit-list {
      list-style: none; margin: 0 0 24px; padding: 0;
    }
    .fit-list li {
      padding: 9px 0; color: var(--zinc-400); font-size: 14px;
      border-bottom: 1px dashed rgba(255,255,255,0.05);
      display: flex; align-items: baseline; gap: 10px;
      line-height: 1.55;
    }
    .fit-list li:last-child { border-bottom: none; }
    .fit-list li::before {
      content: ''; width: 5px; height: 5px; border-radius: 50%;
      background: linear-gradient(135deg, var(--purple-400), var(--orange-400));
      flex-shrink: 0; margin-top: 7px;
    }
    .fit-cta {
      margin-top: auto;
      display: inline-flex; align-items: center; gap: 8px;
      padding: 12px 18px; border-radius: 10px;
      font-family: var(--font-display); font-weight: 600; font-size: 13.5px;
      letter-spacing: 0.2px; color: white;
      background: rgba(255,255,255,0.04);
      border: 1px solid rgba(255,255,255,0.1);
      transition: background 0.25s, border-color 0.25s, transform 0.25s;
      align-self: flex-start;
    }
    .fit-cta svg { width: 14px; height: 14px; transition: transform 0.25s; }
    .fit-cta:hover {
      background: rgba(139,92,246,0.14);
      border-color: rgba(139,92,246,0.45);
    }
    .fit-cta:hover svg { transform: translateX(3px); }
    .fit-card.is-featured .fit-cta {
      background: linear-gradient(135deg, var(--purple-500), var(--purple-600));
      border-color: transparent;
    }
    .fit-card.is-featured .fit-cta:hover {
      background: linear-gradient(135deg, var(--purple-400), var(--purple-500));
    }

    .approach-divider {
      height: 1px; margin: 72px auto 0; max-width: 720px;
      background: linear-gradient(90deg, transparent, rgba(255,255,255,0.12), transparent);
    }

    /* ── Shared form inputs (used by newsletter) ── */
    .field-input {
      width: 100%; padding: 12px 14px; font-size: 15px;
      font-family: var(--font-body);
      background: rgba(255,255,255,0.03);
      border: 1px solid var(--white-10);
      border-radius: 10px;
      color: var(--zinc-100);
      transition: border-color 0.3s, background 0.3s, box-shadow 0.3s;
      outline: none;
      -webkit-appearance: none; appearance: none;
    }
    .field-input:focus {
      border-color: var(--purple-400);
      background: rgba(255,255,255,0.05);
      box-shadow: 0 0 0 3px rgba(139,92,246,0.15);
    }
    .field-input::placeholder { color: var(--zinc-500); }

    .hp-field {
      position: absolute; left: -9999px; top: auto;
      width: 1px; height: 1px; overflow: hidden;
    }

    .form-submit {
      margin-top: 4px;
      display: inline-flex; align-items: center; gap: 8px; justify-content: center;
      padding: 13px 26px; border-radius: 9999px;
      background: white; color: var(--zinc-950);
      font-weight: 600; font-size: 15px; font-family: var(--font-body);
      border: none; cursor: pointer;
      transition: background 0.3s, transform 0.3s cubic-bezier(0.16, 1, 0.3, 1),
                  box-shadow 0.3s;
      position: relative; overflow: hidden;
    }
    .form-submit:hover {
      background: #e4e4e7;
      transform: translateY(-2px);
      box-shadow: 0 12px 30px rgba(255,255,255,0.15), 0 0 30px rgba(139,92,246,0.2);
    }
    .form-submit svg { transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1); }
    .form-submit:hover svg { transform: translateX(4px); }
    .form-submit.is-loading { opacity: 0.7; cursor: progress; }
    .form-submit[disabled] { opacity: 0.65; cursor: not-allowed; }

    /* ── Newsletter response messages ── */
    .newsletter-msg {
      font-family: var(--font-display); font-size: 15px;
      margin: 0; padding: 14px; text-align: center; width: 100%;
    }
    .newsletter-msg-ok  { color: var(--purple-300); }
    .newsletter-msg-err { color: #fca5a5; }
    .newsletter-msg-err a { color: #fca5a5; text-decoration: underline; }



    /* ── Newsletter ── */
    .newsletter-section {
      padding: 80px 0; border-top: 1px solid var(--white-5);
      position: relative; overflow: hidden;
      background:
        radial-gradient(ellipse 600px 280px at 50% 50%, rgba(249,115,22,0.05) 0%, transparent 70%);
    }
    .newsletter-wrap {
      max-width: 560px; margin: 0 auto; padding: 0 16px; text-align: center;
    }
    .newsletter-tag {
      display: inline-flex; align-items: center; gap: 8px;
      padding: 5px 14px;
      background: rgba(249,115,22,0.1); color: var(--orange-400);
      border: 1px solid rgba(249,115,22,0.25); border-radius: 9999px;
      font-family: var(--font-display); font-size: 11px; font-weight: 600;
      letter-spacing: 1.5px; text-transform: uppercase;
      margin-bottom: 18px;
    }
    .newsletter-tag::before {
      content: ''; width: 6px; height: 6px; border-radius: 50%;
      background: var(--orange-500);
      animation: pulse 2s infinite;
    }
    .newsletter-section h2 {
      font-size: clamp(24px, 3vw, 32px); margin-bottom: 12px; color: white;
    }
    .newsletter-section > .newsletter-wrap > p {
      color: var(--zinc-400); margin-bottom: 28px;
      font-size: 16px;
    }
    .newsletter-form {
      display: flex; flex-direction: column; gap: 10px;
    }
    @media (min-width: 640px) {
      .newsletter-form { flex-direction: row; }
      .newsletter-form .field-input { flex: 1; }
    }
    .newsletter-form .form-submit {
      padding: 12px 26px; margin: 0;
    }
    .newsletter-note {
      margin-top: 14px; color: var(--zinc-500); font-size: 12px;
    }

    /* ── Footer ── */
    footer {
      border-top: 1px solid var(--white-5); padding: 48px 0; margin-top: 96px;
    }
    .footer-inner {
      max-width: 1280px; margin: 0 auto; padding: 0 16px;
      display: flex; flex-direction: column; align-items: center; gap: 16px;
      text-align: center;
    }
    .footer-logo {
      display: flex; align-items: center; gap: 8px;
      font-family: var(--font-display); font-weight: 600; color: var(--zinc-300);
      font-size: 15px; text-decoration: none;
    }
    .footer-logo:hover { color: var(--zinc-300); }
    .footer-logo img {
      width: 24px; height: 24px;
      animation: conic-spin 30s linear infinite;
      transform-origin: 50% 50%;
      will-change: transform;
    }
    .footer-logo:hover img { animation-duration: 3s; }
    @media (prefers-reduced-motion: reduce) {
      .footer-logo img { animation: none; }
    }
    .footer-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px 24px; }
    .footer-links a {
      color: var(--zinc-500); font-size: 14px; transition: color 0.2s;
    }
    .footer-links a:hover { color: var(--zinc-300); }
    .footer-copy { color: var(--zinc-500); font-size: 13px; }

    /* ════════════════════════════════════
       RESPONSIVE
    ════════════════════════════════════ */
    @media (min-width: 640px) {
      .container { padding: 0 24px; }
      .header-inner { height: 80px; padding: 0 24px; }
      .hero { margin-top: 80px; min-height: calc(100vh - 80px); min-height: calc(100svh - 80px); }
      .hero-bg img { object-position: center; }
      .hero-content { padding-bottom: 96px; }
      .hero-badge { margin-bottom: 32px; }
      .hero-sub { margin-top: 32px; }
      .hero-buttons { margin-top: 40px; }
      .hero-quote { margin-top: 48px; }
      .section { padding: 96px 0; }
    }
    @media (min-width: 768px) {
      .services-grid { grid-template-columns: repeat(3, 1fr); }
      .proof-grid { grid-template-columns: repeat(2, 1fr); }
      .about-text { max-width: 100%; }
      .footer-inner { flex-direction: row; justify-content: space-between; text-align: left; }
    }
    @media (max-width: 400px) {
      .btn-white, .btn-glass { width: 100%; justify-content: center; padding: 14px 24px; }
    }
    /* ════════════════════════════════════
       WORKFLOW INSTALL — entry-tier section
    ════════════════════════════════════ */
    .section--workflow {
      position: relative;
      background:
        radial-gradient(ellipse 80% 60% at 50% 0%, rgba(139,92,246,0.10) 0%, transparent 60%),
        radial-gradient(ellipse 70% 40% at 100% 100%, rgba(249,115,22,0.06) 0%, transparent 60%);
    }
    .section--workflow .section-header { margin-bottom: 40px; }
    .wi-accent {
      background: linear-gradient(90deg, var(--purple-300) 0%, var(--orange-300) 50%, #fbcfe8 100%);
      -webkit-background-clip: text; background-clip: text;
      -webkit-text-fill-color: transparent;
      font-style: italic;
      font-family: var(--font-quote);
      font-weight: 400;
    }

    /* ── Verticals pill strip ── */
    .wi-verticals {
      max-width: 920px;
      margin: 0 auto 32px;
      display: flex; flex-wrap: wrap; align-items: center;
      justify-content: center; gap: 8px;
      padding: 18px 22px;
      border-radius: 18px;
      background:
        radial-gradient(ellipse 70% 100% at 50% 0%, rgba(139,92,246,0.06) 0%, transparent 70%),
        rgba(255,255,255,0.02);
      border: 1px solid var(--white-5);
    }
    .wi-verticals-label {
      font-family: var(--font-display);
      font-size: 11px; font-weight: 600;
      color: var(--zinc-500);
      letter-spacing: 1.6px; text-transform: uppercase;
      margin-right: 8px;
    }
    .wi-vertical {
      display: inline-flex; align-items: center;
      padding: 5px 12px;
      border-radius: 9999px;
      background: rgba(255,255,255,0.04);
      border: 1px solid var(--white-10);
      color: var(--zinc-200);
      font-size: 13px; font-weight: 500;
      letter-spacing: 0.1px;
      transition: border-color 0.2s, background 0.2s, transform 0.2s;
    }
    @media (hover: hover) {
      .wi-vertical:hover {
        border-color: rgba(139,92,246,0.40);
        background: rgba(139,92,246,0.08);
        transform: translateY(-1px);
      }
    }
    @media (max-width: 639px) {
      .wi-verticals { padding: 16px 16px; gap: 6px; }
      .wi-verticals-label { width: 100%; text-align: center; margin: 0 0 4px; }
      .wi-vertical { font-size: 12.5px; padding: 4px 10px; }
    }

    /* ── Featured card ── */
    .wi-feature {
      position: relative;
      max-width: 920px;
      margin: 0 auto 64px;
      padding: 36px;
      border-radius: 24px;
      background: linear-gradient(180deg, rgba(255,255,255,0.04) 0%, rgba(255,255,255,0.015) 100%);
      border: 1px solid rgba(255,255,255,0.10);
      box-shadow: 0 30px 80px -20px rgba(139,92,246,0.22), inset 0 0 0 1px rgba(255,255,255,0.04);
      overflow: hidden;
    }
    .wi-feature::before {
      content: '';
      position: absolute; top: 0; left: 0; right: 0; height: 2px;
      background: linear-gradient(90deg, transparent 0%, var(--purple-400) 30%, var(--orange-400) 70%, transparent 100%);
    }
    .wi-feature-ribbon {
      display: inline-block;
      margin-bottom: 22px;
      font-family: var(--font-display);
      font-size: 10.5px; font-weight: 600;
      color: var(--purple-300);
      letter-spacing: 1.4px; text-transform: uppercase;
      padding: 6px 12px;
      background: rgba(139,92,246,0.12);
      border: 1px solid rgba(139,92,246,0.30);
      border-radius: 9999px;
    }
    @media (max-width: 639px) {
      .wi-feature { padding: 28px 22px; border-radius: 20px; }
      .wi-feature-ribbon { margin-bottom: 16px; }
    }
    .wi-feature-grid {
      display: grid; gap: 28px;
      grid-template-columns: 1fr;
    }
    @media (min-width: 880px) {
      .wi-feature-grid { grid-template-columns: 1.05fr 1fr; gap: 44px; }
      .wi-feature-cta { grid-column: 1 / -1; }
    }
    .wi-feature-tag {
      font-family: var(--font-display);
      font-size: 12px; color: var(--purple-300);
      letter-spacing: 2px; text-transform: uppercase;
      margin-bottom: 16px;
    }
    .wi-feature-pricing {
      display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap;
      margin-bottom: 18px;
    }
    .wi-feature-price {
      font-family: var(--font-display);
      font-size: clamp(40px, 6vw, 56px);
      font-weight: 700;
      color: white;
      letter-spacing: -0.02em;
      line-height: 1;
    }
    .wi-feature-price-note {
      color: var(--zinc-500);
      font-size: 15px;
    }
    .wi-feature-desc {
      font-size: 16.5px;
      color: var(--zinc-300);
      line-height: 1.6;
    }
    .wi-feature-bullets {
      list-style: none; margin: 0; padding: 0;
      display: flex; flex-direction: column; gap: 11px;
    }
    .wi-feature-bullets li {
      position: relative;
      padding-left: 30px;
      color: var(--zinc-200);
      font-size: 15px;
      line-height: 1.55;
    }
    .wi-feature-bullets li::before {
      content: '';
      position: absolute; left: 0; top: 4px;
      width: 18px; height: 18px;
      border-radius: 50%;
      background:
        radial-gradient(circle at 30% 30%, rgba(255,255,255,0.5) 0%, transparent 55%),
        linear-gradient(135deg, var(--purple-500), var(--orange-500));
      box-shadow: 0 2px 10px rgba(139,92,246,0.4);
    }
    .wi-feature-bullets li::after {
      content: '';
      position: absolute; left: 5px; top: 8px;
      width: 8px; height: 4px;
      border-left: 1.6px solid white;
      border-bottom: 1.6px solid white;
      transform: rotate(-45deg);
    }
    .wi-feature-cta {
      display: flex; flex-direction: column; gap: 12px; align-items: center;
      padding-top: 22px;
      border-top: 1px solid rgba(255,255,255,0.08);
      margin-top: 6px;
      text-align: center;
    }
    .wi-feature-cta .btn-white { font-size: 15px; }
    .wi-feature-cta .wi-cta-row { justify-content: center; }
    .wi-feature-payment {
      font-size: 13px;
      color: var(--zinc-500);
      text-align: center;
      max-width: 560px;
    }
    /* Dual-path CTA row: primary button + secondary audit link */
    .wi-cta-row {
      display: flex; flex-wrap: wrap; align-items: center;
      gap: 18px;
    }
    .wi-cta-row--center { justify-content: center; }
    .wi-audit-link {
      display: inline-flex; align-items: center; gap: 6px;
      color: var(--zinc-300);
      font-size: 14px;
      font-weight: 500;
      text-decoration: none;
      border-bottom: 1px solid rgba(255,255,255,0.18);
      padding-bottom: 2px;
      transition: color 0.2s, border-color 0.2s;
    }
    @media (hover: hover) {
      .wi-audit-link:hover {
        color: white;
        border-color: var(--purple-300);
      }
      .wi-audit-link:hover svg { transform: translateX(3px); }
    }
    .wi-audit-link svg {
      transition: transform 0.25s cubic-bezier(0.16,1,0.3,1);
      opacity: 0.65;
    }
    @media (max-width: 539px) {
      .wi-cta-row { gap: 14px; }
      .wi-audit-link { font-size: 13.5px; }
    }

    /* ── Block subsections ── */
    .wi-block { max-width: 960px; margin: 0 auto 56px; }
    .wi-block-title {
      font-family: var(--font-display);
      font-size: clamp(22px, 3vw, 28px);
      color: white; margin-bottom: 14px;
      letter-spacing: -0.01em;
    }
    .wi-block-lead {
      font-size: 16px; color: var(--zinc-400);
      line-height: 1.6; margin-bottom: 28px; max-width: 640px;
    }
    .wi-block-foot {
      margin-top: 22px;
      font-size: 14.5px; color: var(--zinc-400);
      line-height: 1.6; font-style: italic;
    }

    /* Examples 2-col */
    .wi-examples {
      display: grid; gap: 20px; grid-template-columns: 1fr;
    }
    @media (min-width: 720px) {
      .wi-examples { grid-template-columns: 1fr 1fr; gap: 28px; }
    }
    @media (min-width: 1040px) {
      .wi-examples { grid-template-columns: repeat(3, 1fr); gap: 22px; }
    }
    .wi-examples-col {
      padding: 26px;
      border-radius: 14px;
      background: rgba(255,255,255,0.02);
      border: 1px solid var(--white-5);
    }
    .wi-examples-title { margin: 0 0 18px; font-size: 14px; }
    .wi-examples-pill {
      display: inline-block;
      padding: 5px 12px;
      border-radius: 9999px;
      background: rgba(139,92,246,0.10);
      border: 1px solid rgba(139,92,246,0.25);
      color: var(--purple-300);
      font-family: var(--font-display);
      font-size: 11px; font-weight: 600;
      letter-spacing: 1.5px; text-transform: uppercase;
    }
    .wi-examples-list {
      list-style: none; padding: 0; margin: 0;
      display: flex; flex-direction: column; gap: 14px;
    }
    .wi-examples-list li {
      position: relative; padding-left: 22px;
      color: var(--zinc-300);
      font-size: 15px; line-height: 1.55;
    }
    .wi-examples-list li::before {
      content: '→';
      position: absolute; left: 0; top: 0;
      color: var(--orange-300); font-weight: 700;
    }
    .wi-examples-list strong { color: white; font-weight: 600; }

    /* Timeline */
    .wi-timeline {
      list-style: none; padding: 0; margin: 0;
      display: flex; flex-direction: column;
      position: relative;
    }
    .wi-timeline::before {
      content: '';
      position: absolute;
      left: 92px; top: 12px; bottom: 12px;
      width: 2px;
      background: linear-gradient(180deg, rgba(139,92,246,0.4) 0%, rgba(249,115,22,0.3) 100%);
    }
    @media (max-width: 639px) {
      .wi-timeline::before { left: 56px; }
    }
    .wi-timeline li {
      position: relative;
      display: grid;
      grid-template-columns: 100px 1fr;
      gap: 24px;
      padding: 14px 0;
      align-items: start;
    }
    @media (max-width: 639px) {
      .wi-timeline li { grid-template-columns: 64px 1fr; gap: 14px; }
    }
    .wi-timeline-day {
      position: relative;
      font-family: var(--font-display);
      font-size: 13px; font-weight: 700;
      color: var(--purple-300);
      letter-spacing: 0.5px;
      padding-top: 2px;
    }
    .wi-timeline-day::after {
      content: '';
      position: absolute;
      right: -8px; top: 6px;
      width: 14px; height: 14px;
      border-radius: 50%;
      background: linear-gradient(135deg, var(--purple-500), var(--orange-500));
      box-shadow: 0 0 0 4px var(--zinc-950), 0 0 16px rgba(139,92,246,0.6);
      z-index: 1;
    }
    .wi-timeline-body { color: var(--zinc-300); font-size: 15px; line-height: 1.65; }
    .wi-timeline-body strong { color: white; font-weight: 600; }

    /* Who it's for / not */
    .wi-fit {
      display: grid; gap: 20px; grid-template-columns: 1fr;
    }
    @media (min-width: 720px) {
      .wi-fit { grid-template-columns: 1fr 1fr; gap: 24px; }
    }
    .wi-fit-col {
      padding: 26px;
      border-radius: 14px;
      background: rgba(255,255,255,0.02);
      border: 1px solid var(--white-5);
    }
    .wi-fit-col--yes { border-color: rgba(139,92,246,0.25); background: rgba(139,92,246,0.04); }
    .wi-fit-title {
      display: flex; align-items: center; gap: 10px;
      font-size: 16px; color: white;
      margin: 0 0 16px;
    }
    .wi-fit-icon {
      display: inline-flex; align-items: center; justify-content: center;
      width: 22px; height: 22px;
      border-radius: 50%;
      font-size: 11.5px; font-weight: 700;
    }
    .wi-fit-icon--yes { background: rgba(139,92,246,0.20); color: var(--purple-300); }
    .wi-fit-icon--no { background: rgba(255,255,255,0.06); color: var(--zinc-400); }
    .wi-fit-list {
      list-style: none; padding: 0; margin: 0;
      display: flex; flex-direction: column; gap: 12px;
    }
    .wi-fit-list li { color: var(--zinc-300); font-size: 14.5px; line-height: 1.55; }
    .wi-fit-col--no .wi-fit-list a {
      color: var(--purple-300);
      text-decoration: underline; text-underline-offset: 3px;
      text-decoration-color: rgba(196,181,253,0.4);
    }

    /* FAQ */
    .wi-faq { display: flex; flex-direction: column; gap: 8px; }
    .wi-faq-item {
      padding: 0;
      border-radius: 12px;
      background: rgba(255,255,255,0.02);
      border: 1px solid var(--white-5);
      transition: background 0.2s, border-color 0.2s;
      overflow: hidden;
    }
    .wi-faq-item[open] { background: rgba(139,92,246,0.05); border-color: rgba(139,92,246,0.25); }
    .wi-faq-item summary {
      cursor: pointer; list-style: none;
      padding: 16px 20px;
      font-family: var(--font-display);
      font-size: 15.5px; font-weight: 600;
      color: white;
      display: flex; justify-content: space-between; align-items: center;
      gap: 16px;
    }
    .wi-faq-item summary::-webkit-details-marker { display: none; }
    .wi-faq-item summary::after {
      content: '+';
      font-family: var(--font-display);
      font-size: 22px; font-weight: 300;
      color: var(--purple-300);
      transition: transform 0.25s;
      flex-shrink: 0;
    }
    .wi-faq-item[open] summary::after { transform: rotate(45deg); }
    .wi-faq-item p {
      margin: 0; padding: 0 20px 18px;
      color: var(--zinc-300);
      font-size: 14.5px; line-height: 1.65;
    }
    .wi-faq-item p a {
      color: var(--purple-300);
      text-decoration: underline; text-underline-offset: 3px;
    }

    /* Trust strip */
    .wi-trust {
      max-width: 960px;
      margin: 0 auto 56px;
      display: flex; flex-wrap: wrap; justify-content: center;
      gap: 14px 32px;
      padding: 22px 32px;
      border-radius: 9999px;
      background: linear-gradient(180deg, rgba(255,255,255,0.04) 0%, rgba(255,255,255,0.02) 100%);
      border: 1px solid var(--white-5);
    }
    @media (max-width: 639px) {
      .wi-trust { border-radius: 16px; padding: 18px 22px; }
    }
    .wi-trust-item {
      display: inline-flex; align-items: center; gap: 8px;
      font-size: 14px; color: var(--zinc-300); font-weight: 500;
    }
    .wi-trust-mark {
      display: inline-flex; align-items: center; justify-content: center;
      width: 18px; height: 18px;
      border-radius: 50%;
      background: linear-gradient(135deg, var(--purple-500), var(--orange-500));
      color: white;
      font-size: 11px; font-weight: 700;
    }

    /* Final CTA */
    .wi-final { max-width: 720px; margin: 0 auto; text-align: center; }
    .wi-final-line {
      font-family: var(--font-display);
      font-size: clamp(22px, 3vw, 28px);
      color: white; margin-bottom: 22px;
      letter-spacing: -0.01em;
    }
    .wi-final-cta { font-size: 16px; padding: 16px 36px; }
    .wi-final-fine {
      margin-top: 16px;
      font-size: 12.5px; color: var(--zinc-500);
      letter-spacing: 0.3px;
    }

    /* Hero secondary CTA — accent glass with eyebrow */
    .btn-glass--accent {
      position: relative;
      flex-direction: column;
      align-items: flex-start;
      padding: 9px 22px 11px;
      background: rgba(24,24,27,0.55);
      border-color: rgba(139,92,246,0.40);
      box-shadow: 0 8px 24px rgba(139,92,246,0.18);
      text-align: left;
      line-height: 1.15;
    }
    @media (hover: hover) {
      .btn-glass--accent:hover {
        background: rgba(39,39,42,0.65);
        border-color: rgba(196,181,253,0.65);
        box-shadow: 0 12px 32px rgba(139,92,246,0.30);
      }
    }
    .btn-glass-eyebrow {
      font-family: var(--font-display);
      font-size: 10px; font-weight: 600;
      color: var(--purple-300);
      letter-spacing: 1.6px; text-transform: uppercase;
      margin-bottom: 1px;
    }
    .btn-glass-main { font-size: 14px; font-weight: 600; color: white; }
    @media (max-width: 639px) {
      .btn-glass--accent {
        width: 100%; max-width: 280px;
        align-items: center; padding: 10px 20px;
      }
      .btn-glass--accent .btn-glass-main { font-size: 13.5px; text-align: center; }
    }

    /* ════════════════════════════════════
       Workflow Audit — entrance animations
       Triggered when .section--workflow gains .visible
       (intersection observer; honours prefers-reduced-motion)
    ════════════════════════════════════ */

    /* ════════════════════════════════════════════════════
       Per-block fade-in: each WI sub-block reveals as IT
       enters viewport, not all-at-once with the whole
       5000px section. Existing IO observer fires per block.
       ════════════════════════════════════════════════════ */

    /* Verticals pills: stagger pop */
    .wi-verticals.fade-in .wi-vertical {
      opacity: 0; transform: translateY(8px) scale(0.94);
      transition: opacity 0.5s cubic-bezier(0.16,1,0.3,1),
                  transform 0.5s cubic-bezier(0.34,1.56,0.64,1),
                  background 0.3s, border-color 0.3s, color 0.3s, box-shadow 0.4s;
    }
    .wi-verticals.fade-in.visible .wi-vertical { opacity: 1; transform: none; }
    .wi-verticals.fade-in.visible .wi-vertical:nth-child(1)  { transition-delay: 0.06s; }
    .wi-verticals.fade-in.visible .wi-vertical:nth-child(2)  { transition-delay: 0.12s; }
    .wi-verticals.fade-in.visible .wi-vertical:nth-child(3)  { transition-delay: 0.18s; }
    .wi-verticals.fade-in.visible .wi-vertical:nth-child(4)  { transition-delay: 0.24s; }
    .wi-verticals.fade-in.visible .wi-vertical:nth-child(5)  { transition-delay: 0.30s; }
    .wi-verticals.fade-in.visible .wi-vertical:nth-child(6)  { transition-delay: 0.36s; }
    .wi-verticals.fade-in.visible .wi-vertical:nth-child(7)  { transition-delay: 0.42s; }
    .wi-verticals.fade-in.visible .wi-vertical:nth-child(8)  { transition-delay: 0.48s; }
    .wi-verticals.fade-in.visible .wi-vertical:nth-child(9)  { transition-delay: 0.54s; }
    .wi-verticals.fade-in.visible .wi-vertical:nth-child(10) { transition-delay: 0.60s; }
    .wi-verticals.fade-in.visible .wi-vertical:nth-child(11) { transition-delay: 0.66s; }
    .wi-verticals.fade-in.visible .wi-vertical:nth-child(12) { transition-delay: 0.72s; }

    /* Featured card: lift in */
    .wi-feature.fade-in {
      opacity: 0; transform: translateY(20px) scale(0.985);
      transition: opacity 0.7s cubic-bezier(0.16,1,0.3,1),
                  transform 0.7s cubic-bezier(0.16,1,0.3,1);
    }
    .wi-feature.fade-in.visible {
      opacity: 1; transform: none;
    }
    /* Subtle border-stripe sweep on the featured card */
    .wi-feature.fade-in.visible::before {
      background: linear-gradient(90deg,
        transparent 0%,
        var(--purple-400) 25%,
        var(--orange-400) 50%,
        var(--purple-400) 75%,
        transparent 100%);
      background-size: 250% 100%;
      animation: wi-stripe-flow 6s ease-in-out infinite;
    }
    @keyframes wi-stripe-flow {
      0%, 100% { background-position: 0% 0%; }
      50%      { background-position: 100% 0%; }
    }

    /* Featured price: pop with bounce */
    .wi-feature.fade-in .wi-feature-price {
      opacity: 0; transform: scale(0.85);
      transition: opacity 0.6s cubic-bezier(0.16,1,0.3,1),
                  transform 0.7s cubic-bezier(0.34,1.56,0.64,1);
    }
    .wi-feature.fade-in.visible .wi-feature-price {
      opacity: 1; transform: none;
      transition-delay: 0.30s;
    }
    .wi-feature.fade-in .wi-feature-price-note {
      opacity: 0;
      transition: opacity 0.45s ease;
    }
    .wi-feature.fade-in.visible .wi-feature-price-note {
      opacity: 1; transition-delay: 0.55s;
    }

    /* Featured bullets: checklist reveal */
    .wi-feature.fade-in .wi-feature-bullets li {
      opacity: 0; transform: translateX(-8px);
      transition: opacity 0.45s cubic-bezier(0.16,1,0.3,1),
                  transform 0.45s cubic-bezier(0.16,1,0.3,1);
    }
    .wi-feature.fade-in.visible .wi-feature-bullets li { opacity: 1; transform: none; }
    .wi-feature.fade-in.visible .wi-feature-bullets li:nth-child(1) { transition-delay: 0.40s; }
    .wi-feature.fade-in.visible .wi-feature-bullets li:nth-child(2) { transition-delay: 0.50s; }
    .wi-feature.fade-in.visible .wi-feature-bullets li:nth-child(3) { transition-delay: 0.60s; }
    .wi-feature.fade-in.visible .wi-feature-bullets li:nth-child(4) { transition-delay: 0.70s; }
    .wi-feature.fade-in.visible .wi-feature-bullets li:nth-child(5) { transition-delay: 0.80s; }
    .wi-feature.fade-in.visible .wi-feature-bullets li:nth-child(6) { transition-delay: 0.90s; }

    /* Examples: slide in with a center anchor on wide screens */
    .wi-block--examples.fade-in .wi-examples-col {
      opacity: 0;
      transition: opacity 0.65s cubic-bezier(0.16,1,0.3,1),
                  transform 0.5s cubic-bezier(0.16,1,0.3,1),
                  background 0.5s cubic-bezier(0.16,1,0.3,1),
                  border-color 0.5s,
                  box-shadow 0.5s;
    }
    .wi-block--examples.fade-in .wi-examples-col:nth-child(1) { transform: translateX(-18px); }
    .wi-block--examples.fade-in .wi-examples-col:nth-child(2) { transform: translateX(18px); }
    .wi-block--examples.fade-in .wi-examples-col:nth-child(3) { transform: translateY(18px); }
    .wi-block--examples.fade-in.visible .wi-examples-col {
      opacity: 1; transform: none;
    }
    .wi-block--examples.fade-in.visible .wi-examples-col:nth-child(1) { transition-delay: 0.10s; }
    .wi-block--examples.fade-in.visible .wi-examples-col:nth-child(2) { transition-delay: 0.22s; }
    .wi-block--examples.fade-in.visible .wi-examples-col:nth-child(3) { transition-delay: 0.34s; }

    /* Timeline: line draws, steps reveal, dots pulse */
    .wi-block--timeline.fade-in .wi-timeline::before {
      transform-origin: top;
      transform: scaleY(0);
      transition: transform 1.2s cubic-bezier(0.16,1,0.3,1);
    }
    .wi-block--timeline.fade-in.visible .wi-timeline::before {
      transform: scaleY(1);
      transition-delay: 0.10s;
    }
    .wi-block--timeline.fade-in .wi-timeline li {
      opacity: 0; transform: translateY(8px);
      transition: opacity 0.5s cubic-bezier(0.16,1,0.3,1),
                  transform 0.5s cubic-bezier(0.16,1,0.3,1);
    }
    .wi-block--timeline.fade-in.visible .wi-timeline li:nth-child(1) { opacity: 1; transform: none; transition-delay: 0.18s; }
    .wi-block--timeline.fade-in.visible .wi-timeline li:nth-child(2) { opacity: 1; transform: none; transition-delay: 0.32s; }
    .wi-block--timeline.fade-in.visible .wi-timeline li:nth-child(3) { opacity: 1; transform: none; transition-delay: 0.46s; }
    .wi-block--timeline.fade-in.visible .wi-timeline li:nth-child(4) { opacity: 1; transform: none; transition-delay: 0.60s; }
    .wi-block--timeline.fade-in.visible .wi-timeline li:nth-child(5) { opacity: 1; transform: none; transition-delay: 0.74s; }
    /* Continuous gentle dot pulse once revealed */
    .wi-block--timeline.fade-in.visible .wi-timeline-day::after {
      animation: wi-dot-pulse 2.6s ease-in-out infinite;
    }
    @keyframes wi-dot-pulse {
      0%, 100% { box-shadow: 0 0 0 4px var(--zinc-950), 0 0 16px rgba(139,92,246,0.6); }
      50%      { box-shadow: 0 0 0 4px var(--zinc-950), 0 0 28px rgba(139,92,246,0.95), 0 0 60px rgba(249,115,22,0.30); }
    }

    /* Fit columns (Built for you / Better fit elsewhere): sequential lift */
    .wi-block--fit.fade-in .wi-fit-col {
      opacity: 0; transform: translateY(14px);
      transition: opacity 0.6s cubic-bezier(0.16,1,0.3,1),
                  transform 0.5s cubic-bezier(0.16,1,0.3,1),
                  background 0.5s cubic-bezier(0.16,1,0.3,1),
                  border-color 0.5s,
                  box-shadow 0.5s;
    }
    .wi-block--fit.fade-in.visible .wi-fit-col:nth-child(1) { opacity: 1; transform: none; transition-delay: 0.10s; }
    .wi-block--fit.fade-in.visible .wi-fit-col:nth-child(2) { opacity: 1; transform: none; transition-delay: 0.24s; }

    /* FAQ items: stagger pop */
    .wi-block--faq.fade-in .wi-faq-item {
      opacity: 0; transform: translateY(8px);
      transition: opacity 0.5s cubic-bezier(0.16,1,0.3,1),
                  transform 0.5s cubic-bezier(0.16,1,0.3,1),
                  background 0.3s, border-color 0.3s;
    }
    .wi-block--faq.fade-in.visible .wi-faq-item:nth-child(1) { opacity: 1; transform: none; transition-delay: 0.10s; }
    .wi-block--faq.fade-in.visible .wi-faq-item:nth-child(2) { opacity: 1; transform: none; transition-delay: 0.20s; }
    .wi-block--faq.fade-in.visible .wi-faq-item:nth-child(3) { opacity: 1; transform: none; transition-delay: 0.30s; }
    .wi-block--faq.fade-in.visible .wi-faq-item:nth-child(4) { opacity: 1; transform: none; transition-delay: 0.40s; }
    .wi-block--faq.fade-in.visible .wi-faq-item:nth-child(5) { opacity: 1; transform: none; transition-delay: 0.50s; }

    /* Trust strip items: stagger pop */
    .wi-trust.fade-in .wi-trust-item {
      opacity: 0; transform: scale(0.92);
      transition: opacity 0.5s cubic-bezier(0.16,1,0.3,1),
                  transform 0.5s cubic-bezier(0.34,1.56,0.64,1), color 0.3s;
    }
    .wi-trust.fade-in.visible .wi-trust-item:nth-child(1) { opacity: 1; transform: none; transition-delay: 0.10s; }
    .wi-trust.fade-in.visible .wi-trust-item:nth-child(2) { opacity: 1; transform: none; transition-delay: 0.22s; }
    .wi-trust.fade-in.visible .wi-trust-item:nth-child(3) { opacity: 1; transform: none; transition-delay: 0.34s; }
    .wi-trust.fade-in.visible .wi-trust-item:nth-child(4) { opacity: 1; transform: none; transition-delay: 0.46s; }

    /* Final CTA: lift + glow */
    .wi-final.fade-in {
      opacity: 0; transform: translateY(14px);
      transition: opacity 0.7s cubic-bezier(0.16,1,0.3,1),
                  transform 0.7s cubic-bezier(0.16,1,0.3,1);
    }
    .wi-final.fade-in.visible {
      opacity: 1; transform: none;
    }
    /* Soft pulse on the final CTA button while in view */
    .wi-final.fade-in.visible .wi-final-cta {
      animation: wi-cta-pulse 3.4s ease-in-out infinite;
      animation-delay: 0.6s;
    }
    @keyframes wi-cta-pulse {
      0%, 100% { box-shadow: 0 0 0 0 rgba(139,92,246,0); }
      50%      { box-shadow: 0 0 0 8px rgba(139,92,246,0.06), 0 14px 30px rgba(139,92,246,0.18); }
    }

    /* Reduced motion: kill all wi-* entrance + loop animations */
    @media (prefers-reduced-motion: reduce) {
      .wi-verticals.fade-in .wi-vertical,
      .wi-feature.fade-in,
      .wi-feature.fade-in .wi-feature-bullets li,
      .wi-feature.fade-in .wi-feature-price,
      .wi-feature.fade-in .wi-feature-price-note,
      .wi-block--examples.fade-in .wi-examples-col,
      .wi-block--timeline.fade-in .wi-timeline::before,
      .wi-block--timeline.fade-in .wi-timeline li,
      .wi-block--fit.fade-in .wi-fit-col,
      .wi-block--faq.fade-in .wi-faq-item,
      .wi-trust.fade-in .wi-trust-item,
      .wi-final.fade-in {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
      }
      .wi-feature.fade-in.visible::before,
      .wi-block--timeline.fade-in.visible .wi-timeline-day::after,
      .wi-final.fade-in.visible .wi-final-cta {
        animation: none !important;
      }
    }

    /* "See all packages" link used inside #services and #approach */
    .wi-see-all {
      display: flex; justify-content: center; margin-top: 36px;
    }
    .wi-see-all a {
      display: inline-flex; align-items: center; gap: 8px;
      color: var(--zinc-300);
      font-family: var(--font-display);
      font-size: 14.5px; font-weight: 500;
      padding: 11px 20px;
      border-radius: 9999px;
      border: 1px solid var(--white-10);
      transition: border-color 0.2s, color 0.2s;
    }
    @media (hover: hover) {
      .wi-see-all a:hover { color: white; border-color: var(--white-20); }
    }
    .wi-see-all svg { transition: transform 0.25s cubic-bezier(0.16,1,0.3,1); }
    .wi-see-all a:hover svg { transform: translateX(3px); }

    /* ═════════════════════════════════════════════════════════
       "ALIVE" UPGRADE — premium hover + reveal pass
       Brings the Three-ways-to-work-together energy to every
       card-shaped surface on the site.
       ═════════════════════════════════════════════════════════ */

    /* Shared shimmer sweep element (sits inside each .data-tilt card) */
    .alive-shimmer {
      position: absolute; top: 0; left: 0;
      width: 60%; height: 100%;
      background: linear-gradient(
        to right,
        transparent 0%,
        rgba(255,255,255,0.07) 50%,
        transparent 100%
      );
      transform: translateX(-130%) skewX(-12deg);
      pointer-events: none; z-index: 4;
      opacity: 0;
    }
    @keyframes alive-shimmer-sweep {
      0%   { transform: translateX(-130%) skewX(-12deg); opacity: 1; }
      100% { transform: translateX(230%)  skewX(-12deg); opacity: 1; }
    }

    /* Rotating conic gradient halo — the signature "Three ways" effect.
       Uses @property to animate the conic angle, mask-composite to clip
       the gradient to the card's border ring only.
       Works in Chrome/Edge/Safari 16.4+/Firefox 128+. Older browsers see
       a static rim glow on hover, which is still good. */
    @property --alive-angle {
      syntax: '<angle>';
      initial-value: 0deg;
      inherits: false;
    }
    @keyframes alive-glow-spin {
      to { --alive-angle: 360deg; }
    }
    .alive-glow {
      position: absolute; inset: 0;
      border-radius: inherit;
      padding: 1.5px;
      background: conic-gradient(
        from var(--alive-angle, 0deg),
        transparent 0deg,
        rgba(139,92,246,0.95) 50deg,
        rgba(249,115,22,0.95) 110deg,
        transparent 170deg,
        transparent 360deg
      );
      -webkit-mask:
        linear-gradient(#000 0 0) content-box,
        linear-gradient(#000 0 0);
              mask:
        linear-gradient(#000 0 0) content-box,
        linear-gradient(#000 0 0);
      -webkit-mask-composite: xor;
              mask-composite: exclude;
      opacity: 0;
      pointer-events: none;
      z-index: 5;
      transition: opacity 0.45s cubic-bezier(0.16, 1, 0.3, 1);
    }

    /* Tilt-compatible transition override (snappy follow while tilting) */
    .trap-card.is-tilting,
    .approach-card.is-tilting,
    .fit-card.is-tilting,
    .testimonial.is-tilting,
    .wi-examples-col.is-tilting,
    .wi-fit-col.is-tilting,
    .pkg-card.is-tilting {
      transition: transform 0.1s linear,
                  background 0.5s, box-shadow 0.5s, border-color 0.5s;
    }

    /* Make sure tilting cards have proper 3D context */
    .trap-card, .approach-card, .fit-card, .testimonial,
    .wi-examples-col, .wi-fit-col, .pkg-card {
      transform-style: preserve-3d;
      will-change: transform;
    }

    /* ── Trap cards: shimmer + stronger hover glow + spinning halo ── */
    @media (hover: hover) {
      .trap-card:hover .alive-shimmer,
      .trap-card:focus-within .alive-shimmer {
        animation: alive-shimmer-sweep 1.2s cubic-bezier(0.16, 1, 0.3, 1);
      }
      .trap-card:hover .alive-glow,
      .trap-card:focus-within .alive-glow {
        opacity: 1;
        animation: alive-glow-spin 3s linear infinite;
      }
      .trap-card:hover {
        border-color: rgba(249,115,22,0.4);
        box-shadow: 0 22px 56px rgba(0,0,0,0.45),
                    0 0 0 1px rgba(249,115,22,0.35),
                    0 0 50px rgba(249,115,22,0.16),
                    0 0 100px rgba(139,92,246,0.10);
      }
    }
    .trap-card { z-index: 0; }
    .trap-card > *:not(.alive-shimmer) { position: relative; z-index: 2; }

    /* ── Approach cards: full premium treatment (was the most basic) ── */
    .approach-card {
      position: relative; overflow: hidden;
      transition: background 0.5s cubic-bezier(0.16, 1, 0.3, 1),
                  transform 0.5s cubic-bezier(0.16, 1, 0.3, 1),
                  border-color 0.5s, box-shadow 0.5s;
    }
    .approach-card::before {
      content: ''; position: absolute;
      top: 50%; left: 50%; width: 220%; height: 220%;
      transform: translate(-50%, -50%);
      background: conic-gradient(
        from 0deg,
        transparent 0deg,
        var(--purple-500) 60deg,
        var(--orange-500) 120deg,
        transparent 180deg,
        transparent 360deg
      );
      opacity: 0; transition: opacity 0.5s; pointer-events: none;
      z-index: 0;
    }
    .approach-card::after {
      content: ''; position: absolute; inset: 1px;
      border-radius: 15px; background: var(--zinc-950);
      z-index: 1; pointer-events: none;
    }
    .approach-card > *:not(.alive-shimmer):not(.alive-glow) { position: relative; z-index: 2; }
    @media (hover: hover) {
      .approach-card:hover, .approach-card:focus-within {
        transform: translateY(-5px);
        background: rgba(255,255,255,0.05);
        border-color: rgba(139,92,246,0.5);
        box-shadow: 0 22px 56px rgba(0,0,0,0.45),
                    0 0 0 1px rgba(139,92,246,0.5),
                    0 0 50px rgba(139,92,246,0.20),
                    0 0 100px rgba(249,115,22,0.10);
      }
      .approach-card:hover::before, .approach-card:focus-within::before {
        opacity: 1;
        animation: conic-spin 3.2s linear infinite;
      }
      .approach-card:hover .alive-shimmer,
      .approach-card:focus-within .alive-shimmer {
        animation: alive-shimmer-sweep 1.2s cubic-bezier(0.16, 1, 0.3, 1);
      }
      .approach-card:hover .alive-glow,
      .approach-card:focus-within .alive-glow {
        opacity: 1;
        animation: alive-glow-spin 3s linear infinite;
      }
    }

    /* ── Fit cards (Which package fits your week): shimmer + boost + halo ── */
    .fit-card { z-index: 0; }
    /* Exclude .fit-badge so it keeps its position:absolute (top-left corner) and
       doesn't take vertical flow space, which would mis-align the tagline across cards. */
    .fit-card > *:not(.alive-shimmer):not(.alive-glow):not(.fit-badge) { position: relative; z-index: 2; }
    .fit-badge { z-index: 5; }
    @media (hover: hover) {
      .fit-card:hover .alive-shimmer,
      .fit-card:focus-within .alive-shimmer {
        animation: alive-shimmer-sweep 1.3s cubic-bezier(0.16, 1, 0.3, 1);
      }
      .fit-card:hover .alive-glow,
      .fit-card:focus-within .alive-glow {
        opacity: 1;
        animation: alive-glow-spin 3s linear infinite;
      }
      .fit-card:hover {
        transform: translateY(-6px);
        box-shadow: 0 22px 56px rgba(0,0,0,0.4),
                    0 0 0 1px rgba(139,92,246,0.45),
                    0 0 40px rgba(139,92,246,0.18);
      }
      .fit-card.is-featured:hover {
        box-shadow: 0 0 0 1px rgba(139,92,246,0.4),
                    0 26px 64px rgba(139,92,246,0.18),
                    0 0 60px rgba(249,115,22,0.10);
      }
    }

    /* ── Testimonials: shimmer + glow + lift ── */
    .testimonial {
      position: relative; overflow: hidden;
      transition: background 0.5s cubic-bezier(0.16, 1, 0.3, 1),
                  transform 0.5s cubic-bezier(0.16, 1, 0.3, 1),
                  border-color 0.5s, box-shadow 0.5s;
    }
    .testimonial::before {
      content: '\201C';
      position: absolute; top: -28px; right: 14px;
      font-family: var(--font-display);
      font-size: 140px; line-height: 1;
      color: rgba(139,92,246,0.05);
      transition: color 0.6s, transform 0.6s cubic-bezier(0.16,1,0.3,1);
      pointer-events: none; z-index: 0;
    }
    .testimonial > *:not(.alive-shimmer):not(.alive-glow) { position: relative; z-index: 2; }
    @media (hover: hover) {
      .testimonial:hover, .testimonial:focus-within {
        transform: translateY(-5px);
        background: rgba(255,255,255,0.04);
        border-color: rgba(139,92,246,0.35);
        box-shadow: 0 22px 56px rgba(0,0,0,0.4),
                    0 0 0 1px rgba(139,92,246,0.4),
                    0 0 50px rgba(139,92,246,0.18);
      }
      .testimonial:hover::before {
        color: rgba(249,115,22,0.18);
        transform: translateY(-4px) rotate(-4deg);
      }
      .testimonial:hover .alive-shimmer,
      .testimonial:focus-within .alive-shimmer {
        animation: alive-shimmer-sweep 1.2s cubic-bezier(0.16, 1, 0.3, 1);
      }
      .testimonial:hover .alive-glow,
      .testimonial:focus-within .alive-glow {
        opacity: 1;
        animation: alive-glow-spin 3s linear infinite;
      }
      .testimonial:hover .testimonial-avatar {
        transform: rotate(-6deg) scale(1.06);
        box-shadow: 0 8px 22px rgba(139,92,246,0.4);
      }
    }
    .testimonial-avatar {
      transition: transform 0.5s cubic-bezier(0.16,1,0.3,1), box-shadow 0.5s;
    }

    /* ── Workflow Audit: wi-examples-col Office/Field ── */
    .wi-examples-col {
      position: relative; overflow: hidden;
      transition: background 0.5s cubic-bezier(0.16, 1, 0.3, 1),
                  transform 0.5s cubic-bezier(0.16, 1, 0.3, 1),
                  border-color 0.5s, box-shadow 0.5s;
    }
    .wi-examples-col::before {
      content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px;
      background: linear-gradient(90deg, var(--purple-500), var(--orange-500), transparent);
      transform: scaleX(0); transform-origin: left;
      transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
      z-index: 1;
    }
    .wi-examples-col > *:not(.alive-shimmer):not(.alive-glow) { position: relative; z-index: 2; }
    @media (hover: hover) {
      .wi-examples-col:hover, .wi-examples-col:focus-within {
        transform: translateY(-5px);
        background: rgba(255,255,255,0.04);
        border-color: rgba(139,92,246,0.32);
        box-shadow: 0 22px 56px rgba(0,0,0,0.4),
                    0 0 0 1px rgba(139,92,246,0.35),
                    0 0 40px rgba(139,92,246,0.16);
      }
      .wi-examples-col:hover::before { transform: scaleX(1); }
      .wi-examples-col:hover .alive-shimmer {
        animation: alive-shimmer-sweep 1.2s cubic-bezier(0.16, 1, 0.3, 1);
      }
      .wi-examples-col:hover .alive-glow,
      .wi-examples-col:focus-within .alive-glow {
        opacity: 1;
        animation: alive-glow-spin 3s linear infinite;
      }
      .wi-examples-col:hover .wi-examples-pill {
        background: rgba(139,92,246,0.20);
        border-color: rgba(139,92,246,0.55);
        color: white;
      }
      .wi-examples-col:hover .wi-examples-list li::before {
        transform: translateX(3px);
      }
    }
    .wi-examples-pill {
      transition: background 0.4s, border-color 0.4s, color 0.4s;
    }
    .wi-examples-list li::before {
      transition: transform 0.4s cubic-bezier(0.16,1,0.3,1);
    }

    /* ── Workflow Audit: wi-fit-col Built-for-you / Better-fit ── */
    .wi-fit-col {
      position: relative; overflow: hidden;
      transition: background 0.5s cubic-bezier(0.16, 1, 0.3, 1),
                  transform 0.5s cubic-bezier(0.16, 1, 0.3, 1),
                  border-color 0.5s, box-shadow 0.5s;
    }
    .wi-fit-col > *:not(.alive-shimmer):not(.alive-glow) { position: relative; z-index: 2; }
    @media (hover: hover) {
      .wi-fit-col:hover, .wi-fit-col:focus-within {
        transform: translateY(-4px);
        box-shadow: 0 18px 48px rgba(0,0,0,0.4),
                    0 0 0 1px rgba(139,92,246,0.32),
                    0 0 36px rgba(139,92,246,0.14);
      }
      .wi-fit-col--yes:hover {
        border-color: rgba(139,92,246,0.5);
        background: rgba(139,92,246,0.07);
      }
      .wi-fit-col--no:hover {
        border-color: rgba(249,115,22,0.32);
        background: rgba(255,255,255,0.04);
      }
      .wi-fit-col:hover .alive-shimmer {
        animation: alive-shimmer-sweep 1.2s cubic-bezier(0.16, 1, 0.3, 1);
      }
      .wi-fit-col:hover .alive-glow,
      .wi-fit-col:focus-within .alive-glow {
        opacity: 1;
        animation: alive-glow-spin 3s linear infinite;
      }
      .wi-fit-col:hover .wi-fit-icon {
        transform: scale(1.12) rotate(-6deg);
      }
    }
    .wi-fit-icon {
      transition: transform 0.5s cubic-bezier(0.34,1.56,0.64,1);
    }

    /* ── Trust strip items: hover lift ── */
    @media (hover: hover) {
      .wi-trust-item {
        transition: transform 0.4s cubic-bezier(0.16,1,0.3,1), color 0.3s;
      }
      .wi-trust-item:hover {
        transform: translateY(-2px);
        color: white;
      }
      .wi-trust-item:hover .wi-trust-mark {
        animation: wi-trust-pulse 1.4s ease-in-out infinite;
      }
    }
    @keyframes wi-trust-pulse {
      0%, 100% { box-shadow: 0 0 0 0 rgba(139,92,246,0); }
      50%      { box-shadow: 0 0 0 6px rgba(139,92,246,0.15), 0 0 18px rgba(249,115,22,0.4); }
    }
    .wi-trust-mark { transition: box-shadow 0.4s; }

    /* ════════════════════════════════════
       SCROLL-TRIGGERED REVEAL STAGGERS
       (rise + fade, sequential per child)
    ════════════════════════════════════ */

    /* Why Us — trap-cards */
    .fade-in .traps-grid > .trap-card {
      opacity: 0; transform: translateY(28px) scale(0.97);
      transition: opacity 0.85s cubic-bezier(0.16,1,0.3,1),
                  transform 0.85s cubic-bezier(0.16,1,0.3,1),
                  border-color 0.5s, box-shadow 0.5s, background 0.5s;
    }
    .fade-in.visible .traps-grid > .trap-card {
      opacity: 1; transform: translateY(0) scale(1);
    }
    .fade-in.visible .traps-grid > .trap-card:nth-child(1) { transition-delay: 0.12s; }
    .fade-in.visible .traps-grid > .trap-card:nth-child(2) { transition-delay: 0.26s; }
    .fade-in.visible .traps-grid > .trap-card:nth-child(3) { transition-delay: 0.40s; }
    /* Trap-icon pop after card lands */
    .fade-in .traps-grid > .trap-card .trap-icon {
      opacity: 0; transform: translateY(8px) scale(0.85);
      transition: opacity 0.6s cubic-bezier(0.34,1.56,0.64,1),
                  transform 0.6s cubic-bezier(0.34,1.56,0.64,1),
                  background 0.5s, border-color 0.5s, box-shadow 0.5s;
    }
    .fade-in.visible .traps-grid > .trap-card .trap-icon {
      opacity: 1; transform: translateY(0) scale(1);
    }
    .fade-in.visible .traps-grid > .trap-card:nth-child(1) .trap-icon { transition-delay: 0.32s; }
    .fade-in.visible .traps-grid > .trap-card:nth-child(2) .trap-icon { transition-delay: 0.46s; }
    .fade-in.visible .traps-grid > .trap-card:nth-child(3) .trap-icon { transition-delay: 0.60s; }

    /* Approach grid (4 cards) */
    .fade-in .approach-grid > .approach-card {
      opacity: 0; transform: translateY(24px) scale(0.97);
      transition: opacity 0.85s cubic-bezier(0.16,1,0.3,1),
                  transform 0.85s cubic-bezier(0.16,1,0.3,1),
                  border-color 0.5s, box-shadow 0.5s, background 0.5s;
    }
    .fade-in.visible .approach-grid > .approach-card {
      opacity: 1; transform: translateY(0) scale(1);
    }
    .fade-in.visible .approach-grid > .approach-card:nth-child(1) { transition-delay: 0.10s; }
    .fade-in.visible .approach-grid > .approach-card:nth-child(2) { transition-delay: 0.22s; }
    .fade-in.visible .approach-grid > .approach-card:nth-child(3) { transition-delay: 0.34s; }
    .fade-in.visible .approach-grid > .approach-card:nth-child(4) { transition-delay: 0.46s; }

    /* Fit grid (3 cards) — Which package fits your week */
    .fade-in .fit-grid > .fit-card {
      opacity: 0; transform: translateY(28px) scale(0.97);
      transition: opacity 0.9s cubic-bezier(0.16,1,0.3,1),
                  transform 0.9s cubic-bezier(0.16,1,0.3,1),
                  border-color 0.5s, box-shadow 0.5s, background 0.5s;
    }
    .fade-in.visible .fit-grid > .fit-card {
      opacity: 1; transform: translateY(0) scale(1);
    }
    .fade-in.visible .fit-grid > .fit-card:nth-child(1) { transition-delay: 0.14s; }
    .fade-in.visible .fit-grid > .fit-card:nth-child(2) { transition-delay: 0.30s; }
    .fade-in.visible .fit-grid > .fit-card:nth-child(3) { transition-delay: 0.46s; }
    /* Featured fit-card: continuous accent line shimmer */
    .fade-in.visible .fit-grid > .fit-card.is-featured::after {
      animation: wi-stripe-flow 6s linear infinite;
      background-size: 220% 100%;
    }

    /* Testimonials (2 under hero) */
    .fade-in .testimonials > .testimonial {
      opacity: 0; transform: translateY(24px) scale(0.97);
      transition: opacity 0.85s cubic-bezier(0.16,1,0.3,1),
                  transform 0.85s cubic-bezier(0.16,1,0.3,1),
                  background 0.5s, border-color 0.5s, box-shadow 0.5s;
    }
    .fade-in.visible .testimonials > .testimonial {
      opacity: 1; transform: translateY(0) scale(1);
    }
    .fade-in.visible .testimonials > .testimonial:nth-child(1) { transition-delay: 0.18s; }
    .fade-in.visible .testimonials > .testimonial:nth-child(2) { transition-delay: 0.34s; }

    /* Process nodes (How we work) */
    .fade-in .process-track > .process-node {
      opacity: 0; transform: translateY(18px) scale(0.96);
      transition: opacity 0.7s cubic-bezier(0.16,1,0.3,1),
                  transform 0.7s cubic-bezier(0.34,1.56,0.64,1);
    }
    .fade-in.visible .process-track > .process-node {
      opacity: 1; transform: translateY(0) scale(1);
    }
    .fade-in.visible .process-track > .process-node:nth-child(1) { transition-delay: 0.22s; }
    .fade-in.visible .process-track > .process-node:nth-child(2) { transition-delay: 0.34s; }
    .fade-in.visible .process-track > .process-node:nth-child(3) { transition-delay: 0.46s; }
    .fade-in.visible .process-track > .process-node:nth-child(4) { transition-delay: 0.58s; }
    .fade-in.visible .process-track > .process-node:nth-child(5) { transition-delay: 0.70s; }
    /* Continuous gentle pulse on process dots once revealed */
    .fade-in.visible .process-track > .process-node .process-dot {
      animation: process-dot-pulse 4.2s ease-in-out infinite;
    }
    .fade-in.visible .process-track > .process-node:nth-child(2) .process-dot { animation-delay: 0.4s; }
    .fade-in.visible .process-track > .process-node:nth-child(3) .process-dot { animation-delay: 0.8s; }
    .fade-in.visible .process-track > .process-node:nth-child(4) .process-dot { animation-delay: 1.2s; }
    .fade-in.visible .process-track > .process-node:nth-child(5) .process-dot { animation-delay: 1.6s; }
    @keyframes process-dot-pulse {
      0%, 100% { box-shadow: 0 0 0 4px rgba(10,10,12,1),
                             0 10px 30px rgba(0,0,0,0.45),
                             inset 0 1px 0 rgba(255,255,255,0.06); }
      50%      { box-shadow: 0 0 0 4px rgba(10,10,12,1),
                             0 12px 38px rgba(139,92,246,0.18),
                             0 0 28px rgba(139,92,246,0.22),
                             inset 0 1px 0 rgba(255,255,255,0.10); }
    }

    /* Proof stats: number count-rise on reveal */
    .fade-in .proof-stats > .proof-stat {
      opacity: 0; transform: translateY(14px);
      transition: opacity 0.7s cubic-bezier(0.16,1,0.3,1),
                  transform 0.7s cubic-bezier(0.34,1.56,0.64,1);
    }
    .fade-in.visible .proof-stats > .proof-stat {
      opacity: 1; transform: translateY(0);
    }
    .fade-in.visible .proof-stats > .proof-stat:nth-child(1) { transition-delay: 0.10s; }
    .fade-in.visible .proof-stats > .proof-stat:nth-child(2) { transition-delay: 0.22s; }
    .fade-in.visible .proof-stats > .proof-stat:nth-child(3) { transition-delay: 0.34s; }
    .fade-in.visible .proof-stats > .proof-stat:nth-child(4) { transition-delay: 0.46s; }

    /* Workflow Audit: examples-col top-stripe sweep on reveal */
    .wi-block--examples.fade-in .wi-examples > .wi-examples-col::before {
      transform: scaleX(0);
    }
    .wi-block--examples.fade-in.visible .wi-examples > .wi-examples-col:nth-child(1)::before {
      animation: wi-examples-stripe 1.4s cubic-bezier(0.16,1,0.3,1) 0.30s forwards;
    }
    .wi-block--examples.fade-in.visible .wi-examples > .wi-examples-col:nth-child(2)::before {
      animation: wi-examples-stripe 1.4s cubic-bezier(0.16,1,0.3,1) 0.45s forwards;
    }
    .wi-block--examples.fade-in.visible .wi-examples > .wi-examples-col:nth-child(3)::before {
      animation: wi-examples-stripe 1.4s cubic-bezier(0.16,1,0.3,1) 0.60s forwards;
    }
    @keyframes wi-examples-stripe {
      to { transform: scaleX(1); }
    }
    /* Examples-list bullets stagger inside each col */
    .wi-block--examples.fade-in .wi-examples-list li {
      opacity: 0; transform: translateX(-10px);
      transition: opacity 0.6s cubic-bezier(0.16,1,0.3,1),
                  transform 0.6s cubic-bezier(0.16,1,0.3,1);
    }
    .wi-block--examples.fade-in.visible .wi-examples-list li { opacity: 1; transform: none; }
    .wi-block--examples.fade-in.visible .wi-examples-col:nth-child(1) .wi-examples-list li:nth-child(1) { transition-delay: 0.30s; }
    .wi-block--examples.fade-in.visible .wi-examples-col:nth-child(1) .wi-examples-list li:nth-child(2) { transition-delay: 0.40s; }
    .wi-block--examples.fade-in.visible .wi-examples-col:nth-child(1) .wi-examples-list li:nth-child(3) { transition-delay: 0.50s; }
    .wi-block--examples.fade-in.visible .wi-examples-col:nth-child(1) .wi-examples-list li:nth-child(4) { transition-delay: 0.60s; }
    .wi-block--examples.fade-in.visible .wi-examples-col:nth-child(2) .wi-examples-list li:nth-child(1) { transition-delay: 0.45s; }
    .wi-block--examples.fade-in.visible .wi-examples-col:nth-child(2) .wi-examples-list li:nth-child(2) { transition-delay: 0.55s; }
    .wi-block--examples.fade-in.visible .wi-examples-col:nth-child(2) .wi-examples-list li:nth-child(3) { transition-delay: 0.65s; }
    .wi-block--examples.fade-in.visible .wi-examples-col:nth-child(2) .wi-examples-list li:nth-child(4) { transition-delay: 0.75s; }
    .wi-block--examples.fade-in.visible .wi-examples-col:nth-child(3) .wi-examples-list li:nth-child(1) { transition-delay: 0.60s; }
    .wi-block--examples.fade-in.visible .wi-examples-col:nth-child(3) .wi-examples-list li:nth-child(2) { transition-delay: 0.70s; }
    .wi-block--examples.fade-in.visible .wi-examples-col:nth-child(3) .wi-examples-list li:nth-child(3) { transition-delay: 0.80s; }
    .wi-block--examples.fade-in.visible .wi-examples-col:nth-child(3) .wi-examples-list li:nth-child(4) { transition-delay: 0.90s; }
    /* Wi-fit-list bullets stagger inside each col */
    .wi-block--fit.fade-in .wi-fit-list li {
      opacity: 0; transform: translateX(-8px);
      transition: opacity 0.55s cubic-bezier(0.16,1,0.3,1),
                  transform 0.55s cubic-bezier(0.16,1,0.3,1);
    }
    .wi-block--fit.fade-in.visible .wi-fit-list li { opacity: 1; transform: none; }
    .wi-block--fit.fade-in.visible .wi-fit-col:nth-child(1) .wi-fit-list li:nth-child(1) { transition-delay: 0.30s; }
    .wi-block--fit.fade-in.visible .wi-fit-col:nth-child(1) .wi-fit-list li:nth-child(2) { transition-delay: 0.38s; }
    .wi-block--fit.fade-in.visible .wi-fit-col:nth-child(1) .wi-fit-list li:nth-child(3) { transition-delay: 0.46s; }
    .wi-block--fit.fade-in.visible .wi-fit-col:nth-child(1) .wi-fit-list li:nth-child(4) { transition-delay: 0.54s; }
    .wi-block--fit.fade-in.visible .wi-fit-col:nth-child(1) .wi-fit-list li:nth-child(5) { transition-delay: 0.62s; }
    .wi-block--fit.fade-in.visible .wi-fit-col:nth-child(2) .wi-fit-list li:nth-child(1) { transition-delay: 0.42s; }
    .wi-block--fit.fade-in.visible .wi-fit-col:nth-child(2) .wi-fit-list li:nth-child(2) { transition-delay: 0.50s; }
    .wi-block--fit.fade-in.visible .wi-fit-col:nth-child(2) .wi-fit-list li:nth-child(3) { transition-delay: 0.58s; }
    .wi-block--fit.fade-in.visible .wi-fit-col:nth-child(2) .wi-fit-list li:nth-child(4) { transition-delay: 0.66s; }

    /* Bottom FAQ accordion — match the workflow FAQ stagger */
    .fade-in .wi-faq > .wi-faq-item {
      opacity: 0; transform: translateY(10px);
      transition: opacity 0.55s cubic-bezier(0.16,1,0.3,1),
                  transform 0.55s cubic-bezier(0.16,1,0.3,1),
                  background 0.3s, border-color 0.3s;
    }
    .fade-in.visible .wi-faq > .wi-faq-item {
      opacity: 1; transform: translateY(0);
    }
    .fade-in.visible .wi-faq > .wi-faq-item:nth-child(1) { transition-delay: 0.10s; }
    .fade-in.visible .wi-faq > .wi-faq-item:nth-child(2) { transition-delay: 0.20s; }
    .fade-in.visible .wi-faq > .wi-faq-item:nth-child(3) { transition-delay: 0.30s; }
    .fade-in.visible .wi-faq > .wi-faq-item:nth-child(4) { transition-delay: 0.40s; }
    .fade-in.visible .wi-faq > .wi-faq-item:nth-child(5) { transition-delay: 0.50s; }
    .fade-in.visible .wi-faq > .wi-faq-item:nth-child(6) { transition-delay: 0.60s; }
    /* FAQ icon spin on open */
    .wi-faq-item summary::after {
      transition: transform 0.4s cubic-bezier(0.34,1.56,0.64,1), color 0.3s;
    }
    .wi-faq-item:hover summary::after { color: var(--orange-300); }
    .wi-faq-item[open] summary::after { color: var(--orange-400); }

    /* Wi-vertical pill: continuous breath on hover */
    @media (hover: hover) {
      .wi-vertical {
        transition: transform 0.4s cubic-bezier(0.16,1,0.3,1),
                    background 0.3s, border-color 0.3s, color 0.3s, box-shadow 0.4s;
      }
      .wi-vertical:hover {
        transform: translateY(-2px) scale(1.04);
        box-shadow: 0 6px 18px rgba(139,92,246,0.18);
      }
    }

    /* Reduced motion: kill all alive-upgrade entrance + loop animations */
    @media (prefers-reduced-motion: reduce) {
      .fade-in .traps-grid > .trap-card,
      .fade-in .traps-grid > .trap-card .trap-icon,
      .fade-in .approach-grid > .approach-card,
      .fade-in .fit-grid > .fit-card,
      .fade-in .testimonials > .testimonial,
      .fade-in .process-track > .process-node,
      .fade-in .proof-stats > .proof-stat,
      .fade-in .wi-faq > .wi-faq-item,
      .wi-block--examples.fade-in .wi-examples-list li,
      .wi-block--fit.fade-in .wi-fit-list li {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
      }
      .alive-shimmer,
      .alive-glow,
      .approach-card::before,
      .fade-in.visible .process-track > .process-node .process-dot,
      .fade-in.visible .fit-grid > .fit-card.is-featured::after,
      .wi-block--examples.fade-in.visible .wi-examples > .wi-examples-col::before {
        animation: none !important;
        opacity: 0 !important;
      }
    }