/* ===== Reset & base ===== */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  /* Sampled directly from Landing-Light */
  --purple: #5552ff;
  --magenta: #d251ff;
  --grad-headline: linear-gradient(90deg, #5552ff 2.6%, #d251ff 97.4%);
  --ink: #1a1a1a;
  --gray: #6a6a6a;
  --gray-soft: #8f8e8e;
  --badge-bg: #f1f1f1;
  --outline: #5a5a5a;
  --page: #fcfcfc;
  --panel: #141414;
  /* Figma is a flat #1e1e1e; softened slightly so the edge reads less harsh
     against the light page while keeping the same visual weight. */
  --panel-border: rgba(38, 38, 38, .88);

  --font-display: 'Clash Display', 'Poppins', sans-serif;
  --font-body: 'Poppins', -apple-system, BlinkMacSystemFont, sans-serif;

  /* 1200px content column + 24px gutters, so content starts at x=120 on a 1440 frame */
  --container: 1248px;
  --skew: 13.28deg;
}

html { scroll-behavior: smooth; }

/* The hero wave and skewed stack deliberately bleed past the viewport, the way
   they do in Figma. `clip` contains them without creating a scroll container. */
html, body { overflow-x: clip; }

body {
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--page);
  -webkit-font-smoothing: antialiased;
}

a { text-decoration: none; color: inherit; }
img { display: block; max-width: 100%; }
button { font-family: inherit; cursor: pointer; }

/* ===== Buttons ===== */
.btn-solid,
.btn-outline,
.btn-text {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-body);
  font-weight: 500;
  border-radius: 100px;
  white-space: nowrap;
  transition: transform .18s ease, opacity .18s ease, border-color .18s ease, color .18s ease;
}

/* Figma trims button text to its cap box, so nav buttons land at exactly 47px
   and hero buttons at 53px. Fixed heights reproduce that without the trim. */
.btn-solid {
  background: var(--purple);
  color: #fff;
  height: 47px;
  padding: 0 30px;
  font-size: 16px;
  line-height: 1;
}
.btn-solid:hover { transform: translateY(-1px); opacity: .92; }

.btn-outline {
  background: transparent;
  color: var(--ink);
  border: 1px solid var(--outline);
  height: 47px;
  padding: 0 30px;
  font-size: 16px;
  line-height: 1;
}
.btn-outline:hover { border-color: var(--ink); transform: translateY(-1px); }

.btn-text {
  color: var(--ink);
  height: 47px;
  padding: 0 16px;
  font-size: 16px;
  line-height: 1;
}
.btn-text:hover { color: var(--purple); }

/* Figma node 2:72 / 2:74 — 53px tall, 36px side padding, Poppins Medium 18 */
.btn-large { height: 53px; padding: 0 36px; font-size: 18px; }

/* ===== Navbar (node 2:4) — no bottom rule, matches Figma ===== */
.navbar {
  max-width: var(--container);
  margin: 0 auto;
  padding: 34px 24px 0;
  display: flex;
  align-items: center;
  gap: 22px;
}

/* flex-shrink:0 on both — without it the brand gets squeezed below its own
   content width and the wordmark spills out over the divider. */
.nav-brand { display: flex; align-items: center; gap: 11px; flex-shrink: 0; }

/* The ThreadOptic mark is a wide eye (roughly 2.2:1), so it is sized by height
   and left to find its own width. A fixed square would letterbox it to a sliver. */
.brand-mark { height: 34px; width: auto; flex-shrink: 0; }

.brand-text { display: flex; flex-direction: column; line-height: 1.1; flex-shrink: 0; }

/* "ThreadOptic" is a much longer wordmark than the nav was originally sized
   for, so it runs a little tighter to keep the whole bar on one line. */
.brand-name {
  font-weight: 600;
  font-size: 21px;
  letter-spacing: -.015em;
  color: var(--ink);
  white-space: nowrap;
}

.brand-tagline {
  font-weight: 400;
  font-size: 10.5px;
  color: var(--gray-soft);
  letter-spacing: .01em;
  white-space: nowrap;
}

.nav-rule {
  width: 1px;
  height: 34px;
  background: #e4e4e4;
  flex-shrink: 0;
}

.nav-links { display: flex; align-items: center; gap: 30px; }

.nav-links a {
  font-size: 16px;
  font-weight: 400;
  color: var(--ink);
  white-space: nowrap;
  transition: color .15s ease;
}
.nav-links a:hover { color: var(--purple); }

.nav-actions { display: flex; align-items: center; gap: 10px; margin-left: auto; }

.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 34px;
  height: 34px;
  background: none;
  border: none;
  margin-left: auto;
}
.nav-toggle span {
  display: block;
  width: 100%;
  height: 2px;
  background: var(--ink);
  border-radius: 2px;
}

.nav-actions-mobile { display: none; align-items: center; gap: 12px; padding-top: 18px; width: 100%; }
.nav-actions-mobile .btn-solid { flex: 1; }

