/* ============================================================
   STRAINOLOGY  -  v0.3  "Modern Botanical Almanac"
   Editorial-meets-product: warm paper, deep botanical green,
   terracotta accent, cannabis line-art, geile Animationen.
   ============================================================ */

/* ============ 1. Tokens ============ */
:root {
  /* Tinten / Erde / Papier */
  --ink:           #1A2419;
  --ink-soft:      #2A352B;
  --ink-mute:      #4D5A4E;
  --paper:         #F4EDDC;
  --paper-soft:    #ECE3CC;
  --paper-warm:    #F1E6CA;
  --paper-deep:    #E0D5B8;
  --hairline:      #C2B697;
  --hairline-soft: #D6CAA8;

  /* Akzente */
  --sage:          #5D7A60;
  --sage-deep:     #3E5640;
  --sage-glow:     #88A88B;
  --terra:         #B05028;
  --terra-deep:    #893B1C;
  --terra-light:   #D78258;
  --gilt:          #C2A268;
  --seed-light:    #C48A55;
  --seed-mid:      #7B4A28;
  --seed-dark:     #3D2516;

  /* Semantik */
  --bg:        var(--paper);
  --bg-alt:    var(--paper-soft);
  --bg-warm:   var(--paper-warm);
  --bg-deep:   var(--ink);
  --fg:        var(--ink);
  --fg-soft:   var(--ink-soft);
  --fg-mute:   var(--ink-mute);
  --rule:      var(--hairline);
  --rule-soft: var(--hairline-soft);
  --accent:    var(--terra);
  --accent-2:  var(--sage);

  /* Typografie */
  --f-display: 'Fraunces', 'Hoefler Text', Georgia, serif;
  --f-body:    'Newsreader', 'Iowan Old Style', 'Charter', Georgia, serif;
  --f-sans:    'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --f-mono:    'JetBrains Mono', 'IBM Plex Mono', ui-monospace, Menlo, Consolas, monospace;

  /* Skala */
  --fs-xs:   .75rem;
  --fs-sm:   .875rem;
  --fs-base: 1.0625rem;
  --fs-md:   1.1875rem;
  --fs-lg:   1.375rem;
  --fs-xl:   1.75rem;
  --fs-2xl:  2.25rem;
  --fs-3xl:  3rem;
  --fs-4xl:  clamp(2.75rem, 5vw + 1rem, 5.25rem);
  --fs-5xl:  clamp(3.5rem, 8vw + 1rem, 8rem);
  --fs-6xl:  clamp(4rem, 12vw + 1rem, 12rem);

  /* Spacing */
  --sp-1: .25rem; --sp-2: .5rem;  --sp-3: .75rem; --sp-4: 1rem;
  --sp-5: 1.5rem; --sp-6: 2.25rem; --sp-7: 3.5rem; --sp-8: 5rem;
  --sp-9: 7rem;   --sp-10: 10rem;  --sp-11: 14rem;

  /* Layout */
  --measure:   38rem;
  --container: 80rem;
  --rail:      14rem;

  /* Schatten / Tiefe */
  --shadow-1: 0 1px 2px rgba(26,36,25,.04), 0 4px 12px rgba(26,36,25,.06);
  --shadow-2: 0 4px 16px rgba(26,36,25,.06), 0 16px 40px rgba(26,36,25,.08);
  --shadow-3: 0 8px 28px rgba(26,36,25,.1),  0 32px 80px rgba(26,36,25,.12);
  --shadow-glow: 0 0 0 1px rgba(176,80,40,.2), 0 8px 32px rgba(176,80,40,.15);

  /* Radien */
  --r-sm: 4px;
  --r:    10px;
  --r-lg: 18px;
  --r-xl: 28px;
  --r-pill: 999px;

  /* Easing */
  --ease-soft:    cubic-bezier(.2, .65, .25, 1);
  --ease-pop:     cubic-bezier(.34, 1.56, .64, 1);
  --ease-out:     cubic-bezier(.16, 1, .3, 1);

  color-scheme: light;
}

html[data-theme="dark"] {
  --bg:        #131815;
  --bg-alt:    #1A1F1B;
  --bg-warm:   #1F261F;
  --bg-deep:   #0E120F;
  --fg:        #ECE4D1;
  --fg-soft:   #C9C0A8;
  --fg-mute:   #8A8472;
  --rule:      #2E342E;
  --rule-soft: #232723;
  --paper:     #131815;
  --paper-soft:#1A1F1B;
  --paper-warm:#1F261F;
  --paper-deep:#0E120F;
  --sage:      #88A88B;
  --terra:     #D78258;
  --gilt:      #D4B888;
  --hairline:  #353B35;
  --shadow-1: 0 1px 2px rgba(0,0,0,.4), 0 4px 12px rgba(0,0,0,.3);
  --shadow-2: 0 4px 16px rgba(0,0,0,.4), 0 16px 40px rgba(0,0,0,.3);
  --shadow-3: 0 8px 28px rgba(0,0,0,.5), 0 32px 80px rgba(0,0,0,.4);
  color-scheme: dark;
}

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

html {
  -webkit-text-size-adjust: 100%;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: 'kern','liga','calt','onum','ss01';
  scroll-behavior: smooth;
}

body {
  font-family: var(--f-body);
  font-size: var(--fs-base);
  line-height: 1.6;
  color: var(--fg);
  background: var(--bg);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  overflow-x: hidden;
  font-variation-settings: 'opsz' 16;
}

/* Animierter Gradient-Mesh-Hintergrund am Body */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -2;
  background:
    radial-gradient(60vw 50vh at 10% 0%,  color-mix(in oklab, var(--sage)  18%, transparent), transparent 60%),
    radial-gradient(50vw 40vh at 95% 15%, color-mix(in oklab, var(--terra) 14%, transparent), transparent 65%),
    radial-gradient(40vw 35vh at 70% 90%, color-mix(in oklab, var(--gilt)  10%, transparent), transparent 60%);
  animation: meshShift 28s ease-in-out infinite alternate;
}
@keyframes meshShift {
  0%   { transform: translate3d(0, 0, 0)     scale(1);    }
  50%  { transform: translate3d(-2%, 1%, 0)  scale(1.05); }
  100% { transform: translate3d(2%, -1%, 0)  scale(1.02); }
}

