/* IBK site redesign 2026 — dark industrial design system.
   Self-hosted fonts (GDPR): Archivo (display), IBM Plex Sans (body),
   IBM Plex Mono (technical labels). All public pages use this sheet;
   the client portal keeps the legacy main.css. */

@font-face { font-family: 'Archivo'; font-style: normal; font-weight: 500; font-display: swap; src: url('/fonts/site/archivo-500.woff2') format('woff2'); }
@font-face { font-family: 'Archivo'; font-style: normal; font-weight: 600; font-display: swap; src: url('/fonts/site/archivo-600.woff2') format('woff2'); }
@font-face { font-family: 'Archivo'; font-style: normal; font-weight: 700; font-display: swap; src: url('/fonts/site/archivo-700.woff2') format('woff2'); }
@font-face { font-family: 'IBM Plex Sans'; font-style: normal; font-weight: 400; font-display: swap; src: url('/fonts/site/ibm-plex-sans-400.woff2') format('woff2'); }
@font-face { font-family: 'IBM Plex Sans'; font-style: normal; font-weight: 500; font-display: swap; src: url('/fonts/site/ibm-plex-sans-500.woff2') format('woff2'); }
@font-face { font-family: 'IBM Plex Sans'; font-style: normal; font-weight: 600; font-display: swap; src: url('/fonts/site/ibm-plex-sans-600.woff2') format('woff2'); }
@font-face { font-family: 'IBM Plex Sans'; font-style: normal; font-weight: 700; font-display: swap; src: url('/fonts/site/ibm-plex-sans-700.woff2') format('woff2'); }
@font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 400; font-display: swap; src: url('/fonts/site/ibm-plex-mono-400.woff2') format('woff2'); }
@font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 500; font-display: swap; src: url('/fonts/site/ibm-plex-mono-500.woff2') format('woff2'); }
@font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 700; font-display: swap; src: url('/fonts/site/ibm-plex-mono-700.woff2') format('woff2'); }

