/* Tech Labs "liquid glass" layer for the homepage (EN + AR toggle), Nov 2026.
   Loaded after the page's own <style>, so it only restyles; no layout logic lives here.
   Glass needs light behind it: an aurora field sits behind the page, and the footer has its
   own lit stage. Everything respects prefers-reduced-motion. Remove the <link> to roll back. */

:root{
  --lg-fill:rgba(255,255,255,.055);
  --lg-fill-2:rgba(255,255,255,.085);
  --lg-edge:rgba(255,255,255,.16);
  --lg-hi:rgba(255,255,255,.34);
  --lg-blur:22px;
  --au-1:#2f6bff; --au-2:#7a5cff; --au-3:#16c2c2; --au-4:#ff7a59;
}

/* ---------- 1. Aurora behind the whole page ---------- */
html{background:var(--bg)}
body{background:transparent}
.lg-aurora{position:fixed;inset:-10vmax;z-index:-1;pointer-events:none;overflow:hidden;opacity:.55}
.lg-aurora i{position:absolute;border-radius:50%;filter:blur(80px);mix-blend-mode:screen;will-change:transform}
.lg-aurora i:nth-child(1){width:52vmax;height:52vmax;left:-6vmax;top:-10vmax;background:radial-gradient(circle,var(--au-1) 0,transparent 62%);animation:lg-drift1 26s ease-in-out infinite alternate}
.lg-aurora i:nth-child(2){width:44vmax;height:44vmax;right:-8vmax;top:18vmax;background:radial-gradient(circle,var(--au-2) 0,transparent 62%);opacity:.75;animation:lg-drift2 32s ease-in-out infinite alternate}
.lg-aurora i:nth-child(3){width:40vmax;height:40vmax;left:20vmax;bottom:-14vmax;background:radial-gradient(circle,var(--au-3) 0,transparent 60%);opacity:.45;animation:lg-drift3 38s ease-in-out infinite alternate}
.lg-aurora::after{content:"";position:absolute;inset:0;
  background-image:linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px);
  background-size:64px 64px;mask-image:radial-gradient(ellipse at 50% 30%,#000 20%,transparent 75%);-webkit-mask-image:radial-gradient(ellipse at 50% 30%,#000 20%,transparent 75%)}
@keyframes lg-drift1{to{transform:translate(14vmax,10vmax) scale(1.15)}}
@keyframes lg-drift2{to{transform:translate(-16vmax,-8vmax) scale(.9)}}
@keyframes lg-drift3{to{transform:translate(10vmax,-12vmax) scale(1.2)}}

/* Sections on the darker band stay solid, but let a little light through so the page breathes. */
section[style*="var(--bg2)"]{background:rgba(11,16,26,.72)!important;backdrop-filter:blur(2px)}

/* ---------- 2. Shared glass surface ---------- */
.lg,.stats-grid,.plan.feat-plan,form.cform,.about-visual{
  position:relative;isolation:isolate;
  background:linear-gradient(160deg,var(--lg-fill-2),var(--lg-fill))!important;
  border:1px solid var(--lg-edge)!important;
  -webkit-backdrop-filter:blur(var(--lg-blur)) saturate(150%);backdrop-filter:blur(var(--lg-blur)) saturate(150%);
  box-shadow:inset 0 1px 0 var(--lg-hi),inset 0 -1px 0 rgba(255,255,255,.05),0 30px 60px -30px rgba(0,0,0,.6)}
/* cursor light (position set by glass.v1.js; centred until the pointer moves) */
.lg::before,.stats-grid::before,.plan::before,form.cform::before,.card::before,.svc::before,.pillar::before,.step::before,.about-visual::before{
  content:"";position:absolute;inset:0;border-radius:inherit;z-index:-1;pointer-events:none;opacity:0;transition:opacity .35s;
  background:radial-gradient(380px 240px at var(--mx,50%) var(--my,0%),rgba(133,168,224,.18),transparent 65%)}
.lg:hover::before,.stats-grid:hover::before,.plan:hover::before,form.cform:hover::before,.card:hover::before,.svc:hover::before,.pillar:hover::before,.step:hover::before,.about-visual:hover::before{opacity:1}
.card,.svc,.pillar,.step,.plan{position:relative;isolation:isolate}
.card:hover,.svc:hover,.plan:hover{border-color:rgba(133,168,224,.32)}

/* ---------- 3. Nav: a floating glass pill once you scroll ---------- */
header.nav{transition:background .35s ease,border-color .35s ease,top .35s ease,margin .35s ease,border-radius .35s ease,box-shadow .35s ease}
header.nav.scrolled{
  top:10px;margin:0 max(12px,calc((100vw - 1240px)/2));border-radius:20px;
  background:rgba(12,18,30,.55);border:1px solid var(--lg-edge);
  -webkit-backdrop-filter:blur(20px) saturate(160%);backdrop-filter:blur(20px) saturate(160%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.18),0 18px 40px -18px rgba(0,0,0,.7)}
header.nav.scrolled .nav-inner{height:62px}
header.nav.scrolled .nav-links.open{top:68px;border-radius:0 0 20px 20px;background:rgba(12,18,30,.92);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px)}

