/* kernfabrikat · design foundation / review phase 1
   Only index.html opts in via .design-foundation. No new runtime dependencies.
   1. Shared tokens and baseline   2. Header   3. Hero   4. Vision/problem duo
   Following sections only inherit the baseline palette; layout work is deferred. */
.design-foundation {
  --df-background: #061625;
  --df-surface: #091d30;
  --df-card: #0d2941;
  --df-border: rgba(125,190,220,.15);
  --df-border-strong: rgba(125,190,220,.3);
  --df-text: #f3f8fc;
  --df-text-secondary: #b7cbdc;
  --df-text-muted: #96b0c4;
  --df-accent: #24c5ed;
  --df-accent-soft: rgba(36,197,237,.09);
  --df-glow: rgba(18,149,208,.15);
  --df-glow-strong: rgba(21,174,225,.25);
  --df-radius: 12px;
  --df-width: 1560px;

  /* Map the existing design vocabulary; keep component and page compatibility. */
  --kf-bg-deep: var(--df-background);
  --kf-bg-main: var(--df-background);
  --kf-bg-section: var(--df-background);
  --kf-bg-card: var(--df-surface);
  --kf-bg-card-hover: var(--df-card);
  --kf-accent: var(--df-accent);
  --kf-accent-bright: var(--df-accent);
  --kf-accent-hover: #70def7;
  --kf-accent-soft: var(--df-accent-soft);
  --kf-text: var(--df-text);
  --kf-text-soft: var(--df-text-secondary);
  --kf-text-muted: var(--df-text-muted);
  --kf-border: var(--df-border);
  --kf-border-strong: var(--df-border-strong);
  --kf-glow: var(--df-glow);
  --kf-glow-strong: var(--df-glow-strong);
  /* Redeclare aliases at this scope: inherited :root aliases otherwise retain
     their computed root values rather than using the local token overrides. */
  --bg: var(--df-background);
  --bg-deep: var(--df-background);
  --surface: var(--df-surface);
  --surface-2: var(--df-card);
  --border: var(--df-border);
  --border-2: var(--df-border-strong);
  --text: var(--df-text);
  --text-1: var(--df-text-secondary);
  --text-2: var(--df-text-muted);
  --hl: var(--df-accent);
  --accent: var(--df-accent);
  --btn-bg: var(--df-accent);
  --btn-bg-hover: #70def7;
  --btn-ink: var(--df-background);
  --ring: var(--df-accent);
  --icon-badge-bg: var(--df-accent-soft);
  --icon-ring-fg: var(--df-accent);
  color: var(--text-1);
  background: var(--bg);
}
/* One continuous blue base; local light is applied around the actual visuals. */
.design-foundation .slide, .design-foundation .site-footer { background-image: none; }
.design-foundation .btn { border-radius: 9px; }
.design-foundation .btn--primary:hover { opacity: 1; }
.design-foundation :focus-visible { outline-color: var(--df-accent); }
/* Header: existing navigation and mobile behaviour remain intact. */
.design-foundation .site-header__inner {
  max-width: var(--df-width);
  width: calc(100% - 112px);
  padding-inline: 0;
  min-height: 82px;
}
.design-foundation .site-header { background: rgba(6,22,37,.91); }
.design-foundation .wordmark__text { font-size: 22px; letter-spacing: -.025em; }
.design-foundation .site-nav__list a { font-size: 14px; }
.design-foundation .site-nav__cta { background: var(--df-accent-soft); color: var(--df-text); border-color: rgba(36,197,237,.35); padding: 14px 20px; font-size: 13px; }
.design-foundation .site-nav__cta:hover { background: rgba(36,197,237,.17); }
/* Hero: existing blue illustration, full visibility at the focal point and
   long radial fade at its perimeter; no image box or background grid. */