/* ===== Hero (node 2:62) ===== */
.hero {
  max-width: var(--container);
  margin: 0 auto;
  padding: 124px 24px 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

/* Figma: 248x51, #f1f1f1, radius 36, Poppins Medium 16 */
.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  height: 51px;
  padding: 0 26px;
  background: var(--badge-bg);
  border-radius: 36px;
  font-weight: 500;
  font-size: 16px;
  color: var(--ink);
  transition: background .18s ease;
}
.hero-badge:hover { background: #e9e9e9; }
.hero-badge svg { transform: rotate(-90deg); }

/* Figma: Clash Display Regular 76px / 70px line-height */
.hero-heading {
  margin-top: 32px;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 76px;
  line-height: 70px;
  letter-spacing: -.005em;
  display: flex;
  flex-direction: column;
}

.line-dark { color: var(--ink); }

.line-gradient {
  background: var(--grad-headline);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* Figma: Clash Display Regular 20px, #6a6a6a, one line */
.hero-subtext {
  margin-top: 6px;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 20px;
  line-height: 1.4;
  color: var(--gray);
  max-width: 820px;
}

/* Figma: buttons sit at y=482, 20px gap between them */
.hero-actions {
  margin-top: 22px;
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
  justify-content: center;
}

/* ===== Hero stage: wavy backdrop + skewed inbox stack (nodes 2:46 + 2:466) ===== */
.hero-stage {
  position: relative;
  width: 100%;
  margin-top: 57px;
  display: flex;
  justify-content: center;
}

/* node 2:46 — full-bleed iridescent wave, sits 105px above the stack.
   z-index:-1 keeps its opaque #fcfcfc field from painting over the hero copy. */
.hero-stage {
  --wave-w: 1440px;
  --wave-h: 656px;
  --wave-top: -105px;
}

.hero-wave {
  position: absolute;
  top: var(--wave-top);
  left: 50%;
  width: var(--wave-w);
  height: var(--wave-h);
  margin-left: calc(var(--wave-w) / -2);
  background: url('assets/images/hero-wave.png') no-repeat center top;
  background-size: var(--wave-w) var(--wave-h);
  pointer-events: none;
  z-index: -1;
}

/* Figma nodes 2:80 / 2:81 — a hue rising at the far left and right edges beside
   the stack. Figma uses linear-gradient(to top, #1a1a1a, transparent); see the
   .hue-light variant below for the white reading that was tested against it. */
/* Sized and placed off the wave variables so the hue always ends flush with the
   wave's bottom edge, the way Figma cuts both at y=1144. Ratios are Figma's:
   204/656 tall, 332/1440 and 269/1440 wide, right edge starting at x=1171. */
.stage-hue {
  position: absolute;
  top: calc(var(--wave-top) + var(--wave-h) * .689);
  height: calc(var(--wave-h) * .311);
  left: 50%;
  pointer-events: none;
  z-index: -1;
  background: linear-gradient(to top, rgba(26, 26, 26, .88), rgba(26, 26, 26, 0));
}
.stage-hue-left {
  margin-left: calc(var(--wave-w) / -2);
  width: calc(var(--wave-w) * .2306);
}
.stage-hue-right {
  margin-left: calc(var(--wave-w) * .3132);
  width: calc(var(--wave-w) * .1868);
}

/* White reading, kept for comparison. Figma's black won: it keeps the wave
   saturated and grounds the stack, where white just hazes the colour out. */
body.hue-light .stage-hue {
  background: linear-gradient(to top, rgba(255, 255, 255, .85), rgba(255, 255, 255, 0));
}

/* Figma's stack spans x 55 → 1320, wider than the 1200 copy container */
.stack {
  position: relative;
  z-index: 1;
  width: 1265px;
  height: 600px;
}

/* Shared geometry for every panel in the stack */
.stack-card,
.stack-ghost {
  position: absolute;
  left: 0;
  top: 0;
  width: 1100px;
  /* Softened from Figma's flat 6px #1e1e1e — same weight, less harsh edge */
  border: 5px solid var(--panel-border);
  border-radius: 24px 24px 0 0;
  background: var(--panel);
  transform-origin: top left;
  /* clip-path clips reliably through transforms, unlike overflow+radius */
  clip-path: inset(0 round 24px 24px 0 0);
  overflow: hidden;
}

.stack-card {
  /* natural ratio of the inbox screenshots — nothing gets cropped */
  aspect-ratio: 1781 / 883;
  margin: 0;
  /* Cards stay fully opaque so the front one never reveals the card behind it.
     Depth comes from the scrim, offset and scale instead of element opacity. */
  transition: transform 1.6s cubic-bezier(.65, 0, .35, 1),
              box-shadow 1.6s cubic-bezier(.65, 0, .35, 1);
}

.stack-card img {
  width: 100%;
  height: 100%;
  object-fit: fill;
}

/* Darkens the card that has slipped to the back, without making it see-through.
   The scrim is split around the 800ms z-index swap so both cards sit at the SAME
   scrim value at the exact moment paint order flips. Without this the incoming
   card visibly snaps brighter as it comes forward. */
.card-scrim {
  position: absolute;
  inset: 0;
  background: #0b0b0b;
  opacity: 0;
  pointer-events: none;
  transition: opacity .8s cubic-bezier(.4, 0, .6, 1);
}

/* Outgoing card darkens during the first half, while it is still on top */
.stack-card.is-back .card-scrim {
  opacity: .42;
  transition-delay: 0s;
}

/* Incoming card brightens during the second half, after it has come forward */
.stack-card.is-front .card-scrim {
  opacity: 0;
  transition-delay: .8s;
}

/* node 2:471/2:477/2:482 — bottom fade over each panel */
.card-fade {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 52%;
  background: linear-gradient(to top, rgba(10, 10, 10, .4), rgba(10, 10, 10, 0));
  pointer-events: none;
}

/* Front / back positions — same transform function list so they interpolate cleanly.
   z-index is swapped from JS at the midpoint of the slide, never mid-overlap. */
.stack-card.is-front {
  transform: translate(92px, 0) scale(1) skewX(var(--skew)) scaleY(.97);
  box-shadow: 0 42px 70px -28px rgba(20, 20, 20, .42);
}

.stack-card.is-back {
  transform: translate(28px, 66px) scale(.965) skewX(var(--skew)) scaleY(.97);
  box-shadow: 0 30px 50px -30px rgba(20, 20, 20, .3);
}

/* deepest ghost panel — pure depth, matches Figma's third layer at 18% */
.stack-ghost {
  z-index: 1;
  height: 330px;
  opacity: .18;
  transform: translate(-36px, 132px) scale(.94) skewX(var(--skew)) scaleY(.97);
}

@media (prefers-reduced-motion: reduce) {
  .stack-card, .card-scrim { transition: none; }
}

/* ===== Responsive ===== */
@media (max-width: 1240px) {
  .hero-heading { font-size: 64px; line-height: 60px; }
  .stack { width: 960px; height: 472px; }
  .stack-card, .stack-ghost { width: 850px; }
  .stack-ghost { height: 250px; }
  .stack-card.is-front { transform: translate(80px, 0) scale(1) skewX(var(--skew)) scaleY(.97); }
  .stack-card.is-back { transform: translate(25px, 52px) scale(.965) skewX(var(--skew)) scaleY(.97); }
  .stack-ghost { transform: translate(-28px, 104px) scale(.94) skewX(var(--skew)) scaleY(.97); }
  .hero-stage { --wave-w: 1250px; --wave-h: 570px; --wave-top: -88px; }
}

/* The longer wordmark plus five nav items runs out of room before the mobile
   breakpoint, so the bar tightens here rather than wrapping. */
@media (max-width: 1120px) {
  .brand-name { font-size: 19px; }
  .brand-mark { height: 30px; }
  .nav-links { gap: 22px; }
  .nav-links a { font-size: 15px; }
  .navbar { gap: 18px; }
}

@media (max-width: 1000px) {
  .nav-links { gap: 20px; }
  .hero { padding-top: 88px; }
  .hero-heading { font-size: 54px; line-height: 52px; }
  .hero-subtext { font-size: 18px; }
  .stack { width: 760px; height: 380px; }
  .stack-card, .stack-ghost { width: 670px; border-width: 5px; }
  .stack-ghost { height: 195px; }
  .stack-card.is-front { transform: translate(62px, 0) scale(1) skewX(var(--skew)) scaleY(.97); }
  .stack-card.is-back { transform: translate(20px, 42px) scale(.965) skewX(var(--skew)) scaleY(.97); }
  .stack-ghost { transform: translate(-22px, 82px) scale(.94) skewX(var(--skew)) scaleY(.97); }
  .hero-stage { --wave-w: 1000px; --wave-h: 456px; --wave-top: -70px; }
}

@media (max-width: 860px) {
  .navbar { position: relative; flex-wrap: wrap; padding-top: 24px; }
  .nav-rule { display: none; }
  .nav-toggle { display: flex; }
  .nav-actions { display: none; }
  .nav-actions-mobile { display: flex; }

  .nav-links {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: var(--page);
    padding: 8px 24px 18px;
    max-height: 0;
    overflow: hidden;
    box-shadow: 0 18px 30px -22px rgba(20, 20, 20, .25);
    transition: max-height .28s ease;
    z-index: 20;
  }
  .nav-links.is-open { max-height: 360px; }
  .nav-links a { padding: 14px 0; border-bottom: 1px solid #ededed; }

  .hero { padding-top: 64px; }
  .hero-heading { font-size: 42px; line-height: 42px; }
  .hero-badge { height: 46px; font-size: 15px; }
  .hero-subtext { font-size: 17px; margin-top: 14px; }
  .btn-large { height: 50px; padding: 0 30px; font-size: 17px; }

  .stack { width: 560px; height: 285px; }
  .stack-card, .stack-ghost { width: 495px; border-width: 4px; border-radius: 18px 18px 0 0; clip-path: inset(0 round 18px 18px 0 0); }
  .stack-ghost { height: 145px; }
  .stack-card.is-front { transform: translate(46px, 0) scale(1) skewX(var(--skew)) scaleY(.97); }
  .stack-card.is-back { transform: translate(15px, 32px) scale(.965) skewX(var(--skew)) scaleY(.97); }
  .stack-ghost { transform: translate(-16px, 62px) scale(.94) skewX(var(--skew)) scaleY(.97); }
  .hero-stage { --wave-w: 780px; --wave-h: 355px; --wave-top: -52px; }
}

/* Below this the skewed stack stops reading well — flatten to a single clean card */
@media (max-width: 620px) {
  .brand-mark { height: 27px; width: auto; }
  .brand-name { font-size: 22px; }
  .hero-heading { font-size: 34px; line-height: 35px; }
  .hero-badge { font-size: 14px; padding: 0 20px; }
  .hero-actions { flex-direction: column; width: 100%; gap: 12px; }
  .hero-actions .btn-large { width: 100%; }

  .hero-stage { margin-top: 42px; }
  .stack { width: 100%; height: auto; }
  .stack-ghost { display: none; }
  .stack-card {
    position: relative;
    width: 100%;
    transform: none !important;
    opacity: 1;
    border-radius: 16px;
    clip-path: inset(0 round 16px);
    border-width: 4px;
  }
  /* only the active card shows once flattened */
  .stack-card.is-back { display: none; }
  .hero-stage { --wave-w: 560px; --wave-h: 255px; --wave-top: -34px; }
  /* keeps the wave from bleeding into the first section */
  .hero { padding-bottom: 56px; }
}

/* =========================================================
   SECTIONS
   Rhythm follows Landing-Light: 1200px column, Clash Display
   headings, Poppins body copy.
   ========================================================= */
.section {
  max-width: var(--container);
  margin: 0 auto;
  padding: 150px 24px 0;
}
.section-tight { padding-top: 120px; }

.section-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  margin-bottom: 72px;
}

/* Figma icon-grid heading: Clash Display ~54px */
.section-title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 54px;
  line-height: 1.06;
  letter-spacing: -.01em;
  color: var(--ink);
}

.section-sub {
  margin-top: 20px;
  max-width: 620px;
  font-size: 18px;
  line-height: 1.6;
  color: var(--gray);
}

/* ===== Feature callouts (Figma node 2:174 icon grid) ===== */
.feature-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 68px 60px;
}

