:root {
  --ink: #171221;
  --muted: #685f75;
  --paper: #fffdf8;
  --paper-2: #f7f2ff;
  --paper-3: #f1ecfa;
  --purple: #7b3ff2;
  --purple-dark: #5420b3;
  --purple-soft: #e9ddff;
  --lime: #d7ff64;
  --cyan: #72ddff;
  --orange: #ff9d66;
  --pink: #ff82bd;
  --green: #3ccf91;
  --white: #fff;
  --line: rgba(27, 18, 39, 0.13);
  --shadow: 0 22px 60px rgba(71, 40, 114, 0.15);
  --shadow-soft: 0 12px 32px rgba(71, 40, 114, 0.09);
  --radius: 24px;
  --radius-sm: 14px;
  --max: 1200px;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: 96px;
}

body {
  margin: 0;
  color: var(--ink);
  background: var(--paper);
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

body::before {
  position: fixed;
  inset: 0;
  z-index: -2;
  content: "";
  pointer-events: none;
  background:
    radial-gradient(circle at 8% 10%, rgba(215, 255, 100, 0.22), transparent 27rem),
    radial-gradient(circle at 90% 22%, rgba(114, 221, 255, 0.17), transparent 29rem),
    var(--paper);
}

a {
  color: inherit;
  text-decoration: none;
}

button,
input,
select,
textarea {
  font: inherit;
}

button,
a {
  -webkit-tap-highlight-color: transparent;
}

img,
svg {
  display: block;
  max-width: 100%;
}

.skip-link {
  position: fixed;
  top: 8px;
  left: 8px;
  z-index: 200;
  padding: 10px 14px;
  color: white;
  background: var(--ink);
  border-radius: 10px;
  transform: translateY(-160%);
}

.skip-link:focus {
  transform: none;
}

.container {
  width: min(calc(100% - 40px), var(--max));
  margin-inline: auto;
}

.announcement {
  padding: 8px 20px;
  color: white;
  text-align: center;
  background: var(--ink);
  font-size: 13px;
  letter-spacing: 0.01em;
}

.announcement strong {
  color: var(--lime);
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  border-bottom: 1px solid transparent;
  background: rgba(255, 253, 248, 0.82);
  backdrop-filter: blur(18px);
  transition: border-color 180ms ease, box-shadow 180ms ease;
}

.site-header.is-scrolled {
  border-bottom-color: var(--line);
  box-shadow: 0 8px 30px rgba(27, 18, 39, 0.05);
}

.nav-wrap {
  display: flex;
  min-height: 76px;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  flex: 0 0 auto;
  font-size: 19px;
  font-weight: 850;
  letter-spacing: -0.035em;
}

.brand img {
  width: 30px;
  height: 30px;
}

.brand small {
  color: var(--muted);
  font-size: 11px;
  font-weight: 650;
  letter-spacing: 0.02em;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 25px;
  margin-left: auto;
  font-size: 14px;
  font-weight: 650;
}

.nav-links a {
  transition: color 150ms ease;
}

.nav-links a:hover {
  color: var(--purple);
}

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

.language-link {
  display: inline-grid;
  width: 39px;
  height: 39px;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 50%;
  font-size: 12px;
  font-weight: 800;
}

.menu-toggle {
  display: none;
  width: 42px;
  height: 42px;
  padding: 10px;
  border: 1px solid var(--line);
  background: transparent;
  border-radius: 12px;
}

.menu-toggle span {
  display: block;
  height: 2px;
  margin: 4px 0;
  background: var(--ink);
  border-radius: 2px;
}

.button {
  display: inline-flex;
  min-height: 46px;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 11px 20px;
  border: 1px solid transparent;
  border-radius: 999px;
  cursor: pointer;
  font-weight: 780;
  line-height: 1.1;
  transition: transform 150ms ease, box-shadow 150ms ease, background 150ms ease;
}

.button:hover {
  transform: translateY(-2px);
}

.button-primary {
  color: white;
  background: var(--purple);
  box-shadow: 0 8px 24px rgba(123, 63, 242, 0.25);
}

.button-primary:hover {
  background: var(--purple-dark);
  box-shadow: 0 12px 30px rgba(123, 63, 242, 0.32);
}

.button-dark {
  color: white;
  background: var(--ink);
}

.button-outline {
  border-color: var(--line);
  background: rgba(255, 255, 255, 0.7);
}

.button-large {
  min-height: 54px;
  padding-inline: 26px;
}

.arrow {
  font-size: 19px;
  line-height: 1;
}

.hero {
  position: relative;
  overflow: hidden;
  padding: 54px 0 60px;
}

.hero::after {
  position: absolute;
  right: -160px;
  top: -110px;
  z-index: -1;
  width: 520px;
  height: 520px;
  content: "";
  border: 1px solid rgba(123, 63, 242, 0.12);
  border-radius: 50%;
  box-shadow:
    0 0 0 70px rgba(123, 63, 242, 0.025),
    0 0 0 140px rgba(123, 63, 242, 0.018);
}

.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(540px, 1.08fr);
  align-items: center;
  gap: 60px;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 22px;
  color: var(--purple-dark);
  font-size: 12px;
  font-weight: 850;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.eyebrow::before {
  width: 8px;
  height: 8px;
  content: "";
  background: var(--lime);
  border: 2px solid var(--ink);
  border-radius: 50%;
  box-shadow: 2px 2px 0 var(--ink);
}

.hero h1 {
  max-width: 760px;
  margin: 0;
  /* Was clamp(46px, 6.3vw, 83px): at 900 weight inside the 0.92fr hero column
     that forced the headline to wrap to five lines and swallow the viewport.
     Scaled to the column it actually occupies so it holds two lines. */
  font-size: clamp(38px, 4.4vw, 60px);
  font-weight: 900;
  letter-spacing: -0.055em;
  line-height: 1.02;
}

.hero h1 .marker {
  position: relative;
  display: inline-block;
  color: var(--purple);
}

.hero h1 .marker::after {
  position: absolute;
  right: -2px;
  /* Was bottom:-7px/height:14px, which drew the lime bar straight through
     letter descenders. Sits clear of the baseline now. */
  bottom: -12px;
  left: 0;
  z-index: -1;
  height: 11px;
  content: "";
  background: var(--lime);
  border-radius: 60% 40% 56% 35%;
  transform: rotate(-1deg);
}

.hero-copy {
  max-width: 650px;
  margin: 27px 0 30px;
  color: var(--muted);
  font-size: clamp(18px, 2vw, 21px);
  line-height: 1.55;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.hero-note {
  display: flex;
  flex-wrap: wrap;
  gap: 11px 19px;
  margin-top: 24px;
  color: var(--muted);
  font-size: 13px;
}

.hero-note span::before {
  margin-right: 7px;
  color: var(--green);
  content: "●";
}

.product-window {
  position: relative;
  min-height: 580px;
}

.product-window::before {
  position: absolute;
  inset: 10% 4% 0 7%;
  z-index: -1;
  content: "";
  background: var(--purple-soft);
  border: 1px solid rgba(123, 63, 242, 0.12);
  border-radius: 50% 42% 48% 44%;
  transform: rotate(5deg);
}

.app-mockup {
  position: absolute;
  inset: 32px 0 44px;
  display: grid;
  grid-template-columns: 155px 1fr;
  overflow: hidden;
  background: #fbfaff;
  border: 1px solid rgba(27, 18, 39, 0.14);
  border-radius: 21px;
  box-shadow: 0 40px 90px rgba(66, 33, 116, 0.21);
  transform: perspective(1300px) rotateY(-4deg) rotateX(2deg);
}

.mock-sidebar {
  padding: 18px 13px;
  color: #eae1ff;
  background: #21152f;
}

.mock-brand {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 27px;
  color: white;
  font-size: 12px;
  font-weight: 800;
}

.mock-brand img {
  width: 20px;
  height: 20px;
}

.mock-nav-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 9px;
  margin: 3px 0;
  border-radius: 7px;
  font-size: 9px;
}

.mock-nav-item::before {
  width: 12px;
  height: 12px;
  content: "";
  border: 1px solid currentColor;
  border-radius: 3px;
  opacity: 0.7;
}

.mock-nav-item.active {
  color: white;
  background: var(--purple);
}

.mock-main {
  padding: 20px;
}

.mock-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
}