/* Papier-Noise-Textur */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: .5;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .1  0 0 0 0 .12  0 0 0 0 .08  0 0 0 .04 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}
html[data-theme="dark"] body::after {
  opacity: .4;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .95  0 0 0 0 .9  0 0 0 0 .75  0 0 0 .04 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}

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

a {
  color: var(--fg);
  text-decoration: underline;
  text-decoration-color: color-mix(in oklab, var(--terra) 50%, transparent);
  text-decoration-thickness: 1px;
  text-underline-offset: .22em;
  transition: color .25s var(--ease-soft), text-decoration-color .25s var(--ease-soft);
}
a:hover { color: var(--terra); text-decoration-color: var(--terra); }

::selection { background: color-mix(in oklab, var(--terra) 32%, transparent); color: var(--fg); }

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

/* ============ 3. Typografie ============ */
h1, h2, h3, h4, h5 {
  font-family: var(--f-display);
  font-weight: 380;
  line-height: 1.05;
  letter-spacing: -.018em;
  color: var(--fg);
  font-variation-settings: 'opsz' 144, 'SOFT' 30;
  text-wrap: balance;
}
h1 { font-size: var(--fs-4xl); font-variation-settings: 'opsz' 144, 'SOFT' 0;  font-weight: 340; }
h2 { font-size: var(--fs-3xl); font-variation-settings: 'opsz' 100, 'SOFT' 30; font-weight: 380; }
h3 { font-size: var(--fs-2xl); font-variation-settings: 'opsz' 60,  'SOFT' 50; font-weight: 400; }
h4 { font-size: var(--fs-xl);  font-variation-settings: 'opsz' 36,  'SOFT' 50; font-weight: 420; }
h5 { font-size: var(--fs-md);  font-style: italic; font-variation-settings: 'opsz' 28, 'SOFT' 80; font-weight: 380; }

p { font-variation-settings: 'opsz' 16; color: var(--fg-soft); text-wrap: pretty; }
p + p { margin-top: var(--sp-3); }

em, i { font-style: italic; font-variation-settings: 'opsz' 16, 'SOFT' 100; }
strong { font-weight: 600; color: var(--fg); }

.lead {
  font-size: var(--fs-lg);
  line-height: 1.45;
  color: var(--fg);
  max-width: var(--measure);
  font-variation-settings: 'opsz' 24, 'SOFT' 0;
}

.lat { font-style: italic; font-variation-settings: 'opsz' 16, 'SOFT' 100; color: var(--fg-mute); }
.smallcaps { font-variant: small-caps; font-feature-settings: 'smcp', 'c2sc'; letter-spacing: .12em; font-weight: 500; }
.mono { font-family: var(--f-mono); font-feature-settings: 'tnum'; }
.muted { color: var(--fg-mute); }
.text-accent { color: var(--terra); }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .8em;
  font-family: var(--f-mono);
  font-size: var(--fs-xs);
  font-weight: 500;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--fg-mute);
}
.eyebrow::before {
  content: '';
  width: 22px;
  height: 1px;
  background: currentColor;
  opacity: .5;
}

/* Drop-Cap (animated) */
.dropcap::first-letter {
  font-family: var(--f-display);
  font-variation-settings: 'opsz' 144, 'SOFT' 100;
  font-weight: 380;
  font-style: italic;
  font-size: 5em;
  line-height: .82;
  float: left;
  padding: .08em .15em 0 0;
  color: var(--terra);
  text-shadow: 2px 2px 0 var(--paper-deep);
}

/* ============ 4. Layout ============ */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--sp-5);
}
@media (min-width: 760px)  { .container { padding-inline: var(--sp-6); } }
@media (min-width: 1100px) { .container { padding-inline: var(--sp-7); } }
.measure { max-width: var(--measure); }

section { padding-block: var(--sp-8); position: relative; }
@media (min-width: 760px) { section { padding-block: var(--sp-9); } }

.spread {
  display: grid; gap: var(--sp-6);
  grid-template-columns: 1fr;
}
@media (min-width: 1100px) {
  .spread { grid-template-columns: var(--rail) 1fr; gap: var(--sp-8); }
}
.spread > .rail { color: var(--fg-mute); font-size: var(--fs-sm); }

.stack > * + * { margin-top: var(--sp-4); }
.stack-lg > * + * { margin-top: var(--sp-6); }

/* Alternierende Section-Hintergründe */
.section-alt   { background: color-mix(in oklab, var(--paper-soft) 70%, var(--bg)); }
.section-warm  { background: linear-gradient(180deg, var(--paper-warm) 0%, var(--paper) 100%); }
.section-deep  { background: var(--ink); color: var(--paper); }
.section-deep h1, .section-deep h2, .section-deep h3, .section-deep h4 { color: var(--paper); }
.section-deep p, .section-deep .lead { color: color-mix(in oklab, var(--paper) 75%, transparent); }
.section-deep .eyebrow { color: var(--gilt); }
.section-deep a { color: var(--terra-light); }
.section-deep .rule { background: color-mix(in oklab, var(--paper) 20%, transparent); }

/* ============ 5. Rules & Markers ============ */
hr, .rule {
  border: 0; height: 1px;
  background: var(--rule);
  margin-block: var(--sp-6);
}
.rule-double {
  border: 0; height: 4px;
  background:
    linear-gradient(to bottom, var(--rule) 0, var(--rule) 1px,
                               transparent 1px, transparent 3px,
                               var(--rule) 3px, var(--rule) 4px);
  margin-block: var(--sp-6);
}
.leaf-divider {
  display: block;
  margin: var(--sp-7) auto;
  width: min(28rem, 70vw);
  color: var(--gilt);
  opacity: .85;
}

.section-marker {
  display: flex; align-items: baseline; gap: var(--sp-3);
  margin-bottom: var(--sp-5);
}
.section-marker .nr {
  font-family: var(--f-display); font-style: italic;
  font-variation-settings: 'opsz' 60, 'SOFT' 100;
  color: var(--gilt); font-size: var(--fs-xl); font-weight: 380;
}
.section-marker .label {
  font-family: var(--f-mono); font-size: var(--fs-xs);
  letter-spacing: .22em; text-transform: uppercase; color: var(--fg-mute);
}
.section-marker .label::before { content: '/'; margin-right: .5em; color: var(--rule); }

