:root{
  --bg-0:#07070c;
  --bg-1:#0c0c15;
  --teal:#2dd4bf;
  --green:#34d399;
  --purple:#8b5cf6;
  --violet:#a855f7;
  --magenta:#ec4899;
  --orange:#fb923c;
  --gold:#f5b942;
  --accent:#c4b5fd;
  --brand:linear-gradient(120deg,#2dd4bf 0%,#8b5cf6 38%,#ec4899 68%,#fb923c 100%);
}
*{font-family:'Outfit',sans-serif;}
html{scroll-behavior:smooth;}
body{background:var(--bg-0);color:#fff;overflow-x:hidden;}

.brand-text{
  background:var(--brand);background-size:200% 200%;
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
  animation:hue 8s ease infinite;
}
.brand-bg{background:var(--brand);background-size:200% 200%;animation:hue 8s ease infinite;}
@keyframes hue{0%,100%{background-position:0% 50%;}50%{background-position:100% 50%;}}

.glass{
  background:rgba(255,255,255,.04);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border:1px solid rgba(255,255,255,.08);
}
.glass-strong{
  background:rgba(255,255,255,.06);
  backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
  border:1px solid rgba(255,255,255,.10);
}

.orb{position:fixed;border-radius:50%;filter:blur(90px);opacity:.5;z-index:0;pointer-events:none;}
.grain{
  position:fixed;inset:0;z-index:1;pointer-events:none;opacity:.035;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-22px)}}
@keyframes morph{0%,100%{border-radius:38% 62% 63% 37%/41% 44% 56% 59%}50%{border-radius:62% 38% 37% 63%/59% 56% 44% 41%}}
@keyframes spin-slow{to{transform:rotate(360deg)}}
@keyframes rise{from{opacity:0;transform:translateY(28px)}to{opacity:1;transform:translateY(0)}}
.float{animation:float 6s ease-in-out infinite;}
.morph{animation:morph 9s ease-in-out infinite;}

.reveal{opacity:0;animation:rise .9s cubic-bezier(.2,.7,.2,1) forwards;}
.d1{animation-delay:.05s}.d2{animation-delay:.18s}.d3{animation-delay:.31s}
.d4{animation-delay:.44s}.d5{animation-delay:.57s}.d6{animation-delay:.7s}

.sr{opacity:0;transform:translateY(34px);transition:opacity .8s cubic-bezier(.2,.7,.2,1),transform .8s cubic-bezier(.2,.7,.2,1);}
.sr.in{opacity:1;transform:none;}

.glow-ring{position:absolute;inset:-30%;border-radius:50%;background:conic-gradient(from 0deg,#2dd4bf,#8b5cf6,#ec4899,#fb923c,#2dd4bf);filter:blur(34px);opacity:.55;animation:spin-slow 14s linear infinite;}

.gradient-border{position:relative;}
.gradient-border::before{
  content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;
  background:var(--brand);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;opacity:.6;
}

.btn-store{transition:transform .3s cubic-bezier(.2,.7,.2,1),box-shadow .3s;}
.btn-store:hover{transform:translateY(-4px);box-shadow:0 18px 40px -18px rgba(139,92,246,.7);}

.feature{transition:transform .4s cubic-bezier(.2,.7,.2,1),border-color .4s;}
.feature:hover{transform:translateY(-6px);border-color:rgba(255,255,255,.18);}

#nav{transition:background .35s,backdrop-filter .35s,border-color .35s;}
#nav.scrolled{background:rgba(8,8,14,.72);backdrop-filter:blur(16px);border-color:rgba(255,255,255,.07);}
.nav-link{position:relative;}
.nav-link::after{content:"";position:absolute;left:0;bottom:-4px;height:2px;width:0;background:var(--brand);transition:width .3s;}
.nav-link:hover::after{width:100%;}

.sec-title{color:var(--accent);}
.icon-chip{display:grid;place-items:center;}
.doc a{color:var(--accent);}
.doc a:hover{text-decoration:underline;}

::-webkit-scrollbar{width:10px;height:10px;}
::-webkit-scrollbar-track{background:transparent;}
::-webkit-scrollbar-thumb{background:linear-gradient(#8b5cf6,#ec4899);border-radius:20px;border:3px solid transparent;background-clip:content-box;}

@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important;}
  .sr{opacity:1;transform:none;}
}
