/* =========================================================
   AsyncGenius — Clay-inspired design system
   ========================================================= */

/* ---------------- Roobert (variable + static fallback) ---------------- */
@font-face {
  font-family: 'Roobert';
  src: url('./fonts/RoobertCollectionVF.woff2') format('woff2-variations'),
       url('./fonts/RoobertCollectionVF.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Roobert';
  src: url('./fonts/RoobertItalicsVF.woff2') format('woff2-variations'),
       url('./fonts/RoobertItalicsVF.woff2') format('woff2');
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}
/* Static fallbacks for browsers without variable-font support */
@font-face {
  font-family: 'Roobert Static';
  src: url('./fonts/Roobert-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Roobert Static';
  src: url('./fonts/Roobert-Medium.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Roobert Static';
  src: url('./fonts/Roobert-SemiBold.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Roobert Mono';
  src: url('./fonts/RoobertMonoVF.woff2') format('woff2-variations'),
       url('./fonts/RoobertMonoVF.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Core */
  --clay-black: #000000;
  --pure-white: #ffffff;
  --warm-cream: #faf9f7;

  /* Swatches */
  --matcha-300: #84e7a5;
  --matcha-600: #078a52;
  --matcha-800: #02492a;
  --slushie-500: #3bd3fd;
  --slushie-800: #0089ad;
  --lemon-400: #f8cc65;
  --lemon-500: #fbbd41;
  --lemon-700: #d08a11;
  --lemon-800: #9d6a09;
  --ube-300: #c1b0ff;
  --ube-800: #43089f;
  --ube-900: #32037d;
  --pomegranate-400: #fc7981;
  --blueberry-800: #01418d;

  /* Neutrals */
  --warm-silver: #9f9b93;
  --warm-charcoal: #55534e;
  --dark-charcoal: #333333;

  /* Borders & surfaces */
  --oat: #dad4c8;
  --oat-light: #eee9df;
  --cool-border: #e6e8ec;
  --dark-border: #525a69;
  --light-frost: #eff1f3;

  /* Shadows */
  --clay-shadow: rgba(0,0,0,0.1) 0 1px 1px, rgba(0,0,0,0.04) 0 -1px 1px inset, rgba(0,0,0,0.05) 0 -0.5px 1px;
  --hard-offset: rgb(0,0,0) -7px 7px;

  /* Type */
  --font-sans: 'Roobert', 'Roobert Static', 'Inter', Arial, sans-serif;
  --font-mono: 'Roobert Mono', 'Space Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  --feat: "ss03", "ss10", "ss11", "ss12";
  --feat-display: "ss01", "ss03", "ss10", "ss11", "ss12";
}

/* ---------------- reset ---------------- */
*, *::before, *::after { box-sizing: border-box; }
html, body {
  margin: 0; padding: 0;
  background: var(--warm-cream);
  color: var(--clay-black);
  font-family: var(--font-sans);
  font-feature-settings: var(--feat);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; border: none; background: none; }

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 32px;
}

.mono {
  font-family: var(--font-mono);
  font-size: 12.8px;
  letter-spacing: -0.128px;
}
.mono-muted { color: var(--warm-silver); }

/* ---------------- typography ---------------- */
.display-hero {
  font-size: 80px;
  font-weight: 600;
  line-height: 1.00;
  letter-spacing: -3.2px;
  font-feature-settings: var(--feat-display);
  margin: 0 0 24px;
}
.display-secondary {
  font-size: 60px;
  font-weight: 600;
  line-height: 1.00;
  letter-spacing: -2.4px;
  font-feature-settings: var(--feat-display);
  margin: 0 0 16px;
}
.section-heading {
  font-size: 44px;
  font-weight: 600;
  line-height: 1.10;
  letter-spacing: -1.32px;
  font-feature-settings: var(--feat-display);
  margin: 0 0 16px;
}
.section-heading--inverse { color: var(--pure-white); }
.heading-soft { color: var(--warm-silver); font-weight: 600; }
.heading-soft--inverse { color: var(--matcha-300); }

.section-sub {
  font-size: 18px;
  font-weight: 400;
  line-height: 1.60;
  letter-spacing: -0.36px;
  color: var(--warm-charcoal);
  max-width: 720px;
  margin: 0 0 56px;
}
.section-sub--inverse { color: var(--matcha-300); }

/* ---------------- eyebrow / labels ---------------- */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 1.08px;
  text-transform: uppercase;
  font-feature-settings: var(--feat);
  color: var(--warm-charcoal);
  margin-bottom: 24px;
  padding: 6.4px 12.8px;
  border: 1px dashed var(--oat);
  border-radius: 1584px;
  background: var(--pure-white);
}
.eyebrow-on-dark {
  background: rgba(255,255,255,0.06);
  border-color: var(--dark-border);
  color: var(--matcha-300);
}
.eyebrow-on-cream {
  background: var(--pure-white);
  border-style: solid;
  border-color: var(--oat);
}
.dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--matcha-600);
}
.dot-matcha { background: var(--matcha-600); }
.dot-matcha-light { background: var(--matcha-300); }
.dot-slushie { background: var(--slushie-500); }
.dot-lemon { background: var(--lemon-500); }
.dot-ube { background: var(--ube-800); }
.dot-pomegranate { background: var(--pomegranate-400); }
.dot-blueberry { background: var(--blueberry-800); }

/* ---------------- buttons ---------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.50;
  letter-spacing: -0.16px;
  font-feature-settings: var(--feat);
  border-radius: 12px;
  padding: 12px 20px;
  transition: transform 200ms cubic-bezier(.2,.8,.2,1), background 200ms, color 200ms, box-shadow 200ms;
  white-space: nowrap;
  border: 1px solid transparent;
}
.btn-pill { border-radius: 1584px; padding: 12px 22px; }
.btn-dark {
  background: var(--clay-black);
  color: var(--pure-white);
  box-shadow: var(--clay-shadow);
}
.btn-dark:hover {
  background: var(--matcha-800);
  transform: rotateZ(-4deg) translateY(-4px);
  box-shadow: var(--hard-offset);
}
.btn-white {
  background: var(--pure-white);
  color: var(--clay-black);
  border: 1px solid var(--oat);
  box-shadow: var(--clay-shadow);
}
.btn-white:hover {
  background: var(--lemon-400);
  transform: rotateZ(-4deg) translateY(-4px);
  box-shadow: var(--hard-offset);
}
.btn-ghost {
  background: transparent;
  color: var(--clay-black);
  border: 1px solid var(--clay-black);
}
.btn-ghost:hover {
  background: var(--pomegranate-400);
  color: var(--pure-white);
  transform: rotateZ(-4deg) translateY(-4px);
  box-shadow: var(--hard-offset);
}

/* ---------------- nav ---------------- */
.nav {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(250, 249, 247, 0.85);
  backdrop-filter: saturate(140%) blur(12px);
  -webkit-backdrop-filter: saturate(140%) blur(12px);
  border-bottom: 1px solid var(--oat);
}
.nav-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 14px 32px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  font-size: 18px;
  letter-spacing: -0.36px;
  font-feature-settings: var(--feat-display);
}
.brand-mark {
  display: inline-flex;
  width: 28px; height: 28px;
  border-radius: 50%;
  background: var(--matcha-800);
  color: var(--matcha-300);
  align-items: center;
  justify-content: center;
  font-size: 16px;
  box-shadow: var(--clay-shadow);
}
.brand-logo {
  width: 32px;
  height: 32px;
  border-radius: 9px;
  object-fit: cover;
  box-shadow: var(--clay-shadow);
  flex: 0 0 auto;
}
.nav-links {
  display: flex;
  gap: 24px;
}
.nav-links a {
  font-size: 15px;
  font-weight: 500;
  line-height: 1.60;
  color: var(--dark-charcoal);
  font-feature-settings: var(--feat);
  transition: color 150ms;
}
.nav-links a:hover { color: var(--clay-black); }