/* ---------- 4. Stats band ---------- */
.stats{background:transparent!important;border:0!important;padding:10px 0 34px}
.stats-grid{border-radius:24px;padding:34px 20px!important}
.stat+.stat{border-inline-start:1px solid rgba(255,255,255,.08)}
@media(max-width:820px){.stat+.stat{border-inline-start:0}}

/* ---------- 5. Featured price cards glow ---------- */
.plan.feat-plan{box-shadow:inset 0 1px 0 var(--lg-hi),0 0 0 1px rgba(133,168,224,.25),0 30px 70px -28px rgba(47,107,255,.55)!important}

/* ---------- 6. WhatsApp float: glass ring ---------- */
.wa-float{box-shadow:0 0 0 6px rgba(37,211,102,.14),0 0 0 7px rgba(255,255,255,.12),0 14px 34px -8px rgba(37,211,102,.65)}

/* ---------- 7. Liquid glass footer ---------- */
footer.lg-foot{position:relative;border-top:0;background:transparent;padding:90px 0 28px;overflow:hidden;isolation:isolate}
.lg-stage{position:absolute;inset:0;z-index:-1;pointer-events:none}
.lg-stage i{position:absolute;border-radius:50%;filter:blur(60px)}
.lg-stage i:nth-child(1){width:520px;height:520px;left:-120px;bottom:-160px;background:radial-gradient(circle,rgba(47,107,255,.85),transparent 65%)}
.lg-stage i:nth-child(2){width:460px;height:460px;right:-80px;top:10px;background:radial-gradient(circle,rgba(122,92,255,.75),transparent 65%)}
.lg-stage i:nth-child(3){width:380px;height:380px;left:42%;bottom:-120px;background:radial-gradient(circle,rgba(22,194,194,.55),transparent 65%)}
.lg-stage b{position:absolute;left:50%;bottom:22%;width:70%;height:2px;transform:translateX(-50%);background:linear-gradient(90deg,transparent,rgba(255,255,255,.7),transparent);filter:blur(1px)}

.lg-slab{position:relative;isolation:isolate;border-radius:32px;overflow:hidden;
  padding:44px 40px 0;
  background:linear-gradient(160deg,rgba(255,255,255,.09),rgba(255,255,255,.035));
  border:1px solid rgba(255,255,255,.18);
  -webkit-backdrop-filter:blur(26px) saturate(170%);backdrop-filter:blur(26px) saturate(170%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.42),inset 1px 0 0 rgba(255,255,255,.12),inset 0 -1px 0 rgba(255,255,255,.06),0 40px 90px -40px rgba(0,0,0,.8)}
.lg-slab::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;border-radius:inherit;
  background:
    radial-gradient(520px 300px at var(--mx,75%) var(--my,0%),rgba(255,255,255,.16),transparent 60%),
    linear-gradient(115deg,rgba(255,255,255,.14) 0%,transparent 30%,transparent 72%,rgba(255,255,255,.06) 100%)}
