/* ============================================================
   custom.css
   Hand-written CSS converted from the React components:
   - ScrollServicesList.css  (services-marquee)
   - BrandsSection.css       (brands-marquee / brands-track)
   - shared/components/Effects/Gloweffect.jsx (inline .glow styles)
   - Note: svg-sprite in index.html not styled here.
   ============================================================ */

/* ---------- Typography helpers (shared/components/Typography.jsx) ---------- */
.font-instrument {
  font-family: "Instrument Serif", "Georgia", serif;
}
.font-inter {
  font-family: "Inter", "Helvetica Neue", system-ui, sans-serif;
}

/* ============================================================
   Page loader (full-screen overlay, centered spinner)
   ============================================================ */
#page-loader {
  position: fixed;
  inset: 0;
  z-index: 2147483000;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  background: #fafaf6;
  transition:
    opacity 0.4s ease,
    visibility 0.4s ease;
}
#page-loader.page-loader--hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
.page-loader-spinner {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 3px solid #0505051a;
  border-top-color: #3ac5ce;
  animation: page-loader-spin 0.8s linear infinite;
}
.page-loader-text {
  font-family: "Inter", "Helvetica Neue", system-ui, sans-serif;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-size: 11px;
  font-weight: 600;
  color: #0505058c;
}
@keyframes page-loader-spin {
  to {
    transform: rotate(360deg);
  }
}
@media (prefers-reduced-motion: reduce) {
  .page-loader-spinner {
    animation-duration: 2s;
  }
}

/* MainHero  */
.typo-main {
  font-family: "Instrument Serif", "Georgia", serif;
  font-size: 2.75rem;
  line-height: 1.05;
  font-weight: 400;
  letter-spacing: -0.015em;
}

/* SubHero */
.typo-sub {
  font-family: "Instrument Serif", "Georgia", serif;
  font-size: 2.25rem;
  line-height: 1.05;
  font-weight: 400;
  letter-spacing: -0.015em;
}

/* SubHeroItalic */
.typo-sub-italic {
  font-family: "Instrument Serif", "Georgia", serif;
  font-size: 2.25rem;
  line-height: 1.05;
  font-style: italic;
  letter-spacing: -0.015em;
  color: #0505058c;
}

/* BodyHero */
.typo-body-hero {
  font-family: "Inter", "Helvetica Neue", system-ui, sans-serif;
  font-size: 0.9rem;
  line-height: 1.6;
  color: #0505058c;
}

/* BodyText */
.typo-body {
  font-family: "Inter", "Helvetica Neue", system-ui, sans-serif;
  font-size: 1rem;
  line-height: 1.6;
}

/* CaptionText */
.typo-caption {
  display: block;
  font-family: "Inter", "Helvetica Neue", system-ui, sans-serif;
  font-size: 0.875rem;
  line-height: 1.4;
}

/* ---------- Glow effect (shared/components/Effects/Gloweffect.jsx) ---------- */
.glow {
  border-radius: 9999px;
  background-color: rgb(58 197 206); /* teal accent */
  opacity: 0.4;
  filter: blur(80px);
  pointer-events: none;
}

/* ---------- Services marquee (ScrollServicesList.css) ---------- */
.services-marquee {
  -webkit-mask-image: linear-gradient(
    to right,
    transparent,
    black 10%,
    black 90%,
    transparent
  );
  mask-image: linear-gradient(
    to right,
    transparent,
    black 10%,
    black 90%,
    transparent
  );
  animation: services-marquee 28s linear infinite;
  will-change: transform;
}

.group:hover .services-marquee {
  animation-play-state: paused;
}

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

/* ---------- Brands marquee (BrandsSection.css) ---------- */
.brands-marquee {
  -webkit-mask-image: linear-gradient(
    to right,
    transparent,
    black 10%,
    black 90%,
    transparent
  );
  mask-image: linear-gradient(
    to right,
    transparent,
    black 10%,
    black 90%,
    transparent
  );
}

.brands-track {
  animation: brands-track 40s linear infinite;
  will-change: transform;
}

.brands-marquee:hover .brands-track,
.brands-marquee:hover .brands-track-reverse {
  animation-play-state: paused;
}

@keyframes brands-track {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}

/* Second row: brands travel from left to right */
.brands-track-reverse {
  animation: brands-track-reverse 40s linear infinite;
  will-change: transform;
}

@keyframes brands-track-reverse {
  from {
    transform: translateX(-50%);
  }
  to {
    transform: translateX(0);
  }
}

/* ============================================================
   Brands section (PitchWorx .ai-logos)
   Black band, centered eyebrow + serif-italic title, two marquee
   rows of client wordmarks travelling in opposite directions.
   ============================================================ */
