:root{--navy:#062657;--navy-deep:#031b42;--blue:#0a3f8c;--silver:#d9dde5;--silver-dark:#9fa8b8;--cream:#f6f8fc;--soft:#eef3fb;--text:#132847;--muted:#62718a}*{box-sizing:border-box}body.quran-site{margin:0;padding-top:85px;color:var(--text);font:16px/1.65 'DM Sans',Arial,sans-serif}.q-header{position:fixed;top:0;right:0;left:0;z-index:1000;background:#fffffff5;padding:11px 0;border-bottom:1px solid #dce3ee;backdrop-filter:blur(12px)}.q-brand{display:block;width:112px;height:62px;background:url('../img/al-suffha-logo.png') center/contain no-repeat;text-decoration:none}.q-brand>span{display:none}.q-nav{display:flex;gap:25px}.q-nav a{color:#1f3658;text-decoration:none;font-size:14px;font-weight:700}.q-nav a:hover,.q-nav .active{color:var(--blue)}.q-button{display:inline-flex;gap:9px;align-items:center;padding:13px 20px;background:var(--navy);border:1px solid var(--navy);border-radius:3px;color:#fff;text-decoration:none;font-size:14px;font-weight:700;box-shadow:0 5px 13px #06265720}.q-button:hover{background:var(--blue);border-color:var(--blue);color:#fff}.q-button-sm{padding:9px 14px;font-size:12px}.q-eyebrow{margin:0 0 12px;color:var(--blue);font-size:11px;font-weight:700;letter-spacing:2px}.q-hero{padding:110px 0 95px;background:linear-gradient(120deg,#f7f9fd,#e7eef9);position:relative;overflow:hidden}.q-hero:before{content:'';position:absolute;inset:0;background-image:radial-gradient(#0a3f8c44 1px,transparent 1px);background-size:27px 27px;mask-image:linear-gradient(90deg,transparent 20%,#000)}.q-hero h1,.q-page-hero h1,.q-section h2,.q-cta h2{font-family:'Playfair Display',serif;letter-spacing:-1px}.q-hero h1{font-size:clamp(45px,5vw,70px);line-height:1.08}.q-hero h1 em{color:var(--blue)}.q-lead,.q-page-hero>div>p:not(.q-eyebrow){color:var(--muted);font-size:18px;max-width:630px;margin:24px 0}.q-link{padding:13px 2px;color:var(--navy);font-weight:700;text-decoration:none}.q-trust{display:flex;gap:22px;flex-wrap:wrap;margin-top:34px;font-size:13px}.q-trust i{color:var(--blue)}.q-hero-card{background:linear-gradient(145deg,var(--navy),var(--blue));color:#fff;padding:55px 38px;box-shadow:18px 18px var(--silver)}.q-hero-card p{font-size:11px;color:#dbe6f7;letter-spacing:1.5px;text-transform:uppercase}.arabic{direction:rtl;font:38px serif;margin:30px 0 7px}.q-card-line{height:1px;background:#ffffff55;margin:28px 0}.q-section{padding:90px 0}.q-section h2{font-size:42px;line-height:1.2}.q-section-head{max-width:630px;margin:0 auto 45px;text-align:center}.q-section-head>p:last-child,.q-muted{color:var(--muted)}.q-program,.q-info-card{height:100%;padding:32px 28px;border:1px solid #dce4ef;background:#fff;transition:.2s}.q-program:hover,.q-info-card:hover{box-shadow:0 15px 35px #06265714;transform:translateY(-4px)}.q-program>i,.q-info-card>i{font-size:28px;color:var(--blue)}.q-program h3,.q-info-card h3{font:700 25px 'Playfair Display',serif;margin:17px 0 9px}.q-program p,.q-info-card p{color:var(--muted);font-size:14px}.q-program.featured{background:linear-gradient(145deg,var(--navy),var(--blue));color:#fff;border-color:var(--navy)}.q-program.featured p{color:#ffffffcf}.q-program a{color:var(--blue);font-weight:700;text-decoration:none}.q-program.featured a{color:#dbe8ff}.q-soft{background:var(--soft)}.q-steps>div{display:flex;gap:20px;padding:17px 0;border-bottom:1px solid #ced9e8}.q-steps b{color:var(--blue);font:24px 'Playfair Display',serif}.q-steps small{display:block;color:var(--muted)}.q-page-hero{padding:92px 0 82px;text-align:center;background:linear-gradient(130deg,#f8faff,#e6eefb)}.q-page-hero h1{max-width:820px;margin:auto;font-size:clamp(41px,5vw,62px);line-height:1.15}.q-page-hero>div>p:not(.q-eyebrow){margin:17px auto 0}.q-page-hero .q-button{margin-top:25px}.q-list{list-style:none;padding:0;margin:18px 0}.q-list li{padding:9px 0;border-bottom:1px solid #e2e8f1}.q-list i{color:var(--blue);margin-right:7px}.q-cta{padding:82px 0;background:linear-gradient(145deg,var(--navy-deep),var(--navy));color:#fff;text-align:center}.q-cta h2{font-size:43px}.q-cta>div>p:not(.q-eyebrow){color:#d3e1f8;margin:14px auto 25px}.q-button-light{background:#fff;border-color:#fff;color:var(--navy)}.q-button-light:hover{background:var(--silver);border-color:var(--silver);color:var(--navy)}.q-footer{background:var(--navy-deep);color:#fff;padding:62px 0 25px}.q-footer .container:before{content:'';display:block;width:112px;height:82px;background:url('../img/al-suffha-logo.png') center/contain no-repeat;margin-bottom:18px}.q-footer h4{font:700 18px 'Playfair Display',serif;margin-bottom:16px}.q-footer p,.q-footer li{color:#c2d0e6;font-size:14px}.q-footer ul{list-style:none;padding:0}.q-footer a{color:#e4ecf8;text-decoration:none}.q-footer a:hover{color:#fff}.q-footer-bottom{border-top:1px solid #ffffff1a;margin-top:28px;padding-top:20px;color:#9db0cb;font-size:13px}.q-form{padding:35px;background:var(--soft);border:1px solid #d6e0ef}.q-form label{font-size:13px;font-weight:700;margin-bottom:7px}.q-form input,.q-form select,.q-form textarea{width:100%;padding:12px;border:1px solid #cbd8ea;background:#fff;border-radius:2px}.q-form input:focus,.q-form select:focus,.q-form textarea:focus{outline:2px solid #0a3f8c33;border-color:var(--blue)}.q-map{width:100%;height:400px;border:0;display:block}.q-contact-line{display:flex;gap:14px;align-items:flex-start;margin:18px 0}.q-contact-line i{display:grid;place-items:center;flex:0 0 42px;height:42px;background:var(--soft);color:var(--blue);font-size:19px}.q-contact-line strong,.q-contact-line span{display:block}.q-contact-line span{color:var(--muted);font-size:14px}@media(max-width:991px){.q-nav{display:none}.q-header .q-button-sm{display:none}.q-hero{padding:70px 0}.q-hero-card{margin-top:20px}}@media(max-width:575px){.q-section{padding:62px 0}.q-section h2,.q-cta h2{font-size:34px}.q-hero h1{font-size:43px}}
.q-nav a{position:relative;padding:10px 13px;border-radius:3px}.q-nav a.active{background:var(--navy);color:#fff}.q-nav a.active:hover{background:var(--blue);color:#fff}

/* Al Suffha design system — derived only from the existing brand palette */
:root {
  --primary: #062657;
  --primary-dark: #031b42;
  --primary-light: #0a3f8c;
  --secondary: #d9dde5;
  --accent: #0a3f8c;
  --background: #f6f8fc;
  --surface: #ffffff;
  --surface-soft: #eef3fb;
  --text-primary: #132847;
  --text-muted: #62718a;
  --border: #dce4ef;
  --border-strong: #cbd8ea;
  --shadow-sm: 0 6px 18px rgba(6, 38, 87, .08);
  --shadow-md: 0 16px 38px rgba(6, 38, 87, .12);
  --shadow-lg: 0 24px 60px rgba(3, 27, 66, .17);
  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 18px;
  --transition: 220ms ease;
}

html { scroll-behavior: smooth; }
body.quran-site { background: var(--surface); color: var(--text-primary); text-rendering: optimizeLegibility; }
body.quran-site main { overflow: hidden; }
body.quran-site ::selection { background: var(--primary); color: var(--surface); }
.container { width: min(100% - 32px, 1140px); }

.q-header {
  min-height: 85px;
  background: rgba(255, 255, 255, .97);
  border-bottom: 1px solid var(--border);
  box-shadow: 0 5px 22px rgba(3, 27, 66, .06);
}
.q-header .container { min-height: 62px; }
.q-nav { align-items: center; gap: 8px; }
.q-nav a { border-radius: var(--radius-sm); transition: color var(--transition), background-color var(--transition), transform var(--transition); }
.q-nav a:hover { background: var(--surface-soft); color: var(--primary-light); }
.q-nav a.active { background: var(--primary); color: var(--surface); box-shadow: var(--shadow-sm); }

.q-button,
.plan-button {
  min-height: 46px;
  justify-content: center;
  border-radius: var(--radius-sm);
  background: var(--primary);
  border-color: var(--primary);
  box-shadow: var(--shadow-sm);
  transition: transform var(--transition), box-shadow var(--transition), background-color var(--transition), border-color var(--transition);
}
.q-button:hover,
.plan-button:hover { background: var(--primary-light); border-color: var(--primary-light); transform: translateY(-2px); box-shadow: var(--shadow-md); }
.q-button:focus-visible,
.plan-button:focus-visible,
.q-nav a:focus-visible,
.footer-socials a:focus-visible { outline: 3px solid rgba(10, 63, 140, .24); outline-offset: 3px; }
.q-button-light { background: var(--surface); border-color: var(--surface); color: var(--primary); }
.q-button-light:hover { background: var(--secondary); border-color: var(--secondary); color: var(--primary-dark); }

.q-eyebrow { color: var(--accent); font-size: 12px; letter-spacing: 2.2px; }
.q-section h2,
.q-cta h2,
.q-page-hero h1 { color: var(--primary-dark); line-height: 1.12; }
.q-section-head { max-width: 720px; margin-bottom: 52px; }
.q-section-head > p:last-child,
.q-muted { color: var(--text-muted); }
.q-section { position: relative; padding-block: 96px; }
.q-soft { background: var(--surface-soft); border-block: 1px solid rgba(203, 216, 234, .65); }

.ref-hero,
.q-page-hero,
.course-detail-hero { border-bottom: 1px solid var(--border); }
.q-page-hero { padding-block: 104px 92px; }
.q-page-hero > .container { position: relative; z-index: 2; }
.q-page-hero > div > p:not(.q-eyebrow) { line-height: 1.75; }

.q-program,
.q-info-card,
.course-ref,
.reference-feature-card,
.feature-ref,
.review-ref,
.faq-ref,
.impact-card,
.mission-card,
.journey-card,
.course-info-card,
.plan-card,
.teacher-info-grid > div {
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-md) !important;
  background: var(--surface);
  box-shadow: var(--shadow-sm);
  transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
}
.q-program:hover,
.q-info-card:hover,
.course-ref:hover,
.reference-feature-card:hover,
.feature-ref:hover,
.review-ref:hover,
.impact-card:hover,
.mission-card:hover,
.journey-card:hover,
.course-info-card:hover,
.plan-card:hover {
  transform: translateY(-5px);
  border-color: var(--border-strong) !important;
  box-shadow: var(--shadow-md);
}
.q-program.featured,
.mission-card-blue,
.plan-card-featured {
  background: var(--primary) !important;
  border-color: var(--primary) !important;
  color: var(--surface);
}
.q-program.featured h3,
.q-program.featured i,
.mission-card-blue h3,
.mission-card-blue i,
.plan-card-featured h3 { color: var(--surface); }
.q-program.featured p,
.mission-card-blue p,
.plan-card-featured p { color: rgba(255, 255, 255, .82); }
.reference-feature-image,
.course-ref img,
.course-visual-card img,
.teacher-image-wrap img { border-radius: var(--radius-md) var(--radius-md) 0 0; }
.reference-feature-icon,
.q-contact-line i { background: var(--surface-soft); color: var(--primary-light); border: 1px solid var(--border); }

.faq-ref,
.plan-faq { overflow: hidden; }
.faq-ref summary,
.plan-faq summary { cursor: pointer; color: var(--text-primary); font-weight: 700; transition: color var(--transition), background-color var(--transition); }
.faq-ref summary:hover,
.plan-faq summary:hover { color: var(--primary-light); background: var(--surface-soft); }
.faq-ref[open],
.plan-faq[open] { border-color: var(--border-strong) !important; box-shadow: var(--shadow-sm); }

.q-form {
  padding: 38px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface-soft);
  box-shadow: var(--shadow-sm);
}
.q-form label { color: var(--text-primary); }
.q-form input,
.q-form select,
.q-form textarea {
  min-height: 48px;
  border-color: var(--border-strong);
  border-radius: var(--radius-sm);
  color: var(--text-primary);
  transition: border-color var(--transition), box-shadow var(--transition), background-color var(--transition);
}
.q-form textarea { min-height: 130px; }
.q-form input:hover,
.q-form select:hover,
.q-form textarea:hover { border-color: var(--secondary); }
.q-form input:focus,
.q-form select:focus,
.q-form textarea:focus { outline: 0; border-color: var(--primary-light); box-shadow: 0 0 0 4px rgba(10, 63, 140, .12); }
.q-map { border: 1px solid var(--border); border-radius: var(--radius-md); box-shadow: var(--shadow-sm); }

.q-cta,
.course-detail-cta,
.teacher-cta-box,
.support-box { background: var(--primary-dark) !important; border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); }
.q-cta { border-radius: 0; }
.q-cta h2,
.course-detail-cta h2,
.teacher-cta-box h2,
.support-box h2 { color: var(--surface); }

.premium-footer { border-top-color: var(--secondary) !important; }
.premium-footer h4 { letter-spacing: -.2px; }
.premium-footer li a,
.footer-contact-line { transition: color var(--transition), transform var(--transition); }
.premium-footer li a:hover { display: inline-block; transform: translateX(3px); }
.footer-socials a { transition: transform var(--transition), background-color var(--transition), color var(--transition); }
.footer-socials a:hover { transform: translateY(-3px); }
.premium-footer-bottom { background: rgba(3, 27, 66, .38); }

.whatsapp-float { border: 2px solid var(--surface); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
}