/* =====================================================================
   OXFORD ACADEMY — custom theme on top of Bootstrap 5
   Logo-driven blue palette + Oxford-red accent. Editorial/academic look.
   RTL-aware via CSS logical properties (works for both index.html [ar]
   and en/index.html [en]).
   ===================================================================== */
:root{
  --sky-50:#eef6fc; --sky-100:#dcecf7; --sky-200:#c2e0f1; --sky-300:#a3d2ea;
  --teal-400:#4ea0bd; --teal-500:#2e8ba3; --blue-600:#1a6f96; --blue-700:#13597d;
  --navy-800:#0c3a52; --navy-900:#082b3d; --navy-950:#061f2c;
  /* Oxford red accent (NOT pink) */
  --red:#c0272d; --red-600:#a81f25; --red-700:#8c191e; --red-bright:#e8443c; --red-soft:#f3d7d6;
  --paper:#fbf8f2; --paper-2:#f4ecde; --paper-3:#ece1cd; --white:#fff;
  --ink:#0d2433; --ink-soft:#3f5663; --ink-mute:#6c8493;
  --line:rgba(12,58,82,.14); --line-2:rgba(12,58,82,.08);
  --on-dark:#eaf3f9; --on-dark-soft:rgba(234,243,249,.74); --on-dark-mute:rgba(234,243,249,.5); --on-dark-line:rgba(255,255,255,.12);
  --ff-display:'Fraunces',Georgia,serif; --ff-body:'Hanken Grotesk',system-ui,sans-serif;
  --ff-ar-display:'Aref Ruqaa','Tajawal',serif; --ff-ar-body:'Tajawal',system-ui,sans-serif;
  --radius:16px; --radius-l:24px; --radius-xl:34px;
  --shadow-s:0 2px 10px rgba(8,43,61,.07); --shadow:0 18px 50px -16px rgba(8,43,61,.28);
  --shadow-red:0 14px 40px -12px rgba(192,39,45,.42);
  --ease:cubic-bezier(.22,.61,.36,1); --ease-out:cubic-bezier(.16,1,.3,1); --tr:.35s var(--ease);
  --section-y:clamp(3.5rem,7vw,7rem);
}
*{ -webkit-tap-highlight-color:transparent; }
body{ font-family:var(--ff-body); color:var(--ink); background:var(--paper); line-height:1.7; overflow-x:hidden; -webkit-font-smoothing:antialiased; }
html[dir="rtl"] body{ font-family:var(--ff-ar-body); line-height:1.85; }
h1,h2,h3,h4{ font-family:var(--ff-display); font-weight:600; line-height:1.08; letter-spacing:-.01em; }
html[dir="rtl"] h1,html[dir="rtl"] h2,html[dir="rtl"] h3,html[dir="rtl"] h4{ font-family:var(--ff-ar-display); letter-spacing:0; line-height:1.3; }
a{ text-decoration:none; color:inherit; }
img{ max-width:100%; height:auto; }
section{ scroll-margin-top:90px; }
:focus-visible{ outline:2px solid var(--red); outline-offset:3px; border-radius:4px; }
::selection{ background:var(--navy-800); color:var(--sky-100); }