.ai-logos {
  color: #f5f5f0e6;
  padding: clamp(80px, 8vw, 104px) 0;
  isolation: isolate;
  background: #0a0a0a;
  position: relative;
  overflow: hidden;
}
.ai-logos-head {
  text-align: center;
  width: min(900px, 100% - 80px);
  margin: 0 auto 56px;
}
.ai-logos-eyebrow {
  font-family: var(--font-sans);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #f5f5f08c;
  align-items: center;
  gap: 12px;
  margin-bottom: 22px;
  font-size: 11px;
  font-weight: 600;
  display: inline-flex;
}
.ai-logos-eyebrow i {
  background: #f5f5f04d;
  width: 32px;
  height: 1px;
  font-style: normal;
  display: block;
}
.ai-logos-title {
  font-family: var(--font-serif);
  letter-spacing: -0.02em;
  color: #ffffffd9;
  margin: 0;
  font-size: clamp(28px, 3vw, 40px);
  font-style: italic;
  font-weight: 400;
}
.ai-logos-strip {
  flex-direction: column;
  gap: 36px;
  display: flex;
  position: relative;
  -webkit-mask-image: linear-gradient(90deg, #0000, #000 14% 86%, #0000);
  mask-image: linear-gradient(90deg, #0000, #000 14% 86%, #0000);
}
.ai-logos-row {
  will-change: transform;
  align-items: center;
  gap: 0;
  width: max-content;
  display: flex;
}
.ai-logos-row-a {
  animation: 44s linear infinite ai-logos-left;
}
.ai-logos-row-b {
  animation: 52s linear infinite ai-logos-right;
}
.ai-logo-mark {
  font-family: var(--font-serif);
  letter-spacing: -0.01em;
  color: #f5f5f0c7;
  white-space: nowrap;
  flex-shrink: 0;
  align-items: center;
  gap: 0;
  padding: 18px 0;
  font-size: clamp(22px, 2.3vw, 36px);
  font-style: italic;
  font-weight: 400;
  transition:
    color 0.3s,
    opacity 0.3s;
  display: inline-flex;
}
.ai-logos-row-a .ai-logo-mark {
  font-size: clamp(26px, 2.7vw, 42px);
}
.ai-logos-row-b .ai-logo-mark {
  font-size: clamp(17px, 1.8vw, 27px);
}
.ai-logo-text {
  font-family: var(--font-serif);
  letter-spacing: -0.01em;
  color: inherit;
  font-size: inherit;
  font-style: italic;
  font-weight: 400;
}
.ai-logo-dot {
  background: #f5f5f040;
  border-radius: 50%;
  flex-shrink: 0;
  width: 6px;
  height: 6px;
  margin: 0 36px;
  display: inline-block;
}
.ai-logo-mark--img {
  padding: 12px 0;
  gap: 0;
}
.ai-logo-img {
  display: block;
  width: auto;
  max-width: 170px;
  height: auto;
  max-height: 88px;
  object-fit: contain;
  filter: grayscale(1) contrast(1.05) brightness(1.08);
  opacity: 0.85;
  transition:
    opacity 0.3s ease,
    transform 0.3s ease,
    filter 0.3s ease;
}
.ai-logos-row-a .ai-logo-img {
  max-height: 100px;
  max-width: 200px;
}
.ai-logos-row-b .ai-logo-img {
  max-height: 64px;
  max-width: 130px;
}
.ai-logos-row:hover .ai-logo-mark--img {
  opacity: 0.35;
}
.ai-logos-row .ai-logo-mark--img:hover {
  opacity: 1;
}
.ai-logo-mark--img:hover .ai-logo-img {
  filter: grayscale(0) contrast(1);
  transform: scale(1.05);
  opacity: 1;
}
.ai-logos-row:hover .ai-logo-mark {
  opacity: 0.35;
}
.ai-logos-row .ai-logo-mark:hover {
  opacity: 1;
  color: #fff;
}
@keyframes ai-logos-left {
  0% {
    transform: translate(0, 0);
  }
  to {
    transform: translate(-50%);
  }
}
@keyframes ai-logos-right {
  0% {
    transform: translate(-50%);
  }
  to {
    transform: translate(0, 0);
  }
}

/* Responsive: match reference breakpoints */
@media (max-width: 900px) {
  .ai-logos-head {
    width: calc(100% - 40px);
    margin-bottom: 36px;
  }
  .ai-logo-mark {
    font-size: clamp(28px, 9vw, 38px);
  }
  .ai-logo-dot {
    margin: 0 20px;
  }
  .ai-logo-img,
  .ai-logos-row-a .ai-logo-img {
    max-width: 120px;
    max-height: 60px;
  }
  .ai-logos-row-b .ai-logo-img {
    max-width: 90px;
    max-height: 44px;
  }
  .ai-logos-row-a .ai-logo-mark {
    font-size: clamp(24px, 8vw, 34px);
  }
  .ai-logos-row-b .ai-logo-mark {
    font-size: clamp(16px, 5vw, 24px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .ai-logos-row-a,
  .ai-logos-row-b {
    animation: none;
  }
}

/* ============================================================
   Testimonials wall (two vertically scrolling columns)
   Mirrors the PitchWorx live "Hear it from our partners" section:
     - column 0 translates 0 -> -50%   (content rises, read downward)
     - column 1 translates -50% -> 0   (content lowers, read upward)
   Seamless because each track holds two identical sets and moves
   by exactly half its own height (-50%).
   ============================================================ */
.testimonial-col {
  position: relative;
  height: clamp(460px, 62vh, 640px);
  overflow: hidden;
  -webkit-mask-image: linear-gradient(
    to bottom,
    transparent,
    black 12%,
    black 88%,
    transparent
  );
  mask-image: linear-gradient(
    to bottom,
    transparent,
    black 12%,
    black 88%,
    transparent
  );
}

.testimonial-track {
  display: flex;
  flex-direction: column;
  width: 100%;
  will-change: transform;
}

.testimonial-track-down {
  transform: translateY(0);
  animation: testimonial-down 46s linear infinite;
}
.testimonial-track-up {
  transform: translateY(-50%);
  animation: testimonial-up 46s linear infinite;
}

@keyframes testimonial-down {
  from {
    transform: translateY(0);
  }
  to {
    transform: translateY(-50%);
  }
}
@keyframes testimonial-up {
  from {
    transform: translateY(-50%);
  }
  to {
    transform: translateY(0);
  }
}

/* Pause on hover / focus */
.testimonial-col:hover .testimonial-track,
.testimonial-col:focus-within .testimonial-track {
  animation-play-state: paused;
}

/* Two identical sets (duplicate drives the seamless loop) */
.testimonial-set {
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding-bottom: 18px;
}

/* Card */
.testimonial-card {
  border-radius: 20px;
  border: 1px solid #05050517;
  background: #ffffff;
  padding: 24px 26px 22px;
  box-shadow: 0 1px 2px rgb(5 5 5 / 0.025);
}

.testimonial-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}

.testimonial-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 999px;
  background: #3ac5ce1a;
  color: #3ac5ce;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
}

.testimonial-mark {
  font-family: "Instrument Serif", "Georgia", serif;
  font-size: 42px;
  line-height: 0.7;
  color: #3ac5ce;
  opacity: 0.85;
  margin-top: 10px;
}

.testimonial-quote {
  font-size: 13.5px;
  line-height: 1.66;
  color: #050505b3;
}

.testimonial-foot {
  margin-top: 16px;
  padding-top: 13px;
  border-top: 1px solid #05050517;
}

.testimonial-sign {
  font-size: 14px;
  font-weight: 700;
  color: #050505eb;
}

.testimonial-role {
  margin-top: 4px;
  font-size: 11.5px;
  line-height: 1.5;
  color: #0505058c;
}

@media (prefers-reduced-motion: reduce) {
  .testimonial-track-down,
  .testimonial-track-up {
    animation: none;
  }
}

/* ---------- Hide scrollbars on marquee / sliders ---------- */
.no-scrollbar {
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.no-scrollbar::-webkit-scrollbar {
  display: none;
}

/* ---------- Pricing pulse on plan change ---------- */
@keyframes price-pulse {
  0% {
    opacity: 0.4;
    transform: translateY(4px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
.price-pulse {
  animation: price-pulse 0.4s ease-out;
}

/* ---------- FAQ answer reveal ---------- */
.faq-answer {
  display: none;
}
.faq-item.open .faq-answer {
  display: block;
}
.faq-item.open .faq-icon-minus {
  display: flex;
}
.faq-item.open .faq-icon-plus {
  display: none;
}

/* ============================================================
   FAQ (PitchWorx .ai-faq) — "Quick answers. No surprises."
   Native <details>/<summary>, serif questions, circular toggle.
   ============================================================ */
.ai-faq {
  --border-2: #0505051a;
  --border-3: #0505052e;
  --bg: #ffffff;
  background: var(--bg);
  padding: clamp(80px, 8vw, 104px) 0;
  isolation: isolate;
  position: relative;
}
.ai-faq-inner {
  z-index: 1;
  width: min(1100px, 100% - 80px);
  margin: 0 auto;
  position: relative;
}
.ai-faq-head {
  grid-template-rows: auto auto;
  grid-template-columns: 1fr 1fr;
  align-items: start;
  gap: 0 80px;
  margin-bottom: 64px;
  display: grid;
}
.ai-faq-eyebrow {
  font-family: var(--font-sans);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
  grid-area: 1 / 1;
  align-items: center;
  gap: 12px;
  margin-bottom: 28px;
  font-size: 11px;
  font-weight: 600;
  display: inline-flex;
}
.ai-faq-eyebrow b {
  color: var(--text);
  font-variant-numeric: tabular-nums;
  font-weight: 700;
}
.ai-faq-eyebrow i {
  background: var(--border-3);
  width: 32px;
  height: 1px;
  font-style: normal;
  display: block;
}
.ai-faq-title {
  font-family: var(--font-serif);
  letter-spacing: -0.03em;
  color: var(--text);
  grid-area: 2 / 1;
  margin: 0;
  font-size: clamp(44px, 5.4vw, 72px);
  font-weight: 400;
  line-height: 0.95;
}
.ai-faq-title em {
  color: var(--muted);
  font-style: italic;
}
.ai-faq-desc {
  font-family: var(--font-sans);
  color: var(--muted);
  grid-area: 1 / 2 / 3;
  align-self: end;
  max-width: 360px;
  margin: 0;
  padding-bottom: 6px;
  font-size: 15px;
  font-weight: 400;
  line-height: 1.78;
}
.ai-faq-desc a {
  color: var(--text);
  border-bottom: 1px solid var(--border-3);
  text-decoration: none;
  transition:
    color 0.3s,
    border-color 0.3s;
}
.ai-faq-desc a:hover {
  border-color: var(--ai-accent);
}
.ai-faq-list {
  border-top: 1px solid var(--border-2);
  margin: 0;
  padding: 0;
  list-style: none;
}
.ai-faq-item {
  border-bottom: 1px solid var(--border-2);
}
.ai-faq-details {
  display: block;
}
.ai-faq-details > summary {
  cursor: pointer;
  -webkit-user-select: none;
  user-select: none;
  list-style: none;
}
.ai-faq-details > summary::-webkit-details-marker {
  display: none;
}
.ai-faq-q {
  transition: padding 0.4s var(--ease-out-expo);
  grid-template-columns: 64px 1fr 32px;
  align-items: center;
  gap: 24px;
  padding: 26px 0;
  display: grid;
}
.ai-faq-q:hover {
  padding-left: 8px;
}
.ai-faq-num {
  font-family: var(--font-sans);
  letter-spacing: 0.16em;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
  font-size: 11px;
  font-weight: 700;
}
.ai-faq-q-text {
  font-family: var(--font-serif);
  letter-spacing: -0.015em;
  color: var(--text);
  text-wrap: balance;
  font-size: clamp(20px, 2vw, 26px);
  font-weight: 400;
  line-height: 1.2;
}
.ai-faq-toggle {
  background: var(--off-white);
  width: 32px;
  height: 32px;
  transition:
    background 0.3s,
    transform 0.5s var(--ease-spring);
  border-radius: 50%;
  justify-content: center;
  align-items: center;
  display: inline-flex;
  position: relative;
}
.ai-faq-toggle i {
  background: var(--ink, #3a3a3a);
  width: 12px;
  height: 1.5px;
  transition:
    transform 0.4s var(--ease-out-expo),
    opacity 0.3s;
  border-radius: 1px;
  display: block;
  position: absolute;
}
.ai-faq-toggle-v {
  transform: rotate(90deg);
}
.ai-faq-details[open] .ai-faq-toggle {
  background: var(--ink, #3a3a3a);
  transform: rotate(180deg);
}
.ai-faq-details[open] .ai-faq-toggle i {
  background: #fff;
}
.ai-faq-details[open] .ai-faq-toggle-v {
  opacity: 0;
  transform: rotate(0);
}
.ai-faq-a {
  max-width: 70ch;
  font-family: var(--font-sans);
  color: var(--muted);
  animation: ai-faq-fade 0.45s var(--ease-out-expo);
  margin: 0;
  padding: 0 32px 28px 88px;
  font-size: 15px;
  font-weight: 400;
  line-height: 1.7;
}
@keyframes ai-faq-fade {
  0% {
    opacity: 0;
    transform: translateY(-6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@media (max-width: 1024px) {
  .ai-faq-inner {
    width: calc(100% - 48px);
  }
  .ai-faq-head {
    grid-template-columns: 1fr;
    gap: 16px 0;
    margin-bottom: 40px;
  }
  .ai-faq-eyebrow {
    grid-row: 1;
    margin-bottom: 8px;
  }
  .ai-faq-title {
    grid-row: 2;
  }
  .ai-faq-desc {
    grid-area: 3 / 1;
    max-width: 560px;
    padding-bottom: 0;
  }
  .ai-faq-q {
    grid-template-columns: 44px 1fr 28px;
    gap: 16px;
    padding: 22px 0;
  }
  .ai-faq-a {
    padding-left: 60px;
  }
}
@media (max-width: 720px) {
  .ai-faq-inner {
    width: calc(100% - 32px);
  }
  .ai-faq-q {
    grid-template-columns: 32px 1fr 26px;
    gap: 12px;
    padding: 20px 0;
  }
  .ai-faq-q-text {
    font-size: clamp(16px, 4.5vw, 20px);
  }
  .ai-faq-a {
    padding-left: 44px;
    padding-right: 0;
    font-size: 14px;
  }
}

/* ---------- Selected work / video slider glide ---------- */
.slider {
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.slider::-webkit-scrollbar {
  display: none;
}

@media (prefers-reduced-motion: reduce) {
  .services-marquee,
  .brands-track,
  .brands-track-reverse {
    animation: none;
  }
}

/* ============================================================
   HowItWorks (PitchWorx .ai-process) — sticky stacked step cards
   Each card = left text column + right image column, min 460px tall.
   Reference: two-column grid, serif title, hover zoom on image.
   ============================================================ */
.ai-process {
  /* --border-2: #0505051a; */
  /* --border-3: #0505052e; */
  --bg: #ffffff;
  --r-xl: clamp(24px, 2.8vw, 40px);
  background: var(--off-white); 
  padding: clamp(80px, 8vw, 104px) 0;
  isolation: isolate;
  position: relative;
}
.ai-process:before,
.ai-process:after {
  content: "";
  pointer-events: none;
  z-index: 0;
  background: #0000000d;
  width: 1px;
  position: absolute;
  top: 0;
  bottom: 0;
}
.ai-process:before {
  left: max(40px, 50% - 600px);
}
.ai-process:after {
  right: max(40px, 50% - 600px);
}
.ai-process-inner {
  z-index: 1;
  width: min(1200px, 100% - 80px);
  margin: 0 auto;
  position: relative;
}
.ai-process-head {
  z-index: 1;
  grid-template-rows: auto auto;
  grid-template-columns: 1fr 1fr;
  align-items: start;
  gap: 0 80px;
  margin-bottom: 64px;
  display: grid;
  position: relative;
}
.ai-process-eyebrow {
  font-family: var(--font-sans);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
  grid-area: 1 / 1;
  align-items: center;
  gap: 12px;
  margin-bottom: 28px;
  font-size: 11px;
  font-weight: 600;
  display: inline-flex;
}
.ai-process-eyebrow b {
  color: var(--text);
  font-variant-numeric: tabular-nums;
  font-weight: 700;
}
.ai-process-eyebrow i {
  background: var(--border-3);
  width: 32px;
  height: 1px;
  font-style: normal;
  display: block;
}
.ai-process-title {
  font-family: var(--font-serif);
  letter-spacing: -0.03em;
  color: var(--text);
  grid-area: 2 / 1;
  margin: 0;
  font-size: clamp(52px, 6.5vw, 88px);
  font-weight: 400;
  line-height: 0.92;
}
.ai-process-title em {
  color: var(--muted);
  font-style: italic;
}
.ai-process-desc {
  font-family: var(--font-sans);
  color: var(--muted);
  grid-area: 1 / 2 / 3;
  align-self: end;
  max-width: 380px;
  margin: 0;
  padding-bottom: 6px;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.78;
}
.ai-process-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Step card: sticky deck, offset by --step-i */
.ai-step-card {
  --step-i: 0;
  z-index: calc(var(--step-i) + 1);
  padding-top: calc(var(--step-i) * 18px);
  margin-bottom: 80px;
  position: sticky;
  top: clamp(72px, 10svh, 96px);
  will-change: transform, opacity;
}
.ai-step-card:last-child {
  margin-bottom: 0;
}
.ai-step-card-inner {
  transform-origin: top;
  will-change: transform, opacity;
  background: var(--bg);
  border: 1px solid var(--border-2);
  border-radius: var(--r-xl);
  grid-template-columns: 1fr 1.1fr;
  align-items: stretch;
  gap: 0;
  min-height: 460px;
  display: grid;
  overflow: hidden;
  box-shadow:
    inset 0 1px #fffc,
    0 28px 60px -24px rgba(0, 0, 0, 0.16);
}
.ai-step-text {
  flex-direction: column;
  justify-content: space-between;
  gap: 40px;
  padding: 56px 48px 48px;
  display: flex;
}
.ai-step-meta {
  font-family: var(--font-sans);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  align-items: center;
  gap: 14px;
  font-size: 11px;
  font-weight: 600;
  display: inline-flex;
}
.ai-step-num {
  font-variant-numeric: tabular-nums;
  color: var(--text);
  font-size: 13px;
  font-weight: 700;
}
.ai-step-line {
  background: var(--border-3);
  width: 36px;
  height: 1px;
  display: block;
}
.ai-step-label {
  color: var(--muted);
}
.ai-step-title {
  font-family: var(--font-serif);
  letter-spacing: -0.025em;
  color: var(--text);
  margin: 0;
  font-size: clamp(36px, 4.4vw, 60px);
  font-weight: 400;
  line-height: 1;
}
.ai-step-body {
  font-family: var(--font-sans);
  color: var(--muted);
  max-width: 440px;
  margin: 0;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.7;
}
.ai-step-visual {
  background: var(--ink, #3a3a3a);
  margin: 0;
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: stretch;
}
.ai-step-visual > form {
  width: 100%;
}
.ai-step-visual img {
  object-fit: cover;
  width: 100%;
  height: 100%;
  transition: transform 1.2s var(--ease-out-expo);
  display: block;
}
.ai-step-card:hover .ai-step-visual img {
  transform: scale(1.04);
}
.ai-step-form {
  padding: 48px 40px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 24px;
  height: 100%;
  box-sizing: border-box;
  background: var(--ink, #3a3a3a);
}
.ai-step-form-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.ai-step-form-group label {
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: #ffffffcc;
}
.ai-step-form-group input {
  background: #ffffff14;
  border: 1px solid #ffffff22;
  border-radius: 10px;
  padding: 14px 16px;
  font-family: var(--font-sans);
  font-size: 15px;
  color: #fff;
  outline: none;
  transition:
    border-color 0.3s ease,
    background 0.3s ease;
}
.ai-step-form-group input::placeholder {
  color: #ffffff66;
}
.ai-step-form-group input:focus {
  border-color: var(--accent, #3ac5ce);
  background: #ffffff20;
}
.ai-step-form-group select,
.ai-step-form-group textarea {
  background: #ffffff14;
  border: 1px solid #ffffff22;
  border-radius: 10px;
  padding: 14px 16px;
  font-family: var(--font-sans);
  font-size: 15px;
  color: #fff;
  outline: none;
  width: 100%;
  box-sizing: border-box;
  transition:
    border-color 0.3s ease,
    background 0.3s ease;
}
.ai-step-form-group select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
  padding-right: 44px;
}
.ai-step-form-group select:invalid,
.ai-step-form-group select option[value=""] {
  color: #ffffff66;
}
.ai-step-form-group select option {
  background: #2a2a2a;
  color: #fff;
}
.ai-step-form-group select:focus,
.ai-step-form-group textarea:focus {
  border-color: var(--accent, #3ac5ce);
  background: #ffffff20;
}
.ai-step-form-group select:focus {
  background-color: #222;
}
.ai-step-form-group textarea {
  resize: vertical;
  min-height: 84px;
  line-height: 1.5;
}
.ai-step-form-group textarea::placeholder {
  color: #ffffff66;
}
.ai-step-form-btn {
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.04em;
  padding: 14px 28px;
  border-radius: 50px;
  border: none;
  cursor: pointer;
  transition:
    background 0.3s ease,
    transform 0.2s ease;
  background: var(--app-btn, #de6363);
  color: #fff;
}
.ai-step-form-btn:hover {
  background: var(--app-btn, #de6363);
  transform: translateY(-1px);
}
.ai-step-form-btn--orange {
  background: var(--app-btn, #de6363);
  color: #fff;
}
.ai-step-form-btn--orange:hover {
  background: var(--app-btn, #de6363);
}
@media (max-width: 900px) {
  .ai-step-form {
    padding: 36px 28px;
  }
}

/* Responsive: single column, images on top */
@media (max-width: 900px) {
  .ai-process-inner {
    width: calc(100% - 48px);
  }
  .ai-process-head {
    grid-template-columns: 1fr;
    gap: 20px 0;
    margin-bottom: 56px;
  }
  .ai-process-eyebrow {
    grid-row: 1;
    margin-bottom: 12px;
  }
  .ai-process-title {
    grid-row: 2;
  }
  .ai-process-desc {
    grid-area: 3 / 1;
    max-width: 560px;
    padding-bottom: 0;
  }
  .ai-step-card-inner {
    grid-template-columns: 1fr;
    min-height: auto;
  }
  .ai-step-text {
    gap: 28px;
    padding: 40px 32px 32px;
  }
  .ai-step-visual {
    aspect-ratio: auto;
    min-height: auto;
  }
  .ai-step-card {
    position: relative;
    top: auto;
    padding-top: 0;
    margin-bottom: 32px;
  }
  .ai-process-list {
    padding-bottom: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ai-step-card {
    position: relative;
    top: auto;
    padding-top: 0;
    margin-bottom: 16px;
  }
  .ai-step-card-inner {
    will-change: auto;
  }
  .ai-step-visual img {
    transition: none;
  }
}

/* ============================================================
   Header scroll behavior (matches PitchWorx live site)
   - transparent at top, gains rounded pill white bg on scroll
   ============================================================ */
#site-header {
  top: 24px;
  left: 34px;
  right: 34px;
  grid-template-columns: 1fr auto 1fr;
  background: transparent;
  border-color: transparent;
  transition:
    top 0.36s var(--ease-spring, cubic-bezier(0.34, 1.56, 0.64, 1)),
    background 0.42s ease,
    border-color 0.42s ease,
    box-shadow 0.42s ease;
}

#site-header::before {
  content: "";
  position: absolute;
  inset: -9px;
  z-index: -1;
  border-radius: 9999px;
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0.78),
    rgba(255, 255, 255, 0.5)
  );
  -webkit-backdrop-filter: blur(18px) saturate(1.22);
  backdrop-filter: blur(18px) saturate(1.22);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
  opacity: 0;
  transform: scaleX(0.985);
  transition:
    opacity 0.42s ease,
    transform 0.42s var(--ease-spring, cubic-bezier(0.34, 1.56, 0.64, 1));
}

#site-header:hover::before,
#site-header:focus-within::before,
#site-header.is-scrolled::before {
  opacity: 1;
  transform: scaleX(1);
}

#site-header:hover #desktop-nav,
#site-header:focus-within #desktop-nav,
#site-header.is-scrolled #desktop-nav {
  background: rgba(255, 255, 255, 0.54);
  border-color: rgba(0, 0, 0, 0.075);
}

#desktop-nav {
  justify-self: center;
}

#site-header.is-scrolled {
  top: 16px;
}

#site-header.is-scrolled::before {
  -webkit-backdrop-filter: blur(22px) saturate(1.3);
  backdrop-filter: blur(22px) saturate(1.3);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12);
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0.98),
    rgba(255, 255, 255, 0.95)
  );
  border: 1px solid rgba(5, 5, 5, 0.08);
}

@media (max-width: 1280px) {
  #site-header {
    grid-template-columns: auto 1fr;
    top: 18px;
    left: 20px;
    right: 20px;
  }
  #desktop-nav {
    justify-self: end;
  }
  #desktop-nav .nav-link,
  #desktop-nav .nav-resources {
    display: none !important;
  }
  #header-actions {
    display: none !important;
  }
}

@media (max-width: 768px) {
  #site-header {
    top: 14px;
    left: 14px;
    right: 14px;
    gap: 10px;
  }
  #site-header.is-scrolled {
    top: 10px;
  }
}

/* ============================================================
   Desktop nav — cursor hiding on hover (PitchWorx replica)
   ============================================================ */
#desktop-nav .nav-link,
#desktop-nav .nav-resources {
  cursor: none;
}

/* ============================================================
   Desktop nav — hover underline + dropdowns (PitchWorx replica)
   ============================================================ */
#desktop-nav .nav-link {
  position: relative;
  z-index: 1;
  border-radius: 9999px;
  color: #05050594;
  white-space: nowrap;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 11px;
  font-weight: 600;
  padding: 12px 17px;
  text-decoration: none;
  transition:
    background 0.32s cubic-bezier(0.19, 1, 0.22, 1),
    color 0.32s cubic-bezier(0.19, 1, 0.22, 1);
}

