/* Wrapped in @layer legacy on 05.10 (Astro port): pre-port CSS, frozen. New code is Tailwind and always wins. */
@layer legacy {
/* Hallmark · pre-emit critique: P5 H4 E4 S5 R4 V5 */
/* Hallmark · macrostructure: Letter (first-person note from the founder) → product cards → one action
 * tone: futuristic luxury, honest · theme: custom, two skins under test (Daniel 04.10):
 *   crm (default since Daniel picked it): the Salgsdashbord look, navy-black, cyan glow, Questrial display · dark / geometric-sans / cool
 *   luksus (the switch): near-black, champagne-copper glow, Instrument Serif display · dark / classical-serif / warm
 * shared: glass header bar, glass cards, one soft glow, mono kicker (one per page)
 * nav: full-width glass bar, logo top left (shared) · footer: shared .bx-foot (assets/brand.css) · enrichment: CSS glow only
 * Every colour and font is a token; the skins only change tokens. */

/* ── Skin: Luksus (behind the switch) ───────────────────────────────────── */
:root[data-stil="luksus"] {
  --color-paper:   oklch(8.5% 0.004 60);
  --color-panel:   oklch(15% 0.008 65 / 0.62);
  --color-panel-hi: oklch(19% 0.012 65 / 0.78);
  --color-rule:    oklch(88% 0.03 75 / 0.12);
  --color-rule-strong: oklch(88% 0.03 75 / 0.22);
  --color-ink:     oklch(94% 0.014 80);
  --color-muted:   oklch(70% 0.022 75);
  --color-accent:  oklch(78% 0.10 72);          /* champagne copper */
  --color-accent-2: oklch(66% 0.11 58);         /* deeper copper, for the gradient */
  --color-accent-ink: oklch(16% 0.01 60);
  --color-focus:   oklch(84% 0.11 75);
  --color-glow:    oklch(70% 0.12 62 / 0.20);
  --color-glow-2:  oklch(60% 0.08 40 / 0.10);
  --color-glow-none: oklch(70% 0.12 62 / 0);
  --color-shadow:  oklch(4% 0 0 / 0.6);
  --font-display:  var(--bxf-instrument), Georgia, "Times New Roman", serif;
  --font-body:     var(--bxf-dm-sans), ui-sans-serif, system-ui, sans-serif;
  --font-mono:     var(--bxf-jetbrains), ui-monospace, Consolas, monospace;
  --display-track: -0.01em;
  --display-weight: 400;
  --radius-card: 18px;
}

/* ── Skin: CRM (default; the Salgsdashbord look) ─────────────────────────── */
:root {
  --color-shadow:  oklch(5% 0.01 260 / 0.6);
  --font-body:     var(--bxf-dm-sans), ui-sans-serif, system-ui, sans-serif;
  --font-mono:     var(--bxf-jetbrains), ui-monospace, Consolas, monospace;
  --color-paper:   oklch(16% 0.015 260);        /* #0B0E14 */
  --color-panel:   oklch(20.5% 0.018 260 / 0.7);  /* #141922 */
  --color-panel-hi: oklch(24% 0.025 255 / 0.85);
  --color-rule:    oklch(36% 0.04 250 / 0.55);    /* #232D3B, lifted */
  --color-rule-strong: oklch(55% 0.09 215 / 0.55);
  --color-ink:     oklch(93.5% 0.01 260);       /* #E5E9F0 */
  --color-muted:   oklch(68% 0.03 255);         /* #8A97A8 */
  --color-accent:  oklch(80% 0.13 210);         /* cyan #22D3EE */
  --color-accent-2: oklch(72% 0.13 230);
  --color-accent-ink: oklch(16% 0.015 260);
  --color-focus:   oklch(85% 0.12 205);
  --color-glow:    oklch(80% 0.13 210 / 0.16);
  --color-glow-2:  oklch(65% 0.15 280 / 0.10);
  --color-glow-none: oklch(80% 0.13 210 / 0);
  --font-display:  var(--bxf-questrial), ui-sans-serif, system-ui, sans-serif;
  --display-track: -0.02em;
  --display-weight: 400;
  --radius-card: 14px;
}

*, *::before, *::after { box-sizing: border-box; }
html, body { overflow-x: clip; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; min-height: 100vh;
  background: var(--color-paper); color: var(--color-ink);
  font-family: var(--font-body); font-size: var(--text-base); font-weight: 300; line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  transition: background var(--dur-med) var(--ease-out);
}
:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 4px; border-radius: 4px; }
a { color: inherit; }
p { margin: 0; }
h1, h2, h3 { margin: 0; font-family: var(--font-display); font-weight: var(--display-weight); font-style: normal; letter-spacing: var(--display-track); text-wrap: balance; overflow-wrap: anywhere; min-width: 0; }

