:root{
  --bg:#05070c;
  --bg2:#070a12;
  --panel:#0d111a;
  --panel-2:#0a0d15;
  --border:#1c2230;
  --steel:#9aa4b2;
  --steel-light:#d7dce3;
  --blue:#2e9eff;
  --blue-glow:#5bc0ff;
  --text:#e8eaed;
}
*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth; overflow-x:hidden;}
body{
  background:radial-gradient(ellipse 120% 60% at 50% 0%, #0a1526 0%, var(--bg) 55%);
  color:var(--text);
  font-family:'Inter',system-ui,sans-serif;
  overflow-x:hidden;
  max-width:100vw;
}
a{color:inherit;}
img{max-width:100%; display:block;}

/* ---------- Top nav ---------- */
header.topbar{
  position:sticky; top:0; z-index:60;
  display:flex; align-items:center; justify-content:space-between;
  padding:18px 5vw;
  background:rgba(5,7,12,0.85);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--border);
}
.brand{display:flex; align-items:center; gap:12px; text-decoration:none;}
.brand img{height:36px; width:auto; filter:drop-shadow(0 0 8px rgba(46,158,255,0.4));}
.brand-name{
  font-family:'Chakra Petch',sans-serif;
  font-weight:700; font-size:17px; letter-spacing:0.02em;
}
.brand-name .accent{color:var(--blue-glow);}
.brand-sub{
  display:block; font-size:9px; letter-spacing:0.35em; color:var(--steel);
  font-family:'JetBrains Mono',monospace; margin-top:1px;
}
nav.mainnav{display:flex; align-items:center; gap:34px;}
nav.mainnav a{
  font-size:13px; font-weight:600; letter-spacing:0.06em; text-transform:uppercase;
  color:var(--steel); text-decoration:none; padding-bottom:4px; border-bottom:2px solid transparent;
  transition:color 0.2s, border-color 0.2s;
}
nav.mainnav a:hover, nav.mainnav a.active{color:var(--blue-glow); border-color:var(--blue-glow);}
.btn-join{
  font-family:'Inter',sans-serif; font-weight:700; font-size:12.5px; letter-spacing:0.05em;
  padding:11px 22px; border-radius:6px; text-decoration:none; text-transform:uppercase;
  border:1px solid var(--blue); color:var(--blue-glow); background:rgba(46,158,255,0.06);
  transition:background 0.2s;
}
.btn-join:hover{background:rgba(46,158,255,0.16);}
.menu-toggle{display:none; background:none; border:1px solid var(--border); color:var(--steel-light); padding:9px 13px; border-radius:6px; font-size:20px; line-height:1;}

