/* ==========================================================================
   Sorn AI — SaaS landing page
   1. Tokens   2. Base   3. Layout   4. Components   5. Sections
   6. Product mock   7. Pricing   8. Motion   9. Responsive
   ========================================================================== */

/* 1. Tokens
   ========================================================================== */
:root {
  --ink: #14072a;
  --ink-soft: #2a2340;
  --text: #4a4560;
  --muted: #5b5670;
  --muted-2: #6b6580;
  --faint: #a49cb5;

  --bg: #ffffff;
  --bg-soft: #f7f5fb;
  --bg-tint: #fbfafe;
  --bg-dark: #14072a;
  --bg-darker: #0e051f;
  --bg-proof: #1a0838;

  --line: #e6e0f2;
  --line-soft: #f0ebf8;
  --line-strong: #dcd5ea;

  --purple: #9404fd;
  --purple-ink: #7a03d1;
  --magenta: #b11fc9;
  --pink: #d86cdb;
  --pink-light: #f08bcb;
  --lavender: #c8b3ff;
  --lavender-bg: #f3ecff;

  --green: #0b7a5c;
  --green-bg: #e7f6f0;
  --green-soft: #eef8f3;
  --red: #c2272d;
  --red-bg: #fff0f0;
  --amber-ink: #8a5a00;
  --amber-bg: #fff4de;
  --teal: #3fb8a0;
  --amber: #f2a93b;

  --grad-cta: linear-gradient(90deg, #c2389a, #9404fd);
  --grad-brand: linear-gradient(135deg, #9404fd, #b11fc9);

  --font-sans: "Geist", Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-app: "Space Grotesk", var(--font-sans);

  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 22px;
  --radius-xl: 28px;
  --radius-pill: 999px;

  --container: 1200px;
  --gutter: 24px;
  --header-h: 72px;

  --shadow-card: 0 30px 70px -34px rgba(20, 7, 42, 0.4);
  --shadow-cta: 0 14px 30px -14px rgba(148, 4, 253, 0.6);

  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
}

/* 2. Base
   ========================================================================== */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: var(--header-h);
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

h1,
h2,
h3,
p,
figure,
ul,
ol {
  margin: 0;
}

ul,
ol {
  padding: 0;
  list-style: none;
}

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

a {
  color: var(--purple-ink);
}

a:hover {
  color: var(--ink);
}

button,
input {
  font: inherit;
}

strong {
  font-variant-numeric: tabular-nums;
}

::selection {
  background: #e6d4ff;
  color: var(--ink);
}

:focus-visible {
  outline: 2px solid var(--purple);
  outline-offset: 3px;
  border-radius: 8px;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* 3. Layout
   ========================================================================== */
.container {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding-inline: var(--gutter);
}

.section {
  position: relative;
  padding-block: 80px 72px;
}

.section--soft {
  background: var(--bg-soft);
}

.section--dark {
  background: var(--bg-dark);
  color: #fff;
}

.section__stack {
  display: flex;
  flex-direction: column;
  gap: 48px;
}

.section__intro {
  display: flex;
  flex-direction: column;
  gap: 20px;
  max-width: 860px;
}

.section__intro--center {
  align-items: center;
  margin-inline: auto;
  text-align: center;
}

/* Inset “framed” sections (free check, testimonials) */
.framed {
  padding: 0 16px 16px;
}

.framed--top {
  padding-top: 16px;
}

.framed__panel {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-xl);
  background-color: var(--bg-dark);
  background-image: radial-gradient(rgba(255, 255, 255, 0.08) 1px, transparent 1px);
  background-size: 20px 20px;
  color: #fff;
}

.framed__panel--proof {
  background-color: var(--bg-proof);
  background-image: radial-gradient(rgba(255, 255, 255, 0.06) 1px, transparent 1px);
}

/* 4. Components
   ========================================================================== */

/* Display headings: muted lead-in line + strong second line */
.display {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: clamp(34px, 4.4vw, 58px);
  font-weight: 700;
  line-height: 1.04;
  letter-spacing: -0.035em;
  text-wrap: balance;
}

.display__lead {
  color: var(--muted);
  font-weight: 500;
}

.display__accent {
  color: var(--purple-ink);
}

.section--dark .display__lead {
  color: rgba(255, 255, 255, 0.55);
}

.section--dark .display__accent {
  color: var(--lavender);
}

.display--inline {
  display: block;
}

.lede {
  max-width: 720px;
  color: var(--text);
  font-size: 18px;
  line-height: 1.6;
}

.label {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 52px;
  padding: 14px 26px;
  border: 0;
  border-radius: var(--radius-pill);
  font-size: 16px;
  font-weight: 700;
  line-height: 1.2;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: transform 0.2s var(--ease-out), filter 0.2s ease, background-color 0.2s ease;
}

.btn:hover {
  filter: brightness(1.06);
  transform: translateY(-1px);
}

.btn--primary {
  background: var(--grad-cta);
  color: #fff;
  box-shadow: var(--shadow-cta);
}

.btn--primary:hover {
  color: #fff;
}

.btn--brand {
  background: var(--grad-brand);
  color: #fff;
}

.btn--brand:hover {
  color: #fff;
}

.btn--ghost {
  border: 1px solid var(--line-strong);
  background: transparent;
  color: var(--ink);
  font-weight: 500;
}

.btn--outline {
  border: 1.5px solid var(--ink);
  background: #fff;
  color: var(--ink);
}

.btn--dark {
  background: var(--ink);
  color: #fff;
}

.btn--dark:hover {
  color: #fff;
}

.btn--light {
  background: #fff;
  color: var(--ink);
}

.btn--block {
  width: 100%;
}

.btn--sm {
  min-height: 44px;
  padding: 10px 18px;
  font-size: 14px;
  font-weight: 600;
}

.btn[aria-busy="true"] {
  opacity: 0.7;
  pointer-events: none;
}

/* CTA row: short line of text + button */
.cta-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 14px 20px;
}

.cta-row__text {
  color: var(--text);
  font-size: 17px;
}

.text-link {
  font-weight: 700;
  text-decoration: none;
}

/* Small icon tiles for engine logos */
.logo-tile {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 42px;
  height: 42px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 6px 16px -10px rgba(20, 7, 42, 0.3);
}

.logo-tile img {
  width: 20px;
  height: 20px;
}

.logo-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  background: #fff;
}

.logo-chip img {
  width: 13px;
  height: 13px;
}

.logo-chip--locked {
  border-style: dashed;
  border-color: #d3cae6;
  background: transparent;
}

/* Status pills */
.pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  border-radius: var(--radius-pill);
  font-size: 14px;
  font-weight: 700;
  white-space: nowrap;
}

.pill--good {
  background: var(--green-bg);
  color: var(--green);
}

.pill--warn {
  background: var(--amber-bg);
  color: var(--amber-ink);
}

