@font-face {
  font-family: "Press Start 2P";
  src: url("../fonts/press-start-2p-latin-400-normal.5c7e04d0202b.woff2") format("woff2");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "JetBrains Mono";
  src: url("../fonts/jetbrains-mono-latin-wght-normal.b058178d7f30.woff2") format("woff2");
  font-style: normal;
  font-weight: 100 800;
  font-display: swap;
}

@font-face {
  font-family: "Roboto";
  src: url("../fonts/roboto-latin-wght-normal.665db5e157d2.woff2") format("woff2");
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
}

/* ---------- CSS Reset & Base Styles ---------------------- */

*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* Utility: Screen Reader Only */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

/* ---------- Design System Tokens -------------------------- */

:root {
  /* ---- Colors ------------------------------------------------------------
     One blue family and one orange, the two colours the brand already owned.
     Every value below is checked against its intended background: body text
     clears 4.5:1, borders and icons clear 3:1. Docs: docs/color_palette.md */

  /* Blue grounds, darkest to lightest. Each step is ~1.15-1.25:1 against the
     one before it, which is the least separation the eye reliably reads. */
  --clr-bg: #12242d;        /* page ground */
  --clr-surface-1: #1a303a; /* alternating bands, resting cards */
  --clr-surface-1-rgb: 26, 48, 58;
  --clr-surface-2: #22404c; /* raised cards, inputs, secondary buttons */
  --clr-surface-3: #2f4858; /* the original brand blue: chips, hover peaks */
  --clr-bg-alt: var(--clr-surface-1); /* pre-existing name, kept in step */

  /* Text. "subtle" is the floor: 4.61:1 even on surface-3, the lightest ground. */
  --clr-text: #edf3f5;
  --clr-text-rgb: 237, 243, 245;
  --clr-text-muted: #afc2cc;
  --clr-text-subtle: #a3b7c1;

  /* Orange. --clr-accent is the fill; --clr-accent-text is the brighter tint
     that clears 4.5:1 as text on every dark ground; --clr-accent-deep is the
     only orange dark enough to sit on the light report panel. */
  --clr-accent: #f18d4f;
  --clr-accent-text: #f9a96f;
  --clr-accent-deep: #a54e0c;
  --clr-accent-rgb: 241, 141, 79;

  /* Cool blue, the orange's complement. Used sparingly: charts, the second
     half of a before/after, the "already working" state. */
  --clr-cool: #4f9ef1;
  --clr-cool-text: #8cc6f2;
  --clr-cool-rgb: 79, 158, 241;

  /* The light panel. Used where a section should read as a printed report
     rather than as more website — see the worked example on the homepage. */
  --clr-paper: #f5f2ed;
  --clr-paper-ink: #16262e;
  --clr-paper-muted: #54666f;
  --clr-paper-line: #ded7cd;

  --card-bg: var(--clr-surface-1);
  --border-subtle: rgba(var(--clr-text-rgb), 0.12);
  --border-color: rgba(var(--clr-text-rgb), 0.2);
  --border-strong: rgba(var(--clr-text-rgb), 0.32);
  --form-bg: rgba(0, 0, 0, 0.22);

  /* Accent opacity scale (reused 2+ times each) */
  --clr-accent-a12: rgba(var(--clr-accent-rgb), 0.12);
  --clr-accent-a15: rgba(var(--clr-accent-rgb), 0.15);
  --clr-accent-a18: rgba(var(--clr-accent-rgb), 0.18);
  --clr-accent-a25: rgba(var(--clr-accent-rgb), 0.25);
  --clr-accent-a30: rgba(var(--clr-accent-rgb), 0.3);
  --clr-accent-a40: rgba(var(--clr-accent-rgb), 0.4);

  /* Text opacity scale (reused 2+ times each) */
  --clr-text-a08: rgba(var(--clr-text-rgb), 0.08);
  --clr-text-a90: rgba(var(--clr-text-rgb), 0.9);
  --clr-text-a92: rgba(var(--clr-text-rgb), 0.92);
  --clr-text-a95: rgba(var(--clr-text-rgb), 0.95);

  /* Cool-blue opacity scale, mirroring the accent one above. */
  --clr-cool-a12: rgba(var(--clr-cool-rgb), 0.12);
  --clr-cool-a25: rgba(var(--clr-cool-rgb), 0.25);
  --clr-cool-a40: rgba(var(--clr-cool-rgb), 0.4);

  /* Header glass. The scrolled bar used to be an off-palette #1d3340 lifted
     further by saturate(170%), which composited ~201deg at 50% HSL saturation
     over grounds that sit at 197-200deg and 38-43%. It read as a bluer, more
     saturated blue than the rest of the site. Built from surface-1 instead,
     with the filter only mildly lifting the backdrop, it composites onto the
     palette's own hue and saturation band. */
  --header-glass: rgba(var(--clr-surface-1-rgb), 0.72);
  --header-glass-mobile: rgba(var(--clr-surface-1-rgb), 0.88);
  --header-glass-solid: rgba(var(--clr-surface-1-rgb), 0.97);
  --header-glass-top: rgba(var(--clr-surface-1-rgb), 0.36);
  --header-glass-filter: blur(18px) saturate(115%);
  --header-glass-filter-mobile: blur(10px) saturate(110%);

  /* ---- Typography --------------------------------------------------------
     Headings are set in the body face. The monospace is what made the site
     read as a developer tool rather than a consultancy, so it is now a
     deliberate accent only: eyebrows, labels, numbers, meta rows, buttons,
     and the one typed word in the hero. Flip --ff-heading back to
     var(--ff-code) to restore monospace headlines everywhere. */
  --ff-code: "JetBrains Mono", monospace;
  --ff-body: "Roboto", system-ui, -apple-system, sans-serif;

  --ff-heading: var(--ff-body);
  --ff-label: var(--ff-code);

  /* Spacing */
  --space-xs: 0.5rem;
  --space-sm: 1rem;
  --space-md: 1.5rem;
  --space-lg: 3rem;
  --space-xl: 5rem;
  --container-width: 1200px;
  --header-height: 70px;

  /* Border Radius */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 16px;
  --radius-full: 9999px;

  /* Transitions */
  --ease-out: cubic-bezier(0.215, 0.61, 0.355, 1);
}

/* ---------- Global Styles --------------------------------- */

body {
  background-color: var(--clr-bg);
  color: var(--clr-text);
  font-family: var(--ff-body);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
  flex-direction: column;
  overflow-x: hidden;
  /* Relative, so collectstatic rewrites it to the hashed filename. An
     absolute /static/ path bypasses the manifest and is never cache-busted. */
  cursor: url("../img/cursor.08178ab6fb66.svg") 10 0, auto;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--ff-heading);
  line-height: 1.2;
  font-weight: 700;
  color: #fff;
  margin-bottom: 1rem;
  letter-spacing: -0.02em;
}

p {
  margin-bottom: 1rem;
}