.section{ padding-block:var(--section-y); position:relative; }
.eyebrow{ display:inline-flex; align-items:center; gap:.6rem; font-family:var(--ff-body); font-weight:700; font-size:.78rem; letter-spacing:.22em; text-transform:uppercase; color:var(--blue-600); margin:0 0 .7rem; }
html[dir="rtl"] .eyebrow{ font-family:var(--ff-ar-body); letter-spacing:.04em; }
.eyebrow::before{ content:""; width:26px; height:2px; background:var(--red); }
.eyebrow.light{ color:var(--sky-200); }
.eyebrow.light::before{ background:var(--red-bright); }
.h-sec{ font-size:clamp(1.95rem,1.5rem+2.4vw,3.1rem); color:var(--navy-800); margin-bottom:.7rem; }
.h-sec .accent{ color:var(--blue-600); font-style:italic; }
html[dir="rtl"] .h-sec .accent{ font-style:normal; color:var(--red); }
.h-sec.light{ color:#fff; }
.h-sec .accent-red{ color:var(--red-bright); font-style:italic; }
html[dir="rtl"] .h-sec .accent-red{ font-style:normal; }
.lede{ font-size:clamp(1.05rem,1rem+.5vw,1.28rem); color:var(--ink-soft); font-weight:350; max-width:62ch; }
.lede.light{ color:var(--on-dark-soft); }

/* Buttons */
.btn{ --bs-btn-border-radius:999px; font-weight:600; border-radius:999px; padding:.85rem 1.6rem; transition:transform var(--tr),box-shadow var(--tr),background var(--tr),color var(--tr),border-color var(--tr); border:1.5px solid transparent; display:inline-flex; align-items:center; gap:.5rem; }
html[dir="rtl"] .btn{ font-family:var(--ff-ar-body); font-weight:700; }
.btn:hover{ transform:translateY(-2px); }
.btn-red{ background:linear-gradient(180deg,var(--red),var(--red-600)); color:#fff; box-shadow:var(--shadow-red); }
.btn-red:hover{ color:#fff; box-shadow:0 18px 46px -10px rgba(192,39,45,.6); }
.btn-navy{ background:var(--navy-800); color:var(--on-dark); }
.btn-navy:hover{ background:var(--navy-900); color:#fff; }
.btn-ghost{ background:transparent; color:var(--navy-800); border-color:var(--line); }
.btn-ghost:hover{ border-color:var(--navy-800); background:rgba(12,58,82,.04); color:var(--navy-800); }
.btn-ghost-light{ background:rgba(255,255,255,.06); color:#fff; border-color:var(--on-dark-line); }
.btn-ghost-light:hover{ background:rgba(255,255,255,.13); border-color:rgba(255,255,255,.4); color:#fff; }
.btn-lg{ padding:1rem 1.9rem; font-size:1.02rem; }

/* ---- Top bar + navbar ---- */
.topbar{ background:var(--navy-900); color:var(--on-dark-soft); font-size:.78rem; }
.topbar a{ color:var(--on-dark-soft); transition:color var(--tr); }
.topbar a:hover{ color:#fff; }
.topbar .ic{ color:var(--red-bright); }
.topbar a[href^="tel"]{ direction:ltr; unicode-bidi:isolate; display:inline-flex; gap:.3rem; align-items:center; }
.lang-pill{ font-weight:700; color:#fff !important; border:1px solid rgba(232,68,60,.5); border-radius:999px; padding:.15rem .8rem; }
.lang-pill:hover{ background:var(--red); border-color:var(--red); }

.nav-wrap{ position:sticky; top:0; z-index:1030; background:rgba(251,248,242,.85); backdrop-filter:blur(14px); border-bottom:1px solid var(--line-2); transition:box-shadow var(--tr),background var(--tr); }
.nav-wrap.scrolled{ background:rgba(251,248,242,.96); box-shadow:0 10px 34px -18px rgba(8,43,61,.4); }
.navbar{ padding-block:.55rem; }
.brand{ display:inline-flex; align-items:center; gap:.65rem; }
.brand img{ height:80px; width:auto; transition:height var(--tr); }
.nav-wrap.scrolled .brand img{ height:46px; }
.brand b{ font-family:var(--ff-display); font-weight:600; font-size:1.16rem; color:var(--navy-800); line-height:1; letter-spacing:-.01em; display:block; }
.brand span{ font-size:.64rem; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-mute); }
html[dir="rtl"] .brand b{ font-family:var(--ff-ar-display); }
html[dir="rtl"] .brand span{ letter-spacing:0; text-transform:none; font-size:.74rem; }
.navlink{ font-size:.92rem; font-weight:500; color:var(--ink-soft); padding:.5rem .9rem !important; position:relative; }
.navlink::after{ content:""; position:absolute; inset-inline:.9rem; bottom:.25rem; height:2px; width:0; background:var(--red); transition:width var(--tr); }
.navlink:hover{ color:var(--navy-800); }
.navlink:hover::after{ width:calc(100% - 1.8rem); }
.navbar-toggler{ border:1px solid var(--line); border-radius:12px; padding:.4rem .6rem; }
.navbar-toggler:focus{ box-shadow:none; }

/* ---- Hero ---- */
.hero{ position:relative; overflow:hidden; color:var(--on-dark);
  background:radial-gradient(120% 90% at 82% -10%,#15597d 0,transparent 55%),radial-gradient(100% 80% at 0% 110%,#0e4763 0,transparent 60%),linear-gradient(160deg,var(--navy-900) 0,var(--navy-800) 55%,#0e4a66 100%);
  padding-block:clamp(2.4rem,6vw,4.6rem); }
.hero .dome{ position:absolute; inset-block-start:48%; inset-inline-end:-8%; width:min(64vw,560px); transform:translateY(-50%); opacity:.7; pointer-events:none; }
.hero h1{ font-size:clamp(2.5rem,1.7rem+4.4vw,4.4rem); color:#fff; margin-bottom:1rem; }
.hero .em{ font-style:italic; font-weight:500; color:var(--red-bright); }
html[dir="rtl"] .hero .em{ font-style:normal; }
.hero .lede{ margin-bottom:1.6rem; }
.hero .badge-live{ display:inline-flex; align-items:center; gap:.5rem; font-size:.85rem; color:var(--on-dark-soft); background:rgba(255,255,255,.06); border:1px solid var(--on-dark-line); border-radius:999px; padding:.4rem 1rem; }
.dot{ width:8px; height:8px; border-radius:50%; background:#46d09a; animation:pulse 2s infinite; }
@keyframes pulse{ 0%{ box-shadow:0 0 0 0 rgba(70,208,154,.55);}70%{ box-shadow:0 0 0 9px rgba(70,208,154,0);}100%{ box-shadow:0 0 0 0 rgba(70,208,154,0);} }
.hero-figure{ position:relative; border-radius:var(--radius-xl); overflow:hidden; box-shadow:var(--shadow); aspect-ratio:5/5.4; }
.hero-figure img{ width:100%; height:100%; object-fit:cover; }
.hero-figure .ring{ position:absolute; inset:10px; border:1.5px solid rgba(232,68,60,.45); border-radius:calc(var(--radius-xl) - 8px); }
.float-card{ position:absolute; background:rgba(251,248,242,.96); color:var(--navy-800); border-radius:var(--radius); padding:.7rem .95rem; box-shadow:var(--shadow); }
.float-card .k{ font-family:var(--ff-display); font-weight:700; font-size:1.5rem; color:var(--red); line-height:1; }
.float-card .l{ font-size:.72rem; color:var(--ink-mute); }
.fc-1{ inset-block-start:10%; inset-inline-start:-5%; }
.fc-2{ inset-block-end:8%; inset-inline-end:-5%; }
.fc-2 .stars{ color:var(--red); font-size:.8rem; }

/* stats */
.stats{ margin-top:clamp(2rem,5vw,3rem); border:1px solid var(--on-dark-line); border-radius:var(--radius); overflow:hidden; }
.stat{ background:rgba(255,255,255,.03); padding:1.1rem 1rem; text-align:center; border-inline-start:1px solid var(--on-dark-line); }
.stat:first-child{ border:0; }
.stat .v{ font-family:var(--ff-display); font-weight:700; font-size:clamp(1.7rem,4vw,2.4rem); color:#fff; line-height:1; }
.stat .l{ font-size:.76rem; letter-spacing:.04em; color:var(--on-dark-mute); margin-top:.35rem; text-transform:uppercase; }
html[dir="rtl"] .stat .l{ text-transform:none; }

/* ---- Marquee ---- */
.marquee{ background:var(--navy-800); color:var(--on-dark); padding-block:.9rem; overflow:hidden; border-block:1px solid var(--navy-950); }
.marquee .track{ display:flex; gap:2.8rem; width:max-content; animation:scrollx 32s linear infinite; }
.marquee:hover .track{ animation-play-state:paused; }
.marquee .it{ display:inline-flex; align-items:center; gap:.5rem; white-space:nowrap; font-family:var(--ff-display); font-size:1.05rem; color:var(--sky-100); }
html[dir="rtl"] .marquee .it{ font-family:var(--ff-ar-display); }
.marquee .it .ic{ color:var(--red-bright); font-size:.85rem; }
@keyframes scrollx{ from{ transform:translateX(0);} to{ transform:translateX(-50%);} }
html[dir="rtl"] .marquee .track{ animation-name:scrollx-r; }
@keyframes scrollx-r{ from{ transform:translateX(0);} to{ transform:translateX(50%);} }

/* ---- About ---- */
.about-img{ position:relative; border-radius:var(--radius-l); overflow:hidden; box-shadow:var(--shadow); }
.about-img img{ width:100%; aspect-ratio:4/3; object-fit:cover; transition:transform .9s var(--ease-out); }
.about-img:hover img{ transform:scale(1.05); }
.about-badge{ position:absolute; inset-block-end:-16px; inset-inline-start:18px; background:var(--navy-800); color:#fff; border-radius:var(--radius); padding:.8rem 1.1rem; box-shadow:var(--shadow); }
.about-badge .k{ font-family:var(--ff-display); font-weight:800; font-size:1.6rem; color:var(--red-bright); line-height:1; }
.about-badge .l{ font-size:.74rem; color:var(--on-dark-soft); }
.about-points{ list-style:none; padding:0; margin:1.3rem 0 0; display:grid; gap:.75rem; }
.about-points li{ display:flex; gap:.65rem; align-items:flex-start; font-weight:500; color:var(--navy-800); }
.about-points .ic{ color:var(--red); font-size:1.25rem; flex-shrink:0; margin-top:.1rem; }

/* ---- Why cards ---- */
.why{ background:linear-gradient(180deg,var(--paper),var(--paper-2)); }
.feature{ height:100%; background:#fff; border:1px solid var(--line-2); border-radius:var(--radius-l); padding:1.6rem; transition:transform var(--tr),box-shadow var(--tr); position:relative; overflow:hidden; }
.feature::before{ content:""; position:absolute; inset-block-start:0; inset-inline-start:0; width:100%; height:3px; background:linear-gradient(90deg,var(--red),var(--blue-600)); transform:scaleX(0); transform-origin:left; transition:transform .4s var(--ease); }
html[dir="rtl"] .feature::before{ transform-origin:right; }
.feature:hover{ transform:translateY(-5px); box-shadow:var(--shadow); }
.feature:hover::before{ transform:scaleX(1); }
.feature .ico{ width:56px; height:56px; border-radius:16px; display:grid; place-items:center; background:linear-gradient(150deg,var(--navy-800),var(--blue-700)); color:var(--sky-200); font-size:1.6rem; margin-bottom:1rem; }
.feature h3{ font-size:1.2rem; color:var(--navy-800); margin-bottom:.45rem; }
.feature p{ font-size:.92rem; color:var(--ink-soft); margin:0; }

/* ---- Levels ---- */
.levels{ background:linear-gradient(165deg,var(--navy-900),var(--navy-800) 60%,#0e4763); color:var(--on-dark); }
.level{ height:100%; display:flex; align-items:center; gap:.85rem; background:rgba(255,255,255,.05); border:1px solid var(--on-dark-line); border-radius:var(--radius); padding:.8rem .9rem; transition:transform var(--tr),background var(--tr),border-color var(--tr); }
.level:hover{ transform:translateY(-3px); background:rgba(163,210,234,.12); border-color:rgba(163,210,234,.4); }
.level .n{ flex-shrink:0; width:38px; height:38px; border-radius:11px; display:grid; place-items:center; font-family:var(--ff-display); font-weight:800; color:var(--navy-950); background:linear-gradient(160deg,var(--sky-200),var(--teal-400)); }
.level .cefr{ font-size:.68rem; letter-spacing:.06em; color:var(--red-bright); font-weight:700; }
.level .nm{ font-size:.92rem; color:#fff; font-weight:500; }
.levels-note{ margin-top:1.5rem; background:linear-gradient(120deg,rgba(192,39,45,.18),rgba(163,210,234,.08)); border:1px solid rgba(232,68,60,.3); border-radius:var(--radius-l); padding:1.5rem; }
.levels-note h3{ color:#fff; font-size:1.25rem; margin-bottom:.3rem; }
.levels-note p{ color:var(--on-dark-soft); font-size:.92rem; margin:0; }

/* ---- Courses ---- */
.course{ height:100%; display:flex; flex-direction:column; background:#fff; border:1px solid var(--line-2); border-radius:var(--radius-l); overflow:hidden; transition:transform var(--tr),box-shadow var(--tr); }
.course:hover{ transform:translateY(-6px); box-shadow:var(--shadow); }
.course .media{ position:relative; aspect-ratio:16/10; overflow:hidden; background:var(--navy-800); }
.course .media img{ width:100%; height:100%; object-fit:cover; transition:transform .8s var(--ease-out); }
.course:hover .media img{ transform:scale(1.07); }
.course .tag-pop{ position:absolute; inset-block-start:.8rem; inset-inline-start:.8rem; background:var(--red); color:#fff; font-size:.68rem; font-weight:700; letter-spacing:.04em; text-transform:uppercase; padding:.3rem .7rem; border-radius:999px; }
html[dir="rtl"] .course .tag-pop{ text-transform:none; }
.course .body{ padding:1.3rem 1.3rem .6rem; flex:1; }
.course h3{ font-size:1.25rem; color:var(--navy-800); margin-bottom:.1rem; }
.course .meta{ font-size:.8rem; color:var(--blue-600); font-weight:600; margin-bottom:.6rem; }
.course p{ font-size:.92rem; color:var(--ink-soft); margin-bottom:.9rem; }
.chip{ font-size:.72rem; font-weight:600; color:var(--blue-700); background:var(--sky-100); border:1px solid var(--sky-200); border-radius:999px; padding:.2rem .6rem; display:inline-block; margin:0 .25rem .25rem 0; }
.course .foot{ display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:1rem 1.3rem; border-top:1px solid var(--line-2); background:var(--paper); }
.price .from{ font-size:.72rem; color:var(--ink-mute); }
.price b{ font-family:var(--ff-display); font-size:1.4rem; color:var(--navy-800); }
.price .cur{ font-size:.78rem; color:var(--ink-mute); }

/* ---- Steps ---- */
.steps{ background:var(--paper-2); }
.step{ height:100%; background:#fff; border:1px solid var(--line-2); border-radius:var(--radius-l); padding:1.6rem 1.5rem; transition:transform var(--tr),box-shadow var(--tr); }
.step:hover{ transform:translateY(-5px); box-shadow:var(--shadow); }
.step .n{ font-family:var(--ff-display); font-weight:800; font-size:2.4rem; color:var(--sky-200); line-height:1; display:block; margin-bottom:.5rem; }
.step:hover .n{ color:var(--red); }
.step h3{ font-size:1.18rem; color:var(--navy-800); margin-bottom:.35rem; }
.step p{ font-size:.92rem; color:var(--ink-soft); margin:0; }

/* ---- Gallery ---- */
.gallery{ background:linear-gradient(180deg,var(--paper-2),var(--paper)); }
.bento{ display:grid; grid-template-columns:repeat(2,1fr); grid-auto-rows:150px; gap:.9rem; }
.cell{ position:relative; border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow-s); }
.cell img{ width:100%; height:100%; object-fit:cover; transition:transform .8s var(--ease-out); }
.cell:hover img{ transform:scale(1.08); }
.cell figcaption{ position:absolute; inset-inline:0; inset-block-end:0; padding:1.3rem .8rem .65rem; font-size:.82rem; font-weight:600; color:#fff; background:linear-gradient(transparent,rgba(8,43,61,.85)); opacity:0; transform:translateY(8px); transition:all var(--tr); }
.cell:hover figcaption{ opacity:1; transform:none; }
.cell.wide{ grid-column:span 2; }
@media(min-width:760px){ .bento{ grid-template-columns:repeat(4,1fr); grid-auto-rows:170px; gap:1rem; } .cell.wide{ grid-column:span 2; } .cell.tall{ grid-row:span 2; } .cell figcaption{ opacity:1; transform:none; background:linear-gradient(transparent 40%,rgba(8,43,61,.78)); } }

/* ---- Video ---- */
.video{ background:linear-gradient(165deg,#0e4763,var(--navy-800) 60%,var(--navy-900)); color:var(--on-dark); }
.vcard{ position:relative; aspect-ratio:16/9; border-radius:var(--radius-l); overflow:hidden; box-shadow:var(--shadow); border:1px solid var(--on-dark-line); background:#000; cursor:pointer; }
.vcard img{ width:100%; height:100%; object-fit:cover; transition:transform .6s var(--ease-out); }
.vcard:hover img{ transform:scale(1.06); }
.vcard iframe{ width:100%; height:100%; border:0; display:block; }
.vplay{ position:absolute; inset:0; margin:auto; width:64px; height:64px; border-radius:50%; background:rgba(192,39,45,.94); color:#fff; display:grid; place-items:center; font-size:1.6rem; box-shadow:var(--shadow-red); transition:transform var(--tr); }
.vcard:hover .vplay{ transform:scale(1.1); }

/* ---- Partners ---- */
.partners{ background:var(--paper); }
.partner{ display:grid; place-items:center; padding:1rem; }
.partner img{ max-height:64px; width:auto; filter:grayscale(1); opacity:.6; transition:filter var(--tr),opacity var(--tr); }
.partner img:hover{ filter:grayscale(0); opacity:1; }

/* ---- Testimonials ---- */
.tcard{ height:100%; position:relative; background:#fff; border:1px solid var(--line-2); border-radius:var(--radius-l); padding:2rem 1.6rem 1.5rem; overflow:hidden; transition:transform var(--tr),box-shadow var(--tr); }
.tcard:hover{ transform:translateY(-5px); box-shadow:var(--shadow); }
.tcard .qmark{ position:absolute; inset-block-start:.8rem; inset-inline-end:1.1rem; font-family:var(--ff-display); font-size:3.4rem; color:var(--sky-200); line-height:1; }
.tcard .stars{ color:var(--red); font-size:.9rem; margin-bottom:.7rem; }
.tcard blockquote{ font-family:var(--ff-display); font-size:1.05rem; font-style:italic; line-height:1.6; color:var(--navy-800); margin:0 0 1.2rem; }
html[dir="rtl"] .tcard blockquote{ font-family:var(--ff-ar-body); font-style:normal; font-weight:500; }
.tcard .who{ display:flex; align-items:center; gap:.7rem; }
.tcard .av{ width:46px; height:46px; border-radius:50%; object-fit:cover; background:linear-gradient(150deg,var(--blue-600),var(--navy-800)); color:#fff; display:grid; place-items:center; font-family:var(--ff-display); font-weight:700; flex-shrink:0; }
.tcard .who b{ color:var(--navy-800); display:block; line-height:1.2; }
.tcard .who small{ color:var(--ink-mute); font-size:.78rem; }

/* ---- FAQ ---- */
.faq-item{ background:#fff; border:1px solid var(--line-2); border-radius:var(--radius); overflow:hidden; margin-bottom:.8rem; transition:box-shadow var(--tr); }
.faq-item[open]{ box-shadow:var(--shadow); }
.faq-item summary{ list-style:none; cursor:pointer; display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:1.1rem 1.3rem; font-family:var(--ff-display); font-weight:600; font-size:1.05rem; color:var(--navy-800); }
html[dir="rtl"] .faq-item summary{ font-family:var(--ff-ar-display); }
.faq-item summary::-webkit-details-marker{ display:none; }
.faq-item summary .pm{ flex-shrink:0; width:30px; height:30px; border-radius:8px; display:grid; place-items:center; color:var(--red); background:var(--red-soft); font-size:1.1rem; transition:transform var(--tr),background var(--tr),color var(--tr); }
.faq-item[open] summary .pm{ transform:rotate(45deg); background:var(--red); color:#fff; }
.faq-item .ans{ padding:0 1.3rem 1.2rem; color:var(--ink-soft); font-size:.95rem; }

/* ---- CTA ---- */
.cta{ position:relative; overflow:hidden; color:#fff; text-align:center; padding-block:clamp(3.5rem,8vw,6rem); }
.cta .bg{ position:absolute; inset:0; z-index:0; }
.cta .bg img{ width:100%; height:100%; object-fit:cover; }
.cta .bg::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg,rgba(8,43,61,.86),rgba(12,58,82,.92)); }
.cta .inner{ position:relative; z-index:2; max-width:720px; margin-inline:auto; }
.cta h2{ font-size:clamp(1.95rem,1.5rem+2.4vw,3rem); color:#fff; margin-bottom:.7rem; }
.cta p{ color:var(--on-dark-soft); font-size:clamp(1.05rem,1rem+.5vw,1.25rem); margin-bottom:1.6rem; }

/* ---- Contact ---- */
.contact{ background:var(--paper-2); }
.contact-card{ background:linear-gradient(160deg,var(--navy-800),var(--blue-700)); color:var(--on-dark); border-radius:var(--radius-l); padding:1.8rem; height:100%; }
.contact-card h3{ color:#fff; font-size:1.25rem; margin-bottom:1.2rem; }
.ci{ display:flex; gap:.8rem; align-items:flex-start; margin-bottom:1.05rem; }
.ci .ico{ flex-shrink:0; width:40px; height:40px; border-radius:11px; display:grid; place-items:center; font-size:1.1rem; background:rgba(163,210,234,.14); color:var(--sky-200); border:1px solid var(--on-dark-line); }
.ci .l{ font-size:.7rem; text-transform:uppercase; letter-spacing:.08em; color:var(--on-dark-mute); }
html[dir="rtl"] .ci .l{ text-transform:none; }
.ci .v{ color:#fff; font-size:.92rem; }
.ci .v a{ color:var(--sky-200); }
.ci .v a:hover{ color:#fff; }
.map-box{ border-radius:var(--radius-l); overflow:hidden; height:300px; border:1px solid var(--line); box-shadow:var(--shadow-s); }
.map-box iframe{ width:100%; height:100%; border:0; display:block; }
.wa-bar{ display:flex; align-items:center; gap:.9rem; flex-wrap:wrap; background:#fff; border:1px solid var(--line-2); border-radius:var(--radius); padding:1rem 1.2rem; margin-top:1rem; }
.wa-bar .ico{ width:44px; height:44px; border-radius:50%; display:grid; place-items:center; background:#25d366; color:#fff; font-size:1.4rem; flex-shrink:0; }
.wa-bar .t b{ color:var(--navy-800); display:block; }
.wa-bar .t small{ color:var(--ink-mute); }

/* ---- Footer ---- */
.footer{ background:var(--navy-950); color:var(--on-dark-soft); padding-block:clamp(2.6rem,5vw,3.6rem) 1.5rem; }
.footer h4{ font-family:var(--ff-body); font-size:.76rem; letter-spacing:.16em; text-transform:uppercase; color:var(--red-bright); margin-bottom:1rem; }
html[dir="rtl"] .footer h4{ font-family:var(--ff-ar-body); letter-spacing:0; font-size:.95rem; }
.footer .flogo{ height:56px; filter:brightness(0) invert(1); opacity:.92; margin-bottom:1rem; }
.footer ul{ list-style:none; padding:0; margin:0; display:grid; gap:.5rem; }
.footer a{ color:var(--on-dark-soft); font-size:.88rem; transition:color var(--tr); }
.footer a:hover{ color:#fff; }
.footer .social{ display:flex; gap:.5rem; margin-top:1.1rem; }
.footer .social a{ width:38px; height:38px; border-radius:10px; display:grid; place-items:center; font-size:1.05rem; background:rgba(255,255,255,.05); border:1px solid var(--on-dark-line); transition:var(--tr); }
.footer .social a:hover{ background:var(--red); border-color:var(--red); color:#fff; transform:translateY(-3px); }
.trust-badges{ display:flex; align-items:center; gap:1rem; flex-wrap:wrap; margin-top:1.2rem; }
.trust-badges .maroof{ background:#fff; border-radius:10px; padding:.4rem; }
.trust-badges .maroof img{ height:64px; width:auto; display:block; }
.pay-strip{ margin-top:1.4rem; background:#fff; border-radius:12px; padding:.6rem .9rem; }
.pay-strip img{ width:100%; height:auto; display:block; }
.foot-bottom{ margin-top:2.2rem; padding-top:1.4rem; border-top:1px solid var(--on-dark-line); display:flex; flex-wrap:wrap; gap:.6rem; justify-content:space-between; font-size:.78rem; color:var(--on-dark-mute); }

/* ---- Floating actions + progress ---- */
.progress-bar-top{ position:fixed; inset-block-start:0; inset-inline:0; height:3px; z-index:2000; background:linear-gradient(90deg,var(--red),var(--blue-600)); transform:scaleX(0); transform-origin:left center; }
html[dir="rtl"] .progress-bar-top{ transform-origin:right center; }
.fab-wa{ position:fixed; inset-block-end:20px; inset-inline-start:20px; z-index:1500; width:54px; height:54px; border-radius:50%; background:#25d366; color:#fff; display:grid; place-items:center; font-size:1.7rem; box-shadow:0 10px 30px -6px rgba(37,211,102,.6); }
.fab-wa::after{ content:""; position:absolute; inset:0; border-radius:50%; border:2px solid #25d366; animation:ring 2.2s ease-out infinite; }
@keyframes ring{ 0%{ transform:scale(1); opacity:.7;}100%{ transform:scale(1.7); opacity:0;} }
.fab-top{ position:fixed; inset-block-end:20px; inset-inline-end:20px; z-index:1500; width:48px; height:48px; border-radius:50%; background:var(--navy-800); color:#fff; border:0; display:grid; place-items:center; font-size:1.2rem; box-shadow:var(--shadow); opacity:0; visibility:hidden; transform:translateY(12px); transition:all var(--tr); }
.fab-top.show{ opacity:1; visibility:visible; transform:none; }
.fab-top:hover{ background:var(--red); transform:translateY(-3px); }

/* ---- Reveal ---- */
.reveal{ opacity:0; transform:translateY(26px); transition:opacity .8s var(--ease-out),transform .8s var(--ease-out); }
.reveal.in{ opacity:1; transform:none; }
.skip-link{ position:absolute; inset-block-start:-60px; inset-inline-start:1rem; z-index:3000; background:var(--navy-800); color:#fff; padding:.6rem 1rem; border-radius:0 0 10px 10px; transition:inset-block-start .2s; }
.skip-link:focus{ inset-block-start:0; }
.ic{ width:1em; height:1em; display:inline-block; vertical-align:-.125em; fill:currentColor; }

/* ---- Trust / accreditation strip (replaces fake partner logos) ---- */
.trust-strip{ display:grid; grid-template-columns:repeat(2,1fr); gap:.9rem; margin-top:1.8rem; }
@media(min-width:768px){ .trust-strip{ grid-template-columns:repeat(5,1fr); gap:1.1rem; } }
.trust-item{ height:100%; display:flex; flex-direction:column; align-items:center; text-align:center; gap:.55rem; background:#fff; border:1px solid var(--line-2); border-radius:var(--radius); padding:1.2rem .8rem; transition:transform var(--tr),box-shadow var(--tr); }
.trust-item:hover{ transform:translateY(-4px); box-shadow:var(--shadow); }
.trust-item .ico{ width:48px; height:48px; border-radius:13px; display:grid; place-items:center; font-size:1.4rem; background:linear-gradient(150deg,var(--navy-800),var(--blue-700)); color:var(--sky-200); }
.trust-item b{ font-family:var(--ff-display); font-size:.96rem; color:var(--navy-800); line-height:1.2; }
html[dir="rtl"] .trust-item b{ font-family:var(--ff-ar-display); }
.trust-item small{ font-size:.76rem; color:var(--ink-mute); line-height:1.35; }
.trust-item .maroof-img{ height:42px; width:auto; }

/* ---- Google reviews header ---- */
.gr-head{ display:flex; align-items:center; flex-wrap:wrap; gap:.5rem .9rem; margin-top:.4rem; }
.gr-badge{ display:inline-flex; align-items:center; gap:.5rem; background:#fff; border:1px solid var(--line-2); border-radius:999px; padding:.35rem .9rem; box-shadow:var(--shadow-s); }
.gr-badge .g{ font-family:var(--ff-display); font-weight:700; }
.gr-badge .g b{ color:#4285F4; } .gr-badge .g i{ font-style:normal; }
.gr-badge .rv{ font-weight:700; color:var(--navy-800); }
.gr-badge .stars{ color:#fbbc04; font-size:.9rem; }
.gr-badge .ct{ font-size:.82rem; color:var(--ink-mute); }
.gr-more{ font-weight:600; color:var(--blue-600); font-size:.9rem; }
.gr-more:hover{ color:var(--red); }
.tcard .src{ position:absolute; inset-block-start:1rem; inset-inline-end:1.1rem; width:22px; height:22px; }
.tcard.is-google .qmark{ inset-inline-end:2.6rem; }
.tcard .who .av-img{ width:46px; height:46px; border-radius:50%; object-fit:cover; flex-shrink:0; }
.gr-loading{ color:var(--ink-mute); font-size:.9rem; padding:1rem 0; }

/* ---- Inline lead form (WhatsApp prefill) ---- */
.lead-form{ background:#fff; border:1px solid var(--line-2); border-radius:var(--radius-l); padding:1.4rem; box-shadow:var(--shadow-s); }
.lead-form h3{ font-size:1.15rem; color:var(--navy-800); margin-bottom:.2rem; }
.lead-form .sub{ font-size:.86rem; color:var(--ink-mute); margin-bottom:1rem; }
.lead-form label{ font-size:.78rem; font-weight:600; color:var(--ink-soft); margin-bottom:.25rem; display:block; }
.lead-form .form-control,.lead-form .form-select{ border:1.5px solid var(--line); border-radius:12px; padding:.6rem .85rem; font-size:.92rem; font-family:inherit; }
.lead-form .form-control:focus,.lead-form .form-select:focus{ border-color:var(--blue-600); box-shadow:0 0 0 3px rgba(26,111,150,.12); }
.lead-form .wa-submit{ width:100%; justify-content:center; background:#25d366; color:#fff; border:0; }
.lead-form .wa-submit:hover{ background:#1ebe5b; color:#fff; }
.lead-form .priv{ font-size:.72rem; color:var(--ink-mute); margin-top:.6rem; text-align:center; }

/* ---- Sticky mobile CTA bar ---- */
.mobile-cta{ position:fixed; inset-block-end:0; inset-inline:0; z-index:1490; display:flex; background:rgba(251,248,242,.97); backdrop-filter:blur(10px); border-top:1px solid var(--line); box-shadow:0 -6px 24px -10px rgba(8,43,61,.3); padding:.5rem .6rem calc(.5rem + env(safe-area-inset-bottom)); gap:.5rem; transform:translateY(120%); transition:transform .35s var(--ease); }
.mobile-cta.show{ transform:none; }
.mobile-cta a{ flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.15rem; border-radius:12px; padding:.45rem .3rem; font-size:.72rem; font-weight:700; line-height:1.1; }
.mobile-cta a i{ font-size:1.15rem; }
.mobile-cta .m-call{ background:rgba(12,58,82,.07); color:var(--navy-800); }
.mobile-cta .m-wa{ background:rgba(37,211,102,.12); color:#119a48; }
.mobile-cta .m-reg{ background:linear-gradient(180deg,var(--red),var(--red-600)); color:#fff; }
@media(min-width:992px){ .mobile-cta{ display:none !important; } }
@media(max-width:991.98px){ body.has-mcta{ padding-bottom:64px; } .fab-wa,.fab-top{ inset-block-end:78px; } }

@media (prefers-reduced-motion:reduce){
  .reveal{ opacity:1 !important; transform:none !important; transition:none; }
  .marquee .track,.dot,.fab-wa::after{ animation:none !important; }
  .btn:hover,.course:hover,.feature:hover,.step:hover,.trust-item:hover{ transform:none; }
  .mobile-cta{ transition:none; }
  html{ scroll-behavior:auto; }
}
html{ scroll-behavior:smooth; }