/* ============ 6. Header ============ */
.site-header {
  position: sticky; top: 0; z-index: 30;
  background: color-mix(in oklab, var(--bg) 88%, transparent);
  backdrop-filter: saturate(140%) blur(10px);
  -webkit-backdrop-filter: saturate(140%) blur(10px);
  border-bottom: 1px solid color-mix(in oklab, var(--rule) 60%, transparent);
  transition: padding .25s var(--ease-soft);
}
.site-header.is-scrolled { box-shadow: var(--shadow-1); }
.site-header .container {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: var(--sp-4);
  padding-block: 1.05rem;
  transition: padding-block .25s var(--ease-soft);
}
.site-header.is-scrolled .container { padding-block: .75rem; }

@media (max-width: 760px) {
  .site-header .container { grid-template-columns: 1fr auto; }
}

.brand {
  display: inline-flex; align-items: baseline; gap: .55rem;
  font-family: var(--f-display);
  font-variation-settings: 'opsz' 144, 'SOFT' 60;
  font-size: 1.45rem;
  font-style: italic; font-weight: 380;
  color: var(--fg); text-decoration: none;
  letter-spacing: -.015em;
  white-space: nowrap;
  justify-self: start;
}
.brand:hover { color: var(--terra); }
.brand .brand-mark {
  width: 2.1em; height: 2.1em;
  vertical-align: -.55em;
  display: inline-block;
  color: var(--ink);
  transition: transform .6s var(--ease-soft);
  object-fit: contain;
  border-radius: 6px;
}
.brand:hover .brand-mark { transform: rotate(-3deg) scale(1.08); }
.brand .est {
  font-family: var(--f-mono); font-size: var(--fs-xs); font-style: normal;
  letter-spacing: .2em; text-transform: uppercase; color: var(--fg-mute);
}

.nav {
  display: none;
  align-items: baseline; gap: var(--sp-5);
  font-family: var(--f-body); font-size: var(--fs-sm);
  font-variation-settings: 'opsz' 14; justify-self: center;
}
@media (min-width: 760px) { .nav { display: inline-flex; } }
.nav a {
  color: var(--fg-soft); text-decoration: none;
  position: relative; padding-block: .15em; letter-spacing: .02em;
  transition: color .25s var(--ease-soft);
}
.nav a:hover { color: var(--fg); }
.nav a.is-active { color: var(--fg); }
.nav a.is-active::after {
  content: ''; position: absolute; left: 50%; bottom: -.35em;
  width: 5px; height: 5px; margin-left: -2.5px;
  background: var(--terra); border-radius: 50%;
  animation: pulse 2.5s ease-in-out infinite;
}

/* Live-Count-Badge in Navigation */
.nav-count {
  display: inline-flex;
  align-items: center;
  gap: .35em;
  margin-left: .5em;
  padding: .15em .55em;
  font-family: var(--f-mono);
  font-size: .7rem;
  letter-spacing: .04em;
  font-weight: 500;
  background: color-mix(in oklab, var(--sage) 12%, transparent);
  color: var(--sage-deep, var(--sage));
  border: 1px solid color-mix(in oklab, var(--sage) 25%, transparent);
  border-radius: var(--r-pill);
  vertical-align: 1px;
  transition: background .25s var(--ease-soft), border-color .25s var(--ease-soft);
}
.nav-count-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--sage);
  box-shadow: 0 0 0 0 color-mix(in oklab, var(--sage) 60%, transparent);
  animation: livePulse 2.4s infinite;
}
.nav a:hover .nav-count {
  background: color-mix(in oklab, var(--sage) 22%, transparent);
  border-color: color-mix(in oklab, var(--sage) 45%, transparent);
}
html[data-theme="dark"] .nav-count {
  background: rgba(136,168,139,.15);
  color: var(--sage);
  border-color: rgba(136,168,139,.3);
}
@keyframes pulse {
  0%, 100% { transform: scale(1);   opacity: 1; }
  50%      { transform: scale(1.6); opacity: .5; }
}

.header-actions { display: flex; align-items: center; gap: var(--sp-3); justify-self: end; }
.theme-toggle {
  width: 36px; height: 36px;
  background: transparent;
  border: 1px solid var(--rule); border-radius: 50%;
  color: var(--fg-soft); cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  transition: all .25s var(--ease-soft);
}
.theme-toggle:hover {
  color: var(--terra); border-color: var(--terra);
  transform: rotate(15deg);
}
.theme-toggle svg { width: 16px; height: 16px; transition: transform .4s var(--ease-soft); }
.theme-toggle .icon-sun { display: none; }
html[data-theme="dark"] .theme-toggle .icon-sun { display: block; }
html[data-theme="dark"] .theme-toggle .icon-moon { display: none; }

/* ============ 7. Hero ============ */
.hero {
  position: relative;
  padding-block: var(--sp-9) var(--sp-8);
  overflow: hidden;
  isolation: isolate;
}
@media (min-width: 760px) { .hero { padding-block: var(--sp-10) var(--sp-9); } }

.hero-bg-glow {
  position: absolute;
  inset: -10% -10% auto auto;
  width: 50vw; height: 50vw;
  z-index: -1;
  background:
    radial-gradient(circle at 50% 50%, color-mix(in oklab, var(--sage) 25%, transparent), transparent 60%);
  filter: blur(40px);
  animation: floatGlow 14s ease-in-out infinite alternate;
}
@keyframes floatGlow {
  0%   { transform: translate(0, 0)     scale(1);   }
  100% { transform: translate(-5%, 5%)  scale(1.1); }
}