.pill--bad {
  background: var(--red-bg);
  color: var(--red);
}

.check-list {
  display: flex;
  flex-direction: column;
  gap: 9px;
}

.check-list li {
  display: flex;
  gap: 10px;
  font-size: 15px;
  line-height: 1.4;
}

.check-list svg {
  flex-shrink: 0;
  margin-top: 2px;
}

/* Particles (generated by main.js) */
.particles {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.particles__dot {
  position: absolute;
  border-radius: 50%;
  animation: particle-drift var(--dur, 3s) ease-in-out var(--delay, 0s) infinite alternate;
}

.section > .container,
.hero > .container {
  position: relative;
  z-index: 1;
}

/* 5. Sections
   ========================================================================== */

/* Header ------------------------------------------------------------------ */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  border-bottom: 1px solid #ece7f5;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: saturate(1.4) blur(10px);
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: var(--header-h);
  padding-block: 14px;
}

.brand {
  display: flex;
  flex-direction: column;
  color: var(--ink);
  line-height: 1;
  text-decoration: none;
}

.brand__word {
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.02em;
}

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

.brand__tag {
  margin-top: 4px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
}

.nav {
  display: flex;
  gap: 28px;
  font-size: 14px;
  font-weight: 500;
}

.nav a {
  color: #3d3852;
  text-decoration: none;
}

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

.site-header__actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.site-header__signin {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 12px 16px;
  color: var(--ink);
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
}

.menu-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid var(--line-strong);
  border-radius: 12px;
  background: #fff;
  color: var(--ink);
  cursor: pointer;
}

.menu-toggle__close {
  display: none;
}

.menu-toggle[aria-expanded="true"] .menu-toggle__open {
  display: none;
}

.menu-toggle[aria-expanded="true"] .menu-toggle__close {
  display: block;
}

.mobile-nav {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  display: flex;
  flex-direction: column;
  padding: 8px 20px 20px;
  border-bottom: 1px solid #ece7f5;
  background: #fff;
  box-shadow: 0 24px 40px -24px rgba(20, 7, 42, 0.35);
}

.mobile-nav[hidden] {
  display: none;
}

.mobile-nav a:not(.btn) {
  padding: 14px 0;
  border-bottom: 1px solid var(--line-soft);
  color: var(--ink);
  font-size: 17px;
  font-weight: 500;
  text-decoration: none;
}

.mobile-nav .btn {
  margin-top: 12px;
}

/* Hero -------------------------------------------------------------------- */
.hero {
  position: relative;
  overflow: hidden;
  border-bottom: 1px solid #ece7f5;
}

.hero__glow {
  position: absolute;
  top: -25%;
  right: -12%;
  width: 72%;
  height: 150%;
  background: radial-gradient(closest-side, rgba(148, 4, 253, 0.1), rgba(216, 108, 219, 0.06) 55%, transparent);
  pointer-events: none;
}

.hero__grid {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 56px;
  padding-block: 88px 96px;
}

.hero__copy {
  display: flex;
  flex: 1 1 480px;
  flex-direction: column;
  gap: 28px;
  min-width: 0;
}

.hero__title {
  font-size: clamp(40px, 5.2vw, 68px);
  font-weight: 700;
  line-height: 1.02;
  letter-spacing: -0.035em;
}

.hero__title em {
  color: var(--purple);
  font-style: normal;
}

.hero__lede {
  max-width: 560px;
  color: var(--text);
  font-size: 19px;
  line-height: 1.55;
}

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

.hero__engines {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  padding-top: 8px;
}

.hero__visual {
  flex: 1 1 420px;
  min-width: 0;
}

/* Hero answer card */
.answer-card {
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: #fff;
  box-shadow: var(--shadow-card);
}

.answer-card__bar {
  display: flex;
  align-items: center;
  padding: 12px 20px;
  border-bottom: 1px solid var(--line-soft);
  background: var(--bg-tint);
}

.answer-card__block {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 18px 20px 16px;
}

.answer-card__block + .answer-card__block {
  gap: 10px;
  padding-block: 16px;
  border-top: 1px solid var(--line-soft);
}

.step {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.step__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--ink);
  color: #fff;
  font-size: 11px;
  letter-spacing: 0;
}

.prompt-bubble {
  align-self: flex-end;
  max-width: 88%;
  padding: 10px 14px;
  border-radius: 14px 14px 4px 14px;
  background: var(--ink);
  color: #fff;
  font-size: 15px;
  line-height: 1.4;
}

.shortlist {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.shortlist__item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  border-radius: var(--radius-sm);
  background: var(--bg-soft);
  font-size: 15px;
  font-weight: 600;
}

.shortlist__rank {
  color: var(--muted);
  font-size: 12px;
}

.shortlist__status {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-left: auto;
  color: var(--green);
  font-size: 13px;
}

.shortlist__item--you {
  padding-block: 11px;
  border: 1.5px dashed #e5a3a6;
  background: #fff4f4;
  font-weight: 700;
}

.shortlist__item--you .shortlist__status {
  color: var(--red);
  font-weight: 700;
}

.reason {
  display: flex;
  align-items: baseline;
  gap: 10px;
  font-size: 14px;
  line-height: 1.4;
}

.reason__tag {
  flex-shrink: 0;
  width: 62px;
  padding: 3px 0;
  border-radius: 6px;
  background: var(--lavender-bg);
  color: var(--purple-ink);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-align: center;
}

.fix-box {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 0 20px 20px;
  padding: 16px 18px;
  border-radius: 14px;
  background: var(--ink);
  color: #fff;
}

.fix-box .step {
  color: var(--lavender);
}

.fix-box .step__num {
  background: var(--purple);
}

.fix-box p {
  font-size: 16px;
  font-weight: 600;
  line-height: 1.4;
}

/* Engine name rotator (top of hero card) */
.engine-rotator {
  position: relative;
  width: 150px;
  height: 22px;
  font-size: 14px;
  font-weight: 600;
}

.engine-rotator__item {
  position: absolute;
  inset: 0 auto auto 0;
  display: flex;
  align-items: center;
  gap: 8px;
  height: 22px;
  opacity: 0;
  animation: engine-fade 10s ease-in-out infinite both;
}

.engine-rotator__item img {
  width: 16px;
  height: 16px;
}

.engine-rotator__item:nth-child(2) { animation-delay: 2.5s; }
.engine-rotator__item:nth-child(3) { animation-delay: 5s; }
.engine-rotator__item:nth-child(4) { animation-delay: 7.5s; }

/* Why AI citations ------------------------------------------------------- */
.channel-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  gap: 16px;
}

.channel-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 26px;
  border: 1px solid var(--line);
  border-radius: 18px;
}

.channel-card__title {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 17px;
  font-weight: 700;
}

.channel-card p {
  color: var(--text);
  font-size: 15px;
  line-height: 1.55;
}

