:root{
      --purple:#5f237f;
      --purple-dark:#321044;
      --gold:#c89a24;
      --cream:#fbf8f3;
      --ink:#2f2334;
      --muted:#6e6472;
      --line:rgba(60,34,71,.11);
      --pink:#d65b68;
      --green:#4f9669;
      --white:#fff;
      --shadow:0 18px 45px rgba(62,34,74,.09);
    }

    *{box-sizing:border-box}
    html{scroll-behavior:smooth}
    body{
      margin:0;
      font-family:"Cairo",sans-serif;
      color:var(--ink);
      background:linear-gradient(180deg,#fff 0%,#fdfaf6 100%);
      line-height:1.8;
    }

    a{text-decoration:none;color:inherit}
    img{max-width:100%;display:block}

    .page{
      width:min(1220px,calc(100% - 28px));
      margin:auto;
    }

    .brandbar{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:20px;
      padding:18px 0 16px;
    }

    .brand{
      display:flex;
      align-items:center;
      gap:14px;
    }

    .lotus{
      width:48px;
      height:48px;
      position:relative;
      flex:0 0 48px;
    }

    .lotus span{
      position:absolute;
      width:22px;
      height:35px;
      border:1.7px solid var(--purple);
      border-radius:55% 55% 60% 60%;
      left:13px;
      top:7px;
      transform-origin:50% 85%;
    }
    .lotus span:nth-child(1){transform:rotate(-42deg)}
    .lotus span:nth-child(2){transform:rotate(-21deg);border-color:var(--gold)}
    .lotus span:nth-child(3){transform:rotate(0deg)}
    .lotus span:nth-child(4){transform:rotate(21deg);border-color:var(--gold)}
    .lotus span:nth-child(5){transform:rotate(42deg)}

    .brand-en{
      font-family:"Inter",sans-serif;
      font-size:16px;
      font-weight:700;
      letter-spacing:.08em;
      color:var(--purple-dark);
      line-height:1.2;
    }

    .brand-ar{
      color:var(--gold);
      font-size:15px;
      font-weight:700;
      margin-top:2px;
    }

    .socials{
      display:flex;
      align-items:center;
      gap:9px;
      direction:ltr;
    }

    .socials a{
      display:grid;
      place-items:center;
      width:39px;
      height:39px;
      border:1px solid var(--line);
      border-radius:50%;
      background:#fff;
      font-family:"Inter",sans-serif;
      font-weight:700;
      font-size:12px;
      color:var(--purple);
      transition:.2s ease;
    }

    .socials a:hover{transform:translateY(-2px);border-color:var(--purple)}

    .hero{
      min-height:540px;
      border-radius:0 0 24px 24px;
      overflow:hidden;
      position:relative;
      display:grid;
      grid-template-columns:1.05fr .95fr;
      background:
        radial-gradient(circle at 26% 20%,rgba(127,79,149,.42),transparent 36%),
        linear-gradient(135deg,var(--purple-dark),#5f287c 63%,#81537a);
      box-shadow:var(--shadow);
    }

    .hero-copy{
      display:flex;
      flex-direction:column;
      justify-content:center;
      padding:72px 64px;
      color:#fff;
      position:relative;
      z-index:2;
    }

    .hero-copy h1{
      margin:0 0 10px;
      font-size:clamp(38px,4.4vw,66px);
      line-height:1.28;
      font-weight:800;
    }

    .hero-copy h1 span{
      display:block;
      color:#e7bd58;
      font-size:.78em;
      margin-top:6px;
    }

    .hero-copy p{
      margin:9px 0 0;
      max-width:610px;
      font-size:clamp(18px,1.75vw,25px);
      line-height:1.85;
      color:rgba(255,255,255,.92);
    }

    .signature{
      margin-top:20px;
      font-family:"Inter",sans-serif;
      font-size:19px;
      font-style:italic;
      color:#f6e9ce;
      letter-spacing:.02em;
      direction:ltr;
      text-align:right;
    }

    .hero-photo{
      min-height:540px;
      position:relative;
      overflow:hidden;
    }

    .hero-photo img{
      width:100%;
      height:100%;
      object-fit:cover;
      object-position:center 37%;
    }

    .hero-photo:after{
      content:"";
      position:absolute;
      inset:0;
      background:linear-gradient(90deg,rgba(71,25,88,.9) 0%,rgba(71,25,88,.15) 30%,transparent 60%);
    }

    .journey{
      padding:28px 0 52px;
    }

    .stage{
      --accent:var(--purple);
      --tint:#f5eff8;
      display:grid;
      grid-template-columns:180px 1fr 220px;
      align-items:stretch;
      gap:0;
      margin:20px 0;
      background:var(--tint);
      border:1px solid rgba(70,40,80,.06);
      border-radius:26px;
      overflow:hidden;
      box-shadow:0 8px 24px rgba(46,27,53,.045);
    }

    .stage.gold{--accent:var(--purple);--tint:#f8f4fc}
    .stage.pink{--accent:#6f3d95;--tint:#f7f2fb}
    .stage.green{--accent:#7b58a6;--tint:#f5f1fa}
    .stage.purple2{--accent:#5f237f;--tint:#f7f3fb}

    .stage-badge{
      margin:14px;
      min-height:230px;
      border-radius:115px;
      background:
        radial-gradient(circle at 30% 24%,rgba(255,255,255,.25),transparent 32%),
        linear-gradient(145deg,color-mix(in srgb,var(--accent),white 20%),var(--accent));
      color:#fff;
      display:flex;
      flex-direction:column;
      align-items:center;
      justify-content:center;
      text-align:center;
      padding:24px 12px;
    }

    .stage-number{
      font-family:"Inter",sans-serif;
      font-size:48px;
      line-height:1;
      font-weight:700;
    }

    .stage-en{
      font-family:"Inter",sans-serif;
      font-size:19px;
      font-weight:700;
      margin-top:12px;
    }

    .stage-ar{
      font-size:20px;
      font-weight:700;
      margin-top:2px;
    }

    .stage-icon{
      font-size:34px;
      line-height:1;
      margin-top:12px;
    }

    .stage-main{
      padding:28px 28px 24px;
      display:flex;
      flex-direction:column;
      justify-content:center;
    }

    .stage-main h2{
      margin:0 0 3px;
      font-size:clamp(24px,2.5vw,35px);
      line-height:1.45;
      color:color-mix(in srgb,var(--accent),black 28%);
    }

    .stage-main > p{
      margin:0 0 18px;
      color:#625866;
      font-size:17px;
    }

    .features{
      display:grid;
      grid-template-columns:repeat(4,1fr);
      gap:12px;
    }

    .features.five{grid-template-columns:repeat(5,1fr)}

    .feature{
      padding:14px 10px;
      border-radius:16px;
      background:rgba(255,255,255,.74);
      border:1px solid rgba(70,40,80,.06);
      text-align:center;
      font-size:14px;
      font-weight:600;
      line-height:1.65;
      min-height:105px;
      display:flex;
      flex-direction:column;
      align-items:center;
      justify-content:center;
    }

    .feature .ico{
      font-size:25px;
      color:var(--accent);
      margin-bottom:7px;
    }

    .stage-action{
      border-right:1px solid rgba(60,35,71,.07);
      display:flex;
      flex-direction:column;
      justify-content:center;
      align-items:center;
      text-align:center;
      padding:28px 22px;
      background:rgba(255,255,255,.28);
    }

    .stage-action p{
      margin:0 0 14px;
      font-weight:700;
      font-size:17px;
      line-height:1.7;
    }

    .btn{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      min-height:48px;
      border-radius:12px;
      padding:10px 22px;
      border:none;
      background:var(--accent);
      color:#fff;
      font-size:15px;
      font-weight:700;
      cursor:pointer;
      box-shadow:0 8px 20px color-mix(in srgb,var(--accent),transparent 76%);
      transition:.2s ease;
    }

    .btn:hover{transform:translateY(-2px)}

    .phone-wrap{
      display:flex;
      align-items:center;
      gap:24px;
      margin-top:4px;
    }

    .phone{
      width:150px;
      height:294px;
      border:7px solid #17121a;
      border-radius:30px;
      padding:5px;
      background:#17121a;
      flex:0 0 150px;
      box-shadow:0 15px 30px rgba(42,27,45,.18);
      transform:rotate(0deg);
      position:relative;
      overflow:hidden;
    }

    .phone:before{
      content:"";
      position:absolute;
      width:50px;
      height:12px;
      background:#17121a;
      top:0;
      left:50%;
      transform:translateX(-50%);
      border-radius:0 0 10px 10px;
      z-index:2;
    }

    .phone img{
      width:100%;
      height:100%;
      border-radius:20px;
      object-fit:cover;
      object-position:top;
    }

    .discover-text{
      flex:1;
    }

    .discover-text .features{
      grid-template-columns:repeat(2,1fr);
    }

    .bottom-cta{
      display:grid;
      grid-template-columns:1fr 1.25fr 1fr;
      gap:20px;
      align-items:stretch;
      margin:30px 0 22px;
    }

    .cta-card,.closing{
      border:1px solid var(--line);
      border-radius:22px;
      background:#fff;
      padding:28px;
      text-align:center;
      box-shadow:0 10px 28px rgba(56,35,64,.055);
    }

    .cta-card h3{margin:0 0 8px;font-size:21px;color:var(--purple-dark)}
    .cta-card p{margin:0 0 16px;color:var(--muted)}
    .closing{
      display:flex;
      flex-direction:column;
      justify-content:center;
      background:linear-gradient(145deg,#fff,#fcf6ee);
    }
    .closing h2{font-size:clamp(26px,3vw,40px);line-height:1.55;margin:0;color:var(--purple-dark)}
    .closing h2 span{color:var(--gold)}
    .whatsapp{background:#2f9d68}

    .mailing-list-btn{
      display:inline-flex;
      margin-top:4px;
      background:var(--purple);
      color:#fff;
      cursor:default;
      opacity:1;
    }
    .mailing-list-btn:hover{
      transform:none;
      background:var(--purple);
    }

    footer{
      background:linear-gradient(135deg,#2d0d3f,#4f1b68);
      color:#fff;
      margin-top:26px;
      padding:36px 0;
    }

    .footer-inner{display:grid;grid-template-columns:1fr auto 1fr;
      gap:28px;
      align-items:center;
    }

    .footer-brand .brand-en{color:#fff}
    .footer-brand .brand-ar{color:#e4b84f}
    .legal{
      text-align:center;
      font-size:13px;
      color:rgba(255,255,255,.78);
      line-height:1.9;
    }
    .footer-socials{
      justify-content:flex-start;
    }
.footer-socials a{
      background:rgba(255,255,255,.08);
      color:#fff;
      border-color:rgba(255,255,255,.18);
      transition:transform .2s ease, background .2s ease, border-color .2s ease;
    }

    .footer-socials a:hover{
      transform:translateY(-2px);
      background:var(--gold);
      border-color:var(--gold);
      color:#fff;
    }

    .footer-socials svg{
      width:18px;
      height:18px;
      display:block;
      fill:currentColor;
    }

    @media (max-width:980px){
      .hero{grid-template-columns:1fr;min-height:auto}
      .hero-copy{padding:54px 38px 42px}
      .hero-photo{min-height:430px}
      .hero-photo:after{background:linear-gradient(180deg,rgba(72,25,88,.7),transparent 35%)}
      .stage{grid-template-columns:145px 1fr}
      .stage-action{
        grid-column:1/-1;
        border-right:none;
        border-top:1px solid rgba(60,35,71,.07);
        flex-direction:row;
        gap:18px;
      }
      .stage-action p{margin:0}
      .features.five{grid-template-columns:repeat(3,1fr)}
      .bottom-cta{grid-template-columns:1fr}
      .footer-inner{grid-template-columns:1fr;text-align:center}
      .footer-brand .brand{justify-content:center}
      .footer-socials{justify-content:center}
    }

    @media (max-width:680px){
      .page{width:min(100% - 18px,1220px)}
      .brandbar{padding:12px 0}
      .brand-en{font-size:13px}
      .brand-ar{font-size:13px}
      .lotus{width:38px;height:38px;transform:scale(.8)}
      .socials a{width:34px;height:34px;font-size:10px}
      .hero{border-radius:0 0 18px 18px}
      .hero-copy{padding:40px 24px 30px}
      .hero-photo{min-height:390px}
      .journey{padding-top:14px}
      .stage{display:block;border-radius:20px}
      .stage-badge{
        margin:0;
        min-height:auto;
        border-radius:0;
        padding:18px;
        flex-direction:row;
        gap:11px;
      }
      .stage-number{font-size:36px}
      .stage-en,.stage-ar{margin:0;font-size:16px}
      .stage-icon{margin:0;font-size:24px}
      .stage-main{padding:22px 16px}
      .stage-action{display:block;padding:20px}
      .stage-action p{margin-bottom:12px}
      .features,.features.five{grid-template-columns:repeat(2,1fr)}
      .phone-wrap{align-items:flex-start;gap:14px}
      .phone{width:112px;height:222px;flex-basis:112px;border-width:5px;border-radius:24px}
      .discover-text .features{grid-template-columns:1fr}
      .feature{min-height:94px;font-size:13px}
      .bottom-cta{gap:13px}
      .cta-card,.closing{padding:22px 18px}
      .footer-inner{gap:18px}
    }

    @media (max-width:420px){
      
      .phone-wrap{display:block}
      .phone{margin:0 auto 20px}
      .discover-text .features{grid-template-columns:repeat(2,1fr)}
    }
  
    /* Header and hero adjusted to match the supplied prototype */
    .site-header{background:#fff;border-bottom:1px solid rgba(66,37,76,.06)}
    .header-inner{
      min-height:82px;display:grid;grid-template-columns:auto 1fr auto;
      align-items:center;gap:34px
    }
    .brand-link{justify-self:start}
    .brand-copy{min-width:max-content}
    .logo-lotus{width:58px;height:50px}
    .logo-lotus span{width:24px;height:38px;left:16px;top:6px;border-width:1.7px}
    .main-nav{
      display:flex;justify-content:center;align-items:center;gap:34px;
      font-size:15px;font-weight:700;color:#2f2432;white-space:nowrap
    }
    .main-nav a{transition:.2s ease}
    .main-nav a:hover{color:var(--purple)}
    .header-cta{
      justify-self:end;background:var(--purple);color:#fff;border-radius:12px;
      padding:11px 20px;font-size:15px;font-weight:700;white-space:nowrap
    }

    .hero-prototype{
      min-height:0;height:390px;grid-template-columns:1.07fr .93fr;
      border-radius:0;box-shadow:none;
      background:radial-gradient(circle at 22% 78%,rgba(117,62,143,.5),transparent 32%),
      linear-gradient(135deg,#2f0c43 0%,#4e176a 62%,#74448a 100%)
    }
    .hero-prototype .hero-copy{
      order:1;padding:44px 58px 34px;align-items:flex-start;text-align:right
    }
    .hero-prototype .hero-photo{order:2;min-height:390px}
    .hero-prototype .hero-photo img{object-position:center 42%}
    .hero-prototype .hero-photo:after{
      background:linear-gradient(270deg,rgba(58,17,76,.85) 0%,rgba(58,17,76,.22) 24%,transparent 52%)
    }
    .hero-prototype .hero-copy h1{
      font-size:clamp(34px,3.35vw,54px);line-height:1.25;max-width:610px
    }
    .hero-prototype .hero-copy h1 span{font-size:.82em;margin-top:3px}
    .hero-prototype .hero-copy p{
      font-size:clamp(17px,1.45vw,22px);line-height:1.75;max-width:600px
    }
    .hero-prototype .signature{margin-top:10px;font-size:18px}
    .hero-lotus{margin-top:4px;transform:scale(.75);transform-origin:right top}

    @media (max-width:980px){
      .header-inner{grid-template-columns:auto 1fr;min-height:auto;padding:12px 0}
      .main-nav{
        grid-column:1/-1;order:3;gap:18px;flex-wrap:wrap;padding-top:8px;font-size:13px
      }
      .header-cta{grid-column:2;grid-row:1}
      .hero-prototype{height:auto;grid-template-columns:1fr}
      .hero-prototype .hero-copy{order:1;padding:48px 34px 30px}
      .hero-prototype .hero-photo{order:2;min-height:430px}
      .hero-prototype .hero-photo:after{
        background:linear-gradient(180deg,rgba(58,17,76,.7),transparent 34%)
      }
    }

    @media (max-width:680px){
      .header-inner{grid-template-columns:1fr auto;gap:12px}
      .main-nav{display:none}
      .header-cta{font-size:12px;padding:9px 12px}
      .logo-lotus{width:46px;transform:scale(.86);transform-origin:right center}
      .hero-prototype .hero-copy{padding:42px 24px 30px}
      .hero-prototype .hero-copy h1{font-size:clamp(38px,10vw,52px)}
      .hero-prototype .hero-copy p{font-size:19px}
      .hero-prototype .hero-photo{min-height:560px}
      .hero-prototype .hero-photo img{object-position:center 36%}
    }

  
    .header-actions{display:flex;align-items:center;justify-content:flex-end;gap:10px}
    .menu-toggle{display:none;width:42px;height:42px;border:1px solid rgba(66,37,76,.12);border-radius:12px;background:#fff;padding:10px;cursor:pointer}
    .menu-toggle span{display:block;width:100%;height:2px;margin:4px 0;border-radius:3px;background:var(--purple);transition:.25s ease}
    .mobile-whatsapp{display:inline-flex;min-height:42px;padding:9px 16px;font-size:14px}
    @media (max-width:680px){
      .site-header{position:relative;z-index:50}
      .header-inner{grid-template-columns:1fr auto;min-height:72px;padding:10px 0;gap:12px}
      .main-nav{display:none;position:absolute;top:100%;left:9px;right:9px;flex-direction:column;align-items:stretch;gap:0;padding:10px;background:#fff;border:1px solid rgba(66,37,76,.08);border-radius:0 0 18px 18px;box-shadow:0 16px 30px rgba(50,16,68,.12)}
      .main-nav.is-open{display:flex}
      .main-nav a{padding:13px 10px;text-align:right;border-bottom:1px solid rgba(66,37,76,.07);font-size:15px}
      .main-nav a:last-child{border-bottom:none}
      .header-actions{grid-column:2;grid-row:1}
      .mobile-whatsapp{display:inline-flex;min-height:42px;padding:9px 14px;font-size:13px}
      .menu-toggle{display:block}
      .menu-toggle.is-open span:nth-child(1){transform:translateY(6px) rotate(45deg)}
      .menu-toggle.is-open span:nth-child(2){opacity:0}
      .menu-toggle.is-open span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
    }

  
    /* Final header polish */
    .brand-link{gap:10px}
    .logo-lotus{width:54px}
    .mobile-whatsapp{
      gap:8px;
      background:#25D366;
      color:#fff;
      border:1px solid #25D366;
      box-shadow:0 8px 18px rgba(37,211,102,.22);
    }
    .mobile-whatsapp:hover{background:#1fbd5b;border-color:#1fbd5b}
    .whatsapp-icon{width:20px;height:20px;fill:currentColor;flex:0 0 20px}
    @media (min-width:981px){
      .hero-prototype{margin-top:12px}
    }
    @media (max-width:680px){
      .brand-link{gap:8px}
      .logo-lotus{width:46px}
      .mobile-whatsapp{gap:7px}
      .whatsapp-icon{width:18px;height:18px;flex-basis:18px}
    }
    /* HERO — clean final implementation */
    .hero-prototype{
      position:relative;
      display:block;
      height:390px;
      min-height:0;
      overflow:hidden;
      border-radius:28px;
      background:#050308;
      box-shadow:0 18px 42px rgba(48,18,64,.14);
      isolation:isolate;
    }

    .hero-prototype .hero-photo{
      position:absolute;
      inset:0;
      z-index:0;
      width:100%;
      height:100%;
      min-height:0;
      overflow:hidden;
      background:#050308;
    }

    .hero-prototype .hero-photo img{
      width:100%;
      height:100%;
      max-width:none;
      object-fit:cover;
      object-position:100% 43%;
      transform:translateX(24%) scale(1.06);
      transform-origin:center;
      filter:none;
    }

    .hero-prototype .hero-photo::after{
      content:"";
      position:absolute;
      inset:0;
      z-index:1;
      pointer-events:none;
      background:
        linear-gradient(90deg,
          rgba(103,27,142,.98) 0%,
          rgba(91,24,126,.96) 23%,
          rgba(72,19,101,.86) 39%,
          rgba(48,13,68,.64) 51%,
          rgba(25,7,37,.36) 62%,
          rgba(9,4,14,.12) 73%,
          rgba(5,3,8,0) 84%);
    }

    .hero-prototype .hero-copy{
      position:absolute;
      inset:0 auto 0 0;
      z-index:2;
      width:54%;
      height:100%;
      padding:42px 58px 34px;
      display:flex;
      flex-direction:column;
      justify-content:center;
      align-items:flex-end;
      text-align:right;
      direction:rtl;
      color:#fff;
      background:transparent;
    }

    .hero-prototype .hero-copy h1{
      width:100%;
      max-width:590px;
      margin:0 0 12px;
      font-size:clamp(31px,3.05vw,48px);
      line-height:1.34;
      font-weight:800;
    }

    .hero-prototype .hero-copy h1 span{
      display:block;
      margin-top:7px;
      color:#e5b94f;
      font-size:.80em;
    }

    .hero-prototype .hero-copy p{
      width:100%;
      max-width:590px;
      margin:4px 0 0;
      font-size:clamp(16px,1.3vw,20px);
      line-height:2;
      color:#e5b94f;
    }

    .hero-prototype .signature{
      width:100%;
      max-width:590px;
      margin-top:12px;
      font-family:"Inter",sans-serif;
      font-size:16px;
      font-style:normal;
      font-weight:600;
      letter-spacing:.08em;
      color:#f2e5d1;
      direction:ltr;
      text-align:left;
    }

    .hero-prototype .hero-lotus{
      width:48px;
      height:48px;
      margin-top:3px;
      transform:scale(.72);
      transform-origin:left top;
      align-self:flex-start;
    }

    @media (max-width:980px){
      .hero-prototype{
        height:auto;
        display:grid;
        grid-template-columns:1fr;
        border-radius:24px;
        background:#050308;
      }

      .hero-prototype .hero-copy{
        position:relative;
        inset:auto;
        width:100%;
        height:auto;
        min-height:0;
        padding:42px 30px 32px;
        align-items:flex-end;
        background:linear-gradient(145deg,#2d0d3f,#5b2179);
      }

      .hero-prototype .hero-photo{
        position:relative;
        inset:auto;
        width:100%;
        height:540px;
        order:2;
      }

      .hero-prototype .hero-photo img{
        width:100%;
        height:100%;
        object-position:center 34%;
        transform:none;
      }

      .hero-prototype .hero-photo::after{
        background:linear-gradient(180deg,rgba(46,16,63,.16),transparent 18%);
      }

      .hero-prototype .signature{
        text-align:right;
      }

      .hero-prototype .hero-lotus{
        align-self:flex-end;
        transform-origin:right top;
      }
    }

    @media (max-width:680px){
      .hero-prototype{
        border-radius:20px;
      }

      .hero-prototype .hero-copy{
        padding:40px 22px 28px;
      }

      .hero-prototype .hero-copy h1{
        font-size:clamp(34px,9vw,45px);
        line-height:1.36;
      }

      .hero-prototype .hero-copy p{
        font-size:17px;
        line-height:1.95;
      }

      .hero-prototype .signature{
        font-size:15px;
        letter-spacing:.06em;
      }

      .hero-prototype .hero-photo{
        height:500px;
      }

      .hero-prototype .hero-photo img{
        object-position:center 34%;
      }
    }


.footer-socials{
  justify-content:flex-end;
}
@media (max-width:680px){
  .footer-inner{
    grid-template-columns:1fr;
    justify-items:center;
    text-align:center;
    gap:20px;
  }
  .footer-socials{
    justify-content:center;
  }
}


    /* ===== Luxury Polish — final unified pass ===== */
    :root{
      --purple:#62227f;
      --purple-dark:#2d0c3f;
      --gold:#c99a32;
      --cream:#fbf8f3;
      --ink:#2c2230;
      --muted:#716877;
      --line:rgba(67,39,77,.10);
      --shadow-soft:0 10px 30px rgba(47,22,57,.07);
      --shadow-card:0 16px 40px rgba(47,22,57,.085);
      --shadow-lift:0 20px 48px rgba(47,22,57,.13);
      --ease:cubic-bezier(.22,1,.36,1);
    }

    body{
      background:
        radial-gradient(circle at 8% 12%,rgba(201,154,50,.045),transparent 24%),
        linear-gradient(180deg,#fff 0%,#fcfaf7 62%,#faf7f2 100%);
      -webkit-font-smoothing:antialiased;
      text-rendering:optimizeLegibility;
    }

    ::selection{background:rgba(98,34,127,.16);color:var(--purple-dark)}
    a,button{-webkit-tap-highlight-color:transparent}
    a:focus-visible,button:focus-visible{outline:3px solid rgba(201,154,50,.42);outline-offset:3px}

    .site-header{
      position:sticky;
      top:0;
      z-index:60;
      background:rgba(255,255,255,.92);
      border-bottom:1px solid rgba(67,39,77,.07);
      backdrop-filter:blur(16px) saturate(150%);
      -webkit-backdrop-filter:blur(16px) saturate(150%);
      box-shadow:0 5px 22px rgba(49,20,62,.035);
    }

    .header-inner{min-height:86px}
    .brand-link,.main-nav a,.header-cta,.socials a,.btn,.stage,.feature,.cta-card,.closing{transition:all .28s var(--ease)}
    .brand-link:hover{transform:translateY(-1px)}
    .brand-en{letter-spacing:.105em}
    .brand-ar{color:#b88622}
    .main-nav a{position:relative;padding:9px 0}
    .main-nav a::after{
      content:"";position:absolute;right:0;bottom:2px;width:0;height:1.5px;
      background:linear-gradient(90deg,var(--purple),var(--gold));transition:width .28s var(--ease)
    }
    .main-nav a:hover::after{width:100%}
    .mobile-whatsapp{border-radius:14px;box-shadow:0 9px 24px rgba(37,211,102,.19)}
    .mobile-whatsapp:hover{transform:translateY(-2px);box-shadow:0 13px 28px rgba(37,211,102,.25)}

    .hero-prototype{
      margin-top:18px;
      border:1px solid rgba(255,255,255,.22);
      border-radius:30px;
      box-shadow:0 22px 60px rgba(44,14,58,.16),0 2px 0 rgba(255,255,255,.25) inset;
    }
    .hero-prototype::after{
      content:"";position:absolute;inset:0;z-index:3;pointer-events:none;border-radius:inherit;
      box-shadow:inset 0 0 0 1px rgba(255,255,255,.08),inset 0 -80px 100px rgba(0,0,0,.07)
    }
    .hero-prototype .hero-copy p{letter-spacing:.002em}
    .hero-prototype .hero-lotus{opacity:.94;filter:drop-shadow(0 5px 12px rgba(0,0,0,.12))}

    .journey{padding:42px 0 68px}
    .stage{
      position:relative;
      margin:26px 0;
      border:1px solid rgba(68,40,79,.075);
      border-radius:28px;
      box-shadow:var(--shadow-soft);
      isolation:isolate;
    }
    .stage::before{
      content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:-1;
      background:linear-gradient(130deg,rgba(255,255,255,.58),transparent 38%);
    }
    .stage:hover{transform:translateY(-3px);box-shadow:var(--shadow-lift);border-color:rgba(68,40,79,.12)}

    .stage-badge{
      margin:16px;
      min-height:236px;
      box-shadow:inset 0 1px 0 rgba(255,255,255,.3),0 14px 30px color-mix(in srgb,var(--accent),transparent 82%);
      border:1px solid rgba(255,255,255,.24);
    }
    .stage-number{font-size:42px;font-weight:600;opacity:.95}
    .stage-en{font-size:17px;letter-spacing:.09em}
    .stage-ar{font-size:18px;font-weight:700}
    .stage-main{padding:34px 32px 30px}
    .stage-main h2{margin-bottom:6px;letter-spacing:-.012em}
    .stage-main > p{margin-bottom:22px;color:#675d6b}

    .features{gap:14px}
    .feature{
      position:relative;
      padding:16px 11px;
      border-radius:18px;
      background:rgba(255,255,255,.82);
      border:1px solid rgba(67,39,77,.075);
      box-shadow:0 7px 20px rgba(48,27,56,.035),inset 0 1px 0 rgba(255,255,255,.86);
      overflow:hidden;
    }
    .feature::after{
      content:"";position:absolute;inset:auto 18% 0;height:2px;border-radius:5px;
      background:var(--accent);opacity:.0;transform:scaleX(.3);transition:.28s var(--ease)
    }
    .feature:hover{transform:translateY(-3px);background:#fff;border-color:color-mix(in srgb,var(--accent),transparent 75%);box-shadow:0 12px 26px rgba(48,27,56,.075)}
    .feature:hover::after{opacity:.55;transform:scaleX(1)}
    .feature .ico{width:28px;height:28px;display:grid;place-items:center;margin-bottom:8px;color:var(--accent)}
    .feature .ico svg{width:25px;height:25px;display:block;fill:none;stroke:currentColor;stroke-width:1.65;stroke-linecap:round;stroke-linejoin:round}

    .stage-action{
      padding:32px 24px;
      border-right-color:rgba(67,39,77,.075);
      background:linear-gradient(180deg,rgba(255,255,255,.42),rgba(255,255,255,.22));
    }
    .stage-action p{color:color-mix(in srgb,var(--accent),black 32%)}
    .btn{
      min-height:50px;border-radius:14px;padding:11px 24px;
      box-shadow:0 10px 24px color-mix(in srgb,var(--accent),transparent 78%),inset 0 1px 0 rgba(255,255,255,.18)
    }
    .btn:hover{transform:translateY(-3px);filter:saturate(1.06);box-shadow:0 15px 30px color-mix(in srgb,var(--accent),transparent 70%)}
    .btn:active{transform:translateY(-1px)}

    .phone{border-color:#161018;background:#161018;box-shadow:0 18px 38px rgba(34,19,38,.22),0 0 0 1px rgba(255,255,255,.08) inset}

    .bottom-cta{gap:24px;margin:40px 0 26px}
    .cta-card,.closing{
      border-radius:24px;
      border:1px solid rgba(67,39,77,.095);
      box-shadow:var(--shadow-soft);
    }
    .cta-card:hover,.closing:hover{transform:translateY(-3px);box-shadow:var(--shadow-card)}
    .cta-card{padding:31px 28px}
    .cta-card h3{font-size:22px;margin-bottom:6px}
    .closing{position:relative;overflow:hidden;background:linear-gradient(145deg,#fff 0%,#fdf8f1 100%)}
    .closing::before{content:"";position:absolute;width:160px;height:160px;border-radius:50%;left:-80px;top:-95px;background:rgba(201,154,50,.09)}
    .closing h2{position:relative;z-index:1;letter-spacing:-.015em}
    .whatsapp{background:#279b63}


    /* Reviews component */
    .is-disabled{
      pointer-events:none;
      opacity:.75;
      cursor:default;
    }

    .reviews{
      margin:36px 0 14px;
    }

    .reviews-masonry{
      display:grid;
      grid-template-columns:repeat(3,minmax(0,1fr));
      gap:22px;
      align-items:stretch;
    }

    .review-card{
      display:flex;
      flex-direction:column;
      min-height:100%;
      padding:27px 25px 23px;
      border:1px solid rgba(67,39,77,.095);
      border-radius:22px;
      background:linear-gradient(145deg,rgba(255,255,255,.98),rgba(249,245,252,.94));
      box-shadow:var(--shadow-soft);
      transition:transform .28s var(--ease),box-shadow .28s var(--ease),border-color .28s var(--ease);
    }

    .review-card:hover{
      transform:translateY(-3px);
      border-color:rgba(95,35,127,.18);
      box-shadow:var(--shadow-card);
    }

    .review-stars{
      direction:ltr;
      width:max-content;
      margin-bottom:14px;
      color:var(--gold);
      font-family:"Inter",sans-serif;
      font-size:17px;
      letter-spacing:.14em;
      line-height:1;
    }

    .review-card blockquote{
      margin:0;
      color:var(--ink);
      font-size:16px;
      line-height:1.95;
      font-weight:500;
    }

    .review-author{
      display:flex;
      align-items:center;
      gap:10px;
      margin-top:auto;
      padding-top:20px;
      color:var(--purple-dark);
      font-size:14px;
      font-weight:700;
      background:none;
      box-shadow:none;
    }

    .review-avatar{
      position:relative;
      width:38px;
      height:38px;
      display:grid;
      place-items:center;
      flex:0 0 38px;
      border:1px solid rgba(95,35,127,.12);
      border-radius:50%;
      background:linear-gradient(145deg,#f6effa,#fffaf1);
      color:var(--purple);
    }

    .review-avatar::before{
      content:"";
      position:absolute;
      top:8px;
      left:50%;
      width:7px;
      height:7px;
      border:1.6px solid currentColor;
      border-radius:50%;
      transform:translateX(-50%);
      box-sizing:border-box;
    }

    .review-avatar::after{
      content:"";
      position:absolute;
      left:50%;
      bottom:7px;
      width:15px;
      height:8px;
      border:1.6px solid currentColor;
      border-bottom:0;
      border-radius:10px 10px 0 0;
      transform:translateX(-50%);
      box-sizing:border-box;
    }

    @media (max-width:980px){
      .reviews-masonry{grid-template-columns:repeat(2,minmax(0,1fr))}
      .review-card:hover{transform:none}
    }

    @media (max-width:680px){
      .reviews{margin-top:24px}
      .reviews-masonry{grid-template-columns:1fr;gap:14px}
      .review-card{padding:23px 20px 21px;border-radius:20px}
      .review-card blockquote{font-size:15px;line-height:1.9}
    }

    body > footer{margin-top:34px;padding:42px 0;background:linear-gradient(135deg,#280a38 0%,#4a175f 58%,#58206e 100%);box-shadow:inset 0 1px 0 rgba(255,255,255,.08)}
    .footer-inner{grid-template-columns:1fr auto 1fr;gap:28px;align-items:center}
    .legal{max-width:560px;justify-self:center;letter-spacing:.01em}
    .footer-socials{justify-self:end;justify-content:flex-end}
    .footer-socials a{width:42px;height:42px;background:rgba(255,255,255,.075);border-color:rgba(255,255,255,.16);box-shadow:inset 0 1px 0 rgba(255,255,255,.06)}
    .footer-socials a:hover{transform:translateY(-3px);background:var(--gold);border-color:var(--gold);box-shadow:0 10px 22px rgba(0,0,0,.18)}

    @media (max-width:980px){
      .site-header{position:relative}
      .hero-prototype{margin-top:12px}
      .stage:hover,.cta-card:hover,.closing:hover{transform:none}
      .stage-action{background:rgba(255,255,255,.33)}
      .footer-socials{justify-self:center}
    }

    @media (max-width:680px){
      .page{width:min(100% - 20px,1220px)}
      .header-inner{min-height:74px}
      .hero-prototype{margin-top:10px;border-radius:22px}
      .journey{padding:20px 0 46px}
      .stage{margin:18px 0;border-radius:22px}
      .stage-badge{margin:0;box-shadow:inset 0 1px 0 rgba(255,255,255,.24)}
      .stage-main{padding:25px 18px 24px}
      .stage-main h2{font-size:25px}
      .stage-main > p{font-size:15px;line-height:1.85}
      .features{gap:10px}
      .feature{border-radius:16px;padding:14px 8px}
      .feature:hover{transform:none}
      .stage-action{padding:22px 18px}
      .bottom-cta{margin-top:24px;gap:14px}
      .cta-card,.closing{border-radius:20px}
      footer{padding:34px 0}
      .footer-inner{grid-template-columns:1fr;justify-items:center;gap:20px}
      .legal{justify-self:center}
      .footer-socials{justify-self:center}
    }

    @media (prefers-reduced-motion:reduce){
      *,*::before,*::after{scroll-behavior:auto!important;transition:none!important;animation:none!important}
    }