/* ══════════════════════════════════════
       RESET & TOKENS
       ══════════════════════════════════════ */
    *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
    html { scroll-behavior: smooth; -webkit-font-smoothing: antialiased; overflow-x: hidden; }
    a { color: inherit; text-decoration: none; }
    ul, li { list-style: none; }
    button { font-family: inherit; cursor: pointer; border: none; background: none; }

    :root {
      --white: #FFFFFF;
      --off-white: #F4F4F2;
      --mid-gray: #8B8B8B;
      --dark: #0a0a0a;
      --dark-card: #0a0a0a;
      --dark-card-border: rgba(255,255,255,0.10);
      --dark-card-border-hover: rgba(255,255,255,0.20);
      --blue: #306BFF;
      --blue-700: #1a3bcc;
      --blue-800: #1530a0;
      --blue-900: #0d2070;
      --blue-glow: rgba(48,107,255,0.40);
      --zinc-300: #d4d4d8;
      --zinc-400: #a1a1aa;
      --zinc-500: #71717a;
      --zinc-700: #3f3f46;
      --zinc-800: #27272a;
      --zinc-900: #18181b;
      --font-body: 'Rubik', sans-serif;
      --font-heading: 'DM Sans', sans-serif;
      --font-accent: 'Cormorant Garamond', Georgia, serif;
      --gm: 196px;
      --mw: 1920px;
      --ease: cubic-bezier(0.16, 1, 0.3, 1);
    }

    body {
      font-family: var(--font-heading);
      font-size: 20px;
      font-weight: 400;
      line-height: 1.5;
      color: var(--white);
      background: var(--dark);
      overflow-x: hidden;
    }

    /* ══════════════════════════════════════
       SCROLL REVEAL
       ══════════════════════════════════════ */
    .sr {
      opacity: 0;
      transform: translateY(44px);
      transition: opacity 0.8s var(--ease), transform 0.8s var(--ease);
    }
    .sr.vis { opacity: 1; transform: translateY(0); }
    .sr-d1 { transition-delay: 0.1s; }
    .sr-d2 { transition-delay: 0.2s; }
    .sr-d3 { transition-delay: 0.3s; }
    .sr-d4 { transition-delay: 0.4s; }
    .sr-d5 { transition-delay: 0.5s; }

    /* ══════════════════════════════════════
       INNER WRAPPER (Grid-locked)
       ══════════════════════════════════════ */
    .inner {
      max-width: var(--mw);
      margin: 0 auto;
      padding-left: var(--gm);
      padding-right: var(--gm);
    }

    /* ══════════════════════════════════════
       HERO — Sandbox 1 Editorial
       ══════════════════════════════════════ */
    #hero-main {
      background: var(--dark);
      position: relative;
      overflow: hidden;
    }

    .h2-wrap {
      display: grid;
      grid-template-columns: 1fr 1fr;
      grid-template-rows: auto auto auto;
      align-items: stretch;
      overflow: visible;
      width: 100%;
      max-width: 1920px;
      margin: 0 auto;
    }

    /* Left column */
    .h2-left {
      display: flex;
      flex-direction: column;
      justify-content: flex-start;
      padding: 90px 48px 90px 196px;
      padding-top: 184px;
      position: relative;
      z-index: 1;
      grid-column: 1;
      grid-row: 1;
      min-width: 0;
    }

    /* Right column */
    .h2-right {
      position: relative;
      grid-column: 2;
      grid-row: 1;
      display: flex;
      align-items: center;
      padding-top: 90px;
      justify-content: flex-end;
      padding-left: 120px;
      padding-right: 196px;
      overflow: visible;
    }

    /* Blue gradient — free background element */
    .h2-gradient {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 1270px;
      height: 1270px;
      object-fit: contain;
      pointer-events: none;
      z-index: 0;
    }

    /* 3D object wrapper */
    .h2-visual {
      position: relative;
      z-index: 1;
      flex-shrink: 0;
      will-change: transform;
    }
    .h2-visual.tilt-active {
      transition: transform 0.08s linear;
    }
    .h2-visual.tilt-reset {
      transition: transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    }

    /* 3D object */
    .h2-object {
      display: block;
      height: 590px;
      width: auto;
      object-fit: contain;
      animation: h2-orb-float 8s ease-in-out infinite;
    }

    @keyframes h2-orb-float {
      0%, 100% { transform: translateY(0) rotate(0deg); }
      33%       { transform: translateY(-18px) rotate(3deg); }
      66%       { transform: translateY(10px) rotate(-2deg); }
    }

    /* Title */
    .h2-title {
      font-family: 'DM Sans', system-ui, sans-serif;
      font-size: 100px;
      font-weight: 300;
      line-height: 1;
      text-transform: uppercase;
      color: #ffffff;
      margin: 0 0 48px 0;
    }
    .h2-title em {
      font-family: 'Cormorant Garamond', 'Didot', Georgia, serif;
      font-style: italic;
      font-weight: 600;
      font-size: 102px;
      display: block;
      line-height: 1;
      white-space: nowrap;
      transition: opacity 0.3s ease, transform 0.3s ease;
    }

    /* CTA group: icon + pill */
    /* Hero CTA */
    .h2-hero-cta {
      align-self: flex-start;
    }

    /* Divider */
    /* ── Divider component ── */
    .divider {
      height: 1px;
      background: rgba(255, 255, 255, 0.30);
    }
    .divider--dark {
      background: rgba(0, 0, 0, 0.12);
    }

    .h2-divider {
      grid-column: 1 / -1;
      grid-row: 2;
      height: 1px;
      background: rgba(255, 255, 255, 0.30);
      margin: 0 196px;
      align-self: end;
    }

    /* Bottom bar — 12-column grid */
    .h2-bottom {
      grid-column: 1 / -1;
      grid-row: 3;
      display: grid;
      grid-template-columns: repeat(12, 1fr);
      column-gap: 16px;
      padding: 45px 196px;
    }
    .h2-bottom-left {
      grid-column: 1 / 5;
      display: flex;
      align-items: center;
    }
    .h2-bottom-left p {
      font-family: 'DM Sans', system-ui, sans-serif;
      font-size: 20px;
      font-weight: 400;
      line-height: 1.5;
      color: #ffffff;
      width: 430px;
      margin: 0;
    }
    .h2-bottom-right {
      grid-column: 9 / 13;
      display: flex;
      align-items: center;
      justify-content: flex-end;
      /* 56 rather than 64: at full width the two wordmarks plus the gap were within
         3px of overflowing the 4-column grid area they sit in */
      gap: 56px;
    }
    /* Wordmark over one line of text: the figure and the word it belongs to. The
       logo is the source badge, so it leads and is set much larger than the line
       beneath it. Both scale together through the breakpoints below.

       The hero uses the -mono wordmark, all white, so this row stays monochrome.
       The Reviews section uses the versions that keep the brand-red dot. */
    .h2-stat {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      text-align: left;
      color: inherit;
      text-decoration: none;
    }
    a.h2-stat {
      transition: opacity 0.3s ease;
    }
    a.h2-stat:hover {
      opacity: 0.7;
    }
    .h2-stat-label {
      display: block;
      font-family: 'DM Sans', system-ui, sans-serif;
      font-size: 24px;
      font-weight: 400;
      line-height: 1.1;
      text-transform: uppercase;
      color: #ffffff;
      margin-top: 14px;
      letter-spacing: 0;
    }
    .h2-stat-logo {
      display: block;
      height: 58px;
      width: auto;
      flex-shrink: 0;
    }

    /* ══════════════════════════════════════
       ABOUT SECTION — White Panel
       ══════════════════════════════════════ */
    .about {
      position: relative;
      z-index: 2;
      padding: 80px 0;
    }
    .about-panel-stack {
      position: relative;
      padding-top: 24px; /* space for stacked panels behind */
    }
    /* Back panel (deepest) */
    .about-panel-stack::before {
      content: '';
      position: absolute;
      top: 0;
      left: 40px;
      right: 40px;
      height: 100%;
      border-radius: 24px;
      background: rgba(255,255,255,0.06);
      backdrop-filter: blur(16px);
      -webkit-backdrop-filter: blur(16px);
      border: 1px solid rgba(255,255,255,0.08);
    }
    /* Middle panel */
    .about-panel-stack::after {
      content: '';
      position: absolute;
      top: 12px;
      left: 20px;
      right: 20px;
      height: calc(100% - 12px);
      border-radius: 24px;
      background: rgba(255,255,255,0.10);
      backdrop-filter: blur(16px);
      -webkit-backdrop-filter: blur(16px);
      border: 1px solid rgba(255,255,255,0.12);
    }
    .about-panel {
      position: relative;
      z-index: 1;
      background: var(--white);
      border-radius: 24px;
      overflow: hidden;
    }

    /* Credentials bar — static inline word strip */
    .about-credentials {
      overflow: hidden;
      padding: 20px 0;
      border-bottom: 1px solid #e5e5e5;
    }
    .about-credentials-track {
      display: flex;
      align-items: center;
      gap: 24px;
      width: max-content;
      animation: cred-scroll 25s linear infinite;
    }
    @keyframes cred-scroll {
      0% { transform: translateX(0); }
      100% { transform: translateX(-50%); }
    }
    .cred-item {
      font-family: 'DM Sans', system-ui, sans-serif;
      font-size: 14px;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 1.5px;
      line-height: 1;
      color: #888;
      white-space: nowrap;
    }
    .cred-dot {
      width: 5px;
      height: 5px;
      border-radius: 50%;
      background: #b0b0b0;
      flex-shrink: 0;
    }

    /* About body */
    .about-body {
      display: grid;
      grid-template-columns: repeat(12, 1fr);
      column-gap: 16px;
      row-gap: 0;
      padding: 56px 48px 56px;
      align-items: start;
    }
    .about-left {
      grid-column: 1 / 5;
      display: flex;
      flex-direction: column;
      gap: 0;
    }
    .about-avatars {
      display: flex;
      align-items: center;
      gap: 0;
    }
    .about-avatar {
      width: 80px;
      height: 80px;
      border-radius: 50%;
      background: #d0d0d0;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 28px;
      color: #666;
      overflow: hidden;
      flex-shrink: 0;
      position: relative;
      z-index: 3;
    }
    /* display:block on both, or the img sits on the text baseline and the line box
       reserves descender space under it, which makes <picture> taller than the circle
       and leaves the avatar's own background showing along the bottom edge. */
    .about-avatar picture,
    .about-avatar img {
      display: block;
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
    .about-circle {
      width: 80px;
      height: 80px;
      border-radius: 50%;
      border: 1px solid #ccc;
      background: transparent;
      flex-shrink: 0;
      margin-left: 5px;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .about-circle svg {
      width: 24px;
      height: 24px;
      stroke: #aaa;
    }
    .about-circle:nth-child(2) { z-index: 2; }
    .about-circle:nth-child(3) { z-index: 1; }
    .about-founder-name {
      font-family: 'DM Sans', system-ui, sans-serif;
      font-size: 23px;
      font-weight: 500;
      color: #1a1a1a;
      margin-top: 0;
    }
    .about-founders {
      font-family: 'DM Sans', system-ui, sans-serif;
      font-size: 14px;
      font-weight: 400;
      text-transform: uppercase;
      line-height: 1.1;
      color: #888;
      margin-top: 0;
    }

    .about-right {
      grid-column: 5 / 13;
      display: flex;
      flex-direction: column;
    }
    .about-text {
      font-family: var(--font-heading);
      font-size: 40px;
      font-weight: 500;
      line-height: 1.2;
      color: #1a1a1a;
      margin-bottom: 0;
    }
    /* About CTA — matches hero style (circle + pill) */
    .about-actions {
      display: inline-flex;
      align-items: center;
      gap: 0;
      cursor: pointer;
      align-self: flex-start;
    }
    .about-icon-btn {
      width: 70px; height: 70px;
      border-radius: 50%;
      background: var(--blue);
      border: none;
      display: flex; align-items: center; justify-content: center;
      cursor: pointer;
      flex-shrink: 0;
      position: relative;
      z-index: 2;
    }
    .about-icon-btn svg {
      width: 24px;
      height: 24px;
      color: var(--white);
    }
    .about-cta-btn {
      display: inline-flex; align-items: center; justify-content: center;
      height: 70px;
      padding: 0 40px;
      background: var(--blue);
      color: #fff;
      font-family: 'DM Sans', system-ui, sans-serif;
      font-size: 16px;
      font-weight: 700;
      text-decoration: none;
      border-radius: 9999px;
      overflow: hidden;
      position: relative;
      z-index: 1;
      box-shadow: 0 4px 24px rgba(48,107,255,0.4);
    }

    /* ══════════════════════════════════════
       SALES AGENT SECTION
       ══════════════════════════════════════ */
    .product-section {
      padding: 80px 0;
      background: var(--dark);
      position: relative;
      overflow: hidden;
    }
    .sa-gradient {
      position: absolute;
      width: 800px;
      height: 800px;
      object-fit: contain;
      pointer-events: none;
      z-index: 0;
      right: calc(10% - 100px);
      top: calc(40% - 100px);
      transform: translate(0, -50%);
    }
    .product-section > .inner {
      position: relative;
      z-index: 1;
    }
    .sa-section-header {
      display: grid;
      grid-template-columns: repeat(12, 1fr);
      column-gap: 16px;
      align-items: start;
      margin: 0 0 64px;
    }
    .sa-section-title {
      grid-column: 1 / 7;
    }
    .sa-section-intro {
      grid-column: 7 / 13;
    }
    .sa-section-intro h3 {
      font-family: var(--font-heading);
      font-size: 40px;
      font-weight: 500;
      color: var(--white);
      line-height: 1.15;
      margin-bottom: 16px;
    }
    .sa-section-intro p {
      font-family: var(--font-heading);
      font-size: 20px;
      font-weight: 400;
      color: var(--white);
      line-height: 1.5;
    }
    .sa-section-label {
      font-family: var(--font-heading); font-size: 16px; font-weight: 400;
      text-transform: uppercase; line-height: 1.1;
      color: var(--zinc-400); margin-bottom: 12px;
      white-space: nowrap;
    }
    .sa-section-title {
      font-family: var(--font-heading);
      font-size: 85px; font-weight: 400;
      line-height: 1; margin-bottom: 16px; color: var(--white);
      text-transform: uppercase;
    }
    .sa-section-title em {
      font-family: var(--font-accent);
      font-style: italic;
      font-weight: 600;
      font-size: 95px;
      line-height: 1;
    }
    .sa-section-desc { font-family: var(--font-heading); font-size: 20px; font-weight: 400; color: var(--zinc-500); line-height: 1.5; }

    .product-layout {
      display: grid;
      grid-template-columns: repeat(12, 1fr);
      column-gap: 16px;
      align-items: start;
    }
    .product-info { grid-column: 1 / 6; }
    .product-demo { grid-column: 7 / 13; }
    .product-info h3 {
      font-family: var(--font-heading);
      font-size: 40px; font-weight: 500; line-height: 1.2;
      margin-bottom: 8px; color: var(--white);
    }
    .product-info .product-tag {
      display: inline-flex; align-items: center; gap: 6px;
      padding: 6px 14px; border-radius: 9999px;
      background: rgba(48,107,255,0.08);
      border: 1px solid rgba(48,107,255,0.2);
      font-family: var(--font-heading); font-size: 12px; font-weight: 600; color: var(--blue);
      text-transform: uppercase; margin-bottom: 20px;
    }
    .product-info > p {
      font-family: var(--font-heading);
      font-size: 20px; font-weight: 400; color: var(--zinc-500); line-height: 1.5;
      margin-bottom: 32px;
    }
    .feature-list { display: flex; flex-direction: column; gap: 0; margin-bottom: 52px; }
    .feature-item {
      display: flex; align-items: flex-start; gap: 24px;
      padding: 40px 0;
      transition: all 0.3s ease;
    }
    .feature-item:hover .feature-text h4 {
      color: var(--white);
    }
    .feature-number {
      font-family: var(--font-accent);
      font-size: 36px;
      font-weight: 600;
      font-style: italic;
      color: var(--zinc-500);
      flex-shrink: 0;
      min-width: 36px;
      line-height: 1.15;
    }
    .feature-text h4 {
      font-family: var(--font-heading); font-size: 36px; font-weight: 500;
      margin-bottom: 12px; color: var(--white); line-height: 1.15;
      transition: color 0.3s ease;
    }
    .feature-text p { font-family: var(--font-heading); font-size: 17px; font-weight: 400; color: var(--white); margin: 0; line-height: 150%; }

    .sa-btn {
      display: inline-flex; align-items: center; justify-content: center; gap: 8px;
      padding: 12px 28px; border-radius: 9999px;
      font-family: var(--font-heading); font-size: 16px; font-weight: 700;
      cursor: pointer; transition: all 0.3s var(--ease); border: none;
      position: relative; overflow: hidden;
    }
    .sa-btn-primary {
      background: var(--blue);
      color: white;
      border: 1px solid var(--blue);
    }
    .sa-btn-primary:hover {
      transform: translateY(-2px);
      box-shadow: 0 8px 32px rgba(48,107,255,0.3);
    }
    .sa-btn-secondary {
      background: transparent; color: var(--white);
      border: 1px solid var(--dark-card-border-hover);
    }
    .sa-btn-secondary:hover {
      background: rgba(255,255,255,0.04);
      border-color: var(--zinc-400); transform: translateY(-2px);
    }

    /* ══════════════════════════════════════
       CHAT ILLUSTRATION
       Ported from sales-agent.css so both pages show the same component. The
       effective values are inlined here rather than the layered overrides that
       stylesheet grew, so keep the two in step by hand if either changes.
       ══════════════════════════════════════ */
    /* The chat matches the feature list's height rather than its own content height,
       so its bottom edge lands on the same line as the CTA button. height:0 keeps the
       chat out of the grid row-height calculation, so the left column alone defines
       the row; min-height:100% then fills it. The min-height:0 on the flex children
       below is what stops the message list pushing the window taller. */
    .product-demo.demo-window {
      position: relative;
      height: 0;
      min-height: 100%;
      border-radius: 16px;
      border: 1px solid rgba(255,255,255,0.10);
      overflow: hidden;
      display: flex;
      flex-direction: column;
      --glass-blur: 34px;
      --photo-blur: 10px;
      --photo-dim: 0.35;
    }

    /* .sr.vis leaves transform: translateY(0) behind, and a transformed ancestor
       makes Chrome sample the backdrop inside it, so every backdrop-filter in this
       window would have nothing to blur. Must stay after .sr.vis in source order. */
    .demo-window.vis { transform: none; }

    /* Blurred photo backdrop. The blur is on this element, not backdrop-filter,
       because backdrop-filter blurs what sits behind an element and not its own
       background. Negative inset keeps the blur off the rounded corners. */
    .demo-photo {
      position: absolute;
      inset: -12%;
      z-index: 0;
      pointer-events: none;
      background-image: url('img/AI Sales Agent/chat-background.jpg');
      background-image: image-set(url('img/AI Sales Agent/chat-background.webp') type('image/webp'),
                                  url('img/AI Sales Agent/chat-background.jpg') type('image/jpeg'));
      background-size: cover;
      background-position: center;
      filter: blur(var(--photo-blur));
    }
    /* Dimmer paints inside .demo-photo, above the picture but below the chat, so the
       bubbles' backdrop-filter samples the already dimmed image. */
    .demo-photo::after {
      content: '';
      position: absolute;
      inset: 0;
      background: rgba(0,0,0,var(--photo-dim));
      pointer-events: none;
    }

    .demo-win-body {
      position: relative;
      z-index: 1;
      padding: 18px 50px;
      flex: 1;
      min-height: 0;
      display: flex;
      flex-direction: column;
    }
    .chat-widget {
      flex: 1;
      min-height: 0;
      display: flex;
      flex-direction: column;
      overflow: hidden;
    }
    /* overflow stays visible: a scroll container becomes the backdrop root in Chrome,
       which leaves the bubbles sampling the scroller instead of the photo. The
       conversation therefore has to be short enough to fit the window. */
    .chat-msgs {
      padding: 14px;
      display: flex;
      flex-direction: column;
      gap: 10px;
      flex: 1;
      overflow: visible;
    }
    /* messages sit at the bottom and grow upward, like a real chat */
    .chat-msgs > .c-msg:first-child { margin-top: auto; }

    /* end of a loop: the conversation fades out before it replays. Duration is
       mirrored by FADE in the page script. */
    .chat-msgs { transition: opacity 600ms ease; }
    .chat-msgs.is-fading { opacity: 0; }

    .c-msg { max-width: 85%; }
    .c-msg.agent { align-self: flex-start; }
    .c-msg.customer { align-self: flex-end; }

    .c-bubble {
      border-radius: 16px;
      padding: 13px 18px;
      font-size: 14px;
      line-height: 1.55;
    }
    /* ONE definition of the glass, shared by the composer and the bubbles, so they
       cannot drift apart. */
    .demo-ask,
    .c-bubble.a,
    .c-bubble.c {
      background: rgba(255,255,255,0.20);
      backdrop-filter: blur(var(--glass-blur)) saturate(1.4);
      -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(1.4);
      border: 1px solid rgba(255,255,255,0.32);
      color: rgba(255,255,255,0.88);
    }
    /* Neon blue edge on the agent's replies only. Must stay after the shared glass
       rule: both selectors are two classes, so source order decides. */
    .c-bubble.a {
      border-color: rgba(48,107,255,0.55);
      box-shadow: 0 0 0 1px rgba(48,107,255,0.14),
                  0 0 14px rgba(48,107,255,0.16),
                  inset 0 0 12px rgba(48,107,255,0.05);
    }
    /* sender name sits inside the bubble, where the frosted panel guarantees contrast
       rather than depending on whatever the photo happens to be behind it */
    .c-bubble .who {
      display: flex;
      align-items: center;
      gap: 5px;
      font-size: 11px;
      font-weight: 600;
      letter-spacing: 0.3px;
      color: rgba(255,255,255,0.70);
      margin-bottom: 4px;
    }
    .c-bubble .who-ai {
      width: 16px;
      height: 16px;
      flex-shrink: 0;
      fill: currentColor;
    }

    /* Decorative composer pinned below the conversation. */
    .demo-ask {
      margin-top: 12px;
      flex-shrink: 0;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      padding: 13px 18px;
      border-radius: 9999px;
      font-family: var(--font-heading);
      font-size: 14px;
    }
    .demo-ask svg { width: 17px; height: 17px; flex-shrink: 0; opacity: 0.85; }

    .product-chip {
      display: flex;
      gap: 10px;
      margin-top: 8px;
      padding: 10px;
      border-radius: 8px;
      background: rgba(255,255,255,0.16);
      border: 1px solid rgba(255,255,255,0.22);
    }
    /* Fixed width plus align-self stretch means the text block decides the card
       height and the photo follows, keeping the 10px padding even on all sides. */
    .product-chip-img {
      width: 56px;
      height: auto;
      align-self: stretch;
      border-radius: 6px;
      background: linear-gradient(135deg, #1530a0, var(--blue));
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 18px;
      flex-shrink: 0;
      overflow: hidden;
    }
    .product-chip-img picture,
    .product-chip-img img {
      display: block;
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
    .product-chip-info { font-size: 12px; }
    .product-chip-info .n { font-weight: 600; color: var(--white); }
    /* white, not tinted: this text sits over a photo, where --zinc-500 vanished
       against the lighter patches */
    .product-chip-info .p { color: #FFFFFF; font-weight: 700; margin-top: 1px; }
    .product-chip-info .d { color: #FFFFFF; margin-top: 1px; }
    /* icon-only add to cart, the btn-cta-circle piece of the header.js component */
    .product-chip > .btn-cta-circle { margin-left: auto; align-self: center; }

    /* ══════════════════════════════════════
       SERVICES SECTION (HOW WE HELP)
       ══════════════════════════════════════ */
    .services {
      padding: 80px 0;
      position: relative;
      overflow: visible;
    }
    .services-gradient {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 900px;
      height: 900px;
      object-fit: contain;
      pointer-events: none;
      z-index: 0;
      transition: transform 0.08s linear;
    }
    .services-gradient.tilt-reset {
      transition: transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    }
    .services > .inner {
      position: relative;
      z-index: 1;
    }
    .services-header {
      margin-bottom: 16px;
    }
    .services-title {
      font-family: var(--font-heading);
      font-size: 85px;
      font-weight: 400;
      text-transform: uppercase;
      color: var(--white);
      line-height: 1;
      text-align: center;
      margin-bottom: 48px;
    }
    .services-title em {
      font-family: var(--font-accent);
      font-style: italic;
      font-weight: 600;
      font-size: 95px;
      line-height: 1;
    }
    .services-subtitle {
      font-family: var(--font-heading);
      font-size: 20px;
      font-weight: 400;
      color: var(--zinc-500);
      margin-bottom: 48px;
    }
    .services-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 24px;
    }

    /* Service Card Base */
    .service-card {
      position: relative;
      border-radius: 20px;
      border: 1px solid rgba(255,255,255,0.10);
      padding: 32px;
      background: rgba(24,24,27,0.45);
      backdrop-filter: blur(20px);
      -webkit-backdrop-filter: blur(20px);
      display: flex;
      flex-direction: column;
      height: 420px;
      overflow: hidden;
      transition: all 0.5s ease;
      cursor: pointer;
    }
    .service-card:hover {
      border-color: rgba(255,255,255,0.18);
      background: rgba(28,28,32,0.55);
    }

    .card-3d {
      width: 120px;
      height: 120px;
      object-fit: contain;
      margin-bottom: auto;
      transition: transform 0.5s ease;
    }
    .service-card:hover .card-3d {
      transform: scale(1.05) rotate(5deg);
    }

    .card-arrow-btn {
      position: absolute;
      top: 32px;
      right: 32px;
      width: 70px;
      height: 70px;
      border-radius: 50%;
      border: 1px solid rgba(255,255,255,0.20);
      background: transparent;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      overflow: hidden;
      transition: background 0.35s cubic-bezier(0.4,0,0.2,1), border-color 0.35s cubic-bezier(0.4,0,0.2,1);
      padding: 0;
    }
    .card-arrow-btn svg {
      width: 30px;
      height: 30px;
      color: var(--white);
    }
    /* Whole card is the link, so the arrow reacts to hovering anywhere on it */
    .service-card:hover .card-arrow-btn {
      background: var(--blue);
      border-color: var(--blue);
    }
    /* Visible keyboard focus for the card link */
    .service-card:focus-visible {
      outline: 2px solid var(--blue);
      outline-offset: 3px;
    }
    .card-arrow-btn.cab-fwd svg { animation: btn-cta-icon-fwd 0.4s cubic-bezier(0.4,0,0.2,1) forwards; }
    .card-arrow-btn.cab-bwd svg { animation: btn-cta-icon-bwd 0.4s cubic-bezier(0.4,0,0.2,1) forwards; }

    .card-body {
      margin-top: auto;
    }
    .card-title {
      font-family: var(--font-heading);
      font-size: 30px;
      font-weight: 500;
      color: var(--white);
      line-height: 1.15;
      margin-bottom: 16px;
    }
    .card-desc {
      font-family: var(--font-heading);
      font-size: 16px;
      font-weight: 400;
      line-height: 1.5;
      color: var(--white);
    }

    /* ══════════════════════════════════════
       STATS BAND
       ══════════════════════════════════════ */
    .stats-band {
      padding: 80px 0;
      border-top: 1px solid rgba(255,255,255,0.05);
      border-bottom: 1px solid rgba(255,255,255,0.05);
    }
    .stats-row {
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    .stats-item {
      text-align: center;
    }
    .stats-number {
      font-family: var(--font-heading);
      font-size: clamp(40px, 4vw, 64px);
      font-weight: 700;
      color: var(--white);
      line-height: 1;
      letter-spacing: -2px;
    }
    .stats-label {
      font-size: 13px;
      font-weight: 500;
      text-transform: uppercase;
      letter-spacing: 2px;
      color: var(--zinc-500);
      margin-top: 8px;
    }
    .stats-divider {
      width: 1px;
      height: 60px;
      background: rgba(255,255,255,0.08);
    }

    /* ══════════════════════════════════════
       WHY SECTION
       ══════════════════════════════════════ */
    .why {
      padding: 80px 0;
    }
    /* WHY inner content wrapper */
    .why-inner {
      padding: 56px 48px 64px;
    }

    /* WHY marquee ticker */
    .why-marquee {
      background: #ffffff;
      padding: 18px 0;
      overflow: hidden;
      border-bottom: 1px solid rgba(0,0,0,0.10);
    }
    .why-marquee-track {
      display: flex;
      gap: 40px;
      animation: why-marquee-scroll 28s linear infinite;
      width: max-content;
    }
    @keyframes why-marquee-scroll {
      0% { transform: translateX(0); }
      100% { transform: translateX(-50%); }
    }
    .why-marquee-item {
      font-family: var(--font-heading);
      font-size: 16px;
      font-weight: 600;
      color: rgba(10,10,10,0.45);
      white-space: nowrap;
      text-transform: uppercase;
      letter-spacing: 2px;
    }
    .why-marquee-dot {
      color: rgba(10,10,10,0.45);
      opacity: 1;
    }
    .why-header {
      display: grid;
      grid-template-columns: repeat(12, 1fr);
      column-gap: 16px;
      align-items: start;
      margin-bottom: 0;
      padding-bottom: 60px;
    }
    .why-header .why-title { grid-column: 1 / 6; }
    .why-header-intro {
      grid-column: 9 / 13;
      font-family: var(--font-heading);
      font-size: 20px;
      font-weight: 400;
      color: var(--dark);
      line-height: 1.5;
      padding-top: 16px;
    }
    .why-title {
      font-family: var(--font-heading);
      font-size: 85px;
      font-weight: 400;
      text-transform: uppercase;
      color: var(--dark);
      line-height: 1;
    }
    .why-title em {
      font-family: var(--font-accent);
      font-style: italic;
      font-weight: 600;
      font-size: 95px;
      line-height: 1;
      color: var(--dark);
    }
    .why-subtitle {
      font-family: var(--font-heading);
      font-size: 20px;
      font-weight: 400;
      color: var(--zinc-500);
      margin-top: 12px;
      line-height: 1.5;
    }

    /* Why list — cards */
    .why-list {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 16px;
    }
    .why-card {
      background: rgba(0,0,0,0.03);
      border: none;
      border-radius: 16px;
      padding: 32px;
      display: flex;
      flex-direction: column;
    }
    .why-card-icon {
      width: 120px;
      height: 120px;
      object-fit: contain;
      margin-bottom: 24px;
      display: block;
    }
    .why-item-title {
      font-family: var(--font-heading);
      font-size: 30px;
      font-weight: 500;
      color: var(--dark);
      line-height: 1.15;
      margin-bottom: 10px;
    }
    .why-circle-desc {
      font-family: var(--font-heading);
      font-size: 17px;
      font-weight: 400;
      line-height: 1.5;
      color: var(--dark);
    }

    /* ══════════════════════════════════════
       CTA SECTION
       ══════════════════════════════════════ */
    .cta-section {
      padding: 80px 0;
    }

    /* Blue panel stack (mirrors about-panel-stack but blue) */
    .cta-panel-stack {
      position: relative;
      padding-top: 24px;
    }
    .cta-panel-stack::before {
      content: '';
      position: absolute;
      top: 0;
      left: 40px;
      right: 40px;
      height: 100%;
      border-radius: 24px;
      background: rgba(48,107,255,0.12);
      backdrop-filter: blur(16px);
      -webkit-backdrop-filter: blur(16px);
      border: 1px solid rgba(48,107,255,0.15);
    }
    .cta-panel-stack::after {
      content: '';
      position: absolute;
      top: 12px;
      left: 20px;
      right: 20px;
      height: calc(100% - 12px);
      border-radius: 24px;
      background: rgba(48,107,255,0.18);
      backdrop-filter: blur(16px);
      -webkit-backdrop-filter: blur(16px);
      border: 1px solid rgba(48,107,255,0.20);
    }
    .cta-panel {
      position: relative;
      z-index: 1;
      background: linear-gradient(135deg, #3061F6, #1E2DAF);
      border-radius: 24px;
      overflow: hidden;
      padding: 100px 48px 80px;
      text-align: center;
    }
    /* Dot lattice behind the panel copy. On ::before so it paints above the panel
       background but below .cta-content, which carries z-index 2. The mask is
       symmetric because the copy is centred: faint through the middle, full
       strength out at both edges. */
    .cta-panel::before {
      content: '';
      position: absolute; inset: 0;
      background-image: radial-gradient(rgba(255,255,255,0.14) 1px, transparent 1.6px);
      background-size: 22px 22px;
      pointer-events: none;
      -webkit-mask-image: linear-gradient(to right, #000 0%, rgba(0,0,0,0.16) 50%, #000 100%);
              mask-image: linear-gradient(to right, #000 0%, rgba(0,0,0,0.16) 50%, #000 100%);
    }
    .cta-marquee {
      background: transparent;
      padding: 18px 0;
      overflow: hidden;
      margin: -100px -48px 60px -48px;
      border-bottom: 1px solid rgba(255,255,255,0.12);
    }
    .cta-marquee-track {
      display: flex;
      gap: 40px;
      animation: why-marquee-scroll 28s linear infinite;
      width: max-content;
    }
    .cta-marquee-item {
      font-family: var(--font-heading);
      font-size: 16px;
      font-weight: 600;
      color: rgba(255,255,255,0.55);
      white-space: nowrap;
      text-transform: uppercase;
      letter-spacing: 2px;
    }
    .cta-marquee-dot {
      color: rgba(255,255,255,0.35);
    }
    .cta-panel-glow {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 700px;
      height: 700px;
      background: radial-gradient(circle, rgba(255,255,255,0.10) 0%, transparent 60%);
      pointer-events: none;
      filter: blur(80px);
    }
    .cta-content {
      position: relative;
      z-index: 2;
    }
    .cta-title {
      font-family: var(--font-heading);
      font-size: 85px;
      font-weight: 400;
      color: var(--white);
      margin-bottom: 20px;
      line-height: 1;
      text-transform: uppercase;
      max-width: 1200px;
      margin-left: auto;
      margin-right: auto;
    }
    .cta-title em, .cta-title .accent {
      font-family: var(--font-accent);
      font-style: italic;
      font-weight: 600;
      font-size: 95px;
      line-height: 1;
    }
    .cta-desc {
      font-family: var(--font-heading);
      font-size: 20px;
      font-weight: 400;
      color: var(--white);
      max-width: 680px;
      margin: 0 auto 40px;
      line-height: 1.5;
    }
    .cta-btn {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      padding: 16px 36px;
      border-radius: 9999px;
      background: var(--white);
      color: var(--blue);
      font-family: var(--font-heading);
      font-size: 16px;
      font-weight: 700;
      border: none;
      cursor: pointer;
      transition: all 0.3s var(--ease);
      box-shadow: 0 4px 24px rgba(0,0,0,0.15);
    }
    .cta-btn:hover {
      transform: translateY(-2px);
      box-shadow: 0 8px 40px rgba(0,0,0,0.20);
    }

    /* ══════════════════════════════════════
       MARQUEE TICKER
       ══════════════════════════════════════ */
    .marquee-section {
      padding: 20px 0;
      margin: 80px 0;
      overflow: hidden;
      border-top: 1px solid rgba(255,255,255,0.30);
      border-bottom: 1px solid rgba(255,255,255,0.30);
    }
    .marquee-track {
      display: flex;
      gap: 48px;
      animation: marquee 30s linear infinite;
      width: max-content;
    }
    @keyframes marquee {
      0% { transform: translateX(0); }
      100% { transform: translateX(-50%); }
    }
    .marquee-item {
      font-family: var(--font-heading);
      font-size: 20px;
      font-weight: 600;
      color: rgba(255,255,255,0.8);
      white-space: nowrap;
      text-transform: uppercase;
      letter-spacing: 2px;
    }
    .marquee-dot {
      color: var(--blue);
      opacity: 1;
    }

    /* ══════════════════════════════════════
       REVIEWS
       Dark section, white cards. Wordmark assets: clutch-logo.svg is white for the
       badge, clutch-logo-dark.svg is navy for the cards, and both keep the brand-red
       dot inside the c. The all-white clutch-logo-mono.svg belongs to the hero only.
       ══════════════════════════════════════ */
    .reviews {
      padding: 80px 0;
    }
    .reviews-header {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 40px;
      margin-bottom: 56px;
    }
    .reviews-title {
      font-family: var(--font-heading);
      font-size: 85px;
      font-weight: 400;
      text-transform: uppercase;
      color: var(--white);
      line-height: 1;
    }
    .reviews-title em {
      font-family: var(--font-accent);
      font-style: italic;
      font-weight: 600;
      font-size: 95px;
      line-height: 1;
    }
    .reviews-badge {
      flex-shrink: 0;
      /* nudged down so it sits against the title's cap height rather than its box */
      margin-top: 20px;
      display: inline-flex;
      align-items: center;
      gap: 14px;
      padding: 18px 24px;
      border-radius: 16px;
      background: rgba(255,255,255,0.04);
      border: 1px solid var(--dark-card-border);
      color: var(--white);
      text-decoration: none;
      transition: background 0.3s ease, border-color 0.3s ease;
    }
    .reviews-badge:hover {
      background: rgba(255,255,255,0.07);
      border-color: var(--dark-card-border-hover);
    }
    .reviews-badge-logo {
      display: block;
      height: 26px;
      width: auto;
    }
    .reviews-badge-score {
      font-family: var(--font-heading);
      font-size: 24px;
      font-weight: 500;
      line-height: 1;
    }
    /* Clutch's own star colour, so the rating reads as theirs rather than ours */
    .review-stars svg {
      display: block;
      width: 92px;
      height: 16px;
      fill: #FF3D2E;
    }
    .reviews-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 24px;
    }
    .review-card {
      background: var(--white);
      border-radius: 20px;
      padding: 32px;
      display: flex;
      flex-direction: column;
    }
    .review-card-top {
      display: flex;
      align-items: center;
      gap: 16px;
      padding-bottom: 20px;
      border-bottom: 1px solid rgba(0,0,0,0.10);
    }
    /* dark variant of the wordmark, since the cards are white. Do not invert the
       white asset instead: a filter would flatten the brand-red dot too. */
    .review-card-logo {
      display: block;
      height: 22px;
      width: auto;
    }
    .review-tags {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      margin: 20px 0 22px;
    }
    .review-tag {
      padding: 7px 14px;
      border-radius: 9999px;
      background: rgba(0,0,0,0.05);
      font-family: var(--font-heading);
      font-size: 14px;
      font-weight: 500;
      color: #444;
      white-space: nowrap;
    }
    .review-quote {
      font-family: var(--font-heading);
      font-size: 18px;
      font-weight: 400;
      line-height: 1.55;
      color: #0a0a0a;
      margin-bottom: 28px;
    }
    .review-author {
      margin-top: auto;
    }
    .review-author-name {
      display: block;
      font-family: var(--font-heading);
      font-size: 18px;
      font-weight: 600;
      color: #0a0a0a;
    }
    .review-author-role {
      display: block;
      font-family: var(--font-heading);
      font-size: 15px;
      font-weight: 400;
      color: #666;
      margin-top: 3px;
    }

    /* ══════════════════════════════════════
       INTEGRATIONS
       ══════════════════════════════════════ */
    .integrations {
      padding: 80px 0;
    }
    .integrations-title {
      font-family: var(--font-heading);
      font-size: 85px;
      font-weight: 400;
      text-transform: uppercase;
      color: var(--white);
      line-height: 1;
      margin-bottom: 0;
    }
    .integrations-title em {
      font-family: var(--font-accent);
      font-style: italic;
      font-weight: 600;
      font-size: 95px;
      line-height: 1;
    }
    .integrations-subtitle {
      font-family: var(--font-heading);
      font-size: 20px;
      font-weight: 400;
      color: var(--zinc-500);
      margin-bottom: 48px;
    }
    /* Bordered strip with a label breaking the top border. Same component as the
       Site Audit page's platform strip, so keep the two in step if either changes. */
    .trust-strip {
      position: relative;
      border: 1px solid rgba(255,255,255,0.12);
      border-radius: 24px;
      padding: 52px 48px;
      margin-top: 68px;
    }
    .trust-strip-label {
      position: absolute;
      top: 0;
      left: 50%;
      transform: translate(-50%, -50%);
      background: var(--dark);
      padding: 0 18px;
      font-family: var(--font-heading);
      font-size: 17px;
      font-weight: 400;
      color: var(--zinc-500);
      white-space: nowrap;
    }
    .trust-items {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 40px;
    }
    /* Fixed first row so the descriptions line up across columns even though the
       wordmarks are set at different heights. */
    .trust-item {
      display: grid;
      grid-template-rows: 40px auto;
      justify-items: center;
      align-items: center;
      text-align: center;
      opacity: 0.85;
      transition: opacity 0.3s ease;
    }
    .trust-item:hover {
      opacity: 1;
    }
    /* Same height as .trust-logos img on the Site Audit page. Wordmarks vary a lot
       in aspect ratio, so height is fixed and width follows. */
    .trust-item-logo {
      height: 40px;
      width: auto;
      max-width: 100%;
      object-fit: contain;
    }
    /* Lockups wider than about 6:1 are set shorter so their visual mass matches
       the rest of the row rather than filling the column. */
    .trust-item-logo--wide {
      height: 24px;
    }
    .trust-item-desc {
      font-family: var(--font-heading);
      font-size: 17px;
      font-weight: 400;
      color: var(--white);
      margin-top: 16px;
    }

    /* ══════════════════════════════════════
       RESPONSIVE — 1440px (Desktop)
       ══════════════════════════════════════ */
    /* ══════════════════════════════════════
       RESPONSIVE — 1800px (Large Desktop / Retina 16″ MacBook)
       ══════════════════════════════════════ */
    @media (max-width: 1800px) {
      :root { --gm: 140px; }

      /* Hero hardcoded margins */

      .h2-left { padding: 184px 48px 90px 140px; }
      .h2-right { padding-right: 140px; }
      .h2-divider { margin: 0 140px; }
      .h2-bottom { padding: 45px 140px; }
      .h2-title { font-size: 100px; }
      .h2-title em { font-size: 102px; }
      .h2-object { height: 510px; }
      .h2-gradient { width: 1100px; height: 1100px; }
      .h2-stat-logo { height: 52px; }
      .h2-stat-label { font-size: 22px; }
    }

    /* ══════════════════════════════════════
       RESPONSIVE — 1600px (Mid Desktop)
       ══════════════════════════════════════ */
    @media (max-width: 1600px) {
      :root { --gm: 100px; }

      /* Hero hardcoded margins */

      .h2-left { padding: 184px 48px 90px 100px; }
      .h2-right { padding-right: 100px; }
      .h2-divider { margin: 0 100px; }
      .h2-bottom { padding: 45px 100px; }
      .h2-title { font-size: 88px; }
      .h2-title em { font-size: 90px; }
      .h2-object { height: 470px; }
      .h2-gradient { width: 1000px; height: 1000px; }
      .h2-stat-logo { height: 50px; }
      .h2-stat-label { font-size: 21px; }
      .h2-bottom-left p { font-size: 18px; width: auto; }

      /* H2 section titles */
      .services-title, .sa-section-title, .why-title, .integrations-title, .reviews-title, .cta-title { font-size: 72px; }
      .services-title em, .sa-section-title em, .why-title em, .integrations-title em, .reviews-title em, .cta-title em, .cta-title .accent { font-size: 76px; }

      /* Service cards */
      .service-card { height: 420px; }
      .card-title { font-size: 28px; }

      /* Why */
      .why-item-title { font-size: 28px; }
    }

    @media (max-width: 1440px) {
      :root { --gm: 100px; }

      /* Why header — stack intro below title, full width, centered */
      .why-header { grid-template-columns: 1fr; row-gap: 24px; text-align: center; }
      .why-header .why-title { grid-column: 1 / -1; width: 100%; }
      .why-header-intro { grid-column: 1 / -1; width: 100%; padding-top: 0; max-width: none; }

      /* Hero hardcoded margins */

      .h2-left { padding: 184px 48px 90px 100px; }
      .h2-right { padding-right: 100px; }
      .h2-divider { margin: 0 100px; }
      .h2-bottom { padding: 45px 100px; }
      .h2-title { font-size: 80px; }
      .h2-title em { font-size: 82px; }
      .h2-object { height: 450px; }
      .h2-gradient { width: 1000px; height: 1000px; }
      .h2-stat-logo { height: 48px; }
      .h2-stat-label { font-size: 20px; }
      .h2-bottom-right { gap: 40px; }
      .h2-bottom-left p { font-size: 18px; width: auto; }

      /* H2 section titles */
      .services-title, .sa-section-title, .why-title, .integrations-title, .reviews-title, .cta-title { font-size: 64px; }
      .services-title em, .sa-section-title em, .why-title em, .integrations-title em, .reviews-title em, .cta-title em, .cta-title .accent { font-size: 68px; }

      /* Service cards */
      .service-card { height: 400px; padding: 24px; }
      .card-3d { width: 96px; height: 96px; }
      .card-arrow-btn { width: 56px; height: 56px; top: 24px; right: 24px; }
      .card-arrow-btn svg { width: 24px; height: 24px; }
      .card-title { font-size: 26px; }
      .card-desc { font-size: 15px; }

      /* Why */
      .why-item-title { font-size: 26px; }
    }

    /* ══════════════════════════════════════
       RESPONSIVE — 1280px (Small Desktop)
       ══════════════════════════════════════ */
    @media (max-width: 1280px) {
      :root { --gm: 60px; }

      /* Hero */

      .h2-left { padding: 184px 40px 80px 60px; }
      .h2-right { padding-left: 60px; padding-right: 60px; }
      .h2-divider { margin: 0 60px; }
      .h2-bottom { padding: 40px 60px; }
      .h2-title { font-size: 72px; }
      .h2-title em { font-size: 74px; }
      .h2-object { height: 370px; }
      .h2-gradient { width: 800px; height: 800px; }
      .h2-stat-logo { height: 40px; }
      .h2-stat-label { font-size: 18px; }
      .h2-bottom-right { gap: 40px; }

      /* H2 section titles */
      .services-title, .sa-section-title, .why-title, .integrations-title, .reviews-title, .cta-title { font-size: 56px; }
      .services-title em, .sa-section-title em, .why-title em, .integrations-title em, .reviews-title em, .cta-title em, .cta-title .accent { font-size: 60px; }

      /* H3 */
      .about-text { font-size: 32px; }
      .why-item-title { font-size: 32px; }
      .product-info h3 { font-size: 32px; }

      /* About */
      .about-body { padding: 48px 40px; gap: 40px; }

      /* Service cards */
      .services-grid { grid-template-columns: repeat(2, 1fr); }
      .service-card { height: 380px; padding: 32px; }
      .card-3d { width: 120px; height: 120px; }
      .card-arrow-btn { width: 70px; height: 70px; top: 32px; right: 32px; }
      .card-arrow-btn svg { width: 30px; height: 30px; }
      .card-title { font-size: 32px; margin-bottom: 12px; }
      .card-desc { font-size: 17px; }

      /* Sales Agent */
      .sa-section-header {
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
      }
      .sa-section-title { grid-column: unset; width: 100%; white-space: nowrap; }
      .sa-title-br { display: none; }
      .sa-section-intro { grid-column: unset; max-width: none; width: 100%; }
      .product-layout { row-gap: 40px; }

      /* Why */
      .why-header {
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
      }
      .why-item-title { font-size: 24px; }

      /* CTA panel */
      .cta-panel { padding: 80px 40px; }
      .cta-marquee { margin: -80px -40px 48px -40px; }
    }

    /* ══════════════════════════════════════
       RESPONSIVE — 1024px (Tablet)
       ══════════════════════════════════════ */
    @media (max-width: 1024px) {
      :root { --gm: 40px; }

      /* Nav */


      /* H2 section titles */
      .services-title, .sa-section-title, .why-title, .integrations-title, .reviews-title, .cta-title { font-size: 48px; }
      .services-title em, .sa-section-title em, .why-title em, .integrations-title em, .reviews-title em, .cta-title em, .cta-title .accent { font-size: 52px; }

      /* H3 */
      .about-text { font-size: 32px; }
      .why-item-title { font-size: 28px; }
      .product-info h3 { font-size: 28px; }

      /* Hero — stack columns */
      .h2-wrap { grid-template-columns: 1fr; grid-template-rows: auto auto auto auto; }

      .h2-left { grid-column: 1; grid-row: 1; padding: 184px 40px 40px; align-items: center; text-align: center; }
      .h2-title-br { display: none; }
      .h2-hero-cta { align-self: center; margin: 0 auto; }
      .h2-right { grid-column: 1; grid-row: 2; padding: 0 40px; justify-content: center; min-height: 360px; }
      .h2-divider { grid-column: 1; grid-row: 3; margin: 0 40px; }
      .h2-bottom {
        grid-column: 1; grid-row: 4;
        grid-template-columns: 1fr 1fr;
        padding: 40px 40px;
      }
      .h2-bottom-left { grid-column: 1; }
      .h2-bottom-left p { width: auto; font-size: 16px; }
      .h2-bottom-right { grid-column: 2; justify-content: flex-end; gap: 32px; }
      .h2-title { font-size: 64px; }
      .h2-title em { font-size: 66px; }
      .h2-object { height: 330px; }
      .h2-gradient { width: 700px; height: 700px; }
      .h2-stat-logo { height: 34px; }
      .h2-stat-label { font-size: 17px; }

      /* About */
      .about-body { grid-template-columns: 1fr; gap: 32px; padding: 40px 32px; }
      .about-left { grid-column: 1; order: 2; }
      .about-right { grid-column: 1; order: 1; }
      .about-credentials { padding: 16px 32px; gap: 16px; flex-wrap: wrap; justify-content: center; }
      .cred-item { font-size: 12px; letter-spacing: 1px; }
      .about-text { font-size: 32px; }

      /* Services — 2 columns, last card full width */
      .service-card { height: 360px; }

      /* Sales Agent — stack */
      .sa-section-title { white-space: normal; }
      .product-layout { grid-template-columns: 1fr; row-gap: 48px; }
      .product-info, .product-demo { grid-column: 1 / -1; }
      /* stacked: nothing to match, so the window sets its own height */
      .product-demo.demo-window { height: 620px; min-height: 0; }

      /* Integrations — 2 columns */

      /* Why */
      .why-list { grid-template-columns: repeat(2, 1fr); }
      .why-inner { padding: 40px 32px 48px; }

      /* Reviews: one per row rather than two, which would leave a lone third card */
      .reviews-grid { grid-template-columns: 1fr; }
      .reviews-header { flex-direction: column; }
      /* stacked under the title, so the desktop nudge would read as a gap */
      .reviews-badge { margin-top: 0; }

      /* CTA */
      .cta-panel { padding: 72px 32px; }
      .cta-marquee { margin: -72px -32px 40px -32px; padding: 14px 0; }
      .cta-panel-stack::before { left: 24px; right: 24px; }
      .cta-panel-stack::after { left: 12px; right: 12px; }

    }

    /* ══════════════════════════════════════
       RESPONSIVE — 768px (Mobile)
       ══════════════════════════════════════ */
    @media (max-width: 768px) {
      :root { --gm: 24px; }

      /* Nav */


      /* Hero */

      .h2-left { padding: 144px 24px 32px; }
      .h2-right { padding: 0 24px; min-height: 280px; }
      .h2-divider { margin: 0 24px; }
      .h2-title { font-size: 68px; margin-bottom: 32px; }
      .h2-title em { font-size: 70px; }
      .h2-object { height: 230px; }
      .h2-gradient { width: 500px; height: 500px; }

      /* H2 section titles */
      .services-title, .sa-section-title, .why-title, .integrations-title, .reviews-title, .cta-title { font-size: 60px; }
      .services-title em, .sa-section-title em, .why-title em, .integrations-title em, .reviews-title em, .cta-title em, .cta-title .accent { font-size: 64px; }

      /* H3 */
      .why-item-title { font-size: 24px; }
      .product-info h3 { font-size: 26px; }
      .h2-bottom {
        grid-template-columns: 1fr;
        padding: 28px 24px;
        row-gap: 28px;
      }
      .h2-bottom-left { grid-column: 1; }
      .h2-bottom-right { grid-column: 1; justify-content: flex-start; flex-wrap: wrap; gap: 24px; }
      .h2-stat-logo { height: 28px; }
      .h2-stat-label { font-size: 14px; }

      /* About */
      .about-panel-stack { padding-top: 16px; }
      .about-panel-stack::before { left: 20px; right: 20px; }
      .about-panel-stack::after { left: 10px; right: 10px; top: 8px; }
      .about-body { padding: 32px 24px; gap: 24px; }
      .about-credentials { padding: 14px 24px; gap: 12px; }
      .cred-item { font-size: 11px; letter-spacing: 0.8px; }
      .about-text { font-size: 32px; }
      .about-avatar { width: 64px; height: 64px; }
      .about-circle { width: 64px; height: 64px; }
      .about-circle svg { width: 20px; height: 20px; }
      .about-founder-name { font-size: 18px; }

      /* Services — single column */
      .services-grid { grid-template-columns: 1fr; }
      /* narrower side inset: 50px leaves too little room for the bubbles once the
         window is only a phone wide, which pushed the first message out of view */
      .demo-win-body { padding: 18px 20px; }
      .trust-strip { padding: 40px 24px; }
      .trust-items { grid-template-columns: repeat(2, 1fr); gap: 32px 28px; }
      .trust-item { grid-template-rows: 30px auto; }
      .trust-item-logo { height: 30px; }
      .trust-item-logo--wide { height: 20px; }
      .trust-item-desc { font-size: 16px; margin-top: 12px; }
      .service-card { height: auto; min-height: 300px; }

      /* Sales Agent */
      .sa-section-header { margin: 0 auto 40px; }
      .product-info h3 { font-size: 26px; }
      .feature-item { padding: 24px 0; }
      .feature-text h4 { font-size: 26px; }
      .demo-body { min-height: 350px; }

      /* Marquee */
      .marquee-item { font-size: 18px; }

      /* Reviews */
      .review-card { padding: 24px; }
      .reviews-badge { padding: 14px 18px; gap: 10px; }
      .reviews-badge-logo { height: 22px; }
      .reviews-badge-score { font-size: 20px; }
      .review-quote { font-size: 17px; }

      /* Integrations — 2 columns */

      /* Why */
      .why-marquee-item { font-size: 14px; letter-spacing: 1.5px; }
      .why-header { padding-bottom: 40px; grid-template-columns: 1fr; row-gap: 20px; }
      .why-header .why-title { grid-column: 1 / -1; }
      .why-header-intro { grid-column: 1 / -1; }
      .why-list { grid-template-columns: repeat(2, 1fr); gap: 12px; }
      .why-item-title { font-size: 18px; }
      .why-inner { padding: 28px 20px 36px; }

      /* CTA */
      .cta-panel { padding: 60px 24px; }
      .cta-marquee { margin: -60px -24px 32px -24px; padding: 12px 0; }
      .cta-panel-stack::before { left: 16px; right: 16px; }
      .cta-panel-stack::after { left: 8px; right: 8px; }
      .cta-btn { padding: 14px 28px; font-size: 14px; }


      /* Stats band */
      .stats-row { flex-wrap: wrap; gap: 24px; justify-content: center; }
      .stats-divider { display: none; }
    }

    /* ══════════════════════════════════════
       RESPONSIVE — 640px (Mid Mobile)
       ══════════════════════════════════════ */
    @media (max-width: 640px) {
      .h2-title { font-size: 63px; }
      .h2-title em { font-size: 65px; }
      .services-title, .sa-section-title, .why-title, .integrations-title, .reviews-title, .cta-title { font-size: 56px; }
      .services-title em, .sa-section-title em, .why-title em, .integrations-title em, .reviews-title em, .cta-title em, .cta-title .accent { font-size: 60px; }
    }

    /* ══════════════════════════════════════
       RESPONSIVE — 480px (Small Mobile)
       ══════════════════════════════════════ */
    @media (max-width: 480px) {
      :root { --gm: 16px; }


      .h2-left { padding: 134px 16px 24px; }
      .h2-right { padding: 0 16px; min-height: 220px; }
      .h2-divider { margin: 0 16px; }
      .h2-bottom { padding: 24px 16px; }
      .h2-title { font-size: 58px; margin-bottom: 24px; }
      .h2-title em { font-size: 60px; }
      .h2-object { height: 170px; }
      .h2-gradient { width: 380px; height: 380px; }

      /* H2 section titles */
      .services-title, .sa-section-title, .why-title, .integrations-title, .reviews-title, .cta-title { font-size: 52px; }
      .services-title em, .sa-section-title em, .why-title em, .integrations-title em, .reviews-title em, .cta-title em, .cta-title .accent { font-size: 56px; }

      /* H3 */
      .about-text { font-size: 32px; }
      .why-item-title { font-size: 22px; }
      .product-info h3 { font-size: 22px; }

      .reviews { padding: 40px 0; }
      .review-tag { font-size: 13px; padding: 6px 12px; }
      .about-body { padding: 24px 16px; }
      .about-credentials { padding: 12px 16px; gap: 8px; }
      .cred-item { font-size: 10px; letter-spacing: 0.5px; }
      .cred-dot { width: 4px; height: 4px; }

      .why-marquee-item { font-size: 13px; letter-spacing: 1px; }
      .why-marquee-track { gap: 28px; }
      .why-list { grid-template-columns: 1fr; gap: 10px; }
      .why-item-title { font-size: 22px; }
      .why-inner { padding: 20px 16px 28px; }
      .why-card-icon { width: 96px; height: 96px; margin-bottom: 16px; }

      .cta-panel { padding: 48px 16px; }
      .cta-marquee { margin: -48px -16px 24px -16px; padding: 12px 0; }
      .cta-marquee-item { font-size: 13px; letter-spacing: 1px; }
      .cta-marquee-track { gap: 28px; }
      .sa-section-header { margin: 0 auto 32px; }


      /* Reduce section padding on small mobile */
      .about, .services, .product-section, .stats-band, .why, .cta-section, .integrations { padding: 40px 0; }
      .marquee-section { margin: 40px 0; }
      .footer .inner { padding-top: 40px; }

      /* Body text scale down on small mobile */
      body { font-size: 16px; }
      .card-desc, .sa-section-desc, .product-info > p, .why-item-content p, .cta-desc,
      .services-subtitle, .integrations-subtitle { font-size: 16px; }
    }

  
    /* ── FAQ ── */
    /* FAQ — mirrors the AI Site Audit page FAQ exactly */
    .faq-section { background: var(--dark, #0a0a0a); padding: 100px 0; position: relative; }
    .faq-section .section-heading { text-align: center; margin: 0 0 56px; }
    .faq-section .section-title {
      font-family: var(--font-heading, 'DM Sans', sans-serif);
      font-size: 85px; font-weight: 400; text-transform: uppercase; line-height: 1;
      color: var(--white, #fff); margin-bottom: 20px;
    }
    .faq-section .section-title em {
      font-family: var(--font-accent, 'Cormorant Garamond', Georgia, serif);
      font-style: italic; font-weight: 600; font-size: 95px; line-height: 1;
    }
    .faq-section .section-heading-body {
      font-family: var(--font-heading, 'DM Sans', sans-serif); font-size: 20px; font-weight: 400;
      color: var(--white, #fff); line-height: 1.5; max-width: 680px; margin: 0 auto;
    }
    .faq-list { display: flex; flex-direction: column; }
    .faq-item { border-bottom: 1px solid rgba(255,255,255,0.10); }
    .faq-item:first-child { border-top: 1px solid rgba(255,255,255,0.10); }
    .faq-btn {
      width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 24px;
      padding: 24px 0; background: none; border: none; cursor: pointer; text-align: left;
      font-family: var(--font-heading, 'DM Sans', sans-serif);
      font-size: 20px; font-weight: 500; color: var(--white, #fff);
    }
    .faq-btn:hover { color: var(--zinc-300, #d4d4d8); }
    .faq-icon {
      flex-shrink: 0; width: 28px; height: 28px; border-radius: 50%;
      border: 1px solid rgba(255,255,255,0.20);
      display: flex; align-items: center; justify-content: center;
      transition: transform 0.3s var(--ease, cubic-bezier(0.16,1,0.3,1)), border-color 0.3s ease;
    }
    .faq-btn[aria-expanded="true"] .faq-icon { transform: rotate(180deg); border-color: rgba(255,255,255,0.40); }
    .faq-answer { overflow: hidden; max-height: 0; transition: max-height 0.4s var(--ease, cubic-bezier(0.16,1,0.3,1)); }
    .faq-answer p {
      padding-bottom: 24px; margin: 0; max-width: 760px;
      font-family: var(--font-heading, 'DM Sans', sans-serif); font-size: 17px; line-height: 1.7; color: var(--zinc-300, #d4d4d8);
    }
    @media (max-width: 1600px) { .faq-section .section-title { font-size: 72px; } .faq-section .section-title em { font-size: 82px; } }
    @media (max-width: 1440px) { .faq-section .section-title { font-size: 64px; } .faq-section .section-title em { font-size: 74px; } }
    @media (max-width: 1280px) { .faq-section .section-title { font-size: 56px; } .faq-section .section-title em { font-size: 66px; } }
    @media (max-width: 1024px) { .faq-section .section-title { font-size: 48px; } .faq-section .section-title em { font-size: 58px; } }
    @media (max-width: 768px) {
      .faq-section { padding: 64px 0; }
      .faq-section .section-title { font-size: 60px; } .faq-section .section-title em { font-size: 70px; }
    }
    @media (max-width: 640px) { .faq-section .section-title { font-size: 56px; } .faq-section .section-title em { font-size: 66px; } }
    @media (max-width: 480px) {
      .faq-section .section-title { font-size: 52px; } .faq-section .section-title em { font-size: 62px; }
      .faq-section .section-heading-body { font-size: 16px; }
    }

    /* ══════════════════════════════════════
       MORE ARTICLES (blog) section
       ══════════════════════════════════════ */
    .more-articles { padding: 80px 0; }
    .more-articles-header { text-align: center; margin-bottom: 56px; }
    .more-articles-title {
      font-family: var(--font-heading); font-size: 85px; font-weight: 400;
      text-transform: uppercase; line-height: 1; color: var(--white);
    }
    .more-articles-title em {
      font-family: var(--font-accent); font-style: italic; font-weight: 600;
      font-size: 95px; line-height: 1;
    }

    .related-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
    .related-card {
      border-radius: 20px; background: rgba(24,24,27,0.45);
      border: 1px solid var(--dark-card-border); backdrop-filter: blur(20px);
      overflow: hidden; display: flex; flex-direction: column;
      transition: all 0.5s var(--ease); cursor: pointer; text-decoration: none;
    }
    .related-card:hover { border-color: var(--dark-card-border-hover); background: rgba(28,28,32,0.60); transform: translateY(-4px); }
    .related-card-cover { height: 220px; position: relative; overflow: hidden; }
    .related-card-cover-bg { width: 100%; height: 100%; background-size: cover; background-position: center; transition: transform 0.6s var(--ease); }
    .related-card:hover .related-card-cover-bg { transform: scale(1.06); }
    .related-card-category {
      position: absolute; top: 16px; left: 16px;
      padding: 8px 18px; border-radius: 9999px;
      font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px;
      background: #ffffff; color: #0a0a0a;
    }
    .related-card-body { padding: 28px 28px 32px; flex: 1; display: flex; flex-direction: column; }
    .related-card-meta {
      display: flex; align-items: center; justify-content: space-between;
      font-size: 16px; font-weight: 400; text-transform: uppercase; letter-spacing: 0.05em; color: var(--white);
      margin-bottom: 16px;
    }
    .related-card h3 {
      font-family: var(--font-heading); font-size: 24px; font-weight: 500; line-height: 1.2;
      color: var(--white); margin-bottom: 0; flex: 1;
    }
    .related-card h3 .title-arrow {
      display: inline-flex; align-items: center; justify-content: center;
      width: 32px; height: 32px; border-radius: 50%;
      border: 1.5px solid rgba(255,255,255,0.30);
      margin-left: 10px; vertical-align: middle;
      position: relative; top: -2px;
      opacity: 0; flex-shrink: 0;
      transition: border-color 0.3s ease, background 0.3s ease, opacity 0.3s ease;
    }
    .related-card h3 .title-arrow svg { width: 14px; height: 14px; stroke: var(--white); transition: stroke 0.3s ease; }
    .related-card:hover h3 .title-arrow { opacity: 1; background: var(--white); border-color: var(--white); }
    .related-card:hover h3 .title-arrow svg { stroke: #0a0a0a; }
    .related-card-footer { display: flex; align-items: center; margin-top: auto; padding-top: 24px; }
    .related-card-author { display: flex; align-items: center; gap: 10px; }
    .related-card-avatar { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
    .related-card-author-name { font-size: 17px; font-weight: 400; color: var(--white); }
    .more-articles-cta-wrap { text-align: center; margin-top: 56px; }

    @media (max-width: 1600px) { .more-articles-title { font-size: 72px; } .more-articles-title em { font-size: 76px; } }
    @media (max-width: 1440px) { .more-articles-title { font-size: 64px; } .more-articles-title em { font-size: 68px; } }
    @media (max-width: 1280px) { .more-articles-title { font-size: 56px; } .more-articles-title em { font-size: 60px; } }
    @media (max-width: 1024px) {
      .more-articles-title { font-size: 48px; } .more-articles-title em { font-size: 52px; }
      .related-grid { grid-template-columns: 1fr 1fr; gap: 20px; }
      .related-card-cover { height: 180px; }
    }
    @media (max-width: 768px) {
      .more-articles { padding: 40px 0; }
      .more-articles-title { font-size: 60px; } .more-articles-title em { font-size: 64px; }
      .related-grid { grid-template-columns: 1fr; }
      .related-card-cover { height: 200px; }
    }
    @media (max-width: 640px) { .more-articles-title { font-size: 56px; } .more-articles-title em { font-size: 60px; } }
    @media (max-width: 480px) {
      .more-articles { padding: 40px 0; }
      .more-articles-title { font-size: 52px; } .more-articles-title em { font-size: 56px; }
    }

    /* Decorative visuals moved from <img> to CSS backgrounds (a11y-correct, clears Ahrefs missing-alt) */
    .h2-gradient, .sa-gradient, .services-gradient {
      background-image: url("img/Blue gradient 1.png");
      background-image: image-set(url("img/Blue gradient 1.webp") type("image/webp"), url("img/Blue gradient 1.png") type("image/png"));
      background-repeat: no-repeat; background-position: center; background-size: contain;
    }
    .h2-object {
      aspect-ratio: 669 / 700;
      background-image: url("img/Object1.png");
      background-image: image-set(url("img/Object1.webp") type("image/webp"), url("img/Object1.png") type("image/png"));
      background-repeat: no-repeat; background-position: center; background-size: contain;
    }