/* ==========================================================================
   Protool App — landing page
   Tailwind utilities handle layout/spacing/color inline in index.html.
   This file holds only what utilities can't express: keyframes, backdrop
   surfaces, gradient-border masks, and the scroll-reveal transition.
   ========================================================================== */

/* Custom Scrollbar */
::-webkit-scrollbar {
  width: 8px;
}
::-webkit-scrollbar-track {
  background: #000107;
}
::-webkit-scrollbar-thumb {
  background: #1b2430;
  border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
  background: #2a3746;
}

/* --------------------------------------------------------------------------
   Glass surfaces
   -------------------------------------------------------------------------- */
/* The header is transparent over the hero, exactly as in Figma. Once the page
   scrolls it sits over arbitrary content (including the lime panel), where
   white nav text would be unreadable — so it picks up a backdrop then. */
/* Floating capsule nav: a glass pill that sits over the hero and firms up on
   scroll, rather than a full-width bar. */
.site-header {
  padding: 14px 16px;
  background: transparent;
  transition: padding 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}
.nav-shell {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  max-width: 1240px;
  margin: 0 auto;
  padding: 10px 12px 10px 22px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.07);
  background: rgba(6, 10, 18, 0.55);
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
  transition:
    background-color 0.35s ease,
    border-color 0.35s ease,
    box-shadow 0.35s ease;
}
.site-header[data-scrolled="true"] {
  padding: 8px 16px;
}
.site-header[data-scrolled="true"] .nav-shell {
  background: rgba(4, 7, 14, 0.85);
  border-color: rgba(255, 255, 255, 0.12);
  box-shadow: 0 20px 44px -28px rgba(0, 0, 0, 0.95);
}

.nav-links {
  display: none;
  align-items: center;
  gap: 4px;
}
@media (min-width: 1024px) {
  .nav-links {
    display: flex;
  }
}

.nav-link,
.nav-trigger {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border-radius: 999px;
  padding: 9px 15px;
  font-family: Poppins, Geist, sans-serif;
  font-size: 14.5px;
  line-height: 1;
  color: rgba(255, 255, 255, 0.82);
  transition:
    color 0.22s ease,
    background-color 0.22s ease;
}
.nav-link:hover,
.nav-trigger:hover,
.nav-item[data-open="true"] .nav-trigger {
  color: #ffffff;
  background: rgba(255, 255, 255, 0.06);
}
.nav-chevron {
  display: grid;
  place-items: center;
  width: 12px;
  height: 12px;
  color: rgba(255, 255, 255, 0.5);
}
.nav-chevron svg {
  width: 10px;
  height: 10px;
}

.nav-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}
.nav-login {
  display: none;
  align-items: center;
  height: 42px;
  padding: 0 20px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  font-family: Poppins, Geist, sans-serif;
  font-weight: 500;
  font-size: 14px;
  color: #ffffff;
  transition:
    background-color 0.22s ease,
    border-color 0.22s ease;
}
.nav-login:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.26);
}
.nav-cta {
  display: none;
  align-items: center;
  gap: 8px;
  height: 42px;
  padding: 0 20px;
  border-radius: 999px;
  font-family: Poppins, Geist, sans-serif;
  font-weight: 600;
  font-size: 14px;
  color: #04140a;
  background: linear-gradient(90deg, #acdc6a, #42e99c);
  box-shadow: 0 14px 30px -16px rgba(195, 251, 48, 0.7);
  transition:
    filter 0.22s ease,
    transform 0.22s ease;
}
.nav-cta svg {
  width: 11px;
  height: 11px;
}
.nav-cta:hover {
  filter: brightness(1.06);
}
.nav-cta:active {
  transform: scale(0.97);
}
@media (min-width: 640px) {
  .nav-login,
  .nav-cta {
    display: inline-flex;
  }
}
.nav-burger {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 999px;
  color: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.12);
  transition: background-color 0.22s ease;
}
.nav-burger:hover {
  background: rgba(255, 255, 255, 0.08);
}

.glass-panel {
  background: rgba(9, 14, 24, 0.6);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.07);
}

/* --------------------------------------------------------------------------
   Gradient-border cards (1px ring drawn with a mask so the fill stays dark)
   -------------------------------------------------------------------------- */
.edge-card {
  position: relative;
  background: #070b12;
  border-radius: 20px;
  transition:
    transform 0.5s cubic-bezier(0.16, 1, 0.3, 1),
    box-shadow 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}