a {
  color: inherit;
  text-decoration: none;
  transition: color 0.2s ease;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* ---------- Navigation ------------------------------------ */

.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: var(--header-height);
  z-index: 1000;
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: background 0.35s ease, backdrop-filter 0.35s ease, border-color 0.35s ease, box-shadow 0.35s ease;
}

.site-header::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, var(--header-glass-top) 0%, rgba(var(--clr-surface-1-rgb), 0) 100%);
  pointer-events: none;
  transition: opacity 0.35s ease;
}

.site-header.scrolled,
body.nav-open .site-header {
  background: var(--header-glass);
  backdrop-filter: var(--header-glass-filter);
  -webkit-backdrop-filter: var(--header-glass-filter);
  border-bottom-color: var(--clr-text-a08);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.16);
}

.site-header.scrolled::before,
body.nav-open .site-header::before {
  opacity: 0;
}

.site-header-inner {
  max-width: var(--container-width);
  margin: 0 auto;
  padding: 0 clamp(1rem, 5vw, 2rem);
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: relative;
  z-index: 1;
}

.logo a {
  display: flex;
  align-items: center;
}

.logo img,
.logo svg {
  height: 40px;
  width: auto;
}

/* Desktop Nav */
.site-nav-list {
  display: flex;
  align-items: center;
  gap: 2rem;
  list-style: none;
}

.site-nav-link {
  font-family: var(--ff-code);
  font-size: 0.85rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.86);
  position: relative;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.35);
  transition: color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
}

.site-nav-link.active {
  color: #fff;
}

.site-nav-link:not(.nav-cta):hover,
.site-nav-link:not(.nav-cta):focus-visible {
  color: var(--clr-accent-text);
}

/* No `outline: none` here. It used to be, and the only reason nav links kept
   a visible focus ring was that experience.css loads later and restores one —
   an undocumented dependency on stylesheet order that a future reorder would
   have silently turned into a keyboard-accessibility bug. */

.site-header.scrolled .site-nav-link,
body.nav-open .site-nav-link {
  color: var(--clr-text-muted);
  text-shadow: none;
}

.site-header.scrolled .site-nav-link.active,
body.nav-open .site-nav-link.active {
  color: #fff;
}

.site-header.scrolled .site-nav-link:not(.nav-cta):hover,
.site-header.scrolled .site-nav-link:not(.nav-cta):focus-visible,
body.nav-open .site-nav-link:not(.nav-cta):hover,
body.nav-open .site-nav-link:not(.nav-cta):focus-visible {
  color: var(--clr-accent-text);
}

.site-nav-link:not(.nav-cta).active,
.site-header.scrolled .site-nav-link:not(.nav-cta).active,
body.nav-open .site-nav-link:not(.nav-cta).active {
  color: var(--clr-accent-text);
  text-shadow: none;
}

/* CTA Button in Nav */
.site-nav-link.nav-cta {
  padding: 0.6rem 1.2rem;
  background: var(--clr-accent-a12);
  border: 1px solid rgba(241, 141, 79, 0.45);
  color: var(--clr-accent-text);
  border-radius: var(--radius-full);
  font-weight: 700;
  text-shadow: none;
  transition: transform 0.2s var(--ease-out), box-shadow 0.2s var(--ease-out), background 0.2s ease, color 0.2s ease;
}

.site-nav-link.nav-cta:hover {
  background: var(--clr-accent);
  color: var(--clr-bg-alt);
  transform: translateY(-1px);
  box-shadow: 0 0 22px rgba(241, 141, 79, 0.35);
}

.site-header.scrolled .site-nav-link.nav-cta,
body.nav-open .site-nav-link.nav-cta {
  color: var(--clr-accent-text);
}

.site-header.scrolled .site-nav-link.nav-cta:hover,
body.nav-open .site-nav-link.nav-cta:hover {
  color: var(--clr-bg-alt);
}

.nd-group {
  display: flex;
  flex-direction: column;
  padding-bottom: 0.75rem;
  margin-bottom: 0.75rem;
  border-bottom: 1px solid rgba(236, 240, 241, 0.08);
}

.nd-group-title {
  font-family: var(--ff-code);
  font-size: 0.62rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--clr-accent-text);
  margin-bottom: 0.5rem;
}

.nd-group a {
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.78);
  padding: 0.32rem 0.5rem;
  margin: 0 -0.5rem;
  border-radius: 8px;
  transition: color 0.15s ease, background 0.15s ease;
  white-space: nowrap;
}

.nd-group a:hover,
.nd-group a:focus-visible {
  color: #fff;
  background: rgba(255, 255, 255, 0.06);
}

.nd-all {
  display: block;
  font-family: var(--ff-code);
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--clr-accent-text);
  padding: 0.2rem 0 0.3rem;
}

.nd-all:hover,
.nd-all:focus-visible {
  color: var(--clr-accent);
}

/* Language Switcher */
.lang-toggle {
  display: flex;
  align-items: center;
  gap: 0;
}

.lang-btn {
  background: transparent;
  border: none;
  font-family: var(--ff-code);
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--clr-text-muted);
  cursor: pointer;
  padding: 0.3rem 0.5rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  transition: color 0.2s ease;
}

.lang-btn:hover {
  color: var(--clr-text);
}

.lang-btn.active {
  color: var(--clr-accent-text);
}

.lang-sep {
  color: var(--clr-text-muted);
  opacity: 0.5;
  font-size: 0.75rem;
}

/* Groups nav + utilities — keeps the original 2-item left/right layout */
.header-right {
  display: flex;
  align-items: center;
  gap: 1.5rem;
}

