/* -------------------- Theme (system-based) -------------------- */
/* Light mode (default)
 * --bg is the "edge color" that the canvas pattern (public/pattern.js)
 * blends its decorative elements against. The body itself paints a
 * radial gradient with a brighter center (--bg-center) so the content
 * area visually pops out of the darker edges — matching the depth feel
 * of dark mode. Keep the gap between --bg and --bg-center modest so
 * the pattern transition stays seamless.
 */
:root{
  --bg: #dde0ea;
  --bg-center: #f2f4fa;
  --text: rgba(10,10,14,0.92);
  --muted: rgba(10,10,14,0.62);
  --panel: rgba(10,10,14,0.08);
  --border: rgba(10,10,14,0.12);
  --warning-border: rgba(255,170,85,0.45);
  --warning-bg: rgba(255,170,85,0.06);
  --warning-text: #ffb56a;
  --shadow: rgba(0,0,0,0.12);
  --topbar-bg: rgba(221,224,234,0.82);
  --topbar-shadow: rgba(0,0,0,0.08);

  --max: 980px;
  --radius: 18px;
  --content-stack-gap: clamp(14px, 2vw, 22px);
}

/* Dark mode (from OS) */
@media (prefers-color-scheme: dark) {
  :root{
    --bg: #0b0c10;
    --bg-center: #0b0c10;
    --text: rgba(255,255,255,0.92);
    --muted: rgba(255,255,255,0.68);
    --panel: rgba(255,255,255,0.08);
    --border: rgba(255,255,255,0.12);
    --shadow: rgba(0,0,0,0.35);
    --topbar-bg: rgba(11,12,16,0.58);
    --topbar-shadow: rgba(0,0,0,0.30);
  }
}

/* -------------------- Local Font: Outfit -------------------- */
@font-face{
  font-family: "Outfit";
  src: url("/fonts/outfit-100.woff2") format("woff2");
  font-weight: 100;
  font-style: normal;
  font-display: swap;
}

@font-face{
  font-family: "Outfit";
  src: url("/fonts/outfit-200.woff2") format("woff2");
  font-weight: 200;
  font-style: normal;
  font-display: swap;
}

