/* 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 */
    
    
    
    
    

    /* ── 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.
       Hidden state is gated behind html.js (via :where so it keeps zero
       specificity) — if JS never runs, nothing is left invisible. */
    :where(html.js) .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 */
    

    /* ── 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 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);
    }
    

    /* ════════════════════════════════════
       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: 1408px; 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.is-visible { transform: translateY(0); opacity: 1; }
    
    
    /* 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.is-open .ask-max-panel {
      opacity: 1; transform: translateY(0) scale(1);
      pointer-events: auto;
    }
    
    
    
    
    
    .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-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; }
    
    

    /* ════════════════════════════════════
       HERO
    ════════════════════════════════════ */
    .hero {
      min-height: calc(100vh - 64px);
      min-height: calc(100svh - 64px);
      display: flex; flex-direction: column;
      position: relative; overflow: hidden; margin-top: 64px;
    }
    
    
    
    @media (max-width: 639px) {
      /* Balanced overlay — image peeks through the middle, text zones stay dark */
      
      /* Show more of the mascot/right side on mobile */
      
      /* Title + subtitle stay LEFT-aligned (inherited from .hero-content) */
      /* Only center the CTA buttons, match their widths */
      
      .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 */
      
      /* 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 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;
    }
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    @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; }
    }
    
    .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); }
    
    
    /* ── Premium: Kinetic cycling word in H1 ── */
    
    
    .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-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-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;
    }

    
    
    /* Counteract trailing letter-spacing so the word is optically centered */
    
    

    /* ════════════════════════════════════
       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;
    }
    
    
    

    /* ── Services Cards ── */
    
    /* Carousel dots are a mobile-only affordance; hidden on the desktop grid. */
    
    
    /* When tilting, override transition timing for snappy follow */
    .service-card.is-tilting {
      transition: transform 0.1s linear, background 0.5s, box-shadow 0.5s;
    }
    
    /* Touch / active state for mobile */
    
    /* Rotating conic gradient border */
    
    
    
    /* Ensure card content sits above the pseudo-elements */
    
    /* Shimmer sweep on hover */
    
    
    
    
    
    
    
    
    

    /* ── Why Us (Traps) ── */
    
    
    
    
    
    
    
    
    
    
    
    
    
    

    /* ── Social Proof ── */
    
    
    
    
    .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;
    }
    
    
    
    
    
    
    
    
    

    /* ── Service Card CTA ── */
    
    /* Tight, even trailing-copy spacing */
    
    
    /* Divider absorbs the empty space → CTAs line up across cards */
    
    
    
    

    /* ── Process (How we work) ── */
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    

    @media (max-width: 820px) {
      
      
      
      
      
      
      
      
      
      
      /* Vertical connector line between dots */
      
      
      
      
    }

    /* ── 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; }
    
    
    
    
    
    
    @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 ── */
    
    
    
    
    
    

    /* ── Approach ── */
    
    
    
    
    
    
    
    
    
    
    
    
    
    

    /* ── About ── */
    
    
    
    
    

    
    
    
    
    
    
    
    
    
    

    

    /* ── FAQ ── */
    
    
    
    
    

    /* ── CTA ── */
    
    
    
    
    
    

    /* ── CTA Left (lede) ── */
    
    
    
    
    

    
    
    
    
    
    

    
    
    
    

    /* ── CTA Right (panel) ── */
    
    
    
    
    
    
    
    
    
    
    
    
    

    /* ── CTA endnote ── */
    
    
    
    
    

    

    /* ── Tool Constellation ── */
    
    
    .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;
    }
    
    
    
    
    

    
    
    
    
    
    
    
    
    
    

    /* ── Integrations Marquee ── */
    
    
    
    
    
    
    
    
    

    
    
    
    
    
    @keyframes marquee-scroll {
      from { transform: translateX(0); }
      to   { transform: translateX(-50%); }
    }
    @keyframes marquee-scroll-rev {
      from { transform: translateX(-50%); }
      to   { transform: translateX(0); }
    }
    

    
    
    
    
    

    
    
    
    

    /* ══════════════════════════════════════════════
       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.14) 0%, transparent 60%),
        radial-gradient(ellipse 700px 420px at 10% 80%, rgba(139,92,246,0.06) 0%, transparent 60%);
    }
    .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;
      color: var(--orange-400);
      font-family: var(--font-display); font-size: 11px; font-weight: 600;
      letter-spacing: 2px; 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 */
    
    
    
    
    /* Keep Slack full-color (brand identity) */
    

    
    
    
    
    /* 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;
    }
    
    @media (max-width: 700px) {
      .chatops-lede h2 { font-size: clamp(26px, 8vw, 34px); }
    }

    /* ── Which package fits (aligned to 3 tiers) ── */
    
    

    
    
    
    
    
    
    /* (padding-top: 52px is now baked into .fit-card base — no override needed) */
    
    
    
    
    
    
    
    
    
    
    
    
    

    

    /* ── Shared form inputs (used by newsletter) ── */
    
    
    

    

    .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 ── */
    
    
    
    
    
    
    
    
    .newsletter-form .form-submit {
      padding: 12px 26px; margin: 0;
    }
    

    /* ── Footer ── */
    footer {
      border-top: 1px solid var(--white-5); padding: 48px 0; margin-top: 96px;
    }
    
    
    
    
    
    
    
    
    
    

    /* ════════════════════════════════════
       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-sub { margin-top: 32px; }
      
      
      .section { padding: 96px 0; }
    }
    @media (min-width: 768px) {
      
      .proof-grid { grid-template-columns: repeat(2, 1fr); }
      
      
    }

    /* ── Services → equal-size swipe carousel on mobile ──
       Desktop keeps the locked 3-column grid (>=768px). Below that, the three
       tiers become one snap-scrolling track: one full-width card per view,
       equal height, minimal chrome — freeing vertical space for the header
       and the "See all packages" CTA. */
    @media (max-width: 767.98px) {
      /* Tighten the header so cards + CTA sit higher. */
      #services .section-header { margin-bottom: 28px; }
      
      /* "See all packages" drops onto its own centered row under the question. */
      
      

      
      
      

      /* Minimal dot indicators — the only slide chrome we keep. */
      
      
      .services-dot.is-active {
        width: 22px;
        background: linear-gradient(90deg, var(--purple-500), var(--orange-500));
      }
    }
    
    @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, #fdba74 0%, var(--orange-400) 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 ── */
    
    
    
    
    

    /* ── Featured card ── */
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    .wi-feature-cta .btn-white { font-size: 15px; }
    
    
    /* Dual-path CTA row: primary button + secondary audit link */
    
    
    
    
    
    

    /* ── Block subsections ── */
    
    
    
    

    /* Examples 2-col */
    
    
    
    
    
    
    
    
    
    

    /* Timeline */
    
    
    
    
    
    
    
    
    

    /* Who it's for / not */
    
    
    
    
    
    
    
    
    
    
    

    /* FAQ */
    
    
    
    
    
    
    
    
    

    /* Trust strip */
    
    
    
    

    /* Final CTA */
    
    
    
    

    /* Hero secondary CTA — accent glass with eyebrow */
    
    
    
    
    

    /* ════════════════════════════════════
       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 */
    
    
    
    
    

    /* ═════════════════════════════════════════════════════════
       "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) */
    
    @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; }
    }
    

    /* 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 cards: shimmer + stronger hover glow + spinning halo ── */
    
    
    

    /* ── Approach cards: full premium treatment (was the most basic) ── */
    
    
    
    
    

    /* ── Fit cards (Which package fits your week): shimmer + boost + halo ── */
    
    /* 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. */
    
    
    

    /* ── Testimonials: shimmer + glow + lift ── */
    
    
    
    
    

    /* ── Workflow Audit: wi-examples-col Office/Field ── */
    
    
    
    
    
    

    /* ── Workflow Audit: wi-fit-col Built-for-you / Better-fit ── */
    
    
    
    

    /* ── Trust strip items: hover lift ── */
    
    @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); }
    }
    

    /* ════════════════════════════════════
       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-vertical pill: continuous breath on hover */
    

    /* 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;
      }
    }

    /* ── Final sweep: light-theme capture buffering + portrait grade ── */