html { scroll-behavior: smooth; }
  body { font-family: 'Inter', system-ui, sans-serif; background:#fff; color:#171717; -webkit-font-smoothing:antialiased; }
  h1,h2,h3,h4 { font-family: 'Outfit','Inter',system-ui,sans-serif; letter-spacing:-0.02em; }
  section[id] { scroll-margin-top: 7.75rem; }
  section#home { scroll-margin-top: 0; }
  .input { width:100%; border:1px solid #e0e0e0; background:#fff; padding:0.625rem 0.875rem; font-size:0.875rem; color:#171717; outline:none; }
  .input:focus { border-color:#F8E927; box-shadow: 0 0 0 3px rgba(248,233,39,0.25); }

  @keyframes glowPulse { 0%,100%{opacity:0.4} 50%{opacity:0.82} }
  .eyes-glow { animation: glowPulse 3.4s ease-in-out infinite; }

  /* ===== Fixed full-viewport generative background (sits behind everything) ===== */
  html, body{ background:transparent !important; }
  #bg-art{ position:fixed; top:0; left:0; right:0; height:100vh; height:100lvh; z-index:-1; pointer-events:none; background:#ffffff; }
  #bg-art canvas{ position:absolute; inset:0; width:100%; height:100%; display:block; }
  /* Keep the gears fixed in the bottom-left corner no matter what */
  #tdg-module{ position:fixed !important; }
  /* Header/navbar must always be the top layer (above content + background) */
  [data-fixed-header]{ z-index:70 !important; }
  /* Let the animation show through the white section fills */
  section.bg-background{ background:transparent !important; }
  /* Generous breathing space between scroll sections so the background shows */
  main > section + section{ margin-top:4.5rem; }
  main{ margin-bottom:4.5rem; }
  @media (min-width:1024px){
    main > section + section{ margin-top:6.5rem; }
    main{ margin-bottom:6.5rem; }
  }
  /* Text highlight: ONE white block per text element, shrink-wrapped to the
     text (not the full column) and kept continuous across all the lines of the
     same paragraph — no per-line chopping. Soft, restrained glow. */
  .hl{
    display:inline-block;
    background:#ffffff; border-radius:8px; padding:0.16em 0.45em;
    box-shadow:0 0 0.22rem 0.03rem #ffffff;
  }
  /* .txt = ONE continuous background for a whole text cluster: hugs the text
     width (animation stays at the sides) but never breaks between the lines or
     paragraphs inside the cluster (no animation in the small inner gaps). */
  .txt{
    display:block; width:fit-content;
    background:#ffffff; border-radius:10px; padding:0.45em 0.65em;
    box-shadow:0 0 0.26rem 0.04rem #ffffff;
  }
  /* robot eyes: shrink on phones so they sit neatly between logo and menu */
  @media (max-width:1023px){
    #eyes-wrap{ gap:6px !important; }
    #eyes-wrap svg{ width:38px; height:auto; }
  }

  #tdg-module{
    position:fixed; left:0; bottom:0; z-index:2147483000;
    width:clamp(85px,12vw,150px); aspect-ratio:560/500;
    overflow:hidden; pointer-events:none;
    opacity:0; transition:opacity .7s ease;
  }
  #tdg-module.tdg-in{ opacity:1; }
  #tdg-module canvas{ position:absolute; inset:0; width:100%; height:100%; display:block; }
  @media (max-width:640px){ #tdg-module{ width:65px; } }
  @media print{ #tdg-module{ display:none !important; } }