/* Trichom-Partikel - schweben */
.trichomes {
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  overflow: hidden;
}
.trichomes span {
  position: absolute; display: block;
  width: 6px; height: 6px;
  background: radial-gradient(circle at 30% 30%, #fff, var(--gilt) 60%, transparent 70%);
  border-radius: 50%;
  opacity: .35;
  animation: float linear infinite;
}
.trichomes span:nth-child(1)  { left: 12%; top: 80%; width: 8px; height: 8px; animation-duration: 22s; animation-delay: 0s;   }
.trichomes span:nth-child(2)  { left: 28%; top: 90%; width: 5px; height: 5px; animation-duration: 26s; animation-delay: -4s;  }
.trichomes span:nth-child(3)  { left: 45%; top: 95%; width: 7px; height: 7px; animation-duration: 30s; animation-delay: -8s;  }
.trichomes span:nth-child(4)  { left: 62%; top: 85%; width: 6px; height: 6px; animation-duration: 24s; animation-delay: -12s; }
.trichomes span:nth-child(5)  { left: 78%; top: 92%; width: 9px; height: 9px; animation-duration: 28s; animation-delay: -2s;  }
.trichomes span:nth-child(6)  { left: 90%; top: 88%; width: 5px; height: 5px; animation-duration: 32s; animation-delay: -6s;  }
.trichomes span:nth-child(7)  { left: 7%;  top: 60%; width: 4px; height: 4px; animation-duration: 36s; animation-delay: -16s; }
.trichomes span:nth-child(8)  { left: 95%; top: 55%; width: 6px; height: 6px; animation-duration: 30s; animation-delay: -10s; }
@keyframes float {
  0%   { transform: translateY(0) translateX(0); opacity: 0; }
  10%  { opacity: .4; }
  90%  { opacity: .4; }
  100% { transform: translateY(-110vh) translateX(10px); opacity: 0; }
}

.hero-spread {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-7);
  align-items: center;
  position: relative;
}
@media (min-width: 920px) {
  .hero-spread { grid-template-columns: 1.4fr 1fr; gap: var(--sp-8); }
}

.hero-eyebrow {
  font-family: var(--f-mono);
  font-size: var(--fs-xs);
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--fg-mute);
  display: inline-flex;
  align-items: center;
  gap: .8em;
  padding: .4em .9em;
  background: color-mix(in oklab, var(--paper-warm) 60%, transparent);
  border: 1px solid var(--rule);
  border-radius: var(--r-pill);
}
.hero-eyebrow .live-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--terra);
  box-shadow: 0 0 0 0 color-mix(in oklab, var(--terra) 60%, transparent);
  animation: livePulse 2s infinite;
}
@keyframes livePulse {
  0%   { box-shadow: 0 0 0 0   color-mix(in oklab, var(--terra) 60%, transparent); }
  70%  { box-shadow: 0 0 0 10px color-mix(in oklab, var(--terra) 0%,  transparent); }
  100% { box-shadow: 0 0 0 0   color-mix(in oklab, var(--terra) 0%,  transparent); }
}

.hero-title {
  font-family: var(--f-display);
  font-size: var(--fs-5xl);
  line-height: .92;
  font-weight: 340;
  font-variation-settings: 'opsz' 144, 'SOFT' 0;
  letter-spacing: -.038em;
  color: var(--fg);
  margin-top: var(--sp-4);
}
.hero-title em {
  font-style: italic;
  font-variation-settings: 'opsz' 144, 'SOFT' 100;
  background: linear-gradient(135deg, var(--terra) 0%, var(--gilt) 60%, var(--sage) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  font-weight: 360;
  background-size: 200% 200%;
  animation: gradientShift 8s ease-in-out infinite;
}
@keyframes gradientShift {
  0%, 100% { background-position: 0% 50%; }
  50%      { background-position: 100% 50%; }
}

.hero-lat {
  font-family: var(--f-display);
  font-style: italic;
  font-variation-settings: 'opsz' 36, 'SOFT' 100;
  color: var(--fg-mute);
  font-size: var(--fs-lg);
  margin-top: var(--sp-5);
  letter-spacing: .01em;
}

.hero-lead {
  font-family: var(--f-body);
  font-variation-settings: 'opsz' 20;
  font-size: var(--fs-md);
  line-height: 1.5;
  color: var(--fg-soft);
  max-width: 34em;
  margin-top: var(--sp-5);
}

.hero-actions {
  margin-top: var(--sp-6);
  display: flex; flex-wrap: wrap; gap: var(--sp-4);
  align-items: center;
}

/* Plate auf der rechten Seite */
.hero-plate {
  position: relative;
  align-self: stretch;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.hero-plate-frame {
  position: relative;
  border: 1px solid var(--rule);
  padding: var(--sp-5);
  background:
    linear-gradient(180deg, color-mix(in oklab, var(--paper-warm) 70%, transparent) 0%, transparent 100%);
  transition: transform .6s var(--ease-soft);
}
.hero-plate:hover .hero-plate-frame { transform: rotate(-1deg) scale(1.02); }

.hero-plate-frame::before,
.hero-plate-frame::after,
.hero-plate-frame .corner-tr,
.hero-plate-frame .corner-bl {
  content: ''; position: absolute;
  width: 12px; height: 12px;
  border: 1px solid var(--rule);
}
.hero-plate-frame::before  { top: -6px;    left: -6px;   border-right: 0; border-bottom: 0; }
.hero-plate-frame::after   { bottom: -6px; right: -6px;  border-left: 0;  border-top: 0;    }
.hero-plate-frame .corner-tr { top: -6px;    right: -6px;  border-left: 0;  border-bottom: 0; }
.hero-plate-frame .corner-bl { bottom: -6px; left: -6px;   border-right: 0; border-top: 0;    }

.hero-plate-caption {
  margin-top: var(--sp-3);
  font-family: var(--f-display);
  font-style: italic;
  font-variation-settings: 'opsz' 24, 'SOFT' 100;
  color: var(--fg-mute);
  font-size: var(--fs-sm);
  text-align: center;
  letter-spacing: .02em;
}
.hero-plate-no {
  font-family: var(--f-mono);
  font-size: var(--fs-xs);
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--gilt);
  text-align: center;
  margin-bottom: var(--sp-2);
}

.cannabis-plate {
  width: 100%; height: auto;
  color: var(--ink);
  opacity: .9;
}
html[data-theme="dark"] .cannabis-plate { color: var(--paper); opacity: .85; }

/* SVG-draw-in Animation */
.cannabis-plate g path,
.cannabis-plate g circle,
.cannabis-plate g ellipse,
.cannabis-plate g line {
  stroke-dasharray: 800;
  stroke-dashoffset: 800;
  animation: drawIn 2.5s var(--ease-soft) forwards;
}
.cannabis-plate g path:nth-child(2n) { animation-delay: .1s; }
.cannabis-plate g path:nth-child(3n) { animation-delay: .25s; }
.cannabis-plate g g                  { animation-delay: .4s; }
@keyframes drawIn {
  to { stroke-dashoffset: 0; }
}

/* ============ 8. Buttons + CTAs ============ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5em;
  padding: .9em 1.6em;
  font-family: var(--f-body);
  font-size: var(--fs-base);
  font-weight: 500;
  border: 1px solid transparent;
  border-radius: var(--r-pill);
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  letter-spacing: -.005em;
  transition: all .3s var(--ease-soft);
  position: relative;
  overflow: hidden;
}

.btn-primary {
  background: var(--ink);
  color: var(--paper);
  box-shadow: var(--shadow-2);
}
.btn-primary::before {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(135deg, var(--terra), var(--gilt));
  opacity: 0;
  transition: opacity .35s var(--ease-soft);
  z-index: 0;
}
.btn-primary > * { position: relative; z-index: 1; }
.btn-primary:hover {
  color: #fff;
  text-decoration: none;
  transform: translateY(-2px);
  box-shadow: var(--shadow-3);
}
.btn-primary:hover::before { opacity: 1; }

.btn-ghost {
  background: transparent;
  color: var(--fg);
  border-color: var(--ink);
}
.btn-ghost:hover {
  background: var(--ink);
  color: var(--paper);
  text-decoration: none;
  transform: translateY(-2px);
}

/* CTA als typografischer Link */
.cta-link {
  font-family: var(--f-display);
  font-style: italic;
  font-variation-settings: 'opsz' 36, 'SOFT' 80;
  font-size: var(--fs-lg);
  color: var(--fg);
  text-decoration: none;
  border-bottom: 1px solid var(--fg);
  padding-bottom: .15em;
  letter-spacing: -.005em;
  transition: color .25s var(--ease-soft), border-color .25s var(--ease-soft), letter-spacing .25s var(--ease-soft);
  display: inline-block;
}
.cta-link::after { content: '\00a0→'; display: inline-block; transition: transform .25s var(--ease-soft); }
.cta-link:hover  { color: var(--terra); border-color: var(--terra); letter-spacing: 0; }
.cta-link:hover::after { transform: translateX(.3em); }

.cta-link.is-quiet {
  color: var(--fg-mute);
  border-color: var(--rule);
  font-size: var(--fs-md);
}
.cta-link.is-quiet:hover { color: var(--fg); border-color: var(--fg); }

/* ============ 9. Stats-Bar ============ */
.stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
  gap: 0;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}
