@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300..700&family=Inter+Tight:wght@300..700&family=JetBrains+Mono:wght@400;500&display=swap');
/* Blue Horn Tech — MD3 scheme from the brand palette:
   #2062CC (primary blue), #000A5C (deep navy), #92B5F0 (light blue).
   Role→tone mapping follows the MD3 spec: light primary tone 40 with container at 90;
   dark primary tone 80 with container at 30. Error stays static per spec. */
:root{
  --md-sys-color-primary:#2062CC;
  --md-sys-color-on-primary:#FFFFFF;
  --md-sys-color-primary-container:#D9E5FF;
  --md-sys-color-on-primary-container:#000A5C;
  --md-sys-color-secondary:#405A80;
  --md-sys-color-on-secondary:#FFFFFF;
  --md-sys-color-secondary-container:#DAE3F7;
  --md-sys-color-on-secondary-container:#001A45;
  --md-sys-color-tertiary:#00489E;
  --md-sys-color-on-tertiary:#FFFFFF;
  --md-sys-color-tertiary-container:#92B5F0;
  --md-sys-color-on-tertiary-container:#000A5C;
  --md-sys-color-surface:#FAFAFD;
  --md-sys-color-on-surface:#1A1C20;
  --md-sys-color-on-surface-variant:#43474F;
  --md-sys-color-surface-container-lowest:#FFFFFF;
  --md-sys-color-surface-container-low:#F3F4F9;
  --md-sys-color-surface-container:#EDEFF5;
  --md-sys-color-surface-container-high:#E7E9F0;
  --md-sys-color-surface-container-highest:#E1E4EC;
  --md-sys-color-surface-dim:#D9DCE4;
  --md-sys-color-surface-bright:#FAFAFD;
  --md-sys-color-outline:#73777F;
  --md-sys-color-outline-variant:#C3C6CF;
  --md-sys-color-inverse-surface:#000A5C;
  --md-sys-color-inverse-on-surface:#E6ECFF;
  --md-sys-color-inverse-primary:#92B5F0;
}
.md3-dark{
  --md-sys-color-primary:#92B5F0;
  --md-sys-color-on-primary:#00295E;
  --md-sys-color-primary-container:#2062CC;
  --md-sys-color-on-primary-container:#D9E5FF;
  --md-sys-color-secondary:#B6C7E6;
  --md-sys-color-on-secondary:#1F2F47;
  --md-sys-color-secondary-container:#364966;
  --md-sys-color-on-secondary-container:#D9E5FF;
  --md-sys-color-tertiary:#92B5F0;
  --md-sys-color-on-tertiary:#000A5C;
  --md-sys-color-tertiary-container:#00317A;
  --md-sys-color-on-tertiary-container:#C9D9FF;
  --md-sys-color-surface:#0B0E1A;
  --md-sys-color-on-surface:#E3E6EF;
  --md-sys-color-on-surface-variant:#BFC6D6;
  --md-sys-color-surface-container-lowest:#06080F;
  --md-sys-color-surface-container-low:#101426;
  --md-sys-color-surface-container:#141A2E;
  --md-sys-color-surface-container-high:#1D2540;
  --md-sys-color-surface-container-highest:#263049;
  --md-sys-color-surface-dim:#06080F;
  --md-sys-color-surface-bright:#2B3550;
  --md-sys-color-outline:#8892A8;
  --md-sys-color-outline-variant:#3A4256;
  --md-sys-color-inverse-surface:#E3E6EF;
  --md-sys-color-inverse-on-surface:#1D2540;
  --md-sys-color-inverse-primary:#2062CC;
}

/* Page ground for dark-scheme pages. Scheme hex values belong in the theme layer;
   components reference roles only. */
body:has(.md3-dark){
  background: #06080F;
}

/* Height of the sticky site header, so anything that sticks beneath it has one
   number to reference instead of a per-page guess. The declared value is the
   header with its announcement strip; pages that stick below it also measure the
   real header at runtime and overwrite this, so hiding the strip self-corrects. */
:root{
  --bht-header-h: 103px;
  /* Section rhythm. Adjacent sections share no border, so the visible gap between
     two content blocks is 2x this value. Scales with the viewport so phones don't
     get desktop-sized voids. */
  --bht-section-y: clamp(72px, 9vw, 128px);
  --bht-section-y-end: clamp(96px, 12vw, 168px);
}

