/* ============================================================
   Midorick — Design System
   Warm-paper neutrals · Geist · hairline borders · mono labels
   ============================================================ */

:root {
  /* Color — paper / ink (cool, neutral white) */
  --paper:        #ffffff;                   /* pure white */
  --paper-2:      oklch(98% 0.012 165);      /* faintest mint tint */
  --paper-3:      oklch(95% 0.020 165);      /* deeper mint panel */
  --ink:          oklch(22% 0.030 165);      /* deep mint-ink primary text */
  --ink-2:        oklch(38% 0.020 165);      /* secondary text */
  --ink-3:        oklch(55% 0.015 165);      /* tertiary / mono */
  --fog:          oklch(92% 0.020 165);      /* hairline borders */
  --fog-2:        oklch(85% 0.030 165);      /* stronger border */

  /* Accent — Midorick mint-green, deep forest */
  --amber:        oklch(42% 0.14 158);       /* forest mint */
  --amber-deep:   oklch(28% 0.10 158);       /* deep forest */
  --amber-soft:   oklch(88% 0.08 158);       /* soft mint wash */

  /* Green-blue companion — deep teal */
  --teal:         oklch(40% 0.11 200);       /* deep teal */
  --teal-deep:    oklch(26% 0.08 200);       /* darkest teal */
  --teal-soft:    oklch(88% 0.06 200);       /* soft teal wash */

  /* Secondary supporting tones (used sparingly) */
  --moss:         oklch(48% 0.10 155);       /* deeper green for "available" / live */
  --slate:        oklch(34% 0.020 165);

  /* Inverted (dark sections) — deep mint-charcoal */
  --night:        oklch(20% 0.030 165);
  --night-2:      oklch(28% 0.030 165);
  --paper-on-night: oklch(96% 0.015 165);

  /* Type */
  --sans: "Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --mono: "Geist Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;

  /* Sizes */
  --t-eyebrow: 0.75rem;        /* 12 */
  --t-body:    1rem;           /* 16 */
  --t-body-l:  1.125rem;       /* 18 */
  --t-h6:      1rem;
  --t-h5:      1.25rem;
  --t-h4:      1.5rem;
  --t-h3:      2rem;
  --t-h2:      2.75rem;
  --t-h1:      4rem;
  --t-display: 5.25rem;

  /* Spacing rhythm */
  --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;

  /* Radii — generous, friendly */
  --r-1: 10px;
  --r-2: 18px;
  --r-3: 28px;
  --r-4: 40px;

  /* Friendly accent companions — charcoal-green sage */
  --peach:        oklch(58% 0.05 170);       /* deep sage */
  --peach-soft:   oklch(90% 0.025 170);
  --butter:       oklch(60% 0.06 165);       /* deep mint-charcoal */
  --butter-soft:  oklch(90% 0.03 165);
  --sky:          oklch(56% 0.05 180);       /* deep teal-charcoal */
  --sky-soft:     oklch(90% 0.025 180);
  --lilac:        oklch(52% 0.06 170);       /* darkest sage */
  --lilac-soft:   oklch(88% 0.035 170);

  /* Shadows (soft, not crisp) */
  --shadow-sm: 0 2px 8px oklch(60% 0.05 165 / 0.08);
  --shadow-md: 0 12px 32px oklch(50% 0.08 165 / 0.10);
  --shadow-lg: 0 24px 60px oklch(50% 0.08 165 / 0.14);

  /* Layout */
  --maxw: 1240px;
  --pad: clamp(20px, 4vw, 56px);
}

/* ---------- reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--sans);
  font-size: var(--t-body);
  font-weight: 400;
  line-height: 1.55;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-feature-settings: "ss01", "cv11";
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
hr { border: 0; border-top: 1px solid var(--fog); margin: var(--s-7) 0; }

::selection { background: var(--amber-soft); color: var(--ink); }

/* ---------- typography ---------- */
.eyebrow {
  font-family: var(--mono);
  font-size: var(--t-eyebrow);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--ink-3);
}
.eyebrow .dot {
  display: inline-block;
  width: 6px; height: 6px;
  border-radius: 999px;
  background: var(--amber);
  margin-right: 8px;
  vertical-align: middle;
  transform: translateY(-1px);
}
h1, h2, h3, h4, h5, h6 { margin: 0; font-weight: 500; letter-spacing: -0.02em; line-height: 1.08; color: var(--ink); }
h1 { font-size: var(--t-h1); font-weight: 400; letter-spacing: -0.035em; }
h1.display { font-size: var(--t-display); }
h2 { font-size: var(--t-h2); font-weight: 400; letter-spacing: -0.03em; line-height: 1.1; }
h3 { font-size: var(--t-h3); }
h4 { font-size: var(--t-h4); }
h5 { font-size: var(--t-h5); }
p  { margin: 0; }
.lead { font-size: 1.25rem; line-height: 1.5; color: var(--ink-2); font-weight: 400; }
.muted { color: var(--ink-3); }
.mono { font-family: var(--mono); }
.tabular { font-variant-numeric: tabular-nums; }

