:root {
  color-scheme: light;
  --bg: #fbf8f1;
  --ink: #15171c;
  --muted: #5f6875;
  --line: rgba(21, 23, 28, 0.12);
  --panel: rgba(255, 255, 255, 0.68);
  --panel-solid: #ffffff;
  --blue: #2b6eea;
  --blue-soft: #1e6f5c;
  --teal: #1e6f5c;
  --amber: #f6b94b;
  --rose: #ef6f8f;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  min-width: 320px;
  background:
    radial-gradient(circle at 14% 12%, rgba(79, 124, 255, 0.18), transparent 28rem),
    radial-gradient(circle at 84% 36%, rgba(24, 183, 164, 0.10), transparent 24rem),
    linear-gradient(180deg, #fbf8f1 0%, #f5f1e8 46%, #eef3ef 100%);
  color: var(--ink);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  overflow-x: hidden;
}

body::before {
  position: fixed;
  inset: 0;
  z-index: -2;
  content: "";
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.024) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.024) 1px, transparent 1px);
  background-size: 72px 72px;
  mask-image: linear-gradient(to bottom, black 0%, transparent 52%);
}

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

.cursor-light {
  position: fixed;
  left: 0;
  top: 0;
  z-index: -1;
  width: 32rem;
  height: 32rem;
  border-radius: 999px;
  background: radial-gradient(circle, rgba(79, 124, 255, 0.12), transparent 62%);
  pointer-events: none;
  transform: translate3d(-50%, -50%, 0);
}

