/* Nyxen - the website.
   Nyxen's own colours: black and white, nothing else. A night sky, silver
   light and glass on top - the pictures are the real app (in its default
   Charcoal theme) and everything else is here to frame them. The only colour
   on the page is in the screenshots and the Themes section, which is there
   to show colour off. */

@font-face{font-family:"Inter";src:url(fonts/inter-latin.woff2) format("woff2");font-weight:400 800;font-display:swap}
@font-face{font-family:"Sora";src:url(fonts/sora-latin.woff2) format("woff2");font-weight:500 800;font-display:swap}

:root{
  --bg:#050505; --bg2:#0b0b0b; --bg3:#141414;
  --fg:#f5f5f5; --dim:#a8a8a8; --dimmer:#7c7c7c;
  --line:rgba(255,255,255,.10); --line2:rgba(255,255,255,.20);
  --card:rgba(17,17,17,.68); --card2:rgba(26,26,26,.72);
  --grad:linear-gradient(105deg,#ffffff 0%,#cfcfcf 30%,#7d7d7d 55%,#e8e8e8 80%,#ffffff 100%);
  --btn:linear-gradient(180deg,#ffffff 0%,#dcdcdc 100%);
  --btn-fg:#0a0a0a;
  --ok:#f5f5f5;
  --r:20px; --ease:cubic-bezier(.2,.8,.2,1);
  --font:"Inter",system-ui,"Segoe UI",Roboto,sans-serif;
  --display:"Sora","Inter",system-ui,sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:90px;background:var(--bg)}
body{margin:0;color:var(--fg);font:16px/1.65 var(--font);-webkit-font-smoothing:antialiased;
  background:
    radial-gradient(1100px 700px at 12% -6%,rgba(255,255,255,0.095),transparent 62%),
    radial-gradient(900px 640px at 96% 8%,rgba(255,255,255,0.044),transparent 60%),
    radial-gradient(1200px 900px at 50% 120%,rgba(255,255,255,0.048),transparent 60%),
    var(--bg);
  background-attachment:fixed;overflow-x:hidden}
a{color:inherit}
img{max-width:100%}
::selection{background:#fff;color:#000}
.wrap{max-width:1200px;margin:0 auto;padding:0 24px;position:relative;z-index:2}
b,strong{font-weight:650}

/* ---- the sky behind everything ------------------------------------------ */
#sky{position:fixed;inset:0;z-index:0;pointer-events:none}
.aurora{position:fixed;inset:-20%;z-index:0;pointer-events:none;filter:blur(70px);opacity:.55}
.aurora i{position:absolute;border-radius:50%;mix-blend-mode:screen}
.aurora i:nth-child(1){width:46vw;height:46vw;left:4%;top:8%;
  background:radial-gradient(circle,rgba(255,255,255,0.248),transparent 65%);animation:drift1 28s ease-in-out infinite alternate}
.aurora i:nth-child(2){width:40vw;height:40vw;right:2%;top:24%;
  background:radial-gradient(circle,rgba(255,255,255,0.084),transparent 65%);animation:drift2 34s ease-in-out infinite alternate}
.aurora i:nth-child(3){width:50vw;height:34vw;left:30%;bottom:-6%;
  background:radial-gradient(circle,rgba(255,255,255,0.08),transparent 65%);animation:drift1 40s ease-in-out infinite alternate-reverse}
@keyframes drift1{to{transform:translate3d(9vw,7vh,0) scale(1.12)}}
@keyframes drift2{to{transform:translate3d(-10vw,-6vh,0) scale(.9)}}
.grain{position:fixed;inset:0;z-index:1;pointer-events:none;opacity:.07;mix-blend-mode:overlay;
  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='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
.progress{position:fixed;top:0;left:0;right:0;height:3px;z-index:60;pointer-events:none}
.progress span{display:block;height:100%;background:#fff;transform-origin:0 50%;transform:scaleX(0);
  box-shadow:0 0 18px rgba(255,255,255,0.385)}

/* ---- navigation ------------------------------------------------------------- */
.nav{position:fixed;top:0;left:0;right:0;z-index:50;display:flex;align-items:center;gap:18px;
  margin:0 auto;max-width:1240px;padding:16px 26px;border:1px solid transparent;border-radius:0;
  transition:top .45s var(--ease),max-width .45s var(--ease),padding .45s var(--ease),background .35s,border-color .35s,border-radius .45s,box-shadow .35s}
.nav.float{top:12px;max-width:1180px;padding:10px 14px 10px 18px;border-radius:20px;
  background:rgba(12,12,12,0.62);border-color:var(--line);backdrop-filter:blur(18px) saturate(1.4);
  -webkit-backdrop-filter:blur(18px) saturate(1.4);box-shadow:0 18px 50px -24px rgba(0,0,0,.8)}
@media(min-width:1260px){.nav.float{left:12px;right:12px}}
@media(max-width:1259px){.nav.float{left:12px;right:12px}}
.brand{display:flex;align-items:center;gap:11px;text-decoration:none;font:700 19px/1 var(--display);letter-spacing:-.02em}
.logo{width:36px;height:36px;border-radius:11px;display:grid;place-items:center;overflow:hidden;position:relative;
  background:linear-gradient(140deg,#262626,#0d0d0d);box-shadow:0 0 0 1px rgba(255,255,255,0.2),0 8px 24px -8px rgba(255,255,255,0.36);
  transition:transform .5s var(--ease)}
.logo img{width:78%;height:78%;mix-blend-mode:screen;display:block}
.brand:hover .logo{transform:rotate(-10deg) scale(1.08)}
.links{display:flex;gap:4px;margin-left:auto}
.links a{position:relative;text-decoration:none;color:var(--dim);font-size:14.5px;font-weight:500;padding:8px 12px;border-radius:10px;transition:color .2s,background .2s}
.links a:hover{color:var(--fg);background:rgba(255,255,255,0.056)}
.links a.on{color:var(--fg)}
.links a.on::after{content:"";position:absolute;left:12px;right:12px;bottom:3px;height:2px;border-radius:2px;background:var(--grad)}
.nav-actions{display:flex;align-items:center;gap:10px}
.menu{display:none;width:42px;height:42px;border-radius:12px;border:1px solid var(--line);background:rgba(255,255,255,0.048);cursor:pointer;
  flex-direction:column;align-items:center;justify-content:center;gap:5px;padding:0}
.menu span{display:block;width:18px;height:2px;border-radius:2px;background:var(--fg);transition:transform .3s var(--ease)}
.nav.open .menu span:first-child{transform:translateY(3.5px) rotate(45deg)}
.nav.open .menu span:last-child{transform:translateY(-3.5px) rotate(-45deg)}
@media(max-width:1020px){
  .links{position:absolute;top:calc(100% + 8px);left:0;right:0;flex-direction:column;gap:2px;padding:10px;
    background:#121212;border:1px solid var(--line2);border-radius:18px;box-shadow:0 30px 60px -20px rgba(0,0,0,.9);
    opacity:0;transform:translateY(-8px);pointer-events:none;transition:opacity .25s,transform .25s var(--ease)}
  .nav.open .links{opacity:1;transform:none;pointer-events:auto}
  .links a{padding:12px 14px;font-size:16px}
  .links a.on::after{display:none}
  .menu{display:flex}
  .nav{padding:12px 16px}
}

/* ---- buttons ---------------------------------------------------------------- */
.btn{display:inline-flex;align-items:center;gap:12px;text-decoration:none;font-weight:650;border-radius:14px;cursor:pointer;
  border:1px solid transparent;position:relative;isolation:isolate;overflow:hidden;white-space:nowrap;
  transform:translate3d(var(--mx,0),var(--my,0),0);transition:transform .25s var(--ease),box-shadow .3s,border-color .2s,background .2s}
.btn-primary{background:var(--btn);color:var(--btn-fg);box-shadow:0 12px 34px -12px rgba(255,255,255,0.165),inset 0 1px 0 rgba(255,255,255,.25)}
.btn-primary::after{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(100deg,transparent 30%,rgba(140,140,140,.35) 50%,transparent 70%);
  transform:translateX(-120%);animation:sweep 5.5s ease-in-out 1.5s infinite}
@keyframes sweep{0%{transform:translateX(-120%)}40%,100%{transform:translateX(120%)}}
.btn-primary:hover{box-shadow:0 18px 44px -12px rgba(255,255,255,0.209),inset 0 1px 0 rgba(255,255,255,.3)}
.btn-ghost{color:var(--fg);border-color:var(--line2);background:rgba(255,255,255,0.04);backdrop-filter:blur(8px)}
.btn-ghost:hover{border-color:rgba(255,255,255,0.4);background:rgba(255,255,255,0.08)}
.btn-sm{padding:10px 16px;font-size:14.5px;border-radius:12px;gap:8px}
.btn-lg{padding:15px 24px;font-size:16.5px;border-radius:16px}
.btn-lg span{display:flex;flex-direction:column;line-height:1.2;text-align:left}
.btn-lg small{font-weight:500;font-size:12.5px;opacity:.82;margin-top:3px}
.btn svg{flex:none}

/* ---- hero -------------------------------------------------------------------- */
.hero{display:grid;grid-template-columns:minmax(0,1.04fr) minmax(0,1fr);gap:44px;align-items:center;
  min-height:100vh;padding:120px 0 60px}
.pill{display:inline-flex;align-items:center;gap:10px;padding:7px 14px 7px 12px;border-radius:999px;text-decoration:none;
  font-size:13.5px;color:var(--dim);border:1px solid var(--line2);background:rgba(255,255,255,0.045);backdrop-filter:blur(8px);
  transition:border-color .2s,color .2s}
.pill:hover{border-color:rgba(255,255,255,0.4);color:var(--fg)}
.pill .dot{width:8px;height:8px;border-radius:50%;background:var(--ok);box-shadow:0 0 0 4px rgba(255,255,255,0.144);animation:pulse 2.4s ease-in-out infinite}
@keyframes pulse{50%{box-shadow:0 0 0 8px rgba(255,255,255,0)}}
h1,h2,h3{font-family:var(--display);letter-spacing:-.035em;line-height:1.04;margin:0}
h1{font-size:clamp(44px,6.4vw,84px);font-weight:800;margin:22px 0 22px}
.grad{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;
  background-size:200% 100%;animation:gradmove 9s ease-in-out infinite alternate}
@keyframes gradmove{to{background-position:100% 0}}
.lead{font-size:clamp(17px,1.5vw,19.5px);color:var(--dim);max-width:600px;margin:0 0 30px}
.cta{display:flex;gap:14px;flex-wrap:wrap;align-items:center}
.trust{display:flex;gap:22px;flex-wrap:wrap;list-style:none;padding:0;margin:28px 0 0;color:var(--dimmer);font-size:14px}
.trust li{display:flex;align-items:center;gap:8px}
.trust li::before{content:"";width:16px;height:16px;border-radius:50%;flex:none;
  background:rgba(255,255,255,0.128) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23ffffff' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round' d='m6 12.5 4 4 8-9'/%3E%3C/svg%3E") center/11px no-repeat}

.hero-visual{position:relative;height:min(640px,62vw);perspective:1600px}
.hero-glow{position:absolute;inset:8% 4% 4% 8%;border-radius:40%;filter:blur(60px);
  background:radial-gradient(circle at 40% 40%,rgba(255,255,255,0.293),transparent 60%),radial-gradient(circle at 70% 70%,rgba(255,255,255,0.11),transparent 60%);
  animation:glow 7s ease-in-out infinite alternate}
@keyframes glow{to{transform:scale(1.08) translate(10px,-10px);opacity:.8}}
.window{position:relative;margin:0;border-radius:14px;overflow:hidden;background:#0a0a0a;
  border:1px solid rgba(255,255,255,0.176);box-shadow:0 40px 100px -30px rgba(0,0,0,.9),0 0 0 1px rgba(0,0,0,.4),inset 0 1px 0 rgba(255,255,255,.06)}
.window-bar{display:flex;align-items:center;gap:7px;height:30px;padding:0 13px;background:linear-gradient(180deg,#1c1c1c,#141414);border-bottom:1px solid rgba(255,255,255,0.096)}
.window-bar i{width:10px;height:10px;border-radius:50%;background:#5c5c5c}
.window-bar i:nth-child(2){background:#434343}.window-bar i:nth-child(3){background:#2e2e2e}
.window-bar span{margin-left:10px;font-size:12px;color:var(--dimmer);font-weight:500}
.window img{display:block;width:100%;height:auto}
.hero-window{position:absolute;left:0;right:6%;top:9%;z-index:2;
  transform:translate3d(calc(var(--tx,0) * 14px),calc(var(--ty,0) * 10px),0) rotateY(calc(-7deg + var(--tx,0) * 4deg)) rotateX(calc(4deg - var(--ty,0) * 3deg));
  transition:transform .6s var(--ease)}
.hero-back{position:absolute;right:-5%;top:-3%;width:56%;z-index:1;opacity:.85;
  transform:translate3d(calc(var(--tx,0) * -10px),calc(var(--ty,0) * -8px),-80px) rotateY(-14deg);filter:saturate(1.1) brightness(.85);transition:transform .7s var(--ease)}
.chip{position:absolute;z-index:4;display:flex;align-items:center;gap:10px;padding:10px 15px 10px 10px;border-radius:15px;
  font-size:14px;font-weight:600;white-space:nowrap;background:rgba(15,15,15,0.78);border:1px solid var(--line2);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);box-shadow:0 18px 40px -16px rgba(0,0,0,.85);
  transform:translate3d(calc(var(--tx,0) * var(--d,20px)),calc(var(--ty,0) * var(--d,20px)),0);transition:transform .5s var(--ease);
  animation:bob 6s ease-in-out infinite}
.chip i{width:30px;height:30px;border-radius:10px;display:grid;place-items:center;font-style:normal;font-size:15px;background:rgba(255,255,255,0.126)}
.chip small{display:block;font-weight:500;color:var(--dimmer);font-size:12px;margin-top:1px}
.chip-a{left:-6%;top:66%;--d:26px;animation-delay:-1s}
.chip-b{right:-3%;top:47%;--d:-22px;animation-delay:-3s}
.chip-c{right:10%;top:79%;--d:30px;animation-delay:-4.5s}
.chip-a i{background:rgba(255,255,255,0.11)}.chip-c i{background:rgba(255,255,255,0.16)}
@keyframes bob{50%{margin-top:-8px}}
.avatar-card{position:absolute;z-index:5;left:-2%;top:0;display:flex;align-items:center;gap:12px;padding:10px 16px 10px 10px;border-radius:18px;
  background:rgba(15,15,15,0.82);border:1px solid var(--line2);backdrop-filter:blur(14px);box-shadow:0 22px 50px -18px rgba(0,0,0,.9);
  transform:translate3d(calc(var(--tx,0) * 34px),calc(var(--ty,0) * 26px),0);transition:transform .5s var(--ease);animation:bob 7s ease-in-out -2s infinite}
.avatar-card b{display:block;font-size:15px}
.avatar-card small{display:flex;align-items:center;gap:6px;color:var(--dimmer);font-size:12.5px}
.avatar-card small::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--ok)}
.ring-av{display:block;width:52px;height:52px;border-radius:50%;padding:3px;flex:none;position:relative;
  background:conic-gradient(from 0deg,#ffffff,#5a5a5a,#e6e6e6,#3a3a3a,#ffffff);animation:spin 4s linear infinite}
.ring-av img{width:100%;height:100%;border-radius:50%;display:block;border:2px solid #0d0d0d;animation:spin 4s linear infinite reverse}
@keyframes spin{to{transform:rotate(360deg)}}
@media(max-width:980px){
  .hero{grid-template-columns:1fr;min-height:0;padding:120px 0 40px;gap:30px}
  .hero-visual{height:min(560px,86vw);margin-top:10px}
}
@media(max-width:560px){.chip-b{display:none}.chip{font-size:12.5px}.chip-a{left:0}.avatar-card{left:0}}

/* ---- numbers and the belt ---------------------------------------------------- */
.stats{display:grid;grid-template-columns:repeat(4,1fr);border:1px solid var(--line);border-radius:22px;overflow:hidden;
  background:rgba(15,15,15,0.5);backdrop-filter:blur(12px)}
.stat{padding:26px 18px;text-align:center;position:relative}
.stat+.stat{border-left:1px solid var(--line)}
.stat b{display:block;font:800 clamp(30px,3.4vw,44px)/1.05 var(--display);letter-spacing:-.04em;background:var(--grad);
  -webkit-background-clip:text;background-clip:text;color:transparent;font-variant-numeric:tabular-nums}
.stat span{color:var(--dim);font-size:14px}
@media(max-width:760px){.stats{grid-template-columns:repeat(2,1fr)}.stat:nth-child(3){border-left:0}.stat:nth-child(n+3){border-top:1px solid var(--line)}}
.belt{margin:38px 0 0;overflow:hidden;mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}
.belt-run{display:flex;width:max-content;gap:14px;animation:belt 46s linear infinite}
.belt:hover .belt-run{animation-play-state:paused}
@keyframes belt{to{transform:translateX(-50%)}}
.belt-run span{padding:9px 16px;border-radius:999px;border:1px solid var(--line);background:rgba(255,255,255,0.032);
  font-size:14px;font-weight:600;color:var(--dim);white-space:nowrap}
.belt-label{text-align:center;color:var(--dimmer);font-size:13px;letter-spacing:.14em;text-transform:uppercase;margin:46px 0 0}

/* ---- sections ------------------------------------------------------------------ */
.section{padding:120px 0 0}
.section-head{text-align:center;max-width:780px;margin:0 auto 46px}
.eyebrow{display:inline-flex;align-items:center;gap:8px;padding:6px 14px;border-radius:999px;font-size:12px;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;color:#e8e8e8;border:1px solid rgba(255,255,255,0.21);background:rgba(255,255,255,0.054)}
.eyebrow.beta::after{content:"beta";padding:1px 7px;border-radius:6px;background:var(--btn);color:var(--btn-fg);letter-spacing:.08em;font-size:10px}
h2{font-size:clamp(34px,4.6vw,58px);font-weight:800;margin:18px 0 16px}
.section-head p{color:var(--dim);font-size:18px;margin:0}

/* ---- the tour ---------------------------------------------------------------------- */
.tour-tabs{display:flex;flex-wrap:wrap;justify-content:center;gap:4px;padding:6px;border-radius:20px;border:1px solid var(--line);background:rgba(15,15,15,0.55);
  backdrop-filter:blur(12px);margin:0 auto 26px;width:max-content;max-width:100%}
.tour-tabs::-webkit-scrollbar{display:none}
.tour-tabs button{flex:none;position:relative;display:flex;align-items:center;gap:8px;padding:9px 14px;border-radius:13px;border:0;cursor:pointer;
  background:none;color:var(--dim);font:600 14.5px var(--font);white-space:nowrap;transition:color .2s,background .2s;overflow:hidden}
.tour-tabs button:hover{color:var(--fg);background:rgba(255,255,255,0.048)}
.tour-tabs button[aria-selected="true"]{color:var(--fg);background:rgba(255,255,255,0.099);box-shadow:inset 0 0 0 1px rgba(255,255,255,0.21)}
.tour-tabs button[aria-selected="true"]::after{content:"";position:absolute;left:10px;right:10px;bottom:4px;height:2px;border-radius:2px;
  background:var(--grad);transform-origin:0 50%;transform:scaleX(var(--k,0))}
.tour-tabs svg{width:17px;height:17px;flex:none}
.tour-stage{display:grid;grid-template-columns:minmax(0,1.7fr) minmax(0,1fr);gap:40px;align-items:center}
.tour-images{position:relative;aspect-ratio:16/9;background:#0a0a0a}
.tour-images img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transform:scale(1.03);
  transition:opacity .6s var(--ease),transform 1.2s var(--ease)}
.tour-images img.on{opacity:1;transform:none}
.tour-window{cursor:zoom-in}
.tour-caption h3{font-size:clamp(26px,2.6vw,34px);font-weight:800;margin:0 0 14px}
.tour-caption p{color:var(--dim);font-size:17px;margin:0 0 20px}
.tags{display:flex;flex-wrap:wrap;gap:8px;list-style:none;padding:0;margin:0}
.tags li{padding:7px 13px;border-radius:999px;font-size:13.5px;font-weight:600;color:#e8e8e8;border:1px solid var(--line2);background:rgba(255,255,255,0.045)}
.tour-caption .fade{animation:capIn .5s var(--ease) both}
@keyframes capIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@media(max-width:900px){.tour-stage{grid-template-columns:1fr;gap:24px}.tour-tabs{width:auto}}
@media(max-width:640px){.tour-tabs{flex-wrap:nowrap;justify-content:flex-start;overflow-x:auto;scrollbar-width:none;border-radius:16px}
  .tour-tabs::-webkit-scrollbar{display:none}}

/* ---- cards and grids ------------------------------------------------------------------ */
.card{position:relative;border-radius:var(--r);border:1px solid var(--line);background:var(--card);backdrop-filter:blur(10px);
  overflow:hidden;transition:transform .35s var(--ease),border-color .3s,box-shadow .35s}
.card::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .3s;
  background:radial-gradient(320px circle at var(--cx,50%) var(--cy,50%),rgba(255,255,255,0.096),transparent 70%)}
.card:hover{transform:translateY(-4px);border-color:rgba(255,255,255,0.228);box-shadow:0 30px 60px -30px rgba(255,255,255,0.168)}
.card:hover::before{opacity:1}
.grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.feat{padding:24px}
.ico{width:46px;height:46px;border-radius:14px;display:grid;place-items:center;margin-bottom:18px;
  background:linear-gradient(140deg,rgba(255,255,255,0.144),rgba(255,255,255,0.04));box-shadow:inset 0 0 0 1px rgba(255,255,255,0.2);color:#efefef}
.ico svg{width:22px;height:22px}
.feat h3{font:700 18px/1.25 var(--display);letter-spacing:-.02em;margin:0 0 8px}
.feat p{margin:0;color:var(--dim);font-size:14.5px;line-height:1.6}
.feat .new{position:absolute;top:20px;right:20px;font-size:10.5px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;
  padding:3px 9px;border-radius:999px;background:var(--btn);color:var(--btn-fg)}
@media(max-width:1060px){.grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:780px){.grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:520px){.grid{grid-template-columns:1fr}}

/* ---- the Space demo ---------------------------------------------------------------- */
.space-demo{max-width:1100px;margin:0 auto}
.space-stage{position:relative;aspect-ratio:1600/826;border-radius:22px;overflow:hidden;border:1px solid rgba(255,255,255,0.2);
  box-shadow:0 50px 120px -40px rgba(255,255,255,0.21),0 0 0 6px rgba(255,255,255,0.032);background:#0a0a0a}
.space-stage img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .7s var(--ease)}
.space-stage img.on{opacity:1}
.space-stage canvas{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.space-stage .live{position:absolute;left:16px;bottom:16px;z-index:3;display:flex;align-items:center;gap:8px;padding:7px 13px;border-radius:999px;
  font-size:13px;font-weight:600;background:rgba(8,8,8,0.7);border:1px solid var(--line2);backdrop-filter:blur(10px)}
.space-stage .live::before{content:"";width:8px;height:8px;border-radius:50%;background:#fff;box-shadow:0 0 10px #fff;animation:pulse 2s infinite}
.controls{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin:22px 0 0}
.seg{display:flex;gap:3px;padding:4px;border-radius:14px;border:1px solid var(--line);background:rgba(15,15,15,0.6);backdrop-filter:blur(10px);flex-wrap:wrap}
.seg button{border:0;background:none;color:var(--dim);font:600 14px var(--font);padding:8px 14px;border-radius:10px;cursor:pointer;display:flex;align-items:center;gap:7px;transition:color .2s,background .2s}
.seg button:hover{color:var(--fg)}
.seg button[aria-checked="true"]{color:var(--btn-fg);background:var(--btn);box-shadow:0 6px 18px -8px rgba(255,255,255,0.176)}
.seg-label{align-self:center;color:var(--dimmer);font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;padding:0 6px 0 8px}
.demo-note{text-align:center;color:var(--dimmer);font-size:14px;margin:16px auto 0;max-width:720px}

.bento{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:16px;margin-top:70px}
.tile{display:flex;flex-direction:column;cursor:zoom-in}
.tile .pic{position:relative;aspect-ratio:16/9;overflow:hidden;border-bottom:1px solid var(--line)}
.tile .pic img{width:100%;height:100%;object-fit:cover;display:block;transition:transform 1.2s var(--ease)}
.tile:hover .pic img{transform:scale(1.06)}
.tile .txt{padding:18px 20px 20px}
.tile h3{font:700 18px/1.25 var(--display);margin:0 0 6px;letter-spacing:-.02em}
.tile p{margin:0;color:var(--dim);font-size:14.5px}
.tile.w2{grid-column:span 2}.tile.w3{grid-column:span 3}.tile.w4{grid-column:span 4}
.tile kbd,.split kbd,.feat kbd{font:600 12px var(--font);padding:1px 7px;border-radius:6px;border:1px solid var(--line2);background:rgba(255,255,255,0.064);color:#e8e8e8}
@media(max-width:900px){.bento{grid-template-columns:repeat(2,minmax(0,1fr))}.tile.w2,.tile.w3,.tile.w4{grid-column:span 1}}
@media(max-width:560px){.bento{grid-template-columns:1fr}}

/* ---- split sections ---------------------------------------------------------------- */
.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.25fr);gap:60px;align-items:center}
.split.flip{grid-template-columns:minmax(0,1.25fr) minmax(0,1fr)}
.split.flip .split-copy{order:2}
.split-copy h2{text-align:left;margin-top:16px}
.split-copy>p{color:var(--dim);font-size:17.5px;margin:0 0 22px}
.checks{list-style:none;padding:0;margin:0;display:grid;gap:12px}
.checks li{position:relative;padding-left:34px;color:var(--dim);font-size:15.5px}
.checks li b{color:var(--fg)}
.checks li::before{content:"";position:absolute;left:0;top:2px;width:22px;height:22px;border-radius:7px;
  background:linear-gradient(140deg,rgba(255,255,255,0.18),rgba(255,255,255,0.062)) center/13px no-repeat;box-shadow:inset 0 0 0 1px rgba(255,255,255,0.24)}
.checks li::after{content:"";position:absolute;left:5px;top:7px;width:12px;height:12px;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23fff' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round' d='m5 12.5 4.5 4.5L19 7.5'/%3E%3C/svg%3E") center/contain no-repeat}
.stack{position:relative}
.stack .window{cursor:zoom-in}
.stack .pip{position:absolute;right:-4%;bottom:-10%;width:46%;z-index:3;transform:rotate(2deg);transition:transform .5s var(--ease)}
.stack:hover .pip{transform:rotate(0) translateY(-6px)}
@media(max-width:900px){.split,.split.flip{grid-template-columns:1fr;gap:34px}.split.flip .split-copy{order:0}.stack .pip{right:0;bottom:-6%}}

/* ---- GIFs ------------------------------------------------------------------------------ */
.gif-hero{position:relative;border-radius:28px;padding:70px 60px;overflow:hidden;border:1px solid rgba(255,255,255,0.176);
  background:radial-gradient(700px 400px at 85% 20%,rgba(255,255,255,0.062),transparent 60%),radial-gradient(700px 500px at 10% 90%,rgba(255,255,255,0.098),transparent 60%),rgba(13,13,13,0.7);
  display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:40px;align-items:center}
.gif-hero h2{text-align:left;font-size:clamp(32px,4vw,52px)}
.gif-hero p{color:var(--dim);font-size:18px;margin:0 0 24px}
.strike{position:relative;color:var(--dimmer);white-space:nowrap}
.strike::after{content:"";position:absolute;left:-2%;right:-2%;top:54%;height:4px;border-radius:4px;background:var(--grad);
  transform-origin:0 50%;transform:scaleX(0);transition:transform .9s var(--ease) .5s}
.in .strike::after,.strike.in::after{transform:scaleX(1)}
.profile-mock{position:relative;justify-self:center;width:min(380px,100%);border-radius:24px;overflow:hidden;
  background:#121212;border:1px solid var(--line2);box-shadow:0 40px 90px -30px rgba(0,0,0,.9)}
.profile-mock .banner{height:120px;background:linear-gradient(120deg,#1f1f1f,#4a4a4a 55%,#2a2a2a);position:relative;overflow:hidden}
.profile-mock .banner::after{content:"";position:absolute;inset:0;background:radial-gradient(circle at 30% 120%,rgba(255,255,255,.35),transparent 50%);animation:glow 5s ease-in-out infinite alternate}
.profile-mock .who{padding:0 22px 22px;margin-top:-46px;position:relative}
.profile-mock .ring-av{width:96px;height:96px;padding:4px}
.profile-mock .ring-av img{border-width:3px}
.profile-mock h4{font:800 22px/1.2 var(--display);margin:12px 0 2px;letter-spacing:-.02em;display:flex;align-items:center;gap:8px}
.profile-mock .handle{color:var(--dimmer);font-size:14px}
.profile-mock .song{display:flex;align-items:center;gap:12px;margin-top:16px;padding:12px;border-radius:14px;background:rgba(255,255,255,0.063);border:1px solid var(--line)}
.profile-mock .song i{width:40px;height:40px;border-radius:10px;background:linear-gradient(140deg,#e5e5e5,#3a3a3a);flex:none}
.profile-mock .song b{display:block;font-size:14px}.profile-mock .song small{color:var(--dimmer);font-size:12.5px}
.profile-mock .free{position:absolute;top:14px;right:14px;z-index:2;padding:5px 11px;border-radius:999px;font-size:12px;font-weight:800;
  background:rgba(255,255,255,0.144);color:#d4d4d4;border:1px solid rgba(255,255,255,0.32)}
.gif-row{display:flex;gap:14px;flex-wrap:wrap;margin-top:6px}
.gif-row img{width:86px;height:86px;border-radius:18px;background:#fff;border:1px solid var(--line2);box-shadow:0 14px 30px -12px rgba(0,0,0,.8);
  transition:transform .3s var(--ease)}
.gif-row img:hover{transform:translateY(-6px) rotate(-4deg) scale(1.06)}
@media(max-width:900px){.gif-hero{grid-template-columns:1fr;padding:44px 26px}}

/* ---- themes -------------------------------------------------------------------------------- */
.theme-zone{position:relative;border-radius:30px;padding:56px 0 40px;transition:background 1s var(--ease)}
.theme-zone::before{content:"";position:absolute;inset:0;border-radius:30px;pointer-events:none;z-index:-1;opacity:.9;
  background:radial-gradient(60% 60% at 50% 40%,var(--tglow,rgba(255,255,255,0.135)),transparent 70%);transition:background .9s var(--ease)}
.theme-demo{max-width:1060px;margin:0 auto}
.theme-chips{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin:0 0 24px}
.theme-chips button{display:flex;align-items:center;gap:9px;padding:9px 15px 9px 9px;border-radius:14px;cursor:pointer;
  border:1px solid var(--line);background:rgba(15,15,15,0.6);color:var(--dim);font:600 14px var(--font);transition:all .25s var(--ease)}
.theme-chips button i{width:24px;height:24px;border-radius:8px;flex:none;box-shadow:inset 0 0 0 1px rgba(255,255,255,.2)}
.theme-chips button:hover{color:var(--fg);transform:translateY(-2px)}
.theme-chips button[aria-checked="true"]{color:#fff;border-color:rgba(255,255,255,.4);background:rgba(255,255,255,.08);box-shadow:0 10px 26px -12px var(--tglow,rgba(255,255,255,.3))}
.layouts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin-top:40px}
.layouts figure{margin:0;cursor:zoom-in}
.layouts .window{border-radius:12px}
.layouts figcaption{margin-top:10px;font-size:14px;color:var(--dim)}
.layouts figcaption b{color:var(--fg);font-family:var(--display)}
@media(max-width:780px){.layouts{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* ---- Eclipse ---------------------------------------------------------------------------------- */
.plans{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.25fr);gap:20px;max-width:1000px;margin:0 auto;align-items:stretch}
.plan{padding:32px;display:flex;flex-direction:column}
.plan .pn{font-size:13px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--dim)}
.plan .pp{font:800 54px/1 var(--display);letter-spacing:-.04em;margin:14px 0 6px}
.plan .pp small{font:600 16px var(--font);color:var(--dim);letter-spacing:0}
.plan .ps{color:var(--dim);font-size:14.5px;margin:0 0 6px}
.plan ul{flex:1;margin:18px 0 24px}
.plan .btn{justify-content:center;width:100%;padding:15px 20px}
.plan.best{border-color:rgba(255,255,255,0.275);background:linear-gradient(160deg,rgba(255,255,255,0.078),rgba(255,255,255,0.031) 60%,rgba(17,17,17,0.7));
  box-shadow:0 40px 90px -40px rgba(255,255,255,0.132)}
.plan.best::after{content:"Best value";position:absolute;top:24px;right:24px;font-size:11px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;
  padding:5px 11px;border-radius:999px;background:var(--btn);color:var(--btn-fg)}
.plan.best .pn{color:#e8e8e8}
.terms4{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin:16px 0 4px}
.terms4 a{display:flex;flex-direction:column;gap:1px;padding:11px 12px;border-radius:13px;text-decoration:none;border:1px solid var(--line2);
  background:rgba(255,255,255,.03);transition:border-color .2s,background .2s,transform .2s var(--ease)}
.terms4 a:hover{border-color:rgba(255,255,255,0.33);background:rgba(255,255,255,0.044);transform:translateY(-2px)}
.terms4 b{font-size:12.5px;color:var(--dim);font-weight:600}.terms4 span{font:800 18px var(--display)}.terms4 i{font-style:normal;font-size:11.5px;color:#d4d4d4}
@media(max-width:620px){.terms4{grid-template-columns:repeat(2,1fr)}}
.ring{display:inline-block;width:12px;height:12px;border-radius:50%;margin-right:4px;vertical-align:-1px;box-shadow:0 0 0 2px #fff,0 0 10px rgba(255,255,255,.8)}
.ring.gold{box-shadow:0 0 0 2px #ffd36a,0 0 10px #f5a623}
.trialnote{font-size:12.5px;color:var(--dimmer);margin:12px 0 0;line-height:1.5}
.planfoot{text-align:center;color:var(--dimmer);font-size:14.5px;max-width:760px;margin:24px auto 0}
@media(max-width:860px){.plans{grid-template-columns:1fr}}

/* ---- honest cards ---------------------------------------------------------------------------------- */
.honest{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.honest .feat{padding:26px}
@media(max-width:900px){.honest{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:560px){.honest{grid-template-columns:1fr}}

/* ---- install ---------------------------------------------------------------------------------- */
.install{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:40px;align-items:center;padding:52px;border-radius:30px;
  border:1px solid rgba(255,255,255,0.192);background:radial-gradient(600px 400px at 100% 0%,rgba(255,255,255,0.048),transparent 60%),radial-gradient(700px 500px at 0% 100%,rgba(255,255,255,0.084),transparent 60%),rgba(13,13,13,0.72)}
.install h2{text-align:left;font-size:clamp(32px,3.8vw,48px)}
.steps{list-style:none;padding:0;margin:26px 0 0;display:grid;gap:16px;counter-reset:s}
.steps li{position:relative;padding-left:52px;color:var(--dim);font-size:16px;counter-increment:s}
.steps li b{color:var(--fg)}
.steps li::before{content:counter(s);position:absolute;left:0;top:-3px;width:36px;height:36px;border-radius:12px;display:grid;place-items:center;
  font:800 16px var(--display);color:var(--btn-fg);background:var(--btn);box-shadow:0 8px 20px -8px rgba(255,255,255,0.176)}
.dl-card{text-align:center}
.dl-card .btn{margin:0 auto}
.dl-card .meta{color:var(--dimmer);font-size:13.5px;margin:16px 0 0}
.dl-card .meta a{color:var(--dim)}
.sha{margin:18px 0 0;padding:14px;border-radius:14px;border:1px solid var(--line);background:rgba(0,0,0,.25);text-align:left}
.sha small{display:block;color:var(--dimmer);font-size:12px;margin-bottom:4px;font-weight:600;letter-spacing:.06em;text-transform:uppercase}
code{font:12.5px/1.5 ui-monospace,Consolas,monospace;color:#e8e8e8;word-break:break-all}
.note{margin:14px 0 0;padding:14px 16px;border-radius:14px;border:1px solid rgba(255,255,255,0.125);background:rgba(255,255,255,0.03);color:var(--dim);font-size:14px;text-align:left}
.note b{color:#ffffff}
@media(max-width:900px){.install{grid-template-columns:1fr;padding:34px 24px}}

/* ---- FAQ ---------------------------------------------------------------------------------- */
.faq{max-width:820px;margin:0 auto;display:grid;gap:12px}
.faq details{border-radius:18px;border:1px solid var(--line);background:var(--card);backdrop-filter:blur(10px);transition:border-color .25s,background .25s}
.faq details[open]{border-color:rgba(255,255,255,0.24);background:var(--card2)}
.faq summary{list-style:none;cursor:pointer;padding:20px 60px 20px 24px;font:650 17px/1.4 var(--font);position:relative}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";position:absolute;right:22px;top:50%;width:26px;height:26px;margin-top:-13px;border-radius:9px;
  background:rgba(255,255,255,0.09) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23e9e2ff' stroke-width='2.6' stroke-linecap='round' d='M12 6v12M6 12h12'/%3E%3C/svg%3E") center/14px no-repeat;
  transition:transform .3s var(--ease)}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq .a{padding:0 24px 22px;color:var(--dim);font-size:15.5px}
.faq .a p{margin:0 0 10px}.faq .a p:last-child{margin:0}

/* ---- footer ---------------------------------------------------------------------------------- */
footer{margin-top:120px;border-top:1px solid var(--line);padding:34px 0 50px;position:relative;z-index:2}
.foot{display:flex;flex-wrap:wrap;gap:20px 26px;align-items:center;color:var(--dimmer);font-size:14px}
.foot a{text-decoration:none;transition:color .2s}.foot a:hover{color:var(--fg)}
.foot .brand{font-size:16px;color:var(--fg)}.foot .logo{width:30px;height:30px;border-radius:9px}
.foot .right{margin-left:auto;max-width:460px;text-align:right;font-size:13px}
@media(max-width:700px){.foot .right{margin-left:0;text-align:left}}

/* ---- lightbox ---------------------------------------------------------------------------------- */
.lightbox{position:fixed;inset:0;z-index:80;display:none;align-items:center;justify-content:center;padding:70px 24px 30px;
  background:rgba(5,5,5,0.9);backdrop-filter:blur(10px)}
.lightbox.on{display:flex;animation:lbIn .25s var(--ease) both}
@keyframes lbIn{from{opacity:0}to{opacity:1}}
.lightbox img{max-width:min(1700px,100%);max-height:100%;border-radius:14px;border:1px solid var(--line2);box-shadow:0 40px 100px -30px #000;
  animation:lbImg .35s var(--ease) both}
@keyframes lbImg{from{transform:scale(.96)}to{transform:none}}
.lb-bar{position:absolute;top:16px;left:0;right:0;display:flex;justify-content:center;align-items:center;gap:10px}
.lb-bar button{padding:9px 16px;border-radius:12px;border:1px solid var(--line2);background:rgba(15,15,15,0.85);color:var(--fg);font:600 14px var(--font);cursor:pointer}
.lb-bar button:hover{border-color:rgba(255,255,255,0.48)}
.lb-bar span{color:var(--dim);font-size:14px;padding:0 8px}

.up{position:fixed;right:22px;bottom:22px;z-index:40;width:46px;height:46px;border-radius:14px;cursor:pointer;display:grid;place-items:center;
  border:1px solid var(--line2);background:rgba(15,15,15,0.75);color:var(--fg);backdrop-filter:blur(10px);
  opacity:0;transform:translateY(16px);pointer-events:none;transition:opacity .3s,transform .3s var(--ease)}
.up.on{opacity:1;transform:none;pointer-events:auto}
.up:hover{border-color:rgba(255,255,255,0.48)}

/* ---- reveal ---------------------------------------------------------------------------------- */
.js .reveal{opacity:0;transform:translateY(28px);transition:opacity .8s var(--ease),transform .8s var(--ease);transition-delay:calc(var(--d,0) * 80ms)}
.js .reveal.in{opacity:1;transform:none}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  html{scroll-behavior:auto}
  .js .reveal{opacity:1;transform:none}
  .aurora{display:none}
}