.feature { text-align: left; }

/* Figma tile: 80x80, softly rounded, very light fill */
.feature-tile {
  width: 80px;
  height: 80px;
  border-radius: 22px;
  background: #f5f5f5;
  border: 1px solid #ededed;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--purple);
  margin-bottom: 26px;
}
.feature-tile svg { width: 32px; height: 32px; }

.feature h3 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 21px;
  line-height: 1.25;
  color: var(--ink);
  margin-bottom: 10px;
}

.feature p {
  font-size: 16px;
  line-height: 1.65;
  color: var(--gray);
  max-width: 330px;
}

/* ===== How it works ===== */
.steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
  list-style: none;
}

.step {
  padding: 36px 34px 38px;
  border: 1px solid #ececec;
  border-radius: 22px;
  background: #fff;
}

.step-num {
  display: inline-block;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 15px;
  letter-spacing: .06em;
  color: var(--purple);
  margin-bottom: 20px;
}

.step h3 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 22px;
  line-height: 1.25;
  color: var(--ink);
  margin-bottom: 10px;
}

.step p { font-size: 16px; line-height: 1.65; color: var(--gray); }

/* ===== Billing toggle (AI Landing Page node 2:198) ===== */
.billing-toggle {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 6px;
  background: #f1f1f1;
  border-radius: 333px;
  width: fit-content;
  margin: -34px auto 44px;
}

