@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;600;700&family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');

:root{
  --bg: #06070a;
  --bg-2: #0a0d13;
  --panel: #0f131b;
  --panel-2: #141926;
  --border: #212a3b;
  --border-soft: #171e2b;
  --text: #eef1f7;
  --text-dim: #93a0b8;
  --text-faint: #4f5a72;
  --blue: #2f5fe0;
  --blue-deep: #14245a;
  --blue-bright: #6ba6ff;
  --blue-dim: #2f5fe029;
  --blue-glow: #2f5fe066;
  --radius: 16px;
  --maxw: 1140px;
  --ease: cubic-bezier(.16,.84,.44,1);
}

*{box-sizing:border-box; forced-color-adjust:none;}
html{scroll-behavior:smooth; color-scheme:dark;}
body{
  margin:0;
  background:var(--bg);
  background-image:
    radial-gradient(52% 38% at 82% -6%, #142452 0%, transparent 62%),
    radial-gradient(46% 32% at 4% 2%, #0e1a3c 0%, transparent 58%),
    repeating-linear-gradient(90deg, #ffffff05 0px, #ffffff05 1px, transparent 1px, transparent 96px);
  color:var(--text);
  font-family:'Inter', system-ui, sans-serif;
  -webkit-font-smoothing:antialiased;
  line-height:1.6;
  overflow-x:hidden;
  position:relative;
}
.orb{
  position:absolute;
  border-radius:50%;
  filter:blur(70px);
  pointer-events:none;
  z-index:0;
}
.orb--a{width:420px; height:420px; top:-140px; right:6%; background:#2f5fe04a; animation:drift-a 16s ease-in-out infinite;}
.orb--b{width:320px; height:320px; top:120px; left:-80px; background:#6ba6ff33; animation:drift-b 20s ease-in-out infinite;}
@keyframes drift-a{
  0%,100%{transform:translate(0,0) scale(1);}
  50%{transform:translate(-30px,40px) scale(1.12);}
}
@keyframes drift-b{
  0%,100%{transform:translate(0,0) scale(1);}
  50%{transform:translate(40px,-20px) scale(1.08);}
}
@media (prefers-reduced-motion: reduce){
  .orb--a, .orb--b{animation:none;}
}
@media (prefers-reduced-motion: reduce){
  *{animation-duration:0.01ms !important; animation-iteration-count:1 !important; transition-duration:0.01ms !important; scroll-behavior:auto !important;}
}

h1,h2,h3{
  font-family:'Space Grotesk', sans-serif;
  margin:0;
  letter-spacing:-0.02em;
}
p{margin:0;}
a{color:inherit; text-decoration:none;}
button{font-family:inherit;}
.mono{
  font-family:'JetBrains Mono', monospace;
  letter-spacing:0.02em;
}
.wrap{max-width:var(--maxw); margin:0 auto; padding:0 28px;}

.btn{
  display:inline-flex; align-items:center; gap:9px;
  padding:13px 22px;
  border-radius:999px;
  font-weight:600;
  font-size:14.5px;
  border:1px solid var(--border);
  cursor:pointer;
  transition:transform .2s var(--ease), border-color .2s var(--ease), background .2s var(--ease), color .2s var(--ease), box-shadow .2s var(--ease);
  white-space:nowrap;
  position:relative;
}
.btn:hover{transform:translateY(-2px);}
.btn:active{transform:translateY(0);}
.btn:focus-visible{outline:2px solid var(--blue-bright); outline-offset:2px;}
.btn--primary{
  background:linear-gradient(180deg, var(--blue-bright), var(--blue));
  color:#050810;
  border:none;
  box-shadow:0 10px 28px -10px var(--blue-glow);
}
.btn--primary:hover{box-shadow:0 16px 36px -8px var(--blue-glow);}
.btn--ghost{
  background:var(--panel);
  color:var(--text);
}
.btn--ghost:hover{border-color:var(--blue-bright); color:var(--blue-bright);}
.btn--sm{padding:9px 15px; font-size:13.5px; border-radius:10px;}
.btn--block{width:100%; justify-content:center;}
.btn svg{width:16px; height:16px; flex:none;}

.nav{
  position:sticky; top:0; z-index:50;
  backdrop-filter:blur(16px);
  background:#06070acc;
  border-bottom:1px solid var(--border-soft);
}
.nav__inner{
  display:flex; align-items:center; justify-content:space-between;
  padding:16px 28px;
  max-width:var(--maxw); margin:0 auto;
}
.brand{display:flex; align-items:center; gap:11px; font-weight:700; font-size:18px; font-family:'Space Grotesk',sans-serif;}
.brand__mark{width:32px; height:32px; flex:none; object-fit:contain; display:block; border-radius:8px;}
.nav__links{display:flex; align-items:center; gap:30px; font-size:14.5px; color:var(--text-dim);}
.nav__links a{position:relative; transition:color .2s var(--ease); padding:4px 0;}
.nav__links a::after{
  content:''; position:absolute; left:0; right:0; bottom:-2px; height:1px;
  background:var(--blue-bright); transform:scaleX(0); transform-origin:left;
  transition:transform .25s var(--ease);
}
.nav__links a:hover{color:var(--text);}
.nav__links a:hover::after{transform:scaleX(1);}
.nav__right{display:flex; align-items:center; gap:14px;}
.nav__toggle{display:none; background:none; border:1px solid var(--border); border-radius:8px; padding:8px; color:var(--text);}

@media (max-width: 820px){
  .nav__links{display:none;}
  .nav__toggle{display:inline-flex;}
}

.hero{padding:96px 0 20px; text-align:center; position:relative;}
.eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  padding:6px 14px;
  border:1px solid var(--border);
  border-radius:999px;
  font-size:12.5px;
  color:var(--blue-bright);
  background:#0a0f1e;
  margin-bottom:30px;
  opacity:0; animation:rise .6s var(--ease) forwards;
}
.eyebrow__dot{width:6px; height:6px; border-radius:50%; background:var(--blue-bright); box-shadow:0 0 10px var(--blue-bright); animation:pulse-dot 2.4s ease-in-out infinite;}

.hero h1{
  font-size:clamp(38px, 6vw, 70px);
  line-height:1.04;
  max-width:840px;
  margin:0 auto;
  opacity:0; animation:rise .7s var(--ease) .08s forwards;
}
.hero h1 .accent{
  background:linear-gradient(90deg, var(--blue), var(--blue-bright));
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}
.hero__sub{
  max-width:580px; margin:22px auto 0;
  color:var(--text-dim);
  font-size:17px;
  opacity:0; animation:rise .7s var(--ease) .16s forwards;
}
.hero__tag{margin-top:12px; color:var(--text-faint); font-size:13.5px; opacity:0; animation:rise .7s var(--ease) .22s forwards;}
.hero__ctas{display:flex; gap:14px; justify-content:center; margin-top:36px; flex-wrap:wrap; opacity:0; animation:rise .7s var(--ease) .3s forwards;}
.hero__meta{margin-top:22px; color:var(--text-faint); font-size:13px; opacity:0; animation:rise .7s var(--ease) .36s forwards;}
.hero__meta b{color:var(--text-dim); font-weight:600;}

@keyframes rise{
  from{opacity:0; transform:translateY(14px);}
  to{opacity:1; transform:translateY(0);}
}
@keyframes pulse-dot{
  0%,100%{opacity:1; box-shadow:0 0 6px var(--blue-bright);}
  50%{opacity:.4; box-shadow:0 0 14px var(--blue-bright);}
}

.signal{max-width:640px; margin:56px auto 0; opacity:0; animation:rise .8s var(--ease) .42s forwards;}
.signal svg{width:100%; height:auto; display:block;}
.signal-path{
  stroke-dasharray:6 10;
  animation:dash 1.6s linear infinite;
}
@keyframes dash{ to{ stroke-dashoffset:-32; } }
.signal-glow{animation:glow-node 2.6s ease-in-out infinite;}
@keyframes glow-node{
  0%,100%{opacity:.55;}
  50%{opacity:1;}
}
@media (prefers-reduced-motion: reduce){
  .signal-path{animation:none;}
  .signal-glow{animation:none;}
}

.mockup-stage{position:relative; padding:64px 0 30px;}
.mockup{
  max-width:1040px; margin:0 auto;
  border-radius:18px;
  border:1px solid var(--border);
  background:var(--panel);
  overflow:hidden;
  box-shadow:0 44px 100px -30px #000c, 0 0 0 1px #ffffff08 inset;
  opacity:0; animation:rise .8s var(--ease) .5s forwards;
}
.mockup__bar{
  display:flex; align-items:center; gap:8px;
  padding:12px 16px;
  border-bottom:1px solid var(--border-soft);
  background:var(--panel-2);
}
.mockup__dot{width:10px; height:10px; border-radius:50%; background:#2a3142;}
.mockup__title{margin-left:8px; font-size:12.5px; color:var(--text-faint); font-family:'JetBrains Mono',monospace;}
.mockup__frame{
  display:flex;
  align-items:center;
  justify-content:center;
  width:100%;
  background:var(--bg-2);
  padding:18px;
}
.mockup__shot{
  display:block;
  width:100%;
  height:auto;
  max-height:640px;
  object-fit:contain;
  border-radius:6px;
}

.mockup__trigger{
  display:block;
  width:100%;
  padding:0;
  border:none;
  background:none;
  cursor:zoom-in;
  border-radius:6px;
  transition:opacity .2s var(--ease);
}
.mockup__trigger:hover{opacity:.9;}
.mockup__trigger:focus-visible{outline:2px solid var(--blue-bright); outline-offset:3px;}

.lightbox{
  position:fixed; inset:0;
  background:#050609ee;
  display:flex; align-items:center; justify-content:center;
  padding:40px;
  opacity:0;
  visibility:hidden;
  transition:opacity .25s var(--ease);
  z-index:100;
}
.lightbox.is-active{opacity:1; visibility:visible;}
.lightbox__img{
  max-width:min(1100px, 92vw);
  max-height:88vh;
  width:auto; height:auto;
  border-radius:10px;
  border:1px solid var(--border);
  box-shadow:0 40px 100px -20px #000c;
}
.lightbox__close{
  position:absolute; top:24px; right:28px;
  width:40px; height:40px;
  border-radius:50%;
  border:1px solid var(--border);
  background:var(--panel);
  color:var(--text);
  display:flex; align-items:center; justify-content:center;
  cursor:pointer;
  transition:border-color .2s var(--ease), color .2s var(--ease);
}
.lightbox__close svg{width:18px; height:18px;}
.lightbox__close:hover{border-color:var(--blue-bright); color:var(--blue-bright);}

.section{padding:92px 0;}
.section--tight{padding:52px 0;}
.section__head{text-align:center; max-width:640px; margin:0 auto 54px;}
.section__kicker{color:var(--blue-bright); font-family:'JetBrains Mono',monospace; font-size:12.5px; letter-spacing:.08em; text-transform:uppercase; margin-bottom:10px; display:block;}
.section__head h2{font-size:clamp(28px,4vw,40px);}
.section__head p{color:var(--text-dim); margin-top:14px; font-size:16px;}

.grid{display:grid; gap:20px;}
.grid--3{grid-template-columns:repeat(3,1fr);}
.grid--2{grid-template-columns:repeat(2,1fr);}
@media (max-width:900px){ .grid--3, .grid--2{grid-template-columns:1fr;} }

.reveal{opacity:0; transform:translateY(20px); transition:opacity .7s var(--ease), transform .7s var(--ease);}
.reveal.is-visible{opacity:1; transform:translateY(0);}

.cta-band{
  border:1px solid var(--border);
  border-radius:var(--radius);
  background:linear-gradient(160deg, #101a34, #0a0d13);
  padding:52px 40px;
  text-align:center;
  position:relative;
  overflow:hidden;
}
.cta-band::before{
  content:'';
  position:absolute; inset:0;
  background:radial-gradient(60% 100% at 50% 0%, var(--blue-glow), transparent 70%);
  opacity:.5;
}
.cta-band__inner{position:relative;}
.cta-band h2{font-size:clamp(24px,3.4vw,32px);}
.cta-band p{color:var(--text-dim); margin-top:12px; font-size:15.5px;}
.cta-band .hero__ctas{margin-top:28px; opacity:1; animation:none;}

footer{border-top:1px solid var(--border-soft); padding:46px 0 36px; margin-top:40px;}
.footer__inner{display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:16px;}
.footer__links{display:flex; gap:22px; font-size:13.5px; color:var(--text-dim);}
.footer__links a{transition:color .2s var(--ease);}
.footer__links a:hover{color:var(--text);}
.footer__note{color:var(--text-faint); font-size:12.5px;}

.dl-hero{padding:68px 0 12px;}
.dl-hero h1{font-size:clamp(32px,5vw,46px); opacity:0; animation:rise .7s var(--ease) .08s forwards;}
.dl-hero p{color:var(--text-dim); margin-top:12px; font-size:16px; max-width:560px; opacity:0; animation:rise .7s var(--ease) .16s forwards;}
.dl-hero .eyebrow{opacity:0; animation:rise .6s var(--ease) forwards;}

.platform-card{
  border:1px solid var(--border); border-radius:var(--radius);
  padding:24px; background:var(--panel);
  transition:border-color .25s var(--ease), transform .25s var(--ease);
}
.platform-card:hover{transform:translateY(-3px);}
.platform-card__head{display:flex; align-items:center; gap:10px; margin-bottom:16px;}
.platform-card__head h3{font-size:16px; display:flex; align-items:center; gap:10px;}
.platform-card__head svg{width:20px; height:20px; flex:none;}
.platform-card--primary{
  background:linear-gradient(160deg,#132349,#080b14);
  border-color:var(--blue-deep);
  box-shadow:0 24px 60px -30px var(--blue-glow);
}
.dl-btns{display:grid; grid-template-columns:1fr 1fr; gap:10px;}
.dl-btns--single{grid-template-columns:1fr;}

.notice{
  border:1px solid #4a3213; background:#1c1409; color:#f0b869;
  border-radius:10px; padding:13px 16px; font-size:13.5px;
  display:flex; align-items:flex-start; gap:10px; margin:22px 0;
}
.notice svg{width:18px; height:18px; flex:none; margin-top:1px;}

.tag{
  font-family:'JetBrains Mono',monospace; font-size:11px;
  color:var(--text-faint); border:1px solid var(--border);
  padding:3px 8px; border-radius:6px;
}

.platform-badges{display:flex; gap:10px; flex-wrap:wrap; margin-bottom:18px;}
.platform-badge{
  display:inline-flex; align-items:center; gap:7px;
  padding:7px 12px;
  border:1px solid var(--border);
  border-radius:999px;
  font-size:12.5px;
  color:var(--text-dim);
  background:var(--panel-2);
}
.platform-badge svg{width:15px; height:15px; flex:none;}

.compat-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:14px;}
@media (max-width:640px){ .compat-grid{grid-template-columns:1fr;} }
.compat-card{
  border:1px solid var(--border);
  border-radius:12px;
  padding:18px;
  background:var(--panel);
  display:flex; align-items:center; gap:12px;
}
.compat-card__status{
  width:34px; height:34px; flex:none;
  border-radius:9px;
  display:flex; align-items:center; justify-content:center;
}
.compat-card__status svg{width:17px; height:17px;}
.compat-card--ok .compat-card__status{background:#2f5fe029; color:var(--blue-bright);}
.compat-card--unknown .compat-card__status{background:#ffffff10; color:var(--text-faint);}
.compat-card__name{font-weight:600; font-size:14.5px;}
.compat-card__note{color:var(--text-faint); font-size:12.5px; margin-top:2px;}

.faq{display:flex; flex-direction:column; gap:10px; max-width:720px; margin:0 auto;}
.faq__item{
  border:1px solid var(--border);
  border-radius:12px;
  background:var(--panel);
  overflow:hidden;
}
.faq__item summary{
  list-style:none;
  cursor:pointer;
  padding:18px 20px;
  display:flex; align-items:center; justify-content:space-between;
  gap:16px;
  font-weight:600;
  font-size:15px;
}
.faq__item summary::-webkit-details-marker{display:none;}
.faq__item summary::after{
  content:'+';
  font-family:'Space Grotesk',sans-serif;
  font-size:20px;
  color:var(--blue-bright);
  transition:transform .25s var(--ease);
  flex:none;
}
.faq__item[open] summary::after{transform:rotate(45deg);}
.faq__item p{
  padding:0 20px 20px;
  color:var(--text-dim);
  font-size:14.5px;
}

.request-card{
  border:1px solid var(--border-soft);
  border-radius:var(--radius);
  background:var(--panel);
  padding:26px 28px;
  display:flex; align-items:center; justify-content:space-between;
  gap:20px;
  flex-wrap:wrap;
}
.request-card__text h3{font-size:16px; margin-bottom:6px;}
.request-card__text p{color:var(--text-dim); font-size:14px;}

.last-patched{
  display:inline-flex; align-items:center; gap:7px;
  font-family:'JetBrains Mono',monospace;
  font-size:12.5px;
  color:var(--text-faint);
}
.last-patched svg{width:13px; height:13px;}

.minibar{
  position:fixed; left:0; right:0; bottom:0; z-index:60;
  display:flex; align-items:center; justify-content:center;
  padding:14px 20px;
  background:#0a0d13ee;
  backdrop-filter:blur(14px);
  border-top:1px solid var(--border-soft);
  transform:translateY(120%);
  transition:transform .35s var(--ease);
}
.minibar.is-visible{transform:translateY(0);}
.minibar__inner{
  display:flex; align-items:center; justify-content:space-between; gap:20px;
  width:100%; max-width:var(--maxw);
}
.minibar__text{font-size:13.5px; color:var(--text-dim); display:flex; align-items:center; gap:9px;}
.minibar__text b{color:var(--text);}
.minibar__actions{display:flex; align-items:center; gap:10px;}
.minibar__dismiss{
  width:30px; height:30px; border-radius:50%;
  border:1px solid var(--border); background:var(--panel);
  color:var(--text-faint); display:flex; align-items:center; justify-content:center;
  cursor:pointer;
}
.minibar__dismiss svg{width:14px; height:14px;}
.minibar__dismiss:hover{color:var(--text);}
@media (max-width:560px){
  .minibar__text span{display:none;}
}

.timeline{max-width:680px; margin:0 auto; display:flex; flex-direction:column;}
.timeline__entry{
  position:relative;
  padding:0 0 40px 32px;
  border-left:1px solid var(--border);
}
.timeline__entry:last-child{border-color:transparent; padding-bottom:0;}
.timeline__dot{
  position:absolute; left:-6.5px; top:2px;
  width:12px; height:12px; border-radius:50%;
  background:var(--bg); border:2px solid var(--blue-bright);
}
.timeline__entry:first-child .timeline__dot{box-shadow:0 0 10px var(--blue-glow);}
.timeline__date{font-family:'JetBrains Mono',monospace; font-size:12.5px; color:var(--blue-bright); margin-bottom:6px;}
.timeline__title{font-size:17px; font-weight:600; margin-bottom:6px;}
.timeline__body{color:var(--text-dim); font-size:14.5px;}

.lookup{max-width:520px; margin:0 auto;}
.lookup__row{display:flex; gap:10px;}
.lookup__input{
  flex:1;
  padding:13px 16px;
  border-radius:12px;
  border:1px solid var(--border);
  background:var(--panel);
  color:var(--text);
  font-family:'JetBrains Mono',monospace;
  font-size:14px;
}
.lookup__input:focus-visible{outline:2px solid var(--blue-bright); outline-offset:2px;}
.lookup__status{
  margin-top:16px; text-align:center;
  color:var(--text-faint); font-size:13.5px;
}
.badge-grid{
  display:grid; grid-template-columns:repeat(auto-fill, minmax(96px,1fr));
  gap:16px; margin-top:28px;
}
.badge-item{
  display:flex; flex-direction:column; align-items:center; gap:8px;
  text-align:center;
}
.badge-item__icon{
  width:56px; height:56px; border-radius:14px;
  border:1px solid var(--border);
  background:var(--panel);
  display:flex; align-items:center; justify-content:center;
  overflow:hidden;
}
.badge-item__icon img{width:100%; height:100%; object-fit:cover;}
.badge-item__name{font-size:12px; color:var(--text-dim);}

.error-stage{
  min-height:70vh;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center;
  padding:60px 28px;
}
.error-stage svg{width:120px; height:auto; margin-bottom:32px;}
.error-stage h1{font-size:clamp(30px,4.5vw,44px);}
.error-stage p{color:var(--text-dim); margin-top:14px; font-size:16px; max-width:460px;}
.error-stage .btn{margin-top:30px;}

.lightbox__toolbar{
  position:absolute; bottom:24px; left:50%; transform:translateX(-50%);
  display:flex; gap:8px;
  background:var(--panel); border:1px solid var(--border); border-radius:999px;
  padding:6px;
}
.lightbox__zoom{
  width:34px; height:34px; border-radius:50%;
  border:none; background:transparent; color:var(--text-dim);
  display:flex; align-items:center; justify-content:center;
  cursor:pointer;
}
.lightbox__zoom svg{width:16px; height:16px;}
.lightbox__zoom:hover{color:var(--blue-bright);}
.lightbox__img{cursor:zoom-in; transition:transform .2s var(--ease);}
.lightbox__img.is-zoomed{cursor:grab;}
.lightbox__img.is-dragging{cursor:grabbing; transition:none;}