*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

html{scroll-behavior:smooth;scroll-padding-top:calc(var(--nav-h) + 24px)}

body{
  background:var(--bg); color:var(--text);
  font-family:var(--font-ui);
  font-size:.96rem; line-height:1.68;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  min-height:100vh;
}

/* ambient canvas sits behind everything */
#ambient{
  position:fixed; inset:0;
  width:100%; height:100%;
  z-index:0; pointer-events:none; display:block;
}

.content-wrap{
  position:relative; z-index:1;
  max-width:var(--max-w);
  margin:0 auto;
  min-height:100vh;
  display:flex; flex-direction:column;
}

@media(min-width:769px){
  body::after{
    content:''; position:fixed; inset:0;
    background:rgba(13,12,10,.94);
    z-index:1; pointer-events:none;
  }
  .content-wrap{z-index:2; background:rgba(10,9,8,.45)}
}
@media(max-width:768px){
  .content-wrap{background:rgba(13,12,10,.96)}
}

/* typography */
h1,h2,h3,h4{color:var(--heading); font-weight:700; letter-spacing:-0.015em; line-height:1.25}
h1{font-size:2.1rem}
h2{font-size:1.45rem; margin-bottom:.8rem}
h3{font-size:1.06rem; margin-bottom:.4rem}
p{margin-bottom:.85rem}
p:last-child{margin-bottom:0}
strong{color:var(--heading); font-weight:600}
code,kbd{
  font-family:var(--font-mono); font-size:.85em;
  background:rgba(255,255,255,.05);
  border:1px solid var(--border);
  border-radius:5px; padding:.08em .35em;
}
hr{border:none; border-top:1px solid var(--border); margin:1.2rem 0}

a{color:var(--heading); text-decoration:none; transition:color .2s ease,border-color .2s ease}
a:hover{color:var(--accent)}

:focus-visible{outline:2px solid var(--accent-glow); outline-offset:2px; border-radius:4px}

@media (prefers-reduced-motion: no-preference){
  .content-wrap{animation:pagein .4s ease}
  @keyframes pagein{from{opacity:0; transform:translateY(6px)}to{opacity:1; transform:none}}
}

.accent-link{
  color:var(--text);
  border-bottom:1px dashed rgba(255,255,255,.25);
}
.accent-link:hover{color:var(--accent); border-color:var(--accent-glow)}

/* tiny uppercase tracked label - a mono accent, part of the identity */
.micro{
  font-family:var(--font-mono);
  font-size:.66rem;
  text-transform:uppercase;
  letter-spacing:.13em;
  color:var(--muted);
  font-weight:600;
}

.mono{font-family:var(--font-mono)}
.text-muted{color:var(--muted)}
.text-center{text-align:center}
.mt-1{margin-top:.5rem}.mt-2{margin-top:1rem}.mt-3{margin-top:1.5rem}.mt-4{margin-top:2rem}
.mb-1{margin-bottom:.5rem}.mb-2{margin-bottom:1rem}

/* layout */
.container{max-width:760px; width:100%; margin:0 auto; padding:0 1.8rem; flex:1 0 auto}
.section{padding:3rem 0}
.section + .section{border-top:1px solid var(--border)}
.section-lead{color:var(--muted); max-width:62ch; margin-bottom:1.4rem}

/* top bar - full-width, left brand, right links */
.topbar{
  position:fixed; top:0; left:0; right:0;
  z-index:9999;
  display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:1rem;
  height:var(--nav-h);
  padding:0 1.3rem;
  background:rgba(14,13,11,.78);
  backdrop-filter:blur(18px) saturate(1.3); -webkit-backdrop-filter:blur(18px) saturate(1.3);
  border-bottom:1px solid var(--border);
}
.brand{
  justify-self:start;
  display:inline-flex; align-items:center; gap:.5rem;
  color:var(--heading); font-weight:700; font-size:1.04rem;
  letter-spacing:-.015em;
  white-space:nowrap;
}
.brand .brand-mark{
  display:inline-flex; align-items:center; justify-content:center;
  width:30px; height:30px; border-radius:5px;
  background:var(--accent-dim); border:1px solid var(--accent-glow);
  transition:background .2s ease, transform .25s var(--e-bounce);
}
.brand svg{width:18px; height:18px; display:block; color:var(--accent)}
.brand:hover{color:var(--heading)}
.brand:hover .brand-mark{background:var(--accent); transform:rotate(-6deg)}
.brand:hover .brand-mark svg{color:var(--accent-ink)}

/* centered segmented pill group for the nav links */
.topnav{
  justify-self:center;
  display:flex; align-items:center; gap:.1rem;
  background:rgba(255,255,255,.028);
  border:1px solid var(--border);
  border-radius:999px;
  padding:.22rem;
}
.topnav a{
  position:relative;
  color:var(--muted);
  font-size:.84rem; font-weight:600;
  padding:.4rem .95rem;
  border-radius:999px;
  white-space:nowrap;
  transition:color .18s ease, background .18s ease;
  -webkit-tap-highlight-color:transparent;
}
.topnav a:hover{color:var(--heading); background:rgba(255,255,255,.05)}
.topnav a.active{color:var(--accent-ink); background:var(--accent)}

