:root{
    --ink:#16302A;        /* أخضر كحلي غامق - النص الأساسي */
    --ink-soft:#3C5750;
    --paper:#FAF6EE;      /* خلفية ورقية دافئة */
    --paper-deep:#F1EAD9;
    --gold:#A9823D;       /* ذهبي مطفي - الحبر الذهبي */
    --gold-soft:#D9C79A;
    --line:#DCD2B8;
    --emerald:#1B4A3C;
    --emerald-deep:#0F332A;
    --white:#FFFFFF;
  }
  *{margin:0;padding:0;box-sizing:border-box;}
  html{scroll-behavior:smooth;}
  body{
    font-family:'IBM Plex Sans Arabic', sans-serif;
    background:var(--paper);
    color:var(--ink);
    line-height:1.7;
    overflow-x:hidden;
  }
  @media (prefers-reduced-motion: reduce){
    *, *::before, *::after{animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important;}
  }
  ::selection{background:var(--gold-soft); color:var(--emerald-deep);}
  .display{font-family:'Markazi Text', serif;}
  a{color:inherit; text-decoration:none;}
  .wrap{max-width:1180px; margin:0 auto; padding:0 28px;}

  /* ===== Sanad thread motif — a connecting line running through the page ===== */
  .sanad-rail{
    position:absolute; top:0; bottom:0; right:calc(50% - 1px);
    width:2px; background:linear-gradient(var(--gold-soft), transparent 85%);
    opacity:.35; z-index:0;
  }

  /* ===== Animation keyframes ===== */
  @keyframes riseIn{from{opacity:0; transform:translateY(26px);} to{opacity:1; transform:translateY(0);}}
  @keyframes fadeIn{from{opacity:0;} to{opacity:1;}}
  @keyframes floatY{0%,100%{transform:translateY(0);} 50%{transform:translateY(-10px);}}
  @keyframes drift{0%{transform:translate(0,0) scale(1);} 50%{transform:translate(-24px,18px) scale(1.06);} 100%{transform:translate(0,0) scale(1);}}
  @keyframes drawLine{from{stroke-dashoffset:1;} to{stroke-dashoffset:0;}}
  @keyframes shimmer{0%{background-position:-200% 0;} 100%{background-position:200% 0;}}
  @keyframes pulseDot{0%,100%{opacity:.5; transform:scale(1);} 50%{opacity:1; transform:scale(1.4);}}
  @keyframes rotSlow{from{transform:rotate(0);} to{transform:rotate(360deg);}}

  /* scroll reveal */
  .reveal{opacity:0; transform:translateY(28px); transition:opacity .8s cubic-bezier(.22,1,.36,1), transform .8s cubic-bezier(.22,1,.36,1);}
  .reveal.in{opacity:1; transform:translateY(0);}
  .reveal-d1.in{transition-delay:.08s;} .reveal-d2.in{transition-delay:.16s;}
  .reveal-d3.in{transition-delay:.24s;} .reveal-d4.in{transition-delay:.32s;} .reveal-d5.in{transition-delay:.4s;} .reveal-d6.in{transition-delay:.48s;}

  /* ambient background blobs */
  .blob{position:absolute; border-radius:50%; filter:blur(60px); opacity:.35; pointer-events:none; animation:drift 14s ease-in-out infinite;}
  .blob-1{width:340px; height:340px; background:radial-gradient(circle, var(--gold-soft), transparent 70%); top:-80px; left:-60px;}
  .blob-2{width:420px; height:420px; background:radial-gradient(circle, var(--emerald), transparent 70%); top:120px; right:-140px; opacity:.18; animation-duration:18s; animation-delay:-4s;}

  /* nav shrink state */
  header{transition:padding .35s ease, box-shadow .35s ease;}
  header.scrolled{box-shadow:0 8px 24px -18px rgba(22,48,42,.35);}
  header.scrolled nav{padding-top:12px; padding-bottom:12px;}
  nav{transition:padding .35s ease;}
  .brand .dot{animation:pulseDot 2.4s ease-in-out infinite;}
  .navlinks a{position:relative; transition:color .25s;}
  .navlinks a::after{content:""; position:absolute; right:0; bottom:-4px; width:0; height:1.5px; background:var(--gold); transition:width .3s ease;}
  .navlinks a:hover::after{width:100%;}
  .btn{transition:transform .25s cubic-bezier(.22,1.4,.36,1), box-shadow .25s ease, background .25s ease, border-color .25s ease;}
  .btn-primary:hover{box-shadow:0 12px 26px -12px rgba(27,74,60,.55);}
  .btn-ghost:hover{transform:translateY(-2px);}
  .btn:active{transform:translateY(0) scale(.97);}
  header{
    position:sticky; top:0; z-index:50;
    background:rgba(250,246,238,.86); backdrop-filter:blur(10px);
    border-bottom:1px solid var(--line);
  }
  nav{display:flex; align-items:center; justify-content:space-between; padding:18px 28px; max-width:1180px; margin:0 auto;}
  .brand{display:flex; align-items:center; gap:10px; font-family:'Markazi Text',serif; font-size:28px; font-weight:700; color:var(--emerald-deep);}
  .brand .dot{width:9px; height:9px; border-radius:50%; background:var(--gold);}
  .navlinks{display:flex; gap:34px; font-size:15px; color:var(--ink-soft);}
  .navlinks a:hover{color:var(--emerald);}
  .navcta{display:flex; gap:12px; align-items:center;}
  .btn{
    display:inline-flex; align-items:center; gap:8px; justify-content:center;
    padding:11px 24px; border-radius:8px; font-size:15px; font-weight:600;
    border:1px solid transparent; cursor:pointer; transition:.2s;
  }
  .btn-primary{background:var(--emerald-deep); color:var(--white);}
  .btn-primary:hover{background:var(--emerald); transform:translateY(-1px);}
  .btn-ghost{color:var(--ink); border-color:var(--line);}
  .btn-ghost:hover{border-color:var(--emerald);}

  /* ===== HERO ===== */
  .hero{position:relative; padding:96px 0 70px; overflow:hidden;}
  .hero .wrap{position:relative; z-index:2;}
  .eyebrow{
    display:inline-flex; align-items:center; gap:8px;
    font-size:13px; color:var(--gold); letter-spacing:.03em;
    border:1px solid var(--gold-soft); padding:6px 14px; border-radius:100px;
    background:var(--white);
    animation:riseIn .7s cubic-bezier(.22,1,.36,1) both;
  }
  .eyebrow .dot-live{display:inline-block; width:6px; height:6px; border-radius:50%; background:var(--gold); animation:pulseDot 1.8s ease-in-out infinite;}
  h1.display{
    font-size:clamp(40px,5.6vw,68px); font-weight:700; color:var(--emerald-deep);
    margin:26px 0 22px; max-width:820px; line-height:1.25;
    animation:riseIn .8s .1s cubic-bezier(.22,1,.36,1) both;
  }
  h1 .accent{color:var(--gold); position:relative; display:inline-block;}
  h1 .accent::after{
    content:""; position:absolute; right:0; bottom:6px; width:100%; height:10px; z-index:-1;
    background:var(--gold-soft); opacity:.5; transform:scaleX(0); transform-origin:right;
    animation:underlineGrow 1s .9s cubic-bezier(.22,1,.36,1) both;
  }
  @keyframes underlineGrow{to{transform:scaleX(1);}}
  .hero p.lead{font-size:19px; color:var(--ink-soft); max-width:600px; margin-bottom:38px; animation:riseIn .8s .22s cubic-bezier(.22,1,.36,1) both;}
  .hero-cta{display:flex; gap:14px; margin-bottom:56px; flex-wrap:wrap; animation:riseIn .8s .34s cubic-bezier(.22,1,.36,1) both;}
  .btn-lg{padding:15px 30px; font-size:16px;}
  .btn-primary.btn-lg{position:relative; overflow:hidden;}
  .btn-primary.btn-lg::before{
    content:""; position:absolute; inset:0; background:linear-gradient(115deg, transparent 30%, rgba(255,255,255,.25) 45%, transparent 60%);
    background-size:200% 100%; animation:shimmer 3.2s ease-in-out infinite; animation-delay:1.4s;
  }

  .trustbar{display:flex; gap:40px; flex-wrap:wrap; padding-top:28px; border-top:1px solid var(--line); animation:riseIn .8s .46s cubic-bezier(.22,1,.36,1) both;}
  .trustitem{font-size:14px; color:var(--ink-soft); display:flex; align-items:center; gap:8px;}
  .trustitem b{color:var(--emerald-deep); font-family:'Markazi Text',serif; font-size:22px; font-weight:700;}

  /* hero visual: chain of academy "nodes" like a sanad chain */
  .hero-visual{position:relative; margin-top:64px; padding:40px 0;}
  .chain{display:flex; align-items:center; justify-content:center; gap:0; flex-wrap:wrap;}
  .node{
    display:flex; flex-direction:column; align-items:center; gap:10px;
    background:var(--white); border:1px solid var(--line); border-radius:14px;
    padding:20px 26px; min-width:150px; box-shadow:0 10px 30px -18px rgba(22,48,42,.25);
    position:relative;
    opacity:0; animation:nodeIn .7s cubic-bezier(.22,1.2,.36,1) forwards, floatY 5s ease-in-out infinite;
    animation-delay:.55s, 2.5s;
    transition:box-shadow .3s ease, transform .3s ease;
  }
  .node:hover{box-shadow:0 18px 40px -18px rgba(22,48,42,.4); transform:translateY(-4px); z-index:3;}
  @keyframes nodeIn{from{opacity:0; transform:translateY(18px) scale(.94);} to{opacity:1; transform:translateY(0) scale(1);}}
  .chain .node:nth-child(3){animation-delay:.75s, 2.7s;}
  .chain .node:nth-child(5){animation-delay:.95s, 2.9s;}
  .chain .node:nth-child(7){animation-delay:1.15s, 3.1s;}
  .node .name{font-weight:600; font-size:14.5px; color:var(--emerald-deep);}
  .node .meta{font-size:12px; color:var(--ink-soft);}
  .node .avatar{width:34px; height:34px; border-radius:50%; background:var(--paper-deep); display:flex; align-items:center; justify-content:center; font-family:'Markazi Text',serif; font-weight:700; color:var(--gold);}
  .link{width:56px; height:1px; align-self:center; position:relative; overflow:hidden;}
  .link::before{
    content:""; position:absolute; inset:0;
    background:repeating-linear-gradient(90deg, var(--gold-soft) 0 6px, transparent 6px 11px);
    transform:scaleX(0); transform-origin:right; animation:linkDraw .5s ease forwards; animation-delay:.9s;
  }
  .chain .link:nth-of-type(4)::before{animation-delay:1.1s;}
  .chain .link:nth-of-type(6)::before{animation-delay:1.3s;}
  @keyframes linkDraw{to{transform:scaleX(1);}}
  .node.you{border-color:var(--emerald); box-shadow:0 14px 34px -16px rgba(27,74,60,.35); animation:nodeIn .7s cubic-bezier(.22,1.2,.36,1) forwards, youPulse 2.6s ease-in-out infinite;}
  .node.you{animation-delay:.85s, 1.8s;}
  @keyframes youPulse{0%,100%{box-shadow:0 14px 34px -16px rgba(27,74,60,.35);} 50%{box-shadow:0 18px 42px -14px rgba(169,130,61,.45);}}
  .node.you .avatar{background:var(--emerald-deep); color:var(--gold-soft);}
  .node.you .avatar{animation:rotSlow 6s linear infinite;}

  /* ===== SECTION shared ===== */
  section{position:relative; padding:88px 0; z-index:1;}
  .section-head{max-width:620px; margin-bottom:52px;}
  .section-eyebrow{color:var(--gold); font-size:13px; font-weight:600; letter-spacing:.04em; margin-bottom:12px; display:block;}
  h2.display{font-size:clamp(28px,3.4vw,40px); font-weight:700; color:var(--emerald-deep);}
  .section-sub{color:var(--ink-soft); margin-top:14px; font-size:16px;}

  /* ===== HOW IT WORKS ===== */
  .steps{display:grid; grid-template-columns:repeat(3,1fr); gap:0; position:relative;}
  .steps::before{
    content:""; position:absolute; top:26px; right:16.5%; left:16.5%; height:1px;
    background:repeating-linear-gradient(90deg, var(--gold-soft) 0 8px, transparent 8px 14px);
  }
  .step{padding:0 26px; position:relative;}
  .step .num{
    width:52px; height:52px; border-radius:50%; background:var(--white); border:1.5px solid var(--gold-soft);
    display:flex; align-items:center; justify-content:center; font-family:'Markazi Text',serif; font-weight:700;
    font-size:22px; color:var(--emerald-deep); margin-bottom:22px; position:relative; z-index:2;
    transition:transform .35s cubic-bezier(.22,1.4,.36,1), background .35s ease, color .35s ease;
  }
  .step:hover .num{transform:scale(1.1); background:var(--emerald-deep); color:var(--gold-soft); border-color:var(--emerald-deep);}
  .step h3{font-size:18px; margin-bottom:10px; color:var(--emerald-deep);}
  .step p{font-size:14.5px; color:var(--ink-soft);}

  /* ===== FEATURES ===== */
  .feat-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line); border:1px solid var(--line); border-radius:16px; overflow:hidden;}
  .feat{background:var(--white); padding:34px 28px; transition:background .3s ease, transform .3s ease; position:relative; z-index:1;}
  .feat:hover{background:var(--paper); transform:translateY(-3px); z-index:2; box-shadow:0 16px 30px -20px rgba(22,48,42,.3);}
  .feat .ic{width:42px; height:42px; border-radius:10px; background:var(--paper-deep); display:flex; align-items:center; justify-content:center; margin-bottom:18px; font-size:19px; transition:transform .35s cubic-bezier(.22,1.4,.36,1);}
  .feat:hover .ic{transform:scale(1.12) rotate(-6deg);}
  .feat h3{font-size:16.5px; margin-bottom:8px; color:var(--emerald-deep);}
  .feat p{font-size:14px; color:var(--ink-soft);}

  /* ===== PRICING ===== */
  .price-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:20px;}
  .price-card{
    background:var(--white); border:1px solid var(--line); border-radius:16px; padding:32px 28px;
    display:flex; flex-direction:column;
    transition:transform .35s cubic-bezier(.22,1.2,.36,1), box-shadow .35s ease, border-color .35s ease;
  }
  .price-card:hover{transform:translateY(-6px); border-color:var(--gold-soft); box-shadow:0 22px 40px -24px rgba(22,48,42,.35);}
  .price-card.featured{border-color:var(--emerald); box-shadow:0 20px 44px -22px rgba(27,74,60,.4); position:relative; transform:scale(1.02);}
  .price-card.featured:hover{transform:scale(1.02) translateY(-6px); box-shadow:0 28px 52px -20px rgba(27,74,60,.5);}
  .price-card.featured::before{
    content:"الأكثر انتشارًا"; position:absolute; top:-13px; right:28px;
    background:var(--emerald-deep); color:var(--gold-soft); font-size:12px; padding:5px 14px; border-radius:100px;
    animation:floatY 3s ease-in-out infinite;
  }
  .price-name{font-size:14px; color:var(--ink-soft); margin-bottom:6px;}
  .price-amt{font-family:'Markazi Text',serif; font-size:44px; font-weight:700; color:var(--emerald-deep); margin-bottom:2px;}
  .price-amt span{font-family:'IBM Plex Sans Arabic'; font-size:14px; font-weight:400; color:var(--ink-soft);}
  .price-desc{font-size:13.5px; color:var(--ink-soft); margin-bottom:24px; padding-bottom:24px; border-bottom:1px dashed var(--line);}
  .price-feats{list-style:none; display:flex; flex-direction:column; gap:12px; margin-bottom:28px; flex:1;}
  .price-feats li{font-size:14px; color:var(--ink); display:flex; gap:9px; align-items:flex-start;}
  .price-feats li::before{content:"✓"; color:var(--gold); font-weight:700; flex-shrink:0;}

  /* ===== FINAL CTA ===== */
  .cta-band{
    background:var(--emerald-deep); border-radius:24px; padding:70px 50px; text-align:center;
    position:relative; overflow:hidden;
  }
  .cta-band::before{
    content:""; position:absolute; inset:0;
    background:radial-gradient(circle at 30% 20%, rgba(169,130,61,.25), transparent 60%);
    animation:glowMove 8s ease-in-out infinite;
  }
  @keyframes glowMove{0%,100%{background-position:0% 0%;} 50%{background-position:20% 15%;}}
  .cta-band h2{color:var(--white); position:relative; z-index:1;}
  .cta-band p{color:#CFE0D8; margin:16px 0 34px; position:relative; z-index:1; font-size:16px;}
  .cta-band .btn-primary{background:var(--gold); color:var(--emerald-deep); position:relative; z-index:1;}
  .cta-band .btn-primary:hover{background:#c19a52;}
  .cta-band .btn-ghost{color:var(--white); border-color:rgba(255,255,255,.25); position:relative; z-index:1;}

  /* ===== FOOTER ===== */
  footer{padding:50px 0 34px; border-top:1px solid var(--line); font-size:13.5px; color:var(--ink-soft);}
  .foot-row{display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:16px;}

  @media (max-width:860px){
    .navlinks{display:none;}
    .steps{grid-template-columns:1fr; gap:36px;}
    .steps::before{display:none;}
    .feat-grid{grid-template-columns:1fr;}
    .price-grid{grid-template-columns:1fr;}
    .chain{gap:14px;}
    .link{display:none;}
  }