#desktop-nav .nav-link::after {
  content: "";
  position: absolute;
  bottom: 4px;
  left: 6px;
  right: 6px;
  height: 5px;
  border: 1.5px solid #3ac5ce;
  border-top: 0;
  border-radius: 0 0 5px 5px;
  opacity: 0;
  transform: translateY(2px);
  pointer-events: none;
  transition:
    opacity 0.28s cubic-bezier(0.19, 1, 0.22, 1),
    transform 0.28s cubic-bezier(0.19, 1, 0.22, 1);
}

#desktop-nav .nav-link:hover::after,
#desktop-nav .nav-link.is-active::after,
#desktop-nav .nav-resources.is-open::after {
  opacity: 1;
  transform: translateY(0);
}

#desktop-nav .nav-link:hover,
#desktop-nav .nav-link.is-active {
  color: #050505;
  background: transparent;
}

#desktop-nav .nav-resources {
  align-items: center;
  gap: 4px;
  display: inline-flex;
  cursor: none;
  -webkit-user-select: none;
  user-select: none;
}

/* Restore cursor when dropdown is open or visible */
#desktop-nav .nav-resources.is-open,
#desktop-nav .nav-resources:hover .nav-dropdown,
#desktop-nav .nav-dropdown:hover {
  cursor: auto;
}

#desktop-nav .nav-resources.is-open .nav-dd-item,
#desktop-nav .nav-resources:hover .nav-dropdown .nav-dd-item,
#desktop-nav .nav-dropdown:hover .nav-dd-item {
  cursor: pointer;
}

#desktop-nav .nav-caret {
  display: inline-flex;
  align-items: center;
  margin-left: 3px;
  font-size: 9px;
  font-style: normal;
  opacity: 0.9;
  transition: transform 0.32s cubic-bezier(0.19, 1, 0.22, 1);
}

#desktop-nav .nav-caret svg {
  width: 1em;
  height: 1em;
  display: block;
}

#desktop-nav .nav-resources:hover .nav-caret,
#desktop-nav .nav-resources:focus-within .nav-caret,
#desktop-nav .nav-resources.is-open .nav-caret {
  transform: rotate(180deg);
}

#desktop-nav .nav-dropdown {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translate(-50%) translateY(-12px) scale(0.96);
  transform-origin: top;
  z-index: 100;
  width: 360px;
  margin-top: 14px;
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  background: #fff;
  border: 1px solid #0505051a;
  border-radius: 24px;
  box-shadow:
    inset 0 1px rgba(255, 255, 255, 0.7),
    0 30px 60px -22px rgba(0, 0, 0, 0.22),
    0 8px 24px -10px rgba(0, 0, 0, 0.12);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition:
    opacity 0.36s cubic-bezier(0.19, 1, 0.22, 1),
    transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1),
    visibility 0.36s;
}

#desktop-nav .nav-dropdown::before {
  content: "";
  position: absolute;
  top: -14px;
  left: 0;
  right: 0;
  height: 14px;
  background: transparent;
}

#desktop-nav .nav-dropdown.nav-dropdown-services {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2px 8px;
  width: 620px;
  padding: 12px;
}

#desktop-nav .nav-dropdown.nav-dropdown-services .nav-dropdown-eyebrow {
  grid-column: 1 / -1;
}

#desktop-nav .nav-dropdown.nav-dropdown-services .nav-dd-item-all {
  grid-column: 1 / -1;
  margin-top: 6px;
  padding-top: 12px;
  border-top: 1px solid #0505050f;
}

#desktop-nav .nav-resources:hover .nav-dropdown,
#desktop-nav .nav-resources:focus-within .nav-dropdown,
#desktop-nav .nav-resources.is-open .nav-dropdown,
#desktop-nav .nav-dropdown:hover {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translate(-50%) translateY(0) scale(1);
}

#desktop-nav .nav-dropdown-eyebrow {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px 8px;
  margin-bottom: 8px;
  border-bottom: 1px solid #0505051a;
  font-family: "Inter", "Helvetica Neue", system-ui, sans-serif;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #0505058c;
}

#desktop-nav .nav-dropdown-eyebrow i {
  background: #3ac5ce;
  border-radius: 50%;
  width: 6px;
  height: 6px;
  font-style: normal;
  display: block;
}

#desktop-nav .nav-dd-item {
  position: relative;
  display: grid !important;
  grid-template-columns: 36px 1fr 18px;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border-radius: 14px;
  background: transparent;
  color: #050505;
  text-decoration: none;
  overflow: hidden;
  transition:
    background 0.32s cubic-bezier(0.19, 1, 0.22, 1),
    transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
}

#desktop-nav .nav-dd-item::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, #3ac5ce0f, transparent 60%);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.32s;
}

#desktop-nav .nav-dd-item:hover {
  background: #fafaf6;
  transform: translateX(2px);
}

#desktop-nav .nav-dd-item:hover::before {
  opacity: 1;
}

#desktop-nav .nav-dd-icon {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: 36px;
  height: 36px;
  flex-shrink: 0;
  border-radius: 50%;
  background: #3a3a3a;
  color: #fff;
  font-family: "Instrument Serif", "Georgia", serif;
  font-size: 16px;
  font-style: italic;
  font-weight: 400;
  transition:
    background 0.32s,
    transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1),
    color 0.32s;
}

#desktop-nav .nav-dd-item:hover .nav-dd-icon {
  background: #3ac5ce;
  transform: rotate(-6deg) scale(1.08);
}

#desktop-nav .nav-dd-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

#desktop-nav .nav-dd-text b {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: "Inter", "Helvetica Neue", system-ui, sans-serif;
  font-size: 13.5px;
  font-weight: 600;
  color: #050505;
  letter-spacing: 0.005em;
}

#desktop-nav .nav-dd-text em {
  font-style: normal;
  font-family: "Inter", "Helvetica Neue", system-ui, sans-serif;
  color: #0505058c;
  font-size: 11.5px;
  font-weight: 400;
  line-height: 1.4;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}

#desktop-nav .nav-dd-arrow {
  display: inline-flex;
  justify-content: flex-end;
  align-items: center;
  font-size: 14px;
  color: #0505052e;
  opacity: 0;
  transform: translateX(-8px);
  transition:
    opacity 0.32s cubic-bezier(0.19, 1, 0.22, 1),
    transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1),
    color 0.32s;
}

#desktop-nav .nav-dd-item:hover .nav-dd-arrow {
  opacity: 1;
  color: #3ac5ce;
  transform: translateX(0);
}

/* Header intentionally stays LIGHT (white glass + dark text) in every section.
   Dark sections (story "Now" half, philosophy, footer) must not turn the
   header black, so no is-dark overrides exist here. */

/* ============================================================
   By the numbers (ai-stats) — matches PitchWorx live site
   The section rises from the bottom to cover the previous one
   while scrolling (GSAP scrub, see main.js).
   ============================================================ */
.ai-stats {
  --border-2: #0505051a;
  --border-3: #0505052e;
  z-index: 50;
  background-color: var(--off-white);
  padding: clamp(64px, 9vw, 96px) 0;
  isolation: isolate;
  position: relative;
  overflow: hidden;
}

.ai-stats-inner {
  z-index: 1;
  width: min(1400px, 100% - 80px);
  margin: 0 auto;
  position: relative;
}

.ai-stats-head {
  grid-template-columns: 1fr;
  gap: 14px;
  margin-bottom: 64px;
  display: grid;
}

.ai-stats-eyebrow {
  font-family: var(--font-sans);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
  align-items: center;
  gap: 12px;
  font-size: 11px;
  font-weight: 600;
  display: inline-flex;
}

.ai-stats-eyebrow b {
  color: var(--text);
  font-variant-numeric: tabular-nums;
  font-weight: 700;
}

.ai-stats-eyebrow i {
  background: var(--border-3);
  width: 32px;
  height: 1px;
  font-style: normal;
  display: block;
}

.ai-stats-title {
  font-family: var(--font-serif);
  letter-spacing: -0.03em;
  color: var(--text);
  max-width: 14ch;
  margin: 0;
  font-size: clamp(44px, 5.4vw, 72px);
  font-weight: 400;
  line-height: 0.95;
}

.ai-stats-title em {
  color: var(--muted);
  font-style: italic;
}

.ai-stats-grid {
  border-top: 1px solid var(--border-2);
  border-bottom: 1px solid var(--border-2);
  grid-template-columns: repeat(4, 1fr);
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
}

.ai-stat-cell {
  flex-direction: column;
  gap: 18px;
  padding: 56px 28px 48px;
  display: flex;
  position: relative;
}

.ai-stat-cell + .ai-stat-cell {
  border-left: 1px solid var(--border-2);
}

.ai-stat-pulse {
  background: var(--ai-accent);
  width: 8px;
  height: 8px;
  animation: ai-stat-pulse 2.4s var(--ease-out-expo) infinite;
  border-radius: 50%;
  position: absolute;
  top: 28px;
  right: 28px;
  box-shadow: 0 0 #3ac5ce80;
}

.ai-stat-cell[data-stat-i="1"] .ai-stat-pulse {
  animation-delay: 0.4s;
}
.ai-stat-cell[data-stat-i="2"] .ai-stat-pulse {
  animation-delay: 0.8s;
}
.ai-stat-cell[data-stat-i="3"] .ai-stat-pulse {
  animation-delay: 1.2s;
}

.ai-stat-value {
  font-family: var(--font-serif);
  letter-spacing: -0.04em;
  color: var(--text);
  font-variant-numeric: tabular-nums;
  align-items: baseline;
  gap: 4px;
  font-size: clamp(72px, 9vw, 132px);
  font-weight: 400;
  line-height: 0.85;
  display: flex;
}

.ai-stat-value b {
  font-weight: 400;
}

.ai-stat-value i {
  color: var(--muted);
  font-size: 0.55em;
  font-style: normal;
}

.ai-stat-label {
  font-family: var(--font-sans);
  letter-spacing: 0.04em;
  color: var(--text);
  margin-top: 4px;
  font-size: 13px;
  font-weight: 600;
}

.ai-stat-hint {
  font-family: var(--font-sans);
  color: var(--muted);
  font-size: 12px;
  font-weight: 400;
  line-height: 1.55;
}

@keyframes ai-stat-pulse {
  0% {
    box-shadow: 0 0 #3ac5ce80;
  }
  70% {
    box-shadow: 0 0 0 14px #3ac5ce00;
  }
  to {
    box-shadow: 0 0 #3ac5ce00;
  }
}

@media (max-width: 1024px) {
  .ai-stats {
    padding: 88px 0;
  }
  .ai-stats-inner {
    width: calc(100% - 48px);
  }
  .ai-stats-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .ai-stat-cell:nth-child(2) {
    border-left: 1px solid var(--border-2);
  }
  .ai-stat-cell:nth-child(3) {
    border-left: none;
    border-top: 1px solid var(--border-2);
  }
  .ai-stat-cell:nth-child(4) {
    border-left: 1px solid var(--border-2);
    border-top: 1px solid var(--border-2);
  }
}