.billing-opt {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  border: none;
  background: transparent;
  padding: 11px 30px;
  border-radius: 100px;
  font-size: 16px;
  font-weight: 500;
  color: var(--gray);
  transition: background .2s ease, color .2s ease, box-shadow .2s ease;
}
.billing-opt.is-active {
  background: #fff;
  color: var(--ink);
  box-shadow: 0 2px 8px rgba(20, 20, 20, .08);
}

.billing-hint {
  font-size: 12px;
  font-weight: 600;
  color: var(--purple);
  background: rgba(85, 82, 255, .1);
  padding: 4px 9px;
  border-radius: 100px;
  white-space: nowrap;
}

/* ===== Plans (AI Landing Page nodes 2:204 / 2:256) ===== */
.plans {
  display: flex;
  justify-content: center;
  align-items: stretch;
  gap: 26px;
}

.plan {
  position: relative;
  flex: 0 1 424px;
  display: flex;
  flex-direction: column;
  gap: 30px;
  padding: 38px 34px 34px;
  background: #fff;
  border: 1px solid #ececec;
  border-radius: 24px;
}

/* Featured card mirrors the accented middle plan on AI Landing Page 1 */
.plan.is-featured {
  border: 3px solid var(--purple);
  box-shadow: 0 40px 70px -40px rgba(85, 82, 255, .45);
}