/* ---------------- hero ---------------- */
.hero {
  padding: 96px 0 120px;
  position: relative;
  overflow: hidden;
}
.hero::before {
  content: "";
  position: absolute;
  top: -180px; right: -180px;
  width: 480px; height: 480px;
  background: radial-gradient(circle at 30% 30%, var(--matcha-300), transparent 60%);
  opacity: 0.45;
  pointer-events: none;
}
.hero::after {
  content: "";
  position: absolute;
  bottom: -160px; left: -120px;
  width: 420px; height: 420px;
  background: radial-gradient(circle at 70% 70%, var(--slushie-500), transparent 60%);
  opacity: 0.25;
  pointer-events: none;
}
.hero .container { position: relative; z-index: 2; }
.hero-sub {
  font-size: 20px;
  font-weight: 400;
  line-height: 1.50;
  letter-spacing: -0.16px;
  color: var(--warm-charcoal);
  max-width: 720px;
  margin: 0 0 32px;
}
.hero-sub-zh {
  display: block;
  margin-top: 8px;
  color: var(--warm-silver);
  font-size: 16px;
}
.hero-ctas {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 64px;
}

/* hero workflow card */
.hero-card {
  background: var(--pure-white);
  border: 1px solid var(--oat);
  border-radius: 24px;
  padding: 8px;
  box-shadow: var(--clay-shadow);
  max-width: 720px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.hero-card-row {
  display: grid;
  grid-template-columns: 56px 1fr auto;
  align-items: center;
  gap: 16px;
  padding: 16px 20px;
  border-radius: 18px;
  background: var(--warm-cream);
  border: 1px dashed var(--oat);
}
.hero-card-row--header {
  background: var(--clay-black);
  color: var(--pure-white);
  border: none;
  display: flex;
  justify-content: space-between;
}
.step-num {
  font-family: var(--font-mono);
  font-size: 14px;
  color: var(--warm-silver);
}
.step-label {
  font-size: 18px;
  font-weight: 500;
  letter-spacing: -0.36px;
}
.chip {
  font-family: var(--font-mono);
  font-size: 12px;
  padding: 6px 12px;
  border-radius: 1584px;
  background: var(--oat-light);
  color: var(--dark-charcoal);
  white-space: nowrap;
}
.chip-matcha { background: var(--matcha-300); color: var(--matcha-800); }
.chip-slushie { background: var(--slushie-500); color: var(--blueberry-800); }
.chip-lemon { background: var(--lemon-400); color: var(--lemon-800); }
.chip-ube { background: var(--ube-300); color: var(--ube-900); }
.chip-pomegranate { background: var(--pomegranate-400); color: var(--pure-white); }
.chip-blueberry { background: var(--blueberry-800); color: var(--slushie-500); }

.trust-strip {
  margin-top: 56px;
  display: flex;
  gap: 12px;
  align-items: center;
  flex-wrap: wrap;
  padding-top: 32px;
  border-top: 1px dashed var(--oat);
}
.trust-label {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 1.08px;
  text-transform: uppercase;
  color: var(--warm-silver);
  font-feature-settings: var(--feat);
}
.trust-pill {
  font-size: 14px;
  padding: 6px 14px;
  border-radius: 1584px;
  background: var(--pure-white);
  border: 1px solid var(--oat);
  color: var(--dark-charcoal);
  font-feature-settings: var(--feat);
}

/* ---------------- problem ---------------- */
.problem {
  padding: 120px 0;
  background: var(--warm-cream);
  border-top: 1px solid var(--oat);
}
.problem-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}
.card {
  background: var(--pure-white);
  border: 1px solid var(--oat);
  border-radius: 24px;
  padding: 32px;
  box-shadow: var(--clay-shadow);
  transition: transform 200ms, box-shadow 200ms;
}
.card-problem:hover {
  transform: translateY(-3px) rotateZ(-0.4deg);
  box-shadow: var(--hard-offset);
}
.card-num {
  font-family: var(--font-mono);
  font-size: 12.8px;
  color: var(--warm-silver);
  margin-bottom: 16px;
}
.card-title {
  font-size: 24px;
  font-weight: 600;
  line-height: 1.20;
  letter-spacing: -0.48px;
  margin: 0 0 12px;
  font-feature-settings: var(--feat-display);
}
.card-body {
  font-size: 16px;
  line-height: 1.50;
  color: var(--warm-charcoal);
  margin: 0;
}
.card-problem--wide { grid-column: span 2; }