@media (max-width: 800px) {
  :root {
    --t-display: 3rem;
    --t-h1: 2.5rem;
    --t-h2: 2rem;
    --t-h3: 1.5rem;
  }
}

/* ---------- layout primitives ---------- */
.container {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--pad);
}
.section {
  padding-block: var(--s-9);
  position: relative;
}
.section + .section:not(.section--cream):not(.section--dark):not(.section--peach):not(.section--butter) {
  border-top: 1px solid var(--fog);
}
.section--tight { padding-block: var(--s-7); }
.section--lg    { padding-block: var(--s-10); }
.section--dark {
  background: var(--night);
  color: var(--paper-on-night);
  border-top-color: var(--night-2);
}
.section--dark h1, .section--dark h2, .section--dark h3 { color: var(--paper-on-night); }
.section--dark .muted { color: oklch(72% 0.020 165); }
.section--dark .eyebrow { color: oklch(72% 0.020 165); }
.section--cream { background: var(--paper-2); }
.section--peach  { background: oklch(92% 0.020 170); }
.section--butter { background: oklch(92% 0.025 165); }
.section--mint   { background: oklch(88% 0.07 158); }
.section--sky    { background: oklch(92% 0.020 180); }

/* curved section transitions */
.section--curve-top::before {
  content: ""; position: absolute; top: -1px; left: 0; right: 0; height: 60px;
  background: inherit;
  border-radius: 0 0 50% 50% / 0 0 100% 100%;
  transform: scaleX(1.05) translateY(-50%);
  z-index: 0;
}

.grid { display: grid; gap: var(--s-6); }
.grid-2 { grid-template-columns: repeat(2, minmax(0,1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0,1fr)); }
.grid-4 { grid-template-columns: repeat(4, minmax(0,1fr)); }
.grid-12 { grid-template-columns: repeat(12, minmax(0,1fr)); }
@media (max-width: 900px) {
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
}

.stack-4  { display: flex; flex-direction: column; gap: var(--s-4); }
.stack-5  { display: flex; flex-direction: column; gap: var(--s-5); }
.stack-6  { display: flex; flex-direction: column; gap: var(--s-6); }
.stack-7  { display: flex; flex-direction: column; gap: var(--s-7); }
.row      { display: flex; gap: var(--s-4); align-items: center; flex-wrap: wrap; }
.row-between { display:flex; justify-content: space-between; align-items: center; gap: var(--s-5); flex-wrap: wrap; }

.divider { height: 1px; background: var(--fog); width: 100%; }
.divider--dark { background: var(--night-2); }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 16px 26px;
  border-radius: 999px;
  font-weight: 500;
  font-size: 0.98rem;
  border: 1px solid transparent;
  transition: all .25s cubic-bezier(.2,.8,.2,1);
  white-space: nowrap;
  box-shadow: var(--shadow-sm);
}
.btn:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.btn:active { transform: translateY(0); }
.btn--primary {
  background: var(--ink);
  color: var(--paper);
}
.btn--primary:hover { background: var(--amber-deep); }
.btn--ghost {
  border-color: var(--fog-2);
  color: var(--ink);
  background: var(--paper);
}
.btn--ghost:hover { border-color: var(--amber); color: var(--amber-deep); }
.btn--amber {
  background: var(--amber);
  color: var(--paper);
}
.btn--amber:hover { background: var(--amber-deep); color: var(--paper); }
.btn--link {
  padding: 0;
  border-radius: 0;
  border-bottom: 1px solid currentColor;
  padding-bottom: 2px;
}
.btn .arrow { display: inline-block; transition: transform .2s ease; }
.btn:hover .arrow { transform: translateX(3px); }

/* ---------- nav ---------- */
.nav {
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in oklch, var(--paper) 90%, transparent);
  backdrop-filter: saturate(140%) blur(14px);
  border-bottom: 1px solid var(--fog);
}
.nav__inner {
  display: flex; align-items: center; justify-content: space-between;
  padding-block: 18px;
}
.nav__brand {
  display: inline-flex; align-items: baseline; gap: 8px;
  font-weight: 500; font-size: 1.05rem; letter-spacing: -0.01em;
}
.nav__brand .mark {
  display: inline-block; width: 16px; height: 16px; border-radius: 4px;
  background: var(--ink); position: relative;
  transform: translateY(2px);
}
.nav__brand .mark::after{
  content:""; position:absolute; inset: 4px; background: var(--amber); border-radius: 1px;
}
.nav__brand .tag {
  font-family: var(--mono); font-size: .68rem; color: var(--ink-3);
  letter-spacing: 0.1em; text-transform: uppercase;
  margin-left: 6px;
}
.nav__links {
  display: flex; gap: 26px; align-items: center;
}
.nav__links a {
  font-size: .92rem; color: var(--ink-2);
  padding: 6px 0; position: relative;
  white-space: nowrap;
}
.nav__links a:hover { color: var(--ink); }
.nav__links a.is-current {
  color: var(--ink);
}
.nav__links a.is-current::after {
  content:""; position:absolute; left:0; right:0; bottom:-4px; height: 2px;
  background: var(--amber);
}
.nav__cta { display: flex; gap: 10px; align-items: center; }
.nav__cta .btn { padding: 11px 20px; font-size: .9rem; }

