/* =========================================================
         amarAI — new landing page (CRE-2574)
         Self-contained, Chatbase-inspired, AmarAI brand palette.
         Only shared assets referenced: logo, favicon, partner logos.
         ========================================================= */
      :root {
        /* Light theme (CRE-2574 — Chatbase-style light palette) */
        --bg: #ffffff;
        --bg-2: #f6f7fb;
        --surface: #ffffff;
        --surface-2: #f4f6fa;
        --line: rgba(13, 16, 32, 0.09);
        --line-strong: rgba(13, 16, 32, 0.14);
        --text: #4a4f5e;
        --text-strong: #0e1020;
        --muted: #6b7180;

        --brand-blue: #1060ff;
        --brand-blue-2: #2563eb;
        --brand-blue-dark: #1d4ed8;
        --purple: #6d5dfc;
        --blue: var(--brand-blue);
        --indigo: #380cfa;
        --cyan: #0ea5e9;
        --teal: #14b8a6;
        --warning: #c98a00;
        --brand-primary: var(--brand-blue);
        --brand-primary-2: var(--brand-blue-2);
        --pink: var(--purple);
        --yellow: var(--cyan);

        --grad-primary: linear-gradient(92deg, #1060ff 0%, #2563eb 100%);
        --grad-brand: linear-gradient(
          92deg,
          #1060ff 0%,
          #2563eb 48%,
          #6d5dfc 100%
        );
        --radius: 18px;
        --maxw: 1180px;
        --ease: cubic-bezier(0.22, 1, 0.36, 1);
      }

      * {
        box-sizing: border-box;
      }
      [hidden] {
        display: none !important;
      }
      html {
        scroll-behavior: smooth;
      }
      body {
        margin: 0;
        background: var(--bg);
        color: var(--text);
        font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI",
          sans-serif;
        font-size: 17px;
        line-height: 1.6;
        -webkit-font-smoothing: antialiased;
        overflow-x: hidden;
      }
      a {
        color: inherit;
        text-decoration: none;
      }
      img {
        max-width: 100%;
        display: block;
      }
      h1,
      h2,
      h3,
      h4 {
        font-family: "Poppins", sans-serif;
        color: var(--text-strong);
        line-height: 1.12;
        letter-spacing: 0;
        margin: 0;
      }
      .wrap {
        width: 100%;
        max-width: var(--maxw);
        margin: 0 auto;
        padding: 0 24px;
      }
      .grad-text {
        background: var(--grad-brand);
        -webkit-background-clip: text;
        background-clip: text;
        color: transparent;
      }
      .eyebrow {
        display: inline-flex;
        align-items: center;
        gap: 9px;
        font-size: 13.5px;
        font-weight: 500;
        color: var(--text-strong);
        background: #fff;
        border: 1px solid var(--line-strong);
        box-shadow: 0 6px 18px -12px rgba(13, 16, 32, 0.4);
        padding: 7px 15px;
        border-radius: 100px;
      }
      .eyebrow .dot {
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background: var(--brand-primary);
        box-shadow: 0 0 0 4px rgba(16, 96, 255, 0.18);
      }
      .section {
        padding: 96px 0;
        position: relative;
      }
      .section-head {
        max-width: 720px;
        margin: 0 auto 56px;
        text-align: center;
      }
      .section-head .kicker {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        font-size: 12.5px;
        font-weight: 700;
        letter-spacing: 0.06em;
        text-transform: uppercase;
        color: var(--brand-primary);
        background: rgba(16, 96, 255, 0.09);
        border: 1px solid rgba(16, 96, 255, 0.18);
        padding: 6px 14px;
        border-radius: 100px;
      }
      .section-head .kicker::before {
        content: "";
        width: 7px;
        height: 7px;
        border-radius: 50%;
        background: var(--grad-primary);
      }
      .section-head h2 {
        font-size: clamp(28px, 4vw, 44px);
        margin: 14px 0 16px;
        font-weight: 700;
      }
      .section-head p {
        font-size: 18px;
        margin: 0;
        color: var(--muted);
      }

      /* ---------- Buttons ---------- */
      .btn {
        display: inline-flex;
        align-items: center;
        gap: 9px;
        font-weight: 600;
        font-size: 16px;
        padding: 14px 26px;
        border-radius: 100px;
        border: 1px solid transparent;
        cursor: pointer;
        transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease),
          background 0.25s var(--ease);
        white-space: nowrap;
      }
      .btn-primary {
        color: #fff;
        background: var(--grad-primary);
        box-shadow: 0 10px 30px -10px rgba(16, 96, 255, 0.6);
      }
      .btn-primary:hover {
        transform: translateY(-2px);
        box-shadow: 0 16px 40px -10px rgba(16, 96, 255, 0.75);
      }
      .btn-ghost {
        color: var(--text-strong);
        background: #fff;
        border-color: var(--line-strong);
        box-shadow: 0 8px 22px -16px rgba(13, 16, 32, 0.5);
      }
      .btn-ghost:hover {
        background: var(--surface-2);
        transform: translateY(-2px);
      }

      /* ---------- Navbar ---------- */
      header.nav {
        position: fixed;
        inset: 0 0 auto 0;
        z-index: 100;
        transition: background 0.3s var(--ease), border-color 0.3s var(--ease);
        border-bottom: 1px solid transparent;
      }
      header.nav.scrolled {
        background: rgba(255, 255, 255, 0.82);
        backdrop-filter: saturate(160%) blur(14px);
        -webkit-backdrop-filter: saturate(160%) blur(14px);
        border-bottom-color: var(--line);
        box-shadow: 0 8px 30px -22px rgba(13, 16, 32, 0.5);
      }
      .nav-inner {
        display: flex;
        align-items: center;
        justify-content: space-between;
        height: 74px;
      }
      .nav-logo img {
        height: 36px;
      }
      .nav-links {
        display: flex;
        gap: 34px;
        list-style: none;
        margin: 0;
        padding: 0;
      }
      .nav-links a {
        font-size: 15.5px;
        color: var(--text);
        transition: color 0.2s;
      }
      .nav-links a:hover {
        color: var(--text-strong);
      }
      .nav-cta {
        display: flex;
        align-items: center;
        gap: 14px;
      }
      .nav-login {
        font-size: 15.5px;
        font-weight: 500;
        color: var(--text-strong);
      }
      .nav-toggle {
        display: none;
        background: none;
        border: 0;
        color: var(--text-strong);
        font-size: 26px;
        cursor: pointer;
        line-height: 1;
      }

      /* ---------- Hero ---------- */
      .hero {
        position: relative;
        padding: 168px 0 90px;
        overflow: hidden;
      }
      .orb {
        position: absolute;
        border-radius: 50%;
        filter: blur(90px);
        opacity: 0.26;
        z-index: 0;
        pointer-events: none;
        animation: float 16s var(--ease) infinite;
      }
      .orb.o1 {
        width: 520px;
        height: 520px;
        background: radial-gradient(circle, var(--brand-primary), transparent 65%);
        top: -160px;
        left: -120px;
      }
      .orb.o2 {
        width: 480px;
        height: 480px;
        background: radial-gradient(circle, var(--purple), transparent 65%);
        top: -80px;
        right: -120px;
        animation-delay: -5s;
      }
      .orb.o3 {
        width: 420px;
        height: 420px;
        background: radial-gradient(circle, var(--pink), transparent 68%);
        bottom: -200px;
        left: 38%;
        opacity: 0.18;
        animation-delay: -9s;
      }
      @keyframes float {
        0%,
        100% {
          transform: translate(0, 0) scale(1);
        }
        50% {
          transform: translate(26px, -34px) scale(1.07);
        }
      }
      .hero-grid {
        position: relative;
        z-index: 1;
        display: grid;
        grid-template-columns: 1.05fr 0.95fr;
        gap: 56px;
        align-items: center;
      }
      .hero h1 {
        font-size: clamp(38px, 5.6vw, 66px);
        font-weight: 800;
        margin: 22px 0 0;
      }
      .hero p.sub {
        font-size: clamp(17px, 2vw, 21px);
        color: var(--muted);
        margin: 22px 0 32px;
        max-width: 560px;
      }
      .hero-cta {
        display: flex;
        gap: 14px;
        flex-wrap: wrap;
      }
      .hero-trust {
        display: flex;
        align-items: center;
        gap: 18px;
        margin-top: 26px;
        font-size: 14.5px;
        color: var(--muted);
        flex-wrap: wrap;
      }
      .hero-trust .chk {
        color: #43d9a3;
        font-weight: 700;
      }

      /* ---------- Hero chat mockup ---------- */
      .chat-card {
        position: relative;
        background: linear-gradient(180deg, #ffffff, #f7f9fc);
        border: 1px solid var(--line-strong);
        border-radius: 24px;
        padding: 18px;
        box-shadow: 0 40px 90px -45px rgba(13, 16, 32, 0.35);
      }
      .chat-head {
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 4px 6px 16px;
        border-bottom: 1px solid var(--line);
      }
      .chat-avatar {
        width: 40px;
        height: 40px;
        border-radius: 50%;
        background: var(--grad-primary);
        display: grid;
        place-items: center;
        font-family: "Poppins";
        font-weight: 700;
        color: #fff;
        font-size: 17px;
      }
      .chat-head .nm {
        font-weight: 600;
        color: var(--text-strong);
        font-size: 15px;
      }
      .chat-head .st {
        font-size: 12.5px;
        color: #43d9a3;
      }
      .chat-body {
        padding: 18px 6px 6px;
        display: flex;
        flex-direction: column;
        gap: 12px;
        min-height: 264px;
      }
      .bubble {
        max-width: 80%;
        padding: 11px 15px;
        border-radius: 16px;
        font-size: 14.5px;
        line-height: 1.45;
        opacity: 0;
        transform: translateY(10px);
        animation: pop 0.5s var(--ease) forwards;
      }
      .bubble.user {
        align-self: flex-end;
        background: #eef1f6;
        color: var(--text-strong);
        border-bottom-right-radius: 5px;
      }
      .bubble.ai {
        align-self: flex-start;
        background: var(--grad-primary);
        color: #fff;
        border-bottom-left-radius: 5px;
        box-shadow: 0 8px 24px -10px rgba(16, 96, 255, 0.6);
      }
      .bubble.b1 {
        animation-delay: 0.3s;
      }
      .bubble.b2 {
        animation-delay: 1.1s;
      }
      .bubble.b3 {
        animation-delay: 2.1s;
      }
      .typing {
        align-self: flex-start;
        display: inline-flex;
        gap: 4px;
        padding: 13px 16px;
        background: #eef1f6;
        border-radius: 16px;
        border-bottom-left-radius: 5px;
        opacity: 0;
        animation: pop 0.4s var(--ease) 1.5s forwards,
          fadeout 0.3s ease 2.05s forwards;
      }
      .typing span {
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background: var(--muted);
        animation: blink 1.2s infinite both;
      }
      .typing span:nth-child(2) {
        animation-delay: 0.2s;
      }
      .typing span:nth-child(3) {
        animation-delay: 0.4s;
      }
      @keyframes pop {
        to {
          opacity: 1;
          transform: translateY(0);
        }
      }
      @keyframes fadeout {
        to {
          opacity: 0;
          height: 0;
          padding: 0;
          margin: 0;
        }
      }
      @keyframes blink {
        0%,
        80%,
        100% {
          opacity: 0.3;
        }
        40% {
          opacity: 1;
        }
      }
      .float-card {
        position: absolute;
        background: rgba(255, 255, 255, 0.96);
        border: 1px solid var(--line-strong);
        backdrop-filter: blur(8px);
        border-radius: 14px;
        padding: 11px 14px;
        font-size: 13px;
        color: var(--text-strong);
        display: flex;
        align-items: center;
        gap: 10px;
        box-shadow: 0 18px 44px -18px rgba(13, 16, 32, 0.4);
        animation: float 7s var(--ease) infinite;
      }
      .float-card .ic {
        width: 30px;
        height: 30px;
        border-radius: 9px;
        display: grid;
        place-items: center;
        font-size: 15px;
      }
      .float-card small {
        display: block;
        color: var(--muted);
        font-size: 11.5px;
      }
      .float-card.fc1 {
        top: 12px;
        right: -26px;
        animation-delay: -2s;
      }
      .float-card.fc2 {
        bottom: 24px;
        left: -34px;
        animation-delay: -4s;
      }

      /* ---------- Logo marquee ---------- */
      .marquee-sec {
        padding: 54px 0;
        border-top: 1px solid var(--line);
        border-bottom: 1px solid var(--line);
      }
      .marquee-sec p.lbl {
        text-align: center;
        color: var(--muted);
        font-size: 14.5px;
        margin: 0 0 28px;
      }
      .marquee {
        position: relative;
        overflow: hidden;
        -webkit-mask-image: linear-gradient(
          90deg,
          transparent,
          #000 12%,
          #000 88%,
          transparent
        );
        mask-image: linear-gradient(
          90deg,
          transparent,
          #000 12%,
          #000 88%,
          transparent
        );
      }
      .marquee-track {
        display: flex;
        gap: 70px;
        width: max-content;
        animation: scroll 28s linear infinite;
      }
      .marquee-track img {
        height: 34px;
        opacity: 0.62;
        filter: grayscale(1);
        transition: opacity 0.3s, filter 0.3s;
      }
      .marquee-track img:hover {
        opacity: 1;
        filter: grayscale(0);
      }
      @keyframes scroll {
        to {
          transform: translateX(-50%);
        }
      }

      /* ---------- Cards / grids ---------- */
      .grid-3 {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 22px;
      }
      .grid-2 {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 22px;
      }
      .card {
        background: var(--surface);
        border: 1px solid var(--line);
        border-radius: var(--radius);
        padding: 30px 28px;
        box-shadow: 0 12px 34px -26px rgba(13, 16, 32, 0.4);
        transition: transform 0.3s var(--ease), border-color 0.3s var(--ease),
          background 0.3s var(--ease), box-shadow 0.3s var(--ease);
        height: 100%;
      }
      .card:hover {
        transform: translateY(-5px);
        border-color: var(--line-strong);
        background: var(--surface);
        box-shadow: 0 26px 60px -30px rgba(13, 16, 32, 0.32);
      }
      /* Icon tile. Global (NOT scoped to .card) so accent boxes (.ac-*) used
         inside .bento / .suite-card / .info-card / .trust render as 50x50 tiles
         instead of stretching into full-width "weird" colored bands. The .card
         scope used to leave those boxes unsized → block-level tinted bands
         (CRE-2574). */
      .ic-box {
        width: 50px;
        height: 50px;
        border-radius: 13px;
        display: grid;
        place-items: center;
        margin-bottom: 20px;
        background: rgba(16, 96, 255, 0.12);
        color: var(--brand-primary);
      }
      .card h3 {
        font-size: 21px;
        font-weight: 600;
        margin-bottom: 10px;
      }
      .card p {
        margin: 0;
        font-size: 15.5px;
        color: var(--muted);
      }
      .ic-box svg {
        width: 24px;
        height: 24px;
      }
      /* accent variants for icon boxes */
      .ac-purple {
        background: rgba(126, 47, 255, 0.14) !important;
        color: var(--purple) !important;
      }
      .ac-blue {
        background: rgba(16, 96, 255, 0.14) !important;
        color: #5b8cff !important;
      }
      .ac-pink {
        background: rgba(109, 93, 252, 0.14) !important;
        color: var(--pink) !important;
      }
      .ac-yellow {
        background: rgba(14, 165, 233, 0.14) !important;
        color: var(--yellow) !important;
      }

      /* ---------- How it works ---------- */
      .steps {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 22px;
        counter-reset: step;
      }
      .step {
        position: relative;
        background: var(--surface);
        border: 1px solid var(--line);
        border-radius: var(--radius);
        padding: 30px 26px;
        box-shadow: 0 12px 34px -26px rgba(13, 16, 32, 0.4);
        transition: transform 0.3s var(--ease), border-color 0.3s var(--ease),
          box-shadow 0.3s var(--ease);
      }
      .step:hover {
        transform: translateY(-5px);
        border-color: var(--line-strong);
        box-shadow: 0 26px 60px -30px rgba(13, 16, 32, 0.3);
      }
      .step .num {
        font-family: "Poppins";
        font-weight: 700;
        font-size: 15px;
        width: 38px;
        height: 38px;
        border-radius: 11px;
        display: grid;
        place-items: center;
        color: #fff;
        background: var(--grad-primary);
        margin-bottom: 18px;
      }
      .step h3 {
        font-size: 18.5px;
        font-weight: 600;
        margin-bottom: 9px;
      }
      .step p {
        margin: 0;
        font-size: 15px;
        color: var(--muted);
      }

      /* ---------- Integrations ---------- */
      .integrations {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 14px;
        max-width: 760px;
        margin: 0 auto;
      }
      .chip {
        display: inline-flex;
        align-items: center;
        gap: 10px;
        padding: 12px 20px;
        border: 1px solid var(--line-strong);
        border-radius: 100px;
        background: #fff;
        font-size: 15px;
        color: var(--text-strong);
        box-shadow: 0 6px 18px -14px rgba(13, 16, 32, 0.4);
        transition: transform 0.25s var(--ease), background 0.25s,
          box-shadow 0.25s;
      }
      .chip:hover {
        transform: translateY(-3px);
        background: var(--surface-2);
        box-shadow: 0 14px 30px -16px rgba(13, 16, 32, 0.4);
      }
      .chip i {
        font-style: normal;
        font-size: 17px;
        line-height: 1;
        width: 20px;
        height: 20px;
        flex: 0 0 auto;
        display: inline-flex;
        align-items: center;
        justify-content: center;
      }

      /* ---------- Stats ---------- */
      .stats {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 22px;
        background: linear-gradient(
          180deg,
          rgba(37, 99, 235, 0.08),
          rgba(126, 47, 255, 0.06)
        );
        border: 1px solid var(--line);
        border-radius: 24px;
        padding: 48px 28px;
      }
      .stat {
        text-align: center;
      }
      .stat .big {
        font-family: "Poppins";
        font-weight: 800;
        font-size: clamp(34px, 5vw, 52px);
        background: var(--grad-primary);
        -webkit-background-clip: text;
        background-clip: text;
        color: transparent;
        line-height: 1;
      }
      .stat p {
        margin: 12px 0 0;
        font-size: 15px;
        color: var(--muted);
      }

      /* ---------- Testimonial ---------- */
      .quote-card {
        max-width: 880px;
        margin: 0 auto;
        background: var(--surface);
        border: 1px solid var(--line);
        border-radius: 24px;
        padding: 52px 48px;
        text-align: center;
        position: relative;
        box-shadow: 0 30px 70px -45px rgba(13, 16, 32, 0.34);
      }
      .quote-card .qmark {
        font-family: "Poppins";
        font-size: 70px;
        line-height: 0.6;
        background: var(--grad-primary);
        -webkit-background-clip: text;
        background-clip: text;
        color: transparent;
      }
      .quote-card blockquote {
        margin: 14px 0 26px;
        font-size: clamp(19px, 2.4vw, 25px);
        line-height: 1.5;
        color: var(--text-strong);
        font-weight: 500;
      }
      .quote-card .who {
        color: var(--muted);
        font-size: 15px;
      }

      /* ---------- Final CTA ---------- */
      .cta-band {
        position: relative;
        overflow: hidden;
        border-radius: 28px;
        padding: 72px 40px;
        text-align: center;
        background: radial-gradient(
            120% 140% at 50% 0%,
            rgba(37, 99, 235, 0.22),
            transparent 60%
          ),
          var(--surface);
        border: 1px solid var(--line-strong);
      }
      .cta-band h2 {
        font-size: clamp(28px, 4.4vw, 46px);
        font-weight: 700;
        max-width: 640px;
        margin: 0 auto 16px;
      }
      .cta-band p {
        color: var(--muted);
        font-size: 18px;
        max-width: 540px;
        margin: 0 auto 30px;
      }

      /* ---------- Footer ---------- */
      footer.ft {
        border-top: 1px solid var(--line);
        padding: 54px 0 40px;
        margin-top: 30px;
      }
      .ft-top {
        display: flex;
        align-items: center;
        justify-content: space-between;
        flex-wrap: wrap;
        gap: 24px;
        padding-bottom: 30px;
        border-bottom: 1px solid var(--line);
      }
      .ft-contact {
        display: flex;
        align-items: center;
        gap: 16px;
      }
      .ft-contact span {
        color: var(--muted);
        font-size: 15px;
      }
      .ft-contact b {
        color: var(--text-strong);
        font-size: 20px;
        font-family: "Poppins";
      }
      .ft-social {
        display: flex;
        gap: 14px;
        list-style: none;
        margin: 0;
        padding: 0;
      }
      .ft-social > li > a {
        width: 42px;
        height: 42px;
        border-radius: 50%;
        border: 1px solid var(--line-strong);
        display: flex;
        align-items: center;
        justify-content: center;
        color: var(--text-strong);
        transition: background 0.25s, transform 0.25s;
      }
      .ft-social > li > a:hover {
        background: var(--grad-primary);
        transform: translateY(-3px);
        border-color: transparent;
      }
      .ft-social svg {
        display: block;
        width: 18px;
        height: 18px;
        flex: 0 0 auto;
      }
      .ft-bottom {
        display: flex;
        align-items: center;
        justify-content: space-between;
        flex-wrap: wrap;
        gap: 16px;
        padding-top: 26px;
        font-size: 14px;
        color: var(--muted);
      }
      .ft-bottom ul {
        display: flex;
        gap: 22px;
        list-style: none;
        margin: 0;
        padding: 0;
      }
      .ft-bottom a:hover {
        color: var(--text-strong);
      }

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

      /* ---------- Scroll-top ---------- */
      .scroll-top {
        position: fixed;
        right: 24px;
        bottom: 24px;
        width: 46px;
        height: 46px;
        border-radius: 50%;
        border: none;
        background: var(--grad-primary);
        color: #fff;
        font-size: 22px;
        cursor: pointer;
        display: grid;
        place-items: center;
        opacity: 0;
        pointer-events: none;
        transform: translateY(12px);
        transition: opacity 0.3s, transform 0.3s;
        z-index: 90;
      }
      .scroll-top.show {
        opacity: 1;
        pointer-events: auto;
        transform: none;
      }

      /* ---------- Mobile nav ---------- */
      .mobile-menu {
        display: none;
        position: fixed;
        inset: 74px 0 auto 0;
        background: rgba(255, 255, 255, 0.98);
        backdrop-filter: blur(14px);
        border-bottom: 1px solid var(--line);
        box-shadow: 0 20px 40px -24px rgba(13, 16, 32, 0.4);
        padding: 18px 24px 26px;
        z-index: 99;
      }
      .mobile-menu.open {
        display: block;
      }
      .mobile-menu a {
        display: block;
        padding: 13px 0;
        border-bottom: 1px solid var(--line);
        color: var(--text);
      }
      .mobile-menu .btn {
        width: 100%;
        justify-content: center;
        margin-top: 16px;
      }

      /* ---------- Responsive ---------- */
      @media (max-width: 920px) {
        .hero-grid {
          grid-template-columns: 1fr;
          gap: 64px;
        }
        .hero-visual {
          max-width: 440px;
          margin: 0 auto;
          width: 100%;
        }
        .grid-3,
        .steps {
          grid-template-columns: repeat(2, 1fr);
        }
        .stats {
          grid-template-columns: repeat(2, 1fr);
          gap: 30px 22px;
        }
        .nav-links,
        .nav-login {
          display: none;
        }
        .nav-toggle {
          display: block;
        }
      }
      @media (max-width: 560px) {
        .section {
          padding: 70px 0;
        }
        .grid-3,
        .grid-2,
        .steps {
          grid-template-columns: 1fr;
        }
        .quote-card,
        .cta-band {
          padding: 40px 24px;
        }
        .float-card.fc1 {
          right: -8px;
        }
        .float-card.fc2 {
          left: -8px;
        }
        .nav-cta .btn-primary {
          padding: 11px 18px;
          font-size: 15px;
        }
        .ft-bottom ul {
          flex-wrap: wrap;
          gap: 12px 18px;
        }
      }
      @media (prefers-reduced-motion: reduce) {
        *,
        .orb,
        .marquee-track,
        .float-card,
        .bubble,
        .typing {
          animation: none !important;
          transition: none !important;
        }
        .bubble,
        .typing {
          opacity: 1;
          transform: none;
        }
        .reveal {
          opacity: 1;
          transform: none;
        }
      }

      /* =========================================================
         Sub-page additions (CRE-2574) — features / pricing / contact
         ========================================================= */

      /* ---------- Sub-page hero (shorter than home hero) ---------- */
      .page-hero {
        position: relative;
        overflow: hidden;
        padding: 152px 0 64px;
        text-align: center;
      }
      .page-hero .wrap {
        position: relative;
        z-index: 1;
      }
      .page-hero h1 {
        font-size: clamp(34px, 5vw, 56px);
        font-weight: 800;
        margin: 20px auto 0;
        max-width: 820px;
      }
      .page-hero p.sub {
        font-size: clamp(17px, 2vw, 20px);
        color: var(--muted);
        margin: 20px auto 0;
        max-width: 620px;
      }
      .page-hero .hero-cta {
        justify-content: center;
        margin-top: 30px;
      }

      /* ---------- Feature spotlight rows ---------- */
      .spotlight {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 56px;
        align-items: center;
      }
      .spotlight + .spotlight {
        margin-top: 92px;
      }
      .spotlight.flip .sl-copy {
        order: 2;
      }
      .sl-copy .kicker {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        font-size: 12.5px;
        font-weight: 700;
        letter-spacing: 0.06em;
        text-transform: uppercase;
        color: var(--brand-primary);
        background: rgba(16, 96, 255, 0.09);
        border: 1px solid rgba(16, 96, 255, 0.18);
        padding: 6px 14px;
        border-radius: 100px;
      }
      .sl-copy .kicker::before {
        content: "";
        width: 7px;
        height: 7px;
        border-radius: 50%;
        background: var(--grad-primary);
      }
      .sl-copy h2 {
        font-size: clamp(26px, 3.4vw, 38px);
        font-weight: 700;
        margin: 12px 0 14px;
      }
      .sl-copy p {
        color: var(--muted);
        font-size: 16.5px;
        margin: 0 0 20px;
      }
      .sl-list {
        list-style: none;
        margin: 0;
        padding: 0;
        display: flex;
        flex-direction: column;
        gap: 12px;
      }
      .sl-list li {
        position: relative;
        padding-left: 32px;
        color: var(--text-strong);
        font-size: 15.5px;
      }
      .sl-list li::before {
        content: "";
        position: absolute;
        left: 0;
        top: 1px;
        width: 21px;
        height: 21px;
        border-radius: 7px;
        background: rgba(67, 217, 163, 0.16);
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='13' height='13' viewBox='0 0 24 24' fill='none' stroke='%2343d9a3' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E");
        background-repeat: no-repeat;
        background-position: center;
      }

      /* Visual panel used in spotlights (CSS-only, no screenshots needed) */
      .sl-visual {
        position: relative;
        background: linear-gradient(180deg, #ffffff, #f5f7fb);
        border: 1px solid var(--line-strong);
        border-radius: 22px;
        padding: 24px;
        box-shadow: 0 40px 90px -55px rgba(13, 16, 32, 0.4);
        min-height: 268px;
      }
      .panel-row {
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 13px 15px;
        border: 1px solid var(--line);
        border-radius: 13px;
        background: #fff;
        box-shadow: 0 8px 22px -18px rgba(13, 16, 32, 0.45);
        margin-bottom: 12px;
      }
      .panel-row:last-child {
        margin-bottom: 0;
      }
      .panel-row .pic {
        width: 36px;
        height: 36px;
        border-radius: 10px;
        display: grid;
        place-items: center;
        flex: 0 0 auto;
        background: rgba(16, 96, 255, 0.14);
        color: var(--brand-primary);
      }
      .panel-row .pic svg {
        width: 19px;
        height: 19px;
      }
      .panel-row b {
        color: var(--text-strong);
        font-size: 14.5px;
        font-weight: 600;
      }
      .panel-row small {
        display: block;
        color: var(--muted);
        font-size: 12.5px;
      }
      .panel-row .tag {
        margin-left: auto;
        font-size: 11.5px;
        font-weight: 600;
        padding: 4px 10px;
        border-radius: 100px;
        background: rgba(67, 217, 163, 0.14);
        color: #43d9a3;
        white-space: nowrap;
      }

      /* ---------- Pricing ---------- */
      .cad-toggle {
        display: inline-flex;
        gap: 4px;
        padding: 5px;
        border: 1px solid var(--line-strong);
        border-radius: 100px;
        background: #fff;
        box-shadow: 0 8px 22px -16px rgba(13, 16, 32, 0.4);
        margin: 0 auto;
      }
      .cad-toggle button {
        border: 0;
        background: none;
        cursor: pointer;
        color: var(--muted);
        font-family: "Inter", sans-serif;
        font-size: 14.5px;
        font-weight: 600;
        padding: 9px 20px;
        border-radius: 100px;
        transition: color 0.2s, background 0.25s var(--ease);
      }
      .cad-toggle button.active {
        color: #fff;
        background: var(--grad-primary);
        box-shadow: 0 8px 22px -10px rgba(16, 96, 255, 0.6);
      }
      .plan-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 22px;
        align-items: stretch;
      }
      .plan-card {
        position: relative;
        display: flex;
        flex-direction: column;
        background: var(--surface);
        border: 1px solid var(--line);
        border-radius: var(--radius);
        padding: 30px 26px;
        box-shadow: 0 12px 34px -26px rgba(13, 16, 32, 0.4);
        transition: transform 0.3s var(--ease), border-color 0.3s var(--ease),
          box-shadow 0.3s var(--ease);
      }
      .plan-card:hover {
        transform: translateY(-5px);
        border-color: var(--line-strong);
        box-shadow: 0 26px 60px -30px rgba(13, 16, 32, 0.3);
      }
      .plan-card.featured {
        border-color: rgba(37, 99, 235, 0.55);
        background: radial-gradient(
            120% 120% at 50% 0%,
            rgba(37, 99, 235, 0.12),
            transparent 60%
          ),
          var(--surface);
        box-shadow: 0 30px 70px -40px rgba(16, 96, 255, 0.7);
      }
      .badge-featured {
        position: absolute;
        top: -12px;
        left: 50%;
        transform: translateX(-50%);
        font-size: 12px;
        font-weight: 700;
        letter-spacing: 0.03em;
        text-transform: uppercase;
        color: #fff;
        background: var(--grad-primary);
        padding: 6px 16px;
        border-radius: 100px;
        white-space: nowrap;
      }
      .plan-name {
        font-family: "Poppins", sans-serif;
        font-weight: 600;
        font-size: 20px;
        color: var(--text-strong);
      }
      .plan-tag {
        font-size: 13.5px;
        color: var(--muted);
        margin-top: 4px;
        min-height: 20px;
      }
      .plan-price {
        font-family: "Poppins", sans-serif;
        font-weight: 800;
        font-size: 38px;
        color: var(--text-strong);
        margin: 18px 0 2px;
        line-height: 1.1;
      }
      .plan-price small {
        font-family: "Inter", sans-serif;
        font-size: 15px;
        font-weight: 500;
        color: var(--muted);
      }
      .plan-note {
        font-size: 13px;
        color: var(--muted);
        min-height: 18px;
      }
      .plan-card ul {
        list-style: none;
        margin: 22px 0 26px;
        padding: 22px 0 0;
        border-top: 1px solid var(--line);
        display: flex;
        flex-direction: column;
        gap: 11px;
        flex: 1 1 auto;
      }
      .plan-card ul li {
        position: relative;
        padding-left: 28px;
        font-size: 14.5px;
        color: var(--text);
      }
      .plan-card ul li::before {
        content: "";
        position: absolute;
        left: 0;
        top: 2px;
        width: 18px;
        height: 18px;
        border-radius: 6px;
        background: rgba(67, 217, 163, 0.14);
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='11' viewBox='0 0 24 24' fill='none' stroke='%2343d9a3' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E");
        background-repeat: no-repeat;
        background-position: center;
      }
      .plan-card .btn {
        width: 100%;
        justify-content: center;
      }
      .plans-state {
        text-align: center;
        color: var(--muted);
        padding: 40px 0;
      }

      /* ---------- FAQ accordion ---------- */
      .faq {
        max-width: 760px;
        margin: 0 auto;
        display: flex;
        flex-direction: column;
        gap: 14px;
      }
      .faq-item {
        border: 1px solid var(--line);
        border-radius: 14px;
        background: var(--surface);
        overflow: hidden;
      }
      .faq-q {
        width: 100%;
        text-align: left;
        background: none;
        border: 0;
        cursor: pointer;
        color: var(--text-strong);
        font-family: "Inter", sans-serif;
        font-size: 16.5px;
        font-weight: 600;
        padding: 20px 22px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 16px;
      }
      .faq-q .pm {
        flex: 0 0 auto;
        font-size: 22px;
        color: var(--brand-primary);
        transition: transform 0.3s var(--ease);
      }
      .faq-item.open .faq-q .pm {
        transform: rotate(45deg);
      }
      .faq-a {
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.35s var(--ease);
      }
      .faq-a p {
        margin: 0;
        padding: 0 22px 20px;
        color: var(--muted);
        font-size: 15.5px;
      }

      /* ---------- Contact ---------- */
      .contact-grid {
        display: grid;
        grid-template-columns: 0.9fr 1.1fr;
        gap: 30px;
        align-items: start;
      }
      .contact-info {
        display: flex;
        flex-direction: column;
        gap: 16px;
      }
      .info-card {
        display: flex;
        align-items: center;
        gap: 16px;
        padding: 22px;
        border: 1px solid var(--line);
        border-radius: var(--radius);
        background: var(--surface);
        box-shadow: 0 12px 34px -26px rgba(13, 16, 32, 0.4);
        transition: transform 0.3s var(--ease), border-color 0.3s var(--ease),
          box-shadow 0.3s var(--ease);
      }
      .info-card:hover {
        transform: translateY(-4px);
        border-color: var(--line-strong);
      }
      .info-card .ic-box {
        margin: 0;
        flex: 0 0 auto;
      }
      .info-card .lbl {
        font-size: 13px;
        color: var(--muted);
      }
      .info-card .val {
        font-size: 17px;
        font-weight: 600;
        color: var(--text-strong);
        font-family: "Poppins", sans-serif;
      }
      .form-card {
        background: var(--surface);
        border: 1px solid var(--line);
        border-radius: 24px;
        padding: 34px 32px;
        box-shadow: 0 24px 60px -40px rgba(13, 16, 32, 0.34);
      }
      .field {
        margin-bottom: 18px;
      }
      .field label {
        display: block;
        font-size: 14px;
        font-weight: 500;
        color: var(--text-strong);
        margin-bottom: 8px;
      }
      .field input,
      .field textarea {
        width: 100%;
        background: var(--bg-2);
        border: 1px solid var(--line-strong);
        border-radius: 12px;
        padding: 13px 15px;
        color: var(--text-strong);
        font-family: "Inter", sans-serif;
        font-size: 15.5px;
        transition: border-color 0.2s, box-shadow 0.2s;
      }
      .field input::placeholder,
      .field textarea::placeholder {
        color: rgba(13, 16, 32, 0.34);
      }
      .field input:focus,
      .field textarea:focus {
        outline: none;
        border-color: var(--brand-primary);
        box-shadow: 0 0 0 3px rgba(16, 96, 255, 0.16);
      }
      .field textarea {
        resize: vertical;
        min-height: 124px;
      }
      .form-note {
        font-size: 13px;
        color: var(--muted);
        margin: 4px 0 0;
      }
      .form-ok {
        display: none;
        margin-top: 16px;
        padding: 14px 16px;
        border-radius: 12px;
        background: rgba(67, 217, 163, 0.12);
        border: 1px solid rgba(67, 217, 163, 0.4);
        color: #43d9a3;
        font-size: 14.5px;
      }
      .form-ok.show {
        display: block;
      }

      /* ---------- Sub-page responsive ---------- */
      @media (max-width: 920px) {
        .spotlight,
        .contact-grid {
          grid-template-columns: 1fr;
          gap: 36px;
        }
        .spotlight.flip .sl-copy {
          order: 0;
        }
        .plan-grid {
          grid-template-columns: repeat(2, 1fr);
        }
      }
      @media (max-width: 560px) {
        .plan-grid {
          grid-template-columns: 1fr;
        }
        .page-hero {
          padding: 128px 0 48px;
        }
        .form-card {
          padding: 26px 20px;
        }
      }

      /* =========================================================
         CRE-2574 — Rich home page sections + extra animations
         (light theme). Original AmarAI content & layout.
         ========================================================= */

      /* Animated brand gradient text (adds life to headlines) */
      .grad-text {
        background-size: 220% auto;
        animation: gradshift 7s var(--ease) infinite;
      }
      @keyframes gradshift {
        0%,
        100% {
          background-position: 0% 50%;
        }
        50% {
          background-position: 100% 50%;
        }
      }

      /* Section background helpers */
      .section.soft {
        background: var(--bg-2);
      }
      .section.tint {
        background: radial-gradient(
            120% 120% at 0% 0%,
            rgba(37, 99, 235, 0.06),
            transparent 46%
          ),
          radial-gradient(
            120% 120% at 100% 0%,
            rgba(126, 47, 255, 0.06),
            transparent 46%
          ),
          var(--bg);
      }

      /* Hero quick-stats row */
      .hero-stats {
        display: flex;
        align-items: center;
        gap: 28px;
        margin-top: 34px;
        flex-wrap: wrap;
      }
      .hero-stats .hs b {
        font-family: "Poppins", sans-serif;
        font-weight: 800;
        font-size: 26px;
        color: var(--text-strong);
        line-height: 1;
        display: block;
      }
      .hero-stats .hs span {
        font-size: 13px;
        color: var(--muted);
        margin-top: 5px;
        display: block;
      }
      .hero-stats .div {
        width: 1px;
        align-self: stretch;
        background: var(--line);
      }

      /* Category pill row under a section heading */
      .pill-row {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 10px;
        margin: 0 auto 10px;
        max-width: 760px;
      }
      .pill {
        font-size: 13px;
        font-weight: 600;
        padding: 7px 14px;
        border-radius: 100px;
        border: 1px solid var(--line-strong);
        color: var(--text-strong);
        background: #fff;
      }

      /* Bento grid (omnichannel) */
      .bento {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 22px;
      }
      .bento .b-cell {
        position: relative;
        overflow: hidden;
        background: var(--surface);
        border: 1px solid var(--line);
        border-radius: var(--radius);
        padding: 28px;
        box-shadow: 0 12px 34px -26px rgba(13, 16, 32, 0.4);
        transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease),
          border-color 0.3s var(--ease);
      }
      .bento .b-cell:hover {
        transform: translateY(-5px);
        box-shadow: 0 26px 60px -30px rgba(13, 16, 32, 0.3);
        border-color: var(--line-strong);
      }
      .bento .b-wide {
        grid-column: span 2;
      }
      .bento .b-cell .ic-box {
        margin-bottom: 0;
      }
      .bento .b-cell h3 {
        font-size: 20px;
        font-weight: 600;
        margin: 14px 0 8px;
      }
      .bento .b-cell p {
        margin: 0;
        color: var(--muted);
        font-size: 15px;
      }
      .bento .b-glow {
        position: absolute;
        right: -40px;
        bottom: -50px;
        width: 170px;
        height: 170px;
        border-radius: 50%;
        background: radial-gradient(
          circle,
          rgba(37, 99, 235, 0.16),
          transparent 70%
        );
        pointer-events: none;
      }

      /* AI suite module cards */
      .suite-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 22px;
      }
      .suite-card {
        position: relative;
        display: flex;
        flex-direction: column;
        background: var(--surface);
        border: 1px solid var(--line);
        border-radius: var(--radius);
        padding: 28px 26px;
        box-shadow: 0 12px 34px -26px rgba(13, 16, 32, 0.4);
        transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease),
          border-color 0.3s var(--ease);
      }
      .suite-card:hover {
        transform: translateY(-6px);
        box-shadow: 0 28px 64px -30px rgba(13, 16, 32, 0.3);
        border-color: var(--line-strong);
      }
      .suite-card .tag-top {
        position: absolute;
        top: 40px;
        right: 26px;
        font-size: 10.5px;
        font-weight: 700;
        letter-spacing: 0.03em;
        text-transform: uppercase;
        padding: 5px 11px;
        border-radius: 100px;
        background: rgba(67, 217, 163, 0.16);
        color: #1f9d6f;
      }
      .suite-card .tag-top.soon {
        background: rgba(16, 96, 255, 0.12);
        color: var(--blue);
      }
      .suite-card h3 {
        font-size: 20px;
        font-weight: 600;
        margin: 16px 0 8px;
        padding-right: 70px;
      }
      .suite-card p {
        margin: 0 0 16px;
        color: var(--muted);
        font-size: 15px;
      }
      .suite-card ul {
        list-style: none;
        margin: auto 0 0;
        padding: 16px 0 0;
        border-top: 1px solid var(--line);
        display: flex;
        flex-direction: column;
        gap: 9px;
      }
      .suite-card ul li {
        position: relative;
        padding-left: 26px;
        font-size: 14px;
        color: var(--text);
      }
      .suite-card ul li::before {
        content: "";
        position: absolute;
        left: 0;
        top: 2px;
        width: 17px;
        height: 17px;
        border-radius: 6px;
        background: rgba(67, 217, 163, 0.14);
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='11' viewBox='0 0 24 24' fill='none' stroke='%2343d9a3' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E");
        background-repeat: no-repeat;
        background-position: center;
      }

      /* Signed-in product recordings embedded in feature cards (CRE-2628) */
      .card-recording-frame {
        position: relative;
        isolation: isolate;
        flex: 0 0 auto;
        width: 100%;
        aspect-ratio: 16 / 10;
        margin: 18px 0 2px;
        overflow: hidden;
        border: 1px solid var(--line);
        border-radius: 14px;
        background: #f7f8fb;
        box-shadow: 0 18px 42px -32px rgba(13, 16, 32, 0.52);
      }
      .card-recording {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center;
        background: #f7f8fb;
      }
      .card-recording-badge {
        position: absolute;
        z-index: 2;
        top: 10px;
        right: 10px;
        display: inline-flex;
        align-items: center;
        gap: 6px;
        padding: 5px 9px;
        border: 1px solid rgba(255, 255, 255, 0.72);
        border-radius: 999px;
        color: #fff;
        background: rgba(13, 16, 32, 0.72);
        box-shadow: 0 5px 16px rgba(13, 16, 32, 0.2);
        backdrop-filter: blur(7px);
        font-size: 10px;
        font-weight: 700;
        line-height: 1;
        letter-spacing: 0.02em;
        pointer-events: none;
      }
      .card-recording-badge i {
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background: #43d9a3;
        box-shadow: 0 0 0 3px rgba(67, 217, 163, 0.2);
      }
      .bento .card-recording-frame {
        aspect-ratio: 16 / 9;
      }
      .bento .b-wide .card-recording-frame {
        aspect-ratio: 16 / 7;
      }
      .bento .b-wide .card-recording {
        object-position: center 32%;
      }
      .step .card-recording-frame {
        margin-top: 0;
        margin-bottom: 18px;
      }

      /* Use-case / industry grid */
      .uc-grid {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 18px;
      }
      .uc {
        text-align: center;
        padding: 28px 18px;
        border: 1px solid var(--line);
        border-radius: var(--radius);
        background: var(--surface);
        box-shadow: 0 12px 34px -28px rgba(13, 16, 32, 0.4);
        transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease);
      }
      .uc:hover {
        transform: translateY(-5px);
        box-shadow: 0 24px 54px -30px rgba(13, 16, 32, 0.3);
      }
      .uc .emo {
        width: 44px;
        height: 44px;
        display: grid;
        place-items: center;
        margin: 0 auto;
        border-radius: 14px;
        background: var(--surface-2);
        font-size: 30px;
        line-height: 1;
      }
      .uc h4 {
        font-size: 16.5px;
        margin: 14px 0 6px;
        font-weight: 600;
      }
      .uc p {
        margin: 0;
        font-size: 13.5px;
        color: var(--muted);
      }

      /* Trust / security */
      .trust-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 20px;
      }
      .trust {
        display: flex;
        gap: 16px;
        padding: 24px;
        border: 1px solid var(--line);
        border-radius: var(--radius);
        background: var(--surface);
        box-shadow: 0 12px 34px -28px rgba(13, 16, 32, 0.4);
      }
      .trust .ic-box {
        margin: 0;
        flex: 0 0 auto;
      }
      .trust h4 {
        font-size: 16.5px;
        margin: 0 0 6px;
        font-weight: 600;
      }
      .trust p {
        margin: 0;
        font-size: 14px;
        color: var(--muted);
      }

      /* Testimonials grid */
      .tgrid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 22px;
      }
      .tcard {
        display: flex;
        flex-direction: column;
        background: var(--surface);
        border: 1px solid var(--line);
        border-radius: var(--radius);
        padding: 28px 26px;
        box-shadow: 0 12px 34px -26px rgba(13, 16, 32, 0.4);
        transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease);
      }
      .tcard:hover {
        transform: translateY(-5px);
        box-shadow: 0 26px 60px -30px rgba(13, 16, 32, 0.3);
      }
      .tcard .stars {
        color: #ffb020;
        letter-spacing: 2px;
        font-size: 15px;
      }
      .tcard blockquote {
        font-size: 15.5px;
        color: var(--text-strong);
        margin: 14px 0 18px;
        line-height: 1.55;
        font-weight: 500;
      }
      .tcard .by {
        display: flex;
        align-items: center;
        gap: 12px;
        margin-top: auto;
      }
      /* Emoji "memoji"-style person avatars (CRE-2574). Light tile so the
         full-colour emoji reads clearly instead of a flat letter on gradient. */
      .tcard .by .av {
        width: 52px;
        height: 52px;
        border-radius: 50%;
        background: var(--surface-2);
        border: 1px solid var(--line);
        display: grid;
        place-items: center;
        font-size: 44px;
        line-height: 1;
        flex: 0 0 auto;
      }
      .tcard .by b {
        font-size: 14.5px;
        color: var(--text-strong);
        display: block;
        font-family: "Poppins", sans-serif;
      }
      .tcard .by span {
        font-size: 13px;
        color: var(--muted);
      }

      /* Brand-filled CTA band variant */
      .cta-band.brand {
        background: var(--grad-brand);
        border: none;
      }
      .cta-band.brand h2,
      .cta-band.brand p {
        color: #fff;
      }
      .cta-band.brand .btn-primary {
        background: #fff;
        color: var(--brand-primary-2);
        box-shadow: 0 14px 34px -14px rgba(0, 0, 0, 0.35);
      }
      .cta-band.brand .btn-primary:hover {
        box-shadow: 0 20px 44px -14px rgba(0, 0, 0, 0.45);
      }
      .cta-band.brand .hero-trust {
        color: rgba(255, 255, 255, 0.9);
      }
      .cta-band.brand .hero-trust .chk {
        color: #fff;
      }

      /* Rich footer columns */
      .ft-cols {
        display: grid;
        grid-template-columns: 1.5fr 1fr 1fr 1fr;
        gap: 32px;
        padding-bottom: 36px;
        border-bottom: 1px solid var(--line);
      }
      .ft-col h5 {
        font-family: "Poppins", sans-serif;
        font-size: 14px;
        color: var(--text-strong);
        margin: 0 0 16px;
      }
      .ft-col a {
        display: block;
        color: var(--muted);
        font-size: 14.5px;
        margin-bottom: 11px;
        transition: color 0.2s;
      }
      .ft-col a:hover {
        color: var(--text-strong);
      }
      .ft-brand img {
        height: 30px;
      }
      .ft-brand p {
        color: var(--muted);
        font-size: 14.5px;
        max-width: 290px;
        margin: 16px 0 18px;
      }

      /* Responsive for the new grids */
      @media (max-width: 920px) {
        .bento,
        .suite-grid,
        .trust-grid,
        .tgrid {
          grid-template-columns: repeat(2, 1fr);
        }
        .bento .b-wide {
          grid-column: span 2;
        }
        .uc-grid {
          grid-template-columns: repeat(2, 1fr);
        }
        .ft-cols {
          grid-template-columns: 1fr 1fr;
          gap: 28px;
        }
        .hero-stats .div {
          display: none;
        }
      }
      @media (max-width: 560px) {
        .bento,
        .suite-grid,
        .trust-grid,
        .tgrid,
        .uc-grid {
          grid-template-columns: 1fr;
        }
        .bento .b-wide {
          grid-column: auto;
        }
        .bento .b-wide .card-recording-frame {
          aspect-ratio: 16 / 10;
        }
      }

      /* =========================================================
         CRE-2574 — Real product screenshots (browser-frame)
         ========================================================= */
      .showcase {
        max-width: 1000px;
        margin: 0 auto;
      }
      .product-hero {
        position: relative;
      }
      .hero-shot {
        transform: rotate(1.2deg);
      }
      .shot-frame {
        border-radius: 16px;
        overflow: hidden;
        border: 1px solid var(--line-strong);
        background: #fff;
        box-shadow: 0 50px 110px -50px rgba(13, 16, 32, 0.45);
      }
      .shot-bar {
        display: flex;
        align-items: center;
        gap: 7px;
        padding: 12px 16px;
        background: var(--surface-2);
        border-bottom: 1px solid var(--line);
      }
      .shot-bar i {
        width: 11px;
        height: 11px;
        border-radius: 50%;
        background: #ff5f57;
        display: inline-block;
      }
      .shot-bar i:nth-child(2) {
        background: #febc2e;
      }
      .shot-bar i:nth-child(3) {
        background: #28c840;
      }
      .shot-bar .url {
        margin-left: 14px;
        font-size: 12.5px;
        color: var(--muted);
        background: #fff;
        border: 1px solid var(--line);
        border-radius: 100px;
        padding: 4px 14px;
      }
      .shot-frame img {
        width: 100%;
        display: block;
      }
      .shot-cap {
        display: flex;
        justify-content: center;
        flex-wrap: wrap;
        gap: 14px 34px;
        margin-top: 26px;
      }
      .shot-cap span {
        display: inline-flex;
        align-items: center;
        gap: 9px;
        font-size: 14.5px;
        color: var(--muted);
      }
      .shot-cap span::before {
        content: "";
        width: 18px;
        height: 18px;
        border-radius: 6px;
        flex: 0 0 auto;
        background: rgba(67, 217, 163, 0.16)
          url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='11' viewBox='0 0 24 24' fill='none' stroke='%231f9d6f' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E")
          center no-repeat;
      }
      .shot-frame video,
      .shot-frame img {
        width: 100%;
        display: block;
      }
      .shot-media {
        aspect-ratio: 16 / 10;
        object-fit: cover;
        background: #f7f7f8;
      }
      .product-proof {
        background: radial-gradient(
            100% 90% at 50% 0%,
            rgba(16, 96, 255, 0.06),
            transparent 54%
          ),
          #fff;
      }
      .shot-grid {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 22px;
        margin-top: 28px;
      }
      .shot-card {
        min-width: 0;
      }
      .shot-card .shot-frame {
        box-shadow: 0 30px 70px -46px rgba(13, 16, 32, 0.42);
      }
      .shot-card .shot-media {
        aspect-ratio: 16 / 10;
        object-fit: cover;
        object-position: center;
      }
      .shot-card h3 {
        font-size: 18px;
        font-weight: 600;
        margin: 18px 0 6px;
      }
      .shot-card p {
        margin: 0;
        color: var(--muted);
        font-size: 14.5px;
      }
      @media (max-width: 920px) {
        .hero-shot {
          transform: none;
        }
      }
      @media (max-width: 560px) {
        .shot-grid {
          grid-template-columns: 1fr;
        }
        .product-hero .float-card {
          display: none;
        }
        .shot-bar .url {
          min-width: 0;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
      }

      /* =========================================================
         CRE-2574 — Dynamic visuals v1: looping "live" product demos
         on the feature cards, an animated chat conversation, and
         subtle motion on the REAL app screenshots. Pure CSS (no heavy
         assets) so every card reads as a moving image like chatbase.
         Real signed-in screen recordings drop straight into the
         existing <video> frames when available.
         ========================================================= */

      /* Live indicator badge (shared across animated panels) */
      .sl-visual {
        overflow: hidden;
      }
      .sl-visual.live {
        padding-top: 52px;
      }
      .sl-live {
        position: absolute;
        top: 16px;
        right: 16px;
        z-index: 3;
        display: inline-flex;
        align-items: center;
        gap: 7px;
        font-size: 11.5px;
        font-weight: 600;
        color: var(--brand-primary);
        background: rgba(16, 96, 255, 0.08);
        border: 1px solid rgba(16, 96, 255, 0.2);
        padding: 5px 11px;
        border-radius: 100px;
      }
      .sl-live::before {
        content: "";
        width: 7px;
        height: 7px;
        border-radius: 50%;
        background: #22c55e;
        animation: livedot 1.7s ease-out infinite;
      }
      @keyframes livedot {
        0% {
          box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.5);
        }
        70% {
          box-shadow: 0 0 0 7px rgba(34, 197, 94, 0);
        }
        100% {
          box-shadow: 0 0 0 0 rgba(34, 197, 94, 0);
        }
      }

      /* "Live dashboard" — rows refresh/pulse in sequence (staggered
         inline animation-delay set per row in the markup). */
      .sl-visual.live .panel-row {
        animation: rowpulse 6.5s var(--ease) infinite;
      }
      @keyframes rowpulse {
        0%,
        64%,
        100% {
          transform: translateY(0);
          box-shadow: 0 8px 22px -18px rgba(13, 16, 32, 0.45);
          border-color: var(--line);
        }
        8% {
          transform: translateY(-3px);
          box-shadow: 0 16px 32px -16px rgba(16, 96, 255, 0.3);
          border-color: rgba(16, 96, 255, 0.42);
        }
      }

      /* Animated mini bar chart (analytics spotlight) */
      .mini-bars {
        display: flex;
        align-items: flex-end;
        gap: 7px;
        height: 62px;
        padding: 0 2px 2px;
        margin-top: 16px;
      }
      .mini-bars span {
        flex: 1;
        min-width: 0;
        border-radius: 6px 6px 2px 2px;
        background: var(--grad-primary);
        opacity: 0.92;
        height: 100%;
        transform: scaleY(0.4);
        transform-origin: bottom;
        animation: grow 3.4s var(--ease) infinite;
      }
      @keyframes grow {
        0%,
        100% {
          transform: scaleY(0.32);
        }
        50% {
          transform: scaleY(1);
        }
      }

      /* Looping animated chat conversation (handoff spotlight) */
      .lc-head {
        display: flex;
        align-items: center;
        gap: 11px;
        padding: 2px 2px 16px;
        border-bottom: 1px solid var(--line);
        margin-bottom: 16px;
      }
      .lc-av {
        width: 38px;
        height: 38px;
        border-radius: 50%;
        background: var(--grad-primary);
        display: grid;
        place-items: center;
        font-family: "Poppins", sans-serif;
        font-weight: 700;
        color: #fff;
        font-size: 14px;
        flex: 0 0 auto;
      }
      .lc-head b {
        display: block;
        font-size: 14.5px;
        color: var(--text-strong);
        font-family: "Poppins", sans-serif;
      }
      .lc-head small {
        color: var(--muted);
        font-size: 12.5px;
      }
      .lc-body {
        display: flex;
        flex-direction: column;
        gap: 10px;
        min-height: 250px;
      }
      .lc-bubble {
        max-width: 84%;
        padding: 10px 14px;
        border-radius: 15px;
        font-size: 14px;
        line-height: 1.45;
        opacity: 0;
      }
      .lc-bubble.user {
        align-self: flex-end;
        background: #eef1f6;
        color: var(--text-strong);
        border-bottom-right-radius: 5px;
        animation: lc1 12s var(--ease) infinite;
      }
      .lc-slot {
        position: relative;
        align-self: flex-start;
        max-width: 84%;
      }
      .lc-bubble.ai {
        background: var(--grad-primary);
        color: #fff;
        border-bottom-left-radius: 5px;
        box-shadow: 0 8px 22px -12px rgba(16, 96, 255, 0.6);
        max-width: 100%;
        animation: lc2 12s var(--ease) infinite;
      }
      .lc-typing {
        position: absolute;
        top: 0;
        left: 0;
        display: inline-flex;
        gap: 4px;
        padding: 12px 15px;
        background: #eef1f6;
        border-radius: 15px;
        border-bottom-left-radius: 5px;
        opacity: 0;
        animation: lct 12s var(--ease) infinite;
      }
      .lc-typing span {
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background: var(--muted);
        animation: blink 1.2s infinite both;
      }
      .lc-typing span:nth-child(2) {
        animation-delay: 0.2s;
      }
      .lc-typing span:nth-child(3) {
        animation-delay: 0.4s;
      }
      .lc-bubble.note {
        align-self: center;
        background: rgba(109, 93, 252, 0.12);
        color: var(--purple);
        font-size: 12.5px;
        font-weight: 600;
        border-radius: 100px;
        padding: 6px 14px;
        animation: lc3 12s var(--ease) infinite;
      }
      .lc-bubble.human {
        align-self: flex-start;
        background: #fff;
        border: 1px solid var(--line-strong);
        color: var(--text-strong);
        border-bottom-left-radius: 5px;
        animation: lc4 12s var(--ease) infinite;
      }
      @keyframes lc1 {
        0%,
        2% {
          opacity: 0;
          transform: translateY(8px);
        }
        5%,
        93% {
          opacity: 1;
          transform: none;
        }
        98%,
        100% {
          opacity: 0;
        }
      }
      @keyframes lct {
        0%,
        7% {
          opacity: 0;
          transform: translateY(6px);
        }
        10%,
        15% {
          opacity: 1;
          transform: none;
        }
        18%,
        100% {
          opacity: 0;
        }
      }
      @keyframes lc2 {
        0%,
        16% {
          opacity: 0;
          transform: translateY(8px);
        }
        20%,
        93% {
          opacity: 1;
          transform: none;
        }
        98%,
        100% {
          opacity: 0;
        }
      }
      @keyframes lc3 {
        0%,
        36% {
          opacity: 0;
          transform: translateY(8px);
        }
        40%,
        93% {
          opacity: 1;
          transform: none;
        }
        98%,
        100% {
          opacity: 0;
        }
      }
      @keyframes lc4 {
        0%,
        55% {
          opacity: 0;
          transform: translateY(8px);
        }
        59%,
        93% {
          opacity: 1;
          transform: none;
        }
        98%,
        100% {
          opacity: 0;
        }
      }

      /* Dynamic visuals respect reduced-motion: stop the loops and show
         the final/legible state. */
      @media (prefers-reduced-motion: reduce) {
        .lc-bubble,
        .lc-typing {
          opacity: 1 !important;
          transform: none !important;
        }
        .lc-typing {
          display: none !important;
        }
        .mini-bars span {
          transform: none !important;
        }
      }