.edge-card::before {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: 21px;
  padding: 1px;
  background: linear-gradient(
    to bottom right,
    rgba(255, 255, 255, 0.1),
    rgba(255, 255, 255, 0.02)
  );
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
  transition: background 0.5s ease;
}
.edge-card:hover {
  transform: translateY(-2px);
}
.edge-card:hover::before {
  background: linear-gradient(135deg, #c3fb30, #31a2ff, #7c3aed);
}

/* Accent variants for the numbered step cards */
.edge-card--purple:hover::before {
  background: linear-gradient(135deg, #7c3aed, #a855f7);
}
.edge-card--blue:hover::before {
  background: linear-gradient(135deg, #2563eb, #31a2ff);
}
.edge-card--green:hover::before {
  background: linear-gradient(135deg, #65c900, #c3fb30);
}

/* --------------------------------------------------------------------------
   Section backdrops
   -------------------------------------------------------------------------- */

/* Comparison panel — flat base plus two corner radial glows (from Figma).
   The purple sits top-right and the blue bottom-left, which is why the table
   below runs its highlight column down the middle: it stays clear of both. */
.compare-panel {
  border: 1px solid rgba(255, 255, 255, 0.09);
  background-color: rgb(12, 16, 26);
  background-image:
    radial-gradient(
      117% 160% at 84% 18%,
      rgba(124, 58, 237, 0.5) 0%,
      rgba(124, 58, 237, 0) 32%
    ),
    radial-gradient(
      109% 149% at 25% 92%,
      rgba(37, 99, 235, 0.35) 0%,
      rgba(37, 99, 235, 0) 30%
    );
}

/* --------------------------------------------------------------------------
   Comparison table (#compare)
   -------------------------------------------------------------------------- */

.cmp-kicker {
  margin: 0;
  text-align: center;
  font-family: "Geist Mono", ui-monospace, monospace;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(195, 251, 48, 0.72);
}

.cmp-table {
  position: relative;
  margin-top: 46px;
}

/* The lime band marking our column — one element behind every row rather than
   a tint repeated per cell, so the highlight stays a single continuous shape.
   It overhangs the rows top and bottom so the column reads as a raised card. */
.cmp-table::before {
  content: "";
  position: absolute;
  top: -14px;
  bottom: -14px;
  left: 28%;
  width: 36%;
  border-radius: 18px;
  /* Deliberately DARKER than the lit panel behind it — a lime wash would go
     muddy over the purple glow, whereas dark glass cuts a clean hole in it. */
  background: linear-gradient(
    180deg,
    rgba(195, 251, 48, 0.13) 0%,
    rgba(7, 10, 17, 0.72) 38%,
    rgba(7, 10, 17, 0.88) 100%
  );
  -webkit-backdrop-filter: blur(7px);
  backdrop-filter: blur(7px);
  border: 1px solid rgba(195, 251, 48, 0.34);
  box-shadow:
    0 26px 70px -30px rgba(195, 251, 48, 0.45),
    0 10px 40px -20px rgba(0, 0, 0, 0.8),
    inset 0 1px 0 rgba(195, 251, 48, 0.24);
  pointer-events: none;
}

.cmp-head,
.cmp-row {
  position: relative;
  display: grid;
  grid-template-columns: 28% 36% 36%;
  align-items: center;
  gap: 0; /* zero gap keeps the % tracks exact so ::before can line up on them */
}

.cmp-head {
  padding: 14px 0;
}

/* Centred over the column, while the cells below stay left-aligned so their
   tick marks keep forming a single vertical rail. */
.cmp-col {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding-inline: 18px;
  font-family: "Geist Mono", ui-monospace, monospace;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #c3fb30;
}

.cmp-col--ours {
  color: #c3fb30;
  font-weight: 600;
  text-shadow: 0 0 18px rgba(195, 251, 48, 0.35);
}

.cmp-col-dot {
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: #c3fb30;
  box-shadow:
    0 0 0 4px rgba(195, 251, 48, 0.18),
    0 0 12px rgba(195, 251, 48, 0.8);
}

/* Dividers sit on the cells, not the row, so the hairline can change colour
   where it crosses the highlighted column instead of cutting through it. */
.cmp-row {
  padding: 0;
}

.cmp-label,
.cmp-cell {
  padding-block: 19px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.cmp-label {
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: #ffffff;
}

.cmp-cell {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding-inline: 18px;
  font-size: 14px;
  line-height: 1.45;
  color: #98a2b6;
}

.cmp-cell--ours {
  color: #ffffff;
  font-weight: 500;
  border-top-color: rgba(195, 251, 48, 0.16);
}

.cmp-mark {
  flex: none;
  box-sizing: border-box;
  width: 20px;
  height: 20px;
  padding: 2px;
  border-radius: 999px;
  background: rgba(195, 251, 48, 0.16);
  fill: none;
  stroke: #c3fb30;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.cmp-mark--none {
  background: none;
  stroke: #5b6474;
  stroke-width: 1.6;
}

/* Below md the three columns become a stacked block per row: the label on top,
   then the two answers tagged by a left rule instead of a column header. */
@media (max-width: 767px) {
  .cmp-table {
    margin-top: 34px;
  }
  .cmp-table::before {
    display: none;
  }
  .cmp-head {
    display: none;
  }

  /* Stacked, so the divider goes back on the row and the cells lose theirs. */
  .cmp-row {
    display: block;
    padding: 18px 0;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
  }

  .cmp-label,
  .cmp-cell {
    padding-block: 0;
    border-top: 0;
  }

  .cmp-label {
    display: block;
    margin-bottom: 11px;
    font-size: 14px;
  }

  .cmp-cell {
    padding: 9px 12px 9px 13px;
    border-left: 2px solid rgba(255, 255, 255, 0.14);
    font-size: 13.5px;
  }

  .cmp-cell--ours {
    border-left-color: #c3fb30;
    background: linear-gradient(
      90deg,
      rgba(195, 251, 48, 0.13),
      rgba(7, 10, 17, 0.6)
    );
    border-radius: 0 10px 10px 0;
    box-shadow: 0 10px 26px -18px rgba(195, 251, 48, 0.7);
  }
}

.lime-panel {
  box-shadow: 0 31px 63px -15px rgba(0, 0, 0, 0.25);
}

/* Tool pills on the lime panel, running as three marquee rows. Each row holds
   its set twice and travels exactly half its width, so the loop is seamless
   whatever the labels are — no measuring, no JS. */
.lime-marquee {
  display: flex;
  flex-direction: column;
  gap: 12px;
  overflow: hidden;
  /* Faded ends, so pills enter and leave rather than popping at a hard edge */
  -webkit-mask-image: linear-gradient(
    90deg,
    transparent 0,
    #000 9%,
    #000 91%,
    transparent 100%
  );
  mask-image: linear-gradient(
    90deg,
    transparent 0,
    #000 9%,
    #000 91%,
    transparent 100%
  );
}
.lime-row {
  display: flex;
  flex: none;
  gap: 10px;
  width: max-content;
  margin: 0;
  padding: 0;
  list-style: none;
  animation: limeMarquee 26s linear infinite;
}
.lime-row--rev {
  animation-direction: reverse;
}
.lime-marquee:hover .lime-row {
  animation-play-state: paused;
}

@keyframes limeMarquee {
  to {
    transform: translateX(-50%);
  }
}

.lime-pill {
  flex: none;
  border-radius: 999px;
  border: 1px solid rgba(0, 0, 0, 0.1);
  background: rgba(0, 0, 0, 0.05);
  padding: 10px 24px;
  font-family: Poppins, Geist, sans-serif;
  font-size: 15px;
  white-space: nowrap;
  color: #1f2937;
}

@media (prefers-reduced-motion: reduce) {
  .lime-marquee {
    -webkit-mask-image: none;
    mask-image: none;
  }
  .lime-row {
    flex-wrap: wrap;
    width: auto;
    animation: none;
  }
  /* Static fallback shows each label once */
  .lime-pill[aria-hidden="true"] {
    display: none;
  }
}

/* Soft ambient glow blobs behind sections */
.glow-blob {
  position: absolute;
  border-radius: 9999px;
  filter: blur(130px);
  pointer-events: none;
}

/* --------------------------------------------------------------------------
   Keyframe animations
   -------------------------------------------------------------------------- */
@keyframes drift-1 {
  0% {
    transform: translate(0, 0) scale(1);
  }
  33% {
    transform: translate(40px, -60px) scale(1.15);
  }
  66% {
    transform: translate(-30px, 30px) scale(0.9);
  }
  100% {
    transform: translate(0, 0) scale(1);
  }
}
@keyframes drift-2 {
  0% {
    transform: translate(0, 0) scale(1.1);
  }
  50% {
    transform: translate(-50px, 50px) scale(0.9);
  }
  100% {
    transform: translate(0, 0) scale(1.1);
  }
}

.animate-drift-1 {
  animation: drift-1 18s infinite alternate ease-in-out;
}
.animate-drift-2 {
  animation: drift-2 22s infinite alternate ease-in-out;
}

/* Pulsing dot used on the "Auto-Triggered / Always-On" pill */
@keyframes pulse-dot {
  0%,
  100% {
    opacity: 1;
    transform: scale(1);
  }
  50% {
    opacity: 0.45;
    transform: scale(0.82);
  }
}
.animate-pulse-dot {
  animation: pulse-dot 2s infinite ease-in-out;
}

/* Travelling glow along the connector path in the Explore section */
@keyframes trace {
  0% {
    stroke-dashoffset: 420;
  }
  100% {
    stroke-dashoffset: 0;
  }
}
.animate-trace {
  stroke-dasharray: 140 280;
  animation: trace 6s infinite linear;
}

/* --------------------------------------------------------------------------
   Scroll reveal
   -------------------------------------------------------------------------- */
/* --------------------------------------------------------------------------
   Scroll reveal
   Titles reveal word-by-word (left to right); blocks rise and fade as they
   enter the viewport. Driven by an animation rather than a transition so
   element hover transitions stay intact, and uses the `translate` property so
   it composes with any `transform` already on the element. Gated on html.rv,
   set in <head>, so nothing flashes before first paint.
   -------------------------------------------------------------------------- */
@keyframes rvUp {
  from {
    opacity: 0;
    translate: 0 28px;
  }
  to {
    opacity: 1;
    translate: 0 0;
  }
}

@keyframes rvWordIn {
  from {
    opacity: 0;
    translate: 0 0.5em;
  }
  to {
    opacity: 1;
    translate: 0 0;
  }
}

/* ---- Word-by-word titles ---- */
/* color:inherit so existing accent spans keep painting their own words */
html.rv .rv-word {
  display: inline-block;
  color: inherit;
  opacity: 0;
  translate: 0 0.45em;
  will-change: opacity, translate;
}
html.rv .is-inview .rv-word {
  animation: rvWordIn 0.5s cubic-bezier(0.22, 0.61, 0.36, 1) both;
  animation-delay: var(--wd, 0ms);
}

/* The hero is on screen at first paint, so give it a beat before it plays */
html.rv #home .rv-word {
  animation-delay: calc(var(--wd, 0ms) + 120ms) !important;
}
html.rv #home .reveal-item.is-inview {
  animation-delay: calc(var(--sd, 0ms) + 380ms) !important;
}

/* ---- Blocks: rise + fade ---- */
html.rv :is(.reveal-item, .stagger > *):not(.is-inview) {
  opacity: 0;
  translate: 0 28px;
}
html.rv :is(.reveal-item, .stagger > *).is-inview {
  animation: rvUp 0.7s cubic-bezier(0.22, 0.61, 0.36, 1) both;
}

@media (prefers-reduced-motion: reduce) {
  html.rv .rv-word,
  html.rv :is(.reveal-item, .stagger > *) {
    opacity: 1 !important;
    translate: none !important;
    animation: none !important;
  }
}

/* --------------------------------------------------------------------------
   #agencyOsReveal — copied from rankyfy.com
   Every rule below is their stylesheet verbatim except for the colours, the
   fonts and the background, which are ours. Geometry, spacing, breakpoints and
   the properties GSAP animates are untouched: the timeline in script.js sets
   values that assume exactly these boxes. Source:
   ~/Downloads/rankyfy-agency-os-section.html
   -------------------------------------------------------------------------- */
.agency-os-reveal {
  position: relative;
  overflow: clip;
  isolation: isolate;
  background:
    radial-gradient(
      circle at 22% 22%,
      rgba(195, 251, 48, 0.07),
      transparent 28%
    ),
    radial-gradient(
      circle at 78% 18%,
      rgba(124, 58, 237, 0.1),
      transparent 26%
    ),
    #000107;
}

.agency-os-stage {
  position: relative;
  min-height: 100svh;
}

.agency-os-copy {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
  padding: 120px 20px 78px;
  text-align: center;
  pointer-events: none;
}

.agency-os-kicker {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 34px;
  padding: 0 16px;
  border-radius: 999px;
  background: rgba(195, 251, 48, 0.08);
  border: 1px solid rgba(195, 251, 48, 0.22);
  box-shadow: 0 12px 30px rgba(195, 251, 48, 0.06);
  color: #c3fb30;
  font-family: "Geist Mono", ui-monospace, monospace;
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.agency-os-headline {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: center;
  gap: 0.06em;
  width: min(1120px, 90vw);
  margin: 0;
  color: #ffffff;
  font-family: Archivo, Geist, sans-serif;
  font-size: clamp(2.6rem, 7.5vw, 7rem);
  font-weight: 900;
  line-height: 0.88;
  letter-spacing: -0.06em;
  will-change: transform, opacity, filter;
}

/* CREATE . CHAT . GENERATE . rides on one unbreakable row; its own clamp keeps
   that row inside the headline width instead of inheriting the huge accent size. */
.agency-os-line {
  display: flex;
  flex-wrap: nowrap;
  align-items: baseline;
  justify-content: center;
  gap: 0.22em;
  white-space: nowrap;
  font-size: clamp(1.15rem, 4.6vw, 3.6rem);
}

.agency-os-word {
  display: inline-block;
  opacity: 0;
  will-change: transform, opacity, filter;
}
.agency-os-word.accent {
  color: #c3fb30;
}

.agency-os-sub {
  max-width: 680px;
  margin: 0;
  color: #98a2b3;
  font-size: 1rem;
  line-height: 1.65;
  opacity: 0;
  will-change: transform, opacity;
}

.agency-os-panel-wrap {
  position: relative;
  z-index: 2;
  will-change: transform;
}

.agency-os-panel {
  position: relative;
  overflow: hidden;
  transform-origin: center top;
  will-change: transform, opacity;
}

.agency-os-panel.spacer-xl {
  padding-block: 130px 84px;
}

.agency-os-panel .container {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 1152px;
  margin-inline: auto;
  padding-inline: 1rem;
}

.agency-os-intro {
  max-width: 780px;
  margin: 0 auto 42px;
  text-align: center;
}

.agency-os-label {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 32px;
  padding: 0 14px;
  margin-bottom: 16px;
  border-radius: 999px;
  background: rgba(195, 251, 48, 0.09);
  color: #c3fb30;
  font-family: "Geist Mono", ui-monospace, monospace;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.agency-os-title {
  margin: 0 0 14px;
  color: #ffffff;
  font-family: Archivo, Geist, sans-serif;
  font-size: clamp(2rem, 4vw, 4rem);
  font-weight: 800;
  line-height: 0.98;
  letter-spacing: -0.05em;
}

.agency-os-intro p {
  margin: 0;
  color: #98a2b3;
  font-size: 1rem;
  line-height: 1.7;
}

.agency-os-groups {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px;
}

/* If the GSAP CDN fails, JS flags the section and everything shows outright —
   the initial states above would otherwise leave it blank. */
.agency-os-reveal.no-gsap .agency-os-stage {
  min-height: auto;
}
.agency-os-reveal.no-gsap
  :is(.agency-os-word, .agency-os-sub, .agency-os-label, .agency-os-group) {
  opacity: 1;
  transform: none;
}
.agency-os-reveal.no-gsap .agency-os-copy {
  position: relative;
}

@media (max-width: 1199px) {
  .agency-os-panel-wrap {
    margin-top: -8svh;
  }
  .agency-os-panel.spacer-xl {
    padding-block: 116px 72px;
  }
}

@media (max-width: 991px) {
  .agency-os-headline {
    width: min(92vw, 760px);
    font-size: clamp(2.4rem, 10vw, 5rem);
  }
  .agency-os-panel-wrap {
    margin-top: -5svh;
    padding-bottom: 72px;
  }
  .agency-os-panel.spacer-xl {
    padding-block: 108px 60px;
  }
  .agency-os-groups {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 767px) {
  .agency-os-stage {
    min-height: auto;
  }
  .agency-os-copy {
    position: relative;
    min-height: auto;
    padding: 64px 14px 48px;
  }
  .agency-os-headline {
    width: min(92vw, 360px);
    gap: 0.12em;
    font-size: clamp(2.7rem, 16vw, 4rem);
    line-height: 0.92;
  }
  .agency-os-line {
    gap: 0.16em;
    font-size: clamp(0.85rem, 4.7vw, 1.5rem);
  }
  .agency-os-sub {
    font-size: 0.94rem;
  }
  .agency-os-panel-wrap {
    margin-top: 0;
    padding-bottom: 34px;
  }
  .agency-os-panel {
    border-radius: 28px;
    opacity: 1;
    transform: none;
  }
  .agency-os-panel.spacer-xl {
    padding-block: 34px;
  }
  .agency-os-intro {
    margin-bottom: 26px;
    text-align: left;
  }
  .agency-os-title {
    font-size: clamp(1.78rem, 8vw, 2.3rem);
    line-height: 1.04;
  }
}

/* --------------------------------------------------------------------------
   Brand / stats cards
   The card design used inside the #agencyOsReveal panel.
   -------------------------------------------------------------------------- */
.os-group {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 22px;
  border-radius: 18px;
  padding: 20px;
  background: #131417;
  border: 1px solid rgba(255, 255, 255, 0.05);
}
.os-group[data-accent="lime"] {
  --os-accent: #c3fb30;
}
.os-group[data-accent="blue"] {
  --os-accent: #31a2ff;
}
.os-group[data-accent="emerald"] {
  --os-accent: #34d399;
}
.os-group[data-accent="amber"] {
  --os-accent: #fbbf24;
}

.os-icon {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 16px;
  color: var(--os-accent);
  background: color-mix(in srgb, var(--os-accent) 13%, transparent);
}
.os-icon svg {
  width: 22px;
  height: 22px;
}

.os-stat {
  font-family: Poppins, sans-serif;
  font-weight: 700;
  color: #fff;
  font-size: 2rem;
  line-height: 1;
  letter-spacing: -0.035em;
}
.os-stat-label {
  margin-top: 6px;
  font-size: 0.9rem;
  line-height: 1.4;
  color: #9a9aa5;
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}

@media (max-width: 1024px) {
  .stats-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 640px) {
  .stats-grid {
    grid-template-columns: 1fr;
  }
}

/* --------------------------------------------------------------------------
   Pinned horizontal-scroll stage (#tools)
   The section is made tall by JS; .wf-stage sticks to the top while
   .wf-track is translated sideways in proportion to scroll progress.
   -------------------------------------------------------------------------- */

/* --------------------------------------------------------------------------
   Dashboard video
   -------------------------------------------------------------------------- */
.video-frame {
  position: relative;
  margin: 0;
  border-radius: 24px;
  overflow: hidden;
  background: #070b12;
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 40px 90px -50px rgba(0, 0, 0, 0.95);
}
.video-el {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

.video-toggle {
  position: absolute;
  left: 50%;
  bottom: 22px;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border-radius: 9999px;
  color: #fff;
  background: rgba(0, 3, 10, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.18);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  transition:
    background 0.3s ease,
    transform 0.3s ease,
    border-color 0.3s ease;
}
.video-toggle:hover {
  background: rgba(0, 3, 10, 0.82);
  border-color: rgba(255, 255, 255, 0.32);
  transform: translateX(-50%) scale(1.06);
}
.video-toggle:focus-visible {
  outline: 2px solid #c3fb30;
  outline-offset: 3px;
}
.video-toggle svg {
  width: 17px;
  height: 17px;
}

.wf-stage {
  position: sticky;
  top: 0;
  height: 100svh;
  min-height: 640px;
  overflow: hidden;
  display: flex;
  align-items: center;
}

.wf-header {
  position: absolute;
  top: clamp(84px, 11vh, 130px);
  left: 0;
  right: 0;
  z-index: 20;
  padding: 0 1rem;
  pointer-events: none;
}
.wf-header .wf-dots {
  pointer-events: auto;
}

.wf-track {
  display: flex;
  align-items: center;
  gap: clamp(90px, 9vw, 170px);
  /* symmetric, so the last beat lands centred at full progress just as the
     first one is at zero */
  padding-left: clamp(1rem, 12vw, 190px);
  padding-right: clamp(1rem, 12vw, 190px);
  will-change: transform;
  position: relative;
}

/* Connector curve, sized to the track by JS */
.wf-curve {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  overflow: visible;
  pointer-events: none;
  z-index: 0;
}
/* Each .wf-seg is dashed against its own length in JS — a single concatenated
   path will not work, because SVG restarts the dash pattern per subpath. */
.wf-seg {
  /* no transition: the dash offset is driven every frame by the damped
     scroll loop, and a CSS transition on top of that fights it */
  will-change: stroke-dashoffset;
}

/* Connector nodes: a stroked outer ring over a filled core, matching the
   reference. Two per segment, dim until the flow reaches them. */
.wf-node-ring {
  stroke-width: 1.6;
  opacity: 0.16;
  transition: opacity 0.45s ease;
}
.wf-node-core {
  opacity: 0.2;
  transition: opacity 0.45s ease;
}
.wf-node.is-lit .wf-node-ring {
  opacity: 0.6;
}
.wf-node.is-lit .wf-node-core {
  opacity: 1;
}

#wf-marker {
  transition: opacity 0.4s ease;
  pointer-events: none;
}

.wf-beat {
  position: relative;
  z-index: 1;
  flex: none;
  display: flex;
  align-items: flex-start;
  gap: clamp(60px, 7vw, 130px);
  width: min(1080px, 86vw);
  transform: scale(0.98);
  opacity: 0.3;
  filter: saturate(0.6);
  transition:
    opacity 0.55s cubic-bezier(0.25, 1, 0.5, 1),
    transform 0.55s cubic-bezier(0.25, 1, 0.5, 1),
    filter 0.55s cubic-bezier(0.25, 1, 0.5, 1);
}
.wf-beat.is-active {
  opacity: 1;
  filter: saturate(1);
  transform: scale(1);
}

.wf-copy {
  width: min(600px, 54vw);
  flex: none;
}
.wf-aside {
  width: 290px;
  flex: none;
  margin-top: 34px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
}

/* Per-beat accent, consumed by the badge / pill / card below */
.wf-beat[data-accent="lime"] {
  --wf-accent: #c3fb30;
}
.wf-beat[data-accent="purple"] {
  --wf-accent: #a855f7;
}
.wf-beat[data-accent="blue"] {
  --wf-accent: #31a2ff;
}
.wf-beat[data-accent="emerald"] {
  --wf-accent: #34d399;
}
.wf-beat[data-accent="amber"] {
  --wf-accent: #fbbf24;
}

.wf-badge {
  display: inline-block;
  font-family: "Geist Mono", ui-monospace, monospace;
  font-size: 12px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--wf-accent);
  margin-bottom: 20px;
}

.wf-title {
  font-family: Archivo, Geist, sans-serif;
  font-weight: 800;
  color: #fff;
  font-size: clamp(2.6rem, 5.4vw, 4.7rem);
  line-height: 1.12;
  letter-spacing: -0.035em;
}
.wf-pill {
  display: inline-block;
  color: var(--wf-accent);
  border: 1px solid color-mix(in srgb, var(--wf-accent) 42%, transparent);
  background: color-mix(in srgb, var(--wf-accent) 11%, transparent);
  border-radius: 26px;
  padding: 0.06em 0.3em;
  margin-bottom: 0.12em;
}

.wf-desc {
  margin-top: 26px;
  max-width: 33rem;
  color: #a3a3a3;
  font-size: 16px;
  line-height: 1.7;
}

/* Right-hand cluster: status chip stacked above the event card */
.wf-chip {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  border-radius: 9999px;
  padding: 8px 15px;
  font-size: 12.5px;
  white-space: nowrap;
  color: #e5e5e5;
  background: rgba(9, 14, 24, 0.72);
  border: 1px solid rgba(255, 255, 255, 0.09);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
.wf-chip-dot {
  width: 6px;
  height: 6px;
  flex: none;
  border-radius: 9999px;
  background: var(--wf-accent);
  animation: pulse-dot 2s infinite ease-in-out;
}

.wf-card {
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  padding: 16px 20px 16px 16px;
  border-radius: 20px;
  background: #080d16;
  border: 1px solid rgba(255, 255, 255, 0.09);
  box-shadow: 0 26px 50px -28px rgba(0, 0, 0, 0.95);
}
/* Ghost card stacked behind, as in the reference */
.wf-card::before {
  content: "";
  position: absolute;
  inset: 14px -14px -14px 14px;
  border-radius: 20px;
  background: rgba(9, 14, 24, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.05);
  z-index: -1;
}
.wf-card-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  flex: none;
  border-radius: 14px;
  color: var(--wf-accent);
  background: color-mix(in srgb, var(--wf-accent) 16%, transparent);
  border: 1px solid color-mix(in srgb, var(--wf-accent) 28%, transparent);
}
.wf-card-icon svg {
  width: 21px;
  height: 21px;
}
.wf-card-body {
  min-width: 0;
}
.wf-card-kicker {
  font-family: "Geist Mono", ui-monospace, monospace;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--wf-accent);
}
.wf-card-title {
  font-weight: 700;
  color: #fff;
  font-size: 15.5px;
  margin-top: 2px;
  white-space: nowrap;
}
.wf-card-meta {
  font-size: 12px;
  color: #6b7280;
  margin-top: 3px;
  white-space: nowrap;
}

/* Step dots */
.wf-dots {
  display: flex;
  align-items: center;
  gap: 10px;
  list-style: none;
}
.wf-dot {
  width: 30px;
  height: 4px;
  border-radius: 9999px;
  background: rgba(255, 255, 255, 0.16);
  transition:
    background 0.4s ease,
    width 0.4s ease;
}
.wf-dot.is-active {
  width: 52px;
  background: #c3fb30;
}

.wf-hint {
  position: absolute;
  bottom: 34px;
  left: 50%;
  transform: translateX(-50%);
  font-family: "Geist Mono", ui-monospace, monospace;
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.28);
  z-index: 20;
}

/* Fallback: no pinning under lg — the track becomes a snap carousel */
@media (max-width: 1023px) {
  .wf-section {
    height: auto !important;
  }
  .wf-stage {
    /* relative, not static — the glow blobs are absolutely positioned and
       must stay clipped by this box's overflow:hidden */
    position: relative;
    height: auto;
    padding: 96px 0 72px;
    display: block;
  }
  .wf-header {
    position: static;
    padding: 0 1rem 40px;
  }
  .wf-track {
    transform: none !important;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    padding-inline: 1rem;
    gap: 20px;
    scrollbar-width: none;
  }
  .wf-track::-webkit-scrollbar {
    display: none;
  }
  .wf-beat {
    width: 84vw;
    opacity: 1;
    filter: none;
    transform: none !important;
    scroll-snap-align: center;
    /* the two-column desktop layout would overflow a narrow slide */
    flex-direction: column;
    gap: 26px;
  }
  .wf-copy {
    width: 100%;
  }
  .wf-aside {
    width: 100%;
    margin-top: 0;
  }
  .wf-card-title,
  .wf-card-meta {
    white-space: normal;
  }
  .wf-curve {
    display: none;
  }
  .wf-hint {
    position: static;
    transform: none;
    text-align: center;
    margin-top: 28px;
  }
}

/* --------------------------------------------------------------------------
   Nav dropdowns — closed is the default; JS flips [data-open] on .nav-item
   -------------------------------------------------------------------------- */
.nav-item {
  position: relative;
}

/* Mega panel — centred under its trigger, so the x-translate has to live in
   the same transform the open/close animation uses. */
.nav-panel {
  position: absolute;
  top: 100%;
  left: 50%;
  padding-top: 14px;
  opacity: 0;
  visibility: hidden;
  transform: translate(-50%, -8px);
  transition:
    opacity 0.24s ease,
    transform 0.24s cubic-bezier(0.16, 1, 0.3, 1),
    visibility 0.24s;
}
.nav-item[data-open="true"] .nav-panel {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 0);
}
.nav-item[data-open="true"] .nav-chevron {
  transform: rotate(180deg);
}
.nav-chevron {
  transition: transform 0.22s ease;
}

.nav-mega {
  width: min(680px, calc(100vw - 40px));
  padding: 14px;
  border-radius: 24px;
  border: 1px solid rgba(255, 255, 255, 0.09);
  background:
    radial-gradient(
      80% 60% at 50% 0%,
      rgba(195, 251, 48, 0.07) 0%,
      transparent 60%
    ),
    rgba(8, 12, 20, 0.92);
  -webkit-backdrop-filter: blur(22px);
  backdrop-filter: blur(22px);
  box-shadow: 0 34px 70px -34px rgba(0, 0, 0, 0.95);
}
.nav-mega-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 4px;
}

.nav-mega-item {
  --nav-accent: #c3fb30;
  display: flex;
  align-items: center;
  gap: 12px;
  border-radius: 16px;
  padding: 11px 12px;
  transition: background-color 0.22s ease;
}
.nav-mega-item:hover {
  background: rgba(255, 255, 255, 0.05);
}
.nav-ico {
  display: grid;
  place-items: center;
  flex: none;
  width: 38px;
  height: 38px;
  border-radius: 12px;
  color: var(--nav-accent);
  background: color-mix(in srgb, var(--nav-accent) 13%, transparent);
  border: 1px solid color-mix(in srgb, var(--nav-accent) 26%, transparent);
  transition: background-color 0.22s ease;
}
.nav-ico svg {
  width: 18px;
  height: 18px;
}
.nav-mega-item:hover .nav-ico {
  background: color-mix(in srgb, var(--nav-accent) 22%, transparent);
}
.nav-mega-title {
  display: block;
  font-size: 14px;
  font-weight: 500;
  color: #ffffff;
}
.nav-mega-desc {
  display: block;
  margin-top: 2px;
  font-size: 12.5px;
  line-height: 1.35;
  color: #8b8d96;
}

.nav-mega-foot {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  margin-top: 10px;
  padding: 12px;
  border-radius: 16px;
  font-family: "Geist Mono", ui-monospace, monospace;
  font-size: 11.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(195, 251, 48, 0.85);
  background: rgba(195, 251, 48, 0.07);
  border: 1px solid rgba(195, 251, 48, 0.16);
  transition:
    background-color 0.22s ease,
    color 0.22s ease;
}
.nav-mega-foot svg {
  width: 11px;
  height: 11px;
}
.nav-mega-foot:hover {
  color: #c3fb30;
  background: rgba(195, 251, 48, 0.12);
}

/* --------------------------------------------------------------------------
   Showcase grid image zoom
   -------------------------------------------------------------------------- */
/* The #why band carries its own backdrop: a violet bloom hugging the top edge
   over deep navy. Fitted to the design's own profile — sampled down the centre
   and both edges, it peaks at rgb(38,26,87) around 3% into the section and is
   back to the rgb(4,11,29) base by 25%, which works out to accentPurple at
   0.30 alpha falling off over roughly a quarter of the section's height. */
#why {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(
      110% 26% at 50% 0%,
      rgba(124, 58, 237, 0.3) 0%,
      rgba(124, 58, 237, 0.1) 45%,
      rgba(124, 58, 237, 0) 100%
    ),
    #040b1d;
}

