:root{
  --bg:#08131c; --bg2:#0e2034; --panel:#0f1e2b; --stone:#cdc6b4;
  --water-top:#3f8fc4; --water-bot:#1e5e93; --algae:#39d98a; --algae2:#4a8c34;
  --gold:#ffd34d; --teal:#27c7a8; --txt:#eef6fb; --muted:#9fb4c4; --line:#ffffff1f;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:radial-gradient(120% 80% at 50% -10%,#103252,#08131c 60%);
  color:var(--txt); font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  line-height:1.6; -webkit-font-smoothing:antialiased;
}
a{color:var(--teal); text-decoration:none}
a:hover{text-decoration:underline}
.wrap{max-width:880px; margin:0 auto; padding:0 22px}
.nav{display:flex; align-items:center; justify-content:space-between; padding:18px 22px; max-width:1080px; margin:0 auto}
.brand{display:flex; align-items:center; gap:10px; font-weight:900; font-size:19px; letter-spacing:-.3px; color:var(--txt)}
.brand:hover{text-decoration:none}
.brand .dot{width:26px; height:26px; border-radius:8px; background:linear-gradient(180deg,var(--water-top),var(--water-bot)); display:inline-block; border:2px solid var(--stone)}
.nav a.link{color:var(--muted); font-size:15px; margin-left:18px}

/* hero */
.hero{text-align:center; padding:44px 22px 8px}
.hero h1{font-size:clamp(40px,9vw,72px); line-height:1.02; margin:8px 0 10px; font-weight:900; letter-spacing:-1px;
  background:linear-gradient(180deg,#bfefff,#39d98a); -webkit-background-clip:text; background-clip:text; color:transparent}
.hero p.tag{font-size:clamp(16px,2.6vw,20px); color:var(--muted); max-width:560px; margin:0 auto 22px}
.btn{display:inline-block; border:none; border-radius:16px; padding:15px 30px; font-size:18px; font-weight:800;
  color:#062018; background:linear-gradient(180deg,#3ce0bb,#1fae8e); box-shadow:0 6px 0 #0e7c64,0 12px 22px #0008; cursor:pointer}
.btn:hover{text-decoration:none; transform:translateY(-1px)}
.btn:active{transform:translateY(3px); box-shadow:0 3px 0 #0e7c64}
.btn.ghost{background:#ffffff14; color:var(--txt); box-shadow:0 6px 0 #ffffff10}
.soon{margin:18px 0 0; color:var(--muted); font-size:14px}
.soon b{color:var(--txt)}

.heroart{max-width:280px; margin:26px auto 0; display:block}

/* features */
.section{padding:40px 0}
.section h2{text-align:center; font-size:28px; font-weight:800; margin:0 0 24px}
.grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:16px}
.card{background:var(--panel); border:1px solid var(--line); border-radius:18px; padding:20px}
.card .ico{font-size:30px}
.card h3{margin:10px 0 6px; font-size:18px}
.card p{margin:0; color:var(--muted); font-size:15px}

/* legal / prose pages */
.page{padding:30px 0 60px}
.page h1{font-size:32px; margin:6px 0 4px}
.page .eff{color:var(--muted); font-size:14px; margin-bottom:22px}
.prose h2{font-size:20px; margin:28px 0 8px}
.prose p,.prose li{color:#dbe7f0}
.prose ul{padding-left:20px}
.prose .note{background:var(--panel); border:1px solid var(--line); border-left:3px solid var(--gold); border-radius:10px; padding:12px 16px; color:var(--muted); font-size:14px}
.faq{margin:18px 0}
.faq details{background:var(--panel); border:1px solid var(--line); border-radius:12px; padding:4px 16px; margin-bottom:10px}
.faq summary{cursor:pointer; font-weight:700; padding:12px 0; list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq summary::before{content:"＋"; color:var(--teal); margin-right:10px}
.faq details[open] summary::before{content:"－"}
.faq p{margin:0 0 12px; color:var(--muted)}

/* footer */
.footer{border-top:1px solid var(--line); margin-top:30px; padding:26px 22px; text-align:center; color:var(--muted); font-size:14px}
.footer a{color:var(--muted); margin:0 10px}
.footer .small{display:block; margin-top:10px; font-size:12px; opacity:.7}