.channel-card--win {
  padding: 25px;
  border: 2px solid var(--purple);
  background: #fbf7ff;
}

.channel-card--win p {
  color: var(--ink-soft);
}

.stats-panel {
  display: flex;
  flex-direction: column;
  gap: 26px;
  padding: 32px;
  border: 1px solid #ece5f6;
  border-radius: var(--radius-lg);
  background: #f7f4fb;
}

.stats-panel__title {
  max-width: 760px;
  font-size: 20px;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: -0.01em;
}

.stats-panel__source {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.5;
}

.stats-panel__source a {
  color: inherit;
}

.stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
  gap: 24px 32px;
}

.stat {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding-top: 16px;
  border-top: 2px solid var(--ink);
}

.stat__num {
  color: var(--ink);
  font-size: 48px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
  counter-reset: num var(--num);
}

.stat__num::after {
  content: counter(num) "%";
}

.stat__track {
  display: block;
  height: 4px;
  margin: 4px 0 2px;
  border-radius: var(--radius-pill);
  background: #e6ddf2;
}

.stat__bar {
  display: block;
  width: 0;
  height: 100%;
  border-radius: inherit;
  background: var(--ink);
  transition: width 1.8s var(--ease-out);
}

.stat__label {
  color: var(--text);
  font-size: 15px;
  line-height: 1.5;
}

.stat--accent {
  border-top-color: var(--purple);
}

.stat--accent .stat__num {
  color: var(--purple-ink);
}

.stat--accent .stat__bar {
  background: var(--purple);
}

.stat:nth-child(2) .stat__num { animation-delay: 0.15s; }
.stat:nth-child(2) .stat__bar { transition-delay: 0.15s; }
.stat:nth-child(3) .stat__num { animation-delay: 0.3s; }
.stat:nth-child(3) .stat__bar { transition-delay: 0.3s; }
.stat:nth-child(4) .stat__num { animation-delay: 0.45s; }
.stat:nth-child(4) .stat__bar { transition-delay: 0.45s; }

.stats.is-visible .stat__num {
  animation: count-up 1.8s var(--ease-out) forwards;
}

.stats.is-visible .stat__bar {
  width: calc(var(--to) * 1%);
}

/* Differentiator -------------------------------------------------------- */
.diff {
  padding-block: 112px;
}

.compare-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
  gap: 20px;
}

.compare-card {
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 32px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: var(--radius-md);
}

.compare-card .label {
  color: rgba(255, 255, 255, 0.72);
}

.compare-card ul {
  display: flex;
  flex-direction: column;
  gap: 14px;
  color: rgba(255, 255, 255, 0.82);
  font-size: 16px;
}

.compare-card li {
  display: flex;
  gap: 12px;
}

.compare-card__dash {
  color: rgba(255, 255, 255, 0.5);
}

.compare-card--sorn {
  border-color: #9c6bff;
  background: rgba(148, 4, 253, 0.16);
}

.compare-card--sorn .label {
  color: var(--lavender);
}

.compare-card--sorn ul {
  color: #fff;
}

.compare-card--sorn svg {
  flex-shrink: 0;
  margin-top: 2px;
}

.rec-feature {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 40px;
}

.rec-feature__caption {
  display: flex;
  flex: 1 1 300px;
  flex-direction: column;
  gap: 14px;
  min-width: 0;
}

.rec-feature__title {
  font-size: clamp(24px, 2.4vw, 32px);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.02em;
}

.rec-feature__caption p {
  color: rgba(255, 255, 255, 0.72);
  font-size: 17px;
  line-height: 1.6;
}

/* Recreated “Recommendations” screen from the Sorn app */
.rec-screen {
  display: flex;
  flex: 0 1 560px;
  flex-direction: column;
  min-width: 0;
  min-height: min(560px, 100vw - 32px);
  padding: 8px;
  border-radius: 26px;
  background: #b566e6;
}

.rec-screen__inner {
  display: flex;
  flex: 1;
  flex-direction: column;
  overflow: hidden;
  border-radius: 20px;
  background: #fff;
  color: var(--ink);
}

.rec-screen__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 22px 24px;
  border-bottom: 1px solid #efe7f7;
  background: linear-gradient(90deg, #f1e4fb, #fbf7fe);
}

.rec-screen__title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 0.06em;
}

.rec-screen__sub {
  display: block;
  margin-top: 6px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
}

.rec-screen__viewall {
  flex-shrink: 0;
  padding: 8px 12px;
  border: 1px solid #e6daf5;
  border-radius: var(--radius-sm);
  background: #fff;
  color: var(--purple-ink);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
}

.rec-screen__body {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 16px;
  padding: 22px 24px 24px;
}

.rec-item {
  display: flex;
  gap: 16px;
  padding-left: 16px;
  border-left: 2px solid #8fd9b9;
}

.rec-item__main {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
}

.rec-item__priority {
  align-self: flex-start;
  padding: 4px 10px;
  border: 1px solid #f6dfb0;
  border-radius: var(--radius-pill);
  background: #fff7e6;
  color: #b7791f;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
}

.rec-item__headline {
  font-size: 20px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.01em;
}

.rec-item__body {
  color: #3d3852;
  font-size: 15px;
  line-height: 1.55;
}

.rec-item__brand {
  font-size: 0.8em;
  font-weight: 800;
  letter-spacing: 0.02em;
  color: var(--ink);
}

.rec-item__actions {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding-top: 4px;
}

.meters {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 28px;
  padding-left: 18px;
}

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

.meter__track {
  position: relative;
  width: 76px;
  height: 5px;
  overflow: hidden;
  border-radius: var(--radius-pill);
  background: #e8e4ee;
}

.meter__fill {
  position: absolute;
  inset: 0 auto 0 0;
  border-radius: inherit;
}

.understanding-bar {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: auto;
  padding: 12px 14px;
  border: 1px solid #ede6f5;
  border-radius: var(--radius-md);
  background-color: #fff;
  background-image: radial-gradient(#e9e3f1 1px, transparent 1px);
  background-position: right center;
  background-size: 8px 8px;
}

.understanding-bar__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: 11px;
  background: linear-gradient(135deg, #b44cff, #8a2be2);
}

.understanding-bar__text {
  padding-right: 8px;
  background: #fff;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.06em;
}

.understanding-bar__chevron {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  margin-left: auto;
  border: 1px solid #ede6f5;
  border-radius: 50%;
  background: #fff;
}

/* Free AI visibility check --------------------------------------------- */
.scan__glow {
  position: absolute;
  top: -30%;
  left: 50%;
  width: 80%;
  height: 70%;
  transform: translateX(-50%);
  background: radial-gradient(closest-side, rgba(148, 4, 253, 0.18), transparent);
  pointer-events: none;
}

.float-logo {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 12px 28px -8px rgba(0, 0, 0, 0.45);
}

.float-logo img {
  width: 26px;
  height: 26px;
}

.float-logo--sm {
  width: 44px;
  height: 44px;
  border-radius: 12px;
}

.float-logo--sm img {
  width: 22px;
  height: 22px;
}

.float-logo--1 { top: 110px; left: 5%; transform: rotate(-8deg); }
.float-logo--2 { top: 90px; right: 6%; }
.float-logo--3 { top: 330px; left: 8%; }
.float-logo--4 { top: 320px; right: 9%; }

.scan__inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 48px;
  max-width: 1120px;
  margin: 0 auto;
  padding: 104px 24px 96px;
}