.stat {
  padding: var(--sp-6) var(--sp-5);
  border-right: 1px solid var(--rule);
  display: flex; flex-direction: column;
  gap: .35rem;
  position: relative;
  overflow: hidden;
}
.stat:last-child { border-right: 0; }
.stat .stat-num {
  font-family: var(--f-display);
  font-size: var(--fs-4xl);
  font-weight: 340;
  line-height: 1;
  font-variation-settings: 'opsz' 144, 'SOFT' 0;
  letter-spacing: -.03em;
  color: var(--ink);
  font-feature-settings: 'tnum';
}
.stat .stat-num .accent { color: var(--terra); }
.stat .stat-label {
  font-family: var(--f-mono); font-size: var(--fs-xs);
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--fg-mute);
}
.stat .stat-sub { font-size: var(--fs-sm); color: var(--fg-soft); margin-top: .3rem; }
html[data-theme="dark"] .stat .stat-num { color: var(--paper); }

/* ============ 10. Features-Grid (modular) ============ */
.feature-grid {
  display: grid;
  gap: var(--sp-5);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
}
.feature-card {
  position: relative;
  padding: var(--sp-6);
  background: var(--bg);
  border: 1px solid var(--rule);
  border-radius: var(--r-lg);
  transition: transform .35s var(--ease-soft), box-shadow .35s var(--ease-soft), border-color .35s var(--ease-soft);
  overflow: hidden;
  display: flex; flex-direction: column;
  gap: var(--sp-3);
}
.feature-card::before {
  content: '';
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(135deg, color-mix(in oklab, var(--terra) 8%, transparent), transparent 50%);
  opacity: 0;
  transition: opacity .4s var(--ease-soft);
}
.feature-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-2);
  border-color: color-mix(in oklab, var(--terra) 30%, var(--rule));
}
.feature-card:hover::before { opacity: 1; }

.feature-icon {
  width: 48px; height: 48px;
  color: var(--terra);
  transition: transform .5s var(--ease-pop);
}
.feature-card:hover .feature-icon { transform: rotate(-8deg) scale(1.1); }

.feature-card h3 {
  font-size: var(--fs-xl);
  font-variation-settings: 'opsz' 36, 'SOFT' 50;
}
.feature-card p { font-size: var(--fs-sm); }

.feature-card .feature-tag {
  position: absolute;
  top: var(--sp-4); right: var(--sp-4);
  font-family: var(--f-mono); font-size: 10px;
  letter-spacing: .15em; text-transform: uppercase;
  color: var(--gilt);
  padding: .25em .55em;
  border: 1px solid color-mix(in oklab, var(--gilt) 50%, var(--rule));
  border-radius: var(--r-pill);
}

