/* X89 Labs unified site styles */
:root{
  --bg:#0c0c0c;
  --text:#f4f4f4;
  --muted:#bdbdbd;
  --accent:#8a63f6;
  --accent-2:#56ccf2;
  --card:#141414;
  --border:#222;
  --radius:14px;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji","Segoe UI Emoji";
  background:
    radial-gradient(1000px 600px at 50% -10%, rgba(138,99,246,0.15), transparent 60%),
    radial-gradient(800px 500px at 80% 10%, rgba(86,204,242,0.10), transparent 60%),
    var(--bg);
  color:var(--text);
  line-height:1.55;
}

.container{max-width:1080px;margin:0 auto;padding:0 1rem}

.hero{padding:4rem 1rem 2rem;text-align:center}
.hero h1{margin:0;font-size:clamp(2.2rem,3.8vw,3.2rem);letter-spacing:.3px}
.hero p{color:var(--muted);max-width:780px;margin:.5rem auto 0;font-size:1.05rem}

.cta{margin-top:1.4rem;display:flex;gap:.75rem;justify-content:center;flex-wrap:wrap}
.btn{
  color:#fff;text-decoration:none;
  background:linear-gradient(135deg,var(--accent),#5b3dd9);
  padding:.7rem 1rem;border-radius:12px;border:1px solid rgba(255,255,255,.08)
}
.btn:hover{filter:brightness(1.05)}
.btn:focus-visible{outline:2px solid var(--accent-2);outline-offset:2px}
.btn.alt{background:transparent;border:1px solid var(--accent-2);color:var(--accent-2)}

.grid{display:grid;gap:1.1rem;margin:2rem 0}
@media(min-width:880px){.grid{grid-template-columns:1fr 1fr}}

.card{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:1.2rem
}
.card h2{margin:.1rem 0 .4rem;font-size:1.25rem}
.card p{color:var(--muted);margin:.2rem 0 .6rem}

.kicker{color:var(--accent-2);font-weight:600;letter-spacing:.4px;text-transform:uppercase;font-size:.8rem}
.list{margin:.4rem 0 .6rem 1.2rem;padding:0}
.list li{margin:.25rem 0}

nav.top{display:flex;justify-content:center;gap:.9rem;padding:1rem}
nav.top a{color:var(--accent-2);text-decoration:none;border:1px solid var(--accent-2);padding:.45rem .8rem;border-radius:10px}
nav.top a:hover{text-decoration:underline}

footer{color:var(--muted);text-align:center;padding:2rem 1rem 3rem;font-size:.95rem}
a.link{color:var(--accent-2);text-decoration:none}
a.link:hover{text-decoration:underline}

code{background:#101010;border:1px solid #1f1f1f;padding:.15rem .35rem;border-radius:6px}
/* --- JA additions for visuals --- */
.hero-media {
  display:flex; align-items:center; justify-content:center; gap:1.25rem;
  margin-top:1.25rem; flex-wrap:wrap;
}
.hero-media img.appmark { width:84px; height:auto; filter:drop-shadow(0 0 22px rgba(86,204,242,.35)); }

.apps-grid { display:grid; gap:1.1rem; margin:2rem 0; }
@media(min-width:880px){ .apps-grid{ grid-template-columns: 1fr 1fr; } }

.app-card { display:flex; gap:1rem; align-items:center; }
.app-card img { width:68px; height:68px; border-radius:14px; background:#0f0f10; border:1px solid var(--border); }

.screenshot-grid { display:grid; gap:1rem; margin:1.25rem 0 0; }
@media(min-width:880px){ .screenshot-grid{ grid-template-columns: 1fr 1fr; } }
.screenshot-grid img { width:100%; height:auto; border-radius:18px; border:1px solid var(--border); background:#0e0e0e; }

.hero-tight { padding-top:3rem; padding-bottom:1.5rem; }
.subtle { color:var(--muted); font-size:.95rem; }

.eyebrow { color:var(--accent-2); text-transform:uppercase; letter-spacing:.4px; font-weight:600; font-size:.8rem; }

.footer-nav { display:inline-flex; gap:.75rem; align-items:center; }
.footer-nav a{ color:var(--accent-2); text-decoration:none; }
.footer-nav a:hover{text-decoration:underline;}

.watermark {
  position:relative; overflow:hidden;
}
.watermark::after{
  content:""; position:absolute; inset: -10% -10% auto auto; width:260px; height:260px;
  background: url("/assets/img/AppMark.png") no-repeat center/contain;
  opacity:.07; filter:blur(0.3px);
  pointer-events:none;
}