.mock-top strong {
  font-size: 15px;
}

.mock-avatar {
  width: 28px;
  height: 28px;
  color: white;
  background: var(--purple);
  border-radius: 50%;
  font-size: 9px;
  line-height: 28px;
  text-align: center;
}

.metric-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

.metric-card {
  padding: 13px;
  background: white;
  border: 1px solid #ece7f3;
  border-radius: 11px;
  box-shadow: 0 5px 15px rgba(42, 27, 59, 0.04);
}

.metric-card small {
  display: block;
  margin-bottom: 5px;
  color: #80788c;
  font-size: 8px;
}

.metric-card b {
  font-size: 19px;
  letter-spacing: -0.04em;
}

.metric-card em {
  float: right;
  padding: 2px 5px;
  color: #137752;
  background: #d9f8eb;
  border-radius: 10px;
  font-size: 7px;
  font-style: normal;
}

.chart-card {
  margin-top: 11px;
  padding: 14px;
  background: white;
  border: 1px solid #ece7f3;
  border-radius: 11px;
}

.chart-label {
  display: flex;
  justify-content: space-between;
  font-size: 9px;
  font-weight: 700;
}

.chart {
  position: relative;
  height: 112px;
  margin-top: 14px;
  overflow: hidden;
  background: repeating-linear-gradient(to bottom, #f3eff7 0 1px, transparent 1px 28px);
}

.chart svg {
  position: absolute;
  inset: 4px 0 0;
  width: 100%;
  height: 100%;
}

.activity-row {
  display: grid;
  grid-template-columns: 7px 1fr auto;
  align-items: center;
  gap: 8px;
  padding: 8px 0;
  border-bottom: 1px solid #f0ebf4;
  font-size: 8px;
}

.activity-row i {
  width: 7px;
  height: 7px;
  background: var(--green);
  border-radius: 50%;
}

.activity-row time {
  color: #91899b;
}

.float-card {
  position: absolute;
  z-index: 3;
  padding: 13px 15px;
  background: white;
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: var(--shadow-soft);
  font-size: 11px;
  font-weight: 750;
  animation: float 5s ease-in-out infinite;
}

.float-card span {
  display: block;
  color: var(--muted);
  font-size: 8px;
  font-weight: 600;
}

.float-card.one {
  top: 4px;
  right: -18px;
}

.float-card.two {
  bottom: 14px;
  left: -28px;
  animation-delay: -2s;
}

.float-card .dot {
  display: inline-block;
  width: 7px;
  height: 7px;
  margin-right: 6px;
  background: var(--green);
  border-radius: 50%;
}

@keyframes float {
  0%,
  100% { transform: translateY(0) rotate(-1deg); }
  50% { transform: translateY(-8px) rotate(1deg); }
}

.capability-strip {
  padding: 20px 0 74px;
}

.capability-label {
  margin: 0 0 17px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-align: center;
  text-transform: uppercase;
}

.capability-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 9px;
}

