:root{
  --bg-deep:#080808;
  --bg-card:#0f0f0f;
  --bg-panel:#0a0a0a;
  --bg-btn:#141414;
  --bg-hover:#1e1e1e;
  --border:#1e1e1e;
  --white:#f5f5f5;
  --fg-mid:#8a8a8a;
  --muted:#5a5a5a;
  --muted2:#2a2a2a;
  --red:#aa2020;
  --font-display:'Bebas Neue', sans-serif;
  --font-mono:'IBM Plex Mono', monospace;
  --ann-h:40px;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;border-radius:0;}
html{scroll-behavior:smooth;}
body{
  background:var(--bg-deep);
  color:var(--white);
  font-family:var(--font-mono);
  font-size:14px;
  line-height:1.75;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
::selection{background:var(--white);color:var(--bg-deep);}
::-webkit-scrollbar{width:4px;height:4px;}
::-webkit-scrollbar-track{background:var(--bg-deep);}
::-webkit-scrollbar-thumb{background:var(--muted2);}
a{color:inherit;text-decoration:none;}
button{font-family:var(--font-mono);cursor:pointer;}
:focus-visible{outline:1px solid var(--white);outline-offset:3px;}
img,canvas,svg{display:block;max-width:100%;}
code{background:var(--bg-btn);border:1px solid var(--border);padding:1px 6px;font-size:12px;color:var(--fg-mid);white-space:nowrap;}

.wrap{max-width:1100px;margin:0 auto;padding:0 32px;}
.narrow{max-width:680px;}

h1{
  font-family:var(--font-display);font-weight:400;
  font-size:clamp(56px,9vw,124px);
  line-height:.92;letter-spacing:.01em;
}
h2{
  font-family:var(--font-display);font-weight:400;
  font-size:clamp(34px,4.4vw,56px);line-height:1;letter-spacing:.01em;
}
h3{
  font-family:var(--font-display);font-weight:400;
  font-size:clamp(24px,2.6vw,32px);line-height:1.02;letter-spacing:.02em;
}
section.band{padding:96px 0;}
section.center{text-align:center;}

/* announcement bar */
.announce{
  position:fixed;top:0;left:0;right:0;z-index:120;
  height:var(--ann-h);display:flex;align-items:center;justify-content:center;
  gap:14px;padding:0 16px;background:var(--white);color:var(--bg-deep);
  font-size:11px;letter-spacing:.12em;text-transform:uppercase;
}
.announce .ann-dot{width:7px;height:7px;background:var(--red);flex:none;}
.announce .ann-text{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.announce .ann-text b{font-weight:500;}
.announce .ann-dl{
  flex:none;border:1px solid var(--bg-deep);padding:5px 12px;
  color:var(--bg-deep);font-weight:500;transition:background .18s,color .18s;
}
.announce .ann-dl:hover{background:var(--bg-deep);color:var(--white);}
.announce .ann-x{
  flex:none;background:none;border:none;color:var(--bg-deep);
  font-size:13px;line-height:1;padding:4px;opacity:.6;transition:opacity .18s;
}
.announce .ann-x:hover{opacity:1;}
html.ann-hidden{--ann-h:0px;}
html.ann-hidden .announce{display:none;}

/* nav */
nav{
  position:fixed;top:var(--ann-h);left:0;right:0;z-index:100;
  background:rgba(8,8,8,.72);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  border-bottom:1px solid var(--border);
}
.nav-inner{
  max-width:1100px;margin:0 auto;padding:0 32px;
  height:58px;display:flex;align-items:center;justify-content:space-between;
}
.logo{display:flex;align-items:center;gap:10px;font-family:var(--font-display);font-size:21px;letter-spacing:.06em;line-height:1;}
.logo-img{width:22px;height:22px;transition:transform .35s cubic-bezier(.215,.61,.355,1);}
.logo:hover .logo-img{transform:scale(1.12);}
.nav-links{display:flex;gap:28px;align-items:center;font-size:11px;letter-spacing:.16em;}
.nav-links a{color:var(--muted);transition:color .18s;text-transform:uppercase;}
.nav-links a:hover{color:var(--white);}
.nav-links a.dl{
  display:inline-flex;align-items:center;gap:8px;
  background:var(--white);color:var(--bg-deep);padding:9px 18px;
  transition:background .18s,color .18s;
}
.nav-links a.dl svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;}
.nav-links a.dl:hover{background:transparent;color:var(--white);outline:1px solid var(--white);}

/* hero */
.hero{
  text-align:center;display:flex;flex-direction:column;align-items:center;
  padding:160px 24px 0;overflow:hidden;
}
.hero-mark{width:56px;height:56px;margin-bottom:30px;opacity:.95;}
.hero-sub{
  max-width:620px;margin:28px auto 0;color:var(--fg-mid);
  font-size:16px;line-height:1.7;
}
.btn{
  display:inline-flex;align-items:center;gap:11px;
  font-family:var(--font-mono);font-size:13px;letter-spacing:.04em;
  padding:15px 26px;border:1px solid transparent;
  transition:background .18s,color .18s,outline-color .18s;
}
.btn svg{width:17px;height:17px;stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;}
.btn-solid{background:var(--white);color:var(--bg-deep);}
.btn-solid:hover{background:transparent;color:var(--white);outline:1px solid var(--white);}
.hero-cta{margin-top:40px;font-size:14px;padding:16px 30px;}
.hero-badge{margin-top:18px;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);}
.hero-badge .badge{
  border:1px solid var(--muted2);color:var(--fg-mid);
  padding:3px 8px;margin-right:8px;letter-spacing:.16em;
}
.dl-mark{width:40px;height:40px;margin:0 auto 24px;stroke:var(--white);fill:none;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;}
.love-mark{width:38px;height:38px;margin:0 auto 24px;stroke:var(--white);fill:none;stroke-width:1.5;stroke-linejoin:round;}