/* ---------------- loop ---------------- */
.loop {
  padding: 120px 0;
  background: var(--matcha-800);
  border-radius: 40px 40px 0 0;
  margin: 0 16px;
  position: relative;
  overflow: hidden;
}
.loop::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(800px 400px at 90% 10%, rgba(132,231,165,0.16), transparent 60%),
    radial-gradient(600px 400px at 10% 110%, rgba(59,211,253,0.10), transparent 60%);
  pointer-events: none;
}
.loop .container { position: relative; }
.loop-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}
.loop-step {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 24px;
  padding: 28px;
  color: var(--pure-white);
  position: relative;
  overflow: hidden;
  transition: transform 200ms, background 200ms;
}
.loop-step:hover {
  transform: translateY(-4px) rotateZ(-0.5deg);
  background: rgba(255,255,255,0.08);
}
.loop-step h3 {
  font-size: 22px;
  font-weight: 600;
  margin: 12px 0 8px;
  letter-spacing: -0.44px;
  font-feature-settings: var(--feat-display);
}
.loop-step p {
  font-size: 14px;
  line-height: 1.50;
  color: rgba(255,255,255,0.72);
  margin: 0;
}
.loop-num {
  font-family: var(--font-mono);
  font-size: 12.8px;
  display: inline-flex;
  padding: 4px 10px;
  border-radius: 1584px;
  background: rgba(255,255,255,0.10);
  color: var(--matcha-300);
}
.loop-step--matcha { background: var(--matcha-600); border-color: transparent; }
.loop-step--matcha .loop-num { background: var(--matcha-800); color: var(--matcha-300); }
.loop-step--slushie { background: var(--slushie-800); border-color: transparent; }
.loop-step--slushie .loop-num { background: rgba(0,0,0,0.25); color: var(--slushie-500); }
.loop-step--lemon { background: var(--lemon-500); border-color: transparent; color: var(--lemon-800); }
.loop-step--lemon h3, .loop-step--lemon p { color: var(--lemon-800); }
.loop-step--lemon p { opacity: 0.85; }
.loop-step--lemon .loop-num { background: var(--lemon-800); color: var(--lemon-400); }
.loop-step--ube { background: var(--ube-800); border-color: transparent; }
.loop-step--ube .loop-num { background: var(--ube-900); color: var(--ube-300); }
.loop-step--pomegranate { background: var(--pomegranate-400); border-color: transparent; color: var(--pure-white); }
.loop-step--pomegranate .loop-num { background: rgba(0,0,0,0.18); color: var(--pure-white); }
.loop-step--blueberry { background: var(--blueberry-800); border-color: transparent; }
.loop-step--blueberry .loop-num { background: rgba(0,0,0,0.25); color: var(--slushie-500); }
.loop-step--matcha-deep { background: var(--matcha-300); border-color: transparent; color: var(--matcha-800); }
.loop-step--matcha-deep h3, .loop-step--matcha-deep p { color: var(--matcha-800); }
.loop-step--matcha-deep p { opacity: 0.85; }
.loop-step--matcha-deep .loop-num { background: var(--matcha-800); color: var(--matcha-300); }