/* Header utilities wrapper (lang on desktop, hamburger on mobile) */
.header-end {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.header-lang {
  padding-left: 1.25rem;
  border-left: 1px solid rgba(236, 240, 241, 0.12);
}

/* Language toggle inside mobile nav overlay — hidden on desktop */
.nav-lang {
  display: none;
}

/* Mobile Nav Toggle */
.mobile-nav-toggle {
  display: none;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 0.5rem;
  z-index: 1002;
}

.hamburger {
  width: 24px;
  height: 14px;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.hamburger span {
  display: block;
  width: 100%;
  height: 2px;
  background-color: #fff;
  transition: transform 0.3s ease, opacity 0.3s ease;
}

/* Mobile Nav State */
@media (max-width: 768px) {
  .site-header-inner {
    padding: 0 1rem;
  }

  .logo img,
  .logo svg {
    height: 34px;
  }

  .header-end {
    position: relative;
    z-index: 1100;
  }

  .header-lang {
    display: none;
  }

  .mobile-nav-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
    position: relative;
    z-index: 1100;
  }

  /* Heavy blur is costly on mobile GPUs — trade blur radius for opacity. */
  .site-header.scrolled,
  body.nav-open .site-header {
    background: var(--header-glass-mobile);
    backdrop-filter: var(--header-glass-filter-mobile);
    -webkit-backdrop-filter: var(--header-glass-filter-mobile);
  }

  .mobile-nav-toggle .hamburger span {
    background-color: var(--clr-accent-text);
  }

  .site-nav {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 100vh;
    height: 100dvh; /* keep the bottom (language toggle) above the iOS URL bar */
    z-index: 1001;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: calc(var(--header-height) + 1.5rem) clamp(1.5rem, 6vw, 3rem) 3rem;
    overflow-y: auto;
    background: linear-gradient(
      180deg,
      rgba(var(--clr-surface-1-rgb), 0.99) 0%,
      rgba(var(--clr-surface-1-rgb), 0.96) 60%,
      rgba(47, 72, 88, 0.95) 100%
    );
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-12px);
    pointer-events: none;
    transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s;
  }

  .site-nav::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
      radial-gradient(circle at 20% 10%, rgba(241, 141, 79, 0.14), transparent 45%),
      radial-gradient(circle at 80% 0%, rgba(79, 158, 241, 0.12), transparent 40%);
    opacity: 0.9;
    pointer-events: none;
  }

  .site-nav.is-open {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    pointer-events: auto;
  }

  .site-nav-list {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    text-align: center;
    list-style: none;
    width: min(420px, 100%);
    margin: 0 auto;
  }

  .site-nav-link {
    display: block;
    font-size: 1.15rem;
    padding: 0.65rem 0;
    border-bottom: 1px solid var(--clr-text-a08);
  }

  .site-nav-link:not(.nav-cta).active {
    box-shadow: none;
  }

  .site-nav-link.nav-cta {
    display: flex;
    align-items: center;
    width: 100%;
    justify-content: center;
    margin-top: 0.5rem;
    border-bottom: none;
  }

  .nav-lang {
    display: flex;
    justify-content: center;
    position: relative;
    z-index: 1;
    width: min(420px, 100%);
    margin-top: 2rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--border-color);
  }

  .lang-toggle {
    justify-content: center;
    gap: 0.25rem;
  }

  .lang-btn {
    padding: 0.45rem 0.65rem;
    font-size: 0.9rem;
  }

  body.nav-open .hamburger span:nth-child(1) {
    transform: translateY(6px) rotate(45deg);
  }
  body.nav-open .hamburger span:nth-child(2) {
    transform: translateY(-6px) rotate(-45deg);
  }
  
  body.nav-open {
    overflow: hidden;
  }}

#bg-canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0; /* Behind content */
  pointer-events: auto; /* Allow mouse interaction */
}

.hero-heading {
  font-size: clamp(2.5rem, 5vw, 4.5rem);
  letter-spacing: -0.03em;
  margin-bottom: 1.5rem;
}

/* Narrow phones: the German lines ("Daten, denen Sie" / "endlich vertrauen")
   are up to 17 monospace characters and overflow at the 2.5rem floor. */
@media (max-width: 430px) {
  .hero-heading {
    font-size: clamp(1.7rem, 8.5vw, 2.2rem);
  }}

.text-accent {
  color: var(--clr-accent-text);
  filter: drop-shadow(0 0 10px var(--clr-accent-a30));
}

.text-gradient {
  color: var(--clr-accent-text);
}

.timeline-container {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  position: relative;
  gap: 1rem;
}

/* Connecting line */
.timeline-container::before {
  content: '';
  position: absolute;
  top: 20px;
  left: 50px;
  right: 50px;
  height: 2px;
  background: linear-gradient(90deg, 
    rgba(241, 141, 79, 0) 0%, 
    var(--clr-accent-a40) 20%, 
    var(--clr-accent-a40) 80%, 
    rgba(241, 141, 79, 0) 100%
  );
  z-index: 0;
}

.t-label {
  font-family: var(--ff-code);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: #fff;
  font-weight: 700;
  margin-bottom: 0.4rem;
}

.t-desc {
  font-size: 0.8rem;
  color: var(--clr-text-muted);
  text-align: center;
  max-width: 140px;
  line-height: 1.3;
}

@media (max-width: 768px) {

  /* Vertical journey: the connecting line becomes a left rail. */
  .timeline-container {
    flex-direction: column;
    align-items: stretch;
    gap: 1.5rem;
  }

  .timeline-container::before {
    top: 21px;
    bottom: 21px;
    left: 20px;
    right: auto;
    width: 2px;
    height: auto;
    background: linear-gradient(180deg,
      rgba(241, 141, 79, 0) 0%,
      var(--clr-accent-a40) 15%,
      var(--clr-accent-a40) 85%,
      rgba(241, 141, 79, 0) 100%
    );
  }

  .t-label {
    margin-bottom: 0.15rem;
  }

  .t-desc {
    max-width: none;
    text-align: left;
    margin-bottom: 0;
  }}

.highlight-dot {
  color: var(--clr-accent-text);
}

/* Attached by JS only while the hero typewriter runs; the media guard
   keeps the cursor solid for visitors who prefer reduced motion. */
@media (prefers-reduced-motion: no-preference) {
  .cursor-blink {
    animation: cursorBlink 1.1s step-end infinite;
  }}

@keyframes cursorBlink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0; }}

.hero-eyebrow {
  font-family: var(--ff-code);
  font-size: clamp(0.75rem, 1.4vw, 0.9rem);
  font-weight: 600;
  color: var(--clr-accent-text);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  margin-bottom: 1.25rem;
}

.hero-microtrust {
  margin-top: 1.5rem;
  font-family: var(--ff-code);
  font-size: 0.8rem;
  color: var(--clr-text-muted);
  opacity: 0.85;
}

.hero-cta-group {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: center;
}

.hero-proof-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
  max-width: 220px;
}

.hero-proof-value {
  font-family: var(--ff-code);
  font-size: clamp(1.8rem, 3.5vw, 2.4rem);
  font-weight: 800;
  color: var(--clr-accent-text);
  line-height: 1;
}

.hero-proof-label {
  color: var(--clr-text-muted);
  font-size: 0.85rem;
  line-height: 1.4;
}

.cta-proof {
  justify-content: center;
  border-top: 0;
  padding-top: 0;
  margin: 0 0 2.25rem;
}

/* The hero clips its glows and dot grid (overflow: hidden), which left a hard
   horizontal edge where the next section began. Fading the whole backdrop to
   transparent over its last stretch lets it dissolve into the page ground
   instead, so the hero has no bottom edge at all. */
.hero-background-elements {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(to bottom, #000 55%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 55%, transparent 100%);
}

.glow-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(110px);
  opacity: 0.22;
}

.orb-1 {
  width: 460px;
  height: 460px;
  background: var(--clr-accent);
  top: -80px;
  right: -80px;
}

.orb-2 {
  width: 580px;
  height: 580px;
  background: var(--clr-cool);
  bottom: -120px;
  left: -120px;
}

/* Smaller, cheaper orbs on phones: same glow, far less GPU blur work. */
@media (max-width: 768px) {
  .glow-orb {
    filter: blur(70px);
  }
  .orb-1 {
    width: 280px;
    height: 280px;
    top: -60px;
    right: -60px;
  }
  .orb-2 {
    width: 340px;
    height: 340px;
    bottom: -80px;
    left: -80px;
  }}