.scan__title {
  font-size: clamp(40px, 5.6vw, 72px);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.035em;
  text-transform: uppercase;
}

/* Brand gradient text, kept from go.sorn.ai */
.gradient-text {
  background: linear-gradient(90deg, #b44cff, #ff6fb5);
  -webkit-background-clip: text;
  background-clip: text;
  color: var(--pink);
  -webkit-text-fill-color: transparent;
}

.gradient-text--warm {
  background-image: linear-gradient(90deg, #e86ab8, #b44cff);
}

.scan__lede {
  max-width: 720px;
  color: rgba(255, 255, 255, 0.86);
  font-size: 18px;
  line-height: 1.6;
  text-align: center;
}

.scan-card {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 48px;
  width: 100%;
  padding: 48px;
  border-radius: var(--radius-xl);
  background: linear-gradient(90deg, #fbf9fe 45%, #fceff6);
  box-shadow: 0 40px 80px -40px rgba(0, 0, 0, 0.6);
  color: var(--ink);
}

/* Audit form */
.audit-form {
  display: flex;
  flex: 1 1 340px;
  flex-direction: column;
  gap: 18px;
  min-width: 0;
}

.audit-form__head {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 6px;
}

.audit-form__title {
  font-size: clamp(28px, 3vw, 36px);
  font-weight: 800;
  letter-spacing: -0.03em;
}

.audit-form__sub {
  color: var(--text);
}

.field {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.field__label {
  font-size: 14px;
  font-weight: 700;
}

.field__control {
  position: relative;
}

.field__icon {
  position: absolute;
  top: 50%;
  left: 20px;
  transform: translateY(-50%);
  pointer-events: none;
}

.field__input {
  width: 100%;
  min-height: 52px;
  padding: 15px 20px 15px 50px;
  border: 1px solid #e2daee;
  border-radius: var(--radius-pill);
  background: #fff;
  color: var(--ink);
  font-size: 16px;
  caret-color: var(--purple);
  box-shadow: 0 6px 14px -8px rgba(20, 7, 42, 0.25);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.field__input::placeholder {
  color: var(--muted-2);
}

.field__input:focus {
  border-color: var(--purple);
  outline: none;
  box-shadow: 0 0 0 3px rgba(148, 4, 253, 0.18);
}

.field__input[aria-invalid="true"] {
  border-color: var(--red);
}

.audit-form__submit {
  margin-top: 10px;
  min-height: 56px;
  font-size: 17px;
}

.audit-form__status {
  min-height: 1.5em;
  color: var(--text);
  font-size: 14px;
  text-align: center;
}

.audit-form__status[data-state="error"] {
  color: var(--red);
}

.audit-form__status[data-state="success"] {
  color: var(--green);
}

/* Animated scan preview */
.scan-preview {
  position: relative;
  flex: 1 1 380px;
  min-width: 0;
  height: 470px;
}

.scan-preview__ghost {
  position: absolute;
  border: 1.5px solid #e2c6ff;
  border-radius: var(--radius-lg);
  background: #fff;
}

.scan-preview__ghost--back {
  inset: 4px 6px 26px 28px;
  opacity: 0.7;
}

.scan-preview__ghost--mid {
  inset: 12px 20px 18px 14px;
  border-color: #d9b8ff;
  opacity: 0.9;
}

.scan-preview__stages {
  position: absolute;
  inset: 20px 34px 10px 0;
}

.scan-stage {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1.5px solid #c79bff;
  border-radius: var(--radius-lg);
  background: #fff;
  box-shadow: 0 30px 60px -30px rgba(148, 4, 253, 0.5);
  opacity: 0;
  animation: scan-stage 16s infinite both;
}

.scan-stage:nth-child(2) { animation-delay: 4s; }
.scan-stage:nth-child(3) { animation-delay: 8s; }
.scan-stage:nth-child(4) { animation-delay: 12s; }

.scan-stage__progress {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 20px;
  border-bottom: 1px solid var(--line-soft);
}

.scan-stage__pct {
  color: var(--magenta);
  font-size: 24px;
  font-weight: 800;
}

.scan-stage__track {
  flex: 1;
  height: 7px;
  overflow: hidden;
  border-radius: var(--radius-pill);
  background: #efe7fb;
}

.scan-stage__fill {
  height: 100%;
  border-radius: inherit;
  background: var(--grad-cta);
  animation: scan-fill 16s infinite both;
}

.scan-stage__count {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  line-height: 1.15;
}

.scan-stage__count strong {
  font-size: 16px;
}

.scan-stage__count span,
.scan-stage__eyebrow {
  color: var(--muted-2);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.05em;
}

.scan-stage__body {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 20px;
}

.scan-stage__copy {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.scan-stage__title {
  font-size: 26px;
  font-weight: 800;
  line-height: 1.02;
  letter-spacing: -0.02em;
  text-transform: uppercase;
}

.scan-stage__desc {
  color: var(--text);
  font-size: 13px;
  line-height: 1.4;
}

.scan-stage__art {
  position: relative;
  flex: 0 0 132px;
  height: 120px;
  overflow: hidden;
  border: 1px solid #eee6f8;
  border-radius: var(--radius-md);
  background: linear-gradient(160deg, #fff, #f1e9fc);
}

.activity {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 0 20px 20px;
}

.activity__label {
  display: flex;
  align-items: center;
  gap: 8px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--line-soft);
  color: var(--muted-2);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
}

.activity__live {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #2bb57f;
}

.activity__item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border-radius: 8px;
  background: var(--green-soft);
  font-size: 14px;
  opacity: 0;
  animation-duration: 16s;
  animation-iteration-count: infinite;
  animation-fill-mode: both;
}

.activity__item img {
  width: 14px;
  height: 14px;
}

.activity__item--pending {
  background: #f7f2fc;
}

.spinner {
  flex-shrink: 0;
  width: 12px;
  height: 12px;
  border: 2px solid #e2d2fa;
  border-top-color: var(--purple);
  border-radius: 50%;
  animation: spin 0.9s linear infinite;
}

/* Stage illustrations (CSS-only) */
.art-browser {
  position: absolute;
  top: 30px;
  left: 18px;
  width: 84px;
  height: 58px;
  border-radius: var(--radius-sm);
  background: linear-gradient(135deg, rgba(196, 160, 255, 0.95), rgba(255, 176, 150, 0.85));
  transform: skewY(-10deg);
  box-shadow: 0 14px 24px -10px rgba(148, 4, 253, 0.6);
}

.art-line {
  position: absolute;
  left: 28px;
  height: 5px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.8);
  transform: skewY(-10deg);
}

.art-line--1 { top: 44px; width: 40px; }
.art-line--2 { top: 56px; width: 54px; }

.art-lens {
  position: absolute;
  top: 22px;
  left: 64px;
  width: 36px;
  height: 36px;
  border: 6px solid #a45cff;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.45);
}

.art-handle {
  position: absolute;
  top: 58px;
  left: 100px;
  width: 8px;
  height: 22px;
  border-radius: 4px;
  background: #a45cff;
  transform: rotate(-45deg);
}

.art-radar {
  position: absolute;
  top: 6px;
  left: 12px;
  width: 108px;
  height: 108px;
  border-radius: 50%;
  background: radial-gradient(circle, #ffb27a 0 7%, #e7d6ff 7% 22%, #c9a7ff 22% 24%, #e2ccff 24% 46%, #bf95ff 46% 48%, #dac2ff 48% 70%, #b484ff 70% 72%, #d2b4ff 72%);
  transform: scaleY(0.62);
  box-shadow: 0 16px 24px -10px rgba(148, 4, 253, 0.6);
}

.art-blip {
  position: absolute;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #fff;
}

.art-blip--1 { top: 30px; left: 24px; }
.art-blip--2 { top: 22px; left: 70px; background: #ffd0a8; }
.art-blip--3 { top: 70px; left: 76px; width: 8px; height: 8px; }

.art-layer {
  position: absolute;
  left: 36px;
  width: 60px;
  height: 60px;
  border: 1px solid rgba(255, 255, 255, 0.75);
  border-radius: var(--radius-sm);
  transform: rotate(45deg) scaleY(0.58);
}

.art-layer--1 { top: 58px; background: rgba(164, 92, 255, 0.55); }
.art-layer--2 { top: 40px; background: linear-gradient(135deg, #ffc48a, #ff8e6b); }
.art-layer--3 { top: 22px; background: rgba(190, 140, 255, 0.7); }

/* Result stage */
.scan-result__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 20px;
  border-bottom: 1px solid var(--line-soft);
  font-size: 12px;
}

.scan-result__grade {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 20px;
}

.grade {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 60px;
  height: 60px;
  border: 1.5px solid #f6c9cb;
  border-radius: var(--radius-md);
  background: var(--red-bg);
  color: var(--red);
  font-size: 34px;
  font-weight: 800;
}

.scan-result__verdict {
  display: block;
  font-size: 19px;
  font-weight: 800;
}

.scan-result__note {
  color: var(--text);
  font-size: 13px;
}

.scan-result__metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin: 0 20px;
  border: 1px solid var(--line-soft);
  border-radius: 12px;
}

.scan-result__metrics div {
  padding: 10px;
  text-align: center;
}

.scan-result__metrics div + div {
  border-left: 1px solid var(--line-soft);
}

.scan-result__metrics span {
  display: block;
  color: var(--muted-2);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.03em;
}

.scan-result__metrics strong {
  font-size: 18px;
}

.scan-result__engines {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  padding: 14px 20px;
}

.scan-result__engines li {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-sm);
  background: var(--bg-tint);
  font-size: 14px;
  font-weight: 600;
}

.scan-result__engines img {
  width: 16px;
  height: 16px;
}

.scan-result__engines strong {
  margin-left: auto;
  color: var(--red);
}

.scan-result__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: auto 20px 18px;
  padding: 12px 14px;
  border-radius: 12px;
  background: var(--ink);
  color: #fff;
  font-size: 13px;
  font-weight: 600;
}

.scan-result__unlock {
  padding: 7px 12px;
  border-radius: var(--radius-pill);
  background: var(--grad-cta);
  font-weight: 700;
}

/* Testimonials ------------------------------------------------------------ */
.proof__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 40px;
  max-width: 1120px;
  margin: 0 auto;
  padding: 48px 16px 16px;
}

.proof__title {
  max-width: 780px;
  font-size: clamp(32px, 4.4vw, 56px);
  font-weight: 800;
  line-height: 1.04;
  letter-spacing: -0.03em;
  text-align: center;
  text-transform: uppercase;
  text-wrap: balance;
}

.proof__lede {
  max-width: 680px;
  margin-top: 20px;
  color: rgba(255, 255, 255, 0.78);
  font-size: 18px;
  line-height: 1.6;
  text-align: center;
}

.proof-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  gap: 12px;
  width: 100%;
}

.proof-card {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 22px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--radius-lg);
  background: rgba(255, 255, 255, 0.05);
}

.proof-card__result {
  min-height: 84px;
  margin-bottom: 6px;
  font-size: 20px;
  font-weight: 600;
  line-height: 1.4;
}

.proof-card__result strong {
  color: var(--pink-light);
}

.proof-card__person {
  display: flex;
  align-items: baseline;
  gap: 8px;
}

.proof-card__name {
  font-size: 17px;
  font-weight: 700;
}

.proof-card__role {
  color: rgba(255, 255, 255, 0.72);
  font-size: 14px;
}

.proof-card video {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: var(--radius-md);
  background: #0b0418;
}

/* FAQ --------------------------------------------------------------------- */
.faq {
  padding-block: 112px;
}

.faq__inner {
  max-width: 880px;
}

.faq__title {
  margin-bottom: 40px;
  font-size: clamp(32px, 3.8vw, 48px);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -0.03em;
}

.faq__list {
  border-top: 1px solid var(--line);
}

.faq__item {
  padding: 22px 0;
  border-bottom: 1px solid var(--line);
}

.faq__item summary {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  font-size: 18px;
  font-weight: 600;
  list-style: none;
  cursor: pointer;
}

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

.faq__icon {
  flex-shrink: 0;
  margin-top: 3px;
  transition: transform 0.25s var(--ease-out);
}

.faq__item[open] .faq__icon {
  transform: rotate(45deg);
}

.faq__item p {
  margin-top: 14px;
  color: var(--text);
  font-size: 16px;
  line-height: 1.6;
}

/* Final CTA + footer -------------------------------------------------------- */
.final-cta {
  overflow: hidden;
  padding-block: 104px;
}

.final-cta__inner {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 28px;
}

.final-cta h2 {
  max-width: 880px;
  font-size: clamp(34px, 4.4vw, 56px);
  font-weight: 700;
  line-height: 1.04;
  letter-spacing: -0.035em;
}

.final-cta p {
  max-width: 640px;
  color: rgba(255, 255, 255, 0.82);
  font-size: 18px;
  line-height: 1.6;
}

.site-footer {
  background: var(--bg-darker);
  color: rgba(255, 255, 255, 0.72);
  font-size: 14px;
  line-height: 1.6;
}

.site-footer__inner {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 40px;
  padding-block: 56px;
}

.site-footer__col {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.site-footer__col--brand {
  gap: 8px;
}

.site-footer .brand__word {
  color: #fff;
  font-size: 20px;
}

.site-footer .brand__dot {
  color: var(--lavender);
}

.site-footer .label {
  color: rgba(255, 255, 255, 0.86);
  font-size: 11px;
}

.site-footer a {
  color: rgba(255, 255, 255, 0.82);
  text-decoration: none;
}

.site-footer a:hover {
  color: #fff;
}

.site-footer a[href^="mailto"] {
  color: var(--lavender);
  text-decoration: underline;
}

/* 6. Product mock (“Inside Sorn AI”)
   ========================================================================== */
.product {
  overflow: hidden;
  padding-block: 64px 56px;
  border-bottom: 1px solid #ece7f5;
}

.product__stack {
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.product__intro {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 24px;
}

.product__intro .display {
  max-width: 760px;
}

.product__intro p {
  max-width: 420px;
  color: var(--text);
  font-size: 17px;
  line-height: 1.6;
}

.panel-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px 24px;
}

.panel-head h3,
.panel h3 {
  font-size: 22px;
  letter-spacing: -0.02em;
}

.panel-head p,
.panel__desc {
  color: var(--text);
  font-size: 15px;
}

.panel-group {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.panel-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 480px), 1fr));
  gap: 32px;
}