/* ---------- Hero ---------- */
.hero{
  display:grid; grid-template-columns:1.05fr 1fr; align-items:center; gap:40px;
  padding:80px 5vw 60px; max-width:1400px; margin:0 auto;
}
.eyebrow{
  font-family:'JetBrains Mono',monospace; font-size:11px; letter-spacing:0.3em;
  text-transform:uppercase; color:var(--steel); margin-bottom:18px;
}
.hero h1{
  font-family:'Chakra Petch',sans-serif; font-weight:700;
  font-size:clamp(2.6rem,5vw,4.2rem); line-height:1.03; letter-spacing:0.01em;
  color:var(--steel-light);
}
.hero h1 .accent{
  background:linear-gradient(90deg, var(--blue), var(--blue-glow));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.hero-wordmark{max-width:440px; width:100%; height:auto; filter:drop-shadow(0 0 20px rgba(46,158,255,0.3));}
.hero-sub{
  font-family:'Chakra Petch',sans-serif; font-weight:600; font-size:clamp(1.2rem,2vw,1.6rem);
  letter-spacing:0.3em; color:var(--steel-light); margin-top:2px;
}
.tagline{
  font-family:'JetBrains Mono',monospace; font-size:14px; letter-spacing:0.14em;
  color:var(--blue-glow); margin:18px 0 20px; text-transform:uppercase;
}
.hero p.lede{color:var(--steel); font-size:15.5px; line-height:1.7; max-width:46ch; margin-bottom:32px;}
.hero-actions{display:flex; gap:14px; flex-wrap:wrap;}
.btn{
  font-family:'Inter',sans-serif; font-weight:700; font-size:13.5px; letter-spacing:0.02em;
  padding:15px 26px; border-radius:7px; border:1px solid transparent; text-decoration:none;
  display:inline-flex; align-items:center; gap:8px; transition:all 0.2s; cursor:pointer;
}
.btn-primary{background:linear-gradient(90deg, var(--blue), var(--blue-glow)); color:#03101c; box-shadow:0 0 26px rgba(46,158,255,0.35);}
.btn-primary:hover{box-shadow:0 0 36px rgba(91,192,255,0.55); transform:translateY(-1px);}
.btn-ghost{border-color:var(--border); color:var(--steel-light); background:rgba(255,255,255,0.02);}
.btn-ghost:hover{border-color:var(--blue); color:var(--blue-glow);}

.hero-art{
  position:relative; display:flex; align-items:center; justify-content:center;
}
.hero-art img{
  width:100%; max-width:420px;
  filter:drop-shadow(0 0 50px rgba(46,158,255,0.35));
  animation:float 6s ease-in-out infinite;
}
.hero-art::after{
  content:""; position:absolute; bottom:-10%; left:50%; transform:translateX(-50%);
  width:70%; height:24px; background:radial-gradient(ellipse, rgba(46,158,255,0.45), transparent 70%);
  filter:blur(6px);
}
@keyframes float{0%,100%{transform:translateY(0);} 50%{transform:translateY(-14px);}}

/* ---------- Ecosystem ---------- */
.ecosystem{padding:20px 5vw 90px; max-width:1400px; margin:0 auto;}
.section-title{
  text-align:center; font-family:'JetBrains Mono',monospace; font-size:12px;
  letter-spacing:0.35em; text-transform:uppercase; color:var(--steel); margin-bottom:36px;
  position:relative;
}
.section-title::before, .section-title::after{
  content:""; position:absolute; top:50%; width:60px; height:1px; background:var(--border);
}
.section-title::before{left:calc(50% - 220px);}
.section-title::after{right:calc(50% - 220px);}

.app-grid{display:grid; grid-template-columns:repeat(auto-fit, minmax(260px,1fr)); gap:20px;}
.app-card{
  background:linear-gradient(180deg, var(--panel) 0%, var(--panel-2) 100%);
  border:1px solid var(--border); border-radius:10px; padding:26px;
  display:flex; flex-direction:column; position:relative; overflow:hidden;
  transition:border-color 0.25s, transform 0.25s;
}
.app-card::before{
  content:""; position:absolute; top:0; left:0; right:0; height:2px;
  background:var(--card-accent, var(--blue-glow)); opacity:0.15; transition:opacity 0.25s;
}
.app-card:hover{transform:translateY(-3px); border-color:var(--card-accent, rgba(46,158,255,0.4));}
.app-card:hover::before{opacity:1;}
.app-badge{
  width:56px; height:56px; border-radius:14px; margin-bottom:18px;
  display:flex; align-items:center; justify-content:center;
  background:radial-gradient(circle at 30% 30%, color-mix(in srgb, var(--card-accent) 35%, #12141a), #0c0e13);
  border:1px solid color-mix(in srgb, var(--card-accent) 45%, var(--border));
  font-family:'Chakra Petch',sans-serif; font-weight:700; font-size:19px; color:var(--card-accent);
  box-shadow:0 0 18px color-mix(in srgb, var(--card-accent) 35%, transparent);
}
.app-card h3{font-family:'Chakra Petch',sans-serif; font-size:17px; color:var(--steel-light); margin-bottom:6px;}
.app-card p{color:var(--steel); font-size:13.5px; line-height:1.55; flex-grow:1;}
.launch{
  margin-top:18px; display:inline-flex; align-items:center; gap:6px;
  font-size:12.5px; font-weight:700; letter-spacing:0.08em; text-transform:uppercase;
  color:var(--card-accent, var(--blue-glow)); text-decoration:none;
}
.launch:hover{opacity:0.8;}

/* ---------- Button-graphic app links ---------- */
.app-btn-grid{display:flex; flex-direction:column; gap:22px; max-width:760px; margin:0 auto;}

.app-details{border-radius:10px; overflow:hidden;}
.app-summary{
  display:block; cursor:pointer; list-style:none;
  transition:transform 0.2s, filter 0.2s;
}
.app-summary::-webkit-details-marker{display:none;}
.app-summary img{width:100%; height:auto; display:block;}
.app-summary:hover{transform:translateY(-2px) scale(1.005); filter:brightness(1.08);}
.app-panel{
  padding:16px 4px 4px;
  display:flex; flex-direction:column; gap:14px;
  animation:panel-in 0.2s ease;
}
.app-desc{color:var(--steel); font-size:14px; line-height:1.65; max-width:60ch;}
@keyframes panel-in{from{opacity:0; transform:translateY(-6px);} to{opacity:1; transform:translateY(0);}}

.store-row{display:flex; gap:10px; flex-wrap:wrap; justify-content:flex-end;}
.store-row a{display:block; flex:0 1 180px; min-width:0; transition:transform 0.2s, filter 0.2s;}
.store-row img{width:100%; height:auto; display:block;}
.store-row a:hover{transform:translateY(-2px); filter:brightness(1.1);}
.coming-soon-tag{
  display:inline-block; font-family:'JetBrains Mono',monospace;
  font-size:10.5px; letter-spacing:0.1em; text-transform:uppercase; color:var(--steel);
  border:1px dashed var(--border); padding:8px 16px; border-radius:6px;
}

/* ---------- Feature strip ---------- */
.feature-strip{
  display:grid; grid-template-columns:repeat(4,1fr); gap:20px;
  max-width:1100px; margin:0 auto 80px; padding:0 5vw;
}
.feature{text-align:center;}
.feature-icon{
  width:46px; height:46px; margin:0 auto 12px; border-radius:11px;
  background:rgba(46,158,255,0.08); border:1px solid rgba(46,158,255,0.25);
  display:flex; align-items:center; justify-content:center; color:var(--blue-glow); font-size:18px;
}
.feature h4{font-family:'Chakra Petch',sans-serif; font-size:13.5px; color:var(--steel-light); letter-spacing:0.04em; margin-bottom:4px;}
.feature p{font-size:12px; color:var(--steel);}

/* ---------- CTA banner ---------- */
.cta-banner{
  max-width:1400px; margin:0 auto 90px; padding:0 5vw;
}
.cta-banner a{
  display:block; text-align:center; padding:20px; border-radius:10px;
  border:1px solid var(--border); background:linear-gradient(90deg, rgba(46,158,255,0.06), rgba(91,192,255,0.1));
  color:var(--steel-light); text-decoration:none; font-family:'Chakra Petch',sans-serif;
  font-weight:600; font-size:15px; letter-spacing:0.08em; text-transform:uppercase;
  transition:background 0.2s;
}
.cta-banner a:hover{background:linear-gradient(90deg, rgba(46,158,255,0.14), rgba(91,192,255,0.2));}

/* ---------- Inner pages (About / Privacy) ---------- */
main.inner{max-width:900px; margin:0 auto; padding:70px 5vw 90px;}
.page-head{margin-bottom:36px;}
.page-head h1{font-family:'Chakra Petch',sans-serif; font-size:clamp(1.8rem,3vw,2.6rem); color:var(--steel-light);}
.page-head p{color:var(--steel); margin-top:12px; max-width:60ch; font-size:14.5px; line-height:1.7;}
.prose p{color:var(--steel); font-size:14.5px; line-height:1.75; margin-bottom:16px;}
.prose strong{color:var(--steel-light);}
.prose h2{font-family:'Chakra Petch',sans-serif; color:var(--steel-light); font-size:19px; margin:32px 0 12px;}

.accordion{border:1px solid var(--border); border-radius:10px; overflow:hidden; margin-bottom:12px;}
.accordion summary{
  padding:16px 20px; cursor:pointer; font-family:'Chakra Petch',sans-serif; font-weight:600;
  font-size:14.5px; color:var(--steel-light); background:var(--panel); list-style:none;
  display:flex; justify-content:space-between; align-items:center;
}
.accordion summary::-webkit-details-marker{display:none;}
.accordion summary::after{content:"+"; color:var(--blue-glow); font-size:18px;}
.accordion[open] summary::after{content:"\2212";}
.accordion-body{padding:4px 20px 20px; color:var(--steel); font-size:13.5px; line-height:1.7;}

footer.sitefoot{
  border-top:1px solid var(--border); padding:34px 5vw; text-align:center;
  color:#565a63; font-size:12px; font-family:'JetBrains Mono',monospace;
}

/* ---------- Mobile ---------- */
@media (max-width:900px){
  .hero{grid-template-columns:1fr; text-align:center;}
  .hero p.lede{margin-left:auto; margin-right:auto;}
  .hero-actions{justify-content:center;}
  .hero-art{order:-1;}
  .feature-strip{grid-template-columns:repeat(2,1fr);}
}
@media (max-width:760px){
  .store-row{justify-content:center;}
  .store-row a{flex-basis:130px;}
  .coming-soon-tag{margin:6px auto 0;}
  nav.mainnav{
    display:none; flex-direction:column; align-items:flex-start; gap:6px;
    position:absolute; top:100%; left:0; right:0; background:var(--bg2);
    border-bottom:1px solid var(--border); padding:16px 6vw 24px; z-index:55;
  }
  nav.mainnav.open{display:flex;}
  .btn-join{display:none;}
  .menu-toggle{display:block;}
  .section-title::before, .section-title::after{display:none;}
}