/* Feature cards (#why — Figma 3322:1627)
   368 x 348 cards on a 3 x 2 grid: flat #0c101a with a blue radial glow rising
   from the bottom-left corner, 21px radius, 1px hairline, raster icon above a
   Poppins 26/35 title and a 20/30 body. */
.showcase-rule {
  height: 1px;
  margin-bottom: 36.4px;
  background: rgba(255, 255, 255, 0.1);
}

.showcase-head {
  display: flex;
  flex-direction: column;
  gap: 32px;
}
@media (min-width: 1024px) {
  .showcase-head {
    flex-direction: row;
    /* The note sits on the headline's vertical centre in the design, not its
       baseline: its box centre lands at 153px of the 306px title block. */
    align-items: center;
    gap: 18px;
  }
}

.why-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: clamp(20px, 2.2vw, 32px);
  padding: clamp(28px, 2.8vw, 40px) clamp(26px, 3.6vw, 52px)
    clamp(32px, 3.4vw, 48px);
  border-radius: 21px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background:
    radial-gradient(
      25% 60% at 25% 92%,
      rgba(37, 99, 235, 0.35) 0%,
      rgba(37, 99, 235, 0) 100%
    ),
    #0c101a;
  transition:
    border-color 0.4s ease,
    transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}
.why-card:hover {
  border-color: rgba(255, 255, 255, 0.28);
  transform: translateY(-3px);
}