@media (max-width: 720px) {
  .ai-stats-inner {
    width: calc(100% - 40px);
  }
  .ai-stats-head {
    margin-bottom: 48px;
  }
  .ai-stats-grid {
    grid-template-columns: 1fr;
  }
  .ai-stat-cell {
    padding: 36px 22px;
    border-left: none !important;
  }
  .ai-stat-cell + .ai-stat-cell {
    border-top: 1px solid var(--border-2);
  }
  .ai-stat-value {
    font-size: clamp(60px, 18vw, 96px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .ai-stat-pulse {
    animation: none;
  }
}

/* ============================================================
   Button hover effects — PitchWorx-style CTA interactions
   ============================================================ */

/* Orange CTA buttons with white circle arrow */
a.rounded-full.bg-appButton,
.ai-hero-cta.ai-hero-cta--orange {
  position: relative;
  transition:
    transform 0.35s cubic-bezier(0.16, 1, 0.3, 1),
    box-shadow 0.35s cubic-bezier(0.22, 1, 0.36, 1),
    background 0.3s ease;
  will-change: transform, box-shadow;
}

a.rounded-full.bg-appButton:hover,
.ai-hero-cta.ai-hero-cta--orange:hover {
  transform: translateY(-2px) scale(1.02);
  box-shadow:
    0 12px 32px -8px rgba(222, 99, 99, 0.45),
    0 4px 12px -4px rgba(222, 99, 99, 0.25);
}

a.rounded-full.bg-appButton:active,
.ai-hero-cta.ai-hero-cta--orange:active {
  transform: translateY(0) scale(0.98);
  box-shadow: 0 4px 12px -4px rgba(222, 99, 99, 0.3);
  transition-duration: 0.1s;
}

/* White circle arrow slides right on hover */
a.rounded-full.bg-appButton .flex.aspect-square,
a.rounded-full.bg-appButton > span:last-child {
  transition:
    transform 0.35s cubic-bezier(0.16, 1, 0.3, 1),
    background 0.3s ease;
  will-change: transform;
}
a.rounded-full.bg-appButton:hover .flex.aspect-square,
a.rounded-full.bg-appButton:hover > span:last-child {
  transform: translateX(3px);
}

/* "Ask us" button in the dark banner */
a.rounded-full.bg-appButton.pl-4.pr-2 {
  transition:
    transform 0.35s cubic-bezier(0.16, 1, 0.3, 1),
    box-shadow 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}
a.rounded-full.bg-appButton.pl-4.pr-2:hover {
  transform: translateY(-2px) scale(1.02);
  box-shadow:
    0 12px 32px -8px rgba(222, 99, 99, 0.45),
    0 4px 12px -4px rgba(222, 99, 99, 0.25);
}
a.rounded-full.bg-appButton.pl-4.pr-2:active {
  transform: translateY(0) scale(0.98);
  transition-duration: 0.1s;
}
a.rounded-full.bg-appButton.pl-4.pr-2 .flex.aspect-square {
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}
a.rounded-full.bg-appButton.pl-4.pr-2:hover .flex.aspect-square {
  transform: translateX(3px);
}

/* "Start now" in breaker section */
a.rounded-full.bg-appButton.p-\\[5px\\].pl-5.text-white {
  transition:
    transform 0.35s cubic-bezier(0.16, 1, 0.3, 1),
    box-shadow 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}
a.rounded-full.bg-appButton.p-\\[5px\\].pl-5.text-white:hover {
  transform: translateY(-2px) scale(1.02);
  box-shadow:
    0 12px 32px -8px rgba(222, 99, 99, 0.45),
    0 4px 12px -4px rgba(222, 99, 99, 0.25);
}

/* "Try 7 days" text link in breaker */
a.pb-3\\.5.pt-2\\.5 {
  position: relative;
}
a.pb-3\\.5.pt-2\\.5::after {
  content: "";
  position: absolute;
  bottom: 12px;
  left: 0;
  width: 100%;
  height: 1px;
  background: #fff;
  transform-origin: left;
  transform: scaleX(0);
  transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}
a.pb-3\\.5.pt-2\\.5:hover::after {
  transform: scaleX(1);
}

/* "Start now" plain text CTA in footer section */
.ai-cta-actions a.ai-hero-cta--text,
.ai-hero-cta.ai-hero-cta--text {
  position: relative;
}
.ai-cta-actions a.ai-hero-cta--text::after,
.ai-hero-cta.ai-hero-cta--text::after {
  content: "";
  background: var(--ai-accent, #3ac5ce);
  transform-origin: 0;
  height: 1px;
  transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
  position: absolute;
  bottom: 4px;
  left: 6px;
  right: 12px;
  transform: scaleX(0);
}
.ai-cta-actions a.ai-hero-cta--text:hover::after,
.ai-hero-cta.ai-hero-cta--text:hover::after {
  transform: scaleX(1);
}

/* "Start now" orange outline CTA (footer CTA section) */
.ai-hero-cta.ai-hero-cta--orange.ai-home-hero-cta {
  transition:
    transform 0.35s cubic-bezier(0.16, 1, 0.3, 1),
    box-shadow 0.35s cubic-bezier(0.22, 1, 0.36, 1),
    background 0.3s ease,
    border-color 0.3s ease;
}
.ai-hero-cta.ai-hero-cta--orange.ai-home-hero-cta:hover {
  transform: translateY(-2px) scale(1.02);
  box-shadow: 0 12px 32px -8px rgba(222, 99, 99, 0.35);
  background: rgba(222, 99, 99, 0.08);
  border-color: var(--app-btn, #de6363);
}

/* "Pick Creative Assist" button in pricing */
.ai-hero-cta.ai-hero-cta--orange:not(.ai-home-hero-cta) {
  transition:
    transform 0.35s cubic-bezier(0.16, 1, 0.3, 1),
    box-shadow 0.35s cubic-bezier(0.22, 1, 0.36, 1),
    background 0.3s ease;
}
.ai-hero-cta.ai-hero-cta--orange:not(.ai-home-hero-cta):hover {
  transform: translateY(-2px) scale(1.02);
  box-shadow: 0 12px 26px -12px rgba(222, 99, 99, 0.75);
}

/* "Talk to us" text link in pricing aside */
.ai-spp-aside-custom .ai-hero-cta--text::after {
  background: #fff;
}

/* Dark pill button hover (nav LOG IN, etc.) */
button.rounded-full.border {
  transition:
    transform 0.3s cubic-bezier(0.16, 1, 0.3, 1),
    background 0.3s ease,
    border-color 0.3s ease;
}
button.rounded-full.border:hover {
  transform: scale(1.05);
  background: rgba(0, 0, 0, 0.04);
}

/* Video play buttons — no hover animation, static position */
[data-video-play] {
  cursor: pointer;
}

/* "See it in action" big play button — no hover animation */
#see-video-play {
  cursor: pointer;
}

/* ============================================================
   Interactive hotspot ("See it in action" demo stage)
   Adapted from IntractiveSection/intractive.css
   ============================================================ */
.ai-demo-stage {
  position: relative;
  overflow: hidden;
  box-shadow: 0 32px 80px -24px rgba(5, 5, 5, 0.35);
  aspect-ratio: 16 / 10;
  border-radius: 24px;
}
.ai-demo-stage .hotspot-container {
  height: 100%;
}
.ai-demo-stage .image-frame,
.ai-demo-stage .image-frame--demo {
  padding: 0;
  height: 100%;
}
.ai-demo-stage .image-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
}
.hotspot-container {
  position: relative;
  width: 100%;
  display: block;
}
.image-frame {
  width: 100%;
  position: relative;
  overflow: hidden;
}
.image-frame img {
  display: block;
  width: 100%;
  height: auto;
}
.hotspot-trigger {
  position: absolute;
  left: 47.5%;
  top: 42%;
  width: 4.5%;
  height: 9%;
  background: transparent;
  border: none;
  outline: none;
  cursor: pointer;
  padding: 0;
  margin: 0;
  z-index: 10;
  -webkit-tap-highlight-color: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  transition:
    left 0.4s cubic-bezier(0.16, 1, 0.3, 1),
    top 0.4s cubic-bezier(0.16, 1, 0.3, 1),
    width 0.4s cubic-bezier(0.16, 1, 0.3, 1),
    height 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.hotspot-trigger::before {
  content: "";
  position: absolute;
  width: 55%;
  height: 55%;
  background-color: #f8ae16;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 12s3.5-7.5 11-7.5S23 12 23 12s-3.5 7.5-11 7.5S1 12 1 12z'/%3E%3Ccircle cx='12' cy='12' r='3.2' fill='%23fff' stroke='none'/%3E%3C/svg%3E");
  background-position: center;
  background-repeat: no-repeat;
  background-size: 60%;
  border-radius: 50%;
  z-index: 2;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35);
  transition:
    transform 0.3s ease,
    background-color 0.3s ease,
    filter 0.3s ease;
}
.hotspot-trigger::after {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.35);
  border: 2px solid rgba(255, 255, 255, 0.85);
  border-radius: 50%;
  box-sizing: border-box;
  pointer-events: none;
  z-index: 1;
  transform-origin: center center;
  animation: ai-hotspot-pulse 2s infinite cubic-bezier(0.25, 0, 0, 1);
}
.hotspot-trigger:hover::before {
  transform: scale(1.15);
  background-color: #3ac5ce;
  filter: brightness(1.05);
}
@keyframes ai-hotspot-pulse {
  0% {
    transform: scale(0.4);
    opacity: 1;
    box-shadow: 0 0 0 0 rgba(255, 184, 0, 0.6);
  }
  70% {
    opacity: 0.15;
    box-shadow: 0 0 0 16px rgba(255, 184, 0, 0);
  }
  100% {
    transform: scale(1.35);
    opacity: 0;
  }
}
@media (max-width: 900px) {
  .ai-demo-stage {
    aspect-ratio: 4 / 3;
  }
}

/* ============================================================
   Home demo interactive stage (js/homeDemo.js)
   Self-contained `.hd-*` engine for the "See it in action"
   section on index.html — separate from the product lightbox.
   ============================================================ */
.hd-stage {
  position: relative;
  height: 100%;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.hd-frame {
  position: relative;
  line-height: 0;
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.hd-img {
  display: block;
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  transition: opacity 0.15s ease;
}
.hd-img.hd-switching {
  opacity: 0.25;
}
.hd-spots {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.hd-hot {
  position: absolute;
  z-index: 6;
  transform: translate(-50%, -50%);
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  pointer-events: auto;
  -webkit-tap-highlight-color: transparent;
  transition:
    transform 0.4s cubic-bezier(0.16, 1, 0.3, 1),
    opacity 0.4s ease;
}
.hd-hot::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 74%;
  height: 74%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background-color: #f8ae16;
  background-image: var(--hd-eye, url("../IntractiveSection/moneta/eye.png"));
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.45);
  z-index: 2;
  transition:
    transform 0.3s ease,
    background-color 0.3s ease,
    filter 0.3s ease;
}
.hd-hot:hover::before {
  transform: translate(-50%, -50%) scale(1.18);
  background-color: #000000;
  filter: brightness(1.05);
}
.hd-hot::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.4);
  border: 2px solid rgba(0, 0, 0, 0.55);
  box-sizing: border-box;
  pointer-events: none;
  z-index: 1;
  animation: hd-pulse 2s cubic-bezier(0.25, 0, 0, 1) infinite;
}
.hd-hot .hd-hot-eye {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 74%;
  height: 74%;
  transform: translate(-50%, -50%);
  object-fit: contain;
  pointer-events: none;
  z-index: 3;
}
@keyframes hd-pulse {
  0% {
    transform: scale(0.5);
    opacity: 1;
  }
  70% {
    transform: scale(1.3);
    opacity: 0.1;
  }
  100% {
    transform: scale(1.3);
    opacity: 0;
  }
}
.hd-title {
  position: absolute;
  left: 14px;
  top: 14px;
  z-index: 8;
  max-width: 72%;
  padding: 7px 14px;
  border-radius: 9999px;
  background: rgba(0, 0, 0, 0.55);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  color: #fff;
  font-family: "Inter", "Helvetica Neue", sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.02em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  opacity: 0;
  visibility: hidden;
  transition:
    opacity 0.3s ease,
    visibility 0.3s ease;
}
.hd-title.is-on {
  opacity: 1;
  visibility: visible;
}
.hd-back {
  position: absolute;
  right: 14px;
  bottom: 14px;
  z-index: 8;
  display: flex;
  height: 40px;
  width: 40px;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 9999px;
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  transition:
    transform 0.3s ease,
    background 0.25s ease;
}
.hd-back:hover {
  background: #de6363;
}

/* Footer newsletter button */
.ai-foot-news-btn {
  transition:
    transform 0.35s cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 0.35s;
  display: inline-flex;
  box-shadow: 0 8px 18px -8px #3ac5ce80;
}
.ai-foot-news-btn:hover {
  transform: translate(2px);
  box-shadow: 0 12px 22px -8px #3ac5ceb3;
}

/* ============================================================
   Pricing section scroll-triggered animations
   ============================================================ */

/* Header items + cards: fade + slide up from bottom */
.pricing-reveal-item {
  opacity: 0;
  transform: translateY(40px);
  transition:
    opacity 0.8s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: opacity, transform;
}
.pricing-reveal-item.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Stagger the header items (eyebrow, title, subtitle) */
.ai-spp-head .pricing-reveal-item:nth-child(1) {
  transition-delay: 0s;
}
.ai-spp-head .pricing-reveal-item:nth-child(2) {
  transition-delay: 0.12s;
}
.ai-spp-head .pricing-reveal-item:nth-child(3) {
  transition-delay: 0.24s;
}

/* Feature list: each li slides in from left with stagger */
.pricing-list-reveal li {
  opacity: 0;
  transform: translateX(-30px);
  transition:
    opacity 0.5s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: opacity, transform;
}
.pricing-list-reveal.is-visible li {
  opacity: 1;
  transform: translateX(0);
}
/* Stagger each list item */
.pricing-list-reveal.is-visible li:nth-child(1) {
  transition-delay: 0.05s;
}
.pricing-list-reveal.is-visible li:nth-child(2) {
  transition-delay: 0.1s;
}
.pricing-list-reveal.is-visible li:nth-child(3) {
  transition-delay: 0.15s;
}
.pricing-list-reveal.is-visible li:nth-child(4) {
  transition-delay: 0.2s;
}
.pricing-list-reveal.is-visible li:nth-child(5) {
  transition-delay: 0.25s;
}
.pricing-list-reveal.is-visible li:nth-child(6) {
  transition-delay: 0.3s;
}
.pricing-list-reveal.is-visible li:nth-child(7) {
  transition-delay: 0.35s;
}
.pricing-list-reveal.is-visible li:nth-child(8) {
  transition-delay: 0.4s;
}
.pricing-list-reveal.is-visible li:nth-child(9) {
  transition-delay: 0.45s;
}

/* Section headers for each list column */
.pricing-list-reveal + .ai-spp-sect-h,
.ai-spp-sect-h + .pricing-list-reveal {
  /* no extra style needed, just grouped */
}

/* Aside items: slide up from bottom with stagger */
.ai-spp-aside .pricing-reveal-item:nth-child(1) {
  transition-delay: 0.15s;
}
.ai-spp-aside .pricing-reveal-item:nth-child(2) {
  transition-delay: 0.3s;
}

@media (prefers-reduced-motion: reduce) {
  .pricing-reveal-item,
  .pricing-list-reveal li {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
    transition-delay: 0s !important;
  }
}

/* ============================================================
   Scroll-reveal helpers (viewport-triggered, additive)
   ============================================================ */
.reveal-up {
  opacity: 0;
  transform: translateY(40px);
  transition:
    opacity 0.9s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: opacity, transform;
}
.reveal-up.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* ============================================================
   Scroll-triggered text reveal animations
   ============================================================ */

