:root { --bg:#F5F4FA; --text:#1A1726; --muted:#5F5B6E; --card:#fff; --accent:#5A22E0; --line:#DCD8EA; color-scheme: light dark; }
@media (prefers-color-scheme: dark) { :root { --bg:#0F0E16; --text:#F1EFF8; --muted:#A6A2B5; --card:#1B1A25; --accent:#A98BFF; --line:#34313F; } }
* { box-sizing: border-box; }
body { margin:0; background:var(--bg); color:var(--text); font-family:-apple-system,"SF Arabic","Segoe UI",Tahoma,sans-serif; line-height:1.8; }
main { max-width:760px; margin:0 auto; padding:32px 16px 48px; }
a { color:var(--accent); }
header.top { display:flex; align-items:center; gap:12px; margin-bottom:24px; }
header.top img { width:44px; height:44px; border-radius:11px; }
header.top a { text-decoration:none; color:var(--text); font-weight:700; }
.hero { text-align:center; padding:24px 0; }
.hero img.icon { width:120px; height:120px; border-radius:27px; box-shadow:0 10px 30px rgba(90,34,224,.35); }
.hero h1 { font-size:2rem; margin:16px 0 4px; }
.hero p { color:var(--muted); margin:0 0 20px; font-size:1.1rem; }
.btn { display:inline-block; background:var(--accent); color:#fff; padding:12px 26px; border-radius:14px; text-decoration:none; font-weight:700; }
@media (prefers-color-scheme: dark) { .btn { color:#0F0E16; } }
.shots { display:flex; gap:12px; overflow-x:auto; padding:8px 0 16px; scroll-snap-type:x mandatory; }
.shots img { width:min(260px,70vw); border-radius:22px; scroll-snap-align:center; flex:none; }
ul.features { list-style:none; padding:0; display:grid; gap:10px; }
ul.features li { background:var(--card); border:1px solid var(--line); border-radius:14px; padding:12px 16px; }
h2 { margin-top:2rem; font-size:1.2rem; }
footer { border-top:1px solid var(--line); margin-top:40px; padding-top:16px; color:var(--muted); font-size:.9rem; display:flex; flex-wrap:wrap; gap:16px; }