@media (max-width: 1100px) {
  .nav__brand .tag { display: none; }
}
@media (max-width: 800px) {
  .nav__links { display: none; }
}


/* ---------- FAQ ---------- */
.faq-list { display: flex; flex-direction: column; gap: 12px; }
.faq-item {
  border: 1px solid var(--fog);
  border-radius: 14px;
  background: var(--paper);
  overflow: hidden;
  transition: box-shadow .25s ease, border-color .25s ease;
}
.faq-item:hover { box-shadow: 0 4px 20px oklch(95% 0.01 200 / .6); }
.faq-item--open { border-color: oklch(80% 0.04 165); box-shadow: 0 4px 24px oklch(92% 0.03 165 / .5); }
.faq-question {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 20px 24px;
  border: none;
  background: transparent;
  cursor: pointer;
  font-family: var(--sans);
  font-size: 1.05rem;
  font-weight: 500;
  color: var(--ink);
  text-align: left;
  transition: color .2s ease;
}
.faq-question:hover { color: var(--moss); }
.faq-icon {
  flex-shrink: 0;
  font-size: 1.3rem;
  font-weight: 400;
  color: var(--moss);
  width: 24px;
  text-align: center;
  transition: transform .25s ease;
}
.faq-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height .35s ease, padding .25s ease;
}
.faq-item--open .faq-answer {
  max-height: 400px;
  padding: 0 24px 20px;
}
.faq-answer p {
  color: oklch(45% 0.01 250);
  line-height: 1.65;
  font-size: .98rem;
}
.faq-answer a { color: var(--moss); font-weight: 500; }
@media (max-width: 600px) {
  .faq-question { padding: 16px 18px; font-size: .98rem; }
  .faq-item--open .faq-answer { padding: 0 18px 16px; }
}

/* ---------- footer ---------- */
.footer {
  background: var(--night);
  color: var(--paper-on-night);
  padding-block: var(--s-9) var(--s-6);
  border-top: 1px solid var(--night-2);
}
.footer a { color: var(--paper-on-night); opacity: .82; }
.footer a:hover { opacity: 1; color: var(--amber); }
.footer h6 {
  font-family: var(--mono);
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: oklch(60% 0.01 250);
  font-weight: 500;
  margin-bottom: 16px;
}
.footer__grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr 1fr;
  gap: 40px;
}
@media (max-width: 900px) {
  .footer__grid { grid-template-columns: 1fr 1fr 1fr; gap: 32px; }
}
@media (max-width: 600px) {
  .footer__grid { grid-template-columns: 1fr 1fr; gap: 24px; }
}
.footer__bottom {
  margin-top: var(--s-8);
  padding-top: var(--s-5);
  border-top: 1px solid var(--night-2);
  display: flex; justify-content: space-between; gap: 16px;
  flex-wrap: wrap;
  font-family: var(--mono); font-size: .75rem;
  color: oklch(60% 0.01 250);
  text-transform: uppercase; letter-spacing: 0.1em;
}

/* ---------- page hero ---------- */
.page-hero {
  padding-block: var(--s-10) var(--s-8);
  border-bottom: 1px solid var(--fog);
}
.page-hero__eyebrow { margin-bottom: 28px; }
.page-hero h1 {
  font-size: clamp(2.4rem, 6vw, 4.6rem);
  max-width: 18ch;
  font-weight: 400;
  letter-spacing: -0.035em;
  line-height: 1.05;
}
.page-hero .lead {
  max-width: 56ch;
  margin-top: 28px;
}

/* ---------- cards ---------- */
.card {
  background: var(--paper);
  border: 1px solid var(--fog);
  border-radius: var(--r-3);
  padding: var(--s-6);
  transition: all .3s cubic-bezier(.2,.8,.2,1);
  box-shadow: var(--shadow-sm);
}
.card--hover:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
  border-color: transparent;
}
.card .num {
  font-family: var(--mono); font-size: .72rem; color: var(--ink-3);
  letter-spacing: 0.1em;
}
.card h4 { margin: 12px 0; font-size: 1.35rem; font-weight: 500; }
.card p { color: var(--ink-2); }

