/* ==========================================================================
   BBC English Academy — premium design system
   Identity restored from the academy's own earlier design:
   near-black #0A0A0A, BBC red #D60000 / #FF2D2D,
   Inter for UI, Playfair Display for display headlines, Tajawal for Arabic.
   Mobile-first. One stylesheet shared by the frontend-only demo and the
   full-stack frontend so the two never diverge again.
   ========================================================================== */

:root{
  --bg:#0a0a0a;
  --bg-2:#111111;
  --bg-3:#181818;
  --bg-card:#141414;
  --red:#d60000;
  --red-bright:#ff2d2d;
  --red-soft:#ff7a7a;
  --red-glow:rgba(214,0,0,.25);
  --white:#ffffff;
  --gray:#cccccc;
  --gray-dim:#9a9a9a;
  --border:rgba(255,255,255,.09);
  --border-strong:rgba(255,255,255,.18);
  --font-sans:'Inter','Tajawal',system-ui,-apple-system,'Segoe UI',Arial,sans-serif;
  --font-serif:'Playfair Display','Tajawal',Georgia,serif;
  --radius:12px;
  --radius-lg:20px;
  --shadow:0 8px 40px rgba(0,0,0,.5);
  --shadow-red:0 8px 40px rgba(214,0,0,.22);
  --ease:.35s cubic-bezier(.4,0,.2,1);
  --wrap:1200px;
}