.capability-list span {
  padding: 9px 15px;
  background: white;
  border: 1px solid var(--line);
  border-radius: 999px;
  box-shadow: 0 4px 12px rgba(37, 24, 54, 0.04);
  font-size: 13px;
  font-weight: 700;
}

.section {
  /* Was 108px (216px per section, ~2160px of dead space over the page).
     Tightened for density — the reference site fits headline, sub, CTA and
     real product UI inside one viewport. */
  padding: 72px 0;
}

.section-soft {
  background: var(--paper-2);
  border-block: 1px solid rgba(123, 63, 242, 0.09);
}

.section-dark {
  color: white;
  background: var(--ink);
}

.section-heading {
  max-width: 800px;
  margin-bottom: 38px;
}

.section-heading.centered {
  margin-inline: auto;
  text-align: center;
}

.section-heading .eyebrow {
  margin-bottom: 15px;
}

.section-dark .eyebrow {
  color: var(--lime);
}

.section-heading h2 {
  margin: 0;
  /* Was clamp(36px, 5vw, 60px) — section headings rendered nearly as large as
     the h1 and pushed all real content below the fold. */
  font-size: clamp(28px, 3.2vw, 42px);
  font-weight: 890;
  letter-spacing: -0.05em;
  line-height: 1.06;
}

.section-heading p {
  max-width: 680px;
  margin: 18px 0 0;
  color: var(--muted);
  font-size: 18px;
}

.section-dark .section-heading p {
  color: #bcb2c9;
}

.centered p {
  margin-inline: auto;
}

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

.workflow-card {
  position: relative;
  min-height: 265px;
  padding: 26px 24px;
  overflow: hidden;
  background: white;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-soft);
}