/* screenshots */
.shot{
  border:1px solid var(--border);background:var(--bg-card);
  box-shadow:0 30px 90px -40px rgba(0,0,0,.9);
  overflow:hidden;line-height:0;
}
.shot img{width:100%;height:auto;}
.hero-shot{max-width:880px;margin:70px auto -90px;width:calc(100% - 48px);}
.wide-shot{max-width:880px;margin:0 auto;width:calc(100% - 64px);}

/* two-column text bands */
.two-col{display:grid;grid-template-columns:1fr 1fr;gap:72px;align-items:start;}
.col h2{margin-bottom:24px;}
.col h3{margin:40px 0 14px;}
.col h3:first-child{margin-top:0;}
.col p{color:var(--fg-mid);margin-bottom:18px;font-size:15px;}
.col p:last-child{margin-bottom:0;}
.feat-col{gap:72px;}

/* tray section */
.tray-col{grid-template-columns:.8fr 1.2fr;gap:56px;align-items:center;}
.tray-shot{justify-self:start;width:auto;display:inline-block;}
.tray-shot img{width:300px;image-rendering:auto;}

/* centered bands */
.center .lead{max-width:560px;margin:24px auto 0;color:var(--fg-mid);font-size:16px;}
.center h3{margin:64px 0 14px;}
.center .narrow > .reveal:last-child h3:first-child{margin-top:48px;}
.center .narrow p{color:var(--fg-mid);max-width:560px;margin:0 auto;font-size:15px;}
#download h2{margin-bottom:0;}
#download .hero-cta{margin-top:46px;}
#download .hero-badge{margin-top:24px;}
.dl-links{
  margin-top:44px;
  display:flex;gap:40px;justify-content:center;flex-wrap:wrap;font-size:12px;letter-spacing:.06em;
}
.dl-links a{color:var(--muted);border-bottom:1px solid var(--muted2);padding-bottom:2px;transition:color .18s,border-color .18s;}
.dl-links a:hover{color:var(--white);border-color:var(--white);}

/* footer */
footer{border-top:1px solid var(--border);padding:64px 0 40px;}
.foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:32px;}
.foot-brand{display:flex;align-items:center;gap:10px;font-family:var(--font-display);font-size:22px;letter-spacing:.06em;}
.foot-col h4{
  font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);
  font-weight:400;margin-bottom:14px;
}
.foot-col a{display:block;color:var(--fg-mid);font-size:13px;margin-bottom:9px;transition:color .18s;}
.foot-col a:hover{color:var(--white);}
.foot-base{
  display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;
  margin-top:48px;padding-top:24px;border-top:1px solid var(--border);
  font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);
}

/* light scroll reveal */
.reveal{opacity:0;transform:translateY(22px);transition:opacity .7s ease,transform .7s ease;}
.reveal.in{opacity:1;transform:none;}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  *,*::before,*::after{animation:none!important;transition:none!important;}
  .reveal{opacity:1;transform:none;}
}

@media (max-width:880px){
  .two-col,.tray-col{grid-template-columns:1fr;gap:48px;}
  .tray-col{gap:36px;}
  .tray-shot{justify-self:center;}
}
@media (max-width:640px){
  .wrap{padding:0 20px;}
  section.band{padding:72px 0;}
  .hero{padding:140px 20px 0;}
  .nav-links a:not(.dl){display:none;}
  .hero-shot,.wide-shot{width:calc(100% - 24px);}
  .hero-shot{margin-bottom:-60px;}
  .foot-grid{grid-template-columns:1fr 1fr;gap:28px;}
  .foot-brand{grid-column:1 / -1;}
  .tray-shot img{width:240px;}
  .announce{gap:10px;padding:0 12px;letter-spacing:.06em;}
  .announce .ann-dl{padding:5px 10px;}
}