/* ============ 11. Step-Process ============ */
.steps {
  display: grid;
  gap: var(--sp-6);
  grid-template-columns: 1fr;
  counter-reset: step;
}
@media (min-width: 820px) {
  .steps { grid-template-columns: repeat(3, 1fr); gap: var(--sp-5); position: relative; }
  .steps::before {
    content: '';
    position: absolute;
    top: 2.6rem; left: 8%; right: 8%;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--rule), transparent);
  }
}
.step {
  position: relative;
  padding: var(--sp-5) var(--sp-4) 0;
  counter-increment: step;
  text-align: center;
}
.step::before {
  content: counter(step, decimal-leading-zero);
  display: inline-flex; align-items: center; justify-content: center;
  width: 4rem; height: 4rem;
  margin: 0 auto var(--sp-4);
  background: var(--bg);
  border: 1px solid var(--rule);
  border-radius: 50%;
  font-family: var(--f-display);
  font-style: italic;
  font-variation-settings: 'opsz' 60, 'SOFT' 100;
  font-size: var(--fs-xl);
  color: var(--terra);
  position: relative;
  z-index: 1;
  transition: all .35s var(--ease-soft);
}
.step:hover::before {
  background: var(--terra);
  color: var(--paper);
  border-color: var(--terra);
  transform: scale(1.1);
}
.step h4 { margin-bottom: var(--sp-2); }
.step p { font-size: var(--fs-sm); }

/* ============ 12. Sorten-Finder ============ */
.finder {
  background: linear-gradient(135deg, color-mix(in oklab, var(--sage) 18%, var(--paper-warm)) 0%, var(--paper-warm) 100%);
  border: 1px solid var(--rule);
  border-radius: var(--r-xl);
  padding: var(--sp-7) var(--sp-5);
  position: relative;
  overflow: hidden;
  box-shadow: var(--shadow-2);
}
@media (min-width: 760px) { .finder { padding: var(--sp-8) var(--sp-7); } }

html[data-theme="dark"] .finder {
  background: linear-gradient(135deg, color-mix(in oklab, var(--sage-deep) 30%, var(--paper-warm)) 0%, var(--paper-warm) 100%);
}

.finder::before {
  content: '';
  position: absolute;
  top: -50%; right: -10%;
  width: 50%; height: 200%;
  background: radial-gradient(ellipse at center, color-mix(in oklab, var(--gilt) 25%, transparent), transparent 60%);
  pointer-events: none;
  animation: floatGlow 18s ease-in-out infinite alternate;
}

.finder-form {
  position: relative; z-index: 1;
  display: grid;
  gap: var(--sp-5);
}
.finder-row {
  display: grid;
  gap: var(--sp-4);
  grid-template-columns: 1fr;
}
@media (min-width: 720px) {
  .finder-row.cols-2 { grid-template-columns: 1fr 1fr; }
  .finder-row.cols-3 { grid-template-columns: repeat(3, 1fr); }
}

.field {
  display: flex; flex-direction: column; gap: var(--sp-2);
}
.field-label {
  font-family: var(--f-mono); font-size: var(--fs-xs);
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--fg-mute);
}
.field-hint {
  font-size: var(--fs-xs); color: var(--fg-mute);
  font-style: italic;
}

/* Range-Slider */
.range {
  -webkit-appearance: none; appearance: none;
  width: 100%; height: 4px;
  background: var(--rule);
  border-radius: 2px;
  outline: none;
  margin-block: .5em;
}
.range::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 22px; height: 22px;
  background: var(--ink);
  border: 3px solid var(--paper);
  border-radius: 50%;
  cursor: pointer;
  box-shadow: var(--shadow-1);
  transition: transform .2s var(--ease-pop), background .2s var(--ease-soft);
}
.range::-webkit-slider-thumb:hover { background: var(--terra); transform: scale(1.15); }
.range::-moz-range-thumb {
  width: 22px; height: 22px;
  background: var(--ink); border: 3px solid var(--paper);
  border-radius: 50%; cursor: pointer; box-shadow: var(--shadow-1);
  transition: transform .2s var(--ease-pop), background .2s var(--ease-soft);
}
.range::-moz-range-thumb:hover { background: var(--terra); transform: scale(1.15); }

.range-track {
  position: relative;
  display: flex; align-items: center;
  gap: var(--sp-3);
  font-family: var(--f-mono); font-size: var(--fs-sm);
}
.range-value {
  min-width: 4rem; text-align: right;
  font-variation-settings: 'tnum';
  color: var(--terra); font-weight: 600;
}

/* Select / Input */
.input, .select {
  width: 100%;
  padding: .8em 1em;
  font: inherit;
  color: var(--fg);
  background: var(--bg);
  border: 1px solid var(--rule);
  border-radius: var(--r);
  transition: border-color .2s var(--ease-soft), box-shadow .2s var(--ease-soft);
}
.input:focus, .select:focus {
  outline: none;
  border-color: var(--terra);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--terra) 20%, transparent);
}

/* Chip-Selection */
.chips {
  display: flex; flex-wrap: wrap; gap: .5rem;
}
.chip {
  position: relative;
  cursor: pointer;
  user-select: none;
}
.chip input {
  position: absolute; opacity: 0; pointer-events: none;
}
.chip span {
  display: inline-block;
  padding: .5em 1em;
  font-family: var(--f-body); font-size: var(--fs-sm);
  background: var(--bg);
  color: var(--fg-soft);
  border: 1px solid var(--rule);
  border-radius: var(--r-pill);
  transition: all .25s var(--ease-soft);
}
.chip:hover span { border-color: var(--terra); color: var(--terra); transform: translateY(-1px); }
.chip input:checked + span {
  background: var(--ink);
  color: var(--paper);
  border-color: var(--ink);
}
html[data-theme="dark"] .chip input:checked + span {
  background: var(--terra); border-color: var(--terra); color: #fff;
}

/* Toggle-Buttons (Radio-Group als Pills) */
.toggle-group {
  display: inline-flex;
  background: var(--bg);
  border: 1px solid var(--rule);
  border-radius: var(--r-pill);
  padding: 4px;
  gap: 2px;
}
.toggle-group label {
  cursor: pointer;
  position: relative;
}
.toggle-group input { position: absolute; opacity: 0; pointer-events: none; }
.toggle-group span {
  display: inline-block;
  padding: .55em 1.2em;
  font-family: var(--f-body); font-size: var(--fs-sm);
  color: var(--fg-mute);
  border-radius: var(--r-pill);
  transition: all .25s var(--ease-soft);
}
.toggle-group input:checked + span { background: var(--ink); color: var(--paper); }

.finder-submit {
  display: flex; gap: var(--sp-4); align-items: center;
  flex-wrap: wrap;
  padding-top: var(--sp-4);
  border-top: 1px solid color-mix(in oklab, var(--rule) 60%, transparent);
}