@font-face{
  font-family: "Outfit";
  src: url("/fonts/outfit-300.woff2") format("woff2");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face{
  font-family: "Outfit";
  src: url("/fonts/outfit-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face{
  font-family: "Outfit";
  src: url("/fonts/outfit-500.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face{
  font-family: "Outfit";
  src: url("/fonts/outfit-600.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face{
  font-family: "Outfit";
  src: url("/fonts/outfit-700.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face{
  font-family: "Outfit";
  src: url("/fonts/outfit-800.woff2") format("woff2");
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}

@font-face{
  font-family: "Outfit";
  src: url("/fonts/outfit-900.woff2") format("woff2");
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}


/* -------------------- Base -------------------- */
*{ box-sizing: border-box; }
html, body{ height: 100%; }
html { color-scheme: light dark; }

body{
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  /* Paint the depth gradient directly on the body so it spans the whole
     viewport independent of content height. Fallback to flat --bg if
     radial-gradient is unavailable. Dark mode sets --bg-center == --bg,
     collapsing the gradient to a single color. */
  background-color: var(--bg);
  background-image: radial-gradient(
    ellipse 110% 85% at 50% 50%,
    var(--bg-center) 0%,
    var(--bg) 72%
  );
  background-attachment: fixed;
  color: var(--text);
  font-family: "Outfit", ui-sans-serif, system-ui, -apple-system,
               BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial;
  font-weight: 300;
  letter-spacing: 0.2px;
}

/* Background canvas */
#bg{
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
}

/* -------------------- Header -------------------- */
.topbar{
  position: sticky;
  top: 0;
  z-index: 10;

  display: flex;
  align-items: center;
  justify-content: space-between;

  padding: 14px 18px;

  background: var(--topbar-bg);
  border-bottom: 1px solid var(--border);
  backdrop-filter: blur(10px);
  box-shadow: 0 10px 30px var(--topbar-shadow);
}

.brand{
  display: flex;
  align-items: center;
}

/* -------------------- Logo (inline SVG, theme-aware) -------------------- */
:root{
  --logo-color: var(--text);
}

/* Inline <svg class="brand-logo">. The artwork has two named groups —
   #bim (thin) and #over (bold) — which we hover-flip independently to
   the two pattern stops: `bim` picks up the bottom-left blue, `over`
   picks up the top-right pink. The default fill stays on --logo-color
   so the resting state is plain mono-theme; the hover state mirrors
   the gradient in the background canvas. */
.brand-logo{
  display: block;
  height: 40px;
  width: auto;
  fill: var(--logo-color);
  filter: drop-shadow(0 1px 10px rgba(0,0,0,0.25));
  opacity: 0.96;
  transition: opacity .15s ease, transform .15s ease;
}
/* fill is set on the <svg> root and inherited; we mirror it on the two
   groups so the hover transition has a from-colour to animate from. */
.brand-logo #bim,
.brand-logo #over{
  fill: var(--logo-color);
  transition: fill .2s ease;
}

.brand:hover .brand-logo{
  opacity: 1;
  transform: translateY(-0.5px);
}
.brand:hover .brand-logo #bim{
  fill: var(--pattern-blue-soft);
}
.brand:hover .brand-logo #over{
  fill: var(--pattern-pink-soft);
}

/* Old .logoMark kept as an alias so any page still rendering the PNG-
   mask span (e.g. the standalone feyra/auth page) doesn't break while
   we migrate. Resolves to the same visual treatment. */
.logoMark{
  width: 160px;
  height: 40px;
  display: block;
  background: var(--logo-color);
  -webkit-mask: url("/brand/bimover.png") center / contain no-repeat;
          mask: url("/brand/bimover.png") center / contain no-repeat;
  filter: drop-shadow(0 1px 10px rgba(0,0,0,0.25));
  opacity: 0.96;
  transition: opacity .15s ease, transform .15s ease;
}
.brand:hover .logoMark{
  opacity: 1;
  transform: translateY(-0.5px);
}

.nav{
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  row-gap: 8px;
  max-width: min(100%, 74vw);
}

.nav a{
  color: var(--muted);
  text-decoration: none;
  margin-left: 16px;
  font-weight: 400;
  font-size: 0.95rem;
}
.nav a:hover{ color: var(--text); }

/* -------------------- Layout -------------------- */
.content{
  width: 100%;
  margin: 0 auto;
  padding: 64px 18px 96px;
  max-width: var(--max);
  flex: 1;
}

/* Narrow, readable column on larger screens (cards) */
@media (min-width: 900px){
  .content{
    max-width: 720px;
  }
}

@media (min-width: 1400px){
  .content{
    max-width: 820px;
  }
}

/* -------------------- Components -------------------- */
.card{
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 22px;
  box-shadow: 0 18px 60px var(--shadow);
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
}

.card-warning{
  border-color: var(--warning-border);
  background: var(--warning-bg);
}

.warning-text{
  color: var(--warning-text);
  font-weight: 600;
  line-height: 1.35;
  max-width: 75ch;
}

/* consistent spacing between top-level content blocks */
.content > * + *{
  margin-top: var(--content-stack-gap);
}

h1, h2, h3{
  font-weight: 400;
  letter-spacing: 0.3px;
}

h1{
  font-size: clamp(2.1rem, 4vw, 3rem);
  line-height: 1.08;
  margin: 0 0 10px;
}

p{
  margin: 0;
  color: var(--muted);
  max-width: 65ch;
}

.homeTitle{
  margin-top: 0;
}

.homeSubtitle{
  margin-bottom: 0;
}

.newsFeedHeader{
  display: grid;
  gap: 8px;
  margin-bottom: 14px;
}

.newsFeedHeader h2{
  margin: 0;
}

.newsFeed{
  display: grid;
  gap: 12px;
}

.newsCard{
  display: grid;
  gap: 8px;
  padding: 16px;
  border-radius: calc(var(--radius) - 4px);
  border: 1px solid color-mix(in srgb, var(--border) 88%, transparent);
  background: color-mix(in srgb, var(--panel) 86%, transparent);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
}

.newsCardLink{
  text-decoration: none;
  color: inherit;
  transition: border-color 140ms ease, background-color 140ms ease, transform 140ms ease;
}

.newsCardLink:hover{
  border-color: color-mix(in srgb, var(--text) 30%, var(--border));
  background: color-mix(in srgb, var(--panel) 74%, transparent);
  transform: translateY(-1px);
}

.newsMeta{
  font-size: 0.8rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 500;
}

.newsTitle{
  margin: 0;
  font-size: clamp(1.15rem, 2.1vw, 1.32rem);
}

.newsExcerpt{
  margin: 0;
}

.newsCta{
  margin: 2px 0 0;
  color: var(--text);
  font-weight: 500;
}

.aboutCard{
  display: grid;
  gap: 14px;
}

.aboutTitle{
  margin: 0;
}

.aboutLead{
  color: var(--text);
  font-size: 1.04rem;
  font-weight: 400;
  max-width: 68ch;
}

.aboutLeadCompact{
  margin-top: -6px;
}

.aboutStory{
  display: grid;
  gap: 10px;
  padding-top: 4px;
}

.aboutStory p{
  margin: 0;
  max-width: 70ch;
}

.aboutSignature{
  color: var(--text);
  font-weight: 500;
}

.contactCard{
  display: grid;
  gap: 14px;
}

.contactTitle{
  margin: 0;
}

.contactSubtitle{
  margin: 0;
}

.contactLinks{
  display: grid;
  gap: 10px;
}

.contactLink{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px;
  border-radius: calc(var(--radius) - 4px);
  border: 1px solid color-mix(in srgb, var(--border) 88%, transparent);
  background: color-mix(in srgb, var(--panel) 86%, transparent);
  color: var(--text);
  text-decoration: none;
  transition: border-color 140ms ease, background-color 140ms ease, transform 140ms ease;
}

.contactLink:hover{
  border-color: color-mix(in srgb, var(--text) 30%, var(--border));
  background: color-mix(in srgb, var(--panel) 74%, transparent);
  transform: translateY(-1px);
}

.contactLinkTitle{
  font-weight: 500;
}

.contactLinkText{
  color: var(--muted);
  font-size: 0.95rem;
  overflow-wrap: anywhere;
}

/* -------------------- Footer -------------------- */
.footer{
  max-width: var(--max);
  margin: 0 auto;
  padding: 18px;

  border-top: 1px solid var(--border);
  color: var(--muted);

  display: flex;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.footer a{
  color: var(--muted);
  text-decoration: none;
}
.footer a:hover{ color: var(--text); }

/* =========================
   Legal pages (Privacy / Terms)
   ========================= */

.legal{
  max-width: 760px;
  margin: 0 auto;
}

.legal-text{
  font-size: 15.5px;
  line-height: 1.75;
  font-weight: 400;
  color: var(--text);
}

.legal-text h1{
  font-size: 28px;
  font-weight: 400;
  margin: 0 0 0.6em;
}

.legal-text h2{
  font-size: 20px;
  font-weight: 400;
  margin-top: 2.4em;
  margin-bottom: 0.6em;
}

.legal-text h3{
  font-size: 16px;
  font-weight: 400;
  margin-top: 1.8em;
  margin-bottom: 0.4em;
}

.legal-text p,
.legal-text li{
  font-weight: 300;
  margin: 0.6em 0;
  color: var(--muted);
}

.legal-text ul{
  padding-left: 1.2em;
  margin: 0.6em 0;
}

.legal-text strong{
  font-weight: 600;
  color: var(--text);
}

.legal-text hr{
  border: 0;
  border-top: 1px solid var(--border);
  margin: 1.6em 0;
}

/* =========================
   Utilities + Nav dropdown
   ========================= */

.sr-only{
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0;
}

/* Apps dropdown (appears in top nav when 2+ apps exist) */
.appsDropdown{
  position: relative;
  display: inline-block;
}

.appsDropdown::after{
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  height: 8px;
}

/* Trigger should look like other nav links */
.appsTrigger{
  color: var(--muted);
  text-decoration: none;
  font-weight: 400;
  font-size: 0.95rem;
  margin-left: 16px; /* match .nav a spacing */
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: default;
}
.appsTrigger:hover{ color: var(--text); }

.appsCaret{
  opacity: 0.7;
  transform: translateY(0.5px);
  font-size: 0.9em;
}

.appsMenu{
  position: absolute;
  left: 0;
  right: auto;
  top: calc(100% + 2px);
  min-width: 180px;
  width: max-content;
  max-width: min(320px, calc(100vw - 24px));
  padding: 6px;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: var(--topbar-bg);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  box-shadow: 0 18px 60px var(--shadow);
  display: grid;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(4px);
  transition: opacity 120ms ease, transform 120ms ease, visibility 120ms ease;
  gap: 4px;
  z-index: 20;
  overflow: hidden;
}

.localeDropdown .appsMenu{
  left: auto;
  right: 0;
}

/* Open on hover */
.appsDropdown:hover .appsMenu{
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0);
}

.appsMenu a{
  margin-left: 0; /* override .nav a spacing */
  padding: 5px 8px;
  border-radius: 9px;
  text-decoration: none;
  color: var(--muted);
  font-weight: 400;
  font-size: 0.95rem;
  display: block;
  line-height: 1.25;
  white-space: normal;
  overflow-wrap: anywhere;
}

.appsMenu a:hover{
  color: var(--text);
  background: rgba(255,255,255,0.06);
}

/* Category labels inside the products dropdown — small uppercase
   eyebrow so the user sees "Apps / Suite / Add-ons / On the horizon"
   without each label looking like a menu item. */
.appsMenuLabel{
  margin-left: 0;
  padding: 10px 8px 4px;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--muted) 80%, transparent);
  pointer-events: none;
  user-select: none;
}
.appsMenuLabel:first-child{
  padding-top: 2px;
}