/* ---------------- pillars ---------------- */
.pillars {
  padding: 120px 0;
  background: var(--warm-cream);
}
.pillars-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 16px;
}
.pillar-card {
  grid-column: span 2;
  display: block;
  border-radius: 24px;
  padding: 32px;
  border: 1px solid transparent;
  box-shadow: var(--clay-shadow);
  transition: transform 200ms, box-shadow 200ms;
  position: relative;
  overflow: hidden;
  min-height: 220px;
}
.pillar-card:hover {
  transform: translateY(-4px) rotateZ(-0.5deg);
  box-shadow: var(--hard-offset);
}
.pillar-card h3 {
  font-size: 24px;
  font-weight: 600;
  margin: 12px 0 8px;
  letter-spacing: -0.48px;
  font-feature-settings: var(--feat-display);
}
.pillar-card p {
  font-size: 15px;
  line-height: 1.50;
  margin: 0 0 16px;
}
.pillar-tag {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 12px;
  padding: 4px 10px;
  border-radius: 1584px;
  background: rgba(0,0,0,0.10);
}
.pillar-link {
  font-size: 14px;
  font-weight: 500;
  letter-spacing: -0.14px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  border-bottom: 1px dashed currentColor;
  padding-bottom: 2px;
}

.pillar--matcha { background: var(--matcha-300); color: var(--matcha-800); }
.pillar--slushie { background: var(--slushie-500); color: var(--blueberry-800); }
.pillar--lemon { background: var(--lemon-400); color: var(--lemon-800); grid-column: span 2; }
.pillar--ube { background: var(--ube-300); color: var(--ube-900); grid-column: span 3; }
.pillar--pomegranate { background: var(--pomegranate-400); color: var(--pure-white); grid-column: span 3; }
.pillar--pomegranate .pillar-tag { background: rgba(0,0,0,0.18); }