/* ============ 13. Specimen-Grid ============ */
.specimen-grid {
  display: grid;
  gap: 0;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
  border-top: 1px solid var(--rule);
  border-left: 1px solid var(--rule);
}
.specimen {
  display: block;
  padding: var(--sp-5);
  border-right: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  color: inherit; text-decoration: none;
  position: relative;
  transition: background .3s var(--ease-soft);
}
.specimen:hover {
  background: color-mix(in oklab, var(--paper-warm) 60%, transparent);
  color: var(--fg); text-decoration: none;
}
.specimen .specimen-no {
  position: absolute; top: var(--sp-4); right: var(--sp-4);
  font-family: var(--f-mono); font-size: var(--fs-xs);
  letter-spacing: .14em; color: var(--fg-mute);
}
.specimen h3 {
  font-size: var(--fs-xl);
  font-variation-settings: 'opsz' 36, 'SOFT' 50;
  margin-bottom: .2em;
  max-width: 14em;
}
.specimen .lat { font-size: var(--fs-sm); color: var(--fg-mute); }
.specimen .specimen-meta {
  margin-top: var(--sp-4);
  font-family: var(--f-mono); font-size: var(--fs-xs);
  color: var(--fg-mute); letter-spacing: .05em;
}
.specimen .specimen-meta span + span::before {
  content: ' · '; color: var(--rule); margin-inline: .35em;
}

/* ============ 14. Pull-Quote ============ */
.pullquote {
  font-family: var(--f-display);
  font-size: var(--fs-2xl);
  line-height: 1.2;
  font-variation-settings: 'opsz' 72, 'SOFT' 50;
  font-weight: 360;
  color: var(--fg);
  text-wrap: balance;
  max-width: 26em;
  padding-inline: var(--sp-5);
  border-left: 2px solid var(--terra);
  position: relative;
}
.pullquote::before {
  content: '"';
  position: absolute;
  top: -.3em; left: -.15em;
  font-size: 3em;
  font-style: italic;
  font-variation-settings: 'opsz' 144, 'SOFT' 100;
  color: var(--terra);
  line-height: 1; opacity: .4;
}
.pullquote em { font-style: italic; font-variation-settings: 'opsz' 72, 'SOFT' 100; }

.pullquote-sig {
  margin-top: var(--sp-4);
  padding-left: var(--sp-5);
  font-family: var(--f-mono); font-size: var(--fs-xs);
  letter-spacing: .22em; text-transform: uppercase; color: var(--fg-mute);
}

/* ============ 15. FAQ Accordion ============ */
.faq {
  border-top: 1px solid var(--rule);
}
.faq details {
  border-bottom: 1px solid var(--rule);
  padding: var(--sp-5) 0;
  transition: padding .3s var(--ease-soft);
}
.faq details[open] { padding-block: var(--sp-6); }
.faq summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  font-family: var(--f-display);
  font-size: var(--fs-xl);
  font-variation-settings: 'opsz' 36, 'SOFT' 50;
  font-weight: 400;
  color: var(--fg);
  transition: color .2s var(--ease-soft);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: '+';
  font-family: var(--f-mono);
  font-size: 1.8rem;
  color: var(--terra);
  font-weight: 300;
  transition: transform .35s var(--ease-pop), color .2s var(--ease-soft);
}
.faq details[open] summary::after { transform: rotate(45deg); }
.faq summary:hover { color: var(--terra); }
.faq .faq-body {
  margin-top: var(--sp-4);
  max-width: var(--measure);
  font-size: var(--fs-base);
  color: var(--fg-soft);
}
.faq .faq-body p + p { margin-top: var(--sp-3); }

/* ============ 16. Comparison-Table ============ */
.compare {
  width: 100%; border-collapse: collapse;
  font-size: var(--fs-sm);
}
.compare th, .compare td {
  padding: var(--sp-4) var(--sp-3);
  border-bottom: 1px solid var(--rule);
  text-align: left;
  vertical-align: middle;
}
.compare thead th {
  font-family: var(--f-mono); font-size: var(--fs-xs);
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--fg-mute); font-weight: 500;
  border-bottom: 1px solid var(--ink);
}
.compare thead th:first-child { color: transparent; }
.compare tbody th {
  font-family: var(--f-body); font-weight: 500;
  color: var(--fg);
}
.compare .check { color: var(--sage); font-weight: 600; }
.compare .cross { color: var(--fg-mute); font-style: italic; }
.compare .own   { color: var(--terra); font-weight: 600; }
.compare .col-own { background: color-mix(in oklab, var(--terra) 5%, transparent); }

/* ============ 17. Daten-Tabellen ============ */
.datatable {
  width: 100%; border-collapse: collapse;
  font-size: var(--fs-sm);
  font-feature-settings: 'tnum', 'kern', 'liga';
}
.datatable caption {
  text-align: left;
  font-family: var(--f-mono); font-size: var(--fs-xs);
  letter-spacing: .22em; text-transform: uppercase; color: var(--fg-mute);
  padding-bottom: var(--sp-3);
  border-bottom: 1px solid var(--rule);
  margin-bottom: var(--sp-3);
}
.datatable th, .datatable td {
  text-align: left; padding: .7em .25em;
  border-bottom: 1px solid var(--rule-soft);
  vertical-align: baseline;
}
.datatable th {
  font-weight: 400; color: var(--fg-mute);
  font-style: italic; font-variation-settings: 'opsz' 16, 'SOFT' 100;
  width: 40%;
}
.datatable td { font-family: var(--f-mono); color: var(--fg); }

/* ============ 18. Tags / Pills ============ */
.tag {
  display: inline-block;
  font-family: var(--f-mono); font-size: var(--fs-xs);
  letter-spacing: .08em;
  padding: .2em .6em;
  border: 1px solid var(--rule);
  border-radius: var(--r-sm);
  color: var(--fg-mute);
}
.tag.is-accent { color: var(--terra); border-color: color-mix(in oklab, var(--terra) 40%, var(--rule)); }
.tag.is-sage   { color: var(--sage);  border-color: color-mix(in oklab, var(--sage) 40%, var(--rule)); }