.appsMenuDivider{
  height: 1px;
  margin: 6px 8px;
  background: color-mix(in srgb, var(--border) 60%, transparent);
}

@media (max-width: 980px){
  .topbar{
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 10px 14px;
  }

  .nav{
    width: 100%;
    max-width: 100%;
    justify-content: flex-start;
    gap: 8px 14px;
  }

  .nav a,
  .appsTrigger{
    margin-left: 0;
  }

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


/* ============================================================
   Home page — Charm-style brand surface
   Hero · Tooldrops · Products · Manifesto · Construction note
   ============================================================ */

/* Accent palette — two-tone, lifted from the bg pattern's gradient stops.
   Cool (blue) is the *default* highlight so the page reads more
   considered/B2B than a single-pink pop; warm (pink) is reserved for the
   one word per headline that should really pop. `--accent` stays for
   backwards compat and points at the cool tone. */
:root {
  /* warm = pattern's top-right stop (HSL 316° / 85% / 75%) */
  --accent-warm: #c83e9c;
  --accent-warm-soft: rgba(200, 62, 156, 0.10);
  --accent-warm-line: rgba(200, 62, 156, 0.32);
  /* Pattern-pink / pattern-blue = the literal HSL stops the canvas pattern
     uses (HSL 316/85/75 and HSL 224/85/75). Distinct from --accent-warm
     / --accent-cool (which are brand colours tuned for contrast on body
     text). Used where the colour should match the pattern itself —
     currently: the wordmark's `over` and `bim` groups on hover. */
  --pattern-pink: hsl(316, 85%, 75%);
  --pattern-blue: hsl(224, 85%, 75%);
  /* Wordmark-hover variants — nudged closer to the actual pattern shapes so
     the hover reads as picking up the background rather than an unrelated
     pastel. Same hues + lightness as the pattern stops, at a touch below
     full chroma (66% vs 85%) so they still stay refined on the small logo
     instead of candy-bright. */
  --pattern-pink-soft: hsl(316, 66%, 75%);
  --pattern-blue-soft: hsl(224, 66%, 75%);
  /* cool = pattern's bottom-left stop (HSL 224° / 85% / 75%) */
  --accent-cool: #4b6cc1;
  --accent-cool-soft: rgba(75, 108, 193, 0.10);
  --accent-cool-line: rgba(75, 108, 193, 0.32);
  /* Default accent → cool, for restraint */
  --accent: var(--accent-cool);
  --accent-soft: var(--accent-cool-soft);
  --accent-line: var(--accent-cool-line);
  --mono: ui-monospace, "SF Mono", "JetBrains Mono", "IBM Plex Mono",
          Menlo, Consolas, monospace;

  /* Content glass — sits behind the home content, between the pattern and
     the actual elements. Lighter than --topbar-bg so the topbar still reads
     as a distinct surface above it. */
  --content-glass: rgba(242, 244, 250, 0.52);
}
@media (prefers-color-scheme: dark) {
  :root {
    /* Linear/Raycast-Richtung (2026-07-28): Pink bleibt Markenfarbe, aber
       entsättigt — Farbe wirkt hier über SCHEIN an Kanten, nicht über
       gefüllte Flächen. Das Bonbon-Pink (#ff7ad1) kippte ins Kitschige. */
    --accent-warm: #e084c0;
    --accent-warm-soft: rgba(224, 132, 192, 0.10);
    --accent-warm-line: rgba(224, 132, 192, 0.30);
    --accent-cool: #89a6f5;
    --accent-cool-soft: rgba(137, 166, 245, 0.14);
    --accent-cool-line: rgba(137, 166, 245, 0.38);
    --accent: var(--accent-cool);
    --accent-soft: var(--accent-cool-soft);
    --accent-line: var(--accent-cool-line);
    --content-glass: rgba(11, 12, 16, 0.46);
  }
}

/* ---- Content-glass layering ----
   A subtle glass surface sits behind the home content column itself — only
   where there's content, with a gentle blur. The topbar keeps its own glass
   (z-index: 10) above. Pattern is visible to the left/right of the column
   and below the content area. `isolation: isolate` gives the pseudo a stable
   stacking context so it can't slip behind the body's gradient or canvas.
   The Cloya docs (.docsShell) opt in too, so the background clouds don't
   fight the long-form reading — same glass as the home page. (Only the
   glass, not the width rules below: the docs keep their wider column.) */
.content:has(.home, .page, .docsShell) {
  position: relative;
  isolation: isolate;
}
.content:has(.home, .page, .docsShell)::before {
  content: "";
  position: absolute;
  /* Leave a strip of the body's canvas/gradient visible at the very
     top (under the topbar's own glass) and a smaller one at the bottom
     (just above the terms-footer separator). The bottom strip is
     smaller because the .footer already provides visual separation
     with its border-top. */
  inset: 32px 0 14px 0;
  z-index: -1;
  background: var(--content-glass);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  pointer-events: none;
  border-radius: 16px;
  /* Feather the glass into the pattern instead of a crisp rounded box:
     two axis gradients intersected leave the centre fully opaque and
     dissolve the surface (fill + backdrop-blur) over a soft band on
     every edge, so the transition to the background reads diffuse. */
  -webkit-mask:
    linear-gradient(to right, transparent 0, #000 46px, #000 calc(100% - 46px), transparent 100%),
    linear-gradient(to bottom, transparent 0, #000 40px, #000 calc(100% - 24px), transparent 100%);
  -webkit-mask-composite: source-in;
  mask:
    linear-gradient(to right, transparent 0, #000 46px, #000 calc(100% - 46px), transparent 100%),
    linear-gradient(to bottom, transparent 0, #000 40px, #000 calc(100% - 24px), transparent 100%);
  mask-composite: intersect;
}

/* Wider content for any page using the new design system (home or .page wrapper) */
@media (min-width: 900px) {
  .content:has(.home, .page) { max-width: 1080px; }
}
@media (min-width: 1400px) {
  .content:has(.home, .page) { max-width: 1120px; }
}

/* Block stack & rhythm — applies to both .home and any .page-wrapped page */
.home,
.page {
  display: grid;
  gap: clamp(56px, 8vw, 96px);
  width: 100%;
}

/* Highlighted word — editorial accent. The word carries a soft diagonal
   gradient along the site's own gradient axis (cool → warm, bottom-left to
   top-right), so the emphasis echoes the background instead of an arbitrary
   vertical wash. The underline is deliberately restrained — thin and
   low-alpha — so the coloured word carries the emphasis and the rule just
   anchors it; a thick coloured bar reads as a highlighter, not as craft.
   `.hl.warm` flips the gradient (warm → cool). */
.hl {
  font-weight: 600;
  /* Kühler Verlauf ins Helle statt ins Pink — dieselbe Markenachse, aber
     das Auge liest Licht statt Farbe (Linear/Raycast-Prinzip). Dezenter
     als zuvor: der Startton ist Richtung Text gemischt, die Farbigkeit
     kommt aus dem Glow darunter (Nutzer 2026-07-28). */
  background-image: linear-gradient(100deg, color-mix(in srgb, var(--accent-cool) 68%, var(--text)) 0%, color-mix(in srgb, var(--text) 90%, var(--accent-warm)) 100%);
  /* drop-shadow statt text-shadow: text-shadow schiene durch die
     transparente Füllung des geclippten Texts hindurch. */
  filter: drop-shadow(0 0 16px color-mix(in srgb, var(--accent-cool) 28%, transparent));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, var(--accent-cool) 34%, transparent);
  text-decoration-thickness: 0.055em;
  text-decoration-skip-ink: none;
  text-underline-offset: 0.16em;
}
.hl.warm {
  background-image: linear-gradient(100deg, color-mix(in srgb, var(--accent-warm) 60%, var(--text)) 0%, color-mix(in srgb, var(--accent-cool) 68%, var(--text)) 100%);
  filter: drop-shadow(0 0 16px color-mix(in srgb, var(--accent-warm) 24%, transparent));
  text-decoration-color: color-mix(in srgb, var(--accent-cool) 42%, transparent);
}
@media (prefers-color-scheme: light) {
  /* Auf hellem Grund wirkt farbiger Schein schnell wie ein Fleck — nur
     ein Hauch. */
  .hl { filter: drop-shadow(0 0 10px color-mix(in srgb, var(--accent-cool) 15%, transparent)); }
  .hl.warm { filter: drop-shadow(0 0 10px color-mix(in srgb, var(--accent-warm) 13%, transparent)); }
}

/* "Kicker" — small uppercase mono, muted */
.kicker {
  font-family: var(--mono);
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  color: var(--muted);
  margin: 0 0 14px;
  text-transform: uppercase;
}

/* Pill / tag */
.pill {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 4px 9px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--panel);
  color: var(--text);
  font-weight: 500;
  line-height: 1;
}
.pill-soft {
  background: var(--accent-soft);
  border-color: var(--accent-line);
  color: var(--accent);
}

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  padding: 12px 18px;
  border-radius: 12px;
  font-weight: 500;
  font-size: 0.98rem;
  text-decoration: none;
  border: 1px solid transparent;
  transition: transform 140ms ease, background-color 140ms ease,
              border-color 140ms ease, color 140ms ease;
}
.btn-primary {
  background: var(--text);
  color: var(--bg);
  border-color: var(--text);
}
.btn-primary:hover { transform: translateY(-1px); }
.btn-ghost {
  background: transparent;
  color: var(--text);
  border-color: var(--border);
}
.btn-ghost:hover {
  border-color: color-mix(in srgb, var(--text) 35%, var(--border));
  background: var(--panel);
}
.btn-arrow { transition: transform 140ms ease; }
.btn:hover .btn-arrow { transform: translateX(2px); }

/* HERO */
.hero {
  padding-top: clamp(8px, 4vw, 32px);
  display: grid;
  gap: 0;
}
.hero-title {
  margin: 0 0 22px;
  font-size: clamp(2.4rem, 6.2vw, 4.6rem);
  /* 400 echoes the geometric-sans weight of the bimover wordmark in the
     topbar. At hero sizes a lighter weight reads as more refined and
     stops the title from out-shouting the logo. */
  font-weight: 400;
  letter-spacing: -0.02em;
  line-height: 1.02;
  max-width: 18ch;
}
.hero-lead {
  margin: 0 0 32px;
  font-size: clamp(1.05rem, 1.6vw, 1.25rem);
  color: var(--muted);
  max-width: 56ch;
  line-height: 1.5;
}
.hero-cta {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

/* Generic block (tooldrops / products / manifesto) */
.block {
  display: grid;
  gap: 28px;
}
.block-head {
  display: grid;
  gap: 6px;
  max-width: 70ch;
}
.block-title {
  margin: 0;
  font-size: clamp(1.6rem, 3.2vw, 2.2rem);
  font-weight: 500;
  letter-spacing: -0.01em;
  line-height: 1.12;
}
.block-sub {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 1.02rem;
  line-height: 1.55;
}
.block-foot { margin: 0; }

/* Tooldrops grid */
.drops-grid {
  display: grid;
  gap: 14px;
  grid-template-columns: 1fr;
}
@media (min-width: 760px) {
  .drops-grid { grid-template-columns: repeat(3, 1fr); }
}
.drop {
  display: grid;
  gap: 10px;
  padding: 22px;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: var(--panel);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  position: relative;
  transition: transform 140ms ease, border-color 140ms ease,
              background-color 140ms ease;
}
.drop:hover {
  transform: translateY(-2px);
  border-color: var(--accent-line);
}
.drop-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 4px;
}
.drop-name {
  margin: 0;
  font-size: 1.7rem;
  font-weight: 500;
  letter-spacing: -0.01em;
}
.drop-tag {
  margin: -2px 0 4px;
  font-family: var(--mono);
  font-size: 0.88rem;
  /* Pink mono eyebrow above the drop name — one of the pieces that adds
     warmth back into the otherwise cool-led palette. */
  color: var(--accent-warm);
  font-weight: 500;
  letter-spacing: 0.01em;
}
.drop-body {
  margin: 0;
  color: var(--muted);
  line-height: 1.55;
  font-size: 0.96rem;
}
.drop-foot {
  margin-top: 8px;
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items: center;
  padding-top: 14px;
  border-top: 1px dashed var(--border);
}

/* Arrow link */
.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  font-weight: 500;
  color: var(--text);
  text-decoration: none;
  font-size: 0.92rem;
  transition: color 140ms ease, gap 140ms ease;
}
.link-arrow:hover {
  /* Pink hover for arrow links — small but pervasive warm touch that
     keeps the brand pop felt without painting whole sections pink. */
  color: var(--accent-warm);
  gap: 0.6em;
}
.link-arrow-muted { color: var(--muted); }
.link-arrow-muted:hover { color: var(--text); }

/* Products grid */
.products-grid {
  display: grid;
  gap: 14px;
  grid-template-columns: 1fr;
}
@media (min-width: 760px) {
  .products-grid { grid-template-columns: repeat(3, 1fr); }
}
.product {
  display: grid;
  gap: 8px;
  padding: 22px;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: var(--panel);
  text-decoration: none;
  color: inherit;
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  transition: transform 140ms ease, border-color 140ms ease;
}
.product:hover {
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--text) 25%, var(--border));
}
.product-name {
  margin: 6px 0 0;
  font-size: 1.6rem;
  font-weight: 500;
  letter-spacing: -0.01em;
}
.product-sub {
  margin: 0;
  color: var(--muted);
  line-height: 1.5;
  font-size: 0.95rem;
}
.product-cta {
  margin-top: 8px;
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--text);
  transition: gap 140ms ease;
}
.product:hover .product-cta { gap: 0.6em; }

