html { scroll-behavior: smooth; }
  body {
    font-family: 'Geist', ui-sans-serif, system-ui, sans-serif;
    background: rgb(10,12,14);
    color: rgb(232,237,234);
    font-feature-settings: "ss01","cv11";
    -webkit-font-smoothing: antialiased;
  }

  /* Background grid — green-tinted, like the original Claude Code page */
  .bg-grid {
    background-image:
      linear-gradient(rgba(74, 222, 128, 0.04) 1px, transparent 1px),
      linear-gradient(90deg, rgba(74, 222, 128, 0.04) 1px, transparent 1px);
    background-size: 56px 56px;
  }
  .bg-grid-mask {
    -webkit-mask-image: radial-gradient(ellipse at center, #000 20%, transparent 75%);
            mask-image: radial-gradient(ellipse at center, #000 20%, transparent 75%);
  }

  /* Aurora drift — organic 'breathing' motion. Each blob morphs scale + position + border-radius
     so it gently changes shape, not just position. */
  @keyframes aurora-breathe-a {
    0%, 100% { transform: translate(0, 0) scale(1); border-radius: 50% 50% 50% 50%; }
    25%      { transform: translate(40px, -25px) scale(1.12); border-radius: 60% 40% 55% 45%; }
    50%      { transform: translate(20px, 30px) scale(0.92); border-radius: 45% 55% 40% 60%; }
    75%      { transform: translate(-30px, 15px) scale(1.06); border-radius: 55% 45% 60% 40%; }
  }
  @keyframes aurora-breathe-b {
    0%, 100% { transform: translate(0, 0) scale(1); border-radius: 50% 50% 50% 50%; }
    33%      { transform: translate(-35px, 25px) scale(1.15); border-radius: 40% 60% 50% 50%; }
    66%      { transform: translate(25px, -20px) scale(0.88); border-radius: 60% 40% 45% 55%; }
  }
  @keyframes aurora-breathe-c {
    0%, 100% { transform: translate(0, 0) scale(1); border-radius: 50% 50% 50% 50%; }
    20%      { transform: translate(20px, 20px) scale(1.08); border-radius: 55% 45% 50% 50%; }
    50%      { transform: translate(-25px, -30px) scale(1.18); border-radius: 45% 55% 60% 40%; }
    80%      { transform: translate(15px, -15px) scale(0.94); border-radius: 50% 50% 40% 60%; }
  }
  .aurora-1 { animation: aurora-breathe-a 22s ease-in-out infinite; will-change: transform, border-radius; }
  .aurora-2 { animation: aurora-breathe-b 28s ease-in-out infinite; will-change: transform, border-radius; }
  .aurora-3 { animation: aurora-breathe-c 32s ease-in-out infinite; will-change: transform, border-radius; }
  .aurora-4 { animation: aurora-breathe-a 36s ease-in-out infinite reverse; will-change: transform, border-radius; }

  /* Section-scoped aurora wrappers — each section gets its own backdrop.
     Inset slightly + soft mask so blobs fade before hitting the section border (no hard clip line). */
  .section-aurora {
    position: absolute; inset: 8% 0; pointer-events: none; overflow: hidden; z-index: 0;
    -webkit-mask-image: radial-gradient(ellipse 70% 70% at 50% 50%, #000 30%, transparent 90%);
            mask-image: radial-gradient(ellipse 70% 70% at 50% 50%, #000 30%, transparent 90%);
  }
  .section-aurora > .blob { position: absolute; border-radius: 9999px; filter: blur(90px); }
  /* Ensure section content sits above its aurora */
  section > .max-w-\[1280px\] { position: relative; z-index: 1; }

  /* Hairline panel */
  .panel { background: rgb(17,20,22); border: 1px solid rgb(34,36,38); }
  .panel-dark { background: rgb(10,12,14); border: 1px solid rgb(34,36,38); }
  .panel-card { background: rgb(22,26,29); border: 1px solid rgb(34,36,38); }

  /* Corner cross — little plus signs at grid intersections */
  .corner::before,
  .corner::after {
    content: "";
    position: absolute;
    width: 9px; height: 1px;
    background: rgb(34,241,110);
  }
  .corner::after { transform: rotate(90deg); }

  /* Marquee */
  @keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
  .marquee-track { animation: marquee 45s linear infinite; }

  /* Subtle rise-in */
  @keyframes rise { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }
  .rise { animation: rise .7s cubic-bezier(.2,.7,.2,1) both; }

  /* Cursor blink */
  @keyframes blink { 50% { opacity: 0; } }
  .cursor-blink { animation: blink 1.1s steps(2) infinite; }

  /* Pulse dot */
  @keyframes ring { 0% { box-shadow: 0 0 0 0 rgba(34,241,110,0.5); } 100% { box-shadow: 0 0 0 8px rgba(34,241,110,0); } }
  .ring-dot { animation: ring 1.8s ease-out infinite; }

  /* Brand glow — used sparingly */
  .brand-glow { box-shadow: 0 0 0 1px rgba(34,241,110,0.35), 0 10px 40px -12px rgba(34,241,110,0.4); }

  /* Monospace labels */
  .label-mono {
    font-family: 'Geist Mono', monospace;
    font-size: 11px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: rgb(107,120,128);
  }

  /* Scrollbar in preview */
  .mini-scroll::-webkit-scrollbar { width: 4px; }
  .mini-scroll::-webkit-scrollbar-thumb { background: rgb(34,36,38); border-radius: 99px; }

  /* Tickbar animation for coverage chart */
  @keyframes grow { from { transform: scaleY(0); } to { transform: scaleY(1); } }
  .bar-grow { transform-origin: bottom; animation: grow 1.2s cubic-bezier(.2,.7,.2,1) both; }

  /* Nav — always-on layered blur so content gets a true frosted-glass treatment when scrolled behind it */
  #nav {
    backdrop-filter: blur(20px) saturate(140%);
    -webkit-backdrop-filter: blur(20px) saturate(140%);
    background-color: rgba(10,12,14,0.25);
  }
  .nav-scrolled {
    background-color: rgba(10,12,14,0.4) !important;
    border-bottom-color: rgb(34,36,38) !important;
  }

  /* Animated sweep (used for the "auto-scheduling" row in hero mock) */
  @keyframes sweep { 0% { transform: translateX(-30%); opacity: 0;} 20%{opacity:1;} 80%{opacity:1;} 100% { transform: translateX(520%); opacity: 0;} }
  .sweep { animation: sweep 3.2s ease-in-out infinite; }

  /* Focus rings */
  input:focus, textarea:focus { outline: none; }

  /* Dotted bracket used as separator (like figma section) */
  .dotted-sep {
    background-image: radial-gradient(circle, rgb(34,36,38) 1px, transparent 1.2px);
    background-size: 6px 6px;
  }