/* ============ 19. CTA-Strip ============ */
.cta-strip {
  position: relative;
  padding: var(--sp-8) var(--sp-5);
  background: var(--ink);
  color: var(--paper);
  border-radius: var(--r-xl);
  overflow: hidden;
  text-align: center;
  isolation: isolate;
}
.cta-strip::before {
  content: '';
  position: absolute; inset: 0;
  background:
    radial-gradient(60% 80% at 20% 30%, color-mix(in oklab, var(--sage) 35%, transparent), transparent 60%),
    radial-gradient(60% 80% at 80% 70%, color-mix(in oklab, var(--terra) 30%, transparent), transparent 60%);
  z-index: -1;
  animation: floatGlow 16s ease-in-out infinite alternate;
}
.cta-strip h2 {
  color: var(--paper);
  max-width: 18em; margin-inline: auto;
}
.cta-strip p { color: color-mix(in oklab, var(--paper) 80%, transparent); margin-inline: auto; max-width: 36em; }
.cta-strip .btn-primary {
  background: var(--paper); color: var(--ink); margin-top: var(--sp-5);
}
.cta-strip .btn-primary::before { background: linear-gradient(135deg, var(--terra-light), var(--gilt)); }

/* ============ 20. Compliance / Marginalia ============ */
.compliance {
  font-family: var(--f-body);
  font-size: var(--fs-sm); font-style: italic;
  font-variation-settings: 'opsz' 14, 'SOFT' 100;
  color: var(--fg-mute); line-height: 1.55;
  border-left: 1px solid var(--rule);
  padding-left: var(--sp-4);
  max-width: var(--measure);
}
.marginalia {
  font-family: var(--f-display);
  font-style: italic;
  font-variation-settings: 'opsz' 24, 'SOFT' 100;
  font-size: var(--fs-sm);
  color: var(--gilt);
  line-height: 1.4;
  max-width: 12rem;
}

/* ============ 21. Footer (Kolophon) ============ */
.colophon {
  margin-top: auto;
  padding-block: var(--sp-8) var(--sp-6);
  border-top: 1px solid var(--rule);
  background: color-mix(in oklab, var(--paper-warm) 50%, var(--bg));
  position: relative;
}
html[data-theme="dark"] .colophon { background: var(--paper-deep); }

.colophon .container {
  display: grid; gap: var(--sp-6);
  grid-template-columns: 1fr;
}
@media (min-width: 760px) {
  .colophon .container { grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: var(--sp-7); }
}

.colophon h5 {
  font-family: var(--f-mono); font-size: var(--fs-xs);
  letter-spacing: .22em; text-transform: uppercase;
  color: var(--fg-mute); font-style: normal;
  margin-bottom: var(--sp-3); font-weight: 500;
}
.colophon ul { list-style: none; padding: 0; }
.colophon li + li { margin-top: .55em; }
.colophon a { color: var(--fg-soft); text-decoration: none; font-size: var(--fs-sm); }
.colophon a:hover { color: var(--terra); }

.colophon-tagline {
  font-family: var(--f-display); font-style: italic;
  font-variation-settings: 'opsz' 36, 'SOFT' 100;
  font-size: var(--fs-md); color: var(--fg-soft);
  margin-top: var(--sp-3); max-width: 22em;
}

.colophon-meta {
  margin-top: var(--sp-7); padding-top: var(--sp-4);
  border-top: 1px solid var(--rule);
  display: flex; flex-wrap: wrap; gap: var(--sp-4);
  justify-content: space-between; align-items: baseline;
  font-family: var(--f-mono); font-size: var(--fs-xs);
  letter-spacing: .08em; color: var(--fg-mute);
}
.colophon-meta .glyph {
  font-family: var(--f-display); font-style: italic; color: var(--gilt);
  font-size: 1.4em; font-variation-settings: 'opsz' 144, 'SOFT' 100;
  vertical-align: -.15em;
}

/* ============ 22. Scroll-Reveal Animations ============ */
@media (prefers-reduced-motion: no-preference) {
  .reveal {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 1s var(--ease-soft), transform 1s var(--ease-soft);
  }
  .reveal.is-visible { opacity: 1; transform: translateY(0); }

  .reveal-stagger > * {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity .8s var(--ease-soft), transform .8s var(--ease-soft);
  }
  .reveal-stagger.is-visible > *:nth-child(1) { transition-delay: .05s; }
  .reveal-stagger.is-visible > *:nth-child(2) { transition-delay: .15s; }
  .reveal-stagger.is-visible > *:nth-child(3) { transition-delay: .25s; }
  .reveal-stagger.is-visible > *:nth-child(4) { transition-delay: .35s; }
  .reveal-stagger.is-visible > *:nth-child(5) { transition-delay: .45s; }
  .reveal-stagger.is-visible > *:nth-child(6) { transition-delay: .55s; }
  .reveal-stagger.is-visible > * { opacity: 1; transform: translateY(0); }

  .hero-text > * {
    opacity: 0;
    transform: translateY(20px);
    animation: heroIn .9s var(--ease-soft) forwards;
  }
  .hero-text > *:nth-child(1) { animation-delay: .15s; }
  .hero-text > *:nth-child(2) { animation-delay: .3s;  }
  .hero-text > *:nth-child(3) { animation-delay: .45s; }
  .hero-text > *:nth-child(4) { animation-delay: .6s;  }
  .hero-text > *:nth-child(5) { animation-delay: .75s; }
  @keyframes heroIn { to { opacity: 1; transform: translateY(0); } }

  .hero-plate { opacity: 0; transform: scale(.96); animation: plateIn 1.4s var(--ease-soft) .5s forwards; }
  @keyframes plateIn { to { opacity: 1; transform: scale(1); } }
}

/* ============ 23. Utility ============ */
.text-center { text-align: center; }
.justify-self-center { justify-self: center; }
.mt-0 { margin-top: 0; }
.mt-2 { margin-top: var(--sp-2); }
.mt-4 { margin-top: var(--sp-4); }
.mt-6 { margin-top: var(--sp-6); }
.mt-8 { margin-top: var(--sp-8); }
.hidden { display: none !important; }
.no-indent { text-indent: 0 !important; }

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