/* ---------- placeholder image ---------- */
.ph {
  position: relative;
  display: flex; align-items: flex-end;
  background:
    radial-gradient(ellipse at 30% 30%, oklch(94% 0.08 158) 0%, oklch(92% 0.04 158) 60%, oklch(96% 0.020 165) 100%);
  border: 1px solid var(--fog);
  border-radius: var(--r-3);
  color: var(--ink-3);
  font-family: var(--mono); font-size: .72rem;
  letter-spacing: .1em; text-transform: uppercase;
  padding: 16px 20px;
  overflow: hidden;
  min-height: 200px;
}
.ph::before {
  content: "";
  position: absolute;
  width: 60%; height: 60%;
  top: -20%; right: -20%;
  background: radial-gradient(circle, oklch(86% 0.13 158) 0%, transparent 70%);
  border-radius: 50%;
  opacity: .55;
  pointer-events: none;
}
.ph::after {
  content: "";
  position: absolute;
  width: 30%; height: 30%;
  bottom: -8%; left: -8%;
  background: radial-gradient(circle, oklch(85% 0.12 200) 0%, transparent 70%);
  border-radius: 50%;
  opacity: .5;
  pointer-events: none;
}
.ph--dark {
  background:
    radial-gradient(ellipse at 30% 30%, oklch(30% 0.04 165) 0%, oklch(22% 0.030 165) 70%);
  border-color: var(--night-2);
  color: oklch(78% 0.020 165);
}
.ph--dark::before { background: radial-gradient(circle, oklch(60% 0.16 158) 0%, transparent 70%); opacity: .35; }
.ph--amber {
  background:
    radial-gradient(ellipse at 30% 30%, oklch(92% 0.13 158) 0%, oklch(85% 0.13 158) 70%);
  border-color: oklch(78% 0.13 158);
  color: var(--amber-deep);
}
.ph--peach {
  background:
    radial-gradient(ellipse at 30% 30%, oklch(92% 0.08 200) 0%, oklch(85% 0.10 200) 70%);
  border-color: oklch(78% 0.12 200);
  color: oklch(36% 0.10 200);
}
.ph--peach::before { background: radial-gradient(circle, oklch(80% 0.12 200) 0%, transparent 70%); }
.ph .corner {
  position: absolute; top: 12px; right: 14px;
  font-family: var(--mono); font-size: .7rem;
  color: inherit; opacity: .65;
}

/* ---------- tag / chip ---------- */
.chip {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 14px;
  border: 1px solid var(--fog-2);
  border-radius: 999px;
  font-family: var(--mono); font-size: .72rem;
  letter-spacing: .08em; text-transform: uppercase;
  color: var(--ink-2);
  background: var(--paper);
}
.chip--solid {
  background: var(--ink);
  color: var(--paper);
  border-color: var(--ink);
}
.chip--amber {
  background: var(--amber-soft);
  color: var(--amber-deep);
  border-color: oklch(85% 0.05 60);
}
.chip--moss {
  background: oklch(94% 0.06 155);
  color: oklch(36% 0.10 155);
  border-color: oklch(85% 0.08 155);
}
.chip .dot {
  width: 6px; height: 6px; border-radius: 999px; background: currentColor;
}

/* ---------- forms ---------- */
.field { display: flex; flex-direction: column; gap: 6px; }
.field label {
  font-family: var(--mono); font-size: .72rem;
  letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3);
}
.field input, .field select, .field textarea {
  font: inherit; color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--fog-2);
  border-radius: var(--r-2);
  padding: 14px 18px;
  outline: none;
  transition: all .2s ease;
}
.field input:focus, .field select:focus, .field textarea:focus {
  border-color: var(--amber);
  box-shadow: 0 0 0 4px var(--amber-soft);
}
.field textarea { resize: vertical; min-height: 120px; }

/* ---------- ascii rule ---------- */
.ascii-rule {
  font-family: var(--mono); color: var(--ink-3);
  letter-spacing: 4px; font-size: .85rem;
  user-select: none;
}

/* ---------- step list ---------- */
.steps {
  counter-reset: step;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.steps .step {
  background: var(--paper);
  border: 1px solid var(--fog);
  border-radius: var(--r-3);
  box-shadow: var(--shadow-sm);
  transition: all .3s cubic-bezier(.2,.8,.2,1);
}
.steps .step:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.steps-inner-old {
  border: 1px solid var(--fog);
  border-radius: var(--r-3);
  overflow: hidden;
  background: var(--paper);
}
.steps .step {
  padding: 36px;
  position: relative;
}
.steps .step .num {
  font-family: var(--mono); font-size: .72rem;
  color: var(--ink-3); letter-spacing: .1em;
  margin-bottom: 16px; display: block;
}
.steps .step h5 { margin: 0 0 8px; font-weight: 500; font-size: 1.15rem; }
.steps .step p { color: var(--ink-2); font-size: .95rem; }
@media (max-width: 900px) {
  .steps { grid-template-columns: 1fr; }
  .steps .step { border-right: none !important; border-bottom: 1px solid var(--fog) !important; }
  .steps .step:last-child { border-bottom: none !important; }
}

/* ---------- stat ---------- */
.stat {
  display: flex; flex-direction: column; gap: 6px;
  border-top: 1px solid var(--fog);
  padding-top: 18px;
}
.stat .v {
  font-size: 2.75rem; font-weight: 400; letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
}
.stat .l {
  font-family: var(--mono); font-size: .72rem;
  letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3);
}

