/* ═══════════════════════════════════════════════════════════════
   IqraFlow - shared stylesheet
   Fonts, base styles, interactive states and responsive layout.
   ═══════════════════════════════════════════════════════════════ */

/* ── Inter ── */
/* cyrillic-ext */
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 400; font-display: swap; src: url("/assets/fonts/inter-cyrillic-ext.woff2") format('woff2'); unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; }
/* cyrillic */
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 400; font-display: swap; src: url("/assets/fonts/inter-cyrillic.woff2") format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
/* greek-ext */
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 400; font-display: swap; src: url("/assets/fonts/inter-greek-ext.woff2") format('woff2'); unicode-range: U+1F00-1FFF; }
/* greek */
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 400; font-display: swap; src: url("/assets/fonts/inter-greek.woff2") format('woff2'); unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF; }
/* vietnamese */
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 400; font-display: swap; src: url("/assets/fonts/inter-vietnamese.woff2") format('woff2'); unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB; }
/* latin-ext */
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 400; font-display: swap; src: url("/assets/fonts/inter-latin-ext.woff2") format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
/* latin */
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 400; font-display: swap; src: url("/assets/fonts/inter-latin.woff2") format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
/* cyrillic-ext */
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 500; font-display: swap; src: url("/assets/fonts/inter-cyrillic-ext.woff2") format('woff2'); unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; }
/* cyrillic */
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 500; font-display: swap; src: url("/assets/fonts/inter-cyrillic.woff2") format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
/* greek-ext */
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 500; font-display: swap; src: url("/assets/fonts/inter-greek-ext.woff2") format('woff2'); unicode-range: U+1F00-1FFF; }
/* greek */
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 500; font-display: swap; src: url("/assets/fonts/inter-greek.woff2") format('woff2'); unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF; }
/* vietnamese */
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 500; font-display: swap; src: url("/assets/fonts/inter-vietnamese.woff2") format('woff2'); unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB; }
/* latin-ext */
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 500; font-display: swap; src: url("/assets/fonts/inter-latin-ext.woff2") format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
/* latin */
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 500; font-display: swap; src: url("/assets/fonts/inter-latin.woff2") format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
/* cyrillic-ext */
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 600; font-display: swap; src: url("/assets/fonts/inter-cyrillic-ext.woff2") format('woff2'); unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; }
/* cyrillic */
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 600; font-display: swap; src: url("/assets/fonts/inter-cyrillic.woff2") format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
/* greek-ext */
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 600; font-display: swap; src: url("/assets/fonts/inter-greek-ext.woff2") format('woff2'); unicode-range: U+1F00-1FFF; }
/* greek */
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 600; font-display: swap; src: url("/assets/fonts/inter-greek.woff2") format('woff2'); unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF; }
/* vietnamese */
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 600; font-display: swap; src: url("/assets/fonts/inter-vietnamese.woff2") format('woff2'); unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB; }
/* latin-ext */
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 600; font-display: swap; src: url("/assets/fonts/inter-latin-ext.woff2") format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
/* latin */
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 600; font-display: swap; src: url("/assets/fonts/inter-latin.woff2") format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

