/* Itqan Academy — deep green, parchment and muted gold; Amiri display; eight-fold star geometry. */
body[data-demo="saquran"] {
  --bg: #f6f2e7; --ink: #1b2f25; --muted: #5f6c63; --card: #fffdf6; --line: #e3dcc6;
  --accent: #1f5a43; --accent-ink: #fff; --accent2: #b8903f; --green: #143a2c; --gold: #c9a55a; --radius: 14px;
  --font: "IBM Plex Sans Arabic", system-ui, sans-serif; --display: "Amiri", serif;
  --pattern: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='56' viewBox='0 0 56 56'%3E%3Cg fill='none' stroke='%23c9a55a' stroke-opacity='.2' stroke-width='1'%3E%3Crect x='17' y='17' width='22' height='22'/%3E%3Crect x='17' y='17' width='22' height='22' transform='rotate(45 28 28)'/%3E%3Ccircle cx='28' cy='28' r='5'/%3E%3Cpath d='M0 28h9M47 28h9M28 0v9M28 47v9'/%3E%3C/g%3E%3C/svg%3E");
  font: 16px/1.85 var(--font);
}
body[data-demo="saquran"] h1, body[data-demo="saquran"] h2, body[data-demo="saquran"] h3 { font-weight: 700; }

/* eight-pointed star ornament */
.iq-star { display: block; position: relative; width: 22px; height: 22px; margin: 0 auto 12px; }
.iq-star::before, .iq-star::after { content: ""; position: absolute; inset: 3px; border: 1.5px solid var(--accent2); }
.iq-star::after { transform: rotate(45deg); }