.why-icon {
  display: block;
  flex: none;
  width: 62px;
  height: 62px;
}
.why-icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
/* The lightning icon ships without an alpha channel, so it is clipped to a
   circle rather than letting its white plate show. The other five are drawn
   with transparent padding inside their canvas; this one fills it edge to
   edge, so it needs insetting to read at the same size. */
.why-icon--round {
  display: grid;
  place-items: center;
}
.why-icon--round img {
  width: 86%;
  height: 86%;
  border-radius: 999px;
  object-fit: cover;
}

.why-copy {
  display: flex;
  flex-direction: column;
  gap: clamp(14px, 1.6vw, 22px);
}
.why-copy h3 {
  font-family: Poppins, sans-serif;
  font-weight: 600;
  font-size: clamp(20px, 1.9vw, 26px);
  line-height: 1.346;
  color: #ffffff;
}
.why-copy p {
  font-family: Poppins, sans-serif;
  font-weight: 400;
  font-size: clamp(15px, 1.45vw, 20px);
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.72);
}

.showcase-figure img {
  transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}
.showcase-figure:hover img {
  transform: scale(1.04);
}

/* --------------------------------------------------------------------------
   Footer
   Structure copied from the iApp marketing template (ticker → centred CTA →
   offices → link grid → legal bar) and recoloured for this site: the template's
   white-on-violet becomes our dark panel with the lime CTA gradient.
   -------------------------------------------------------------------------- */
.site-footer {
  --ft-accent: #c3fb30;
  --ft-grad: linear-gradient(90deg, #acdc6a, #42e99c);
  --ft-line: rgba(255, 255, 255, 0.08);
  --ft-ink: #ffffff;
  --ft-muted: #8b8d96;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: #000611;
  color: var(--ft-muted);
  font-size: 14px;
  text-align: center;
  border-top: 1px solid var(--ft-line);
}
.ft-container {
  width: 100%;
  max-width: 1240px;
  margin: 0 auto;
  padding-inline: clamp(16px, 4vw, 40px);
}
.ft-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* soft tint behind the closing CTA */
.ft-aura {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(
      58% 42% at 50% 6%,
      rgba(195, 251, 48, 0.07) 0%,
      transparent 72%
    ),
    radial-gradient(
      80% 46% at 50% 98%,
      rgba(0, 104, 52, 0.18) 0%,
      transparent 74%
    );
}

/* ===== tool ticker ===== */
.ft-ticker {
  position: relative;
  display: flex;
  overflow: hidden;
  border-bottom: 1px solid var(--ft-line);
  background: rgba(255, 255, 255, 0.02);
  -webkit-mask-image: linear-gradient(
    90deg,
    transparent,
    #000 8%,
    #000 92%,
    transparent
  );
  mask-image: linear-gradient(
    90deg,
    transparent,
    #000 8%,
    #000 92%,
    transparent
  );
}
.ft-ticker-track {
  display: flex;
  flex: none;
  animation: ft-marquee 38s linear infinite;
}
.ft-ticker:hover .ft-ticker-track {
  animation-play-state: paused;
}
.ft-ticker-run {
  display: flex;
  flex: none;
  align-items: center;
  margin: 0;
  padding: 0;
  list-style: none;
}
.ft-ticker-run li {
  display: flex;
  align-items: center;
  gap: 34px;
  padding-inline: 17px;
  padding-block: 13px;
  font-family: Poppins, Geist, sans-serif;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--ft-muted);
  white-space: nowrap;
}
/* diamond separator between items */
.ft-ticker-run li::after {
  content: "";
  width: 5px;
  height: 5px;
  flex: none;
  transform: rotate(45deg);
  background: var(--ft-accent);
}

@keyframes ft-marquee {
  to {
    transform: translateX(-50%);
  }
}

/* ===== centred CTA ===== */
.ft-hero {
  position: relative;
  padding-block: clamp(52px, 6vw, 96px);
  border-bottom: 1px solid var(--ft-line);
}
/* oversized wordmark sitting behind the CTA as a watermark */
.ft-wordmark {
  position: absolute;
  inset-inline: 0;
  top: 50%;
  z-index: -1;
  margin: 0;
  transform: translateY(-50%);
  font-family: Archivo, Geist, sans-serif;
  font-size: clamp(140px, 30vw, 460px);
  font-weight: 900;
  line-height: 1;
  letter-spacing: -0.06em;
  color: transparent;
  -webkit-text-stroke: 1px rgba(255, 255, 255, 0.05);
  user-select: none;
  pointer-events: none;
}
.ft-hero-inner {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.ft-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  margin: 0 0 18px;
  font-family: "Geist Mono", ui-monospace, monospace;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ft-accent);
}
.ft-eyebrow::before,
.ft-eyebrow::after {
  content: "";
  width: 28px;
  height: 1px;
  background: currentColor;
  opacity: 0.55;
}
.ft-cta-title {
  max-width: 22ch;
  margin: 0 0 18px;
  font-family: Poppins, Geist, sans-serif;
  font-size: clamp(32px, 5vw, 62px);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.03em;
  color: var(--ft-ink);
}
.ft-cta-title em {
  font-style: italic;
  background: var(--ft-grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.ft-cta-sub {
  max-width: 54ch;
  margin: 0 auto 30px;
  font-size: 15.5px;
  line-height: 1.65;
}
.ft-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 8px 8px 26px;
  border-radius: 999px;
  background: var(--ft-grad);
  color: #04140a;
  font-family: Poppins, Geist, sans-serif;
  font-weight: 600;
  font-size: 15px;
  transition:
    transform 0.25s ease,
    box-shadow 0.25s ease;
}
.ft-btn-icon {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 999px;
  background: #04140a;
  color: #ffffff;
}
.ft-btn-icon svg {
  width: 13px;
  height: 13px;
}
.ft-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 20px 40px -20px rgba(66, 233, 156, 0.65);
}

/* quick contact row */
.ft-quick {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 12px 26px;
  margin: 32px 0 0;
  padding: 0;
  list-style: none;
  font-size: 13.5px;
}
.ft-quick li {
  display: flex;
  align-items: center;
  gap: 26px;
}
.ft-quick li:not(:last-child)::after {
  content: "";
  width: 1px;
  height: 14px;
  background: var(--ft-line);
}
.ft-quick a {
  color: var(--ft-ink);
  font-weight: 500;
  transition: color 0.26s ease;
}
.ft-quick a:hover {
  color: var(--ft-accent);
}

/* ===== registered offices ===== */
.ft-offices {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(16px, 1.8vw, 26px);
  padding-top: clamp(34px, 4vw, 58px);
}
.ft-office {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 28px 24px 26px;
  border: 1px solid var(--ft-line);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.02);
  transition:
    border-color 0.3s ease,
    background-color 0.3s ease,
    transform 0.3s ease;
}
.ft-office:hover {
  border-color: rgba(195, 251, 48, 0.28);
  background: rgba(255, 255, 255, 0.04);
  transform: translateY(-4px);
}
.ft-flag {
  display: block;
  width: 44px;
  height: 30px;
  border-radius: 5px;
  overflow: hidden;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.14);
}
.ft-flag svg {
  display: block;
  width: 100%;
  height: 100%;
}
.ft-office h3 {
  margin: 4px 0 0;
  font-family: Poppins, Geist, sans-serif;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--ft-ink);
}
.ft-office-addr {
  margin: 0;
  font-size: 14px;
  line-height: 1.6;
  color: var(--ft-muted);
}
.ft-office-tel {
  margin-top: auto;
  padding-top: 2px;
  color: var(--ft-ink);
  font-weight: 500;
  font-size: 14px;
  transition: color 0.26s ease;
}
.ft-office-tel:hover {
  color: var(--ft-accent);
}