/* One soft light source behind the letter. Fixed so it doesn't scroll away like a decoration. */
.glow {
  position: fixed; inset: -20vh -10vw auto -10vw; height: 90vh; z-index: -1; pointer-events: none;
  background:
    radial-gradient(ellipse 55% 50% at 30% 30%, var(--color-glow) 0%, var(--color-glow-none) 70%),
    radial-gradient(ellipse 45% 45% at 80% 15%, var(--color-glow-2) 0%, var(--color-glow-none) 70%);
}

.page { width: min(100% - 2 * var(--gutter), var(--max)); margin: 0 auto; }

/* ── Header bar: full width, logo top left at the gutter — the same place on every page ─────────── */
.bar {
  position: sticky; top: 0; z-index: 10;
  display: flex; align-items: center; gap: var(--space-lg);
  padding: var(--space-sm) var(--bx-gutter);
  background: var(--color-panel); border-bottom: 1px solid var(--color-rule);
  backdrop-filter: blur(14px) saturate(1.2); -webkit-backdrop-filter: blur(14px) saturate(1.2);
}
.bar .bx-logo { margin-right: auto; }
.bar__nav { display: flex; gap: var(--space-xs); }
.bar__nav a {
  font-size: var(--text-base); font-weight: 400; color: var(--color-muted); text-decoration: none; white-space: nowrap;
  padding: var(--space-xs) var(--space-sm); border-radius: var(--radius-pill);
  transition: color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out);
}
.bar__nav a:hover { color: var(--color-ink); background: var(--color-panel-hi); }
.bar__cta {
  font-size: var(--text-base); font-weight: 500; white-space: nowrap; text-decoration: none;
  padding: var(--space-xs) var(--space-lg); border-radius: var(--radius-pill);
  background: linear-gradient(135deg, var(--color-accent), var(--color-accent-2)); color: var(--color-accent-ink);
  box-shadow: 0 0 24px -6px var(--color-accent);
  transition: box-shadow var(--dur-med) var(--ease-out);
}
.bar__cta:hover { box-shadow: 0 0 32px -4px var(--color-accent); }
.bar__cta:active { transform: translateY(1px); }

/* ── The style switch: AI spark (crm) ↔ diamond (luksus) ─────────────────── */
.stil {
  position: relative; width: 40px; height: 40px; flex-shrink: 0; padding: 0; display: grid; place-items: center; cursor: pointer;
  border-radius: 50%; border: 1px solid var(--color-rule-strong); background: var(--color-panel-hi); color: var(--color-accent);
  transition: border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-med) var(--ease-out);
}
.stil:hover { border-color: var(--color-accent); box-shadow: 0 0 22px -6px var(--color-accent); }
.stil:active { transform: translateY(1px); }
.stil svg { grid-area: 1 / 1; width: 20px; height: 20px; transition: opacity var(--dur-med) var(--ease-out), transform var(--dur-med) var(--ease-out); }
.stil__ai { fill: currentColor; }
.stil__lux { fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linejoin: round; opacity: 0; transform: scale(0.6) rotate(-20deg); }
:root[data-stil="luksus"] .stil__ai { opacity: 0; transform: scale(0.6) rotate(20deg); }
:root[data-stil="luksus"] .stil__lux { opacity: 1; transform: none; }
.stil__hint {
  position: absolute; top: calc(100% + var(--space-xs)); left: 50%; transform: translateX(-50%);
  font: 500 var(--text-xs)/1.3 var(--font-mono); letter-spacing: 0.06em; white-space: nowrap;
  color: var(--color-accent-ink); background: var(--color-accent); border-radius: var(--radius-pill); padding: 3px 10px;
  opacity: 0; pointer-events: none; transition: opacity var(--dur-med) var(--ease-out);
}
.stil.is-hint .stil__hint { opacity: 1; }
.stil.is-hint { animation: stil-pulse 1.6s var(--ease-out) 2; }
@keyframes stil-pulse { 0% { box-shadow: 0 0 0 0 var(--color-accent); } 100% { box-shadow: 0 0 0 14px var(--color-glow-none); } }

/* ── The letter, on glass ───────────────────────────────────────────────── */
.letter {
  max-width: 44rem; margin: var(--space-3xl) auto var(--space-3xl);
  padding: var(--space-2xl) clamp(var(--space-lg), 5vw, var(--space-3xl));
  background: var(--color-panel); border: 1px solid var(--color-rule); border-radius: var(--radius-card);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 30px 80px -40px var(--color-shadow);
}
.kicker { font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: 0.22em; text-transform: uppercase; color: var(--color-accent); margin-bottom: var(--space-md) !important; }
.letter h1 { font-size: var(--text-display); line-height: 1.02; margin-bottom: var(--space-xl); }
.accent { color: var(--color-accent); text-shadow: 0 0 40px var(--color-glow); }
.letter p + p { margin-top: var(--space-md); }
.letter strong { font-weight: 500; color: var(--color-ink); }
.letter .quiet { color: var(--color-muted); }
.sign { margin-top: var(--space-xl) !important; font-family: var(--font-display); font-size: var(--text-lg); line-height: 1.2; }
.sign small { display: block; margin-top: var(--space-2xs); font-family: var(--font-body); font-size: var(--text-sm); color: var(--color-muted); }

