:root {
  --night: #0f0b1d; --night-2: #19132e; --pink: #ff3d8b; --blue: #3d7bff; --mist: #f5f3ff; --ink: #1c1730; --muted: #6e6a85; --line: #e6e2f5;
  --grad: linear-gradient(120deg, var(--pink), var(--blue));
  font-family: "IBM Plex Sans Arabic", "Noto Sans Arabic", system-ui, -apple-system, "Segoe UI", sans-serif;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--ink); background: #fff; line-height: 1.8; -webkit-tap-highlight-color: transparent; }
a { color: inherit; }
img, svg { max-width: 100%; }
.wrap { width: min(1080px, 100% - 36px); margin-inline: auto; }
h1, h2, h3 { line-height: 1.35; margin: 0; letter-spacing: -.4px; }
h2 { font-size: clamp(24px, 5vw, 36px); font-weight: 800; }
:focus-visible { outline: 3px solid #9db8ff; outline-offset: 3px; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 52px; padding: 0 24px; border-radius: 15px; border: 0; font: inherit; font-weight: 800; font-size: 16px; text-decoration: none; cursor: pointer; }
.btn svg { width: 20px; height: 20px; }
.btn-main { background: var(--grad); color: #fff; }
.btn-ghost { background: rgba(255,255,255,.1); color: #fff; border: 1px solid rgba(255,255,255,.22); }
@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; scroll-behavior: auto !important; } }