/* ---------------- workflows ---------------- */
.workflows {
  padding: 120px 0;
  background: var(--pure-white);
  border-top: 1px solid var(--oat);
  border-bottom: 1px solid var(--oat);
}
.workflows-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
.workflow-card {
  background: var(--warm-cream);
  border: 1px solid var(--oat);
  border-radius: 24px;
  padding: 28px;
  box-shadow: var(--clay-shadow);
  transition: transform 200ms, box-shadow 200ms;
  display: flex;
  flex-direction: column;
}
.workflow-card:hover {
  transform: translateY(-3px) rotateZ(-0.3deg);
  box-shadow: var(--hard-offset);
}
.workflow-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}
.workflow-num {
  color: var(--warm-silver);
  letter-spacing: 0.4px;
}
.workflow-title {
  font-size: 24px;
  font-weight: 600;
  letter-spacing: -0.48px;
  margin: 0 0 8px;
  font-feature-settings: var(--feat-display);
}
.workflow-desc {
  font-size: 15px;
  color: var(--warm-charcoal);
  line-height: 1.50;
  margin: 0 0 20px;
}
.workflow-meta {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
  margin: 0 0 20px;
  padding: 16px;
  border-radius: 12px;
  background: var(--pure-white);
  border: 1px dashed var(--oat);
}
.workflow-meta div {
  display: grid;
  grid-template-columns: 64px 1fr;
  gap: 12px;
  align-items: baseline;
  font-size: 13px;
}
.workflow-meta dt {
  font-family: var(--font-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 1.08px;
  color: var(--warm-silver);
  margin: 0;
}
.workflow-meta dd {
  margin: 0;
  color: var(--dark-charcoal);
  font-size: 14px;
  line-height: 1.45;
}
.workflow-cta {
  font-size: 14px;
  font-weight: 500;
  border-bottom: 1px dashed var(--clay-black);
  padding-bottom: 2px;
  align-self: flex-start;
  margin-top: auto;
}

/* ---------------- team ---------------- */
.team {
  padding: 120px 0;
  background: var(--clay-black);
  color: var(--pure-white);
  border-radius: 40px;
  margin: 0 16px;
  overflow: hidden;
  position: relative;
}
.team::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(700px 400px at 80% 0%, rgba(59,211,253,0.18), transparent 60%),
    radial-gradient(600px 400px at 0% 100%, rgba(193,176,255,0.12), transparent 60%);
  pointer-events: none;
}
.team .container { position: relative; }
.team-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 16px;
}
.agent-card {
  border-radius: 24px;
  padding: 28px;
  min-height: 220px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  border: 1px solid rgba(255,255,255,0.10);
  transition: transform 200ms;
}
.agent-card:hover { transform: translateY(-4px) rotateZ(-0.5deg); }
.agent-role {
  align-self: flex-start;
  padding: 4px 10px;
  border-radius: 1584px;
  background: rgba(0,0,0,0.30);
  color: rgba(255,255,255,0.88);
}
.agent-card h3 {
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.44px;
  margin: 0;
  font-feature-settings: var(--feat-display);
}
.agent-card p {
  font-size: 14px;
  line-height: 1.50;
  margin: 0;
  opacity: 0.85;
}
.agent--matcha { background: var(--matcha-600); }
.agent--slushie { background: var(--slushie-800); }
.agent--lemon { background: var(--lemon-500); color: var(--lemon-800); }
.agent--lemon .agent-role { background: var(--lemon-800); color: var(--lemon-400); }
.agent--ube { background: var(--ube-800); }
.agent--pomegranate { background: var(--pomegranate-400); color: var(--pure-white); }
.agent--pomegranate .agent-role { background: rgba(0,0,0,0.30); }