/* ── Outfit ── */
/* latin-ext */
@font-face { font-family: 'Outfit'; font-style: normal; font-weight: 500; font-display: swap; src: url("/assets/fonts/outfit-latin-ext.woff2") format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
/* latin */
@font-face { font-family: 'Outfit'; font-style: normal; font-weight: 500; font-display: swap; src: url("/assets/fonts/outfit-latin.woff2") format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
/* latin-ext */
@font-face { font-family: 'Outfit'; font-style: normal; font-weight: 600; font-display: swap; src: url("/assets/fonts/outfit-latin-ext.woff2") format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
/* latin */
@font-face { font-family: 'Outfit'; font-style: normal; font-weight: 600; font-display: swap; src: url("/assets/fonts/outfit-latin.woff2") format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
/* latin-ext */
@font-face { font-family: 'Outfit'; font-style: normal; font-weight: 700; font-display: swap; src: url("/assets/fonts/outfit-latin-ext.woff2") format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
/* latin */
@font-face { font-family: 'Outfit'; font-style: normal; font-weight: 700; font-display: swap; src: url("/assets/fonts/outfit-latin.woff2") format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
/* latin-ext */
@font-face { font-family: 'Outfit'; font-style: normal; font-weight: 800; font-display: swap; src: url("/assets/fonts/outfit-latin-ext.woff2") format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
/* latin */
@font-face { font-family: 'Outfit'; font-style: normal; font-weight: 800; font-display: swap; src: url("/assets/fonts/outfit-latin.woff2") format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

/* ── Uthmanic Hafs (Quran script) ── */
@font-face { font-family: 'UthmanicHafs'; src: url("/assets/fonts/uthmanic-hafs.ttf") format('truetype'); font-display: swap; }

/* ── Base ── */
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
html, body { overflow-x: clip; }
body { margin: 0; background: #070F0B; font-family: Inter, system-ui, sans-serif; }
a { color: #56B882; text-decoration: none; }
a:hover { color: #F0C050; }
::selection { background: rgba(240,192,80,0.3); }
@keyframes iqfloat { 0%,100% { transform: translateY(0px); } 50% { transform: translateY(-10px); } }
@keyframes iqfloat2 { 0%,100% { transform: translateY(0px); } 50% { transform: translateY(8px); } }
@keyframes iqflame { 0%,100% { transform: scale(1) rotate(-2deg); } 50% { transform: scale(1.08) rotate(2deg); } }

/* ── Interactive states (formerly runtime style-hover / style-focus) ── */
.iq-navlink:hover { color: #E8F5EE !important; }
.iq-nav-cta:hover { background: #F0C050 !important; color: #231500 !important; }
.iq-btn-green:hover { background: #56B882 !important; }
.iq-btn-gold:hover { background: #F7D06B !important; }
.iq-input:focus { border-color: #429C6A !important; }
.iq-faq-head:hover { background: rgba(66,156,106,0.05); }

/* ── Mobile nav ── */
.iq-nav-burger { display: none; background: none; border: 1px solid #2A4438; border-radius: 10px; width: 40px; height: 40px; align-items: center; justify-content: center; cursor: pointer; padding: 0; flex: none; }
.iq-nav-burger:hover { border-color: #429C6A; }
.iq-nav-burger .iq-burger-x { display: none; }
.iq-nav.open .iq-nav-burger .iq-burger-x { display: block; }
.iq-nav.open .iq-nav-burger .iq-burger-bars { display: none; }
.iq-nav-menu { display: none; }
.iq-wrap { flex-wrap: wrap; }

/* ── FAQ accordion ── */
.iq-faq-head { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 20px 26px; cursor: pointer; }
.iq-faq-chev { flex: none; display: inline-flex; width: 28px; height: 28px; border-radius: 50%; border: 1px solid #2A4438; align-items: center; justify-content: center; transition: transform 0.25s; }
.iq-faq-body { overflow: hidden; max-height: 0; opacity: 0; transition: max-height 0.3s ease, opacity 0.3s ease; }
.iq-faq-item.open .iq-faq-chev { transform: rotate(180deg); }
.iq-faq-item.open .iq-faq-body { max-height: 640px; opacity: 1; }

/* ── Scroll reveals (hidden state is applied by JS, so no-JS still shows everything) ── */
[data-reveal].iq-hidden { opacity: 0; transform: translateY(22px); }
[data-reveal].iq-revealed { opacity: 1; transform: translateY(0); transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.16, 1, 0.3, 1); }

/* ═══ Responsive layout ═══ */

/* Large laptop / small desktop */
@media (max-width: 1180px) {
  .iq-hero-grid { grid-template-columns: 1fr 460px !important; }
  .iq-hero-canvas { height: 560px !important; }
  .iq-h1 { font-size: 62px !important; letter-spacing: -2px !important; }
  .iq-phones { gap: 22px !important; }
  .iq-tajweed { grid-template-columns: 420px 1fr !important; gap: 44px !important; }
  .iq-khatm { grid-template-columns: 1fr 420px !important; gap: 44px !important; }
}

/* Tablet */
@media (max-width: 1020px) {
  .iq-glow { inset: -12px !important; }
  .iq-hero-grid { grid-template-columns: 1fr !important; }
  .iq-hero-copy { padding: 64px 0 6px !important; }
  .iq-hero-canvas { height: 420px !important; }
  .iq-h1 { font-size: 54px !important; }
  .iq-h2 { font-size: 38px !important; letter-spacing: -1.1px !important; }
  .iq-h2-xl { font-size: 46px !important; letter-spacing: -1.4px !important; }
  .iq-grid3 { grid-template-columns: 1fr !important; max-width: 640px; margin: 0 auto; }
  .iq-phones { flex-wrap: wrap; row-gap: 44px; align-items: flex-start !important; }
  .iq-tajweed { grid-template-columns: 1fr !important; gap: 48px !important; }
  .iq-khatm { grid-template-columns: 1fr !important; gap: 48px !important; }
  .iq-khatm > div:first-child { order: 2; }
  .iq-khatm > div:last-child { order: 1; }
}

/* Small tablet / large phone */
@media (max-width: 860px) {
  .iq-container { padding-left: 24px !important; padding-right: 24px !important; }
  .iq-section { padding-top: 76px !important; }
  .iq-main { padding-top: 56px !important; padding-bottom: 80px !important; }
  .iq-nav-links { display: none !important; }
  .iq-nav-burger { display: inline-flex; }
  .iq-nav.open .iq-nav-menu { display: flex; flex-direction: column; gap: 2px; padding: 8px 20px 14px; border-top: 1px solid rgba(66,156,106,0.14); }
  .iq-nav-menu a { padding: 12px 10px; font-size: 15px; font-weight: 500; color: #C6E6D4; border-radius: 10px; }
  .iq-nav-menu a:hover { background: rgba(66,156,106,0.08); color: #E8F5EE; }
  .iq-strip { grid-template-columns: repeat(2, 1fr) !important; }
  .iq-footer-grid { grid-template-columns: 1fr 1fr !important; gap: 32px !important; }
  .iq-footer-brand { grid-column: 1 / -1; }
  .iq-cta-card { padding: 64px 32px 56px !important; }
}

/* Phone */
@media (max-width: 700px) {
  .iq-grid2 { grid-template-columns: 1fr !important; }
}
@media (max-width: 640px) {
  .iq-container { padding-left: 20px !important; padding-right: 20px !important; }
  .iq-section { padding-top: 64px !important; }
  .iq-main { padding-top: 48px !important; }
  .iq-hero-copy { padding-top: 48px !important; }
  .iq-hero-canvas { height: 340px !important; }
  .iq-hero-caption { white-space: normal !important; letter-spacing: 1.6px !important; padding: 0 14px; }
  .iq-h1 { font-size: 43px !important; letter-spacing: -1.4px !important; }
  .iq-h1-sub { font-size: 34px !important; letter-spacing: -1px !important; }
  .iq-h2 { font-size: 32px !important; letter-spacing: -0.8px !important; }
  .iq-h2-xl { font-size: 36px !important; letter-spacing: -1px !important; }
  .iq-lead { font-size: 16px !important; }
  .iq-badges { flex-wrap: wrap; }
  .iq-card-lg { padding: 24px 18px 20px !important; }
  .iq-card-md { padding: 22px 16px !important; }
  .iq-khatm-head { flex-wrap: wrap; row-gap: 10px; }
  .iq-ayah { font-size: 33px !important; }
  .iq-cta-card { border-radius: 24px !important; }
  .iq-footer-bottom { flex-direction: column !important; gap: 10px; text-align: center; }
  input[type="email"] { font-size: 16px !important; }
  /* phone mockups become a swipeable strip */
  .iq-phones { flex-wrap: nowrap !important; justify-content: flex-start !important; gap: 20px !important; overflow-x: auto; scroll-snap-type: x mandatory; margin: 0 -20px; padding: 4px 24px 18px; scrollbar-width: none; }
  .iq-phones::-webkit-scrollbar { display: none; }
  .iq-phones > div { scroll-snap-align: center; flex: none; }
}

/* Narrow phone */
@media (max-width: 560px) {
  .iq-form-row { flex-direction: column !important; max-width: 100% !important; }
  .iq-form-row input { width: 100% !important; box-sizing: border-box; }
  .iq-form-row button { width: 100%; box-sizing: border-box; }
}
@media (max-width: 420px) {
  .iq-container { padding-left: 16px !important; padding-right: 16px !important; }
  .iq-phones { margin: 0 -16px; padding: 4px 20px 18px; }
  .iq-h1 { font-size: 37px !important; }
  .iq-h1-sub { font-size: 30px !important; }
  .iq-h2 { font-size: 28px !important; }
  .iq-h2-xl { font-size: 31px !important; }
  .iq-ayah { font-size: 28px !important; }
  .iq-nav-cta { padding: 9px 14px !important; font-size: 13px !important; }
  .iq-jz { display: none !important; }
  .iq-cta-card { padding: 48px 18px 44px !important; }
}