.panel {
  display: flex;
  flex-direction: column;
  gap: 22px;
  padding: 28px;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: #fff;
}

.panel__head {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* App window */
.app-window {
  overflow: hidden;
  border: 1px solid #ded6ec;
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 40px 80px -44px rgba(20, 7, 42, 0.45);
  color: #1b1430;
  font-family: var(--font-app);
}

.app-window__body {
  display: flex;
}

.app-sidebar {
  display: flex;
  flex: 0 0 200px;
  flex-direction: column;
  gap: 4px;
  padding: 20px 14px;
  border-right: 1px solid #eee8f6;
  background: var(--bg-tint);
}

.app-sidebar .brand {
  padding: 0 10px 18px;
}

.app-sidebar .brand__word {
  font-size: 19px;
}

.app-sidebar .brand__tag {
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 0.16em;
}

.app-sidebar__item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 10px;
  border-radius: var(--radius-sm);
  color: var(--text);
  font-size: 13px;
}

.app-sidebar__item.is-active {
  background: #f1e6fd;
  color: var(--purple-ink);
  font-weight: 600;
}

.app-main {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 18px;
  min-width: 0;
  padding: 22px;
  background: #f7f4fb;
}

.app-main__bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.app-main__title {
  font-size: 20px;
  font-weight: 700;
}

