@charset "UTF-8";
@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@400;500;600;700;800;900&display=swap');

:root {
  --color-cyan: #00d9ff;
  --color-navy: #000066;
  --color-deep-navy: #000066;
  --color-white: #ffffff;
  --color-paper-tint: #f2f5fc;
  --color-mid-gray: #5b5f82;
  --color-ink: #21214a;
  --color-line: #d9e1f2;
  --font-latin: 'Cairo', Arial, sans-serif;
  --font-arabic: 'Cairo', Arial, sans-serif;
  --space-3xs: .25rem;
  --space-2xs: .5rem;
  --space-xs: .75rem;
  --space-sm: 1rem;
  --space-md: 1.5rem;
  --space-lg: 2rem;
  --space-xl: 3rem;
  --space-2xl: 4rem;
  --space-3xl: 6rem;
  --space-4xl: 8rem;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; font-size: 16px; }
body { margin: 0; direction: rtl; text-align: right; overflow-x: hidden; background: var(--color-white); color: var(--color-ink); font-family: var(--font-arabic); -webkit-font-smoothing: antialiased; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button, input, select { font: inherit; }
button { cursor: pointer; }
button:disabled { cursor: wait; }
ul { padding: 0; margin: 0; list-style: none; }
h1, h2, h3, h4, p { margin-top: 0; }
:focus-visible { outline: 3px solid var(--color-navy); outline-offset: 4px; }
.bg-deep-navy :focus-visible, .form-card :focus-visible, .floating-cta :focus-visible { outline-color: var(--color-cyan); }

.container { width: min(100% - 3rem, 1160px); margin-inline: auto; }
.section-padding { padding-block: clamp(4.5rem, 8vw, 7rem); }
.bg-deep-navy { color: var(--color-white); background: var(--color-navy); }
.bg-paper { background: var(--color-paper-tint); }
.bg-white { background: var(--color-white); }
.text-cyan { color: var(--color-cyan); }
.text-navy { color: var(--color-navy); }
.text-gray { color: var(--color-mid-gray); }
.text-white { color: var(--color-white); }
.text-ink { color: var(--color-ink); }

.latin-display { font-family: var(--font-latin); font-size: clamp(3.5rem, 6vw, 5rem); font-weight: 900; line-height: 1; letter-spacing: -.055em; }
.arabic-display { font-size: clamp(2.25rem, 4.6vw, 3.75rem); font-weight: 900; line-height: 1.2; }
.arabic-h1 { font-size: clamp(2rem, 3.6vw, 3rem); font-weight: 800; line-height: 1.22; }
.arabic-h2 { font-size: clamp(1.3rem, 2vw, 1.7rem); font-weight: 800; line-height: 1.35; }
.arabic-body { font-size: clamp(1.06rem, 1.3vw, 1.18rem); font-weight: 500; line-height: 1.8; }
.arabic-caption { font-size: .97rem; font-weight: 600; line-height: 1.6; }
.latin-h2 { font-family: var(--font-latin); font-size: 1.25rem; font-weight: 700; }
.latin-caption { font-family: var(--font-latin); font-size: .8rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.section-heading { max-width: 750px; margin: 0 auto 2.75rem; text-align: center; }
.section-eyebrow { display: block; margin-bottom: .65rem; color: var(--color-navy); font-family: var(--font-arabic); font-size: 1rem; font-weight: 800; }
.section-title { margin-bottom: 0; }

.btn { display: inline-flex; align-items: center; justify-content: center; gap: .7rem; min-height: 52px; padding: .8rem 1.65rem; border: 2px solid var(--color-cyan); border-radius: 10px; background: var(--color-cyan); color: var(--color-navy); font-size: 1.17rem; font-weight: 800; line-height: 1.25; text-align: center; transition: background .2s ease, border-color .2s ease, transform .2s ease, box-shadow .2s ease; }
.btn:hover { background: var(--color-white); border-color: var(--color-white); transform: translateY(-2px); }
.btn:active { transform: translateY(0); }

.site-nav { display: flex; align-items: center; min-height: 48px; padding-block: .3rem; border-bottom: 1px solid rgba(0,0,102,.12); background: var(--color-white); }
.site-logo { display: inline-block; flex: none; color: var(--color-white); font-family: var(--font-latin); font-size: clamp(1.25rem, 2vw, 1.5rem); font-weight: 900; letter-spacing: -.055em; line-height: .95; text-align: left; white-space: nowrap; }
.site-logo span { display: block; }
.site-logo span:first-child { color: var(--color-cyan); }
.site-logo span:last-child { color: var(--color-white); }
.nav-message { flex: none; min-width: 0; overflow: hidden; padding-block: .25rem; direction: ltr; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.nav-message-track { display: flex; width: max-content; direction: ltr; animation: nav-message-scroll 22s linear infinite; }
.nav-message-copy { flex: none; padding-inline: 2.25rem; color: var(--color-navy); direction: rtl; font-size: clamp(1rem, 1.4vw, 1.1rem); font-weight: 800; line-height: 1.2; white-space: nowrap; text-shadow: 0 0 8px rgba(0,0,102,.18), 0 0 18px rgba(0,217,255,.15); }
@keyframes nav-message-scroll { to { transform: translateX(-25%); } }

.hero-section { position: relative; }
.hero-content { position: relative; z-index: 2; padding-top: clamp(3rem, 5vw, 4.5rem); text-align: center; }
.hero-content h1 { max-width: 900px; margin: 0 auto 1.1rem; font-size: clamp(2rem, 4vw, 3.5rem); line-height: 1.24; text-wrap: balance; }
.hero-highlight { text-decoration: underline; text-decoration-color: var(--color-cyan); text-decoration-thickness: 3px; text-underline-offset: 8px; }
.hero-emphasis { color: var(--color-cyan); }
.hero-subtitle { max-width: 760px; margin: 0 auto 2rem; color: var(--color-white); font-size: clamp(1.05rem, 1.5vw, 1.3rem); font-weight: 500; line-height: 1.55; text-wrap: balance; }
.hero-video-wrap { position: relative; z-index: 2; width: min(100%, 980px); aspect-ratio: 1668 / 1080; margin: 0 auto; overflow: hidden; border: 2px solid rgba(255,255,255,.45); border-radius: 18px; background: #000; box-shadow: 0 24px 56px rgba(0,0,34,.4); }
.hero-video-wrap iframe { position: absolute; inset: 0; display: block; width: 100%; height: 100%; border: 0; }
.hero-after { position: relative; z-index: 1; margin-top: -80px; padding: calc(80px + 3rem) 1.5rem clamp(4.5rem, 8vw, 6rem); background: var(--color-white); color: var(--color-navy); text-align: center; }
.hero-description { max-width: 850px; margin: 0 auto 2rem; color: var(--color-navy); font-size: clamp(1.18rem, 1.8vw, 1.45rem); font-weight: 600; line-height: 1.65; }
.hero-problem { color: #b4232c; font-weight: 900; }
.hero-outcome { color: #087a43; font-weight: 900; }
.hero-cta { min-width: min(100%, 360px); min-height: 60px; padding-inline: 2.25rem; border-color: var(--color-cyan); background: linear-gradient(110deg, #087a9e, #05528f); color: var(--color-white); box-shadow: 0 0 0 1px rgba(0,217,255,.45), 0 0 18px rgba(0,217,255,.4), 0 14px 34px rgba(0,0,102,.2); animation: hero-cta-glow 2.8s ease-in-out infinite; }
.hero-cta:hover { border-color: #66e4ff; background: linear-gradient(110deg, #0d89ae, #006ea2); color: var(--color-white); box-shadow: 0 0 0 1px rgba(0,217,255,.65), 0 0 28px rgba(0,217,255,.65), 0 16px 36px rgba(0,0,102,.25); animation: none; }
.hero-cta svg { transform: rotate(180deg); translate: 0; transition: translate .24s ease; }
.hero-cta:hover svg { translate: -4px 0; }
@keyframes hero-cta-glow {
  50% { box-shadow: 0 0 0 2px rgba(0,217,255,.6), 0 0 32px rgba(0,217,255,.65), 0 16px 38px rgba(0,0,102,.24); }
}


.proof-section { text-align: center; }
.proof-section > .container { container-type: inline-size; }
.proof-section .section-title { max-width: 100%; margin-inline: auto; font-size: min(3.75rem, 5cqi); white-space: nowrap; }
.student-counter-wrap { display: inline-flex; align-items: center; margin: 1.5rem auto 2.5rem; padding: .55rem 1rem; border: 1px solid var(--color-line); border-radius: 100px; background: var(--color-white); }
.student-counter-wrap .arabic-caption { display: inline-flex; align-items: center; gap: .6rem; font-weight: 800; }
.counter-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--color-cyan); box-shadow: 0 0 0 4px rgba(0,217,255,.18); }
.student-counter-wrap.visible .counter-dot { animation: counter-dot-pop .7s ease-out both; }
@keyframes counter-dot-pop { 50% { box-shadow: 0 0 0 9px rgba(0,217,255,.12); } }
.testi-icon-defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.testi-carousel { width: min(100%, 900px); margin: 0 auto 2.5rem; }
.testi-stack { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; align-items: start; }
.testi-carousel.is-carousel .testi-viewport { overflow: hidden; border-radius: 20px; box-shadow: 0 18px 45px rgba(0,0,102,.1); transition: height .45s ease; }
.testi-carousel.is-carousel .testi-stack { display: flex; gap: 0; align-items: flex-start; direction: ltr; transition: transform .65s cubic-bezier(.22,1,.36,1); }
.testi-carousel.is-carousel .testi-card { flex: 0 0 100%; width: 100%; max-width: none; margin: 0; border-top: 4px solid var(--color-cyan); box-shadow: none; direction: rtl; }
.testi-controls { display: flex; align-items: center; justify-content: center; gap: 1.15rem; margin-top: 1.25rem; }
.testi-controls[hidden] { display: none; }
.testi-arrow { display: grid; place-items: center; width: 44px; height: 44px; border: 1px solid var(--color-line); border-radius: 50%; background: var(--color-white); color: var(--color-navy); box-shadow: 0 5px 15px rgba(0,0,102,.07); transition: background .2s ease, border-color .2s ease, transform .2s ease; }
.testi-arrow:hover { transform: translateY(-2px); border-color: var(--color-cyan); background: #e8faff; }
.testi-arrow svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 2.3; stroke-linecap: round; stroke-linejoin: round; }
.testi-dots { display: flex; align-items: center; gap: .5rem; direction: ltr; }
.testi-dot { width: 10px; height: 10px; padding: 0; border: 0; border-radius: 100px; background: #b8c8e4; transition: width .25s ease, background .25s ease; }
.testi-dot[aria-current="true"] { width: 28px; background: var(--color-navy); }
.testi-card { display: flex; flex-direction: column; min-width: 0; padding: clamp(1.3rem, 2vw, 1.8rem); border: 1px solid var(--color-line); border-radius: 20px; background: var(--color-white); box-shadow: 0 12px 32px rgba(0,0,102,.05); text-align: right; }
.testi-stars { display: flex; align-self: center; gap: .2rem; margin-bottom: 1.25rem; color: #e99b1b; }
.testi-stars svg { width: 22px; height: 22px; fill: currentColor; }
.testi-card.is-active .testi-stars svg { animation: testi-star-pop .35s ease-out both; }
.testi-card.is-active .testi-stars svg:nth-child(2) { animation-delay: .06s; }
.testi-card.is-active .testi-stars svg:nth-child(3) { animation-delay: .12s; }
.testi-card.is-active .testi-stars svg:nth-child(4) { animation-delay: .18s; }
.testi-card.is-active .testi-stars svg:nth-child(5) { animation-delay: .24s; }
@keyframes testi-star-pop { from { opacity: .3; transform: scale(.7); } to { opacity: 1; transform: scale(1); } }
.testi-quote { margin: 0 0 1.5rem; color: var(--color-ink); font-size: clamp(1.02rem, 1.35vw, 1.13rem); font-weight: 500; line-height: 1.75; }
.testi-quote[dir="ltr"] { text-align: left; }
.testi-head { display: flex; align-items: center; gap: .75rem; min-height: 52px; direction: ltr; text-align: left; }
.testi-avatar { flex: none; width: 48px; height: 48px; overflow: hidden; border-radius: 50%; }
.testi-avatar img { width: 100%; height: 100%; object-fit: cover; }
.testi-id strong { display: block; color: var(--color-navy); font-family: var(--font-latin); font-size: .96rem; font-weight: 800; line-height: 1.3; }
.testi-id span { display: block; color: var(--color-mid-gray); font-family: var(--font-latin); font-size: .79rem; line-height: 1.4; }
.testi-results { margin-top: 1.1rem; padding-top: 1rem; border-top: 1px solid var(--color-line); direction: ltr; text-align: left; }
.testi-views { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1rem; }
.testi-views span { padding: .4rem .7rem; border-radius: 8px; background: var(--color-navy); color: var(--color-white); font-family: var(--font-latin); font-size: 1.125rem; font-weight: 900; line-height: 1.2; }
.testi-foot { color: var(--color-navy); font-family: var(--font-latin); font-size: 1rem; font-weight: 800; }
.testi-original { margin-top: 1.15rem; padding-top: .85rem; border-top: 1px solid var(--color-line); }
.testi-original summary { color: var(--color-navy); font-size: .88rem; font-weight: 700; cursor: pointer; }
.testi-original a { display: block; margin-top: .85rem; cursor: zoom-in; }
.testi-original img { width: 100%; border-radius: 8px; background: #0b141a; }
.proof-summary { max-width: 790px; margin: 0 auto; padding: 1.2rem 1.5rem; border-right: 4px solid var(--color-cyan); background: var(--color-white); color: var(--color-navy); font-weight: 700; text-align: right; }
.clients-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .85rem; margin-top: 1.5rem; }
.client-card { display: grid; grid-template-columns: minmax(0, 1fr) max-content; grid-template-rows: auto auto auto; align-items: center; gap: .3rem .65rem; min-width: 0; padding: 1rem 1.1rem; border: 1px solid rgba(0,217,255,.6); border-left: 4px solid var(--color-cyan); border-radius: 10px; background: linear-gradient(135deg, #142890 0%, var(--color-navy) 100%); box-shadow: 0 9px 24px rgba(0,0,102,.17); direction: ltr; text-align: left; }
.client-name { grid-column: 1 / -1; margin: 0 0 .25rem; color: var(--color-white); font-family: var(--font-latin); font-size: .94rem; font-weight: 800; line-height: 1.3; overflow-wrap: anywhere; }
.client-views { grid-column: 1; grid-row: 2 / 4; color: var(--color-cyan); font-family: var(--font-latin); font-size: clamp(1.65rem, 2.4vw, 2rem); font-weight: 900; line-height: 1; white-space: nowrap; }
.client-views small { display: block; margin-top: .35rem; color: #d9edf7; font-size: .63rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.client-meta { grid-column: 2; grid-row: 2; margin: 0; color: #d9edf7; font-family: var(--font-latin); font-size: .75rem; text-align: right; white-space: nowrap; }
.client-followers { grid-column: 2; grid-row: 3; color: var(--color-white); font-family: var(--font-latin); font-size: .75rem; font-weight: 800; text-align: right; white-space: nowrap; }

.curriculum-section { border-bottom: 1px solid var(--color-line); }
.curriculum-section .section-eyebrow, .faq-section .section-eyebrow { font-family: var(--font-latin); font-size: .82rem; letter-spacing: .12em; direction: ltr; }
.roadmap { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.15rem; align-items: start; }
.roadmap-item { display: grid; grid-template-columns: 50px minmax(0, 1fr); gap: 1rem; align-items: start; min-width: 0; }
.roadmap-node { display: grid; place-items: center; width: 50px; height: 50px; border-radius: 10px; background: var(--color-cyan); color: var(--color-navy); font-family: var(--font-latin); font-size: 1rem; font-weight: 900; direction: ltr; }
.roadmap-card { min-width: 0; overflow: hidden; border: 1px solid var(--color-line); border-radius: 10px; background: var(--color-paper-tint); transition: border-color .25s ease, box-shadow .25s ease; }
.roadmap-summary { display: flex; align-items: center; gap: 1rem; min-height: 74px; padding: 1.15rem 1.4rem; cursor: pointer; list-style: none; }
.roadmap-summary::-webkit-details-marker { display: none; }
.roadmap-summary h3 { flex: 1; margin: 0; color: var(--color-navy); font-size: 1.18rem; }
.roadmap-summary::after { flex: none; width: .65rem; height: .65rem; border-right: 2px solid var(--color-navy); border-bottom: 2px solid var(--color-navy); transform: rotate(45deg); transition: transform .25s ease; content: ''; }
.roadmap-card[open] .roadmap-summary { border-bottom: 1px solid var(--color-line); }
.roadmap-card[open] .roadmap-summary::after { transform: rotate(225deg); }
.roadmap-summary:focus-visible { outline: 3px solid var(--color-cyan); outline-offset: -3px; }
.roadmap-lessons { margin: 0; padding: 1.1rem 1.4rem 1.35rem; list-style: none; counter-reset: lesson; color: var(--color-ink); font-size: 1.04rem; line-height: 1.7; }
.roadmap-card[open] .roadmap-lessons { animation: roadmap-reveal .25s ease-out; }
@keyframes roadmap-reveal { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
.roadmap-lessons li { position: relative; padding-inline-start: 1.9rem; counter-increment: lesson; }
.roadmap-lessons li + li { margin-top: .65rem; }
.roadmap-lessons li::before { position: absolute; inset-inline-start: 0; top: .14rem; display: grid; place-items: center; width: 1.4rem; height: 1.4rem; border-radius: 50%; background: rgba(0,217,255,.18); color: var(--color-navy); font-family: var(--font-latin); font-size: .74rem; font-weight: 800; line-height: 1; content: counter(lesson); }
.roadmap-item--gift .roadmap-node { background: var(--color-navy); color: var(--color-white); box-shadow: 0 0 0 4px rgba(0,217,255,.2); }
.roadmap-item--gift .roadmap-card { border: 2px solid var(--color-cyan); background: linear-gradient(135deg, #e8faff 0%, var(--color-white) 80%); box-shadow: 0 10px 25px rgba(0,217,255,.13); }
.roadmap-item--gift .roadmap-summary h3 { display: flex; flex-direction: column; align-items: flex-start; gap: .4rem; }
.roadmap-item--gift .roadmap-summary h3 bdi { white-space: nowrap; }
.roadmap-gift-badge { display: inline-flex; align-items: center; gap: .35rem; padding: .25rem .65rem; border-radius: 100px; background: var(--color-navy); color: var(--color-white); font-size: .77rem; font-weight: 800; line-height: 1.4; white-space: nowrap; }
.roadmap-gift-badge svg { flex: none; color: var(--color-cyan); }

.join-grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1fr); gap: clamp(2rem, 5vw, 5rem); align-items: start; }
.price-panel { padding: clamp(1.8rem, 3vw, 2.8rem); border: 1px solid var(--color-line); border-radius: 14px; background: var(--color-white); }
.price-panel h2 { margin-bottom: .65rem; }
.price-intro { max-width: 410px; margin-bottom: 1.8rem; }
.price-row { display: flex; align-items: baseline; gap: .6rem; flex-wrap: wrap; margin-bottom: 1.8rem; color: var(--color-navy); }
.price-row .latin-display { font-size: clamp(3.8rem, 6vw, 5rem); direction: ltr; }
.price-row .arabic-h2 { margin: 0; }
.price-old { margin-inline-start: .65rem; color: var(--color-mid-gray); font-size: 1.13rem; text-decoration: line-through; direction: ltr; }
.custom-list { margin-bottom: 2rem; }
.custom-list li { position: relative; padding-right: 1.7rem; margin-bottom: .75rem; }
.custom-list li::before { position: absolute; right: 0; top: .62rem; width: .55rem; height: .55rem; border-radius: 50%; background: var(--color-cyan); content: ''; }
.offer-note { padding: 1rem 1.2rem; border-right: 4px solid var(--color-cyan); background: var(--color-paper-tint); }
.offer-note p { margin: 0; color: var(--color-navy); font-weight: 800; }
.offer-note .early-bird-note { color: #b91c1c; text-shadow: 0 0 8px rgba(220, 38, 38, .3), 0 0 18px rgba(220, 38, 38, .18); }
.form-card { padding: clamp(1.7rem, 3.8vw, 3rem); border-radius: 14px; background: var(--color-navy); color: var(--color-white); }
.form-heading { margin-bottom: 2rem; text-align: center; }
.form-heading h3 { margin-bottom: .4rem; }
.form-heading p { margin-bottom: 0; }
.form-group { position: relative; margin-bottom: 1.35rem; }
.form-group input, .form-group select { width: 100%; min-height: 58px; padding: 1.35rem .9rem .45rem; border: 1px solid rgba(255,255,255,.68); border-radius: 8px; outline: none; background: rgba(255,255,255,.06); color: var(--color-white); font-size: 1.04rem; transition: border-color .2s ease, background .2s ease, box-shadow .2s ease; }
.form-group select { appearance: none; padding-left: 2.25rem; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231AC8ED' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: left .8rem center; background-size: 1.15rem; }
.form-group select option { background: var(--color-white); color: var(--color-navy); }
.form-group input:focus, .form-group select:focus { border-color: var(--color-cyan); background-color: rgba(255,255,255,.1); box-shadow: 0 0 0 3px rgba(0,217,255,.18); }
.form-group label { position: absolute; top: 1rem; right: .9rem; color: rgba(255,255,255,.85); font-size: 1rem; pointer-events: none; transition: top .2s ease, font-size .2s ease, color .2s ease; }
.form-group input:focus ~ label, .form-group input:not(:placeholder-shown) ~ label, .form-group select:focus ~ label, .form-group select:valid ~ label { top: .3rem; color: var(--color-cyan); font-size: .75rem; font-weight: 800; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.form-submit { width: 100%; margin-top: .35rem; }
.payment-note { display: flex; align-items: center; justify-content: center; gap: .45rem; margin-top: 1rem; color: rgba(255,255,255,.8); text-align: center; }
.payment-note svg { flex: none; }
.payment-note span { margin: 0; }
#formSuccess { display: none; padding: 1.25rem; margin-top: 1.2rem; border: 1px solid var(--color-cyan); border-radius: 8px; background: rgba(0,217,255,.13); text-align: center; }
#formSuccess p { margin-bottom: .3rem; }
#formSuccess p:last-child { margin-bottom: 0; }
#formSuccess .btn { margin-top: 1rem; }

.registration-review { width: min(540px, calc(100% - 2rem)); max-height: calc(100dvh - 2rem); margin: auto; padding: 1.75rem; border: 1px solid var(--color-line); border-top: 5px solid var(--color-cyan); border-radius: 18px; background: white; color: var(--color-navy); font-family: var(--font-arabic); text-align: right; overflow-y: auto; box-shadow: 0 24px 80px rgba(0,0,34,.25); }
.registration-review::backdrop { background: rgba(0,0,34,.6); }
.registration-review h2 { margin: 0 0 .35rem; font-size: 1.65rem; }
.registration-review p { margin: 0; line-height: 1.8; }
.registration-review-details { margin: 1.25rem 0; }
.registration-review-details > div { display: grid; grid-template-columns: 110px minmax(0,1fr); gap: 1rem; padding: .65rem 0; border-bottom: 1px solid var(--color-line); }
.registration-review-details dt { font-size: .9rem; color: #555b70; }
.registration-review-details dd { margin: 0; font-size: 1rem; overflow-wrap: anywhere; text-align: start; }
.registration-review-note { color: #555b70; font-size: .9rem; }
.registration-review-actions { display: flex; flex-direction: column; gap: .75rem; margin-top: 1.25rem; }
.registration-review-actions .btn { width: 100%; font-size: 1rem; }
.registration-review-edit { min-height: 44px; border: 1px solid var(--color-line); border-radius: 8px; background: white; color: var(--color-navy); font: inherit; cursor: pointer; }
.registration-review-edit:hover { background: #f4f6fb; }
@media (max-width: 430px) {
  .registration-review { padding: 1.25rem; }
  .registration-review-details > div { grid-template-columns: 95px minmax(0,1fr); gap: .5rem; }
}

.faq-section .container { max-width: 850px; }
.faq-item { margin-bottom: .75rem; overflow: hidden; border: 1px solid var(--color-line); border-radius: 10px; background: var(--color-white); transition: border-color .25s ease, box-shadow .25s ease; }
.faq-item.open { border-color: var(--color-navy); }
.faq-header { display: flex; align-items: center; justify-content: space-between; gap: 1.3rem; width: 100%; min-height: 72px; padding: 1.1rem 1.4rem; border: 0; background: transparent; color: var(--color-navy); text-align: right; }
.faq-header .arabic-h2 { font-size: 1.2rem; }
.faq-icon { display: grid; place-items: center; flex: none; width: 34px; height: 34px; border: 1px solid var(--color-line); border-radius: 50%; font-family: var(--font-latin); font-size: 1.35rem; font-weight: 400; transition: transform .25s ease, background .25s ease; }
.faq-item.open .faq-icon { transform: rotate(45deg); background: var(--color-cyan); border-color: var(--color-cyan); }
.faq-content { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .3s ease; }
.faq-content.open { grid-template-rows: 1fr; }
.faq-inner { overflow: hidden; padding-inline: 1.4rem; }
.faq-inner p { margin-bottom: .85rem; color: var(--color-ink); }
.faq-inner p:last-child { padding-bottom: 1.25rem !important; margin-bottom: 0; }

.disclaimer-section { padding-top: 2.5rem; border-top: 5px solid var(--color-cyan); }
.disclaimer-section .container { max-width: 1000px; }
.disclaimer-section p { margin-bottom: 0; color: rgba(255,255,255,.82); font-size: .87rem; font-weight: 400; line-height: 1.8; }
.disclaimer-section strong { color: var(--color-white); }
.site-footer { padding: 2.8rem 0 2rem; }
.footer-inner { display: flex; align-items: end; justify-content: space-between; gap: 2rem; flex-wrap: wrap; padding-top: 1.6rem; border-top: 1px solid rgba(255,255,255,.25); }
.footer-tagline { margin: .35rem 0 0; color: var(--color-cyan); }
.footer-links { display: flex; align-items: center; gap: 1.4rem; flex-wrap: wrap; }
.footer-links a { color: var(--color-white); text-decoration: underline; text-decoration-color: var(--color-cyan); text-underline-offset: 5px; transition: text-underline-offset .2s ease; }
.footer-links a:hover { text-underline-offset: 8px; }

.fade-up { opacity: 0; transform: translateY(16px); transition: opacity .6s ease, transform .6s cubic-bezier(.2,.7,.25,1), border-color .25s ease, box-shadow .25s ease; }
.fade-up.visible { opacity: 1; transform: none; }
.proof-section .section-title.fade-up { transition-delay: .06s; }
.student-counter-wrap.fade-up { transition-delay: .12s; }
@media (hover: hover) and (pointer: fine) {
  .testi-card.fade-up.visible:hover, .client-card.fade-up.visible:hover, .roadmap-item.fade-up.visible:hover, .price-panel.fade-up.visible:hover { transform: translateY(-4px); }
  .testi-card:hover, .client-card:hover, .price-panel:hover { border-color: rgba(0,217,255,.65); box-shadow: 0 18px 42px rgba(0,0,102,.12); }
  .client-card:hover { border-color: var(--color-cyan); box-shadow: 0 18px 42px rgba(0,0,102,.24), 0 0 18px rgba(0,217,255,.22); }
  .roadmap-item:hover .roadmap-card { border-color: rgba(0,217,255,.65); box-shadow: 0 12px 26px rgba(0,0,102,.08); }
  .faq-item:hover { border-color: rgba(0,217,255,.7); box-shadow: 0 8px 20px rgba(0,0,102,.06); }
  .testi-original summary:hover { color: #087a9e; }
}
.floating-cta { position: fixed; bottom: -100px; left: 50%; z-index: 1000; display: flex; transform: translateX(-50%); transition: bottom .35s ease, filter .45s ease; }
.floating-cta.visible { bottom: 1.25rem; }
.floating-cta .btn { min-height: 52px; padding-inline: 1.7rem; border: 2px solid var(--color-white); border-radius: 100px; box-shadow: 0 12px 30px rgba(0,0,34,.25); white-space: nowrap; }
.floating-cta .btn:hover { border-color: var(--color-navy); background: var(--color-navy); color: var(--color-white); }

@media (max-width: 950px) {
  .testi-stack { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .testi-card:last-child { grid-column: 1 / -1; max-width: 490px; margin-inline: auto; }
  .clients-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .join-grid { grid-template-columns: 1fr; gap: 2rem; }
  .price-panel, .form-card { width: min(100%, 690px); margin-inline: auto; }
}

@media (max-width: 700px) {
  .container { width: min(100% - 2rem, 1160px); }
  .section-padding { padding-block: 4.2rem; }
  .site-nav { min-height: 44px; padding-block: .25rem; }
  .site-logo { font-size: 1.12rem; }
  .nav-message { padding-block: .2rem; }
  .nav-message-copy { font-size: 1rem; }
  .hero-content { padding-top: 2.75rem; }
  .hero-content h1 { font-size: clamp(1.85rem, 6vw, 2.4rem); }
  .hero-subtitle { margin-bottom: 1.6rem; font-size: 1.05rem; }
  .hero-video-wrap { border-radius: 12px; }
  .video-play-button { width: 62px; height: 62px; }
  .hero-after { margin-top: -42px; padding-top: calc(42px + 2.5rem); }
  .hero-description { margin-bottom: 1.7rem; }
  .testi-stack { grid-template-columns: 1fr; }
  .testi-card:last-child { grid-column: auto; max-width: none; }
  .roadmap { grid-template-columns: 1fr; }
  .form-row { grid-template-columns: 1fr; gap: 0; }
  .footer-inner { align-items: start; }
}

@media (max-width: 430px) {
  .site-logo { font-size: 1.05rem; }
  .hero-content h1 { font-size: 1.9rem; }
  .clients-grid { gap: .65rem; }
  .client-card { gap: .2rem .35rem; padding: .8rem .65rem; }
  .client-name { font-size: .82rem; }
  .client-views { font-size: 1.45rem; }
  .client-meta, .client-followers { font-size: .65rem; }
  .roadmap-item { grid-template-columns: 40px minmax(0, 1fr); gap: .7rem; }
  .roadmap-node { width: 40px; height: 40px; font-size: .85rem; }
  .roadmap-summary { min-height: 64px; padding: .95rem 1rem; }
  .roadmap-lessons { padding: 1rem 1rem 1.15rem; }
  .price-panel, .form-card { padding: 1.4rem; }
  .faq-header { padding-inline: 1rem; }
  .faq-inner { padding-inline: 1rem; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition-duration: .01ms !important; }
  .nav-message { -webkit-mask-image: none; mask-image: none; }
  .nav-message-track { width: 100%; animation: none !important; }
  .nav-message-copy { flex: 1 1 auto; padding-inline: 0; text-align: center; white-space: normal; }
  .nav-message-copy:not(:first-child) { display: none; }
  .fade-up { opacity: 1; transform: none; }
  .btn:hover { transform: none; }
  .testi-card.fade-up.visible:hover, .client-card.fade-up.visible:hover, .roadmap-item.fade-up.visible:hover, .price-panel.fade-up.visible:hover { transform: none; }
}