/* liquid intro: the top edge ripples and settles when the footer scrolls into view */
.lg-slab.lg-wait{clip-path:polygon(0 14%,10% 9%,22% 15%,36% 6%,50% 13%,64% 4%,78% 12%,90% 6%,100% 11%,100% 100%,0 100%);transform:translateY(40px);opacity:0}
.lg-slab.lg-in{animation:lg-settle 1.5s cubic-bezier(.2,.9,.2,1) both}
@keyframes lg-settle{
  0%{clip-path:polygon(0 14%,10% 9%,22% 15%,36% 6%,50% 13%,64% 4%,78% 12%,90% 6%,100% 11%,100% 100%,0 100%);transform:translateY(40px);opacity:0}
  45%{clip-path:polygon(0 3%,10% 1%,22% 4%,36% 0%,50% 3%,64% 0%,78% 2%,90% 1%,100% 2%,100% 100%,0 100%);opacity:1}
  100%{clip-path:polygon(0 0,10% 0,22% 0,36% 0,50% 0,64% 0,78% 0,90% 0,100% 0,100% 100%,0 100%);transform:none;opacity:1}}

footer.lg-foot .foot-grid{margin-bottom:26px;gap:28px}
/* the link columns sit on an inner glass card, like the reel */
footer.lg-foot .lg-links{display:contents}
@media(min-width:821px){
  footer.lg-foot .foot-grid{grid-template-columns:1.25fr 2.75fr}
  footer.lg-foot .lg-links{display:grid;grid-template-columns:1.2fr 1.2fr 1fr;gap:26px;
    padding:26px 28px;border-radius:22px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.12)}
}
footer.lg-foot .foot-grid a{color:#d3dbe8}
footer.lg-foot .foot-grid a:hover{color:#fff;transform:translateX(3px)}
html[dir="rtl"] footer.lg-foot .foot-grid a:hover{transform:translateX(-3px)}
footer.lg-foot .foot-grid a{transition:color .2s,transform .2s}
footer.lg-foot .foot-brand p{color:#a9b4c6}
footer.lg-foot .socials a{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.14);box-shadow:inset 0 1px 0 rgba(255,255,255,.14)}

footer.lg-foot .foot-bottom{border-top:1px solid rgba(255,255,255,.1);padding:18px 0 4px;color:#9aa6b8;align-items:center}
.lg-live{display:inline-flex;align-items:center;gap:8px}
.lg-live::before{content:"";width:8px;height:8px;border-radius:50%;background:#25d366;box-shadow:0 0 0 4px rgba(37,211,102,.18),0 0 12px rgba(37,211,102,.8);animation:lg-pulse 2.4s ease-in-out infinite}
@keyframes lg-pulse{50%{box-shadow:0 0 0 7px rgba(37,211,102,0),0 0 12px rgba(37,211,102,.8)}}

/* giant glass wordmark that sinks into the bottom of the slab */
.lg-word{display:block;margin:6px -20px 0;text-align:center;line-height:.8;user-select:none;pointer-events:none;
  font-family:'Poppins',sans-serif;font-weight:800;letter-spacing:-.045em;white-space:nowrap;
  font-size:clamp(46px,14.6vw,210px);direction:ltr;unicode-bidi:isolate;
  color:transparent;
  background:linear-gradient(180deg,rgba(255,255,255,.95) 0%,rgba(255,255,255,.42) 34%,rgba(133,168,224,.18) 62%,rgba(255,255,255,.6) 100%);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-stroke:1px rgba(255,255,255,.35);
  transform:translateY(16%);
  filter:drop-shadow(0 12px 24px rgba(0,0,0,.35))}
.lg-word b{font-weight:800;background:linear-gradient(180deg,#bcd3ff 0%,#5e95ff 45%,rgba(47,107,255,.25) 75%,#9cc0ff 100%);-webkit-background-clip:text;background-clip:text}

@media(max-width:820px){
  footer.lg-foot{padding:60px 0 20px}
  .lg-slab{padding:30px 20px 0;border-radius:26px}
  .lg-word{margin:10px -6px 0}
}

@media(prefers-reduced-motion:reduce){
  .lg-aurora i,.lg-live::before{animation:none}
  .lg-slab.lg-wait{clip-path:none;transform:none;opacity:1}
  .lg-slab.lg-in{animation:none}
  header.nav{transition:none}
}
/* Older browsers without backdrop blur: keep the glass readable. */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .lg-slab,header.nav.scrolled{background:rgba(14,20,32,.96)}
}