:root, :root[data-bd-theme="dark"] {
  --bd-bg: #090807; --bd-bg-rgb: 9,8,7;
  --bd-surf: #0C0B09; --bd-surf-rgb: 20,18,15;
  --bd-surf-2: #14120F;
  --bd-ink: #F6F1E7; --bd-ink-rgb: 246,241,231;
  --bd-muted: #C8C0B3;
  --bd-dim: #9A9285;
  --bd-faint: #4A443A;
  --bd-gold: #C9A55C; --bd-gold-rgb: 201,165,92;
  --bd-gold-lite: #E6C27A;
  --bd-gold-deep: #96742F;
  --bd-on-gold: #090807;
  --bd-scan: .35;
  color-scheme: dark;
}
:root[data-bd-theme="light"] {
  --bd-bg: #F7F3EA; --bd-bg-rgb: 247,243,234;
  --bd-surf: #FFFDF8; --bd-surf-rgb: 255,255,255;
  --bd-surf-2: #F0E9DB;
  --bd-ink: #191713; --bd-ink-rgb: 25,23,19;
  --bd-muted: #4E483F;
  --bd-dim: #6B6459;
  --bd-faint: #B2A896;
  --bd-gold: #8A6720; --bd-gold-rgb: 138,103,32;
  --bd-gold-lite: #9C7526;
  --bd-gold-deep: #6B4F14;
  --bd-on-gold: #FFFDF7;
  --bd-scan: .12;
  color-scheme: light;
}
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--bd-bg); color: var(--bd-ink); font-family: 'Hanken Grotesk', system-ui, sans-serif; -webkit-font-smoothing: antialiased; overflow-x: hidden; transition: background .35s ease, color .35s ease; }
a { color: var(--bd-gold-lite); text-decoration: none; }
a:hover { color: var(--bd-ink); }
::selection { background: var(--bd-gold); color:var(--bd-on-gold); }
@keyframes bd-float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
@keyframes bd-scan { 0% { transform: translateY(-100%); } 100% { transform: translateY(400%); } }
@keyframes bd-pulse { 0%,100% { opacity: .25; } 50% { opacity: .8; } }
@keyframes bd-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes bd-blink { 0%,45% { opacity: 1; } 50%,100% { opacity: 0; } }
#bd-menu-btn { display: none; }
@media (max-width: 1060px) {
  #bd-nav { display: none !important; }
  #bd-menu-btn { display: grid !important; }
}
@media (max-width: 700px) { #bd-tagline { display: none !important; } }
[data-reveal] { opacity: 0; transform: translateY(28px); transition: opacity .9s cubic-bezier(.16,1,.3,1), transform .9s cubic-bezier(.16,1,.3,1); }
[data-reveal].bd-in { opacity: 1; transform: none; }

/* Hover states (were `style-hover` attributes in the source design). */
.bd-h-edge:hover { border-color:var(--bd-gold); }
.bd-h-chip:hover { border-color:var(--bd-gold); color:var(--bd-ink); }
.bd-h-solid:hover { background:var(--bd-gold-lite); }
.bd-h-ghost:hover { border-color:var(--bd-gold); color:var(--bd-gold); }

/* The design animates heavily; honour a reduced-motion preference. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  [data-reveal] { opacity: 1 !important; transform: none !important; transition: none; }
  * { animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
}

/* Keyboard focus, which the inline styles never covered. */
a:focus-visible, button:focus-visible {
  outline: 2px solid var(--bd-gold);
  outline-offset: 3px;
  border-radius: 4px;
}

/* At phone width the header row (logo + menu + theme + lang + CTA) overflows and
   clips the CTA. Drop it there — `#bd-menu-panel` links to #contact, and the hero
   CTA sits just below the fold. Same breakpoint the source design uses for the tagline. */
@media (max-width: 700px) {
  /* The header row (logo + menu + theme + lang + CTA) is ~50px too wide for a 360px
     phone and clips its right edge. Drop the CTA — `#bd-menu-panel` links to #contact
     and the hero CTA sits just below the fold — then tighten what's left so the theme
     and language controls both stay fully on screen and readable. */
  #bd-header-cta { display: none !important; }
  header { padding-left: 14px !important; padding-right: 14px !important; gap: 10px !important; }
  header > div:last-child { gap: 8px !important; }
  #bd-theme, #bd-lang { padding: 6px 8px !important; font-size: 10px !important; letter-spacing: .08em !important; }
  #bd-menu-btn { width: 36px !important; height: 36px !important; }
}