.workflow-card:nth-child(2) { background: #f1eaff; }
.workflow-card:nth-child(3) { background: #eafaff; }
.workflow-card:nth-child(4) { background: #f3ffd4; }

.step-number {
  display: inline-grid;
  width: 34px;
  height: 34px;
  place-items: center;
  margin-bottom: 38px;
  color: white;
  background: var(--ink);
  border-radius: 10px;
  font-size: 12px;
  font-weight: 850;
  transform: rotate(-5deg);
}

.workflow-card h3 {
  margin: 0 0 9px;
  font-size: 22px;
  letter-spacing: -0.035em;
}

.workflow-card p {
  margin: 0;
  color: var(--muted);
  font-size: 14px;
}

.workflow-card::after {
  position: absolute;
  right: -15px;
  bottom: -18px;
  width: 72px;
  height: 72px;
  content: "";
  border: 2px solid rgba(27, 18, 39, 0.08);
  border-radius: 50%;
  box-shadow: 0 0 0 12px rgba(27, 18, 39, 0.025);
}

.bento-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 18px;
}

.bento-card {
  position: relative;
  min-height: 290px;
  padding: 30px;
  overflow: hidden;
  background: white;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-soft);
}

.bento-card.span-7 { grid-column: span 7; }
.bento-card.span-5 { grid-column: span 5; }
.bento-card.span-4 { grid-column: span 4; }
.bento-card.span-8 { grid-column: span 8; }

.bento-card.purple { color: white; background: var(--purple); }
.bento-card.dark { color: white; background: var(--ink); }
.bento-card.lime { background: var(--lime); }
.bento-card.cyan { background: #dcf7ff; }
.bento-card.orange { background: #fff0e7; }

.feature-icon {
  display: grid;
  width: 46px;
  height: 46px;
  place-items: center;
  margin-bottom: 55px;
  background: rgba(255, 255, 255, 0.86);
  border: 1px solid rgba(27, 18, 39, 0.11);
  border-radius: 14px;
  font-size: 22px;
}

.purple .feature-icon,
.dark .feature-icon {
  color: var(--ink);
}

.bento-card h3 {
  max-width: 510px;
  margin: 0 0 10px;
  font-size: 25px;
  letter-spacing: -0.04em;
}

.bento-card p {
  max-width: 560px;
  margin: 0;
  color: var(--muted);
  font-size: 15px;
}

.bento-card.purple p,
.bento-card.dark p {
  color: rgba(255, 255, 255, 0.72);
}

.mini-filter {
  position: absolute;
  right: -15px;
  top: 37px;
  width: 235px;
  padding: 17px;
  color: var(--ink);
  background: white;
  border: 1px solid var(--line);
  border-radius: 15px;
  box-shadow: var(--shadow-soft);
  transform: rotate(3deg);
}

.mini-filter b {
  display: block;
  margin-bottom: 10px;
  font-size: 11px;
}

.mini-filter span {
  display: inline-block;
  margin: 3px;
  padding: 5px 8px;
  background: var(--paper-3);
  border-radius: 6px;
  font-size: 8px;
}

.mini-message {
  position: absolute;
  top: 34px;
  right: 26px;
  width: 225px;
  padding: 14px;
  color: var(--ink);
  background: white;
  border-radius: 16px 16px 4px 16px;
  box-shadow: var(--shadow-soft);
  font-size: 9px;
  transform: rotate(-2deg);
}

.mini-message::before {
  display: block;
  margin-bottom: 7px;
  color: var(--purple);
  content: "✦ AI";
  font-weight: 850;
}

.mini-kanban {
  display: flex;
  gap: 7px;
  margin-top: 28px;
}

.mini-kanban > div {
  flex: 1;
  padding: 8px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 9px;
}

.mini-kanban small {
  display: block;
  margin-bottom: 6px;
  color: #cfc5d9;
  font-size: 7px;
}

.mini-kanban i {
  display: block;
  height: 24px;
  margin: 4px 0;
  background: rgba(255, 255, 255, 0.9);
  border-radius: 5px;
}

.detail-section {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  align-items: center;
  gap: 80px;
}

.detail-section + .detail-section {
  margin-top: 120px;
}

.detail-section.reverse .detail-copy {
  order: 2;
}

.detail-copy h3 {
  margin: 0 0 18px;
  font-size: clamp(34px, 4vw, 50px);
  letter-spacing: -0.055em;
  line-height: 1.04;
}

.detail-copy > p {
  margin-bottom: 25px;
  color: var(--muted);
  font-size: 17px;
}

.check-list {
  display: grid;
  gap: 12px;
  padding: 0;
  list-style: none;
}

.check-list li {
  position: relative;
  padding-left: 32px;
  font-weight: 650;
}

.check-list li::before {
  position: absolute;
  top: 3px;
  left: 0;
  display: grid;
  width: 21px;
  height: 21px;
  place-items: center;
  color: var(--ink);
  content: "✓";
  background: var(--lime);
  border-radius: 50%;
  font-size: 12px;
  font-weight: 900;
}

.visual-panel {
  position: relative;
  min-height: 430px;
  padding: 32px;
  overflow: hidden;
  background: var(--purple-soft);
  border: 1px solid rgba(123, 63, 242, 0.15);
  border-radius: 32px;
}

/* ── Real product screenshots ────────────────────────────────────────────────
   Actual captures of the app, replacing the CSS-drawn fake UI. Captured from a
   seeded demo account; see search-api/marketing-seed.js for what is real vs
   fictional in them and why. */
.shot {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid rgba(27, 18, 39, 0.14);
  border-radius: 14px;
  box-shadow: 0 18px 44px rgba(66, 33, 116, 0.17);
}

/* Screenshots are wide and detail-dense — a panel that only has to frame one
   doesn't need the tall min-height or the deep padding the mockups required. */
.visual-panel.has-shot {
  min-height: 0;
  padding: 18px;
  display: flex;
  align-items: center;
}
/* Two shots in one panel — the same view as a table and as a board. The
   detail grid centres the copy column, so the taller panel stays balanced. */
.visual-panel.has-shot.stacked {
  flex-direction: column;
  gap: 14px;
}

/* Hero: same tilted, cropped treatment the fake app window had, so swapping in
   a real capture doesn't flatten the composition. */
.app-shot {
  position: absolute;
  inset: 32px 0 44px;
  overflow: hidden;
  border: 1px solid rgba(27, 18, 39, 0.14);
  border-radius: 21px;
  box-shadow: 0 40px 90px rgba(66, 33, 116, 0.21);
  transform: perspective(1300px) rotateY(-4deg) rotateX(2deg);
}

.app-shot img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: left top;
}

@media (max-width: 900px) {
  .app-shot {
    position: relative;
    inset: auto;
    transform: none;
  }
  .app-shot img { height: auto; }
}

.visual-panel.cyan {
  background: #dff8ff;
}

.visual-panel.lime {
  background: #efffc2;
}

.filter-builder {
  max-width: 440px;
  margin: 30px auto 0;
  padding: 20px;
  background: white;
  border: 1px solid var(--line);
  border-radius: 18px;
  box-shadow: var(--shadow);
  transform: rotate(-1deg);
}

.filter-builder h4,
.outreach-card h4 {
  margin: 0 0 15px;
  font-size: 13px;
}

.filter-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin: 8px 0;
}

.fake-input {
  padding: 10px 11px;
  color: #756b80;
  background: #faf8fc;
  border: 1px solid #e8e2ed;
  border-radius: 8px;
  font-size: 9px;
}

.result-pill {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 14px;
  padding: 10px 12px;
  color: white;
  background: var(--purple);
  border-radius: 9px;
  font-size: 9px;
  font-weight: 800;
}

.outreach-card {
  max-width: 440px;
  margin: 24px auto 0;
  padding: 20px;
  background: white;
  border: 1px solid var(--line);
  border-radius: 18px;
  box-shadow: var(--shadow);
  transform: rotate(1deg);
}

.subject-line {
  padding-bottom: 11px;
  border-bottom: 1px solid #eee8f2;
  color: #746b7c;
  font-size: 9px;
}

.email-lines span {
  display: block;
  height: 7px;
  margin: 10px 0;
  background: #ede8f1;
  border-radius: 8px;
}

.email-lines span:nth-child(2) { width: 88%; }
.email-lines span:nth-child(3) { width: 62%; }

.ai-suggestion {
  margin-top: 15px;
  padding: 12px;
  background: #f0e8ff;
  border-radius: 10px;
  color: var(--purple-dark);
  font-size: 9px;
  font-weight: 700;
}

.pipeline-board {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-top: 20px;
}

.pipeline-col {
  min-height: 260px;
  padding: 12px;
  background: rgba(255, 255, 255, 0.55);
  border: 1px solid rgba(27, 18, 39, 0.08);
  border-radius: 13px;
}

.pipeline-col b {
  display: block;
  margin-bottom: 12px;
  font-size: 9px;
}

.deal-card {
  margin: 8px 0;
  padding: 10px;
  background: white;
  border-radius: 9px;
  box-shadow: 0 4px 12px rgba(58, 37, 82, 0.08);
  font-size: 8px;
}

.deal-card strong {
  display: block;
  margin-bottom: 8px;
}

.deal-card span {
  color: #7b7184;
}

.role-grid,
.integration-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 17px;
}