/* ---------- Reset & base ---------- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;font-size:16px;overflow-x:hidden}
body{background:var(--bg);color:var(--white);font-family:var(--font-sans);line-height:1.65;overflow-x:hidden;-webkit-font-smoothing:antialiased}
html[dir="rtl"] body{font-family:'Tajawal','Inter',system-ui,sans-serif}
a{color:inherit;text-decoration:none}
a:hover{color:var(--red-soft)}
img{max-width:100%;display:block}
ul,ol{list-style-position:inside}
button{cursor:pointer;border:0;background:none;font-family:inherit;color:inherit}
input,select,textarea{font-family:inherit}
::selection{background:var(--red);color:#fff}
:focus{outline:none}
:focus-visible{outline:2px solid var(--red-bright);outline-offset:3px;border-radius:4px}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip-link{position:absolute;inset-inline-start:16px;top:-60px;z-index:2000;background:var(--red);color:#fff;padding:10px 18px;border-radius:8px;font-weight:700;transition:top .2s}
.skip-link:focus{top:12px}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 24px}
main.wrap{padding-bottom:24px}
section{padding:88px 0}
.muted{color:var(--gray-dim)}
h1,h2,h3,h4{font-family:var(--font-serif);line-height:1.2;letter-spacing:-.01em}
html[dir="rtl"] h1,html[dir="rtl"] h2,html[dir="rtl"] h3,html[dir="rtl"] h4{font-family:'Tajawal','Inter',sans-serif;font-weight:800;letter-spacing:0}
h1{font-size:clamp(1.9rem,4vw,2.6rem);margin-bottom:16px}
h2{font-size:clamp(1.5rem,3vw,2rem);margin-bottom:14px}
h3{font-size:1.15rem;margin-bottom:8px}
p{margin-bottom:12px}
p:last-child{margin-bottom:0}

/* ---------- Header (sticky, blurred — never wraps) ---------- */
header.site{position:sticky;top:0;z-index:1000;background:rgba(10,10,10,.88);backdrop-filter:blur(20px) saturate(180%);-webkit-backdrop-filter:blur(20px) saturate(180%);border-bottom:1px solid var(--border)}
.nav{display:flex;align-items:center;justify-content:space-between;gap:16px;height:72px;flex-wrap:nowrap}
.logo{display:flex;flex-direction:column;line-height:1.05;flex-shrink:0}
.logo:hover{color:inherit}
.logo-bbc{font-size:1.65rem;font-weight:900;letter-spacing:.08em;color:var(--red);text-shadow:0 0 24px var(--red-glow)}
.logo-sub{font-size:.58rem;letter-spacing:.24em;text-transform:uppercase;color:var(--gray-dim);font-weight:600}
nav.main{display:flex;align-items:center;gap:2px;flex-wrap:nowrap;white-space:nowrap}
nav.main a{padding:8px 11px;font-size:.86rem;font-weight:500;color:var(--gray);border-radius:8px;position:relative;transition:color var(--ease)}
nav.main a::after{content:'';position:absolute;bottom:2px;inset-inline:11px;height:1px;background:var(--red);transform:scaleX(0);transform-origin:center;transition:transform .3s ease}
nav.main a:hover{color:var(--white)}
nav.main a:hover::after,nav.main a.active::after{transform:scaleX(1)}
nav.main a.active{color:var(--white)}
.nav-actions{display:flex;align-items:center;gap:10px;flex-shrink:0}
.langbtn{background:transparent;border:1px solid var(--border-strong);color:var(--gray);padding:7px 13px;border-radius:8px;font-size:.82rem;font-weight:700;transition:all var(--ease)}
.langbtn:hover{color:#fff;border-color:var(--red)}
.hamburger{display:none;flex-direction:column;gap:5px;width:40px;height:40px;align-items:center;justify-content:center;border:1px solid var(--border-strong);border-radius:8px;flex-shrink:0}
.hamburger span{display:block;width:18px;height:2px;background:var(--white);border-radius:2px;transition:transform .3s ease,opacity .3s ease}
.hamburger.open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.hamburger.open span:nth-child(2){opacity:0}
.hamburger.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.nav-cta{display:none}

/* ---------- Buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:14px 30px;border-radius:12px;font-size:.92rem;font-weight:700;letter-spacing:.02em;transition:all var(--ease);position:relative;overflow:hidden;text-align:center}
.btn::before{content:'';position:absolute;inset:0;background:rgba(255,255,255,.07);transform:translateX(-100%);transition:transform .4s ease}
.btn:hover::before{transform:translateX(0)}
.btn,.btn-primary,a.btn-primary{background:linear-gradient(135deg,var(--red),var(--red-bright));color:#fff;box-shadow:0 4px 20px rgba(214,0,0,.35)}
.btn:hover,.btn-primary:hover{transform:translateY(-2px);box-shadow:0 8px 32px rgba(214,0,0,.5);color:#fff}
.btn.outline,.btn.teal{background:transparent;color:#fff;border:1px solid rgba(255,255,255,.28);box-shadow:none}
.btn.outline:hover,.btn.teal:hover{border-color:var(--red);color:var(--red-soft);transform:translateY(-2px);box-shadow:0 4px 20px rgba(214,0,0,.15)}
.btn.small{padding:9px 18px;font-size:.85rem;border-radius:10px}
.btn.full{width:100%}

/* ---------- Hero (reference design: dark, faint letters, sparkles) ---------- */
.hero{position:relative;overflow:hidden;background:radial-gradient(ellipse 70% 50% at 50% 0%,rgba(214,0,0,.16),transparent 60%),var(--bg);border:1px solid var(--border);border-radius:24px;padding:104px 24px 72px;text-align:center;margin:32px 0 8px}
.hero-letters{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.hero-letters span{position:absolute;font-family:var(--font-serif);font-weight:900;color:rgba(255,255,255,.045);line-height:1;user-select:none}
.hero-letters .l-a{top:-4%;inset-inline-start:2%;font-size:clamp(200px,30vw,430px)}
.hero-letters .l-n{top:38%;inset-inline-start:16%;font-size:clamp(140px,20vw,280px)}
.hero-letters .l-c{top:-2%;inset-inline-end:4%;font-size:clamp(180px,26vw,380px)}
.hero-letters .l-b{bottom:-6%;inset-inline-start:38%;font-size:clamp(160px,22vw,320px)}
.hero-letters .l-e{top:52%;inset-inline-end:10%;font-size:clamp(130px,18vw,260px)}
.hero-sparkle{position:absolute;width:5px;height:5px;border-radius:50%;background:var(--red-bright);box-shadow:0 0 14px 3px rgba(255,45,45,.55);pointer-events:none;animation:twinkle 3.2s ease-in-out infinite}
.hero-sparkle.s2{width:3px;height:3px;animation-delay:1.1s}
.hero-sparkle.s3{width:4px;height:4px;animation-delay:2s}
@keyframes twinkle{0%,100%{opacity:.25;transform:scale(.8)}50%{opacity:1;transform:scale(1.25)}}
.hero-inner{position:relative;z-index:2;max-width:820px;margin:0 auto}
.pill{display:inline-block;padding:8px 22px;border:1px solid rgba(214,0,0,.55);border-radius:100px;font-size:.74rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--red-soft);margin-bottom:28px}
.hero h1{font-size:clamp(2.6rem,7vw,5rem);font-weight:900;line-height:1.06;letter-spacing:-.02em;margin-bottom:24px}
.hero-accent{color:var(--red-bright);text-shadow:0 0 60px rgba(214,0,0,.45)}
.hero p{font-size:clamp(1rem,2vw,1.16rem);color:var(--gray);line-height:1.8;max-width:660px;margin:0 auto 40px}
.hero-buttons{display:flex;gap:16px;justify-content:center;flex-wrap:wrap;margin-bottom:56px}
.hero-stats{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;max-width:720px;margin:0 auto;text-align:center}
.hero-stat{background:var(--bg-card);border:1px solid var(--border);border-radius:16px;padding:26px 16px}
.hero-stat strong{display:block;font-size:clamp(1.6rem,4vw,2.2rem);font-weight:800;line-height:1.1;margin-bottom:4px}
.hero-stat span{font-size:.8rem;color:var(--gray-dim);letter-spacing:.05em}

/* ---------- Sections, grids, cards ---------- */
.section-header{text-align:center;max-width:680px;margin:0 auto 48px}
.section-tag{display:inline-block;padding:6px 18px;border:1px solid rgba(214,0,0,.35);border-radius:100px;font-size:.74rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--red-soft);margin-bottom:18px}
.section-title{font-size:clamp(1.9rem,4vw,2.75rem);font-weight:700;line-height:1.2;margin-bottom:16px}
.section-subtitle{color:var(--gray-dim);line-height:1.75}
.grid{display:grid;gap:24px}
.grid2{grid-template-columns:repeat(2,1fr)}
.grid3{grid-template-columns:repeat(3,1fr)}
.grid4{grid-template-columns:repeat(4,1fr)}
.card{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-lg);padding:28px 24px;transition:border-color var(--ease),transform var(--ease),box-shadow var(--ease)}
.card:hover{border-color:rgba(214,0,0,.3);transform:translateY(-2px);box-shadow:var(--shadow-red)}
.card h3{margin-top:0}
.card p{color:var(--gray-dim);font-size:.92rem}
.tag{display:inline-block;background:rgba(214,0,0,.12);color:var(--red-soft);border:1px solid rgba(214,0,0,.25);padding:4px 12px;border-radius:100px;font-size:.74rem;font-weight:700;letter-spacing:.04em;margin-bottom:12px}
.price{font-family:var(--font-serif);font-size:1.9rem;font-weight:700;color:#fff}
.about-photo{border-radius:var(--radius-lg);overflow:hidden;border:1px solid var(--border);margin:8px 0 32px}
.about-photo img{width:100%;height:auto;aspect-ratio:16/10;object-fit:cover}

/* ---------- Forms, tables, misc ---------- */
.field{margin-bottom:18px}
label{display:block;font-size:.84rem;font-weight:600;color:var(--gray);margin-bottom:8px;letter-spacing:.02em}
input,select,textarea{width:100%;padding:14px 16px;background:var(--bg-3);border:1px solid var(--border-strong);border-radius:var(--radius);color:#fff;font-size:.92rem;outline:none;transition:border-color var(--ease),box-shadow var(--ease)}
input::placeholder,textarea::placeholder{color:var(--gray-dim)}
input:focus,select:focus,textarea:focus{border-color:rgba(214,0,0,.55);box-shadow:0 0 0 3px rgba(214,0,0,.12)}
textarea{resize:vertical;min-height:120px}
input[type="radio"],input[type="checkbox"]{width:auto;accent-color:var(--red)}
table{width:100%;border-collapse:collapse;font-size:.9rem}
th,td{padding:12px;border-bottom:1px solid var(--border);text-align:start}
th{color:var(--gray);font-size:.8rem;letter-spacing:.05em;text-transform:uppercase}
.bar{height:10px;background:#222;border-radius:999px;overflow:hidden}
.bar i{display:block;height:100%;background:linear-gradient(90deg,var(--red),var(--red-bright))}
.alert{background:rgba(255,180,0,.08);border:1px solid rgba(255,180,0,.35);padding:14px 18px;border-radius:var(--radius);color:#ffcf5c}
.success{background:rgba(0,180,80,.1);border:1px solid rgba(0,180,80,.35);padding:18px;border-radius:var(--radius);color:#4ade80}
.faq-item{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);padding:20px 24px;margin-bottom:12px}
.faq-item summary{font-weight:700;cursor:pointer;list-style-position:outside}
.faq-item summary:hover{color:var(--red-soft)}
.quiz-opt{display:block;width:100%;text-align:start;border:1px solid var(--border-strong);border-radius:10px;padding:12px 16px;margin:8px 0;cursor:pointer;background:var(--bg-card);color:#fff;font-size:.95rem;transition:all var(--ease)}
.quiz-opt:hover{border-color:var(--red);background:rgba(214,0,0,.08)}
.demo-note{display:none}

/* ---------- Footer ---------- */
footer{background:var(--bg);border-top:1px solid var(--border);margin-top:48px;padding:64px 0 0}
footer .footer-grid{padding-bottom:48px}
.footer-brand p{font-size:.86rem;color:var(--gray-dim);line-height:1.75;margin-top:14px;max-width:300px}
.footer-links h5{font-family:var(--font-sans);font-size:.84rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;margin-bottom:18px}
.footer-links ul{list-style:none}
.footer-links li{margin-bottom:10px;font-size:.86rem;color:var(--gray-dim)}
.footer-links a:hover{color:var(--red-soft)}
.footer-bottom{border-top:1px solid var(--border);padding:22px 0;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px}
.footer-bottom p{font-size:.8rem;color:var(--gray-dim);margin:0}

/* ---------- Responsive ---------- */
@media (max-width:1024px){
  .grid4{grid-template-columns:repeat(2,1fr)}
  .grid3{grid-template-columns:repeat(2,1fr)}
  .hamburger{display:flex}
  nav.main{position:fixed;top:72px;inset-inline:0;background:#0a0a0a;max-height:calc(100vh - 72px);overflow-y:auto;flex-direction:column;align-items:stretch;gap:0;padding:12px 0 24px;border-bottom:1px solid var(--border);transform:translateY(-8px);opacity:0;pointer-events:none;transition:transform .3s ease,opacity .3s ease;z-index:999}
  nav.main.open{transform:translateY(0);opacity:1;pointer-events:auto}
  nav.main a{padding:12px 28px;font-size:1rem;border-radius:0}
  nav.main a::after{display:none}
  nav.main a.nav-secondary{display:block}
  .nav-cta{display:flex;flex-direction:column;gap:10px;padding:12px 28px 8px}
  .nav-cta .btn{width:100%}
  .nav-actions .btn{display:none}
}
@media (min-width:1025px){
  nav.main a.nav-secondary{display:none}
}
@media (max-width:768px){
  section{padding:40px 0}
  .wrap{padding:0 20px}
  .grid2,.grid3,.grid4{grid-template-columns:1fr}
  .hero{padding:72px 20px 56px;margin-top:20px}
  .hero-buttons{flex-direction:column;align-items:stretch}
  .hero-buttons .btn{width:100%}
  .hero-stats{gap:12px}
  footer .footer-grid{grid-template-columns:1fr}
  .footer-bottom{flex-direction:column;text-align:center}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none !important;transition:none !important}
  html{scroll-behavior:auto}
}

/* ---------- Polish (ui-ux-pro-max principles, BBC identity kept) ---------- */
.hero-stat{transition:border-color var(--ease)}
.hero-stat:hover{border-color:rgba(214,0,0,.35)}
.badge-ok{display:inline-block;background:rgba(0,180,80,.14);color:#4ade80;border:1px solid rgba(0,180,80,.35);padding:2px 12px;border-radius:100px;font-size:.78rem;font-weight:700}
.badge-pending{display:inline-block;background:rgba(255,180,0,.12);color:#ffcf5c;border:1px solid rgba(255,180,0,.35);padding:2px 12px;border-radius:100px;font-size:.78rem;font-weight:700}
.teacher-icon{width:44px;height:44px;color:var(--red);margin-bottom:12px}
.how-steps .card{position:relative}
.step-num{font-family:var(--font-serif);font-size:2.6rem;font-weight:900;color:var(--red);line-height:1;margin-bottom:12px}
.final-cta{position:relative;overflow:hidden;text-align:center;background:radial-gradient(ellipse 60% 80% at 50% 0%,rgba(214,0,0,.14),transparent 65%),var(--bg-card);border:1px solid var(--border);border-radius:24px;padding:72px 24px}
.final-cta h2{font-size:clamp(1.8rem,4vw,2.6rem);margin-bottom:14px}
.final-cta p{color:var(--gray);max-width:560px;margin:0 auto 32px}
html.js-reveal .reveal{opacity:0;transform:translateY(12px);transition:opacity .35s ease,transform .35s ease}
html.js-reveal .reveal.is-visible{opacity:1;transform:none}

/* --- Fix polish: form spacing, mobile card padding, button hierarchy --- */
.field{margin-bottom:1.1rem}
.field label{display:block;font-weight:700}
.field label span{display:inline-block;margin-bottom:.35rem}
.field input,.field select,.field textarea{margin-top:0}
input,select,textarea{font-size:1rem}
.btn{min-height:44px;display:inline-flex;align-items:center;justify-content:center;gap:.4rem}
.btn.outline{border-color:rgba(255,255,255,.35)}
.card{overflow-wrap:break-word}
.hero-buttons .btn{padding:.85rem 1.5rem}
@media(max-width:640px){
  section{padding:1.4rem 0}
  .card{padding:1rem}
  .hero{padding:2.2rem 0}
  .hero-buttons .btn{width:100%}
  .wrap{padding:0 .9rem}
  h1{font-size:1.7rem}
}

/* ---------- Homepage: new reference (navy top bar + photo hero) ---------- */
/* Index only: classes are .home-* so no other page is affected. */
.home-header{background:#0b2249;border-bottom:1px solid rgba(255,255,255,.12)}
.home-topbar{position:relative;display:flex;align-items:center;justify-content:space-between;gap:12px;height:72px}
.home-logo{position:absolute;left:50%;transform:translateX(-50%);text-align:center}
.home-header .logo-sub{color:#c7d2e0}
.home-start{display:inline-flex;align-items:center;gap:6px;background:linear-gradient(135deg,#d60000,#ff2d2d);color:#fff;padding:10px 18px;border-radius:999px;font-weight:800;font-size:.9rem;box-shadow:0 4px 18px rgba(214,0,0,.4);white-space:nowrap}
.home-start svg{width:18px;height:18px;flex-shrink:0}
.home-start:hover{color:#fff;transform:translateY(-1px)}
.home-side{display:flex;align-items:center;gap:10px;flex-shrink:0}
.home-header .hamburger{display:flex}
.home-header nav.main{position:fixed;top:72px;inset-inline:0;background:#0a0a0a;max-height:calc(100vh - 72px);overflow-y:auto;flex-direction:column;align-items:stretch;gap:0;padding:12px 0 24px;border-bottom:1px solid var(--border);transform:translateY(-8px);opacity:0;pointer-events:none;transition:transform .3s ease,opacity .3s ease;z-index:999}
.home-header nav.main.open{transform:translateY(0);opacity:1;pointer-events:auto}
.home-header nav.main a{padding:12px 28px;font-size:1rem;border-radius:0}
.home-header nav.main a::after{display:none}
.home-header nav.main .nav-cta{display:flex;flex-direction:column;gap:10px;padding:14px 28px}
.home-header nav.main .nav-cta .btn{width:100%}
.home-hero{position:relative;width:100%;margin-inline:0;padding:0;overflow:hidden;min-height:640px;background:#0b2249;border-radius:24px}
.home-hero-img{position:absolute;top:0;bottom:0;height:100%;object-fit:cover;object-position:32% 38%}html[dir="rtl"] .home-hero-img{inset-inline-start:0;width:100%}html[dir="ltr"] .home-hero-img{inset-inline-start:0;width:150%;max-width:none}
html[dir="ltr"] .home-hero-shade{position:absolute;inset:0;background:linear-gradient(90deg,rgba(5,20,45,.92) 0%,rgba(5,20,45,.75) 30%,rgba(5,20,45,.25) 55%,rgba(5,20,45,0) 72%),linear-gradient(to top,rgba(10,10,10,.35),transparent 42%)}
html[dir="rtl"] .home-hero-shade{position:absolute;inset:0;background:linear-gradient(270deg,rgba(5,20,45,.92) 0%,rgba(5,20,45,.75) 30%,rgba(5,20,45,.25) 55%,rgba(5,20,45,0) 72%),linear-gradient(to top,rgba(10,10,10,.35),transparent 42%)}
.home-hero-copy{position:relative;z-index:2;max-width:640px;margin:40px 16px 120px;padding:28px 24px;display:flex;flex-direction:column;align-items:flex-start;background:#0b2249;border:1px solid rgba(255,255,255,.18);border-radius:20px;box-shadow:0 18px 50px rgba(0,0,0,.45)}
.home-h1{font-family:'Tajawal','Inter',sans-serif;font-weight:800;font-size:clamp(2.5rem,8.5vw,4.2rem);line-height:1.22;margin-bottom:10px;max-width:560px;text-shadow:0 2px 14px rgba(0,0,0,.65)}
html[dir="ltr"] .home-h1{font-family:'Playfair Display',Georgia,serif;font-weight:900}
.home-h1-red{color:#ff2d2d}
.home-subline{font-size:clamp(1.15rem,4vw,1.6rem);font-weight:800;margin-bottom:18px;max-width:560px}
.home-subline::after{content:'';display:block;width:120px;height:4px;background:var(--red);border-radius:999px;margin-top:10px}
.home-lead{max-width:560px;color:#dbe4f0;font-size:1.02rem;line-height:1.9;margin-bottom:28px}
.home-ctas{display:flex;flex-direction:column;gap:14px;width:min(360px,100%)}
.home-cta-primary{width:100%;padding:16px 28px;font-size:1.05rem;border-radius:14px}
.btn.outline.home-cta-secondary{width:100%;padding:16px 28px;font-size:1.05rem;border-radius:14px;background:#0b2249;color:#fff;border:1px solid rgba(255,255,255,.75);box-shadow:0 8px 24px rgba(0,0,0,.35)}
.home-features{padding:0 0 8px}
.home-features-grid{position:relative;z-index:3;margin-top:-72px;display:grid;grid-template-columns:repeat(3,1fr);background:rgba(11,34,73,.85);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border:1px solid rgba(255,255,255,.16);border-radius:20px;box-shadow:0 18px 50px rgba(0,0,0,.45);overflow:hidden}
.home-feature{padding:22px 16px;text-align:center}
.home-feature:not(:last-child){border-inline-end:1px solid rgba(255,255,255,.14)}
.home-feature-icon{display:block;width:34px;height:34px;margin:0 auto 10px;color:#fff}
.home-feature-icon svg{width:100%;height:100%}
.home-feature h3{font-family:'Tajawal','Inter',sans-serif;font-size:.98rem;font-weight:800;margin-bottom:2px}
.home-feature p{color:#c7d2e0;font-size:.86rem;margin:0}
.home-stats{padding:20px 0 8px}
.home-stats-grid{display:grid;grid-template-columns:repeat(3,1fr);background:#fff;color:#0b2249;border-radius:20px;box-shadow:0 18px 50px rgba(0,0,0,.35);overflow:hidden}
.home-stat{padding:22px 12px;text-align:center}
.home-stat:not(:last-child){border-inline-end:1px solid #e2e8f0}
.home-stat-icon{display:block;width:30px;height:30px;margin:0 auto 8px;color:#0b2249}
.home-stat-icon svg{width:100%;height:100%}
.home-stat strong{display:block;font-size:1.7rem;font-weight:900;line-height:1.1;color:#0b2249}
.home-stat span{color:#475569;font-size:.88rem;font-weight:700}
@media(max-width:640px){
  .home-topbar{height:64px}
  .home-header nav.main{top:64px;max-height:calc(100vh - 64px)}
  .home-logo .logo-bbc{font-size:1.35rem}
  .home-logo .logo-sub{font-size:.5rem;letter-spacing:.16em}
  .home-start{padding:8px 14px;font-size:.85rem}
  .home-hero{min-height:620px}
  .home-hero-copy{margin:32px 16px 120px;padding:24px 20px}
  .home-feature{padding:18px 8px}
  .home-feature h3{font-size:.85rem}
  .home-feature p{font-size:.78rem}
  .home-stat strong{font-size:1.35rem}
  .home-stat span{font-size:.78rem}
}
@media(max-width:400px){
  .home-topbar{gap:6px;height:64px}
  .home-start{padding:7px 11px;font-size:.8rem}
  .home-start svg{width:15px;height:15px}
  .home-side{gap:6px}
  .langbtn{padding:6px 9px;font-size:.78rem}
  .home-header .hamburger{width:36px;height:36px}
  .home-logo .logo-bbc{font-size:1.2rem}
  .home-logo .logo-sub{font-size:.44rem;letter-spacing:.12em}
  .home-feature{padding:16px 6px}
  .home-feature-icon{width:30px;height:30px}
}
@media(min-width:1025px){
  .home-hero{min-height:680px}
  .home-hero-copy{margin:64px auto 150px;padding:36px 32px}
}

/* --- Expanded homepage: courses, teachers, story, registration (eye-comfort) --- */
.home-courses{padding:56px 0 8px}
.home-view-all{text-align:center;margin-top:22px}
.home-course-card h3{font-size:1.15rem}
.home-teachers{padding:56px 0 8px}
.home-teachers .section-header p{max-width:640px}
.home-teacher-card{overflow:hidden;padding:0}
.home-teacher-photo{aspect-ratio:1/1;overflow:hidden;background:#0b2249}
.home-teacher-photo img{width:100%;height:100%;object-fit:cover;display:block;filter:saturate(.92) brightness(.96)}
.home-teacher-card .tag{margin:18px 18px 0}
.home-teacher-card p{padding:0 18px 20px}
/* Story: classroom photo as a soft background (low opacity) + solid photo card.
   Text never sits on the busy photo itself, so contrast stays comfortable. */
.home-story{position:relative;overflow:hidden;border-radius:24px;margin:56px 0 8px;background:#0b2249}
.home-story-bg{position:absolute;inset:0;background:url("story-classroom.jpg") center/cover no-repeat;opacity:.16;filter:blur(1px) saturate(.85)}
.home-story-bg::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(11,34,73,.55),rgba(11,34,73,.88))}
.home-story-inner{position:relative;z-index:2;display:grid;grid-template-columns:1fr 1fr;gap:32px;align-items:center;padding:48px 32px}
.home-story-photo{position:relative;border-radius:20px;overflow:hidden;box-shadow:0 18px 50px rgba(0,0,0,.45)}
.home-story-photo img{width:100%;height:100%;object-fit:cover;display:block;aspect-ratio:4/3}
.home-story-photo::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(5,20,45,.45),transparent 55%)}
.home-story-chip{position:absolute;z-index:2;bottom:16px;inset-inline-start:16px;background:rgba(214,0,0,.92);color:#fff;padding:8px 16px;border-radius:999px;font-weight:800;font-size:.9rem}
.home-story-text p{color:#dbe4f0}
.home-story-text .section-title{color:#fff}
/* Registration: hero photo as background, heavy navy scrim, form in a white card
   so labels and fields stay crisp and eye-comfortable on any screen. */
.home-register{position:relative;overflow:hidden;border-radius:24px;margin:56px 0 8px;background:#0b2249}
.home-register-bg{position:absolute;inset:0;background:url("hero-home.jpg") center 30%/cover no-repeat;opacity:.38}
.home-register-bg::after{content:"";position:absolute;inset:0;background:linear-gradient(135deg,rgba(5,20,45,.94) 0%,rgba(5,20,45,.82) 55%,rgba(214,0,0,.28) 100%)}
.home-register-inner{position:relative;z-index:2;display:grid;grid-template-columns:1fr 1.15fr;gap:32px;padding:48px 32px;align-items:start}
.home-register-copy .section-title{color:#fff}
.home-register-copy p{color:#dbe4f0}
.home-reg-form{background:#fff;color:#0b2249;border-radius:20px;padding:28px;box-shadow:0 18px 50px rgba(0,0,0,.4)}
.home-reg-form label{color:#0b2249;font-weight:800}
.home-reg-form input,.home-reg-form select,.home-reg-form textarea{background:#f1f5f9!important;border:1px solid #cbd5e1!important;color:#0b2249!important}
.home-reg-form input::placeholder,.home-reg-form textarea::placeholder{color:#64748b!important}
.home-reg-form input:focus,.home-reg-form select:focus,.home-reg-form textarea:focus{border-color:rgba(214,0,0,.6)!important;box-shadow:0 0 0 3px rgba(214,0,0,.15)!important}
.home-reg-form .btn{width:100%}
.home-register .success{margin-top:16px}
@media(max-width:800px){
  .home-story-inner,.home-register-inner{grid-template-columns:1fr;padding:28px 18px}
  .home-story-photo img{aspect-ratio:16/10}
  .home-reg-form{padding:20px 16px}
}

/* STACKED/SPLIT HERO — no text over photo (replaces floating-card hero) */
.home-hero{display:flex;flex-direction:column;align-items:stretch;min-height:0;border-radius:0}
.home-hero-img{position:static;flex:none;width:100%;height:400px;object-fit:cover;object-position:32% 38%}
html[dir="rtl"] .home-hero-img{width:100%;max-width:100%}
html[dir="ltr"] .home-hero-img{width:150%;max-width:none;align-self:flex-start}
.home-hero-shade{display:none!important}
.home-hero-copy{position:static;z-index:auto;width:100%;max-width:none;margin:0;padding:28px 24px;display:flex;flex-direction:column;align-items:flex-start;background:#0b2249;border:0;border-radius:0;box-shadow:none}
.home-features-grid{margin-top:0}
.home-features{padding-top:20px}
@media(min-width:1025px){
  .home-hero{flex-direction:row-reverse;min-height:560px}
  html[dir="ltr"] .home-hero-img,html[dir="rtl"] .home-hero-img{width:50%;max-width:50%;height:auto;align-self:stretch;flex:none;object-position:32% 38%}
  .home-hero-copy{width:50%;flex:none;justify-content:center;padding:48px 40px}
}

/* Design-repo refinement (ui-ux-pro-max-skill): 8dp spacing tiers, hierarchy margins, body line-height 1.5-1.75, CTA touch spacing */
.home-hero-copy{padding:32px 24px}
.home-ctas{gap:16px}
.home-h1{margin-bottom:16px}
.home-subline{margin-bottom:24px}
.home-lead{margin-bottom:32px;line-height:1.7}
.home-features{padding-top:24px}
@media(min-width:1025px){
  .home-hero{height:600px;min-height:600px}
  html[dir="ltr"] .home-hero-img,html[dir="rtl"] .home-hero-img{height:100%}
}

/* === MOCKUP-EXACT HERO (reference: reference-hero-arabic-2026-11-02.jpg) ===
   Photo background + side text panel + glass features overlapping + white stats.
   Replaces the stacked hero. Responsive art direction: portrait photos on mobile,
   landscape photos on desktop; one visible image per language per breakpoint. */
html,body{overflow-x:hidden}
.home-hero{display:block!important;position:relative;overflow:hidden;width:100vw!important;margin-inline:calc(50% - 50vw)!important;min-height:640px!important;height:auto!important;background:#0b2249;border-radius:0!important}
.home-hero-img,.home-hero-img-en,.home-hero-img-m,.home-hero-img-en-m{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:none}
html[dir="rtl"] .home-hero-img-m{display:block;object-position:42% 22%}
html[dir="ltr"] .home-hero-img-en-m{display:block;object-position:58% 22%}
.home-hero-shade{display:block!important;position:absolute;inset:0;z-index:1}
html[dir="rtl"] .home-hero-shade{background:linear-gradient(270deg,#0b2249 0%,rgba(11,34,73,.97) 34%,rgba(11,34,73,.62) 56%,rgba(11,34,73,0) 78%),linear-gradient(to top,rgba(11,34,73,.65),transparent 42%)}
html[dir="ltr"] .home-hero-shade{background:linear-gradient(90deg,#0b2249 0%,rgba(11,34,73,.97) 34%,rgba(11,34,73,.62) 56%,rgba(11,34,73,0) 78%),linear-gradient(to top,rgba(11,34,73,.65),transparent 42%)}
.home-hero-copy{position:relative;z-index:2;display:flex;flex-direction:column;align-items:flex-start;width:54%;max-width:560px;margin:0;padding:64px 16px 150px;background:transparent;border:0;border-radius:0;box-shadow:none}
html[dir="rtl"] .home-hero-copy{margin-left:auto;margin-right:0;text-align:right}
html[dir="ltr"] .home-hero-copy{margin-right:auto;margin-left:0;text-align:left}
.home-h1{font-size:clamp(1.7rem,7.2vw,4.2rem);line-height:1.28;margin-bottom:12px;max-width:none;text-shadow:none}
.home-subline{font-size:clamp(.95rem,4vw,1.6rem);margin-bottom:16px}
.home-subline::after{content:'';display:block;width:110px;height:5px;background:var(--red);border-radius:999px;margin-top:10px;transform:rotate(-2deg)}
html[dir="rtl"] .home-subline::after{margin-left:auto;margin-right:0}
html[dir="ltr"] .home-subline::after{margin-right:auto;margin-left:0}
.home-lead{font-size:.88rem;line-height:1.65;margin-bottom:24px;color:#dbe4f0}
.home-ctas{width:100%;gap:12px}
.home-cta-primary{border-radius:999px!important;padding:15px 18px;font-size:.98rem;display:flex;align-items:center;justify-content:center;gap:10px}
.cta-arrow{display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;border-radius:50%;background:#fff;color:#d60000;font-weight:900;font-size:1rem;flex-shrink:0}
html[dir="rtl"] .cta-arrow{transform:scaleX(-1)}
.btn.outline.home-cta-secondary{border-radius:999px!important;background:#0b2249;color:#fff;border:1px solid rgba(255,255,255,.7);padding:15px 18px;font-size:.98rem}
.home-features{padding:0!important}
.home-features-grid{margin-top:-72px!important;position:relative;z-index:3}
.home-stats{padding:20px 0 8px}
.home-stats-grid{position:relative}
.home-stats-grid::before,.home-stats-grid::after{content:'';position:absolute;top:50%;width:10px;height:56px;background:#d60000;transform:translateY(-50%);z-index:1}
.home-stats-grid::before{left:0;border-radius:0 999px 999px 0}
.home-stats-grid::after{right:0;border-radius:999px 0 0 999px}
@media(max-width:400px){
  .home-hero-copy{width:56%;padding:56px 12px 140px}
  .home-h1{font-size:1.65rem}
  .home-lead{font-size:.84rem}
}
@media(min-width:1025px){
  .home-hero{min-height:680px!important}
  html[dir="rtl"] .home-hero-img{display:block;object-position:center}
  html[dir="ltr"] .home-hero-img-en{display:block;object-position:center}
  html[dir="rtl"] .home-hero-img-m,html[dir="ltr"] .home-hero-img-en-m{display:none!important}
  .home-hero-copy{width:50%;padding:110px 40px 170px}
  .home-ctas{width:420px}
  .home-lead{font-size:1.05rem}
}
@media(max-width:640px){.home-subline{font-size:.85rem}}
/* Fix: stacked desktop rule forced hero img to 50% width (right-anchored in RTL) — force full width. Reduce features overlap so book text is not covered. */
@media(min-width:1025px){
  .home-hero-img,.home-hero-img-en,.home-hero-img-m,.home-hero-img-en-m{width:100%!important;max-width:none!important;left:0!important;right:auto!important}
  .home-features-grid{margin-top:-32px!important}
}
.home-features-grid{margin-top:-24px!important}
@media(min-width:1025px){
  html[dir="rtl"] .home-hero-img{object-position:25% 50%!important}
  html[dir="ltr"] .home-hero-img-en{object-position:75% 50%!important}
}

/* ==========================================================================
   PORTED FROM ZIP (vanilla, build-free): src/reference.css from the
   BBC-Academy-Homepage-Preview React app, verbatim except: hero photo URL
   made relative, body:has rule omitted (site body is already near-black),
   reduced-motion scoped to .reference-page, plus an html[dir] LTR fallback
   mirroring the .reference-page[dir='ltr'] rules. No layout/colour/spacing
   values were changed.
   ========================================================================== */
.reference-page {
  --ref-navy: #03183e;
  --ref-red: #d10a32;
  min-height: 0; /* was 100svh: forced a 257px empty navy gap below stats on mobile */
  overflow: hidden;
  position: relative;
  background: var(--ref-navy);
  color: #fff;
  font-family: 'Noto Sans Arabic', 'DM Sans', sans-serif;
}

.reference-header {
  height: clamp(60px, 15vw, 70px);
  padding: 0 4%;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  direction: ltr;
  position: relative;
  z-index: 5;
  border-bottom: 1px solid rgba(187, 207, 238, .18);
  background: linear-gradient(180deg, #03183e, #041a42);
}

.reference-menu-button {
  width: clamp(44px, 11.5vw, 52px);
  height: clamp(38px, 9.6vw, 45px);
  justify-self: start;
  display: grid;
  place-items: center;
  border: 1px solid rgba(158, 184, 222, .2);
  border-radius: 14px;
  background: rgba(6, 28, 65, .84);
  color: white;
}

.reference-brand {
  display: flex;
  align-items: center;
  gap: 7px;
  color: white;
  text-decoration: none;
  direction: ltr;
}

.reference-brand-mark {
  width: clamp(43px, 11vw, 51px);
  height: 42px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  position: relative;
}

.reference-cap {
  position: absolute;
  z-index: 1;
  top: -1px;
  color: #e51b3d;
  fill: #e51b3d;
  stroke: #e51b3d;
}

.reference-book {
  width: 46px;
  height: 27px;
  color: #f4f7ff;
  stroke-width: 1.8;
}

.reference-brand-name {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  line-height: .98;
  font-family: 'Manrope', 'Noto Sans Arabic', sans-serif;
}

.reference-brand-name strong {
  font-size: clamp(19px, 5.1vw, 24px);
  font-weight: 800;
  letter-spacing: -.045em;
}

.reference-brand-name small {
  margin-top: 3px;
  align-self: center;
  color: #e2e7f0;
  font-size: clamp(10px, 2.8vw, 13px);
  font-weight: 500;
}

.reference-header-cta {
  min-width: clamp(78px, 19vw, 90px);
  height: clamp(36px, 9.2vw, 42px);
  justify-self: end;
  padding: 0 11px;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: 5px;
  border: 0;
  border-radius: 999px;
  background: var(--ref-red);
  color: white;
  box-shadow: 0 5px 16px rgba(209, 10, 50, .2);
  direction: rtl;
  white-space: nowrap;
  font: 700 clamp(10px, 2.6vw, 12px) 'Noto Sans Arabic', sans-serif;
}

.reference-menu-panel {
  position: absolute;
  top: calc(100% + 1px);
  left: 12px;
  width: min(260px, calc(100vw - 24px));
  padding: 9px 16px;
  display: grid;
  border: 1px solid rgba(187, 207, 238, .2);
  border-radius: 0 0 16px 16px;
  background: #071e47;
  box-shadow: 0 18px 38px rgba(0, 0, 0, .35);
  direction: rtl;
}

.reference-menu-panel a,
.reference-menu-panel button {
  padding: 12px 2px;
  border: 0;
  border-bottom: 1px solid rgba(187, 207, 238, .14);
  background: transparent;
  color: #fff;
  text-align: right;
  text-decoration: none;
  font: 600 13px 'Noto Sans Arabic', sans-serif;
}

.reference-menu-panel button {
  border-bottom: 0;
  color: #ff7088;
}

.reference-hero {
  height: clamp(350px, 90vw, 420px);
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background: var(--ref-navy);
}

.reference-hero-photo {
  position: absolute;
  z-index: -1;
  inset: 0;
  background: url('academy-reference-hero.jpg') left center / auto 100% no-repeat;
  -webkit-mask-image: linear-gradient(90deg, #000 0%, #000 45%, transparent 85%);
  mask-image: linear-gradient(90deg, #000 0%, #000 45%, transparent 85%);
  filter: brightness(.82) saturate(.93);
}

.reference-hero-photo::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, transparent 0%, rgba(3, 24, 62, .08) 25%, rgba(3, 24, 62, .30) 42%, rgba(3, 24, 62, .62) 58%, rgba(3, 24, 62, .90) 72%, #03183e 88%),
    linear-gradient(0deg, rgba(2, 18, 48, .82) 0%, transparent 30%, transparent 82%, rgba(3, 24, 62, .08) 100%);
}

.reference-hero-copy {
  position: absolute;
  z-index: 1;
  top: 15%;
  right: 4.3%;
  width: 50%;
  color: white;
  text-align: right;
  direction: rtl;
}

.reference-hero-copy h1 {
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  white-space: nowrap;
  font: 800 clamp(30px, 7.2vw, 36px)/1.38 'Noto Sans Arabic', sans-serif;
  letter-spacing: -.045em;
}

.reference-hero-copy h1 span,
.reference-hero-copy h1 em {
  font-style: normal;
}

.reference-hero-copy h1 em {
  color: #ef233f;
  font-size: .91em;
}

.reference-hero-copy h2 {
  margin: 26px 0 0;
  color: #f4f6fb;
  white-space: nowrap;
  font: 700 clamp(15px, 4vw, 19px)/1.5 'Noto Sans Arabic', sans-serif;
}

.reference-swoosh {
  width: 58%;
  height: 11px;
  margin: -1px 5% 8px auto;
  display: block;
  border-bottom: 3px solid #e91f3d;
  border-radius: 0 0 70% 35%;
  transform: rotate(-9deg);
}

.reference-hero-copy p {
  max-width: 80%;
  margin: 6px 0 0;
  color: #c5cfe0;
  font-size: clamp(11px, 2.9vw, 13px);
  line-height: 1.7;
}

.reference-hero-cta {
  min-height: clamp(42px, 10.5vw, 49px);
  margin: 22px 0 0 auto;
  padding: 0 15px 0 11px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 11px;
  border: 0;
  border-radius: 999px;
  background: var(--ref-red);
  color: #fff;
  box-shadow: 0 8px 20px rgba(182, 0, 36, .34);
  font: 700 clamp(13px, 3.5vw, 15px) 'Noto Sans Arabic', sans-serif;
  white-space: nowrap;
}

.reference-cta-arrow {
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  border-radius: 50%;
  background: #fff;
  color: var(--ref-red);
}

.reference-features {
  height: clamp(80px, 20vw, 94px);
  margin: 0 4%;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  direction: ltr;
  border: 1px solid rgba(159, 184, 222, .22);
  border-radius: 22px;
  background: linear-gradient(110deg, rgba(9, 32, 70, .97), rgba(10, 34, 75, .94));
  box-shadow: 0 12px 24px rgba(0, 0, 0, .16), inset 0 1px rgba(255, 255, 255, .035);
}

.reference-feature {
  min-width: 0;
  margin: 15px 0 13px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 2px;
  text-align: center;
  direction: rtl;
}

.reference-feature + .reference-feature {
  border-left: 1px solid rgba(182, 202, 233, .24);
}

.reference-feature-icon {
  margin-bottom: 1px;
  color: #f4f7ff;
}

.reference-feature strong {
  max-width: 100%;
  overflow: hidden;
  color: #f9faff;
  font: 700 clamp(10px, 2.8vw, 12px)/1.3 'Noto Sans Arabic', sans-serif;
  white-space: nowrap;
}

.reference-feature span {
  max-width: 100%;
  overflow: hidden;
  color: #b8c4d7;
  font: 400 clamp(8px, 2.2vw, 10px)/1.35 'Noto Sans Arabic', sans-serif;
  white-space: nowrap;
}

.reference-results {
  height: clamp(108px, 25vw, 122px);
  padding: clamp(14px, 3.8vw, 18px) 6.5% 0;
  position: relative;
  overflow: hidden;
  background: var(--ref-navy);
}

.reference-results::before,
.reference-results::after {
  content: '';
  position: absolute;
  z-index: 0;
  top: 23px;
  width: 74px;
  height: 44px;
  background: #e10e35;
}

.reference-results::before {
  left: -28px;
  border-radius: 0 90% 8% 0;
  transform: rotate(-19deg);
}

.reference-results::after {
  right: -26px;
  border-radius: 90% 0 0 8%;
  transform: rotate(-19deg);
}

.reference-stats-card {
  height: clamp(80px, 20vw, 95px);
  max-width: 1000px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: center;
  position: relative;
  z-index: 1;
  border-radius: 26px;
  background: #f7f8fc;
  color: #071b3d;
  box-shadow: 0 7px 20px rgba(0, 0, 0, .14);
  direction: ltr;
}

.reference-metric {
  min-width: 0;
  min-height: 58px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  direction: rtl;
}

.reference-metric + .reference-metric {
  border-left: 1px solid rgba(13, 31, 61, .48);
}

.reference-metric-icon {
  margin-bottom: 1px;
  color: #071b3d;
  fill: #071b3d;
  stroke: #071b3d;
}

.reference-metric strong {
  color: #071b3d;
  font: 800 clamp(17px, 4.7vw, 22px)/1.2 'Manrope', 'Noto Sans Arabic', sans-serif;
  letter-spacing: -.045em;
  white-space: nowrap;
  direction: ltr;
  unicode-bidi: isolate;
}

.reference-metric span {
  color: #22314b;
  font: 500 clamp(9px, 2.5vw, 11px)/1.35 'Noto Sans Arabic', sans-serif;
  white-space: nowrap;
}

.reference-modal-backdrop {
  position: fixed;
  z-index: 20;
  inset: 0;
  padding: 18px;
  display: grid;
  place-items: center;
  background: rgba(1, 11, 30, .78);
}

.reference-modal {
  width: min(100%, 430px);
  padding: 34px 27px 24px;
  position: relative;
  border: 1px solid rgba(8, 31, 70, .12);
  border-radius: 22px;
  background: #f7f8fc;
  color: var(--ref-navy);
  box-shadow: 0 24px 80px rgba(0, 0, 0, .35);
  direction: rtl;
  text-align: right;
}

.reference-modal-close {
  position: absolute;
  top: 14px;
  left: 14px;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border: 1px solid #dce1e9;
  border-radius: 50%;
  background: transparent;
  color: var(--ref-navy);
}

.reference-modal-kicker {
  color: var(--ref-red);
  font: 800 10px 'Manrope', sans-serif;
  letter-spacing: .14em;
}

.reference-modal h2 {
  margin: 12px 0 8px;
  font: 800 24px/1.4 'Noto Sans Arabic', sans-serif;
}

.reference-modal p {
  margin: 0 0 19px;
  color: #667287;
  font: 400 13px/1.7 'Noto Sans Arabic', sans-serif;
}

.reference-modal form {
  display: grid;
  gap: 12px;
}

.reference-modal label {
  display: grid;
  gap: 6px;
  color: #182c4d;
  font: 700 12px 'Noto Sans Arabic', sans-serif;
}

.reference-modal input,
.reference-modal select {
  width: 100%;
  height: 43px;
  padding: 0 11px;
  border: 1px solid #d7deea;
  border-radius: 9px;
  outline: none;
  background: #fff;
  color: #132849;
  font: 400 13px 'Noto Sans Arabic', sans-serif;
}

.reference-modal input:focus,
.reference-modal select:focus {
  border-color: var(--ref-red);
  box-shadow: 0 0 0 3px rgba(209, 10, 50, .1);
}

.reference-modal-submit {
  min-height: 44px;
  margin-top: 4px;
  padding: 0 15px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border: 0;
  border-radius: 999px;
  background: var(--ref-red);
  color: #fff;
  font: 700 13px 'Noto Sans Arabic', sans-serif;
}

.reference-success {
  padding: 13px;
  border-radius: 10px;
  background: #e7f2eb;
  color: #275b3e;
  font: 600 13px/1.7 'Noto Sans Arabic', sans-serif;
}

.reference-modal-note {
  margin-top: 15px;
  display: block;
  color: #7a8494;
  text-align: center;
  font: 400 10px 'Noto Sans Arabic', sans-serif;
}

.reference-page[dir='ltr'] {
  font-family: 'DM Sans', 'Manrope', sans-serif;
}

.reference-page[dir='ltr'] .reference-hero-copy,
.reference-page[dir='ltr'] .reference-menu-panel,
.reference-page[dir='ltr'] .reference-modal {
  direction: ltr;
  text-align: left;
}

.reference-page[dir='ltr'] .reference-hero-copy h1 {
  align-items: flex-end;
}

.reference-page[dir='ltr'] .reference-swoosh {
  margin-right: 0;
  margin-left: 5%;
}

.reference-page[dir='ltr'] .reference-hero-cta {
  margin-right: 0;
  margin-left: auto;
  direction: ltr;
}

.reference-page[dir='ltr'] .reference-menu-panel a,
.reference-page[dir='ltr'] .reference-menu-panel button {
  text-align: left;
}

.reference-page[dir='ltr'] .reference-modal-close {
  right: 14px;
  left: auto;
}

@media (min-width: 700px) {
  .reference-page {
    max-width: 1200px;
    margin: 0 auto;
  }

  .reference-header {
    height: 76px;
    padding: 0 34px;
  }

  .reference-hero {
    height: min(590px, calc(100svh - 76px));
    min-height: 520px;
  }

  .reference-hero-photo {
    background-size: auto 140%;
  }

  .reference-hero-copy {
    top: 12%;
    right: 7%;
    width: 44%;
  }

  .reference-hero-copy h1 {
    font-size: clamp(42px, 5vw, 58px);
    line-height: 1.28;
  }

  .reference-hero-copy h2 {
    margin-top: 20px;
    font-size: clamp(20px, 2.2vw, 26px);
  }

  .reference-hero-copy p {
    max-width: 420px;
    font-size: 16px;
  }

  .reference-hero-cta {
    min-height: 52px;
    margin-top: 22px;
    padding: 0 17px 0 11px;
    font-size: 16px;
  }

  .reference-features {
    width: min(92%, 940px);
    height: 108px;
    margin: 0 auto;
  }

  .reference-feature {
    margin: 17px 0;
    gap: 4px;
  }

  .reference-feature strong {
    font-size: 14px;
  }

  .reference-feature span {
    font-size: 11px;
  }

  .reference-results {
    width: min(100%, 1030px);
    height: 130px;
    margin: 0 auto;
    padding: 19px 34px 0;
  }

  .reference-stats-card {
    height: 100px;
  }

  .reference-metric strong {
    font-size: 25px;
  }

  .reference-metric span {
    font-size: 12px;
  }
}

@media (max-width: 360px) {
  .reference-header {
    padding: 0 3%;
  }

  .reference-brand {
    gap: 3px;
  }

  .reference-brand-mark {
    width: 39px;
  }

  .reference-header-cta {
    min-width: 74px;
    padding: 0 8px;
  }

  .reference-hero-copy {
    right: 3.5%;
    width: 53%;
  }

  .reference-hero-copy h1 {
    font-size: 27px;
  }

  .reference-hero-copy h2 {
    font-size: 14px;
  }
}

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

/* Dir-sync fallback (same declarations as .reference-page[dir='ltr'] above, driven by <html> dir) */
html[dir="ltr"] .reference-page { font-family: 'DM Sans', 'Manrope', sans-serif; }
html[dir="ltr"] .reference-page .reference-hero-copy,
html[dir="ltr"] .reference-page .reference-menu-panel,
html[dir="ltr"] .reference-page .reference-modal { direction: ltr; text-align: left; }
html[dir="ltr"] .reference-page .reference-hero-copy h1 { align-items: flex-end; }
html[dir="ltr"] .reference-page .reference-swoosh { margin-right: 0; margin-left: 5%; }
html[dir="ltr"] .reference-page .reference-hero-cta { margin-right: 0; margin-left: auto; direction: ltr; }
html[dir="ltr"] .reference-page .reference-menu-panel a,
html[dir="ltr"] .reference-page .reference-menu-panel button { text-align: left; }
html[dir="ltr"] .reference-page .reference-modal-close { right: 14px; left: auto; }

/* Vanilla-conversion necessity (not a redesign): React conditionally renders
   the menu panel and modal, so they are absent when closed. In vanilla they
   stay in the DOM with [hidden]; author display:grid would otherwise override
   the UA hidden rule and the fixed backdrop would intercept every click. */
.reference-modal-backdrop[hidden]{display:none!important}
.reference-menu-panel[hidden]{display:none!important}

/* Restore React defaults: the site stylesheet sets a global section{padding}
   that the React app does not have. Without this, the ported features section
   grows by that padding at desktop widths. No React value is changed. */
.reference-features{padding:0}
.reference-hero{padding:0}

/* EN FIX (2026-11-02): mirror the hero panel to the LEFT in English only.
   Arabic rules above are untouched. Previously the EN panel stayed on the
   right (right:4.3%) with nowrap headings, so EN text was cut at the right
   edge. The photo and its gradient are mirrored too, so the EN panel sits
   on solid navy on the left and the photo shows on the right. */
.reference-page[dir='ltr'] .reference-hero-copy,
html[dir="ltr"] .reference-page .reference-hero-copy { left:4.3%; right:auto; text-align:left; direction:ltr; }
.reference-page[dir='ltr'] .reference-hero-copy h1,
html[dir="ltr"] .reference-page .reference-hero-copy h1 { align-items:flex-start; white-space:normal; }
.reference-page[dir='ltr'] .reference-hero-copy h2,
html[dir="ltr"] .reference-page .reference-hero-copy h2 { white-space:normal; }
.reference-page[dir='ltr'] .reference-hero-cta,
html[dir="ltr"] .reference-page .reference-hero-cta { margin-left:0; margin-right:auto; direction:ltr; }
.reference-page[dir='ltr'] .reference-cta-arrow svg,
html[dir="ltr"] .reference-page .reference-cta-arrow svg { transform:rotate(180deg); }
.reference-page[dir='ltr'] .reference-hero-photo,
html[dir="ltr"] .reference-page .reference-hero-photo { background-position:right center; -webkit-mask-image: linear-gradient(270deg, #000 0%, #000 45%, transparent 85%); mask-image: linear-gradient(270deg, #000 0%, #000 45%, transparent 85%); }
.reference-page[dir='ltr'] .reference-hero-photo::after,
html[dir="ltr"] .reference-page .reference-hero-photo::after { background: linear-gradient(270deg, transparent 0%, rgba(3,24,62,.08) 25%, rgba(3,24,62,.30) 42%, rgba(3,24,62,.62) 58%, rgba(3,24,62,.90) 72%, #03183e 88%), linear-gradient(0deg, rgba(2,18,48,.82) 0%, transparent 30%, transparent 82%, rgba(3,24,62,.08) 100%); }
@media (max-width:360px){ .reference-page[dir='ltr'] .reference-hero-copy, html[dir="ltr"] .reference-page .reference-hero-copy { left:3.5%; right:auto; } }
@media (min-width:700px){ .reference-page[dir='ltr'] .reference-hero-copy, html[dir="ltr"] .reference-page .reference-hero-copy { left:7%; right:auto; } }