:root{
    --bg:#FFF8F4;
    --bg-alt:#FDEDE4;
    --soft:#FBDFD0;
    --ink:#3B1E33;
    --ink-soft:#7C5A6E;
    --rose:#E0637E;
    --rose-deep:#C43F63;
    --wine:#7A1F52;
    --gold:#E8A23B;
    --line:#F5D9C4;
    --shadow: 0 20px 45px -20px rgba(122,31,82,0.32);
    --radius-lg: 32px;
    --radius-md: 20px;
    --radius-sm: 12px;
  }

  *{ box-sizing:border-box; }
  html{ scroll-behavior:smooth; }

  body{
    margin:0;
    background:var(--bg);
    color:var(--ink);
    font-family:'Tajawal', sans-serif;
    line-height:1.85;
    overflow-x:hidden;
  }

  h1,h2,h3,.display{
    font-family:'Markazi Text', serif;
    color:var(--wine);
    font-weight:700;
    margin:0;
  }

  p{ margin:0; }
  ul{ margin:0; padding:0; list-style:none; }
  img{ max-width:100%; display:block; }
  a{ text-decoration:none; color:inherit; }

  .wrap{
    max-width:1120px;
    margin:0 auto;
    padding:0 28px;
  }

  section{ position:relative; padding:100px 0; }




  .transform-title{
    text-align:center;
    max-width:720px;
    margin:0 auto 32px;
    font-family:'Markazi Text', serif;
    font-weight:700;
    font-size:clamp(30px, 4.5vw, 48px);
    line-height:1.4;
    color:#7A1F52;
    background:linear-gradient(90deg, #7A1F52, #C43F63 45%, #E8A23B);
    -webkit-background-clip:text;
    background-clip:text;
    -webkit-text-fill-color:transparent;
    opacity:0;
    transform:translateY(14px);
    animation: titleIn .9s ease forwards;
  }
  .transform-title::after{
    content:"";
    display:block;
    width:70px;
    height:3px;
    margin:18px auto 0;
    background:#E8A23B;
    border-radius:3px;
  }
  @keyframes titleIn{
    to{ opacity:1; transform:translateY(0); }
  }



  /* -------------------- kicker + icon badge -------------------- */
  .kicker-row{
    display:inline-flex;
    align-items:center;
    gap:12px;
    margin-bottom:18px;
  }
  .kicker-badge{
    width:38px; height:38px;
    border-radius:50%;
    background:#fff;
    display:flex; align-items:center; justify-content:center;
    box-shadow:0 8px 18px -10px rgba(122,31,82,.4);
    flex-shrink:0;
  }
  .kicker-badge svg{ width:18px; height:18px; stroke:var(--rose-deep); }
  .kicker{
    font-size:16px;
    color:var(--rose-deep);
    font-weight:700;
  }

  .btn{
    display:inline-flex;
    align-items:center;
    gap:10px;
    background:var(--wine);
    color:#FBF5F1;
    padding:17px 38px;
    border-radius:999px;
    font-weight:700;
    font-size:17px;
    box-shadow: 0 16px 30px -12px rgba(122,31,82,0.55);
    transition: transform .35s ease, box-shadow .35s ease, background .35s ease;
    border:none;
    cursor:pointer;
  }
  .btn:hover{
    transform:translateY(-3px);
    box-shadow: 0 22px 36px -12px rgba(122,31,82,0.6);
    background:var(--rose-deep);
  }
  .btn svg{ width:16px; height:16px; flex-shrink:0; }

  /* -------------------- decorative blobs -------------------- */
  .blob{
    position:absolute;
    border-radius:50%;
    filter:blur(60px);
    opacity:.55;
    pointer-events:none;
    z-index:0;
  }

  /* -------------------- reveal on scroll -------------------- */
  .reveal{
    opacity:0;
    transform:translateY(28px);
    transition: opacity .9s cubic-bezier(.22,.61,.36,1), transform .9s cubic-bezier(.22,.61,.36,1);
  }
  .reveal.in{ opacity:1; transform:translateY(0); }

  @media (prefers-reduced-motion: reduce){
    .reveal{ opacity:1; transform:none; transition:none; }
    *{ animation:none !important; }
  }

  /* -------------------- section wave divider -------------------- */
  .wave{
    display:block;
    width:100%;
    line-height:0;
  }
  .wave svg{ width:100%; height:64px; display:block; }

  /* ============================================================
     HERO — الفيديو أولاً
  ============================================================= */
  .hero{
    padding:60px 0 96px;
    position:relative;
    overflow:hidden;
    background:
      radial-gradient(circle at 85% 8%, rgba(232,162,59,0.16), transparent 45%),
      radial-gradient(circle at 10% 90%, rgba(224,99,126,0.12), transparent 40%),
      linear-gradient(180deg, var(--bg-alt) 0%, var(--bg) 82%);
    text-align:center;
  }
  .hero .blob{ width:420px; height:420px; background:var(--rose); top:-180px; left:-140px; opacity:.16; }

  .hero-kicker{
    opacity:0; transform:translateY(12px);
    animation: heroIn .8s ease forwards;
    animation-delay:.1s;
    justify-content:center;
    display:inline-flex;
  }

  .video-stage{
    position:relative;
    max-width:640px;
    margin:0 auto 46px;
    opacity:0;
    transform:scale(.94);
    animation: videoIn 1s cubic-bezier(.22,.61,.36,1) forwards;
    animation-delay:.22s;
  }
  .video-card{
    position:relative;
    border-radius:28px;
    overflow:hidden;
    box-shadow:var(--shadow);
    background:var(--wine);
    border:6px solid #fff;
  }
  .video-ratio{
    position:relative;
    width:100%;
    padding-top:56.25%;
  }
  .video-ratio iframe{
    position:absolute; inset:0;
    width:100%; height:100%;
    border:0;
  }
  .video-corner{
    position:absolute;
    width:26px; height:26px;
    border:3px solid var(--gold);
    z-index:2;
  }
  .video-corner.tl{ top:-4px; right:-4px; border-left:none; border-bottom:none; border-radius:8px 0 0 0; }
  .video-corner.br{ bottom:-4px; left:-4px; border-right:none; border-top:none; border-radius:0 0 0 8px; }

  .video-badge{
    position:absolute;
    bottom:-22px;
    left:-22px;
    background:#fff;
    border-radius:999px;
    padding:12px 20px;
    display:flex;
    align-items:center;
    gap:9px;
    box-shadow:0 14px 26px -12px rgba(122,31,82,.4);
    font-size:14px;
    font-weight:700;
    color:var(--wine);
    z-index:3;
  }
  .video-badge svg{ width:16px; height:16px; stroke:var(--rose-deep); }

  .hero-text{
    max-width:680px;
    margin:0 auto;
    opacity:0; transform:translateY(18px);
    animation: heroIn .9s ease forwards;
    animation-delay:.42s;
  }
  .hero-text h1{
    font-size:clamp(32px, 4.2vw, 50px);
    line-height:1.38;
    margin-bottom:20px;
  }
  .hero-lines{
    display:flex;
    flex-direction:column;
    gap:10px;
    align-items:center;
    margin-bottom:34px;
  }
  .hero-lines li{
    display:flex;
    align-items:center;
    gap:10px;
    font-size:17px;
    color:var(--ink-soft);
  }
  .hero-lines li svg{ width:16px; height:16px; stroke:var(--gold); flex-shrink:0; }

  .hero-cta{
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:16px;
    opacity:0; transform:translateY(18px);
    animation: heroIn .9s ease forwards;
    animation-delay:.62s;
  }
  .hero-stat{
    display:flex;
    align-items:center;
    gap:8px;
    font-size:15px;
    color:var(--ink-soft);
  }
  .hero-stat b{
    color:var(--wine);
    font-family:'Markazi Text',serif;
    font-size:22px;
  }

  @keyframes heroIn{ to{ opacity:1; transform:translateY(0); } }
  @keyframes videoIn{ to{ opacity:1; transform:scale(1); } }

  @media (max-width:600px){
    .video-badge{ font-size:12px; padding:9px 14px; bottom:-16px; left:-10px; }
  }

  /* ============================================================
     المشهد المتكرر — دائرة الأنماط
  ============================================================= */
  .pattern{ background:var(--bg); }
  .section-head{
    text-align:center;
    max-width:680px;
    margin:0 auto 60px;
  }
  .section-head .kicker-row{ justify-content:center; display:inline-flex; }
  .section-head h2{
    font-size:clamp(28px,3.2vw,38px);
    line-height:1.4;
  }
  .section-head p{
    color:var(--ink-soft);
    font-size:17px;
    margin-top:16px;
  }

  .cycle-wrap{ position:relative; }
  .cycle-path{
    position:absolute;
    inset:0;
    z-index:0;
    opacity:.55;
    pointer-events:none;
  }
  .pattern-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:26px;
    position:relative;
    z-index:1;
  }
  .pattern-card{
    background:var(--bg-alt);
    border-radius:var(--radius-md);
    padding:36px 30px;
    border:1px solid var(--line);
    transition: transform .4s ease, box-shadow .4s ease;
    position:relative;
  }
  .pattern-card:hover{ transform:translateY(-6px); box-shadow: var(--shadow); }
  .pattern-card .icon{
    width:56px; height:56px;
    border-radius:50%;
    background:#fff;
    display:flex;align-items:center;justify-content:center;
    margin-bottom:22px;
    box-shadow:0 8px 18px -8px rgba(122,31,82,.25);
  }
  .pattern-card .icon svg{ width:26px; height:26px; stroke:var(--rose-deep); }
  .pattern-card h3{ font-size:23px; margin-bottom:12px; }
  .pattern-card p{ color:var(--ink-soft); font-size:15.5px; }
  .pattern-card .tag{
    display:inline-block;
    margin-top:16px;
    font-size:12.5px;
    font-weight:700;
    color:var(--gold);
    background:rgba(232,162,59,.12);
    padding:5px 12px;
    border-radius:999px;
  }

  @media (max-width:900px){
    .pattern-grid{ grid-template-columns:1fr; }
    .cycle-path{ display:none; }
  }

  /* ============================================================
     الجهاز العصبي
  ============================================================= */
  .body-truth{
    background:linear-gradient(180deg, var(--bg) 0%, var(--bg-alt) 100%);
    overflow:hidden;
  }
  .pulse-line{
    position:absolute;
    top:38px;
    right:0;
    width:100%;
    opacity:.4;
    z-index:0;
  }
  .truth-grid{
    display:grid;
    grid-template-columns:1.1fr .9fr;
    gap:60px;
    align-items:center;
    position:relative;
    z-index:1;
  }
  .truth-text h2{
    font-size:clamp(27px,3vw,36px);
    line-height:1.45;
    margin-bottom:22px;
  }
  .truth-list{
    display:flex;
    flex-direction:column;
    gap:14px;
    margin-top:22px;
  }
  .truth-list li{
    display:flex;
    gap:12px;
    align-items:flex-start;
    color:var(--ink-soft);
    font-size:16px;
  }
  .truth-list li svg{ width:19px; height:19px; stroke:var(--rose-deep); flex-shrink:0; margin-top:3px; }
  .truth-list li b{ color:var(--ink); font-weight:700; }

  .truth-highlight{
    background:#fff;
    border-inline-start:4px solid var(--gold);
    padding:18px 22px;
    border-radius:0 14px 14px 0;
    font-weight:500;
    color:var(--wine);
    margin:22px 0;
    font-size:16.5px;
  }

  .pill-field{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:16px;
  }
  .pill{
    background:#fff;
    border:1px solid var(--line);
    color:var(--wine);
    font-weight:700;
    font-size:15.5px;
    padding:20px 14px;
    border-radius:20px;
    box-shadow:0 10px 24px -14px rgba(122,31,82,.3);
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:10px;
    text-align:center;
    animation: breathe 5.5s ease-in-out infinite;
  }
  .pill svg{ width:24px; height:24px; stroke:var(--rose-deep); }
  .pill:nth-child(1){ animation-delay:0s; }
  .pill:nth-child(2){ animation-delay:.7s; }
  .pill:nth-child(3){ animation-delay:1.4s; }
  .pill:nth-child(4){ animation-delay:2.1s; }

  @keyframes breathe{
    0%, 100%{ transform:scale(1); }
    50%{ transform:scale(1.045); }
  }

  @media (max-width:900px){
    .truth-grid{ grid-template-columns:1fr; }
    .pulse-line{ display:none; }
  }

  /* ============================================================
     البرنامج - استرداد مقام
  ============================================================= */
  .program{ background:var(--wine); color:#F3E6DE; overflow:hidden; }
  .program .section-head h2{ color:#fff; }
  .program .section-head p{ color:#F6D9C0; }
  .program .kicker{ color:var(--gold); }
  .program .kicker-badge{ background:rgba(255,255,255,.12); }
  .program .kicker-badge svg{ stroke:var(--gold); }

  .steps{
    display:flex;
    flex-direction:column;
    gap:0;
    max-width:820px;
    margin:0 auto;
    position:relative;
  }
  .steps::before{
    content:"";
    position:absolute;
    top:14px; bottom:14px;
    right:44px;
    width:2px;
    background:linear-gradient(180deg, var(--gold), rgba(232,162,59,.15));
  }
  .step{
    display:grid;
    grid-template-columns:90px 1fr;
    gap:26px;
    padding:30px 0;
    position:relative;
  }
  .step .num-wrap{
    position:relative;
    z-index:1;
    width:88px; height:88px;
    border-radius:50%;
    background:var(--wine);
    border:2px solid var(--gold);
    display:flex; flex-direction:column; align-items:center; justify-content:center;
    gap:2px;
  }
  .step .num-wrap svg{ width:22px; height:22px; stroke:var(--gold); }
  .step .num-wrap span{
    font-family:'Markazi Text', serif;
    font-size:20px;
    color:var(--gold);
  }
  .step h3{ color:#fff; font-size:24px; margin-bottom:10px; }
  .step p{ color:#F1C9D2; font-size:16px; max-width:520px; }

  @media (max-width:600px){
    .step{ grid-template-columns:64px 1fr; gap:16px; }
    .step .num-wrap{ width:64px; height:64px; }
    .step .num-wrap svg{ width:17px; height:17px; }
    .step .num-wrap span{ font-size:14px; }
    .steps::before{ right:32px; }
  }

  .program-cta{ text-align:center; margin-top:56px; }
  .program .btn{ background:var(--gold); color:var(--wine); box-shadow:0 16px 30px -12px rgba(0,0,0,.35); }
  .program .btn:hover{ background:#f0b559; }

  /* ============================================================
     نبذة عنها
  ============================================================= */
  .about{ background:var(--bg); }
  .about-grid{
    display:grid;
    grid-template-columns:.8fr 1.2fr;
    gap:64px;
    align-items:center;
  }
  .photo-stack{ position:relative; }
  .photo-frame{
    position:relative;
    border-radius:var(--radius-lg);
    overflow:hidden;
    aspect-ratio:4/5;
    background: linear-gradient(160deg, var(--soft), var(--bg-alt));
    box-shadow:var(--shadow);
    z-index:1;
  }
  .photo-frame .img{
    
    background-image:url('assets/profile.jpg');
    background-size:cover;
    background-position:center;
  }
  .photo-frame::after{
    content:"";
    position:absolute; inset:0;
    border:1px solid rgba(255,255,255,.5);
    border-radius:var(--radius-lg);
  }
  .photo-stack::before{
    content:"";
    position:absolute;
    inset:22px -22px -22px 22px;
    border:2px solid var(--gold);
    border-radius:var(--radius-lg);
    z-index:0;
  }
  .photo-quote{
    position:absolute;
    bottom:-24px;
    right:24px;
    background:#fff;
    border-radius:16px;
    padding:14px 18px;
    display:flex;
    align-items:center;
    gap:10px;
    box-shadow:0 14px 26px -12px rgba(122,31,82,.4);
    z-index:2;
    font-size:14px;
    font-weight:700;
    color:var(--wine);
  }
  .photo-quote svg{ width:18px; height:18px; stroke:var(--rose-deep); }

  .about-text h2{ font-size:clamp(27px,3vw,36px); margin-bottom:20px; line-height:1.4; }
  .about-text p{ color:var(--ink-soft); font-size:16.5px; margin-bottom:16px; }

  .about-points{
    display:flex;
    flex-direction:column;
    gap:14px;
    margin:22px 0 30px;
  }
  .about-points li{
    display:flex;
    align-items:flex-start;
    gap:12px;
    font-size:16px;
    color:var(--ink);
  }
  .about-points li .ic{
    width:34px; height:34px;
    border-radius:10px;
    background:var(--bg-alt);
    display:flex; align-items:center; justify-content:center;
    flex-shrink:0;
  }
  .about-points li .ic svg{ width:17px; height:17px; stroke:var(--rose-deep); }

  .about-facts{ display:flex; gap:34px; flex-wrap:wrap; }
  .about-facts div{ text-align:center; }
  .about-facts .ic-circle{
    width:46px; height:46px;
    border-radius:50%;
    background:var(--bg-alt);
    display:flex; align-items:center; justify-content:center;
    margin:0 auto 8px;
  }
  .about-facts .ic-circle svg{ width:20px; height:20px; stroke:var(--rose-deep); }
  .about-facts b{ display:block; font-family:'Markazi Text', serif; font-size:30px; color:var(--rose-deep); }
  .about-facts span{ font-size:13.5px; color:var(--ink-soft); }
 @media (max-width:900px){
    .about-grid{ grid-template-columns:1fr; }
    .photo-stack{ max-width:340px; margin:0 auto 40px; }
    .photo-quote{ right:12px; }
  }






 
  /* ============================================================
     آراء العميلات
  ============================================================= */
  .testimonials{ background:var(--bg-alt); }
  .t-slider{ position:relative; }

  .t-track{
    display:flex;
    gap:26px;
    overflow-x:auto;
    scroll-snap-type:x mandatory;
    padding:8px 4px 22px;
    scrollbar-width:none;
    -ms-overflow-style:none;
  }
  .t-track::-webkit-scrollbar{ display:none; }

  .t-card{
    background:#fff;
    padding:14px 14px 20px;
    border-radius:18px;
    box-shadow:0 18px 34px -20px rgba(122,31,82,.35);
    transition: transform .4s ease, box-shadow .4s ease;
    position:relative;
    flex:0 0 auto;
    width:270px;
    scroll-snap-align:start;
  }
  .t-card:nth-child(odd){ transform:rotate(-1.4deg); }
  .t-card:nth-child(even){ transform:rotate(1.4deg); }
  .t-card:hover{ transform:rotate(0deg) translateY(-6px); box-shadow:0 24px 40px -18px rgba(122,31,82,.42); }

  .t-controls{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:22px;
    margin-top:8px;
  }
  .t-arrow{
    width:46px; height:46px;
    border-radius:50%;
    background:#fff;
    border:1px solid var(--line);
    display:flex; align-items:center; justify-content:center;
    cursor:pointer;
    box-shadow:0 10px 22px -14px rgba(122,31,82,.4);
    transition: background .3s ease, transform .3s ease;
    flex-shrink:0;
  }
  .t-arrow svg{ width:18px; height:18px; stroke:var(--rose-deep); }
  .t-arrow:hover{ background:var(--wine); transform:translateY(-2px); }
  .t-arrow:hover svg{ stroke:#fff; }

  .t-dots{ display:flex; gap:8px; }
  .t-dot{
    width:9px; height:9px;
    border-radius:50%;
    background:var(--line);
    border:none;
    padding:0;
    cursor:pointer;
    transition: background .3s ease, transform .3s ease;
  }
  .t-dot.active{ background:var(--rose-deep); transform:scale(1.3); }

  .t-photo{
    position:relative;
    aspect-ratio:1/1.05;
    border-radius:12px;
    background:linear-gradient(160deg, var(--soft), #F6C6B6);
    background-size:cover;
    background-position:center;
    margin-bottom:14px;
    overflow:hidden;
  }
  .t-card:nth-child(1) .t-photo{ background-image:url('assets/testimonial-1.jpg'); }
  .t-card:nth-child(2) .t-photo{ background-image:url('assets/testimonial-2.jpg'); }
  .t-card:nth-child(3) .t-photo{ background-image:url('assets/testimonial-3.jpg'); }
  .t-card:nth-child(4) .t-photo{ background-image:url('assets/testimonial-4.jpg'); }
  .t-card:nth-child(5) .t-photo{ background-image:url('assets/testimonial-5.jpg'); }
  .t-card:nth-child(6) .t-photo{ background-image:url('assets/testimonial-6.jpg'); }

  .quote-badge{
    position:absolute;
    top:8px; left:8px;
    width:30px; height:30px;
    border-radius:50%;
    background:rgba(255,255,255,.9);
    display:flex; align-items:center; justify-content:center;
    box-shadow:0 6px 14px -8px rgba(0,0,0,.4);
  }
  .quote-badge svg{ width:14px; height:14px; stroke:var(--rose-deep); }

  .stars{ display:flex; gap:3px; padding:0 6px; margin-bottom:8px; }
  .stars svg{ width:13px; height:13px; fill:var(--gold); stroke:none; }

  .t-card p{ font-size:14.5px; color:var(--ink-soft); padding:0 6px; }

  @media (max-width:560px){
    .t-card{ width:78vw; }
  }

  /* ============================================================
     تواصل
  ============================================================= */
  .contact{
    background:linear-gradient(180deg, var(--bg-alt), var(--bg) 60%);
    position:relative;
    overflow:hidden;
  }
  .contact .blob{ width:360px; height:360px; background:var(--gold); opacity:.14; bottom:-140px; right:-100px; }

  .contact-box{
    position:relative;
    z-index:1;
    background:#fff;
    border-radius:var(--radius-lg);
    padding:60px 50px;
    text-align:center;
    max-width:760px;
    margin:0 auto;
    box-shadow:var(--shadow);
    border:1px solid var(--line);
  }
  .contact-box .kicker-row{ justify-content:center; }
  .contact-box h2{ font-size:clamp(26px,3vw,34px); margin-bottom:16px; }
  .contact-box p{ color:var(--ink-soft); font-size:16px; max-width:520px; margin:0 auto 30px; }

  .contact-links{
    display:flex;
    justify-content:center;
    gap:20px;
    flex-wrap:wrap;
    margin-bottom:34px;
  }
  .contact-link{
    display:flex;
    align-items:center;
    gap:10px;
    font-weight:700;
    color:var(--wine);
    font-size:15px;
    background:var(--bg-alt);
    padding:14px 22px;
    border-radius:14px;
    transition: transform .3s ease, background .3s ease;
  }
  .contact-link:hover{ transform:translateY(-3px); background:var(--soft); }
  .contact-link .ic{
    width:34px; height:34px;
    border-radius:50%;
    background:#fff;
    display:flex; align-items:center; justify-content:center;
    flex-shrink:0;
  }
  .contact-link svg{ width:16px; height:16px; stroke:var(--rose-deep); }

  footer{
    text-align:center;
    padding:34px 0;
    color:var(--ink-soft);
    font-size:13.5px;
    background:var(--bg);
    display:flex;
    align-items:center;
    justify-content:center;
    gap:8px;
  }
  footer svg{ width:14px; height:14px; stroke:var(--rose-deep); }