/* IQ Buddy — dark "3-blue" website theme (v3).
   Deepest navy as the ground color, white type, white logo, electric-blue +
   periwinkle accents. Colors reference the design-system tokens where useful
   (--iq-grad-*, --font-*) and add a dark palette on top. */

.kb-app {
  /* ---- The three blues + navy ground ---- */
  --d0: #10143a;   /* deepest — hero / footer / dark bands ("das Tiefste") */
  --d1: #171c4c;   /* base page ground */
  --d2: #212760;   /* raised panel / card */
  --d3: #2b3277;   /* elevated / hover */
  --mid: #4a6fc8;  /* periwinkle blue (pitch stripes) */
  --elec: #006fff; /* brand electric blue */
  --elec2: #3d8cff;/* brighter electric — text/links/glow on navy */

  --line:  rgba(255,255,255,0.12);
  --line2: rgba(255,255,255,0.07);

  --tx:     #ffffff;               /* headings */
  --tx-body:#c7d2f0;               /* body */
  --tx-mut: #93a2ce;               /* muted / meta */
  --tx-fnt: #6f7cac;               /* faint */

  --logo-filter: brightness(0) invert(1);
  --sh-card: 0 24px 60px rgba(0,0,0,0.5);
  --sh-float: 0 20px 46px rgba(0,0,0,0.5);
  --sh-tile: 0 8px 20px rgba(0,0,0,0.35);

  background: var(--d0);
  transition: background-color .35s var(--ease-out), color .35s var(--ease-out);
  color: var(--tx-body);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
.kb-app *, .kb-app *::before, .kb-app *::after { box-sizing: border-box; }
.kb-app ::selection { background: var(--elec); color: #fff; }

/* ---- Layout ---- */
.kb-wrap  { max-width: 1180px; margin: 0 auto; padding: 0 28px; }
.kb-wrapn { max-width: 900px;  margin: 0 auto; padding: 0 28px; }
.kb-section { padding: 100px 0; position: relative; }
.kb-section.tight { padding: 72px 0; }
.kb-bg-0 { background: var(--d0); }
.kb-bg-1 { background: var(--d1); }
.kb-bg-2 { background: var(--d2); }
.kb-hair-t { border-top: 1px solid var(--line); }
.kb-hair-b { border-bottom: 1px solid var(--line); }

/* ---- Type ---- */
.kb-h { font-family: var(--font-display); font-weight: 800; color: var(--tx);
  letter-spacing: -0.025em; line-height: 1.08; margin: 0; }
.kb-eyebrow { font: 800 13px var(--font-body); letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--elec2); margin: 0; }
.kb-lead { font-size: 19px; line-height: 1.6; color: var(--tx-body); margin: 0; }
.kb-strong { color: var(--tx); font-weight: 700; }
.kb-center { text-align: center; }

/* ---- Buttons ---- */
.kb-btn { display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  font-family: var(--font-body); font-weight: 800; line-height: 1; cursor: pointer;
  border-radius: 999px; border: 1px solid transparent; white-space: nowrap;
  text-decoration: none; transition: transform .12s var(--ease-out), background .18s var(--ease-out), border-color .18s var(--ease-out), box-shadow .2s var(--ease-out); }
.kb-btn:active { transform: scale(0.96); }
.kb-btn-lg { padding: 15px 28px; font-size: 16px; }
.kb-btn-md { padding: 11px 20px; font-size: 15px; }
.kb-btn-sm { padding: 9px 16px; font-size: 14px; }
.kb-btn-primary { background: var(--elec); color: #fff; box-shadow: 0 10px 26px -6px rgba(0,111,255,0.6); }
.kb-btn-primary:hover { background: #1a80ff; box-shadow: 0 14px 32px -6px rgba(0,111,255,0.75); }
.kb-btn-ghost { background: rgba(255,255,255,0.06); color: #fff; border-color: var(--line); }
.kb-btn-ghost:hover { background: rgba(255,255,255,0.12); border-color: rgba(255,255,255,0.34); }
.kb-btn-white { background: #fff; color: var(--d0); }
.kb-btn-white:hover { background: #eaf1ff; }

/* ---- Card ---- */
.kb-card { background: var(--d2); border: 1px solid var(--line); border-radius: 20px; }
.kb-card-2 { background: var(--d1); border: 1px solid var(--line); border-radius: 20px; }
.kb-card-hover { transition: transform .25s var(--ease-out), border-color .25s var(--ease-out), background .25s var(--ease-out); }
.kb-card-hover:hover { transform: translateY(-4px); border-color: rgba(61,140,255,0.5); background: var(--d3); }

/* ---- Badge / chip ---- */
.kb-badge { display: inline-flex; align-items: center; gap: 6px; font: 800 12px var(--font-body);
  letter-spacing: .04em; padding: 5px 11px; border-radius: 999px; }
.kb-badge-soft { background: rgba(61,140,255,0.16); color: #bcd6ff; }
.kb-badge-solid { background: var(--elec); color: #fff; }
.kb-badge-line { background: transparent; border: 1px solid var(--line); color: var(--tx-body); }
.kb-chip { font: 700 13px var(--font-body); color: var(--tx-body);
  background: rgba(255,255,255,0.05); border: 1px solid var(--line); border-radius: 999px; padding: 6px 14px; }

/* ---- Gradient icon badge (signature motif) ---- */
.kb-ib { display: inline-flex; align-items: center; justify-content: center; border-radius: 50%;
  color: #fff; flex: 0 0 auto; }
.kb-ib--blue   { background: var(--iq-grad-blue);   box-shadow: 0 12px 24px rgba(82,175,243,0.28); }
.kb-ib--purple { background: var(--iq-grad-purple); box-shadow: 0 12px 24px rgba(138,91,239,0.28); }
.kb-ib--orange { background: var(--iq-grad-orange); box-shadow: 0 12px 24px rgba(249,123,83,0.28); }
.kb-ib--green  { background: var(--iq-grad-green);  box-shadow: 0 12px 24px rgba(51,197,111,0.26); }
.kb-ib--brand  { background: var(--iq-grad-brand);  box-shadow: 0 12px 24px rgba(0,111,255,0.34); }

/* ---- Links ---- */
/* Links — but NOT buttons (.kb-btn keeps its own color; the generic link rule
   otherwise out-specifies .kb-btn-primary and paints blue-on-blue text). */
.kb-app a:not(.kb-btn) { color: var(--elec2); text-decoration: none; }
.kb-app a:not(.kb-btn):hover { color: #6aa8ff; }
.kb-app a.kb-btn { text-decoration: none; }
.kb-arrowlink { display: inline-flex; align-items: center; gap: 6px; font: 800 14px var(--font-body); color: var(--elec2); }

/* ===================== NAV ===================== */
.kb-nav { position: sticky; top: 0; z-index: 60; transition: background .25s var(--ease-out), border-color .25s var(--ease-out), backdrop-filter .25s; border-bottom: 1px solid transparent; }
.kb-nav.solid { background: rgba(16,20,58,0.82); backdrop-filter: blur(14px); border-bottom-color: var(--line); }
.kb-nav-inner { height: 74px; display: flex; align-items: center; gap: 28px; }
.kb-logo { height: 30px; width: auto; display: block; filter: var(--logo-filter); }
.kb-nav-links { display: flex; gap: 24px; margin-left: 8px; flex: 1; }
.kb-nav-links a { font: 700 15px var(--font-body); color: var(--tx-body); white-space: nowrap; cursor: pointer; }
.kb-nav-links a:hover { color: #fff; }
.kb-lang { display: inline-flex; align-items: center; gap: 2px; background: rgba(255,255,255,0.10); border: 1px solid rgba(255,255,255,0.24); border-radius: 999px; padding: 3px 3px 3px 9px; }
.kb-lang-globe { display: inline-flex; align-items: center; color: var(--tx-body); margin-right: 4px; }
.kb-lang button { font: 800 12.5px var(--font-body); letter-spacing: .04em; color: var(--tx-body); background: transparent; border: 0; cursor: pointer; padding: 5px 11px; border-radius: 999px; transition: all .15s var(--ease-out); }
.kb-lang button:hover:not(.on) { color: #fff; }
.kb-lang button.on { background: var(--elec); color: #fff; }

/* ===================== STAGE HERO ===================== */
.kb-stage { position: relative; min-height: 90vh; min-height: 90svh; display: flex; align-items: center; overflow: hidden; background: var(--d0); }
.kb-wall { position: absolute; inset: 0; display: grid; gap: 10px; padding: 18px; z-index: 0; }
.kb-tile { border-radius: 8px; background: rgba(255,255,255,0.038);
  transition: background .3s var(--ease-out), opacity .45s var(--ease-out), transform .5s var(--ease-bounce), box-shadow .4s ease; }
.kb-tile.warm   { background: rgba(61,140,255,0.16); }
.kb-tile.on     { background: rgba(61,140,255,0.4); }
.kb-tile.dim    { opacity: .3; }
.kb-tile:hover  { background: rgba(61,140,255,0.34); }
.kb-tile.chosen { background: var(--elec); transform: scale(1.12);
  box-shadow: 0 0 0 3px rgba(0,111,255,0.35), 0 16px 46px -6px rgba(0,111,255,0.85); z-index: 3; position: relative; }
/* full-width scrim: keep tiles visible edge-to-edge, gently darken for text */
.kb-scrim { position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(180deg, rgba(16,20,58,0.55) 0%, rgba(16,20,58,0.18) 22%, rgba(16,20,58,0.30) 66%, rgba(16,20,58,0.85) 100%),
    radial-gradient(120% 90% at 18% 60%, rgba(16,20,58,0.78) 0%, rgba(16,20,58,0.30) 45%, rgba(16,20,58,0) 78%); }

/* ---- Feature/step list ---- */
.kb-checkline { display: flex; gap: 11px; font: 500 15.5px var(--font-body); color: var(--tx-body); line-height: 1.5; }
.kb-checkline .ic { color: #4fd08a; display: flex; flex: 0 0 auto; margin-top: 2px; }

/* ---- FAQ ---- */
.kb-faq-q { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 18px 22px; background: none; border: none; cursor: pointer; text-align: left;
  font: 800 17px var(--font-display); color: var(--tx); }
.kb-faq-plus { color: var(--elec2); display: flex; flex: 0 0 auto; transition: transform .2s var(--ease-out); }
.kb-faq-a { padding: 0 22px 20px; font: 500 15.5px var(--font-body); line-height: 1.6; color: var(--tx-body); }

/* ---- Footer ---- */
.kb-foot { background: var(--d0); border-top: 1px solid var(--line); padding-top: 60px; }
.kb-foot-grid { display: grid; grid-template-columns: 1.7fr 1fr 1fr 1fr 1fr; gap: 32px; }
.kb-foot h4 { font: 800 13px var(--font-body); color: #fff; letter-spacing: .04em; margin: 0 0 14px; }
.kb-foot .col a { display: block; font: 600 14px var(--font-body); color: var(--tx-mut); margin-bottom: 10px; cursor: pointer; }
.kb-foot .col a:hover { color: #fff; }
.kb-foot-bar { margin-top: 44px; padding: 22px 0 30px; border-top: 1px solid var(--line); display: flex; justify-content: space-between; flex-wrap: wrap; gap: 10px; font: 600 13px var(--font-body); color: var(--tx-fnt); }

/* ---- Legal / subpage prose ---- */
.kb-legal { padding: 120px 0 96px; }
.kb-legal h1 { font: 800 clamp(34px,4.4vw,52px) var(--font-display); color: var(--tx); letter-spacing: -0.025em; margin: 0 0 8px; }
.kb-legal h2 { font: 800 22px var(--font-display); color: var(--tx); margin: 40px 0 12px; }
.kb-legal p, .kb-legal li { font: 500 16px/1.7 var(--font-body); color: var(--tx-body); }
.kb-legal p { margin: 0 0 14px; }
.kb-legal a { color: var(--elec2); }
.kb-legal .kb-lede { font-size: 19px; color: var(--tx-mut); margin-bottom: 8px; }
.kb-legal strong { color: var(--tx); }
.kb-legal .kb-card { padding: 22px 24px; }
.kb-legal ul { margin: 0 0 14px; padding-left: 20px; }
.kb-legal li { margin-bottom: 6px; }

/* ---- Reveal (matches common.jsx classes) ---- */
.s-reveal.s-hidden { opacity: 0; transform: translateY(26px); }
/* fill-mode BOTH is essential: holds opacity:0 during the (optional) delay and
   before the first painted frame, so revealing elements don't flash visible→hidden
   →fade while scrolling. Above-the-fold content uses state "shown" (no animation),
   so the bundler thumbnail is unaffected. */
.s-reveal.s-anim { animation: kb-rise .7s var(--ease-out) both; will-change: opacity, transform; }
@keyframes kb-rise { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: none; } }
.kb-float { animation: kb-float 6s var(--ease-out) infinite; }
@keyframes kb-float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-13px); } }

@media (prefers-reduced-motion: reduce) {
  .s-reveal.s-hidden { opacity: 1 !important; transform: none !important; }
  .s-reveal.s-anim { animation: none !important; }
  .kb-float, .kb-tile { animation: none !important; transition: none !important; }
}

/* ---- Grids ---- */
.kb-g2 { display: grid; grid-template-columns: 1fr 1fr; }
.kb-g3 { display: grid; grid-template-columns: repeat(3,1fr); }

@media (max-width: 940px) {
  .kb-section { padding: 68px 0; }
  .kb-g2, .kb-g3, .kb-foot-grid { grid-template-columns: 1fr !important; }
  .kb-nav-links { display: none !important; }
  .kb-stage { min-height: 86vh; }
  .kb-wall { gap: 6px; }
}

/* ===================== THEME TOGGLE + LIGHT THEME ===================== */
.kb-themebtn { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 999px; background: rgba(255,255,255,0.10); border: 1px solid rgba(255,255,255,0.24); color: var(--tx-body); cursor: pointer; transition: all .15s var(--ease-out); }
.kb-themebtn:hover { color: #fff; border-color: rgba(255,255,255,0.4); }
.kb-invert { filter: var(--logo-filter); }

.kb-app[data-theme="light"] {
  --d0: #ffffff;
  --d1: #f3f6fa;
  --d2: #ffffff;
  --d3: #eef2f8;
  --mid: #3a5bd0;
  --elec: #006fff;
  --elec2: #006fff;
  --line: #e4e9f0;
  --line2: #eef1f6;
  --tx: #0f1e3d;
  --tx-body: #43506b;
  --tx-mut: #667492;
  --tx-fnt: #98a4bd;
  --logo-filter: none;
  --sh-card: 0 18px 44px rgba(16,39,82,0.14);
  --sh-float: 0 14px 34px rgba(16,39,82,0.16);
  --sh-tile: 0 6px 16px rgba(16,39,82,0.12);
}
.kb-app[data-theme="light"] .kb-nav.solid { background: rgba(255,255,255,0.85); border-bottom-color: var(--line); }
.kb-app[data-theme="light"] .kb-card { box-shadow: 0 2px 10px rgba(16,39,82,0.06); }
.kb-app[data-theme="light"] .kb-card-hover:hover { border-color: rgba(0,111,255,0.5); background: #fff; box-shadow: 0 12px 30px rgba(16,39,82,0.12); }
.kb-app[data-theme="light"] .kb-btn-ghost { background: #fff; color: var(--tx); border-color: var(--line); }
.kb-app[data-theme="light"] .kb-btn-ghost:hover { background: #f3f6fa; border-color: #cbd5e6; }
.kb-app[data-theme="light"] .kb-lang { background: #fff; border-color: var(--line); }
.kb-app[data-theme="light"] .kb-themebtn { background: #fff; border-color: var(--line); color: var(--tx-body); }
.kb-app[data-theme="light"] .kb-themebtn:hover { color: var(--tx); border-color: #cbd5e6; }
.kb-app[data-theme="light"] .kb-chip { background: #fff; }
.kb-app[data-theme="light"] .kb-badge-soft { background: var(--iq-blue-50); color: #0057c7; }
.kb-app[data-theme="light"] .kb-tile { background: #e6ebf3; }
.kb-app[data-theme="light"] .kb-tile.warm { background: color-mix(in srgb, var(--elec) 20%, #e6ebf3); }
.kb-app[data-theme="light"] .kb-tile.on { background: color-mix(in srgb, var(--elec) 48%, #e6ebf3); }
.kb-app[data-theme="light"] .kb-tile:hover { background: color-mix(in srgb, var(--elec) 42%, #e6ebf3); }
.kb-app[data-theme="light"] .kb-tile.chosen { box-shadow: 0 0 0 3px rgba(0,111,255,0.28), 0 16px 40px -8px rgba(0,111,255,0.5); }
/* ---- Dark-mode "flip" bands — every 2nd/3rd content block goes white so the
   page isn't a monotone navy wall. Only kicks in for dark theme; light theme
   already alternates via kb-bg-0/kb-bg-1 and is untouched. ---- */
.kb-bg-flip { background: var(--d1); }
.kb-app[data-theme="dark"] .kb-bg-flip {
  --d0: #ffffff; --d1: #ffffff; --d2: #f3f6fa; --d3: #eef2f8;
  --line: #e4e9f0; --line2: #eef1f6;
  --tx: #0f1e3d; --tx-body: #43506b; --tx-mut: #667492; --tx-fnt: #98a4bd;
  --elec2: #006fff;
  --sh-card: 0 18px 44px rgba(16,39,82,0.14);
  --sh-float: 0 14px 34px rgba(16,39,82,0.16);
  --sh-tile: 0 6px 16px rgba(16,39,82,0.12);
}
.kb-app[data-theme="dark"] .kb-bg-flip .kb-badge-soft { background: var(--iq-blue-50); color: #0057c7; }
.kb-app[data-theme="dark"] .kb-bg-flip .kb-pillar-num { color: rgba(16,39,82,0.10) !important; }
.kb-app[data-theme="dark"] .kb-bg-flip .kb-card-hover:hover { border-color: rgba(0,111,255,0.5); background: #fff; }

.kb-app[data-theme="light"] .kb-scrim {
  background:
    linear-gradient(180deg, rgba(243,246,250,0.5) 0%, rgba(243,246,250,0.1) 22%, rgba(243,246,250,0.35) 66%, var(--d0) 100%),
    radial-gradient(120% 90% at 18% 60%, rgba(243,246,250,0.9) 0%, rgba(243,246,250,0.4) 45%, rgba(243,246,250,0) 78%);
}