.role-card,
.integration-card {
  padding: 28px;
  background: white;
  border: 1px solid var(--line);
  border-radius: 21px;
}

.role-card h3,
.integration-card h3 {
  margin: 16px 0 9px;
  font-size: 20px;
  letter-spacing: -0.03em;
}

.role-card p,
.integration-card p {
  margin: 0;
  color: var(--muted);
  font-size: 14px;
}

.role-badge,
.integration-icon {
  display: grid;
  width: 45px;
  height: 45px;
  place-items: center;
  background: var(--purple-soft);
  border-radius: 13px;
  font-weight: 850;
}

.integration-icon.ms {
  color: white;
  background: #2777d3;
}

.integration-icon.ir {
  color: white;
  background: #e84464;
}

.integration-icon.ss {
  color: white;
  background: var(--purple);
}

.trust-row {
  display: grid;
  grid-template-columns: 0.8fr 1.2fr;
  align-items: center;
  gap: 70px;
  margin-top: 75px;
  padding: 42px;
  color: white;
  background: var(--ink);
  border-radius: 28px;
}

.trust-row h3 {
  margin: 0 0 10px;
  font-size: 31px;
  letter-spacing: -0.04em;
}

.trust-row p {
  margin: 0;
  color: #bfb5ca;
}

.trust-points {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}

.trust-points span {
  padding: 13px;
  color: #eee7f5;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  font-size: 13px;
  font-weight: 650;
}

.pricing-panel {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 0.85fr;
  align-items: center;
  gap: 70px;
  padding: 65px;
  overflow: hidden;
  background: var(--lime);
  border: 1px solid rgba(27, 18, 39, 0.13);
  border-radius: 34px;
  box-shadow: var(--shadow);
}

.pricing-panel::after {
  position: absolute;
  right: -80px;
  bottom: -110px;
  width: 300px;
  height: 300px;
  content: "";
  border: 45px solid rgba(123, 63, 242, 0.16);
  border-radius: 50%;
}

.pricing-panel h2 {
  margin: 0 0 16px;
  font-size: clamp(38px, 5vw, 60px);
  letter-spacing: -0.055em;
  line-height: 1;
}

.pricing-panel p {
  max-width: 620px;
  margin: 0;
}

.pricing-list {
  position: relative;
  z-index: 2;
  padding: 26px;
  background: rgba(255, 255, 255, 0.75);
  border: 1px solid rgba(27, 18, 39, 0.1);
  border-radius: 20px;
  backdrop-filter: blur(5px);
}

.pricing-list ul {
  display: grid;
  gap: 11px;
  padding: 0;
  margin: 0 0 22px;
  list-style: none;
}