/* Manifesto */
.manifesto .rules {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0;
  border-top: 1px solid var(--border);
}
.rule {
  display: grid;
  grid-template-columns: 64px 1fr;
  gap: 18px;
  padding: 22px 0;
  border-bottom: 1px solid var(--border);
  align-items: start;
}
.rule-n {
  font-family: var(--mono);
  color: var(--accent);
  font-size: 0.92rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  padding-top: 2px;
}
.rule-body { display: grid; gap: 6px; }
.rule-title {
  margin: 0;
  font-size: 1.18rem;
  font-weight: 500;
  letter-spacing: -0.005em;
}
.rule-body p {
  margin: 0;
  color: var(--muted);
  line-height: 1.55;
  font-size: 0.98rem;
  max-width: 60ch;
}

/* Construction note */
.construction {
  padding: 22px;
  border-radius: var(--radius);
  border: 1px dashed var(--border);
  background: transparent;
  display: grid;
  gap: 6px;
}
.construction .kicker {
  margin: 0 0 6px;
  color: var(--accent);
}
.construction-title {
  margin: 0;
  font-size: 1.2rem;
  font-weight: 500;
}
.construction-body {
  margin: 0;
  color: var(--muted);
  line-height: 1.55;
  max-width: 70ch;
}

/* Prose — used on about-style story blocks. Slightly larger body with
   relaxed line-height; readable column. Lives on .prose so we can keep the
   global p reset (muted) intact and only opt in where it's actual reading. */