/* Clip reveal: text slides up from below a clipping mask */
.reveal-clip {
  overflow: hidden;
  display: inline-block;
}
.reveal-clip > * {
  transform: translateY(110%);
  transition: transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform;
}
.reveal-clip.is-visible > * {
  transform: translateY(0);
}

/* Slide-up with stagger for child elements */
.reveal-stagger > * {
  opacity: 0;
  transform: translateY(30px);
  transition:
    opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: opacity, transform;
}
.reveal-stagger.is-visible > * {
  opacity: 1;
  transform: translateY(0);
}
.reveal-stagger.is-visible > *:nth-child(1) {
  transition-delay: 0s;
}
.reveal-stagger.is-visible > *:nth-child(2) {
  transition-delay: 0.08s;
}
.reveal-stagger.is-visible > *:nth-child(3) {
  transition-delay: 0.16s;
}
.reveal-stagger.is-visible > *:nth-child(4) {
  transition-delay: 0.24s;
}
.reveal-stagger.is-visible > *:nth-child(5) {
  transition-delay: 0.32s;
}

/* Fade-scale: subtle zoom + fade */
.reveal-fade-scale {
  opacity: 0;
  transform: scale(0.95);
  transition:
    opacity 0.9s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: opacity, transform;
}
.reveal-fade-scale.is-visible {
  opacity: 1;
  transform: scale(1);
}

/* Slide from left */
.reveal-left {
  opacity: 0;
  transform: translateX(-40px);
  transition:
    opacity 0.8s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: opacity, transform;
}
.reveal-left.is-visible {
  opacity: 1;
  transform: translateX(0);
}

/* Slide from right */
.reveal-right {
  opacity: 0;
  transform: translateX(40px);
  transition:
    opacity 0.8s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: opacity, transform;
}
.reveal-right.is-visible {
  opacity: 1;
  transform: translateX(0);
}

/* Word-by-word reveal (each word wrapped in .word span) */
.reveal-words .word {
  display: inline-block;
  opacity: 0;
  transform: translateY(20px) rotateX(40deg);
  transform-origin: bottom center;
  transition:
    opacity 0.6s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: opacity, transform;
}
.reveal-words.is-visible .word {
  opacity: 1;
  transform: translateY(0) rotateX(0);
}