.strip-container {
  max-width: var(--container-width);
  margin: 0 auto;
  padding: 0 1rem;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 1.5rem;
}

.strip-label {
  font-family: var(--ff-code);
  font-size: 0.75rem;
  color: var(--clr-accent-text);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.tech-logos {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: center;
}

.tech-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  min-height: 2.15rem;
  padding: 0.4rem 1rem;
  border-radius: 100px;
  background: rgba(255, 255, 255, 0.05);
  font-size: 0.85rem;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.8);
  border: 1px solid var(--border-color);
  font-family: var(--ff-code);
}

.tech-pill img {
  width: 18px;
  height: 18px;
  object-fit: contain;
  opacity: 0.88;
}

.section-header {
  text-align: center;
  margin-bottom: var(--space-lg);
}

.section-title {
  font-size: 2rem;
  margin-bottom: 0.5rem;
}

.section-desc {
  color: var(--clr-text-muted);
  font-size: 1.1rem;
}

.capabilities-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 1.5rem;
}

@media (min-width: 1200px) {
  .capabilities-grid {
    grid-template-columns: repeat(4, 1fr);
  }}

.card-icon-box {
  width: 44px;
  height: 44px;
  margin-bottom: 1.25rem;
}

.card-icon-box img {
  width: 100%;
  height: 100%;
}

@media (hover: none) {

  /* Touch feedback: mirror the hover personality with press states. */
  .btn,
.form-submit,
.note-card-link,
.blog-card,
.value-card,
.pill-option,
.site-nav-link,
.filter-tool-item {
    -webkit-tap-highlight-color: transparent;
  }

  .btn:active,
  .form-submit:active {
    transform: translateY(1px) scale(0.97);
    box-shadow: none;
  }

  .note-card-link:active .note-card,
.blog-card:active,
.value-card:active {
    transform: scale(0.985);
    border-color: var(--clr-accent-text);
  }

  .pill-option:active span,
  .filter-tool-item:active {
    border-color: rgba(241, 141, 79, 0.5);
    color: #fff;
  }

  .site-nav-link:active {
    color: var(--clr-accent-text);
  }

  .site-nav-link.nav-cta:active {
    background: var(--clr-accent);
    color: var(--clr-bg-alt);
  }}

/* ---------- About (shared with /about page) ---------------- */

.about-inner {
  max-width: var(--container-width);
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(220px, 300px) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}

.about-visual {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.35rem;
}

.about-photo-card {
  width: 100%;
  border-radius: var(--radius-lg);
  background:
    radial-gradient(circle at 30% 20%, var(--clr-accent-a18), transparent 55%),
    var(--card-bg);
  border: 1px solid var(--border-color);
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding-top: 1.5rem;
  margin-bottom: 1rem;
}

.about-photo {
  width: 86%;
  height: auto;
  display: block;
}

.about-name {
  font-family: var(--ff-code);
  font-weight: 700;
  color: #fff;
  font-size: 0.95rem;
}

.about-role {
  font-family: var(--ff-code);
  font-size: 0.75rem;
  color: var(--clr-text-muted);
}

.about-title {
  font-size: clamp(1.6rem, 3.5vw, 2.4rem);
}

.about-text {
  color: var(--clr-text-muted);
  font-size: 1.05rem;
  max-width: 620px;
}

.about-points {
  list-style: none;
  margin: 1.5rem 0 2rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.about-points li {
  position: relative;
  padding-left: 1.6rem;
  color: var(--clr-text-a90);
}

.about-points li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: var(--clr-accent-text);
  font-family: var(--ff-code);
  font-weight: 700;
}

@media (max-width: 820px) {
  .about-inner {
    grid-template-columns: 1fr;
  }
  .about-visual {
    max-width: 260px;
    margin: 0 auto;
  }
  .about-content {
    text-align: center;
  }
  .about-points {
    text-align: left;
    max-width: 420px;
    margin-left: auto;
    margin-right: auto;
  }}

/* ---------- About Page ------------------------------------- */

.about-page-intro {
  margin-bottom: var(--space-xl);
}

.about-story {
  max-width: 820px;
  margin: 0 auto var(--space-xl);
  padding: clamp(1.75rem, 4vw, 2.75rem);
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--border-color);
  border-left: 3px solid var(--clr-accent);
  border-radius: var(--radius-md);
}

.about-story .hero-tag {
  margin-bottom: 0.9rem;
}

.about-story-text {
  font-size: 1.1rem;
  line-height: 1.75;
  color: var(--clr-text-a92);
  margin: 0;
}

.about-values {
  margin-bottom: var(--space-xl);
}

.values-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1.5rem;
}

.value-card {
  background: var(--card-bg);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  padding: 2rem;
  transition: transform 0.3s var(--ease-out), border-color 0.3s ease;
}

.value-card:hover {
  transform: translateY(-5px);
  border-color: var(--clr-accent-text);
}

.value-card h3 {
  font-size: 1.1rem;
}

.value-card p {
  color: var(--clr-text-muted);
  font-size: 0.95rem;
  margin: 0;
}

.about-tools {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 1.5rem;
  padding: 2rem 1rem;
  border-top: 1px solid var(--border-color);
  border-bottom: 1px solid var(--border-color);
  margin-bottom: var(--space-lg);
}

/* ---------- Latest Notes (Blog) --------------------------- */

.latest-notes-section {
  padding: var(--space-xl) 1rem;
  max-width: var(--container-width);
  margin: 0 auto;
  border-top: 1px solid var(--border-color);
}

.latest-notes-section .section-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  text-align: left;
}

.link-arrow {
  color: var(--clr-accent-text);
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--ff-code);
  font-size: 0.9rem;
}

.link-arrow:hover span {
  transform: translateX(4px);
  transition: transform 0.2s ease;
}

.notes-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 2rem;
}

.note-card-link {
  display: block;
  text-decoration: none;
  color: inherit;
  border-radius: var(--radius-lg);
  transition: transform 0.2s ease;
}

.note-card-link:hover {
  transform: translateY(-4px);
}

.note-card-link:hover .note-card {
  background: rgba(255, 255, 255, 0.08);
  border-color: var(--clr-accent-text);
}

.note-card {
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
  padding: 1.5rem;
  border-radius: var(--radius-lg);
  background: var(--card-bg);
  border: 1px solid var(--border-color);
  transition: all 0.2s ease;
  height: 100%;
}

.note-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.8rem;
  color: var(--clr-text-muted);
  font-family: var(--ff-code);
}

.note-tools {
  display: flex;
  gap: 0.4rem;
  align-items: center;
}

.note-tool-icon {
  width: 18px;
  height: 18px;
  object-fit: contain;
  opacity: 0.8;
  transition: opacity 0.2s ease;
}

.note-card-link:hover .note-tool-icon {
  opacity: 1;
}