.pricing-list li::before {
  margin-right: 8px;
  content: "✓";
  font-weight: 900;
}

.faq-list {
  max-width: 870px;
  margin-inline: auto;
  border-top: 1px solid var(--line);
}

.faq-list details {
  border-bottom: 1px solid var(--line);
}

.faq-list summary {
  position: relative;
  padding: 25px 50px 25px 0;
  cursor: pointer;
  list-style: none;
  font-size: 18px;
  font-weight: 760;
}

.faq-list summary::-webkit-details-marker {
  display: none;
}

.faq-list summary::after {
  position: absolute;
  top: 21px;
  right: 5px;
  display: grid;
  width: 31px;
  height: 31px;
  place-items: center;
  content: "+";
  background: var(--purple-soft);
  border-radius: 50%;
  font-size: 20px;
  transition: transform 180ms ease;
}

.faq-list details[open] summary::after {
  transform: rotate(45deg);
}

.faq-list details p {
  max-width: 750px;
  padding: 0 0 25px;
  margin: 0;
  color: var(--muted);
}

.demo-section {
  position: relative;
  padding: 105px 0;
  overflow: hidden;
  color: white;
  background: var(--purple);
}

.demo-section::before,
.demo-section::after {
  position: absolute;
  content: "";
  border-radius: 50%;
  pointer-events: none;
}

.demo-section::before {
  top: -170px;
  left: -160px;
  width: 460px;
  height: 460px;
  border: 80px solid rgba(215, 255, 100, 0.17);
}

.demo-section::after {
  right: -100px;
  bottom: -170px;
  width: 390px;
  height: 390px;
  border: 65px solid rgba(114, 221, 255, 0.14);
}

.demo-grid {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 0.8fr 1.2fr;
  align-items: start;
  gap: 80px;
}

.demo-copy {
  position: sticky;
  top: 125px;
}

.demo-copy h2 {
  margin: 0 0 18px;
  font-size: clamp(43px, 5vw, 66px);
  letter-spacing: -0.06em;
  line-height: 0.98;
}

.demo-copy p {
  color: rgba(255, 255, 255, 0.75);
  font-size: 18px;
}

.demo-contact {
  display: grid;
  gap: 8px;
  margin-top: 30px;
  font-size: 14px;
  font-weight: 700;
}

.demo-form {
  padding: 38px;
  color: var(--ink);
  background: var(--paper);
  border-radius: 27px;
  box-shadow: 0 30px 70px rgba(31, 14, 55, 0.25);
}

.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}

.field {
  display: grid;
  gap: 7px;
}

.field.full {
  grid-column: 1 / -1;
}

.field label,
.group-label {
  font-size: 13px;
  font-weight: 780;
}

.required {
  color: var(--purple);
}

.field input,
.field select {
  width: 100%;
  min-height: 50px;
  padding: 11px 14px;
  color: var(--ink);
  background: white;
  border: 1px solid #dcd3e3;
  border-radius: 11px;
  outline: none;
  transition: border-color 150ms ease, box-shadow 150ms ease;
}

.field input:focus,
.field select:focus {
  border-color: var(--purple);
  box-shadow: 0 0 0 4px rgba(123, 63, 242, 0.12);
}

.type-options {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}

.type-option {
  position: relative;
}

.type-option input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.type-option span {
  display: block;
  padding: 13px 15px;
  background: white;
  border: 1px solid #dcd3e3;
  border-radius: 11px;
  cursor: pointer;
  font-size: 13px;
  font-weight: 700;
  text-align: center;
}

.type-option input:checked + span {
  color: var(--purple-dark);
  background: var(--purple-soft);
  border-color: var(--purple);
}

.privacy-check {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 20px 0;
  color: var(--muted);
  font-size: 12px;
}

.privacy-check input {
  width: 17px;
  height: 17px;
  margin-top: 2px;
  accent-color: var(--purple);
}

.privacy-check a {
  color: var(--purple-dark);
  text-decoration: underline;
}

.honeypot {
  position: absolute !important;
  left: -10000px !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
}

.form-status {
  display: none;
  margin: 14px 0 0;
  padding: 12px;
  border-radius: 10px;
  font-size: 13px;
}

.form-status.is-visible {
  display: block;
}

.form-status.success {
  color: #125b40;
  background: #dff8ec;
}

.form-status.error {
  color: #8a2439;
  background: #ffe5ea;
}

.demo-form .button {
  width: 100%;
}

.site-footer {
  padding: 70px 0 28px;
  color: #d8cedf;
  background: #160f1f;
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.45fr 0.7fr 0.7fr 1fr;
  gap: 55px;
}

.site-footer .brand {
  margin-bottom: 18px;
  color: white;
}

.site-footer .brand small {
  color: #988ca4;
}

.footer-intro p {
  max-width: 330px;
  color: #a99eb4;
  font-size: 14px;
}

.footer-col h3 {
  margin: 0 0 17px;
  color: white;
  font-size: 13px;
}