/* ===== link grid ===== */
.ft-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr)) minmax(300px, 1.2fr);
  gap: clamp(28px, 3vw, 52px);
  padding-block: clamp(40px, 4.5vw, 68px);
  text-align: left;
}
.ft-col h3 {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 18px;
  font-family: Poppins, Geist, sans-serif;
  font-size: 15px;
  font-weight: 600;
  color: var(--ft-ink);
}
/* short accent rule standing in for the dash in the reference layout */
.ft-col h3::before {
  content: "";
  flex: none;
  width: 16px;
  height: 2px;
  border-radius: 2px;
  background: var(--ft-grad);
}
.ft-col ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
.ft-col li {
  margin-bottom: 13px;
  font-size: 14px;
}
.ft-col a {
  position: relative;
  display: inline-block;
  color: var(--ft-muted);
  transition:
    color 0.28s ease,
    transform 0.28s ease;
}
.ft-col a::before {
  content: "";
  position: absolute;
  left: -14px;
  top: 50%;
  width: 8px;
  height: 1px;
  background: var(--ft-accent);
  opacity: 0;
  transform: translateX(-4px);
  transition:
    opacity 0.28s ease,
    transform 0.28s ease;
}
.ft-col a:hover,
.ft-col a:focus-visible {
  color: var(--ft-accent);
  transform: translateX(6px);
}
.ft-col a:hover::before,
.ft-col a:focus-visible::before {
  opacity: 1;
  transform: translateX(0);
}

/* ===== newsletter ===== */
.ft-news {
  padding-left: clamp(22px, 2.6vw, 44px);
  border-left: 1px solid var(--ft-line);
}
.ft-news h3::before {
  display: none;
}
.ft-news-lede {
  margin: 0 0 18px;
  max-width: 34ch;
  font-size: 14px;
  line-height: 1.6;
}
.ft-subscribe {
  position: relative;
  max-width: 340px;
}
.ft-subscribe input {
  width: 100%;
  font-family: Geist, system-ui, sans-serif;
  font-size: 14px;
  color: var(--ft-ink);
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--ft-line);
  border-radius: 12px;
  padding: 15px 124px 15px 16px;
  transition:
    border-color 0.28s ease,
    background-color 0.28s ease;
}
.ft-subscribe input::placeholder {
  color: #63656e;
}
.ft-subscribe input:hover {
  border-color: rgba(255, 255, 255, 0.16);
}
.ft-subscribe input:focus {
  outline: none;
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(195, 251, 48, 0.55);
}
.ft-subscribe input[aria-invalid="true"] {
  border-color: #f87171;
}
.ft-subscribe button {
  position: absolute;
  top: 4px;
  right: 4px;
  bottom: 4px;
  padding: 0 22px;
  border: 0;
  border-radius: 9px;
  background: var(--ft-grad);
  color: #04140a;
  font-family: Poppins, Geist, sans-serif;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition:
    filter 0.28s ease,
    transform 0.28s ease;
}
.ft-subscribe button:hover {
  filter: brightness(1.06);
  transform: translateY(-1px);
}
.ft-news-note {
  margin: 10px 0 0;
  font-size: 13px;
  color: var(--ft-accent);
}
.ft-news-note[data-tone="error"] {
  color: #f87171;
}

/* ===== social ===== */
.ft-follow {
  margin: 28px 0 14px;
  font-family: Poppins, Geist, sans-serif;
  font-size: 15px;
  font-weight: 600;
  color: var(--ft-ink);
}
.ft-social {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.ft-social a {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid var(--ft-line);
  background: rgba(255, 255, 255, 0.03);
  color: #ffffff;
  transition:
    border-color 0.28s ease,
    background-color 0.28s ease,
    transform 0.28s ease;
}
.ft-social a svg {
  width: 17px;
  height: 17px;
}
/* brand colours, lifted enough to read on the dark panel */
.ft-social .s-fb a {
  color: #4a94ff;
}
.ft-social .s-x a {
  color: #e7e7ea;
}
.ft-social .s-li a {
  color: #3a9bef;
}
.ft-social .s-ig a {
  color: #f2657f;
}
.ft-social .s-yt a {
  color: #ff4a4a;
}
.ft-social a:hover {
  border-color: currentColor;
  background: rgba(255, 255, 255, 0.07);
  transform: translateY(-3px);
}

/* ===== legal bar ===== */
.ft-legal {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  padding-block: 22px;
  border-top: 1px solid var(--ft-line);
  font-size: 12.5px;
  text-align: left;
}
.ft-logo {
  display: inline-flex;
  flex: none;
}
.ft-logo img {
  width: auto;
  height: 34px;
}
.ft-legal p {
  margin: 0;
  flex: 1;
  min-width: 220px;
}
.ft-legal ul {
  display: flex;
  flex-wrap: wrap;
  gap: 22px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.ft-legal a {
  transition: color 0.24s ease;
}
.ft-legal a:hover {
  color: var(--ft-accent);
}

/* ===== responsive ===== */
@media (max-width: 992px) {
  .ft-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    row-gap: 36px;
  }
  .ft-offices {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .ft-news {
    grid-column: 1 / -1;
    padding-left: 0;
    border-left: 0;
    border-top: 1px solid var(--ft-line);
    padding-top: 32px;
  }
}

@media (max-width: 560px) {
  .ft-grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .ft-offices {
    grid-template-columns: minmax(0, 1fr);
  }
  .ft-quick,
  .ft-quick li {
    gap: 10px;
  }
  .ft-quick li:not(:last-child)::after {
    display: none;
  }
  .ft-legal {
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
  }
  .ft-wordmark {
    -webkit-text-stroke-width: 0.75px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ft-ticker-track {
    animation: none;
  }
}

/* --------------------------------------------------------------------------
   Pricing plan cards (#pricing)
   The cards stretch to a common height and the CTA is pushed to the bottom by
   .plan-action, so the four buttons line up however long the feature lists
   are. The featured card grows past the row on both edges instead of being
   nudged upward, which would break that alignment.
   -------------------------------------------------------------------------- */
.plan-card {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 34px 26px 26px;
}

/* Badges sit on the card's top edge, so their fill has to be opaque — a
   translucent one lets the gradient hover ring show straight through and the
   pill reads as broken. */
.plan-badge {
  position: absolute;
  top: -13px;
  left: 50%;
  z-index: 2;
  transform: translateX(-50%);
  white-space: nowrap;
  border-radius: 999px;
  border: 1px solid transparent;
  padding: 4px 14px;
  font-size: 11px;
  font-weight: 500;
  line-height: 1.4;
  transition:
    background-color 0.3s ease,
    color 0.3s ease,
    border-color 0.3s ease;
}

.plan-badge[data-tone="green"] {
  background: #12341c;
  border-color: rgba(0, 186, 0, 0.5);
  color: #c3fb30;
}
.plan-badge[data-tone="blue"] {
  background: #0d2740;
  border-color: rgba(49, 162, 255, 0.5);
  color: #7cc4ff;
}
.plan-badge[data-tone="amber"] {
  background: #3a2a08;
  border-color: rgba(245, 158, 11, 0.5);
  color: #fcd34d;
}
.plan-badge[data-tone="purple"] {
  background-image: linear-gradient(90deg, #7c3aed, #d946ef);
  background-color: #7c3aed;
  color: #ffffff;
}

/* On hover the pill fills with its accent outright */
.plan-card:hover .plan-badge[data-tone="green"] {
  background: #c3fb30;
  border-color: #c3fb30;
  color: #06210c;
}
.plan-card:hover .plan-badge[data-tone="blue"] {
  background: #31a2ff;
  border-color: #31a2ff;
  color: #04182b;
}
.plan-card:hover .plan-badge[data-tone="amber"] {
  background: #fbbf24;
  border-color: #fbbf24;
  color: #2a1c02;
}
.plan-card:hover .plan-badge[data-tone="purple"] {
  background-image: linear-gradient(90deg, #8b5cf6, #f0abfc);
}

.plan-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: 14px;
}

.plan-name {
  margin-top: 22px;
  font-family: Poppins, sans-serif;
  font-weight: 600;
  font-size: 22px;
  line-height: 1.2;
  color: #ffffff;
}

.plan-figure {
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin-top: 10px;
}
.plan-price {
  font-family: Poppins, sans-serif;
  font-weight: 600;
  font-size: clamp(26px, 2.3vw, 32px);
  line-height: 1.1;
  color: #ffffff;
}
.plan-period {
  font-size: 13px;
  color: #737380;
}

.plan-note {
  margin-top: 12px;
  font-size: 13px;
  color: #9a9aa5;
}

.plan-rule {
  display: block;
  height: 1px;
  margin-top: 20px;
  background: rgba(255, 255, 255, 0.09);
}

.plan-features {
  margin-top: 20px;
  display: flex;
  flex-direction: column;
  gap: 13px;
  font-size: 13.5px;
  color: #d6d6dd;
}
.plan-features li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}
.plan-tick {
  flex: none;
  width: 19px;
  height: 19px;
  margin-top: 1px;
}

/* Pushes the CTA to the card's bottom edge so all four line up */
.plan-action {
  margin-top: auto;
  padding-top: 28px;
}
.plan-cta {
  display: block;
  border-radius: 12px;
  padding: 11px 0;
  text-align: center;
  font-size: 13.5px;
  font-weight: 500;
  transition:
    background-color 0.25s ease,
    filter 0.25s ease;
}

/* The highlighted plan: brighter ring, an accent wash, and a card that runs
   taller than the row on both edges */
.plan-card--featured {
  background:
    radial-gradient(
      115% 90% at 50% 0%,
      rgba(124, 58, 237, 0.3),
      rgba(124, 58, 237, 0.05) 62%,
      transparent 100%
    ),
    #0a0713;
}
.plan-card--featured::before {
  background: linear-gradient(
    160deg,
    rgba(168, 85, 247, 0.85),
    rgba(124, 58, 237, 0.25)
  );
}
@media (min-width: 1024px) {
  .plan-card--featured {
    margin-block: -18px;
  }
}

/* --------------------------------------------------------------------------
   How it works (#how)
   A step list beside a screenshot panel: the panel sticks on desktop while the
   steps scroll past it, and each step's shot is stacked in the same frame so
   switching is a crossfade with no layout shift.
   -------------------------------------------------------------------------- */
.how-layout {
  display: grid;
  gap: 44px;
}
@media (min-width: 1024px) {
  .how-layout {
    /* The step column is capped, so every px left over goes to the shot */
    grid-template-columns: minmax(0, clamp(270px, 26vw, 360px)) minmax(0, 1fr);
    gap: clamp(32px, 3.4vw, 56px);
    align-items: start;
  }
}

.how-steps {
  display: flex;
  flex-direction: column;
  gap: 14px;
  list-style: none;
  margin: 0;
  padding: 0;
}

/* Stacked, the shot belongs directly under the steps it illustrates, with the
   CTA last — so the left column dissolves and the three order themselves. */
@media (max-width: 1023px) {
  .how-col {
    display: contents;
  }
  .how-steps {
    order: 1;
  }
  .how-panel {
    order: 2;
  }
  .how-cta {
    order: 3;
    margin-top: 4px;
  }
}

.how-step {
  --how-accent: #7c3aed;
  display: flex;
  gap: 18px;
  width: 100%;
  padding: 22px 24px;
  text-align: left;
  border-radius: 20px;
  border: 1px solid rgba(255, 255, 255, 0.06);
  background: rgba(255, 255, 255, 0.015);
  transition:
    background-color 0.35s ease,
    border-color 0.35s ease,
    transform 0.35s ease;
}
.how-step[data-accent="purple"] {
  --how-accent: #a855f7;
}
.how-step[data-accent="blue"] {
  --how-accent: #31a2ff;
}
.how-step[data-accent="lime"] {
  --how-accent: #c3fb30;
}

.how-step[data-active="true"] {
  background: rgba(255, 255, 255, 0.04);
  border-color: color-mix(in srgb, var(--how-accent) 38%, transparent);
}
.how-step:hover {
  background: rgba(255, 255, 255, 0.045);
}

.how-index {
  flex: none;
  font-family: Archivo, Geist, sans-serif;
  font-weight: 800;
  font-size: 22px;
  line-height: 1.2;
  color: rgba(255, 255, 255, 0.28);
  transition: color 0.35s ease;
}
.how-step[data-active="true"] .how-index {
  color: var(--how-accent);
}

.how-body {
  display: block;
  min-width: 0;
}
.how-title {
  display: block;
  font-family: Poppins, sans-serif;
  font-weight: 600;
  font-size: 18px;
  color: rgba(255, 255, 255, 0.72);
  transition: color 0.35s ease;
}
.how-step[data-active="true"] .how-title {
  color: #ffffff;
}

/* The copy only belongs to the step being read; the others stay as headings */
.how-copy {
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  font-size: 14px;
  line-height: 1.55;
  color: #9a9aa5;
  transition:
    grid-template-rows 0.4s ease,
    opacity 0.3s ease,
    margin-top 0.4s ease;
}
.how-copy > * {
  overflow: hidden;
}
.how-step[data-active="true"] .how-copy {
  grid-template-rows: 1fr;
  opacity: 1;
  margin-top: 8px;
}

/* Panel */
@media (min-width: 1024px) {
  .how-panel {
    position: sticky;
    top: 116px;
  }
}

.how-frame {
  position: relative;
  border-radius: 18px;
  overflow: hidden;
  background: #07080c;
  border: 1px solid rgba(255, 255, 255, 0.09);
  box-shadow: 0 40px 90px -50px rgba(0, 0, 0, 0.95);
}

/* Window chrome, so the screenshots read as product shots */
.how-bar {
  display: flex;
  align-items: center;
  gap: 7px;
  height: 34px;
  padding-inline: 14px;
  background: rgba(255, 255, 255, 0.035);
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}
.how-bar i {
  width: 9px;
  height: 9px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.16);
}

/* Every shot occupies the same box; only the active one is painted */
.how-shot {
  margin: 0;
  opacity: 0;
  transform: scale(1.015);
  transition:
    opacity 0.5s ease,
    transform 0.6s ease;
}
.how-shot:not(:first-of-type) {
  position: absolute;
  inset: 34px 0 0 0;
}
.how-shot[data-active="true"] {
  opacity: 1;
  transform: scale(1);
}
.how-shot img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1847 / 851;
  object-fit: cover;
}

/* Sign-up nudge, sitting under the step list in the left column */
.how-cta {
  margin-top: 30px;
  text-align: center;
}
@media (min-width: 1024px) {
  .how-cta {
    text-align: left;
  }
}
.how-cta-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 15px 32px;
  border-radius: 999px;
  background: linear-gradient(90deg, #acdc6a, #42e99c);
  color: #04140a;
  font-family: Poppins, sans-serif;
  font-weight: 600;
  font-size: 16px;
  transition:
    transform 0.25s ease,
    box-shadow 0.25s ease;
}
.how-cta-btn svg {
  width: 13px;
  height: 13px;
}
.how-cta-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 18px 40px -20px rgba(66, 233, 156, 0.7);
}
.how-cta-note {
  margin-top: 14px;
  font-size: 13px;
  color: #8a8a92;
}

