:root{
      --bg: #070709;
      --panel: rgba(255,255,255,0.04);
      --glass: rgba(255,255,255,0.06);
      --gold: #f5d36c;
      --gold-2: #d9a92f;
      --muted: #a7a7ab;
      --text: #ececf0;
      --accent: #7a6cff;
    }
    *{box-sizing:border-box}
    html,body{height:100%}
    body{
      margin:0; background:var(--bg); color:var(--text); font-family:Inter, system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, 'Helvetica Neue', Arial, 'Noto Sans';
      overflow:hidden;
    }
    a{color:inherit; text-decoration:none}

    .site-header{position:fixed; inset-inline:0; top:0; height:72px; z-index:50; pointer-events:none}
    .site-header .inner{height:72px; display:flex; align-items:center; justify-content:space-between; width:min(1220px,92%); margin:0 auto}
    .brand{display:flex; align-items:center; gap:12px; pointer-events:auto}
    .brand img{width:32px;height:32px}
    .brand .name{font-weight:800; letter-spacing:.4px}
    .cta{display:flex; gap:10px; pointer-events:auto}
    .btn{display:inline-flex; align-items:center; justify-content:center; gap:10px; padding:10px 16px; border-radius:14px; border:1px solid rgba(255,255,255,0.08); background:var(--panel); font-weight:700; transition:transform .2s ease, border-color .2s ease}
    .btn:hover{border-color:rgba(255,255,255,0.22)}
    .btn.primary{background:linear-gradient(180deg, var(--gold), var(--gold-2)); color:#1c1500; border:none; box-shadow:0 10px 30px rgba(245,211,108,.22)}

    .stage{
      position:relative;
      width:100%;
      height:100dvh;     
      min-height:100vh;
      overflow:hidden;
    }
    .bg-wrap{
      position:fixed;   
      inset:0;
      pointer-events:none;
    }


    canvas#field, canvas#links{
      position:absolute; inset:0;
      width:100%; height:100%;
      display:block;
      touch-action:none; 
    }

    .aurora{
      position:absolute; inset:-20% -10% -10% -10%; filter:blur(28px); opacity:.9; mix-blend-mode:screen;
      background:
        radial-gradient(40% 40% at 15% 30%, rgba(245,211,108,.18), transparent 60%),
        radial-gradient(45% 45% at 80% 25%, rgba(122,108,255,.22), transparent 65%),
        radial-gradient(55% 55% at 60% 80%, rgba(39,184,255,.18), transparent 60%);
      animation: aurora 18s ease-in-out infinite alternate;
    }
    @keyframes aurora{0%{transform:translate3d(0,0,0) scale(1)} 100%{transform:translate3d(-4%,2%,0) scale(1.06)}}

    .hero{position:relative; z-index:2; height:100%; display:grid; place-items:center; padding:96px 0 64px}
    .center{width:min(1100px, 90%); text-align:center}
    .eyebrow{display:inline-flex; align-items:center; gap:8px; font-size:12px; letter-spacing:.18em; text-transform:uppercase; color:#c9c9cf; background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.10); padding:8px 12px; border-radius:999px; backdrop-filter:blur(10px)}
    .title{font-family:'Playfair Display', serif; font-weight:700; font-size:clamp(30px, 7.2vw, 88px); line-height:1.05; margin:16px 0 14px; text-wrap:balance}    .title .gold{color:var(--gold)}
    .subtitle{max-width:64ch; margin:0 auto; color:#d0d0d6; font-size:clamp(14px, 1.9vw, 20px); line-height:1.7}
    .actions{display:flex; gap:12px; justify-content:center; flex-wrap:wrap; margin-top:26px}
    .magnet{transition:transform .12s ease}

    .hint{position:fixed; bottom:20px; left:50%; transform:translateX(-50%); color:#b9b9bf; font-size:12px; letter-spacing:.14em; text-transform:uppercase; opacity:.8; z-index:3}

    .cursor-ring{position:fixed; width:44px; height:44px; border-radius:50%; border:1px solid rgba(245,211,108,.55); left:-100px; top:-100px; z-index:3; pointer-events:none; transition:transform .08s linear}

    @media (max-width: 520px){
      .subtitle{max-width: 90%}
      .btn{padding:10px 14px}
    }
    html, body, .stage {
      -webkit-user-select: none; 
      -ms-user-select: none;    
      user-select: none;
      -webkit-touch-callout: none; 
      -webkit-tap-highlight-color: transparent;
    }

    img, svg, canvas {
      -webkit-user-drag: none;
      user-drag: none; 
      pointer-events: none;
    }

    input, textarea, [contenteditable="true"], .selectable {
      -webkit-user-select: text !important;
      user-select: text !important;
      -webkit-touch-callout: default !important;
      pointer-events: auto;
    }