.prose {
  display: grid;
  gap: 18px;
  max-width: 64ch;
}
.prose p {
  margin: 0;
  color: var(--text);
  font-size: 1.05rem;
  line-height: 1.6;
  max-width: none;
}

/* Channel — variant of the product card used on /contact. Slightly tighter,
   has a small pill on top, a name, a short tagline, and a single CTA. */
.channel {
  display: grid;
  gap: 6px;
  padding: 22px;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: var(--panel);
  text-decoration: none;
  color: inherit;
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  transition: transform 140ms ease, border-color 140ms ease;
}
.channel:hover {
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--text) 25%, var(--border));
}
.channel-name {
  margin: 6px 0 0;
  font-size: 1.4rem;
  font-weight: 500;
  letter-spacing: -0.01em;
}
.channel-tag {
  margin: 0;
  color: var(--muted);
  font-size: 0.95rem;
  line-height: 1.5;
}
.channel-cta {
  margin-top: 10px;
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  font-size: 0.92rem;
  font-weight: 500;
  color: var(--text);
  font-family: var(--mono);
  transition: gap 140ms ease;
}
.channel:hover .channel-cta { gap: 0.6em; }

/* Split-card baseline — used by feature/drop/product/channel cards.
   Borderless by default; pink hover ring; rounded corners clipping the two
   coloured zones. Palette swaps with system theme so the card never punches
   a hole in the page. */