/* --------------------------------------------------------------------------
   Testimonials carousel (#testimonials)
   The Figma node is a flat raster, so the card anatomy is rebuilt here: one
   accent per card driven by data-accent, dimmed until it is the active slide,
   and a bottom bar that runs the autoplay interval on the active card only.
   -------------------------------------------------------------------------- */
.tm-viewport {
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  padding: 34px 0 40px;
}
.tm-viewport::-webkit-scrollbar {
  display: none;
}

/* Mouse drag (script.js). Snapping has to be off while the pointer is driving
   the scroll position, or every move fights the snap. */
@media (hover: hover) {
  .tm-viewport {
    cursor: grab;
  }
  .tm-viewport.is-dragging {
    cursor: grabbing;
    scroll-snap-type: none;
    scroll-behavior: auto;
    user-select: none;
  }
}

.tm-track {
  display: flex;
  gap: 22px;
  list-style: none;
  margin: 0;
  padding: 0;
}

/* End gutters, so the first and last card can each reach dead centre —
   without them goTo() clamps at the ends and the arrows look dead on the
   edge cards. They are real flex items rather than padding on the track or
   the scroller: trailing padding is left out of the scrollable overflow area
   in Chrome, which strands the last card ~160px off centre. A few px of slack
   is harmless (the scroll maths measures live rects); a few px short is not. */
.tm-track::before,
.tm-track::after {
  content: "";
  flex: none;
  width: max(1rem, calc(50vw - min(calc(var(--tm-w, 360px) / 2), 40vw) + 10px));
}

.tm-card {
  --tm-accent: #7c3aed;
  position: relative;
  flex: 0 0 auto;
  width: min(var(--tm-w, 360px), 80vw);
  scroll-snap-align: center;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 26px 26px 22px;
  border-radius: 26px;
  overflow: hidden;
  background:
    linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.04),
      rgba(255, 255, 255, 0.008)
    ),
    #0f0f14;
  border: 1px solid rgba(255, 255, 255, 0.07);
  opacity: 0.5;
  transform: scale(0.965);
  transition:
    opacity 0.5s ease,
    transform 0.5s ease,
    border-color 0.5s ease,
    box-shadow 0.5s ease;
}

.tm-card[data-accent="purple"] {
  --tm-accent: #a855f7;
}
.tm-card[data-accent="amber"] {
  --tm-accent: #f97316;
}
.tm-card[data-accent="emerald"] {
  --tm-accent: #34d399;
}
.tm-card[data-accent="blue"] {
  --tm-accent: #31a2ff;
}
.tm-card[data-accent="lime"] {
  --tm-accent: #c3fb30;
}

/* Accent wash that only shows on the active card, as in the mockup.
   The layer must span the whole card (inset: 0) and fade out inside its own
   box. Insetting it to `bottom: 30%` instead cut the gradient off mid-card,
   which drew a hard horizontal seam across any quote tall enough to reach it. */
.tm-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(
    118% 58% at 50% 112%,
    var(--tm-accent) 0%,
    transparent 72%
  );
  opacity: 0;
  transition: opacity 0.5s ease;
  pointer-events: none;
}

.tm-card.is-active {
  opacity: 1;
  transform: scale(1);
  border-color: rgba(255, 255, 255, 0.14);
  box-shadow: 0 26px 60px -34px var(--tm-accent);
}
.tm-card.is-active::before {
  opacity: 0.18;
}

.tm-kicker {
  position: relative;
  font-family: "Geist Mono", ui-monospace, monospace;
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--tm-accent);
}

.tm-rating {
  position: relative;
  display: flex;
  align-items: center;
  gap: 9px;
}
.tm-stars {
  color: #fcb810;
  font-size: 14px;
  letter-spacing: 2px;
}
.tm-score {
  font-size: 13px;
  font-weight: 600;
  color: #ffffff;
}

.tm-text {
  position: relative;
  flex: 1;
  margin: 0;
  font-size: 16.5px;
  line-height: 1.55;
  color: #e6e6ea;
}

.tm-person {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  /* auto margin pins the attribution to the card floor, and the rule keeps a
     long quote from running straight into the name however many lines it is */
  margin-top: auto;
  padding-top: 18px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.tm-avatar {
  display: grid;
  place-items: center;
  flex: none;
  width: 42px;
  height: 42px;
  border-radius: 999px;
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: 0.03em;
  color: var(--tm-accent);
  background: color-mix(in srgb, var(--tm-accent) 16%, transparent);
  border: 1px solid color-mix(in srgb, var(--tm-accent) 34%, transparent);
}
.tm-name {
  display: block;
  font-size: 14.5px;
  color: #ffffff;
}
.tm-role {
  display: block;
  font-size: 12.5px;
  color: #8a8a92;
}

/* Watermark in the top-right corner. It used to sit bottom-right, level with
    the name and role, which left it fighting the attribution on longer quotes. */
.tm-quote {
  position: absolute;
  top: 14px;
  right: 22px;
  font-family: Archivo, Geist, sans-serif;
  font-weight: 800;
  font-size: 54px;
  line-height: 1;
  color: var(--tm-accent);
  opacity: 0.3;
  pointer-events: none;
}

/* Autoplay progress, drawn only under the active card */
.tm-bar {
  position: absolute;
  inset: auto 0 0 0;
  height: 3px;
  overflow: hidden;
}
.tm-card.is-active .tm-bar::before {
  content: "";
  display: block;
  height: 100%;
  transform-origin: left;
  background: linear-gradient(90deg, var(--tm-accent), transparent);
  animation: tmBar var(--tm-dur, 6000ms) linear forwards;
}
.tm-carousel[data-paused="true"] .tm-bar::before {
  animation-play-state: paused;
}

@keyframes tmBar {
  from {
    transform: scaleX(0);
  }
  to {
    transform: scaleX(1);
  }
}

.tm-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
}
.tm-arrow {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 999px;
  color: rgba(255, 255, 255, 0.75);
  transition:
    background-color 0.25s ease,
    color 0.25s ease;
}
.tm-arrow svg {
  width: 20px;
  height: 20px;
}
.tm-arrow:hover {
  background: rgba(255, 255, 255, 0.07);
  color: #ffffff;
}

.tm-dots {
  display: flex;
  align-items: center;
  gap: 10px;
}
.tm-dot {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.18);
  transition:
    background-color 0.3s ease,
    transform 0.3s ease;
}
.tm-dot[aria-selected="true"] {
  background: #ffffff;
  transform: scale(1.25);
}

/* --------------------------------------------------------------------------
   Toolkit slider (#toolkit) — the same .tm-carousel machinery as the
   testimonials, but the card is the product shot: image edge to edge with one
   category chip on it. The tool identity (icon, name, type) is held back and
   lands in the middle of the card on hover, over a blurred shot. Where there
   is no hover, the centred card shows it instead. Accent comes from
   --tm-accent set inline per card.
   -------------------------------------------------------------------------- */
.gal-carousel {
  --tm-w: 600px;
}
.gal-carousel .tm-viewport {
  padding: 48px 0 60px;
}

.gal-card {
  gap: 0;
  padding: 0;
  aspect-ratio: 540 / 402; /* the art's own ratio, so no crop */
  border-radius: 24px;
  background: #0a0d0b;
  /* Wider gap between resting and centred than the testimonials use, so the
     active slide reads as the one in focus. Scaling up overlaps the
     neighbours, hence the z-index. */
  opacity: 0.38;
  transform: scale(0.86);
}
.gal-card.is-active {
  z-index: 2;
  opacity: 1;
  transform: scale(1.1);
  /* The scroller clips overflow, so the glow has to die out inside the
     viewport padding below the card — anything wider gets sliced off square. */
  box-shadow:
    0 14px 34px -22px color-mix(in srgb, var(--tm-accent) 55%, transparent),
    0 10px 26px -20px rgba(0, 0, 0, 0.8);
}

