:root{
    --font-display:'Amiri',serif;
    --font-body:'Tajawal',sans-serif;
    --radius-btn:6px;
    --radius-card:10px;
    --ink:#152420;
    --teal:#1F4A3E;
    --teal-deep:#0F2A22;
    --teal-soft:#2C5C4C;
    --gold:#B8902F;
    --gold-light:#D9B865;
    --parchment:#F8F2E3;
    --parchment-2:#F0E6CE;
    --ivory:#FBF7ED;
    --sage:#7C9473;
    --line:rgba(21,36,32,.12);
    --shadow: 0 18px 40px -18px rgba(15,42,34,.35);
  }

  *{margin:0;padding:0;box-sizing:border-box;}
  html{scroll-behavior:smooth;}
  body{
    font-family:var(--font-body);
    background:var(--parchment);
    color:var(--ink);
    line-height:1.75;
    -webkit-font-smoothing:antialiased;
    overflow-x:hidden;
  }
  h1,h2,h3,.display{
    font-family:var(--font-display);
    font-weight:700;
    line-height:1.25;
  }
  a{text-decoration:none;color:inherit;}
  ul{list-style:none;}
  img{max-width:100%;display:block;}
  .wrap{max-width:1180px;margin:0 auto;padding:0 28px;}
  section{position:relative;}
  .eyebrow{
    display:inline-flex;align-items:center;gap:10px;
    font-family:var(--font-body);font-weight:700;
    font-size:.8rem;letter-spacing:.12em;color:var(--gold);
    margin-bottom:16px;
  }
  .eyebrow::before{
    content:"";width:26px;height:2px;background:var(--gold);
  }
  .btn{
    display:inline-flex;align-items:center;gap:10px;
    padding:15px 30px;border-radius:var(--radius-btn);
    font-family:var(--font-body);font-weight:700;font-size:.95rem;
    border:1.5px solid transparent;cursor:pointer;transition:.35s ease;
  }
  .btn-gold{background:var(--gold);color:var(--teal-deep);}
  .btn-gold:hover{background:var(--gold-light);transform:translateY(-2px);}
  .btn-outline{border-color:rgba(251,247,237,.5);color:var(--ivory);}
  .btn-outline:hover{background:rgba(251,247,237,.1);border-color:var(--ivory);}
  .btn-outline-dark{border-color:var(--teal);color:var(--teal);}
  .btn-outline-dark:hover{background:var(--teal);color:var(--ivory);}

  .reveal{opacity:0;transform:translateY(26px);transition:opacity .8s ease, transform .8s ease;}
  .reveal.in{opacity:1;transform:translateY(0);}

  /* ---------- Nav ---------- */
  header{
    position:fixed;top:0;right:0;left:0;z-index:100;
    padding:20px 0;transition:.4s ease;
  }
  header.solid{
    background:rgba(15,42,34,.94);backdrop-filter:blur(8px);
    padding:14px 0;box-shadow:0 6px 24px rgba(0,0,0,.15);
  }
  .navbar{display:flex;align-items:center;justify-content:space-between;}
  .brand{display:flex;align-items:center;gap:12px;color:var(--ivory);}
  .brand-name{font-family:var(--font-display);font-weight:700;font-size:1.15rem;}
  .brand-name span{display:block;font-family:var(--font-body);font-weight:400;font-size:.68rem;letter-spacing:.08em;color:var(--gold-light);margin-top:2px;}
  nav ul{display:flex;gap:34px;}
  nav a{
    color:var(--ivory);font-size:.92rem;font-weight:500;position:relative;padding:4px 0;
  }
  nav a::after{
    content:"";position:absolute;bottom:-3px;right:0;width:0;height:1.5px;background:var(--gold);transition:.3s ease;
  }
  nav a:hover::after{width:100%;}
  .nav-cta{display:flex;align-items:center;gap:16px;}
  .burger{display:none;flex-direction:column;gap:5px;cursor:pointer;background:none;border:0;}
  .burger span{width:24px;height:2px;background:var(--ivory);}

  /* ---------- Hero ---------- */
  .hero{
    min-height:100vh;display:flex;align-items:center;
    background:radial-gradient(1200px 700px at 80% -10%, var(--teal-soft), var(--teal-deep) 60%);
    color:var(--ivory);position:relative;overflow:hidden;padding:140px 0 90px;
  }
  .hero::before{
    content:"";position:absolute;inset:0;opacity:.10;
    background-image:
      repeating-linear-gradient(45deg, transparent 0 38px, var(--gold-light) 38px 39px, transparent 39px 76px),
      repeating-linear-gradient(-45deg, transparent 0 38px, var(--gold-light) 38px 39px, transparent 39px 76px);
    mask-image:radial-gradient(700px 700px at 78% 20%, black, transparent 70%);
  }
  .hero-grid{
    display:grid;grid-template-columns:1.15fr .85fr;gap:64px;align-items:center;
  }
  .hero-eyebrow{
    display:inline-flex;align-items:center;gap:10px;font-size:.8rem;font-weight:700;
    letter-spacing:.14em;color:var(--gold-light);margin-bottom:22px;
  }
  .hero-eyebrow::before{content:"";width:26px;height:2px;background:var(--gold-light);}
  .hero h1{
    font-size:clamp(2.3rem, 4.6vw, 3.6rem);color:var(--ivory);margin-bottom:8px;
  }
  .name-calligraphy{
    display:block;width:min(520px,92%);height:auto;margin:0 0 14px;filter:drop-shadow(0 6px 18px rgba(0,0,0,.35));
  }
  .hero h1 em{
    font-style:normal;color:var(--gold-light);display:block;font-size:.55em;font-family:var(--font-body);font-weight:400;margin-top:10px;letter-spacing:.02em;
  }
  .hero p.lede{
    max-width:520px;color:rgba(251,247,237,.82);font-size:1.05rem;margin:22px 0 34px;
  }
  .hero-actions{display:flex;flex-wrap:wrap;gap:16px;margin-bottom:46px;}
  .hero-stats{display:flex;gap:38px;flex-wrap:wrap;}
  .hero-stats div b{
    display:block;font-family:var(--font-display);font-size:1.7rem;color:var(--gold-light);
  }
  .hero-stats div span{font-size:.78rem;color:rgba(251,247,237,.65);}

  .portrait-wrap{position:relative;display:flex;justify-content:center;}
  .portrait-frame{
    position:relative;width:100%;max-width:340px;aspect-ratio:4/5;
    border-radius:var(--radius-card);overflow:hidden;border:1px solid rgba(217,184,101,.35);
    box-shadow:var(--shadow);
  }
  .portrait-frame img{width:100%;height:100%;object-fit:cover;object-position:top center;}
  .portrait-frame::after{
    content:"";position:absolute;inset:0;
    background:linear-gradient(180deg, transparent 55%, rgba(15,42,34,.55) 100%);
  }
  .portrait-badge{
    position:absolute;bottom:-22px;right:-18px;background:var(--ivory);color:var(--teal-deep);
    padding:16px 20px;border-radius:8px;box-shadow:var(--shadow);
    font-family:var(--font-body);display:flex;align-items:center;gap:12px;min-width:190px;
  }
  .portrait-badge b{display:block;font-family:var(--font-display);font-size:1.1rem;color:var(--teal);}
  .portrait-badge span{font-size:.72rem;color:#6b6b63;}

  /* ---------- Section header shared ---------- */
  .sec-head{max-width:640px;margin-bottom:52px;}
  .sec-head h2{font-size:clamp(1.8rem,3vw,2.5rem);color:var(--teal-deep);}
  .sec-head p{color:#5b5b52;margin-top:14px;font-size:1rem;}
  .sec-head.center{margin-left:auto;margin-right:auto;text-align:center;}

  /* ---------- Divider ---------- */
  .divider{display:flex;align-items:center;justify-content:center;gap:18px;padding:6px 0 60px;}
  .divider .line{height:1px;width:90px;background:var(--line);}

  /* ---------- About ---------- */
  .about{padding:120px 0;background:var(--parchment);}
  .about-grid{display:grid;grid-template-columns:.8fr 1.2fr;gap:70px;align-items:center;}
  .about-photo{
    position:relative;border-radius:var(--radius-card);overflow:hidden;aspect-ratio:1/1;
    border:1px solid var(--line);box-shadow:var(--shadow);
  }
  .about-photo img{width:100%;height:100%;object-fit:cover;object-position:top center;filter:saturate(1.02);}
  .about-body p{color:#4c4c44;margin-bottom:18px;font-size:1.02rem;}
  .credentials{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:30px;}
  .credentials li{
    display:flex;gap:12px;align-items:flex-start;padding:16px;background:var(--ivory);
    border:1px solid var(--line);border-radius:8px;font-size:.9rem;color:var(--teal-deep);font-weight:500;
  }
  .credentials li svg{flex-shrink:0;margin-top:2px;}

  /* ---------- Lectures ---------- */
  .lectures{padding:110px 0;background:var(--teal-deep);color:var(--ivory);}
  .lectures .sec-head h2{color:var(--ivory);}
  .lectures .sec-head p{color:rgba(251,247,237,.65);}
  .lectures .eyebrow{color:var(--gold-light);}
  .lectures .eyebrow::before{background:var(--gold-light);}
  .card-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;}
  .lec-card{
    background:rgba(251,247,237,.04);border:1px solid rgba(251,247,237,.12);
    border-radius:var(--radius-card);overflow:hidden;transition:.35s ease;
  }
  .lec-card:hover{transform:translateY(-6px);border-color:rgba(217,184,101,.4);}
  .lec-thumb{
    aspect-ratio:16/9;position:relative;display:flex;align-items:center;justify-content:center;
  }
  .lec-thumb.g1{background:linear-gradient(135deg,#2C5C4C,#0F2A22);}
  .lec-thumb.g2{background:linear-gradient(135deg,#4A6B4E,#1F4A3E);}
  .lec-thumb.g3{background:linear-gradient(135deg,#3A5548,#14332A);}
  .play{
    width:52px;height:52px;border-radius:50%;background:rgba(251,247,237,.14);
    border:1.5px solid rgba(251,247,237,.5);display:flex;align-items:center;justify-content:center;
    transition:.3s ease;
  }
  .lec-card:hover .play{background:var(--gold);border-color:var(--gold);}
  .duration{
    position:absolute;bottom:10px;left:10px;background:rgba(15,20,18,.65);
    font-size:.72rem;padding:3px 8px;border-radius:4px;color:var(--ivory);
  }
  .lec-info{padding:20px;}
  .lec-info .tag{font-size:.72rem;color:var(--gold-light);font-weight:700;letter-spacing:.06em;}
  .lec-info h3{font-family:var(--font-body);font-weight:700;font-size:1.02rem;margin:8px 0 6px;color:var(--ivory);}
  .lec-info p{font-size:.85rem;color:rgba(251,247,237,.6);}

  /* ---------- Clips (horizontal scroll) ---------- */
  .clips{padding:110px 0 120px;background:var(--parchment-2);}
  .clip-scroller{
    display:flex;gap:20px;overflow-x:auto;padding:10px 4px 26px;scroll-snap-type:x proximity;
  }
  .clip-scroller::-webkit-scrollbar{height:6px;}
  .clip-scroller::-webkit-scrollbar-thumb{background:var(--gold);border-radius:4px;}
  .clip-card{
    flex:0 0 200px;aspect-ratio:9/16;border-radius:12px;position:relative;overflow:hidden;
    scroll-snap-align:start;box-shadow:var(--shadow);
  }
  .clip-card.c1{background:linear-gradient(160deg,#7C9473,#1F4A3E);}
  .clip-card.c2{background:linear-gradient(160deg,#B8902F,#7C6A2E,#1F4A3E);}
  .clip-card.c3{background:linear-gradient(160deg,#2C5C4C,#0F2A22);}
  .clip-card.c4{background:linear-gradient(160deg,#D9B865,#3A5548);}
  .clip-card.c5{background:linear-gradient(160deg,#3A5548,#0F2A22);}
  .clip-card::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 55%,rgba(0,0,0,.55));}
  .clip-play{
    position:absolute;top:50%;right:50%;transform:translate(50%,-50%);
    width:44px;height:44px;border-radius:50%;background:rgba(251,247,237,.2);
    border:1.5px solid rgba(251,247,237,.6);display:flex;align-items:center;justify-content:center;z-index:2;
  }
  .clip-label{position:absolute;bottom:14px;right:14px;left:14px;z-index:2;color:var(--ivory);font-size:.82rem;font-weight:700;}

  /* ---------- Curriculum ---------- */
  .curriculum{padding:110px 0;background:var(--parchment);}
  .track-list{display:flex;flex-direction:column;border-top:1px solid var(--line);}
  .track{
    display:grid;grid-template-columns:80px 1fr auto;align-items:center;gap:24px;
    padding:28px 8px;border-bottom:1px solid var(--line);transition:.3s ease;
  }
  .track:hover{background:var(--ivory);}
  .track .num{font-family:var(--font-display);font-size:1.6rem;color:var(--gold);}
  .track h3{font-size:1.08rem;color:var(--teal-deep);font-weight:700;margin-bottom:4px;font-family:var(--font-body);}
  .track p{font-size:.86rem;color:#6b6b60;}
  .track .lessons-count{font-size:.8rem;color:var(--teal);white-space:nowrap;font-weight:700;background:rgba(31,74,62,.08);padding:8px 14px;border-radius:20px;}

  /* ---------- Word / quote section ---------- */
  .word{
    padding:130px 0;background:var(--teal);color:var(--ivory);text-align:center;position:relative;overflow:hidden;
  }
  .word::before{content:"";position:absolute;inset:0;opacity:.08;
    background-image:repeating-linear-gradient(45deg, transparent 0 38px, var(--gold-light) 38px 39px, transparent 39px 76px);
  }
  .word-inner{max-width:760px;margin:0 auto;position:relative;}
  .word blockquote{
    font-family:var(--font-display);font-style:italic;font-size:clamp(1.4rem,2.6vw,2rem);line-height:1.8;color:var(--ivory);
  }
  .word cite{display:block;margin-top:26px;font-style:normal;font-size:.85rem;color:var(--gold-light);font-weight:700;}

  /* ---------- Subscribe ---------- */
  .subscribe{padding:100px 0;background:var(--parchment-2);}
  .sub-box{
    background:var(--ivory);border:1px solid var(--line);border-radius:14px;
    padding:56px;display:grid;grid-template-columns:1.1fr .9fr;gap:40px;align-items:center;
    box-shadow:var(--shadow);
  }
  .sub-box h2{font-size:1.8rem;color:var(--teal-deep);margin-bottom:12px;}
  .sub-box p{color:#5b5b52;}
  .sub-form{display:flex;gap:10px;}
  .sub-form input{
    flex:1;padding:15px 18px;border-radius:var(--radius-btn);border:1.5px solid var(--line);
    font-family:var(--font-body);font-size:.92rem;background:#fff;
  }
  .sub-form input:focus{outline:2px solid var(--gold);outline-offset:1px;border-color:var(--gold);}

  /* ---------- Footer ---------- */
  footer{background:var(--teal-deep);color:rgba(251,247,237,.75);padding:80px 0 34px;}
  .foot-grid{display:grid;grid-template-columns:1.3fr .8fr .8fr 1fr;gap:50px;margin-bottom:60px;}
  .foot-brand p{margin:18px 0 22px;font-size:.9rem;color:rgba(251,247,237,.55);max-width:280px;}
  .social-row{display:flex;gap:12px;}
  .social-row a{
    width:38px;height:38px;border-radius:50%;border:1px solid rgba(251,247,237,.25);
    display:flex;align-items:center;justify-content:center;transition:.3s ease;
  }
  .social-row a:hover{background:var(--gold);border-color:var(--gold);}
  .foot-col h4{font-family:var(--font-body);color:var(--ivory);font-size:.92rem;margin-bottom:18px;font-weight:700;}
  .foot-col ul li{margin-bottom:12px;}
  .foot-col a{font-size:.87rem;color:rgba(251,247,237,.6);}
  .foot-col a:hover{color:var(--gold-light);}
  .foot-bottom{
    border-top:1px solid rgba(251,247,237,.12);padding-top:26px;
    display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;font-size:.8rem;color:rgba(251,247,237,.45);
  }

  /* ---------- Responsive ---------- */
  @media (max-width:980px){
    nav, .nav-cta .btn{display:none;}
    .burger{display:flex;}
    .hero-grid{grid-template-columns:1fr;}
    .portrait-wrap{order:-1;}
    .about-grid{grid-template-columns:1fr;}
    .card-grid{grid-template-columns:1fr 1fr;}
    .foot-grid{grid-template-columns:1fr 1fr;}
    .sub-box{grid-template-columns:1fr;}
  }
  @media (max-width:600px){
    .card-grid{grid-template-columns:1fr;}
    .credentials{grid-template-columns:1fr;}
    .foot-grid{grid-template-columns:1fr;}
    .track{grid-template-columns:50px 1fr;}
    .track .lessons-count{grid-column:2;justify-self:start;}
    .sub-form{flex-direction:column;}
    .hero{padding-top:120px;}
  }
  @media (prefers-reduced-motion: reduce){
    *{animation:none !important;transition:none !important;}
    .reveal{opacity:1;transform:none;}
  }