:root {
  --cream: #f6efdf; --paper: #fffaf0; --ink: #171915; --emerald: #0b4938;
  --emerald-deep: #062e27; --petrol: #123f43; --lapis: #255b78; --gold: #c39845;
  --gold-soft: #e7cc8b; --terra: #a54432; --burgundy: #6f2e2e; --muted: #6d6a61;
  --line: #d9ceb8; --serif: Georgia, ui-serif, serif;
  --sans: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --shell: 70rem; --reading: 46rem; --shadow: 0 24px 70px rgba(41,32,17,.13);
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; overflow-x: hidden; background: var(--cream); color: var(--ink); font: 400 1rem/1.7 var(--sans); -webkit-font-smoothing: antialiased; }
body::before { content: ""; position: fixed; inset: 0; z-index: 20; pointer-events: none; opacity: .13; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 140 140' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.2'/%3E%3C/svg%3E"); mix-blend-mode: multiply; }
img { display: block; max-width: 100%; }
a { color: inherit; }
h1, h2, h3, p, blockquote { margin-top: 0; }
h1, h2, h3 { font-family: var(--serif); letter-spacing: -.035em; line-height: 1.06; text-wrap: balance; }
h1 { font-size: clamp(2.65rem, 7vw, 5.9rem); }
h2 { font-size: clamp(2.2rem, 5vw, 4.3rem); }
h3 { font-size: clamp(1.35rem, 2.4vw, 2rem); }
:focus-visible { outline: 3px solid var(--gold); outline-offset: 4px; }
.skip-link { position: fixed; top: 1rem; left: 1rem; z-index: 99; padding: .75rem 1rem; background: #fff; transform: translateY(-160%); }
.skip-link:focus { transform: translateY(0); }
.section { position: relative; padding: clamp(4.8rem, 9vw, 8rem) 1.25rem; }
.shell { width: min(100%, var(--shell)); margin-inline: auto; }
.reading { width: min(100%, var(--reading)); margin-inline: auto; }
.eyebrow { margin-bottom: 1.25rem; color: var(--emerald); font-size: .77rem; font-weight: 850; letter-spacing: .17em; line-height: 1.45; text-transform: uppercase; }
.eyebrow--gold { color: var(--gold-soft); }
.eyebrow--terracotta { color: var(--terra); }
.eyebrow--blue { color: var(--lapis); }
.button { display: inline-flex; min-height: 3.65rem; align-items: center; justify-content: center; gap: .65rem; padding: .95rem 1.55rem; border: 1px solid transparent; border-radius: .2rem; font-size: .8rem; font-weight: 900; letter-spacing: .08em; line-height: 1.25; text-align: center; text-decoration: none; text-transform: uppercase; transition: transform .2s ease, background .2s ease; }
.button:hover { transform: translateY(-2px); }
.button--outline { border-color: var(--emerald); color: var(--emerald); }
.button--outline:hover { background: var(--emerald); color: #fff; }
.button--gold { background: var(--gold); color: var(--emerald-deep); box-shadow: 0 12px 35px rgba(0,0,0,.16); }
.button--gold:hover { background: #d6ae5c; }

.hero { overflow: hidden; padding-top: clamp(3.5rem, 7vw, 6rem); text-align: center; }
.hero::before, .hero::after { content: ""; position: absolute; width: 15rem; aspect-ratio: 1; border: 1px solid rgba(195,152,69,.27); transform: rotate(45deg); z-index: -1; }
.hero::before { left: -9rem; top: 7rem; } .hero::after { right: -9rem; top: 7rem; }
.hero-inner { max-width: 72rem; }
.hero h1 { max-width: 66rem; margin: 0 auto 1.5rem; }
.hero h1 span { color: var(--emerald); }
.hero-lead { max-width: 48rem; margin: 0 auto 2.4rem; color: #49483f; font-size: clamp(1.05rem,2vw,1.3rem); }
.hero-visual { overflow: hidden; margin: 2.6rem auto 0; border: 1px solid var(--gold); background: var(--paper); box-shadow: var(--shadow); }
.hero-visual img { width: 100%; height: auto; }
.hero-bridge { display: grid; gap: .15rem; max-width: 51rem; margin: 2.4rem auto 1.8rem; font: 500 clamp(1.35rem,3.3vw,2.15rem)/1.35 var(--serif); }
.hero-bridge span { color: var(--muted); } .hero-bridge strong { color: var(--emerald); }

.pain-section { background: var(--paper); }
.split { display: grid; grid-template-columns: minmax(0,.9fr) minmax(0,1.1fr); gap: clamp(2.5rem,7vw,5.5rem); align-items: center; }
.section-copy h2 { margin-bottom: 2rem; }
.punch-list { margin: 2rem 0; border-block: 1px solid var(--line); }
.punch-list p { margin: 0; padding: .78rem 0; border-bottom: 1px solid var(--line); font: 500 clamp(1.05rem,2vw,1.3rem)/1.45 var(--serif); }
.punch-list p:last-child { border-bottom: 0; color: var(--terra); }
.section-copy blockquote { margin: 2.3rem 0; color: var(--burgundy); font: 600 clamp(1.9rem,4.2vw,3.2rem)/1.15 var(--serif); }
.section-copy > p:last-child { color: var(--muted); }
.editorial-image { overflow: hidden; margin: 0; border: 1px solid var(--line); background: var(--cream); box-shadow: var(--shadow); }
.editorial-image img { width: 100%; height: 100%; object-fit: cover; }
.arch-frame { border-radius: 45% 45% .4rem .4rem / 18% 18% .4rem .4rem; }
.frame-blue { border-color: var(--lapis); }

.proof-inline { display: grid; grid-template-columns: minmax(0,.8fr) minmax(0,1.2fr); gap: 2.5rem; align-items: center; margin-top: clamp(4rem,8vw,7rem); padding-top: clamp(3rem,6vw,5rem); border-top: 1px solid var(--line); }
.proof-heading h3 { color: var(--emerald); }
.proof-grid { display: grid; gap: 1rem; }
.proof-grid--two { grid-template-columns: repeat(2,minmax(0,1fr)); }
.proof-grid--three { grid-template-columns: repeat(3,minmax(0,1fr)); }
.proof-grid--application, .proof-grid--preoffer { grid-template-columns: minmax(0,1.1fr) minmax(0,.9fr); align-items: start; }
.proof-grid--preoffer { max-width: 64rem; }
.proof-grid--three .proof-slot { min-height: 0; }
.proof-media { overflow: hidden; margin: 0; padding: .5rem; border: 1px solid #ddd3c0; border-radius: 18px; background: #fffdf8; box-shadow: 0 10px 30px rgba(38,31,18,.07); }
.proof-media img { display: block; width: 100%; height: auto; margin-inline: auto; border-radius: 12px; object-fit: contain; }
.proof-media figcaption { padding: .85rem .65rem .45rem; color: var(--muted); font-size: .78rem; line-height: 1.55; text-align: left; }
.proof-slot { position: relative; overflow: hidden; min-height: 21rem; aspect-ratio: 3/4; margin: 0; border: 1px solid var(--line); border-radius: .55rem; background: #ece3d2; box-shadow: 0 12px 38px rgba(38,31,18,.09); }
.proof-slot--landscape { aspect-ratio: 1/1; }
.proof-slot > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .2s ease; }
.proof-slot.is-ready > img { opacity: 1; }
.proof-placeholder { position: absolute; inset: 0; display: grid; place-content: center; gap: .65rem; padding: 1.4rem; color: var(--muted); text-align: center; }
.proof-placeholder::before { content: ""; width: 2.8rem; aspect-ratio: 1; margin: 0 auto .4rem; border: 1px solid var(--gold); transform: rotate(45deg); }
.proof-placeholder span { color: var(--emerald); font-size: .7rem; font-weight: 850; letter-spacing: .14em; text-transform: uppercase; }
.proof-placeholder code { overflow-wrap: anywhere; font: 600 .77rem/1.45 var(--sans); }

.belief-section { overflow: hidden; background: var(--emerald-deep); color: var(--cream); text-align: center; }
.belief-section::after { content: ""; position: absolute; inset: 1.2rem; border: 1px solid rgba(195,152,69,.2); pointer-events: none; }
.belief-section h2 em { color: var(--gold-soft); font-weight: 500; }
.belief-intro { max-width: 45rem; margin: 0 auto 3rem; color: #cbd5cf; font-size: 1.08rem; }
.belief-compare { display: grid; grid-template-columns: 1fr auto 1fr; gap: 1rem; align-items: center; max-width: 58rem; margin: 0 auto; text-align: left; }
.belief-card { padding: clamp(1.7rem,4vw,2.7rem); border: 1px solid rgba(255,255,255,.16); }
.belief-card > span { display: block; margin-bottom: 1rem; font-size: .72rem; font-weight: 850; letter-spacing: .14em; text-transform: uppercase; }
.belief-card ol { margin: 0; padding: 0; list-style: none; }
.belief-card li { padding: .8rem 0; border-bottom: 1px solid rgba(255,255,255,.12); font-family: var(--serif); font-size: 1.08rem; }
.belief-card li:last-child { border-bottom: 0; }
.belief-card--pain { background: rgba(111,46,46,.2); color: #d8c5c1; }
.belief-card--pain > span { color: #e3a394; }
.belief-card--solution { border-color: var(--gold); background: rgba(195,152,69,.09); }
.belief-card--solution > span { color: var(--gold-soft); }
.compare-mark { color: var(--gold); font: 600 2rem var(--serif); }
.belief-line { margin: 3.2rem auto 0; font: 500 clamp(1.4rem,3.4vw,2.2rem)/1.4 var(--serif); }
.belief-line strong { color: var(--gold-soft); }

.method-section { background: var(--cream); }
.method-head { max-width: 53rem; margin-bottom: 3rem; text-align: center; }
.method-head h2 { margin-bottom: 1rem; text-transform: uppercase; }
.method-head h2 span { color: var(--emerald); }
.method-head > p:last-child { max-width: 43rem; margin: 0 auto; color: var(--muted); font-size: 1.1rem; }
.method-visual-grid { display: grid; grid-template-columns: minmax(0,1.25fr) minmax(18rem,.75fr); gap: 1.3rem; align-items: stretch; }
.method-steps { display: grid; border: 1px solid var(--line); background: var(--paper); }
.method-steps article { display: grid; grid-template-columns: 2.6rem 1fr; gap: .75rem; padding: 1.15rem; border-bottom: 1px solid var(--line); }
.method-steps article:last-child { border-bottom: 0; }
.method-steps span { color: var(--gold); font: 700 1rem var(--serif); }
.method-steps h3 { margin: 0 0 .3rem; color: var(--emerald); font-size: 1.15rem; text-transform: uppercase; }
.method-steps p { margin: 0; color: var(--muted); font-size: .9rem; line-height: 1.5; }
.review-map { display: grid; grid-template-columns: minmax(18rem,.75fr) minmax(0,1.25fr); gap: clamp(2rem,5vw,4rem); align-items: center; margin-top: clamp(4rem,8vw,6.5rem); }
.review-copy h3 { font-size: clamp(2rem,4vw,3.2rem); }
.review-copy > p:not(.eyebrow) { color: var(--muted); }
.review-copy strong { display: block; padding-left: 1rem; border-left: 3px solid var(--gold); color: var(--emerald); font: 600 1.2rem/1.45 var(--serif); }
.proof-inline--compact { margin-top: 5rem; }

.transformation-section { background: var(--petrol); color: var(--cream); }
.transformation-head { max-width: 55rem; text-align: center; }
.transformation-head h2 span { color: var(--gold-soft); }
.transformation-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 1.2rem; margin-top: 3rem; }
.state-card { padding: clamp(1.7rem,4vw,3rem); border: 1px solid rgba(255,255,255,.15); }
.state-card > span { font-size: .72rem; font-weight: 850; letter-spacing: .16em; text-transform: uppercase; }
.state-card h3 { margin: 1rem 0; }
.state-card ul { margin: 0; padding: 0; list-style: none; }
.state-card li { padding: .72rem 0; border-bottom: 1px solid rgba(255,255,255,.12); }
.state-card--before { background: rgba(111,46,46,.28); color: #d9c8c3; }
.state-card--before > span { color: #f0a895; }
.state-card--after { border-color: var(--gold); background: rgba(195,152,69,.1); }
.state-card--after > span { color: var(--gold-soft); }
.desire-line { margin-top: 3.4rem; text-align: center; }
.desire-line p { margin-bottom: .3rem; color: #b8caca; }
.desire-line strong { font: 600 clamp(1.7rem,4vw,2.8rem)/1.3 var(--serif); color: #fff; }
.benefit-layers { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 1rem; margin-top: 1.2rem; }
.benefit-layers article { padding: 1.6rem; border: 1px solid rgba(255,255,255,.16); background: rgba(255,255,255,.035); text-align: center; }
.benefit-layers span { color: var(--gold-soft); font-size: .7rem; font-weight: 850; letter-spacing: .14em; text-transform: uppercase; }
.benefit-layers h3 { margin: .65rem 0 .45rem; color: #fff; }
.benefit-layers p { margin: 0; color: #c3d1ce; font-size: .92rem; }

.tajweed-section { background: var(--cream); }
.tajweed-intro { display: grid; grid-template-columns: minmax(0,.9fr) minmax(0,1.1fr); gap: clamp(2.5rem,7vw,5rem); align-items: end; }
.tajweed-intro h2 { color: var(--emerald); }
.tajweed-intro > div:first-child > p:last-child { max-width: 39rem; color: var(--muted); }
.tajweed-benefits { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); border: 1px solid var(--line); background: var(--paper); }
.tajweed-benefits article { padding: 1.3rem; border-right: 1px solid var(--line); }
.tajweed-benefits article:last-child { border-right: 0; }
.tajweed-benefits span { color: var(--terra); font: 700 .92rem var(--serif); }
.tajweed-benefits h3 { margin: .8rem 0 .45rem; color: var(--emerald); font-size: 1.25rem; }
.tajweed-benefits p { margin: 0; color: var(--muted); font-size: .86rem; line-height: 1.55; }
.tajweed-gallery { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1.1fr); gap: 1.2rem; margin-top: 3rem; align-items: stretch; }
.tajweed-gallery .editorial-image { min-height: 30rem; }
.tajweed-gallery img { object-position: center; }
.tajweed-fichas--transparent { border: 0; background: transparent; box-shadow: none; }
.tajweed-fichas--transparent img { object-fit: contain; filter: drop-shadow(0 18px 28px rgba(45,35,18,.16)); }
.tajweed-note { margin-top: 1rem; color: var(--muted); font-size: .8rem; text-align: center; }

.buildup-section { background: var(--paper); }
.buildup-inner { display: grid; grid-template-columns: minmax(0,.85fr) minmax(0,1.15fr); gap: clamp(2.5rem,7vw,5rem); align-items: center; }
.buildup-copy h2 span { color: var(--emerald); }
.buildup-copy > p:not(.eyebrow,.buildup-punch) { color: var(--muted); }
.buildup-punch { color: var(--terra); font: 600 clamp(1.45rem,3vw,2rem)/1.35 var(--serif); }
.deliverables { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); border: 1px solid var(--line); background: var(--cream); }
.deliverables article { min-height: 12rem; padding: 1.5rem; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.deliverables article:nth-child(2n) { border-right: 0; }
.deliverables article:nth-child(n+5) { border-bottom: 0; }
.deliverables span { color: var(--gold); font: 700 1rem var(--serif); }
.deliverables h3 { margin: 1.2rem 0 .6rem; color: var(--emerald); font-size: 1.35rem; }
.deliverables p { margin: 0; color: var(--muted); font-size: .92rem; }

.bonus-section { background: var(--burgundy); color: var(--cream); }
.bonus-head { max-width: 52rem; margin-bottom: 3rem; text-align: center; }
.bonus-head h2 { color: #fff; }
.bonus-head > p:last-child { color: #dfccc8; }
.bonus-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 1.25rem; }
.bonus-card { display: grid; grid-template-columns: minmax(10rem,.8fr) minmax(0,1.2fr); align-items: center; overflow: hidden; border: 1px solid rgba(255,255,255,.16); background: rgba(255,255,255,.055); }
.bonus-card figure { margin: 0; padding: .8rem; background: transparent; }
.bonus-card img { width: 100%; height: 100%; aspect-ratio: 1; object-fit: contain; filter: drop-shadow(0 16px 22px rgba(22,10,8,.28)); }
.bonus-card div { padding: clamp(1.2rem,3vw,2rem); }
.bonus-card span { color: var(--gold-soft); font-size: .7rem; font-weight: 850; letter-spacing: .14em; text-transform: uppercase; }
.bonus-card h3 { margin: .8rem 0; color: #fff; }
.bonus-card p { margin: 0; color: #dfccc8; font-size: .9rem; }

.offer-section { overflow: hidden; background: var(--emerald-deep); color: var(--cream); }
.offer-section::before { content: ""; position: absolute; inset: 0; opacity: .08; background-image: repeating-linear-gradient(45deg,transparent 0 34px,var(--gold) 35px 36px), repeating-linear-gradient(-45deg,transparent 0 34px,var(--gold) 35px 36px); }
.offer-grid { position: relative; display: grid; grid-template-columns: minmax(16rem,.72fr) minmax(0,1.28fr); gap: clamp(2.5rem,7vw,5rem); align-items: center; }
.product-mockup { width: min(100%,25rem); justify-self: center; overflow: hidden; margin: 0; border: 1px solid var(--gold); border-radius: 48% 48% .4rem .4rem / 14% 14% .4rem .4rem; box-shadow: 0 28px 80px rgba(0,0,0,.32); }
.product-mockup img { width: 100%; height: auto; object-fit: contain; }
.offer-copy h2 { color: #fff; }
.offer-copy > p:not(.eyebrow,.microcopy) { color: #ccd6d0; font-size: 1.08rem; }
.offer-list { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: .7rem 1rem; margin: 2rem 0; padding: 0; list-style: none; }
.offer-list li { position: relative; padding-left: 1.55rem; color: #e4e7e2; }
.offer-list li::before { content: "✓"; position: absolute; left: 0; color: var(--gold-soft); font-weight: 900; }
.price { display: grid; margin: 2rem 0; }
.price span { color: #bdc8c1; font-size: .75rem; font-weight: 800; letter-spacing: .13em; text-transform: uppercase; }
.price strong { color: #fff; font: 700 clamp(4.2rem,10vw,6.6rem)/1 var(--serif); letter-spacing: -.06em; }
.price sup { margin-right: .3rem; color: var(--gold-soft); font: 700 1.1rem var(--sans); letter-spacing: 0; vertical-align: top; }
.offer-copy .button { width: min(100%,28rem); }
.microcopy { margin: .8rem 0 0; color: #aebdb4; font-size: .78rem; }
.guarantee-bar { position: relative; display: grid; grid-template-columns: .8fr 1.2fr; gap: 2rem; margin-top: 4rem; padding: 1.5rem; border: 1px solid rgba(255,255,255,.16); background: rgba(255,255,255,.05); }
.guarantee-bar strong { color: var(--gold-soft); font-family: var(--serif); font-size: 1.08rem; }
.guarantee-bar span { color: #bdc8c1; font-size: .9rem; }

.proof-section { background: var(--cream); }
.proof-final-head { max-width: 56rem; margin-bottom: 3rem; text-align: center; }
.proof-final-head h2 { color: var(--emerald); }
.disclaimer { margin-top: 1.5rem; color: var(--muted); font-size: .82rem; text-align: center; }
.faq-section { background: var(--paper); }
.faq-section h2, .faq-section > .reading > .eyebrow { text-align: center; }
.faq-list { border-top: 1px solid var(--line); }
.faq-list details { border-bottom: 1px solid var(--line); }
.faq-list summary { position: relative; padding: 1.4rem 3rem 1.4rem 0; cursor: pointer; font: 600 1.12rem/1.4 var(--serif); list-style: none; }
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary::after { content: "+"; position: absolute; right: .5rem; top: 50%; color: var(--emerald); font: 400 1.6rem/1 var(--sans); transform: translateY(-50%); }
.faq-list details[open] summary::after { content: "−"; }
.faq-list details p { max-width: 41rem; padding-bottom: 1.4rem; color: var(--muted); }
.final-section { background: var(--petrol); color: var(--cream); text-align: center; }
.final-section h2 { color: #fff; }
.final-section > .reading > p:not(.eyebrow) { color: #ced9d7; font-size: 1.12rem; }
.final-section strong { color: var(--gold-soft); }
.final-section .button { margin-top: 1.2rem; }
.final-price { display: block; margin-top: 1rem; color: #acbfbc; font-size: .78rem; }
footer { padding: 2.2rem 1.25rem 6.5rem; background: #041e1a; color: #aebdb5; }
.footer-inner { display: flex; justify-content: space-between; gap: 2rem; align-items: center; }
.footer-inner p { display: grid; margin: 0; }
.footer-inner strong { color: #fff; font-family: var(--serif); }
.footer-inner span { font-size: .78rem; }
.footer-inner nav { display: flex; gap: 1.2rem; font-size: .82rem; }
.mobile-sticky { position: fixed; right: .65rem; bottom: .65rem; left: .65rem; z-index: 30; display: none; grid-template-columns: 1fr auto; gap: .7rem; align-items: center; padding: .65rem; border: 1px solid rgba(255,255,255,.14); border-radius: .35rem; background: rgba(6,46,39,.97); color: #fff; box-shadow: 0 12px 35px rgba(0,0,0,.3); transform: translateY(calc(100% + 2rem)); transition: transform .25s ease; }
.mobile-sticky.is-visible { transform: translateY(0); }
.mobile-sticky span { display: grid; padding-left: .3rem; font-size: .7rem; line-height: 1.3; }
.mobile-sticky strong { color: var(--gold-soft); font-size: .88rem; }
.mobile-sticky a { display: grid; min-height: 2.8rem; place-items: center; padding: .6rem 1rem; background: var(--gold); color: var(--emerald-deep); font-size: .7rem; font-weight: 900; letter-spacing: .08em; text-decoration: none; text-transform: uppercase; }

@media (max-width: 780px) {
  body { text-align: center; } .section { padding-inline: 1.1rem; }
  .button { width: min(100%,24rem); margin-inline: auto; }
  .split, .proof-inline, .belief-compare, .method-visual-grid, .review-map, .transformation-grid, .benefit-layers, .tajweed-intro, .tajweed-gallery, .buildup-inner, .bonus-grid, .offer-grid, .guarantee-bar { grid-template-columns: 1fr; }
  .split, .review-map, .buildup-inner, .offer-grid { gap: 2.2rem; }
  .section-copy, .review-copy, .buildup-copy, .offer-copy { max-width: 34rem; margin-inline: auto; }
  .punch-list { text-align: center; } .proof-inline { gap: 1.8rem; }
  .proof-grid--three, .proof-grid--application, .proof-grid--preoffer { grid-template-columns: 1fr; }
  .proof-slot { min-height: 18rem; }
  .proof-grid { width: min(100%,32.5rem); margin-inline: auto; }
  .proof-media { width: 100%; }
  .proof-media figcaption { text-align: center; }
  .belief-compare { max-width: 31rem; }
  .belief-card { text-align: center; } .compare-mark { transform: rotate(90deg); }
  .method-steps { text-align: left; }
  .method-visual-grid, .review-map { max-width: 39rem; }
  .review-map .editorial-image { grid-row: 1; }
  .review-copy strong { padding: 1rem 0 0; border-top: 2px solid var(--gold); border-left: 0; }
  .state-card { max-width: 32rem; margin-inline: auto; text-align: center; }
  .benefit-layers { max-width: 32rem; margin-inline: auto; }
  .tajweed-intro { text-align: center; }
  .tajweed-benefits { width: min(100%,38rem); margin-inline: auto; }
  .tajweed-gallery { width: min(100%,39rem); margin-inline: auto; }
  .tajweed-gallery .editorial-image { min-height: 0; }
  .deliverables { width: min(100%,34rem); margin-inline: auto; text-align: left; }
  .bonus-grid { width: min(100%,38rem); margin-inline: auto; }
  .product-mockup { width: min(82vw,23rem); margin-inline: auto; }
  .offer-list { width: min(100%,30rem); margin-inline: auto; text-align: left; }
  .offer-copy .button { width: min(100%,28rem); }
  .guarantee-bar { max-width: 34rem; text-align: center; }
  .footer-inner { flex-direction: column; text-align: center; }
  .mobile-sticky { display: grid; }
}
@media (max-width: 480px) {
  .section { padding-inline: 1rem; } .hero { padding-top: 3.2rem; }
  .hero h1 { font-size: clamp(2.55rem,12vw,3.7rem); }
  .hero-visual { margin-inline: -.2rem; }
  .hero-visual img { min-height: 18rem; object-fit: cover; }
  .proof-grid--two, .tajweed-benefits, .deliverables, .offer-list { grid-template-columns: 1fr; }
  .proof-grid--two { max-width: 32.5rem; }
  .proof-grid { gap: 1.75rem; }
  .deliverables article { min-height: auto; border-right: 0; border-bottom: 1px solid var(--line) !important; text-align: center; }
  .deliverables article:last-child { border-bottom: 0 !important; }
  .tajweed-benefits article { border-right: 0; border-bottom: 1px solid var(--line); text-align: center; }
  .tajweed-benefits article:last-child { border-bottom: 0; }
  .bonus-card { grid-template-columns: 1fr; text-align: center; }
  .bonus-card figure { max-height: 20rem; }
  .bonus-card img { object-fit: contain; }
  .offer-list { gap: .55rem; } .offer-list li { text-align: left; }
  .price strong { font-size: clamp(4rem,21vw,5.3rem); }
  .mobile-sticky span { font-size: .66rem; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *,*::before,*::after { scroll-behavior: auto !important; transition-duration: .01ms !important; } }