/* pricing + profile, kept outside the pill group */
.nav-right{justify-self:end; display:flex; align-items:center; gap:.6rem}
.nav-pricing{
  color:var(--muted); font-size:.84rem; font-weight:600;
  padding:.4rem .7rem; border-radius:999px; white-space:nowrap;
  transition:color .18s ease, background .18s ease;
}
.nav-pricing:hover{color:var(--heading); background:rgba(255,255,255,.05)}
.nav-pricing.active{color:var(--accent)}
.profile-btn{
  display:inline-flex; align-items:center; justify-content:center;
  width:34px; height:34px; padding:0; border-radius:50%;
  background:rgba(255,255,255,.04); border:1px solid var(--border); cursor:pointer;
  transition:border-color .2s ease, background .2s ease;
}
.profile-btn:hover{border-color:var(--accent-glow); background:var(--accent-dim)}
.avatar{
  display:inline-flex; align-items:center; justify-content:center;
  width:26px; height:26px; border-radius:50%; overflow:hidden; color:var(--muted);
}
.avatar svg{width:20px; height:20px}
.avatar img{width:100%; height:100%; object-fit:cover; display:block}

.nav-toggle{
  display:none;
  background:none; border:1px solid var(--border); border-radius:5px;
  color:var(--text); font-size:1.15rem; line-height:1;
  cursor:pointer; padding:.35rem .6rem;
}

@media(max-width:760px){
  /* mobile: brand left, pricing + profile + toggle right; links become a modal */
  /* drop the blur: backdrop-filter makes .topbar a containing block for its
     fixed child, which would trap the modal at navbar height instead of covering */
  .topbar{display:flex; align-items:center; gap:.6rem; background:rgba(14,13,11,.96); backdrop-filter:none; -webkit-backdrop-filter:none}
  .brand{margin-right:auto}
  .nav-pricing{display:none}   /* moves into the modal on mobile */
  .nav-toggle{display:block; z-index:10002; position:relative}
  /* full-screen modal: reset the desktop pill (border, radius, padding) so it
     actually covers the viewport instead of hugging its content */
  .topnav{
    position:fixed; top:0; left:0; right:0; bottom:0;
    width:100%; height:100%; z-index:10001;
    margin:0; border:0; border-radius:0; padding:1.5rem;
    flex-direction:column; align-items:center; justify-content:center;
    gap:.3rem;
    background:rgba(9,8,7,.99);
    -webkit-backdrop-filter:blur(20px); backdrop-filter:blur(20px);
    display:none;
  }
  body.nav-open{overflow:hidden}
  body.nav-open .topnav{display:flex; animation:navmodal .2s ease}
  .topnav a{
    font-size:1.5rem; font-weight:600; color:var(--text);
    padding:.7rem 2rem; border-radius:6px; background:transparent;
  }
  .topnav a.active{color:var(--accent); background:transparent}
  .topnav a:active{background:rgba(255,255,255,.06)}
  .topnav .tn-mobile{display:block}   /* pricing, shown only inside the modal */
  @keyframes navmodal{from{opacity:0}to{opacity:1}}
}
.tn-mobile{display:none}      /* hidden in the desktop pill group; the mobile modal rule (higher specificity) shows it */

/* beta banner */
.beta-banner{
  margin-top:var(--nav-h);
  border-bottom:1px solid var(--border);
  background:var(--accent-dim);
  font-size:.82rem;
  color:var(--text);
  padding:.5rem 1.8rem;
  display:flex; align-items:center; justify-content:center; gap:.8rem;
}
.beta-banner .micro{color:var(--accent)}
.beta-banner button{
  background:none; border:none; color:var(--muted);
  cursor:pointer; font-size:1rem; line-height:1; padding:.1rem .3rem;
}
.beta-banner button:hover{color:var(--heading)}
body.banner-dismissed .beta-banner{display:none}
body.banner-dismissed .hero,
body.banner-dismissed .page-header{padding-top:calc(var(--nav-h) + 2.6rem)}

/* page headers */
.hero{
  padding:2.6rem 1.8rem 2.2rem;
  text-align:center;
}
.hero h1{font-size:2.05rem; margin:.6rem 0 .4rem}
.hero .sub{color:var(--muted); max-width:54ch; margin:0 auto; font-size:1.02rem}
.hero-scene-wrap{margin:.4rem auto 0; max-width:400px}
#hero-scene{width:100%; height:250px; display:block}
.hero-caption{
  min-height:1.2em;
  font-size:.68rem;
  color:var(--muted);
  letter-spacing:.03em;
  margin-top:.3rem;
  opacity:.8;
}
.hero-cta{margin:.6rem 0 .5rem}
.page-header{
  padding:calc(var(--nav-h) + 2.6rem) 1.8rem 1.4rem;
  text-align:center;
}
.page-header.after-banner{padding-top:2rem}
.page-header h1{font-size:1.75rem; margin-bottom:.35rem}
.page-header .subtitle{color:var(--muted); font-size:.92rem}