.note-title {
  font-size: 1.15rem;
  margin: 0;
}

.note-excerpt {
  font-size: 0.9rem;
  color: var(--clr-text-muted);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin: 0;
}

.cta-inner {
  max-width: 600px;
  margin: 0 auto;
}

.cta-inner h2 {
  font-size: 2rem;
  margin-bottom: 1rem;
}

.cta-inner p {
  color: var(--clr-text-muted);
  margin-bottom: 2rem;
  font-size: 1.1rem;
}

.cta-microtrust {
  margin: 1.5rem 0 0 !important;
  font-family: var(--ff-code);
  font-size: 0.8rem !important;
  opacity: 0.85;
}

/* ---------- Buttons --------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.8rem 1.6rem;
  border-radius: var(--radius-full);
  font-weight: 600;
  font-size: 0.95rem;
  transition: all 0.2s ease;
  cursor: pointer;
  border: none;
  font-family: var(--ff-code);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.btn-primary {
  background: var(--clr-accent);
  color: var(--clr-bg);
}

.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 20px var(--clr-accent-a25);
}

.btn-secondary {
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.btn-secondary:hover {
  background: rgba(255, 255, 255, 0.15);
  transform: translateY(-2px);
}

.btn-large {
  padding: 1rem 2.5rem;
  font-size: 1rem;
}

.form-submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.8rem 1.6rem;
    border-radius: var(--radius-full);
    font-weight: 600;
    font-size: 1rem;
    transition: all 0.2s ease;
    cursor: pointer;
    border: none;
    background: var(--clr-accent);
    color: var(--clr-bg);
    margin-top: 1rem;
    font-family: var(--ff-code);
}
.form-submit:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 20px var(--clr-accent-a25);
}

/* ---------- Footer ---------------------------------------- */

.site-footer {
  padding: 3rem 1rem 1.5rem;
  border-top: 1px solid var(--border-color);
  font-size: 0.85rem;
  color: var(--clr-text-muted);
  background: var(--clr-bg-alt);
}

.footer-content {
  max-width: var(--container-width);
  margin: 0 auto;
  padding: 0 clamp(1rem, 5vw, 2rem);
}

.footer-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr) minmax(0, 1fr);
  gap: 2.5rem;
  padding-bottom: 2rem;
}

.footer-logo {
  font-family: "Press Start 2P", var(--ff-code);
  font-size: 1rem;
  color: #fff;
  display: inline-block;
  margin-bottom: 1rem;
}

.footer-logo-accent {
  color: var(--clr-accent-text);
  text-decoration: underline;
}

.footer-tagline {
  max-width: 320px;
  line-height: 1.6;
  margin-bottom: 1rem;
}

.footer-email {
  font-family: var(--ff-code);
  color: var(--clr-accent-text);
  font-weight: 600;
}

.footer-email:hover {
  color: #fff;
}

.footer-col {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.footer-col-title {
  font-family: var(--ff-code);
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: #fff;
  margin-bottom: 0.35rem;
}

.footer-col a {
  color: var(--clr-text-muted);
  width: fit-content;
}

.footer-col a:hover {
  color: var(--clr-accent-text);
}

.footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--border-color);
  font-family: var(--ff-code);
  font-size: 0.8rem;
}

.footer-legal {
  display: flex;
  gap: 1.5rem;
}

.footer-legal a:hover {
  color: var(--clr-accent-text);
}

@media (max-width: 720px) {
  .footer-grid {
    grid-template-columns: 1fr;
    gap: 2rem;
  }}

/* Discreet "secret door" easter egg next to the copyright */
.footer-keyhole {
  display: inline-flex;
  align-items: center;
  margin-left: 0.55rem;
  vertical-align: middle;
  color: var(--clr-text-muted);
  opacity: 0.25;
  transition: opacity 0.3s ease, color 0.3s ease, transform 0.3s ease;
}
.footer-keyhole:hover { opacity: 1; color: var(--clr-accent-text); transform: translateY(-1px); }
.footer-keyhole svg { width: 13px; height: 13px; }

/* ---------- Page Layouts ---------------------------------- */

.page-container,
.services {
  max-width: var(--container-width);
  margin: 0 auto;
  padding: calc(var(--header-height) + 2rem) 1rem 4rem;
}

/* Prose Surface / Content Cards */
.prose-surface {
  background: var(--clr-bg-alt);
  border-radius: var(--radius-lg);
  padding: clamp(2rem, 5vw, 4rem);
  border: 1px solid var(--border-color);
  max-width: 800px; /* Optimized line length for reading */
  margin: 0 auto;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
}

/* Forms */

/* Spam trap: off-screen, out of the tab order, and aria-hidden in the
   template. Nothing a person sees or reaches, so anything that arrives in it
   came from a bot filling every input it could find. */