/* ---------- table-ish list ---------- */
.tlist { border-top: 1px solid var(--fog); }
.tlist .row {
  display: grid;
  grid-template-columns: 60px 1fr 1.4fr 120px;
  gap: 24px; padding: 22px 0;
  border-bottom: 1px solid var(--fog);
  align-items: center;
}
.tlist .row:hover { background: var(--paper-2); }
.tlist .num { font-family: var(--mono); color: var(--ink-3); font-size: .8rem; }
.tlist h5 { font-weight: 500; font-size: 1.1rem; }
.tlist p  { color: var(--ink-2); font-size: .95rem; }
.tlist .meta { font-family: var(--mono); font-size: .72rem; color: var(--ink-3); text-align: right; letter-spacing: .08em; text-transform: uppercase; }

@media (max-width: 800px) {
  .tlist .row { grid-template-columns: 1fr; gap: 8px; }
  .tlist .meta { text-align: left; }
}

/* ---------- blog post body ---------- */
.post-body {
  max-width: 68ch;
  margin: 0 auto;
  font-size: 1.1rem;
  line-height: 1.75;
  color: var(--ink-2);
}
.post-body p { margin: 0 0 1.4em; }
.post-body h2 {
  margin: 2.2em 0 .8em;
  color: var(--ink); font-size: 1.85rem; font-weight: 500;
  letter-spacing: -0.02em;
}
.post-body h3 {
  margin: 1.8em 0 .6em;
  color: var(--ink); font-size: 1.25rem; font-weight: 500;
}
.post-body ul { margin: 0 0 1.4em; padding-left: 1.2em; }
.post-body li { margin-bottom: 0.5em; }
.post-body a { color: var(--amber-deep); border-bottom: 1px solid currentColor; }
.post-body blockquote {
  margin: 2em 0;
  padding: 24px 28px;
  border-left: 3px solid var(--amber);
  background: var(--paper-2);
  font-size: 1.2rem;
  color: var(--ink);
  font-style: normal;
  border-radius: 0 var(--r-2) var(--r-2) 0;
}
.post-body strong { color: var(--ink); font-weight: 600; }

/* ---------- meta row ---------- */
.meta-row {
  display: flex; gap: 18px; align-items: center;
  font-family: var(--mono); font-size: .75rem;
  color: var(--ink-3);
  letter-spacing: .1em; text-transform: uppercase;
}
.meta-row .sep { opacity: .5; }

/* ---------- joyful flourishes ---------- */
.blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(40px);
  opacity: .55;
  pointer-events: none;
  z-index: 0;
}
.blob--mint   { background: oklch(55% 0.16 158); }
.blob--peach  { background: oklch(58% 0.05 170); }
.blob--butter { background: oklch(60% 0.06 165); }
.blob--sky    { background: oklch(56% 0.05 180); }

@keyframes floaty {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50%      { transform: translateY(-14px) rotate(6deg); }
}
@keyframes spin-slow {
  from { transform: rotate(0); } to { transform: rotate(360deg); }
}
@keyframes pop-in {
  0%   { opacity: 0; transform: translateY(20px) scale(.96); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}
.floaty   { animation: floaty 6s ease-in-out infinite; }
.floaty-2 { animation: floaty 8s ease-in-out infinite; animation-delay: -2s; }
.spin-slow { animation: spin-slow 24s linear infinite; }
.pop-in   { animation: pop-in .8s cubic-bezier(.2,.8,.2,1) both; }

/* deco shape primitives */
.shape {
  position: absolute;
  display: block;
  pointer-events: none;
}
.shape--squircle {
  background: var(--amber);
  border-radius: 38%;
}
.shape--ring {
  border: 4px solid var(--amber);
  border-radius: 50%;
  background: transparent;
}
.shape--peach { background: var(--peach); border-radius: 38%; }
.shape--butter { background: var(--butter); border-radius: 38%; }
.shape--sky { background: var(--sky); border-radius: 38%; }
/* avatar bubble */
.avatar {
  display: inline-flex; align-items: center; justify-content: center;
  width: 56px; height: 56px; border-radius: 50%;
  font-family: var(--sans); font-weight: 600; font-size: 1.05rem;
  color: var(--paper);
  border: 3px solid var(--paper);
  box-shadow: var(--shadow-sm);
}
.avatar-row { display: inline-flex; }
.avatar-row .avatar + .avatar { margin-left: -16px; }
.avatar--mint   { background: var(--amber); color: var(--paper); }
.avatar--deep   { background: var(--amber-deep); color: var(--paper); }
.avatar--peach  { background: var(--paper-3); color: var(--ink-2); }
.avatar--butter { background: var(--paper-2); color: var(--ink-2); }
.avatar--sky    { background: oklch(94% 0.025 165); color: var(--ink-2); }
.avatar--lilac  { background: oklch(92% 0.030 165); color: var(--ink-2); }
.avatar--ink    { background: var(--ink); color: var(--paper); }

/* sparkle */
.sparkle {
  display: inline-block;
  width: 14px; height: 14px;
  background:
    conic-gradient(from 0deg,
      transparent 0deg, currentColor 8deg, transparent 16deg,
      transparent 80deg, currentColor 88deg, transparent 96deg,
      transparent 170deg, currentColor 178deg, transparent 186deg,
      transparent 260deg, currentColor 268deg, transparent 276deg);
  mask: radial-gradient(circle, black 30%, transparent 60%);
  color: var(--amber);
}

/* hero deco container */
.hero-stage {
  position: relative;
  border-radius: var(--r-4);
  background:
    radial-gradient(ellipse at 80% 20%, oklch(94% 0.10 158) 0%, transparent 50%),
    radial-gradient(ellipse at 10% 80%, oklch(96% 0.08 45) 0%, transparent 55%),
    var(--paper);
  overflow: hidden;
  padding: 48px;
}

/* tag pill (joyful chip) */
.pill {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 18px;
  border-radius: 999px;
  background: var(--amber-soft);
  color: var(--amber-deep);
  font-size: .9rem;
  font-weight: 500;
  box-shadow: var(--shadow-sm);
}
.pill .emoji { font-size: 1.05rem; }
.pill--peach { background: var(--peach-soft); color: var(--ink-2); }
.pill--butter { background: var(--butter-soft); color: var(--ink-2); }
.pill--sky { background: var(--sky-soft); color: var(--ink-2); }

/* feature card with colored icon */
.feat {
  background: var(--paper);
  border-radius: var(--r-3);
  padding: 32px;
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--fog);
  transition: all .3s cubic-bezier(.2,.8,.2,1);
}
.feat:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.feat .ico {
  width: 56px; height: 56px;
  border-radius: 18px;
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 20px;
}
.feat .ico--mint   { background: var(--amber-soft); color: var(--amber-deep); }
.feat .ico--peach  { background: var(--peach-soft); color: var(--ink-2); }
.feat .ico--butter { background: var(--butter-soft); color: var(--ink-2); }
.feat .ico--sky    { background: var(--sky-soft); color: var(--ink-2); }
.feat .ico--lilac  { background: var(--lilac-soft); color: var(--ink-2); }
.feat .ico svg { width: 26px; height: 26px; }