/* ---------- header: deep green bar with a geometric band ---------- */
body[data-demo="saquran"] #top { display: block; padding: 0; background: var(--green); color: #f1ead6; border: 0; backdrop-filter: none; }
.iq-bar { display: flex; align-items: center; gap: 24px; padding: 10px clamp(16px, 5vw, 60px); }
.iq-brand { display: flex; align-items: center; gap: 12px; }
.iq-medal { width: 46px; height: 46px; border-radius: 50%; background: #fbf7ea; display: grid; place-items: center; box-shadow: 0 0 0 2px var(--green), 0 0 0 3px var(--gold); flex: none; }
.iq-medal img { width: 80%; height: 80%; object-fit: contain; }
.iq-brand b { display: block; font-family: var(--display); font-size: 24px; line-height: 1.1; color: #fff; }
.iq-brand small { display: block; font-size: 12px; color: #c8bf9f; }
.iq-nav { display: flex; gap: 0; margin-inline: auto; }
.iq-nav a { padding: 4px 18px; color: #e6dfc6; font-weight: 500; position: relative; }
.iq-nav a + a::before { content: "✦"; position: absolute; inset-inline-start: -6px; color: var(--gold); font-size: 10px; top: 9px; }
.iq-nav a:hover { color: #fff; }
.iq-end { display: flex; align-items: center; gap: 16px; }
.iq-plain { background: none; border: 0; padding: 0; color: #e6dfc6; font-size: 14px; }
.iq-plain:hover { color: #fff; }
.iq-band { height: 12px; background: var(--pattern) center / 24px 24px, #0f2f23; border-top: 1px solid var(--gold); border-bottom: 1px solid var(--gold); }
.iq-gold-btn, .iq-green-btn, .iq-line-btn { display: inline-flex; align-items: center; justify-content: center; border: 0; border-radius: 6px; padding: 10px 22px; font-weight: 600; font-size: 15px; transition: .2s; }
.iq-gold-btn { background: var(--gold); color: #1b2a20; }
.iq-gold-btn:hover { background: #d8b76c; }
.iq-gold-btn.big, .iq-line-btn { padding: 14px 30px; font-size: 16px; }
.iq-line-btn { color: #f1ead6; box-shadow: inset 0 0 0 1px rgba(241, 234, 214, .5); }
.iq-line-btn:hover { box-shadow: inset 0 0 0 1px var(--gold); color: var(--gold); }
.iq-green-btn { background: var(--accent); color: #fff; }
.iq-green-btn:hover { background: var(--green); }

/* ---------- hero: patterned green panel, octagon frame, medallions ---------- */
body[data-demo="saquran"] #hero { display: block; max-width: none; padding: 0 0 70px; background: var(--pattern), radial-gradient(ellipse at 70% 0%, #1f5a43, var(--green) 70%); color: #f1ead6; position: relative; margin-bottom: 70px; }
.iq-hero { max-width: 1200px; margin: 0 auto; padding: clamp(40px, 6vw, 80px) clamp(16px, 5vw, 60px) 30px; display: grid; grid-template-columns: 1.15fr .85fr; gap: clamp(30px, 5vw, 70px); align-items: center; }
.iq-kick { color: var(--gold); margin: 0 0 14px; font-size: 14.5px; display: inline-flex; gap: 10px; align-items: center; }
.iq-kick::before { content: "✦"; font-size: 11px; }
#hero .iq-hero h1 { font-family: var(--display); font-size: clamp(44px, 5.8vw, 80px); line-height: 1.35; color: #fff; margin: 0 0 16px; }
.iq-lead { font-size: 17.5px; color: #d6d0b8; max-width: 580px; margin: 0 0 30px; }
.iq-ctas { display: flex; gap: 12px; flex-wrap: wrap; }
.iq-frame { clip-path: polygon(29.3% 0, 70.7% 0, 100% 29.3%, 100% 70.7%, 70.7% 100%, 29.3% 100%, 0 70.7%, 0 29.3%); background: var(--gold); padding: 3px; aspect-ratio: 1; max-width: 460px; width: 100%; justify-self: center; }
.iq-oct { width: 100%; height: 100%; clip-path: inherit; background: var(--green); padding: 10px; }
.iq-oct img { width: 100%; height: 100%; object-fit: cover; clip-path: polygon(29.3% 0, 70.7% 0, 100% 29.3%, 100% 70.7%, 70.7% 100%, 29.3% 100%, 0 70.7%, 0 29.3%); }
.iq-medals { list-style: none; margin: 0; padding: 0 16px; position: absolute; inset-inline: 0; bottom: -62px; display: flex; justify-content: center; gap: clamp(14px, 4vw, 48px); }
.iq-medals li { width: 150px; height: 124px; background: var(--card); border-radius: 14px; display: grid; place-content: center; text-align: center; padding: 10px; box-shadow: 0 18px 40px -20px rgba(20, 58, 44, .55), inset 0 0 0 1px var(--line), inset 0 0 0 5px var(--card), inset 0 0 0 6px color-mix(in srgb, var(--gold) 50%, transparent); }
.iq-medals b { font-family: var(--display); font-size: 40px; line-height: 1.1; color: var(--accent); }
.iq-medals span { font-size: 12.5px; color: var(--muted); line-height: 1.45; }

/* ---------- sections ---------- */
.iq-sec { max-width: 1200px; }
.iq-head { text-align: center; margin: 0 auto 30px; max-width: 640px; }
.iq-head h2 { font-family: var(--display); font-size: clamp(34px, 4vw, 50px); color: var(--green); line-height: 1.3; }
.iq-head p { color: var(--muted); margin: 6px 0 0; }
.iq-head.start { text-align: start; margin-inline: 0; } .iq-head.start .iq-star { margin-inline: 0; }

/* teachers */
.iq-seg { display: flex; width: fit-content; margin: 0 auto 30px; padding: 4px; background: #ece6d3; border-radius: 8px; }
.iq-seg button { border: 0; background: none; padding: 8px 22px; border-radius: 6px; font-weight: 600; color: var(--muted); }
.iq-seg button.on { background: var(--card); color: var(--green); box-shadow: 0 2px 8px -3px rgba(0,0,0,.2); }
.iq-teachers { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.iq-teacher { background: var(--card); border-radius: 12px; padding: 10px; box-shadow: inset 0 0 0 1px var(--line); cursor: pointer; display: flex; flex-direction: column; transition: transform .25s, box-shadow .25s; animation: kitpop .4s both; }
.iq-teacher:hover { transform: translateY(-4px); box-shadow: inset 0 0 0 1px var(--gold), 0 24px 40px -28px rgba(20, 58, 44, .6); }
.iq-t-ph { aspect-ratio: 4/4.3; border-radius: 8px 8px 0 0; overflow: hidden; position: relative; }
.iq-t-ph::after { content: ""; position: absolute; inset: auto 0 0; height: 14px; background: var(--pattern) center / 24px 24px, var(--green); border-top: 1px solid var(--gold); }
.iq-t-ph img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.iq-t-in { padding: 16px 10px 8px; display: flex; flex-direction: column; flex: 1; }
.iq-t-in h3 { font-family: var(--display); font-size: 25px; color: var(--green); line-height: 1.4; }
.iq-t-in ul { list-style: none; padding: 0; margin: 8px 0 16px; flex: 1; }
.iq-t-in li { font-size: 14px; color: var(--muted); padding: 4px 0; border-bottom: 1px dashed var(--line); }
.iq-t-in li::before { content: "✦"; color: var(--gold); font-size: 9px; margin-inline-end: 8px; vertical-align: 2px; }
.iq-t-in .iq-green-btn { width: 100%; }

/* how it starts */
.iq-how { background: #efe9d8; margin-top: 30px; }
.iq-how-in { max-width: 1200px; margin: 0 auto; padding: clamp(40px, 6vw, 80px) clamp(16px, 5vw, 60px); display: grid; grid-template-columns: 1fr 1fr; gap: clamp(30px, 5vw, 70px); align-items: center; }
.iq-how-ph { border-radius: 200px 200px 12px 12px; overflow: hidden; aspect-ratio: 4/3.6; border: 6px solid var(--card); box-shadow: 0 0 0 1px var(--gold); }
.iq-how-ph img { width: 100%; height: 100%; object-fit: cover; }
.iq-path { list-style: none; padding: 0; margin: 0; display: grid; gap: 0; position: relative; }
.iq-path li { display: flex; gap: 20px; align-items: flex-start; padding-bottom: 26px; position: relative; }
.iq-path li:not(:last-child)::after { content: ""; position: absolute; inset-inline-start: 25px; top: 52px; bottom: 4px; border-inline-start: 2px dotted var(--gold); }
.iq-num { width: 52px; height: 52px; flex: none; position: relative; display: grid; place-items: center; }
.iq-num::before, .iq-num::after { content: ""; position: absolute; inset: 7px; background: var(--green); }
.iq-num::after { transform: rotate(45deg); }
.iq-num b { position: relative; z-index: 1; color: var(--gold); font-family: var(--display); font-size: 22px; }
.iq-path h3 { font-family: var(--display); font-size: 26px; color: var(--green); }
.iq-path p { margin: 0; color: var(--muted); }

/* plans */
.iq-plans { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; align-items: center; }
.iq-plan { background: var(--card); border-radius: 12px; padding: 30px 26px; box-shadow: inset 0 0 0 1px var(--line); display: flex; flex-direction: column; gap: 6px; text-align: center; position: relative; }
.iq-plan h3 { font-family: var(--display); font-size: 26px; color: var(--green); }
.iq-price { font-family: var(--display); font-size: 38px; color: var(--accent2); margin: 0; line-height: 1.3; }
.iq-plan ul { list-style: none; padding: 16px 0; margin: 8px 0 14px; border-top: 1px solid var(--line); text-align: start; display: grid; gap: 8px; flex: 1; }
.iq-plan li { font-size: 14.5px; color: var(--muted); display: flex; gap: 10px; }
.iq-plan li::before { content: "✓"; color: var(--accent); font-weight: 700; }
.iq-plan.hot { background: var(--pattern), var(--green); color: #f1ead6; padding-block: 44px; box-shadow: 0 30px 50px -30px rgba(20, 58, 44, .8), inset 0 0 0 1px var(--gold), inset 0 0 0 6px var(--green), inset 0 0 0 7px color-mix(in srgb, var(--gold) 60%, transparent); }
.iq-plan.hot h3 { color: #fff; } .iq-plan.hot .iq-price { color: var(--gold); }
.iq-plan.hot ul { border-color: rgba(255,255,255,.15); } .iq-plan.hot li { color: #d6d0b8; } .iq-plan.hot li::before { color: var(--gold); }
.iq-badge { position: absolute; top: -14px; inset-inline: 0; margin: auto; width: fit-content; background: var(--gold); color: #1b2a20; font-size: 13px; font-weight: 700; padding: 4px 16px; border-radius: 999px; }

/* faq */
body[data-demo="saquran"] .faq { max-width: 780px; gap: 10px; }
body[data-demo="saquran"] .faq details { background: var(--card); border: 1px solid var(--line); border-radius: 8px; padding: 16px 20px; border-inline-start: 3px solid var(--gold); }
body[data-demo="saquran"] .faq summary { font-family: var(--display); font-size: 21px; color: var(--green); list-style: none; }
body[data-demo="saquran"] .faq summary::-webkit-details-marker { display: none; }
body[data-demo="saquran"] .faq summary::before { content: "✦"; color: var(--gold); font-size: 11px; margin-inline-end: 10px; vertical-align: 3px; }

/* footer */
body[data-demo="saquran"] #foot { margin-top: 60px; background: var(--pattern), var(--green); color: #e6dfc6; border-top: 4px double var(--gold); padding: 50px 16px 110px; gap: 6px; }
body[data-demo="saquran"] #foot p { margin: 0; color: #bdb594; }
.iq-medal.big { width: 70px; height: 70px; margin-bottom: 6px; }
.iq-foot-name { font-family: var(--display); font-size: 34px; color: #fff; }
body[data-demo="saquran"] #foot .photo-note { color: #9a9478; margin-top: 8px; }

/* forms */
body[data-demo="saquran"] .kit-layer.center { border-radius: 10px; border-top: 4px solid var(--gold); }
body[data-demo="saquran"] .form-sheet h3, body[data-demo="saquran"] .done h3 { font-family: var(--display); font-size: 28px; color: var(--green); }
body[data-demo="saquran"] .btn { border-radius: 6px; }

/* responsive */
@media (max-width: 900px) {
  .iq-nav { display: none; }
  .iq-bar { gap: 10px; }
  .iq-end .iq-gold-btn { display: none; }
  .iq-brand b { font-size: 21px; } .iq-brand small { font-size: 11px; }
  .iq-hero { grid-template-columns: 1fr; text-align: center; padding-top: 34px; gap: 26px; }
  .iq-kick { justify-content: center; }
  .iq-lead { margin-inline: auto; font-size: 16px; }
  .iq-ctas { justify-content: center; }
  .iq-frame { max-width: 300px; order: -1; }
  #hero .iq-hero h1 { font-size: 42px; }
  .iq-medals { gap: 8px; bottom: -56px; }
  .iq-medals li { width: 31%; max-width: 150px; height: 112px; }
  .iq-medals b { font-size: 32px; } .iq-medals span { font-size: 11.5px; }
  .iq-teachers { grid-template-columns: 1fr; gap: 16px; }
  .iq-teacher { display: grid; grid-template-columns: 120px 1fr; gap: 0 14px; padding: 10px; }
  .iq-t-ph { aspect-ratio: auto; height: 100%; min-height: 170px; border-radius: 8px; }
  .iq-t-ph::after { display: none; }
  .iq-t-in { padding: 4px 0; }
  .iq-t-in h3 { font-size: 21px; }
  .iq-t-in ul { margin: 4px 0 10px; } .iq-t-in li { font-size: 13px; padding: 2px 0; }
  .iq-how-in { grid-template-columns: 1fr; }
  .iq-how-ph { aspect-ratio: 16/11; }
  .iq-plans { grid-template-columns: 1fr; gap: 26px; }
  .iq-plan.hot { order: -1; }
}
@media (max-width: 420px) { .iq-brand small { display: none; } .iq-end { gap: 12px; } .iq-plain { font-size: 13px; } }
html[lang="en"] #hero .iq-hero h1 { line-height: 1.1; font-size: clamp(40px, 5vw, 68px); }
html[lang="en"] .iq-head h2 { line-height: 1.15; }