/* Hairline border, accent-tinted on the active card */
.gal-card::before {
  inset: 0;
  padding: 1px;
  border-radius: inherit;
  background: linear-gradient(
    155deg,
    color-mix(in srgb, var(--tm-accent) 55%, transparent) 0%,
    rgba(255, 255, 255, 0.05) 45%,
    rgba(255, 255, 255, 0.03) 100%
  );
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: 0.4;
  z-index: 3;
}
.gal-card.is-active::before {
  opacity: 1;
}

/* The shot fills the card; everything else floats over it */
.gal-media {
  position: absolute;
  inset: 0;
  margin: 0;
  overflow: hidden;
  border-radius: inherit;
}
.gal-media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transition:
    transform 0.7s cubic-bezier(0.16, 1, 0.3, 1),
    filter 0.45s ease;
}
/* Push the shot back on hover, so the tool identity reads against it */
.gal-card:hover .gal-media img,
.gal-card:focus-within .gal-media img {
  transform: scale(1.04);
  filter: blur(4px);
}

/* Full-card scrim, faded in with the identity block */
.gal-media::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1; /* the shot is transformed on hover, so it would paint over an
                  auto-z pseudo that comes before it in the tree */
  background:
    radial-gradient(
      58% 52% at 50% 50%,
      color-mix(in srgb, var(--tm-accent) 26%, transparent) 0%,
      transparent 72%
    ),
    rgba(5, 7, 6, 0.86);
  opacity: 0;
  transition: opacity 0.45s ease;
  pointer-events: none;
}
.gal-card:hover .gal-media::before,
.gal-card:focus-within .gal-media::before {
  opacity: 1;
}