:root {
  --bg: #1A1815;          /* page background */
  --bg-2: #231F1A;        /* raised panels / alternating sections */
  --bg-3: #141210;        /* footer, aside menu */
  --bg-hover: #2B2620;    /* hover state on dark cards */
  --line: #2E2A24;        /* hairline borders */
  --line-2: #3A352D;      /* stronger borders (buttons, inputs) */
  --text: #F4F1EB;        /* primary text on dark */
  --muted: #B4ABA0;       /* secondary text on dark */
  --muted-2: #9A9286;     /* tertiary text on dark */
  --muted-3: #857D71;     /* faint mono labels */
  --accent: #159FBA;      /* cyan accent on dark */
  --accent-ink: #04222B;  /* text on cyan surfaces */
  --accent-deep: #0E7C93; /* cyan accent on sand surfaces */
  --sand: #E7E0D3;        /* light section background */
  --sand-2: #DED7C8;      /* light section background (references) */
  --sand-ink: #2A241E;    /* primary text on sand */
  --sand-muted: #524B41;  /* secondary text on sand */
  --sand-label: #857D71;  /* mono labels on sand */
  --green: #4ADE80;       /* status dot */
  --font-body: 'IBM Plex Sans', -apple-system, sans-serif;
  --font-display: 'Archivo', 'IBM Plex Sans', sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, monospace;
  --pad-x: 48px;          /* horizontal page padding */
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0; background: var(--bg); color: var(--text);
  font-family: var(--font-body); -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
a:hover { color: var(--accent); }
img { max-width: 100%; }

/* Blueprint grid overlays */
.bp-dark {
  background-image: linear-gradient(rgba(244,241,235,0.02) 1px, transparent 1px),
    linear-gradient(90deg, rgba(244,241,235,0.02) 1px, transparent 1px);
  background-size: 20px 20px, 20px 20px;
}
.bp-sand {
  background-image: linear-gradient(rgba(42,36,30,0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(42,36,30,0.05) 1px, transparent 1px);
  background-size: 20px 20px, 20px 20px;
}

/* Typography helpers */
.overline {
  font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.14em;
  text-transform: uppercase; margin: 0 0 16px;
}
.display { font-family: var(--font-display); font-weight: 700; margin: 0; }
h1.display { font-size: clamp(38px, 6vw, 64px); line-height: 1.04; letter-spacing: -0.032em; }
h2.display { font-size: clamp(28px, 4.5vw, 42px); line-height: 1.1; letter-spacing: -0.028em; }
.accent { color: var(--accent); }
.accent-deep { color: var(--accent-deep); }

/* Buttons */
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--accent); color: var(--accent-ink);
  font-weight: 600; font-size: 15px; padding: 16px 28px;
  border: none; cursor: pointer; font-family: inherit;
}
.btn:hover { color: var(--accent-ink); filter: brightness(1.08); }
.btn-outline {
  display: inline-flex; align-items: center; gap: 8px;
  border: 1px solid var(--line-2); color: var(--text);
  font-weight: 500; font-size: 15px; padding: 16px 28px;
  background: none; cursor: pointer; font-family: inherit;
}
.btn-ink {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--accent-ink); color: var(--text);
  font-weight: 600; font-size: 15px; padding: 18px 30px; flex-shrink: 0;
}
.btn-ink:hover { color: #fff; }

/* Sticky header */
.site-header {
  position: sticky; top: 0; z-index: 30;
  display: flex; align-items: center; justify-content: space-between;
  height: 72px; padding: 0 var(--pad-x);
  background: rgba(26,24,21,0.92); backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
}
.brand { display: block; flex-shrink: 0; }
.brand-word { font-size: 25px; font-weight: 700; letter-spacing: -0.015em; line-height: 1; color: var(--text); }
.brand-sub {
  font-family: var(--font-mono); font-size: 9px; font-weight: 500;
  letter-spacing: 0.17em; text-transform: uppercase; color: var(--accent);
  margin-top: 4px; margin-left: 1px; white-space: nowrap;
}
.menu-btn {
  display: flex; flex-direction: column; justify-content: center; gap: 5px;
  width: 40px; height: 40px; background: none; border: 1px solid var(--line);
  color: var(--text); cursor: pointer; padding: 0 11px;
}
.menu-btn span { display: block; height: 1.5px; background: currentColor; }
.menu-btn span:last-child { width: 11px; }
.header-links { display: flex; align-items: center; gap: 28px; font-size: 14px; font-weight: 500; }
.portal-chip {
  display: flex; align-items: center; gap: 8px; border: 1px solid var(--line-2);
  padding: 9px 16px; font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.06em;
}
.dot { width: 7px; height: 7px; border-radius: 50%; background: var(--green); flex-shrink: 0; }

/* Off-canvas menu */
.scrim {
  position: fixed; inset: 0; z-index: 40; background: rgba(10,9,8,0.6);
  opacity: 0; pointer-events: none; transition: opacity 340ms cubic-bezier(0,0,0.2,1);
}
.scrim.open { opacity: 1; pointer-events: auto; }
.aside-menu {
  position: fixed; top: 0; left: 0; z-index: 50; width: 288px; height: 100vh; height: 100dvh;
  display: flex; flex-direction: column; background-color: var(--bg-3);
  background-image: linear-gradient(rgba(244,241,235,0.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(244,241,235,0.055) 1px, transparent 1px);
  background-size: 16px 16px, 16px 16px;
  border-right: 1px solid var(--line);
  transform: translateX(-100%); transition: transform 340ms cubic-bezier(0,0,0.2,1);
  overflow-y: auto;
}
.aside-menu.open { transform: translateX(0); }
.aside-head {
  display: flex; align-items: center; gap: 12px; padding: 20px;
  border-bottom: 1px solid var(--line); background: var(--bg-3);
}
.aside-close {
  margin-left: auto; width: 34px; height: 34px; display: flex; align-items: center;
  justify-content: center; background: none; border: 1px solid var(--line);
  color: var(--text); cursor: pointer; padding: 0;
}
.aside-label {
  padding: 16px 20px 10px; font-family: var(--font-mono); font-size: 9.5px;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted-3);
  background: var(--bg-3);
}
.aside-link {
  display: grid; grid-template-columns: 28px 1fr; align-items: center; gap: 12px;
  padding: 13px 20px; border-top: 1px solid var(--line); background: var(--bg-3);
  transition: background 160ms ease;
}
.aside-link:hover { background: #262119; color: inherit; }
.aside-link .nr { font-family: var(--font-mono); font-size: 11px; color: var(--muted-3); }
.aside-link .lbl { font-size: 14.5px; font-weight: 500; }
.aside-link.active { background: var(--bg-2); box-shadow: inset 3px 0 0 var(--accent); }
.aside-link.active .nr { color: var(--accent); }
.aside-link.active .lbl { font-weight: 600; }
.aside-foot { margin-top: auto; display: flex; flex-direction: column; gap: 1px; background: var(--line); border-top: 1px solid var(--line); }
.aside-foot > * { background: var(--bg-3); }

/* Sections */
.section { padding: 96px var(--pad-x); }
.section-hero { position: relative; padding: 88px var(--pad-x) 76px; }
.section-cta {
  background: var(--accent); color: var(--accent-ink); padding: 64px var(--pad-x);
  display: flex; align-items: center; justify-content: space-between; gap: 40px; flex-wrap: wrap;
}
.section-cta h2 { font-family: var(--font-display); font-size: clamp(28px, 4vw, 40px); font-weight: 700; letter-spacing: -0.028em; margin: 0 0 8px; }
.section-cta p { font-size: 17px; line-height: 1.65; margin: 0; opacity: 0.82; max-width: 640px; }
.hero-grid-mask {
  position: absolute; inset: 0; pointer-events: none;
  background-image: linear-gradient(rgba(244,241,235,0.02) 1px, transparent 1px),
    linear-gradient(90deg, rgba(244,241,235,0.02) 1px, transparent 1px);
  background-size: 20px 20px, 20px 20px;
}

/* Spec table (bordered key/value rows) */
.spec-table { border: 1px solid var(--line); }
.spec-table .head {
  padding: 12px 24px; border-bottom: 1px solid var(--line); background: var(--bg-hover);
  font-size: 14px; font-weight: 600;
}
.spec-row { display: grid; grid-template-columns: minmax(0,180px) minmax(0,1fr); border-bottom: 1px solid var(--line); }
.spec-row:last-child { border-bottom: 0; }
.spec-row .k { padding: 14px 24px; font-family: var(--font-mono); font-size: 13px; color: var(--muted-2); }
.spec-row .v { padding: 14px 24px; font-size: 14px; color: var(--muted); }

/* Forms */
.in {
  width: 100%; box-sizing: border-box; height: 46px; background: var(--bg);
  border: 1px solid var(--line-2); color: var(--text);
  font: 400 15px var(--font-body); padding: 0 14px;
}
.in:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(21,159,186,0.22); }
.in::placeholder { color: var(--muted-3); }
textarea.in { height: auto; min-height: 150px; padding: 12px 14px; resize: vertical; line-height: 1.6; }
.field-label { display: block; font-size: 14px; font-weight: 500; color: var(--muted); margin-bottom: 8px; }

/* FAQ */
details.faq { border-bottom: 1px solid var(--line); }
details.faq:last-child { border-bottom: 0; }
details.faq > summary {
  list-style: none; cursor: pointer; display: flex; align-items: center;
  justify-content: space-between; gap: 16px; padding: 16px 24px;
  font-size: 15px; font-weight: 600; color: var(--text);
}
details.faq > summary::-webkit-details-marker { display: none; }
details.faq > summary .mark { color: var(--accent); flex-shrink: 0; }
details.faq[open] > summary .mark { display: none; }
details.faq[open] > summary .mark-open { display: inline; }
details.faq > summary .mark-open { display: none; color: var(--accent); flex-shrink: 0; }
details.faq > p { padding: 0 24px 18px; font-size: 15px; line-height: 1.7; color: var(--muted); margin: 0; }

/* Footer */
.site-footer { background: var(--bg-3); border-top: 1px solid var(--line); padding: 56px var(--pad-x) 32px; }
.footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 56px; margin-bottom: 48px; }
.footer-col h4 {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--text); margin: 0 0 18px;
}
.footer-col .links { display: flex; flex-direction: column; gap: 10px; font-size: 14px; color: var(--muted-2); }
.footer-base {
  border-top: 1px solid var(--line); padding-top: 24px; display: flex;
  justify-content: space-between; gap: 16px; flex-wrap: wrap;
  font-family: var(--font-mono); font-size: 11px; color: var(--muted-3);
}

/* Responsive */
@media (max-width: 900px) {
  :root { --pad-x: 24px; }
  .section, .section-hero { padding-top: 64px; padding-bottom: 64px; }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 36px; }
  .grid-2col, .grid-5-7, .grid-4-8 { grid-template-columns: 1fr !important; }
}
@media (max-width: 640px) {
  .header-links .hide-sm { display: none; }
  .footer-grid { grid-template-columns: 1fr; }
  .section-cta { flex-direction: column; align-items: flex-start; }
  .portal-chip { padding: 8px 12px; font-size: 11px; }
}
@media (max-width: 480px) {
  .site-header .brand-sub { display: none; }
}