/*! Sakina — public app page (privacy policy, terms, about) */
@font-face { font-family: 'Jakarta'; font-weight: 500; font-display: swap; src: url('../fonts/PlusJakartaSans-Medium.ttf') format('truetype'); }
@font-face { font-family: 'Jakarta'; font-weight: 700; font-display: swap; src: url('../fonts/PlusJakartaSans-Bold.ttf') format('truetype'); }
@font-face { font-family: 'Jakarta'; font-weight: 800; font-display: swap; src: url('../fonts/PlusJakartaSans-ExtraBold.ttf') format('truetype'); }
:root { --text: #161a3a; --text-2: #4a4f74; --muted: #8a8fb2; --line: #e7e9f3; --bg: #f6f7fc; --surface: #fff; --accent: #5b6cf0; color-scheme: light; }
@media (prefers-color-scheme: dark) { :root { --text: #eceeff; --text-2: #b9bfe9; --muted: #7f87bd; --line: #242c62; --bg: #0a0e2a; --surface: #131943; --accent: #8e9aff; color-scheme: dark; } }
* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--text); font: 500 16px/1.65 'Jakarta', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; -webkit-font-smoothing: antialiased; }
a { color: var(--accent); text-decoration: none; }
img, svg { display: block; max-width: 100%; }
.site-head { position: absolute; top: 0; left: 0; right: 0; z-index: 5; display: flex; align-items: center; gap: 16px; max-width: 1100px; margin: 0 auto; padding: 18px 22px; }
.site-brand { display: flex; align-items: center; gap: 10px; color: #fff; font-weight: 800; font-size: 18px; }
.brand-mark { width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; overflow: hidden; background: linear-gradient(160deg, #141b4d, #3e3f92 55%, #b65e8c 85%, #f3a07e); box-shadow: inset 0 1px 0 rgba(255,255,255,.25); }
.brand-mark img { width: 82%; height: 82%; object-fit: contain; }
.site-head nav { margin-left: auto; display: flex; gap: 18px; }
.site-head nav a { color: rgba(255,255,255,.85); font-weight: 700; font-size: 14.5px; }
.site-head nav a:hover { color: #fff; }
.hero { position: relative; overflow: hidden; padding: 130px 22px 110px; text-align: center; color: #fff; background:
  radial-gradient(800px 420px at 80% -10%, rgba(124,108,240,.4), transparent 60%), linear-gradient(180deg, #070b1f 0%, #1c2558 55%, #3e2f78 100%); }
.hero .stars { position: absolute; inset: 0; opacity: .8; background-image: radial-gradient(1.4px 1.4px at 10% 30%, #fff 50%, transparent 52%), radial-gradient(1px 1px at 22% 70%, #fff 50%, transparent 52%), radial-gradient(1.4px 1.4px at 35% 18%, #fff 50%, transparent 52%), radial-gradient(1px 1px at 58% 40%, #fff 50%, transparent 52%), radial-gradient(1.5px 1.5px at 70% 22%, #fff 50%, transparent 52%), radial-gradient(1px 1px at 84% 64%, #fff 50%, transparent 52%), radial-gradient(1.2px 1.2px at 93% 14%, #fff 50%, transparent 52%), radial-gradient(1px 1px at 47% 78%, #fff 50%, transparent 52%); }
.hero > * { position: relative; }
.hero-logo { width: 130px; height: 130px; margin: 0 auto 10px; }
.hero h1 { margin: 0; font-size: 46px; font-weight: 800; letter-spacing: -.03em; }
.hero p { max-width: 560px; margin: 10px auto 26px; color: rgba(255,255,255,.82); font-size: 18px; }
.stores { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.store { display: inline-flex; align-items: center; gap: 10px; padding: 10px 18px; border-radius: 14px; background: #fff; color: #111; font-weight: 800; }
.store svg { width: 26px; height: 26px; }
.store small { display: block; font-size: 11px; font-weight: 600; color: #555; line-height: 1; }
.features { max-width: 1100px; margin: -60px auto 40px; padding: 0 22px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; position: relative; }
.feature { background: var(--surface); border: 1px solid var(--line); border-radius: 22px; padding: 22px; box-shadow: 0 10px 30px -14px rgba(22,26,58,.25); }
.feature h3 { margin: 14px 0 6px; font-size: 17px; }
.feature p { margin: 0; color: var(--text-2); font-size: 14.5px; }
.app-tile { width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center; color: #fff; background: linear-gradient(160deg, color-mix(in srgb, var(--tile) 82%, #fff), var(--tile) 55%, color-mix(in srgb, var(--tile) 82%, #000)); box-shadow: 0 8px 18px -8px var(--tile); }
.app-tile svg { width: 24px; height: 24px; }
.page { max-width: 780px; margin: 0 auto; padding: 120px 22px 40px; }
.page::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 90px; z-index: -1; background: linear-gradient(180deg, #070b1f, #1c2558); }
.prose h1 { font-size: 34px; letter-spacing: -.02em; margin: 0 0 18px; }
.prose h2 { font-size: 21px; margin: 30px 0 10px; }
.prose h3 { font-size: 17px; margin: 22px 0 8px; }
.prose p, .prose ul, .prose ol { margin: 0 0 14px; color: var(--text-2); }
.prose blockquote { margin: 0 0 14px; padding: 10px 16px; border-left: 4px solid var(--accent); background: var(--surface); border-radius: 0 12px 12px 0; }
[dir="rtl"] .prose blockquote { border-left: 0; border-right: 4px solid var(--accent); border-radius: 12px 0 0 12px; }
.updated { margin-top: 30px; color: var(--muted); font-size: 14px; }
.site-foot { max-width: 1100px; margin: 0 auto; padding: 26px 22px 40px; display: flex; gap: 16px; flex-wrap: wrap; color: var(--muted); font-size: 14px; border-top: 1px solid var(--line); }
@media (max-width: 860px) { .features { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .features { grid-template-columns: minmax(0, 1fr); } .hero h1 { font-size: 36px; } .site-head nav { gap: 12px; } .site-head nav a { font-size: 13.5px; } }