.gal-body {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: grid;
  place-items: center;
  padding: 24px;
}
.gal-foot {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  text-align: center;
  /* Fade only. Transforming this block moved the text off the pixel grid and
     it re-snapped when the transition ended, which read as the title shifting
     and resizing — the slide lives on the icon tile instead, where there is no
     text to re-rasterise. */
  opacity: 0;
  transition: opacity 0.4s ease;
}
.gal-card:hover .gal-foot,
.gal-card:focus-within .gal-foot {
  opacity: 1;
}
.gal-mark {
  display: grid;
  place-items: center;
  flex: none;
  width: 78px;
  height: 78px;
  border-radius: 24px;
  color: var(--tm-accent);
  background: color-mix(in srgb, var(--tm-accent) 20%, #080b09);
  border: 1px solid color-mix(in srgb, var(--tm-accent) 38%, transparent);
  box-shadow: 0 18px 40px -22px var(--tm-accent);
  transform: translateY(10px);
  transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}
.gal-card:hover .gal-mark,
.gal-card:focus-within .gal-mark {
  transform: translateY(0);
}
.gal-mark svg {
  width: 33px;
  height: 33px;
}
.gal-name {
  display: block;
  font-size: 24px;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: #ffffff;
}
.gal-type {
  display: block;
  margin-top: 7px;
  font-family: "Geist Mono", ui-monospace, monospace;
  font-size: 13.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #c2c6bf;
}

/* Phones: no hover to reveal anything, so the card stops being an overlay and
   stacks instead — identity row on top, shot below it. Comes last so it wins
   over the coarse-pointer rules above. */
@media (max-width: 640px) {
  .gal-carousel .tm-viewport {
    padding: 26px 0 34px;
  }
  .gal-card {
    /* Wider than the shared 80vw cap — the art carries fine detail that needs
       the pixels, and the stacked card has no neighbours worth showing */
    width: min(var(--tm-w), 90vw);
    aspect-ratio: auto;
    display: flex;
    flex-direction: column;
    border-radius: clamp(16px, 5vw, 20px);
    transform: scale(0.94);
  }
  .gal-card.is-active {
    transform: scale(1);
    box-shadow: 0 12px 28px -20px
      color-mix(in srgb, var(--tm-accent) 55%, transparent);
  }

  .gal-body {
    position: static;
    order: 1;
    display: block;
    padding: clamp(13px, 4vw, 18px) clamp(13px, 4vw, 18px)
      clamp(11px, 3.4vw, 15px);
  }
  .gal-foot {
    flex-direction: row;
    align-items: center;
    gap: 12px;
    text-align: left;
    opacity: 1;
    transform: none;
  }
  /* Everything scales with the viewport between a 320px phone and 640px */
  .gal-mark {
    width: clamp(42px, 13vw, 54px);
    height: clamp(42px, 13vw, 54px);
    border-radius: clamp(13px, 4vw, 17px);
    box-shadow: none;
    transform: none;
  }
  .gal-mark svg {
    width: clamp(19px, 6vw, 24px);
    height: clamp(19px, 6vw, 24px);
  }
  .gal-name {
    font-size: clamp(15.5px, 4.6vw, 19px);
  }
  .gal-type {
    font-size: clamp(11px, 3.1vw, 13px);
    margin-top: 4px;
  }

  .gal-media {
    position: relative;
    inset: auto;
    order: 2;
    border-radius: 0 0 clamp(16px, 5vw, 20px) clamp(16px, 5vw, 20px);
  }
  .gal-media img,
  .gal-card.is-active .gal-media img {
    height: auto;
    aspect-ratio: 540 / 402;
    filter: none;
    transform: none;
  }
  /* The art is plain here — the identity row above already names the tool */
  .gal-media::before {
    display: none;
  }
}

/* --------------------------------------------------------------------------
   Auth modal (#auth-modal) — the compact sibling of the contact modal: one
   column, screens swapped by [hidden]. Fields reuse the .lead-* styles.
   -------------------------------------------------------------------------- */
.auth-modal {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: grid;
  place-items: center;
  padding: 20px;
  transition:
    opacity 0.3s ease,
    visibility 0.3s ease;
}
.auth-modal[data-open="false"] {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.auth-panel {
  position: relative;
  width: min(440px, 100%);
  max-height: min(92vh, 720px);
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: clamp(28px, 4vw, 38px);
  border-radius: 24px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background:
    radial-gradient(
      92% 72% at 88% 4%,
      rgba(195, 251, 48, 0.1) 0%,
      transparent 60%
    ),
    radial-gradient(
      74% 62% at 4% 98%,
      rgba(49, 162, 255, 0.1) 0%,
      transparent 58%
    ),
    #070b12;
  box-shadow: 0 40px 90px -40px rgba(0, 0, 0, 0.9);
  transform: translateY(14px) scale(0.985);
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  text-align: center;
}
.auth-modal[data-open="true"] .auth-panel {
  transform: none;
}
.auth-panel:focus {
  outline: none;
}

.auth-title {
  margin: 0 0 8px;
  font-family: Poppins, Geist, sans-serif;
  font-size: 23px;
  font-weight: 600;
  color: #ffffff;
}
.auth-sub {
  margin: 0 0 24px;
  font-size: 14px;
  line-height: 1.55;
  color: #9b9ba4;
}

.auth-provider {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 11px;
  width: 100%;
  border-radius: 14px;
  padding: 14px 18px;
  font-size: 14.5px;
  font-weight: 500;
  color: #ffffff;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  transition:
    background-color 0.25s ease,
    border-color 0.25s ease;
}
.auth-provider svg {
  width: 18px;
  height: 18px;
}
.auth-provider:hover {
  background: rgba(255, 255, 255, 0.07);
  border-color: rgba(255, 255, 255, 0.2);
}

.auth-or {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 18px 0;
  font-family: "Geist Mono", ui-monospace, monospace;
  font-size: 11px;
  letter-spacing: 0.16em;
  color: #63656e;
}
.auth-or::before,
.auth-or::after {
  content: "";
  flex: 1;
  height: 1px;
  background: rgba(255, 255, 255, 0.08);
}

.auth-outline {
  width: 100%;
  border-radius: 14px;
  padding: 14px 18px;
  font-family: Poppins, Geist, sans-serif;
  font-size: 14.5px;
  font-weight: 500;
  color: #04140a;
  background: linear-gradient(90deg, #acdc6a, #42e99c);
  transition: filter 0.25s ease;
}
.auth-outline:hover {
  filter: brightness(1.06);
}

.auth-form {
  display: flex;
  flex-direction: column;
  text-align: left;
}
.auth-form .lead-label {
  margin-top: 4px;
}
.auth-form .lead-input + .lead-label {
  margin-top: 16px;
}

.auth-field {
  position: relative;
}
.auth-field .lead-input {
  padding-right: 48px;
}
.auth-eye {
  position: absolute;
  top: 50%;
  right: 12px;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  transform: translateY(-50%);
  border-radius: 9px;
  color: #7c7e88;
  transition:
    color 0.25s ease,
    background-color 0.25s ease;
}
.auth-eye svg {
  width: 17px;
  height: 17px;
}
.auth-eye:hover {
  color: #ffffff;
  background: rgba(255, 255, 255, 0.06);
}

.auth-link {
  color: #c3fb30;
  font-size: 13.5px;
  transition: color 0.25s ease;
}
.auth-link:hover {
  color: #d9ff6b;
}
.auth-forgot {
  align-self: flex-end;
  margin-top: 12px;
}

.auth-foot {
  margin: 16px 0 0;
  text-align: center;
  font-size: 13.5px;
  color: #8b8d96;
}
.auth-screen > .lead-submit {
  width: 100%;
}
.auth-screen .lead-done-mark {
  margin: 0 auto 16px;
}

/* --------------------------------------------------------------------------
   Free-trial CTA panel (Figma 5004:665)
   -------------------------------------------------------------------------- */
.trial-cta {
  position: relative;
  overflow: hidden;
  border-radius: 50px;
  background: #0c1314;
  padding: clamp(56px, 7vw, 113px) clamp(24px, 4vw, 50px)
    clamp(60px, 8vw, 112px);
  box-shadow: 0 31px 63px -15px rgba(0, 0, 0, 0.25);
}

/* The two blurred ellipses that light the top corners in the mockup */
.trial-glow {
  position: absolute;
  border-radius: 999px;
  pointer-events: none;
  filter: blur(70px);
}
.trial-glow--a {
  left: 0;
  top: -90px;
  width: min(415px, 45%);
  height: 220px;
  transform: rotate(41.85deg);
  background: rgba(163, 255, 0, 0.22);
}
.trial-glow--b {
  right: 8%;
  top: -60px;
  width: 200px;
  height: 200px;
  background: rgba(66, 233, 156, 0.24);
}

.trial-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: clamp(34px, 5vw, 62px);
  padding: 18px 37px;
  border-radius: 999px;
  background: linear-gradient(90deg, #acdc6a, #42e99c);
  color: #000000;
  font-family: Poppins, sans-serif;
  font-weight: 600;
  font-size: clamp(16px, 1.6vw, 20.6px);
  line-height: 1.43;
  transition:
    transform 0.25s ease,
    box-shadow 0.25s ease;
}
.trial-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 20px 44px -20px rgba(66, 233, 156, 0.65);
}

/* --------------------------------------------------------------------------
   FAQ (#faq — Figma 5004:1136)
   Single-open accordion; the panel collapses with a grid-row transition so no
   height has to be measured in JS.
   -------------------------------------------------------------------------- */
.faq-section {
  background: #0f0f0f;
}

.faq-title {
  background: linear-gradient(87.6deg, #a3ff00 0.69%, #409407 103.43%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* The FAQ's own contact form. Shares the modal's field styles (.lead-*); only
   the panel around it lives here. */
.faq-form-panel {
  max-width: 532px;
  padding: 30px 29px;
  border-radius: 20px;
  border: 1px solid rgba(255, 255, 255, 0.15);
  background: linear-gradient(
    244.82deg,
    rgba(0, 104, 52, 0.85) 30.12%,
    rgba(0, 160, 24, 0) 98.84%
  );
}
.faq-form-title {
  margin: 0;
  font-family: Poppins, Geist, sans-serif;
  font-size: clamp(21px, 2.2vw, 24px);
  line-height: 1.2;
  color: #ffffff;
}
.faq-form-copy {
  margin: 10px 0 24px;
  font-size: 15px;
  line-height: 1.45;
  color: rgba(255, 255, 255, 0.72);
}
/* On the green panel the fields need a darker bed than they get in the modal */
.faq-form .lead-input {
  background: rgba(3, 10, 6, 0.5);
  border-color: rgba(255, 255, 255, 0.16);
}
.faq-form .lead-input:focus {
  background: rgba(3, 10, 6, 0.65);
  border-color: rgba(195, 251, 48, 0.6);
}
.faq-form .lead-label {
  color: rgba(255, 255, 255, 0.62);
}
.faq-form .lead-chip {
  background: rgba(3, 10, 6, 0.4);
  border-color: rgba(255, 255, 255, 0.18);
  color: rgba(255, 255, 255, 0.82);
}
.faq-form .lead-chip[data-active="true"] {
  color: #04140a;
}
.faq-form .lead-submit {
  align-self: stretch;
}
.faq-form-panel .lead-done {
  align-items: flex-start;
}

@media (max-width: 400px) {
  .faq-form-panel {
    padding: 24px 18px;
  }
}

.faq-list {
  display: flex;
  flex-direction: column;
  gap: 17px;
}

.faq-item {
  border-radius: 26px;
  background: rgba(221, 209, 255, 0.06);
  transition: background-color 0.3s ease;
}
.faq-item[data-open="true"] {
  background: rgba(84, 80, 95, 0.26);
}

.faq-q {
  display: flex;
  align-items: center;
  gap: 11px;
  width: 100%;
  padding: 24px clamp(22px, 3vw, 39px);
  text-align: left;
  font-family: Poppins, sans-serif;
  font-weight: 600;
  font-size: clamp(16.5px, 1.7vw, 21.65px);
  line-height: 1.5;
  color: #ffffff;
}
.faq-q > span:first-child {
  flex: 1;
}

.faq-icon {
  position: relative;
  flex: none;
  width: 30px;
  height: 30px;
}
.faq-icon::before,
.faq-icon::after {
  content: "";
  position: absolute;
  left: 20.83%;
  right: 20.84%;
  top: 50%;
  height: 2px;
  margin-top: -1px;
  border-radius: 2px;
  background: #ffffff;
  transition:
    transform 0.3s ease,
    opacity 0.3s ease;
}
.faq-icon::after {
  transform: rotate(90deg);
}
.faq-item[data-open="true"] .faq-icon::after {
  transform: rotate(0deg);
  opacity: 0;
}

.faq-a {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.35s ease;
}
.faq-item[data-open="true"] .faq-a {
  grid-template-rows: 1fr;
}
.faq-a > div {
  overflow: hidden;
}
.faq-a p {
  padding: 0 clamp(22px, 3vw, 39px) 24px;
  color: #a6a6a6;
  font-size: clamp(15px, 1.5vw, 19.5px);
  line-height: 1.35;
}

/* --------------------------------------------------------------------------
   Lead modal (#auth-modal) — every CTA opens it. Two columns: the pitch on the
   left, the form on the right; one column under 860px. Follows the supplied
   contact-modal mockup, with its indigo swapped for the page's lime CTA and
   dark panel tokens (#070b12, accentLime #c3fb30, accentBlue #31a2ff).
   -------------------------------------------------------------------------- */
.lead-modal {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: grid;
  place-items: center;
  padding: 20px;
  transition:
    opacity 0.3s ease,
    visibility 0.3s ease;
}
.lead-modal[data-open="false"] {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.lead-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(3, 4, 8, 0.82);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}

.lead-panel {
  position: relative;
  width: min(980px, 100%);
  max-height: min(92vh, 780px);
  overflow-y: auto;
  overscroll-behavior: contain;
  border-radius: 26px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background:
    radial-gradient(
      92% 72% at 88% 4%,
      rgba(195, 251, 48, 0.1) 0%,
      transparent 60%
    ),
    radial-gradient(
      74% 62% at 4% 98%,
      rgba(49, 162, 255, 0.1) 0%,
      transparent 58%
    ),
    #070b12;
  box-shadow: 0 40px 90px -40px rgba(0, 0, 0, 0.9);
  transform: translateY(14px) scale(0.985);
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}
.lead-modal[data-open="true"] .lead-panel {
  transform: none;
}
.lead-panel:focus {
  outline: none;
}

.lead-close {
  position: absolute;
  z-index: 3;
  top: 18px;
  right: 18px;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 999px;
  color: rgba(255, 255, 255, 0.65);
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.09);
  transition:
    color 0.25s ease,
    background-color 0.25s ease;
}
.lead-close svg {
  width: 17px;
  height: 17px;
}
.lead-close:hover {
  color: #ffffff;
  background: rgba(255, 255, 255, 0.1);
}

.lead-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1fr);
  gap: clamp(28px, 4vw, 56px);
  padding: clamp(30px, 4vw, 52px);
}

/* ---- Left column ---- */
.lead-kicker {
  margin: 0 0 18px;
  font-family: "Geist Mono", ui-monospace, monospace;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: rgba(195, 251, 48, 0.78);
}
.lead-title {
  margin: 0 0 18px;
  font-family: Poppins, Geist, sans-serif;
  font-weight: 600;
  font-size: clamp(26px, 3.2vw, 34px);
  line-height: 1.18;
  letter-spacing: -0.02em;
  color: #ffffff;
}
.lead-copy {
  margin: 0 0 26px;
  font-size: 14.5px;
  line-height: 1.65;
  color: #9b9ba4;
}
.lead-mail {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 14.5px;
  color: #d8d9de;
  transition: color 0.25s ease;
}
.lead-mail svg {
  width: 18px;
  height: 18px;
  color: #c3fb30;
}
.lead-mail:hover {
  color: #ffffff;
}

/* ---- Right column ---- */
.lead-form {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.lead-label {
  margin-bottom: 9px;
  padding: 0;
  font-family: "Geist Mono", ui-monospace, monospace;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #8a8b93;
}
.lead-label + .lead-input {
  margin-bottom: 18px;
}

.lead-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  margin: 0 0 20px;
  padding: 0;
  border: 0;
}
.lead-chips .lead-label {
  flex: 0 0 100%;
  margin-bottom: 11px;
}
.lead-chip {
  border-radius: 999px;
  padding: 9px 17px;
  font-size: 13.5px;
  color: #b9bac1;
  background: rgba(255, 255, 255, 0.035);
  border: 1px solid rgba(255, 255, 255, 0.09);
  transition:
    color 0.25s ease,
    background 0.25s ease,
    border-color 0.25s ease;
}
.lead-chip:hover {
  color: #ffffff;
  border-color: rgba(255, 255, 255, 0.2);
}
.lead-chip[data-active="true"] {
  color: #04140a;
  background: linear-gradient(90deg, #acdc6a, #42e99c);
  border-color: transparent;
  font-weight: 500;
}

.lead-input {
  width: 100%;
  border-radius: 14px;
  padding: 14px 16px;
  font-size: 14.5px;
  color: #ffffff;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  transition:
    border-color 0.25s ease,
    background-color 0.25s ease;
}
.lead-input::placeholder {
  color: #63656e;
}
.lead-input:focus {
  outline: none;
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(195, 251, 48, 0.5);
}
.lead-input[aria-invalid="true"] {
  border-color: #f87171;
}
.lead-textarea {
  min-height: 108px;
  resize: vertical;
  line-height: 1.55;
}

.lead-submit {
  margin-top: 24px;
  border-radius: 14px;
  padding: 15px 20px;
  font-family: Poppins, Geist, sans-serif;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: #04140a;
  background: linear-gradient(90deg, #acdc6a, #42e99c);
  box-shadow: 0 18px 40px -18px rgba(195, 251, 48, 0.55);
  transition:
    filter 0.25s ease,
    transform 0.25s ease;
}
.lead-submit:hover {
  filter: brightness(1.08);
}
.lead-submit[data-busy="true"] {
  opacity: 0.75;
  pointer-events: none;
}

.lead-note {
  margin: 14px 0 0;
  text-align: center;
  font-size: 13px;
  color: #fcd34d;
}
.lead-note[data-tone="error"] {
  color: #f87171;
}

/* ---- Sent state, swapped in where the form was ---- */
.lead-done {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 14px;
}
.lead-done h3 {
  margin: 0;
  font-family: Poppins, Geist, sans-serif;
  font-size: 22px;
  font-weight: 600;
  color: #ffffff;
}
.lead-done p {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.6;
  color: #9b9ba4;
}
.lead-done .lead-submit {
  margin-top: 8px;
  align-self: stretch;
}
.lead-done-mark {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border-radius: 999px;
  color: #c3fb30;
  background: rgba(195, 251, 48, 0.12);
  border: 1px solid rgba(195, 251, 48, 0.3);
}
.lead-done-mark svg {
  width: 26px;
  height: 26px;
}

@media (max-width: 860px) {
  .lead-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 26px;
  }
  .lead-title {
    font-size: clamp(23px, 6.6vw, 29px);
  }
  .lead-copy {
    margin-bottom: 18px;
  }
}

/* --------------------------------------------------------------------------
   Reduced motion
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .animate-drift-1,
  .animate-drift-2,
  .animate-pulse-dot,
  .animate-trace {
    animation: none;
  }
  .reveal-item,
  .stagger > * {
    opacity: 1 !important;
    translate: none !important;
    animation: none !important;
  }

  /* No pinning: the stage becomes an ordinary snap carousel */
  .wf-section {
    height: auto !important;
  }
  .wf-stage {
    /* relative, not static — the glow blobs are absolutely positioned and
       must stay clipped by this box's overflow:hidden */
    position: relative;
    height: auto;
    padding: 96px 0 72px;
    display: block;
  }
  .wf-header {
    position: static;
    padding: 0 1rem 40px;
  }
  .wf-track {
    transform: none !important;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding-inline: 1rem;
    gap: 20px;
  }
  .wf-beat {
    opacity: 1;
    filter: none;
    transform: none !important;
    scroll-snap-align: center;
    flex-direction: column;
    gap: 26px;
  }
  .wf-copy {
    width: 100%;
  }
  .wf-aside {
    width: 100%;
    margin-top: 0;
  }
  .wf-curve {
    display: none;
  }
  .wf-chip-dot {
    animation: none;
  }

  .showcase-figure img,
  .edge-card {
    transition: none;
  }

  /* Testimonials: every card readable, no autoplay bar, no scale/fade */
  .tm-card {
    opacity: 1;
    transform: none;
    transition: none;
  }
  .tm-card.is-active .tm-bar::before {
    animation: none;
  }
  .faq-a {
    transition: none;
  }
  .trial-btn {
    transition: none;
  }
}