.app-main__filters {
  display: flex;
  gap: 8px;
  font-size: 12px;
  font-weight: 600;
}

.app-main__filters span {
  padding: 7px 11px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: #fff;
}

.app-main__filters span + span {
  color: var(--muted);
}

.app-main__content {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}

/* Overall score card */
.score-card {
  display: flex;
  flex: 1 1 260px;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
  padding: 22px;
  border-radius: var(--radius-md);
  background: linear-gradient(170deg, #3e1873, #23104a);
  color: #fff;
}

.score-card__label {
  color: rgba(255, 255, 255, 0.8);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.07em;
}

.score-card__title {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.06em;
}

.score-card__brand {
  color: #e68af2;
  font-size: 16px;
  font-weight: 600;
}

.score-card__value {
  font-size: 64px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.03em;
}

.score-card__segments {
  position: relative;
  height: 18px;
  background: repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.16) 0 7px, transparent 7px 11px);
}

.score-card__segments span {
  position: absolute;
  inset: 0 auto 0 0;
  background: repeating-linear-gradient(90deg, #e079e8 0 7px, transparent 7px 11px);
}

.score-card__trend {
  width: 100%;
  height: 56px;
}

.score-card__delta {
  align-self: flex-start;
  padding: 4px 10px;
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, 0.12);
  font-size: 11px;
  font-weight: 600;
}

.score-card__metrics {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px 18px;
  padding-top: 14px;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
}

.score-card__metrics div {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.score-card__metrics strong {
  font-size: 20px;
}

.mini-bar {
  position: relative;
  height: 3px;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.16);
}

.mini-bar span {
  position: absolute;
  inset: 0 auto 0 0;
  border-radius: inherit;
  background: #c77deb;
}

.understanding-bar--dark {
  gap: 12px;
  margin-top: 0;
  padding: 10px 12px;
  border-color: rgba(255, 255, 255, 0.2);
  background: none;
}

.understanding-bar--dark .understanding-bar__icon {
  width: 32px;
  height: 32px;
  border-radius: 9px;
}

.understanding-bar--dark .understanding-bar__text {
  background: none;
  font-size: 11px;
}

.understanding-bar--dark .understanding-bar__chevron {
  width: 24px;
  height: 24px;
  border: 0;
  background: rgba(255, 255, 255, 0.14);
}

/* Engine cards */
.engine-grid {
  display: grid;
  flex: 2 1 480px;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr));
  gap: 14px;
  min-width: 0;
}

.engine-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid #ede6f5;
  border-radius: var(--radius-md);
  background: #fff;
}