/* buttons */
.btn{
  display:inline-flex; align-items:center; gap:.45rem;
  padding:.55rem 1.2rem;
  border-radius:5px;
  font-family:var(--font-ui);
  font-size:.87rem; font-weight:600;
  cursor:pointer;
  transition:all .2s ease;
  text-decoration:none;
  border:1px solid var(--border);
  background:rgba(255,255,255,.05);
  color:var(--text);
}
.btn:hover{background:rgba(255,255,255,.1); border-color:var(--border-hover); color:var(--heading)}
.btn-primary{
  background:var(--accent-dim);
  border-color:var(--accent-glow);
  color:var(--accent);
}
.btn-primary:hover{background:var(--accent); border-color:var(--accent); color:var(--accent-ink)}
.btn[disabled]{opacity:.45; pointer-events:none}
.btn-lg{padding:.72rem 1.55rem; font-size:.94rem}

/* cards */
.card{
  background:var(--bg-panel);
  border:1px solid var(--border);
  border-radius:var(--radius-md);
  padding:1.2rem 1.3rem;
  transition:background .2s ease,border-color .2s ease;
  display:block;
}
.card:hover{background:var(--bg-panel-hover); border-color:var(--border-hover)}
.card-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:.9rem}
.card h3{font-size:1.02rem; margin-bottom:.4rem}
.card .card-desc{color:var(--muted); font-size:.85rem; line-height:1.62}

/* pills */
.pill{
  display:inline-block;
  font-family:var(--font-mono);
  font-size:.64rem;
  text-transform:uppercase; letter-spacing:.1em;
  border:1px solid var(--border);
  color:var(--muted);
  padding:.14rem .5rem;
  border-radius:999px;
  line-height:1.5;
  vertical-align:middle;
}
.pill-live{color:var(--ok); border-color:rgba(111,207,142,.35); background:var(--ok-dim)}
.pill-planned{color:var(--accent); border-color:var(--accent-glow); background:var(--accent-dim)}

/* kv rows */
.kv-list{list-style:none; padding:0; margin:0}
.kv-row{
  display:grid; grid-template-columns:150px 1fr; gap:1rem;
  padding:.6rem 0;
  border-bottom:1px solid rgba(255,255,255,.04);
}
.kv-row:last-child{border-bottom:none}
.kv-row dt{
  font-family:var(--font-mono);
  font-size:.66rem; text-transform:uppercase; letter-spacing:.11em;
  color:var(--accent); font-weight:600; padding-top:.28rem;
  opacity:.85;
}
.kv-row dd{margin:0; font-size:.9rem; color:var(--text); line-height:1.62}
@media(max-width:540px){
  .kv-row{grid-template-columns:1fr; gap:.1rem}
}

/* status dots */
.dot{width:7px; height:7px; border-radius:50%; display:inline-block; flex-shrink:0}
.dot-ok{background:var(--ok); box-shadow:0 0 6px rgba(111,207,142,.35)}
.dot-err{background:var(--err); box-shadow:0 0 6px rgba(229,114,111,.35)}
.dot-warn{background:var(--accent); box-shadow:0 0 6px var(--accent-glow)}
.dot-muted{background:var(--muted)}

/* changelog-style roadmap list */
.changelog-list{list-style:none; padding:0}
.changelog-list li{
  position:relative; padding-left:1.2rem;
  margin-bottom:.45rem; font-size:.88rem; line-height:1.6;
}
.changelog-list li::before{
  content:''; position:absolute; left:0; top:.55em;
  width:5px; height:5px; border-radius:50%; background:var(--muted);
}
.changelog-list li.done::before{background:var(--ok)}
.changelog-list li.now::before{background:var(--accent)}
.changelog-list li.next::before{background:var(--info)}

/* footer */
.site-footer{
  margin-top:auto;
  border-top:1px solid var(--border);
  padding:1.5rem 1rem 1.9rem;
  text-align:center;
}
.footer-links{
  font-size:.8rem;
  color:var(--muted);
  display:flex; flex-wrap:wrap; justify-content:center; gap:.4rem 1.2rem;
  margin-bottom:.9rem;
}
.footer-links a{color:var(--muted)}
.footer-links a:hover{color:var(--heading)}
.footer-icons{display:inline-flex; align-items:center; gap:1.1rem}
.footer-icon{color:var(--muted); display:inline-flex; transition:color .25s ease,transform .25s ease}
.footer-icon:hover{color:var(--text); transform:scale(1.1)}
.footer-note{font-size:.72rem; color:var(--muted); margin-top:.8rem; opacity:.8}

@media(max-width:768px){
  .container{padding:0 1.2rem}
  .section{padding:2.4rem 0}
  .hero h1{font-size:1.62rem}
  .page-header h1{font-size:1.5rem}
  .card-grid{grid-template-columns:1fr}
}