.nav {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px clamp(18px, 4vw, 58px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(251, 248, 241, 0.78);
  backdrop-filter: blur(18px);
}

.brand,
.nav-links,
.button,
.card-header,
.signal-list div,
.risk-row {
  display: flex;
  align-items: center;
}

.brand {
  gap: 10px;
  font-weight: 900;
}

.brand-mark {
  display: grid;
  width: 36px;
  height: 36px;
  place-items: center;
  border-radius: 8px;
  border: 1px solid rgba(21, 23, 28, 0.12);
  background: #f5f0e7;
  padding: 4px;
  overflow: hidden;
}

.brand-mark img,
.mock-brand span img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.nav-links {
  gap: clamp(14px, 3vw, 34px);
  color: var(--muted);
  font-size: 0.92rem;
  font-weight: 700;
}

.nav-links a.active {
  color: #15171c;
}

.section {
  padding: clamp(74px, 9vw, 144px) clamp(18px, 5vw, 74px);
}

.hero {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(28px, 4vw, 54px);
  align-items: center;
  min-height: auto;
  padding-top: 112px;
  text-align: center;
}

.page-hero {
  min-height: 58svh;
  display: grid;
  align-content: end;
  padding-top: 132px;
  text-align: center;
}

.page-hero h1 {
  max-width: 1120px;
}

.hero-copy {
  max-width: 1080px;
  margin: 0 auto;
}

.eyebrow {
  margin: 0 0 18px;
  color: var(--blue-soft);
  font-size: 0.77rem;
  font-weight: 900;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

h1,
h2,
h3,
p,
dl {
  margin-top: 0;
}

h1 {
  max-width: 1100px;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 24px;
  font-size: clamp(3.5rem, 8vw, 8.8rem);
  line-height: 0.86;
  letter-spacing: 0;
}

h2 {
  margin-bottom: 18px;
  font-size: clamp(2.25rem, 4.4vw, 5.4rem);
  line-height: 0.96;
  letter-spacing: 0;
}

h3 {
  margin-bottom: 12px;
  font-size: 1.35rem;
  line-height: 1.12;
}

.hero-text,
.radar-copy p,
.learning-panel p {
  max-width: 660px;
  margin-left: auto;
  margin-right: auto;
  color: #cbd4df;
  font-size: clamp(1.08rem, 1.5vw, 1.3rem);
  line-height: 1.65;
}

.hero-actions {
  justify-content: center;
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 34px;
}

.hero-proof {
  justify-content: center;
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 22px;
}

.hero-proof span {
  padding: 9px 11px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.05);
  color: #d9e2ef;
  font-size: 0.9rem;
  font-weight: 800;
}

.button {
  min-height: 48px;
  justify-content: center;
  border-radius: 8px;
  padding: 0 18px;
  font-weight: 900;
}

.button-primary {
  background: var(--ink);
  color: var(--bg);
}

.button-ghost {
  border: 1px solid var(--line);
  color: var(--ink);
}

.hero-visual {
  position: relative;
  width: min(1280px, 100%);
  min-height: 0;
  margin: 0 auto;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 8px;
  background:
    linear-gradient(135deg, rgba(79, 124, 255, 0.16), transparent 44%),
    rgba(11, 14, 20, 0.92);
  padding: 18px;
  box-shadow: 0 42px 130px rgba(0, 0, 0, 0.62);
  perspective: 1200px;
  transform: rotateX(var(--tilt-x, 0deg)) rotateY(var(--tilt-y, 0deg));
  transition: transform 120ms ease-out;
}

.hero-visual::before {
  display: block;
  height: 34px;
  margin: -18px -18px 14px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  content: "";
  background:
    radial-gradient(circle at 24px 50%, #ff5f57 0 5px, transparent 6px),
    radial-gradient(circle at 44px 50%, #ffbd2e 0 5px, transparent 6px),
    radial-gradient(circle at 64px 50%, #28c840 0 5px, transparent 6px),
    rgba(255, 255, 255, 0.05);
}

.hero-visual img {
  width: 100%;
  height: auto;
  min-height: 0;
  object-fit: contain;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 8px;
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.38);
  transform: none;
  animation: none;
}

.hero-dashboard {
  display: grid;
  gap: 14px;
  min-height: 500px;
  padding: clamp(18px, 3vw, 34px);
}

.hero-story {
  gap: 18px;
}

.hero-dashboard-top {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: center;
}

.hero-dashboard-top span,
.hero-dashboard-stats span,
.hero-dashboard-list span {
  display: block;
  color: #8d96a3;
  font-size: 0.78rem;
  font-weight: 900;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.hero-dashboard-top strong {
  display: block;
  margin-top: 6px;
  color: #15171c;
  font-size: clamp(1.4rem, 3vw, 2.25rem);
}

.hero-dashboard-top button {
  min-height: 42px;
  border: 0;
  border-radius: 8px;
  background: #15171c;
  color: #ffffff;
  padding: 0 16px;
  font: inherit;
  font-weight: 900;
}

.hero-flow {
  display: grid;
  grid-template-columns: minmax(220px, 0.85fr) minmax(260px, 1.15fr) minmax(220px, 0.9fr);
  gap: 12px;
}

.flow-card,
.story-outcome article {
  border: 1px solid rgba(21, 23, 28, 0.1);
  border-radius: 8px;
  background: #ffffff;
  box-shadow: 0 12px 34px rgba(49, 39, 24, 0.08);
}

.flow-card {
  position: relative;
  overflow: hidden;
  min-height: 260px;
  padding: 18px;
}

.flow-card::after {
  position: absolute;
  inset: auto 18px 18px;
  height: 3px;
  border-radius: 999px;
  content: "";
  background: linear-gradient(90deg, #1e6f5c, #9fe7c6);
  transform-origin: left;
  animation: storyLoad 5.8s ease-in-out infinite;
}

.analysis-card::after {
  animation-delay: 1.1s;
}

.price-card::after {
  animation-delay: 2.2s;
}

.photo-preview {
  position: relative;
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: 8px;
  min-height: 214px;
  margin: 14px 0;
  padding: 12px;
  overflow: hidden;
  border-radius: 8px;
  background:
    linear-gradient(145deg, rgba(21, 23, 28, 0.12), transparent 42%),
    radial-gradient(circle at 72% 26%, rgba(246, 185, 75, 0.42), transparent 7rem),
    linear-gradient(135deg, #d7e7d7, #f7efe2);
  color: #15171c;
  box-shadow: inset 0 0 0 1px rgba(21, 23, 28, 0.08);
}

.photo-tag {
  position: relative;
  z-index: 1;
  justify-self: start;
  padding: 7px 9px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.8);
  color: #5f6875;
  font-size: 0.72rem;
  font-weight: 900;
}

.hero-product-shot {
  position: relative;
  z-index: 1;
  justify-self: center;
  align-self: center;
  width: min(78%, 190px);
  max-height: 126px;
  object-fit: contain;
  filter: drop-shadow(0 18px 24px rgba(21, 23, 28, 0.18));
}

.photo-preview strong {
  position: relative;
  z-index: 1;
  font-size: 1.25rem;
  line-height: 1.15;
}

.flow-card p,
.story-outcome em {
  color: #5f6875;
  line-height: 1.55;
}

.analysis-card h3 {
  margin: 14px 0 18px;
  font-size: clamp(1.35rem, 2.2vw, 2rem);
}

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

.analysis-grid div {
  min-height: 78px;
  padding: 12px;
  border: 1px solid rgba(21, 23, 28, 0.08);
  border-radius: 8px;
  background: #f8faf7;
}

.analysis-grid span,
.price-main em,
.story-outcome span {
  display: block;
  color: #8d96a3;
  font-size: 0.74rem;
  font-style: normal;
  font-weight: 900;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.analysis-grid strong {
  display: block;
  margin-top: 10px;
  color: #15171c;
}

.price-main {
  margin: 16px 0 18px;
}

.price-main strong {
  display: block;
  color: #15171c;
  font-size: clamp(3rem, 5vw, 4.5rem);
  line-height: 0.9;
}

.price-main em {
  margin-top: 8px;
  color: #1e6f5c;
}

.confidence-line {
  height: 12px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(21, 23, 28, 0.08);
}

.confidence-line span {
  display: block;
  width: var(--value);
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #1e6f5c, #7dbf72);
  animation: meterLoad 1.5s ease-out both;
}

.story-outcome {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.story-outcome article {
  padding: 18px;
}

.story-outcome strong,
.story-outcome em {
  display: block;
}

.story-outcome strong {
  margin: 10px 0 5px;
  color: #15171c;
  font-size: 1.18rem;
}

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

.hero-dashboard-stats article,
.hero-dashboard-list div {
  border: 1px solid rgba(21, 23, 28, 0.1);
  border-radius: 8px;
  background: #ffffff;
  box-shadow: 0 12px 34px rgba(49, 39, 24, 0.08);
}

.hero-dashboard-stats article {
  min-height: 118px;
  padding: 18px;
}

.hero-dashboard-stats strong {
  display: block;
  margin-top: 22px;
  color: #15171c;
  font-size: clamp(1.9rem, 4.2vw, 3.4rem);
  line-height: 0.9;
}

.hero-dashboard-list {
  display: grid;
  gap: 10px;
}

.hero-dashboard-list div {
  position: relative;
  overflow: hidden;
  padding: 16px 18px;
}

.hero-dashboard-list div::before {
  position: absolute;
  inset: 0 auto 0 0;
  width: 3px;
  content: "";
  background: #1e6f5c;
  opacity: 0.35;
}

.hero-dashboard-list div:first-child::after {
  position: absolute;
  inset: 0;
  content: "";
  background: linear-gradient(90deg, transparent, rgba(30, 111, 92, 0.10), transparent);
  transform: translateX(-100%);
  animation: listingSweep 5.6s ease-in-out infinite;
}

.hero-dashboard-list strong {
  display: block;
  margin-bottom: 7px;
  color: #15171c;
}

.hero-chip {
  display: grid;
  gap: 5px;
  min-width: 0;
  padding: 14px 16px;
  border: 1px solid rgba(21, 23, 28, 0.1);
  border-radius: 8px;
  text-align: left;
  background: rgba(255, 255, 255, 0.82);
  box-shadow: 0 12px 34px rgba(49, 39, 24, 0.08);
  animation: chipFocus 5.6s ease-in-out infinite;
}

.hero-chip span {
  color: var(--muted);
  font-size: 0.78rem;
}

.hero-chip strong {
  font-size: 1.05rem;
  line-height: 1.25;
}

.hero-chip-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.chip-risk {
  animation-delay: 2.2s;
}

.hero-process {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  padding: 14px;
  border: 1px solid rgba(21, 23, 28, 0.1);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.72);
}

.story-process {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.story-process::after {
  width: calc((100% - 48px) / 5);
  animation: storyProcessTravel 5.8s ease-in-out infinite;
}

.hero-process::before {
  position: absolute;
  left: 24px;
  right: 24px;
  top: 50%;
  height: 2px;
  content: "";
  background: linear-gradient(90deg, rgba(30, 111, 92, 0.18), rgba(30, 111, 92, 0.42), rgba(246, 185, 75, 0.28));
  transform: translateY(-50%);
}

.hero-process::after {
  position: absolute;
  top: 50%;
  left: 24px;
  width: calc((100% - 48px) / 4);
  height: 2px;
  content: "";
  background: #1e6f5c;
  box-shadow: 0 0 18px rgba(30, 111, 92, 0.48);
  transform: translateY(-50%);
  animation: processTravel 5.6s ease-in-out infinite;
}

.hero-process span {
  position: relative;
  z-index: 1;
  display: grid;
  min-height: 58px;
  place-items: center;
  padding: 10px;
  border: 1px solid rgba(21, 23, 28, 0.1);
  border-radius: 8px;
  background: #ffffff;
  color: #2f3742;
  font-size: 0.78rem;
  font-weight: 900;
  text-align: center;
}

.hero-process span::before {
  width: 9px;
  height: 9px;
  margin-bottom: 5px;
  border-radius: 999px;
  content: "";
  background: #1e6f5c;
  box-shadow: 0 0 0 6px rgba(30, 111, 92, 0.08);
}

.channel-strip {
  display: flex;
  gap: clamp(16px, 4vw, 48px);
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  padding: 26px clamp(18px, 5vw, 74px);
  border-block: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.035);
  color: var(--muted);
  font-weight: 900;
}

.channel-strip img {
  display: block;
  width: 132px;
  height: 50px;
  object-fit: contain;
  padding: 9px 12px;
  border-radius: 8px;
  background: #ffffff;
}

.channel-strip strong {
  color: #dce5ee;
}

/* Das Kleinanzeigen-Logo bringt seine Flaeche mit (lindgruene Teilen-Grafik, kein
   freigestelltes Zeichen). Mit dem gemeinsamen weissen Rahmen plus Innenabstand und
   object-fit: contain schrumpfte es auf einen Bruchteil der Groesse von eBay und Vinted -
   es sah aus wie eine Briefmarke neben zwei Logos. Hier fuellt es den Rahmen ganz aus. */
.channel-strip img[alt="Kleinanzeigen"] {
  overflow: hidden;
  padding: 0;
  background: #c1ec4c;
  object-fit: cover;
}

.marquee {
  overflow: hidden;
  border-block: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.035);
}

.marquee-track {
  display: flex;
  width: max-content;
  animation: marquee 28s linear infinite;
}

.marquee span {
  padding: 20px 34px;
  color: #dce5ee;
  font-weight: 900;
  white-space: nowrap;
}

.section-heading {
  max-width: 1000px;
  margin-bottom: 44px;
}

.before-after {
  padding-top: clamp(58px, 7vw, 108px);
  padding-bottom: clamp(58px, 7vw, 108px);
}

.comparison-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.comparison-card {
  min-height: 460px;
  padding: clamp(24px, 4vw, 42px);
  border: 1px solid rgba(21, 23, 28, 0.12);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.68);
  box-shadow: 0 18px 54px rgba(49, 39, 24, 0.10), inset 0 1px 0 rgba(255, 255, 255, 0.75);
}

.comparison-card.with {
  background:
    linear-gradient(135deg, rgba(30, 111, 92, 0.14), transparent 48%),
    rgba(255, 255, 255, 0.78);
  border-color: rgba(30, 111, 92, 0.22);
}

.comparison-card span {
  display: inline-flex;
  margin-bottom: 54px;
  padding: 8px 10px;
  border-radius: 999px;
  background: rgba(21, 23, 28, 0.08);
  color: #4d5663;
  font-size: 0.74rem;
  font-weight: 900;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.comparison-card.with span {
  background: #eef8f2;
  color: #1e6f5c;
}

.comparison-card h3 {
  max-width: 560px;
  margin-bottom: 28px;
  font-size: clamp(1.6rem, 3vw, 3rem);
}

.comparison-card ul {
  display: grid;
  gap: 13px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.comparison-card li {
  position: relative;
  padding-left: 30px;
  color: #596370;
  font-size: 1.04rem;
  line-height: 1.45;
}

.comparison-card li::before {
  position: absolute;
  left: 0;
  top: 0.45em;
  width: 10px;
  height: 10px;
  border-radius: 999px;
  content: "";
  background: rgba(21, 23, 28, 0.28);
}

.comparison-card.with li::before {
  background: #1e6f5c;
  box-shadow: 0 0 0 6px rgba(30, 111, 92, 0.10);
}

.audience {
  padding-top: clamp(58px, 7vw, 108px);
  padding-bottom: clamp(58px, 7vw, 108px);
}

.audience-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.audience-grid article {
  min-height: 300px;
  padding: clamp(22px, 3vw, 32px);
  border: 1px solid rgba(21, 23, 28, 0.12);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.68);
  box-shadow: 0 18px 54px rgba(49, 39, 24, 0.10), inset 0 1px 0 rgba(255, 255, 255, 0.75);
  transition: transform 220ms ease, box-shadow 220ms ease, border-color 220ms ease;
}

.audience-grid article:hover {
  border-color: rgba(30, 111, 92, 0.28);
  box-shadow: 0 28px 72px rgba(49, 39, 24, 0.14);
  transform: translateY(-6px);
}

.audience-grid span {
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  margin-bottom: 54px;
  border-radius: 8px;
  background: #15171c;
  color: #fff;
  font-size: 0.78rem;
  font-weight: 900;
}

.audience-grid h3 {
  font-size: clamp(1.35rem, 2vw, 2rem);
}

.audience-grid p {
  color: #596370;
  line-height: 1.62;
}

.practice-proof {
  padding-top: clamp(52px, 7vw, 92px);
  padding-bottom: clamp(52px, 7vw, 92px);
}

.practice-proof-grid {
  display: grid;
  grid-template-columns: minmax(320px, 0.8fr) minmax(360px, 1.2fr);
  gap: clamp(24px, 5vw, 78px);
  align-items: center;
  max-width: 1180px;
  margin: 0 auto;
  padding: clamp(26px, 4vw, 52px);
  border: 1px solid rgba(30, 111, 92, 0.18);
  border-radius: 8px;
  background:
    linear-gradient(135deg, rgba(30, 111, 92, 0.12), transparent 48%),
    rgba(255, 255, 255, 0.76);
  box-shadow: 0 24px 80px rgba(21, 23, 28, 0.08);
}

.practice-proof-grid h2 {
  max-width: 620px;
  margin-bottom: 0;
  font-size: clamp(2rem, 4vw, 4.4rem);
  overflow-wrap: anywhere;
}

.practice-copy p {
  color: #4d5663;
  font-size: 1.08rem;
  line-height: 1.75;
}

.practice-points {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 24px;
}

.practice-points span {
  padding: 10px 12px;
  border: 1px solid rgba(30, 111, 92, 0.18);
  border-radius: 999px;
  background: #eef8f2;
  color: #1e6f5c;
  font-size: 0.82rem;
  font-weight: 900;
}

.simple-grid,
.flow-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.flow-grid {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.workflow-paths {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin-bottom: 18px;
}

.workflow-path {
  min-height: 380px;
  padding: clamp(24px, 4vw, 42px);
  border: 1px solid rgba(21, 23, 28, 0.1);
  border-radius: 8px;
  background:
    linear-gradient(135deg, rgba(30, 111, 92, 0.08), transparent 48%),
    rgba(255, 255, 255, 0.72);
  box-shadow: 0 18px 54px rgba(21, 23, 28, 0.08);
}

.home-faq {
  padding-top: clamp(58px, 7vw, 108px);
  padding-bottom: clamp(58px, 7vw, 108px);
}

.home-faq-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.home-faq-grid article {
  min-height: 300px;
  padding: clamp(22px, 3vw, 32px);
  border: 1px solid rgba(21, 23, 28, 0.12);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.68);
  box-shadow: 0 18px 54px rgba(49, 39, 24, 0.10), inset 0 1px 0 rgba(255, 255, 255, 0.75);
}

.home-faq-grid span {
  display: block;
  margin-bottom: 44px;
  color: #1e6f5c;
  font-size: 0.78rem;
  font-weight: 900;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.home-faq-grid h3 {
  font-size: clamp(1.28rem, 2vw, 1.9rem);
}

.home-faq-grid p {
  color: #596370;
  line-height: 1.62;
}

.workflow-path h2 {
  font-size: clamp(2.2rem, 4vw, 4.6rem);
}

.workflow-path p:not(.eyebrow) {
  color: #596370;
  font-size: 1.05rem;
  line-height: 1.7;
}

.path-result {
  display: grid;
  gap: 7px;
  margin-top: 28px;
  padding: 18px;
  border: 1px solid rgba(30, 111, 92, 0.18);
  border-radius: 8px;
  background: #eef8f2;
}

.path-result span {
  color: #1e6f5c;
  font-size: 0.74rem;
  font-weight: 900;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.path-result strong {
  color: #15171c;
  font-size: 1.18rem;
}

.path-result em {
  color: #5f6875;
  font-style: normal;
  line-height: 1.45;
}

.simple-card,
.flow-step,
.listing-table,
.better-card {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(14px);
}

.simple-card {
  min-height: 320px;
  padding: clamp(24px, 3vw, 36px);
}

.simple-card span {
  display: grid;
  width: 44px;
  height: 44px;
  place-items: center;
  margin-bottom: 66px;
  border-radius: 999px;
  background: #15171c;
  color: #fbf8f1;
  font-weight: 900;
}

.simple-card p {
  color: var(--muted);
  font-size: 1.05rem;
  line-height: 1.62;
}

.flow-step {
  min-height: 280px;
  padding: 24px;
}

.flow-step span {
  display: block;
  margin-bottom: 54px;
  color: var(--blue-soft);
  font-weight: 900;
}

.simple-card p,
.flow-step p,
.better-card p {
  color: var(--muted);
  line-height: 1.62;
}

.listing-preview {
  padding-top: clamp(52px, 6vw, 96px);
}

.listing-table {
  overflow: hidden;
  background: rgba(248, 250, 252, 0.96);
  color: #111827;
}

.listing-row {
  display: grid;
  grid-template-columns: 1.25fr 0.8fr 1.45fr 0.7fr 0.75fr;
  gap: 16px;
  align-items: center;
  min-height: 72px;
  padding: 16px 22px;
  border-bottom: 1px solid rgba(15, 23, 42, 0.09);
}

.listing-row:last-child {
  border-bottom: 0;
}

.listing-head {
  min-height: 54px;
  background: #f1f5f9;
  color: #64748b;
  font-size: 0.78rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.listing-row span {
  color: #64748b;
}

.listing-row em {
  justify-self: start;
  padding: 7px 9px;
  border-radius: 8px;
  background: #e8f7f4;
  color: #0f766e;
  font-style: normal;
  font-weight: 900;
}

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

.better-card {
  min-height: 250px;
  padding: 24px;
}

.better-card span {
  display: grid;
  width: 36px;
  height: 36px;
  place-items: center;
  margin-bottom: 42px;
  border-radius: 8px;
  background: rgba(79, 124, 255, 0.16);
  color: var(--blue-soft);
  font-weight: 900;
}

.better-card strong {
  display: block;
  margin-bottom: 12px;
  font-size: 1.18rem;
}

.product-snapshot {
  padding-top: clamp(58px, 7vw, 104px);
}

.app-mockup {
  display: grid;
  grid-template-columns: 245px minmax(0, 1fr);
  gap: 0;
  overflow: hidden;
  margin-bottom: 22px;
  border: 1px solid rgba(21, 23, 28, 0.12);
  border-radius: 8px;
  background: #f6f7f8;
  box-shadow: 0 28px 90px rgba(49, 39, 24, 0.14);
}

.mock-sidebar {
  display: grid;
  align-content: start;
  gap: 5px;
  min-height: 640px;
  border-right: 1px solid rgba(21, 23, 28, 0.1);
  background: #ffffff;
  padding: 18px 14px;
}

.mock-brand {
  display: grid;
  grid-template-columns: 38px 1fr;
  column-gap: 10px;
  align-items: center;
  margin-bottom: 14px;
}

.mock-brand span,
.mock-user b {
  display: grid;
  width: 38px;
  height: 38px;
  place-items: center;
  border-radius: 8px;
  background: #15171c;
  color: #ffffff;
  font-weight: 900;
}

.mock-brand span {
  border: 1px solid rgba(21, 23, 28, 0.12);
  background: #f5f0e7;
  padding: 4px;
  overflow: hidden;
}

.mock-brand strong {
  align-self: end;
  color: #15171c;
}

.mock-brand em {
  grid-column: 2;
  color: #9aa3af;
  font-style: normal;
  font-size: 0.82rem;
}

.mock-user {
  display: flex;
  gap: 10px;
  align-items: center;
  margin-bottom: 10px;
  padding: 10px;
  border: 1px solid rgba(21, 23, 28, 0.1);
  border-radius: 8px;
}

.mock-user b {
  width: 30px;
  height: 30px;
  border-radius: 999px;
}

.mock-user span {
  color: #3f4651;
  font-weight: 800;
  line-height: 1.1;
}

.mock-user small {
  color: #9aa3af;
  font-weight: 700;
}

.mock-sidebar p {
  margin: 14px 8px 4px;
  color: #9aa3af;
  font-size: 0.7rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.mock-sidebar a {
  padding: 8px 10px;
  border-radius: 8px;
  color: #5f6875;
  font-weight: 800;
}

.mock-sidebar a:first-of-type {
  background: #f2f3f5;
  color: #15171c;
}

.mock-main {
  padding: clamp(22px, 4vw, 44px);
}

.mock-top {
  display: flex;
  gap: 18px;
  align-items: start;
  justify-content: space-between;
  margin-bottom: 34px;
}

.mock-top h3 {
  margin-bottom: 6px;
  color: #15171c;
  font-size: 1.55rem;
}

.mock-top span {
  color: #6b7280;
}

.mock-top button {
  min-height: 44px;
  border: 0;
  border-radius: 8px;
  background: #15171c;
  color: #ffffff;
  padding: 0 16px;
  font: inherit;
  font-weight: 900;
}

.mock-stats {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 20px;
}

.mock-stats article,
.mock-sales,
.mock-batch {
  border: 1px solid rgba(21, 23, 28, 0.1);
  border-radius: 8px;
  background: #ffffff;
  box-shadow: 0 10px 30px rgba(49, 39, 24, 0.05);
}

.mock-stats article {
  min-height: 112px;
  padding: 16px;
  animation: rowDrift 8s ease-in-out infinite;
}

.mock-stats article:nth-child(2) { animation-delay: -1s; }
.mock-stats article:nth-child(3) { animation-delay: -2s; }
.mock-stats article:nth-child(4) { animation-delay: -3s; }
.mock-stats article:nth-child(5) { animation-delay: -4s; }
.mock-stats article:nth-child(6) { animation-delay: -5s; }

.mock-stats span,
.mock-sales span,
.mock-batch span {
  display: block;
  color: #9aa3af;
  font-size: 0.74rem;
  font-weight: 900;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.mock-stats strong {
  display: block;
  margin-top: 18px;
  color: #15171c;
  font-size: clamp(1.55rem, 2.25vw, 2.25rem);
  letter-spacing: 0;
}

.mock-sales {
  display: grid;
  grid-template-columns: 1fr repeat(3, minmax(0, 0.7fr));
  gap: 12px;
  align-items: center;
  margin-bottom: 20px;
  padding: 16px;
}

.mock-sales p {
  margin: 0;
  color: #15171c;
  font-weight: 900;
}

.mock-sales div {
  padding: 12px;
  border-radius: 8px;
  background: #f6f7f8;
}

.mock-sales strong {
  display: block;
  margin-top: 8px;
  color: #15171c;
}

.mock-batch {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 12px;
  padding: 18px;
}

.mock-batch.alt {
  border-color: rgba(30, 111, 92, 0.18);
  background: #f7fbf6;
}

.mock-batch strong {
  color: #15171c;
}

.mock-batch em {
  color: #5f6875;
  font-style: normal;
  font-weight: 900;
}

.snapshot-stage {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 8px;
  background:
    linear-gradient(135deg, rgba(79, 124, 255, 0.16), transparent 42%),
    linear-gradient(315deg, rgba(24, 183, 164, 0.10), transparent 46%),
    rgba(10, 13, 18, 0.92);
  padding: clamp(14px, 2.6vw, 34px);
  box-shadow: 0 38px 130px rgba(0, 0, 0, 0.56);
}

.snapshot-stage::before {
  display: block;
  height: 38px;
  margin: calc(clamp(14px, 2.6vw, 34px) * -1) calc(clamp(14px, 2.6vw, 34px) * -1) 18px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  content: "";
  background:
    radial-gradient(circle at 24px 50%, #ff5f57 0 5px, transparent 6px),
    radial-gradient(circle at 44px 50%, #ffbd2e 0 5px, transparent 6px),
    radial-gradient(circle at 64px 50%, #28c840 0 5px, transparent 6px),
    rgba(255, 255, 255, 0.05);
}

.snapshot-stage img {
  display: block;
  width: 100%;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 8px;
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.36);
}

.snapshot-callout {
  position: absolute;
  display: grid;
  gap: 6px;
  max-width: 310px;
  padding: 14px 16px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 8px;
  background: rgba(8, 11, 16, 0.78);
  box-shadow: 0 20px 64px rgba(0, 0, 0, 0.38);
  backdrop-filter: blur(14px);
}

.snapshot-callout span {
  color: var(--blue-soft);
  font-size: 0.77rem;
  font-weight: 900;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.snapshot-callout strong {
  color: #f2f6fa;
  font-size: 0.98rem;
  line-height: 1.38;
}

.callout-one {
  top: 22%;
  right: 4%;
}

.callout-two {
  left: 4%;
  bottom: 8%;
}

.decision-grid,
.radar {
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(340px, 1.08fr);
  gap: 18px;
  align-items: stretch;
}

.buy-card,
.risk-stack article,
.scan-board,
.module,
.marketplace-card,
.learning-panel,
.radar-ui {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(14px);
}

.buy-card {
  min-height: 560px;
  padding: clamp(22px, 3vw, 34px);
  background:
    linear-gradient(135deg, rgba(79, 124, 255, 0.14), transparent 46%),
    var(--panel-solid);
}

.card-header {
  justify-content: space-between;
  margin-bottom: 54px;
  color: var(--muted);
}

.card-header strong {
  color: var(--teal);
  font-size: 1.4rem;
}

.profit-orbit {
  position: relative;
  display: grid;
  width: min(340px, 80vw);
  height: min(340px, 80vw);
  margin: 0 auto 42px;
  place-items: center;
  border: 1px solid rgba(79, 124, 255, 0.26);
  border-radius: 999px;
  background: radial-gradient(circle, rgba(79, 124, 255, 0.15), transparent 64%);
}

.profit-orbit span {
  position: absolute;
  width: 72%;
  height: 72%;
  border: 1px dashed rgba(143, 179, 255, 0.46);
  border-radius: inherit;
  animation: rotate 13s linear infinite;
}

.profit-orbit strong {
  color: var(--teal);
  font-size: clamp(3rem, 7vw, 6.3rem);
  line-height: 1;
}

.signal-list {
  display: grid;
  gap: 10px;
}

.signal-list div,
.risk-row {
  justify-content: space-between;
  gap: 14px;
  padding: 12px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

dt,
.risk-row span,
.mini-label {
  color: var(--muted);
}

dd {
  margin: 0;
  font-weight: 900;
}

.risk-stack {
  display: grid;
  gap: 18px;
}

.risk-stack article {
  padding: clamp(22px, 3vw, 34px);
}

.meter {
  height: 14px;
  margin-top: 28px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.1);
}

.meter span {
  display: block;
  width: var(--value);
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--blue), var(--teal));
  animation: meterLoad 1.5s ease-out both;
}

.meter.warm span {
  background: linear-gradient(90deg, var(--amber), var(--teal));
}

.scan-board {
  display: grid;
  grid-template-columns: minmax(280px, 0.85fr) 82px minmax(300px, 1.15fr);
  gap: 18px;
  align-items: center;
  min-height: 520px;
  padding: clamp(22px, 4vw, 46px);
  background:
    linear-gradient(135deg, rgba(79, 124, 255, 0.13), transparent 52%),
    rgba(16, 21, 29, 0.82);
}

.pile {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  align-items: stretch;
  min-height: 0;
}

.photo {
  display: grid;
  width: 100%;
  min-height: 250px;
  place-items: end start;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 8px;
  padding: 16px;
  color: #061014;
  font-weight: 900;
  box-shadow: 0 22px 54px rgba(0, 0, 0, 0.35);
}

.p1 {
  background: linear-gradient(135deg, #dbe7f3, #8cc9df);
}

.p2 {
  background: linear-gradient(135deg, #f8d08a, #d76c5c);
}

.p3 {
  background: linear-gradient(135deg, #c6e58a, #5da488);
}

.asset-photo {
  grid-template-rows: 1fr auto;
  justify-items: center;
  align-items: center;
  overflow: hidden;
  background: linear-gradient(135deg, #fff8eb, #e8f3e8);
}

.asset-photo.p1 {
  background: linear-gradient(135deg, #eef6ff, #b8d7ee);
}

.asset-photo.p2 {
  background: linear-gradient(135deg, #fff8eb, #f4c276);
}

.asset-photo.p3 {
  background: linear-gradient(135deg, #eff8ec, #a7d4b3);
}

.asset-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 168px;
}

.asset-icon img {
  width: 100%;
  max-width: 185px;
  max-height: 158px;
  object-fit: contain;
  filter: drop-shadow(0 18px 22px rgba(21, 23, 28, 0.16));
}

.asset-photo.p1 .asset-icon img {
  transform: translateY(-8px);
}

.asset-photo.p2 .asset-icon img {
  transform: translateY(-4px);
}

.asset-photo.p3 .asset-icon img {
  transform: translateY(-8px);
}

.asset-photo span {
  justify-self: start;
  align-self: end;
  margin-top: 8px;
}

.center-vase-card {
  z-index: 2;
  background: linear-gradient(135deg, #ffffff, #eef8f2);
  box-shadow: 0 28px 70px rgba(30, 111, 92, 0.18);
}

.center-vase-card .asset-icon img {
  max-height: 158px;
}

.pipeline-line {
  height: 2px;
  background: linear-gradient(90deg, var(--blue), var(--teal));
  filter: drop-shadow(0 0 12px rgba(79, 124, 255, 0.42));
}

.listing-column {
  display: grid;
  gap: 14px;
}

.listing-column article {
  padding: 18px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.22);
}

.listing-column span,
.listing-column em {
  display: block;
  color: var(--muted);
  font-style: normal;
}

.listing-column strong {
  display: block;
  margin: 8px 0 10px;
  font-size: 1.15rem;
}

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

.marketplace-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin-bottom: 14px;
}

.marketplace-card {
  position: relative;
  min-height: 370px;
  overflow: hidden;
  padding: clamp(24px, 3vw, 38px);
}

.ebay-card {
  min-height: 440px;
  border-color: rgba(30, 111, 92, 0.22);
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.88), rgba(255, 255, 255, 0.62)),
    linear-gradient(115deg, rgba(229, 50, 56, 0.08), rgba(0, 100, 210, 0.08) 36%, rgba(245, 175, 2, 0.10) 66%, rgba(134, 184, 23, 0.08));
}

.vinted-card {
  min-height: 440px;
}

.kleinanzeigen-card {
  min-height: 440px;
  border-color: rgba(102, 163, 32, 0.22);
}

.marketplace-card::after {
  position: absolute;
  inset: auto -10% -38% -10%;
  height: 62%;
  content: "";
  filter: blur(44px);
  opacity: 0.48;
}

.ebay-card::after {
  background: linear-gradient(90deg, #e53238, #0064d2, #f5af02, #86b817);
}

.vinted-card::after {
  background: #007782;
}

.kleinanzeigen-card::after {
  background: #66a320;
}

.marketplace-logo {
  position: relative;
  z-index: 1;
  display: flex;
  width: min(270px, 78%);
  height: 92px;
  align-items: center;
  justify-content: center;
  margin-bottom: 54px;
  padding: 14px 18px;
  border-radius: 8px;
  background: #ffffff;
}

.marketplace-badge {
  position: relative;
  z-index: 1;
  display: inline-flex;
  margin-bottom: 18px;
  padding: 8px 10px;
  border: 1px solid rgba(30, 111, 92, 0.18);
  border-radius: 8px;
  background: rgba(30, 111, 92, 0.08);
  color: #1e6f5c;
  font-size: 0.74rem;
  font-weight: 950;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.marketplace-badge.secondary {
  border-color: rgba(0, 119, 130, 0.18);
  background: rgba(0, 119, 130, 0.08);
  color: #007782;
}

.marketplace-badge.tertiary {
  border-color: rgba(102, 163, 32, 0.22);
  background: rgba(102, 163, 32, 0.10);
  color: #4e7d18;
}

.marketplace-logo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.vinted-logo {
  background: #ffffff;
}

.ebay-logo {
  background: #ffffff;
}

/* Anders als eBay und Vinted liegt hier die Hausfarbe IM Bild - es ist die quadratisch
   angelegte Teilen-Grafik mit lindgruener Flaeche, kein freigestelltes Logo. Ein weisser
   Rahmen darum ergaebe einen gruenen Block in einem weissen Kasten mit sichtbarer Kante.
   Deshalb traegt der Rahmen dieselbe Farbe wie das Bild, und das Logo fuellt ihn ganz aus:
   object-fit cover statt contain, damit oben und unten kein leerer Streifen bleibt (die
   Grafik ist 1181x630, der Rahmen deutlich flacher). */
.kleinanzeigen-logo {
  overflow: hidden;
  padding: 0;
  background: #c1ec4c;
}

.kleinanzeigen-logo img {
  object-fit: cover;
  object-position: center;
  transform: scale(1.02);
}

.marketplace-card h3,
.marketplace-card p,
.marketplace-flow {
  position: relative;
  z-index: 1;
}

.marketplace-card p {
  max-width: 560px;
  color: var(--muted);
  line-height: 1.65;
}

.marketplace-flow {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 28px;
}

.marketplace-flow span {
  padding: 9px 10px;
  border: 1px solid rgba(21, 23, 28, 0.12);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.66);
  color: #2f3742;
  font-size: 0.85rem;
  font-weight: 900;
}

.marketplace-proof {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 5px;
  max-width: 520px;
  margin-top: 26px;
  padding: 16px;
  border: 1px solid rgba(30, 111, 92, 0.18);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.72);
  box-shadow: 0 18px 42px rgba(49, 39, 24, 0.10);
}

.marketplace-proof span,
.marketplace-proof em {
  color: var(--muted);
  font-size: 0.9rem;
  font-style: normal;
  font-weight: 750;
}

.marketplace-proof strong {
  color: var(--ink);
  font-size: clamp(1.1rem, 2vw, 1.35rem);
}

.why-now {
  padding-top: clamp(54px, 8vw, 98px);
}

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

.why-now-grid article {
  min-height: 250px;
  padding: 24px;
  border: 1px solid rgba(21, 23, 28, 0.12);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.68);
  box-shadow: 0 18px 54px rgba(49, 39, 24, 0.10), inset 0 1px 0 rgba(255, 255, 255, 0.75);
}

.why-now-grid span {
  display: inline-flex;
  margin-bottom: 28px;
  color: #1e6f5c;
  font-size: 0.82rem;
  font-weight: 950;
}

.why-now-grid h3 {
  margin: 0 0 12px;
  font-size: clamp(1.15rem, 2vw, 1.45rem);
}

.why-now-grid p {
  margin: 0;
  color: var(--muted);
  line-height: 1.6;
}

.legal-hero {
  padding-bottom: 44px;
}

.legal-page {
  padding-top: 0;
}

.legal-panel {
  max-width: 940px;
  margin: 0 auto;
  padding: clamp(26px, 5vw, 56px);
  border: 1px solid rgba(21, 23, 28, 0.12);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.72);
  box-shadow: 0 24px 70px rgba(49, 39, 24, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.78);
}

.legal-panel h2 {
  margin: 32px 0 10px;
  font-size: clamp(1.25rem, 2vw, 1.7rem);
}

.legal-panel h2:first-child {
  margin-top: 0;
}

.legal-panel p {
  margin: 0 0 16px;
  color: var(--muted);
  font-size: 1rem;
  line-height: 1.75;
}

.legal-panel a {
  color: #1e6f5c;
  font-weight: 850;
}

.legal-note {
  margin-top: 34px;
  padding: 18px;
  border: 1px solid rgba(246, 185, 75, 0.38);
  border-radius: 8px;
  background: rgba(246, 185, 75, 0.12);
  color: #6f4b08;
  font-weight: 750;
  line-height: 1.6;
}

.site-footer {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  flex-wrap: wrap;
  padding: 32px clamp(18px, 5vw, 74px);
  border-top: 1px solid rgba(21, 23, 28, 0.10);
  color: var(--muted);
  font-size: 0.92rem;
  font-weight: 750;
}

.site-footer a {
  color: var(--ink);
}

.module {
  min-height: 300px;
  padding: 24px;
  transition: transform 180ms ease, border-color 180ms ease;
}

.module:hover {
  border-color: rgba(30, 111, 92, 0.28);
  transform: translateY(-6px);
}

.module span {
  display: block;
  margin-bottom: 56px;
  color: var(--blue-soft);
  font-weight: 900;
}

.module p {
  color: var(--muted);
  line-height: 1.62;
}

.radar {
  align-items: center;
}

.radar-ui {
  display: grid;
  grid-template-columns: 0.85fr 1fr;
  gap: 18px;
  align-items: center;
  min-height: 520px;
  padding: clamp(22px, 4vw, 40px);
}

.radar-circle {
  position: relative;
  width: min(310px, 70vw);
  aspect-ratio: 1;
  margin: auto;
  overflow: hidden;
  border: 1px solid rgba(79, 124, 255, 0.34);
  border-radius: 999px;
  background:
    repeating-radial-gradient(circle, transparent 0 44px, rgba(255, 255, 255, 0.09) 45px 46px),
    radial-gradient(circle, rgba(79, 124, 255, 0.16), transparent 67%);
}

.sweep {
  position: absolute;
  inset: 50% 50% auto auto;
  width: 50%;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--blue-soft));
  transform-origin: right center;
  animation: sweep 3s linear infinite;
}

.dot {
  position: absolute;
  width: 12px;
  height: 12px;
  border-radius: 999px;
  background: var(--teal);
  box-shadow: 0 0 16px rgba(24, 183, 164, 0.54);
}

.d1 { left: 28%; top: 30%; }
.d2 { right: 22%; top: 44%; background: var(--amber); }
.d3 { left: 48%; bottom: 24%; background: var(--blue); }

.trend-list {
  display: grid;
  gap: 12px;
}

.trend-list div {
  padding: 14px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.04);
}

.trend-list span,
.trend-list em {
  display: block;
  color: var(--muted);
  font-style: normal;
  font-size: 0.86rem;
}

.trend-list strong {
  display: block;
  margin: 7px 0;
}

.learning-panel {
  max-width: 1200px;
  min-height: 420px;
  padding: clamp(26px, 5vw, 62px);
  background:
    linear-gradient(120deg, rgba(79, 124, 255, 0.14), transparent 42%),
    linear-gradient(320deg, rgba(24, 183, 164, 0.10), transparent 46%),
    var(--panel-solid);
}

.learning-tags {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 42px;
}

.learning-tags span {
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  color: #dbe5ee;
  font-weight: 800;
}

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

.faq details {
  overflow: hidden;
  border: 1px solid rgba(21, 23, 28, 0.12);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.72);
  box-shadow: 0 14px 42px rgba(49, 39, 24, 0.08);
  transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease;
}

.faq details:hover {
  border-color: rgba(30, 111, 92, 0.22);
  box-shadow: 0 24px 58px rgba(49, 39, 24, 0.12);
  transform: translateY(-3px);
}

.faq summary {
  position: relative;
  cursor: pointer;
  list-style: none;
  padding: 20px 52px 20px 20px;
  color: #15171c;
  font-size: 1.04rem;
  font-weight: 900;
}

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

.faq summary::after {
  position: absolute;
  top: 18px;
  right: 18px;
  display: grid;
  width: 28px;
  height: 28px;
  place-items: center;
  border-radius: 999px;
  background: #eef3ef;
  color: #1e6f5c;
  content: "+";
  font-weight: 900;
}

.faq details[open] summary::after {
  content: "–";
}

.faq details p {
  margin: 0;
  padding: 0 20px;
  color: #5f6875;
  line-height: 1.65;
}

.faq details p + p {
  margin-top: 12px;
}

.faq details p:last-child {
  padding-bottom: 22px;
}

.final {
  min-height: 78svh;
  display: grid;
  align-content: center;
  justify-items: start;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.final h2 {
  max-width: 1100px;
}

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

.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Dropstitch-inspired polish pass: lighter startup skin, stronger product motion. */
body {
  background:
    radial-gradient(circle at 12% 10%, rgba(30, 111, 92, 0.10), transparent 28rem),
    radial-gradient(circle at 88% 18%, rgba(247, 184, 77, 0.12), transparent 24rem),
    linear-gradient(180deg, #fbf8f1 0%, #f5f1e8 46%, #eef3ef 100%);
  color: #15171c;
}

body::before {
  background-image:
    linear-gradient(rgba(21, 23, 28, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(21, 23, 28, 0.035) 1px, transparent 1px);
  mask-image: linear-gradient(to bottom, black 0%, transparent 44%);
}

.cursor-light {
  background: radial-gradient(circle, rgba(30, 111, 92, 0.14), transparent 62%);
}

.nav {
  border-bottom: 1px solid rgba(21, 23, 28, 0.1);
  background: rgba(251, 248, 241, 0.78);
  color: #15171c;
}

.brand-mark {
  background: #f5f0e7;
  color: #15171c;
}

.nav-links {
  color: #5f6875;
}

.button-primary {
  background: #15171c;
  color: #fbf8f1;
  box-shadow: 0 10px 28px rgba(21, 23, 28, 0.14);
}

.button-ghost {
  border-color: rgba(21, 23, 28, 0.16);
  color: #15171c;
  background: rgba(255, 255, 255, 0.44);
}

.eyebrow {
  color: #1e6f5c;
}

.hero-text,
.radar-copy p,
.learning-panel p,
.flow-step p,
.better-card p,
.module p,
.marketplace-card p,
.feature-panel p,
.workflow-card p,
.proof-copy p {
  color: #5f6875;
}

.hero-proof span,
.learning-tags span,
.marketplace-flow span {
  border-color: rgba(21, 23, 28, 0.12);
  background: rgba(255, 255, 255, 0.64);
  color: #2f3742;
}

.hero-visual,
.snapshot-stage {
  border-color: rgba(21, 23, 28, 0.12);
  background:
    linear-gradient(135deg, rgba(30, 111, 92, 0.10), transparent 45%),
    linear-gradient(315deg, rgba(247, 184, 77, 0.10), transparent 46%),
    rgba(255, 255, 255, 0.72);
  box-shadow: 0 32px 90px rgba(49, 39, 24, 0.16);
}

.hero-visual {
  animation: none;
}

.hero-visual::before,
.snapshot-stage::before {
  border-bottom-color: rgba(21, 23, 28, 0.09);
  background:
    radial-gradient(circle at 24px 50%, #ff6b5f 0 5px, transparent 6px),
    radial-gradient(circle at 44px 50%, #f7b84d 0 5px, transparent 6px),
    radial-gradient(circle at 64px 50%, #1e6f5c 0 5px, transparent 6px),
    rgba(21, 23, 28, 0.035);
}

.hero-visual img,
.snapshot-stage img {
  border-color: rgba(21, 23, 28, 0.12);
  box-shadow: 0 24px 70px rgba(49, 39, 24, 0.16);
}

.hero-chip,
.snapshot-callout {
  border-color: rgba(21, 23, 28, 0.12);
  background: rgba(255, 255, 255, 0.88);
  color: #15171c;
  box-shadow: 0 18px 48px rgba(49, 39, 24, 0.14);
}

.hero-chip span,
.snapshot-callout span,
.card-header,
dt,
.risk-row span,
.mini-label,
.listing-column span,
.listing-column em,
.trend-list span,
.trend-list em {
  color: #6b7280;
}

.snapshot-callout span,
.flow-step span,
.module span,
.better-card span {
  color: #1e6f5c;
}

.channel-strip,
.marquee {
  border-block-color: rgba(21, 23, 28, 0.1);
  background: rgba(255, 255, 255, 0.54);
  color: #5f6875;
}

.channel-strip strong,
.marquee span {
  color: #15171c;
}

.simple-card,
.flow-step,
.buy-card,
.risk-stack article,
.scan-board,
.marketplace-card,
.module,
.better-card,
.learning-panel,
.radar-ui {
  border-color: rgba(21, 23, 28, 0.12);
  background: rgba(255, 255, 255, 0.68);
  box-shadow: 0 18px 54px rgba(49, 39, 24, 0.10), inset 0 1px 0 rgba(255, 255, 255, 0.75);
}

.simple-card,
.flow-step,
.module,
.better-card,
.marketplace-card {
  transition: transform 220ms ease, box-shadow 220ms ease, border-color 220ms ease;
}

.simple-card:hover,
.flow-step:hover,
.module:hover,
.better-card:hover,
.marketplace-card:hover {
  border-color: rgba(30, 111, 92, 0.28);
  box-shadow: 0 28px 72px rgba(49, 39, 24, 0.16);
  transform: translateY(-8px);
}

.buy-card,
.learning-panel {
  background:
    linear-gradient(135deg, rgba(30, 111, 92, 0.10), transparent 48%),
    rgba(255, 255, 255, 0.72);
}

.card-header strong,
.profit-orbit strong {
  color: #1e6f5c;
}

.profit-orbit {
  border-color: rgba(30, 111, 92, 0.18);
  background: radial-gradient(circle, rgba(30, 111, 92, 0.12), transparent 64%);
}

.profit-orbit span {
  border-color: rgba(30, 111, 92, 0.38);
}

.meter {
  background: rgba(21, 23, 28, 0.08);
}

.meter span,
.meter.warm span,
.pipeline-line {
  background: linear-gradient(90deg, #1e6f5c, #7dbf72);
}

.listing-table {
  border-color: rgba(21, 23, 28, 0.12);
  background: #ffffff;
  box-shadow: 0 24px 70px rgba(49, 39, 24, 0.12);
}

.listing-row {
  animation: rowDrift 9s ease-in-out infinite;
}

.listing-row:nth-child(3) {
  animation-delay: -2.4s;
}

.listing-row:nth-child(4) {
  animation-delay: -4.8s;
}

.photo {
  color: #15171c;
}

.radar-circle {
  border-color: rgba(30, 111, 92, 0.24);
  background:
    repeating-radial-gradient(circle, transparent 0 44px, rgba(21, 23, 28, 0.07) 45px 46px),
    radial-gradient(circle, rgba(30, 111, 92, 0.10), transparent 67%);
}

.sweep {
  background: linear-gradient(90deg, transparent, #1e6f5c);
}

.dot {
  background: #1e6f5c;
  box-shadow: 0 0 16px rgba(30, 111, 92, 0.38);
}

.d2 {
  background: #f7b84d;
}

.d3 {
  background: #2b6eea;
}

.trend-list div,
.listing-column article {
  border-color: rgba(21, 23, 28, 0.1);
  background: rgba(255, 255, 255, 0.58);
}

.feature-category-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 14px;
}

.feature-category,
.feature-mini {
  border: 1px solid rgba(21, 23, 28, 0.1);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.72);
  box-shadow: 0 18px 54px rgba(21, 23, 28, 0.07);
}

.feature-category {
  min-height: 330px;
  padding: 22px;
  transition: transform 220ms ease, box-shadow 220ms ease, border-color 220ms ease;
}

.feature-category:hover,
.feature-mini:hover {
  border-color: rgba(30, 111, 92, 0.28);
  box-shadow: 0 28px 72px rgba(49, 39, 24, 0.14);
  transform: translateY(-6px);
}

.feature-category > span {
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  margin-bottom: 28px;
  border-radius: 8px;
  background: #15171c;
  color: #fff;
  font-size: 0.78rem;
  font-weight: 900;
}

.feature-category p {
  color: #596370;
  line-height: 1.6;
}

.feature-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 22px;
}

.feature-tags em {
  padding: 8px 10px;
  border: 1px solid rgba(21, 23, 28, 0.1);
  border-radius: 8px;
  background: #f8faf7;
  color: #344039;
  font-size: 0.78rem;
  font-style: normal;
  font-weight: 900;
}

.feature-deep-dive {
  display: grid;
  gap: clamp(18px, 3vw, 34px);
}

.feature-row {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(320px, 1.05fr);
  gap: clamp(22px, 4vw, 70px);
  align-items: center;
  padding: clamp(22px, 4vw, 46px);
  border: 1px solid rgba(21, 23, 28, 0.1);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.54);
}

.feature-row.reverse .feature-row-copy {
  order: 2;
}

.feature-row-copy p:not(.eyebrow) {
  max-width: 620px;
  color: #596370;
  font-size: 1.05rem;
  line-height: 1.72;
}

.feature-mini {
  padding: 20px;
  transition: transform 220ms ease, box-shadow 220ms ease, border-color 220ms ease;
}

.feature-mini.buy-card {
  background:
    linear-gradient(135deg, rgba(30, 111, 92, 0.10), transparent 48%),
    rgba(255, 255, 255, 0.86);
}

.capture-mini {
  display: grid;
  gap: 14px;
  min-height: 300px;
  align-content: center;
}

.capture-stack {
  position: relative;
  min-height: 190px;
}

.capture-stack span {
  position: absolute;
  display: grid;
  width: 132px;
  height: 92px;
  place-items: center;
  border: 1px solid rgba(21, 23, 28, 0.1);
  border-radius: 8px;
  background: linear-gradient(135deg, #f5f1e8, #dbe8df);
  color: #15171c;
  font-weight: 900;
  box-shadow: 0 16px 38px rgba(21, 23, 28, 0.1);
}

.capture-stack span:nth-child(1) { left: 6%; top: 10px; transform: rotate(-7deg); }
.capture-stack span:nth-child(2) { left: 35%; top: 34px; transform: rotate(5deg); }
.capture-stack span:nth-child(3) { right: 8%; top: 2px; transform: rotate(8deg); }
.capture-stack span:nth-child(4) { left: 24%; bottom: 12px; transform: rotate(-3deg); }

.capture-mini strong,
.capture-mini em {
  display: block;
}

.capture-mini strong {
  color: #15171c;
  font-size: 1.45rem;
}

.capture-mini em {
  color: #5f6875;
  font-style: normal;
}

.publish-mini,
.ops-mini,
.numbers-mini {
  display: grid;
  gap: 12px;
}

.publish-mini div,
.ops-mini div,
.numbers-mini div {
  padding: 16px;
  border: 1px solid rgba(21, 23, 28, 0.09);
  border-radius: 8px;
  background: #ffffff;
}

.publish-mini span,
.numbers-mini span {
  display: block;
  color: #8d96a3;
  font-size: 0.74rem;
  font-weight: 900;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.publish-mini strong,
.publish-mini em,
.ops-mini strong,
.ops-mini span,
.numbers-mini strong {
  display: block;
}

.publish-mini strong,
.ops-mini strong,
.numbers-mini strong {
  margin-top: 6px;
  color: #15171c;
  font-size: 1.08rem;
}

.publish-mini em,
.ops-mini span {
  margin-top: 5px;
  color: #5f6875;
  font-style: normal;
}

.numbers-mini {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.numbers-mini strong {
  font-size: 1.3rem;
}

.app-screen {
  overflow: hidden;
  border: 1px solid rgba(21, 23, 28, 0.1);
  border-radius: 8px;
  background: #ffffff;
  box-shadow: 0 24px 74px rgba(21, 23, 28, 0.1);
}

.screen-top {
  display: grid;
  gap: 5px;
  padding: 18px 20px;
  border-bottom: 1px solid rgba(21, 23, 28, 0.09);
  background: #15171c;
  color: #ffffff;
}

.screen-top span,
.buy-decision span,
.buy-breakdown span,
.screen-list span,
.detected-items span,
.finance-stats span,
.receipt-list span,
.platform-publish span {
  display: block;
  color: #8d96a3;
  font-size: 0.74rem;
  font-weight: 900;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.screen-top span {
  color: #9fe7c6;
}

.screen-top strong {
  font-size: 1.25rem;
}

.screen-top em {
  color: #cbd4df;
  font-style: normal;
}

.screen-progress {
  height: 4px;
  overflow: hidden;
  background: rgba(21, 23, 28, 0.08);
}

.screen-progress span {
  display: block;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, #1e6f5c, #9fe7c6, #f6b94b);
  transform-origin: left;
  animation: workProgress 4.8s ease-in-out infinite;
}

.buy-decision {
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: 12px;
  padding: 18px;
}

.buy-decision div {
  padding: 18px;
  border-radius: 8px;
  background: #eef8f2;
}

.buy-decision strong {
  display: block;
  margin: 8px 0 4px;
  color: #1e6f5c;
  font-size: clamp(2rem, 4vw, 3.6rem);
  line-height: 0.9;
}

.buy-decision em,
.screen-list em,
.detected-items em,
.receipt-list em,
.platform-publish em {
  display: block;
  color: #5f6875;
  font-style: normal;
  line-height: 1.45;
}

.buy-breakdown,
.finance-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  padding: 0 18px 18px;
}

.buy-breakdown article,
.finance-stats article {
  padding: 14px;
  border: 1px solid rgba(21, 23, 28, 0.08);
  border-radius: 8px;
  background: #f8faf7;
}

.buy-breakdown strong,
.finance-stats strong {
  display: block;
  margin-top: 10px;
  color: #15171c;
  font-size: 1.25rem;
}

.screen-list,
.detected-items,
.receipt-list {
  display: grid;
  gap: 10px;
  padding: 0 18px 18px;
}

.screen-list div,
.detected-items div,
.receipt-list div {
  position: relative;
  overflow: hidden;
  padding: 14px;
  border: 1px solid rgba(21, 23, 28, 0.08);
  border-radius: 8px;
  background: #ffffff;
}

.screen-list div::after,
.detected-items div::after,
.receipt-list div::after {
  position: absolute;
  inset: 0;
  content: "";
  background: linear-gradient(90deg, transparent, rgba(30, 111, 92, 0.08), transparent);
  opacity: 0;
  transform: translateX(-100%);
}

.screen-list div:first-child::after,
.receipt-list div:nth-child(2)::after {
  animation: rowComplete 5.8s ease-in-out infinite;
}

.warning-row {
  border-color: rgba(246, 185, 75, 0.42) !important;
  background: #fff8e7 !important;
  animation: warningPulse 4.8s ease-in-out infinite;
}

.screen-list strong,
.detected-items strong,
.receipt-list strong {
  display: block;
  margin: 7px 0 3px;
  color: #15171c;
}

.photo-batch-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  padding: 18px;
}

.photo-batch-grid article {
  display: grid;
  min-height: 104px;
  align-content: end;
  padding: 12px;
  border-radius: 8px;
  background:
    radial-gradient(circle at 72% 20%, rgba(246, 185, 75, 0.38), transparent 4rem),
    linear-gradient(135deg, #edf3e9, #f5efe4);
  box-shadow: inset 0 0 0 1px rgba(21, 23, 28, 0.08);
  animation: cardRecognized 5.8s ease-in-out infinite;
}

.photo-batch-grid article:nth-child(2) { animation-delay: 0.25s; }
.photo-batch-grid article:nth-child(3) { animation-delay: 0.5s; }
.photo-batch-grid article:nth-child(4) { animation-delay: 0.75s; }
.photo-batch-grid article:nth-child(5) { animation-delay: 1s; }
.photo-batch-grid article:nth-child(6) { animation-delay: 1.25s; }

.photo-batch-grid b,
.photo-batch-grid em {
  display: block;
}

.photo-batch-grid b {
  color: #15171c;
}

.photo-batch-grid em {
  color: #5f6875;
  font-size: 0.82rem;
  font-style: normal;
}

.priority-list {
  display: grid;
}

.priority-list article {
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1fr) auto;
  gap: 14px;
  align-items: center;
  padding: 16px 18px;
  border-bottom: 1px solid rgba(21, 23, 28, 0.08);
}

.priority-list article:first-child::after {
  position: absolute;
  inset: 0;
  content: "";
  background: linear-gradient(90deg, transparent, rgba(30, 111, 92, 0.08), transparent);
  transform: translateX(-100%);
  animation: rowComplete 5.8s ease-in-out infinite;
}

.priority-list article:last-child {
  border-bottom: 0;
}

.priority-list b,
.priority-list span,
.priority-list em {
  display: block;
}

.priority-list span {
  color: #5f6875;
  line-height: 1.45;
}

.priority-list em {
  justify-self: end;
  min-width: 72px;
  padding: 7px 10px;
  border-radius: 999px;
  background: #eef8f2;
  color: #1e6f5c;
  font-size: 0.76rem;
  font-style: normal;
  font-weight: 900;
  text-align: center;
}

.platform-publish {
  display: grid;
  gap: 12px;
  padding: 18px;
}

.platform-publish article {
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 6px 16px;
  align-items: center;
  padding: 16px;
  border: 1px solid rgba(21, 23, 28, 0.08);
  border-radius: 8px;
  background: #f8faf7;
}

.listing-ready::after {
  position: absolute;
  inset: 0;
  content: "";
  background: linear-gradient(90deg, transparent, rgba(30, 111, 92, 0.10), transparent);
  transform: translateX(-100%);
  animation: listingSweep 5.8s ease-in-out infinite;
}

.platform-publish span,
.platform-publish em {
  grid-column: 1;
}

.platform-publish strong {
  grid-column: 1;
  color: #15171c;
  font-size: 1.15rem;
}

.platform-publish button {
  grid-column: 2;
  grid-row: 1 / span 3;
  position: relative;
  overflow: hidden;
  min-height: 42px;
  border: 0;
  border-radius: 8px;
  background: #15171c;
  color: #ffffff;
  padding: 0 14px;
  font: inherit;
  font-weight: 900;
}

.platform-publish button span,
.platform-publish button em {
  display: block;
  color: inherit;
  font-style: normal;
  transition: transform 260ms ease, opacity 260ms ease;
}

.platform-publish .listing-ready button span {
  animation: uploadLabel 5.8s ease-in-out infinite;
}

.platform-publish .listing-ready button em {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  opacity: 0;
  transform: translateY(14px);
  animation: uploadedLabel 5.8s ease-in-out infinite;
}

.about-teaser {
  padding-top: clamp(52px, 7vw, 92px);
  padding-bottom: clamp(52px, 7vw, 92px);
}

.about-teaser-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(280px, 0.95fr);
  gap: clamp(24px, 5vw, 76px);
  align-items: end;
  max-width: 1180px;
  margin: 0 auto;
  padding: clamp(26px, 4vw, 52px);
  border: 1px solid rgba(21, 23, 28, 0.1);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.68);
  box-shadow: 0 24px 80px rgba(21, 23, 28, 0.08);
}

.about-teaser-grid h2 {
  margin-bottom: 0;
  font-size: clamp(2.15rem, 4.8vw, 5.1rem);
}

.about-teaser-copy p,
.why-copy p,
.founder-card p {
  color: #4d5663;
  font-size: 1.05rem;
  line-height: 1.75;
}

.text-link {
  display: inline-flex;
  margin-top: 18px;
  color: var(--teal);
  font-weight: 900;
}

.text-link::after {
  content: "→";
  margin-left: 8px;
  transition: transform 0.2s ease;
}

.text-link:hover::after {
  transform: translateX(4px);
}

.about-hero {
  min-height: 68svh;
}

.why-split {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(300px, 1.05fr);
  gap: clamp(28px, 5vw, 86px);
  align-items: center;
}

.why-copy h2 {
  max-width: 760px;
}

.why-card-stack {
  display: grid;
  gap: 14px;
  perspective: 1000px;
}

.why-card-stack article {
  display: grid;
  grid-template-columns: 54px 1fr;
  gap: 8px 18px;
  padding: 22px;
  border: 1px solid rgba(21, 23, 28, 0.1);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.78);
  box-shadow: 0 18px 50px rgba(21, 23, 28, 0.08);
  transform: rotate(-1deg);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.why-card-stack article:nth-child(even) {
  transform: rotate(1deg) translateX(18px);
}

.why-card-stack article:hover {
  box-shadow: 0 28px 70px rgba(21, 23, 28, 0.12);
  transform: rotate(0deg) translateY(-4px);
}

.why-card-stack span {
  grid-row: span 2;
  display: grid;
  width: 44px;
  height: 44px;
  place-items: center;
  border-radius: 8px;
  background: #15171c;
  color: #fff;
  font-size: 0.8rem;
  font-weight: 900;
}

.why-card-stack strong {
  font-size: 1.18rem;
}

.why-card-stack p {
  margin: 0;
  color: #5f6875;
  line-height: 1.55;
}

.lifecycle {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  max-width: 1120px;
  margin: 0 auto 28px;
}

.lifecycle span {
  position: relative;
  padding: 13px 16px;
  border: 1px solid rgba(30, 111, 92, 0.16);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.72);
  color: #17201d;
  font-weight: 900;
  box-shadow: 0 14px 36px rgba(21, 23, 28, 0.06);
}

.lifecycle span::after {
  content: "";
  position: absolute;
  right: -11px;
  top: 50%;
  width: 12px;
  height: 1px;
  background: rgba(30, 111, 92, 0.26);
}

.lifecycle span:last-child::after {
  display: none;
}

.principle-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  margin-top: 42px;
}

.principle-grid article {
  min-height: 260px;
  padding: 24px;
  border: 1px solid rgba(21, 23, 28, 0.1);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.72);
  box-shadow: 0 18px 54px rgba(21, 23, 28, 0.07);
}

.principle-grid h3 {
  max-width: 260px;
}

.principle-grid p {
  color: #596370;
  line-height: 1.65;
}

.founder-card {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(300px, 1.05fr);
  gap: clamp(24px, 5vw, 78px);
  align-items: start;
  max-width: 1180px;
  margin: 0 auto;
  padding: clamp(28px, 5vw, 62px);
  border-radius: 8px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.88), rgba(238, 246, 239, 0.82)),
    radial-gradient(circle at 88% 8%, rgba(246, 185, 75, 0.24), transparent 22rem);
  border: 1px solid rgba(21, 23, 28, 0.1);
  box-shadow: 0 28px 86px rgba(21, 23, 28, 0.1);
}

.founder-proof {
  display: grid;
  gap: 18px;
}

.social-proof {
  display: grid;
  grid-template-columns: 58px 1fr;
  gap: 14px;
  align-items: center;
  max-width: 520px;
  padding: 14px;
  border: 1px solid rgba(21, 23, 28, 0.12);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.78);
  box-shadow: 0 14px 42px rgba(21, 23, 28, 0.08);
  transition: transform 180ms ease, box-shadow 180ms ease;
}

.social-proof:hover {
  box-shadow: 0 24px 58px rgba(21, 23, 28, 0.12);
  transform: translateY(-3px);
}

.social-proof img {
  width: 58px;
  height: 58px;
  border-radius: 8px;
  object-fit: cover;
}

.social-proof strong,
.social-proof em {
  display: block;
}

.social-proof strong {
  color: #15171c;
  font-size: 1.08rem;
}

.social-proof em {
  margin-top: 4px;
  color: #5f6875;
  font-style: normal;
  line-height: 1.45;
}

.trust-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.trust-grid article {
  min-height: 280px;
  padding: 24px;
  border: 1px solid rgba(21, 23, 28, 0.1);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.72);
  box-shadow: 0 18px 54px rgba(21, 23, 28, 0.07);
}

.trust-grid span {
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  margin-bottom: 28px;
  border-radius: 8px;
  background: #15171c;
  color: #fff;
  font-size: 0.78rem;
  font-weight: 900;
}

.trust-grid p {
  color: #596370;
  line-height: 1.65;
}

.today-board {
  max-width: 980px;
  margin: 0 auto;
  overflow: hidden;
  border: 1px solid rgba(21, 23, 28, 0.1);
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 28px 86px rgba(21, 23, 28, 0.1);
}

.today-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 22px 24px;
  border-bottom: 1px solid rgba(21, 23, 28, 0.1);
  background: #15171c;
  color: #fff;
  font-weight: 900;
}

.today-header strong {
  color: #9fe7c6;
}

.today-list {
  display: grid;
}

.today-list article {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1fr) auto;
  gap: 18px;
  align-items: center;
  padding: 20px 24px;
  border-bottom: 1px solid rgba(21, 23, 28, 0.08);
}

.today-list article:last-child {
  border-bottom: 0;
}

.today-list span {
  color: #5f6875;
}

.today-list em {
  justify-self: end;
  min-width: 76px;
  padding: 7px 10px;
  border-radius: 999px;
  background: #eef8f2;
  color: #1e6f5c;
  font-size: 0.78rem;
  font-style: normal;
  font-weight: 900;
  text-align: center;
}

@keyframes floatVisual {
  0%, 100% { transform: rotateY(-6deg) rotateX(4deg) translateY(0); }
  50% { transform: rotateY(-3deg) rotateX(5deg) translateY(-16px); }
}

@keyframes cardDrift {
  0%, 100% { transform: translate3d(0, 0, 0); }
  50% { transform: translate3d(12px, -14px, 0); }
}

@keyframes processTravel {
  0%, 12% { left: 24px; }
  32%, 44% { left: calc(25% + 12px); }
  60%, 72% { left: calc(50%); }
  88%, 100% { left: calc(75% - 12px); }
}

@keyframes storyProcessTravel {
  0%, 10% { left: 24px; }
  25%, 34% { left: calc(20% + 14px); }
  45%, 54% { left: calc(40% + 5px); }
  65%, 74% { left: calc(60% - 5px); }
  88%, 100% { left: calc(80% - 14px); }
}

@keyframes storyLoad {
  0%, 16% { transform: scaleX(0); opacity: 0.45; }
  46%, 72% { transform: scaleX(1); opacity: 1; }
  100% { transform: scaleX(1); opacity: 0.55; }
}

@keyframes workProgress {
  0%, 12% { transform: scaleX(0.18); }
  42%, 56% { transform: scaleX(0.72); }
  82%, 100% { transform: scaleX(1); }
}

@keyframes cardRecognized {
  0%, 18% {
    box-shadow: inset 0 0 0 1px rgba(21, 23, 28, 0.08);
    transform: translateY(0);
  }
  34%, 58% {
    box-shadow: inset 0 0 0 2px rgba(30, 111, 92, 0.38), 0 18px 42px rgba(30, 111, 92, 0.12);
    transform: translateY(-4px);
  }
  82%, 100% {
    box-shadow: inset 0 0 0 1px rgba(21, 23, 28, 0.08);
    transform: translateY(0);
  }
}

@keyframes rowComplete {
  0%, 28% {
    opacity: 0;
    transform: translateX(-100%);
  }
  46%, 68% {
    opacity: 1;
  }
  86%, 100% {
    opacity: 0;
    transform: translateX(100%);
  }
}

@keyframes warningPulse {
  0%, 100% {
    box-shadow: 0 0 0 rgba(246, 185, 75, 0);
  }
  48%, 58% {
    box-shadow: 0 0 0 4px rgba(246, 185, 75, 0.16);
  }
}

@keyframes uploadLabel {
  0%, 58% {
    opacity: 1;
    transform: translateY(0);
  }
  70%, 100% {
    opacity: 0;
    transform: translateY(-14px);
  }
}

@keyframes uploadedLabel {
  0%, 58% {
    opacity: 0;
    transform: translateY(14px);
  }
  70%, 100% {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes listingSweep {
  0%, 24% { transform: translateX(-100%); opacity: 0; }
  38%, 62% { opacity: 1; }
  78%, 100% { transform: translateX(100%); opacity: 0; }
}

@keyframes chipFocus {
  0%, 100% {
    transform: translate3d(0, 0, 0);
    opacity: 0.92;
  }
  45%, 55% {
    transform: translate3d(0, -5px, 0);
    opacity: 1;
  }
}

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

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

@keyframes meterLoad {
  from { width: 0; }
}

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

@keyframes productFloat {
  0%,
  100% {
    transform: translateY(0) rotateX(var(--tilt-x, 0deg)) rotateY(var(--tilt-y, 0deg));
  }
  50% {
    transform: translateY(-14px) rotateX(var(--tilt-x, 0deg)) rotateY(var(--tilt-y, 0deg));
  }
}

@keyframes rowDrift {
  0%,
  100% {
    background: #ffffff;
  }
  50% {
    background: #f8faf7;
  }
}

@media (max-width: 1050px) {
  .hero,
  .decision-grid,
  .radar,
  .scan-board,
  .workflow-paths,
  .why-split,
  .founder-card {
    grid-template-columns: 1fr;
  }

  .module-grid,
  .marketplace-grid,
  .simple-grid,
  .audience-grid,
  .why-now-grid,
  .home-faq-grid,
  .flow-grid,
  .faq-grid,
  .better-grid,
  .principle-grid,
  .trust-grid,
  .feature-category-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .marketplace-grid {
    grid-template-columns: 1fr;
  }

  .feature-row,
  .feature-row.reverse {
    grid-template-columns: 1fr;
  }

  .comparison-grid {
    grid-template-columns: 1fr;
  }

  .feature-row.reverse .feature-row-copy {
    order: 0;
  }

  .buy-breakdown,
  .finance-stats,
  .photo-batch-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .about-teaser-grid {
    grid-template-columns: 1fr;
  }

  .practice-proof-grid {
    grid-template-columns: 1fr;
  }

  .hero-visual,
  .hero-visual img {
    min-height: 0;
  }

  .app-mockup {
    grid-template-columns: 1fr;
  }

  .hero-flow {
    grid-template-columns: 1fr;
  }

  .flow-card {
    min-height: auto;
  }

  .mock-sidebar {
    min-height: auto;
    border-right: 0;
    border-bottom: 1px solid rgba(21, 23, 28, 0.1);
  }

  .mock-stats {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .mock-sales {
    grid-template-columns: 1fr;
  }

  .pipeline-line {
    width: 2px;
    height: 80px;
    margin: auto;
  }
}

@media (max-width: 700px) {
  .nav {
    align-items: flex-start;
    flex-direction: column;
    gap: 14px;
  }

  .nav-links {
    width: 100%;
    justify-content: flex-start;
    flex-wrap: wrap;
    gap: 8px;
    font-size: 0.84rem;
  }

  .hero {
    padding-top: 144px;
  }

  h1 {
    font-size: clamp(2.65rem, 13vw, 4.15rem);
  }

  .hero-visual img {
    min-height: 0;
    transform: none;
    animation: none;
  }

  .hero-dashboard {
    min-height: auto;
  }

  .hero-dashboard-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .hero-process {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .story-process {
    grid-template-columns: 1fr;
  }

  .hero-process::before,
  .hero-process::after {
    display: none;
  }

  .story-outcome {
    grid-template-columns: 1fr;
  }

  .buy-decision,
  .buy-breakdown,
  .finance-stats,
  .photo-batch-grid,
  .priority-list article,
  .platform-publish article {
    grid-template-columns: 1fr;
  }

  .priority-list em,
  .platform-publish button {
    justify-self: start;
  }

  .platform-publish span,
  .platform-publish strong,
  .platform-publish em,
  .platform-publish button {
    grid-column: auto;
    grid-row: auto;
  }

  .hero-chip {
    position: static;
    min-width: 150px;
    padding: 12px;
    animation: none;
  }

  .hero-chip-row {
    grid-template-columns: 1fr;
  }

  .module-grid,
  .marketplace-grid,
  .simple-grid,
  .audience-grid,
  .why-now-grid,
  .home-faq-grid,
  .comparison-grid,
  .flow-grid,
  .faq-grid,
  .better-grid,
  .principle-grid,
  .trust-grid,
  .feature-category-grid,
  .numbers-mini,
  .radar-ui {
    grid-template-columns: 1fr;
  }

  .why-card-stack article,
  .why-card-stack article:nth-child(even) {
    transform: none;
  }

  .lifecycle {
    justify-content: flex-start;
  }

  .lifecycle span::after {
    display: none;
  }

  .today-header,
  .today-list article {
    grid-template-columns: 1fr;
  }

  .today-header {
    align-items: flex-start;
    flex-direction: column;
  }

  .today-list em {
    justify-self: start;
  }

  .listing-row,
  .listing-head {
    grid-template-columns: 1fr;
    gap: 7px;
  }

  .listing-head {
    display: none;
  }

  .listing-row {
    align-items: start;
    padding: 18px;
  }

  .mock-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .channel-strip {
    gap: 12px;
    justify-content: flex-start;
  }

  .channel-strip img {
    width: 112px;
    height: 44px;
  }

  .marketplace-logo {
    width: 100%;
    max-width: 230px;
    height: 78px;
    margin-bottom: 34px;
  }

  .legal-panel {
    padding: 22px;
  }

  .mock-top,
  .mock-batch {
    align-items: stretch;
    flex-direction: column;
  }

  .snapshot-stage {
    overflow: visible;
  }

  .snapshot-callout {
    position: static;
    max-width: none;
    margin-top: 12px;
  }

  .pile {
    grid-template-columns: 1fr;
    min-height: 0;
  }

  .photo {
    width: 100%;
    min-height: 230px;
  }
}

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

/* ============================================================
   Produktrundgang - echte Screens aus der Software
   ============================================================ */

.tour-intro {
  text-align: center;
}

.tour-intro .hero-text {
  margin-bottom: 0;
}

.tour {
  display: grid;
  gap: clamp(72px, 9vw, 150px);
  /* Bewusst breiter als der uebrige Seiteninhalt: Die Screens zeigen eine Oberflaeche,
     die fuer 1440px gebaut ist - je schmaler die Spalte, desto unleserlicher wird sie. */
  max-width: 1520px;
  margin: 0 auto;
  padding-top: clamp(48px, 6vw, 96px);
}

.tour-step {
  display: grid;
  grid-template-columns: minmax(0, 0.58fr) minmax(0, 1.42fr);
  gap: clamp(26px, 3.4vw, 52px);
  align-items: center;
}

/* Jeder zweite Schritt spiegelt die Seiten. Bewusst ueber eine eigene Klasse statt
   :nth-child - zwischen den Schritten stehen auch andere Elemente (Zwischenueberschrift),
   die die Zaehlung sonst verschieben. Wichtig: nicht nur die Reihenfolge tauschen, sonst
   landet der Screenshot in der schmalen Spalte und wird unleserlich. */
.tour-step.gespiegelt {
  grid-template-columns: minmax(0, 1.42fr) minmax(0, 0.58fr);
}

.tour-step.gespiegelt .tour-copy {
  order: 2;
}

/* Zwischenueberschrift, die den Rundgang in zwei Teile trennt. */
.tour-break {
  max-width: 46rem;
  margin: clamp(10px, 2vw, 30px) auto;
  text-align: center;
}

.tour-break h2 {
  font-size: clamp(2rem, 3.4vw, 3.4rem);
}

.tour-break p {
  margin: 0;
  color: var(--muted);
  font-size: 1.02rem;
  line-height: 1.62;
}

.tour-copy {
  max-width: 27rem;
}

.tour-copy .step-no {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.1rem;
  height: 2.1rem;
  margin-bottom: 18px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--panel-solid);
  color: var(--blue-soft);
  font-size: 0.82rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

.tour-copy h2 {
  font-size: clamp(1.75rem, 2.3vw, 2.5rem);
  line-height: 1.02;
}

.tour-copy > p {
  margin-bottom: 18px;
  color: var(--muted);
  font-size: 1.02rem;
  line-height: 1.62;
}

/* Was auf dem Screenshot konkret zu sehen ist - verankert die Behauptung im Bild. */
.tour-points {
  display: grid;
  gap: 9px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.tour-points li {
  position: relative;
  padding-left: 1.35rem;
  color: var(--ink);
  font-size: 0.93rem;
  line-height: 1.5;
}

.tour-points li::before {
  position: absolute;
  left: 0;
  top: 0.58em;
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: var(--teal);
  content: "";
}

.tour-points b {
  font-variant-numeric: tabular-nums;
  font-weight: 700;
}

/* --- Fensterrahmen um den Screenshot --- */

.browser {
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--panel-solid);
  box-shadow:
    0 1px 2px rgba(21, 23, 28, 0.05),
    0 18px 40px -18px rgba(21, 23, 28, 0.26),
    0 48px 90px -50px rgba(21, 23, 28, 0.3);
}

.browser-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 14px;
  border-bottom: 1px solid var(--line);
  background: linear-gradient(180deg, #fdfdfc, #f4f2ed);
}

.browser-dots {
  display: flex;
  flex: none;
  gap: 6px;
}

.browser-dots span {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: rgba(21, 23, 28, 0.16);
}

.browser-url {
  overflow: hidden;
  padding: 4px 12px;
  border-radius: 999px;
  background: rgba(21, 23, 28, 0.05);
  color: var(--muted);
  font-size: 0.76rem;
  letter-spacing: 0.01em;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.browser img {
  display: block;
  width: 100%;
  height: auto;
}

/* Bildunterschrift: sagt, dass die Zahlen echt gerechnet sind. */
.screen-note {
  margin: 12px 2px 0;
  color: var(--muted);
  font-size: 0.8rem;
  line-height: 1.5;
}

@media (max-width: 940px) {
  /* Die gespiegelten Schritte muessen hier ausdruecklich mit zurueckgesetzt werden -
     .tour-step:nth-child(even) ist spezifischer als .tour-step und wuerde sonst gewinnen. */
  .tour-step,
  .tour-step.gespiegelt {
    grid-template-columns: 1fr;
  }

  .tour-step.gespiegelt .tour-copy {
    order: 0;
  }

  .tour-copy {
    max-width: none;
  }
}

/* Einzelner Screen auf der Startseite - gleiche Rahmenoptik wie im Rundgang. */
.snapshot-frame {
  max-width: 1180px;
  margin: 0 auto;
  text-align: center;
}

.snapshot-frame .browser {
  text-align: left;
}

.snapshot-frame .screen-note {
  max-width: 62ch;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

.snapshot-frame .text-link {
  margin-top: 14px;
}

/* Der Rundgang darf breiter laufen als der uebrige Seiteninhalt. */
.tour-section {
  padding-top: 0;
  padding-right: clamp(14px, 2.5vw, 40px);
  padding-left: clamp(14px, 2.5vw, 40px);
}