/* =========================================================
   clusterfck — Design Tokens
   Kommunikation mit Herz & Hirn
   ========================================================= */

/* Fonts lokal gehostet aus /fonts/ — keine CDN-Abhängigkeit */
@font-face {
  font-family: 'Clash Display';
  src: url('../fonts/ClashDisplay-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Clash Display';
  src: url('../fonts/ClashDisplay-Medium.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Clash Display';
  src: url('../fonts/ClashDisplay-Semibold.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Clash Display';
  src: url('../fonts/ClashDisplay-Bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Satoshi';
  src: url('../fonts/Satoshi-Light.woff2') format('woff2');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Satoshi';
  src: url('../fonts/Satoshi-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Satoshi';
  src: url('../fonts/Satoshi-Italic.woff2') format('woff2');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Satoshi';
  src: url('../fonts/Satoshi-Medium.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Satoshi';
  src: url('../fonts/Satoshi-MediumItalic.woff2') format('woff2');
  font-weight: 500;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Satoshi';
  src: url('../fonts/Satoshi-Bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Satoshi';
  src: url('../fonts/Satoshi-BoldItalic.woff2') format('woff2');
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}

:root {
  /* ---------- Color ---------- */
  --pink:    #f31780;
  --cyan:    #36eee0;
  --navy:    #0e0e2c;
  --blue:    #1414ff;
  --paper:   #f5f5f6;
  --yellow:  #ffbb00;
  --white:   #ffffff;
  --ink:     #0e0e2c;

  /* Signature gradient */
  --gradient: linear-gradient(90deg, #1414ff 0%, #f31780 100%);
  --gradient-diag: linear-gradient(135deg, #1414ff 0%, #f31780 100%);

  /* Functional */
  --bg:         var(--paper);
  --bg-deep:    var(--navy);
  --fg:         var(--navy);
  --fg-muted:   rgba(14, 14, 44, 0.62);
  --rule:       rgba(14, 14, 44, 0.14);
  --rule-soft:  rgba(14, 14, 44, 0.08);

  /* ---------- Type ---------- */
  --sans:    'Satoshi', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --display: 'Clash Display', 'Satoshi', ui-sans-serif, system-ui, sans-serif;
  --mono:    ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  /* Fluid type scale */
  --fs-12: 12px;
  --fs-14: 14px;
  --fs-16: 16px;
  --fs-18: clamp(16px, 1.05vw + 12px, 19px);
  --fs-21: clamp(18px, 1.2vw + 14px, 22px);
  --fs-28: clamp(22px, 1.8vw + 14px, 30px);
  --fs-40: clamp(30px, 2.8vw + 16px, 44px);
  --fs-60: clamp(42px, 4.6vw + 18px, 72px);
  --fs-96: clamp(60px, 7.5vw + 20px, 120px);
  --fs-mono-huge: clamp(80px, 11vw + 20px, 180px);

  /* ---------- Space ---------- */
  --s-1:  4px;
  --s-2:  8px;
  --s-3:  12px;
  --s-4:  16px;
  --s-5:  24px;
  --s-6:  32px;
  --s-7:  48px;
  --s-8:  64px;
  --s-9:  96px;
  --s-10: 128px;
  --s-11: 192px;

  /* ---------- Radii & lines ---------- */
  --r-sm: 6px;
  --r-md: 12px;
  --r-lg: 22px;
  --r-pill: 999px;
  --border: 1.5px;

  /* ---------- Motion ---------- */
  --ease: cubic-bezier(.2, .7, .2, 1);
  --fast: 180ms;
  --med:  320ms;
  --slow: 520ms;
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }

html { overflow-x: hidden; }

body {
  font-family: var(--sans);
  font-size: var(--fs-18);
  line-height: 1.55;
  color: var(--fg);
  background-color: var(--bg);
  font-weight: 400;
  text-wrap: pretty;
  overflow-x: hidden;
}

a { color: inherit; text-decoration: none; }
img, svg { display: block; max-width: 100%; }

h1, h2, h3, h4 {
  overflow-wrap: break-word;
  word-break: break-word;
  text-wrap: balance;
}

/* ---------- Type utilities ---------- */
.display {
  font-family: var(--display);
  font-weight: 700;
  line-height: 0.92;
  letter-spacing: -0.02em;
  text-wrap: balance;
}
.display-xl { font-family: var(--display); font-weight: 700; font-size: var(--fs-96); line-height: 0.9;  letter-spacing: -0.035em; text-wrap: balance; }
.display-l  { font-family: var(--display); font-weight: 700; font-size: var(--fs-60); line-height: 0.94; letter-spacing: -0.025em; text-wrap: balance; }
.display-m  { font-family: var(--display); font-weight: 700; font-size: var(--fs-40); line-height: 1.0;  letter-spacing: -0.02em;  text-wrap: balance; }
.display-s  { font-family: var(--display); font-weight: 600; font-size: var(--fs-28); line-height: 1.05; letter-spacing: -0.01em;  text-wrap: balance; }

.lede       { font-size: var(--fs-21); line-height: 1.5; font-weight: 400; color: var(--fg); }
.body       { font-size: var(--fs-18); line-height: 1.6; }
.small      { font-size: var(--fs-14); line-height: 1.5; }
.micro      { font-size: var(--fs-12); line-height: 1.4; letter-spacing: 0.08em; text-transform: uppercase; font-weight: 500; }
.tabular    { font-variant-numeric: tabular-nums; }

/* ---------- Eyebrow (section kicker) ---------- */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 12px;
  line-height: 1;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 500;
  font-family: var(--sans);
  color: var(--fg);
}
.eyebrow::before {
  content: "";
  width: 22px;
  height: 1.5px;
  background: currentColor;
}
.eyebrow.on-dark { color: var(--cyan); }

/* ---------- Layout ---------- */
.wrap {
  width: 100%;
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 48px;
}
@media (max-width: 720px) { .wrap { padding: 0 24px; } }

.grid-12 {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 24px;
}
@media (max-width: 900px) { .grid-12 { grid-template-columns: repeat(6, 1fr); gap: 16px; } }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 22px 14px 24px;
  border-radius: var(--r-pill);
  font-family: var(--sans);
  font-weight: 500;
  font-size: 16px;
  line-height: 1;
  border: var(--border) solid transparent;
  cursor: pointer;
  transition: transform var(--fast) var(--ease), background var(--fast) var(--ease), color var(--fast) var(--ease), border-color var(--fast) var(--ease);
  white-space: nowrap;
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn .dot {
  width: 8px; height: 8px; border-radius: 999px; background: currentColor; display:inline-block;
}
.btn-primary   { background: var(--ink); color: var(--paper); }
.btn-primary:hover { background: var(--blue); }
.btn-accent    { background: var(--pink); color: var(--white); }
.btn-accent:hover { background: var(--ink); }
.btn-ghost     { background: transparent; color: var(--ink); border-color: var(--ink); }
.btn-ghost:hover { background: var(--ink); color: var(--paper); }
.btn-ghost.on-dark { color: var(--paper); border-color: var(--paper); }
.btn-ghost.on-dark:hover { background: var(--paper); color: var(--ink); }
.btn-gradient  { background: var(--gradient); color: var(--white); }
.btn-gradient:hover { filter: brightness(1.08); }

.btn svg { width: 18px; height: 18px; }

/* ---------- Tags / chips ---------- */
.tag {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px;
  border-radius: var(--r-pill);
  background: var(--white);
  border: 1px solid var(--rule);
  font-size: 13px;
  font-weight: 500;
  color: var(--ink);
}
.tag.cyan    { background: var(--cyan); color: var(--ink); border-color: var(--cyan); }
.tag.blue    { background: var(--blue); color: var(--white); border-color: var(--blue); }
.tag.yellow  { background: var(--yellow); color: var(--ink); border-color: var(--yellow); }

/* ---------- Rules & dividers ---------- */
.hr { height: 1px; background: var(--rule); border: 0; margin: 0; }
.hr-thick { height: 2px; background: var(--ink); border: 0; margin: 0; }

/* ---------- Sections ---------- */
.section { padding: 96px 0; }
.section-sm { padding: 64px 0; }
.section-lg { padding: 128px 0; }
@media (max-width: 720px) {
  .section { padding: 64px 0; }
  .section-sm { padding: 48px 0; }
  .section-lg { padding: 80px 0; }
}

/* ---------- Surface variants ---------- */
.surface-dark { background: var(--navy); color: var(--paper); }
.surface-dark .eyebrow { color: var(--cyan); }
.surface-dark a { color: var(--paper); }
.surface-dark .hr { background: rgba(245,245,246,0.14); }

.surface-pink { background: var(--pink); color: var(--white); }
.surface-cyan { background: var(--cyan); color: var(--ink); }
.surface-yellow { background: var(--yellow); color: var(--ink); }

/* ---------- Gradient text ---------- */
.grad-text {
  background: var(--gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* ---------- Top nav ---------- */
.nav {
  position: sticky; top: 0; z-index: 40;
  background: color-mix(in oklab, var(--paper) 94%, transparent);
  backdrop-filter: saturate(140%) blur(10px);
  -webkit-backdrop-filter: saturate(140%) blur(10px);
  border-bottom: 1px solid var(--rule);
}
.nav-inner {
  display: flex; align-items: center; justify-content: space-between;
  height: 72px;
}
.nav-links {
  display: flex; align-items: center; gap: 28px;
  font-family: var(--sans);
  font-size: 19px; font-weight: 400;
  letter-spacing: -0.005em;
  white-space: nowrap;
}
.nav-links a { position: relative; padding: 6px 0; }
.nav-links a.active {
  background-image: linear-gradient(90deg, #1414ff 0%, #f31780 100%);
  background-repeat: no-repeat;
  background-size: calc(100% + 24px) 20%;
  background-position: -12px 78%;
}
.nav-links a:hover { color: var(--pink); }

/* ---------- Burger button ---------- */
.burger-btn {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: 44px; height: 44px;
  background: transparent; border: none; cursor: pointer;
  padding: 8px; border-radius: var(--r-sm);
  transition: background var(--fast) var(--ease);
  flex-shrink: 0;
}
.burger-btn:hover { background: var(--rule-soft); }
.burger-btn span {
  display: block; width: 22px; height: 2px;
  background: var(--ink); border-radius: 2px;
  transition: transform var(--fast) var(--ease), opacity var(--fast) var(--ease);
}
@media (max-width: 767px) {
  .burger-btn { display: flex; }
  .nav-links { display: none; }
  .nav-cta { display: none; }
}

/* ---------- Mobile nav overlay ---------- */
.mobile-nav {
  position: fixed; inset: 0;
  background: var(--navy); color: var(--paper);
  z-index: 200;
  display: flex; flex-direction: column;
  padding: 28px 32px 48px;
  transform: translateX(100%);
  transition: transform 300ms ease;
  overflow-y: auto;
}
.mobile-nav.is-open { transform: translateX(0); }
body.nav-open { overflow: hidden; }

.mobile-nav__close {
  align-self: flex-end;
  background: transparent; border: none; cursor: pointer;
  color: var(--paper); font-size: 28px; line-height: 1;
  padding: 8px; width: 44px; height: 44px;
  display: flex; align-items: center; justify-content: center;
  border-radius: var(--r-sm);
  transition: color var(--fast) var(--ease);
  margin-bottom: 24px;
}
.mobile-nav__close:hover { color: var(--cyan); }

.mobile-nav__links {
  display: flex; flex-direction: column;
  flex: 1;
}
.mobile-nav__links a {
  font-family: var(--display); font-weight: 700;
  font-size: clamp(32px, 8vw, 48px);
  line-height: 1.1; letter-spacing: -0.025em;
  color: var(--paper);
  padding: 14px 0;
  border-bottom: 1px solid rgba(245,245,246,0.1);
  min-height: 48px; display: flex; align-items: center;
  transition: color var(--fast) var(--ease);
  text-decoration: none;
}
.mobile-nav__links a:hover { color: var(--pink); }
.mobile-nav__links a.active {
  background-image: linear-gradient(90deg, #1414ff 0%, #f31780 100%);
  background-repeat: no-repeat;
  background-size: 100% 16%;
  background-position: 0 85%;
}

.mobile-nav__cta {
  margin-top: 40px; width: 100%; justify-content: center;
  font-size: 18px;
}

/* ---------- Logo / Signet ---------- */
.logo {
  display: inline-flex; align-items: center; gap: 10px;
  color: var(--ink);
  text-decoration: none;
}
.logo .signet {
  width: 28px; height: 28px; display: inline-block; flex-shrink: 0;
}
.logo .wordmark { height: 52px; width: auto; display: inline-block; }
.logo .signet { width: 36px; height: 36px; }
.logo.logo-lg .wordmark { height: 64px; }
@media (max-width: 560px) {
  .logo .wordmark { height: 48px; }
  .logo .signet { width: 26px; height: 26px; }
  .logo.logo-lg .wordmark { height: 56px; }
}

/* Footer variant (inverted) */
.footer .logo .wordmark { filter: none; }

/* Standalone asterisk element — use for backgrounds, decoration, etc. */
.asterisk {
  display: inline-block;
  width: 1em; height: 1em;
  background: var(--gradient);
  -webkit-mask: url("../brand/signet-ink.svg?v=2") center / contain no-repeat;
          mask: url("../brand/signet-ink.svg?v=2") center / contain no-repeat;
}
.asterisk.ink   { background: var(--ink); }
.asterisk.pink  { background: var(--pink); }
.asterisk.cyan  { background: var(--cyan); }
.asterisk.white { background: var(--white); }

/* Asterisk pattern background — tile of rotated signets */
.asterisk-pattern {
  background-image: url("../brand/pattern-tile.svg");
  background-size: 160px 160px;
  background-repeat: repeat;
}

/* ---------- Footer ---------- */
.footer {
  background: var(--navy);
  color: var(--paper);  padding: 96px 0 32px;
}
@media (max-width: 720px) { .footer { padding: 56px 0 32px; } }
.footer .lede { color: var(--paper); }
.footer a { color: var(--paper); }
.footer a:hover { color: var(--cyan); }
.footer-meta {
  display: flex; justify-content: space-between; align-items: center;
  padding-top: 32px; margin-top: 64px;
  border-top: 1px solid rgba(245,245,246,0.18);
  font-size: 13px; color: rgba(245,245,246,0.62);
  flex-wrap: wrap; gap: 16px;
}
.footer-grid { display: grid; gap: 48px; }
.footer-grid-4 { grid-template-columns: 2fr 1fr 1fr 1fr; }
.footer-grid-3 { grid-template-columns: 2fr 1fr 1fr; }
@media (max-width: 960px) {
  .footer-grid-4 { grid-template-columns: 1fr 1fr; gap: 40px; }
  .footer-grid-3 { grid-template-columns: 1fr 1fr; gap: 40px; }
}
@media (max-width: 560px) {
  .footer-grid-4, .footer-grid-3 { grid-template-columns: 1fr; gap: 32px; }
}

/* ---------- Cards ---------- */
.card {
  background: var(--white);
  border-radius: var(--r-lg);
  padding: 28px;
  border: 1px solid var(--rule);
  transition: transform var(--med) var(--ease), box-shadow var(--med) var(--ease);
}
.card:hover { transform: translateY(-3px); box-shadow: 0 24px 60px -20px rgba(14,14,44,0.18); }

/* ---------- Marquee ---------- */
@keyframes marquee {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-33.333%); }
}
.marquee {
  display: flex; overflow: hidden;
  mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.marquee-track {
  display: flex; flex-shrink: 0; min-width: max-content;
  animation: marquee 50s linear infinite;
  align-items: center;
}

/* ---------- Accent utilities ---------- */
.dot-bullet::before {
  content: ""; display: inline-block;
  width: 8px; height: 8px; border-radius: 999px;
  background: var(--pink); margin-right: 10px;
  vertical-align: middle;
}

/* ---------- Underline link ---------- */
.ulink {
  display: inline-flex; align-items: center; gap: 8px;
  font-weight: 500;
  border-bottom: 1.5px solid currentColor;
  padding-bottom: 2px;
  transition: color var(--fast) var(--ease), gap var(--fast) var(--ease);
}
.ulink:hover { gap: 14px; color: var(--pink); }

/* ---------- Focus ---------- */
:focus-visible { outline: 2px solid var(--pink); outline-offset: 3px; border-radius: 4px; }

/* ---------- Selection ---------- */
::selection { background: var(--pink); color: var(--white); }

/* ---------- Dot-grid background ---------- */
/* Applied to sections that should show the subtle grid pattern.
   Hero: always. Content sections: alternating (even). Dark sections: never. CTA: never. */
.bg-dots {
  background-color: var(--bg);
  background-image: radial-gradient(circle, #1414201a 1px, transparent 1px);
  background-size: 24px 24px;
}

/* ---------- Noisy chip (pattern) ---------- */
.noise {
  position: relative;
}
.noise::after {
  content: ""; position: absolute; inset: 0;
  background-image: radial-gradient(rgba(255,255,255,0.18) 1px, transparent 1px);
  background-size: 4px 4px;
  mix-blend-mode: overlay;
  pointer-events: none;
  border-radius: inherit;
}

/* ---------- CTA Block ---------- */
.cta-block {
  background: var(--pink); color: var(--white); border-radius: var(--r-lg);
  padding: 80px; display: grid; grid-template-columns: 1fr auto; gap: 32px; align-items: end;
  position: relative; overflow: hidden;
}
.cta-block--gradient { background: var(--gradient); }
.cta-block--dark { background: var(--ink); color: var(--paper); }
@media (max-width: 900px) { .cta-block { grid-template-columns: 1fr; padding: 48px; } }
@media (max-width: 480px) { .cta-block { padding: 32px 24px; } }
.cta-block h2 { font-family: var(--display); font-weight: 700; font-size: clamp(40px, 6vw, 88px); line-height: 0.92; letter-spacing: -0.03em; margin: 0; text-wrap: balance; max-width: 14ch; }
.cta-block .sub { font-size: 18px; color: rgba(255,255,255,0.75); margin: 16px 0 0; max-width: 38ch; line-height: 1.4; }
.cta-block .pill {
  background: var(--ink); color: var(--paper); padding: 18px 28px;
  border-radius: var(--r-pill); display: inline-flex; align-items: center; gap: 14px;
  font-size: 18px; font-weight: 500; white-space: nowrap; text-decoration: none;
  border: 2px solid transparent;
  transition: background var(--med) var(--ease), border-color var(--med) var(--ease), color var(--med) var(--ease);
}
.cta-block .pill:hover {
  background: transparent;
  border-color: var(--white);
  color: var(--white);
}
@media (max-width: 480px) { .cta-block .pill { width: 100%; justify-content: center; } }

/* ---------- Text highlight (.mark) ---------- */
/* Unified highlight system. Two treatments:
     - Light surface (default)  → underline highlighter, text keeps color
     - Dark surface (.on-dark)  → solid fill, text flips to accessible ink
   Color variants:
     (none)     → pink
     .mark-cyan, .mark-yellow, .mark-blue, .mark-ink
   Apply .on-dark on the <mark> OR put it inside .surface-dark / [data-on-dark] ancestor. */
mark.mark,
.mark {
  /* accent + readable on-accent text for dark (fill) treatment */
  --mark-accent: var(--pink);
  --mark-on-accent: var(--white);
  /* underline color for light treatment (defaults to accent but can be tuned) */
  --mark-underline: var(--pink);

  background: transparent;
  color: inherit;
  padding: 0 0.08em;
  border-radius: 3px;
  /* Light default: chunky underline highlighter, text stays readable */
  background-image: linear-gradient(180deg, transparent 62%, var(--mark-underline) 62%, var(--mark-underline) 92%, transparent 92%);
  background-repeat: no-repeat;
  background-size: 100% 100%;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

/* Color variants */
.mark.mark-pink,
mark.mark {                              /* pink is default */
  --mark-accent: var(--pink);
  --mark-on-accent: var(--white);
  --mark-underline: var(--pink);
}
.mark.mark-cyan   { --mark-accent: var(--cyan);   --mark-on-accent: var(--ink);   --mark-underline: var(--cyan); }
.mark.mark-yellow { --mark-accent: var(--yellow); --mark-on-accent: var(--ink);   --mark-underline: var(--yellow); }
.mark.mark-blue   { --mark-accent: var(--blue);   --mark-on-accent: var(--white); --mark-underline: var(--blue); }
.mark.mark-ink    { --mark-accent: var(--ink);    --mark-on-accent: var(--paper); --mark-underline: var(--ink); }

/* Dark treatment: solid fill + readable flipped text */
.mark.on-dark,
.surface-dark .mark,
[data-surface="dark"] .mark,
.on-dark .mark {
  background-image: none;
  background-color: var(--mark-accent);
  color: var(--mark-on-accent);
  padding: 0.04em 0.25em;
  border-radius: 4px;
  text-decoration: none;
}

/* Accessibility: high-contrast mode */
@media (prefers-contrast: more) {
  .mark { --mark-underline: currentColor; }
}
/* Dark-surface editorial testimonial card.
   Use inside a <section class="surface-dark"> or directly.
   Variants: .testimonial--feature (larger, pull-quote treatment),
             accent colors via --testi-accent custom property. */
.testimonial-grid {
  display: grid;
  grid-template-columns: 1.35fr 1fr;
  gap: 20px;
}
@media (max-width: 960px) { .testimonial-grid { grid-template-columns: 1fr; } }

.testimonial {
  --testi-accent: var(--cyan);
  position: relative;
  background: rgba(245,245,246,0.035);
  border: 1.5px solid rgba(245,245,246,0.12);
  border-radius: var(--r-lg);
  padding: 40px 44px 36px;
  display: flex; flex-direction: column; gap: 28px;
  overflow: hidden;
  transition: border-color var(--med, 320ms) var(--ease), transform var(--med, 320ms) var(--ease);
}
.testimonial:hover {
  border-color: rgba(245,245,246,0.28);
  transform: translateY(-2px);
}
/* Subtle gradient wash in bottom-right */
.testimonial::after {
  content: ""; position: absolute;
  right: -40%; bottom: -60%;
  width: 80%; aspect-ratio: 1;
  background: radial-gradient(circle, var(--testi-accent) 0%, transparent 60%);
  opacity: 0.07;
  pointer-events: none;
}
/* Small quote-mark badge, bottom-right corner, contained */
.testimonial__mark {
  position: absolute;
  right: 28px; bottom: 28px;
  width: 32px; height: 32px;
  display: grid; place-items: center;
  color: var(--testi-accent);
  opacity: 0.5;
  pointer-events: none;
}
.testimonial__mark svg { width: 100%; height: 100%; }

.testimonial__eyebrow {
  position: relative;
  font-family: var(--mono); font-size: 11px;
  text-transform: uppercase; letter-spacing: 0.1em;
  color: var(--testi-accent);
  display: inline-flex; align-items: center; gap: 8px;
}
.testimonial__eyebrow::before {
  content: ""; width: 6px; height: 6px; border-radius: var(--r-pill);
  background: var(--testi-accent);
}

.testimonial__quote {
  position: relative;
  margin: 0;
  font-family: var(--display); font-weight: 600;
  font-size: clamp(20px, 1.5vw, 24px);
  line-height: 1.3; letter-spacing: -0.012em;
  color: var(--paper);
  text-wrap: pretty;
}
/* Auto-flip global .mark into its dark-surface treatment inside testimonials.
   Use .testimonial mark.mark for higher specificity than the global mark.mark rule. */
.testimonial mark.mark,
.testimonial .mark {
  --mark-accent: var(--testi-accent);
  --mark-on-accent: var(--ink);
  background-image: none !important;
  background-color: var(--mark-accent) !important;
  color: var(--mark-on-accent) !important;
  padding: 0.04em 0.25em;
  border-radius: 4px;
  text-decoration: none;
}
/* Accent-cyan / accent-blue need ink text; accent-pink needs white */
.testimonial.accent-pink mark.mark,
.testimonial.accent-pink .mark    { --mark-on-accent: var(--white); }
.testimonial.accent-cyan mark.mark,
.testimonial.accent-cyan .mark    { --mark-on-accent: var(--ink); }
.testimonial.accent-blue mark.mark,
.testimonial.accent-blue .mark    { --mark-on-accent: var(--white); }
/* On light variant, drop back to underline highlighter */
.testimonial.on-light .mark {
  background-color: transparent;
  background-image: linear-gradient(180deg, transparent 62%, var(--mark-accent) 62%, var(--mark-accent) 92%, transparent 92%);
  color: inherit;
  padding: 0 0.08em;
  border-radius: 3px;
}

.testimonial--feature { padding: 56px 56px 40px; }
.testimonial--feature .testimonial__quote {
  font-size: clamp(24px, 2vw, 34px);
  line-height: 1.22;
}

.testimonial__attr {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 16px;
  padding-top: 24px;
  border-top: 1px solid rgba(245,245,246,0.14);
  margin-top: auto;
}
.testimonial__avatar {
  width: 48px; height: 48px; border-radius: var(--r-pill);
  background: var(--testi-accent); color: var(--ink);
  display: grid; place-items: center;
  font-family: var(--mono); font-size: 14px; font-weight: 600;
  letter-spacing: 0.02em;
}
.testimonial__meta { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.testimonial__name {
  font-family: var(--display); font-weight: 600;
  font-size: 17px; letter-spacing: -0.01em; color: var(--paper);
}
.testimonial__role {
  font-family: var(--sans); font-size: 13px;
  color: rgba(245,245,246,0.62);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.testimonial__company {
  padding: 8px 14px;
  border-radius: var(--r-pill);
  background: var(--testi-accent);
  color: var(--ink);
  font-family: var(--mono); font-size: 11px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.08em;
  white-space: nowrap;
}

/* Accent variants — set on the .testimonial element */
.testimonial.accent-pink   { --testi-accent: var(--pink); }
.testimonial.accent-cyan   { --testi-accent: var(--cyan); }
.testimonial.accent-blue   { --testi-accent: var(--blue); }

/* Light-surface fallback (on paper) */
.surface-light .testimonial,
.testimonial.on-light {
  background: var(--white);
  border-color: var(--rule);
}
.surface-light .testimonial__quote,
.testimonial.on-light .testimonial__quote { color: var(--ink); }
.surface-light .testimonial__name,
.testimonial.on-light .testimonial__name { color: var(--ink); }
.surface-light .testimonial__role,
.testimonial.on-light .testimonial__role { color: var(--fg-muted); }

@media (max-width: 720px) {
  .testimonial { padding: 48px 28px 28px; }
  .testimonial--feature { padding: 52px 32px 32px; }
  .testimonial::before { font-size: 200px; top: -44px; }
  .testimonial--feature::before { font-size: 240px; top: -56px; }
  .testimonial__attr { grid-template-columns: auto 1fr; }
  .testimonial__company { grid-column: 1 / -1; justify-self: start; }
}