.team-note {
  margin: 56px auto 0;
  max-width: 720px;
  text-align: center;
  font-size: 16px;
  line-height: 1.60;
  color: var(--matcha-300);
  padding-top: 32px;
  border-top: 1px dashed rgba(255,255,255,0.20);
}

/* ---------------- about ---------------- */
.about {
  padding: 120px 0;
  background: var(--warm-cream);
}
.about-grid {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: 64px;
  align-items: start;
}
.about-body p {
  font-size: 18px;
  line-height: 1.60;
  color: var(--dark-charcoal);
  margin: 0 0 20px;
}
.about-quote {
  font-size: 22px !important;
  font-weight: 500;
  letter-spacing: -0.44px;
  border-left: 4px solid var(--matcha-600);
  padding: 8px 0 8px 20px;
  background: var(--pure-white);
  border-radius: 0 12px 12px 0;
  border: 1px solid var(--oat);
  border-left: 4px solid var(--matcha-600);
  padding: 20px 24px;
  font-style: italic;
}
.about-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 16px;
}
.tag-dashed {
  font-size: 13px;
  padding: 6px 12px;
  border-radius: 1584px;
  border: 1px dashed var(--oat);
  background: var(--pure-white);
  color: var(--warm-charcoal);
}

/* ---------------- CTA ---------------- */
.cta {
  padding: 80px 0 120px;
  background: var(--warm-cream);
}
.cta-card {
  background: var(--lemon-400);
  border-radius: 40px;
  padding: 80px 64px;
  text-align: center;
  box-shadow: var(--clay-shadow);
  position: relative;
  overflow: hidden;
}
.cta-card::before {
  content: "";
  position: absolute;
  top: -120px; right: -120px;
  width: 360px; height: 360px;
  border-radius: 50%;
  background: var(--matcha-300);
  opacity: 0.6;
  pointer-events: none;
}
.cta-card::after {
  content: "";
  position: absolute;
  bottom: -140px; left: -100px;
  width: 320px; height: 320px;
  border-radius: 50%;
  background: var(--pomegranate-400);
  opacity: 0.4;
  pointer-events: none;
}
.cta-card .eyebrow,
.cta-card .display-secondary,
.cta-card .cta-sub,
.cta-card .cta-form,
.cta-card .cta-secondary {
  position: relative;
  z-index: 2;
}
.cta-sub {
  font-size: 18px;
  line-height: 1.60;
  color: var(--lemon-800);
  max-width: 600px;
  margin: 0 auto 32px;
}
.cta-sub-zh {
  display: block;
  margin-top: 6px;
  font-size: 16px;
  color: var(--lemon-800);
  opacity: 0.75;
}
.cta-form {
  display: flex;
  gap: 8px;
  max-width: 480px;
  margin: 0 auto 16px;
  background: var(--pure-white);
  border: 1px solid var(--oat);
  border-radius: 1584px;
  padding: 6px;
  box-shadow: var(--clay-shadow);
}
.cta-form input {
  flex: 1;
  border: none;
  outline: none;
  background: transparent;
  font: inherit;
  font-size: 16px;
  padding: 12px 18px;
  color: var(--clay-black);
  font-feature-settings: var(--feat);
}
.cta-form input::placeholder { color: var(--warm-silver); }
.cta-form button {
  font-size: 15px;
}
.cta-secondary {
  display: inline-block;
  font-size: 14px;
  color: var(--lemon-800);
  border-bottom: 1px dashed var(--lemon-800);
  padding-bottom: 2px;
}