/* ── Product cards ──────────────────────────────────────────────────────── */
.work { padding: var(--space-xl) 0 var(--space-3xl); }
.work h2 { font-size: var(--text-2xl); line-height: 1.05; text-align: center; }
.work__sub { margin-top: var(--space-xs) !important; text-align: center; color: var(--color-muted); }
.cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-lg); margin: var(--space-2xl) 0 0; padding: 0; list-style: none; }
.card {
  position: relative; height: 100%;
  display: flex; flex-direction: column; gap: var(--space-md);
  padding: var(--space-xl); text-decoration: none;
  background: var(--color-panel); border: 1px solid var(--color-rule); border-radius: var(--radius-card);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  transition: border-color var(--dur-med) var(--ease-out), box-shadow var(--dur-med) var(--ease-out), transform var(--dur-med) var(--ease-out);
}
.card:hover, .card:focus-visible { border-color: var(--color-rule-strong); box-shadow: 0 0 0 1px var(--color-rule-strong), 0 20px 60px -30px var(--color-accent); transform: translateY(-2px); }
.card:active { transform: translateY(0); }
.card__for { font-family: var(--font-display); font-size: var(--text-xl); line-height: 1.05; letter-spacing: var(--display-track); }
.card__products { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--space-sm); flex: 1; }
.card__products li { color: var(--color-muted); }
.card__products b { color: var(--color-accent); font-weight: 500; }
.card__go { font-size: var(--text-sm); font-weight: 500; color: var(--color-ink); white-space: nowrap; }
.card__go::after { content: "\2192"; margin-left: 0.4em; display: inline-block; transition: transform var(--dur-fast) var(--ease-out); }
.card:hover .card__go::after { transform: translateX(4px); }

/* ── One action ─────────────────────────────────────────────────────────── */
.talk { max-width: 44rem; margin: 0 auto; padding: var(--space-2xl) 0 var(--space-4xl); text-align: center; }
.talk h2 { font-size: var(--text-2xl); line-height: 1.05; margin-bottom: var(--space-sm); }
.talk p { color: var(--color-muted); }
.talk__row { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: var(--space-md) var(--space-lg); margin-top: var(--space-xl); }
.btn {
  display: inline-flex; align-items: center; justify-content: center; min-height: 54px; padding: 0 var(--space-2xl);
  border-radius: var(--radius-pill); white-space: nowrap; text-decoration: none;
  font-weight: 500; font-size: var(--text-md);
  background: linear-gradient(135deg, var(--color-accent), var(--color-accent-2)); color: var(--color-accent-ink);
  box-shadow: 0 0 40px -8px var(--color-accent);
  transition: box-shadow var(--dur-med) var(--ease-out);
}
.btn:hover { box-shadow: 0 0 56px -6px var(--color-accent); }
.btn:active { transform: translateY(1px); }
.talk__tel { color: var(--color-muted); white-space: nowrap; text-underline-offset: 4px; }
.talk__tel:hover { color: var(--color-ink); }

/* Tablets and phones: the two product links move to a second row, so nothing runs off the edge (768 px did). */
@media (max-width: 960px) {
  .bar { flex-wrap: wrap; row-gap: var(--space-2xs); gap: var(--space-sm); padding: var(--space-xs) var(--bx-gutter); }
  .bar__nav { order: 3; width: 100%; justify-content: center; border-top: 1px solid var(--color-rule); padding-top: var(--space-2xs); }
  .bar__nav a { padding: var(--space-xs) var(--space-xs); }
}
@media (max-width: 760px) {
  .bar { position: relative; }   /* two rows: not sticky on phones, it would eat the screen */
  .letter { margin: var(--space-xl) auto var(--space-2xl); padding: var(--space-xl) var(--space-lg); }
  .cards { grid-template-columns: minmax(0, 1fr); }
  .card { padding: var(--space-lg); }
  .talk { padding-bottom: var(--space-3xl); }
}
@media (max-width: 400px) {
  .bar { gap: var(--space-xs); }
  .bar__nav a { font-size: var(--text-sm); }
  .bar__cta { font-size: var(--text-sm); padding: var(--space-xs) var(--space-sm); }
  .stil { width: 34px; height: 34px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 1ms !important; }
  .card:hover { transform: none; }
}
}