/* =========================================================================
   منصّة التعلّم — هوية بصرية جديدة (Light / Premium)
   نظام تصميم مستقل للواجهة العامة: الصفحة الرئيسية، الدخول، إنشاء الحساب.
   ========================================================================= */
@import url('https://fonts.googleapis.com/css2?family=El+Messiri:wght@500;600;700&family=IBM+Plex+Sans+Arabic:wght@400;500;600;700&family=Orbitron:wght@500;700;800&display=swap');

:root{
  --bg:#F6F7FB;
  --surface:#FFFFFF;
  --surface-tint:#FBFBFE;
  --ink:#12173A;
  --ink-2:#3C4269;
  --muted:#7A8099;
  --brand:#1B2566;
  --brand-deep:#0D1338;
  --brand-soft:#EAEBF9;
  --gold:#B98A2E;
  --gold-deep:#8E6A1F;
  --gold-soft:#FBF1DC;
  --line:#E4E6F0;
  --line-strong:#D3D6E6;
  --success:#1E8E6C;
  --success-soft:#E4F4EE;
  --danger:#C34A4A;
  --danger-soft:#FBEAEA;
  --radius-lg:22px;
  --radius-md:14px;
  --radius-sm:10px;
  --shadow-card:0 1px 2px rgba(16,20,40,.04), 0 16px 32px -20px rgba(16,20,40,.22);
  --shadow-pop:0 24px 60px -24px rgba(13,19,56,.45);
  --font-display:'El Messiri','Amiri',serif;
  --font-body:'IBM Plex Sans Arabic','Segoe UI',Tahoma,Arial,sans-serif;
  --header-h:76px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
html{scroll-behavior:smooth}
body.site{
  background:var(--bg);
  color:var(--ink);
  font-family:var(--font-body);
  min-height:100vh;
  direction:rtl;
  -webkit-font-smoothing:antialiased;
  line-height:1.6;
}
body.site.no-scroll{overflow:hidden}
h1,h2,h3,.display{font-family:var(--font-display);font-weight:600;color:var(--ink);margin:0;letter-spacing:.2px}
p{margin:0}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
button{font-family:inherit}
::selection{background:rgba(27,37,102,.15);color:var(--ink)}
:focus-visible{outline:2px solid var(--brand);outline-offset:2px;border-radius:4px}

.container{max-width:1180px;margin:0 auto;padding:0 24px}

/* ---------- Splash: "FUTURE" wordmark (English, independent of siteName) ---------- */
#splash{
  position:fixed;inset:0;z-index:9999;overflow:hidden;
  background:
    radial-gradient(circle at 18% 20%, rgba(185,138,46,.18), transparent 45%),
    radial-gradient(circle at 85% 80%, rgba(119,135,255,.10), transparent 42%),
    linear-gradient(160deg,var(--brand-deep),#151B4A 60%,var(--brand-deep));
  display:flex;align-items:center;justify-content:center;flex-direction:column;gap:14px;
  transition:opacity .55s ease, visibility .55s ease;
}
#splash.hide{opacity:0;visibility:hidden;pointer-events:none}
#splash.hide *{animation-play-state:paused}
.splash-grid{position:absolute;inset:-10%;opacity:.4;
  background-image:linear-gradient(rgba(228,190,108,.10) 1px,transparent 1px),linear-gradient(90deg,rgba(228,190,108,.10) 1px,transparent 1px);
  background-size:38px 38px;mask-image:radial-gradient(circle at 50% 45%,black 10%,transparent 68%);
  animation:splashGridDrift 16s linear infinite;
}
.splash-orbit{position:absolute;width:150px;height:150px;border-radius:50%;border:1px solid rgba(228,190,108,.35);border-top-color:rgba(228,190,108,.9);animation:splashSpin 2.6s linear infinite}
.splash-orbit::after{content:'';position:absolute;inset:-1px;border-radius:50%;border:1px solid transparent;border-bottom-color:rgba(119,135,255,.5);animation:splashSpin 4s linear infinite reverse}
.splash-mark{position:relative;width:76px;height:76px;border-radius:20px;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(150deg,#232C6E,#141A48);border:1px solid rgba(255,255,255,.12);
  box-shadow:0 18px 40px -14px rgba(0,0,0,.6),0 0 34px -8px rgba(228,190,108,.35);
  animation:splashIn .8s cubic-bezier(.2,.8,.2,1) both;
}
.splash-mark img{width:44px;height:44px;object-fit:contain}
.splash-word{position:relative;font-family:'Orbitron',var(--font-display),sans-serif;font-weight:800;
  font-size:clamp(26px,6vw,38px);letter-spacing:clamp(6px,1.6vw,10px);padding-inline-start:clamp(6px,1.6vw,10px);
  direction:ltr;line-height:1;text-transform:uppercase;
  background:linear-gradient(100deg,#fff 10%,#F5D488 38%,var(--gold) 52%,#fff 78%);
  background-size:220% auto;-webkit-background-clip:text;background-clip:text;color:transparent;
  opacity:0;animation:splashFade .7s ease .2s forwards,splashShimmer 3.2s linear 1s infinite;
}
.splash-tagline{direction:ltr;color:rgba(255,255,255,.5);font-family:var(--font-body);font-size:11px;font-weight:600;
  letter-spacing:4px;text-transform:uppercase;opacity:0;animation:splashFade .6s ease .45s forwards}
.splash-bar{width:130px;height:3px;border-radius:99px;background:rgba(255,255,255,.12);overflow:hidden;opacity:0;animation:splashFade .5s ease .6s forwards;margin-top:4px}
.splash-bar span{display:block;width:40%;height:100%;background:linear-gradient(90deg,var(--gold),#E4BE6C);border-radius:99px;box-shadow:0 0 12px rgba(228,190,108,.6);animation:splashSlide 1.1s ease-in-out infinite}
@keyframes splashIn{from{opacity:0;transform:scale(.82) translateY(8px)}to{opacity:1;transform:scale(1) translateY(0)}}
@keyframes splashFade{to{opacity:1}}
@keyframes splashSlide{0%{transform:translateX(-120%)}100%{transform:translateX(320%)}}
@keyframes splashSpin{to{transform:rotate(360deg)}}
@keyframes splashGridDrift{to{background-position:38px 38px}}
@keyframes splashShimmer{0%{background-position:0 0}100%{background-position:220% 0}}
@media (max-width:420px){.splash-orbit{width:120px;height:120px}.splash-mark{width:64px;height:64px}.splash-mark img{width:38px;height:38px}}
@media (prefers-reduced-motion:reduce){.splash-mark,.splash-word,.splash-tagline,.splash-bar,.splash-orbit,.splash-grid{animation:none;opacity:1}.splash-word{background-position:0 0}.splash-bar span{animation:none;width:60%}}

/* ---------- Ambient background (glass depth) ---------- */
body.site{position:relative}
body.site::before{
  content:'';position:fixed;inset:0;z-index:-2;pointer-events:none;
  background:
    radial-gradient(620px 420px at 88% 8%, rgba(185,138,46,.10), transparent 60%),
    radial-gradient(560px 460px at 6% 28%, rgba(27,37,102,.08), transparent 60%),
    radial-gradient(700px 500px at 50% 92%, rgba(27,37,102,.06), transparent 65%);
}

/* ---------- Header ---------- */
.site-header{
  position:fixed;top:0;insetInline:0;left:0;right:0;z-index:400;height:var(--header-h);
  background:rgba(255,255,255,.72);backdrop-filter:blur(18px) saturate(1.4);-webkit-backdrop-filter:blur(18px) saturate(1.4);
  border-bottom:1px solid rgba(228,230,240,.7);
  transition:background .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.site-header.scrolled{background:rgba(255,255,255,.88);box-shadow:0 12px 30px -18px rgba(16,20,40,.25);border-color:var(--line)}
.site-header .container{height:100%;display:flex;align-items:center;justify-content:space-between;gap:20px}
.brand-mark{display:flex;align-items:center;gap:10px}
.brand-mark .logo-box{width:42px;height:42px;border-radius:12px;background:linear-gradient(150deg,var(--brand),var(--brand-deep));
  display:flex;align-items:center;justify-content:center;flex:0 0 auto;overflow:hidden}
.brand-mark .logo-box img{width:100%;height:100%;object-fit:contain;padding:6px}
.brand-mark .logo-box svg{width:22px;height:22px}
.brand-mark .brand-text{font-family:var(--font-display);font-weight:600;font-size:19px;color:var(--ink)}
.brand-mark .brand-text small{display:block;font-family:var(--font-body);font-weight:400;font-size:11px;color:var(--muted);margin-top:1px}

.main-nav{display:flex;align-items:center;gap:30px}
.main-nav a{font-size:14.5px;color:var(--ink-2);font-weight:500;position:relative;padding:6px 0}
.main-nav a:hover{color:var(--ink)}
.main-nav a::after{content:'';position:absolute;bottom:0;right:0;left:0;height:2px;background:var(--gold);
  transform:scaleX(0);transition:transform .25s ease}
.main-nav a:hover::after{transform:scaleX(1)}

.header-actions{display:flex;align-items:center;gap:10px}
.lang-toggle{display:flex;align-items:center;gap:6px;padding:7px 13px;border-radius:99px;border:1px solid var(--line-strong);
  background:var(--surface);font-size:13px;font-weight:600;color:var(--ink-2);cursor:pointer}
.lang-toggle:hover{border-color:var(--brand)}
.menu-toggle{width:40px;height:40px;border-radius:11px;border:1px solid var(--line-strong);background:var(--surface);
  display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--ink)}
.menu-toggle:hover{border-color:var(--brand)}

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:10px 20px;border-radius:11px;border:1px solid transparent;position:relative;overflow:hidden;
  font-size:14.5px;font-weight:600;cursor:pointer;transition:filter .2s ease, transform .15s ease, box-shadow .2s ease, background .2s ease;
  font-family:var(--font-body);
}
.btn::after{content:'';position:absolute;inset:0;background:linear-gradient(120deg,transparent 30%,rgba(255,255,255,.25) 50%,transparent 70%);
  transform:translateX(-120%);transition:transform .6s ease}
.btn:hover::after{transform:translateX(120%)}
.btn:active{transform:scale(.98)}
.btn-gold{background:linear-gradient(150deg,#CB9C3F,var(--gold-deep));color:#fff;box-shadow:0 12px 24px -10px rgba(142,106,31,.55)}
.btn-gold:hover{filter:brightness(1.06);transform:translateY(-1px)}
.btn-ghost{background:transparent;color:var(--ink-2);border-color:var(--line-strong)}
.btn-ghost:hover{border-color:var(--brand);color:var(--brand)}
.btn-navy{background:linear-gradient(150deg,var(--brand),var(--brand-deep));color:#fff;box-shadow:0 12px 26px -10px rgba(27,37,102,.55)}
.btn-navy:hover{filter:brightness(1.08);transform:translateY(-1px)}
.btn-block{width:100%}
.btn:disabled{opacity:.55;cursor:not-allowed;transform:none}
.hide-mobile{display:inline-flex}
@media (max-width:900px){.main-nav{display:none}.hide-mobile{display:none}}

/* ---------- Sidebar drawer ---------- */
.drawer-backdrop{position:fixed;inset:0;background:rgba(10,13,35,.5);backdrop-filter:blur(2px);z-index:490;opacity:0;visibility:hidden;transition:opacity .3s ease,visibility .3s ease}
.drawer-backdrop.show{opacity:1;visibility:visible}
.side-drawer{
  position:fixed;left:0;right:0;bottom:0;top:auto;width:auto;max-width:none;max-height:88vh;
  background:var(--surface);border-radius:26px 26px 0 0;border:1px solid var(--line);border-bottom:none;
  z-index:500;box-shadow:0 -26px 60px -20px rgba(10,13,35,.35);
  transform:translateY(100%);transition:transform .38s cubic-bezier(.22,.8,.24,1);
  display:flex;flex-direction:column;overflow:hidden;
}
.side-drawer.open{transform:translateY(0)}
.side-drawer::before{content:'';position:absolute;top:10px;left:50%;transform:translateX(-50%);width:40px;height:4px;border-radius:99px;background:var(--line-strong)}
.drawer-head{display:flex;align-items:center;justify-content:space-between;padding:26px 20px 14px;border-bottom:1px solid var(--line)}
.drawer-close{width:36px;height:36px;border-radius:10px;border:1px solid var(--line-strong);background:var(--bg);cursor:pointer;
  display:flex;align-items:center;justify-content:center;color:var(--ink-2)}
.drawer-close:hover{border-color:var(--brand);color:var(--brand)}
.drawer-body{padding:20px;display:flex;flex-direction:column;gap:14px;overflow-y:auto}
.drawer-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.drawer-grid a{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;
  padding:22px 10px;border-radius:16px;background:var(--bg);border:1px solid var(--line);
  color:var(--ink);font-size:14px;font-weight:600;transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease}
.drawer-grid a svg{color:var(--brand)}
.drawer-grid a:hover{transform:translateY(-2px);box-shadow:0 14px 26px -14px rgba(27,37,102,.35);border-color:var(--brand)}
.drawer-grid a.is-gold{background:var(--gold-soft);border-color:#EFDBAC}
.drawer-grid a.is-gold svg{color:var(--gold-deep)}
.drawer-nav a{display:flex;align-items:center;gap:10px;padding:12px 12px;border-radius:11px;font-size:15px;font-weight:500;color:var(--ink-2)}
.drawer-nav a:hover{background:var(--brand-soft);color:var(--brand)}
.drawer-divider{height:1px;background:var(--line);margin:14px 0}
.drawer-toggles{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px;border-radius:99px;background:var(--bg);border:1px solid var(--line)}
.drawer-profile{display:flex;align-items:center;gap:12px;padding:12px;border-radius:14px;background:var(--brand-soft);margin-bottom:6px}
.drawer-profile .avatar{width:42px;height:42px;border-radius:11px;background:linear-gradient(150deg,var(--brand),var(--brand-deep));
  color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;font-family:var(--font-display);font-size:17px;flex:0 0 auto}
.drawer-profile .who{min-width:0}
.drawer-profile .who strong{display:block;font-size:14.5px;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.drawer-profile .who span{font-size:12px;color:var(--muted)}
.drawer-foot{margin-top:auto;padding:18px 20px;border-top:1px solid var(--line);font-size:12px;color:var(--muted);display:flex;flex-direction:column;gap:8px}
.drawer-foot a{color:var(--muted)}
.drawer-foot a:hover{color:var(--brand)}

/* ---------- Scroll reveal ---------- */
.reveal{opacity:0;transform:translateY(26px);transition:opacity .7s cubic-bezier(.16,.8,.3,1), transform .7s cubic-bezier(.16,.8,.3,1)}
.reveal.in{opacity:1;transform:translateY(0)}
@media (prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none}}

@keyframes fadeIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
.fade-in-item{animation:fadeIn .55s cubic-bezier(.16,.8,.3,1) both}

/* ---------- Hero ---------- */
.hero{padding:calc(var(--header-h) + 56px) 0 72px;position:relative;overflow:hidden}
.hero::before{content:'';position:absolute;inset:0;z-index:-1;
  background-image:radial-gradient(rgba(27,37,102,.09) 1.3px, transparent 1.3px);
  background-size:22px 22px;
  mask-image:radial-gradient(ellipse 60% 55% at 82% 20%, black, transparent);
}
.hero::after{content:'';position:absolute;top:-10%;left:-6%;width:46%;height:70%;z-index:-1;border-radius:50%;
  background:radial-gradient(circle, rgba(185,138,46,.14), transparent 68%);filter:blur(6px)}
.hero .container{display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:center}
.hero-eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:600;color:var(--gold-deep);
  background:var(--gold-soft);padding:7px 14px;border-radius:99px;margin-bottom:18px}
.hero-eyebrow .dot{width:6px;height:6px;border-radius:50%;background:var(--gold)}
.hero h1{font-size:44px;line-height:1.28;margin-bottom:18px}
.hero p.lede{font-size:16.5px;color:var(--ink-2);max-width:52ch;margin-bottom:30px}
.hero-cta{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:38px}
.hero-stats{display:flex;gap:34px;flex-wrap:wrap}
.hero-stats .stat b{display:block;font-family:var(--font-display);font-size:24px;color:var(--ink)}
.hero-stats .stat span{font-size:12.5px;color:var(--muted)}

.hero-art{position:relative}
.hero-frame{position:relative;border-radius:26px;overflow:hidden;aspect-ratio:4/3;
  background:linear-gradient(150deg,#1B2566,#0D1338);box-shadow:var(--shadow-pop);border:1px solid rgba(255,255,255,.08)}
.hero-frame img{width:100%;height:100%;object-fit:cover;opacity:.92}
.hero-frame .frame-glow{position:absolute;inset:0;background:radial-gradient(circle at 25% 15%, rgba(255,255,255,.18), transparent 50%)}
.hero-badge{position:absolute;bottom:-18px;right:-16px;background:var(--surface);border:1px solid var(--line);border-radius:16px;
  padding:14px 18px;box-shadow:var(--shadow-card);display:flex;align-items:center;gap:10px}
.hero-badge svg{color:var(--gold);flex:0 0 auto}
.hero-badge b{display:block;font-size:14.5px;color:var(--ink)}
.hero-badge span{font-size:11.5px;color:var(--muted)}
.hero-tag{position:absolute;top:-16px;left:-14px;background:var(--gold-soft);border:1px solid #EFDBAC;border-radius:14px;
  padding:10px 14px;font-size:12.5px;font-weight:600;color:var(--gold-deep);box-shadow:var(--shadow-card)}

@media (max-width:960px){
  .hero .container{grid-template-columns:1fr;gap:44px}
  .hero h1{font-size:34px}
  .hero-art{order:-1}
  .hero-badge,.hero-tag{display:none}
}

/* ---------- Sections ---------- */
.section{padding:64px 0}
.section-head{display:flex;align-items:flex-end;justify-content:space-between;margin-bottom:32px;gap:16px;flex-wrap:wrap}
.section-head h2{font-size:28px;font-weight:800;letter-spacing:-.2px;display:flex;align-items:center}
.section-head h2::before{content:'';display:inline-block;width:24px;height:4px;border-radius:99px;
  background:linear-gradient(90deg,var(--gold),var(--gold-deep));margin-inline-end:12px;flex:0 0 auto}
.section-head p{color:var(--muted);font-size:14.5px;margin-top:6px}
.section-link{font-size:13.5px;font-weight:700;color:var(--brand);display:inline-flex;align-items:center;gap:6px;
  white-space:nowrap;padding:9px 16px;border-radius:99px;background:var(--brand-soft);
  border:1px solid transparent;transition:background .25s ease,color .25s ease,transform .25s ease,box-shadow .25s ease}
.section-link:hover{color:#fff;background:linear-gradient(150deg,var(--brand),var(--brand-deep));
  transform:translateX(-4px);box-shadow:0 14px 28px -16px rgba(59,79,204,.55)}
.section-tint{background:var(--surface-tint);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}

.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
@media (max-width:960px){.grid-3{grid-template-columns:1fr 1fr}.grid-4{grid-template-columns:1fr 1fr}}
@media (max-width:620px){.grid-3,.grid-4{grid-template-columns:1fr}}

/* Course card — صورة كبيرة بتغطية متدرجة والعنوان فوقها، فوتر زجاجي تحت */
.course-card{
  background:rgba(255,255,255,.6);backdrop-filter:blur(16px) saturate(1.3);-webkit-backdrop-filter:blur(16px) saturate(1.3);
  border:1px solid rgba(255,255,255,.7);border-radius:var(--radius-lg);overflow:hidden;
  box-shadow:var(--shadow-card);transition:transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s ease;display:block;
}
.course-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-pop)}
.course-thumb{aspect-ratio:16/11;background:linear-gradient(150deg,var(--brand),var(--brand-deep));position:relative;overflow:hidden}
.course-thumb img{width:100%;height:100%;object-fit:cover;transition:transform .6s cubic-bezier(.2,.8,.2,1)}
.course-card:hover .course-thumb img{transform:scale(1.06)}
.course-thumb .ph{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:rgba(255,255,255,.45)}
.course-thumb::after{content:'';position:absolute;inset:0;background:linear-gradient(0deg, rgba(10,13,35,.86) 0%, rgba(10,13,35,.15) 46%, transparent 68%)}
.course-pill{position:absolute;top:12px;right:12px;z-index:2;background:rgba(255,255,255,.16);backdrop-filter:blur(8px);
  border:1px solid rgba(255,255,255,.3);color:#fff;font-size:11.5px;font-weight:600;padding:6px 11px;border-radius:99px;display:flex;align-items:center;gap:5px}
.course-overlay{position:absolute;inset-inline:0;bottom:0;left:0;right:0;z-index:2;padding:16px}
.course-overlay .course-cat{font-size:11.5px;color:rgba(255,255,255,.75);font-weight:600;margin-bottom:6px}
.course-overlay h3{color:#fff;font-size:16px;font-family:var(--font-body);font-weight:700;line-height:1.4}
.course-body{padding:13px 16px 14px;display:flex;flex-direction:column;gap:9px;font-size:12.5px;color:var(--muted)}
.course-teacher{display:flex;align-items:center;gap:8px}
.course-teacher-avatar{width:24px;height:24px;flex:none;border-radius:8px;background:var(--brand-soft);color:var(--brand);
  display:flex;align-items:center;justify-content:center}
.course-teacher-avatar svg{width:13px;height:13px}
.course-teacher-name{font-weight:700;color:var(--ink-2);font-size:12.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.course-meta{display:flex;align-items:center;gap:10px}
.course-meta .rating,.course-meta .views{display:flex;align-items:center;gap:4px;color:var(--ink-2);font-weight:600;white-space:nowrap}
.course-meta .rating svg{color:var(--gold)}
.course-meta .views svg{color:var(--muted)}
.course-arrow{margin-inline-start:auto;width:30px;height:30px;flex:none;border-radius:9px;background:var(--brand-soft);color:var(--brand);display:flex;align-items:center;justify-content:center;
  transition:background .25s ease, transform .25s ease}
.course-card:hover .course-arrow{background:var(--gold-soft);color:var(--gold-deep);transform:translateX(-3px)}

/* Teacher card — بطاقة تعريفية فخمة مستوحاة من كروت المدرسين الاحترافية، بحركة "طيران" ثلاثية الأبعاد */
#teachersGrid{align-items:start;perspective:1400px}
.teacher-card{
  position:relative;border-radius:var(--radius-lg);overflow:hidden;aspect-ratio:3/4;
  background:linear-gradient(165deg,#1E2A6E 0%, #10173F 55%, #0A0E2E 100%);
  box-shadow:var(--shadow-card);transition:box-shadow .4s ease;
  text-align:initial;padding:0;transform-style:preserve-3d;will-change:transform;
  animation:teacherFloat 6.5s ease-in-out infinite;
}
.teacher-card:nth-child(1){--tilt:-2.2deg;animation-delay:0s}
.teacher-card:nth-child(2){--tilt:2deg;animation-delay:.35s}
.teacher-card:nth-child(3){--tilt:-1.6deg;animation-delay:.7s}
.teacher-card:nth-child(4){--tilt:2.4deg;animation-delay:1.05s}
@keyframes teacherFloat{
  0%,100%{transform:perspective(1200px) rotate(var(--tilt,0deg)) rotateX(3deg) translateY(0)}
  50%{transform:perspective(1200px) rotate(var(--tilt,0deg)) rotateX(-3deg) translateY(-11px)}
}
@media (prefers-reduced-motion:reduce){.teacher-card{animation:none;transform:none}}
.teacher-card:hover,.teacher-card.tilting{animation:none;z-index:3;box-shadow:var(--shadow-pop);transition:transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s ease}
.teacher-card:hover{transform:perspective(1200px) rotate(0deg) translateY(-10px) scale(1.02)}
.teacher-card::before{content:'';position:absolute;inset:0;
  background-image:radial-gradient(circle at 30% 20%, rgba(255,255,255,.14), transparent 40%);pointer-events:none}
.teacher-card::after{content:'';position:absolute;inset:0;
  background:linear-gradient(0deg, rgba(4,6,20,.97) 0%, rgba(4,6,20,.88) 22%, rgba(4,6,20,.5) 46%, rgba(4,6,20,.08) 68%, transparent 80%);pointer-events:none}
.teacher-mark{position:absolute;top:12px;right:12px;z-index:3;width:30px;height:30px;border-radius:9px;
  background:rgba(255,255,255,.12);backdrop-filter:blur(6px);border:1px solid rgba(255,255,255,.2);
  display:flex;align-items:center;justify-content:center;color:var(--gold)}
.teacher-portrait{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;z-index:1}
.teacher-portrait img{width:100%;height:100%;object-fit:cover}
.teacher-portrait .mono{font-family:var(--font-display);font-size:86px;font-weight:600;color:rgba(255,255,255,.16);letter-spacing:2px}
.teacher-subject{display:flex;align-items:center;gap:7px;flex-wrap:wrap;margin-bottom:10px}
.teacher-subject-label{display:inline-flex;align-items:center;gap:5px;flex:none;
  background:linear-gradient(150deg,#D9A94A,var(--gold-deep));color:#251906;font-size:11px;font-weight:800;
  padding:5px 10px;border-radius:99px;box-shadow:0 8px 16px -6px rgba(142,106,31,.6)}
.teacher-subject-name{font-size:12.5px;font-weight:700;color:#fff;text-shadow:0 1px 6px rgba(0,0,0,.5);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%}
.teacher-info{position:absolute;bottom:0;left:0;right:0;z-index:3;padding:18px}
.teacher-info h3{color:#fff;font-size:17px;font-family:var(--font-body);font-weight:800;margin-bottom:4px;text-shadow:0 2px 10px rgba(0,0,0,.55)}
.teacher-info .teacher-role{font-size:12px;font-weight:600;color:rgba(255,255,255,.85);margin-bottom:12px;text-shadow:0 1px 6px rgba(0,0,0,.5)}
.teacher-info .teacher-stats{display:flex;align-items:center;gap:12px;font-size:12px;font-weight:600;color:#fff;margin-bottom:12px;text-shadow:0 1px 6px rgba(0,0,0,.5)}
.teacher-info .teacher-stats span{display:flex;align-items:center;gap:4px}
.teacher-info .teacher-stats svg{color:var(--gold)}
.teacher-cta{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:700;color:var(--gold);
  background:none;border:none;padding:0;cursor:pointer;font-family:var(--font-body)}
.teacher-cta:hover{color:#EAC46F}
.teacher-cta svg{transition:transform .25s ease}
.teacher-cta:hover svg{transform:translateX(-3px)}
@media (max-width:620px){.teacher-card{aspect-ratio:4/5}.teacher-card:nth-child(odd),.teacher-card:nth-child(even){--tilt:0deg}}

.filter-chip{display:none;align-items:center;gap:10px;background:var(--brand-soft);color:var(--brand);
  padding:9px 16px;border-radius:99px;font-size:13px;font-weight:600;margin-bottom:22px}
.filter-chip.show{display:inline-flex}
.filter-chip button{background:none;border:none;color:var(--brand);cursor:pointer;font-weight:700;font-size:15px;line-height:1;padding:0}
.filter-chip button:hover{color:var(--gold-deep)}

.skeleton{background:linear-gradient(90deg,var(--line) 25%,#EEEFF6 37%,var(--line) 63%);background-size:400% 100%;
  animation:sk 1.4s ease infinite;border-radius:var(--radius-md)}
@keyframes sk{0%{background-position:100% 0}100%{background-position:0 0}}
.empty-note{grid-column:1/-1;text-align:center;color:var(--muted);font-size:14px;padding:30px 0}

.tm-scroller{display:flex;gap:20px;overflow-x:auto;scroll-snap-type:x proximity;padding:14px 4px 22px;margin:0 -4px;
  scrollbar-width:thin}
.tm-scroller::-webkit-scrollbar{height:6px}
.tm-scroller::-webkit-scrollbar-thumb{background:var(--line-strong);border-radius:99px}
.testimonial-card{position:relative;flex:0 0 auto;width:300px;scroll-snap-align:start;overflow:hidden;
  background:var(--surface);border:1px solid var(--line);border-radius:20px;padding:44px 22px 20px;
  box-shadow:var(--shadow-card);display:flex;flex-direction:column;gap:12px;
  transform:rotate(var(--tilt,0deg));transition:transform .25s ease,box-shadow .25s ease}
.testimonial-card:hover{transform:rotate(0deg) translateY(-6px);box-shadow:var(--shadow-pop);z-index:2}
.tm-quote-bg{position:absolute;top:-6px;left:16px;color:var(--gold);opacity:.14;transform:scale(3.4);pointer-events:none}
.tm-badge{position:absolute;top:14px;right:16px;background:var(--gold-soft);color:var(--gold-deep);
  font-size:11px;font-weight:700;padding:5px 12px;border-radius:99px;white-space:nowrap;max-width:150px;
  overflow:hidden;text-overflow:ellipsis}
.tm-stars{display:flex;gap:3px;color:var(--line-strong)}
.tm-stars span.on{color:var(--gold)}
.tm-stars svg{width:15px;height:15px}
.tm-text{font-size:14.5px;line-height:1.85;color:var(--ink-2);flex:1;position:relative;
  display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}
.tm-foot{display:flex;align-items:center;gap:10px;padding-top:12px;border-top:1px solid var(--line);position:relative}
.tm-avatar{width:34px;height:34px;border-radius:50%;background:linear-gradient(150deg,var(--gold),var(--gold-deep));
  color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:14px;flex:0 0 auto}
.tm-foot b{font-size:13.5px;color:var(--ink);font-weight:600}
@media (max-width:620px){.testimonial-card{width:78vw}}
html[data-theme="dark"] .testimonial-card{background:var(--surface);border-color:var(--line)}

/* Steps */
.steps-timeline{position:relative;max-width:640px;margin:0 auto;display:flex;flex-direction:column}
.steps-timeline::before{content:'';position:absolute;top:30px;bottom:30px;
  inset-inline-start:32px;width:2px;
  background:linear-gradient(180deg,var(--gold) 0%,var(--line-strong) 55%,var(--line) 100%)}
.steps-timeline .step-card{display:flex;align-items:flex-start;gap:22px;padding:0 0 42px;position:relative;background:none;color:inherit;overflow:visible}
.steps-timeline .step-card:last-child{padding-bottom:0}
.steps-timeline .step-card::before{display:none}
.step-node{flex:0 0 64px;width:64px;height:64px;border-radius:50%;position:relative;z-index:1;
  background:linear-gradient(150deg,var(--brand),var(--brand-deep));color:var(--gold);
  display:flex;align-items:center;justify-content:center;box-shadow:0 16px 32px -16px rgba(13,19,56,.55)}
.step-node .num{position:absolute;top:-7px;inset-inline-end:-7px;width:26px;height:26px;border-radius:50%;
  background:linear-gradient(150deg,#EAC46F,var(--gold-deep));color:#251906;font-family:var(--font-body);
  font-size:12px;font-weight:800;display:flex;align-items:center;justify-content:center;
  box-shadow:0 6px 14px -4px rgba(142,106,31,.6);border:2px solid var(--bg)}
.step-body{flex:1;padding-top:10px}
.step-body h3{font-size:16.5px;font-family:var(--font-body);font-weight:700;margin-bottom:6px;color:var(--ink)}
.step-body p{color:var(--muted);font-size:13.5px;line-height:1.7}
@media (max-width:520px){.steps-timeline::before{inset-inline-start:26px}.step-node{width:52px;height:52px}.step-node svg{width:21px;height:21px}}

/* CTA band — نسخة فخمة: حلقة دهبية خفيفة حوالين الكارت، نقشة نقط هادية،
   وكرتين ضوء (orbs) بتتحرك ببطء لإحساس "حي" من غير ما تلفت النظر عن النص. */
.cta-band{background:linear-gradient(135deg,var(--brand) 0%,var(--brand-deep) 100%);border-radius:28px;padding:52px 44px;
  display:flex;align-items:center;justify-content:space-between;gap:28px;flex-wrap:wrap;position:relative;overflow:hidden;
  isolation:isolate;border:1px solid rgba(228,190,108,.22);box-shadow:0 34px 74px -30px rgba(13,19,56,.6)}
.cta-band::before{content:'';position:absolute;inset:0;z-index:0;pointer-events:none;
  background-image:radial-gradient(rgba(255,255,255,.14) 1.2px, transparent 1.2px);background-size:22px 22px;
  mask-image:radial-gradient(ellipse 75% 95% at 100% 0%, black, transparent 68%);
  -webkit-mask-image:radial-gradient(ellipse 75% 95% at 100% 0%, black, transparent 68%)}
.cta-band::after{content:'';position:absolute;inset:0;z-index:0;background:radial-gradient(circle at 90% 10%, rgba(185,138,46,.28), transparent 45%)}
.cta-orb{position:absolute;z-index:0;border-radius:50%;filter:blur(1px);pointer-events:none;
  background:radial-gradient(circle at 35% 30%, rgba(228,190,108,.4), transparent 72%);animation:ctaOrbFloat 8.5s ease-in-out infinite}
.cta-orb-a{width:210px;height:210px;top:-80px;inset-inline-end:8%;animation-delay:0s}
.cta-orb-b{width:150px;height:150px;bottom:-60px;inset-inline-start:12%;animation-delay:2.6s;
  background:radial-gradient(circle at 35% 30%, rgba(255,255,255,.16), transparent 72%)}
@keyframes ctaOrbFloat{0%,100%{transform:translateY(0) scale(1)}50%{transform:translateY(-18px) scale(1.07)}}
@media (prefers-reduced-motion:reduce){.cta-orb{animation:none}}
.cta-copy{position:relative;z-index:2}
.cta-kicker{display:inline-flex;align-items:center;gap:6px;padding:6px 13px;border-radius:99px;
  background:rgba(228,190,108,.16);border:1px solid rgba(228,190,108,.4);color:#F5D488;
  font-size:12px;font-weight:700;margin-bottom:13px}
.cta-kicker svg{color:var(--gold)}
.cta-band h2{color:#fff;font-size:27px;margin-bottom:8px;position:relative}
.cta-band p{color:rgba(255,255,255,.72);font-size:14.5px;position:relative;max-width:48ch}
.cta-band .cta-actions{position:relative;z-index:2;display:flex;gap:12px;flex-wrap:wrap}
.cta-band .btn-gold{box-shadow:0 16px 32px -14px rgba(228,190,108,.55)}
@media (max-width:620px){.cta-band{padding:38px 26px;text-align:center;justify-content:center}.cta-band p{max-width:none}.cta-band .cta-actions{justify-content:center}}

/* ---------- Footer ---------- */
/* فوتر فخم: حواف علوية مدوّرة ناعمة (بتبان بفضل الفراغ فوقه)، خط دهبي رفيع
   أعلى الحافة، ونقشة نقط خفيفة جدًا في الخلفية لإحساس عمق من غير ما تلفت النظر. */
.site-footer{background:var(--brand-deep);color:rgba(255,255,255,.7);padding:64px 0 0;margin-top:80px;
  position:relative;overflow:hidden;border-radius:40px 40px 0 0;box-shadow:0 -46px 70px -52px rgba(0,0,0,.4)}
.site-footer::before{content:'';position:absolute;top:0;left:6%;right:6%;height:2px;z-index:2;
  background:linear-gradient(90deg,transparent,rgba(228,190,108,.75),transparent)}
.site-footer::after{content:'';position:absolute;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(620px 340px at 88% -8%, rgba(228,190,108,.16), transparent 70%),
    radial-gradient(rgba(255,255,255,.045) 1.2px, transparent 1.2px);
  background-size:auto,25px 25px}
.site-footer .container{position:relative;z-index:1}
.footer-grid{display:grid;grid-template-columns:1.3fr 1fr 1fr 1fr;gap:32px;padding-bottom:44px;border-bottom:1px solid rgba(255,255,255,.1)}
.footer-brand .brand-mark .logo-box{width:46px;height:46px;border-radius:14px}
.footer-brand .brand-mark .brand-text{color:#fff;font-size:19px}
.footer-brand .brand-mark .brand-text small{color:rgba(255,255,255,.55)}
.footer-brand p{font-size:13.5px;color:rgba(255,255,255,.55);margin-top:16px;max-width:32ch;line-height:1.8}
.footer-col h4{color:#fff;font-size:14.5px;font-weight:600;margin-bottom:17px;font-family:var(--font-body);position:relative;padding-bottom:11px}
.footer-col h4::after{content:'';position:absolute;right:0;bottom:0;width:24px;height:2px;border-radius:2px;background:linear-gradient(90deg,var(--gold),transparent)}
@media (min-width:901px){.footer-col{border-inline-start:1px solid rgba(255,255,255,.08);padding-inline-start:28px}}
.footer-col a:not(.social-btn),.footer-col span{display:block;width:fit-content;font-size:13.5px;color:rgba(255,255,255,.6);margin-bottom:11px}
.footer-col a{position:relative;transition:color .2s ease}
.footer-col a:not(.social-btn)::after{content:'';position:absolute;right:0;bottom:-2px;width:0;height:1px;background:var(--gold);transition:width .25s ease}
.footer-col a:hover{color:var(--gold)}
.footer-col a:not(.social-btn):hover::after{width:100%}
.footer-bottom{display:flex;align-items:center;justify-content:center;padding:24px 0;font-size:12.5px;color:rgba(255,255,255,.45);flex-wrap:wrap;gap:10px;border-top:1px solid rgba(255,255,255,.06)}
.footer-bottom a{color:rgba(255,255,255,.45);transition:color .2s ease}
.footer-bottom a:hover{color:var(--gold)}
@media (max-width:900px){.footer-grid{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.footer-grid{grid-template-columns:1fr}.site-footer{border-radius:26px 26px 0 0}}

/* زرار الرجوع لأعلى الصفحة: عايم في ركن الفوتر، بيبان بعد ما المستخدم ينزل شوية */
.back-to-top{position:fixed;bottom:26px;inset-inline-end:26px;z-index:60;width:46px;height:46px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;border:1px solid rgba(228,190,108,.4);
  background:linear-gradient(150deg,var(--brand),var(--brand-deep));color:var(--gold);cursor:pointer;
  box-shadow:0 16px 32px -14px rgba(13,19,56,.55);opacity:0;visibility:hidden;transform:translateY(12px);
  transition:opacity .3s ease,visibility .3s ease,transform .3s ease,background .25s ease,color .25s ease}
.back-to-top.show{opacity:1;visibility:visible;transform:translateY(0)}
.back-to-top:hover{background:linear-gradient(150deg,#EAC46F,var(--gold-deep));color:#251906;transform:translateY(-3px)}
@media (max-width:560px){.back-to-top{width:42px;height:42px;bottom:18px;inset-inline-end:18px}}

/* أيقونات التواصل الاجتماعي في الفوتر: دايرة زجاجية هادية في الوضع العادي،
   وعند مرور الماوس بتتلوّن بلون البراند بتاعها وتترفع لفوق مع توهج خفيف. */
.footer-socials{display:flex;align-items:center;gap:10px;margin-top:6px;flex-wrap:wrap}
.social-btn{
  display:inline-flex;align-items:center;justify-content:center;
  width:40px;height:40px;border-radius:50%;
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.16);
  color:rgba(255,255,255,.85);
  transition:transform .22s cubic-bezier(.2,.8,.2,1),box-shadow .22s ease,background .22s ease,border-color .22s ease,color .22s ease;
  margin-bottom:0;
}
.social-btn svg{width:19px;height:19px}
.social-btn:hover{
  transform:translateY(-4px) scale(1.08);
  color:#fff;
}
.social-facebook:hover{background:#1877F2;border-color:#1877F2;box-shadow:0 12px 26px -10px rgba(24,119,242,.75)}
.social-instagram:hover{background:radial-gradient(circle at 30% 110%,#FDC468,#DF4996 45%,#5851DB 90%);border-color:transparent;box-shadow:0 12px 26px -10px rgba(223,73,150,.75)}
.social-youtube:hover{background:#FF0000;border-color:#FF0000;box-shadow:0 12px 26px -10px rgba(255,0,0,.7)}
.social-whatsapp:hover{background:#25D366;border-color:#25D366;box-shadow:0 12px 26px -10px rgba(37,211,102,.75)}
.social-email:hover{background:var(--gold);border-color:var(--gold);box-shadow:0 12px 26px -10px rgba(199,164,89,.75)}

/* =========================================================================
   عناصر مشتركة مع صفحات الدخول / التسجيل / الصفحات الثابتة
   ========================================================================= */
.auth-shell{min-height:100vh;display:flex}
.homepage-redesign .auth-shell{padding-top:var(--header-h)}
@media (max-width:900px){.homepage-redesign .auth-shell{padding-top:calc(var(--header-h) + 6px)}}
.auth-visual{flex:1;background:linear-gradient(160deg,var(--brand),var(--brand-deep));position:relative;overflow:hidden;
  display:flex;flex-direction:column;justify-content:space-between;padding:44px;color:#fff}
.auth-visual::before{content:'';position:absolute;inset:0;background-image:radial-gradient(rgba(255,255,255,.08) 1.3px, transparent 1.3px);
  background-size:24px 24px;mask-image:radial-gradient(ellipse 70% 60% at 30% 20%, black, transparent)}
.auth-visual .av-quote{font-family:var(--font-display);font-size:23px;line-height:1.6;max-width:30ch;position:relative}
.auth-visual .av-foot{font-size:13px;color:rgba(255,255,255,.55);position:relative}
.auth-side{flex:1;display:flex;align-items:center;justify-content:center;padding:32px;position:relative;overflow:hidden}
.auth-side::before{content:'';position:absolute;inset:0;z-index:-1;
  background:
    radial-gradient(420px 360px at 85% 10%, rgba(185,138,46,.12), transparent 65%),
    radial-gradient(460px 380px at 10% 90%, rgba(27,37,102,.10), transparent 65%);
}
@media (max-width:860px){.auth-visual{display:none}}

.wrap{max-width:440px;width:100%;margin:0 auto;padding:20px}
.card{background:rgba(255,255,255,.72);backdrop-filter:blur(18px) saturate(1.3);-webkit-backdrop-filter:blur(18px) saturate(1.3);
  border:1px solid rgba(255,255,255,.75);border-radius:var(--radius-lg);padding:36px 32px;
  box-shadow:var(--shadow-card);max-width:440px;margin:0 auto;animation:fadeIn .6s cubic-bezier(.16,.8,.3,1) both}
.brand{text-align:center;margin-bottom:26px}
.brand h1{font-size:23px;margin-bottom:8px}
.brand p{color:var(--muted);font-size:13.5px}

.field{margin-bottom:17px}
.field label{display:block;font-size:13px;font-weight:600;color:var(--ink-2);margin-bottom:7px}
.field input,.field select,.field textarea{
  width:100%;padding:12px 14px;border-radius:11px;border:1px solid var(--line-strong);background:var(--surface-tint);
  color:var(--ink);font-size:14.5px;font-family:var(--font-body);transition:border-color .2s ease, box-shadow .2s ease;
}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 3px rgba(27,37,102,.12);background:var(--surface)}
.field .hint,.hint{font-size:12px;color:var(--muted);margin-top:6px}
.field textarea{resize:vertical;min-height:80px}

.card .btn{width:100%}
.btn.secondary{background:var(--surface);border:1px solid var(--line-strong);color:var(--ink-2);box-shadow:none}
.btn.secondary:hover{border-color:var(--brand);color:var(--brand)}
.btn.sm{width:auto;padding:9px 15px;font-size:13px}
.card a.btn,.card button.btn{background:linear-gradient(150deg,var(--brand),var(--brand-deep));color:#fff;box-shadow:0 12px 26px -10px rgba(27,37,102,.5)}
.btn:hover{filter:brightness(1.06);transform:translateY(-1px)}
.btn:disabled{opacity:.55;cursor:not-allowed;transform:none}

.alert{border:1px solid transparent;border-radius:12px;padding:12px 14px;font-size:13.5px;margin-bottom:16px;line-height:1.6}
.alert.error{background:var(--danger-soft);color:#9A3A3A;border-color:#F0CFCF}
.alert.success{background:var(--success-soft);color:#186B50;border-color:#C9E9DD}

.switch{text-align:center;font-size:13.5px;color:var(--muted);margin-top:18px}
.switch a{color:var(--brand);font-weight:600}
.switch a:hover{color:var(--gold-deep)}

.spinner{display:inline-block;width:17px;height:17px;border:2px solid var(--line-strong);border-top-color:var(--brand);border-radius:50%;animation:spin .7s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.empty{text-align:center;color:var(--muted);padding:30px 10px;font-size:14px}

.back-link{display:inline-flex;align-items:center;gap:6px;margin-bottom:18px;color:var(--muted);font-size:14px}
.back-link:hover{color:var(--ink)}
.page-wrap{max-width:720px;margin:0 auto;padding:calc(var(--header-h) + 32px) 20px 40px}
.page-content{white-space:pre-wrap;line-height:1.9;color:var(--ink-2);font-size:15px}

.teacher-note{display:flex;align-items:center;gap:8px;justify-content:center;margin-top:22px;font-size:12.5px;color:var(--muted)}

/* ---------- Mobile / tablet polish ---------- */
@media (max-width:900px){
  /* Homepage mobile drawer: true edge-to-edge bottom sheet */
  .homepage-redesign .side-drawer{
    left:0;right:0;width:100%;max-width:none;
    max-height:min(88dvh,760px);
    border-radius:28px 28px 0 0;
    padding-bottom:env(safe-area-inset-bottom,0px);
    box-shadow:0 -24px 70px -26px rgba(8,12,35,.55);
  }
  .homepage-redesign .drawer-head{padding:25px 18px 15px;min-height:72px}
  .homepage-redesign .drawer-body{padding:16px 16px 12px;gap:12px}
  .homepage-redesign .drawer-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:11px}
  .homepage-redesign .drawer-grid a{min-height:116px;padding:18px 8px;border-radius:18px;font-size:14px}
  .homepage-redesign .drawer-grid a svg{width:28px;height:28px}
  .homepage-redesign .drawer-foot{padding:12px 16px calc(14px + env(safe-area-inset-bottom,0px));}
  .drawer-foot{padding-bottom:calc(18px + env(safe-area-inset-bottom, 0px))}
}
@media (max-width:640px){
  :root{--header-h:66px}
  .container{padding:0 16px}
  .brand-mark .logo-box{width:36px;height:36px;border-radius:10px}
  .brand-mark .logo-box svg{width:19px;height:19px}
  .brand-mark .brand-text{font-size:16.5px}
  .brand-mark .brand-text small{display:none}
  .lang-toggle{padding:6px 11px;font-size:12px}
  .menu-toggle{width:38px;height:38px}
  .hero{padding:calc(var(--header-h) + 34px) 0 48px}
  .hero h1{font-size:27px;line-height:1.35}
  .hero p.lede{font-size:14.5px}
  .hero-cta .btn{flex:1 1 auto;justify-content:center}
  .hero-stats{gap:22px}
  .hero-stats .stat b{font-size:20px}
  .section{padding:44px 0}
  .section-head h2{font-size:22px}
  .homepage-redesign .side-drawer{width:100%;max-width:none;max-height:88dvh;border-radius:28px 28px 0 0}
  .homepage-redesign .drawer-grid a{min-height:108px}
}
@media (max-width:380px){
  .hero-stats{gap:16px}
  .brand-mark .brand-text{font-size:15px}
}


/* =========================================================================
   V2 — Premium public UX polish / Light + Dark / Public course discovery
   لا يغيّر أي منطق API أو تسجيل دخول؛ تحسينات واجهة ومسارات عامة فقط.
   ========================================================================= */
.cta-band::after{pointer-events:none}
.cta-band > *:not(.cta-orb){position:relative;z-index:2}
.theme-toggle{display:inline-flex;align-items:center;justify-content:center;gap:7px;padding:8px 11px;border:1px solid var(--line-strong);border-radius:12px;background:var(--surface);color:var(--ink-2);font-size:12px;font-weight:700;cursor:pointer;transition:.2s ease}
.theme-toggle:hover{border-color:var(--brand);color:var(--brand);transform:translateY(-1px)}
.theme-icon{font-size:15px;line-height:1}

/* Stronger teacher cards: cleaner hierarchy + better contrast.
   The text scrim used to fade to almost nothing above the name, so the role
   line and stats read as faint/washed out over a bright photo. It's now a
   solid, deliberately dark panel behind all the text, not just a thin line
   under the name — bold, legible, and premium-looking on any photo. */
.teacher-card{border:1px solid rgba(255,255,255,.13);box-shadow:0 18px 45px -24px rgba(13,19,56,.55)}
.teacher-card::after{background:linear-gradient(180deg,transparent 22%,rgba(4,6,20,.35) 38%,rgba(4,6,20,.82) 56%,rgba(4,6,20,.97) 75%,#04061a 100%)}
.teacher-info{padding:20px 18px 18px}
.teacher-info h3{font-size:18.5px;font-weight:800;line-height:1.35;color:#fff;text-shadow:0 2px 14px rgba(0,0,0,.6);margin-bottom:6px}
.teacher-info .teacher-role{font-size:12.5px;font-weight:600;line-height:1.65;color:rgba(255,255,255,.92);min-height:32px;margin-bottom:12px;text-shadow:0 1px 8px rgba(0,0,0,.5)}
.teacher-info .teacher-stats{gap:8px;flex-wrap:wrap;margin-bottom:14px}
.teacher-info .teacher-stats span{padding:5px 8px;border-radius:8px;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.22);color:#fff;font-weight:600;backdrop-filter:blur(4px)}
.teacher-cta{padding:8px 11px;border-radius:10px;background:rgba(228,190,108,.16);border:1px solid rgba(228,190,108,.4);color:#F5D488;font-weight:700;transition:.2s ease}
.teacher-cta:hover{color:#251906;background:linear-gradient(150deg,#EAC46F,var(--gold-deep));border-color:transparent;transform:translateY(-1px)}

/* More premium course cards — the goal is a card that genuinely looks
   expensive and makes someone want to tap it: crisper shadow lift, a subtle
   gold ring that appears on hover, a light "shine" sweep across the cover,
   and a bolder, higher-contrast title/footer. No markup or logic changed —
   pure visual polish on the existing elements. */
.course-card{
  background:var(--surface);border:1px solid var(--line);
  box-shadow:0 14px 34px -22px rgba(13,19,56,.4);
  position:relative;
  transition:transform .4s cubic-bezier(.2,.8,.2,1),box-shadow .4s ease,border-color .4s ease;
}
.course-card::before{
  content:'';position:absolute;inset:-1px;border-radius:inherit;z-index:3;pointer-events:none;
  padding:1px;background:linear-gradient(135deg,var(--gold),transparent 30%,transparent 70%,var(--gold-deep));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;
  opacity:0;transition:opacity .4s ease;
}
.course-card:hover{transform:translateY(-9px) scale(1.012);box-shadow:0 30px 60px -24px rgba(13,19,56,.45)}
.course-card:hover::before{opacity:1}
.course-thumb{aspect-ratio:16/10;position:relative}
.course-thumb::before{
  content:'';position:absolute;inset:0;z-index:3;pointer-events:none;
  background:linear-gradient(115deg,transparent 40%,rgba(255,255,255,.32) 48%,transparent 58%);
  transform:translateX(-120%);
}
.course-card:hover .course-thumb::before{transform:translateX(120%);transition:transform .85s cubic-bezier(.2,.7,.1,1)}
.course-pill{background:linear-gradient(150deg,rgba(228,190,108,.95),rgba(199,142,45,.95));color:#251906;border-color:transparent;font-weight:700;box-shadow:0 8px 18px -8px rgba(142,106,31,.6)}
.course-overlay h3{font-weight:800;letter-spacing:-.1px;text-shadow:0 2px 12px rgba(0,0,0,.5)}
.course-body{padding:15px 16px 16px;background:var(--surface);border-top:1px solid var(--line)}
.course-meta{gap:8px;flex-wrap:wrap}
.course-meta .teacher-name{font-weight:600;color:var(--muted)}
.course-arrow{width:34px;height:34px;border-radius:11px}
.course-card:hover .course-arrow{box-shadow:0 10px 20px -10px rgba(142,106,31,.6)}
.course-meta .rating{padding:5px 8px;border-radius:8px;background:var(--gold-soft);color:var(--gold-deep)}
.course-meta .views{display:inline-flex;align-items:center;gap:5px;color:var(--muted);font-weight:600}

/* Top-rated ribbon: marks whichever grid card is the same course chosen for
   the hero, so the "best course" signal is consistent across the page. */
.course-top-ribbon{position:absolute;z-index:4;top:14px;inset-inline-start:14px;display:inline-flex;align-items:center;gap:5px;padding:6px 10px;border-radius:999px;background:linear-gradient(150deg,#EAC46F,var(--gold-deep));color:#251906;font-size:10.5px;font-weight:800;box-shadow:0 10px 22px -8px rgba(142,106,31,.65)}
.course-thumb-link{display:block}
.course-card-footer{display:flex;align-items:center;gap:8px;margin-top:12px;padding-top:12px;border-top:1px solid var(--line)}
.course-teacher-btn{flex:1;min-width:0;display:flex;align-items:center;gap:8px;padding:8px 10px;border-radius:11px;background:var(--brand-soft);transition:background .2s ease,transform .2s ease}
.course-teacher-btn:hover{background:var(--gold-soft);transform:translateY(-1px)}
.course-teacher-btn .course-teacher-avatar{width:26px;height:26px;border-radius:50%;flex-shrink:0;display:grid;place-items:center;background:var(--surface);color:var(--brand)}
.course-teacher-btn .course-teacher-name{font-size:12px;font-weight:700;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.course-teacher-btn:hover .course-teacher-name{color:var(--gold-deep)}
.course-view-btn{flex-shrink:0;width:38px;height:38px;border-radius:11px;display:grid;place-items:center;background:var(--brand);color:#fff;transition:background .2s ease,transform .2s ease,box-shadow .2s ease}
.course-view-btn:hover{background:linear-gradient(150deg,#EAC46F,var(--gold-deep));color:#251906;transform:translateY(-1px);box-shadow:0 10px 20px -10px rgba(142,106,31,.6)}
html[data-theme="dark"] .course-teacher-btn{background:var(--brand-soft)}
html[data-theme="dark"] .course-card-footer{border-color:var(--line)}

/* Public discovery page */
.discovery-hero{padding:calc(var(--header-h) + 42px) 0 38px;background:linear-gradient(135deg,var(--surface),var(--surface-tint));border-bottom:1px solid var(--line);position:relative;overflow:hidden}
.discovery-hero::after{content:'';position:absolute;width:520px;height:320px;left:-150px;top:-110px;background:radial-gradient(circle,rgba(185,138,46,.16),transparent 68%);pointer-events:none}
.discovery-hero .container{position:relative;z-index:1}
.discovery-kicker{display:inline-flex;align-items:center;gap:8px;padding:7px 12px;border-radius:99px;background:var(--gold-soft);color:var(--gold-deep);font-size:12px;font-weight:700;margin-bottom:12px}
.discovery-hero h1{font-size:38px;line-height:1.3;margin-bottom:9px}
.discovery-hero p{max-width:65ch;color:var(--muted);font-size:15px}
.discovery-toolbar{padding:22px 0;border-bottom:1px solid var(--line);background:var(--surface)}
.discovery-toolbar .container{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.discovery-search{flex:1;min-width:220px;padding:12px 14px;border:1px solid var(--line-strong);border-radius:12px;background:var(--surface-tint);color:var(--ink);font:inherit}
.discovery-search:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 3px rgba(27,37,102,.10)}
.discovery-count{font-size:13px;color:var(--muted);font-weight:600}
.discovery-main{padding:46px 0 80px}
.teacher-hero-card{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:20px;background:var(--surface);border:1px solid var(--line);border-radius:24px;padding:20px 22px;margin-bottom:30px;box-shadow:var(--shadow-card)}
.teacher-hero-avatar{width:92px;height:92px;border-radius:20px;overflow:hidden;display:flex;align-items:center;justify-content:center;background:linear-gradient(145deg,var(--brand),var(--brand-deep));color:#fff;font-family:var(--font-display);font-size:32px;font-weight:700}
.teacher-hero-avatar img{width:100%;height:100%;object-fit:cover}
.teacher-hero-copy h2{font-size:23px;margin-bottom:4px}
.teacher-hero-copy p{color:var(--muted);font-size:13.5px;line-height:1.8;max-width:65ch}
.teacher-hero-stats{display:flex;gap:9px;flex-wrap:wrap;justify-content:flex-end}
.teacher-hero-stats span{padding:8px 10px;border-radius:10px;background:var(--brand-soft);color:var(--brand);font-size:12px;font-weight:700}
.discovery-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.discovery-empty{grid-column:1/-1;text-align:center;padding:50px 20px;border:1px dashed var(--line-strong);border-radius:20px;color:var(--muted);background:var(--surface)}
.discovery-course-card .course-body{min-height:74px}
.discovery-course-card .course-title{font-size:16px;font-weight:700;color:var(--ink);line-height:1.55}
.discovery-course-card .course-teacher{font-size:12px;color:var(--muted);margin-top:4px}
.discovery-course-card .course-open{display:inline-flex;align-items:center;gap:6px;margin-top:12px;padding:8px 11px;border-radius:9px;background:var(--brand-soft);color:var(--brand);font-size:12px;font-weight:700}
.discovery-course-card:hover .course-open{background:var(--gold-soft);color:var(--gold-deep)}

/* Dark mode */
html[data-theme="dark"]{--bg:#090D1B;--surface:#11182A;--surface-tint:#0D1424;--ink:#F4F6FF;--ink-2:#C6CCE0;--muted:#929AB4;--brand:#7787FF;--brand-deep:#161E46;--brand-soft:#1A2342;--line:#222B42;--line-strong:#33405E;--gold:#E4BE6C;--gold-deep:#D8AD52;--gold-soft:#2B2416;--shadow-card:0 1px 2px rgba(0,0,0,.25),0 18px 42px -24px rgba(0,0,0,.7);--shadow-pop:0 26px 70px -30px rgba(0,0,0,.85)}
html[data-theme="dark"] body.site::before{background:radial-gradient(620px 420px at 88% 8%,rgba(228,190,108,.08),transparent 60%),radial-gradient(560px 460px at 6% 28%,rgba(119,135,255,.08),transparent 60%)}
html[data-theme="dark"] .site-header{background:rgba(9,13,27,.76);border-color:rgba(51,64,94,.65)}
html[data-theme="dark"] .site-header.scrolled{background:rgba(9,13,27,.92)}
html[data-theme="dark"] .main-nav a{color:var(--ink-2)}
html[data-theme="dark"] .lang-toggle,html[data-theme="dark"] .theme-toggle,html[data-theme="dark"] .menu-toggle{background:var(--surface);border-color:var(--line-strong);color:var(--ink-2)}
html[data-theme="dark"] .btn-ghost{color:var(--ink-2);border-color:var(--line-strong)}
html[data-theme="dark"] .hero p.lede{color:var(--ink-2)}
html[data-theme="dark"] .section-tint{background:#0C1221}
html[data-theme="dark"] .course-card{background:var(--surface);border-color:var(--line)}
html[data-theme="dark"] .course-body{background:var(--surface)}
html[data-theme="dark"] .course-meta .rating{background:var(--gold-soft);color:var(--gold)}
html[data-theme="dark"] .filter-chip{background:var(--brand-soft);color:var(--ink)}
html[data-theme="dark"] .step-node .num{border-color:var(--bg)}
html[data-theme="dark"] .auth-side{background:var(--bg)}
html[data-theme="dark"] .card{background:rgba(17,24,42,.84);border-color:rgba(51,64,94,.8)}
html[data-theme="dark"] .field input,html[data-theme="dark"] .field select,html[data-theme="dark"] .field textarea{background:#0C1221;border-color:var(--line-strong);color:var(--ink)}
html[data-theme="dark"] .drawer-backdrop{background:rgba(0,0,0,.66)}
html[data-theme="dark"] .side-drawer{background:rgba(13,20,36,.92);border-color:var(--line)}
html[data-theme="dark"] .drawer-close{background:var(--surface);border-color:var(--line-strong);color:var(--ink-2)}
html[data-theme="dark"] .discovery-hero{background:linear-gradient(135deg,#0D1424,#11182A)}
html[data-theme="dark"] .discovery-toolbar{background:var(--surface)}
html[data-theme="dark"] .discovery-search{background:#0C1221;border-color:var(--line-strong)}
html[data-theme="dark"] .teacher-hero-card,html[data-theme="dark"] .discovery-empty{background:var(--surface);border-color:var(--line)}
html[data-theme="dark"] .teacher-hero-stats span{background:var(--brand-soft);color:#DDE2FF}
html[data-theme="dark"] .discovery-course-card .course-title{color:var(--ink)}

@media (max-width:760px){
  .theme-toggle{width:40px;height:40px;padding:0}.theme-label{display:none}
  .discovery-hero h1{font-size:29px}
  .discovery-grid{grid-template-columns:1fr}
  .teacher-hero-card{grid-template-columns:auto 1fr;align-items:start}
  .teacher-hero-stats{grid-column:1/-1;justify-content:flex-start}
  .teacher-hero-avatar{width:72px;height:72px;border-radius:16px;font-size:25px}
}
@media (max-width:520px){
  .discovery-hero{padding-top:calc(var(--header-h) + 28px)}
  .discovery-toolbar .container{align-items:stretch}.discovery-search{min-width:100%;width:100%}.discovery-count{width:100%}
}


/* =========================================================================
   V3 — Course discovery + course detail + subscription request
   Same public identity as the homepage; no existing API styles removed.
   ========================================================================= */
.courses-page-main{min-height:calc(100vh - var(--header-h))}
.courses-discovery-section{padding-top:calc(var(--header-h) + 34px);background:var(--bg)}
.courses-page-head{align-items:flex-end;margin-bottom:28px}
.courses-page-head h1{font-size:34px;line-height:1.25;margin:10px 0 8px}
.courses-page-head p{color:var(--muted);font-size:14px}
.courses-tools{display:flex;align-items:center;gap:10px;flex-wrap:wrap;justify-content:flex-end}
.courses-search-wrap{display:flex;align-items:center;gap:8px;min-width:290px;padding:10px 13px;border:1px solid var(--line);background:var(--surface);border-radius:14px;box-shadow:var(--shadow-card)}
.courses-search-wrap span{font-size:20px;color:var(--muted);line-height:1}
.courses-search-wrap input{border:0;outline:0;background:transparent;color:var(--ink);font:inherit;width:100%;font-size:13.5px}
.courses-search-wrap:focus-within{border-color:var(--brand);box-shadow:0 0 0 3px rgba(27,37,102,.08),var(--shadow-card)}
.courses-page-grid{align-items:start}
.course-detail-main{padding:calc(var(--header-h) + 30px) 0 70px;min-height:calc(100vh - var(--header-h))}
.course-detail-loading{min-height:50vh;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:12px;color:var(--muted)}
.course-detail-card{background:var(--surface);border:1px solid var(--line);border-radius:28px;overflow:hidden;box-shadow:var(--shadow-card)}
.course-detail-cover{height:min(48vw,430px);min-height:250px;background:linear-gradient(145deg,var(--brand),var(--brand-deep));position:relative;overflow:hidden}
.course-detail-cover img{width:100%;height:100%;object-fit:cover}
.course-detail-cover .ph{height:100%;display:flex;align-items:center;justify-content:center;color:rgba(255,255,255,.35)}
.course-detail-cover-overlay{position:absolute;inset:0;background:linear-gradient(180deg,transparent 42%,rgba(6,8,26,.72) 100%);pointer-events:none}
.course-detail-cover .course-pill{z-index:2}
.course-detail-content{padding:34px 38px 42px}
.course-detail-top{display:flex;justify-content:space-between;align-items:flex-start;gap:25px}
.course-detail-top h1{font-size:34px;line-height:1.35;margin:9px 0 7px}
.course-detail-teacher{color:var(--muted);font-size:13px}.course-detail-teacher a{color:var(--brand);font-weight:700}
.course-detail-rating{min-width:125px;padding:14px;border-radius:16px;background:var(--brand-soft);display:flex;flex-direction:column;gap:4px;text-align:center;color:var(--ink)}
.course-detail-rating b{font-size:25px}.course-detail-rating span{font-size:11px;color:var(--muted)}.course-detail-rating svg{color:var(--gold);vertical-align:middle}
.course-detail-description{max-width:80ch;color:var(--ink-2);line-height:1.95;font-size:15px;margin:22px 0}
.course-detail-stats{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:22px}.course-detail-stats span{padding:8px 11px;border-radius:10px;background:var(--surface-tint);border:1px solid var(--line);font-size:12px;color:var(--muted);font-weight:700}
.course-subscribe-btn{min-width:220px}
.alert.info{background:var(--gold-soft);color:var(--gold-deep);border-color:#EFDBAC}
.course-subscribe-area .alert{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;margin:0}
.course-subscribe-area .alert .btn{white-space:nowrap}
@media (max-width:520px){.course-subscribe-area .alert{flex-direction:column;align-items:stretch;text-align:center}}
.course-outline{margin-top:42px;border-top:1px solid var(--line);padding-top:30px}.course-outline .section-head{margin-bottom:18px}.course-outline .section-head h2{font-size:22px}
.course-section-item{display:flex;align-items:center;gap:15px;padding:16px 17px;border:1px solid var(--line);background:var(--surface-tint);border-radius:15px;margin-bottom:10px}.course-section-num{width:38px;height:38px;border-radius:11px;background:var(--brand-soft);color:var(--brand);display:flex;align-items:center;justify-content:center;font-weight:800;font-size:11px}.course-section-item strong{display:block;color:var(--ink);font-size:14px;margin-bottom:4px}.course-section-item span{display:block;color:var(--muted);font-size:12px}
.course-modal{position:fixed;inset:0;z-index:2000;display:none;align-items:center;justify-content:center;padding:20px}.course-modal.show{display:flex}.course-modal-backdrop{position:absolute;inset:0;background:rgba(5,8,20,.66);backdrop-filter:blur(8px)}.course-modal-card{position:relative;z-index:1;width:min(520px,100%);max-height:calc(100vh - 40px);overflow:auto;background:var(--surface);border:1px solid var(--line);border-radius:24px;padding:28px;box-shadow:0 30px 90px rgba(0,0,0,.35)}.course-modal-card h2{font-size:23px;margin:12px 0 7px}.course-modal-card>p{color:var(--muted);font-size:13px;line-height:1.7;margin-bottom:18px}.course-modal-close{position:absolute;top:15px;left:15px;width:36px;height:36px;border-radius:10px;border:1px solid var(--line);background:var(--surface-tint);color:var(--ink);font-size:23px;cursor:pointer}
html[data-theme="dark"] .courses-search-wrap{background:var(--surface)}
html[data-theme="dark"] .course-detail-card{background:var(--surface)}
html[data-theme="dark"] .course-detail-stats span,.course-section-item{background:var(--surface-tint)}
html[data-theme="dark"] .course-modal-card{background:var(--surface)}
@media (max-width:760px){.courses-discovery-section{padding-top:calc(var(--header-h) + 24px)}.courses-page-head{align-items:stretch}.courses-page-head h1{font-size:27px}.courses-tools{justify-content:stretch}.courses-search-wrap{min-width:100%;width:100%}.course-detail-main{padding-top:calc(var(--header-h) + 20px)}.course-detail-content{padding:25px 19px 32px}.course-detail-top{flex-direction:column}.course-detail-top h1{font-size:27px}.course-detail-rating{width:100%;text-align:right;flex-direction:row;align-items:center;justify-content:space-between}.course-detail-cover{height:56vw;min-height:210px}.course-subscribe-btn{width:100%}}


/* =========================================================================
   HOMEPAGE REDESIGN — v1
   Scoped strictly to .homepage-redesign. No dashboard / auth / database logic.
   ========================================================================= */
.homepage-redesign{
  --home-header-bg:rgba(255,255,255,.78);
  --home-header-border:rgba(214,218,233,.72);
  --home-glow:rgba(185,138,46,.16);
}
.homepage-redesign .site-header{
  height:78px;
  background:var(--home-header-bg);
  border-bottom:1px solid var(--home-header-border);
  box-shadow:0 8px 34px -28px rgba(13,19,56,.5);
}
.homepage-redesign .site-header.scrolled{
  background:rgba(255,255,255,.92);
  border-color:var(--line);
  box-shadow:0 16px 38px -26px rgba(13,19,56,.34);
}
.homepage-redesign .site-header .container{gap:28px}
.homepage-redesign .brand-mark{gap:12px}
.homepage-redesign .brand-mark .logo-box{
  width:44px;height:44px;border-radius:14px;
  background:#fff;
  box-shadow:0 8px 18px -10px rgba(13,19,56,.32),0 2px 6px -2px rgba(13,19,56,.16),inset 0 1px 0 rgba(255,255,255,.6);
  border:1px solid rgba(214,218,233,.9);
  overflow:hidden;
}
.homepage-redesign .brand-mark .logo-box img{padding:5px}
.homepage-redesign .brand-mark .brand-text{font-size:20px;letter-spacing:.1px}
.homepage-redesign .main-nav{gap:34px}
.homepage-redesign .main-nav a{font-size:14px;font-weight:600;padding:8px 0}
.homepage-redesign .main-nav a::after{height:2px;border-radius:99px}
.homepage-redesign .header-actions{gap:9px}

/* Premium library-style theme control: icon-only on the desktop header,
   while the full control remains inside the mobile drawer. */
.homepage-redesign .site-header .theme-toggle{
  width:46px;height:46px;padding:0;border-radius:15px;
  border:1px solid var(--line-strong);
  background:linear-gradient(145deg,var(--surface),var(--surface-tint));
  color:var(--ink-2);
  box-shadow:0 8px 18px -14px rgba(13,19,56,.55),inset 0 1px 0 rgba(255,255,255,.8);
  transition:transform .22s ease,border-color .22s ease,box-shadow .22s ease,color .22s ease;
}
.homepage-redesign .site-header .theme-toggle:hover{
  transform:translateY(-2px);
  border-color:var(--brand);
  color:var(--brand);
  box-shadow:0 14px 26px -18px rgba(27,37,102,.6);
}
.homepage-redesign .site-header .theme-toggle svg{width:20px;height:20px}
.homepage-redesign .site-header .theme-toggle .theme-label{display:none}
.homepage-redesign .site-header .lang-toggle{
  min-width:46px;height:46px;padding:0 13px;border-radius:15px;
  justify-content:center;font-size:12px;font-weight:800;
  background:linear-gradient(145deg,var(--surface),var(--surface-tint));
  box-shadow:0 8px 18px -14px rgba(13,19,56,.45);
}
.homepage-redesign .site-header .menu-toggle{
  width:48px;height:48px;border-radius:15px;
  border:1px solid var(--line-strong);
  background:linear-gradient(145deg,var(--surface),var(--surface-tint));
  color:var(--brand);
  box-shadow:0 10px 24px -16px rgba(13,19,56,.6),inset 0 1px 0 rgba(255,255,255,.85);
  transition:transform .22s ease,border-color .22s ease,box-shadow .22s ease,background .22s ease;
}
.homepage-redesign .site-header .menu-toggle:hover{
  transform:translateY(-2px);
  border-color:var(--brand);
  box-shadow:0 15px 28px -18px rgba(27,37,102,.65);
}
.homepage-redesign .site-header .menu-toggle svg{width:22px;height:22px;stroke-width:1.8}

/* Hero: more editorial, less generic-card feeling. */
.homepage-redesign .hero{
  min-height:clamp(650px,calc(100vh - 20px),820px);
  padding:calc(var(--header-h) + 74px) 0 86px;
  display:flex;align-items:center;
  isolation:isolate;
}
.homepage-redesign .hero::before{
  background-image:
    radial-gradient(rgba(27,37,102,.08) 1.15px,transparent 1.15px),
    linear-gradient(90deg,transparent 0 49.5%,rgba(27,37,102,.025) 50%,transparent 50.5%);
  background-size:22px 22px,100% 100%;
  mask-image:radial-gradient(ellipse 58% 64% at 78% 35%,black 0%,rgba(0,0,0,.8) 45%,transparent 82%);
}
.homepage-redesign .hero::after{
  top:-18%;left:auto;right:-10%;width:58%;height:90%;
  background:radial-gradient(circle,var(--home-glow) 0%,rgba(185,138,46,.05) 34%,transparent 70%);
  filter:blur(8px);
}
.homepage-redesign .hero .container{
  width:100%;grid-template-columns:minmax(0,1fr) minmax(420px,.88fr);
  gap:72px;align-items:center;
}
.homepage-redesign .hero-copy{position:relative;z-index:2}
.homepage-redesign .hero-eyebrow{
  padding:8px 13px 8px 15px;margin-bottom:20px;
  border:1px solid rgba(185,138,46,.25);
  background:linear-gradient(135deg,rgba(251,241,220,.92),rgba(255,255,255,.72));
  box-shadow:0 10px 28px -22px rgba(142,106,31,.55);
}
.homepage-redesign .hero-eyebrow .dot{box-shadow:0 0 0 5px rgba(185,138,46,.09)}
.homepage-redesign .hero h1{
  max-width:760px;font-size:clamp(38px,4.15vw,58px);line-height:1.2;
  letter-spacing:-.6px;margin-bottom:20px;
}
.homepage-redesign .hero p.lede{
  max-width:58ch;font-size:17px;line-height:1.95;color:var(--ink-2);margin-bottom:32px;
}
.homepage-redesign .hero-cta{gap:12px;margin-bottom:38px}
.homepage-redesign .hero-cta .btn{
  min-height:54px;padding:12px 23px;border-radius:15px;
  font-size:14px;font-weight:700;
}
.homepage-redesign .hero-cta .btn-gold{
  border:1px solid rgba(255,255,255,.3);
  box-shadow:0 18px 34px -18px rgba(142,106,31,.72),inset 0 1px 0 rgba(255,255,255,.22);
}
.homepage-redesign .hero-cta .btn-ghost{
  border:1px solid var(--line-strong);
  background:rgba(255,255,255,.58);
  box-shadow:0 12px 26px -22px rgba(13,19,56,.45),inset 0 1px 0 rgba(255,255,255,.9);
}
.homepage-redesign .hero-cta .btn-ghost:hover{
  background:var(--surface);border-color:var(--brand);box-shadow:0 15px 28px -22px rgba(27,37,102,.5);
}
.homepage-redesign .hero-stats{
  display:flex;gap:0;align-items:stretch;flex-wrap:nowrap;
  width:min(100%,560px);padding:0;border:1px solid var(--line);
  background:rgba(255,255,255,.55);border-radius:18px;overflow:hidden;
  box-shadow:0 18px 40px -30px rgba(13,19,56,.4),inset 0 1px 0 rgba(255,255,255,.8);
}
.homepage-redesign .hero-stats .stat{
  flex:1;min-width:0;padding:14px 18px;text-align:center;border-inline-start:1px solid var(--line);
}
.homepage-redesign .hero-stats .stat:first-child{border-inline-start:0}
.homepage-redesign .hero-stats .stat b{font-size:23px;line-height:1.1;margin-bottom:4px}
.homepage-redesign .hero-stats .stat span{font-size:11.5px;white-space:nowrap}

.homepage-redesign .hero-art{position:relative;isolation:isolate;padding:20px 14px 34px 14px}
.homepage-redesign .hero-art::before{
  content:'';position:absolute;inset:0 3% 7% 0;border-radius:42px;
  background:linear-gradient(145deg,rgba(27,37,102,.08),rgba(185,138,46,.07));
  border:1px solid rgba(27,37,102,.07);transform:rotate(2.5deg);z-index:-2;
}
.homepage-redesign .hero-art::after{
  content:'';position:absolute;width:190px;height:190px;left:-34px;bottom:-10px;border-radius:50%;
  background:radial-gradient(circle,rgba(185,138,46,.18),transparent 70%);filter:blur(4px);z-index:-1;
}
.homepage-redesign .hero-frame{
  aspect-ratio:4/3;border-radius:30px;
  border:1px solid rgba(255,255,255,.16);
  box-shadow:0 34px 70px -36px rgba(13,19,56,.58),0 10px 30px -20px rgba(185,138,46,.35);
}
.homepage-redesign .hero-frame::before{
  content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.09),inset 0 24px 70px -40px rgba(255,255,255,.25);
  z-index:3;
}
.homepage-redesign .hero-frame .frame-glow{background:radial-gradient(circle at 18% 10%,rgba(255,255,255,.25),transparent 38%),linear-gradient(180deg,transparent 52%,rgba(8,11,34,.18));}
.homepage-redesign .hero-tag{
  top:2px;left:-2px;padding:9px 13px;border-radius:13px;
  background:rgba(255,250,239,.94);border:1px solid rgba(185,138,46,.25);
  box-shadow:0 16px 32px -22px rgba(142,106,31,.55);z-index:5;
}
.homepage-redesign .hero-badge{
  bottom:5px;right:-8px;min-width:190px;padding:14px 16px;border-radius:17px;
  border:1px solid rgba(228,230,240,.85);background:rgba(255,255,255,.9);
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  box-shadow:0 24px 48px -28px rgba(13,19,56,.52);z-index:5;
}
.homepage-redesign .hero-badge svg{width:25px;height:25px}

/* Desktop: a bit more breathing room between the floating header and the
   headline, so the hero doesn't feel stuck to the header pill. */
.homepage-redesign .hero{padding-top:calc(var(--header-h) + 90px)}

/* Mobile: headline first, premium controls, no duplicated theme control in header. */
@media (max-width:960px){
  .homepage-redesign .hero{min-height:auto;padding-top:calc(var(--header-h) + 62px);padding-bottom:64px}
  .homepage-redesign .hero .container{grid-template-columns:1fr;gap:28px}
  .homepage-redesign .hero-copy{order:1}
  .homepage-redesign .hero-art{order:2;padding:14px 6px 24px}
  .homepage-redesign .hero-art::before{inset:0 2% 6% 0}
  .homepage-redesign .hero h1{font-size:clamp(34px,8.4vw,48px);line-height:1.24}
  .homepage-redesign .hero p.lede{font-size:15.5px;line-height:1.85}
  .homepage-redesign .hero-badge{right:2px;bottom:0}
}
@media (max-width:900px){
  .homepage-redesign .site-header .theme-toggle{display:none}
  .homepage-redesign .site-header .menu-toggle{display:flex}
  /* هيدر الموبايل: هامبرغر يسار – اللوجو في النص بالظبط – زرار اللغة يمين.
     اللوجو بره الفلو (position:absolute) عشان يفضل في النص الحقيقي مهما اختلف عرض العنصرين التانيين. */
  .homepage-redesign .site-header .container{position:relative}
  .homepage-redesign .site-header .header-actions{order:1}
  .homepage-redesign .site-header .brand-mark{
    order:2;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  }
  .homepage-redesign .site-header .menu-toggle{order:3}
}
@media (min-width:901px){
  .homepage-redesign .site-header .menu-toggle{display:none}
}
@media (max-width:640px){
  .homepage-redesign .site-header{height:70px}
  .homepage-redesign .site-header .container{padding:0 16px;gap:12px}
  .homepage-redesign .brand-mark .logo-box{width:40px;height:40px;border-radius:13px}
  .homepage-redesign .brand-mark .brand-text{font-size:17px}
  .homepage-redesign .brand-mark .brand-text small{display:none}
  .homepage-redesign .header-actions{gap:7px}
  .homepage-redesign .site-header .lang-toggle{height:42px;min-width:42px;border-radius:13px;padding:0 10px}
  .homepage-redesign .site-header .menu-toggle{width:44px;height:44px;border-radius:14px}
  .homepage-redesign .hero{padding-top:calc(var(--header-h) + 54px);padding-bottom:52px}
  .homepage-redesign .hero .container{padding:0 18px;gap:22px}
  .homepage-redesign .hero-eyebrow{font-size:11.5px;margin-bottom:15px}
  .homepage-redesign .hero h1{font-size:33px;letter-spacing:-.35px;margin-bottom:15px}
  .homepage-redesign .hero p.lede{font-size:14px;margin-bottom:23px}
  .homepage-redesign .hero-cta{display:grid;grid-template-columns:1fr;gap:10px;margin-bottom:24px}
  .homepage-redesign .hero-cta .btn{width:100%;min-height:52px;border-radius:14px}
  .homepage-redesign .hero-stats{width:100%;border-radius:15px}
  .homepage-redesign .hero-stats .stat{padding:12px 8px}
  .homepage-redesign .hero-stats .stat b{font-size:20px}
  .homepage-redesign .hero-stats .stat span{font-size:9.8px}
  .homepage-redesign .hero-art{padding:8px 2px 22px}
  .homepage-redesign .hero-frame{border-radius:24px}
  .homepage-redesign .hero-tag{top:-2px;left:4px;font-size:10.5px;padding:7px 10px}
  .homepage-redesign .hero-badge{display:flex;right:4px;bottom:-2px;min-width:165px;padding:11px 12px;border-radius:14px}
  .homepage-redesign .hero-badge b{font-size:12.5px}
  .homepage-redesign .hero-badge span{font-size:10px}
}

/* Dark mode for the homepage redesign only. */
html[data-theme="dark"] .homepage-redesign .site-header{
  background:rgba(9,13,27,.78);border-color:rgba(51,64,94,.72);box-shadow:0 10px 34px -28px rgba(0,0,0,.9)
}
html[data-theme="dark"] .homepage-redesign .site-header.scrolled{background:rgba(9,13,27,.93);border-color:var(--line)}
html[data-theme="dark"] .homepage-redesign .site-header .theme-toggle,
html[data-theme="dark"] .homepage-redesign .site-header .lang-toggle,
html[data-theme="dark"] .homepage-redesign .site-header .menu-toggle{
  background:linear-gradient(145deg,#141C31,#0E1425);border-color:var(--line-strong);color:var(--ink)
}
html[data-theme="dark"] .homepage-redesign .hero-eyebrow{background:rgba(43,36,22,.82);border-color:rgba(228,190,108,.2)}
html[data-theme="dark"] .homepage-redesign .hero-cta .btn-ghost{background:rgba(17,24,42,.65);border-color:var(--line-strong)}
html[data-theme="dark"] .homepage-redesign .hero-stats{background:rgba(17,24,42,.72);border-color:var(--line)}
html[data-theme="dark"] .homepage-redesign .hero-stats .stat{border-color:var(--line)}
html[data-theme="dark"] .homepage-redesign .hero-art::before{background:linear-gradient(145deg,rgba(119,135,255,.08),rgba(228,190,108,.06));border-color:rgba(119,135,255,.12)}
html[data-theme="dark"] .homepage-redesign .hero-tag{background:rgba(43,36,22,.92);border-color:rgba(228,190,108,.22)}
html[data-theme="dark"] .homepage-redesign .hero-badge{background:rgba(17,24,42,.88);border-color:var(--line)}


/* =========================================================================
   HOMEPAGE V1.1 — Realistic mobile menu sheet
   Scoped to homepage only. No API/database/layout logic changes.
   ========================================================================= */
@media (max-width:900px){
  .homepage-redesign .drawer-backdrop{
    background:rgba(7,11,29,.58);
    backdrop-filter:blur(7px) saturate(115%);
    -webkit-backdrop-filter:blur(7px) saturate(115%);
  }
  .homepage-redesign .side-drawer{
    left:0;right:0;bottom:0;top:auto;width:100%;max-width:none;
    height:auto;max-height:min(90dvh,760px);
    border:1px solid var(--line);border-bottom:0;
    border-radius:30px 30px 0 0;
    background:color-mix(in srgb,var(--surface) 94%,white 6%);
    box-shadow:0 -30px 80px -34px rgba(6,10,30,.62);
    overflow:hidden;
  }
  .homepage-redesign .side-drawer::before{
    top:9px;width:42px;height:4px;background:var(--line-strong);opacity:.9;
  }
  .homepage-redesign .drawer-head{
    padding:24px 18px 14px;min-height:70px;
    border-bottom:1px solid color-mix(in srgb,var(--line) 80%,transparent);
  }
  .homepage-redesign .drawer-close{
    width:42px;height:42px;border-radius:13px;
    background:var(--bg);box-shadow:0 8px 20px -16px rgba(10,15,40,.5);
  }
  .homepage-redesign .drawer-body{
    padding:15px 16px 12px;gap:12px;
    overflow-y:auto;-webkit-overflow-scrolling:touch;
    overscroll-behavior:contain;
  }
  .homepage-redesign .drawer-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:11px}
  .homepage-redesign .drawer-grid a{
    min-height:108px;padding:16px 8px;border-radius:18px;
    border:1px solid color-mix(in srgb,var(--line-strong) 70%,transparent);
    background:linear-gradient(145deg,var(--surface),var(--bg));
    box-shadow:0 8px 22px -20px rgba(9,14,42,.7),inset 0 1px 0 rgba(255,255,255,.72);
  }
  .homepage-redesign .drawer-grid a.is-gold{
    background:linear-gradient(145deg,var(--gold-soft),color-mix(in srgb,var(--surface) 78%,var(--gold-soft)));
  }
  .homepage-redesign .drawer-grid a:active{transform:scale(.985);box-shadow:0 4px 12px -10px rgba(9,14,42,.55)}
  .homepage-redesign .drawer-grid a svg{width:27px;height:27px}
  .homepage-redesign .drawer-foot{
    padding:11px 16px calc(13px + env(safe-area-inset-bottom,0px));
    background:color-mix(in srgb,var(--surface) 96%,transparent);
  }
  .homepage-redesign .drawer-toggles{min-height:50px;padding:5px 9px}
}
@media (max-width:380px){
  .homepage-redesign .drawer-head{padding-left:15px;padding-right:15px}
  .homepage-redesign .drawer-body{padding-left:13px;padding-right:13px;gap:9px}
  .homepage-redesign .drawer-grid{gap:9px}
  .homepage-redesign .drawer-grid a{min-height:101px;border-radius:16px;font-size:13px}
}
html[data-theme="dark"] .homepage-redesign .side-drawer{
  background:color-mix(in srgb,var(--surface) 96%,#070b18 4%);
  box-shadow:0 -30px 80px -34px rgba(0,0,0,.8);
}
html[data-theme="dark"] .homepage-redesign .drawer-grid a{
  background:linear-gradient(145deg,var(--surface),var(--bg));
  box-shadow:0 10px 24px -22px rgba(0,0,0,.9),inset 0 1px 0 rgba(255,255,255,.035);
}

/* Homepage-only premium Light / Dark switch — adapted from the supplied Uiverse concept. */
.homepage-redesign .theme-switch-control{
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  width:auto;
  min-width:154px;
  height:42px;
  padding:0 9px;
  border:1px solid var(--line-strong);
  border-radius:999px;
  background:linear-gradient(145deg,var(--surface),var(--surface-tint));
  color:var(--ink-2);
  box-shadow:0 10px 24px -18px rgba(13,19,56,.58),inset 0 1px 0 rgba(255,255,255,.8);
  overflow:hidden;
  cursor:pointer;
  transition:transform .22s ease,border-color .22s ease,box-shadow .22s ease,background .22s ease;
}
.homepage-redesign .theme-switch-control:hover{
  transform:translateY(-1px);
  border-color:var(--brand);
  box-shadow:0 14px 28px -20px rgba(27,37,102,.62),inset 0 1px 0 rgba(255,255,255,.85);
}
.homepage-redesign .theme-switch-control:active{transform:translateY(0) scale(.985)}
.homepage-redesign .theme-switch-control .theme-side-icon{
  width:19px;height:19px;flex:0 0 19px;fill:currentColor;transition:color .25s ease,transform .3s ease,opacity .25s ease;
}
.homepage-redesign .theme-switch-control .theme-sun{color:#e3a72f}
.homepage-redesign .theme-switch-control .theme-moon{color:#6f7bd8}
.homepage-redesign .theme-switch-track{
  position:relative;
  width:112px;
  height:30px;
  flex:0 0 112px;
  border-radius:999px;
  background:#e5e7ed;
  box-shadow:inset 0 1px 5px rgba(25,31,52,.12);
  transition:background .3s ease;
}
.homepage-redesign .theme-switch-knob{
  position:absolute;
  inset:2px auto 2px 2px;
  width:54px;
  border-radius:999px;
  background:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow:0 2px 8px rgba(17,17,17,.18);
  transition:left .3s ease,background .3s ease,box-shadow .3s ease;
}
.homepage-redesign .theme-switch-word{
  position:absolute;
  font-size:10px;
  font-weight:800;
  letter-spacing:.1px;
  line-height:1;
  transition:opacity .2s ease,color .2s ease;
  white-space:nowrap;
}
.homepage-redesign .theme-switch-light{opacity:1;color:#424242}
.homepage-redesign .theme-switch-dark{opacity:0;color:#fff}
.homepage-redesign .theme-switch-control .theme-icon,
.homepage-redesign .theme-switch-control .theme-label{display:none}

/* Dark state: the same control moves the active pill to Dark. */
html[data-theme="dark"] .homepage-redesign .theme-switch-track{background:#151a28}
html[data-theme="dark"] .homepage-redesign .theme-switch-knob{
  left:56px;
  background:#3c3c3c;
  box-shadow:0 2px 9px rgba(0,0,0,.42);
}
html[data-theme="dark"] .homepage-redesign .theme-switch-light{opacity:0}
html[data-theme="dark"] .homepage-redesign .theme-switch-dark{opacity:1}
html[data-theme="dark"] .homepage-redesign .theme-switch-control .theme-sun{color:#bfc4d2;opacity:.7}
html[data-theme="dark"] .homepage-redesign .theme-switch-control .theme-moon{color:#f2b94b}

/* Desktop header: use the full control without competing with the auth actions. */
@media (min-width:901px){
  .homepage-redesign .site-header .theme-switch-control{
    min-width:150px;
    width:150px;
    height:42px;
    border-radius:999px;
    padding:0 7px;
  }
  .homepage-redesign .site-header .theme-switch-track{width:98px;flex-basis:98px;height:28px}
  .homepage-redesign .site-header .theme-switch-knob{width:47px}
  html[data-theme="dark"] .homepage-redesign .site-header .theme-switch-knob{left:49px}
  .homepage-redesign .site-header .theme-side-icon{width:16px;height:16px;flex-basis:16px}
}

/* Mobile drawer: wider touch target, centered like a real mobile settings control. */
@media (max-width:900px){
  .homepage-redesign .drawer-theme-switch{
    min-width:172px;
    height:42px;
  }
}
@media (max-width:480px){
  .homepage-redesign .drawer-theme-switch{min-width:158px}
  .homepage-redesign .drawer-theme-switch .theme-switch-track{width:102px;flex-basis:102px}
  .homepage-redesign .drawer-theme-switch .theme-switch-knob{width:49px}
  html[data-theme="dark"] .homepage-redesign .drawer-theme-switch .theme-switch-knob{left:51px}
}

/* =========================================================================
   HOMEPAGE HEADER V1.3 — Floating capsule controls
   Reference-inspired header: no connected bar; menu, logo and language are
   independent floating controls. Theme remains available inside the drawer.
   ========================================================================= */
.homepage-redesign .site-header{
  background:transparent;
  border-bottom:0;
  box-shadow:none;
  pointer-events:none;
}
.homepage-redesign .site-header.scrolled{
  background:transparent;
  border-color:transparent;
  box-shadow:none;
}
.homepage-redesign .site-header .container{
  position:relative;
  pointer-events:none;
}
.homepage-redesign .site-header .brand-mark,
.homepage-redesign .site-header .header-actions,
.homepage-redesign .site-header .main-nav,
.homepage-redesign .site-header .menu-toggle{
  pointer-events:auto;
}

/* Desktop: keep the existing navigation/auth content, but remove the theme
   control from the header. The logo itself gets the same floating treatment. */
@media (min-width:901px){
  .homepage-redesign .site-header .brand-mark{
    padding:7px 12px 7px 8px;
    border:1px solid rgba(214,218,233,.82);
    border-radius:20px;
    background:rgba(255,255,255,.94);
    box-shadow:0 12px 28px -20px rgba(13,19,56,.45),inset 0 1px 0 rgba(255,255,255,.95);
    backdrop-filter:blur(14px);
    -webkit-backdrop-filter:blur(14px);
  }
  .homepage-redesign .site-header .header-actions{gap:9px}
  .homepage-redesign .site-header .lang-toggle,
  .homepage-redesign .site-header .menu-toggle{
    border:1px solid rgba(214,218,233,.82);
    background:rgba(255,255,255,.94);
    box-shadow:0 12px 28px -20px rgba(13,19,56,.45),inset 0 1px 0 rgba(255,255,255,.95);
    backdrop-filter:blur(14px);
    -webkit-backdrop-filter:blur(14px);
  }
}

/* Mobile/tablet: exactly three independent controls — language on the right,
   logo centered on the viewport, hamburger on the left. */
@media (max-width:900px){
  .homepage-redesign .site-header .container{pointer-events:none}
  .homepage-redesign .site-header .header-actions{pointer-events:auto}
  .homepage-redesign .site-header .brand-mark{
    padding:5px 10px 5px 6px;
    border:1px solid rgba(214,218,233,.82);
    border-radius:18px;
    background:rgba(255,255,255,.96);
    box-shadow:0 14px 30px -21px rgba(13,19,56,.48),inset 0 1px 0 rgba(255,255,255,.98);
    backdrop-filter:blur(16px);
    -webkit-backdrop-filter:blur(16px);
  }
  .homepage-redesign .site-header .lang-toggle,
  .homepage-redesign .site-header .menu-toggle{
    border:1px solid rgba(214,218,233,.82);
    background:rgba(255,255,255,.96);
    box-shadow:0 14px 30px -21px rgba(13,19,56,.48),inset 0 1px 0 rgba(255,255,255,.98);
    backdrop-filter:blur(16px);
    -webkit-backdrop-filter:blur(16px);
  }
  .homepage-redesign .site-header .brand-mark .brand-text small{display:none}
}

html[data-theme="dark"] .homepage-redesign .site-header .brand-mark,
html[data-theme="dark"] .homepage-redesign .site-header .lang-toggle,
html[data-theme="dark"] .homepage-redesign .site-header .menu-toggle{
  background:rgba(17,24,42,.94);
  border-color:rgba(51,64,94,.9);
  box-shadow:0 14px 32px -22px rgba(0,0,0,.82),inset 0 1px 0 rgba(255,255,255,.04);
}

/* =========================================================================
   HOMEPAGE V1.4 — Full-width theme control at the bottom of the drawer
   UI-only: keeps the existing theme toggle logic and data attributes intact.
   ========================================================================= */
@media (max-width:900px){
  .homepage-redesign .drawer-foot{
    padding:12px 16px calc(14px + env(safe-area-inset-bottom,0px));
    border-top:1px solid color-mix(in srgb,var(--line) 82%,transparent);
    background:color-mix(in srgb,var(--surface) 98%,transparent);
  }
  .homepage-redesign .drawer-toggles{
    width:100%;
    min-height:0;
    padding:0;
    gap:10px;
  }
  .homepage-redesign .drawer-theme-switch{
    flex:1;
    min-width:0;
    height:54px;
    border-radius:17px;
    justify-content:space-between;
    padding:0 14px;
    box-shadow:0 10px 28px -20px rgba(13,19,56,.55),inset 0 1px 0 rgba(255,255,255,.8);
  }
  .homepage-redesign .drawer-theme-switch .theme-switch-track{
    width:min(52vw,180px);
    flex:0 1 min(52vw,180px);
    height:32px;
  }
  .homepage-redesign .drawer-theme-switch .theme-switch-knob{width:calc(50% - 2px)}
  html[data-theme="dark"] .homepage-redesign .drawer-theme-switch .theme-switch-knob{left:calc(50% + 0px)}
  .homepage-redesign .drawer-toggles > span[style*="color:var(--line-strong)"]{display:none}
  .homepage-redesign .drawer-toggles > .lang-toggle{
    min-height:34px;
    padding:4px 10px;
    border-radius:10px !important;
    color:var(--muted);
  }
}
@media (max-width:480px){
  .homepage-redesign .drawer-foot{padding-left:13px;padding-right:13px}
  .homepage-redesign .drawer-theme-switch{height:52px;border-radius:16px}
  .homepage-redesign .drawer-theme-switch .theme-switch-track{width:148px;flex-basis:148px}
}
html[data-theme="dark"] .homepage-redesign .drawer-foot{
  background:color-mix(in srgb,var(--surface) 98%,#070b18 2%);
  border-top-color:var(--line);
}

/* ---------- Hero brand artwork ---------- */
.hero-art{isolation:isolate;min-height:430px;display:flex;align-items:center;justify-content:center}
.hero-frame{width:100%;z-index:0;}
.hero-frame img{opacity:.12;filter:saturate(.65) contrast(.9);transform:scale(1.03)}
.hero-brand-art{position:absolute;inset:0;z-index:1;display:flex;align-items:center;justify-content:center;pointer-events:none;overflow:hidden;border-radius:28px}
.hero-brand-art::before{content:'';position:absolute;inset:8%;border:1px solid rgba(255,255,255,.11);border-radius:30px;box-shadow:inset 0 1px 0 rgba(255,255,255,.08)}
.hero-brand-art::after{content:'';position:absolute;width:260px;height:260px;border-radius:50%;background:radial-gradient(circle,rgba(228,190,108,.2),transparent 68%);filter:blur(2px);right:8%;top:7%}
.hero-brand-art img{position:absolute;width:86%;max-width:620px;height:auto;object-fit:contain;right:-3%;top:19%;filter:drop-shadow(0 18px 22px rgba(0,0,0,.22));opacity:.96;mix-blend-mode:screen}
.hero-brand-orb{position:absolute;width:170px;height:170px;border-radius:50%;left:8%;bottom:8%;background:radial-gradient(circle at 35% 30%,rgba(255,255,255,.2),rgba(255,255,255,.03) 48%,transparent 70%);border:1px solid rgba(255,255,255,.12);box-shadow:0 18px 50px rgba(0,0,0,.2)}
.hero-brand-caption{position:absolute;left:8%;bottom:12%;display:flex;flex-direction:column;align-items:flex-start;gap:7px;z-index:2;text-shadow:0 2px 12px rgba(0,0,0,.35)}
.hero-brand-kicker{font-family:var(--font-display);font-size:clamp(20px,2.5vw,31px);font-weight:700;letter-spacing:.4px;color:#fff}
.hero-brand-line{width:54px;height:2px;background:var(--gold);border-radius:99px;box-shadow:0 0 14px rgba(228,190,108,.55)}
.hero-brand-note{font-size:12px;color:rgba(255,255,255,.68);font-weight:500}
.hero-badge{z-index:4}
.hero-tag{z-index:5}

@media (max-width:960px){
  .hero-art{min-height:350px}
  .hero-brand-art img{width:94%;right:-10%;top:20%}
  .hero-brand-caption{left:7%;bottom:10%}
}
@media (max-width:620px){
  .hero-art{min-height:280px}
  .hero-brand-art::before{inset:5%;border-radius:22px}
  .hero-brand-art img{width:108%;right:-18%;top:26%;opacity:.9}
  .hero-brand-orb{width:105px;height:105px;left:6%;bottom:7%}
  .hero-brand-caption{left:8%;bottom:9%;gap:5px}
  .hero-brand-kicker{font-size:20px}
  .hero-brand-note{font-size:10.5px}
  .hero-frame img{opacity:.08}
}
/* refined brand artwork */
.hero-brand-art img{width:min(88%,650px);right:-2%;top:17%;filter:drop-shadow(0 22px 28px rgba(0,0,0,.22));opacity:1;mix-blend-mode:normal}
.hero-brand-pills{position:absolute;left:7%;bottom:10%;display:flex;flex-direction:column;gap:8px;align-items:flex-start;z-index:3}
.hero-brand-pills span{font-size:11.5px;color:rgba(255,255,255,.82);background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.12);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);padding:8px 12px;border-radius:999px;box-shadow:0 8px 20px rgba(0,0,0,.12)}
@media (max-width:960px){.hero-brand-art img{width:92%;right:-8%;top:18%}.hero-brand-pills{left:7%;bottom:9%}}
@media (max-width:620px){.hero-brand-art img{width:110%;right:-18%;top:22%}.hero-brand-pills{left:8%;bottom:8%;gap:5px}.hero-brand-pills span{font-size:10px;padding:6px 9px}}


/* =========================================================================
   HOMEPAGE V1.7 — Single rounded header shell
   Reference-inspired: one white floating capsule contains the header content.
   Mobile: hamburger left, logo centered, language right.
   Desktop: full navigation/auth controls remain inside the same shell.
   Theme control stays only in the drawer.
   UI-only; existing JS/data attributes remain untouched.
   ========================================================================= */
.homepage-redesign .site-header{
  height:96px;
  background:transparent;
  border:0;
  box-shadow:none;
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
  pointer-events:none;
}
.homepage-redesign .site-header .container{
  height:68px;
  margin-top:14px;
  max-width:calc(1180px + 48px);
  width:calc(100% - 32px);
  padding:0 18px;
  border:1px solid rgba(214,218,233,.9);
  border-radius:34px;
  background:rgba(255,255,255,.97);
  box-shadow:0 18px 42px -28px rgba(13,19,56,.45), inset 0 1px 0 rgba(255,255,255,.98);
  backdrop-filter:blur(18px) saturate(1.15);
  -webkit-backdrop-filter:blur(18px) saturate(1.15);
  pointer-events:auto;
  position:relative;
}
.homepage-redesign .site-header.scrolled{background:transparent;border:0;box-shadow:none}
.homepage-redesign .site-header .brand-mark,
.homepage-redesign .site-header .main-nav,
.homepage-redesign .site-header .header-actions,
.homepage-redesign .site-header .menu-toggle{pointer-events:auto}

/* No separate capsules inside the header: the shell itself is the capsule. */
.homepage-redesign .site-header .brand-mark,
.homepage-redesign .site-header .lang-toggle,
.homepage-redesign .site-header .menu-toggle{
  border:0;
  background:transparent;
  box-shadow:none;
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
}
.homepage-redesign .site-header .brand-mark{padding:0; border-radius:20px}
.homepage-redesign .site-header .lang-toggle{border-radius:14px}
.homepage-redesign .site-header .menu-toggle{border-radius:14px}
.homepage-redesign .site-header .menu-toggle:hover,
.homepage-redesign .site-header .lang-toggle:hover{background:var(--brand-soft);box-shadow:none;transform:none}

/* Desktop: keep all existing navigation and account actions in the same shell. */
@media (min-width:901px){
  .homepage-redesign .site-header .container{gap:22px}
  .homepage-redesign .site-header .brand-mark{flex:0 0 auto}
  .homepage-redesign .site-header .main-nav{flex:1;justify-content:center;gap:30px}
  .homepage-redesign .site-header .header-actions{flex:0 0 auto;gap:8px}
  .homepage-redesign .site-header .menu-toggle{display:none}
  .homepage-redesign .site-header .lang-toggle{min-width:44px;height:42px;padding:0 12px}
}

/* Mobile/tablet: exactly the reference composition inside one rounded shell. */
@media (max-width:900px){
  .homepage-redesign .site-header{height:82px}
  .homepage-redesign .site-header .container{
    height:62px;
    margin-top:10px;
    width:calc(100% - 24px);
    padding:0 12px;
    border-radius:31px;
    display:flex;
    justify-content:space-between;
  }
  .homepage-redesign .site-header .main-nav{display:none}
  .homepage-redesign .site-header .header-actions{
    position:absolute;
    right:12px;
    top:50%;
    transform:translateY(-50%);
    order:1;
    gap:0;
  }
  .homepage-redesign .site-header .brand-mark{
    position:absolute;
    left:50%;
    top:50%;
    transform:translate(-50%,-50%);
    order:2;
    z-index:2;
  }
  .homepage-redesign .site-header .menu-toggle{
    position:absolute;
    left:12px;
    top:50%;
    transform:translateY(-50%);
    order:3;
    display:flex;
    width:44px;height:44px;
  }
  .homepage-redesign .site-header .lang-toggle{
    min-width:44px;height:42px;padding:0 10px;
  }
  .homepage-redesign .site-header .brand-mark .brand-text small{display:none}
}

@media (max-width:640px){
  .homepage-redesign .site-header{height:78px}
  .homepage-redesign .site-header .container{height:58px;width:calc(100% - 18px);margin-top:9px;border-radius:29px;padding:0 9px}
  .homepage-redesign .site-header .header-actions{right:9px}
  .homepage-redesign .site-header .menu-toggle{left:9px;width:42px;height:42px}
  .homepage-redesign .site-header .lang-toggle{min-width:42px;height:40px}
  .homepage-redesign .brand-mark .logo-box{width:40px;height:40px;border-radius:13px}
  .homepage-redesign .brand-mark .brand-text{font-size:17px}
}

html[data-theme="dark"] .homepage-redesign .site-header .container{
  background:rgba(17,24,42,.97);
  border-color:rgba(51,64,94,.92);
  box-shadow:0 18px 42px -28px rgba(0,0,0,.72),inset 0 1px 0 rgba(255,255,255,.04);
}
html[data-theme="dark"] .homepage-redesign .site-header .menu-toggle:hover,
html[data-theme="dark"] .homepage-redesign .site-header .lang-toggle:hover{background:rgba(39,51,83,.8)}

/* =========================================================================
   HOMEPAGE V1.9 — Immersive full-bleed hero background
   The eyebrow pill is removed. The brand card (banner + book icon + site
   name) no longer floats as a separate box next to the copy — it now
   fills the whole hero section as an ambient background layer, with the
   headline/CTA/stats promoted to light-on-dark and stacked on top.
   ========================================================================= */
.hero.hero-immersive{position:relative;overflow:hidden;isolation:isolate}
.hero.hero-immersive::before,
.hero.hero-immersive::after{content:none}
.hero.hero-immersive .container{display:block}

.hero-bg{
  position:absolute;inset:0;z-index:-3;background:linear-gradient(150deg,#1B2566,#0D1338);
  overflow:hidden;
  display:flex;
  align-items:flex-start;
  justify-content:center;
  padding-top:var(--header-h);
}
/* The hero is a single tall stack (headline + paragraph + buttons + stats),
   not a fixed-height banner, on both phone and desktop. Stretching the
   uploaded logo/banner with object-fit:cover over that whole height zooms it
   into an unrecognizable cropped fragment, and anchoring it flush to the
   very top hides part of it behind the floating header. Instead it sits at
   its natural size, starting right below the header, centered horizontally,
   so the full image always reads clearly on both phone and desktop while
   the gradient behind it carries the rest of the section. */
.hero-bg img{
  width:100%;
  height:auto;
  max-height:55%;
  object-fit:contain;
  opacity:.5;
  filter:saturate(.85);
}
.hero-bg .frame-glow{position:absolute;inset:0;background:radial-gradient(circle at 80% 10%, rgba(255,255,255,.16), transparent 55%)}

.hero-bg-art{position:absolute;inset:0;z-index:-2;pointer-events:none;overflow:hidden}
.hero-bg-art img{position:absolute;width:min(42%,520px);left:3%;top:8%;height:auto;object-fit:contain;
  opacity:.32;mix-blend-mode:screen;filter:drop-shadow(0 20px 26px rgba(0,0,0,.25))}
.hero-bg-art .hero-brand-orb{position:absolute;width:210px;height:210px;left:8%;bottom:4%;top:auto}
.hero-bg-art .hero-brand-caption{position:absolute;left:6%;bottom:9%;z-index:1}

.hero-content{position:relative;z-index:1}
.hero-copy{max-width:640px}
.hero.hero-immersive h1{color:#fff}
.hero.hero-immersive p.lede{color:rgba(255,255,255,.78)}
.hero.hero-immersive .btn-ghost{border-color:rgba(255,255,255,.32);color:#fff;background:rgba(255,255,255,.04)}
.hero.hero-immersive .btn-ghost:hover{border-color:var(--gold);color:var(--gold);background:rgba(255,255,255,.08)}
.hero.hero-immersive .hero-stats{
  background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.16);
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  border-radius:18px;padding:18px 22px;gap:0;justify-content:space-between;
}
.hero.hero-immersive .hero-stats .stat{flex:1;text-align:center;position:relative}
.hero.hero-immersive .hero-stats .stat+.stat::before{
  content:'';position:absolute;right:100%;top:50%;transform:translateY(-50%);
  width:1px;height:26px;background:rgba(255,255,255,.16);
}
.hero.hero-immersive .hero-stats .stat b{color:#fff;font-size:26px}
.hero.hero-immersive .hero-stats .stat span{color:rgba(255,255,255,.6)}

.hero.hero-immersive .hero-badge{position:absolute;bottom:28px;right:28px;z-index:2}

@media (max-width:960px){
  .hero-bg-art img{left:14%;top:6%;width:64%;opacity:.28}
  .hero-bg-art .hero-brand-orb{left:6%;bottom:auto;top:4%;width:150px;height:150px}
  .hero-bg-art .hero-brand-caption{left:6%;bottom:auto;top:10%}
  .hero.hero-immersive .hero-badge{position:static;margin:24px auto 0;max-width:280px}
}
@media (max-width:640px){
  /* The ambient brand art (book image + orb + floating caption) was designed
     for wide screens. On phones it no longer has room to sit cleanly behind
     the headline, so the whole layer is hidden and the hero stays just the
     gradient background + headline/CTA/stats. */
  .hero-bg-art{display:none}

  /* On very small phones, cap the background image a bit tighter so it
     never competes with the headline for vertical space. */
  .hero-bg img{max-height:56%}
}

/* Scroll-down cue at the bottom of the hero, pointing to the teachers section */
.hero.hero-immersive{position:relative}
.hero-scroll-cue{
  position:absolute;
  left:50%;
  bottom:18px;
  transform:translateX(-50%);
  width:38px;height:38px;
  display:flex;align-items:center;justify-content:center;
  border-radius:50%;
  border:1px solid rgba(255,255,255,.35);
  background:rgba(255,255,255,.08);
  color:#fff;
  z-index:2;
  animation:heroScrollCue 1.8s ease-in-out infinite;
}
.hero-scroll-cue svg{width:18px;height:18px}
@media (prefers-reduced-motion:reduce){
  .hero-scroll-cue{animation:none}
}
@keyframes heroScrollCue{
  0%,100%{transform:translateX(-50%) translateY(0)}
  50%{transform:translateX(-50%) translateY(6px)}
}
@media (max-width:640px){
  .hero-scroll-cue{bottom:12px;width:34px;height:34px}
  .hero-scroll-cue svg{width:16px;height:16px}
}

/* Premium count-up pop for the hero stat numbers */
.hero-stats .stat b{transition:transform .2s ease}
.hero-stats .stat b.is-counting{transform:scale(1.06)}

/* ==========================================================================
   FUTURE HOMEPAGE — Premium Education Hero
   Replaces the old full-bleed banner hero without changing the site's navy,
   gold and white identity. The course preview is intentionally data-driven.
   ========================================================================== */
.hero.hero-premium{position:relative;overflow:hidden;isolation:isolate;min-height:clamp(620px,78vh,760px);display:flex;align-items:center;background:linear-gradient(135deg,#f8f9fc 0%,#fff 54%,#f5f7fc 100%);padding:112px 0 74px}
.kicker-dot{animation:kickerPulse 2.2s ease-in-out infinite}
@keyframes kickerPulse{0%,100%{box-shadow:0 0 0 5px rgba(228,190,108,.15)}50%{box-shadow:0 0 0 8px rgba(228,190,108,.28)}}
.hero-course-stage::after{content:"";position:absolute;width:min(78vw,480px);height:min(78vw,480px);border-radius:50%;background:conic-gradient(from 0deg,rgba(228,190,108,.35),transparent 25%,transparent 75%,rgba(228,190,108,.35));filter:blur(26px);animation:heroAuraSpin 14s linear infinite;z-index:0}
@keyframes heroAuraSpin{to{transform:rotate(360deg)}}
.hero-course-card{z-index:1}
.hero-course-badge{background:linear-gradient(150deg,#fff,#fdf6e6);box-shadow:0 6px 18px rgba(0,0,0,.12),0 0 0 1px rgba(228,190,108,.5) inset;animation:badgeGlow 2.6s ease-in-out infinite}
@keyframes badgeGlow{0%,100%{box-shadow:0 6px 18px rgba(0,0,0,.12),0 0 0 1px rgba(228,190,108,.5) inset}50%{box-shadow:0 8px 24px rgba(228,190,108,.28),0 0 0 1px rgba(228,190,108,.85) inset}}
.hero-premium-inner{position:relative;z-index:2;display:grid;grid-template-columns:minmax(0,1fr) minmax(430px,520px);gap:clamp(44px,7vw,100px);align-items:center}
.hero-premium-copy{max-width:650px}
.hero-premium-kicker{display:inline-flex;align-items:center;gap:7px;padding:7px 12px;border:1px solid rgba(20,33,82,.10);background:rgba(255,255,255,.78);box-shadow:0 8px 30px rgba(16,28,72,.06);border-radius:999px;color:var(--brand);font-size:11.5px;font-weight:800;letter-spacing:.2px;margin-bottom:22px}
.kicker-dot{width:7px;height:7px;border-radius:50%;background:var(--gold);box-shadow:0 0 0 5px rgba(228,190,108,.15)}
.hero-premium h1{font-family:var(--font-display);font-size:clamp(44px,5.2vw,76px);line-height:1.08;letter-spacing:-1.8px;color:var(--ink);margin:0 0 22px;max-width:760px}
.hero-premium-lede{font-size:clamp(16px,1.5vw,19px);line-height:1.95;color:var(--muted);max-width:620px;margin:0 0 28px}
.hero-premium-actions{display:flex;gap:12px;flex-wrap:wrap;align-items:center}
.hero-premium-actions .btn{min-height:50px;padding-inline:24px}
.hero-premium-outline{border:1px solid rgba(20,33,82,.18);color:var(--brand);background:#fff;box-shadow:0 8px 22px rgba(16,28,72,.05)}
.hero-premium-outline:hover{border-color:var(--gold);color:var(--brand);background:#fffaf0}
.hero-premium-trust{display:flex;gap:0;margin-top:34px;width:min(100%,540px);border-top:1px solid rgba(20,33,82,.10);padding-top:20px}
.hero-trust-stat{flex:1;display:flex;flex-direction:column;gap:4px;padding-inline:20px;border-inline-start:1px solid rgba(20,33,82,.10)}
.hero-trust-stat:first-child{padding-inline-start:0;border-inline-start:0}
.hero-trust-stat b{font-family:var(--font-display);font-size:24px;color:var(--ink)}
.hero-trust-stat span{font-size:11px;color:var(--muted);font-weight:700}
.hero-course-stage{position:relative;min-height:500px;display:flex;align-items:center;justify-content:center}
.hero-course-stage::before{content:"";position:absolute;width:440px;height:440px;border-radius:50%;background:radial-gradient(circle,rgba(228,190,108,.23),rgba(228,190,108,0) 68%);filter:blur(3px)}
.hero-premium-grid{position:absolute;inset:0;opacity:.45;background-image:linear-gradient(rgba(20,33,82,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(20,33,82,.045) 1px,transparent 1px);background-size:42px 42px;mask-image:linear-gradient(to bottom,black,transparent 80%)}
.hero-premium-glow{position:absolute;border-radius:50%;filter:blur(10px);pointer-events:none;animation:heroGlowDrift 9s ease-in-out infinite}
.hero-premium-glow-a{width:340px;height:340px;right:-120px;top:20px;background:rgba(228,190,108,.16)}
.hero-premium-glow-b{width:380px;height:380px;left:-160px;bottom:-180px;background:rgba(27,37,102,.10);animation-delay:-4.5s}
@keyframes heroGlowDrift{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(-14px,14px) scale(1.08)}}
.hero-course-card{position:relative;width:min(100%,430px);border-radius:26px;background:rgba(255,255,255,.96);box-shadow:0 34px 75px rgba(15,25,65,.20),0 8px 24px rgba(15,25,65,.10),0 0 0 1px rgba(228,190,108,.35);overflow:hidden;transform:rotate(-2.2deg);transition:transform .35s ease,box-shadow .35s ease}
.hero-course-card::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;border-radius:inherit;padding:1.5px;background:linear-gradient(135deg,rgba(228,190,108,.9),rgba(228,190,108,0) 32%,rgba(228,190,108,0) 68%,rgba(228,190,108,.7));-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude}
.hero-course-card::after{content:"";position:absolute;top:0;left:8%;right:8%;height:1px;background:linear-gradient(90deg,transparent,rgba(255,255,255,.9),transparent);z-index:2}
.hero-course-card:hover{transform:rotate(0) translateY(-6px);box-shadow:0 44px 92px rgba(15,25,65,.24),0 12px 30px rgba(15,25,65,.12),0 0 0 1px rgba(228,190,108,.55)}
.hero-course-cover{height:238px;position:relative;overflow:hidden;background:linear-gradient(135deg,#17245f,#0c1438);display:flex;align-items:center;justify-content:center}
.hero-course-cover img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero-course-cover::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(8,14,43,.04),rgba(8,14,43,.62))}
.hero-course-cover-fallback{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;gap:10px;color:rgba(255,255,255,.88);font-size:12px;font-weight:800;letter-spacing:.2px}
.cover-play{width:54px;height:54px;border-radius:50%;display:grid;place-items:center;background:rgba(228,190,108,.94);color:#18204d;font-size:18px;padding-inline-start:3px;box-shadow:0 10px 30px rgba(0,0,0,.22)}
.hero-course-badge{position:absolute;z-index:2;top:16px;right:16px;padding:7px 10px;border-radius:999px;background:rgba(255,255,255,.94);color:var(--brand);font-size:11px;font-weight:900;box-shadow:0 6px 18px rgba(0,0,0,.12)}
.hero-course-body{position:relative;z-index:2;padding:22px 23px 24px}
.hero-course-teacher-row{display:flex;align-items:center;gap:10px;margin-bottom:15px;padding:6px 8px;margin-inline:-8px;border-radius:12px;transition:background .2s ease}
a.hero-course-teacher-row:hover{background:var(--brand-soft)}
a.hero-course-teacher-row:hover .hero-course-teacher-go{opacity:1;transform:translateX(0)}
.hero-course-avatar{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;background:var(--brand-soft);color:var(--brand);font-weight:900;overflow:hidden;flex-shrink:0}
.hero-course-avatar img{width:100%;height:100%;object-fit:cover}
.hero-course-label{display:block;font-size:9px;color:var(--muted);font-weight:700;margin-bottom:2px}
.hero-course-teacher-row strong{font-size:12px;color:var(--ink);display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hero-course-teacher-row>div{flex:1;min-width:0}
.hero-course-teacher-go{margin-inline-start:auto;flex-shrink:0;color:var(--gold-deep);font-size:15px;opacity:0;transform:translateX(-6px);transition:opacity .2s ease,transform .2s ease}
.hero-course-body h2{font-family:var(--font-display);font-size:24px;line-height:1.35;color:var(--ink);margin:0 0 15px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.hero-course-meta{display:flex;gap:8px;flex-wrap:wrap}
.hero-course-meta span{display:inline-flex;align-items:center;gap:5px;padding:6px 10px;border-radius:999px;background:var(--gold-soft);color:var(--gold-deep);font-size:10.5px;font-weight:800;white-space:nowrap}
.hero-course-meta b{color:inherit;font-weight:800}
.hero-course-progress{margin-top:18px;display:flex;align-items:center;gap:10px}
.hero-course-progress>span{height:5px;flex:1;border-radius:99px;background:#edf0f6;overflow:hidden}.hero-course-progress i{display:block;width:66%;height:100%;border-radius:99px;background:linear-gradient(90deg,var(--gold),#f1d78e)}
.hero-course-progress em{font-style:normal;font-size:9px;color:var(--muted);white-space:nowrap}
.hero-course-shadow{position:absolute;width:340px;height:50px;background:rgba(17,28,70,.16);filter:blur(22px);bottom:55px;border-radius:50%}
.floating-chip{position:absolute;z-index:5;display:flex;align-items:center;gap:7px;padding:10px 13px;border:1px solid rgba(20,33,82,.10);background:rgba(255,255,255,.92);backdrop-filter:blur(12px);border-radius:14px;box-shadow:0 15px 35px rgba(15,25,65,.12);font-size:10px;font-weight:900;color:var(--ink);animation:heroFloat 5s ease-in-out infinite}
.chip-new{top:42px;right:0}.chip-live{bottom:45px;left:0;animation-delay:-2.1s}.chip-icon{color:#c49b3e}.live-dot{width:7px;height:7px;border-radius:50%;background:#2c9a69;box-shadow:0 0 0 4px rgba(44,154,105,.12)}
.hero-orbit{position:absolute;z-index:4;width:38px;height:38px;border-radius:12px;display:grid;place-items:center;background:var(--brand);color:#fff;box-shadow:0 12px 25px rgba(20,33,82,.22);font-size:14px;animation:heroFloat 4.5s ease-in-out infinite}.orbit-a{left:12%;top:20%}.orbit-b{right:9%;bottom:21%;background:var(--gold);color:var(--brand);animation-delay:-1.5s}
@keyframes heroFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}
.hero-premium .hero-scroll-cue{
  left:50%;bottom:6px;transform:translateX(-50%);z-index:6;
  width:44px;height:44px;color:var(--gold-deep);
  background:var(--surface);border:1px solid rgba(228,190,108,.5);
  box-shadow:0 12px 26px -8px rgba(15,25,65,.28),0 0 0 5px rgba(228,190,108,.10);
}
.hero-premium .hero-scroll-cue:hover{background:var(--gold-soft)}
.hero-wave{position:absolute;left:0;right:0;bottom:0;height:64px;z-index:3;pointer-events:none;line-height:0}
.hero-wave svg{display:block;width:100%;height:100%}
.hero-wave path{fill:var(--bg)}
html[data-theme="dark"] .hero.hero-premium{background:linear-gradient(135deg,#0d1433,#121a3f 55%,#0b112c)}
html[data-theme="dark"] .hero-premium h1,html[data-theme="dark"] .hero-course-body h2,html[data-theme="dark"] .hero-course-teacher-row strong,html[data-theme="dark"] .hero-trust-stat b{color:#fff}
html[data-theme="dark"] .hero-premium-lede,html[data-theme="dark"] .hero-trust-stat span,html[data-theme="dark"] .hero-course-label,html[data-theme="dark"] .hero-course-meta,html[data-theme="dark"] .hero-course-progress em{color:rgba(255,255,255,.65)}
html[data-theme="dark"] .hero-premium-kicker,html[data-theme="dark"] .hero-premium-outline,html[data-theme="dark"] .floating-chip,html[data-theme="dark"] .hero-course-card{background:rgba(18,26,63,.88);border-color:rgba(255,255,255,.10)}
html[data-theme="dark"] .hero-premium-outline{color:#fff}
html[data-theme="dark"] .hero-premium-grid{opacity:.18}
@media (max-width:1000px){.hero-premium{padding-top:104px}.hero-premium-inner{grid-template-columns:1fr;gap:35px}.hero-premium-copy{max-width:760px;margin:auto;text-align:center}.hero-premium-kicker{margin-inline:auto}.hero-premium-actions{justify-content:center}.hero-premium-lede{margin-inline:auto}.hero-premium-trust{margin-inline:auto;text-align:start}.hero-course-stage{min-height:465px}.hero-course-card{transform:none}.hero-course-card:hover{transform:translateY(-4px)}.chip-new{right:5%}.chip-live{left:5%}}
@media (max-width:620px){.hero.hero-premium{min-height:auto;padding:98px 0 66px}.hero-premium-inner{gap:24px}.hero-premium-kicker{font-size:10px;margin-bottom:15px}.hero-premium h1{font-size:39px;line-height:1.12;letter-spacing:-.8px;margin-bottom:15px}.hero-premium-lede{font-size:14px;line-height:1.8;margin-bottom:21px}.hero-premium-actions{display:grid;grid-template-columns:1fr;gap:9px}.hero-premium-actions .btn{width:100%;min-height:48px}.hero-premium-trust{margin-top:24px;padding-top:15px}.hero-trust-stat{padding-inline:11px}.hero-trust-stat b{font-size:20px}.hero-trust-stat span{font-size:9px}.hero-course-stage{min-height:430px;margin-top:0}.hero-course-stage::before{width:330px;height:330px}.hero-course-card{width:calc(100% - 22px);border-radius:21px}.hero-course-cover{height:190px}.hero-course-body{padding:17px 18px 19px}.hero-course-body h2{font-size:21px}.hero-course-meta{gap:9px;font-size:9.5px}.hero-course-progress{margin-top:13px}.floating-chip{font-size:8.5px;padding:8px 10px;border-radius:11px}.chip-new{top:21px;right:0}.chip-live{bottom:24px;left:0}.hero-orbit{display:none}.hero-course-shadow{bottom:32px;width:270px}.hero-wave{height:40px}.hero-premium .hero-scroll-cue{width:38px;height:38px;bottom:2px}.hero-premium .hero-scroll-cue svg{width:16px;height:16px}}
@media (max-width:380px){.hero-premium h1{font-size:35px}.hero-course-cover{height:175px}.hero-course-stage{min-height:405px}.hero-trust-stat b{font-size:18px}}
@media (prefers-reduced-motion:reduce){.floating-chip,.hero-orbit{animation:none}.hero-course-card{transition:none}.kicker-dot,.hero-course-stage::after,.hero-course-badge,.hero-premium-glow{animation:none}}