@import url('https://fonts.googleapis.com/css2?family=Cormorant:ital,wght@0,300;0,400;1,300&family=Space+Mono:wght@400;700&family=DM+Sans:wght@300;400;500&display=swap');

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;}
body{background:#07070f;color:#e2e2f0;font-family:"DM Sans",sans-serif;
     -webkit-font-smoothing:antialiased;overflow-x:hidden;min-height:100vh;}
::selection{background:rgba(139,127,255,.35);color:#fff;}
::-webkit-scrollbar{width:4px;}
::-webkit-scrollbar-track{background:transparent;}
::-webkit-scrollbar-thumb{background:rgba(139,127,255,.25);border-radius:99px;}

.orb{position:fixed;border-radius:50%;pointer-events:none;z-index:0;will-change:transform;}
.o1{width:900px;height:900px;top:-240px;left:-240px;
    background:radial-gradient(circle,#1e0a52 0%,transparent 70%);
    filter:blur(120px);opacity:.55;animation:d1 30s ease-in-out infinite;}
.o2{width:700px;height:700px;bottom:-180px;right:-180px;
    background:radial-gradient(circle,#0a1e52 0%,transparent 70%);
    filter:blur(110px);opacity:.45;animation:d2 38s ease-in-out infinite;}
.o3{width:500px;height:500px;top:38%;left:50%;
    background:radial-gradient(circle,#1a0838 0%,transparent 70%);
    filter:blur(100px);opacity:.32;animation:d3 24s ease-in-out infinite;}

.noise{position:fixed;inset:0;z-index:0;pointer-events:none;
       background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E");
       background-size:200px 200px;opacity:.022;}

.cursor-glow{position:fixed;top:0;left:0;width:600px;height:600px;border-radius:50%;
             pointer-events:none;z-index:1;
             background:radial-gradient(circle,rgba(139,127,255,.045) 0%,transparent 70%);
             will-change:transform;transform:translate(-9999px,-9999px);
             transition:transform .7s cubic-bezier(.16,1,.3,1);}

nav{position:fixed;top:0;left:0;right:0;z-index:100;
    display:flex;align-items:center;justify-content:space-between;
    padding:18px 40px;background:rgba(7,7,15,.65);
    backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
    border-bottom:1px solid rgba(255,255,255,.05);
    opacity:0;animation:fadeDown .6s ease .1s forwards;}
.nav-logo{font-family:"Cormorant",serif;font-weight:300;font-size:22px;
          letter-spacing:.22em;color:#e2e2f0;text-decoration:none;
          text-shadow:0 0 40px rgba(139,127,255,.3);}
.hq-btn{font-family:"Space Mono",monospace;font-size:8px;letter-spacing:.14em;
        text-transform:uppercase;color:#fff;background:#8b7fff;border:none;
        border-radius:8px;padding:7px 16px;cursor:pointer;
        box-shadow:0 4px 20px rgba(139,127,255,.4);transition:opacity .2s,transform .2s;}
.hq-btn:hover{opacity:.85;transform:translateY(-1px);}
.hq-btn.loading{opacity:.6;cursor:wait;}
.hq-btn.done{background:rgba(139,127,255,.18);border:1px solid rgba(139,127,255,.3);
             color:rgba(139,127,255,.8);box-shadow:none;cursor:default;}
.nav-badge{font-family:"Space Mono",monospace;font-size:8px;letter-spacing:.18em;
           text-transform:uppercase;color:rgba(226,226,240,.3);
           background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.07);
           border-radius:99px;padding:4px 12px;}

footer{position:relative;z-index:2;border-top:1px solid rgba(255,255,255,.05);
       padding:24px 40px;display:flex;align-items:center;justify-content:space-between;}
.footer-logo{font-family:"Cormorant",serif;font-weight:300;font-size:18px;
             letter-spacing:.2em;color:rgba(226,226,240,.2);}
.footer-text{font-family:"Space Mono",monospace;font-size:8px;
             letter-spacing:.14em;color:rgba(226,226,240,.1);}

@keyframes fadeUp{from{opacity:0;transform:translateY(20px);}to{opacity:1;transform:translateY(0);}}
@keyframes fadeDown{from{opacity:0;transform:translateY(-10px);}to{opacity:1;transform:translateY(0);}}
@keyframes cardIn{from{opacity:0;transform:translateY(32px) scale(.97);}to{opacity:1;transform:translateY(0) scale(1);}}
@keyframes d1{0%{transform:translate(0,0) scale(1);}33%{transform:translate(70px,50px) scale(1.08);}66%{transform:translate(20px,100px) scale(.94);}100%{transform:translate(0,0) scale(1);}}
@keyframes d2{0%{transform:translate(0,0) scale(1);}33%{transform:translate(-60px,-45px) scale(1.06);}66%{transform:translate(-100px,-80px) scale(1.12);}100%{transform:translate(0,0) scale(1);}}
@keyframes d3{0%{transform:translate(0,0) scale(1);}50%{transform:translate(-50px,70px) scale(.88);}100%{transform:translate(0,0) scale(1);}}