.plan-flag {
  position: absolute;
  top: -14px;
  left: 34px;
  background: var(--purple);
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .02em;
  padding: 6px 14px;
  border-radius: 100px;
}

.plan-head { display: flex; flex-direction: column; }

.plan-name {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 26px;
  color: var(--ink);
  margin-bottom: 12px;
}
.plan.is-featured .plan-name { color: var(--purple); }

.plan-desc {
  font-size: 15px;
  line-height: 1.6;
  color: var(--gray);
  margin-bottom: 22px;
  min-height: 48px;
}

.plan-price { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }

.price-amount {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 44px;
  line-height: 1;
  letter-spacing: -.03em;
  color: var(--ink);
}

.price-per { font-size: 16px; color: var(--gray); }

.price-badge {
  font-size: 12px;
  font-weight: 600;
  color: #fff;
  background: var(--purple);
  padding: 5px 10px;
  border-radius: 24px;
}
.price-badge[hidden], .price-note[hidden] { display: none; }

.price-note { margin-top: 9px; font-size: 14px; color: var(--gray-soft); }

/* Figma separator: hairline that fades out at both ends */
.plan-rule {
  display: block;
  height: 1px;
  background: linear-gradient(90deg, rgba(26,26,26,0), rgba(26,26,26,.14) 50%, rgba(26,26,26,0));
}

.plan-included { font-size: 15px; color: var(--gray); margin-bottom: 16px; }

.plan-features { list-style: none; display: flex; flex-direction: column; gap: 13px; }

.plan-features li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 15px;
  line-height: 1.55;
  color: var(--ink);
}

/* Tick circle, drawn rather than shipped as an asset */
.tick {
  flex-shrink: 0;
  width: 21px;
  height: 21px;
  margin-top: 1px;
  border-radius: 50%;
  border: 1.5px solid var(--purple);
  position: relative;
}
.tick::after {
  content: "";
  position: absolute;
  left: 6px;
  top: 4.5px;
  width: 5px;
  height: 9px;
  border: solid var(--purple);
  border-width: 0 1.7px 1.7px 0;
  transform: rotate(45deg);
}

/* Pro-only perks get a filled badge tick, so the extras you gain over Basic
   read as a step up rather than as more of the same list. */
.plan.is-featured .plan-features li:not(:first-child) .tick {
  background: var(--purple);
  border-color: #fff;
  box-shadow: 0 0 0 1.5px var(--purple);
}
.plan.is-featured .plan-features li:not(:first-child) .tick::after {
  border-color: #fff;
}

.plan-cta { margin-top: auto; width: 100%; }

/* ===== Callback / contact (AI Landing Page node 2:666) ===== */
.contact {
  position: relative;
  margin-top: 150px;
  padding: 0 24px;
  overflow: hidden;
}

/* Light-theme reading of the dark page's radial glow */
.contact-glow {
  position: absolute;
  top: -180px;
  left: 50%;
  width: 1120px;
  height: 720px;
  margin-left: -560px;
  background: radial-gradient(closest-side, rgba(85,82,255,.16), rgba(210,81,255,.09) 55%, rgba(255,255,255,0) 100%);
  pointer-events: none;
  z-index: 0;
}

.contact-inner {
  position: relative;
  z-index: 1;
  max-width: 1200px;
  margin: 0 auto;
  padding: 96px 0 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.contact-title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 58px;
  line-height: 1.06;
  letter-spacing: -.01em;
  color: var(--ink);
}

.contact-sub {
  margin-top: 20px;
  max-width: 560px;
  font-size: 18px;
  line-height: 1.6;
  color: var(--gray);
}

.callback-form {
  margin-top: 48px;
  width: 100%;
  max-width: 780px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  text-align: left;
}

.field { display: flex; flex-direction: column; gap: 8px; }
.field-wide { grid-column: 1 / -1; }

.field label { font-size: 14px; font-weight: 500; color: var(--ink); }

.field input,
.field select,
.field textarea {
  font-family: var(--font-body);
  font-size: 15px;
  color: var(--ink);
  background: #fff;
  border: 1px solid #e2e2e2;
  border-radius: 14px;
  padding: 15px 18px;
  width: 100%;
  transition: border-color .18s ease, box-shadow .18s ease;
}
.field textarea { resize: vertical; min-height: 96px; }

