/* Chadesh styles: playful but clean */
:root{
  --bg:#0b1226;
  --ink:#f6f7fb;
  --muted:#b7bfd6;
  --accent:#ff2aa2;
  --accent-2:#7d5cff;
  --btn:#ffffff;
  --card:#0f1b3d;
  --glass:rgba(13,18,45,.45);
  --shadow:0 10px 30px rgba(0,0,0,.35);
  --radius:22px;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  background:radial-gradient(1200px 700px at 70% -20%, #1b2a6d 0%, #0b1226 60%, #060a18 100%);
  color:var(--ink);
  font:16px/1.45 ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Inter,Arial;
}

.container{width:min(1100px, calc(100% - 32px)); margin:0 auto}

.site-header{
  position:sticky; top:0; z-index:10;
  backdrop-filter:saturate(140%) blur(6px);
  background:linear-gradient(180deg, rgba(6,10,24,.9), rgba(6,10,24,.4));
  border-bottom:1px solid rgba(255,255,255,.06);
  display:flex; align-items:center; justify-content:space-between;
  padding:10px 14px;
}

.brand{display:flex; align-items:center; gap:10px; font-weight:700; letter-spacing:.5px}
.logo-dot{width:12px; height:12px; border-radius:50%; background:linear-gradient(135deg,var(--accent),var(--accent-2)); box-shadow:0 0 16px var(--accent)}
.wordmark{font-size:18px}

.site-nav a{color:var(--ink); opacity:.9; text-decoration:none; margin-left:16px}
.site-nav a:hover{opacity:1}

.hero{position:relative; display:grid; place-items:center; min-height:min(82vh, 920px)}
.hero-bg{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center; filter:saturate(120%) brightness(.9);}
.hero-overlay{position:absolute; inset:0; background:radial-gradient(800px 500px at 50% 10%, transparent 0%, rgba(6,10,24,.35) 70%, rgba(6,10,24,.85) 100%)}
.hero-content{position:relative; text-align:center}
.hero h1{font-size:clamp(36px, 6vw, 68px); margin:0 0 10px}
.hero .accent{background:linear-gradient(135deg,var(--accent),var(--accent-2)); -webkit-background-clip:text; background-clip:text; color:transparent}
.hero p{max-width:700px; margin:0 auto 22px; color:var(--muted)}
.cta{display:inline-block; padding:12px 20px; border-radius:999px; background:var(--btn); color:#111; text-decoration:none; font-weight:700; box-shadow:var(--shadow)}
.cta:hover{transform:translateY(-1px)}

.app-card{
  display:grid; grid-template-columns: 1.2fr 1fr; gap:26px; align-items:center;
  background:linear-gradient(180deg, rgba(13,18,45,.6), rgba(13,18,45,.2));
  border:1px solid rgba(255,255,255,.06);
  border-radius:var(--radius); padding:20px; margin-top:-80px; box-shadow:var(--shadow)
}
.app-media{display:grid; grid-template-columns: 180px 1fr; gap:18px; align-items:center}
.app-icon{width:160px; height:160px; border-radius:28px; box-shadow:0 10px 30px rgba(0,0,0,.45)}
.app-shot{width:100%; border-radius:18px; border:1px solid rgba(255,255,255,.08); box-shadow:var(--shadow)}

.app-copy h2{margin:0 0 6px; font-size:clamp(26px,3vw,34px)}
.tagline{color:var(--muted); margin:0 0 12px}
.features{margin:0 0 18px; padding-left:16px}
.features li{margin:6px 0}
.store-buttons{display:flex; gap:10px}
.btn{display:inline-flex; align-items:center; justify-content:center; padding:10px 14px; border-radius:12px; text-decoration:none; font-weight:700; border:1px dashed rgba(255,255,255,.35)}
.btn.primary{background:linear-gradient(135deg,var(--accent),var(--accent-2)); color:white; border:none; opacity:.6; cursor:not-allowed}
.btn.ghost{color:var(--ink); opacity:.6; cursor:not-allowed}

.about,.contact{
  margin:36px 0;
  background:linear-gradient(180deg, rgba(13,18,45,.55), rgba(13,18,45,.15));
  border:1px solid rgba(255,255,255,.06);
  border-radius:var(--radius);
  padding:18px 20px;
}
.about p,.contact p{color:var(--muted)}

.site-footer{margin:26px 0 40px}
.footer-grid{display:flex; justify-content:space-between; align-items:center; gap:12px}
.muted{color:var(--muted)}

@media (max-width: 980px){
  .app-card{grid-template-columns:1fr; margin-top:20px}
  .app-media{grid-template-columns:120px 1fr}
  .app-icon{width:110px; height:110px; border-radius:22px}
}