/* ---------------- footer ---------------- */
.footer {
  background: var(--clay-black);
  color: var(--pure-white);
  padding: 80px 0 32px;
  border-radius: 40px 40px 0 0;
  margin: 0 16px;
}
.footer-inner {
  display: grid;
  grid-template-columns: 1.2fr 2fr;
  gap: 64px;
}
.footer-logo {
  width: min(273px, 100%);
  height: auto;
  border-radius: 12px;
  display: block;
}
.footer-tagline {
  margin: 20px 0 0;
  font-size: 14px;
  line-height: 1.60;
  color: var(--warm-silver);
}
.footer-cols {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
}
.footer-cols div {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.footer-col-title {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 1.08px;
  text-transform: uppercase;
  color: var(--warm-silver);
  font-feature-settings: var(--feat);
  margin-bottom: 8px;
}
.footer-cols a {
  font-size: 15px;
  color: var(--pure-white);
  border-bottom: 1px dashed transparent;
  padding-bottom: 2px;
  width: fit-content;
  transition: border-color 150ms;
}
.footer-cols a:hover { border-bottom-color: var(--matcha-300); }
.footer-bottom {
  border-top: 1px solid rgba(255,255,255,0.10);
  margin-top: 56px;
  padding-top: 24px;
  text-align: center;
  color: var(--warm-silver);
}

/* ---------------- responsive ---------------- */
@media (max-width: 1100px) {
  .display-hero { font-size: 64px; letter-spacing: -2.4px; }
  .display-secondary { font-size: 48px; letter-spacing: -1.8px; }
  .section-heading { font-size: 36px; letter-spacing: -1.08px; }
  .loop-grid { grid-template-columns: repeat(3, 1fr); }
  .team-grid { grid-template-columns: repeat(3, 1fr); }
  .pillars-grid { grid-template-columns: repeat(2, 1fr); }
  .pillar-card,
  .pillar--lemon,
  .pillar--ube,
  .pillar--pomegranate { grid-column: auto; }
  .workflows-grid { grid-template-columns: repeat(2, 1fr); }
  .about-grid { grid-template-columns: 1fr; gap: 32px; }
  .footer-inner { grid-template-columns: 1fr; }
}

@media (max-width: 720px) {
  .container { padding: 0 20px; }
  .nav-inner { padding: 12px 20px; }
  .nav-links { display: none; }
  .display-hero { font-size: 44px; letter-spacing: -1.32px; line-height: 1.05; }
  .display-secondary { font-size: 36px; letter-spacing: -1.08px; }
  .section-heading { font-size: 28px; letter-spacing: -0.84px; }
  .hero { padding: 64px 0 80px; }
  .problem, .pillars, .workflows, .about { padding: 80px 0; }
  .loop, .team { padding: 80px 24px; margin: 0 8px; }
  .problem-grid,
  .loop-grid,
  .pillars-grid,
  .workflows-grid,
  .team-grid { grid-template-columns: 1fr; }
  .card-problem--wide { grid-column: auto; }
  .hero-card-row { grid-template-columns: 40px 1fr; }
  .hero-card-row .chip { grid-column: 2 / -1; justify-self: start; }
  .cta-card { padding: 56px 28px; border-radius: 28px; }
  .cta-form { flex-direction: column; border-radius: 24px; padding: 12px; }
  .cta-form button { width: 100%; }
  .footer { padding: 56px 24px 24px; margin: 0 8px; }
  .footer-cols { grid-template-columns: 1fr 1fr; }
}

/* ---------------- subpage / article ---------------- */
.subpage {
  padding: 64px 0 96px;
  position: relative;
  overflow: hidden;
}
.subpage::before {
  content: "";
  position: absolute;
  top: -200px; right: -200px;
  width: 460px; height: 460px;
  background: radial-gradient(circle at 30% 30%, var(--matcha-300), transparent 60%);
  opacity: 0.35;
  pointer-events: none;
}
.subpage .container { position: relative; z-index: 2; max-width: 880px; }
.subpage-back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  font-weight: 500;
  color: var(--warm-charcoal);
  margin-bottom: 24px;
  border-bottom: 1px dashed var(--oat);
  padding-bottom: 2px;
  transition: color 150ms, border-color 150ms;
}
.subpage-back:hover { color: var(--clay-black); border-bottom-color: var(--clay-black); }
.subpage h1 {
  font-size: 56px;
  font-weight: 600;
  line-height: 1.05;
  letter-spacing: -2.24px;
  font-feature-settings: var(--feat-display);
  margin: 8px 0 16px;
}
.subpage-lede {
  font-size: 20px;
  line-height: 1.5;
  color: var(--warm-charcoal);
  margin: 0 0 40px;
  max-width: 720px;
}