/* ---- Art direction: quiet confidence ----
   Elegance here is subtraction. Texture overlays, corner brackets and looping
   icon motion read as effort, so they are switched off globally. What stays is
   the work: light type, generous space, one accent, and motion only where it
   explains something (diagrams, reveals). Selectors are scoped to .md3-dark so
   they out-rank the per-page rules they replace. */
.md3-dark .film,
.md3-dark .lines{display:none}

.md3-dark .hud::before,
.md3-dark .hud::after{display:none}

.md3-dark .mono{font-weight:400;letter-spacing:.22em}

.md3-dark [style*="animation:drift"],
.md3-dark [style*="animation:jitter"]{animation:none !important}

.md3-dark h1,
.md3-dark h2{text-wrap:pretty}
.md3-dark p{text-wrap:pretty}

/* ---- Premium depth ----
   Every section carries a slow, soft bloom of brand light, alternating sides so
   the page reads as one lit space. Cards sit on it with a lit top edge and a
   deep, blue-tinted shadow, and rise toward the light on hover. Defined once
   here so every page gets the same atmosphere without per-page markup. */
@keyframes bht-bloom{0%,100%{translate:0 0;scale:1}50%{translate:-4vw 3vh;scale:1.08}}
.md3-dark section{position:relative;isolation:isolate}
.md3-dark section::before{content:'';position:absolute;z-index:-1;pointer-events:none;top:-12%;right:-14%;width:62vw;max-width:920px;aspect-ratio:1;border-radius:var(--md-sys-shape-corner-full);background:radial-gradient(circle,color-mix(in srgb, var(--md-sys-color-primary-container) 30%, transparent) 0%,transparent 66%);filter:blur(36px);animation:bht-bloom 38s ease-in-out infinite}
.md3-dark section:nth-of-type(even)::before{right:auto;left:-16%;top:8%;background:radial-gradient(circle,color-mix(in srgb, var(--md-sys-color-primary) 15%, transparent) 0%,transparent 64%);animation-duration:46s;animation-direction:reverse}
.md3-dark section:nth-of-type(3n)::before{background:radial-gradient(circle,color-mix(in srgb, var(--md-sys-color-tertiary-container) 28%, transparent) 0%,transparent 66%)}

.md3-dark .hud,
.md3-dark .plat,
.md3-dark .navcard{
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, var(--md-sys-color-on-surface) 7%, transparent),
    0 1px 2px color-mix(in srgb, var(--md-sys-color-shadow) 40%, transparent),
    0 28px 64px -28px color-mix(in srgb, var(--md-sys-color-primary-container) 60%, transparent);
  transition:box-shadow .4s cubic-bezier(0.2,0,0,1),border-color .3s cubic-bezier(0.2,0,0,1),background-color .3s cubic-bezier(0.2,0,0,1);
}
.md3-dark .hud:hover,
.md3-dark .plat:hover,
.md3-dark .navcard:hover{
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, var(--md-sys-color-on-surface) 10%, transparent),
    0 2px 4px color-mix(in srgb, var(--md-sys-color-shadow) 45%, transparent),
    0 36px 80px -24px color-mix(in srgb, var(--md-sys-color-primary-container) 80%, transparent);
}
@media (prefers-reduced-motion: reduce){.md3-dark section::before{animation:none}}
.md3-dark .hud,
.md3-dark .plat,
.md3-dark .navcard,
.md3-dark figure{border-radius:var(--md-sys-shape-corner-medium)}
.md3-dark .figbox{border-radius:var(--md-sys-shape-corner-medium)}

/* hide loading placeholder boxes for header/footer imports */
.sc-placeholder:not(:has(.sc-placeholder-error)){background:transparent !important;border-color:transparent !important;outline:0 !important;box-shadow:none !important}
.sc-placeholder:not(:has(.sc-placeholder-error))::before,.sc-placeholder:not(:has(.sc-placeholder-error))::after{display:none !important}

/* ---- Brand motif: the Blue Horn chevrons + one signal accent ----
   The logo is stacked chevrons, so chevrons replace stock arrows, bullets and
   label marks. Signal amber is the single warm accent: used only for live
   states (active section, pulses, open slots, problem markers). */