.form-trap {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.form-group {
  margin-bottom: 1.5rem;
}

.form-group label {
  display: block;
  margin-bottom: 0.5rem;
  font-weight: 500;
  color: #fff;
  font-size: 0.9rem;
  font-family: var(--ff-code);
}

.form-input, .form-textarea, input[type="text"], input[type="email"], textarea {
  width: 100%;
  padding: 0.8rem 1rem;
  border-radius: var(--radius-md);
  border: 1px solid var(--border-color);
  background: var(--form-bg);
  color: #fff;
  font-family: var(--ff-body);
  font-size: 1rem;
  transition: border-color 0.2s ease, background 0.2s ease;
}

.form-input:focus, .form-textarea:focus {
  outline: none;
  border-color: var(--clr-accent-text);
  background: rgba(0, 0, 0, 0.3);
}

.form-textarea {
  min-height: 120px;
  resize: vertical;
}

.form-select {
  width: 100%;
  padding: 0.8rem 1rem;
  border-radius: var(--radius-md);
  border: 1px solid var(--border-color);
  background: var(--form-bg);
  color: #fff;
  font-family: var(--ff-body);
  font-size: 1rem;
  cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23f18d4f' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
}

.form-select:focus {
  outline: none;
  border-color: var(--clr-accent-text);
}

.form-select option {
  background: var(--clr-bg-alt);
  color: #fff;
}

/* Call-request fieldset (contact page) */
.call-request {
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: 1.5rem;
  margin: 0 0 1.5rem;
}

.call-request-legend {
  font-family: var(--ff-code);
  font-size: 0.9rem;
  font-weight: 600;
  color: #fff;
  padding: 0 0.6rem;
}

.call-request-optional {
  color: var(--clr-text-muted);
  font-weight: 400;
  font-size: 0.8rem;
}

.call-request .form-group:last-child {
  margin-bottom: 0;
}

.form-label {
  display: block;
  margin-bottom: 0.5rem;
  font-weight: 500;
  color: #fff;
  font-size: 0.9rem;
  font-family: var(--ff-code);
}

.pill-options {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.pill-option {
  position: relative;
  cursor: pointer;
}

.pill-option input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.pill-option span {
  display: inline-flex;
  align-items: center;
  padding: 0.45rem 1rem;
  border-radius: var(--radius-full);
  background: var(--form-bg);
  border: 1px solid var(--border-color);
  color: var(--clr-text-muted);
  font-family: var(--ff-code);
  font-size: 0.85rem;
  transition: all 0.2s ease;
  user-select: none;
}

.pill-option:hover span {
  border-color: rgba(241, 141, 79, 0.5);
  color: #fff;
}

.pill-option input:checked + span {
  background: var(--clr-accent-a18);
  border-color: var(--clr-accent-text);
  color: #fff;
}

.pill-option input:focus-visible + span {
  outline: 2px solid var(--clr-accent);
  outline-offset: 2px;
}

.form-error {
  color: #ff6b6b;
  font-size: 0.85rem;
  margin-top: 0.4rem;
}

/* Messages */
.message {
  padding: 1rem;
  border-radius: var(--radius-md);
  margin-bottom: 1.5rem;
  font-weight: 500;
}
.message-success { background: rgba(39, 174, 96, 0.15); border: 1px solid rgba(39, 174, 96, 0.3); color: #2ecc71; }
.message-error { background: rgba(231, 76, 60, 0.15); border: 1px solid rgba(231, 76, 60, 0.3); color: #e74c3c; }

/* Contact Specifics */
.contact-info {
  margin-top: 3rem;
  padding-top: 2rem;
  border-top: 1px solid var(--border-color);
}

.imprint-grid { display: grid; gap: 1rem; }
.imprint-item { display: flex; gap: 1rem; }
.imprint-label { font-weight: 600; min-width: 100px; color: var(--clr-text-muted); font-family: var(--ff-code); }
.imprint-value { color: #fff; }

.contact-surface .contact-header {
  margin-bottom: 2rem;
}

.contact-surface .contact-intro {
  font-size: 1.1rem;
  line-height: 1.6;
  color: var(--clr-text-a95);
  margin-bottom: 0.75rem;
}

.contact-surface .contact-lead {
  font-size: 1rem;
  line-height: 1.6;
  color: var(--clr-text-muted);
  margin-bottom: 0;
}

.contact-steps {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  margin: 0 0 2.5rem;
  padding: 1.5rem;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--border-color);
  border-left: 3px solid var(--clr-accent);
  border-radius: var(--radius-md);
}

.contact-steps li {
  display: flex;
  align-items: baseline;
  gap: 0.9rem;
}

.contact-step-num {
  flex-shrink: 0;
  font-family: var(--ff-code);
  font-weight: 700;
  font-size: 0.8rem;
  color: var(--clr-accent-text);
}

.contact-step-text {
  color: var(--clr-text-a90);
  font-size: 0.95rem;
}

.legal-surface .legal-intro {
  font-size: 1.05rem;
  line-height: 1.7;
  color: var(--clr-text-a90);
  margin-bottom: 2rem;
}

.legal-surface .imprint-section {
  padding: 1.5rem 0;
  border-top: 1px solid var(--border-color);
}

.legal-surface .imprint-section:first-of-type {
  border-top: none;
  padding-top: 0;
}

.legal-surface .imprint-section h2 {
  font-size: 1.05rem;
  margin-bottom: 0.9rem;
  color: #fff;
  letter-spacing: -0.01em;
}

.legal-surface .imprint-grid {
  gap: 0.85rem;
}

.legal-surface .imprint-item {
  display: grid;
  grid-template-columns: minmax(160px, 220px) minmax(0, 1fr);
  gap: 1.25rem;
  align-items: start;
}

.legal-surface .imprint-label {
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.legal-surface .imprint-value {
  color: var(--clr-text-a95);
  line-height: 1.7;
}

@media (max-width: 720px) {
  .legal-surface .imprint-item {
    grid-template-columns: 1fr;
    gap: 0.4rem;
  }

  .legal-surface .imprint-label {
    font-size: 0.8rem;
  }}

/* Internal Page Hero (shared by Blog & Services) */
.internal-hero {
  text-align: left;
  margin-bottom: 3rem;
  max-width: 900px;
}

.hero-tag {
  display: block;
  font-family: var(--ff-code);
  font-size: 0.9rem;
  color: var(--clr-accent-text);
  text-transform: uppercase;
  letter-spacing: 0.2em;
  margin-bottom: 1.25rem;
}

.hero-title {
  font-size: clamp(2.8rem, 6.5vw, 5rem);
  line-height: 1.1;
  font-weight: 800;
  margin-bottom: 1.5rem;
  letter-spacing: -0.04em;
  color: #fff;
}

.hero-lead {
  font-size: clamp(1rem, 1.8vw, 1.3rem);
  color: var(--clr-text-muted);
  line-height: 1.6;
  max-width: 650px;
  margin-bottom: 2rem;
}

.github-profile-link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--clr-text-muted);
  font-family: var(--ff-code);
  font-size: 0.9rem;
  padding: 0.5rem 1rem;
  border-radius: var(--radius-full);
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--border-color);
  transition: all 0.2s ease;
}

.github-profile-link:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: var(--clr-accent-text);
  color: #fff;
  transform: translateY(-2px);
}

.github-icon {
  width: 20px;
  height: 20px;
  opacity: 0.8;
}

.filter-toolbar { margin-bottom: 2rem; }
.filter-toolbar-label { display: block; font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 0.5rem; color: var(--clr-text-muted); font-family: var(--ff-code); }
.tools-filter { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.filter-tool-item { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.4rem 1rem; border-radius: 100px; background: var(--card-bg); border: 1px solid var(--border-color); color: var(--clr-text-muted); cursor: pointer; transition: all 0.2s ease; font-family: var(--ff-code); font-size: 0.85rem; }
.filter-tool-item:hover, .filter-tool-item.active { background: rgba(241, 141, 79, 0.2); border-color: var(--clr-accent-text); color: #fff; }
.filter-tool-icon { width: 16px; height: 16px; object-fit: contain; }

.post-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 2rem; }
.post-grid-area { position: relative; min-height: 200px; }

.blog-card { background: var(--card-bg); border: 1px solid var(--border-color); border-radius: var(--radius-lg); padding: 1.5rem; display: flex; flex-direction: column; gap: 1rem; transition: transform 0.2s ease, box-shadow 0.2s ease; }
.blog-card:hover { transform: translateY(-4px); box-shadow: 0 10px 30px rgba(0,0,0,0.2); border-color: rgba(255,255,255,0.2); }
.blog-card-header { display: flex; justify-content: space-between; font-size: 0.85rem; color: var(--clr-text-muted); font-family: var(--ff-code); }
.post-number { color: var(--clr-accent-text); font-weight: 700; }
.blog-card h2 { margin: 0; font-size: 1.4rem; }
.blog-card h2 a:hover { color: var(--clr-accent-text); }
.blog-card-lead { font-size: 0.95rem; color: var(--clr-text-muted); flex-grow: 1; }
.blog-card-tools { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.tool-chip { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.2rem 0.6rem; border-radius: 100px; background: rgba(0,0,0,0.2); font-size: 0.8rem; color: rgba(255,255,255,0.8); border: 1px solid transparent; font-family: var(--ff-code); }
.tool-chip img { width: 14px; height: 14px; }
.blog-card-footer { display: flex; justify-content: space-between; align-items: center; margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--border-color); font-size: 0.85rem; }
.views-pill {
  color: #fff;
  background: var(--clr-accent);
  padding: 0.25rem 0.75rem;
  border-radius: 100px;
  font-weight: 600;
  font-size: 0.75rem;
  display: inline-flex;
  align-items: center;
  box-shadow: 0 2px 5px var(--clr-accent-a30);
}
.read-more { color: var(--clr-accent-text); font-weight: 600; font-family: var(--ff-code); font-size: 0.8rem; }
.post-empty-state { display: none; text-align: center; padding: 3rem; color: var(--clr-text-muted); border: 1px dashed var(--border-color); border-radius: var(--radius-lg); }

/* Post Detail */
.post-date-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1rem; font-family: var(--ff-code); font-size: 0.9rem; color: var(--clr-text-muted); }
.post-view-badge { background: var(--clr-accent-a15); color: var(--clr-accent-text); padding: 0.2rem 0.8rem; border-radius: 100px; font-size: 0.8rem; font-weight: 600; }

.post-title {
  font-size: clamp(2.4rem, 4.2vw, 3.25rem);
  margin-bottom: 1.75rem;
  letter-spacing: -0.03em;
}

.tools-used-container { margin: 1.5rem 0; padding: 1rem 1.5rem; background: rgba(0,0,0,0.2); border-radius: var(--radius-md); border-left: 3px solid var(--clr-accent); display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; }
.tools-title { color: #fff; font-weight: 600; white-space: nowrap; font-family: var(--ff-code); font-size: 0.9rem; }
.tools-list { display: flex; flex-wrap: wrap; gap: 1rem; flex: 1; }
.tool-item { display: inline-flex; align-items: center; gap: 0.4rem; color: var(--clr-text-muted); font-family: var(--ff-code); font-size: 0.85rem; }
.tool-icon { width: 18px; height: 18px; object-fit: contain; }

/* Abstract / Key Findings Section */
.prose-surface .lead {
  margin-bottom: 3rem;
  padding: 1.5rem 2rem;
  background: rgba(255, 255, 255, 0.03);
  border-left: 3px solid var(--clr-accent);
  border-radius: var(--radius-sm);
  position: relative;
}

.prose-surface .lead::before {
  content: "ABSTRACT";
  display: block;
  font-family: var(--ff-code);
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--clr-accent-text);
  margin-bottom: 1.25rem;
  letter-spacing: 0.1em;
  opacity: 0.8;
}

.abstract-tools {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1.25rem;
    padding-bottom: 1.25rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.abstract-text {
  font-size: 1.1rem;
  color: var(--clr-text-muted);
  line-height: 1.7;
  font-family: var(--ff-body);
  margin: 0;
}

/* Make links in post bodies visibly clickable without inline HTML. */
.post-body a {
  color: var(--clr-accent-text);
  text-decoration: underline;
  text-decoration-color: rgba(241, 141, 79, 0.6);
  text-underline-offset: 2px;
}

.post-body a:hover {
  color: #fff;
}

/* Consolidated Image Shapes & Captions */
.post-figure, .prose-image-container {
    margin: 1.25rem 0;
    text-align: center;
    /* Removed outer shape/border/background */
    background: transparent;
    border: none;
    padding: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.35rem;
}

.post-figure img, .prose-image-container img {
    border-radius: var(--radius-md);
    max-height: 550px;
    width: auto;
    max-width: 100%;
    margin: 0 auto;
    display: block;
    /* Image on white background per request */
    background: #ffffff;
    padding: 1rem; 
    box-shadow: 0 8px 30px rgba(0,0,0,0.2);
}

.post-caption, .prose-image-title {
    display: block;
    text-align: center;
    font-size: 0.9rem;
    color: var(--clr-text-muted);
    font-family: var(--ff-body);
    max-width: 80%;
    margin: 0 auto;
    line-height: 1.5;
}

/* Typography for Prose (Blog Body) */
.prose {
    font-size: 1.1rem;
    line-height: 1.75;
    color: var(--clr-text-a95);
}

.prose h2 {
    margin-top: 2.25rem;
}

.prose h2:first-child {
    margin-top: 0;
}

.prose p {
    margin-bottom: 1.5rem;
}

/* A translucent orange over the blue ground blends to a dead grey-brown.
   The highlight takes a surface step instead and keeps the accent as text. */
.post-body strong {
    color: var(--clr-accent-text);
    background: var(--clr-surface-2);
    padding: 0.05em 0.3em;
    border-radius: 4px;
    box-decoration-break: clone;
    -webkit-box-decoration-break: clone;
}

.prose blockquote {
    margin: 1.25rem 0;
    padding: 0.75rem 1rem;
    border-left: 3px solid var(--clr-accent);
    background: var(--clr-surface-2);
    color: var(--clr-text-a95);
    font-size: 0.95rem;
}

.prose blockquote p {
    margin: 0;
}

/* Code Blocks */
.prose pre { background: #282c34; padding: 1.25rem; border-radius: var(--radius-md); overflow-x: auto; margin: 1.5rem 0; border: 1px solid rgba(255,255,255,0.05); position: relative; box-shadow: 0 4px 10px rgba(0,0,0,0.2); }
.prose code { font-family: var(--ff-code); font-size: 0.9rem; background: transparent; }
.prose :not(pre) > code { background: rgba(255,255,255,0.1); padding: 0.2rem 0.4rem; border-radius: 4px; color: #fab1a0; }

.prose .code-copy-btn { 
    position: absolute; 
    top: 8px; 
    right: 8px; 
    padding: 6px; 
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255,255,255,0.05); 
    border: 1px solid rgba(255,255,255,0.1); 
    border-radius: 6px; 
    color: rgba(255,255,255,0.6); 
    cursor: pointer; 
    transition: all 0.2s ease; 
    z-index: 10; 
}
.prose .code-copy-btn:hover { background: rgba(255,255,255,0.15); color: #fff; border-color: rgba(255,255,255,0.3); }

/* Content Cards (Code with Titles) */
.content-card {
    margin: 2rem 0;
    border-radius: var(--radius-md);
    overflow: hidden;
    border: 1px solid rgba(255,255,255,0.1);
    background: #282c34;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
}

.content-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem 1.25rem;
    background: rgba(255, 255, 255, 0.03);
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.content-card-title {
    font-family: var(--ff-code);
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--clr-text-muted);
}

.content-card-tool {
    font-family: var(--ff-code);
    font-size: 0.7rem;
    text-transform: lowercase;
    letter-spacing: 0.05em;
    color: var(--clr-accent-text);
    opacity: 0.8;
}

.content-card-body pre {
    margin: 0 !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

.content-card-body .code-copy-btn {
    top: 8px; /* Align with header height if needed, but 8px usually works */
}

.python-demo-body {
    background: #282c34;
}

.content-card-body .python-demo-code {
    background: #282c34;
    color: var(--clr-text-a92);
}

.content-card-body .python-demo-code code {
    color: inherit;
}

.go-back-container { margin-bottom: 2rem; }
.go-back-btn { display: inline-flex; align-items: center; gap: 0.5rem; color: var(--clr-text-muted); font-family: var(--ff-code); font-size: 0.9rem; }
.go-back-btn:hover { color: var(--clr-accent-text); }

.post-signature { margin-top: 3rem; padding-top: 2rem; border-top: 1px solid var(--border-color); text-align: center; }
.signature-icon { width: 48px; height: 48px; opacity: 0.7; margin: 0 auto; }

/* ---------- Services CTA ---------------------------------- */

.services-cta-headline {
  font-size: clamp(2rem, 5vw, 3rem);
  font-weight: 800;
  margin-bottom: 1rem;
  color: #fff;
}

.services-cta-subtext {
  font-size: 1.15rem;
  max-width: 580px;
  margin: 0 auto 2.5rem;
  color: var(--clr-text-muted);
}

/* Accessibility and privacy UX */
.skip-link {
  position: fixed;
  top: 0.75rem;
  left: 0.75rem;
  z-index: 3000;
  padding: 0.75rem 1rem;
  border-radius: var(--radius-md);
  background: #fff;
  color: var(--clr-bg-alt);
  font-family: var(--ff-code);
  font-weight: 700;
  transform: translateY(-180%);
  transition: transform 0.2s ease;
}

.skip-link:focus {
  transform: translateY(0);
}

:where(a, button, input, select, textarea, summary):focus-visible {
  outline: 3px solid var(--clr-accent-text);
  outline-offset: 3px;
}

#main-content:focus {
  outline: none;
}

.required-marker {
  color: var(--clr-accent-text);
}

.form-privacy-note {
  margin-top: 1rem;
  color: var(--clr-text-muted);
  font-size: 0.9rem;
  line-height: 1.55;
}

.form-privacy-note a {
  color: var(--clr-accent-text);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

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

/* ---------- Cross-document view transitions ---------------
   This is a multi-page Django site, so every navigation used to repaint
   the window before the next page arrived. Chromium 126+ and Safari 18.2+
   honour this; every other browser navigates exactly as it did before, so
   there is no fallback to write.

   The header and footer are named, which lifts them out of the root
   snapshot: they hold still across the navigation instead of cross-fading
   with the page under them. That, rather than the fade itself, is what
   makes the site feel like one application. */

@view-transition {
  navigation: auto;
}

.site-header {
  view-transition-name: site-header;
}

.site-footer {
  view-transition-name: site-footer;
}

::view-transition-old(root) {
  animation: vt-page-out 90ms var(--ease-out) both;
}

::view-transition-new(root) {
  animation: vt-page-in 220ms var(--ease-out) both;
}

@keyframes vt-page-out {
  to {
    opacity: 0;
  }}

@keyframes vt-page-in {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: none;
  }}

/* The damper above is written against `*`, which does not match the
   ::view-transition-* pseudo-element tree — so it would sail straight past
   this feature. Switch the transition off at the source instead of zeroing
   its durations: a zeroed duration still paints the outgoing and incoming
   snapshots on top of each other for a frame. The 1ms rules are a belt for
   engines that ignore @view-transition inside a media query. */
@media (prefers-reduced-motion: reduce) {
  @view-transition {
    navigation: none;
  }

  ::view-transition-old(root) {
    animation: vt-page-out 1ms linear both;
  }

  ::view-transition-new(root) {
    animation: vt-page-in 1ms linear both;
  }}

/* ---------- Hero eyebrow responsive variants -------------- */

.hero-eyebrow .eyebrow-short {
  display: none;
}

@media (max-width: 560px) {
  .hero-eyebrow .eyebrow-full {
    display: none;
  }
  .hero-eyebrow .eyebrow-short {
    display: inline;
  }}

/* ---------- Scroll reveal --------------------------------- */

/* Two things are deliberate here.

   The transition is declared on the destination state rather than the hidden
   one. site.js adds .reveal-pending after DOMContentLoaded, so with the
   transition on .reveal-pending, anything already in the viewport animated
   *out* to opacity 0 before the observer brought it back — a visible dip on
   the first thing a visitor sees. Transitions start from the after-change
   style, so the entrance still animates while arriving at hidden is instant.

   The offset uses `translate`, not `transform`. Cards animate `transform` for
   their hover lift, and a reveal written as transform: translateY() both
   overwrites that and gets dragged through the card's own 0.25s transform
   transition. `translate` is an independent property that composes with
   `transform`, so the two never touch each other.

   The [data-reveal] prefix is what lets these win over the page sheets, which
   load after base.css. */
[data-reveal].reveal-pending {
  opacity: 0;
  translate: 0 28px;
  filter: blur(6px);
  transition: none;
}

/* site.js removes both classes once the opacity transition ends, so none of
   this outlives the entrance: the element's own transitions (the card hover
   lift) take over again. */
[data-reveal].reveal-in {
  opacity: 1;
  translate: none;
  filter: none;
  transition:
    opacity 0.8s var(--ease-out),
    translate 0.8s var(--ease-out),
    filter 0.8s var(--ease-out);
}

/* ---------- About: qualifications and built work ----------
   Third-party credentials and inspectable work, both of which previously
   existed only on the gated CV page. */

.about-credentials { margin-bottom: var(--space-xl); }

.credential-list {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1rem;
}

.credential {
  display: grid;
  gap: 0.4rem;
  align-content: start;
  min-width: 0;
  padding: 1.25rem;
  background: var(--clr-surface-1);
  border: 1px solid var(--border-color);
  border-top: 2px solid var(--clr-accent);
  border-radius: var(--radius-md);
}

.credential-issuer {
  font-family: var(--ff-label);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--clr-text-subtle);
}

.credential-title {
  color: var(--clr-text);
  line-height: 1.45;
  overflow-wrap: break-word;
}

.about-built { margin-bottom: var(--space-xl); }

.section-note {
  color: var(--clr-text-muted);
  max-width: 560px;
  margin: 0 auto;
}

.built-list {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1.5rem;
}

.built-item {
  display: flex;
  flex-direction: column;
  align-items: start;
  gap: 0.6rem;
  min-width: 0;
  padding: 1.75rem;
  background: var(--card-bg);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
}

.built-item h3 {
  font-size: 1.1rem;
  overflow-wrap: break-word;
}

.built-item p {
  color: var(--clr-text-muted);
  font-size: 0.95rem;
  margin: 0;
}

.built-item .text-link {
  margin-top: auto;
  padding-top: 0.4rem;
}