.foundation-hero { padding-block: 44px 56px; isolation: isolate; }
.foundation-hero .hero { max-width: var(--df-width); width: calc(100% - 112px); padding: 0; display: grid; grid-template-columns: minmax(0,.95fr) minmax(0,1.05fr); align-items: center; gap: 24px; min-height: 680px; }
.foundation-hero .slide__bg { background: radial-gradient(ellipse 42% 72% at 76% 48%, rgba(15,115,176,.16), transparent 80%); }
.foundation-hero .hero__text { max-width: 680px; padding-block: 18px; }
.foundation-hero .hero__brand { margin-bottom: 29px; gap: 11px; }
.foundation-hero .hero__mark { width: 34px; height: 34px; }
.foundation-hero .hero__wordmark { font-size: 29px; font-weight: 400; letter-spacing: -.025em; }
.foundation-hero .hero__title { font-size: clamp(52px,4.5vw,80px); font-weight: 600; line-height: 1.07; letter-spacing: -.045em; text-wrap: initial; max-width: 670px; }
.foundation-hero .hero__title .hl { color: var(--df-accent); }
.foundation-hero .hero__principle { font-size: 22px; line-height: 1.6; letter-spacing: -.015em; color: var(--df-text); margin-top: 28px; }
.foundation-hero .hero__desc { font-size: 16px; line-height: 1.85; max-width: 530px; margin-top: 19px; }
.foundation-hero .hero__actions { margin-top: 30px; gap: 13px; }
.foundation-hero .btn--lg { min-height: 52px; padding: 15px 23px; font-size: 14px; gap: 21px; }
.foundation-hero .btn--primary { box-shadow: 0 6px 25px -12px rgba(36,197,237,.5); }
.foundation-hero .btn--ghost { background: rgba(8,29,46,.5); border-color: rgba(125,190,220,.23); }
.foundation-hero .hero__pillars { margin-top: 30px; gap: 24px; }
.foundation-hero .hero__pillars li { flex-direction: row; gap: 7px; }
.foundation-hero .hero__pillars svg { width: 17px; height: 17px; color: #76cce7; }
.foundation-hero .hero__pillars span { font-size: 12px; }
/* All three asset slots (size, crop, mask, glow) live in visual-assets.css. */
/* Two linked perspectives, no card outlines and no abrupt section colours. */
.foundation-perspectives { position: relative; background: radial-gradient(ellipse 62% 54% at 50% 37%, rgba(15,100,147,.09), transparent 85%), var(--df-background); padding-block: 38px 68px; }
.foundation-perspectives__inner { max-width: var(--df-width); width: calc(100% - 112px); padding: 0; display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 110px; }
#vision.foundation-perspective, #problem.foundation-perspective { background: transparent; scroll-margin-top: 108px; }
.foundation-perspective { min-width: 0; }
.foundation-perspective__heading { display: flex; align-items: center; gap: 15px; }
.foundation-perspective__heading > span { color: #76acc5; font: 11px/1.5 var(--font-mono); letter-spacing: .05em; }
.foundation-perspective__heading h2 { font-size: 36px; font-weight: 500; letter-spacing: -.03em; }
.foundation-perspective__copy { max-width: 620px; }
.foundation-perspective__copy .slide__lead { margin-top: 0; color: var(--df-text); font-size: 21px; line-height: 1.5; letter-spacing: -.015em; }
.foundation-perspective__copy > p + p { margin-top: 15px; font-size: 15px; line-height: 1.8; }
.foundation-perspective__copy .vision__slogan { color: var(--df-accent); font-weight: 500; font-size: 13px; }
.foundation-perspective .xlist { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 20px 24px; margin-top: 0; }
.foundation-perspective .xlist li { align-items: flex-start; padding-left: 26px; font-size: 15px; line-height: 1.65; min-height: 0; }
.foundation-perspective .xlist li::before { top: 4px; width: 15px; height: 15px; background: rgba(36,197,237,.055); border: 1px solid rgba(125,190,220,.28); }
.foundation-perspective .xlist li::after { top: 9px; left: 5px; width: 5px; height: 5px; background: #76acc5; border-radius: 50%; }
@media (max-width: 1450px) {
  .design-foundation .site-header__inner, .foundation-hero .hero, .foundation-perspectives__inner { width: calc(100% - 96px); }
  .foundation-hero .hero { grid-template-columns: minmax(0,1fr) minmax(0,1fr); min-height: 610px; }
  .foundation-hero .hero__title { font-size: 64px; }
  .foundation-perspectives__inner { gap: 75px; }
  .foundation-perspective__heading h2 { font-size: 33px; }
}
@media (max-width: 1100px) {
  .design-foundation .site-header__inner, .foundation-hero .hero, .foundation-perspectives__inner { width: calc(100% - 64px); }
  .design-foundation .site-nav { gap: 18px; }
  .design-foundation .site-nav__list { gap: 15px; }
  .design-foundation .site-nav__list a { font-size: 12px; }
  .design-foundation .site-nav__cta { padding-inline: 13px; }
  .foundation-hero .hero__title { font-size: 53px; }
  .foundation-hero .hero__principle { font-size: 19px; }
  .foundation-hero .hero__pillars { gap: 12px; }
  .foundation-hero .hero__pillars span { font-size: 11px; }
  .foundation-perspectives__inner { gap: 50px; }
  .foundation-perspective .xlist { grid-template-columns: 1fr; gap: 12px; }
  .foundation-perspective__copy .slide__lead { font-size: 19px; }
}
@media (max-width: 900px) {
  .design-foundation .site-header__inner { min-height: 68px; }
  .design-foundation .site-nav__list a { font-size: 16px; }
  .foundation-hero { padding-block: 35px 24px; }
  .foundation-hero .hero { grid-template-columns: 1fr; gap: 0; min-height: 0; }
  .foundation-hero .hero__text { max-width: 660px; }
  .foundation-hero .hero__title { font-size: 64px; max-width: 650px; }
  .foundation-hero .hero__pillars { gap: 22px; }
  .foundation-perspectives__inner { gap: 32px; }
  .foundation-perspective__heading h2 { font-size: 28px; }
}
@media (max-width: 620px) {
  .design-foundation .site-header__inner, .foundation-hero .hero, .foundation-perspectives__inner { width: calc(100% - 40px); }
  .design-foundation .wordmark__text { font-size: 20px; }
  .foundation-hero { padding-top: 22px; }
  .foundation-hero .hero__text { padding-top: 12px; }
  .foundation-hero .hero__brand { margin-bottom: 24px; }
  .foundation-hero .hero__wordmark { font-size: 25px; }
  .foundation-hero .hero__mark { width: 29px; height: 29px; }
  .foundation-hero .hero__title { font-size: clamp(39px,11.6vw,49px); line-height: 1.1; letter-spacing: -.04em; }
  .foundation-hero .hero__principle { font-size: 17px; margin-top: 22px; }
  .foundation-hero .hero__desc { font-size: 14px; line-height: 1.8; margin-top: 17px; }
  .foundation-hero .hero__actions { margin-top: 23px; gap: 10px; }
  .foundation-hero .btn--lg { width: 100%; min-height: 49px; font-size: 13px; }
  .foundation-hero .hero__pillars { grid-template-columns: repeat(4,minmax(0,1fr)); gap: 9px; margin-top: 24px; justify-items: start; }
  .foundation-hero .hero__pillars li { flex-direction: column; align-items: flex-start; gap: 7px; }
  .foundation-hero .hero__pillars span { font-size: 10px; white-space: nowrap; }
  .foundation-perspectives { padding-block: 22px 44px; }
  .foundation-perspectives__inner { grid-template-columns: 1fr; gap: 48px; }
  .foundation-perspective__heading h2 { font-size: 31px; }
  .foundation-perspective__copy .slide__lead { font-size: 19px; }
  .foundation-perspective__copy > p + p { font-size: 14px; }
  .foundation-perspective__copy .vision__slogan { font-size: 12px; }
  .foundation-perspective .xlist { gap: 14px; }
  .foundation-perspective .xlist li { font-size: 14px; }
}
@media print {
  .foundation-hero .hero { display: block; }
  .foundation-perspectives { background: white; }
  .foundation-perspective__copy .slide__lead, .foundation-hero .hero__principle { color: black; }
}