:root{
  --bht-signal:#B26A00;
  --bht-chev1:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 16'%3E%3Cpath d='M0 0H4L10 8L4 16H0L6 8Z'/%3E%3C/svg%3E");
  --bht-chev3:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 16'%3E%3Cpath d='M0 0H4L10 8L4 16H0L6 8Z M9 0H13L19 8L13 16H9L15 8Z M18 0H22L28 8L22 16H18L24 8Z'/%3E%3C/svg%3E");
}
.md3-dark{--bht-signal:#FFB547}
@keyframes bht-chev-march{0%{transform:translateX(0)}50%{transform:translateX(5px)}100%{transform:translateX(0)}}
@keyframes bht-signal-ping{0%{box-shadow:0 0 0 0 color-mix(in srgb, var(--bht-signal) 70%, transparent)}70%{box-shadow:0 0 0 9px transparent}100%{box-shadow:0 0 0 0 transparent}}
/* CTA arrow: plain icon, slides slightly on hover */
.md3-dark .bht-cta-ic{display:inline-block;flex:none;transition:transform .3s cubic-bezier(0.2,0,0,1)}
.md3-dark a:hover > .bht-cta-ic,.md3-dark button:hover > .bht-cta-ic{transform:translateX(3px)}
/* Section eyebrow labels carry a single chevron */
.md3-dark .bht-eyebrow{display:inline-flex;align-items:center;gap:10px}
.md3-dark .bht-eyebrow::before{content:'';flex:none;width:7px;height:11px;background:currentColor;-webkit-mask:var(--bht-chev1) no-repeat center/contain;mask:var(--bht-chev1) no-repeat center/contain}
/* "Open slots" live dot uses the signal colour */
.md3-dark .bht-live{background:var(--bht-signal) !important;animation:bht-signal-ping 1.9s ease-out infinite !important}
.md3-dark .bht-live-wrap{color:var(--bht-signal) !important}
@media (prefers-reduced-motion: reduce){.md3-dark .bht-cta-ic{transition:none}}

/* ---- Type system ----
   Display: Space Grotesk, geometric with engineered details, for headlines.
   Body/UI: Inter Tight, high legibility at small sizes, for text and controls.
   Mono: JetBrains Mono, for labels, numbers and technical marks. */
.md3-dark{
  --md-ref-typeface-brand:'Space Grotesk',system-ui,sans-serif;
  --md-ref-typeface-plain:'Inter Tight',system-ui,sans-serif;
  font-family:'Inter Tight',system-ui,sans-serif;
  font-feature-settings:'ss01','cv11';
  -webkit-font-smoothing:antialiased;
}
.md3-dark h1,.md3-dark h2,.md3-dark h3,.md3-dark .wk-title{font-family:'Space Grotesk',system-ui,sans-serif;font-stretch:normal;text-wrap:pretty}
.md3-dark h1{font-weight:500;letter-spacing:-0.035em}
.md3-dark h2{font-weight:500;letter-spacing:-0.025em}
.md3-dark h3{font-weight:500;letter-spacing:-0.01em}
.md3-dark p{text-wrap:pretty}
.md3-dark .mono{font-family:'JetBrains Mono',ui-monospace,monospace;letter-spacing:0.04em}

/* ---- Hero scroll cue + text rhythm ---- */
@keyframes bht-cue{0%{transform:translateY(-16px)}100%{transform:translateY(44px)}}
.bht-cue-dot{animation:bht-cue 1.8s cubic-bezier(0.2,0,0,1) infinite}
@media (max-height:640px){.bht-cue{display:none !important}}
@media (prefers-reduced-motion: reduce){.bht-cue-dot{animation:none}}
.md3-dark section h2 + p,.md3-dark section h1 + p{margin-top:0}
.md3-dark section p{line-height:1.6}
.md3-dark section h2{line-height:1.08}

/* ---- Fill the width on small screens ---- */
@keyframes bht-fade-up{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@media (max-width:720px){
  .md3-dark h1 .lm,.md3-dark h2 .lm{display:inline;overflow:visible;padding:0;margin:0}
  .md3-dark h1 .lm > span,.md3-dark h2 .lm > span{display:inline;animation:bht-fade-up .5s cubic-bezier(0.05,0.7,0.1,1) both !important}
  .md3-dark h1 .lm + .lm::before,.md3-dark h2 .lm + .lm::before{content:' '}
}

/* ---- Home hero: wider copy column, smaller showcase on desktop ---- */
@media (min-width:1100px){.bht-hero-grid{grid-template-columns:minmax(0,1.45fr) minmax(0,1fr) !important}}

/* Backdrop never blocks clicks (footer links sat under it) */
[data-sc-name="TechBackdrop"]{pointer-events:none !important}