/* ==========================================================================
   Asyntix refresh 30 Oct 2026 (PREVIEW ONLY, not deployed)
   Loaded after style.css. Palette unchanged: navy / teal / gold / white.
   Fonts unchanged (Cairo / Inter / Poppins). RTL untouched.
   Part A = Impeccable polish (from impeccable_test/site_after/assets/polish.css)
   Part B = "quieter" pass: remove glow halos, decorative gradients and orbs
   Part C = mobile WhatsApp button no longer covers the hero
   ========================================================================== */

/* ---------- A. polish (reused as-is) ---------- */
/* 1. Solid colour instead of gradient text (headings, stats, band) */
.sec-title em,.join em{background:none;-webkit-background-clip:border-box;background-clip:border-box;color:var(--teal2)}
.band em{background:none;-webkit-background-clip:border-box;background-clip:border-box;color:var(--gold)}
.stats strong{background:none;-webkit-background-clip:border-box;background-clip:border-box;color:#fff}
.stats li:first-child strong{background-image:none;color:var(--gold)}
.shine{background:none;-webkit-background-clip:border-box;background-clip:border-box;color:var(--gold);animation:none}
/* 2. Remove the decorative blinking caret (typing text stays) */
.caret{display:none}
/* 3. Contrast fixes (WCAG AA) — darker teal / greys on light mock-ups */
.m-open b{color:#0b6e65}
.m-open.no svg,.m-open.no b{color:#5b6878}
.cal .ok{color:#0b6e65}
/* 4. Reading comfort: shorter measure + no one-word last lines */
.sec-title p{max-width:62ch;margin-inline:auto}
p{text-wrap:pretty}
h1,h2,h3{text-wrap:balance}

/* ---------- B. quieter: flat brand colour, no glow halos ---------- */
/* hero background: one calm navy wash instead of 3 moving orbs + grid */
.mesh{background:var(--ink)}
.o1,.o3,.grid-lines{display:none}
.o2{animation:none;opacity:.35}
#net{opacity:.35}
.eyebrow .dot{animation:none;box-shadow:none}
/* orbit stays as the one signature graphic, without halos */
.r2{background:none}
.r3{box-shadow:none}
.core svg{filter:none}
.pt,.pt.g{box-shadow:none}
.sat-in{box-shadow:none}
/* logo marks */
.brand-mark,.about-mark{filter:none}
/* buttons and controls: solid gold, plain shadow */
.btn-gold{background:var(--gold);box-shadow:0 2px 0 rgba(0,0,0,.25)}
.btn-gold:hover{background:var(--gold2);box-shadow:0 2px 0 rgba(0,0,0,.25)}
.btn-gold:before{display:none}
.lang-knob{background:var(--gold);box-shadow:none}
.tab-ink{background:var(--gold);box-shadow:none}
.tag,.ribbon{background:var(--gold);box-shadow:none}
.nav-links a:after,.progress span,.q-bar span{background:var(--teal)}
.tl-line span{background:var(--teal);box-shadow:none}
.tl-dot{background:var(--gold);box-shadow:0 0 0 8px var(--ink)}
.ba-handle{background:var(--gold);box-shadow:none}
.ba-handle span{background:var(--gold);box-shadow:0 4px 14px rgba(0,0,0,.35)}
.story a.on{box-shadow:none}
.social-btn:hover,.social-btn:focus-visible{box-shadow:none}
/* icon tiles: flat tint, no halo */
.ic,.q-ic{background:rgba(31,181,166,.12);box-shadow:none}
.ic-gold{background:rgba(227,178,60,.12);box-shadow:none}
/* cards: plain 1px border, no mouse-follow spotlight, no gradient border */
.glow:before,.glow:after{display:none}
.gborder{border:1px solid var(--line)!important;background:rgba(255,255,255,.03);box-shadow:none}
.gborder:after,.gborder:hover:after{display:none}
.glass{background:rgba(255,255,255,.04);box-shadow:none}
.setup{background:rgba(255,255,255,.04)}
.panel{background:rgba(255,255,255,.03);box-shadow:none}
.panel-ui:before{display:none}
.price.recommended{background:rgba(255,255,255,.05);box-shadow:none}
.product-cta{background:rgba(227,178,60,.06)}
/* sections: flat backgrounds, no glowing hairlines */
.sec:before{display:none}
.sec-alt{background:#0A2242}
.problem{background:var(--ink)}
.about:after{display:none}
.gplan{background:#0D2C52;box-shadow:none}
.gplan-glow{display:none}
.band{background:#0B2B55}
.band-bg{display:none}
footer{background:#04142A}
.foot-word{background:none;-webkit-background-clip:border-box;background-clip:border-box;color:rgba(255,255,255,.06)}
.cursor-glow{display:none!important}
/* fewer kickers: keep 4 of 12 (services catalogue, clients, quick check, final CTA) */
.kicker{display:none}
#clients .kicker,#products .kicker,#check .kicker,#join .kicker{display:inline-block}

/* ---------- C. mobile: WhatsApp button hidden while the hero copy is on screen ---------- */
.fab:before{animation:none;display:none}
.fab{box-shadow:0 6px 18px rgba(0,0,0,.35);transition:transform .3s var(--ease),opacity .3s}
@media(max-width:720px){
  html.at-top .fab{opacity:0;transform:translateY(140%);pointer-events:none}
  .hero{padding-bottom:40px}
  .lead{font-size:16.5px}
}

/* ==========================================================================
   Pass 2 (30 Oct 2026, preview): fonts, Lenis, LCP/CLS, cards and FAQ
   ========================================================================== */
/* E1. Same fonts, now self-hosted, with metric-matched fallbacks (no jump on swap) */
body{font-family:Inter,'Inter Fallback',system-ui,-apple-system,"Segoe UI",Arial,sans-serif}
html[lang=ar] body{font-family:Cairo,'Cairo Fallback',Tahoma,Arial,sans-serif}
h1,h2,h3{font-family:Poppins,'Poppins Fallback',Inter,sans-serif}
html[lang=ar] :is(h1,h2,h3){font-family:Cairo,'Cairo Fallback',sans-serif}
.hook{font-family:Poppins,'Poppins Fallback',Cairo,sans-serif}
html[lang=ar] .hook{font-family:Cairo,'Cairo Fallback',sans-serif}

/* E2. Lenis smooth scroll (off under reduced motion; native scroll-behavior must not fight it) */
html.lenis,html.lenis body{height:auto}
html.lenis{scroll-behavior:auto}
.lenis:not(.lenis-autoToggle).lenis-stopped{overflow:clip}
.lenis [data-lenis-prevent]{overscroll-behavior:contain}
.lenis.lenis-smooth iframe{pointer-events:none}

/* E3. Hero is visible at first paint (faster LCP): headline no longer slides in word by word */
.js .headline .w>span,.js .headline.go .w>span{transform:none;opacity:1;transition:none}
/* E4. Typed question: the rest of the line is reserved so nothing below moves while it types */
.hook .type{white-space:normal}
.hook .type .ghost{visibility:hidden}
html:not(.js) .hook .type .ghost{visibility:visible}

/* E5. Footer column titles: h3 (was h4), same look */
footer .foot-col h3.foot-h{margin:0 0 6px;color:#fff;font:600 14px/1.4 Poppins,'Poppins Fallback',Cairo,sans-serif;letter-spacing:.08em;text-transform:uppercase}
html[lang=ar] footer .foot-col h3.foot-h{font-family:Cairo,'Cairo Fallback',sans-serif;font-weight:700;letter-spacing:0;font-size:16px}
.foot-col .lang-link{font-family:Cairo,'Cairo Fallback',sans-serif}
.foot-col .lang-link[lang=en]{font-family:Inter,'Inter Fallback',sans-serif}

/* E6. Product cards, HyperUI-style: accent bar on the reading-start edge, calm lift on hover */
.products-grid .product{position:relative;border-radius:16px;border:1px solid var(--line);border-inline-start:4px solid rgba(31,181,166,.55);transition:border-color .25s,background-color .25s,box-shadow .25s,transform .25s}
.products-grid .product:hover{border-color:rgba(31,181,166,.45);border-inline-start-color:var(--teal);box-shadow:0 14px 32px -18px rgba(0,0,0,.6)}
.products-grid .product h3{font-size:18.5px}
.products-grid .product-cta{border-color:rgba(227,178,60,.45);border-inline-start-color:var(--gold)}
.products-grid .product-cta:hover{border-color:rgba(227,178,60,.6);border-inline-start-color:var(--gold2)}

/* E7. FAQ accordion, HyperUI-style: one rounded panel, rows split by hairlines, round +/− button */
.faq .narrow > details{margin:0;border:0;border-radius:0;background:transparent;border-bottom:1px solid var(--line)}
.faq .narrow > details:first-of-type{border-top:1px solid var(--line)}
.faq details[open]{background:transparent;border-color:var(--line)}
.faq summary{padding:20px 4px;font-size:17px;line-height:1.45}
.faq summary:after,html[dir=rtl] .faq summary:after,.faq details[open] summary:after,html[dir=rtl] .faq details[open] summary:after{content:none}
.faq summary:before{content:"";order:2;flex:none;width:32px;height:32px;border-radius:999px;border:1px solid rgba(227,178,60,.55);
  background:linear-gradient(var(--gold),var(--gold)) center/12px 2px no-repeat,linear-gradient(var(--gold),var(--gold)) center/2px 12px no-repeat;transition:transform .3s var(--ease),background-color .3s}
.faq details[open] summary:before{transform:rotate(45deg);background-color:rgba(227,178,60,.12)}
.faq summary:hover{color:var(--gold2)}
.faq details[open] summary{color:var(--teal2)}
.faq .ans{padding:0 4px 20px;padding-inline-end:52px}
.faq .ans p{line-height:1.75}
@media(prefers-reduced-motion:reduce){.products-grid .product,.faq summary:before{transition:none}}
/* E8. Fix: the flat gold .tag rule above also hit the teal "Included" tags (teal text on gold, hard to read) */
.tag.tag-teal{background:rgba(31,181,166,.15);color:var(--teal2);border:1px solid rgba(31,181,166,.4)}

/* ==========================================================================
   Pass 3 (30 Oct 2026, preview): the only first-paint rule for the motion layer.
   The rest lives in motion.css, which motion.js loads without blocking render.
   ========================================================================== */
.marquee{position:relative;height:62px;overflow:hidden;background:#071E3B;border-block:1px solid rgba(255,255,255,.07)}
html:not(.js) .marquee{display:none}