/* zone.css — shared styles for VixitAI ecosystem zone landing pages.
   Self-contained (no Tailwind dependency), dark brand, fast & responsive. */
:root{
  --bg:#040B18; --bg2:#061226; --panel:rgba(255,255,255,.04);
  --line:rgba(255,255,255,.10); --cyan:#00C9E4; --cyan-dim:#54e5ff;
  --text:#E6EEF6; --muted:#9FB3C8;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:radial-gradient(1200px 600px at 80% -10%, #0a2030 0%, var(--bg) 60%);
  color:var(--text);
  font-family:Inter,system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  line-height:1.6; -webkit-font-smoothing:antialiased;
}
a{color:var(--cyan-dim); text-decoration:none}
a:hover{color:#fff}
.wrap{max-width:1040px; margin:0 auto; padding:0 20px}
header.topbar{
  position:sticky; top:0; z-index:10; backdrop-filter:blur(14px);
  background:rgba(4,11,24,.72); border-bottom:1px solid var(--line);
}
.topbar .wrap{display:flex; align-items:center; justify-content:space-between; height:60px}
.brand{font-weight:800; letter-spacing:.12em; color:var(--cyan); font-size:20px}
.navlinks a{margin-left:22px; color:var(--muted); font-size:14px; font-weight:500}
.navlinks a:hover{color:#fff}
@media(max-width:640px){.navlinks a{margin-left:14px; font-size:13px}}
.hero{padding:72px 0 40px}
.eyebrow{display:inline-block; font-size:12px; font-weight:700; letter-spacing:.18em;
  text-transform:uppercase; color:var(--cyan); border:1px solid rgba(0,201,228,.35);
  padding:5px 12px; border-radius:999px; margin-bottom:22px}
.eyebrow.soon{color:#ffd27a; border-color:rgba(255,210,122,.4)}
h1{font-size:clamp(32px,6vw,54px); line-height:1.08; margin:0 0 18px; font-weight:800; letter-spacing:-.01em}
h1 .grad{background:linear-gradient(90deg,var(--cyan),#7c5cff); -webkit-background-clip:text; background-clip:text; color:transparent}
.lead{font-size:clamp(16px,2.3vw,20px); color:var(--muted); max-width:680px; margin:0 0 30px}
.cta{display:inline-flex; align-items:center; gap:8px; background:var(--cyan); color:#04111b;
  font-weight:700; padding:13px 26px; border-radius:10px; transition:transform .15s, box-shadow .15s}
.cta:hover{color:#04111b; transform:translateY(-2px); box-shadow:0 8px 30px rgba(0,201,228,.35)}
.cta.ghost{background:transparent; color:var(--text); border:1px solid var(--line)}
.cta.ghost:hover{border-color:var(--cyan); color:#fff; box-shadow:none}
.cta-row{display:flex; flex-wrap:wrap; gap:14px}
section.block{padding:40px 0; border-top:1px solid var(--line)}
h2{font-size:clamp(24px,4vw,34px); margin:0 0 10px; font-weight:700}
.sub{color:var(--muted); max-width:680px; margin:0 0 28px}
.grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:18px}
.card{background:var(--panel); border:1px solid var(--line); border-radius:14px; padding:22px}
.card h3{margin:0 0 8px; font-size:18px; font-weight:700}
.card p{margin:0; color:var(--muted); font-size:15px}
.card .ic{font-size:26px; margin-bottom:12px; display:block}
ul.feat{list-style:none; padding:0; margin:0; display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:12px}
ul.feat li{padding-left:28px; position:relative; color:var(--muted)}
ul.feat li::before{content:"✓"; position:absolute; left:0; color:var(--cyan); font-weight:800}
.faq{max-width:780px}
.faq details{border:1px solid var(--line); border-radius:10px; padding:14px 18px; margin-bottom:12px; background:var(--panel)}
.faq summary{cursor:pointer; font-weight:600; color:var(--text)}
.faq p{color:var(--muted); margin:10px 0 0}
footer{border-top:1px solid var(--line); padding:34px 0; color:var(--muted); font-size:14px}
footer .wrap{display:flex; flex-wrap:wrap; gap:14px; justify-content:space-between; align-items:center}
footer a{margin-right:18px}
.zones a{display:inline-block; margin:0 14px 8px 0; color:var(--muted); font-size:14px}