.field input::placeholder,
.field textarea::placeholder { color: #b4b4b4; }

.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--purple);
  box-shadow: 0 0 0 3px rgba(85, 82, 255, .14);
}
.field input[aria-invalid="true"] { border-color: #d94a4a; }

.form-foot {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
  margin-top: 4px;
}

.form-status { font-size: 14px; color: var(--gray); }
.form-status.is-ok { color: #1a8a4a; }
.form-status.is-err { color: #d94a4a; }

/* ===== Footer (Landing-Light node 2:414) ===== */
.site-footer {
  max-width: var(--container);
  margin: 0 auto;
  padding: 140px 24px 60px;
}

.footer-top {
  display: grid;
  grid-template-columns: 444px 1fr;
  gap: 80px;
  padding-bottom: 72px;
}

.footer-sub h3 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 27px;
  color: var(--ink);
  margin-bottom: 12px;
}
.footer-sub > p { font-size: 15px; line-height: 1.6; color: var(--gray); margin-bottom: 24px; }

/* Figma: pill field with the button nested inside on the right */
.subscribe {
  display: flex;
  align-items: center;
  gap: 8px;
  background: #f4f4f4;
  border: 1px solid #ececec;
  border-radius: 100px;
  padding: 6px 6px 6px 22px;
  max-width: 444px;
}
.subscribe input {
  flex: 1;
  min-width: 0;
  border: none;
  background: transparent;
  font-family: var(--font-body);
  font-size: 15px;
  color: var(--ink);
  padding: 12px 0;
}
.subscribe input:focus { outline: none; }
.subscribe input::placeholder { color: #a8a8a8; }
.subscribe .btn-solid { height: 42px; padding: 0 24px; flex-shrink: 0; }

.subscribe-status { margin-top: 10px; font-size: 13px; color: var(--gray); min-height: 18px; }
.subscribe-status.is-ok { color: #1a8a4a; }
.subscribe-status.is-err { color: #d94a4a; }

.footer-links {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
}

.footer-col { display: flex; flex-direction: column; }
.footer-col h4 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 20px;
  color: var(--ink);
  margin-bottom: 22px;
}
.footer-col a {
  font-size: 16px;
  color: var(--gray);
  padding: 8px 0;
  transition: color .15s ease;
}
.footer-col a:hover { color: var(--purple); }

.footer-bottom {
  display: flex;
  align-items: center;
  gap: 26px;
  padding-top: 40px;
  border-top: 1px solid #ededed;
}

.footer-brand { display: flex; align-items: center; gap: 13px; }
.footer-rule { width: 1px; height: 44px; background: #e4e4e4; }
.footer-copy { font-size: 15px; color: var(--gray); }
.footer-legal { margin-left: auto; font-size: 15px; color: var(--gray); display: flex; align-items: center; gap: 12px; }
.footer-legal a { transition: color .15s ease; }
.footer-legal a:hover { color: var(--purple); }

/* =========================================================
   SECTION RESPONSIVE
   ========================================================= */
@media (max-width: 1100px) {
  .section-title { font-size: 46px; }
  .contact-title { font-size: 46px; }
  .feature-grid { gap: 56px 44px; }
  .plans { gap: 20px; }
  .footer-top { grid-template-columns: 1fr; gap: 56px; }
}

@media (max-width: 900px) {
  .section { padding-top: 110px; }
  .contact { margin-top: 110px; }
  .feature-grid { grid-template-columns: repeat(2, 1fr); }
  .steps { grid-template-columns: 1fr; }
  .plans { flex-direction: column; align-items: center; }
  .plan { flex: 1 1 auto; width: 100%; max-width: 460px; }
  .footer-links { gap: 28px; }
}

@media (max-width: 620px) {
  .section { padding-top: 88px; }
  .section-head { margin-bottom: 52px; }
  .section-title { font-size: 34px; }
  .section-sub { font-size: 16px; }
  .contact { margin-top: 88px; }
  .contact-title { font-size: 34px; }
  .contact-sub { font-size: 16px; }

  .feature-grid { grid-template-columns: 1fr; gap: 44px; }
  .feature-tile { width: 66px; height: 66px; border-radius: 18px; margin-bottom: 20px; }
  .feature-tile svg { width: 27px; height: 27px; }
  .feature p { max-width: none; }

  .billing-toggle { margin-top: -20px; }
  .billing-opt { padding: 10px 20px; font-size: 15px; }
  .billing-hint { font-size: 11px; }

  .price-amount { font-size: 38px; }
  .plan { padding: 32px 24px 28px; }

  .callback-form { grid-template-columns: 1fr; gap: 16px; }
  .form-foot .btn-large { width: 100%; }

  .footer-links { grid-template-columns: 1fr; gap: 8px; }
  .footer-col h4 { margin-bottom: 12px; }
  .footer-bottom { flex-wrap: wrap; gap: 16px; }
  .footer-rule { display: none; }
  .footer-legal { margin-left: 0; width: 100%; }
  .site-footer { padding-top: 96px; }
}

/* =========================================================
   EASY TO INTEGRATE (Landing-Light node 2:368)
   Text column left, scrolling provider cloud right with a
   fade at the top and bottom of the window.
   ========================================================= */
.integrate {
  max-width: var(--container);
  margin: 0 auto;
  padding: 150px 24px 0;
}

.integrate-inner {
  display: grid;
  grid-template-columns: 1fr 650px;
  gap: 60px;
  align-items: center;
}

/* Figma: Clash Display Regular 48px, leading-none */
.integrate-title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 48px;
  line-height: 1;
  letter-spacing: -.01em;
  color: var(--ink);
  display: flex;
  flex-direction: column;
}

/* Figma gradient: #5653ff → #d252ff, left to right */
.integrate-grad {
  background: linear-gradient(90deg, #5653ff, #d252ff);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.integrate-sub {
  margin-top: 24px;
  max-width: 430px;
  font-size: 17px;
  line-height: 1.65;
  color: var(--gray);
}

/* Figma node 2:373 — 650x635 window.
   Masking the window itself (rather than laying gradient panels over it) means
   the content genuinely fades to transparent at the edges, so no sliver of a
   dark logo can ever peek past the overlay. */
.logo-window {
  position: relative;
  height: 635px;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 27%, #000 73%, transparent 100%);
  mask-image: linear-gradient(to bottom, transparent 0, #000 27%, #000 73%, transparent 100%);
}

.logo-track {
  display: flex;
  flex-direction: column;
  align-items: center;
  animation: logo-scroll 38s linear infinite;
}
/* The PNG is cropped to exactly four row pitches, so two copies butt together
   with no seam and no flex `gap` (a gap would desync the -50% loop). */
.logo-track img {
  width: 650px;
  max-width: 100%;
  flex-shrink: 0;
}

/* Two stacked copies, so translating by exactly half the track loops seamlessly */
@keyframes logo-scroll {
  from { transform: translateY(0); }
  to   { transform: translateY(-50%); }
}

.logo-window:hover .logo-track { animation-play-state: paused; }

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

/* Figma nodes 2:374 / 2:375 are overlay gradients; the mask above replaces them. */

/* =========================================================
   CASE STUDIES (Landing-Light node 2:382)
   ========================================================= */
.case-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 26px;
}

/* Figma: white card, 1px #eaeaea, radius 12 */
.case-card {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid #eaeaea;
  border-radius: 12px;
  padding: 27px 28px 30px;
}

.case-media {
  border-radius: 12px;
  overflow: hidden;
  aspect-ratio: 350 / 249;
  margin-bottom: 26px;
  background: #f2f2f2;
}
.case-media img { width: 100%; height: 100%; object-fit: cover; }

/* Figma: Clash Display Regular 32px, leading 1.1 */
.case-card h3 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 30px;
  line-height: 1.1;
  color: var(--ink);
  margin-bottom: 14px;
}

/* Figma: Poppins Regular 14px #3a3a3a */
.case-card p {
  font-size: 14px;
  line-height: 1.7;
  color: #3a3a3a;
  margin-bottom: 26px;
}

/* Figma: Clash Display Medium 20px #3a3a3a with a 16px arrow */
.case-link {
  margin-top: auto;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 19px;
  color: #3a3a3a;
  transition: color .18s ease, gap .18s ease;
}
.case-link svg { width: 18px; height: 8px; }
.case-link:hover { color: var(--purple); gap: 16px; }

/* =========================================================
   SUBSCRIBE TO OUR LIST (Landing-Light node 2:407)
   ========================================================= */
.list-banner {
  position: relative;
  margin-top: 100px;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 40px;
  padding: 62px 79px;
  border: 1px solid #eaeaea;
  border-radius: 12px;
  background: linear-gradient(90deg, #fff 0%, rgba(255,255,255,.9) 29.5%, rgba(255,255,255,.9) 70.5%, #fff 100%);
}

/* Figma: Clash Display Medium 36px */
.list-banner h3 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 36px;
  line-height: 1.1;
  color: var(--ink);
  margin-bottom: 14px;
}
.list-banner-copy p {
  font-family: var(--font-display);
  font-size: 16px;
  line-height: 20px;
  color: #3a3a3a;
}

/* Figma: 536x71 field, radius 12, with a 163x63 button inset */
.list-field {
  display: flex;
  align-items: center;
  width: 536px;
  max-width: 100%;
  height: 71px;
  padding: 4px 4px 4px 28px;
  background: rgba(234, 234, 234, .8);
  border-radius: 12px;
}
.list-field input {
  flex: 1;
  min-width: 0;
  border: none;
  background: transparent;
  font-family: var(--font-display);
  font-size: 16px;
  color: var(--ink);
}
.list-field input:focus { outline: none; }
.list-field input::placeholder { color: #5a5a5a; }
.list-field input[aria-invalid="true"]::placeholder { color: #d94a4a; }

.list-field button {
  flex-shrink: 0;
  width: 163px;
  height: 63px;
  border: none;
  border-radius: 12px;
  background: #6353ff;
  color: #fff;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 16px;
  transition: opacity .18s ease;
}
.list-field button:hover { opacity: .92; }

.list-status {
  position: absolute;
  left: 79px;
  bottom: 26px;
  font-size: 13px;
  color: var(--gray);
}
.list-status.is-ok { color: #1a8a4a; }
.list-status.is-err { color: #d94a4a; }

/* =========================================================
   CLOSING CTA on the silk backdrop (nodes 2:3 + 2:458)
   ========================================================= */
.closer {
  position: relative;
  margin-top: 150px;
  padding: 130px 24px 140px;
  overflow: hidden;
}

.closer-silk {
  position: absolute;
  inset: 0;
  background: url('assets/images/cta-silk.png') no-repeat center center;
  background-size: cover;
  pointer-events: none;
  z-index: 0;
}

.closer-inner {
  position: relative;
  z-index: 1;
  max-width: 900px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

/* Figma: Clash Display 64px, leading-none, gradient on the second line */
.closer-title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 64px;
  line-height: 1.02;
  letter-spacing: -.01em;
  color: var(--ink);
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.closer-grad {
  font-weight: 500;
  background: linear-gradient(90deg, #5653ff, #d252ff);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* Figma node 2:461: #6353ff, radius 36, padding 20/42, Poppins Medium 18 */
.closer-btn {
  margin-top: 50px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 60px;
  padding: 0 42px;
  background: #6353ff;
  color: #fff;
  border-radius: 36px;
  font-weight: 500;
  font-size: 18px;
  transition: transform .18s ease, opacity .18s ease;
}
.closer-btn:hover { transform: translateY(-1px); opacity: .93; }

/* =========================================================
   FOOTER SUPPORT BLOCK + DIALOG
   ========================================================= */
.footer-sub .btn-solid { margin-top: 4px; }

.footer-linkbtn {
  border: none;
  background: none;
  padding: 8px 0;
  text-align: left;
  font-family: var(--font-body);
  font-size: 16px;
  color: var(--gray);
  transition: color .15s ease;
}
.footer-linkbtn:hover { color: var(--purple); }

.support-backdrop {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: rgba(20, 20, 20, .45);
  backdrop-filter: blur(3px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.support-backdrop[hidden] { display: none; }

.support-panel {
  position: relative;
  width: 100%;
  max-width: 520px;
  max-height: 90vh;
  overflow-y: auto;
  background: #fff;
  border-radius: 20px;
  padding: 40px 38px 34px;
  box-shadow: 0 40px 80px -30px rgba(20, 20, 20, .45);
}

.support-close {
  position: absolute;
  top: 16px;
  right: 18px;
  width: 34px;
  height: 34px;
  border: none;
  background: none;
  font-size: 26px;
  line-height: 1;
  color: var(--gray);
  border-radius: 50%;
  transition: background .15s ease, color .15s ease;
}
.support-close:hover { background: #f2f2f2; color: var(--ink); }

.support-panel h2 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 30px;
  color: var(--ink);
  margin-bottom: 10px;
}
.support-lead { font-size: 15px; line-height: 1.6; color: var(--gray); margin-bottom: 26px; }

.support-form { display: flex; flex-direction: column; gap: 18px; }
.support-form .btn-large { width: 100%; }
.support-status { font-size: 14px; }
.support-status.is-ok { color: #1a8a4a; }
.support-status.is-err { color: #d94a4a; }
.support-alt { font-size: 14px; color: var(--gray); text-align: center; }
.support-alt a { color: var(--purple); }
.support-alt a:hover { text-decoration: underline; }

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width: 1100px) {
  .integrate-inner { grid-template-columns: 1fr 480px; gap: 40px; }
  .logo-window { height: 520px; }
  .integrate-title { font-size: 40px; }
  .closer-title { font-size: 50px; }
  .case-card h3 { font-size: 26px; }
  .list-banner { padding: 48px 44px; }
  .list-status { left: 44px; bottom: 18px; }
}

@media (max-width: 900px) {
  .integrate { padding-top: 110px; }
  .integrate-inner { grid-template-columns: 1fr; gap: 48px; }
  .integrate-copy { text-align: center; }
  .integrate-sub { margin-left: auto; margin-right: auto; }
  .integrate-title { align-items: center; }
  .logo-window { height: 420px; }

  .case-grid { grid-template-columns: 1fr; gap: 20px; }
  .case-card { max-width: 520px; margin: 0 auto; width: 100%; }

  .list-banner { grid-template-columns: 1fr; text-align: center; justify-items: center; }
  .list-status { position: static; margin-top: 4px; }
  .closer { margin-top: 110px; padding: 100px 24px 110px; }
}

@media (max-width: 620px) {
  .integrate { padding-top: 88px; }
  .integrate-title { font-size: 32px; }
  .integrate-sub { font-size: 16px; }
  .logo-window { height: 330px; }
  .logo-track img { width: 340px; }

  .case-card h3 { font-size: 24px; }
  .list-banner { margin-top: 64px; padding: 36px 24px; }
  .list-banner h3 { font-size: 27px; }
  .list-field { flex-direction: column; height: auto; width: 100%; padding: 10px; gap: 10px; }
  .list-field input { width: 100%; text-align: center; padding: 10px 0; }
  .list-field button { width: 100%; height: 52px; }

  .closer { margin-top: 88px; padding: 76px 24px 84px; }
  .closer-title { font-size: 32px; }
  .closer-btn { margin-top: 34px; width: 100%; }

  .support-panel { padding: 32px 24px 26px; }
  .support-panel h2 { font-size: 25px; }
}