.clients {
  display: flex; gap: 16px; flex-wrap: nowrap;
  overflow: hidden;
  mask-image: linear-gradient(90deg, transparent, black 8%, black 92%, transparent);
}
.clients .track {
  display: flex; gap: 16px;
  animation: marquee 30s linear infinite;
  flex-shrink: 0;
}
.clients .item {
  padding: 22px 32px;
  background: var(--paper);
  border: 1px solid var(--fog);
  border-radius: 999px;
  font-family: var(--mono); font-size: .82rem;
  color: var(--ink-2);
  letter-spacing: .08em; text-transform: uppercase;
  white-space: nowrap;
  box-shadow: var(--shadow-sm);
}
@keyframes marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* ---------- joyful page-hero & list flourishes ---------- */
.page-hero--joy { padding-block: var(--s-9) var(--s-7); border-bottom: none; }
.page-hero--joy h1 { font-size: clamp(2.6rem, 6.4vw, 5rem); }

.tlist--joy { border-top: none; display: flex; flex-direction: column; gap: 14px; }
.tlist--joy .row {
  display: grid;
  grid-template-columns: 80px 1.2fr 1fr 130px;
  gap: 24px; padding: 22px 28px;
  border: 1px solid var(--fog);
  border-radius: var(--r-3);
  background: var(--paper);
  box-shadow: var(--shadow-sm);
  transition: all .25s cubic-bezier(.2,.8,.2,1);
}
.tlist--joy .row:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
  border-color: var(--amber);
  background: var(--paper);
}
.tlist--joy .num { font-family: var(--mono); font-size: .72rem; color: var(--amber-deep); letter-spacing: .1em; }
.tlist--joy h5 { font-weight: 500; font-size: 1.1rem; }
.tlist--joy p { color: var(--ink-2); font-size: .92rem; }
.tlist--joy .meta { font-family: var(--mono); font-size: .72rem; color: var(--ink-3); text-align: right; letter-spacing: .08em; text-transform: uppercase; }
@media (max-width: 800px) {
  .tlist--joy .row { grid-template-columns: 1fr; gap: 8px; }
  .tlist--joy .meta { text-align: left; }
}

/* compare card */
.compare {
  border: 1px solid var(--fog);
  border-radius: var(--r-3);
  overflow: hidden;
  background: var(--paper);
  box-shadow: var(--shadow-md);
}
.compare__head {
  display: grid;
  grid-template-columns: 1.4fr 1.4fr 1fr 1fr;
  padding: 22px 28px;
  background: var(--amber-soft);
  font-family: var(--mono);
  font-size: .72rem; text-transform: uppercase;
  letter-spacing: .1em; color: var(--ink-2);
}
.compare__head span:nth-child(2) { color: var(--amber-deep); font-weight: 600; }
.compare__row {
  display: grid;
  grid-template-columns: 1.4fr 1.4fr 1fr 1fr;
  padding: 20px 28px;
  border-top: 1px solid var(--fog);
  align-items: center;
}
.compare__row:hover { background: var(--paper-2); }

