/* Estelemly landing-page uplift v1 (approved 2026-11-06). Used by / and /ar/.
   Approved: page-wide motion (no light sweep), hero (glow, grid, key-fact badges), What we check (icons, no top line),
   sample report (View larger + lightbox, no tilt), How it works (timeline, no hover colour), prices, FAQ, Book.
   Rejected: sticky header, seen/unseen pop-ups. */
.u-ico{display:inline-flex;align-items:center;justify-content:center;flex:none}
.u-ico svg{display:block}

/* ---------- Page-wide: buttons, reveal, phone bar ---------- */
html{scroll-behavior:smooth}
a[data-track="book"],a[data-wa]{transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease}
a[data-track="book"][style*="background: #EE8466"]{background:linear-gradient(135deg,#F29A7F,#EE8466 45%,#E56F4E) !important}
a[data-track="book"][style*="background"]:hover,a[data-wa][style*="padding"]:hover{transform:translateY(-2px)}
a[data-track="book"][style*="background: #EE8466"]:hover{box-shadow:0 10px 26px rgba(238,132,102,.45)}
a[data-track="book"][style*="background: #14213D"]:hover{box-shadow:0 10px 26px rgba(20,33,61,.35)}
.u-pre{opacity:0;transform:translateY(26px)}
.u-in{opacity:1;transform:none;transition:opacity .7s ease,transform .7s cubic-bezier(.2,.7,.2,1)}
.u-mbar{position:fixed;left:0;right:0;bottom:0;z-index:45;display:none;gap:8px;
  padding:10px max(12px,env(safe-area-inset-right,0px)) calc(10px + env(safe-area-inset-bottom,0px)) max(12px,env(safe-area-inset-left,0px));
  background:rgba(20,33,61,.92);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-top:1px solid #2C3A5A;transform:translateY(110%);transition:transform .3s ease}
.u-mbar a{flex:1;display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;border-radius:6px;font-weight:600;font-size:16px;text-decoration:none}
.u-mbar .b{background:linear-gradient(135deg,#F29A7F,#EE8466 45%,#E56F4E);color:#14213D}
.u-mbar .w{color:#F4F6FA;border:1.5px solid #4A5878;flex:0 0 auto;padding:0 16px}
@media (max-width:760px){.u-mbar{display:flex}.u-mbar.show{transform:none}body{padding-bottom:76px}}

/* ---------- Hero: glow, blueprint grid, key-fact badges ---------- */
#top{position:relative;overflow:hidden;isolation:isolate}
#top::before{content:"";position:absolute;inset:-20%;z-index:-1;pointer-events:none;
  background:radial-gradient(38% 45% at 78% 30%,rgba(238,132,102,.38),transparent 70%),radial-gradient(30% 40% at 12% 85%,rgba(238,132,102,.16),transparent 70%),radial-gradient(40% 50% at 40% 0%,rgba(74,110,190,.35),transparent 70%);
  animation:u-drift 16s ease-in-out infinite alternate}
#top::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background-image:linear-gradient(rgba(244,246,250,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(244,246,250,.06) 1px,transparent 1px);background-size:44px 44px;
  -webkit-mask-image:radial-gradient(70% 70% at 70% 40%,#000 20%,transparent 75%);mask-image:radial-gradient(70% 70% at 70% 40%,#000 20%,transparent 75%)}
[dir="rtl"] #top::before,[dir="rtl"] #top::after{transform:scaleX(-1)}
@keyframes u-drift{0%{translate:0 0;scale:1}100%{translate:-4% 3%;scale:1.08}}
.u-facts{border-top:0 !important;padding-top:0 !important;gap:14px !important}
.u-facts > div{position:relative;display:grid !important;grid-template-columns:46px minmax(0,1fr);column-gap:14px;row-gap:2px !important;align-items:center;align-content:center;
  padding:16px 18px;border-radius:12px;background:rgba(244,246,250,.05);border:1px solid rgba(169,179,199,.18);cursor:help;outline:none;
  transition:transform .25s ease,border-color .25s,background-color .25s}
.u-facts > div > .u-ico{grid-row:1 / 3;width:46px;height:46px;border-radius:12px;background:linear-gradient(135deg,#F29A7F,#E56F4E);color:#14213D;box-shadow:0 6px 18px rgba(238,132,102,.35)}
.u-facts dd{font-size:18px !important}
.u-facts > div:hover,.u-facts > div:focus{transform:translateY(-4px);border-color:rgba(238,132,102,.7);background:rgba(238,132,102,.08)}
.u-facts > div:focus-visible{outline:3px solid #EE8466;outline-offset:2px}
.u-pop{position:absolute;left:12px;right:12px;bottom:calc(100% + 10px);z-index:5;padding:12px 14px;border-radius:10px;background:#FFFFFF;color:#14213D;
  font-size:14px;font-weight:400;line-height:1.45;box-shadow:0 16px 40px rgba(5,10,25,.35);opacity:0;transform:translateY(6px);pointer-events:none;transition:opacity .2s,transform .2s}
.u-pop::after{content:"";position:absolute;inset-inline-start:28px;top:100%;border:7px solid transparent;border-top-color:#FFFFFF}
.u-facts > div:hover > .u-pop,.u-facts > div:focus > .u-pop{opacity:1;transform:none}

/* ---------- What we check: icon cards (no top line) ---------- */
.u-cards > div{border-radius:12px !important;gap:12px !important;transition:transform .3s ease,box-shadow .3s ease}
.u-cards > div:hover{transform:translateY(-6px);box-shadow:0 18px 40px rgba(20,33,61,.12)}
.u-cards .u-ico{width:52px;height:52px;border-radius:14px;background:#FBEDE8;color:#D9573A;margin-bottom:6px;transition:transform .35s ease,background-color .3s,color .3s}
.u-cards > div:hover .u-ico{transform:rotate(-8deg) scale(1.08);background:#14213D;color:#EE8466}
.u-cards > div > p:last-child{align-self:flex-start;margin-top:auto !important;background:#FBEDE8;padding:5px 10px;border-radius:999px}

/* ---------- Sample report: View larger + lightbox (no lift/tilt) ---------- */
#sample figure{cursor:zoom-in}
#sample figure > div{position:relative}
.u-zoom{position:absolute;inset-inline-end:12px;bottom:12px;display:flex;align-items:center;gap:6px;padding:7px 12px;border-radius:999px;background:#14213D;color:#F4F6FA;
  font-weight:600;font-size:13px;line-height:1;opacity:0;transform:translateY(6px);transition:opacity .25s,transform .25s}
#sample figure:hover .u-zoom,#sample figure:focus-within .u-zoom{opacity:1;transform:none}
@media (hover:none){.u-zoom{opacity:1;transform:none}}
.u-lb{position:fixed;inset:0;z-index:60;display:flex;align-items:center;justify-content:center;padding:24px;background:rgba(10,18,36,.82);backdrop-filter:blur(6px);opacity:0;pointer-events:none;transition:opacity .25s}
.u-lb.open{opacity:1;pointer-events:auto}
.u-lb img{max-height:88vh;width:auto;max-width:min(640px,100%);border-radius:8px;box-shadow:0 30px 80px rgba(0,0,0,.5);transform:scale(.94);transition:transform .3s ease}
.u-lb.open img{transform:none}
.u-lb button{position:absolute;top:16px;inset-inline-end:16px;width:44px;height:44px;border-radius:50%;border:0;background:#F4F6FA;color:#14213D;font-size:22px;cursor:pointer}

/* ---------- How it works: timeline (no hover colour) ---------- */
#how ol li{border-top:0 !important;padding-top:0 !important;position:relative}
#how ol li > span:first-child{width:52px;height:52px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:#14213D;color:#EE8466 !important;
  font-size:16px !important;position:relative;z-index:1;box-shadow:0 0 0 6px #F4F6FA}
#how ol li::before{content:"";position:absolute;top:26px;inset-inline-start:52px;inset-inline-end:-32px;height:2px;background:repeating-linear-gradient(90deg,#EE8466 0 8px,transparent 8px 14px);opacity:.7}
#how ol li:last-child::before{display:none}
@media (max-width:1100px){#how ol li::before{display:none}}

/* ---------- Prices: glowing card, row hover, guarantees ---------- */
.u-price-card{position:relative;border-radius:14px !important;overflow:hidden;isolation:isolate;box-shadow:0 0 0 1.5px rgba(238,132,102,.7),0 24px 60px rgba(238,132,102,.22)}
.u-price-card::before{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(60% 60% at 100% 0%,rgba(238,132,102,.3),transparent 70%)}
[dir="rtl"] .u-price-card::before{background:radial-gradient(60% 60% at 0% 0%,rgba(238,132,102,.3),transparent 70%)}
.u-price-card li::marker{color:#EE8466}
.u-price-card span[style*="background: #EE8466"]{border-radius:999px !important;padding:5px 12px !important;display:inline-flex;align-items:center;gap:7px}
.u-price-card span[style*="background: #EE8466"]::before{content:"";width:7px;height:7px;border-radius:50%;background:#14213D;animation:u-pulse 1.8s ease-in-out infinite}
@keyframes u-pulse{50%{opacity:.25;transform:scale(.7)}}
#pricing table tbody tr{transition:background-color .2s}
#pricing table tbody tr:has(td):hover{background:#FBEDE8}
#pricing table tbody tr:has(td):hover td{color:#D9573A !important}
#pricing div[style*="border-radius: 4px; overflow: hidden"],#pricing div[style*="background: #F4F6FA; border: 1px solid #D8DDE6"],#pricing details{border-radius:12px !important}
.u-guar{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,230px),1fr));gap:12px}
.u-guar > div{display:flex;gap:14px;align-items:flex-start;padding:18px;border-radius:12px;background:#FFFFFF;border:1px solid #D8DDE6;transition:transform .25s,box-shadow .25s,border-color .25s}
.u-guar > div:hover{transform:translateY(-4px);box-shadow:0 14px 30px rgba(20,33,61,.1);border-color:rgba(238,132,102,.6)}
.u-guar .u-ico{width:44px;height:44px;border-radius:12px;background:#14213D;color:#EE8466}
.u-guar b{display:block;font-family:Montserrat,sans-serif;font-weight:700;font-size:16px;line-height:1.3;color:#14213D;margin-bottom:3px}
[lang="ar"] .u-guar b{font-family:Tajawal,sans-serif;font-size:18px}
.u-guar span{font-size:14px;line-height:1.5;color:#55607A}
[lang="ar"] .u-guar span{font-size:15px}

/* ---------- FAQ ---------- */
#faq details{border-radius:12px !important;transition:border-color .25s,box-shadow .25s}
#faq details:hover{border-color:rgba(238,132,102,.6) !important}
#faq details[open]{border-color:#EE8466 !important;box-shadow:0 12px 30px rgba(20,33,61,.08)}
#faq summary{list-style:none;display:flex;justify-content:space-between;align-items:center;gap:16px}
#faq summary::-webkit-details-marker{display:none}
#faq summary::after{content:"";flex:none;width:32px;height:32px;border-radius:50%;background:#FBEDE8 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14'%3E%3Cpath d='M7 1v12M1 7h12' stroke='%23D9573A' stroke-width='2'/%3E%3C/svg%3E") center no-repeat;transition:transform .3s ease,background-color .3s}
#faq details[open] summary::after{transform:rotate(45deg);background-color:#F7D3C7}
#faq details[open] > p{animation:u-fade .35s ease}
@keyframes u-fade{from{opacity:0;transform:translateY(-6px)}}

/* ---------- Book: navy closing band ---------- */
#book{background:#14213D !important;border-top:0 !important;position:relative;overflow:hidden;isolation:isolate}
#book::before{content:"";position:absolute;inset:-30% -10% auto auto;width:70%;height:140%;z-index:-1;background:radial-gradient(closest-side,rgba(238,132,102,.3),transparent);pointer-events:none;animation:u-drift 18s ease-in-out infinite alternate}
#book h2{color:#F4F6FA}
#book > div > div:first-child > p:first-child{color:#EE8466 !important}
#book > div > div:first-child > p:nth-of-type(2){color:#C9D1E0 !important}
#book a[data-loc="book"][data-track]{background:linear-gradient(135deg,#F29A7F,#EE8466 45%,#E56F4E) !important;color:#14213D !important}
#book a[data-wa]{color:#F4F6FA !important;border-color:#4A5878 !important}
#book a[data-wa]:hover{border-color:#EE8466 !important}
#book > div > div:last-child{background:rgba(244,246,250,.05) !important;border:1px solid #2C3A5A !important;border-radius:14px !important;color:#F4F6FA}
#book > div > div:last-child ul,#book > div > div:last-child p[style*="#55607A"]{color:#A9B3C7 !important}
#book > div > div:last-child > div[style*="height: 1px"]{background:#2C3A5A !important}
#book > div > div:last-child a{color:#EE8466}
#book + footer{border-top:1px solid #2C3A5A}
.u-tchips{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}
.u-tchips span{display:inline-flex;align-items:center;gap:8px;padding:8px 12px;border-radius:999px;background:rgba(244,246,250,.06);border:1px solid #2C3A5A;color:#C9D1E0;font-size:14px}
.u-tchips svg{color:#EE8466;flex:none}

@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none !important;transition:none !important}html{scroll-behavior:auto}.u-pre{opacity:1;transform:none}}