.subpage-meta {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  background: var(--pure-white);
  border: 1px solid var(--oat);
  border-radius: 20px;
  padding: 20px;
  margin: 0 0 48px;
  box-shadow: var(--clay-shadow);
}
.subpage-meta div { padding: 8px 12px; }
.subpage-meta dt {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--warm-silver);
  margin-bottom: 4px;
}
.subpage-meta dd {
  margin: 0;
  font-size: 15px;
  font-weight: 500;
  color: var(--clay-black);
}

.prose { max-width: 720px; }
.prose h2 {
  font-size: 28px;
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.84px;
  font-feature-settings: var(--feat-display);
  margin: 48px 0 16px;
}
.prose h3 {
  font-size: 20px;
  font-weight: 600;
  margin: 32px 0 12px;
}
.prose p {
  font-size: 17px;
  line-height: 1.65;
  color: var(--dark-charcoal);
  margin: 0 0 16px;
}
.prose ul, .prose ol {
  font-size: 17px;
  line-height: 1.65;
  color: var(--dark-charcoal);
  padding-left: 22px;
  margin: 0 0 16px;
}
.prose li { margin-bottom: 6px; }
.prose strong { color: var(--clay-black); font-weight: 600; }
.prose a {
  color: var(--matcha-800);
  border-bottom: 1px solid var(--matcha-300);
  transition: color 150ms;
}
.prose a:hover { color: var(--clay-black); }
.prose hr {
  border: none;
  border-top: 1px dashed var(--oat);
  margin: 40px 0;
}

.subpage-cta {
  margin: 56px 0 0;
  padding: 28px 32px;
  background: var(--clay-black);
  color: var(--pure-white);
  border-radius: 24px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  box-shadow: var(--clay-shadow);
}
.subpage-cta p { margin: 0; max-width: 460px; line-height: 1.5; }
.subpage-cta .btn-white { color: var(--clay-black); }

.subpage-form {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--pure-white);
  border-radius: 1584px;
  border: 1px solid var(--oat);
  padding: 6px;
}
.subpage-form input {
  flex: 1;
  border: none;
  outline: none;
  font: inherit;
  font-size: 15px;
  padding: 8px 14px;
  background: transparent;
  color: var(--clay-black);
  min-width: 200px;
}

@media (max-width: 720px) {
  .subpage h1 { font-size: 36px; letter-spacing: -1.08px; }
  .subpage-lede { font-size: 17px; }
  .subpage-meta { grid-template-columns: 1fr; }
  .subpage-cta { flex-direction: column; align-items: flex-start; padding: 24px; }
}