:root{
    --night:#110E1B; --night800:#1D182B; --night700:#28213A;
    --purple300:#B48ABD; --purple500:#804A8A; --purple800:#3A0353;
    --gold300:#F8D299; --gold500:#F59E51;
    --text:#EDE7F2; --muted:#A99BB5; --dim:#7F7390;
    --border:rgba(255,255,255,.07); --border2:rgba(255,255,255,.12);
    --r:22px; --max:1120px;
  }
  *{margin:0;padding:0;box-sizing:border-box}
  html{scroll-behavior:smooth}
  body{
    background:var(--night); color:var(--text);
    font-family:'IBM Plex Sans Arabic',system-ui,-apple-system,sans-serif;
    font-weight:300; line-height:1.9; -webkit-font-smoothing:antialiased;
    overflow-x:hidden;
  }
  a{color:inherit}
  img{display:block;max-width:100%;height:auto}
  .serif{font-family:'Amiri','Noto Naskh Arabic',serif}
  .wrap{max-width:var(--max);margin:0 auto;padding:0 24px}
  section{padding:96px 0}
  h1,h2,h3{font-weight:600;line-height:1.35}
  h2{font-size:clamp(28px,4vw,42px);margin-bottom:14px}
  .eyebrow{color:var(--purple300);font-weight:500;font-size:14px;margin-bottom:12px}
  .sub{color:var(--muted);font-size:clamp(16px,1.6vw,19px);max-width:640px}
  .center{text-align:center}
  .center .sub{margin:0 auto}

  /* ===== nav ===== */
  nav{
    position:sticky;top:0;z-index:50;
    background:rgba(17,14,27,.72);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
    border-bottom:1px solid var(--border);
  }
  nav .wrap{display:flex;align-items:center;justify-content:space-between;height:64px}
  .brand{display:flex;align-items:center;gap:10px;text-decoration:none}
  .brand img.ic{width:34px;height:34px;border-radius:9px}
  .brand img.wm{height:20px;width:auto;opacity:.95}
  nav ul{display:flex;gap:28px;list-style:none;font-size:15px;font-weight:400}
  nav ul a{text-decoration:none;color:var(--muted);transition:color .2s}
  nav ul a:hover{color:var(--text)}
  .btn{
    display:inline-flex;align-items:center;gap:8px;text-decoration:none;
    background:linear-gradient(135deg,var(--purple300),var(--purple500) 55%,var(--purple800));
    color:#fff;font-weight:500;font-size:15px;padding:10px 18px;border-radius:999px;
    box-shadow:0 8px 24px rgba(128,74,138,.35);transition:transform .2s,box-shadow .2s;
  }
  .btn:hover{transform:translateY(-1px);box-shadow:0 12px 30px rgba(128,74,138,.5)}
  @media (max-width:760px){ nav ul{display:none} }

  /* ===== hero ===== */
  .hero{
    position:relative;padding:80px 0 40px;overflow:hidden;
    background:
      radial-gradient(1100px 700px at 70% -10%, rgba(128,74,138,.38), transparent 62%),
      radial-gradient(700px 500px at 10% 60%, rgba(58,3,83,.45), transparent 60%);
  }
  .hero .wrap{display:grid;grid-template-columns:1.1fr .9fr;gap:48px;align-items:center}
  .hero h1{font-size:clamp(38px,5.4vw,64px);font-weight:700;line-height:1.25;margin:10px 0 20px}
  .hero h1 em{font-style:normal;background:linear-gradient(135deg,var(--gold300),var(--gold500));-webkit-background-clip:text;background-clip:text;color:transparent}
  .hero .lede{font-size:clamp(17px,1.8vw,21px);color:var(--muted);max-width:560px;margin-bottom:34px;font-weight:300}
  .cta{display:flex;align-items:center;gap:18px;flex-wrap:wrap}
  .badge img{height:54px;width:auto}
  .badge{transition:transform .2s;display:inline-block}
  .badge:hover{transform:translateY(-2px)}
  .cta .free{color:var(--muted);font-size:14px;line-height:1.6}
  .cta .free b{display:block;color:var(--text);font-weight:500}
  .phone{
    position:relative;width:min(320px,80vw);margin:0 auto;
    border-radius:52px;padding:11px;background:#0a0812;
    border:1px solid rgba(255,255,255,.14);
    box-shadow:0 40px 90px rgba(0,0,0,.6),0 0 0 1px rgba(0,0,0,.6),0 0 120px rgba(128,74,138,.35);
  }
  .phone img{border-radius:42px;width:100%}
  .phone::before{
    content:"";position:absolute;inset:-1px;border-radius:53px;pointer-events:none;
    background:linear-gradient(160deg,rgba(255,255,255,.18),transparent 30%,transparent 70%,rgba(255,255,255,.06));
    -webkit-mask:linear-gradient(#000,#000) content-box,linear-gradient(#000,#000);-webkit-mask-composite:xor;mask-composite:exclude;padding:1px;
  }
  .glow{position:absolute;inset:auto 0 -10% 0;height:60%;background:radial-gradient(60% 60% at 50% 100%,rgba(245,158,81,.16),transparent 70%);pointer-events:none}
  @media (max-width:860px){
    .hero .wrap{grid-template-columns:1fr;text-align:center}
    .hero .lede{margin-inline:auto}
    .cta{justify-content:center}
    .hero .phone{margin-top:30px}
  }

  /* ===== trust strip ===== */
  .strip{padding:26px 0;border-top:1px solid var(--border);border-bottom:1px solid var(--border);background:rgba(29,24,43,.5)}
  .strip ul{list-style:none;display:flex;justify-content:center;gap:12px 40px;flex-wrap:wrap;font-size:15px;font-weight:400;color:var(--muted)}
  .strip li{display:flex;align-items:center;gap:9px}
  .strip svg{width:18px;height:18px;stroke:var(--gold500);fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}

  /* ===== ayah ===== */
  .ayah{padding:70px 0;text-align:center}
  .ayah p{font-size:clamp(26px,3.6vw,40px);line-height:1.9;color:var(--gold300)}
  .ayah small{display:block;color:var(--dim);font-size:15px;margin-top:8px;font-family:'IBM Plex Sans Arabic',sans-serif}

  /* ===== features ===== */
  .grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:48px}
  .card{
    background:var(--night800);border:1px solid var(--border);border-radius:var(--r);
    padding:28px 26px;transition:border-color .25s,transform .25s;
  }
  .card:hover{border-color:rgba(180,138,189,.4);transform:translateY(-3px)}
  .tile{
    width:48px;height:48px;border-radius:14px;display:grid;place-items:center;margin-bottom:18px;
    background:rgba(128,74,138,.14);border:1px solid rgba(180,138,189,.28);
  }
  .tile svg{width:24px;height:24px;stroke:url(#g);fill:none;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
  .card h3{font-size:19px;margin-bottom:8px;font-weight:600}
  .card p{color:var(--muted);font-size:15px}
  @media (max-width:900px){ .grid{grid-template-columns:repeat(2,1fr)} }
  @media (max-width:560px){ .grid{grid-template-columns:1fr} }

  /* ===== showcase rows ===== */
  .row{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center;padding:56px 0}
  .row:nth-child(even) .phone-sm{order:-1}
  .row h3{font-size:clamp(26px,3.2vw,36px);margin:8px 0 14px;font-weight:600}
  .row p{color:var(--muted);font-size:17px;max-width:480px}
  .row .quote{margin-top:22px;padding:18px 22px;border-inline-start:2px solid var(--gold500);background:rgba(245,158,81,.06);border-radius:0 14px 14px 0;color:var(--gold300);font-size:19px}
  .row .quote small{display:block;color:var(--dim);font-size:14px;margin-top:6px;font-family:'IBM Plex Sans Arabic',sans-serif}
  .phone-sm{display:flex;gap:18px;justify-content:center}
  .phone-sm .phone{width:min(250px,62vw);border-radius:40px;padding:9px}
  .phone-sm .phone img{border-radius:32px}
  .phone-sm .phone + .phone{margin-top:60px}
  @media (max-width:860px){
    .row{grid-template-columns:1fr;gap:34px;text-align:center}
    .row:nth-child(even) .phone-sm{order:0}
    .row p{margin-inline:auto}
    .phone-sm .phone + .phone{margin-top:0}
  }
  @media (max-width:560px){ .phone-sm .phone:nth-child(2){display:none} }

  /* ===== gallery ===== */
  .gallery{background:linear-gradient(180deg,transparent,rgba(58,3,83,.18) 40%,transparent)}
  .rail{
    display:flex;gap:22px;overflow-x:auto;padding:40px 24px 30px;scroll-snap-type:x mandatory;
    scrollbar-width:none;margin:0 -24px;
  }
  .rail::-webkit-scrollbar{display:none}
  .shot{flex:0 0 auto;width:230px;scroll-snap-align:center;text-align:center}
  .shot .phone{width:230px;border-radius:38px;padding:8px;box-shadow:0 24px 50px rgba(0,0,0,.5)}
  .shot .phone img{border-radius:30px}
  .shot figcaption{margin-top:14px;font-size:14px;color:var(--muted);font-weight:400}
  .hint{text-align:center;color:var(--dim);font-size:13px}

  /* ===== privacy ===== */
  .privacy .box{
    position:relative;overflow:hidden;
    background:linear-gradient(135deg,rgba(128,74,138,.22),rgba(58,3,83,.35));
    border:1px solid rgba(180,138,189,.25);border-radius:32px;padding:64px 40px;text-align:center;
  }
  .privacy .box::after{content:"";position:absolute;inset:auto -20% -60% -20%;height:80%;background:radial-gradient(50% 50% at 50% 50%,rgba(245,158,81,.18),transparent 70%);pointer-events:none}
  .privacy h2{font-size:clamp(28px,4vw,44px)}
  .privacy .big{font-size:clamp(24px,3.4vw,34px);color:var(--gold300);margin:14px 0 22px}
  .privacy ul{list-style:none;display:flex;justify-content:center;gap:12px 32px;flex-wrap:wrap;color:var(--muted);font-size:16px;font-weight:400;margin-top:10px}
  .privacy ul li::before{content:"·";color:var(--gold500);margin-inline-end:8px;font-weight:700}

  /* ===== audio ===== */
  .audio .wrap{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
  .audio .note{color:var(--dim);font-size:13px;margin-top:18px}
  .chips{display:flex;gap:10px;flex-wrap:wrap;margin-top:22px}
  .chip{padding:8px 16px;border-radius:999px;border:1px solid var(--border2);background:var(--night800);font-size:14px;font-weight:400;color:var(--text)}
  @media (max-width:860px){ .audio .wrap{grid-template-columns:1fr;text-align:center} .chips{justify-content:center} }


  /* ===== faq ===== */
  .faq details{border-bottom:1px solid var(--border);padding:6px 0}
  .faq summary{cursor:pointer;list-style:none;font-weight:500;font-size:18px;padding:16px 0;display:flex;justify-content:space-between;align-items:center;gap:20px}
  .faq summary::-webkit-details-marker{display:none}
  .faq summary::after{content:"+";color:var(--purple300);font-size:24px;font-weight:300;transition:transform .2s}
  .faq details[open] summary::after{transform:rotate(45deg)}
  .faq details p{color:var(--muted);padding:0 0 18px;font-size:16px;max-width:760px}
  .faq .list{max-width:820px;margin:30px auto 0}

  /* ===== final cta ===== */
  .final{text-align:center;padding:110px 0;position:relative;overflow:hidden;
    background:radial-gradient(800px 500px at 50% 120%,rgba(128,74,138,.45),transparent 65%)}
  .final img.ic{width:96px;height:96px;border-radius:24px;margin:0 auto 24px;box-shadow:0 20px 50px rgba(0,0,0,.5),0 0 60px rgba(128,74,138,.35)}
  .final h2{font-size:clamp(30px,4.6vw,50px)}
  .final .cta{justify-content:center;margin-top:30px}

  footer{border-top:1px solid var(--border);padding:40px 0;color:var(--muted);font-size:14px}
  footer .wrap{display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap}
  footer ul{list-style:none;display:flex;gap:24px;flex-wrap:wrap}
  footer a{text-decoration:none;color:var(--muted)}
  footer a:hover{color:var(--text)}
  footer .mail{direction:ltr;display:inline-block;color:var(--gold300)}
  footer .legal{width:100%;color:var(--dim);font-size:12.5px;margin-top:8px;line-height:1.8}

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


/* inline style attributes moved for CSP */
.s-bb6a43fd{position:absolute}
.s-7ad3526a{font-weight:500;color:var(--text)}
.s-d461c96d{position:relative}
.s-49826953{padding-top:20px}
.s-266e9b04{margin:0 auto}
.s-49fcd855{margin-top:24px}
.s-25698ce4{color:var(--gold300);text-decoration:none;font-weight:500}
.s-dbd6bdb7{padding-top:30px}
.s-743d36af{color:var(--gold300)}
.s-0f963aa9{margin:14px auto 0}