:root{--bg:#0b1020;--bg-2:#0f1630;--text:#e6e9f2;--muted:#a7b0c6;--brand:#7c5cff;--brand-2:#5f8cff;--card:#121936;--border:rgba(255,255,255,.08);--shadow:0 10px 30px rgba(0,0,0,.35)}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,sans-serif;background:linear-gradient(180deg,var(--bg),var(--bg-2));color:var(--text);line-height:1.6}
.container{width:min(1080px,90%);margin:0 auto}

.site-header{position:sticky;top:0;z-index:10;background:rgba(11,16,32,.7);backdrop-filter:saturate(1.5) blur(8px);border-bottom:1px solid var(--border)}
.site-header .container{display:flex;align-items:center;justify-content:space-between;padding:18px 0}
.logo{font-weight:700;color:#fff;text-decoration:none;letter-spacing:.2px}
.nav a{color:var(--muted);text-decoration:none;margin-left:18px;font-weight:600}
.nav a:hover{color:#fff}

.hero{position:relative;overflow:hidden}
.hero .container{padding:96px 0 72px}
.hero h1{font-size:clamp(36px,5vw,56px);line-height:1.1;margin:0 0 12px}
.hero p{color:var(--muted);margin:0 0 26px;max-width:720px}
.cta-group{display:flex;gap:12px;flex-wrap:wrap}
.btn{display:inline-block;padding:12px 16px;border:1px solid var(--border);border-radius:10px;color:#fff;text-decoration:none;font-weight:700;background:rgba(255,255,255,.04)}
.btn.primary{background:linear-gradient(135deg,var(--brand),var(--brand-2));border-color:transparent}
.btn:hover{filter:brightness(1.08)}
.hero-bg{position:absolute;inset:auto -10% -20% -10%;height:50vh;background:radial-gradient(60% 60% at 50% 20%,rgba(124,92,255,.25),transparent 60%),radial-gradient(40% 40% at 20% 80%,rgba(95,140,255,.18),transparent 60%)}

.grid{display:grid;grid-template-columns:repeat(12,1fr);gap:18px}
.features{padding:56px 0}
.features h2{margin:0 0 18px}
.card{grid-column:span 4;background:var(--card);border:1px solid var(--border);border-radius:14px;padding:22px;box-shadow:var(--shadow)}
.card h3{margin:0 0 6px}
.card p{margin:0;color:var(--muted)}
@media (max-width:900px){.card{grid-column:span 6}}
@media (max-width:640px){.card{grid-column:span 12}}

.apps{padding:8px 0 64px}
.apps h2{margin:0 0 16px}
.app-tile{grid-column:span 6;display:flex;gap:16px;align-items:center;padding:20px;background:linear-gradient(180deg,rgba(124,92,255,.10),rgba(124,92,255,.05));border:1px solid rgba(124,92,255,.35);border-radius:16px;text-decoration:none;color:#fff;box-shadow:0 14px 30px rgba(0,0,0,.45);transition:transform .18s ease, border-color .2s ease, box-shadow .2s ease}
.app-tile:hover{transform:translateY(-3px);border-color:rgba(124,92,255,.55);box-shadow:0 18px 40px rgba(0,0,0,.5)}
.app-icon{font-size:36px;line-height:1}
.app-meta h3{margin:0 0 4px}
.app-meta p{margin:0 0 8px;color:var(--muted)}
.link{color:#b9c6ff}
@media (max-width:900px){.app-tile{grid-column:span 12}}

.site-footer{border-top:1px solid var(--border);background:rgba(11,16,32,.6);backdrop-filter:blur(6px)}
.site-footer .container{display:flex;align-items:center;justify-content:space-between;padding:18px 0;color:var(--muted)}