:root{
    --ink:#132043;
    --ink-soft:#535d80;
    --ink-faint:#8890ac;
    --paper:#f6f7fb;
    --white:#ffffff;
    --teal:#0ea672;
    --teal-dark:#0a7f57;
    --teal-soft:#e0f5ec;
    --amber:#f2a624;
    --amber-soft:#fdf0da;
    --indigo:#3b4ee0;
    --indigo-soft:#e7e9fc;
    --danger:#e5484d;
    --border:#e5e8f2;
    --shadow-sm: 0 2px 10px rgba(19,32,67,.06);
    --shadow-md: 0 12px 30px rgba(19,32,67,.10);
    --shadow-lg: 0 24px 60px rgba(19,32,67,.16);
    --radius-lg: 22px;
    --radius-md: 14px;
    --radius-sm: 9px;
    --font-scale: 1;
  }

  *{ box-sizing:border-box; }
  html{ scroll-behavior:smooth; font-size: calc(16px * var(--font-scale)); }
  body{
    margin:0;
    font-family:'Tajawal', sans-serif;
    background:var(--paper);
    color:var(--ink);
    direction:rtl;
    -webkit-font-smoothing:antialiased;
    overflow-x:hidden;
  }
  img{ max-width:100%; display:block; }
  a{ color:inherit; text-decoration:none; }
  ul{ margin:0; padding:0; list-style:none; }
  button{ font-family:inherit; cursor:pointer; }
  h1,h2,h3,h4{ font-family:'Cairo', sans-serif; margin:0; color:var(--ink); }
  .container{ width:100%; max-width:1240px; margin:0 auto; padding:0 24px; }
  section{ position:relative; }

  /* ---------- reveal on scroll ---------- */
  .reveal{ opacity:1; transform:translateY(0); }
  html.js .reveal{ opacity:0; transform:translateY(26px); transition:opacity .7s ease, transform .7s ease; }
  html.js .reveal.in-view{ opacity:1; transform:translateY(0); }
  .reveal-stagger > *{ opacity:1; transform:translateY(0); }
  html.js .reveal-stagger:not(.in-view) > *{ opacity:0; transform:translateY(20px); transition:opacity .6s ease, transform .6s ease; }
  html.js .reveal-stagger.in-view > *{ opacity:1; transform:translateY(0); }
  .reveal-stagger.in-view > *:nth-child(1){ transition-delay:.05s; }
  .reveal-stagger.in-view > *:nth-child(2){ transition-delay:.15s; }
  .reveal-stagger.in-view > *:nth-child(3){ transition-delay:.25s; }
  .reveal-stagger.in-view > *:nth-child(4){ transition-delay:.35s; }

  .eyebrow{
    display:inline-flex; align-items:center; gap:8px;
    font-family:'Cairo'; font-weight:700; font-size:12.5px;
    color:var(--teal-dark); background:var(--teal-soft);
    padding:6px 14px; border-radius:999px; margin-bottom:14px;
  }
  .eyebrow .dot{ width:6px; height:6px; border-radius:50%; background:var(--teal); }
  .section-head{ max-width:640px; margin-bottom:44px; }
  .section-head.center{ margin-inline:auto; text-align:center; }
  .section-head h2{ font-size:32px; font-weight:800; line-height:1.35; }
  .section-head p{ color:var(--ink-soft); font-size:15px; line-height:1.9; margin-top:12px; }

  .btn{
    display:inline-flex; align-items:center; justify-content:center; gap:8px;
    font-family:'Cairo'; font-weight:700; font-size:14.5px;
    padding:13px 26px; border-radius:12px; border:none;
    transition:transform .25s ease, box-shadow .25s ease, background .25s ease;
    white-space:nowrap;
  }
  .btn-primary{ background:var(--teal); color:#fff; box-shadow:0 10px 24px rgba(14,166,114,.30); }
  .btn-primary:hover{ background:var(--teal-dark); transform:translateY(-2px); box-shadow:0 14px 28px rgba(14,166,114,.38); }
  .btn-ghost{ background:#fff; color:var(--ink); border:1.5px solid var(--border); }
  .btn-ghost:hover{ border-color:var(--ink); transform:translateY(-2px); }
  .btn-dark{ background:var(--ink); color:#fff; }
  .btn-dark:hover{ transform:translateY(-2px); box-shadow:0 14px 28px rgba(19,32,67,.28); }
  .btn-sm{ padding:9px 18px; font-size:13px; border-radius:10px; }

  /* =========================================================
     HEADER
  ========================================================= */
  header{
    position:sticky; top:0; z-index:200;
    background:rgba(246,247,251,.85);
    backdrop-filter:blur(14px);
    border-bottom:1px solid transparent;
    transition:border-color .3s ease, box-shadow .3s ease, background .3s ease;
  }
  header.scrolled{ background:rgba(255,255,255,.92); border-color:var(--border); box-shadow:0 4px 20px rgba(19,32,67,.06); }
  .nav-wrap{ display:flex; align-items:center; justify-content:space-between; gap:24px; height:78px; }
  .logo{ display:flex; align-items:center; gap:10px; font-family:'Cairo'; font-weight:800; font-size:20px; color:var(--ink); }
  .logo-mark{
    width:38px; height:38px; border-radius:11px;
    background:linear-gradient(135deg,var(--teal),var(--indigo));
    display:flex; align-items:center; justify-content:center;
    color:#fff; font-size:19px; font-weight:900; position:relative;
    box-shadow:0 6px 16px rgba(14,166,114,.35);
  }
  .logo-mark svg{ width:20px; height:20px; }

  nav.main-nav{ display:flex; align-items:center; gap:6px; }
  nav.main-nav a{
    font-size:14.5px; font-weight:500; color:var(--ink-soft);
    padding:10px 14px; border-radius:9px; transition:.2s;
    position:relative;
  }
  nav.main-nav a:hover{ color:var(--ink); background:rgba(19,32,67,.05); }

  .header-actions{ display:flex; align-items:center; gap:10px; }
  .icon-btn{
    width:38px; height:38px; border-radius:10px; border:1.5px solid var(--border);
    background:#fff; display:flex; align-items:center; justify-content:center;
    color:var(--ink-soft); transition:.2s;
  }
  .icon-btn:hover{ border-color:var(--ink); color:var(--ink); }
  .text-scale{ display:flex; border:1.5px solid var(--border); border-radius:10px; overflow:hidden; background:#fff; }
  .text-scale button{ border:none; background:none; padding:0 10px; height:38px; font-family:'Cairo'; font-weight:700; color:var(--ink-soft); font-size:13px; }
  .text-scale button:hover{ background:var(--paper); color:var(--ink); }
  .text-scale button + button{ border-right:1px solid var(--border); }

  .login-wrap{ position:relative; }
  .login-trigger{
    display:flex; align-items:center; gap:8px;
    border:1.5px solid var(--border); background:#fff;
    padding:8px 16px 8px 8px; border-radius:12px; font-family:'Cairo'; font-weight:700; font-size:13.5px; color:var(--ink);
    transition:.2s;
  }
  .login-trigger:hover{ border-color:var(--ink); }
  .login-trigger .av{ width:24px; height:24px; border-radius:7px; background:var(--indigo-soft); color:var(--indigo); display:flex; align-items:center; justify-content:center; font-size:13px; }
  .login-menu{
    position:absolute; top:calc(100% + 12px); left:0; width:250px;
    background:#fff; border:1px solid var(--border); border-radius:16px;
    box-shadow:var(--shadow-lg); padding:10px; opacity:0; visibility:hidden;
    transform:translateY(-8px); transition:.25s ease; z-index:100;
  }
  .login-wrap.open .login-menu{ opacity:1; visibility:visible; transform:translateY(0); }
  .login-menu a{
    display:flex; align-items:center; gap:12px; padding:11px 12px; border-radius:11px; font-size:13.5px; font-weight:500;
  }
  .login-menu a:hover{ background:var(--paper); }
  .login-menu .ic{ width:34px; height:34px; border-radius:9px; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
  .login-menu .ic.teacher{ background:var(--teal-soft); color:var(--teal-dark); }
  .login-menu .ic.student{ background:var(--amber-soft); color:#b3720c; }
  .login-menu .lbl b{ display:block; color:var(--ink); }
  .login-menu .lbl span{ display:block; font-size:11.5px; color:var(--ink-faint); font-weight:400; margin-top:1px; }
  .login-menu hr{ border:none; border-top:1px solid var(--border); margin:8px 4px; }
  .login-menu .signup-line{ padding:8px 12px 4px; font-size:12px; color:var(--ink-faint); text-align:center; }
  .login-menu .signup-line a{ display:inline; padding:0; color:var(--teal-dark); font-weight:700; }

  .burger{ display:none; }

  /* =========================================================
     HERO
  ========================================================= */
  .hero{ padding:64px 0 40px; position:relative; overflow:hidden; }
  .hero-bg-grid{
    position:absolute; inset:0; z-index:0; opacity:.5;
    background-image:
      radial-gradient(circle at 18px 18px, rgba(19,32,67,.06) 1.6px, transparent 1.6px);
    background-size:34px 34px;
    -webkit-mask-image:radial-gradient(ellipse 60% 55% at 75% 20%, #000 40%, transparent 80%);
            mask-image:radial-gradient(ellipse 60% 55% at 75% 20%, #000 40%, transparent 80%);
  }
  .hero-inner{ position:relative; z-index:1; display:grid; grid-template-columns:1.05fr .95fr; gap:40px; align-items:center; }

  .slider{ position:relative; min-height:300px; }
  .slide{ display:none; animation:fadeIn .6s ease; }
  .slide.active{ display:block; }
  @keyframes fadeIn{ from{ opacity:0; transform:translateY(14px);} to{opacity:1; transform:translateY(0);} }
  .slide .tag{ }
  .slide h1{ font-size:44px; line-height:1.28; font-weight:800; margin:16px 0 18px; letter-spacing:-.5px; }
  .slide h1 em{ font-style:normal; color:var(--teal); position:relative; }
  .slide p.lead{ font-size:16.5px; color:var(--ink-soft); line-height:1.95; max-width:520px; margin-bottom:28px; }
  .slide-ctas{ display:flex; gap:14px; margin-bottom:34px; flex-wrap:wrap; }

  .hero-mini-stats{ display:flex; gap:26px; flex-wrap:wrap; }
  .hero-mini-stats div{ display:flex; align-items:center; gap:9px; }
  .hero-mini-stats b{ font-family:'Cairo'; font-size:19px; color:var(--ink); }
  .hero-mini-stats span{ font-size:12.5px; color:var(--ink-faint); }
  .mini-avatars{ display:flex; }
  .mini-avatars i{ width:30px; height:30px; border-radius:50%; border:2.5px solid #fff; margin-inline-start:-10px; background:var(--indigo); display:inline-flex; }
  .mini-avatars i:nth-child(1){ background:#f2a624; margin-inline-start:0;}
  .mini-avatars i:nth-child(2){ background:#0ea672; }
  .mini-avatars i:nth-child(3){ background:#3b4ee0; }

  .slider-controls{ display:flex; align-items:center; gap:14px; margin-top:10px; }
  .dots{ display:flex; gap:8px; }
  .dots button{ width:26px; height:5px; border-radius:4px; background:var(--border); border:none; padding:0; transition:.25s; }
  .dots button.active{ background:var(--teal); width:34px; }
  .arrow-btn{ width:38px; height:38px; border-radius:50%; border:1.5px solid var(--border); background:#fff; display:flex; align-items:center; justify-content:center; color:var(--ink-soft); transition:.2s; }
  .arrow-btn:hover{ border-color:var(--teal); color:var(--teal); }

  /* hero visual: exam card mock */
  .hero-visual{ position:relative; height:460px; }
  .float-badge{
    position:absolute; background:#fff; border:1px solid var(--border); border-radius:16px;
    box-shadow:var(--shadow-md); padding:12px 16px; display:flex; align-items:center; gap:10px;
    font-family:'Cairo'; font-weight:700; font-size:12.5px; color:var(--ink);
    animation:floaty 5s ease-in-out infinite;
  }
  .float-badge .fic{ width:32px; height:32px; border-radius:9px; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
  @keyframes floaty{ 0%,100%{ transform:translateY(0);} 50%{ transform:translateY(-12px);} }

  .exam-card{
    position:absolute; inset-inline-start:6%; top:6%; width:88%; background:#fff;
    border-radius:22px; border:1px solid var(--border); box-shadow:var(--shadow-lg);
    padding:26px; transform:rotate(-2deg);
  }
  .exam-card-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:18px; }
  .exam-card-head .who{ display:flex; align-items:center; gap:10px; }
  .exam-card-head .who .ava{ width:36px; height:36px; border-radius:50%; background:var(--indigo-soft); color:var(--indigo); display:flex; align-items:center; justify-content:center; font-family:'Cairo'; font-weight:800; font-size:14px; }
  .exam-card-head .who b{ display:block; font-family:'Cairo'; font-size:13.5px; }
  .exam-card-head .who span{ display:block; font-size:11px; color:var(--ink-faint); }
  .timer-chip{ background:var(--amber-soft); color:#a5690b; font-family:'Cairo'; font-weight:800; font-size:12px; padding:6px 12px; border-radius:999px; }
  .qtext{ font-family:'Cairo'; font-weight:700; font-size:15.5px; margin-bottom:16px; line-height:1.7; }
  .opt{
    display:flex; align-items:center; gap:12px; padding:12px 14px; border:1.5px solid var(--border);
    border-radius:12px; margin-bottom:10px; font-size:13.5px; font-weight:500; color:var(--ink-soft);
  }
  .opt .bub{ width:22px; height:22px; border-radius:50%; border:2px solid var(--border); flex-shrink:0; display:flex; align-items:center; justify-content:center; }
  .opt.correct{ border-color:var(--teal); background:var(--teal-soft); color:var(--teal-dark); }
  .opt.correct .bub{ background:var(--teal); border-color:var(--teal); }
  .opt.correct .bub svg{ width:13px; height:13px; stroke:#fff; }
  .progress-line{ height:6px; border-radius:6px; background:var(--paper); margin-top:20px; overflow:hidden; }
  .progress-line i{ display:block; height:100%; width:62%; background:linear-gradient(90deg,var(--teal),var(--indigo)); border-radius:6px; }

  /* =========================================================
     TICKER STRIP
  ========================================================= */
  .ticker-wrap{ border-top:1px solid var(--border); border-bottom:1px solid var(--border); background:#fff; padding:16px 0; overflow:hidden; }
  .ticker-track{ display:flex; gap:14px; width:max-content; animation:scrollX 32s linear infinite; }
  .ticker-wrap:hover .ticker-track{ animation-play-state:paused; }
  @keyframes scrollX{ from{ transform:translateX(0);} to{ transform:translateX(-50%);} }
  .tick-pill{
    display:flex; align-items:center; gap:10px; background:var(--paper); border:1px solid var(--border);
    border-radius:999px; padding:9px 18px; font-size:12.5px; font-weight:500; color:var(--ink-soft); white-space:nowrap;
  }
  .tick-pill b{ color:var(--ink); font-family:'Cairo'; font-weight:700; }
  .tick-pill .lv{ font-size:11px; padding:2px 9px; border-radius:999px; font-weight:700; font-family:'Cairo'; }
  .lv.easy{ background:var(--teal-soft); color:var(--teal-dark); }
  .lv.mid{ background:var(--amber-soft); color:#a5690b; }
  .lv.hard{ background:#fde3e4; color:#b3282d; }

  /* =========================================================
     STATS
  ========================================================= */
  .stats-section{ padding:80px 0 40px; }
  .stats-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:18px; }
  .stat-card{
    background:#fff; border:1px solid var(--border); border-radius:var(--radius-md); padding:26px 22px;
    transition:transform .3s ease, box-shadow .3s ease;
  }
  .stat-card:hover{ transform:translateY(-6px); box-shadow:var(--shadow-md); }
  .stat-ring{ width:46px; height:46px; border-radius:12px; display:flex; align-items:center; justify-content:center; margin-bottom:16px; }
  .stat-card b{ display:block; font-family:'Cairo'; font-size:30px; font-weight:800; }
  .stat-card span{ font-size:13px; color:var(--ink-soft); }

  /* =========================================================
     DAILY QUESTION
  ========================================================= */
  .daily{ padding:60px 0; }
  .daily-grid{ display:grid; grid-template-columns:.85fr 1.15fr; gap:56px; align-items:center; }
  .daily-side ul{ margin-top:22px; display:flex; flex-direction:column; gap:14px; }
  .daily-side li{ display:flex; align-items:flex-start; gap:12px; font-size:14px; color:var(--ink-soft); line-height:1.8; }
  .daily-side li .ck{ width:22px; height:22px; border-radius:7px; background:var(--teal-soft); color:var(--teal-dark); display:flex; align-items:center; justify-content:center; flex-shrink:0; margin-top:2px; }

  .quiz-box{ background:#fff; border:1px solid var(--border); border-radius:var(--radius-lg); box-shadow:var(--shadow-md); padding:32px; position:relative; }
  .quiz-box .qbadge{ display:inline-flex; align-items:center; gap:8px; background:var(--indigo-soft); color:var(--indigo); font-family:'Cairo'; font-weight:800; font-size:12px; padding:6px 14px; border-radius:999px; margin-bottom:18px; }
  .quiz-box h3{ font-size:20px; margin-bottom:24px; line-height:1.6; }
  .quiz-opts{ display:flex; flex-direction:column; gap:12px; }
  .quiz-opt{
    position:relative; border:1.5px solid var(--border); border-radius:13px; padding:14px 16px;
    display:flex; align-items:center; justify-content:space-between; cursor:pointer; transition:.2s;
    background:#fff; overflow:hidden; font-size:14.5px; font-weight:500;
  }
  .quiz-opt:hover{ border-color:var(--ink); }
  .quiz-opt .fill{ position:absolute; inset-inline-start:0; top:0; bottom:0; width:0%; background:var(--paper); z-index:0; transition:width .8s ease; }
  .quiz-opt span.txt, .quiz-opt span.pct{ position:relative; z-index:1; }
  .quiz-opt span.pct{ display:none; font-family:'Cairo'; font-weight:800; color:var(--ink-faint); }
  .quiz-box.answered .quiz-opt{ cursor:default; }
  .quiz-box.answered .quiz-opt span.pct{ display:inline; }
  .quiz-box.answered .quiz-opt:hover{ border-color:var(--border); }
  .quiz-opt.is-correct{ border-color:var(--teal); }
  .quiz-opt.is-correct .fill{ background:var(--teal-soft); }
  .quiz-opt.is-correct span.txt{ color:var(--teal-dark); font-weight:700; }
  .quiz-opt.is-wrong{ border-color:var(--danger); }
  .quiz-opt.is-wrong .fill{ background:#fdecec; }
  .quiz-note{ margin-top:18px; font-size:12.5px; color:var(--ink-faint); display:flex; align-items:center; gap:8px; }
  .quiz-note b{ color:var(--teal-dark); font-family:'Cairo'; }

  /* =========================================================
     NEWS
  ========================================================= */
  .news{ padding:60px 0; }
  .news-grid{ display:grid; grid-template-columns:1.15fr .85fr; gap:22px; }
  .news-feat{ background:linear-gradient(155deg,var(--ink),#24336b); border-radius:var(--radius-lg); padding:34px; color:#fff; min-height:290px; display:flex; flex-direction:column; justify-content:flex-end; position:relative; overflow:hidden; }
  .news-feat::before{ content:""; position:absolute; inset:0; background-image:radial-gradient(circle at 30px 30px, rgba(255,255,255,.08) 1.5px, transparent 1.5px); background-size:26px 26px; }
  .news-feat .badge{ position:relative; z-index:1; align-self:flex-start; background:rgba(255,255,255,.14); font-family:'Cairo'; font-weight:700; font-size:11.5px; padding:6px 14px; border-radius:999px; margin-bottom:auto; }
  .news-feat h3{ position:relative; z-index:1; color:#fff; font-size:22px; line-height:1.55; margin-bottom:10px; }
  .news-feat .meta{ position:relative; z-index:1; font-size:12px; color:#c7cdea; }
  .news-list{ display:flex; flex-direction:column; gap:16px; }
  .news-item{ background:#fff; border:1px solid var(--border); border-radius:16px; padding:18px 20px; display:flex; gap:14px; align-items:flex-start; transition:.25s; }
  .news-item:hover{ box-shadow:var(--shadow-sm); transform:translateX(-4px); }
  .news-item .ic{ width:38px; height:38px; border-radius:10px; background:var(--amber-soft); color:#a5690b; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
  .news-item h4{ font-size:14.5px; font-weight:700; line-height:1.6; margin-bottom:4px; }
  .news-item span{ font-size:11.5px; color:var(--ink-faint); }

  /* =========================================================
     CTA BANNER
  ========================================================= */
  .cta-banner{ margin:70px auto; max-width:1240px; padding:0 24px; }
  .cta-inner{
    background:linear-gradient(120deg,#0a7f57,#0ea672 45%,#3b4ee0);
    border-radius:28px; padding:56px 50px; text-align:center; position:relative; overflow:hidden;
  }
  .cta-inner::before{ content:""; position:absolute; inset:0; opacity:.18; background-image:radial-gradient(circle at 20px 20px, #fff 2px, transparent 2px); background-size:38px 38px; }
  .cta-inner h2{ position:relative; color:#fff; font-size:30px; margin-bottom:12px; }
  .cta-inner p{ position:relative; color:rgba(255,255,255,.88); font-size:15px; max-width:520px; margin:0 auto 26px; }
  .cta-inner .btn-primary{ position:relative; background:#fff; color:var(--teal-dark); box-shadow:0 12px 26px rgba(0,0,0,.18); }
  .cta-inner .btn-primary:hover{ background:#f4faf7; }

  /* =========================================================
     SERVICES / ROLES
  ========================================================= */
  .roles{ padding:20px 0 70px; display:flex; flex-direction:column; gap:22px; }
  .role-block{ display:grid; grid-template-columns:1fr 1fr; gap:44px; align-items:center; border-radius:28px; padding:46px; }
  .role-block.admin{ background:var(--indigo-soft); }
  .role-block.teacher{ background:var(--teal-soft); }
  .role-block.student{ background:var(--amber-soft); }
  .role-block:nth-child(2){ direction:ltr; }
  .role-block:nth-child(2) .role-copy{ direction:rtl; }
  .role-copy .role-num{ font-family:'Cairo'; font-weight:800; font-size:12.5px; letter-spacing:1px; margin-bottom:12px; display:block; }
  .role-block.admin .role-num{ color:var(--indigo); }
  .role-block.teacher .role-num{ color:var(--teal-dark); }
  .role-block.student .role-num{ color:#a5690b; }
  .role-copy h3{ font-size:25px; margin-bottom:14px; line-height:1.5; }
  .role-copy p.desc{ color:var(--ink-soft); font-size:14.5px; line-height:1.9; margin-bottom:20px; }
  .role-copy ul{ display:flex; flex-direction:column; gap:11px; margin-bottom:22px; }
  .role-copy li{ display:flex; align-items:center; gap:10px; font-size:13.5px; font-weight:500; color:var(--ink); }
  .role-copy li svg{ width:17px; height:17px; flex-shrink:0; }
  .role-block.admin li svg{ stroke:var(--indigo); }
  .role-block.teacher li svg{ stroke:var(--teal-dark); }
  .role-block.student li svg{ stroke:#a5690b; }

  .role-visual{ background:#fff; border-radius:20px; padding:22px; box-shadow:var(--shadow-md); }
  .mini-dash-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:16px; }
  .mini-dash-head .dots-3{ display:flex; gap:5px; }
  .mini-dash-head .dots-3 i{ width:8px; height:8px; border-radius:50%; }
  .mini-row{ display:flex; align-items:center; justify-content:space-between; padding:11px 0; border-bottom:1px dashed var(--border); font-size:12.5px; }
  .mini-row:last-child{ border-bottom:none; }
  .mini-row .l{ display:flex; align-items:center; gap:10px; color:var(--ink); font-weight:600; }
  .mini-row .l .dotcol{ width:8px; height:8px; border-radius:50%; }
  .mini-row .v{ font-family:'Cairo'; font-weight:800; }
  .mini-bar-wrap{ background:var(--paper); border-radius:6px; height:8px; width:70px; overflow:hidden; }
  .mini-bar-wrap i{ display:block; height:100%; border-radius:6px; }

  /* =========================================================
     COURSES
  ========================================================= */
  .courses{ padding:20px 0 70px; }
  .filter-tabs{ display:flex; gap:10px; margin-bottom:32px; flex-wrap:wrap; }
  .filter-tabs button{
    border:1.5px solid var(--border); background:#fff; padding:9px 20px; border-radius:999px;
    font-family:'Cairo'; font-weight:700; font-size:13px; color:var(--ink-soft); transition:.2s;
  }
  .filter-tabs button.active{ background:var(--ink); border-color:var(--ink); color:#fff; }
  .courses-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
  .course-card{ background:#fff; border:1px solid var(--border); border-radius:20px; overflow:hidden; transition:.3s; }
  .course-card:hover{ transform:translateY(-6px); box-shadow:var(--shadow-md); }
  .course-cover{ height:130px; position:relative; display:flex; align-items:center; justify-content:center; }
  .course-cover .lv-tag{ position:absolute; top:14px; inset-inline-start:14px; font-family:'Cairo'; font-weight:800; font-size:11px; padding:5px 12px; border-radius:999px; background:rgba(255,255,255,.85); }
  .course-body{ padding:20px; }
  .course-subject{ font-size:11.5px; color:var(--ink-faint); font-weight:700; margin-bottom:6px; }
  .course-body h4{ font-size:16px; margin-bottom:10px; line-height:1.5; }
  .course-meta{ display:flex; align-items:center; justify-content:space-between; font-size:12px; color:var(--ink-soft); margin-bottom:16px; }
  .course-meta .teacher{ display:flex; align-items:center; gap:8px; }
  .course-meta .teacher i{ width:24px; height:24px; border-radius:50%; background:var(--indigo-soft); color:var(--indigo); display:flex; align-items:center; justify-content:center; font-family:'Cairo'; font-weight:800; font-size:11px; }
  .course-foot{ display:flex; align-items:center; justify-content:space-between; }
  .price{ font-family:'Cairo'; font-weight:800; color:var(--ink); font-size:15px; }
  .price.free{ color:var(--teal-dark); }

  /* =========================================================
     TOP TEACHERS
  ========================================================= */
  .leaders{ padding:70px 0; background:var(--ink); border-radius:36px; margin:0 24px; max-width:1240px; margin-inline:auto; position:relative; overflow:hidden; }
  .leaders::before{ content:""; position:absolute; inset:0; background-image:radial-gradient(circle at 24px 24px, rgba(255,255,255,.06) 1.6px, transparent 1.6px); background-size:34px 34px; }
  .leaders .section-head h2, .leaders .section-head p{ color:#fff; }
  .leaders .section-head p{ color:#aab1d6; }
  .podium{ position:relative; display:flex; align-items:flex-end; justify-content:center; gap:26px; margin-top:50px; }
  .podium-item{ text-align:center; }
  .podium-item .crown{ font-size:22px; margin-bottom:8px; }
  .podium-avatar{ width:78px; height:78px; border-radius:50%; margin:0 auto 14px; display:flex; align-items:center; justify-content:center; font-family:'Cairo'; font-weight:800; font-size:24px; color:#fff; border:3px solid rgba(255,255,255,.25); }
  .podium-item.first .podium-avatar{ width:98px; height:98px; font-size:30px; border-color:var(--amber); }
  .podium-item h4{ color:#fff; font-size:15px; margin-bottom:4px; }
  .podium-item .subj{ color:#aab1d6; font-size:12px; margin-bottom:8px; }
  .stars{ color:var(--amber); font-size:12px; letter-spacing:2px; }
  .podium-base{ background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.1); border-radius:14px 14px 0 0; padding:14px 22px 0; margin-top:16px; }
  .podium-item.first .podium-base{ height:74px; }
  .podium-item.second .podium-base{ height:52px; }
  .podium-item.third .podium-base{ height:38px; }
  .podium-base .rank{ font-family:'Cairo'; font-weight:900; color:rgba(255,255,255,.35); font-size:26px; }

  /* =========================================================
     PARTNERS MARQUEE
  ========================================================= */
  .partners{ padding:60px 0; }
  .marquee{ overflow:hidden; position:relative; }
  .marquee::before, .marquee::after{ content:""; position:absolute; top:0; bottom:0; width:80px; z-index:2; }
  .marquee::before{ inset-inline-start:0; background:linear-gradient(90deg,var(--paper),transparent); }
  .marquee::after{ inset-inline-end:0; background:linear-gradient(270deg,var(--paper),transparent); }
  .marquee-track{ display:flex; gap:16px; width:max-content; animation:scrollX 26s linear infinite; }
  .partner-chip{
    display:flex; align-items:center; gap:10px; background:#fff; border:1px solid var(--border);
    padding:16px 26px; border-radius:16px; font-family:'Cairo'; font-weight:700; font-size:14px; color:var(--ink-soft); white-space:nowrap;
  }
  .partner-chip i{ width:30px; height:30px; border-radius:9px; display:flex; align-items:center; justify-content:center; color:#fff; font-size:14px; }

  /* =========================================================
     BLOG
  ========================================================= */
  .blog{ padding:70px 0; }
  .blog-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
  .blog-card{ background:#fff; border:1px solid var(--border); border-radius:20px; overflow:hidden; transition:.3s; }
  .blog-card:hover{ transform:translateY(-6px); box-shadow:var(--shadow-md); }
  .blog-cover{ height:150px; position:relative; }
  .blog-body{ padding:20px; }
  .blog-tag{ display:inline-block; font-family:'Cairo'; font-weight:700; font-size:11px; padding:4px 12px; border-radius:999px; margin-bottom:12px; }
  .blog-body h4{ font-size:15.5px; line-height:1.6; margin-bottom:10px; }
  .blog-body p{ font-size:12.5px; color:var(--ink-soft); line-height:1.8; margin-bottom:14px; }
  .blog-foot{ display:flex; align-items:center; justify-content:space-between; font-size:11.5px; color:var(--ink-faint); }
  .read-more{ display:inline-flex; align-items:center; gap:6px; font-family:'Cairo'; font-weight:700; color:var(--teal-dark); font-size:12.5px; }

  /* =========================================================
     NEWSLETTER + FOOTER
  ========================================================= */
  .newsletter{ background:#fff; border:1px solid var(--border); border-radius:26px; max-width:1240px; margin:0 auto 0; padding:40px 50px; display:flex; align-items:center; justify-content:space-between; gap:30px; flex-wrap:wrap; position:relative; top:60px; box-shadow:var(--shadow-md); }
  .newsletter h3{ font-size:19px; margin-bottom:6px; }
  .newsletter p{ font-size:13px; color:var(--ink-soft); }
  .newsletter form{ display:flex; gap:10px; }
  .newsletter input{ border:1.5px solid var(--border); border-radius:12px; padding:12px 16px; font-family:'Tajawal'; font-size:13.5px; width:250px; }
  .newsletter input:focus{ outline:2px solid var(--teal); border-color:transparent; }

  footer{ background:var(--ink); color:#c7cdea; padding:130px 0 30px; margin-top:0; }
  .footer-grid{ display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:40px; padding-bottom:50px; border-bottom:1px solid rgba(255,255,255,.1); }
  .footer-brand .logo{ color:#fff; margin-bottom:16px; }
  .footer-brand p{ font-size:13px; line-height:1.9; color:#9aa2c9; max-width:280px; margin-bottom:20px; }
  .socials{ display:flex; gap:10px; }
  .socials a{ width:36px; height:36px; border-radius:10px; background:rgba(255,255,255,.06); display:flex; align-items:center; justify-content:center; transition:.2s; }
  .socials a:hover{ background:var(--teal); }
  .fcol h5{ color:#fff; font-family:'Cairo'; font-size:14.5px; margin-bottom:18px; }
  .fcol ul{ display:flex; flex-direction:column; gap:12px; }
  .fcol a{ font-size:13.5px; color:#aab1d6; transition:.2s; }
  .fcol a:hover{ color:#fff; }
  .footer-bottom{ display:flex; align-items:center; justify-content:space-between; padding-top:26px; font-size:12.5px; color:#8b93bd; flex-wrap:wrap; gap:12px; }

  /* skip link / focus */
  a:focus-visible, button:focus-visible, input:focus-visible{ outline:2.5px solid var(--teal); outline-offset:2px; }

  @media (prefers-reduced-motion: reduce){
    *{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; }
  }

  /* =========================================================
     RESPONSIVE
  ========================================================= */
  @media (max-width:1080px){
    .hero-inner{ grid-template-columns:1fr; }
    .hero-visual{ display:none; }
    .daily-grid{ grid-template-columns:1fr; }
    .news-grid{ grid-template-columns:1fr; }
    .role-block{ grid-template-columns:1fr; }
    .role-block:nth-child(2){ direction:rtl; }
    .role-visual{ order:-1; }
    .courses-grid{ grid-template-columns:repeat(2,1fr); }
    .blog-grid{ grid-template-columns:repeat(2,1fr); }
    .stats-grid{ grid-template-columns:repeat(2,1fr); }
    .footer-grid{ grid-template-columns:1fr 1fr; }
  }
  @media (max-width:760px){
    nav.main-nav, .header-actions .text-scale, .login-menu .signup-line{ display:none; }
    .burger{ display:flex; }
    .courses-grid, .blog-grid, .stats-grid{ grid-template-columns:1fr; }
    .slide h1{ font-size:30px; }
    .newsletter{ flex-direction:column; text-align:center; }
    .newsletter form{ width:100%; }
    .newsletter input{ width:100%; }
    .podium{ gap:10px; }
    .podium-item.first .podium-avatar{ width:78px; height:78px; font-size:24px; }
    footer{ padding-top:170px; }
  }