:root{
    --bg: #0b121c;
    --text: #e9e4d8;
    --text-dim: #93a1b5;
    --text-faint: #566175;
    --amber: #e2a53d;
    --teal: #5cbcae;
    --line: rgba(92, 188, 174, 0.35);
    --font-display: 'Space Grotesk', sans-serif;
    --font-body: 'Inter', sans-serif;
    --font-mono: 'JetBrains Mono', monospace;
  }

  *{ box-sizing: border-box; }

  @media (prefers-reduced-motion: reduce){
    *{ animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; }
  }

  html, body{
    margin: 0;
    height: 100%;
    color: var(--text);
    font-family: var(--font-body);
    overflow: hidden;
  }

  /* Animated gradient wash — sits behind the particle canvas */
  #gradient-wash{
    position: fixed;
    inset: -10%;
    z-index: 0;
    background:
      radial-gradient(circle at 20% 30%, rgba(226, 165, 61, 0.28), transparent 45%),
      radial-gradient(circle at 80% 70%, rgba(92, 188, 174, 0.24), transparent 50%),
      radial-gradient(circle at 50% 100%, rgba(217, 122, 122, 0.14), transparent 55%),
      var(--bg);
    background-size: 160% 160%;
    animation: washDrift 10s ease-in-out infinite alternate;
  }
  @keyframes washDrift{
    0%   { background-position: 0% 0%, 100% 100%, 50% 100%; }
    100% { background-position: 40% 50%, 60% 40%, 80% 70%; }
  }
  @media (prefers-reduced-motion: reduce){
    #gradient-wash{ animation: none; }
  }

  /* Fine grain texture — sits above the canvas, below the text */
  #grain{
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 0.5;
    pointer-events: none;
    opacity: 0.035;
    mix-blend-mode: overlay;
  }

  #field{
    position: fixed;
    inset: 0;
    display: block;
    z-index: 0;
  }

  a{ color: var(--amber); }
  a:focus-visible, .btn:focus-visible{
    outline: 2px solid var(--amber);
    outline-offset: 3px;
  }
  ::selection{ background: var(--amber); color: #0d1520; }

  main{
    position: relative;
    z-index: 1;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    padding: 6vw 8vw;
    pointer-events: none;
  }
  main > *{ pointer-events: auto; }

  .kicker{
    font-family: var(--font-mono);
    font-size: 13px;
    color: var(--teal);
    margin: 0 0 18px;
    letter-spacing: 0.02em;
  }
  .kicker .punct{ color: var(--text-faint); }

  h1{
    font-family: var(--font-display);
    font-weight: 700;
    font-size: clamp(2.6rem, 8vw, 5.2rem);
    line-height: 0.98;
    margin: 0 0 10px;
    letter-spacing: -0.02em;
    text-shadow: 0 0 40px rgba(11,18,28,0.9);
  }

  #typed-cursor{
    display: inline-block;
    width: 4px;
    height: 0.8em;
    background: var(--amber);
    margin-left: 5px;
    vertical-align: -0.05em;
    animation: blink 1s steps(1) infinite;
  }
  @keyframes blink{ 50%{ opacity: 0; } }

  .role{
    font-family: var(--font-mono);
    color: var(--text-dim);
    font-size: clamp(0.95rem, 2vw, 1.1rem);
    margin: 0 0 28px;
  }
  .role .str{ color: #d97a7a; }

  .lede{
    max-width: 52ch;
    color: var(--text-dim);
    font-size: 1.02rem;
    line-height: 1.65;
    margin: 0 0 36px;
  }
  .lede strong{ color: var(--text); font-weight: 500; }

  .cta-row{ display: flex; gap: 14px; flex-wrap: wrap; align-items: center; }
  .btn{
    font-family: var(--font-mono);
    font-size: 13.5px;
    padding: 13px 22px;
    border-radius: 6px;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border: 1px solid var(--line);
    background: rgba(11,18,28,0.55);
    backdrop-filter: blur(6px);
    transition: border-color .15s, transform .15s, background .15s;
  }
  .btn:hover{ transform: translateY(-1px); border-color: var(--teal); }
  .btn-primary{ background: var(--amber); color: #14100a; border-color: var(--amber); font-weight: 600; }
  .btn-primary:hover{ background: #eeb35a; border-color: #eeb35a; }

  .soon{
    font-family: var(--font-mono);
    font-size: 11.5px;
    color: var(--text-faint);
    margin-top: 40px;
  }

  footer{
    position: fixed;
    bottom: 22px;
    left: 8vw;
    z-index: 1;
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--text-faint);
  }

  @media (max-width: 640px){
    main{ padding: 8vw 7vw; }
    footer{ left: 7vw; }
  }