/* big price card */
.price-card {
  position: relative;
  border-radius: var(--r-4);
  background: var(--paper);
  border: 1px solid var(--fog);
  padding: 48px;
  box-shadow: var(--shadow-md);
  overflow: hidden;
}
.price-card::before {
  content: ""; position: absolute;
  width: 220px; height: 220px;
  top: -60px; right: -60px;
  background: radial-gradient(circle, var(--amber-soft) 0%, transparent 70%);
  pointer-events: none;
}

/* big quote */
.quote-card {
  background: var(--paper);
  border-radius: 36px;
  padding: 56px 48px;
  box-shadow: var(--shadow-md);
}

/* tribe headshot card */
.team-card {
  background: var(--paper);
  border: 1px solid var(--fog);
  border-radius: var(--r-3);
  padding: 24px;
  box-shadow: var(--shadow-sm);
  transition: all .3s cubic-bezier(.2,.8,.2,1);
  text-align: center;
}
.team-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); border-color: transparent; }
.team-card .ph { border-radius: var(--r-2); margin-bottom: 18px; }

/* nudge card (inline soft callout) */
.nudge {
  padding: 36px;
  border: 1px dashed var(--fog-2);
  border-radius: var(--r-3);
  background: var(--paper-2);
  text-align: center;
}


/* ============================================================
   Hero Globe
   ============================================================ */
.globe-wrap {
  position: relative;
  width: calc(100% + 80px);
  margin-left: -40px;
  height: 440px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: visible;
  transform: translateX(24px);
}

.globe {
  position: relative;
  width: 260px;
  height: 260px;
  flex: none;
}

/* soft ground shadow under globe */
.globe__shadow {
  position: absolute;
  bottom: -28px;
  left: 10%; right: 10%;
  height: 36px;
  background: radial-gradient(ellipse, oklch(35% 0.08 158 / .25) 0%, transparent 70%);
  filter: blur(4px);
}

.globe__sphere {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background:
    radial-gradient(circle at 32% 30%,
      oklch(96% 0.08 158) 0%,
      oklch(82% 0.13 158) 35%,
      var(--amber) 70%,
      var(--amber-deep) 100%);
  box-shadow:
    inset -18px -22px 50px oklch(20% 0.10 158 / .35),
    inset 12px 14px 30px oklch(98% 0.05 158 / .25),
    0 30px 60px -20px oklch(28% 0.10 158 / .35);
  overflow: hidden;
  color: oklch(96% 0.08 158);
  animation: globe-spin 40s linear infinite;
}

@keyframes globe-spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* counter-rotate the children so chips/pins stay upright */
.globe__sphere > * { animation: globe-counter 40s linear infinite; }
@keyframes globe-counter {
  from { transform: rotate(0deg); }
  to   { transform: rotate(-360deg); }
}

.globe__highlight {
  position: absolute;
  top: 8%; left: 14%;
  width: 38%; height: 30%;
  border-radius: 50%;
  background: radial-gradient(ellipse, oklch(99% 0.04 158 / .55) 0%, transparent 65%);
  pointer-events: none;
  animation: none !important;
}

.globe__lines {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  color: oklch(98% 0.05 158);
  pointer-events: none;
  animation: none !important;
}

.globe__land {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  color: oklch(38% 0.10 158);
  pointer-events: none;
  animation: none !important;
}

/* hub pins on the globe */
.globe-pin {
  position: absolute;
  width: 0; height: 0;
  animation: pin-pop .6s cubic-bezier(.2,.8,.2,1) backwards;
}
@keyframes pin-pop {
  from { opacity: 0; transform: scale(.4); }
  to   { opacity: 1; transform: scale(1); }
}
.globe-pin__dot {
  position: absolute;
  left: -5px; top: -5px;
  width: 10px; height: 10px;
  border-radius: 50%;
  background: var(--paper);
  border: 2px solid var(--amber-deep);
  box-shadow: 0 0 0 2px oklch(28% 0.10 158 / .4);
  z-index: 2;
}
.globe-pin__ping {
  position: absolute;
  left: -10px; top: -10px;
  width: 20px; height: 20px;
  border-radius: 50%;
  background: var(--paper);
  opacity: .5;
  animation: pin-ping 2.4s ease-out infinite;
}
@keyframes pin-ping {
  0%   { transform: scale(.4); opacity: .7; }
  80%  { transform: scale(2.2); opacity: 0; }
  100% { transform: scale(2.2); opacity: 0; }
}
.globe-pin__label {
  position: absolute;
  left: 12px; top: -10px;
  font-family: var(--mono);
  font-size: .62rem;
  letter-spacing: .12em;
  color: var(--paper);
  background: var(--amber-deep);
  padding: 2px 6px;
  border-radius: 4px;
  white-space: nowrap;
  z-index: 3;
}

