/* German Method: Design-Tokens (Stand d00c8d7). Quelle: tokens.json */
:root, [data-theme="light"] {
  --background: #f8f1eb;
  --foreground: #150958;
  --card: #ffffff;
  --card-foreground: #150958;
  --popover: #ffffff;
  --popover-foreground: #150958;
  --primary: #150958;
  --primary-foreground: #f8f1eb;
  --secondary: #f8f1eb;
  --secondary-foreground: #150958;
  --muted: #f8f1eb;
  --muted-foreground: #63388c;
  --accent: #b99f6f;
  --accent-foreground: #150958;
  --destructive: #da1d52;
  --destructive-foreground: #ffffff;
  --border: rgba(21, 9, 88, 0.1);
  --input: rgba(21, 9, 88, 0.1);
  --ring: #b99f6f;
  --gm-cover-blue: #150958;
  --gm-page-white: #f8f1eb;
  --gm-black-ink: #000000;
  --gm-echo-purple: #63388c;
  --gm-heavy-blue: #00529c;
  --gm-tajweed-teal: #00aaad;
  --gm-ghunnah-green: #00a77e;
  --gm-madd-red: #da1d52;
  --gm-sukun-gold: #b99f6f;
  --gm-navy-hover: #1d0f78;
  --gm-gold-light: #e9d9b3;
  --gm-gold-deep: #7a6230;
  --gm-night: #0d0538;
  --gm-sky: #c9d9fb;
  --ink: rgba(21, 9, 88, 0.85);
  --ink-body: rgba(21, 9, 88, 0.7);
  --ink-muted: rgba(21, 9, 88, 0.6);
  --on-dark: #ffffff;
  --on-dark-muted: rgba(255, 255, 255, 0.65);
  --line-on-dark: rgba(255, 255, 255, 0.12);
  --shadow-pill: 0 8px 24px -16px rgba(21, 9, 88, 0.5);
  --shadow-button: 0 10px 30px -12px rgba(21, 9, 88, 0.65);
  --shadow-button-hover: 0 18px 40px -14px rgba(21, 9, 88, 0.7);
  --shadow-button-secondary: 0 10px 30px -16px rgba(21, 9, 88, 0.4);
  --shadow-nav: 0 14px 44px -24px rgba(21, 9, 88, 0.55);
  --shadow-badge: 0 16px 40px -20px rgba(21, 9, 88, 0.55);
  --shadow-usp: 0 18px 50px -32px rgba(21, 9, 88, 0.6);
  --shadow-card: 0 26px 60px -42px rgba(21, 9, 88, 0.6);
  --shadow-tile: 0 30px 70px -46px rgba(21, 9, 88, 0.65);
  --shadow-phone-panel: 0 36px 80px -48px rgba(21, 9, 88, 0.6);
  --shadow-panel: 0 40px 90px -50px rgba(21, 9, 88, 0.85);
  --shadow-gold-disc: inset 0 1px 1px rgba(255, 255, 255, 0.9), 0 6px 14px -8px rgba(185, 159, 111, 0.9);
  --shadow-glass-inset: inset 0 1px 0 rgba(255, 255, 255, 0.18);
  --focus-ring: 0 0 0 2px #ffffff, 0 0 0 4px #150958;
}
:root {
  --space-1: 4px;
  --space-2: 8px;
  --space-2\.5: 10px;
  --space-3: 12px;
  --space-3\.5: 14px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 28px;
  --space-8: 32px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-28: 112px;
  --radius: 0.75rem;
  --radius-2xl: 16px;
  --radius-22: 22px;
  --radius-3xl: 24px;
  --radius-26: 26px;
  --radius-28: 28px;
  --radius-30: 30px;
  --radius-32: 32px;
  --radius-36: 36px;
  --radius-full: 9999px;
  --gradient-hero: linear-gradient(180deg, #c3d2f5 0%, #d9e3fb 34%, #ecf1fd 68%, #ffffff 100%);
  --gradient-method: linear-gradient(180deg, #f6f8ff 0%, #ffffff 22%, #ffffff 78%, #f4f7ff 100%);
  --gradient-stats: linear-gradient(180deg, #eef3fd 0%, #dfe8fb 45%, #d6e1fa 100%);
  --gradient-testimonials: linear-gradient(180deg, #d6e1fa 0%, #dfe8fb 40%, #c9d8f7 100%);
  --gradient-cta: linear-gradient(180deg, #c9d8f7 0%, #b8cbf4 45%, #aec3f2 100%);
  --gradient-footer: linear-gradient(180deg, #aec3f2 0%, #150958 28%, #0d0538 100%);
  --gradient-login: linear-gradient(180deg, #eef3fd 0%, #e6edfc 35%, #dfe8fb 70%, #d6e1fa 100%);
  --gradient-title: linear-gradient(100deg, #150958 0%, #3b2a8f 45%, #63388c 100%);
  --gradient-title-short: linear-gradient(100deg, #150958 0%, #63388c 100%);
  --gradient-dark-panel: linear-gradient(150deg, #150958 0%, #241268 42%, #3b1f7d 78%, #63388c 100%);
  --gradient-phone-panel: linear-gradient(172deg, #aec4f5 0%, #c5d5f9 38%, #e2e9fd 72%, #f4f7ff 100%);
  --gradient-founder: linear-gradient(160deg, #e9eefd 0%, #dbe5fb 45%, #c9d8f8 100%);
  --gradient-glass: linear-gradient(160deg, rgba(255, 255, 255, 0.8) 0%, rgba(255, 255, 255, 0.45) 100%);
  --gradient-gold-disc: linear-gradient(145deg, #f6ecd6, #e2cfa4);
  --gradient-avatar: linear-gradient(145deg, #1f1570, #3b2a9a);
  --gradient-app-base: linear-gradient(135deg, #e8e4f0 0%, #f5f3f8 50%, #e0e8f5 100%);
  --glow-purple: radial-gradient(closest-side, rgba(99, 56, 140, 0.16), rgba(99, 56, 140, 0.06) 55%, transparent);
  --glow-blue: radial-gradient(closest-side, rgba(0, 82, 156, 0.15), rgba(0, 82, 156, 0.05) 55%, transparent);
  --glow-white: radial-gradient(closest-side, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.17) 55%, transparent);
  --container-hero: 80rem;
  --container-section: 72rem;
  --container-narrow: 64rem;
  --container-nav: 56rem;
  --measure-lead: 34rem;
  --font-sans: "DM Sans", system-ui, sans-serif;
  --font-quran: UthmanicHafs, "Amiri Quran", "Noto Naskh Arabic", serif;
}
.hero-title { font-family: var(--font-sans); font-size: 4rem; line-height: 1.05; font-weight: 500; letter-spacing: -0.04em; }
.section-title-lg { font-family: var(--font-sans); font-size: 3.35rem; line-height: 1.08; font-weight: 500; letter-spacing: -0.035em; }
.section-title { font-family: var(--font-sans); font-size: 2.9rem; line-height: 1.12; font-weight: 500; letter-spacing: -0.03em; }
.feature-title { font-family: var(--font-sans); font-size: 2.6rem; line-height: 1.12; font-weight: 500; letter-spacing: -0.03em; }
.stat-value { font-family: var(--font-sans); font-size: 3rem; line-height: 1; font-weight: 500; letter-spacing: -0.045em; }
.claim { font-family: var(--font-sans); font-size: 1.9rem; line-height: 1.3; font-weight: 500; letter-spacing: -0.025em; }
.lead { font-family: var(--font-sans); font-size: 1.3rem; line-height: 1.5; font-weight: 400; letter-spacing: -0.01em; }
.body-lg { font-family: var(--font-sans); font-size: 17px; line-height: 1.625; font-weight: 400; }
.body { font-family: var(--font-sans); font-size: 16px; line-height: 1.625; font-weight: 400; }
.body-sm { font-family: var(--font-sans); font-size: 15px; line-height: 1.625; font-weight: 400; }
.card-title { font-family: var(--font-sans); font-size: 17px; line-height: 1.5; font-weight: 600; letter-spacing: -0.01em; }
.caption { font-family: var(--font-sans); font-size: 13px; line-height: 1.375; font-weight: 400; }
.eyebrow { font-family: var(--font-sans); font-size: 12px; line-height: 1.5; font-weight: 600; letter-spacing: 0.14em; }
.list-title { font-family: var(--font-sans); font-size: 13px; line-height: 1.5; font-weight: 600; letter-spacing: 0.1em; }
.button { font-family: var(--font-sans); font-size: 15px; line-height: 1.5; font-weight: 500; }
.nav { font-family: var(--font-sans); font-size: 14px; line-height: 1.5; font-weight: 500; }
.pill { font-family: var(--font-sans); font-size: 13px; line-height: 1.5; font-weight: 500; letter-spacing: -0.01em; }
.badge-overline { font-family: var(--font-sans); font-size: 10px; line-height: 1; font-weight: 400; letter-spacing: 0.14em; }
.badge-title { font-family: var(--font-sans); font-size: 19px; line-height: 1; font-weight: 500; letter-spacing: -0.02em; }
.quran-verse { font-family: var(--font-quran); font-size: 25px; line-height: 1.75; font-weight: 400; }
.quran-basmala { font-family: var(--font-quran); font-size: 22px; line-height: 1.5; font-weight: 400; }
.quran-sign { font-family: var(--font-quran); font-size: 30px; line-height: 1; font-weight: 400; }
@font-face { font-family: "UthmanicHafs"; src: url("../fonts/UthmanicHafs.ttf"); font-weight: 400; font-style: normal; font-display: swap; }