.split-card {
  display: flex;
  flex-direction: column;
  border-radius: var(--radius);
  overflow: hidden;
  /* Unsichtbare Kante, die beim Hover kühl aufscheint — Layout bleibt stabil */
  border: 1px solid transparent;
  background: #15171c;
  text-decoration: none;
  color: inherit;
  transition: transform 140ms ease, border-color 140ms ease, box-shadow 140ms ease;
}
.split-card:hover {
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--accent-cool) 40%, transparent);
  box-shadow: 0 0 22px -4px color-mix(in srgb, var(--accent-cool) 20%, transparent),
              0 18px 50px -28px color-mix(in srgb, var(--accent-cool) 45%, transparent);
}

/* TOP zone — dark in dark mode, white in light mode (the "content").
   Body text on the dark side uses the cool blue accent (calmer than the
   old all-pink treatment), so the card reads as engineered, not
   decorative. The bullet arrows + the pill still carry a warm accent. */
.split-card-top {
  flex: 1;
  padding: 22px;
  display: grid;
  /* Zeilen NICHT strecken: als Grid-Default (align-content: stretch)
     verteilte die Karte ihren Restplatz auf die Zeilen — die Label-Zeile
     wuchs mit und der Abstand Text→Unterstrich schwankte je Karte
     zwischen 8 und 24 px (Nutzer 2026-07-28). */
  align-content: start;
  gap: 10px;
  background: #15171c;
  /* Fliesstext neutral (s. .feature-card-content) — Farbe nur in Akzenten. */
  color: rgba(255,255,255,0.72);
}