/* orbit rings (decorative, behind globe) */
.globe-orbit {
  position: absolute;
  border-radius: 50%;
  border: 1px dashed oklch(70% 0.08 158 / .55);
  pointer-events: none;
}
.globe-orbit--1 {
  inset: -36px;
  animation: orbit-rot 28s linear infinite;
}
.globe-orbit--2 {
  inset: -72px;
  border-color: oklch(75% 0.05 158 / .35);
  animation: orbit-rot 60s linear infinite reverse;
}
.globe-orbit--1::after {
  content: "";
  position: absolute;
  width: 14px; height: 14px;
  border-radius: 50%;
  background: var(--amber);
  top: -7px; left: 50%;
  transform: translateX(-50%);
  box-shadow: 0 0 0 4px var(--paper);
}
.globe-orbit--2::after {
  content: "";
  position: absolute;
  width: 10px; height: 10px;
  border-radius: 50%;
  background: var(--amber-deep);
  bottom: -5px; left: 30%;
  box-shadow: 0 0 0 3px var(--paper);
}
@keyframes orbit-rot {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* role chips floating around the globe */
.globe-chip {
  position: absolute;
  transform: translate(-50%, -50%);
  background: var(--paper);
  border: 1px solid var(--fog);
  border-radius: 999px;
  padding: 8px 14px 8px 11px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  box-shadow: var(--shadow-md);
  white-space: nowrap;
  font-size: .72rem;
  z-index: 5;
  animation-fill-mode: backwards;
  transition: transform .25s cubic-bezier(.2,.8,.2,1), box-shadow .25s;
  /* crisp text rendering during transforms */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: geometricPrecision;
  backface-visibility: hidden;
  transform-style: preserve-3d;
  will-change: transform;
}
.globe-chip:hover {
  transform: translate(-50%, -50%) translateY(-3px);
  box-shadow: var(--shadow-lg);
}
.globe-chip__dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  flex: none;
}
.globe-chip--amber .globe-chip__dot { background: var(--amber); }
.globe-chip--deep  .globe-chip__dot { background: var(--amber-deep); }
.globe-chip__t {
  font-weight: 500;
  font-size: .78rem;
  color: var(--ink);
  line-height: 1.25;
}
.globe-chip__n {
  font-family: var(--mono);
  font-size: .62rem;
  color: var(--ink-3);
  letter-spacing: .04em;
  margin-top: 2px;
  line-height: 1.2;
}

/* gentle float for chips (staggered via animation-delay) */
.globe-chip:nth-child(odd)  { animation: chip-float 7s ease-in-out infinite; }
.globe-chip:nth-child(even) { animation: chip-float 9s ease-in-out infinite reverse; }
@keyframes chip-float {
  0%, 100% { transform: translate(-50%, -50%) translateY(0); }
  50%      { transform: translate(-50%, -50%) translateY(-6px); }
}

/* caption under the globe */
.globe-caption {
  position: absolute;
  bottom: -8px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 14px;
  background: var(--paper);
  border: 1px solid var(--fog);
  border-radius: 999px;
  padding: 12px 22px 12px 14px;
  box-shadow: var(--shadow-md);
  z-index: 6;
}
.globe-caption__num {
  display: inline-flex;
  align-items: center; justify-content: center;
  width: 38px; height: 38px;
  border-radius: 50%;
  background: var(--amber-deep);
  color: var(--paper);
  font-weight: 600;
  font-size: .95rem;
}
.globe-caption__t {
  font-weight: 500;
  font-size: .92rem;
  line-height: 1.2;
}
.globe-caption__n {
  font-family: var(--mono);
  font-size: .7rem;
  color: var(--ink-3);
  letter-spacing: .04em;
  margin-top: 2px;
}

/* responsive: shrink on narrow viewports */
@media (max-width: 1100px) {
  .globe-wrap { height: 420px; }
  .globe { width: 240px; height: 240px; }
  .globe-chip { font-size: .8rem; padding: 8px 14px 8px 10px; }
  .globe-chip__t { font-size: .82rem; }
  .globe-chip__n { font-size: .62rem; }
}
@media (max-width: 720px) {
  .globe-wrap { height: 380px; }
  .globe { width: 200px; height: 200px; }
}


/* trending badge floating above the chip */
.globe-chip--trending {
  border-color: var(--amber);
  box-shadow: 0 0 0 3px var(--amber-soft), var(--shadow-md);
}
.globe-chip__badge {
  position: absolute;
  top: -16px;
  right: 8px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 9px 4px 7px;
  background: var(--amber);
  color: var(--paper);
  border-radius: 999px;
  font-family: var(--mono);
  font-size: .66rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  box-shadow: 0 4px 10px -2px oklch(28% 0.10 158 / .4);
  white-space: nowrap;
  z-index: 2;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: geometricPrecision;
  backface-visibility: hidden;
  /* lift to its own compositing layer so the chip's float transform doesn't smear it */
  transform: translateZ(0);
  isolation: isolate;
}
.globe-chip__badge svg { width: 11px; height: 11px; flex: none; }
.globe-chip__badge svg {
  filter: drop-shadow(0 0 2px oklch(98% 0.05 60 / .5));
  animation: badge-sparkle 2.4s ease-in-out infinite;
}
@keyframes badge-sparkle {
  0%, 100% { transform: rotate(0deg) scale(1); }
  50%      { transform: rotate(15deg) scale(1.18); }
}