/* FAQ items */
.faq-item-stagger {
  opacity: 0;
  transform: translateY(36px);
  transition:
    opacity 0.8s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: opacity, transform;
}
.faq-item-stagger.is-visible {
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  .reveal-up,
  .faq-item-stagger {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

/* ============================================================
   Recent projects horizontal-scroll section (desktop pin + scrub,
   mobile native horizontal scroll). Matches PitchWorx live behavior
   where LAST item reached => scroll continues to next section.
   ============================================================ */
@media (min-width: 721px) and (pointer: fine) {
  #projects {
    position: relative;
    height: 100vh;
    height: 100svh;
    max-height: 100vh;
    max-height: 100svh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
  }
  .projects-scroll-wrap .projects-head {
    padding-top: 36px;
    padding-bottom: 8px;
  }
  .projects-scroll-wrap .projects-head .mt-3 {
    margin-top: 14px;
  }
  .projects-scroll-wrap .projects-head .mt-8 {
    margin-top: 20px;
  }
  /* Work track: fits the remaining height so every card + the
     bottom edge of the box stays fully visible while pinned */
  .work-track {
    flex: 1 1 auto;
    min-height: 0;
    align-items: flex-start;
    width: max-content;
    overflow: visible !important;
    will-change: transform;
  }
}

@media (min-width: 721px) and (pointer: fine) and (max-height: 800px) {
  .projects-scroll-wrap .projects-head {
    padding-top: 20px;
  }
  .projects-scroll-wrap .work-track > div {
    width: 300px !important;
  }
}

/* Progress bar for the horizontal scroll */
.work-progress {
  width: 120px;
  height: 3px;
  position: relative;
  border-radius: 999px;
  background: #0505051a;
  overflow: hidden;
}
.work-progress-fill {
  position: absolute;
  inset: 0;
  transform-origin: 0 0;
  transform: scaleX(0);
  background: #3ac5ce;
}

/* Work track: desktop = natural max-content width (moved via GSAP transform),
   mobile/coarse = native horizontal scroll-snap */
.work-track {
  padding-bottom: 1rem;
}
@media (max-width: 720px), (pointer: coarse) {
  .work-track {
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    width: 100%;
    overflow-x: auto !important;
    transform: none !important;
  }
  .work-track > div {
    scroll-snap-align: start;
  }
}

/* ============================================================
   Design tokens shared by the footer CTA + footer
   (mirror the values used on pitchworx.com)
   ============================================================ */
:root {
  --off-white: #fafaf6;
  --text: #050505;
  --ink-soft: #050505c7;
  --muted: #0505058c;
  --ink: #3a3a3a;
  --ink-hover: #262626;
  --accent: #3ac5ce;
  --accent-soft: #3ac5ce1f;
  --accent-line: #3ac5ce52;
  --ai-accent: #3ac5ce;
  --app-btn: #de6363;
  --r-full: 999px;
  --font-serif: "Instrument Serif", "Georgia", serif;
  --font-sans: "Inter", "Helvetica Neue", system-ui, sans-serif;
  --ease-spring: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-out-expo: cubic-bezier(0.19, 1, 0.22, 1);
}

/* ============================================================
   Footer CTA (ai-cta) — matches PitchWorx live site
   ============================================================ */
.ai-cta {
  background: var(--off-white);
  isolation: isolate;
  padding: 168px 0;
  position: relative;
  overflow: hidden;
}

.ai-cta-ghost {
  z-index: 0;
  font-family: var(--font-serif);
  letter-spacing: -0.05em;
  color: #0000;
  -webkit-text-stroke: 1px #00000012;
  pointer-events: none;
  -webkit-user-select: none;
  user-select: none;
  font-size: clamp(280px, 38vw, 560px);
  font-style: italic;
  font-weight: 400;
  line-height: 0.8;
  position: absolute;
  top: 50%;
  right: -3vw;
  transform: translateY(-50%);
}

.ai-cta-glow {
  filter: blur(20px);
  pointer-events: none;
  z-index: 0;
  background: radial-gradient(circle, #ff8c3233 0%, #ff641e1a 30%, #0000 65%);
  border-radius: 50%;
  width: 70vw;
  height: 70vw;
  position: absolute;
  bottom: -30vw;
  left: -10vw;
}

.ai-cta-inner {
  z-index: 1;
  text-align: center;
  width: min(1100px, 100% - 80px);
  margin: 0 auto;
  position: relative;
}

.ai-cta-eyebrow {
  font-family: var(--font-sans);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--muted);
  align-items: center;
  gap: 12px;
  margin-bottom: 28px;
  font-size: 11px;
  font-weight: 600;
  display: inline-flex;
}

.ai-cta-eyebrow i {
  border-radius: var(--r-full);
  background: var(--accent);
  width: 8px;
  height: 8px;
  font-style: normal;
  display: inline-block;
  box-shadow: 0 0 12px #3ac5ce73;
}

.ai-cta-title {
  font-family: var(--font-serif);
  letter-spacing: -0.035em;
  color: var(--text);
  text-wrap: balance;
  margin: 0 auto 36px;
  font-size: clamp(48px, 7.5vw, 110px);
  font-weight: 400;
  line-height: 0.96;
}

.ai-cta-title em {
  color: var(--muted);
  font-style: italic;
}

.ai-cta-desc {
  max-width: 520px;
  font-family: var(--font-sans);
  color: var(--muted);
  margin: 0 auto 36px;
  font-size: 15px;
  font-weight: 400;
  line-height: 1.65;
}

.ai-cta-actions {
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 12px;
  display: flex;
}

/* ---------- CTA buttons (ai-hero-cta, footer CTA variant) ---------- */
.ai-hero-cta {
  background: var(--ink, #3a3a3a);
  color: #fff;
  border-radius: var(--r-full);
  font-family: var(--font-sans);
  letter-spacing: 0.01em;
  white-space: nowrap;
  cursor: pointer;
  transition:
    background 0.32s var(--ease-out-expo),
    transform 0.32s var(--ease-spring),
    box-shadow 0.32s var(--ease-out-expo),
    gap 0.32s var(--ease-spring);
  border: 0;
  align-items: center;
  gap: 10px;
  padding: 8px 8px 8px 24px;
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  display: inline-flex;
}

.ai-hero-cta:hover {
  background: var(--ai-accent);
  gap: 14px;
}

.ai-hero-cta-arrow {
  width: 36px;
  height: 36px;
  color: var(--text);
  transition: transform 0.32s var(--ease-spring);
  background: #fff;
  border-radius: 50%;
  justify-content: center;
  align-items: center;
  font-size: 16px;
  font-style: normal;
  font-weight: 600;
  line-height: 1;
  display: inline-flex;
}

.ai-hero-cta-arrow svg {
  width: auto;
  height: 0.8em;
  display: block;
}

.ai-hero-cta:hover .ai-hero-cta-arrow {
  transform: translate(2px);
}

.ai-hero-cta.ai-hero-cta--orange {
  background: var(--app-btn, #de6363);
  color: #fff;
  min-height: 44px;
  padding: 5px 5px 5px 20px;
}

.ai-hero-cta.ai-hero-cta--orange:hover {
  background: var(--app-btn, #de6363);
  color: #fff;
  box-shadow: 0 12px 26px -12px
    color-mix(in srgb, var(--app-btn, #de6363) 75%, transparent);
  transform: translateY(-2px);
}

.ai-hero-cta.ai-hero-cta--orange .ai-hero-cta-arrow {
  width: 30px;
  height: 30px;
  color: var(--app-btn, #de6363);
  background: #fff;
}

.ai-hero-cta.ai-hero-cta--orange.ai-home-hero-cta,
.ai-hero-cta.ai-hero-cta--orange.ai-home-hero-cta:hover {
  color: var(--ai-accent);
  border: 1.5px solid var(--ai-accent);
  box-shadow: none;
  background: 0 0;
}

.ai-hero-cta.ai-hero-cta--orange.ai-home-hero-cta {
  padding: 5px 22px;
}

.ai-hero-cta.ai-hero-cta--orange.ai-home-hero-cta .ai-hero-cta-arrow {
  display: none;
}

.ai-hero-cta.ai-hero-cta--text {
  box-shadow: none;
  min-height: 0;
  color: var(--ink, #1a1a1a);
  background: 0 0;
  border: 0;
  gap: 0;
  padding: 10px 6px 14px;
  position: relative;
}

.ai-hero-cta.ai-hero-cta--text:hover {
  background: 0 0;
  transform: none;
}

.ai-hero-cta--text:after {
  content: "";
  background: var(--ai-accent);
  transform-origin: 0;
  pointer-events: none;
  width: calc(100% - 12px);
  height: 1px;
  position: absolute;
  bottom: 4px;
  left: 6px;
}

.ai-hero-cta--text:hover:after {
  animation: ai-cta-underline-sweep 0.5s var(--ease-out-expo);
}

@keyframes ai-cta-underline-sweep {
  0% {
    transform: scaleX(0);
  }
  to {
    transform: scaleX(1);
  }
}

@media (max-width: 1024px) {
  .ai-cta {
    padding: 112px 0;
  }
}

@media (max-width: 720px) {
  .ai-cta {
    padding: 88px 0 96px;
  }
  .ai-cta-inner {
    width: calc(100% - 40px);
  }
  .ai-cta-title {
    font-size: clamp(40px, 12vw, 68px);
  }
  .ai-cta-ghost {
    font-size: clamp(180px, 50vw, 320px);
    right: -8vw;
  }
  .ai-cta-desc {
    max-width: 100%;
    font-size: 15px;
    line-height: 1.6;
  }
  .ai-hero-cta {
    padding: 6px 6px 6px 18px;
    font-size: 13px;
  }
  .ai-hero-cta-arrow {
    width: 30px;
    height: 30px;
    font-size: 14px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ai-hero-cta--text:hover:after {
    animation: none;
  }
}

/* ============================================================
   Footer (ai-foot) — matches PitchWorx live site
   ============================================================ */
.ai-foot {
  --foot-accent: #3ac5ce;
  --foot-accent-2: #ff8a3d;
  --foot-ink: #fff;
  --foot-dim: #ffffff9e;
  --foot-muted: #fff6;
  --foot-line: #ffffff1a;
  color: var(--foot-ink);
  isolation: isolate;
  background: linear-gradient(#0a0908 0%, #15110d 40%, #0a0908 100%);
  padding: clamp(64px, 9vw, 112px) 0 56px;
  position: relative;
  overflow: clip;
}

.ai-foot-bg {
  z-index: 0;
  pointer-events: none;
  position: absolute;
  inset: 0;
}

/* --- Work outer: scroll room for pinned projects + stats overlay --- */
.work-outer {
  height: 300svh;
  position: relative;
  z-index: 1;
  isolation: isolate;
}
@media (max-width: 720px) {
  .work-outer {
    height: auto;
  }
}

/* --- Stats overlay: z-index above pinned projects --- */
#real-proof,
.ai-stats {
  z-index: 50;
  position: relative;
  background-color: var(--off-white);
  isolation: isolate;
}

/* --- Testimonials (PitchWorx .ai-tst): solid bg + stacking context --- */
.ai-tst {
  z-index: 50;
  position: relative;
  background-color: #f7f5f0;
  isolation: isolate;
}

.ai-foot-bg-glow {
  filter: blur(40px);
  opacity: 0.9;
  background:
    radial-gradient(55% 40% at 18% 28%, #3ac5ce29 0%, #0000 60%),
    radial-gradient(60% 45% at 82% 80%, #3ac5ce1a 0%, #0000 62%);
  position: absolute;
  inset: -8%;
}

.ai-foot-bg-grain {
  opacity: 0.6;
  background-image:
    linear-gradient(#ffffff05 1px, #0000 1px),
    linear-gradient(90deg, #ffffff05 1px, #0000 1px);
  background-size: 120px 120px;
  position: absolute;
  inset: 0;
}

.ai-foot-inner {
  z-index: 2;
  flex-direction: column;
  gap: 0;
  width: min(1340px, 100% - 64px);
  margin: 0 auto;
  display: flex;
  position: relative;
}

.ai-foot-strip {
  border-bottom: 1px solid var(--foot-line);
  font-family: var(--font-sans);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--foot-dim);
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 18px;
  padding: 0 0 22px;
  font-size: 11px;
  font-weight: 700;
  display: flex;
}

.ai-foot-strip-status {
  color: #ffffffdb;
  align-items: center;
  gap: 10px;
  display: inline-flex;
}

.ai-foot-strip-status i {
  background: var(--foot-accent);
  border-radius: 999px;
  width: 7px;
  height: 7px;
  animation: 2s ease-in-out infinite ai-foot-pulse;
  box-shadow: 0 0 12px #3ac5cef2;
}

.ai-foot-strip-logo {
  width: auto;
  height: 40px;
  display: block;
}

.ai-foot-strip-meta {
  text-align: right;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
  display: flex;
}

.ai-foot-strip-meta-title {
  color: #ffffffdb;
  letter-spacing: 0.22em;
}

.ai-foot-strip-meta-loc {
  color: var(--ai-accent);
  letter-spacing: 0.14em;
  font-weight: 600;
}

.ai-foot-stats {
  border-bottom: 1px solid var(--foot-line);
  justify-content: space-between;
  align-items: center;
  gap: clamp(16px, 3vw, 40px);
  padding: 22px 0;
  display: flex;
}

.ai-foot-stat {
  flex-direction: column;
  flex: 1;
  gap: 4px;
  display: flex;
}

.ai-foot-stat-v {
  font-family: var(--font-serif);
  letter-spacing: -0.03em;
  color: #fff;
  font-variant-numeric: tabular-nums;
  font-size: clamp(2rem, 3.4vw, 2.8rem);
  font-weight: 400;
  line-height: 1;
}

.ai-foot-stat-v em {
  color: var(--foot-accent);
  letter-spacing: -0.01em;
  margin-left: 2px;
  font-size: 0.7em;
  font-style: italic;
}

.ai-foot-stat-l {
  font-family: var(--font-sans);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--foot-muted);
  font-size: 10.5px;
  font-weight: 700;
}

.ai-foot-stats-div {
  background: var(--foot-line);
  width: 1px;
  height: 44px;
}

.ai-foot-main {
  flex-direction: column;
  display: flex;
}

.ai-foot-row {
  border-top: 1px solid var(--foot-line);
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.6fr);
  align-items: center;
  column-gap: clamp(40px, 6vw, 96px);
  padding: clamp(16px, 2.2vw, 22px) 0;
  display: grid;
}

.ai-foot-row:first-child {
  border-top: none;
  padding-top: 22px;
}

.ai-foot-row .ai-foot-grp {
  border-top: none;
  padding: 0;
}

.ai-foot-tag {
  font-family: var(--font-sans);
  color: var(--foot-dim);
  margin: 0;
  font-size: clamp(15px, 1.15vw, 16.5px);
  line-height: 1.55;
}

.ai-foot-cats {
  flex-wrap: wrap;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
}

.ai-foot-cats li {
  margin: 0;
  padding: 0;
}

.ai-foot-cats a {
  font-family: var(--font-sans);
  letter-spacing: 0.02em;
  color: #ffffffb8;
  white-space: nowrap;
  background: #ffffff0a;
  border: 1px solid #ffffff14;
  border-radius: 999px;
  align-items: center;
  padding: 4px 11px;
  font-size: 11.5px;
  font-weight: 500;
  text-decoration: none;
  transition:
    background 0.2s,
    color 0.2s,
    border-color 0.2s;
  display: inline-flex;
}

.ai-foot-cats a:hover {
  background: var(--accent-soft);
  color: var(--accent);
  border-color: var(--accent-line);
}

.ai-foot-news {
  flex-direction: column;
  gap: 10px;
  display: flex;
}

.ai-foot-row--news {
  align-items: center;
}

.ai-foot-news-label {
  font-family: var(--font-sans);
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--foot-muted);
  font-size: 10.5px;
  font-weight: 700;
}

.ai-foot-news-row {
  border: 1px solid var(--foot-line);
  background: #ffffff0f;
  border-radius: 999px;
  align-items: center;
  gap: 0;
  max-width: 360px;
  padding: 5px 6px 5px 18px;
  transition:
    border-color 0.35s,
    background 0.35s;
  display: flex;
}

.ai-foot-news-row:focus-within {
  background: #ffffff17;
  border-color: #3ac5ce66;
}

.ai-foot-news-input {
  color: var(--foot-ink);
  font-family: var(--font-sans);
  background: 0 0;
  border: none;
  outline: none;
  flex: 1;
  min-width: 0;
  padding: 8px 0;
  font-size: 14px;
}

.ai-foot-news-input::placeholder {
  color: #ffffff5c;
}

.ai-foot-news-btn {
  background: var(--app-btn, #de6363);
  color: #fff;
  font-family: var(--font-sans);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  cursor: pointer;
  white-space: nowrap;
  border: none;
  border-radius: 999px;
  align-items: center;
  gap: 8px;
  padding: 5px 5px 5px 18px;
  font-size: 11px;
  font-weight: 700;
  transition:
    transform 0.35s cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 0.35s;
  display: inline-flex;
  box-shadow: 0 8px 18px -8px #de636380;
}

.ai-foot-news-btn:hover {
  transform: translate(2px);
  box-shadow: 0 12px 22px -8px #de6363b3;
}

.ai-foot-news-btn i {
  width: 22px;
  height: 22px;
  color: var(--app-btn, #de6363);
  background: #fff;
  border-radius: 50%;
  flex: none;
  justify-content: center;
  align-items: center;
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
  display: inline-flex;
}

.ai-foot-news-btn i svg {
  width: auto;
  height: 11px;
  display: block;
}

.ai-foot-news-btn:hover i {
  transform: translate(2px);
}

.ai-foot-news-hint {
  font-family: var(--font-sans);
  color: var(--foot-muted);
  font-size: 11.5px;
  line-height: 1.5;
}

.ai-foot-grp {
  border-top: 1px solid var(--foot-line);
  grid-template-columns: 96px minmax(0, 1fr);
  align-items: baseline;
  gap: clamp(18px, 2.5vw, 32px);
  padding: clamp(14px, 2vw, 18px) 0;
  display: grid;
}

.ai-foot-grp:first-child {
  border-top: none;
  padding-top: 0;
}

.ai-foot-grp-h {
  font-family: var(--font-sans);
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--foot-accent);
  white-space: nowrap;
  font-size: 10.5px;
  font-weight: 700;
}

.ai-foot-grp-list {
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 0;
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
}

.ai-foot-grp-list li {
  align-items: baseline;
  display: inline-flex;
}

.ai-foot-grp-list a {
  font-family: var(--font-sans);
  color: #ffffffd1;
  padding: 2px 0;
  font-size: 13px;
  font-weight: 500;
  text-decoration: none;
  transition: color 0.3s;
  position: relative;
}

.ai-foot-grp-list a:after {
  content: "";
  background: var(--foot-accent);
  transform-origin: 0;
  height: 1px;
  transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  transform: scaleX(0);
}

.ai-foot-grp-list a:hover {
  color: var(--foot-accent-2);
}

.ai-foot-grp-list a:hover:after {
  transform: scaleX(1);
}

.ai-foot-grp-list li + li:before {
  content: "/";
  color: #ffffff38;
  font-family: var(--font-serif);
  margin: 0 12px;
  font-style: italic;
  display: inline-block;
}

.ai-foot-grp--connect .ai-foot-grp-list {
  white-space: nowrap;
  flex-wrap: nowrap;
}

.ai-foot-base {
  border-top: 1px solid var(--foot-line);
  font-family: var(--font-sans);
  color: var(--foot-muted);
  letter-spacing: 0.04em;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 18px;
  padding-top: 22px;
  font-size: 11.5px;
  display: flex;
}

.ai-foot-base-left {
  font-weight: 600;
}

.ai-foot-base-right {
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  display: inline-flex;
}

.ai-foot-base-right a {
  color: #ffffffb3;
  font-weight: 600;
  text-decoration: none;
  transition: color 0.3s;
}

.ai-foot-base-right a:hover {
  color: var(--foot-accent-2);
}

.ai-foot-base-right i {
  opacity: 0.4;
  font-style: normal;
}

.ai-foot-base-right span:last-child {
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.1em;
  opacity: 0.65;
}

@keyframes ai-foot-pulse {
  0%,
  to {
    opacity: 1;
    transform: scale(1);
  }
  50% {
    opacity: 0.5;
    transform: scale(1.5);
  }
}

@media (max-width: 960px) {
  .ai-foot-row {
    grid-template-columns: 1fr;
    row-gap: 18px;
    padding: 22px 0;
  }
  .ai-foot-row--news {
    align-items: stretch;
  }
  .ai-foot-grp {
    grid-template-columns: 1fr;
    gap: 10px;
  }
  .ai-foot-grp--connect .ai-foot-grp-list {
    white-space: normal;
    flex-wrap: wrap;
  }
  .ai-foot-news-row {
    max-width: 100%;
  }
  .ai-foot-stats {
    flex-wrap: wrap;
    gap: 24px;
  }
  .ai-foot-stats-div {
    display: none;
  }
  .ai-foot-stat {
    flex: 0 0 calc(50% - 12px);
  }
}

@media (max-width: 720px) {
  .ai-foot-inner {
    width: calc(100% - 32px);
  }
  .ai-foot-strip {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }
  .ai-foot-news-row {
    padding: 4px 4px 4px 14px;
  }
  .ai-foot-news-btn {
    padding: 9px 14px;
  }
  .ai-foot-base {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }
  .ai-foot-grp-list li + li:before {
    margin: 0 8px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ai-foot-strip-status i {
    animation: none;
  }
  .ai-foot-news-btn,
  .ai-foot-news-btn i {
    transition: none;
  }
  .ai-foot-grp-list a:after {
    transition: none;
  }
}

/* ============================================================
   Pricing section (ai-spp) — matches PitchWorx live site
   "Simple Monthly Subscription." + 7fr/3fr pricing cards
   ============================================================ */
.ai-spp {
  --spp-accent: #3ac5ce;
  --spp-accent-2: #ff8a3d;
  --spp-ink: #0b0a08;
  --spp-ink-dim: #0b0a089e;
  --spp-muted: #0b0a086b;
  --spp-line: #0b0a0814;
  position: relative;
  width: 100%;
  padding: clamp(64px, 9vw, 96px) 0;
  isolation: isolate;
}

/* Background + orbs live in their own clipped layer so the section
   itself does NOT get an overflow that would break position: sticky */
.ai-spp-bg {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
}
.ai-spp-bg:before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(#f9f6ef 0%, #f3efe6 50%, #f7f4ec 100%);
}

/* Decorative ambient orbs */
.ai-spp-orb {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  filter: blur(50px);
  opacity: 0.5;
}
.ai-spp-orb-1 {
  width: 480px;
  height: 480px;
  top: -120px;
  right: -80px;
  background: radial-gradient(
    circle,
    #ff8c3233 0%,
    #ff641e14 55%,
    transparent 70%
  );
  animation: spp-orb-1 24s ease-in-out infinite alternate;
}
.ai-spp-orb-2 {
  width: 520px;
  height: 520px;
  bottom: -160px;
  left: -140px;
  background: radial-gradient(
    circle,
    #ffc07a2e 0%,
    #ff641e12 55%,
    transparent 70%
  );
  animation: spp-orb-2 30s ease-in-out infinite alternate;
}

@keyframes spp-orb-1 {
  0% {
    transform: translate(0, 0) scale(1);
  }
  to {
    transform: translate(-60px, 30px) scale(1.1);
  }
}
@keyframes spp-orb-2 {
  0% {
    transform: translate(0, 0) scale(1);
  }
  to {
    transform: translate(50px, -40px) scale(1.12);
  }
}

.ai-spp-head {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(16px, 2.5vw, 24px);
  max-width: 760px;
  margin: 0 auto 0;
}

.ai-spp-title {
  font-family: var(--font-serif);
  font-size: clamp(2.4rem, 5.4vw, 4.4rem);
  line-height: 0.98;
  letter-spacing: -0.035em;
  font-weight: 400;
  color: var(--text);
  margin: 0;
}
.ai-spp-title em {
  display: block;
  color: var(--spp-accent);
  font-style: italic;
}

.ai-spp-sub {
  font-family: var(--font-sans);
  font-size: clamp(16px, 1.3vw, 18px);
  line-height: 1.65;
  color: #0505058c;
  font-weight: 400;
  max-width: 60ch;
  margin: 0;
}

.ai-spp-grid {
  width: min(1340px, 100% - 64px);
  margin: clamp(40px, 6vw, 64px) auto 0;
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 3fr);
  gap: clamp(20px, 2.4vw, 32px);
  align-items: start;
}

.ai-spp-card {
  position: relative;
  border-radius: clamp(24px, 2.8vw, 40px);
  padding: clamp(32px, 4vw, 56px);
  background: #fff;
  box-shadow:
    0 24px 60px -32px #0b0a0833,
    0 80px 160px -64px #0b0a0840,
    0 0 0 1px #3ac5ce0f;
  border: 1px solid #dedbd6;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.ai-spp-card-top {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: space-between;
  gap: 32px;
}

.ai-spp-card-kicker {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-sans);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: #0505058c;
}
.ai-spp-card-kicker i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--spp-accent);
  font-style: normal;
  animation: spp-pulse 1.8s ease-in-out infinite;
}

@keyframes spp-pulse {
  0%,
  to {
    opacity: 1;
    transform: scale(1);
  }
  50% {
    opacity: 0.5;
    transform: scale(1.45);
  }
}

.ai-spp-card-headline {
  margin-top: 44px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: flex-end;
  gap: 24px;
}

.ai-spp-card-name {
  font-family: var(--font-serif);
  font-size: clamp(2.4rem, 4.6vw, 3.6rem);
  font-weight: 400;
  line-height: 1;
  letter-spacing: -0.035em;
  color: #111;
  margin: 0;
}

.ai-spp-card-priceblock {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}

.ai-spp-card-price {
  display: flex;
  align-items: baseline;
  gap: 8px;
}

.ai-spp-card-price-cur {
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #a19e9a;
}

.ai-spp-card-price-num {
  font-family: var(--font-serif);
  font-size: clamp(3rem, 6vw, 4.6rem);
  font-weight: 400;
  line-height: 0.92;
  letter-spacing: -0.045em;
  color: #111;
  background: linear-gradient(140deg, var(--spp-ink, #0b0a08) 0%, #2a2521 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.ai-spp-card-price-cyc {
  font-family: var(--font-sans);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: #57534f;
}

.ai-spp-card-price-note {
  margin-top: 12px;
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #ff6719;
}

.ai-spp-card-blurb {
  margin-top: 28px;
  padding-top: 16px;
  border-top: 1px solid #e5e2de;
  font-family: var(--font-sans);
  font-size: clamp(15.5px, 1.2vw, 17px);
  line-height: 1.6;
  font-weight: 400;
  color: #504c46;
}

.ai-spp-card-sections {
  margin-top: 24px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(20px, 2.4vw, 40px);
}

.ai-spp-sect-h {
  display: block;
  margin-bottom: 12px;
  font-family: var(--font-sans);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: #77736e;
}

.ai-spp-sect-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.ai-spp-sect-list li {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-family: var(--font-sans);
  font-size: 14.5px;
  font-weight: 400;
  line-height: 1.45;
  color: #3f3f3f;
  padding: 0 0 8px;
}

.ai-spp-tick {
  flex: none;
  margin-top: 2px;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: #fff0e8;
  color: #ff6b1a;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.ai-spp-tick svg {
  width: 9px;
  height: 9px;
  display: block;
}

.ai-spp-card-foot {
  margin-top: 36px;
  padding-top: 28px;
  border-top: 1px solid #e8e4df;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
}

.ai-spp-card-foot-meta {
  font-family: var(--font-sans);
  font-size: 11.5px;
  font-weight: 500;
  line-height: 1.5;
  color: #57534f;
  max-width: 34ch;
}

/* Aside column */
.ai-spp-aside {
  display: flex;
  flex-direction: column;
  gap: 14px;
  position: sticky;
  top: 96px;
  z-index: 5;
}

.ai-spp-aside-custom {
  position: relative;
  min-height: 278px;
  background: #21160e;
  border-radius: clamp(16px, 1.6vw, 19px);
  padding: 32px;
  color: #fff;
  overflow: hidden;
  box-shadow: 0 18px 40px -20px #0b0a084d;
}
.ai-spp-aside-custom:after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(
    circle at 100% 0%,
    rgba(112, 55, 20, 0.35),
    transparent 50%
  );
}

.ai-spp-aside-kicker {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-sans);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: #9c9690;
}
.ai-spp-aside-kicker i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--spp-accent);
  font-style: normal;
  animation: spp-pulse 1.8s ease-in-out infinite;
}

.ai-spp-aside-title {
  position: relative;
  margin: 16px 0 0;
  font-family: var(--font-serif);
  font-size: clamp(1.8rem, 3vw, 2.4rem);
  font-weight: 400;
  line-height: 0.9;
  letter-spacing: -0.02em;
  color: #fff;
  z-index: 1;
}
.ai-spp-aside-title em {
  font-style: italic;
  background: linear-gradient(90deg, var(--spp-accent-2), var(--spp-accent));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.ai-spp-aside-blurb {
  position: relative;
  margin: 20px 0 0;
  max-width: 235px;
  font-family: var(--font-sans);
  font-size: 13.5px;
  line-height: 1.6;
  font-weight: 400;
  color: #c1bbb5;
  z-index: 1;
}

.ai-spp-aside-quote {
  position: relative;
  margin: 0;
  background: #fff;
  border: 1px solid #05050517;
  border-radius: 22px;
  padding: 30px 28px 26px;
  box-shadow: 0 1px 2px rgb(5 5 5 / 0.025);
}

.ai-spp-aside-quote-mark {
  display: block;
  font-family: var(--font-serif);
  font-size: 56px;
  line-height: 0.6;
  color: var(--spp-accent);
  opacity: 0.85;
  letter-spacing: -0.02em;
  margin-bottom: 4px;
}

.ai-spp-aside-quote-text {
  margin: 0 0 18px;
  font-family: var(--font-serif);
  font-size: 16px;
  font-style: italic;
  line-height: 1.55;
  letter-spacing: -0.005em;
  color: #050505;
}

.ai-spp-aside-quote-by {
  display: flex;
  align-items: center;
  gap: 12px;
  border-top: 1px solid #05050517;
  padding-top: 14px;
}

.ai-spp-aside-quote-avatar {
  flex: none;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  background: linear-gradient(135deg, #1a1612 0%, #0b0a08 100%);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
}

.ai-spp-aside-quote-meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
  line-height: 1.2;
}
.ai-spp-aside-quote-meta strong {
  font-size: 13px;
  font-weight: 700;
  color: #222;
}
.ai-spp-aside-quote-meta em {
  font-size: 11px;
  font-weight: 500;
  color: #99938e;
  font-style: normal;
}

.ai-spp-aside-quote-stars {
  position: absolute;
  top: 22px;
  right: 24px;
  display: inline-flex;
  gap: 2px;
  color: #3ac5ce;
}
.ai-spp-aside-quote-stars svg {
  width: 13px;
  height: 13px;
  display: block;
}

/* Price reveal animation on toggle */
.au-spp-price-anim .ai-spp-card-price-num {
  display: inline-block;
  opacity: 0;
  transform: translateY(-6px);
}

/* Responsive */
@media (max-width: 1100px) {
  .ai-spp-card-sections {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 900px) {
  .ai-spp-grid {
    width: calc(100% - 40px);
    grid-template-columns: 1fr;
  }
  .ai-spp-head {
    width: calc(100% - 40px);
  }
  .ai-spp-aside {
    position: static;
  }
}

@media (max-width: 640px) {
  .ai-spp-card {
    padding: clamp(18px, 4vw, 28px);
  }
  .ai-spp-card-headline {
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
  }
  .ai-spp-card-priceblock {
    align-items: flex-start;
  }
  .ai-spp-card-sections {
    grid-template-columns: 1fr;
  }
  .ai-spp-card-name {
    font-size: 2.4rem;
  }
  .ai-spp-card-top {
    flex-direction: column;
    gap: 20px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ai-spp-card-kicker i,
  .ai-spp-aside-kicker i {
    animation: none;
  }
}

/* Feature list typography — bump the inline Tailwind sizes to match
   the live PitchWorx pricing card (14.5px rows, 15px ticks) */
.ai-spp-card .ai-spp-sect-h {
  display: block;
  margin-bottom: 14px;
  font-family: var(--font-sans);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: #77736e;
}
.ai-spp-card .ai-spp-sect-list {
  display: flex;
  flex-direction: column;
  gap: 9px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.ai-spp-card .ai-spp-sect-list li {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-family: var(--font-sans);
  font-size: 14.5px;
  font-weight: 400;
  line-height: 1.45;
  color: #3f3f3f;
}
.ai-spp-card .ai-spp-tick {
  flex: none;
  margin-top: 2px;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: #fff0e8;
  color: #ff6b1a;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.ai-spp-card .ai-spp-tick svg {
  width: 10px;
  height: 10px;
  display: block;
}

/* ---------- What We Do bento grid: orbiting rings on the promise card ---------- */
.bento-stat-orbit {
  animation: bento-stat-orbit 22s linear infinite;
}
.bento-stat-orbit::before,
.bento-stat-orbit::after {
  content: "";
  position: absolute;
  inset: 0;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 50%;
}
.bento-stat-orbit::before {
  transform: scale(0.78);
}
.bento-stat-orbit::after {
  transform: scale(0.56);
}
@keyframes bento-stat-orbit {
  0% {
    transform: rotate(0);
  }
  to {
    transform: rotate(360deg);
  }
}

/* ---------- "Try us for 7 days" breaker section (mirrored from pitchworx.com) ---------- */
.ai-breaker {
  isolation: isolate;
  color: #f5f5f0;
  background: #050505;
  place-items: center;
  margin-top: 0;
  display: grid;
  position: relative;
  overflow: hidden;
}
.ai-breaker-bg {
  z-index: 0;
  pointer-events: none;
  position: absolute;
  inset: -10% 0;
  overflow: hidden;
}
.ai-breaker-img {
  object-fit: cover;
  filter: grayscale(0.15) contrast(1.05) brightness(0.55);
  will-change: transform;
  width: 100%;
  height: 100%;
  display: block;
  position: absolute;
  inset: 0;
}
.ai-breaker-vignette {
  pointer-events: none;
  background:
    radial-gradient(#05050559 0%, #050505a6 55%, #050505eb 100%),
    linear-gradient(#050505b3 0%, #0000 18% 82%, #050505d9 100%);
  position: absolute;
  inset: 0;
}

/* ---------- Floating "Our Products" bar (mirrors pitchworx.com bottom bar) ---------- */
#floating-products .fp-panel {
  opacity: 0;
  pointer-events: none;
  transform: translateY(10px) scale(0.96);
  transition:
    opacity 0.28s ease,
    transform 0.28s ease,
    visibility 0.28s;
  visibility: hidden;
}
#floating-products.fp-open .fp-panel {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0) scale(1);
  visibility: visible;
}
#floating-products.fp-open .fp-caret {
  transform: rotate(180deg);
}
@media (prefers-reduced-motion: reduce) {
  #floating-products .fp-panel,
  #floating-products .fp-caret {
    transition: none;
  }
}

/* ============================================================
   Mobile nav (PitchWorx ai-mobile-* replica) — dot toggle +
   right-side full-height drawer with staggered reveal.
   Shown only ≤1024px (tablet / mobile); desktop keeps #desktop-nav.
   ============================================================ */
.ai-mobile-menu-toggle,
.ai-mobile-nav,
.ai-mobile-nav-curtain {
  display: none;
}
.ai-mobile-menu-toggle {
  z-index: 1310;
  border: 1px solid var(--border-3);
  -webkit-backdrop-filter: blur(18px) saturate(180%);
  backdrop-filter: blur(18px) saturate(180%);
  width: 42px;
  height: 42px;
  color: var(--text);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition:
    border-color 0.32s var(--ease-out-expo),
    background 0.32s var(--ease-out-expo),
    transform 0.42s var(--ease-spring);
  background: #ffffffc7;
  border-radius: 999px;
  justify-content: center;
  align-items: center;
  padding: 0;
  display: none;
  position: relative;
}
.ai-mobile-menu-toggle:hover {
  border-color: var(--text);
}
.ai-mobile-menu-toggle:active {
  transform: scale(0.94);
}
.ai-mobile-menu-mark {
  background: var(--ai-accent);
  width: 7px;
  height: 7px;
  transition:
    width 0.42s var(--ease-spring),
    height 0.42s var(--ease-spring),
    background 0.32s ease,
    transform 0.42s var(--ease-spring);
  border-radius: 50%;
  animation: 2.4s ease-in-out infinite ai-menu-dot-pulse;
  display: block;
  position: relative;
  box-shadow: 0 0 #3ac5ce80;
}
@keyframes ai-menu-dot-pulse {
  0%,
  to {
    box-shadow: 0 0 #3ac5ce80;
  }
  50% {
    box-shadow: 0 0 0 5px #3ac5ce00;
  }
}
.ai-mobile-menu-toggle[aria-expanded="true"] {
  background: var(--ink, #3a3a3a);
  border-color: var(--text);
}
.ai-mobile-menu-toggle[aria-expanded="true"] .ai-mobile-menu-mark {
  width: 14px;
  height: 14px;
  box-shadow: none;
  background-color: #0000;
  background-image:
    linear-gradient(#0000 46%, #fff 46% 54%, #0000 54%),
    linear-gradient(90deg, #0000 46%, #fff 46% 54%, #0000 54%);
  border-radius: 0;
  animation: none;
  transform: rotate(45deg);
}

.ai-mobile-nav-curtain {
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  backdrop-filter: blur(14px) saturate(140%);
  z-index: 1270;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition:
    opacity 0.42s var(--ease-out-expo),
    visibility 0.42s;
  background: #0505059e;
  position: fixed;
  inset: 0;
}
.ai-mobile-nav-curtain.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.ai-mobile-nav {
  z-index: 1280;
  background: var(--off-white);
  border-left: 1px solid var(--border-3);
  visibility: hidden;
  pointer-events: none;
  isolation: isolate;
  background-image: radial-gradient(#00000009 1px, #0000 1px);
  background-size: 22px 22px;
  flex-direction: column;
  width: auto;
  max-width: none;
  transition:
    transform 0.56s cubic-bezier(0.32, 0.94, 0.6, 1),
    visibility 0.56s;
  position: fixed;
  inset: 0;
  transform: translate(100%);
  box-shadow: -40px 0 80px #0505050f;
}
.ai-mobile-nav.is-open {
  visibility: visible;
  pointer-events: auto;
  transform: translate(0);
}

.ai-mobile-nav-top {
  border-bottom: 1px solid var(--border-2);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  z-index: 2;
  background: #f4f4f0eb;
  flex-shrink: 0;
  justify-content: space-between;
  align-items: center;
  padding: 16px 20px 14px 26px;
  display: flex;
}
.ai-mobile-nav-logo {
  align-items: center;
  text-decoration: none;
  display: inline-flex;
}
.ai-mobile-nav-logo img {
  object-fit: contain;
  width: auto;
  height: 36px;
  display: block;
}
.ai-mobile-nav-close {
  background: var(--ink, #3a3a3a);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  width: 40px;
  height: 40px;
  transition:
    background 0.32s,
    transform 0.32s var(--ease-spring);
  border: none;
  border-radius: 999px;
  flex-shrink: 0;
  justify-content: center;
  align-items: center;
  padding: 0;
  display: inline-flex;
}
.ai-mobile-nav-close span {
  width: 14px;
  height: 14px;
  transition: transform 0.42s var(--ease-spring);
  display: block;
  position: relative;
}
.ai-mobile-nav-close span:before,
.ai-mobile-nav-close span:after {
  content: "";
  transform-origin: 50%;
  background: #fff;
  border-radius: 999px;
  width: 100%;
  height: 1.5px;
  position: absolute;
  top: 50%;
  left: 0;
}
.ai-mobile-nav-close span:before {
  transform: translateY(-50%) rotate(45deg);
}
.ai-mobile-nav-close span:after {
  transform: translateY(-50%) rotate(-45deg);
}
.ai-mobile-nav-close:hover {
  background: var(--ai-accent);
}
.ai-mobile-nav-close:hover span {
  transform: rotate(90deg);
}
.ai-mobile-nav-close:active {
  transform: scale(0.94);
}

.ai-mobile-nav-scroll {
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  touch-action: pan-y;
  background: 0 0;
  flex-direction: column;
  flex: auto;
  min-height: 0;
  padding: 28px 26px 24px;
  display: flex;
  overflow: hidden auto;
}
.ai-mobile-nav-kicker {
  font-family: var(--font-sans);
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--muted);
  opacity: 0;
  transition:
    opacity 0.5s ease,
    transform 0.6s var(--ease-spring);
  align-items: center;
  gap: 12px;
  margin: 28px 0 14px;
  font-size: 10px;
  font-weight: 600;
  display: inline-flex;
  transform: translate(-10px);
}
.ai-mobile-nav-kicker:first-child {
  margin-top: 0;
}
.ai-mobile-nav-kicker:before {
  content: "";
  background: var(--border-3);
  width: 24px;
  height: 1px;
  display: inline-block;
}

.ai-mobile-nav-primary {
  flex-direction: column;
  display: flex;
}
.ai-mobile-nav-primary > a {
  color: var(--text);
  font-family: var(--font-serif);
  letter-spacing: -0.025em;
  overflow-wrap: anywhere;
  opacity: 0;
  -webkit-tap-highlight-color: transparent;
  grid-template-columns: 30px 1fr auto;
  align-items: center;
  gap: 14px;
  padding: 14px 0;
  font-weight: 400;
  line-height: 1;
  text-decoration: none;
  transition:
    opacity 0.6s,
    transform 0.7s cubic-bezier(0.32, 0.94, 0.6, 1),
    color 0.32s;
  display: grid;
  position: relative;
  transform: translate(28px);
}
.ai-mobile-nav-primary > a:after {
  content: "";
  background: var(--border-2);
  transform-origin: 0;
  height: 1px;
  transition: transform 0.7s cubic-bezier(0.32, 0.94, 0.6, 1);
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  transform: scaleX(0);
}
.ai-mobile-nav-primary > a > i {
  font-family: var(--font-sans);
  letter-spacing: 0.18em;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
  align-self: center;
  font-size: 10px;
  font-style: normal;
  font-weight: 500;
  transition: color 0.32s;
}
.ai-mobile-nav-primary > a > span {
  transition:
    font-style 0.32s ease,
    color 0.32s ease,
    transform 0.42s var(--ease-spring);
  font-size: clamp(40px, 11vw, 56px);
  font-style: normal;
  line-height: 1;
  display: inline-block;
}
.ai-mobile-nav-primary > a > em {
  font-style: normal;
  font-family: var(--font-serif);
  color: var(--muted);
  opacity: 0;
  transition:
    transform 0.42s var(--ease-spring),
    opacity 0.32s ease,
    color 0.32s ease;
  align-self: center;
  font-size: 24px;
  line-height: 1;
  transform: translate(-8px);
}
.ai-mobile-nav-primary > a:hover > span,
.ai-mobile-nav-primary > a:active > span,
.ai-mobile-nav-primary > a.is-active > span {
  color: var(--ai-accent);
  font-style: italic;
  transform: translate(2px);
}
.ai-mobile-nav-primary > a:hover > i,
.ai-mobile-nav-primary > a:active > i,
.ai-mobile-nav-primary > a.is-active > i {
  color: var(--ai-accent);
}
.ai-mobile-nav-primary > a:hover > em,
.ai-mobile-nav-primary > a:active > em,
.ai-mobile-nav-primary > a.is-active > em {
  opacity: 1;
  color: var(--ai-accent);
  transform: translate(0);
}

.ai-mobile-nav-expand {
  width: 100%;
  color: var(--text);
  font-family: var(--font-serif);
  letter-spacing: -0.025em;
  text-align: left;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  opacity: 0;
  background: 0 0;
  border: none;
  grid-template-columns: 30px 1fr auto;
  align-items: center;
  gap: 14px;
  padding: 14px 0;
  font-weight: 400;
  line-height: 1;
  transition:
    opacity 0.6s,
    transform 0.7s cubic-bezier(0.32, 0.94, 0.6, 1),
    color 0.32s;
  display: grid;
  position: relative;
  transform: translate(28px);
}
.ai-mobile-nav-expand:after {
  content: "";
  background: var(--border-2);
  transform-origin: 0;
  height: 1px;
  transition: transform 0.7s cubic-bezier(0.32, 0.94, 0.6, 1);
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  transform: scaleX(0);
}
.ai-mobile-nav-expand > i {
  font-family: var(--font-sans);
  letter-spacing: 0.18em;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
  align-self: center;
  font-size: 10px;
  font-style: normal;
  font-weight: 500;
  transition: color 0.32s;
}
.ai-mobile-nav-expand > span {
  transition:
    font-style 0.32s ease,
    color 0.32s ease,
    transform 0.42s var(--ease-spring);
  font-size: clamp(40px, 11vw, 56px);
  font-style: normal;
  line-height: 1;
  display: inline-block;
}
.ai-mobile-nav-expand-icon {
  flex-shrink: 0;
  align-self: center;
  width: 16px;
  height: 16px;
  font-style: normal;
  display: inline-block;
  position: relative;
}
.ai-mobile-nav-expand-icon:before,
.ai-mobile-nav-expand-icon:after {
  content: "";
  background: var(--muted);
  transition:
    transform 0.42s var(--ease-spring),
    background 0.32s ease;
  border-radius: 999px;
  position: absolute;
}
.ai-mobile-nav-expand-icon:before {
  height: 1.5px;
  top: 50%;
  left: 0;
  right: 0;
  transform: translateY(-50%);
}
.ai-mobile-nav-expand-icon:after {
  width: 1.5px;
  top: 0;
  bottom: 0;
  left: 50%;
  transform: translate(-50%) rotate(0);
}
.ai-mobile-nav-expand.is-open .ai-mobile-nav-expand-icon:after {
  transform: translate(-50%) rotate(90deg);
}
.ai-mobile-nav-expand.is-open .ai-mobile-nav-expand-icon:before,
.ai-mobile-nav-expand.is-open .ai-mobile-nav-expand-icon:after {
  background: var(--ai-accent);
}
.ai-mobile-nav-expand:hover > span,
.ai-mobile-nav-expand.is-open > span {
  color: var(--ai-accent);
  font-style: italic;
}
.ai-mobile-nav-expand:hover > i,
.ai-mobile-nav-expand.is-open > i {
  color: var(--ai-accent);
}

.ai-mobile-nav-collapse {
  max-height: 0;
  transition: max-height 0.5s cubic-bezier(0.32, 0.94, 0.6, 1);
  overflow: hidden;
}
.ai-mobile-nav-collapse.is-open {
  max-height: 520px;
}
.ai-mobile-nav-sublist {
  flex-direction: column;
  padding: 4px 0 8px 44px;
  display: flex;
  position: relative;
}
.ai-mobile-nav-sublist:before {
  content: "";
  background: var(--border-3);
  transform-origin: top;
  width: 1px;
  transition: transform 0.5s cubic-bezier(0.32, 0.94, 0.6, 1) 50ms;
  position: absolute;
  top: 4px;
  bottom: 12px;
  left: 14px;
  transform: scaleY(0);
}
.ai-mobile-nav-collapse.is-open .ai-mobile-nav-sublist:before {
  transform: scaleY(1);
}
.ai-mobile-nav-sublist a {
  color: var(--text);
  opacity: 0;
  -webkit-tap-highlight-color: transparent;
  grid-template-rows: auto auto;
  grid-template-columns: 1fr auto;
  gap: 3px 14px;
  padding: 12px 0;
  text-decoration: none;
  transition:
    opacity 0.5s,
    transform 0.6s cubic-bezier(0.32, 0.94, 0.6, 1),
    color 0.32s;
  display: grid;
  position: relative;
  transform: translate(20px);
}
.ai-mobile-nav-sublist a + a {
  border-top: 1px solid var(--border-2);
}
.ai-mobile-nav-sublist a b {
  font-family: var(--font-serif);
  letter-spacing: -0.02em;
  color: var(--text);
  transition:
    color 0.32s ease,
    font-style 0.32s ease,
    transform 0.42s var(--ease-spring);
  grid-area: 1/1;
  font-size: clamp(20px, 5vw, 24px);
  font-weight: 400;
  line-height: 1.05;
}
.ai-mobile-nav-sublist a em {
  font-style: normal;
  font-family: var(--font-sans);
  color: var(--muted);
  letter-spacing: 0.005em;
  grid-area: 2/1;
  font-size: 11px;
  font-weight: 400;
}
.ai-mobile-nav-sublist a i {
  font-style: normal;
  font-family: var(--font-serif);
  color: var(--muted);
  opacity: 0;
  transition:
    transform 0.42s var(--ease-spring),
    opacity 0.32s ease,
    color 0.32s ease;
  grid-area: 1/2/span 2;
  align-self: center;
  font-size: 18px;
  transform: translate(-6px);
}
.ai-mobile-nav-sublist a:hover b {
  color: var(--ai-accent);
  font-style: italic;
  transform: translate(2px);
}
.ai-mobile-nav-sublist a:hover i {
  opacity: 1;
  color: var(--ai-accent);
  transform: translate(0);
}
.ai-mobile-nav-collapse.is-open .ai-mobile-nav-sublist a {
  opacity: 1;
  transform: translate(0);
}
.ai-mobile-nav-collapse.is-open .ai-mobile-nav-sublist a:first-of-type {
  transition-delay: 0.1s;
}
.ai-mobile-nav-collapse.is-open .ai-mobile-nav-sublist a:nth-of-type(2) {
  transition-delay: 0.18s;
}
.ai-mobile-nav-collapse.is-open .ai-mobile-nav-sublist a:nth-of-type(3) {
  transition-delay: 0.26s;
}

.ai-mobile-nav-foot {
  padding: 20px 26px max(20px, env(safe-area-inset-bottom));
  border-top: 1px solid var(--border-2);
  background: var(--off-white);
  box-sizing: border-box;
  flex-direction: column;
  flex-shrink: 0;
  gap: 14px;
  display: flex;
  opacity: 0;
  transform: translateY(8px);
}
.ai-mobile-nav-actions {
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  display: grid;
}
.ai-mobile-nav-actions a {
  height: 52px;
  font-family: var(--font-sans);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  -webkit-tap-highlight-color: transparent;
  transition:
    background 0.32s,
    color 0.32s,
    border-color 0.32s,
    transform 0.42s var(--ease-spring);
  border-radius: 999px;
  justify-content: center;
  align-items: center;
  gap: 8px;
  padding: 0 16px;
  font-size: 12px;
  font-weight: 600;
  text-decoration: none;
  display: inline-flex;
}
.ai-mobile-nav-actions a i {
  font-style: normal;
  font-family: var(--font-serif);
  letter-spacing: 0;
  transition: transform 0.42s var(--ease-spring);
  font-size: 18px;
  line-height: 1;
  transform: translate(-2px);
}
.ai-mobile-nav-actions a:hover i,
.ai-mobile-nav-actions a:active i {
  transform: translate(2px);
}
.ai-mobile-nav-ghost {
  border: 1px solid var(--border-3);
  color: var(--text);
  background: 0 0;
}
.ai-mobile-nav-ghost:hover {
  border-color: var(--text);
  background: #0505050a;
}
.ai-mobile-nav-cta {
  background: var(--ink, #3a3a3a);
  border: 1px solid var(--text);
  color: #fff;
}
.ai-mobile-nav-cta:hover,
.ai-mobile-nav-cta:active {
  background: var(--app-btn, #de6363);
  border-color: var(--app-btn, #de6363);
}
.ai-mobile-nav-info {
  border-top: 1px solid var(--border-2);
  font-family: var(--font-sans);
  letter-spacing: 0.04em;
  color: var(--muted);
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding-top: 12px;
  font-size: 11px;
  display: flex;
}
.ai-mobile-nav-info a {
  color: var(--text);
  text-decoration: none;
  transition: color 0.32s;
}
.ai-mobile-nav-info a:hover {
  color: var(--ai-accent);
}
.ai-mobile-nav-info-status {
  color: var(--muted);
  align-items: center;
  gap: 8px;
  display: inline-flex;
}
.ai-mobile-nav-info-status:before {
  content: "";
  background: var(--ai-accent);
  border-radius: 50%;
  width: 6px;
  height: 6px;
  animation: 2.4s ease-in-out infinite ai-menu-dot-pulse;
  box-shadow: 0 0 #3ac5ce80;
}

/* Panel-open reveal + stagger */
.ai-mobile-nav.is-open span.ai-mobile-nav-kicker,
.ai-mobile-nav.is-open .ai-mobile-nav-primary > a,
.ai-mobile-nav.is-open .ai-mobile-nav-expand {
  opacity: 1;
  transform: translate(0);
}
.ai-mobile-nav.is-open .ai-mobile-nav-primary > a:after,
.ai-mobile-nav.is-open .ai-mobile-nav-expand:after {
  transform: scaleX(1);
}
.ai-mobile-nav.is-open .ai-mobile-nav-foot {
  opacity: 1;
  transform: translateY(0);
}
.ai-mobile-nav.is-open span.ai-mobile-nav-kicker {
  transition-delay: 0.18s;
}
.ai-mobile-nav.is-open .ai-mobile-nav-primary > :first-child {
  transition-delay: 0.22s;
}
.ai-mobile-nav.is-open .ai-mobile-nav-primary > :nth-child(2) {
  transition-delay: 0.27s;
}
.ai-mobile-nav.is-open .ai-mobile-nav-primary > :nth-child(3) {
  transition-delay: 0.32s;
}
.ai-mobile-nav.is-open .ai-mobile-nav-primary > :nth-child(4) {
  transition-delay: 0.37s;
}
.ai-mobile-nav.is-open .ai-mobile-nav-foot {
  transition-delay: 0.55s;
}

body.is-menu-open {
  overflow: hidden;
}
body.is-menu-open .ai-mobile-menu-toggle {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition:
    opacity 0.24s,
    visibility 0.24s;
}

@media (max-width: 1280px) {
  .ai-mobile-menu-toggle {
    display: inline-flex;
  }
  .ai-mobile-nav {
    display: flex;
  }
  .ai-mobile-nav-curtain {
    display: block;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ai-mobile-nav,
  .ai-mobile-nav-curtain,
  .ai-mobile-nav-kicker,
  .ai-mobile-nav-primary > a,
  .ai-mobile-nav-primary > a:after,
  .ai-mobile-nav-expand,
  .ai-mobile-nav-expand:after,
  .ai-mobile-nav-sublist a,
  .ai-mobile-nav-sublist:before,
  .ai-mobile-nav-collapse,
  .ai-mobile-nav-foot,
  .ai-mobile-menu-mark,
  .ai-mobile-nav-info-status:before {
    transition: none !important;
    animation: none !important;
  }
}