.footer-col a,
.footer-col address span {
  display: block;
  margin: 9px 0;
  color: #aaa0b5;
  font-size: 13px;
  font-style: normal;
}

.footer-col a:hover {
  color: var(--lime);
}

.footer-bottom {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  padding-top: 27px;
  margin-top: 48px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  color: #82768d;
  font-size: 12px;
}

.legal-hero {
  padding: 85px 0 55px;
  background: var(--paper-2);
  border-bottom: 1px solid rgba(123, 63, 242, 0.1);
}

.legal-hero h1 {
  max-width: 900px;
  margin: 0;
  font-size: clamp(43px, 6vw, 70px);
  letter-spacing: -0.06em;
  line-height: 1;
}

.legal-hero p {
  color: var(--muted);
}

.legal-layout {
  display: grid;
  grid-template-columns: 240px minmax(0, 760px);
  gap: 70px;
  align-items: start;
  padding: 70px 0 110px;
}

.legal-aside {
  position: sticky;
  top: 110px;
  padding: 18px;
  background: var(--paper-2);
  border: 1px solid var(--line);
  border-radius: 16px;
}

.legal-aside a {
  display: block;
  padding: 6px 5px;
  color: var(--muted);
  font-size: 12px;
}

.legal-aside a:hover {
  color: var(--purple);
}

.draft-warning {
  padding: 16px 18px;
  margin-bottom: 35px;
  color: #664d00;
  background: #fff4c7;
  border: 1px solid #e5c95d;
  border-radius: 13px;
  font-size: 13px;
}

.legal-content h2 {
  padding-top: 15px;
  margin: 47px 0 13px;
  font-size: 26px;
  letter-spacing: -0.035em;
}

.legal-content h2:first-of-type {
  margin-top: 0;
}

.legal-content h3 {
  margin: 28px 0 10px;
  font-size: 18px;
}

.legal-content p,
.legal-content li {
  color: #514859;
}

.legal-content li + li {
  margin-top: 8px;
}

.legal-content a {
  color: var(--purple-dark);
  text-decoration: underline;
}

.cookie-banner {
  position: fixed;
  right: 22px;
  bottom: 22px;
  z-index: 300;
  width: min(440px, calc(100% - 44px));
  padding: 22px;
  background: white;
  border: 1px solid var(--line);
  border-radius: 18px;
  box-shadow: 0 25px 70px rgba(29, 17, 43, 0.25);
}

.cookie-banner h2 {
  margin: 0 0 8px;
  font-size: 18px;
}

.cookie-banner p {
  margin: 0 0 16px;
  color: var(--muted);
  font-size: 13px;
}

.cookie-banner a {
  color: var(--purple-dark);
  text-decoration: underline;
}

.cookie-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.cookie-actions .button {
  min-height: 40px;
  padding: 9px 15px;
  font-size: 12px;
}

[hidden] {
  display: none !important;
}

.reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 600ms ease, transform 600ms ease;
}

.reveal.is-visible {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .reveal {
    opacity: 1;
    transform: none;
  }
}

@media (max-width: 1050px) {
  .nav-links {
    position: fixed;
    top: 76px;
    right: 20px;
    left: 20px;
    display: none;
    padding: 20px;
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: 18px;
    box-shadow: var(--shadow);
  }
  .nav-links.is-open {
    display: grid;
  }
  .nav-actions .button-outline {
    display: none;
  }
  .menu-toggle {
    display: block;
  }
  .hero-grid {
    grid-template-columns: 1fr;
  }
  .hero-copy {
    max-width: 750px;
  }
  .product-window {
    width: min(100%, 720px);
    margin-inline: auto;
  }
  .workflow-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .bento-card.span-7,
  .bento-card.span-5,
  .bento-card.span-4,
  .bento-card.span-8 {
    grid-column: span 6;
  }
  .detail-section {
    gap: 45px;
  }
  .footer-grid {
    grid-template-columns: 1.3fr 1fr 1fr;
  }
  .footer-intro {
    grid-column: 1 / -1;
  }
}