/* BOTTOM zone — white in dark mode, dark in light mode (the "anchor"). */
.split-card-foot {
  padding: 20px 22px;
  background: #ffffff;
  color: #0b0c10;
  display: grid;
  gap: 6px;
}
.split-card-title {
  margin: 0;
  font-size: 1.18rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.22;
  color: inherit;
}
.split-card-sub {
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.45;
  color: rgba(11, 12, 16, 0.65);
}
.split-card-actions {
  margin-top: 4px;
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items: center;
}
.split-card-actions a {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  font-size: 0.92rem;
  font-weight: 500;
  color: inherit;
  text-decoration: none;
  transition: color 140ms ease, gap 140ms ease;
}
.split-card-actions a:hover { color: #c83e9c; gap: 0.6em; }
.split-card-actions a.muted { color: rgba(11, 12, 16, 0.55); }
.split-card-actions a.muted:hover { color: #0b0c10; }

/* Light-mode inversion — swap the two zone colours so the card sits softer
   on a light page background. Title stays white-on-dark (neutral and
   restrained instead of all-pink); action links pick up the cool accent. */
@media (prefers-color-scheme: light) {
  .split-card { background: #ffffff; }
  .split-card-top   { background: #ffffff; color: rgba(10,10,14,0.72); }
  .split-card-foot  { background: #15171c; color: #ffffff; }
  .split-card-title { color: #ffffff; }
  .split-card-sub   { color: rgba(255, 255, 255, 0.75); }
  .split-card-actions a { color: var(--accent-cool); }
  .split-card-actions a:hover { color: var(--accent-warm); }
  .split-card-actions a.muted { color: rgba(255, 255, 255, 0.55); }
  .split-card-actions a.muted:hover { color: #ffffff; }
}

/* Bullet-list variant inside the top zone — the "→" marker stays pink in
   both modes for brand pop. */
.split-card-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 10px;
}
.split-card-list li {
  position: relative;
  padding-left: 20px;
  font-size: 0.96rem;
  line-height: 1.5;
  color: inherit;
}
/* Bullet arrow keeps the warm pink in both modes — it's the deliberate
   brand pop, surrounded by an otherwise cool field. */
.split-card-list li::before {
  content: "→";
  position: absolute;
  left: 0;
  top: 0;
  color: var(--accent-warm);
  font-family: var(--mono);
}

/* Pill variant on the card's top zone — a refined, tonal brand tag rather
   than a candy chip. A soft warm-tinted fill with a matching hairline and
   a brand-pink label (no solid fill, no white outline) reads as a quiet,
   high-end status marker that belongs to the accent system. The tokens
   flip per theme (bright pink on dark, deeper berry on light) so the tag
   stays legible and cohesive in both. */
/* Label-ZEILE: der Unterstrich gehört an die Reihe, nicht an jedes
   einzelne Label — so läuft er durchgehend und der Abstand Text→Linie
   ist überall gleich (Nutzer 2026-07-28: «durchlaufender Strich, immer
   gleich viel Abstand»). */
.split-card-pillrow {
  display: flex;
  /* EINZEILIG (nowrap): brach die Reihe um, rutschte die Linie mit der
     zweiten Zeile nach unten — gemessene Abstände schwankten dann
     zwischen 8 und 24 px. Einzeilig + feste Zeilenhöhe hält den Abstand
     Text→Linie konstant. */
  flex-wrap: nowrap;
  align-items: center;
  gap: 12px;
  line-height: 1;
  padding-bottom: 7px;
  border-bottom: 1px solid color-mix(in srgb, var(--accent-warm) 55%, transparent);
  width: fit-content;
  max-width: 100%;
}
.split-card-pillrow > .split-card-pill { white-space: nowrap; }

/* ENTSCHEID 2026-07-28 (Nutzer, aus 10 Varianten gewählt): ECKIGES TAG
   statt Pille. Die pinke Pille kippte die Seite ins Verspielte; ein
   rechteckiges Mono-Tag mit neutraler Haarlinie liest sich als
   Werkzeug-Label (Linear/Raycast-Richtung). Die Markenfarben tragen
   Logo, Pattern und Titel — dieses Label bleibt bewusst farblos. */
.split-card-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  padding: 0;
  border-radius: 0;
  border: 0;
  background: transparent;
  color: color-mix(in srgb, var(--text) 78%, transparent);
  font-weight: 600;
  line-height: 1;
  width: fit-content;
}
@media (prefers-color-scheme: light) {
  /* Auf der hellen Zone dieselbe Logik: neutrale Haarlinie, ruhiger Text. */
  .split-card-pill {
    color: color-mix(in srgb, var(--text) 76%, transparent);
    background: transparent;
  }
  .split-card-pillrow {
    border-bottom-color: color-mix(in srgb, var(--accent-warm) 60%, transparent);
  }
}

/* Small body line above the title, on the dark zone — cool-toned. */
.split-card-tag {
  margin: 0;
  font-family: var(--mono);
  font-size: 0.85rem;
  color: var(--accent-cool);
  font-weight: 500;
  letter-spacing: 0.01em;
}
.split-card-body {
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.55;
  color: inherit;
}

/* Backwards-compatible aliases for the existing .feature-card classes.
   Same colour discipline as .split-card: cool-blue body text, warm-pink
   bullet arrows, neutral title. */
.feature-card { display: flex; flex-direction: column; border-radius: var(--radius); overflow: hidden; border: 1px solid transparent; background: #15171c; transition: transform 140ms ease, border-color 140ms ease, box-shadow 140ms ease; }
.feature-card:hover {
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--accent-cool) 40%, transparent);
  box-shadow: 0 0 22px -4px color-mix(in srgb, var(--accent-cool) 20%, transparent),
              0 18px 50px -28px color-mix(in srgb, var(--accent-cool) 45%, transparent);
}
/* Fliesstext neutral, Farbe bleibt den Akzenten (Pills, Pfeile, Hover-
   Schein) vorbehalten — durchgefärbter Text las sich unruhig/bunt. */
.feature-card-content { flex: 1; padding: 22px; display: grid; gap: 10px; background: #15171c; color: rgba(255,255,255,0.72); }
.feature-card-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.feature-card-list li { position: relative; padding-left: 20px; color: inherit; font-size: 0.96rem; line-height: 1.5; }
.feature-card-list li::before { content: "→"; position: absolute; left: 0; top: 0; color: color-mix(in srgb, var(--accent-cool) 70%, transparent); font-family: var(--mono); }
.feature-card-foot { padding: 20px 22px; background: #ffffff; color: #0b0c10; }
.feature-card-title { margin: 0; font-size: 1.18rem; font-weight: 600; letter-spacing: -0.01em; line-height: 1.22; color: inherit; }

@media (prefers-color-scheme: light) {
  .feature-card { background: #ffffff; }
  .feature-card-content { background: #ffffff; color: rgba(10,10,14,0.72); }
  .feature-card-foot { background: #15171c; color: #ffffff; }
}

/* Available-list — small stacked tile list for "currently shipping" + "on the way" */
.tile-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 10px;
}
.tile-list li {
  display: grid;
  grid-template-columns: 80px 1fr;
  gap: 14px;
  padding: 14px 16px;
  border-radius: calc(var(--radius) - 6px);
  border: 1px solid var(--border);
  background: var(--panel);
  align-items: center;
}
.tile-list li .tile-tag {
  font-family: var(--mono);
  font-size: 0.78rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}
.tile-list li.tile-soon .tile-tag { color: var(--accent); }
.tile-list li .tile-body {
  margin: 0;
  color: var(--text);
  font-size: 0.98rem;
  line-height: 1.5;
}

/* Signature — used at the end of the about page */
.signature {
  font-family: var(--mono);
  font-size: 0.92rem;
  letter-spacing: 0.04em;
  color: var(--muted);
  margin: 0;
  padding-top: 20px;
  border-top: 1px solid var(--border);
}

/* Mobile tweaks */
@media (max-width: 600px) {
  .rule { grid-template-columns: 48px 1fr; gap: 14px; }
  .drop { padding: 18px; }
  .product { padding: 18px; }
  .channel { padding: 18px; }
  .hero-title { letter-spacing: -0.015em; }
  .tile-list li { grid-template-columns: 1fr; padding: 14px; }
  .tile-list li .tile-tag { font-size: 0.72rem; }
}