:root{
    /* ---- AISP monochrome scheme (from getaisp.com) ---- */
    --bg:        #08080a;
    --bg-1:      #0d0d10;
    --bg-2:      #131317;
    --bg-3:      #1a1a20;
    --line:      rgba(255,255,255,0.08);
    --line-2:    rgba(255,255,255,0.14);
    --line-3:    rgba(255,255,255,0.22);
    --fg:        #f6f6f5;
    --fg-dim:    #a6a6ac;
    --fg-mute:   #6d6d74;
    /* brand grays sampled from AISP assets */
    --gray-mid:  #606060;
    --gray-lite: #d8d8d8;
    /* accent — monochrome white by default; tweakable */
    --accent:    #f6f6f5;
    --accent-ink:#08080a;
    --accent-soft: rgba(246,246,245,0.10);

    --font-display: 'Space Grotesk', system-ui, sans-serif;
    --font-body:    'Archivo', system-ui, sans-serif;
    --font-mono:    'JetBrains Mono', ui-monospace, monospace;

    --maxw: 1240px;
    --pad: clamp(20px, 5vw, 80px);
  }

  *{ box-sizing:border-box; }
  html{ scroll-behavior:smooth; }
  body{
    margin:0; background:var(--bg); color:var(--fg);
    font-family:var(--font-body);
    -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
    overflow-x:hidden;
  }
  ::selection{ background:var(--fg); color:var(--bg); }
  a{ color:inherit; text-decoration:none; }
  button{ font-family:inherit; cursor:pointer; }
  h1,h2,h3,h4,h5,h6{ font-family:var(--font-display); font-weight:600; margin:0; letter-spacing:-0.02em; line-height:1.02; color:var(--fg); }
  /* Ensure headings stay readable over Webflow's template CSS (which sets a near-black heading color). Scoped + wins by specificity; child spans with their own inline color keep the intentional two-tone accents. */
  #root h1, #root h2, #root h3, #root h4, #root h5, #root h6{ color:var(--fg); }

  /* film-grain + vignette atmosphere */
  body::before{
    content:""; position:fixed; inset:0; pointer-events:none; z-index:9998;
    background:
      radial-gradient(120% 80% at 50% -10%, rgba(255,255,255,0.05), transparent 60%),
      radial-gradient(100% 60% at 50% 120%, rgba(255,255,255,0.03), transparent 55%);
    mix-blend-mode:screen;
  }
  body.grain::after{
    content:""; position:fixed; inset:0; pointer-events:none; z-index:9999; opacity:0.045;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  }

  /* ---- reveal-on-scroll ---- */
  .rv{ opacity:0; transform:translateY(26px); transition:opacity .9s cubic-bezier(.16,1,.3,1), transform .9s cubic-bezier(.16,1,.3,1); }
  .rv.in{ opacity:1; transform:none; }
  body.nomotion .rv{ opacity:1 !important; transform:none !important; transition:none !important; }

  /* scroll progress */
  #progress{ position:fixed; top:0; left:0; height:2px; width:0; background:var(--accent); z-index:10000; transition:width .1s linear; }

  .wrap{ max-width:var(--maxw); margin:0 auto; padding-left:var(--pad); padding-right:var(--pad); }

  /* section kicker label (§N) */
  .kicker{ font-family:var(--font-mono); font-size:12px; letter-spacing:.18em; text-transform:uppercase; color:var(--fg-mute); display:flex; align-items:center; gap:12px; }
  .kicker .num{ color:var(--accent); }
  .kicker .ln{ flex:1; height:1px; background:var(--line); }

  .mono{ font-family:var(--font-mono); }

  #root{ position:relative; z-index:1; }