@media (max-width: 780px) {
  .container {
    width: min(calc(100% - 28px), var(--max));
  }
  .announcement {
    font-size: 11px;
  }
  .nav-wrap {
    min-height: 66px;
  }
  .site-header .button-primary {
    display: none;
  }
  .nav-links {
    top: 68px;
  }
  .hero {
    padding-top: 55px;
  }
  .hero h1 {
    font-size: clamp(43px, 14vw, 65px);
  }
  .hero-grid {
    gap: 35px;
  }
  .product-window {
    min-height: 405px;
  }
  .app-mockup {
    grid-template-columns: 100px 1fr;
    inset: 20px 0 35px;
  }
  .mock-sidebar {
    padding: 13px 8px;
  }
  .mock-nav-item {
    font-size: 6px;
  }
  .mock-main {
    padding: 12px;
  }
  .float-card {
    display: none;
  }
  .section {
    padding: 76px 0;
  }
  .section-heading {
    margin-bottom: 38px;
  }
  .workflow-grid,
  .role-grid,
  .integration-grid {
    grid-template-columns: 1fr;
  }
  .bento-card.span-7,
  .bento-card.span-5,
  .bento-card.span-4,
  .bento-card.span-8 {
    grid-column: 1 / -1;
  }
  .mini-filter,
  .mini-message {
    opacity: 0.38;
  }
  .detail-section,
  .detail-section.reverse {
    grid-template-columns: 1fr;
    gap: 30px;
  }
  .detail-section.reverse .detail-copy {
    order: initial;
  }
  .detail-section + .detail-section {
    margin-top: 85px;
  }
  .trust-row,
  .pricing-panel,
  .demo-grid {
    grid-template-columns: 1fr;
    gap: 35px;
  }
  .trust-row,
  .pricing-panel {
    padding: 34px 25px;
  }
  .demo-copy {
    position: static;
  }
  .form-grid {
    grid-template-columns: 1fr;
  }
  .field.full {
    grid-column: auto;
  }
  .demo-form {
    padding: 25px 20px;
  }
  .footer-grid {
    grid-template-columns: 1fr 1fr;
    gap: 35px;
  }
  .legal-layout {
    grid-template-columns: 1fr;
    gap: 25px;
  }
  .legal-aside {
    position: static;
    display: flex;
    overflow-x: auto;
    gap: 8px;
  }
  .legal-aside a {
    white-space: nowrap;
  }
}

@media (max-width: 520px) {
  .brand small {
    display: none;
  }
  .hero-actions .button {
    width: 100%;
  }
  .product-window {
    min-height: 350px;
  }
  .app-mockup {
    grid-template-columns: 78px 1fr;
  }
  .metric-grid {
    grid-template-columns: 1fr 1fr;
  }
  .metric-card:last-child {
    display: none;
  }
  .workflow-grid {
    grid-template-columns: 1fr;
  }
  .workflow-card {
    min-height: 225px;
  }
  .mini-filter,
  .mini-message {
    display: none;
  }
  .bento-card {
    min-height: 260px;
  }
  .visual-panel {
    min-height: 360px;
    padding: 18px;
  }
  .pipeline-board {
    gap: 5px;
  }
  .pipeline-col {
    padding: 7px;
  }
  .deal-card {
    padding: 7px;
  }
  .trust-points,
  .type-options {
    grid-template-columns: 1fr;
  }
  .footer-grid {
    grid-template-columns: 1fr;
  }
  .footer-bottom {
    display: block;
  }
}

/* ── Screenshot lightbox ─────────────────────────────────────────────────────
   Product screenshots carry a lot of small detail and are unreadable at layout
   size, so each one opens full-resolution on click. */
.is-zoomable {
  cursor: zoom-in;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.is-zoomable:hover {
  transform: translateY(-3px);
  box-shadow: 0 26px 60px rgba(66, 33, 116, 0.24);
}

.is-zoomable:focus-visible {
  outline: 3px solid var(--purple);
  outline-offset: 4px;
}

.lightbox {
  position: fixed;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 28px;
  opacity: 0;
  background: rgba(14, 9, 24, 0.9);
  inset: 0;
  transition: opacity 0.22s ease;
}

.lightbox.is-open { opacity: 1; }

.lightbox img {
  max-width: 100%;
  max-height: 100%;
  background: var(--white);
  border-radius: 12px;
  box-shadow: 0 40px 120px rgba(0, 0, 0, 0.55);
}

.lightbox-close {
  position: absolute;
  top: 18px;
  right: 22px;
  width: 44px;
  height: 44px;
  color: var(--white);
  font-size: 30px;
  line-height: 1;
  background: rgba(255, 255, 255, 0.12);
  border: 0;
  border-radius: 50%;
  cursor: pointer;
}

.lightbox-close:hover { background: rgba(255, 255, 255, 0.22); }

body.has-lightbox { overflow: hidden; }

/* ── Two-up screenshot gallery ───────────────────────────────────────────────
   For views that deserve showing but don't warrant a full detail section. */
.shot-gallery {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 26px;
}

.shot-gallery figure {
  margin: 0;
}

.shot-gallery figcaption {
  margin-top: 12px;
  color: var(--muted);
  font-size: 14px;
}

.shot-gallery figcaption strong {
  display: block;
  margin-bottom: 3px;
  color: var(--ink);
  font-size: 15px;
  font-weight: 700;
}

@media (max-width: 860px) {
  .shot-gallery { grid-template-columns: minmax(0, 1fr); }
}

/* ── Mobile login link ───────────────────────────────────────────────────────
   At ≤1050px the header's "Logi sisse" outline button is hidden to fit the
   narrow bar, which left phones with NO way to reach the app. The hamburger
   menu carries the login link instead; on desktop the button exists, so the
   link stays hidden there. */
.nav-login {
  display: none;
}

@media (max-width: 1050px) {
  .nav-login {
    display: block;
    margin-top: 6px;
    padding-top: 14px;
    border-top: 1px solid var(--line);
    color: var(--purple-dark);
    font-weight: 750;
  }
}