/*
Theme Name: Breitenlohner IT
Theme URI: https://www.breitenlohner-it.de/
Author: Breitenlohner IT
Description: Individuelles WordPress-Theme für Breitenlohner IT mit lokalem SEO-Fokus, performanter Medienauslieferung und klarer Leistungsstruktur.
Version: 29.2.3
Text Domain: breitenlohner-it
*/

:root {
  --bit-navy: #071b38;
  --bit-navy-2: #0a2447;
  --bit-blue: #0873df;
  --bit-purple: #6127c8;
  --bit-pink: #cf0b91;
  --bit-success: #109b73;
  --bit-text: #132f4f;
  --bit-muted: #5d7188;
  --bit-line: #dce5ef;
  --bit-soft: #f4f8fc;
  --bit-white: #ffffff;
  --bit-gradient: linear-gradient(135deg, #0873df 0%, #5a29cd 52%, #cf0b91 100%);
  --bit-shadow: 0 22px 58px rgba(7, 27, 56, .13);
  --bit-shadow-soft: 0 10px 34px rgba(7, 27, 56, .075);
  --bit-radius: 24px;
  --bit-container: 1180px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: #fff;
  color: var(--bit-text);
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
button, input, textarea, select { font: inherit; }
button { cursor: pointer; }
svg { display: block; }
::selection { background: rgba(93, 39, 200, .18); }

.bit-container { width: min(calc(100% - 40px), var(--bit-container)); margin-inline: auto; }
.skip-link { position: absolute; left: -9999px; top: 8px; z-index: 9999; padding: 10px 14px; background: #fff; color: var(--bit-navy); border-radius: 8px; }
.skip-link:focus { left: 8px; }

.bit-header {
  position: sticky;
  top: 0;
  z-index: 100;
  border-bottom: 1px solid rgba(220,229,239,.8);
  background: rgba(255,255,255,.92);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
.bit-header-row { min-height: 88px; display: flex; align-items: center; justify-content: space-between; gap: 28px; }
.bit-brand { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 11px; min-width: 0; text-decoration: none; }
.bit-brand-mark { width: 43px; height: 54px; flex: 0 0 auto; object-fit: contain; }
.bit-brand-name { display: grid; line-height: 1; letter-spacing: -.03em; }
.bit-brand-name strong { color: var(--bit-navy); font-size: 22px; font-weight: 860; }
.bit-brand-name small { margin-top: 4px; color: var(--bit-navy); font-size: 16px; font-weight: 820; letter-spacing: .02em; }
.bit-brand-custom { display: block; width: auto; height: 62px; max-width: 270px; object-fit: contain; object-position: left center; }
.bit-nav { margin-left: auto; }
.bit-menu-list { display: flex; align-items: center; gap: 5px; margin: 0; padding: 0; list-style: none; }
.bit-menu-list > li { position: relative; }
.bit-menu-list a { display: block; padding: 10px 11px; border-radius: 11px; color: #284662; font-size: 14px; font-weight: 760; text-decoration: none; white-space: nowrap; }
.bit-menu-list a:hover, .bit-menu-list a:focus-visible, .bit-menu-list .current-menu-item > a, .bit-menu-list .current-menu-ancestor > a { background: #f0f5fb; color: var(--bit-navy); outline: none; }
.bit-menu-list > li:last-child > a, .bit-button--nav { margin-left: 5px; padding: 11px 17px !important; background: var(--bit-gradient) !important; color: #fff !important; box-shadow: 0 8px 22px rgba(93,39,200,.2); }
.bit-menu-list .sub-menu {
  position: absolute;
  top: calc(100% + 10px);
  left: -10px;
  min-width: 250px;
  margin: 0;
  padding: 10px;
  list-style: none;
  border: 1px solid var(--bit-line);
  border-radius: 16px;
  background: #fff;
  box-shadow: var(--bit-shadow-soft);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-5px);
  transition: .18s ease;
}
.bit-menu-list .sub-menu::before { content: ""; position: absolute; left: 0; right: 0; top: -12px; height: 14px; }
.bit-menu-list li:hover > .sub-menu, .bit-menu-list li:focus-within > .sub-menu { opacity: 1; visibility: visible; transform: translateY(0); }
.bit-menu-list .sub-menu a { padding: 10px 12px; }
.bit-menu-list .menu-item-has-children > a { display: flex; align-items: center; gap: 7px; }
.bit-menu-list .menu-item-has-children > a::after { content: ""; width: 7px; height: 7px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg) translateY(-2px); opacity: .7; }
.bit-menu-list .sub-menu a::after { display: none; }
.bit-menu-toggle { display: none; width: 44px; height: 44px; border: 1px solid var(--bit-line); border-radius: 12px; background: #fff; }
.bit-menu-toggle span { display: block; width: 20px; height: 2px; margin: 4px auto; border-radius: 2px; background: var(--bit-navy); }

.bit-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 48px;
  padding: 12px 19px;
  border: 0;
  border-radius: 13px;
  background: var(--bit-gradient);
  color: #fff;
  font-size: 15px;
  font-weight: 820;
  line-height: 1.2;
  text-decoration: none;
  box-shadow: 0 10px 28px rgba(93,39,200,.22);
  transition: transform .18s ease, box-shadow .18s ease;
}
.bit-button:hover { transform: translateY(-1px); box-shadow: 0 13px 32px rgba(93,39,200,.28); }
.bit-button--ghost { border: 1px solid var(--bit-line); background: #fff; color: var(--bit-navy); box-shadow: none; }
.bit-button--ghost:hover { box-shadow: var(--bit-shadow-soft); }
.bit-button--light { background: #fff; color: var(--bit-navy); box-shadow: none; }
.bit-button--small { min-height: 40px; padding: 9px 14px; font-size: 14px; }

.bit-hero {
  position: relative;
  overflow: hidden;
  padding: 82px 0 72px;
  background:
    radial-gradient(circle at 80% 12%, rgba(8,115,223,.10), transparent 31%),
    radial-gradient(circle at 93% 73%, rgba(207,11,145,.09), transparent 28%),
    linear-gradient(180deg, #fff, #f8fbff);
}
.bit-hero::before { content: ""; position: absolute; inset: 0; pointer-events: none; background-image: linear-gradient(rgba(7,27,56,.028) 1px, transparent 1px), linear-gradient(90deg, rgba(7,27,56,.028) 1px, transparent 1px); background-size: 42px 42px; mask-image: linear-gradient(to bottom, #000, transparent 80%); }
.bit-hero-grid { position: relative; z-index: 1; display: grid; grid-template-columns: 1.12fr .88fr; gap: 58px; align-items: center; }
.bit-kicker { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 20px; padding: 8px 12px; border: 1px solid #d8e1ee; border-radius: 999px; background: rgba(255,255,255,.86); color: #294765; font-size: 14px; font-weight: 800; }
.bit-kicker-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--bit-success); box-shadow: 0 0 0 5px rgba(13,155,114,.12); }
.bit-hero h1, .bit-subhero h1, .bit-page h1 { margin: 0; color: var(--bit-navy); font-size: clamp(44px, 5.6vw, 76px); line-height: .99; letter-spacing: -.055em; }
.bit-hero p { max-width: 720px; margin: 26px 0 0; color: #52677f; font-size: clamp(18px, 2vw, 21px); }
.bit-gradient-text { background: var(--bit-gradient); -webkit-background-clip: text; background-clip: text; color: transparent; }
.bit-hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.bit-trust-row { display: flex; flex-wrap: wrap; gap: 12px 22px; margin-top: 34px; color: #466078; font-size: 14px; font-weight: 760; }
.bit-trust-item { display: inline-flex; align-items: center; gap: 8px; }
.bit-check { width: 20px; height: 20px; border-radius: 50%; display: inline-grid; place-items: center; background: #e6f7f1; color: var(--bit-success); font-size: 12px; }
.bit-hero-visual { position: relative; min-height: 555px; display: grid; place-items: center; }
.bit-hero-glow { position: absolute; width: 430px; height: 430px; border-radius: 50%; background: var(--bit-gradient); opacity: .10; }
.bit-mascot { position: relative; z-index: 2; width: min(100%, 470px); filter: drop-shadow(0 32px 35px rgba(7,27,56,.20)); }
.bit-floating-card { position: absolute; z-index: 3; display: flex; align-items: center; gap: 12px; padding: 14px 16px; border: 1px solid rgba(255,255,255,.82); border-radius: 16px; background: rgba(255,255,255,.92); box-shadow: var(--bit-shadow); backdrop-filter: blur(8px); font-size: 14px; font-weight: 800; color: #243f5d; }
.bit-floating-card strong { display: block; color: var(--bit-navy); }
.bit-floating-card small { display: block; margin-top: 1px; color: var(--bit-muted); font-weight: 650; }
.bit-floating-card--a { top: 17%; right: -56px; }
.bit-floating-card--b { bottom: 14%; left: -12px; }
.bit-status { width: 12px; height: 12px; border-radius: 50%; background: var(--bit-success); box-shadow: 0 0 0 6px rgba(13,155,114,.12); }

.bit-section { padding: 94px 0; }
.bit-section--soft { background: var(--bit-soft); }
.bit-section--dark { background: var(--bit-navy); color: #fff; }
.bit-section--dark .bit-eyebrow { color: #9fc7ff; }
.bit-section--dark .bit-section-title { color: #fff; }
.bit-section--dark .bit-lead { color: #c7d4e5; }
.bit-section--mid { overflow: hidden; }
.bit-section--cta { padding-top: 0; }
.bit-eyebrow { margin-bottom: 11px; color: var(--bit-purple); font-size: 13px; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; }
.bit-section-title { max-width: 800px; margin: 0; color: var(--bit-navy); font-size: clamp(34px, 4.2vw, 54px); line-height: 1.05; letter-spacing: -.042em; }
.bit-lead { max-width: 790px; margin: 18px 0 0; color: var(--bit-muted); font-size: 19px; }

.bit-security-intro { display: grid; grid-template-columns: 1fr .78fr; gap: 60px; align-items: end; }
.bit-security-note { margin: 0; padding: 24px; border-left: 4px solid var(--bit-pink); border-radius: 0 16px 16px 0; background: rgba(255,255,255,.06); color: #d2ddef; }
.bit-security-grid { margin-top: 42px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.bit-security-card { min-height: 286px; display: flex; flex-direction: column; padding: 24px 20px; border: 1px solid rgba(255,255,255,.10); border-radius: 20px; background: rgba(255,255,255,.055); color: inherit; text-decoration: none; transition: transform .18s ease, background .18s ease, border-color .18s ease; }
.bit-security-card:hover { transform: translateY(-4px); background: rgba(255,255,255,.085); border-color: rgba(255,255,255,.22); }
.bit-icon, .bit-feature-icon, .bit-service-icon { width: 52px; height: 52px; flex: 0 0 52px; display: grid; place-items: center; border-radius: 15px; }
.bit-icon { background: rgba(255,255,255,.10); color: #fff; }
.bit-icon--light, .bit-feature-icon, .bit-service-icon { background: linear-gradient(135deg, rgba(8,115,223,.11), rgba(207,11,145,.11)); color: var(--bit-purple); }
.bit-icon svg, .bit-feature-icon svg, .bit-service-icon svg { width: 27px; height: 27px; }
.bit-security-card h3 { margin: 22px 0 8px; font-size: 20px; line-height: 1.2; }
.bit-security-card p { margin: 0 0 18px; color: #c3d0e3; font-size: 15px; line-height: 1.55; }
.bit-card-link { margin-top: auto; color: #c9dcff; font-size: 13px; font-weight: 850; }
.bit-card-link--dark { color: var(--bit-purple); }

.bit-split { display: grid; grid-template-columns: 1fr .86fr; gap: 60px; align-items: start; }
.bit-split--center { align-items: center; }
.bit-check-list { display: grid; gap: 11px; margin-top: 28px; }
.bit-check-list > span { position: relative; padding-left: 31px; color: #425d78; }
.bit-check-list > span::before { content: "✓"; position: absolute; left: 0; top: 2px; width: 21px; height: 21px; display: grid; place-items: center; border-radius: 50%; background: #e5f7f1; color: var(--bit-success); font-size: 12px; font-weight: 900; }
.bit-check-list--large { gap: 16px; }
.bit-check-list--large > span { font-size: 18px; }
.bit-section--dark .bit-check-list > span { color: #d3ddeb; }
.bit-text-link { display: inline-block; margin-top: 18px; color: var(--bit-purple); font-weight: 800; text-decoration: none; }
.bit-text-link:hover { text-decoration: underline; text-underline-offset: 3px; }
.bit-text-link--strong { margin-top: 26px; }

.bit-mascot-tip { position: relative; min-height: 295px; display: grid; grid-template-columns: 180px 1fr; gap: 14px; align-items: end; padding: 26px 28px 28px 16px; overflow: hidden; border: 1px solid var(--bit-line); border-radius: 26px; background: #fff; box-shadow: var(--bit-shadow-soft); color: var(--bit-text); }
.bit-mascot-tip::after { content: ""; position: absolute; width: 230px; height: 230px; right: -100px; top: -110px; border-radius: 50%; border: 40px solid rgba(93,39,200,.06); }
.bit-mascot-tip > * { position: relative; z-index: 1; }
.bit-mascot-tip-figure { height: 240px; align-self: end; overflow: visible; }
.bit-mascot-tip-figure img { width: 165px; height: 250px; object-fit: contain; object-position: center bottom; filter: drop-shadow(0 16px 20px rgba(7,27,56,.16)); }
.bit-mascot-tip-label { color: var(--bit-purple); font-size: 12px; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }
.bit-mascot-tip h3 { margin: 7px 0 7px; color: var(--bit-navy); font-size: 22px; line-height: 1.15; }
.bit-mascot-tip p { margin: 0; color: var(--bit-muted); font-size: 15px; line-height: 1.6; }

.bit-services-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px; margin-top: 44px; }
.bit-service-card { min-height: 235px; display: flex; flex-direction: column; padding: 30px; border: 1px solid var(--bit-line); border-radius: var(--bit-radius); background: #fff; box-shadow: 0 8px 30px rgba(7,27,56,.05); color: inherit; text-decoration: none; transition: transform .18s ease, box-shadow .18s ease; }
.bit-service-card:hover { transform: translateY(-3px); box-shadow: var(--bit-shadow-soft); }
.bit-service-top { display: flex; align-items: center; gap: 16px; }
.bit-service-card h3 { margin: 0; color: var(--bit-navy); font-size: 23px; }
.bit-service-card p { margin: 18px 0 18px; color: var(--bit-muted); }

.bit-audience-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px; margin-top: 42px; }
.bit-audience-card { padding: 34px; border: 1px solid var(--bit-line); border-radius: 26px; background: linear-gradient(145deg, #fff, #fbfdff); color: inherit; text-decoration: none; box-shadow: var(--bit-shadow-soft); }
.bit-audience-card h3 { margin: 22px 0 8px; color: var(--bit-navy); font-size: 28px; }
.bit-audience-card p { margin: 0; color: var(--bit-muted); }

.bit-about { display: grid; grid-template-columns: .8fr 1.2fr; gap: 56px; align-items: center; }
.bit-about--page { grid-template-columns: .85fr 1.15fr; }
.bit-about-logo-wrap { min-height: 410px; display: grid; place-items: center; border-radius: 32px; background: linear-gradient(145deg, #eaf3ff, #f8eef9); overflow: hidden; position: relative; }
.bit-about-logo-wrap--large { min-height: 520px; }
.bit-about-logo-wrap::before, .bit-about-logo-wrap::after { content: ""; position: absolute; border-radius: 50%; border: 44px solid rgba(92,38,199,.07); }
.bit-about-logo-wrap::before { width: 280px; height: 280px; left: -120px; top: -110px; }
.bit-about-logo-wrap::after { width: 230px; height: 230px; right: -100px; bottom: -90px; }
.bit-about-logo { position: relative; z-index: 1; width: 190px; height: auto; object-fit: contain; }
.bit-about-photo-wrap { margin: 0; position: relative; overflow: hidden; aspect-ratio: 4 / 5; min-height: 520px; border-radius: 32px; background: linear-gradient(145deg, #eaf3ff, #f8eef9); box-shadow: var(--bit-shadow-soft); }
.bit-about-photo-wrap::after { content: ""; position: absolute; inset: auto 0 0; height: 28%; pointer-events: none; background: linear-gradient(to top, rgba(7,27,56,.11), transparent); }
.bit-about-photo { width: 100%; height: 100%; object-fit: cover; object-position: center 30%; }
.bit-about-copy p { color: var(--bit-muted); }
.bit-about-badges { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }

.bit-about-photo-wrap--home { min-height: 450px; aspect-ratio: 4 / 5; }
.bit-about-facts { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 10px; margin: 22px 0 18px; }
.bit-about-facts span { padding: 13px 12px; border: 1px solid var(--bit-line); border-radius: 15px; background: #fff; box-shadow: 0 7px 20px rgba(7,27,56,.045); }
.bit-about-facts strong, .bit-about-facts small { display: block; }
.bit-about-facts strong { color: var(--bit-navy); font-size: 15px; }
.bit-about-facts small { margin-top: 2px; color: var(--bit-muted); font-size: 12px; line-height: 1.35; }

.bit-section--service-support { background: linear-gradient(180deg, #fff 0%, #f8fbfe 100%); }
.bit-process--service { margin-top: 24px; }
.bit-process--service > div { position: relative; overflow: hidden; box-shadow: var(--bit-shadow-soft); }
.bit-process--service > div::before { content: ""; position: absolute; inset: 0 0 auto; height: 3px; background: var(--bit-gradient); }
.bit-service-scope-note { margin-top: 18px; padding: 15px 17px; border: 1px solid rgba(8,115,223,.15); border-radius: 15px; background: rgba(8,115,223,.055); color: #35536f; font-size: 14px; line-height: 1.55; }
.bit-service-scope-note strong { color: var(--bit-navy); }

.bit-badge, .bit-chip { padding: 8px 12px; border: 1px solid var(--bit-line); border-radius: 999px; background: #fff; font-size: 14px; font-weight: 800; color: #36516e; }

.bit-cta { position: relative; overflow: hidden; padding: 54px; border-radius: 30px; background: var(--bit-gradient); color: #fff; box-shadow: 0 24px 64px rgba(92,38,199,.25); }
.bit-cta--compact { padding: 44px; }
.bit-cta::after { content: ""; position: absolute; width: 340px; height: 340px; border: 64px solid rgba(255,255,255,.10); border-radius: 50%; right: -110px; top: -145px; }
.bit-cta-inner { position: relative; z-index: 1; display: grid; grid-template-columns: 1fr auto; gap: 30px; align-items: center; }
.bit-cta h2 { margin: 0; font-size: clamp(31px, 4vw, 48px); line-height: 1.05; letter-spacing: -.035em; }
.bit-cta p { max-width: 710px; margin: 16px 0 0; color: rgba(255,255,255,.86); }
.bit-cta-actions { display: flex; flex-direction: column; gap: 8px; align-items: stretch; }
.bit-cta .bit-button--light { min-width: 210px; }
.bit-cta-link { color: #fff; text-align: center; font-size: 14px; font-weight: 760; text-decoration: none; }

/* Subpage hero */
.bit-subhero { position: relative; overflow: hidden; padding: 72px 0 65px; border-bottom: 1px solid var(--bit-line); background: radial-gradient(circle at 82% 18%, rgba(8,115,223,.10), transparent 27%), radial-gradient(circle at 92% 88%, rgba(207,11,145,.08), transparent 25%), linear-gradient(180deg, #fff, #f7faff); }
.bit-subhero-grid { display: grid; grid-template-columns: 1fr 270px; gap: 60px; align-items: center; }
.bit-subhero h1 { max-width: 920px; font-size: clamp(42px, 5.2vw, 68px); }
.bit-subhero p { max-width: 820px; margin: 22px 0 0; color: var(--bit-muted); font-size: 20px; }
.bit-subhero-mark { min-height: 250px; display: grid; place-items: center; border-radius: 32px; background: rgba(255,255,255,.7); box-shadow: inset 0 0 0 1px rgba(220,229,239,.75); }
.bit-subhero-mark img { width: 125px; height: auto; object-fit: contain; }
.bit-chip-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 26px; }
.bit-chip { background: rgba(255,255,255,.75); }

.bit-feature-grid { display: grid; gap: 20px; }
.bit-feature-grid--3 { grid-template-columns: repeat(3, 1fr); }
.bit-feature-card { min-height: 255px; display: flex; flex-direction: column; padding: 28px; border: 1px solid var(--bit-line); border-radius: 22px; background: #fff; color: inherit; text-decoration: none; box-shadow: 0 6px 25px rgba(7,27,56,.045); transition: transform .18s ease, box-shadow .18s ease; }
a.bit-feature-card:hover { transform: translateY(-3px); box-shadow: var(--bit-shadow-soft); }
.bit-feature-card h2, .bit-feature-card h3 { margin: 20px 0 9px; color: var(--bit-navy); font-size: 23px; line-height: 1.2; }
.bit-feature-card p { margin: 0 0 10px; color: var(--bit-muted); }
.bit-feature-card .bit-text-link { margin-top: auto; }

.bit-process { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 28px; }
.bit-process > div { padding: 20px; border: 1px solid var(--bit-line); border-radius: 18px; background: #fff; }
.bit-process span { width: 34px; height: 34px; display: grid; place-items: center; margin-bottom: 12px; border-radius: 10px; background: var(--bit-navy); color: #fff; font-size: 14px; font-weight: 900; }
.bit-process strong, .bit-process small { display: block; }
.bit-process strong { color: var(--bit-navy); }
.bit-process small { margin-top: 5px; color: var(--bit-muted); line-height: 1.5; }
.bit-process--vertical { grid-template-columns: 1fr; }
.bit-process--vertical > div { display: grid; grid-template-columns: 40px 1fr; column-gap: 14px; }
.bit-process--vertical span { grid-row: 1 / span 2; margin: 0; }

.bit-security-detail-grid { display: grid; gap: 18px; }
.bit-detail-card { display: grid; color: inherit; text-decoration: none; grid-template-columns: 70px 1fr; gap: 20px; padding: 30px; border: 1px solid var(--bit-line); border-radius: 24px; background: #fff; box-shadow: 0 6px 24px rgba(7,27,56,.04); }
.bit-detail-card h2 { margin: 5px 0 9px; color: var(--bit-navy); font-size: 29px; line-height: 1.15; }
.bit-detail-card p { margin: 0; color: var(--bit-muted); }
.bit-detail-card ul { margin: 14px 0 0; padding-left: 20px; color: #405b76; }
.bit-detail-card li + li { margin-top: 4px; }
a.bit-detail-card { transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; }
a.bit-detail-card:hover { transform: translateY(-2px); border-color: #c3d1e1; box-shadow: var(--bit-shadow-soft); }
.bit-step-label { color: var(--bit-purple); font-size: 12px; font-weight: 900; letter-spacing: .09em; text-transform: uppercase; }

.bit-two-column-copy { display: grid; grid-template-columns: .85fr 1.15fr; gap: 70px; align-items: start; }
.bit-two-column-copy p { margin-top: 0; color: var(--bit-muted); font-size: 18px; }
.bit-info-box { display: flex; justify-content: space-between; gap: 30px; align-items: center; padding: 24px 28px; border: 1px solid #d6e1ef; border-radius: 20px; background: #f7faff; color: #3c5671; }

.bit-contact-grid { display: grid; grid-template-columns: .9fr 1.1fr; gap: 58px; align-items: start; }
.bit-contact-cards { display: grid; gap: 12px; margin-top: 28px; }
.bit-contact-card { display: grid; padding: 20px 22px; border: 1px solid var(--bit-line); border-radius: 18px; background: #fff; color: inherit; text-decoration: none; box-shadow: 0 6px 22px rgba(7,27,56,.04); }
a.bit-contact-card:hover { border-color: #c3d1e1; box-shadow: var(--bit-shadow-soft); }
.bit-contact-card span { color: var(--bit-purple); font-size: 12px; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }
.bit-contact-card strong { margin-top: 3px; color: var(--bit-navy); font-size: 20px; overflow-wrap: anywhere; }
.bit-contact-card small { margin-top: 5px; color: var(--bit-muted); }
.bit-contact-form-wrap { padding: 34px; border: 1px solid var(--bit-line); border-radius: 26px; background: var(--bit-soft); }
.bit-contact-form-wrap h2 { margin: 0 0 12px; color: var(--bit-navy); font-size: 32px; }
.bit-contact-form-wrap p { color: var(--bit-muted); }
.bit-form-note { margin-top: 18px; font-size: 13px; }
.bit-form-output input:not([type="checkbox"]):not([type="radio"]), .bit-form-output textarea, .bit-form-output select { width: 100%; padding: 12px 13px; border: 1px solid #cdd9e6; border-radius: 11px; background: #fff; }
.bit-form-output input[type="submit"], .bit-form-output button[type="submit"] { padding: 12px 18px; border: 0; border-radius: 12px; background: var(--bit-gradient); color: #fff; font-weight: 800; }

.bit-page { padding: 70px 0 90px; }
.bit-prose-wrap { max-width: 960px; }
.bit-page h1 { font-size: clamp(40px, 5vw, 62px); }
.bit-prose { margin-top: 34px; color: #334e6a; }
.bit-prose h2, .bit-prose h3 { color: var(--bit-navy); line-height: 1.2; }
.bit-prose h2 { margin-top: 42px; font-size: 32px; }
.bit-prose a { color: var(--bit-purple); }
.bit-empty-state { min-height: 520px; display: grid; grid-template-columns: 270px 1fr; gap: 42px; align-items: center; }
.bit-empty-state img { max-height: 380px; object-fit: contain; }
.bit-empty-state p { color: var(--bit-muted); }

.bit-footer { padding: 62px 0 28px; background: #05152d; color: #c8d4e5; }
.bit-footer-grid { display: grid; grid-template-columns: 1.15fr .85fr .85fr; gap: 44px; }
.bit-footer-logo { width: auto; height: 72px; max-width: 295px; padding: 11px 14px; border-radius: 14px; background: rgba(255,255,255,.96); object-fit: contain; object-position: left center; }
.bit-footer p { max-width: 440px; color: #9fb1c8; }
.bit-footer h3 { margin: 0 0 14px; color: #fff; font-size: 17px; }
.bit-footer a { color: #d7e1ef; text-decoration: none; }
.bit-footer a:hover { color: #fff; }
.bit-footer-links { display: grid; gap: 8px; }
.bit-footer-bottom { margin-top: 42px; padding-top: 22px; border-top: 1px solid rgba(255,255,255,.10); display: flex; justify-content: space-between; gap: 20px; color: #8296af; font-size: 14px; }
.bit-footer-legal { display: flex; gap: 18px; flex-wrap: wrap; }

/* Floating quick-answer assistant. No data leaves the browser. */
.bit-assistant { position: fixed; right: 22px; bottom: 22px; z-index: 150; }
.bit-assistant-launcher { display: flex; align-items: center; gap: 10px; min-width: 174px; padding: 8px 13px 8px 8px; border: 1px solid rgba(255,255,255,.8); border-radius: 999px; background: var(--bit-navy); color: #fff; box-shadow: 0 14px 40px rgba(7,27,56,.25); }
.bit-assistant-avatar { width: 46px; height: 46px; display: block; overflow: hidden; border-radius: 50%; background: linear-gradient(135deg, #eaf4ff, #faeaf5); }
.bit-assistant-avatar img { width: 100%; height: 100%; max-width: 100%; object-fit: contain; object-position: center bottom; transform: none; padding: 2px; }
.bit-assistant-launcher-copy { display: grid; text-align: left; line-height: 1.15; }
.bit-assistant-launcher-copy strong { font-size: 14px; }
.bit-assistant-launcher-copy small { margin-top: 3px; color: #b9c9db; font-size: 11px; }
.bit-assistant-panel { position: absolute; right: 0; bottom: 66px; width: min(360px, calc(100vw - 32px)); overflow: hidden; border: 1px solid var(--bit-line); border-radius: 22px; background: #fff; box-shadow: 0 28px 70px rgba(7,27,56,.25); }
.bit-assistant-head { display: flex; justify-content: space-between; gap: 12px; align-items: start; padding: 18px 18px 14px; background: var(--bit-navy); color: #fff; }
.bit-assistant-head strong, .bit-assistant-head small { display: block; }
.bit-assistant-head small { margin-top: 3px; color: #b9c9dc; font-size: 12px; }
.bit-assistant-close { width: 32px; height: 32px; border: 0; border-radius: 9px; background: rgba(255,255,255,.09); color: #fff; font-size: 23px; line-height: 1; }
.bit-assistant-body { padding: 17px; }
.bit-assistant-answer { min-height: 78px; margin: 0; padding: 13px; border-radius: 13px; background: #f4f8fc; color: #405a74; font-size: 14px; line-height: 1.5; }
.bit-assistant-questions { display: grid; gap: 7px; margin: 12px 0; }
.bit-assistant-questions button { padding: 9px 11px; border: 1px solid var(--bit-line); border-radius: 10px; background: #fff; color: #294660; text-align: left; font-size: 13px; font-weight: 750; }
.bit-assistant-questions button:hover { background: #f7faff; border-color: #c7d4e2; }


.bit-section-head { max-width: 780px; margin-bottom: 32px; }
.bit-section-head p { margin: 10px 0 0; color: var(--bit-muted); }
.bit-mini-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-top: 26px; }
.bit-mini-card { padding: 18px; border: 1px solid var(--bit-line); border-radius: 16px; background: #fff; }
.bit-mini-card strong { display: block; color: var(--bit-navy); margin-bottom: 4px; }
.bit-mini-card span { color: var(--bit-muted); font-size: 14px; line-height: 1.45; }
.bit-faq { display: grid; gap: 12px; max-width: 920px; margin-top: 26px; }
.bit-faq-item { border: 1px solid var(--bit-line); border-radius: 16px; background: #fff; overflow: hidden; }
.bit-faq-item summary { position: relative; padding: 18px 50px 18px 20px; color: var(--bit-navy); font-weight: 820; cursor: pointer; list-style: none; }
.bit-faq-item summary::-webkit-details-marker { display: none; }
.bit-faq-item summary::after { content: "+"; position: absolute; right: 20px; top: 50%; transform: translateY(-50%); color: var(--bit-purple); font-size: 24px; font-weight: 700; }
.bit-faq-item[open] summary::after { content: "–"; }
.bit-faq-item p { margin: 0; padding: 0 20px 20px; color: var(--bit-muted); }
.bit-highlight-box { padding: 28px; border: 1px solid rgba(93,39,200,.18); border-radius: 22px; background: linear-gradient(135deg, rgba(8,115,223,.055), rgba(207,11,145,.045)); }
.bit-highlight-box h3 { margin: 0 0 8px; color: var(--bit-navy); font-size: 24px; }
.bit-highlight-box p { margin: 0; color: var(--bit-muted); }
.bit-link-row { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
.bit-link-pill { display: inline-flex; padding: 9px 13px; border: 1px solid var(--bit-line); border-radius: 999px; background: #fff; color: var(--bit-navy); font-size: 14px; font-weight: 760; text-decoration: none; }
.bit-link-pill:hover { border-color: #b7c8d9; }

@media (max-width: 1080px) {
  .bit-mini-grid { grid-template-columns: repeat(2, 1fr); }
  .bit-brand-custom { height: 56px; max-width: 240px; }
  .bit-menu-list a { padding-inline: 8px; font-size: 13px; }
  .bit-hero-grid, .bit-about, .bit-security-intro { grid-template-columns: 1fr; }
  .bit-hero-visual { min-height: 500px; }
  .bit-security-grid { grid-template-columns: repeat(3, 1fr); }
  .bit-security-card:nth-child(4), .bit-security-card:nth-child(5) { min-height: 240px; }
  .bit-feature-grid--3 { grid-template-columns: repeat(2, 1fr); }
  .bit-subhero-grid { grid-template-columns: 1fr 220px; }
}

@media (max-width: 860px) {
  .bit-header-row { min-height: 76px; }
  .bit-brand-custom { height: 52px; max-width: 225px; }
  .bit-menu-toggle { display: block; }
  .bit-nav { display: none; position: absolute; left: 20px; right: 20px; top: 76px; max-height: calc(100vh - 96px); overflow: auto; padding: 14px; border: 1px solid var(--bit-line); border-radius: 18px; background: #fff; box-shadow: var(--bit-shadow); }
  .bit-nav.is-open { display: block; }
  .bit-menu-list { display: block; }
  .bit-menu-list a { padding: 10px 9px; font-size: 14px; }
  .bit-menu-list > li:last-child > a { margin: 8px 0 0; text-align: center; }
  .bit-menu-list .sub-menu { position: static; min-width: 0; margin: 2px 0 6px 12px; padding: 4px 0 4px 10px; border: 0; border-left: 1px solid var(--bit-line); border-radius: 0; background: transparent; box-shadow: none; opacity: 1; visibility: visible; transform: none; }
  .bit-menu-list .sub-menu a { color: #587087; font-size: 13px; }
  .bit-hero { padding-top: 62px; }
  .bit-hero-visual { min-height: 455px; }
  .bit-security-grid { grid-template-columns: repeat(2, 1fr); }
  .bit-split, .bit-contact-grid, .bit-two-column-copy { grid-template-columns: 1fr; gap: 38px; }
  .bit-services-grid, .bit-audience-grid { grid-template-columns: 1fr; }
  .bit-subhero-grid { grid-template-columns: 1fr; }
  .bit-subhero-mark { display: none; }
  .bit-process { grid-template-columns: 1fr; }
  .bit-cta-inner { grid-template-columns: 1fr; }
  .bit-cta-actions { align-items: flex-start; }
  .bit-footer-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 620px) {
  .bit-about-photo-wrap { min-height: 0; aspect-ratio: 3 / 4; }
  body { font-size: 16px; }
  .bit-container { width: min(calc(100% - 28px), var(--bit-container)); }
  .bit-brand-custom { height: 47px; max-width: 200px; }
  .bit-section { padding: 70px 0; }
  .bit-hero { padding: 48px 0 38px; }
  .bit-hero-grid { gap: 28px; }
  .bit-hero h1, .bit-subhero h1 { font-size: clamp(40px, 13vw, 58px); }
  .bit-hero-visual { min-height: 390px; }
  .bit-mascot { width: 88%; }
  .bit-floating-card { padding: 10px 12px; font-size: 12px; }
  .bit-floating-card small { display: none; }
  .bit-floating-card--a { right: -10px; top: 14%; }
  .bit-floating-card--b { left: 0; bottom: 10%; }
  .bit-security-grid, .bit-feature-grid--3 { grid-template-columns: 1fr; }
  .bit-security-card, .bit-security-card:last-child { grid-column: auto; min-height: 0; }
  .bit-service-card, .bit-audience-card, .bit-feature-card, .bit-detail-card { padding: 23px; }
  .bit-detail-card { grid-template-columns: 1fr; }
  .bit-mascot-tip { grid-template-columns: 110px 1fr; min-height: 250px; padding: 20px 18px 20px 8px; }
  .bit-mascot-tip-figure { height: 200px; }
  .bit-mascot-tip-figure img { width: 120px; height: 205px; }
  .bit-mascot-tip h3 { font-size: 19px; }
  .bit-mascot-tip p { font-size: 14px; }
  .bit-about-logo-wrap, .bit-about-logo-wrap--large { min-height: 310px; }
  .bit-about-logo { width: 145px; }
  .bit-subhero { padding: 54px 0 48px; }
  .bit-subhero p { font-size: 18px; }
  .bit-cta, .bit-cta--compact { padding: 34px 25px; border-radius: 24px; }
  .bit-contact-form-wrap { padding: 24px; }
  .bit-footer-grid { grid-template-columns: 1fr; }
  .bit-footer-bottom { flex-direction: column; }
  .bit-assistant { right: 12px; bottom: 12px; }
  .bit-assistant-launcher { min-width: 0; padding-right: 8px; }
  .bit-assistant-launcher-copy { display: none; }
  .bit-assistant-panel { bottom: 60px; }
  .bit-info-box { align-items: flex-start; flex-direction: column; }
  .bit-empty-state { grid-template-columns: 1fr; text-align: center; }
  .bit-empty-state img { max-height: 300px; margin: 0 auto; }
}

/* Version 4: simplified navigation, native contact form and remote support */
.bit-button svg { width: 19px; height: 19px; }
.bit-services-grid--three { grid-template-columns: repeat(3, 1fr); }

/* Keep the mascot fully inside its cards instead of cropping it with object-fit: cover. */
.bit-mascot { max-height: 545px; object-fit: contain; object-position: center bottom; }
.bit-mascot-tip { align-items: center; }
.bit-mascot-tip-figure { height: 230px; display: flex; align-items: flex-end; justify-content: center; overflow: visible; }
.bit-mascot-tip-figure img { width: 155px; height: 220px; object-fit: contain; object-position: center bottom; }
.bit-assistant-avatar { display: grid; place-items: center; }
.bit-assistant-avatar img { width: 100%; height: 100%; max-width: 100%; object-fit: contain; object-position: center bottom; transform: none; padding: 2px; }

.bit-remote-box {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr) auto;
  gap: 24px;
  align-items: center;
  padding: 28px;
  border: 1px solid rgba(93,39,200,.17);
  border-radius: 24px;
  background: linear-gradient(135deg, rgba(8,115,223,.07), rgba(207,11,145,.055));
  box-shadow: var(--bit-shadow-soft);
}
.bit-remote-box--compact { background: #fff; }
.bit-remote-icon { width: 64px; height: 64px; display: grid; place-items: center; border-radius: 18px; background: var(--bit-gradient); color: #fff; }
.bit-remote-icon svg { width: 31px; height: 31px; }
.bit-remote-copy h3 { margin: 5px 0 6px; color: var(--bit-navy); font-size: 25px; line-height: 1.18; }
.bit-remote-copy p { margin: 0; color: var(--bit-muted); }
.bit-remote-actions { min-width: 245px; display: grid; gap: 10px; justify-items: start; }
.bit-remote-actions .bit-button { width: 100%; }
.bit-hero-actions--left { justify-content: flex-start; }
.bit-info-box--spaced { margin-top: 30px; }
.bit-process--stack { grid-template-columns: 1fr; max-width: 740px; }

.bit-contact-remote { margin-top: 22px; padding: 20px; border: 1px solid rgba(93,39,200,.16); border-radius: 18px; background: linear-gradient(135deg, rgba(8,115,223,.05), rgba(207,11,145,.04)); }
.bit-contact-remote strong { color: var(--bit-navy); font-size: 18px; }
.bit-contact-remote p { margin: 6px 0 14px; color: var(--bit-muted); font-size: 15px; }
.bit-map-card { margin-top: 20px; padding: 16px; border: 1px solid var(--bit-line); border-radius: 20px; background: #fff; box-shadow: 0 6px 22px rgba(7,27,56,.04); }
.bit-map-card--primary { margin-top: 22px; }
.bit-map-frame { overflow: hidden; border-radius: 16px; border: 1px solid rgba(8,115,223,.10); background: #eef4fb; aspect-ratio: 16 / 10; }
.bit-map-frame iframe { width: 100%; height: 100%; border: 0; display: block; }
.bit-map-actions { margin-top: 12px; }

.bit-native-form { margin-top: 20px; }
.bit-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.bit-form-grid label { display: grid; gap: 6px; color: var(--bit-navy); font-size: 14px; font-weight: 780; }
.bit-form-grid label > span { line-height: 1.3; }
.bit-form-full { grid-column: 1 / -1; }
.bit-native-form input:not([type="checkbox"]), .bit-native-form textarea, .bit-native-form select {
  width: 100%;
  min-height: 48px;
  padding: 11px 12px;
  border: 1px solid #c9d6e4;
  border-radius: 11px;
  background: #fff;
  color: var(--bit-text);
  outline: none;
  transition: border-color .18s ease, box-shadow .18s ease;
}
.bit-native-form textarea { min-height: 150px; resize: vertical; }
.bit-native-form input:focus, .bit-native-form textarea:focus, .bit-native-form select:focus { border-color: #6b57ce; box-shadow: 0 0 0 3px rgba(93,39,200,.10); }
.bit-privacy-check { display: flex; gap: 10px; align-items: flex-start; margin: 18px 0; color: #536b83; font-size: 13px; line-height: 1.5; }
.bit-privacy-check input { width: 18px; height: 18px; flex: 0 0 auto; margin-top: 2px; accent-color: var(--bit-purple); }
.bit-privacy-check a { color: var(--bit-purple); font-weight: 760; }
.bit-honeypot { position: absolute !important; left: -10000px !important; width: 1px !important; height: 1px !important; overflow: hidden !important; }
.bit-form-message { margin: 14px 0 18px; padding: 13px 15px; border-radius: 12px; font-size: 14px; }
.bit-form-message--success { border: 1px solid rgba(16,155,115,.25); background: rgba(16,155,115,.08); color: #087456; }
.bit-form-message--error { border: 1px solid rgba(183,57,57,.22); background: rgba(183,57,57,.07); color: #8c3434; }

.bit-region-list { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 24px; }
.bit-region-list span { padding: 9px 13px; border: 1px solid var(--bit-line); border-radius: 999px; background: #fff; color: var(--bit-navy); font-size: 14px; font-weight: 760; }

@media (max-width: 1080px) {
  .bit-services-grid--three { grid-template-columns: repeat(2, 1fr); }
  .bit-remote-box { grid-template-columns: 64px minmax(0, 1fr); }
  .bit-remote-actions { grid-column: 2; min-width: 0; }
}

@media (max-width: 860px) {
  .bit-services-grid--three { grid-template-columns: 1fr; }
  .bit-remote-box { grid-template-columns: 1fr; align-items: start; }
  .bit-remote-actions { grid-column: auto; width: 100%; }
  .bit-remote-icon { width: 58px; height: 58px; }
}

@media (max-width: 620px) {
  .bit-mascot { width: 84%; max-height: 390px; }
  .bit-mascot-tip { grid-template-columns: 105px 1fr; min-height: 235px; padding: 18px 16px 18px 8px; }
  .bit-mascot-tip-figure { height: 185px; }
  .bit-mascot-tip-figure img { width: 112px; height: 180px; object-fit: contain; }
  .bit-form-grid { grid-template-columns: 1fr; }
  .bit-form-full { grid-column: auto; }
  .bit-remote-box { padding: 22px; }
  .bit-remote-actions .bit-button { white-space: normal; text-align: center; }
}


/* Version 6: balanced six-service grid, service dropdown, portrait on About page */
@media (min-width: 1081px) {
  .bit-security-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 860px) {
  .bit-security-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bit-security-card:last-child { grid-column: auto; min-height: 0; }
}
@media (max-width: 620px) {
  .bit-security-grid { grid-template-columns: 1fr; }
}

/* Version 7: customer-focused copy on start and services pages */


/* Version 9: service-specific mascot artwork only on service detail pages. */
.bit-subhero--service {
  padding-block: 58px 46px;
}
.bit-subhero--service .bit-subhero-grid {
  grid-template-columns: minmax(0, 1fr) minmax(330px, 420px);
  gap: 34px;
}
.bit-subhero-mark--mascot {
  position: relative;
  min-height: 410px;
  overflow: visible;
  isolation: isolate;
  background:
    radial-gradient(circle at 50% 48%, rgba(8,115,223,.13), transparent 55%),
    radial-gradient(circle at 75% 65%, rgba(207,11,145,.10), transparent 45%),
    rgba(255,255,255,.66);
}
.bit-service-hero-glow {
  position: absolute;
  z-index: -1;
  width: 72%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--bit-gradient);
  opacity: .08;
  filter: blur(8px);
}
.bit-subhero-mark--mascot .bit-subhero-mascot {
  width: 100%;
  max-width: 390px;
  height: 390px;
  object-fit: contain;
  object-position: center;
  filter: drop-shadow(0 24px 30px rgba(7,27,56,.16));
}
.bit-mascot-tip--service {
  grid-template-columns: 205px 1fr;
}
.bit-mascot-tip--service .bit-mascot-tip-figure {
  height: 255px;
}
.bit-mascot-tip--service .bit-mascot-tip-figure img {
  width: 200px;
  height: 255px;
  object-fit: contain;
  object-position: center bottom;
}
@media (max-width: 1080px) {
  .bit-subhero--service .bit-subhero-grid {
    grid-template-columns: minmax(0, 1fr) 330px;
  }
  .bit-subhero-mark--mascot .bit-subhero-mascot {
    max-width: 315px;
    height: 340px;
  }
}
@media (max-width: 860px) {
  .bit-subhero--service .bit-subhero-grid {
    grid-template-columns: 1fr;
  }
  .bit-subhero--service .bit-subhero-mark--mascot {
    display: grid;
    width: min(100%, 430px);
    min-height: 330px;
    margin-inline: auto;
  }
  .bit-subhero-mark--mascot .bit-subhero-mascot {
    max-width: 350px;
    height: 320px;
  }
}
@media (max-width: 620px) {
  .bit-subhero--service .bit-subhero-mark--mascot {
    min-height: 270px;
  }
  .bit-subhero-mark--mascot .bit-subhero-mascot {
    width: 100%;
    height: 260px;
  }
  .bit-mascot-tip--service {
    grid-template-columns: 120px 1fr;
  }
  .bit-mascot-tip--service .bit-mascot-tip-figure {
    height: 205px;
  }
  .bit-mascot-tip--service .bit-mascot-tip-figure img {
    width: 125px;
    height: 205px;
  }
}

/* Version 12: themed mascot in the hero; clean upper-body mascot portrait for tips. */
.bit-mascot-tip--compact {
  min-height: 0;
  grid-template-columns: 132px minmax(0, 1fr);
  gap: 22px;
  align-items: center;
  padding: 24px 26px;
  overflow: hidden;
  background:
    radial-gradient(circle at 0% 50%, rgba(8,115,223,.08), transparent 30%),
    linear-gradient(135deg, #fff 0%, #fbfdff 100%);
}
.bit-mascot-tip--compact::after {
  width: 180px;
  height: 180px;
  right: -105px;
  top: -95px;
  border-width: 30px;
}
.bit-mascot-tip--compact .bit-mascot-tip-figure {
  width: 124px;
  height: 124px;
  align-self: center;
  display: grid;
  place-items: center;
  overflow: hidden;
  padding: 5px;
  border: 1px solid rgba(8,115,223,.14);
  border-radius: 30px;
  background: linear-gradient(145deg, rgba(8,115,223,.10), rgba(207,11,145,.09));
  box-shadow: inset 0 0 0 5px rgba(255,255,255,.72), 0 12px 28px rgba(7,27,56,.08);
}
.bit-mascot-tip--compact .bit-mascot-tip-figure img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  filter: none;
}
.bit-mascot-tip--compact .bit-mascot-tip-copy { min-width: 0; }
.bit-mascot-tip--compact .bit-mascot-tip-label { margin-bottom: 4px; }
.bit-mascot-tip--compact h3 { margin: 3px 0 6px; font-size: 21px; }
.bit-mascot-tip--compact p { font-size: 15px; line-height: 1.58; }
.bit-mascot-tip--compact .bit-text-link { display: inline-flex; margin-top: 10px; }

@media (max-width: 620px) {
  .bit-mascot-tip--compact {
    grid-template-columns: 94px minmax(0, 1fr);
    gap: 14px;
    padding: 18px 17px;
    border-radius: 22px;
  }
  .bit-mascot-tip--compact .bit-mascot-tip-figure {
    width: 90px;
    height: 90px;
    padding: 4px;
    border-radius: 24px;
  }
  .bit-mascot-tip--compact h3 { font-size: 18px; }
  .bit-mascot-tip--compact p { font-size: 14px; }
}

@media (max-width: 620px) {
  .bit-about-facts { grid-template-columns: 1fr; }
  .bit-about-photo-wrap--home { min-height: 0; aspect-ratio: 4 / 5; }
}

/* Version 19: audited light / dark mode with accessible contrast across all components. */
.bit-theme-toggle {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 42px;
  padding: 8px 12px;
  border: 1px solid var(--bit-line);
  border-radius: 12px;
  background: #fff;
  color: var(--bit-navy);
  font-size: 13px;
  font-weight: 800;
}
.bit-theme-toggle:focus-visible,
.bit-menu-toggle:focus-visible,
.bit-button:focus-visible,
.bit-text-link:focus-visible,
.bit-link-pill:focus-visible,
.bit-assistant-launcher:focus-visible,
.bit-assistant-close:focus-visible,
.bit-assistant-questions button:focus-visible {
  outline: 3px solid rgba(8,115,223,.38);
  outline-offset: 3px;
}
.bit-theme-icon { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.bit-theme-icon--moon { display: none; }
html[data-theme="dark"] .bit-theme-icon--sun { display: none; }
html[data-theme="dark"] .bit-theme-icon--moon { display: block; }

/* Keep brand navy as a brand/surface color. Text colors get their own dark-mode values.
   This avoids white-on-white problems in dark sections and numbered process cards. */
html[data-theme="dark"] {
  --bit-navy: #071b38;
  --bit-navy-2: #0a2447;
  --bit-blue: #66afff;
  --bit-purple: #c9adff;
  --bit-pink: #ff7ccc;
  --bit-success: #5bd6b4;
  --bit-text: #dce6f2;
  --bit-muted: #aebed0;
  --bit-line: #2b4058;
  --bit-soft: #0d1b2d;
  --bit-white: #101f32;
  --bit-shadow: 0 22px 58px rgba(0,0,0,.34);
  --bit-shadow-soft: 0 10px 34px rgba(0,0,0,.24);
}
html[data-theme="dark"] body {
  background: #081321;
  color: var(--bit-text);
}
html[data-theme="dark"] h1,
html[data-theme="dark"] h2,
html[data-theme="dark"] h3,
html[data-theme="dark"] h4 { color: #f4f8ff; }
html[data-theme="dark"] ::selection { background: rgba(201,173,255,.30); }

/* Header and navigation */
html[data-theme="dark"] .bit-header { border-color: rgba(49,69,94,.8); background: rgba(8,19,33,.94); }
html[data-theme="dark"] .bit-brand-name strong,
html[data-theme="dark"] .bit-brand-name small { color: #f4f8ff; }
html[data-theme="dark"] .bit-menu-list a { color: #cad7e5; }
html[data-theme="dark"] .bit-menu-list a:hover,
html[data-theme="dark"] .bit-menu-list a:focus-visible,
html[data-theme="dark"] .bit-menu-list .current-menu-item > a,
html[data-theme="dark"] .bit-menu-list .current-menu-ancestor > a { background: #14253a; color: #fff; }
html[data-theme="dark"] .bit-menu-list .sub-menu,
html[data-theme="dark"] .bit-menu-toggle,
html[data-theme="dark"] .bit-theme-toggle { background: #0d1b2d; color: #eef5ff; border-color: #324860; }
/* On desktop the nav itself must stay transparent so no darker rectangle peeks out
   around the rounded first/last menu items. The mobile flyout keeps its own surface. */
@media (max-width: 860px) {
  html[data-theme="dark"] .bit-nav { background: #0d1b2d; color: #eef5ff; border-color: #324860; }
}
html[data-theme="dark"] .bit-theme-toggle:hover,
html[data-theme="dark"] .bit-menu-toggle:hover { background: #14253a; }
html[data-theme="dark"] .bit-menu-toggle span { background: #eef5ff; }
html[data-theme="dark"] .bit-menu-list .sub-menu a { color: #c0cfde; }
html[data-theme="dark"] .bit-menu-list .sub-menu a:hover { color: #fff; }

/* Buttons */
html[data-theme="dark"] .bit-button--ghost { background: #132238; color: #f5f8fc; border-color: #3a516c; }
html[data-theme="dark"] .bit-button--ghost:hover { background: #192c45; border-color: #4b6685; }
html[data-theme="dark"] .bit-button--light { background: #f4f8ff; color: #071b38; border-color: #f4f8ff; }
html[data-theme="dark"] .bit-button--light:hover { background: #fff; }

/* Hero and subpage hero */
html[data-theme="dark"] .bit-hero,
html[data-theme="dark"] .bit-subhero {
  background:
    radial-gradient(circle at 80% 12%, rgba(8,115,223,.20), transparent 31%),
    radial-gradient(circle at 93% 73%, rgba(207,11,145,.15), transparent 28%),
    linear-gradient(180deg, #0a1728, #081321);
}
html[data-theme="dark"] .bit-hero::before { opacity: .24; }
html[data-theme="dark"] .bit-hero h1,
html[data-theme="dark"] .bit-subhero h1,
html[data-theme="dark"] .bit-page h1 { color: #f7faff; }
html[data-theme="dark"] .bit-kicker,
html[data-theme="dark"] .bit-chip,
html[data-theme="dark"] .bit-badge { background: rgba(17,32,52,.90); color: #d5e0eb; border-color: #344b64; }
html[data-theme="dark"] .bit-hero p,
html[data-theme="dark"] .bit-subhero p,
html[data-theme="dark"] .bit-trust-row { color: #b5c5d6; }
html[data-theme="dark"] .bit-check { background: rgba(91,214,180,.13); color: #70e2c1; }
html[data-theme="dark"] .bit-floating-card { background: rgba(15,29,47,.95); border-color: rgba(86,111,142,.55); color: #dce6f2; }
html[data-theme="dark"] .bit-floating-card strong { color: #fff; }
html[data-theme="dark"] .bit-floating-card small { color: #aebed0; }
html[data-theme="dark"] .bit-subhero-mark { background: rgba(16,31,50,.82); box-shadow: inset 0 0 0 1px rgba(55,78,104,.85); }
html[data-theme="dark"] .bit-subhero-mark--mascot {
  background:
    radial-gradient(circle at 50% 48%, rgba(8,115,223,.16), transparent 55%),
    radial-gradient(circle at 75% 65%, rgba(207,11,145,.12), transparent 45%),
    rgba(16,31,50,.82);
}

/* Sections and typography */
html[data-theme="dark"] .bit-section { color: var(--bit-text); }
html[data-theme="dark"] .bit-section--soft { background: #0d1b2d; }
html[data-theme="dark"] .bit-section--service-support { background: linear-gradient(180deg,#081321,#0c1929); }
html[data-theme="dark"] .bit-section--dark { background: #0a203a; color: #f4f8ff; }
html[data-theme="dark"] .bit-section--dark .bit-section-title { color: #fff; }
html[data-theme="dark"] .bit-section--dark .bit-lead { color: #c6d4e3; }
html[data-theme="dark"] .bit-section--dark .bit-eyebrow { color: #9fc7ff; }
html[data-theme="dark"] .bit-section-title { color: #f4f8ff; }
html[data-theme="dark"] .bit-lead,
html[data-theme="dark"] .bit-section-head p,
html[data-theme="dark"] .bit-about-copy p,
html[data-theme="dark"] .bit-two-column-copy p,
html[data-theme="dark"] .bit-empty-state p { color: #b5c5d6; }
html[data-theme="dark"] .bit-eyebrow,
html[data-theme="dark"] .bit-step-label,
html[data-theme="dark"] .bit-text-link,
html[data-theme="dark"] .bit-contact-card span,
html[data-theme="dark"] .bit-mascot-tip-label { color: #c9adff; }
html[data-theme="dark"] .bit-security-note { background: rgba(255,255,255,.065); color: #d4dfeb; border-left-color: #ff7ccc; }
html[data-theme="dark"] .bit-security-card { border-color: rgba(255,255,255,.13); background: rgba(255,255,255,.06); }
html[data-theme="dark"] .bit-security-card:hover { background: rgba(255,255,255,.10); border-color: rgba(255,255,255,.24); }
html[data-theme="dark"] .bit-security-card p { color: #c8d5e4; }
html[data-theme="dark"] .bit-card-link { color: #b8d5ff; }
html[data-theme="dark"] .bit-card-link--dark { color: #c9adff; }
html[data-theme="dark"] .bit-check-list > span { color: #c4d1df; }
html[data-theme="dark"] .bit-check-list > span::before { background: rgba(91,214,180,.13); color: #70e2c1; }

/* Cards and content surfaces */
html[data-theme="dark"] .bit-service-card,
html[data-theme="dark"] .bit-feature-card,
html[data-theme="dark"] .bit-detail-card,
html[data-theme="dark"] .bit-process > div,
html[data-theme="dark"] .bit-contact-card,
html[data-theme="dark"] .bit-mini-card,
html[data-theme="dark"] .bit-faq-item,
html[data-theme="dark"] .bit-link-pill,
html[data-theme="dark"] .bit-region-list span,
html[data-theme="dark"] .bit-map-card,
html[data-theme="dark"] .bit-remote-box--compact,
html[data-theme="dark"] .bit-mascot-tip { background: #101f32; border-color: #2e455e; box-shadow: var(--bit-shadow-soft); }
html[data-theme="dark"] .bit-service-card:hover,
html[data-theme="dark"] a.bit-feature-card:hover,
html[data-theme="dark"] a.bit-detail-card:hover,
html[data-theme="dark"] a.bit-contact-card:hover,
html[data-theme="dark"] .bit-link-pill:hover { border-color: #4d6887; }
html[data-theme="dark"] .bit-audience-card { background: linear-gradient(145deg,#101f32,#0c1929); border-color: #2e455e; }
html[data-theme="dark"] .bit-service-card h3,
html[data-theme="dark"] .bit-feature-card h2,
html[data-theme="dark"] .bit-feature-card h3,
html[data-theme="dark"] .bit-detail-card h2,
html[data-theme="dark"] .bit-audience-card h3,
html[data-theme="dark"] .bit-contact-card strong,
html[data-theme="dark"] .bit-mini-card strong,
html[data-theme="dark"] .bit-faq-item summary,
html[data-theme="dark"] .bit-highlight-box h3,
html[data-theme="dark"] .bit-remote-copy h3,
html[data-theme="dark"] .bit-contact-remote strong,
html[data-theme="dark"] .bit-about-facts strong,
html[data-theme="dark"] .bit-mascot-tip h3 { color: #f1f6fc; }
html[data-theme="dark"] .bit-service-card p,
html[data-theme="dark"] .bit-feature-card p,
html[data-theme="dark"] .bit-detail-card p,
html[data-theme="dark"] .bit-audience-card p,
html[data-theme="dark"] .bit-contact-card small,
html[data-theme="dark"] .bit-mini-card span,
html[data-theme="dark"] .bit-faq-item p,
html[data-theme="dark"] .bit-highlight-box p,
html[data-theme="dark"] .bit-remote-copy p,
html[data-theme="dark"] .bit-contact-remote p,
html[data-theme="dark"] .bit-about-facts small,
html[data-theme="dark"] .bit-mascot-tip p { color: #aebed0; }
html[data-theme="dark"] .bit-detail-card ul,
html[data-theme="dark"] .bit-prose,
html[data-theme="dark"] .bit-info-box,
html[data-theme="dark"] .bit-service-scope-note,
html[data-theme="dark"] .bit-privacy-check { color: #bac9d8; }
html[data-theme="dark"] .bit-icon--light,
html[data-theme="dark"] .bit-feature-icon,
html[data-theme="dark"] .bit-service-icon { background: linear-gradient(135deg, rgba(8,115,223,.18), rgba(207,11,145,.16)); color: #c9adff; }

/* Service process cards: keep the numbers clearly visible. */
html[data-theme="dark"] .bit-process span {
  background: linear-gradient(135deg, #0873df 0%, #5a29cd 62%, #7f2fc6 100%);
  color: #fff;
  box-shadow: 0 6px 16px rgba(8,115,223,.18);
}
html[data-theme="dark"] .bit-process strong { color: #f4f8ff; }
html[data-theme="dark"] .bit-process small { color: #aebed0; }
html[data-theme="dark"] .bit-process--service > div::before { opacity: .95; }
html[data-theme="dark"] .bit-service-scope-note { background: rgba(8,115,223,.09); border-color: rgba(102,175,255,.23); }
html[data-theme="dark"] .bit-service-scope-note strong { color: #f4f8ff; }

/* About, highlights and informational boxes */
html[data-theme="dark"] .bit-about-facts span { background: #101f32; border-color: #2e455e; }
html[data-theme="dark"] .bit-about-logo-wrap,
html[data-theme="dark"] .bit-about-photo-wrap { background: linear-gradient(145deg,#10243a,#21182f); }
html[data-theme="dark"] .bit-info-box { background: #0f2034; border-color: #304963; }
html[data-theme="dark"] .bit-highlight-box,
html[data-theme="dark"] .bit-remote-box,
html[data-theme="dark"] .bit-contact-remote { background: linear-gradient(135deg,rgba(8,115,223,.11),rgba(207,11,145,.09)); border-color: rgba(201,173,255,.20); }
html[data-theme="dark"] .bit-link-pill,
html[data-theme="dark"] .bit-region-list span { color: #e7eef7; }
html[data-theme="dark"] .bit-mascot-tip--compact .bit-mascot-tip-figure { border-color: rgba(102,175,255,.24); box-shadow: inset 0 0 0 5px rgba(255,255,255,.045), 0 12px 28px rgba(0,0,0,.18); }

/* Forms */
html[data-theme="dark"] .bit-contact-form-wrap { background: #0d1b2d; border-color: #2e455e; }
html[data-theme="dark"] .bit-contact-form-wrap h2,
html[data-theme="dark"] .bit-form-grid label { color: #f1f6fc; }
html[data-theme="dark"] .bit-contact-form-wrap p { color: #aebed0; }
html[data-theme="dark"] .bit-native-form input,
html[data-theme="dark"] .bit-native-form textarea,
html[data-theme="dark"] .bit-native-form select,
html[data-theme="dark"] .bit-form-output input:not([type="checkbox"]):not([type="radio"]),
html[data-theme="dark"] .bit-form-output textarea,
html[data-theme="dark"] .bit-form-output select { background: #101f32; color: #eef5ff; border-color: #3a526d; }
html[data-theme="dark"] .bit-native-form input::placeholder,
html[data-theme="dark"] .bit-native-form textarea::placeholder { color: #8ea3b9; opacity: 1; }
html[data-theme="dark"] .bit-native-form input:focus,
html[data-theme="dark"] .bit-native-form textarea:focus,
html[data-theme="dark"] .bit-native-form select:focus { border-color: #9d85ed; box-shadow: 0 0 0 3px rgba(201,173,255,.16); }
html[data-theme="dark"] .bit-privacy-check a { color: #c9adff; }
html[data-theme="dark"] .bit-form-message--success { background: rgba(91,214,180,.10); border-color: rgba(91,214,180,.30); color: #8be7ca; }
html[data-theme="dark"] .bit-form-message--error { background: rgba(255,125,125,.09); border-color: rgba(255,125,125,.25); color: #ffb2b2; }

/* FAQ / prose / legal pages */
html[data-theme="dark"] .bit-prose h2,
html[data-theme="dark"] .bit-prose h3 { color: #f4f8ff; }
html[data-theme="dark"] .bit-prose a { color: #c9adff; }

/* Quick-answer assistant */
html[data-theme="dark"] .bit-assistant-launcher,
html[data-theme="dark"] .bit-assistant-head { background: #071b38; color: #fff; border-color: rgba(94,124,159,.55); }
html[data-theme="dark"] .bit-assistant-launcher-copy small,
html[data-theme="dark"] .bit-assistant-head small { color: #b9c9db; }
html[data-theme="dark"] .bit-assistant-panel { background: #101f32; border-color: #2e455e; }
html[data-theme="dark"] .bit-assistant-answer { background: #0b1828; color: #c8d5e3; }
html[data-theme="dark"] .bit-assistant-questions button { background: #13243a; color: #e2ebf4; border-color: #36506c; }
html[data-theme="dark"] .bit-assistant-questions button:hover { background: #192d47; border-color: #4a6787; }
html[data-theme="dark"] .bit-assistant-close { color: #fff; }

/* Map and footer */
html[data-theme="dark"] .bit-map-frame { background: #102237; border-color: #304c69; }
html[data-theme="dark"] .bit-footer { background: #04101f; }
html[data-theme="dark"] .skip-link { background: #132238; color: #fff; }

@media (max-width: 860px) {
  .bit-header-row { gap: 10px; }
  .bit-theme-toggle { margin-left: auto; }
  .bit-menu-toggle { order: 4; }
  .bit-nav { order: 3; }
  .bit-theme-toggle { order: 2; }
}
@media (max-width: 620px) {
  .bit-theme-toggle { width: 42px; height: 42px; padding: 0; justify-content: center; }
  .bit-theme-toggle-text { display: none; }
}


/* Version 20: final trust, classic IT support, privacy-friendly map and accessibility polish. */
.bit-section-head--center { max-width: 780px; margin-left: auto; margin-right: auto; text-align: center; }
.bit-classic-it-grid { display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); gap: 56px; align-items: center; }
.bit-topic-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 12px; }
.bit-topic-grid span, .bit-topic-grid a { display: flex; align-items: center; min-height: 58px; padding: 14px 17px; border: 1px solid var(--bit-line); border-radius: 16px; background: #fff; color: var(--bit-navy); font-weight: 800; box-shadow: 0 7px 24px rgba(7,27,56,.045); }
.bit-topic-grid span::before, .bit-topic-grid a::before { content: "✓"; display: grid; place-items: center; flex: 0 0 25px; width: 25px; height: 25px; margin-right: 10px; border-radius: 50%; background: rgba(16,155,115,.10); color: var(--bit-success); font-weight: 900; }
.bit-collaboration { background: linear-gradient(180deg, #fff 0%, #f8fbfe 100%); }
.bit-process--home { margin-top: 34px; }
.bit-process--home > div { min-height: 190px; }
.bit-wide-note { margin-top: 26px; display: flex; align-items: center; justify-content: space-between; gap: 28px; padding: 22px 24px; border: 1px solid rgba(8,115,223,.15); border-radius: 20px; background: linear-gradient(135deg, rgba(8,115,223,.055), rgba(207,11,145,.045)); }
.bit-wide-note strong { display: block; color: var(--bit-navy); font-size: 20px; }
.bit-wide-note p { margin: 6px 0 0; max-width: 810px; color: var(--bit-muted); }
.bit-service-transparency { margin-top: 14px; padding: 15px 18px; border-left: 3px solid var(--bit-success); border-radius: 10px; background: rgba(16,155,115,.055); color: var(--bit-muted); font-size: 14px; }
.bit-service-transparency strong { color: var(--bit-navy); }
.bit-review-strip { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 48px; align-items: center; padding: 32px 36px; border: 1px solid var(--bit-line); border-radius: 26px; background: #fff; box-shadow: var(--bit-shadow-soft); }
.bit-review-copy p { max-width: 690px; margin: 8px 0 0; color: var(--bit-muted); }
.bit-review-score { min-width: 235px; text-align: center; }
.bit-review-stars { color: #f2a900; letter-spacing: 3px; font-size: 24px; line-height: 1; }
.bit-review-score strong { display: block; margin-top: 9px; color: var(--bit-navy); font-size: 30px; }
.bit-review-score small { display: block; margin: 3px 0 15px; color: var(--bit-muted); }
.bit-map-placeholder { min-height: 270px; display: grid; place-items: center; align-content: center; gap: 12px; padding: 28px; text-align: center; background:
  radial-gradient(circle at 22% 24%, rgba(8,115,223,.12), transparent 32%),
  radial-gradient(circle at 82% 78%, rgba(207,11,145,.10), transparent 34%),
  linear-gradient(145deg,#f8fbfe,#eef4fa); border-radius: 16px; }
.bit-map-placeholder[hidden] { display: none; }
.bit-map-pin { display: grid; place-items: center; width: 54px; height: 54px; border-radius: 17px; background: var(--bit-gradient); color: #fff; font-size: 29px; box-shadow: 0 12px 24px rgba(78,47,187,.22); }
.bit-map-placeholder strong { display: block; color: var(--bit-navy); font-size: 21px; }
.bit-map-placeholder span { display: block; margin-top: 3px; color: var(--bit-text); font-weight: 750; }
.bit-map-placeholder small { display: block; margin-top: 3px; color: var(--bit-muted); }
.bit-map-privacy { max-width: 420px; margin: 0; color: var(--bit-muted); font-size: 12px; line-height: 1.45; }
.bit-map-frame[hidden] { display: none; }
.bit-map-frame iframe { width: 100%; height: 100%; min-height: 270px; border: 0; display: block; }
.bit-contact-card small { line-height: 1.45; }

html[data-theme="dark"] .bit-classic-it,
html[data-theme="dark"] .bit-collaboration { background: #0d1b2d; }
html[data-theme="dark"] .bit-topic-grid span,
html[data-theme="dark"] .bit-topic-grid a,
html[data-theme="dark"] .bit-review-strip { background: #101f32; border-color: #2e455e; box-shadow: var(--bit-shadow-soft); }
html[data-theme="dark"] .bit-topic-grid span,
html[data-theme="dark"] .bit-wide-note strong,
html[data-theme="dark"] .bit-service-transparency strong,
html[data-theme="dark"] .bit-review-score strong,
html[data-theme="dark"] .bit-map-placeholder strong { color: #f1f6fc; }
html[data-theme="dark"] .bit-wide-note { background: linear-gradient(135deg,rgba(8,115,223,.11),rgba(207,11,145,.08)); border-color: rgba(201,173,255,.20); }
html[data-theme="dark"] .bit-wide-note p,
html[data-theme="dark"] .bit-service-transparency,
html[data-theme="dark"] .bit-review-copy p,
html[data-theme="dark"] .bit-review-score small,
html[data-theme="dark"] .bit-map-placeholder small,
html[data-theme="dark"] .bit-map-privacy { color: #aebed0; }
html[data-theme="dark"] .bit-service-transparency { background: rgba(91,214,180,.07); border-left-color: #70e2c1; }
html[data-theme="dark"] .bit-map-placeholder { background:
  radial-gradient(circle at 22% 24%, rgba(8,115,223,.17), transparent 34%),
  radial-gradient(circle at 82% 78%, rgba(207,11,145,.13), transparent 36%),
  linear-gradient(145deg,#102237,#0d1b2d); }
html[data-theme="dark"] .bit-map-placeholder span { color: #dbe6f2; }
html[data-theme="dark"] .bit-review-stars { color: #ffc34d; }

@media (max-width: 860px) {
  .bit-classic-it-grid { grid-template-columns: 1fr; gap: 30px; }
  .bit-review-strip { grid-template-columns: 1fr; gap: 24px; }
  .bit-review-score { text-align: left; min-width: 0; }
  .bit-wide-note { align-items: flex-start; flex-direction: column; }
}
@media (max-width: 620px) {
  .bit-topic-grid { grid-template-columns: 1fr; }
  .bit-review-strip { padding: 24px 20px; }
  .bit-map-placeholder { min-height: 240px; padding: 22px 18px; }
  .bit-map-frame iframe { min-height: 240px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto !important; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}


/* Version 23: cinematic scroll choreography for the homepage.
   Native CSS + JS only: no external animation framework, and reduced motion stays respected. */
.bit-cinematic-hero { --bit-hero-progress: 0; --bit-pointer-x: 0; --bit-pointer-y: 0; min-height: min(860px, calc(100svh - 88px)); display: grid; align-items: center; isolation: isolate; }
.bit-cinematic-hero::after { content: ""; position: absolute; z-index: 0; left: 50%; bottom: -28%; width: min(1050px, 92vw); aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, rgba(90,41,205,.09), transparent 65%); transform: translate3d(-50%, calc(var(--bit-hero-progress) * -7%), 0) scale(calc(1 + var(--bit-hero-progress) * .18)); pointer-events: none; }
.bit-hero-copy { position: relative; z-index: 4; transform-origin: left center; }
.bit-hero-visual { isolation: isolate; perspective: 1100px; transform-style: preserve-3d; }
.bit-hero-orbit { position: absolute; z-index: 0; left: 50%; top: 50%; border: 1px solid rgba(97,39,200,.15); border-radius: 50%; pointer-events: none; transform: translate(-50%,-50%) rotate(calc(var(--bit-hero-progress) * 28deg)); }
.bit-hero-orbit::before { content: ""; position: absolute; width: 8px; height: 8px; border-radius: 50%; background: var(--bit-blue); box-shadow: 0 0 18px rgba(8,115,223,.6); }
.bit-hero-orbit--one { width: 84%; aspect-ratio: 1; }
.bit-hero-orbit--one::before { left: 8%; top: 21%; }
.bit-hero-orbit--two { width: 66%; aspect-ratio: 1; border-color: rgba(207,11,145,.16); transform: translate(-50%,-50%) rotate(calc(var(--bit-hero-progress) * -36deg)); }
.bit-hero-orbit--two::before { right: 13%; bottom: 15%; background: var(--bit-pink); box-shadow: 0 0 18px rgba(207,11,145,.55); }
.bit-hero-orbit--three { width: 108%; aspect-ratio: 1; border-style: dashed; border-color: rgba(8,115,223,.10); transform: translate(-50%,-50%) rotate(calc(24deg + var(--bit-hero-progress) * 18deg)); }
.bit-hero-orbit--three::before { display: none; }
.bit-hero-scroll-cue { position: absolute; z-index: 5; left: 50%; bottom: 18px; display: flex; align-items: center; gap: 9px; color: #60768e; font-size: 10px; font-weight: 900; letter-spacing: .16em; text-transform: uppercase; transform: translateX(-50%); opacity: calc(1 - var(--bit-hero-progress) * 2.2); }
.bit-hero-scroll-cue i { position: relative; width: 28px; height: 1px; overflow: hidden; background: rgba(7,27,56,.16); }
.bit-hero-scroll-cue i::after { content: ""; position: absolute; inset: 0; background: var(--bit-gradient); transform: translateX(-100%); animation: bitScrollCue 1.8s cubic-bezier(.65,0,.35,1) infinite; }
@keyframes bitScrollCue { 45%, 100% { transform: translateX(100%); } }

.js-bit-motion .bit-cinematic-hero .bit-hero-copy { transform: translate3d(calc(var(--bit-pointer-x) * -5px), calc(var(--bit-hero-progress) * -28px + var(--bit-pointer-y) * -5px), 0) scale(calc(1 - var(--bit-hero-progress) * .025)); opacity: calc(1 - var(--bit-hero-progress) * .16); }
.js-bit-motion .bit-cinematic-hero .bit-hero-visual { transform: translate3d(calc(var(--bit-pointer-x) * 11px), calc(var(--bit-hero-progress) * 40px + var(--bit-pointer-y) * 8px), 0) rotateY(calc(var(--bit-pointer-x) * 2.8deg)) rotateX(calc(var(--bit-pointer-y) * -2deg)) scale(calc(1 + var(--bit-hero-progress) * .05)); }
.js-bit-motion .bit-cinematic-hero .bit-mascot { transform: translate3d(0, calc(var(--bit-hero-progress) * -18px), 45px) rotate(calc(var(--bit-hero-progress) * -1.2deg)); }
.js-bit-motion .bit-cinematic-hero .bit-floating-card--a { transform: translate3d(calc(var(--bit-pointer-x) * 10px), calc(var(--bit-hero-progress) * -24px + var(--bit-pointer-y) * 8px), 95px) rotate(calc(var(--bit-hero-progress) * 1.5deg)); }
.js-bit-motion .bit-cinematic-hero .bit-floating-card--b { transform: translate3d(calc(var(--bit-pointer-x) * -8px), calc(var(--bit-hero-progress) * 18px + var(--bit-pointer-y) * -7px), 72px) rotate(calc(var(--bit-hero-progress) * -1.4deg)); }
.js-bit-motion .bit-cinematic-hero .bit-hero-glow { transform: translate3d(calc(var(--bit-pointer-x) * 18px), calc(var(--bit-pointer-y) * 12px), -20px) scale(calc(1 + var(--bit-hero-progress) * .22)); filter: blur(calc(var(--bit-hero-progress) * 5px)); }
.bit-cinematic-hero .bit-hero-copy, .bit-cinematic-hero .bit-hero-visual, .bit-cinematic-hero .bit-mascot, .bit-cinematic-hero .bit-floating-card, .bit-cinematic-hero .bit-hero-glow { will-change: transform, opacity; }

.bit-motion-stage { position: relative; isolation: isolate; overflow: hidden; }
.bit-motion-stage > .bit-container { position: relative; z-index: 2; }
.bit-stage-glow { position: absolute; z-index: 0; width: 520px; aspect-ratio: 1; border-radius: 50%; filter: blur(24px); opacity: .12; pointer-events: none; }
.bit-stage-glow--left { left: -260px; top: 8%; background: radial-gradient(circle, #0873df, transparent 68%); }
.bit-stage-glow--right { right: -250px; bottom: -130px; background: radial-gradient(circle, #cf0b91, transparent 68%); }

.js-bit-motion .bit-reveal { opacity: 0; transform: translate3d(0, 34px, 0) scale(.985); filter: blur(5px); transition: opacity .78s cubic-bezier(.2,.72,.18,1), transform .95s cubic-bezier(.16,1,.3,1), filter .72s ease; transition-delay: var(--bit-reveal-delay, 0ms); }
.js-bit-motion .bit-reveal.bit-reveal--left { transform: translate3d(-34px, 12px, 0) scale(.99); }
.js-bit-motion .bit-reveal.bit-reveal--right { transform: translate3d(34px, 12px, 0) scale(.99); }
.js-bit-motion .bit-reveal.is-visible { opacity: 1; transform: none; filter: none; }
.js-bit-motion .bit-security-card.bit-reveal { transform: perspective(900px) translate3d(0, 42px, 0) rotateX(7deg) scale(.965); transform-origin: center bottom; }
.js-bit-motion .bit-security-card.bit-reveal.is-visible { transform: perspective(900px) translate3d(0,0,0) rotateX(0) scale(1); }
.js-bit-motion .bit-security-card.is-visible:hover { transform: perspective(900px) translate3d(0,-5px,0) rotateX(var(--bit-tilt-x, 0deg)) rotateY(var(--bit-tilt-y, 0deg)); }
.bit-security-card { position: relative; overflow: hidden; }
.bit-security-card::after { content: ""; position: absolute; inset: -1px; border-radius: inherit; background: radial-gradient(260px circle at var(--bit-glow-x, 50%) var(--bit-glow-y, 50%), rgba(142,192,255,.17), transparent 45%); opacity: 0; transition: opacity .28s ease; pointer-events: none; }
.bit-security-card:hover::after { opacity: 1; }
.bit-security-card > * { position: relative; z-index: 1; }

.bit-process--home { --bit-process-progress: 0; position: relative; }
.bit-process--home::before, .bit-process--home::after { content: ""; position: absolute; z-index: 0; left: 10%; right: 10%; top: 26px; height: 2px; border-radius: 2px; }
.bit-process--home::before { background: var(--bit-line); }
.bit-process--home::after { right: auto; width: calc(80% * var(--bit-process-progress)); background: var(--bit-gradient); box-shadow: 0 0 18px rgba(97,39,200,.18); transition: width .08s linear; }
.bit-process--home > div { position: relative; z-index: 1; }

.bit-about-photo-wrap--home { --bit-about-shift: 0px; }
.js-bit-motion .bit-about-photo-wrap--home .bit-about-photo { transform: translate3d(0, var(--bit-about-shift), 0) scale(1.065); transition: transform .08s linear; will-change: transform; }
.js-bit-motion .bit-mascot-tip.is-visible .bit-mascot-tip-figure img { animation: bitMascotSettle .95s .12s cubic-bezier(.16,1,.3,1) both; }
@keyframes bitMascotSettle { from { transform: translate3d(-10px,20px,0) rotate(-3deg) scale(.94); } to { transform: none; } }

.bit-topic-grid span, .bit-topic-grid a { transition: transform .25s cubic-bezier(.16,1,.3,1), border-color .25s ease, box-shadow .25s ease; }
.bit-topic-grid span:hover, .bit-topic-grid a:hover { transform: translateY(-3px) rotate(-.45deg); border-color: rgba(97,39,200,.28); box-shadow: 0 12px 26px rgba(7,27,56,.08); }
.bit-cta { position: relative; overflow: hidden; isolation: isolate; }
.bit-cta::before { content: ""; position: absolute; z-index: -1; width: 520px; aspect-ratio: 1; right: -170px; top: -260px; border-radius: 50%; background: radial-gradient(circle, rgba(255,255,255,.24), transparent 64%); transform: scale(1.08); }

@media (max-width: 980px) {
  .bit-cinematic-hero { min-height: auto; }
  .bit-hero-scroll-cue { display: none; }
  .bit-hero-orbit--three { width: 95%; }
  .bit-process--home::before, .bit-process--home::after { display: none; }
}
@media (max-width: 620px) {
  .bit-hero-orbit { opacity: .72; }
  .bit-hero-orbit--one { width: 78%; }
  .bit-hero-orbit--two { width: 58%; }
  .js-bit-motion .bit-cinematic-hero .bit-hero-copy, .js-bit-motion .bit-cinematic-hero .bit-hero-visual, .js-bit-motion .bit-cinematic-hero .bit-mascot, .js-bit-motion .bit-cinematic-hero .bit-floating-card, .js-bit-motion .bit-cinematic-hero .bit-hero-glow { transform: none; }
  .js-bit-motion .bit-reveal, .js-bit-motion .bit-reveal.bit-reveal--left, .js-bit-motion .bit-reveal.bit-reveal--right, .js-bit-motion .bit-security-card.bit-reveal { transform: translate3d(0,22px,0) scale(.99); filter: blur(2px); }
  .js-bit-motion .bit-reveal.is-visible, .js-bit-motion .bit-security-card.bit-reveal.is-visible { transform: none; filter: none; }
}
@media (prefers-reduced-motion: reduce) {
  .bit-hero-scroll-cue { display: none !important; }
  .bit-hero-orbit, .bit-cinematic-hero .bit-hero-copy, .bit-cinematic-hero .bit-hero-visual, .bit-cinematic-hero .bit-mascot, .bit-cinematic-hero .bit-floating-card, .bit-cinematic-hero .bit-hero-glow, .bit-about-photo-wrap--home .bit-about-photo { transform: none !important; }
  .bit-reveal { opacity: 1 !important; transform: none !important; filter: none !important; }
}

/* Version 24: immersive service story --------------------------------------------------
   A pinned, scroll-scrubbed service sequence inspired by cinematic studio sites.
   The static/mobile fallback remains fully usable without JavaScript. */
.bit-service-story {
  position: relative;
  z-index: 2;
  overflow: clip;
  background: #030817;
  color: #f7f9ff;
  isolation: isolate;
}
.bit-story-stage {
  position: relative;
  min-height: calc(100svh - 88px);
  overflow: hidden;
  background:
    radial-gradient(circle at 72% 44%, rgba(87,44,216,.17), transparent 30%),
    radial-gradient(circle at 35% 68%, rgba(4,119,224,.12), transparent 31%),
    linear-gradient(145deg, #050b1a 0%, #061128 52%, #080b1a 100%);
  isolation: isolate;
}
.bit-story-stage::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(3,8,23,.08), rgba(3,8,23,.66));
}
.bit-story-stage::after {
  content: "";
  position: absolute;
  z-index: 1;
  left: 0;
  right: 0;
  bottom: 0;
  height: 110px;
  pointer-events: none;
  background: linear-gradient(180deg, transparent, #071b38 88%);
}
.bit-story-atmosphere,
.bit-story-gridlines,
.bit-story-aura,
.bit-story-particle { position: absolute; pointer-events: none; }
.bit-story-atmosphere { inset: 0; z-index: 0; overflow: hidden; }
.bit-story-gridlines {
  inset: -20%;
  opacity: .13;
  background-image:
    linear-gradient(rgba(126,165,255,.16) 1px, transparent 1px),
    linear-gradient(90deg, rgba(126,165,255,.16) 1px, transparent 1px);
  background-size: 72px 72px;
  transform: perspective(700px) rotateX(63deg) translate3d(0, 31%, -90px) scale(1.24);
  transform-origin: center 64%;
  -webkit-mask-image: linear-gradient(to bottom, transparent 10%, #000 55%, transparent 97%);
  mask-image: linear-gradient(to bottom, transparent 10%, #000 55%, transparent 97%);
}
.bit-story-aura { border-radius: 50%; filter: blur(22px); opacity: .64; }
.bit-story-aura--one {
  width: 54vw; height: 54vw; min-width: 620px; min-height: 620px;
  right: -15vw; top: -27vw;
  background: radial-gradient(circle, rgba(207,11,145,.16), rgba(98,39,200,.07) 43%, transparent 70%);
}
.bit-story-aura--two {
  width: 46vw; height: 46vw; min-width: 540px; min-height: 540px;
  left: -18vw; bottom: -27vw;
  background: radial-gradient(circle, rgba(8,115,223,.17), rgba(56,101,239,.06) 45%, transparent 72%);
}
.bit-story-particle {
  width: 4px; height: 4px; border-radius: 50%;
  background: #b8d8ff;
  box-shadow: 0 0 18px rgba(111,180,255,.85);
  opacity: .5;
}
.bit-story-particle--1 { left: 9%; top: 20%; }
.bit-story-particle--2 { left: 17%; top: 72%; width: 2px; height: 2px; }
.bit-story-particle--3 { left: 28%; top: 34%; width: 3px; height: 3px; }
.bit-story-particle--4 { left: 42%; top: 83%; }
.bit-story-particle--5 { left: 56%; top: 18%; width: 2px; height: 2px; }
.bit-story-particle--6 { left: 63%; top: 71%; width: 3px; height: 3px; }
.bit-story-particle--7 { left: 74%; top: 24%; }
.bit-story-particle--8 { left: 82%; top: 66%; width: 2px; height: 2px; }
.bit-story-particle--9 { left: 91%; top: 39%; width: 3px; height: 3px; }
.bit-story-particle--10 { left: 34%; top: 15%; width: 2px; height: 2px; }
.bit-story-particle--11 { left: 69%; top: 88%; width: 2px; height: 2px; }
.bit-story-particle--12 { left: 94%; top: 82%; }

.bit-story-intro,
.bit-story-interface,
.bit-story-outro {
  position: absolute;
  z-index: 3;
  inset: 0;
}
.bit-story-intro {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: clamp(56px, 7vw, 110px) 28px;
}
.bit-story-kicker {
  margin-bottom: 22px;
  color: #9eb9db;
  font-size: 11px;
  font-weight: 880;
  letter-spacing: .24em;
  text-transform: uppercase;
}
.bit-story-display {
  position: relative;
  display: grid;
  margin: 0;
  width: min(1240px, 94vw);
  line-height: .78;
  letter-spacing: -.075em;
  font-size: clamp(74px, 12vw, 184px);
  font-weight: 940;
  text-transform: uppercase;
}
.bit-story-word { display: block; will-change: transform, opacity; }
.bit-story-word--one {
  justify-self: start;
  background: linear-gradient(100deg, #fff 3%, #e6efff 36%, #85bdff 75%, #8d6fff 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.bit-story-word--two {
  justify-self: end;
  margin-top: .15em;
  background: linear-gradient(100deg, #76bbff 0%, #a56dff 48%, #ff7dca 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.bit-story-intro > p {
  width: min(660px, 90vw);
  margin: 32px auto 0;
  color: #b7c6da;
  font-size: clamp(16px, 1.55vw, 21px);
  line-height: 1.65;
}
.bit-story-scroll-hint {
  position: absolute;
  left: 50%; bottom: 30px;
  display: flex; align-items: center; gap: 12px;
  transform: translateX(-50%);
  color: #7790ad;
  font-size: 10px; font-weight: 850; letter-spacing: .13em; text-transform: uppercase;
  white-space: nowrap;
}
.bit-story-scroll-hint i { position: relative; width: 38px; height: 1px; overflow: hidden; background: rgba(255,255,255,.14); }
.bit-story-scroll-hint i::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg,#4ca8ff,#b66cff,#ff68be); animation: bitScrollCue 1.8s cubic-bezier(.65,0,.35,1) infinite; }

.bit-story-interface {
  display: grid;
  grid-template-columns: minmax(350px, .78fr) minmax(520px, 1.22fr) 36px;
  gap: clamp(28px, 4vw, 72px);
  align-items: center;
  width: min(calc(100% - 64px), 1400px);
  height: 100%;
  margin-inline: auto;
  padding-block: 42px 52px;
}
.bit-story-copy {
  position: relative;
  z-index: 4;
  min-width: 0;
}
.bit-story-copy-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 34px;
  padding-bottom: 15px;
  border-bottom: 1px solid rgba(255,255,255,.12);
}
.bit-story-step-label { color: #9fb2c9; font-size: 10px; font-weight: 850; letter-spacing: .18em; text-transform: uppercase; }
.bit-story-counter { display: flex; align-items: baseline; gap: 7px; font-variant-numeric: tabular-nums; }
.bit-story-counter b { color: #fff; font-size: 32px; line-height: 1; letter-spacing: -.06em; }
.bit-story-counter i { color: #59708c; font-size: 12px; font-style: normal; }
.bit-story-panel-stack { position: relative; display: none; min-height: 420px; }
.js-bit-story .bit-story-panel-stack { display: block; }
.bit-story-panel {
  position: absolute;
  inset: 0 auto auto 0;
  width: 100%;
  max-width: 500px;
  margin: 0;
  will-change: transform, opacity;
}
.bit-story-panel-number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px; height: 26px;
  margin-bottom: 24px;
  border: 1px solid rgba(142,187,255,.24);
  border-radius: 999px;
  background: rgba(255,255,255,.045);
  color: #a8c8f0;
  font-size: 10px; font-weight: 900; letter-spacing: .17em;
}
.bit-story-panel-icon {
  width: 54px; height: 54px;
  display: grid; place-items: center;
  margin-bottom: 22px;
  border: 1px solid rgba(130,178,255,.22);
  border-radius: 17px;
  background: linear-gradient(145deg, rgba(52,117,237,.15), rgba(180,50,201,.09));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 20px 40px rgba(0,0,0,.12);
}
.bit-story-panel-icon svg { width: 26px; height: 26px; color: #8fc6ff; }
.bit-story-panel h3 {
  margin: 0 0 10px;
  color: #fff;
  font-size: clamp(38px, 4.4vw, 70px);
  line-height: .98;
  letter-spacing: -.055em;
}
.bit-story-panel > strong {
  display: block;
  max-width: 470px;
  color: #c5d7ed;
  font-size: clamp(17px, 1.35vw, 21px);
  line-height: 1.45;
}
.bit-story-panel > p { max-width: 510px; margin: 18px 0 0; color: #8fa4bd; font-size: 15px; line-height: 1.7; }
.bit-story-link {
  display: inline-flex; align-items: center; gap: 10px;
  margin-top: 25px;
  color: #fff;
  font-size: 13px; font-weight: 820; text-decoration: none;
}
.bit-story-link span { display: grid; place-items: center; width: 27px; height: 27px; border: 1px solid rgba(255,255,255,.17); border-radius: 50%; transition: transform .25s ease, background .25s ease; }
.bit-story-link:hover span, .bit-story-link:focus-visible span { transform: translate(2px,-2px); background: rgba(255,255,255,.1); }

.bit-story-world {
  position: relative;
  z-index: 3;
  width: min(62vw, 770px);
  aspect-ratio: 1;
  justify-self: center;
  perspective: 1100px;
  transform-style: preserve-3d;
  will-change: transform, opacity;
}
.bit-story-world::before {
  content: "";
  position: absolute;
  inset: 15%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(75,154,255,.12), rgba(97,39,200,.06) 43%, transparent 70%);
  filter: blur(18px);
  pointer-events: none;
}
.bit-story-orbit {
  position: absolute;
  left: 50%; top: 50%;
  border-radius: 50%;
  pointer-events: none;
  transform: translate(-50%,-50%);
}
.bit-story-orbit--outer { width: 88%; aspect-ratio: 1; border: 1px solid rgba(132,180,255,.16); }
.bit-story-orbit--middle { width: 68%; aspect-ratio: 1; border: 1px dashed rgba(207,104,255,.16); }
.bit-story-orbit--inner { width: 46%; aspect-ratio: 1; border: 1px solid rgba(255,255,255,.1); box-shadow: 0 0 80px rgba(84,85,238,.08); }
.bit-story-orbit--outer::before,
.bit-story-orbit--middle::before {
  content: ""; position: absolute; width: 6px; height: 6px; border-radius: 50%;
  background: #6eb9ff; box-shadow: 0 0 18px #3897ff;
}
.bit-story-orbit--outer::before { top: 15%; left: 16%; }
.bit-story-orbit--middle::before { right: 11%; bottom: 21%; background: #fb6cc1; box-shadow: 0 0 18px #d94ba9; }
.bit-story-scan {
  position: absolute;
  z-index: 1;
  left: 50%; top: 50%;
  width: 42%; height: 1px;
  transform-origin: left center;
  transform: rotate(-90deg);
  background: linear-gradient(90deg, rgba(113,184,255,.02), rgba(113,184,255,.56) 65%, rgba(238,119,218,.76));
  box-shadow: 0 0 18px rgba(104,169,255,.18);
  opacity: .4;
  will-change: transform;
}
.bit-story-core {
  position: absolute;
  z-index: 4;
  left: 50%; top: 50%;
  width: 31%;
  aspect-ratio: .82;
  transform: translate(-50%,-50%);
  transform-style: preserve-3d;
  will-change: transform, opacity;
}
.bit-story-core::before {
  content: "";
  position: absolute;
  z-index: -1;
  left: 50%; top: 55%;
  width: 118%; aspect-ratio: 1;
  border: 1px solid rgba(255,255,255,.11);
  border-radius: 50%;
  transform: translate(-50%,-50%);
  background: radial-gradient(circle, rgba(46,123,235,.19), rgba(101,39,200,.12) 48%, transparent 72%);
  box-shadow: inset 0 0 40px rgba(92,125,255,.06), 0 0 80px rgba(101,39,200,.1);
}
.bit-story-core-glow { position: absolute; z-index: -2; left: 50%; top: 54%; width: 145%; aspect-ratio: 1; transform: translate(-50%,-50%); border-radius: 50%; background: radial-gradient(circle, rgba(66,138,255,.28), rgba(121,44,211,.13) 42%, transparent 70%); filter: blur(20px); }
.bit-story-core img { position: relative; z-index: 2; width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 26px 38px rgba(0,0,0,.24)); }
.bit-story-core-label {
  position: absolute;
  z-index: 4;
  left: 50%; bottom: -8%;
  min-width: 126px;
  padding: 9px 13px 8px;
  border: 1px solid rgba(145,185,255,.22);
  border-radius: 11px;
  transform: translateX(-50%);
  background: rgba(5,13,31,.78);
  box-shadow: 0 12px 32px rgba(0,0,0,.2), inset 0 1px 0 rgba(255,255,255,.06);
  backdrop-filter: blur(10px);
  text-align: center;
  white-space: nowrap;
}
.bit-story-core-label small { display: block; color: #7289a7; font-size: 7px; font-weight: 900; letter-spacing: .18em; }
.bit-story-core-label strong { display: block; margin-top: 2px; color: #dceaff; font-size: 11px; letter-spacing: .12em; }

.bit-story-node {
  --bit-node-active: 0;
  position: absolute;
  z-index: 5;
  width: 128px;
  min-height: 104px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 13px 10px 12px;
  border: 1px solid rgba(150,186,233,calc(.16 + var(--bit-node-active) * .24));
  border-radius: 18px;
  background: linear-gradient(150deg, rgba(21,43,72,.84), rgba(10,19,40,.68));
  box-shadow:
    0 18px 50px rgba(0,0,0,.16),
    0 0 calc(var(--bit-node-active) * 46px) rgba(78,140,255,.25),
    inset 0 1px 0 rgba(255,255,255,.055);
  backdrop-filter: blur(12px);
  color: #dbe8f8;
  text-decoration: none;
  text-align: center;
  transform: translate(-50%,-50%);
  transform-origin: center;
  will-change: transform, opacity;
}
.bit-story-node::after {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  pointer-events: none;
  opacity: var(--bit-node-active);
  background: linear-gradient(135deg, rgba(78,165,255,.18), transparent 43%, rgba(242,93,195,.14));
}
.bit-story-node-index { position: absolute; left: 9px; top: 8px; color: #61758e; font-size: 7px; font-weight: 900; letter-spacing: .13em; }
.bit-story-node-icon { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; background: rgba(93,126,255,.08); }
.bit-story-node-icon svg { width: 19px; height: 19px; color: #93c8ff; }
.bit-story-node strong { position: relative; z-index: 1; font-size: 11px; line-height: 1.2; letter-spacing: -.01em; }
.bit-story-node:hover, .bit-story-node:focus-visible { border-color: rgba(151,196,255,.55); outline: none; }
.bit-story-node--1 { left: 50%; top: 6.8%; }
.bit-story-node--2 { left: 85.8%; top: 28%; }
.bit-story-node--3 { left: 85.8%; top: 72%; }
.bit-story-node--4 { left: 50%; top: 93.2%; }
.bit-story-node--5 { left: 14.2%; top: 72%; }
.bit-story-node--6 { left: 14.2%; top: 28%; }

.bit-story-progress {
  align-self: center;
  justify-self: end;
  display: grid;
  grid-template-columns: 2px 8px;
  gap: 13px;
  align-items: stretch;
  height: 260px;
}
.bit-story-progress-track { position: relative; width: 2px; height: 100%; overflow: hidden; border-radius: 3px; background: rgba(255,255,255,.1); }
.bit-story-progress-track i { position: absolute; left: 0; top: 0; width: 100%; height: 100%; transform: scaleY(0); transform-origin: top; background: linear-gradient(#50a7ff,#8d5cff,#ff68bf); box-shadow: 0 0 14px rgba(91,135,255,.5); }
.bit-story-progress-dots { display: flex; flex-direction: column; justify-content: space-between; padding-block: 2px; }
.bit-story-progress-dots span { width: 7px; height: 7px; border-radius: 50%; background: #34465f; box-shadow: 0 0 0 3px rgba(255,255,255,0); transition: background .2s ease, box-shadow .2s ease; }
.bit-story-progress-dots span.is-active { background: #b7dcff; box-shadow: 0 0 0 3px rgba(91,145,255,.11), 0 0 14px rgba(88,152,255,.65); }

.bit-story-outro {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 64px 28px;
  pointer-events: none;
}
.bit-story-outro > span { color: #8ca5c3; font-size: 10px; font-weight: 900; letter-spacing: .22em; text-transform: uppercase; }
.bit-story-outro h2 { width: min(1050px, 92vw); margin: 18px auto 0; color: #fff; font-size: clamp(54px, 7.7vw, 116px); line-height: .9; letter-spacing: -.07em; }
.bit-story-outro h2 em { display: block; font-style: normal; background: linear-gradient(100deg,#5eb8ff,#9d67ff 50%,#ff72c8); -webkit-background-clip: text; background-clip: text; color: transparent; }
.bit-story-outro p { width: min(660px, 88vw); margin: 28px auto 0; color: #aabbd0; font-size: clamp(16px,1.4vw,20px); }
.bit-story-outro .bit-button { margin-top: 28px; pointer-events: auto; }

/* Static / no-JS fallback: one strong visual intro, then the normal service grid. */
html:not(.js-bit-story) .bit-story-interface { position: relative; inset: auto; min-height: 760px; padding-block: 80px; grid-template-columns: 1fr; width: min(calc(100% - 40px), 1180px); }
html:not(.js-bit-story) .bit-story-copy { display: none; }
html:not(.js-bit-story) .bit-story-world { width: min(690px, 84vw); margin: 200px auto 30px; }
html:not(.js-bit-story) .bit-story-progress,
html:not(.js-bit-story) .bit-story-outro { display: none; }
html:not(.js-bit-story) .bit-story-intro { justify-content: flex-start; padding-top: 80px; }
html:not(.js-bit-story) .bit-story-display { font-size: clamp(60px,10vw,120px); }
html:not(.js-bit-story) .bit-story-scroll-hint { display: none; }

.js-bit-story .bit-story-interface,
.js-bit-story .bit-story-outro { visibility: hidden; }
.js-bit-story .bit-story-stage { height: calc(100svh - 88px); min-height: 650px; }
.js-bit-story .bit-story-node { pointer-events: auto; }
.js-bit-story .bit-story-panel { pointer-events: none; }
.js-bit-story .bit-story-panel.is-active { pointer-events: auto; }
.js-bit-story .bit-story-outro.is-active { pointer-events: auto; }
.js-bit-story .bit-story-atmosphere,
.js-bit-story .bit-story-gridlines,
.js-bit-story .bit-story-orbit,
.js-bit-story .bit-story-particle { will-change: transform, opacity; }

.bit-services-overview { margin-top: -1px; padding-top: 110px; }
.bit-services-overview .bit-security-card { min-height: 300px; }

@media (max-width: 1180px) {
  .bit-story-interface { grid-template-columns: minmax(310px,.72fr) minmax(470px,1.28fr) 28px; gap: 22px; width: min(calc(100% - 42px), 1160px); }
  .bit-story-world { width: min(59vw, 690px); }
  .bit-story-node { width: 112px; min-height: 94px; padding: 11px 8px; }
  .bit-story-panel h3 { font-size: clamp(36px,4vw,56px); }
}

@media (max-width: 960px) {
  .bit-service-story { min-height: auto; }
  .bit-story-stage { min-height: auto; padding: 74px 0 54px; overflow: hidden; }
  .bit-story-stage::after { height: 70px; }
  .bit-story-intro,
  .bit-story-interface,
  .bit-story-outro { position: relative; inset: auto; }
  .bit-story-intro { min-height: auto; padding: 34px 20px 28px; }
  .bit-story-display { width: min(720px,94vw); font-size: clamp(54px,13vw,104px); line-height: .84; }
  .bit-story-intro > p { margin-top: 24px; }
  .bit-story-scroll-hint { display: none; }
  html:not(.js-bit-story) .bit-story-interface,
  .bit-story-interface { display: block; width: 100%; min-height: auto; padding: 10px 20px 44px; }
  html:not(.js-bit-story) .bit-story-world,
  .bit-story-world { width: min(620px, 90vw); margin: 20px auto 0; }
  .bit-story-copy,
  .bit-story-progress,
  .bit-story-outro { display: none !important; }
  .bit-story-node { width: 104px; min-height: 88px; border-radius: 15px; }
  .bit-story-node strong { font-size: 10px; }
  .bit-story-node-icon { width: 30px; height: 30px; }
  .bit-story-core { width: 34%; }
  .bit-services-overview { padding-top: 84px; }
}

@media (max-width: 620px) {
  .bit-story-stage { padding-top: 52px; }
  .bit-story-kicker { margin-bottom: 16px; font-size: 9px; letter-spacing: .18em; }
  .bit-story-display { font-size: clamp(44px,14vw,78px); line-height: .88; letter-spacing: -.065em; }
  .bit-story-word--two { margin-top: .21em; }
  .bit-story-intro > p { font-size: 15px; line-height: 1.6; }
  .bit-story-interface { padding-inline: 8px; }
  .bit-story-world { width: min(590px, 106vw); margin-left: -3vw; }
  .bit-story-node { width: 86px; min-height: 76px; gap: 4px; padding: 8px 5px; border-radius: 13px; }
  .bit-story-node-index { left: 6px; top: 5px; font-size: 6px; }
  .bit-story-node-icon { width: 27px; height: 27px; border-radius: 8px; }
  .bit-story-node-icon svg { width: 16px; height: 16px; }
  .bit-story-node strong { font-size: 8.5px; }
  .bit-story-core-label { min-width: 98px; padding: 6px 8px; }
  .bit-story-core-label strong { font-size: 9px; }
  .bit-services-overview { padding-top: 70px; }
}

@media (prefers-reduced-motion: reduce) {
  .bit-story-scroll-hint i::after { animation: none !important; transform: none !important; }
  .bit-story-particle,
  .bit-story-orbit,
  .bit-story-world,
  .bit-story-core,
  .bit-story-node,
  .bit-story-word { transform: none; }
}

/* Cinematic header treatment while the service story is pinned. */
.bit-header,
.bit-header .bit-brand-name strong,
.bit-header .bit-brand-name small,
.bit-header .bit-menu-list a,
.bit-header .bit-theme-toggle { transition: background-color .36s ease, border-color .36s ease, color .36s ease, box-shadow .36s ease; }
.bit-header.is-story-active {
  border-bottom-color: rgba(142,179,230,.13);
  background: rgba(3,8,23,.84);
  box-shadow: 0 12px 34px rgba(0,0,0,.13);
}
.bit-header.is-story-active .bit-brand-name strong,
.bit-header.is-story-active .bit-brand-name small { color: #f6f9ff; }
.bit-header.is-story-active .bit-menu-list a { color: #b9c8da; }
.bit-header.is-story-active .bit-menu-list a:hover,
.bit-header.is-story-active .bit-menu-list a:focus-visible,
.bit-header.is-story-active .bit-menu-list .current-menu-item > a,
.bit-header.is-story-active .bit-menu-list .current-menu-ancestor > a { background: rgba(255,255,255,.075); color: #fff; }
.bit-header.is-story-active .bit-theme-toggle { border-color: rgba(255,255,255,.14); background: rgba(255,255,255,.055); color: #eef4ff; }
.bit-header.is-story-active .bit-menu-toggle span { background: #f3f7ff; }
.js-bit-story .bit-story-node,
.js-bit-story .bit-story-orbit,
.js-bit-story .bit-story-core { transform: none; }
html.js-bit-story .bit-service-story { overflow: visible; }
html.js-bit-story .bit-story-stage { overflow: hidden; }


/* Version 25: immersive story moved to Leistungen; homepage hero kept cinematic but pixel-crisp. */
.bit-service-story--leistungen { border-top: 1px solid rgba(125,166,223,.08); }
.bit-leistungen-overview { position: relative; z-index: 3; }

/* Keep the mascot itself out of perspective/scaled parent layers. The surrounding UI carries the depth. */
.js-bit-motion .bit-cinematic-hero .bit-hero-visual {
  transform: none;
  transform-style: flat;
  perspective: none;
  will-change: auto;
}
.js-bit-motion .bit-cinematic-hero .bit-mascot {
  transform: none;
  will-change: auto;
  backface-visibility: visible;
  -webkit-backface-visibility: visible;
  image-rendering: auto;
}
.js-bit-motion .bit-cinematic-hero .bit-floating-card--a {
  transform: translate3d(calc(var(--bit-pointer-x) * 10px), calc(var(--bit-hero-progress) * -24px + var(--bit-pointer-y) * 8px), 0) rotate(calc(var(--bit-hero-progress) * 1.25deg));
}
.js-bit-motion .bit-cinematic-hero .bit-floating-card--b {
  transform: translate3d(calc(var(--bit-pointer-x) * -8px), calc(var(--bit-hero-progress) * 18px + var(--bit-pointer-y) * -7px), 0) rotate(calc(var(--bit-hero-progress) * -1.15deg));
}
.js-bit-motion .bit-cinematic-hero .bit-hero-glow {
  transform: translate3d(calc(var(--bit-pointer-x) * 15px), calc(var(--bit-pointer-y) * 10px), 0) scale(calc(1 + var(--bit-hero-progress) * .16));
}
.bit-cinematic-hero .bit-mascot { transform-origin: 50% 100%; }

@media (max-width: 960px) {
  .bit-service-story--leistungen { margin-top: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .js-bit-motion .bit-cinematic-hero .bit-mascot { transform: none !important; }
}


/* Version 26: static, pixel-crisp homepage hero + synchronized Leistungen story. */
/* The homepage hero artwork and copy intentionally stay on the layout layer. No scroll/pointer
   transform is applied to the mascot or text, which avoids subpixel resampling and text softening. */
.js-bit-motion .bit-cinematic-hero .bit-hero-copy,
.js-bit-motion .bit-cinematic-hero .bit-hero-visual,
.js-bit-motion .bit-cinematic-hero .bit-mascot,
.js-bit-motion .bit-cinematic-hero .bit-floating-card,
.js-bit-motion .bit-cinematic-hero .bit-hero-glow {
  transform: none !important;
  opacity: 1 !important;
  will-change: auto !important;
}
.bit-cinematic-hero .bit-hero-copy,
.bit-cinematic-hero .bit-hero-visual,
.bit-cinematic-hero .bit-mascot,
.bit-cinematic-hero .bit-floating-card,
.bit-cinematic-hero .bit-hero-glow {
  backface-visibility: visible;
  -webkit-backface-visibility: visible;
}
.bit-cinematic-hero::after { transform: translate3d(-50%, 0, 0) scale(1) !important; }
.bit-cinematic-hero .bit-hero-orbit--one { transform: translate(-50%,-50%) rotate(0deg) !important; }
.bit-cinematic-hero .bit-hero-orbit--two { transform: translate(-50%,-50%) rotate(0deg) !important; }
.bit-cinematic-hero .bit-hero-orbit--three { transform: translate(-50%,-50%) rotate(24deg) !important; }

/* Make the scan beam read unmistakably as an arrow and keep its tip on the active node. */
.bit-story-scan { width: 42.2%; }
.bit-story-scan::after {
  content: "";
  position: absolute;
  right: -8px;
  top: 50%;
  width: 0;
  height: 0;
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
  border-left: 9px solid rgba(238,119,218,.92);
  transform: translateY(-50%);
  filter: drop-shadow(0 0 7px rgba(122,173,255,.8));
}
.bit-story-node.is-current {
  border-color: rgba(151,196,255,.48);
}


/* Version 29: local SEO landing pages, breadcrumbs and linked topic cards */
.bit-breadcrumb { margin: 0 0 14px; color: var(--bit-muted); font-size: 13px; font-weight: 700; }
.bit-breadcrumb a { color: inherit; text-decoration: none; }
.bit-breadcrumb a:hover { color: var(--bit-blue); text-decoration: underline; text-underline-offset: 3px; }
.bit-topic-grid a { text-decoration: none; }
.bit-local-links { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.bit-local-links a { display: inline-flex; align-items: center; min-height: 40px; padding: 9px 13px; border: 1px solid var(--bit-line); border-radius: 999px; background: #fff; color: var(--bit-navy); font-size: 14px; font-weight: 800; text-decoration: none; }
.bit-local-links a:hover { border-color: rgba(8,115,223,.35); box-shadow: 0 8px 20px rgba(7,27,56,.06); transform: translateY(-1px); }
html[data-theme="dark"] .bit-local-links a { background: #10243b; color: #edf5ff; border-color: #324b67; }
html[data-theme="dark"] .bit-topic-grid a { color: #f1f6fc; }

.bit-section-head--spaced { margin-top: 42px; }

/* Version 29.2.3: light-mode palette for the immersive Leistungen story. */
html[data-theme="light"] .bit-service-story {
  background: #f7fbff;
  color: var(--bit-text);
}
html[data-theme="light"] .bit-service-story--leistungen {
  border-top-color: rgba(8,115,223,.10);
}
html[data-theme="light"] .bit-story-stage {
  background:
    radial-gradient(circle at 72% 44%, rgba(97,39,200,.10), transparent 31%),
    radial-gradient(circle at 35% 68%, rgba(8,115,223,.11), transparent 32%),
    linear-gradient(145deg, #fbfdff 0%, #edf5fc 52%, #f9f5ff 100%);
}
html[data-theme="light"] .bit-story-stage::before {
  background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(239,246,253,.48));
}
html[data-theme="light"] .bit-story-stage::after {
  background: linear-gradient(180deg, transparent, #fff 88%);
}
html[data-theme="light"] .bit-story-gridlines {
  opacity: .15;
  background-image:
    linear-gradient(rgba(45,91,145,.14) 1px, transparent 1px),
    linear-gradient(90deg, rgba(45,91,145,.14) 1px, transparent 1px);
}
html[data-theme="light"] .bit-story-aura--one {
  background: radial-gradient(circle, rgba(207,11,145,.12), rgba(98,39,200,.055) 43%, transparent 70%);
}
html[data-theme="light"] .bit-story-aura--two {
  background: radial-gradient(circle, rgba(8,115,223,.13), rgba(56,101,239,.045) 45%, transparent 72%);
}
html[data-theme="light"] .bit-story-particle {
  background: #5c96d7;
  box-shadow: 0 0 16px rgba(8,115,223,.45);
  opacity: .48;
}
html[data-theme="light"] .bit-story-kicker { color: #58738f; }
html[data-theme="light"] .bit-story-word--one {
  background: linear-gradient(100deg, #071b38 3%, #183d69 36%, #0873df 75%, #6127c8 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
html[data-theme="light"] .bit-story-word--two {
  background: linear-gradient(100deg, #0873df 0%, #7042d5 48%, #cf0b91 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
html[data-theme="light"] .bit-story-intro > p { color: #526b84; }
html[data-theme="light"] .bit-story-scroll-hint { color: #6b8097; }
html[data-theme="light"] .bit-story-scroll-hint i { background: rgba(7,27,56,.13); }
html[data-theme="light"] .bit-story-copy-head { border-bottom-color: rgba(7,27,56,.12); }
html[data-theme="light"] .bit-story-step-label { color: #607a95; }
html[data-theme="light"] .bit-story-counter b { color: var(--bit-navy); }
html[data-theme="light"] .bit-story-counter i { color: #788ca2; }
html[data-theme="light"] .bit-story-panel-number {
  border-color: rgba(8,115,223,.22);
  background: rgba(255,255,255,.72);
  color: #416a94;
}
html[data-theme="light"] .bit-story-panel-icon {
  border-color: rgba(8,115,223,.19);
  background: linear-gradient(145deg, rgba(8,115,223,.10), rgba(207,11,145,.065));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.85), 0 16px 34px rgba(7,27,56,.08);
}
html[data-theme="light"] .bit-story-panel-icon svg { color: #0873df; }
html[data-theme="light"] .bit-story-panel h3 { color: var(--bit-navy); }
html[data-theme="light"] .bit-story-panel > strong { color: #2f4e6b; }
html[data-theme="light"] .bit-story-panel > p { color: #60758b; }
html[data-theme="light"] .bit-story-link { color: #123d6b; }
html[data-theme="light"] .bit-story-link span { border-color: rgba(7,27,56,.16); background: rgba(255,255,255,.58); }
html[data-theme="light"] .bit-story-link:hover span,
html[data-theme="light"] .bit-story-link:focus-visible span { background: rgba(8,115,223,.09); }
html[data-theme="light"] .bit-story-world::before {
  background: radial-gradient(circle, rgba(8,115,223,.10), rgba(97,39,200,.05) 43%, transparent 70%);
}
html[data-theme="light"] .bit-story-orbit--outer { border-color: rgba(40,94,153,.22); }
html[data-theme="light"] .bit-story-orbit--middle { border-color: rgba(155,54,181,.20); }
html[data-theme="light"] .bit-story-orbit--inner {
  border-color: rgba(7,27,56,.13);
  box-shadow: 0 0 70px rgba(84,85,238,.07);
}
html[data-theme="light"] .bit-story-scan { box-shadow: 0 0 16px rgba(70,133,208,.16); }
html[data-theme="light"] .bit-story-core::before {
  border-color: rgba(35,81,132,.17);
  background: radial-gradient(circle, rgba(8,115,223,.13), rgba(97,39,200,.075) 48%, transparent 72%);
  box-shadow: inset 0 0 40px rgba(92,125,255,.045), 0 0 70px rgba(97,39,200,.07);
}
html[data-theme="light"] .bit-story-core-glow {
  background: radial-gradient(circle, rgba(8,115,223,.18), rgba(97,39,200,.09) 42%, transparent 70%);
}
html[data-theme="light"] .bit-story-core img { filter: drop-shadow(0 22px 32px rgba(7,27,56,.15)); }
html[data-theme="light"] .bit-story-core-label {
  border-color: rgba(8,115,223,.20);
  background: rgba(255,255,255,.82);
  box-shadow: 0 12px 30px rgba(7,27,56,.10), inset 0 1px 0 rgba(255,255,255,.9);
}
html[data-theme="light"] .bit-story-core-label small { color: #70859c; }
html[data-theme="light"] .bit-story-core-label strong { color: #173a60; }
html[data-theme="light"] .bit-story-node {
  border-color: rgba(43,95,151,calc(.18 + var(--bit-node-active) * .26));
  background: linear-gradient(150deg, rgba(255,255,255,.91), rgba(239,246,253,.84));
  box-shadow:
    0 18px 48px rgba(7,27,56,.10),
    0 0 calc(var(--bit-node-active) * 42px) rgba(8,115,223,.16),
    inset 0 1px 0 rgba(255,255,255,.95);
  color: #173b61;
}
html[data-theme="light"] .bit-story-node::after {
  background: linear-gradient(135deg, rgba(8,115,223,.11), transparent 43%, rgba(207,11,145,.09));
}
html[data-theme="light"] .bit-story-node-index { color: #7890a8; }
html[data-theme="light"] .bit-story-node-icon { background: rgba(8,115,223,.08); }
html[data-theme="light"] .bit-story-node-icon svg { color: #0873df; }
html[data-theme="light"] .bit-story-node:hover,
html[data-theme="light"] .bit-story-node:focus-visible,
html[data-theme="light"] .bit-story-node.is-current { border-color: rgba(8,115,223,.48); }
html[data-theme="light"] .bit-story-progress-track { background: rgba(7,27,56,.12); }
html[data-theme="light"] .bit-story-progress-dots span {
  background: #9dafc1;
  box-shadow: 0 0 0 3px rgba(8,115,223,0);
}
html[data-theme="light"] .bit-story-progress-dots span.is-active {
  background: #287fce;
  box-shadow: 0 0 0 3px rgba(8,115,223,.10), 0 0 13px rgba(8,115,223,.30);
}
html[data-theme="light"] .bit-story-outro > span { color: #647d97; }
html[data-theme="light"] .bit-story-outro h2 { color: var(--bit-navy); }
html[data-theme="light"] .bit-story-outro p { color: #5d7188; }

/* Keep the sticky header light while the Leistungen story is pinned in light mode. */
html[data-theme="light"] .bit-header.is-story-active {
  border-bottom-color: rgba(220,229,239,.9);
  background: rgba(255,255,255,.93);
  box-shadow: 0 12px 34px rgba(7,27,56,.08);
}
html[data-theme="light"] .bit-header.is-story-active .bit-brand-name strong,
html[data-theme="light"] .bit-header.is-story-active .bit-brand-name small { color: var(--bit-navy); }
html[data-theme="light"] .bit-header.is-story-active .bit-menu-list a { color: #284662; }
html[data-theme="light"] .bit-header.is-story-active .bit-menu-list a:hover,
html[data-theme="light"] .bit-header.is-story-active .bit-menu-list a:focus-visible,
html[data-theme="light"] .bit-header.is-story-active .bit-menu-list .current-menu-item > a,
html[data-theme="light"] .bit-header.is-story-active .bit-menu-list .current-menu-ancestor > a {
  background: #f0f5fb;
  color: var(--bit-navy);
}
html[data-theme="light"] .bit-header.is-story-active .bit-theme-toggle {
  border-color: var(--bit-line);
  background: #fff;
  color: var(--bit-navy);
}
html[data-theme="light"] .bit-header.is-story-active .bit-menu-toggle span { background: var(--bit-navy); }