.engine-card__top {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 12px;
  overflow: hidden;
  padding: 16px 18px 18px;
  background: linear-gradient(160deg, #f5edfc, #efe4fa);
}

.engine-card__watermark {
  position: absolute;
  top: -14px;
  right: -14px;
  width: 110px;
  height: 110px;
  opacity: 0.07;
}

.engine-card__name {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.engine-card__name .logo-tile {
  width: 40px;
  height: 40px;
  border: 0;
  border-radius: 11px;
  box-shadow: 0 4px 10px -6px rgba(20, 7, 42, 0.35);
}

.engine-card__label {
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
}

.engine-card__score {
  display: flex;
  align-items: baseline;
  gap: 6px;
}

.engine-card__score strong {
  font-size: 34px;
  line-height: 1;
  letter-spacing: -0.02em;
}

.engine-card__score span {
  color: var(--muted);
  font-size: 14px;
}

.engine-card__score .delta {
  align-self: center;
  margin-left: 8px;
  padding: 4px 8px;
  border-radius: 8px;
  background: #fff;
  color: var(--purple-ink);
  font-size: 11px;
  font-weight: 700;
}

.engine-card__score .delta--down {
  color: var(--red);
}

.engine-card__bar {
  position: relative;
  height: 4px;
  border-radius: var(--radius-pill);
  background: #e3d7f1;
}

.engine-card__bar span {
  position: absolute;
  inset: 0 auto 0 0;
  border-radius: inherit;
  background: linear-gradient(90deg, #8e2de2, #c46bff);
}

.engine-card__stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.engine-card__stats div {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 12px 16px;
}

.engine-card__stats div:nth-child(odd) {
  border-right: 1px solid var(--line-soft);
}

.engine-card__stats div:nth-child(-n + 2) {
  border-bottom: 1px solid var(--line-soft);
}

.engine-card__stats span {
  color: var(--muted-2);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
}

.engine-card__stats strong {
  font-size: 17px;
  font-weight: 600;
}

.engine-card__stats em {
  color: #9a2fe0;
  font-style: normal;
}

/* Share of voice */
.alert {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 16px;
  border: 1px solid #f6d3d5;
  border-radius: 12px;
  background: #fff4f4;
  font-size: 15px;
  line-height: 1.5;
}

.alert svg {
  flex-shrink: 0;
  margin-top: 2px;
}

.sov {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 24px;
}

.donut {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 168px;
  height: 168px;
  margin: 0 auto;
  border-radius: 50%;
  background: conic-gradient(var(--purple) 0 9%, var(--pink) 9% 73%, var(--teal) 73% 100%);
}

.donut__hole {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 104px;
  height: 104px;
  border-radius: 50%;
  background: #fff;
}

.donut__hole span {
  color: var(--muted);
  font-size: 13px;
  font-weight: 600;
}

.donut__hole strong {
  color: var(--purple-ink);
  font-size: 28px;
  line-height: 1.1;
}

.legend {
  display: grid;
  flex: 1 1 220px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  min-width: 0;
}

.legend li {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 12px;
}

.legend__name {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 600;
}

.legend__name--you {
  color: var(--purple-ink);
}

.legend strong {
  font-size: 26px;
}

.swatch {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--swatch);
}

/* Head-to-head */
.h2h-totals {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 14px;
}

.h2h-totals div {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 16px 12px;
  text-align: center;
}

.h2h-totals div + div {
  border-left: 1px solid var(--line);
}

.h2h-totals span {
  color: var(--muted);
  font-size: 13px;
  font-weight: 600;
}

.h2h-totals strong {
  font-size: 32px;
}

.h2h-totals .is-good { color: var(--green); }
.h2h-totals .is-bad { color: var(--red); }

.bar-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.bar-list li {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.bar-list__row {
  display: flex;
  justify-content: space-between;
  font-size: 15px;
}

.bar-list__name {
  font-weight: 600;
}

.bar-list__name--you {
  color: var(--purple-ink);
  font-weight: 700;
}

.bar-list__row span:last-child {
  color: var(--muted);
}

.bar-list__row strong {
  color: var(--ink);
}

.bar-list__track {
  height: 8px;
  border-radius: var(--radius-pill);
  background: #efeaf7;
}

.bar-list__track span {
  display: block;
  width: var(--w);
  height: 100%;
  border-radius: inherit;
  background: var(--c);
}

/* Prompt tracker */
.prompt-table {
  display: flex;
  flex-direction: column;
}

.prompt-table__head,
.prompt-table li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.prompt-table__head {
  padding-bottom: 10px;
  border-bottom: 1px solid var(--line);
}

.prompt-table li {
  padding: 14px 0;
  border-bottom: 1px solid var(--line-soft);
  font-size: 15px;
  line-height: 1.4;
}

.prompt-table li:last-child {
  border-bottom: 0;
}

/* Recommendations list */
.rec-list {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.rec-list li {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 18px 20px;
  border: 1px solid var(--line);
  border-radius: 14px;
}

.rec-list .pill {
  align-self: flex-start;
  padding: 4px 10px;
  font-size: 12px;
  letter-spacing: 0.06em;
}

.rec-list h4 {
  margin: 0;
  font-size: 17px;
  line-height: 1.35;
}

.rec-list p {
  color: var(--text);
  font-size: 15px;
  line-height: 1.55;
}

.rec-list__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 24px;
  color: var(--text);
  font-size: 14px;
  font-weight: 600;
}

.is-high { color: var(--green); }
.is-medium { color: var(--amber-ink); }

/* 7. Pricing
   ========================================================================== */
.pricing {
  border-bottom: 1px solid #ece7f5;
}

.plan-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
  align-items: start;
  gap: 20px;
}

.plan {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 30px 26px 28px;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: #fff;
}

.plan--featured {
  border: 2px solid var(--purple);
  box-shadow: 0 30px 60px -36px rgba(148, 4, 253, 0.55);
}

.plan__badge {
  position: absolute;
  top: -14px;
  left: 50%;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  transform: translateX(-50%);
  border-radius: var(--radius-pill);
  background: var(--ink);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  white-space: nowrap;
}

.plan--featured .plan__badge {
  background: var(--purple);
}

.plan__name {
  font-size: 20px;
  letter-spacing: -0.01em;
}

.plan__price {
  display: flex;
  align-items: baseline;
  gap: 4px;
  margin-top: 6px;
}

.plan__price strong {
  font-size: 46px;
  line-height: 1.05;
  letter-spacing: -0.03em;
}

.plan__price span {
  color: var(--muted);
}

.plan__tagline {
  margin-top: 6px;
  color: var(--text);
  font-size: 15px;
  line-height: 1.5;
}

.plan__trial {
  color: var(--purple-ink);
  font-size: 14px;
  font-weight: 600;
}

.plan__limits {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.plan__limits li {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border: 1px solid #efe9f7;
  border-radius: 12px;
  background: #faf8fd;
  color: var(--text);
  font-size: 14px;
}

.plan__limits strong {
  color: var(--ink);
  font-size: 16px;
}

.plan__engines {
  display: flex;
  gap: 5px;
  margin-left: auto;
}

.plan__features {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-top: 6px;
}

.plan__features .check-list li {
  color: var(--ink-soft);
}

.enterprise {
  display: flex;
  flex-wrap: wrap;
  gap: 32px 48px;
  padding: 32px;
  border-radius: var(--radius-lg);
  background: var(--ink);
  color: #fff;
}

.enterprise__main {
  display: flex;
  flex: 1 1 280px;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
}

.enterprise__main .plan__price-custom {
  font-size: 46px;
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.03em;
}

.enterprise__main p {
  color: rgba(255, 255, 255, 0.78);
  font-size: 15px;
  line-height: 1.5;
}

.enterprise__main .btn {
  align-self: flex-start;
  margin-top: 8px;
}

.enterprise__limits {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 12px;
  color: rgba(255, 255, 255, 0.82);
  font-size: 14px;
}

.enterprise__limits strong {
  color: #fff;
  font-size: 16px;
}

.enterprise__features {
  display: flex;
  flex: 2 1 420px;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
}

.enterprise__features .label {
  color: var(--lavender);
}

.enterprise__features .check-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
  gap: 10px 24px;
}

/* 8. Motion
   ========================================================================== */
@property --num {
  syntax: "<integer>";
  initial-value: 0;
  inherits: false;
}

@keyframes count-up {
  from { --num: 0; }
  to { --num: var(--to); }
}

@keyframes particle-drift {
  0% { transform: translate3d(0, 0, 0) scale(1); }
  50% { transform: translate3d(14px, -30px, 0) scale(1.3); }
  100% { transform: translate3d(-10px, -60px, 0) scale(0.8); }
}

@keyframes engine-fade {
  0% { opacity: 0; transform: translateY(5px); }
  5%, 22% { opacity: 1; transform: none; }
  27%, 100% { opacity: 0; transform: translateY(-5px); }
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

/* Free-check preview: 4 stages × 4s */
@keyframes scan-stage {
  0% { opacity: 0; transform: translateY(14px); }
  3%, 22% { opacity: 1; transform: none; }
  25%, 100% { opacity: 0; transform: translateY(-14px); }
}

@keyframes scan-fill {
  0% { width: calc(var(--to) - 25%); }
  22%, 100% { width: var(--to); }
}

.activity__item { animation-name: activity-1; }
.activity__item--2 { animation-name: activity-2; }
.activity__item--3 { animation-name: activity-3; }

.scan-stage:nth-child(2) .scan-stage__fill,
.scan-stage:nth-child(2) .activity__item { animation-delay: 4s; }
.scan-stage:nth-child(3) .scan-stage__fill,
.scan-stage:nth-child(3) .activity__item { animation-delay: 8s; }

@keyframes activity-1 {
  0%, 4% { opacity: 0; transform: translateX(-8px); }
  6%, 100% { opacity: 1; transform: none; }
}

@keyframes activity-2 {
  0%, 9% { opacity: 0; transform: translateX(-8px); }
  11%, 100% { opacity: 1; transform: none; }
}

@keyframes activity-3 {
  0%, 14% { opacity: 0; transform: translateX(-8px); }
  16%, 100% { opacity: 1; transform: none; }
}

/* Hero card: 14s storyboard. Each step reveals, holds, then the loop resets. */
.seq {
  opacity: 0;
  animation: 14s ease-out infinite both;
}

.seq--prompt { animation-name: seq-prompt; }
.seq--r1 { animation-name: seq-r1; }
.seq--r2 { animation-name: seq-r2; }
.seq--r3 { animation-name: seq-r3; }
.seq--you { animation-name: seq-you; }
.seq--why { animation-name: seq-why; }
.seq--w1 { animation-name: seq-w1; }
.seq--w2 { animation-name: seq-w2; }
.seq--w3 { animation-name: seq-w3; }
.seq--fix { animation-name: seq-fix; }

@keyframes seq-prompt { 0% { opacity: 0; transform: translateY(10px); } 4%, 92% { opacity: 1; transform: none; } 98%, 100% { opacity: 0; } }
@keyframes seq-r1 { 0%, 10% { opacity: 0; transform: translateY(10px); } 14%, 92% { opacity: 1; transform: none; } 98%, 100% { opacity: 0; } }
@keyframes seq-r2 { 0%, 15% { opacity: 0; transform: translateY(10px); } 19%, 92% { opacity: 1; transform: none; } 98%, 100% { opacity: 0; } }
@keyframes seq-r3 { 0%, 20% { opacity: 0; transform: translateY(10px); } 24%, 92% { opacity: 1; transform: none; } 98%, 100% { opacity: 0; } }
@keyframes seq-you {
  0%, 28% { opacity: 0; transform: translateY(10px); }
  32% { opacity: 1; transform: none; }
  34% { transform: translateX(-6px); }
  36% { transform: translateX(6px); }
  38% { transform: translateX(-3px); }
  40%, 92% { opacity: 1; transform: none; }
  98%, 100% { opacity: 0; }
}
@keyframes seq-why { 0%, 44% { opacity: 0; transform: translateY(10px); } 48%, 92% { opacity: 1; transform: none; } 98%, 100% { opacity: 0; } }
@keyframes seq-w1 { 0%, 50% { opacity: 0; transform: translateX(-10px); } 54%, 92% { opacity: 1; transform: none; } 98%, 100% { opacity: 0; } }
@keyframes seq-w2 { 0%, 55% { opacity: 0; transform: translateX(-10px); } 59%, 92% { opacity: 1; transform: none; } 98%, 100% { opacity: 0; } }
@keyframes seq-w3 { 0%, 60% { opacity: 0; transform: translateX(-10px); } 64%, 92% { opacity: 1; transform: none; } 98%, 100% { opacity: 0; } }
@keyframes seq-fix { 0%, 70% { opacity: 0; transform: translateY(12px) scale(0.98); } 75%, 92% { opacity: 1; transform: none; } 98%, 100% { opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  .particles {
    display: none;
  }

  .seq,
  .scan-stage,
  .scan-stage__fill,
  .activity__item,
  .spinner,
  .engine-rotator__item,
  .stat__num {
    animation: none !important;
  }

  .seq,
  .activity__item {
    opacity: 1;
  }

  .scan-stage:first-child,
  .engine-rotator__item:first-child {
    opacity: 1;
  }

  .scan-stage__fill {
    width: var(--to);
  }

  .stat__num {
    --num: var(--to);
  }

  .stat__bar {
    width: calc(var(--to) * 1%);
    transition: none;
  }
}

/* 9. Responsive
   ========================================================================== */
@media (max-width: 860px) {
  .nav,
  .site-header__signin {
    display: none;
  }

  .menu-toggle {
    display: inline-flex;
  }

  .site-header__actions .btn--sm {
    padding: 10px 14px;
    font-size: 13px;
  }

  .hero__grid {
    padding-block: 48px 64px;
  }

  .section,
  .diff,
  .faq {
    padding-block: 72px;
  }

  .app-sidebar,
  .float-logo {
    display: none;
  }

  .app-main {
    padding: 14px;
  }

  .scan__inner {
    padding: 56px 16px;
  }

  .scan-card {
    padding: 24px;
  }
}

@media (max-width: 520px) {
  .rec-screen__head {
    flex-wrap: wrap;
    padding: 18px;
  }

  .rec-screen__body {
    padding: 18px;
  }

  .rec-item__headline {
    font-size: 18px;
  }

  .scan-preview {
    height: 500px;
  }

  .scan-stage__art {
    display: none;
  }

  .scan-stage__title {
    font-size: 22px;
  }

  .scan-stage__progress,
  .scan-stage__body,
  .scan-result__head,
  .scan-result__grade {
    padding-inline: 16px;
  }

  .activity {
    padding-inline: 16px;
  }
}

@media (min-width: 861px) {
  .mobile-nav {
    display: none !important;
  }
}