/* ===================================================================
   AAA SOLUTIONS — DESIGN SYSTEM v3
   Direction: crisp-white diagnostic bay (light theme is the default),
   Electric Blue / Cobalt Blue telemetry accent, matte charcoal /
   gunmetal grey + chrome-silver secondary surfaces for the dark theme.
   Signature element: the live ECU telemetry glass panel — its
   scanline / waveform motif reappears in miniature across the page
   (card top-edges, section dividers).
   Type: Space Grotesk (display, geometric/technical) + Plus Jakarta
   Sans (body) + JetBrains Mono (data & readouts). Tajawal for Arabic.
=================================================================== */
:root{
  /* Secondary palette — obsidian slate scale, tuned to the SAME hue family
     as the brand blue (#0504FC) so backgrounds read as "deep space around
     the logo color" rather than a neutral grey that dulls it. Base #06060b /
     cards #131322 / alt #1d1d32 — every stop below carries a faint
     blue-violet undertone (never a warm or cyan-green cast) so #0504FC
     never gets muddied or fights the surface it sits on. */
  --obsidian-950:#06060b;   /* Page background — near-black, deepest stop */
  --obsidian-900:#090912;   /* Raised background */
  --obsidian-850:#0d0d19;
  --obsidian-800:#161629;   /* Card / Container Surface — bumped a step lighter than page bg so
                                #0504FC borders/glows read as a clear pop, not a muddy blend */
  --obsidian-700:#1d1d32;
  --obsidian-600:#292942;   /* Metallic Border Grey (now blue-violet tinted) */
  --line-100:#ffffff;
  --line-400:#D4D4D8;   /* secondary text — WCAG-AA cool grey (zinc-300) */
  --line-600:#A1A1AA;   /* tertiary/dim text — cool grey (zinc-400), still >7:1 on obsidian bg */

  /* Primary palette — brand blue, generated directly from the logo color
     #0504FC. This is now the ONLY blue hue family used across the UI:
     no separate sky-blue or cyan hue competes with it anywhere. */
  --brand-500:#0504FC;   /* Exact logo color — the signature accent */
  --brand-600:#0302ca;   /* Deeper shade — gradients, pressed states */
  --brand-700:#020297;
  --brand-800:#020165;
  --brand-900:#01014c;
  --brand-400:#3635fd;   /* Lighter — hover states */
  --brand-300:#6868fd;   /* Lighter still — active icons/text on dark bg */
  --brand-200:#9b9afe;   /* Light accent text, small on-dark details */
  --brand-glow:rgba(5,4,252,.45);
  --brand-glow-soft:rgba(5,4,252,.16);
  --brand-glow-strong:rgba(5,4,252,.6);

  /* Legacy variable names kept as aliases so every existing usage across
     the stylesheet automatically resolves to the unified brand-blue scale
     above — this removes the old competing "neon blue vs. cyan" two-hue
     system in one place instead of hundreds. */
  --neon-500:var(--brand-500);   /* Primary accent */
  --neon-400:var(--brand-400);
  --neon-300:var(--brand-300);
  --neon-glow:var(--brand-glow);
  --neon-glow-soft:var(--brand-glow-soft);

  --cyan-500:var(--brand-600);   /* was Neon Cyan — now a deeper brand-blue stop, no hue clash */
  --cyan-400:var(--brand-300);
  --cyan-glow:var(--brand-glow);

  /* Chrome / silver accent */
  --chrome-100:#f4f5f7;
  --chrome-300:#d4d8dd;
  --chrome-500:#9aa1ad;
  --chrome-700:#6b7178;

  /* Emerald — reserved for "buy" / commerce actions only, kept distinct
     from the --ok status green used on stock badges and telemetry. */
  --emerald-500:#10b981;
  --emerald-600:#059669;
  --emerald-glow:rgba(16,185,129,.45);

  --ok:#10b981;
  --warn:#c98a1f;

  --accent:var(--neon-500);
  --accent-2:var(--cyan-500);

  --font-display:'Space Grotesk',sans-serif;
  --font-body:'Plus Jakarta Sans',sans-serif;
  --font-mono:'JetBrains Mono',monospace;

  --clip-card:polygon(0 14px,14px 0,100% 0,100% calc(100% - 14px),calc(100% - 14px) 100%,0 100%);
  --clip-card-sm:polygon(0 10px,10px 0,100% 0,100% calc(100% - 10px),calc(100% - 10px) 100%,0 100%);
  --container-w:1669px;

  --ease-bezier: cubic-bezier(.22,1,.36,1);
  --ease-bezier-soft: cubic-bezier(.16,.84,.44,1);
  --ease-bounce: cubic-bezier(.34,1.56,.64,1);
}

/* ---- THEME: INDUSTRIAL DARK (sole theme) ----
   AAA Solutions is a diagnostic/ECU-programming web app, not a marketing
   site with a light-mode toggle — the dark industrial surface is the
   product, always on. The legacy `[data-theme]` attribute hook is kept
   (harmless) so nothing else in the stylesheet has to change shape. */
:root,
html[data-theme="light"],
html[data-theme="dark"]{
  --bg:var(--obsidian-950);
  --bg-raised:var(--obsidian-900);
  --bg-card:rgba(22,22,41,.72);   /* obsidian-800 as glass — visibly lighter than page bg so cards separate cleanly */
  --glass-border:rgba(255,255,255,.08);
  --glass-border-strong:rgba(255,255,255,.14);
  --text-hi:var(--line-100);
  --text-mid:var(--line-400);
  --text-dim:var(--line-600);
  --shadow-lg:0 30px 70px -30px rgba(0,0,0,.8);
  --shadow-card:0 18px 40px -22px rgba(0,0,0,.7);

  --tint-015:rgba(255,255,255,.02);
  --tint-02:rgba(255,255,255,.03);
  --tint-03:rgba(255,255,255,.04);
  --tint-04:rgba(255,255,255,.05);
  --tint-045:rgba(255,255,255,.055);
  --tint-05:rgba(255,255,255,.065);
  --tint-06:rgba(255,255,255,.09);

  --hero-scrim:linear-gradient(180deg,rgba(6,6,11,.55) 0%,rgba(6,6,11,.78) 55%,var(--obsidian-950) 100%);
  --page-wash:var(--obsidian-950);
  --surface-1:rgba(22,22,41,.72);
  --surface-1-solid:var(--obsidian-850);
  --surface-2:rgba(13,13,25,.76);
  --surface-gradient:linear-gradient(160deg,rgba(29,29,50,.85),rgba(13,13,25,.68));
  --header-bg:rgba(6,6,11,.78);
  --footer-bg:var(--obsidian-900);
  --mobile-nav-bg:rgba(6,6,11,.98);
  --overlay-scrim:rgba(3,3,7,.65);
  --overlay-strong:rgba(3,3,7,.84);
  --dropdown-bg:var(--obsidian-800);
  --brand-mono-fg:#ffffff;
  --grid-line-rgb:255,255,255;

  color-scheme: dark;
}
html[lang="ar"] :is(h1,h2,h3,h4,.brand-name,.eyebrow,.scope-title,.btn,.nav-link){
  font-family:'Tajawal',sans-serif;
}
html[lang="ar"]{
  --font-display:'Tajawal',sans-serif;
  --font-body:'Tajawal',sans-serif;
}
html[dir="rtl"] .hero-ctas,
html[dir="rtl"] .contact-links,
html[dir="rtl"] .social-row{direction:rtl;}
html[dir="rtl"] .offer-specs i,
html[dir="rtl"] .why-list i{margin-inline-end:0;margin-inline-start:.7rem;}

*{box-sizing:border-box;}
html{overflow-x:hidden;}
body,
header,
.offer-card,.shop-card,.brand-item,.util-btn,.faq-item,.testi-card,
.social-row a,.btn-outline-ghost,.contact-links i{
  transition:background-color .4s var(--ease-bezier-soft),border-color .4s var(--ease-bezier-soft),color .4s var(--ease-bezier-soft),box-shadow .4s var(--ease-bezier-soft);
}
body{
  margin:0;
  background:var(--bg);
  color:var(--text-hi);
  font-family:var(--font-body);
  font-size:16px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  position:relative;
}

/* Ambient grid + glow wash behind entire page */
body::before{
  content:"";
  position:fixed;inset:0;z-index:-2;
  background:
    radial-gradient(1100px 600px at 82% -10%, rgba(5,4,252,.12), transparent 60%),
    radial-gradient(900px 500px at -10% 30%, rgba(5,4,252,.05), transparent 60%),
    var(--page-wash);
}
body::after{
  content:"";
  position:fixed;inset:0;z-index:-1;pointer-events:none;
  background-image:
    linear-gradient(rgba(var(--grid-line-rgb),.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(var(--grid-line-rgb),.035) 1px, transparent 1px);
  background-size:64px 64px;
  mask-image:radial-gradient(1200px 900px at 50% 0%, #000 0%, transparent 75%);
}

/* Grid children default to a content-based automatic minimum width, which
   lets long unwrapped text (nowrap buttons, headings, mono labels) force a
   track wider than the viewport on small screens even though the track
   itself is `1fr`. Resetting the min-width on every grid's direct children
   keeps each section obeying its actual box instead of overflowing it. */
.hero-inner>*,.vs-stack>*,.card-grid>*,.workflow>*,.quote-grid>*,
.quickview-panel>*,.why-grid>*,.why-list--grid>*,.contact-grid>*,
.form-row--split>*{min-width:0;}

.container{max-width:var(--container-w);margin-inline:auto;padding-inline:1.4rem;width:100%;}
@media (min-width:640px){.container{padding-inline:2rem;}}
@media (min-width:1024px){.container{padding-inline:2.5rem;}}
@media (min-width:1800px){.container{padding-inline:3.5rem;}}

::selection{background:var(--neon-500);color:#0b0d11;}

@media (prefers-reduced-motion: reduce){
  *{animation-duration:0.001ms !important;animation-iteration-count:1 !important;transition-duration:0.001ms !important;scroll-behavior:auto !important;}
}

a{color:inherit;text-decoration:none;}
h1,h2,h3,h4{font-family:var(--font-display);color:var(--text-hi);font-weight:600;letter-spacing:-.01em;margin:0;}
h1{font-size:clamp(2.3rem,4.6vw,4rem);line-height:1.04;font-weight:600;overflow-wrap:break-word;word-break:break-word;}
h2{font-size:clamp(2.1rem,4vw,3.2rem);line-height:1.08;font-weight:700;letter-spacing:-.015em;}
h3{font-size:1.28rem;font-weight:600;}
p{color:var(--text-mid);}

/* Standard accessible "visually hidden until focused" technique. A large
   negative left/right offset (the older approach) pushes the element far
   outside the viewport bounds, which most browsers happily ignore for
   scroll purposes in LTR — but in an RTL document that same offset gets
   measured on the opposite scroll edge and inflates the page's scrollable
   width by ~1000px. Clipping to a 1px box in place avoids that entirely
   and works identically in both directions. */
.skip-link{
  position:absolute;top:auto;left:0;width:1px;height:1px;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;
  background:var(--accent);color:#0b0d11;padding:.7rem 1.2rem;z-index:2000;font-weight:600;
}
.skip-link:focus{
  top:0;width:auto;height:auto;overflow:visible;clip:auto;clip-path:none;white-space:normal;
}
html[dir="rtl"] .skip-link{left:auto;right:0;}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;}

.eyebrow{
  display:inline-flex;align-items:center;gap:.6rem;
  font-family:var(--font-mono);font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--neon-300);margin:0 0 1rem;
}
.eyebrow-dot{width:7px;height:7px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 4px var(--neon-glow-soft);animation:pulse-dot 2.2s ease-in-out infinite;flex:none;}
@keyframes pulse-dot{0%,100%{opacity:1;transform:scale(1);}50%{opacity:.55;transform:scale(.8);}}

/* ---------------- BUTTONS ----------------
   Standardized hover language across every CTA: no position tracking,
   no per-button translate — hover reads as a scale(1.02) + a colored
   glow that matches the button's own role color. Colors are role-coded:
   Primary (.btn-cta) = electric blue. Secondary (.btn-outline-ghost) =
   glass / dark-grey outline, deliberately colorless so it never
   competes with the primary blue. Buy actions (.btn-whatsapp) =
   emerald green, reserved for commerce/purchase intent. */
.btn{
  position:relative;display:inline-flex;align-items:center;justify-content:center;gap:.6rem;
  font-family:var(--font-display);font-weight:600;letter-spacing:.01em;
  font-size:.92rem;padding:.95rem 1.7rem;
  border:1px solid transparent;cursor:pointer;
  clip-path:var(--clip-card-sm);
  transition:transform .22s var(--ease-bezier-soft),box-shadow .25s ease,background .25s ease,border-color .25s ease,color .25s ease;
  white-space:nowrap;
  transform-origin:center;
}
.btn:active{transform:scale(.98);}

.btn-cta{background:var(--brand-500);color:#fff;box-shadow:0 0 15px rgba(5,4,252,.6),0 12px 28px -10px var(--neon-glow);}
.btn-cta:hover{transform:scale(1.02);background:var(--brand-400);box-shadow:0 0 0 1px rgba(255,255,255,.12) inset,0 0 22px rgba(5,4,252,.75),0 0 34px -4px var(--neon-glow),0 18px 36px -14px var(--neon-glow);color:#fff;}
.btn-cta:active{transform:scale(.98);background:var(--brand-600);}

.btn-outline-ghost{border-color:rgba(255,255,255,.14);color:var(--text-hi);background:rgba(255,255,255,.04);backdrop-filter:blur(10px);}
.btn-outline-ghost:hover{transform:scale(1.02);border-color:rgba(255,255,255,.28);background:rgba(255,255,255,.09);box-shadow:0 0 24px -10px rgba(255,255,255,.2);}

.btn-whatsapp{background:linear-gradient(135deg,var(--emerald-500),var(--emerald-600));color:#fff;}
.btn-whatsapp:hover{transform:scale(1.02);box-shadow:0 0 0 1px rgba(255,255,255,.12) inset,0 0 30px -6px var(--emerald-glow),0 16px 30px -14px var(--emerald-glow);color:#fff;}

.btn-lg{padding:1.1rem 2.1rem;font-size:.98rem;}
.btn-block{width:100%;}
.util-btn{
  display:inline-flex;align-items:center;gap:.4rem;background:var(--tint-03);
  border:1px solid var(--glass-border);color:var(--text-hi);font-family:var(--font-mono);
  font-size:.74rem;letter-spacing:.05em;padding:.5rem .75rem;cursor:pointer;clip-path:var(--clip-card-sm);
  transition:border-color .2s ease, background .2s ease, transform .2s var(--ease-bezier-soft);
}
.util-btn:hover{border-color:var(--glass-border-strong);background:var(--tint-06);transform:scale(1.02);}
#themeToggle{position:relative;overflow:hidden;}
.theme-icon{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%) rotate(0deg) scale(1);
  transition:transform .5s var(--ease-bounce),opacity .35s var(--ease-bezier-soft);opacity:0;}
.theme-icon--sun{color:var(--neon-400);}
.theme-icon--moon{color:var(--cyan-400);}
html[data-theme="light"] .theme-icon--sun{opacity:1;transform:translate(-50%,-50%) rotate(0deg) scale(1);}
html[data-theme="light"] .theme-icon--moon{opacity:0;transform:translate(-50%,-50%) rotate(-90deg) scale(.4);}
html[data-theme="dark"] .theme-icon--moon{opacity:1;transform:translate(-50%,-50%) rotate(0deg) scale(1);}
html[data-theme="dark"] .theme-icon--sun{opacity:0;transform:translate(-50%,-50%) rotate(90deg) scale(.4);}
.util-btn--icon{width:2.4rem;height:2.4rem;padding:0;justify-content:center;}


/* ---------------- LAYOUT UTILS (bootstrap replacements) ---------------- */
.d-none{display:none !important;}
.d-xl-none{display:inline-flex !important;}
.d-xl-inline-flex{display:none !important;}
.d-lg-none{display:inline-flex !important;}
@media (min-width:1200px){
  .d-xl-none{display:none !important;}
  .d-xl-inline-flex{display:inline-flex !important;}
}
@media (min-width:992px){
  .d-lg-none{display:none !important;}
}

/* ---------------- SCROLL PROGRESS ---------------- */
.scroll-progress{position:fixed;top:0;left:0;height:3px;width:0%;
  background:linear-gradient(90deg,var(--neon-500),var(--cyan-500));z-index:2000;
  box-shadow:0 0 12px var(--neon-glow);transition:width .1s linear;}

/* ---------------- HEADER ---------------- */
.site-header{position:sticky;top:0;z-index:1000;--header-h:76px;width:100%;}
.site-header::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background:var(--header-bg);backdrop-filter:blur(18px) saturate(140%);
  border-bottom:1px solid var(--glass-border);
}
.header-inner{display:flex;align-items:center;justify-content:space-between;gap:1.6rem;height:var(--header-h);position:relative;}
.brand{display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:.2rem;flex:none;min-width:0;}
.brand-logo{display:block;height:34px;width:auto;max-width:44vw;flex:none;filter:drop-shadow(0 0 10px var(--neon-glow-soft));transition:transform .25s var(--ease-bezier);}
.brand:hover .brand-logo{transform:translateY(-1px);}
.brand-tag{display:block;font-family:var(--font-mono);font-size:.6rem;letter-spacing:.13em;text-transform:uppercase;color:var(--text-dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:44vw;}

/* Desktop-only centered nav. Hidden below 1200px — the mobile hamburger
   opens the dedicated .purewear-mobile-drawer instead (see further down),
   so there's no longer a "double duty" element trying to be both a
   centered inline nav and a full-screen mobile overlay. */
.main-nav{display:none;}
.main-nav ul{list-style:none;display:flex;gap:1.5rem;margin:0;padding:0;white-space:nowrap;}
.nav-link{font-family:var(--font-mono);font-size:.78rem;letter-spacing:.03em;color:var(--text-mid);position:relative;padding:.4rem 0;transition:color .2s ease;}
.nav-link::after{content:"";position:absolute;left:0;right:100%;bottom:-2px;height:1.5px;background:var(--accent);transition:right .25s ease;}
.nav-link:hover,.nav-link.active{color:var(--text-hi);}
.nav-link:hover::after,.nav-link.active::after{right:0;}

.header-utils{display:flex;align-items:center;gap:.55rem;flex:none;}
.nav-backdrop{display:none;}

@media (max-width:480px){
  .site-header{--header-h:64px;}
  .brand-logo{height:26px;}
  .brand-tag{display:none;}
  .header-utils{gap:.4rem;}
}
@media (min-width:481px) and (max-width:640px){
  .brand-logo{height:29px;}
}
/* Very small phones (iPhone SE-class, 320–359px): the full "EN ⇄ AR"
   language pill plus the theme + menu icon buttons don't all fit next
   to the logo. Collapse the language toggle down to just the current
   language code — still fully functional (one tap swaps it), just
   without the arrow icon and the alternate-language label. */
@media (max-width:359px){
  .brand-logo{height:23px;}
  .header-utils{gap:.35rem;}
  #langToggle{padding:.5rem .6rem;}
  #langToggle i,#langToggle .lang-alt{display:none;}
}

/* Desktop nav switches on at 1200px, same as before. The overlap that
   used to happen right around this threshold (Blog / News, FAQ, Contact
   crowding the language switcher) is fixed below with a tighter
   narrow-desktop spacing band instead of moving the breakpoint, so PC
   screens keep seeing the inline nav exactly like before. */
@media (min-width:1200px){
  .main-nav{display:flex;justify-content:center;position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);}
}
/* Narrow-desktop safety band: tightens gap/font right at the threshold,
   where the header-utils cluster (lang switcher + CTA) is still at full
   size and every pixel of breathing room helps. */
@media (min-width:1200px) and (max-width:1420px){
  .main-nav ul{gap:1rem;}
  .nav-link{font-size:.7rem;}
  .header-utils{gap:.4rem;}
  .header-utils .btn-cta{padding:.75rem 1.05rem;font-size:.78rem;}
}

@media (max-width:1199px){
  /* The header switches from sticky to fixed on mobile so it can never be
     scrolled out of view (clipped) while the drawer beneath it opens —
     it now sits in its own top-most layer above the drawer + overlay. */
  .site-header{position:fixed;top:0;left:0;right:0;z-index:9999;}
  /* Compensate for the header leaving normal flow so page content doesn't
     jump up underneath it. */
  body{padding-top:var(--header-h);}
  .nav-backdrop{display:none;}
  body.nav-open{overflow:hidden;}
}

/* ---------------- MOBILE NAV: BOTTOM-SHEET DRAWER ---------------- */
/* Dark-tech bottom sheet + backdrop that the hamburger (#navToggle) opens
   below the 1200px desktop-nav breakpoint. Fully separate from .main-nav
   (which only renders on desktop, unchanged from before) so this
   component owns its own markup, styling, and open/close lifecycle. */

.purewear-nav-overlay{
  position:fixed;inset:0;z-index:9990;
  background:rgba(3,6,14,.62);
  backdrop-filter:blur(6px);
  opacity:0;visibility:hidden;
  transition:opacity .3s ease,visibility 0s linear .3s;
}
.purewear-nav-overlay.open{
  opacity:1;visibility:visible;
  transition:opacity .3s ease,visibility 0s linear 0s;
}

.purewear-mobile-drawer{
  position:fixed;left:0;right:0;bottom:0;z-index:9995;
  max-height:min(84vh,640px);
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
  background:#0b0f17;
  border-top:1px solid rgba(0,85,255,.3);
  border-radius:20px 20px 0 0;
  box-shadow:0 -24px 60px rgba(0,0,0,.55), 0 0 40px -8px rgba(0,85,255,.18);
  padding:.9rem 1.5rem calc(env(safe-area-inset-bottom,0px) + 1.4rem);
  transform:translateY(100%);
  transform:translate3d(0,100%,0);
  will-change:transform;
  transition:transform .4s cubic-bezier(0.16,1,0.3,1);
}
.purewear-mobile-drawer.open{transform:translateY(0);transform:translate3d(0,0,0);}

.purewear-drawer-handle{width:36px;height:4px;border-radius:2px;background:rgba(226,232,240,.22);margin:0 auto .8rem;}

.purewear-drawer-close{
  position:sticky;top:0;z-index:2;
  display:flex;align-items:center;justify-content:center;
  width:2.75rem;height:2.75rem;margin:0 auto 1.1rem;
  background:#131b2e;border:1px solid rgba(0,85,255,.28);
  border-radius:50%;color:#e2e8f0;font-size:.95rem;cursor:pointer;
  transition:transform .18s var(--ease-bezier-soft,ease), background .2s ease, border-color .2s ease;
}
.purewear-drawer-close:hover{background:#182240;border-color:rgba(0,85,255,.5);}
.purewear-drawer-close:active{transform:scale(.88);}

.purewear-drawer-nav ul{list-style:none;margin:0;padding:0;}
.purewear-drawer-nav li{border-bottom:1px solid rgba(226,232,240,.08);}
.purewear-drawer-nav li:last-child{border-bottom:none;}
.purewear-drawer-link{
  display:flex;align-items:center;justify-content:space-between;gap:.75rem;
  padding:1.05rem .3rem;color:#e2e8f0;font-family:var(--font-mono);
  font-size:1rem;letter-spacing:.02em;
  transition:color .22s ease, padding-left .22s ease, background-color .22s ease;
}
.purewear-drawer-link .drawer-link-arrow{
  opacity:0;transform:translateX(-6px);color:#0055ff;font-size:.8rem;flex:none;
  transition:opacity .22s ease, transform .22s ease;
}
.purewear-drawer-link:hover,
.purewear-drawer-link:active,
.purewear-drawer-link.active{
  color:#0055ff;padding-left:.85rem;background-color:rgba(0,85,255,.06);
}
.purewear-drawer-link:hover .drawer-link-arrow,
.purewear-drawer-link:active .drawer-link-arrow,
.purewear-drawer-link.active .drawer-link-arrow{opacity:1;transform:translateX(0);}

.purewear-drawer-foot{display:flex;gap:.7rem;margin-top:1.1rem;padding-top:1.1rem;border-top:1px solid rgba(226,232,240,.08);}
.purewear-drawer-foot .btn-cta{flex:1;justify-content:center;}

@media (min-width:1200px){
  .purewear-mobile-drawer,.purewear-nav-overlay{display:none !important;}
}
@media (prefers-reduced-motion: reduce){
  .purewear-mobile-drawer{transition:none;}
  .purewear-nav-overlay{transition:none;}
}

/* ---------------- HERO ---------------- */
.hero{position:relative;min-height:min(880px,100svh);display:flex;align-items:stretch;overflow:hidden;isolation:isolate;}
.hero-swiper{position:absolute;inset:0;z-index:0;direction:ltr;}
.hero-swiper .swiper-slide{position:relative;}
.hero-slide-media{position:absolute;inset:0;background-size:cover;background-position:center;}
.hero-slide-media::after{content:"";position:absolute;inset:0;
  background:
    linear-gradient(180deg, rgba(6,7,10,.55) 0%, rgba(6,7,10,.78) 55%, var(--obsidian-950) 100%),
    linear-gradient(90deg, rgba(6,7,10,.55) 0%, rgba(6,7,10,.15) 45%, rgba(6,7,10,.1) 100%);
}
.hero-inner{position:relative;z-index:2;display:grid;grid-template-columns:1.15fr .85fr;gap:2.5rem;align-items:center;
  padding-block:clamp(6.5rem,14vh,9rem) 3rem;min-height:min(880px,100svh);width:100%;}
@media (max-width:991px){.hero-inner{grid-template-columns:1fr;padding-block:6.5rem 4.5rem;}}
@media (max-width:479px){.hero-inner{padding-block:6.5rem 5rem;}}

/* ---- Mobile hero fix: headline crunch / overlap ----
   The desktop clamp() floors at 2.3rem regardless of viewport, and the
   per-word reveal spans (.hero-copy .word, split by main.js) combined
   with the tight 1.04 line-height meant a wrapped 2-line headline on
   narrow phones read as cramped/overlapping. Below 768px we drop the
   floor, open up the leading, and give hero-sub/eyebrow breathing room
   to match. */
@media (max-width:768px){
  .hero-copy h1{font-size:clamp(1.85rem,8vw,2.5rem);line-height:1.18;letter-spacing:-.005em;}
  .hero-copy .eyebrow{font-size:.66rem;line-height:1.5;}
  .hero-sub{font-size:.98rem;line-height:1.6;margin-top:1rem;}
  .hero-ctas{gap:.8rem;margin-top:1.6rem;}
}
@media (max-width:479px){
  .hero-copy h1{font-size:clamp(1.7rem,9vw,2.15rem);line-height:1.2;}
}

.hero-copy h1{overflow:hidden;}
.hero-copy .word{display:inline-block;will-change:transform;}
.hero-sub{font-size:1.08rem;max-width:44ch;margin:1.2rem 0 0;color:rgba(255,255,255,.82);}
.hero-ctas{display:flex;flex-wrap:wrap;gap:1rem;margin-top:2rem;}

.hero-stats{display:flex;flex-wrap:wrap;gap:0;margin:2.6rem 0 0;padding:0;list-style:none;
  border-top:1px solid rgba(255,255,255,.18);}
.hero-stats>div{padding:1.1rem 1.6rem 0 0;margin-right:1.6rem;border-right:1px solid rgba(255,255,255,.18);}
.hero-stats>div:last-child{border-right:none;margin-right:0;}
@media (max-width:359px){
  .hero-stats>div{padding-right:1rem;margin-right:1rem;}
  .stat-num{font-size:1.4rem;}
}
.stat-num{display:block;font-family:var(--font-mono);font-size:1.7rem;font-weight:600;color:var(--accent);letter-spacing:-.02em;}
.hero-stats dd{margin:.2rem 0 0;font-size:.74rem;color:rgba(255,255,255,.66);text-transform:uppercase;letter-spacing:.06em;}

/* The hero always renders over a dark photo + scrim (independent of the
   light/dark theme toggle below), so its heading and ghost CTA must always
   be light-on-dark rather than following the theme's body text color. */
.hero-copy h1{color:#ffffff;}
.hero .btn-outline-ghost{color:#ffffff;border-color:rgba(255,255,255,.4);background:rgba(255,255,255,.08);}
.hero .btn-outline-ghost:hover{border-color:#ffffff;background:rgba(255,255,255,.16);}

.hero-visual{position:relative;display:flex;flex-direction:column;gap:1.2rem;}
.hero-badge-float{
  position:absolute;top:-2.6rem;right:1rem;background:var(--surface-1);backdrop-filter:blur(14px);
  border:1px solid var(--glass-border-strong);clip-path:var(--clip-card-sm);padding:.7rem 1.1rem;
  font-family:var(--font-mono);font-size:.72rem;color:var(--cyan-400);display:flex;align-items:center;gap:.5rem;
  box-shadow:var(--shadow-card);z-index:3;
}
.hero-badge-float i{color:var(--ok);}

.scope-panel{
  position:relative;background:var(--surface-2);backdrop-filter:blur(24px) saturate(160%);
  border:1px solid rgba(5,4,252,.35);clip-path:var(--clip-card);
  padding:1.4rem 1.4rem 1.1rem;
  box-shadow:var(--shadow-lg), 0 0 34px rgba(5,4,252,.25);
}
.scope-panel::before{content:"";position:absolute;inset:0;padding:1px;clip-path:var(--clip-card);
  background:linear-gradient(120deg,var(--neon-glow),transparent 40%,var(--cyan-glow) 100%);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none;opacity:.55;}
.scope-head{display:flex;align-items:center;gap:.6rem;margin-bottom:.9rem;font-family:var(--font-mono);font-size:.72rem;letter-spacing:.08em;color:var(--text-mid);text-transform:uppercase;}
.scope-dot{width:7px;height:7px;border-radius:50%;background:var(--ok);box-shadow:0 0 8px var(--ok);flex:none;}
.scope-title{color:var(--text-hi);font-weight:600;}
.scope-status{margin-left:auto;color:var(--ok);font-weight:700;}
.scope-trace{width:100%;height:96px;display:block;overflow:visible;}
/* Smooth glowing waveform: a blurred wide duplicate path sits behind a
   crisp gradient-stroked path on top, giving the line a soft neon glow
   instead of a flat single stroke. Both share one draw-on-load +
   looping "sweep" animation so they stay perfectly in sync. */
.scope-line{fill:none;stroke-width:2.25;stroke-linecap:round;stroke-linejoin:round;
  stroke-dasharray:480;stroke-dashoffset:480;
  animation:draw-line 2.6s ease-out forwards .3s, sweep-line 4.4s linear 3s infinite;}
.scope-line.scope-line--glow{stroke:var(--neon-400);stroke-width:8;opacity:.4;filter:blur(5px);}
.scope-line:not(.scope-line--glow){filter:drop-shadow(0 0 4px var(--neon-glow)) drop-shadow(0 0 9px var(--cyan-glow));}
@keyframes draw-line{to{stroke-dashoffset:0;}}
@keyframes sweep-line{0%{stroke-dashoffset:0;}100%{stroke-dashoffset:-480;}}
.scope-telemetry{
  display:grid;grid-template-columns:1fr 1fr;gap:.5rem .9rem;
  margin:0 0 .9rem;padding:.75rem .85rem;
  background:var(--tint-03);border:1px solid var(--glass-border);border-radius:6px;
}
@media (max-width:380px){.scope-telemetry{grid-template-columns:1fr;}}
.scope-telemetry div{display:flex;align-items:baseline;justify-content:space-between;gap:.5rem;min-width:0;}
.scope-telemetry dt{font-family:var(--font-mono);font-size:.62rem;letter-spacing:.06em;text-transform:uppercase;color:var(--text-dim);margin:0;}
.scope-telemetry dd{font-family:var(--font-mono);font-size:.74rem;color:var(--text-hi);margin:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.scope-telemetry dd.is-ok{color:var(--ok);font-weight:600;}
.scope-pins{display:flex;gap:.6rem;margin:.9rem 0;flex-wrap:wrap;}
.pin{display:flex;flex-direction:column;align-items:center;gap:.3rem;font-family:var(--font-mono);font-size:.62rem;color:var(--text-dim);}
.pin span{width:8px;height:8px;border-radius:50%;background:var(--cyan-500);box-shadow:0 0 6px var(--cyan-glow);animation:pin-blink 2.4s ease-in-out infinite;animation-delay:calc(var(--d) * .25s);}
@keyframes pin-blink{0%,100%{opacity:.3;}50%{opacity:1;}}
.scope-log{font-family:var(--font-mono);font-size:.76rem;color:var(--text-mid);border-top:1px solid var(--glass-border);padding-top:.8rem;min-height:1.3em;}
.scope-log span{color:var(--ok);font-weight:600;}

/* ---------------- HERO CAROUSEL CONTROL — ECU pinout / diagnostic scrubber ----------------
   Standalone slider control for the hero: dashed circuit trace, square PCB-pad
   step nodes, and a glowing neon-blue orb handle. No card, capsule, header,
   or counter — just the bare control, using the site's electric-blue
   telemetry colours (see .scope-panel) instead of an off-brand cyan. */
.hcc{position:relative;z-index:5;}

/* Hero variant: sits in normal flow as the last item inside .hero-visual
   (directly under the scope/media card), centered and width-capped so it
   reads as one balanced unit with the card above it at every breakpoint —
   mobile, tablet, and desktop — instead of floating edge-to-edge over the
   whole hero section. */
#heroCarouselControl{
  position:relative;z-index:5;
  width:100%;max-width:300px;margin:.2rem auto 0;
}

.hcc-track{position:relative;height:34px;margin:0 3px;cursor:pointer;touch-action:pan-y;-webkit-tap-highlight-color:transparent;}
.hcc-track:focus-visible{outline:none;}
.hcc-track:focus-visible .hcc-trace{box-shadow:0 0 0 3px var(--neon-glow-soft);border-radius:3px;}
.hcc-trace{position:absolute;left:0;right:0;top:50%;translate:0 -50%;height:2px;border-radius:2px;
  background:repeating-linear-gradient(90deg,rgba(154,161,173,.55) 0 6px,rgba(154,161,173,.15) 6px 9px);}
.hcc-trace-fill{position:absolute;left:0;top:50%;translate:0 -50%;height:2px;border-radius:2px;width:0%;
  background:linear-gradient(90deg,var(--cyan-400),var(--neon-400));
  box-shadow:0 0 8px var(--neon-glow);transition:width .5s var(--ease-bezier);}

.hcc-nodes{position:absolute;inset:0;display:flex;align-items:center;justify-content:space-between;}
.hcc-node{
  position:relative;width:15px;height:15px;border-radius:3px;flex:none;
  border:none;padding:0;cursor:pointer;
  background:linear-gradient(160deg,var(--obsidian-700),var(--obsidian-850));
  box-shadow:inset 0 0 0 1px rgba(244,245,247,.16),inset 0 1px 1px rgba(255,255,255,.08);
  transition:box-shadow .3s ease,background .3s ease,transform .25s var(--ease-bounce);
}
.hcc-node::after{content:"";position:absolute;inset:4px;border-radius:1px;background:rgba(154,161,173,.4);transition:background .3s ease,box-shadow .3s ease;}
.hcc-node:hover{transform:translateY(-1px);}
.hcc-node:focus-visible{outline:2px solid var(--neon-300);outline-offset:2px;}
.hcc-node.is-active{background:linear-gradient(160deg,#2a2f3a,var(--obsidian-900));box-shadow:inset 0 0 0 1px rgba(104,104,253,.6),0 0 12px var(--neon-glow);}
.hcc-node.is-active::after{background:var(--neon-300);box-shadow:0 0 8px 1px var(--neon-300),0 0 16px 3px var(--neon-glow);}

.hcc-scrubber{
  position:absolute;top:50%;width:22px;height:22px;left:0;
  transform:translate(-50%,-50%);
  border-radius:50%;pointer-events:none;
  background:radial-gradient(circle at 35% 30%,#eef0ff,var(--neon-400) 55%,var(--neon-500) 100%);
  box-shadow:0 0 0 3px rgba(20,21,24,.9),0 0 14px 2px var(--neon-glow),0 2px 6px rgba(0,0,0,.5);
  transition:left .5s var(--ease-bezier);
}
.hcc-scrubber span{position:absolute;inset:6px;border-radius:50%;background:rgba(255,255,255,.9);}
.hcc-track.is-dragging .hcc-scrubber{transition:none;}

@media (min-width:576px) and (max-width:991px){
  #heroCarouselControl{max-width:340px;}
}
@media (min-width:992px){
  #heroCarouselControl{max-width:320px;}
}

/* Desktop: sits under the diagnostic panel column, clear of the copy/CTAs
   on the left. Uses an inset from the inline-end edge so it mirrors
   correctly (moves to the visual left) when the page switches to Arabic,
   instead of a plain `right` value that would stay pinned to the physical
   right and drift into the RTL-mirrored copy column. */
@media (min-width:992px){
  #heroCarouselControl{
    left:auto;translate:none;inset-inline-end:clamp(1.5rem,3vw,2.5rem);
    bottom:clamp(6.75rem,12vh,8.25rem);width:280px;
  }
}

.section{padding:clamp(4rem,8vw,6.5rem) 0;position:relative;}
.section--alt{background:linear-gradient(180deg,transparent,var(--tint-015) 20%,var(--tint-015) 80%,transparent);}
.section-head{max-width:58ch;margin-bottom:2.8rem;position:relative;}
.section-head h2{max-width:22ch;color:#ffffff;}
.section-head p{font-size:1.05rem;line-height:1.6;margin-top:1rem;max-width:60ch;}
/* Ambient embient glow seeded behind every section header, not just the
   hero — a soft blue bloom anchored to the eyebrow/heading corner so
   headers read as "lit" rather than flat text on flat background. */
.section-head::before{
  content:"";position:absolute;z-index:-1;top:-3.5rem;left:-4rem;
  width:22rem;height:16rem;pointer-events:none;
  background:radial-gradient(closest-side, var(--neon-glow-soft), transparent 72%);
  opacity:.9;filter:blur(6px);
}
html[dir="rtl"] .section-head::before{left:auto;right:-4rem;}
.why-grid--asym .section-head::before,
.section-head--center::before{left:50%;transform:translateX(-50%);}

/* ---------------- FIXED PARALLAX BACKGROUND SECTION ---------------- */
.section--parallax{position:relative;isolation:isolate;overflow:hidden;}
.section-parallax-bg{
  position:absolute;inset:0;z-index:-1;
  background-image:var(--parallax-img);background-size:cover;background-position:center;
  background-attachment:fixed;
}
.section-parallax-bg::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(8,11,17,.82) 0%,rgba(8,11,17,.7) 40%,rgba(8,11,17,.86) 100%);
}
@media (max-width:900px){.section-parallax-bg{background-attachment:scroll;}}

/* ---------------- LOW-OPACITY WATERMARK SECTION (Why Us) ---------------- */
.section--watermark{position:relative;isolation:isolate;overflow:hidden;}
.section-watermark-bg{
  position:absolute;inset:0;z-index:-1;
  background-image:var(--watermark-img);background-size:cover;background-position:center;
  opacity:.1;filter:grayscale(.3);
  mask-image:radial-gradient(900px 500px at 50% 40%,#000 0%,transparent 75%);
}

/* ---------------- VEHICLE SEARCH / TUNING CONFIGURATOR ---------------- */
.vs-section{position:relative;}
.vs-card{
  position:relative;background:var(--surface-gradient);
  backdrop-filter:blur(20px);border:1px solid var(--glass-border-strong);
  clip-path:var(--clip-card);padding:2rem;box-shadow:var(--shadow-lg);
}
.vs-card::after{content:"";position:absolute;top:0;left:14px;right:14px;height:1px;
  background:linear-gradient(90deg,transparent,var(--neon-glow),var(--cyan-glow),transparent);opacity:.8;}
.vs-stack{display:grid;grid-template-columns:repeat(6,1fr);gap:1rem;}
@media (max-width:1200px){.vs-stack{grid-template-columns:repeat(3,1fr);}}
@media (max-width:991px){.vs-stack{grid-template-columns:repeat(2,1fr);}}
@media (max-width:560px){.vs-stack{grid-template-columns:1fr;}}
.vs-field label{display:flex;align-items:center;gap:.5rem;font-family:var(--font-mono);font-size:.68rem;
  text-transform:uppercase;letter-spacing:.08em;color:var(--text-dim);margin-bottom:.5rem;}
.vs-field label i{color:var(--accent);}
.vs-field--phone{margin-top:1.1rem;}
input.form-select{
  width:100%;background:var(--tint-03);border:1px solid var(--glass-border-strong);color:var(--text-hi);
  clip-path:var(--clip-card-sm);padding:.75rem .9rem;font-family:var(--font-body);
}
input.form-select:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--neon-glow-soft);}
input.form-select::placeholder{color:var(--text-dim);}
.vs-submit{margin-top:1.6rem;}

/* ---------------- LIVE COMPATIBILITY FILTER (Manufacturer -> System) ---------------- */
.compat-widget{
  position:relative;margin-top:1.6rem;background:var(--surface-1);backdrop-filter:blur(16px);
  border:1px solid var(--glass-border-strong);clip-path:var(--clip-card);padding:1.9rem 2rem 2.1rem;
}
.compat-head h3{font-size:1.2rem;margin-bottom:.35rem;}
.compat-head p{font-size:.88rem;margin:0 0 1.3rem;max-width:60ch;}
.compat-row{display:flex;flex-wrap:wrap;align-items:center;gap:.9rem;margin-top:.9rem;}
.compat-row-label{flex:none;width:8.5rem;font-family:var(--font-mono);font-size:.7rem;text-transform:uppercase;
  letter-spacing:.07em;color:var(--text-dim);}
.compat-pills{display:flex;flex-wrap:wrap;gap:.5rem;}
.compat-pill{
  font-family:var(--font-mono);font-size:.76rem;padding:.5rem 1rem;background:var(--tint-03);
  border:1px solid var(--glass-border-strong);color:var(--text-mid);cursor:pointer;clip-path:var(--clip-card-sm);
  transition:all .2s ease;
  /* Standardized sizing so every pill — regardless of label length —
     reads as the same control across manufacturer, engine and system rows. */
  display:inline-flex;align-items:center;justify-content:center;
  min-width:6.5rem;min-height:2.6rem;line-height:1.2;text-align:center;
}
.compat-pill.active{background:var(--cyan-500);color:#fff;border-color:transparent;box-shadow:0 8px 20px -10px var(--cyan-glow);}
.compat-pill:hover:not(.active){border-color:var(--text-mid);color:var(--text-hi);}
.compat-output{
  margin-top:1.5rem;padding:1.2rem 1.4rem;background:var(--tint-03);border:1px solid var(--glass-border);
  clip-path:var(--clip-card-sm);
}
.compat-output-head{display:flex;align-items:center;gap:.6rem;margin-bottom:.9rem;font-family:var(--font-mono);
  font-size:.72rem;text-transform:uppercase;letter-spacing:.08em;color:var(--text-dim);}
.compat-output-head i{color:var(--ok);}
/* Uniform card grid: equal-height rows (grid default stretch) plus a
   fixed minimum card height so short and long descriptions still line up. */
.compat-tools{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:.8rem;align-items:stretch;}
.compat-tool{
  display:flex;align-items:flex-start;gap:.8rem;padding:1rem 1.05rem;background:var(--tint-02);
  border:1px solid var(--glass-border);border-radius:6px;min-height:96px;
}
.compat-tool i{color:var(--cyan-500);margin-top:.15rem;flex:none;width:1.1rem;text-align:center;}
.compat-tool b{display:block;font-size:.86rem;color:var(--text-hi);}
.compat-tool span{display:block;font-family:var(--font-mono);font-size:.72rem;line-height:1.5;color:var(--text-dim);margin-top:.3rem;}
@media (max-width:560px){.compat-row{flex-direction:column;align-items:flex-start;}.compat-row-label{width:auto;}.compat-pill{min-width:5.5rem;}}

/* Tom Select restyle */
.ts-wrapper{--ts-pr-clear-button: 25px;}
.ts-wrapper.single .ts-control,.ts-control{
  background:var(--tint-03) !important;border:1px solid var(--glass-border-strong) !important;
  clip-path:var(--clip-card-sm);color:var(--text-hi) !important;font-family:var(--font-body);
  padding:.75rem .9rem !important;min-height:46px;box-shadow:none !important;
  transition:border-color .2s ease, box-shadow .2s ease;
}
.ts-wrapper.focus .ts-control{border-color:var(--accent) !important;box-shadow:0 0 0 3px var(--neon-glow-soft) !important;}
.ts-wrapper.disabled .ts-control{opacity:.4;}
.ts-dropdown{background:var(--dropdown-bg) !important;border:1px solid var(--glass-border-strong) !important;
  color:var(--text-hi) !important;font-family:var(--font-body);z-index:1500 !important;box-shadow:var(--shadow-card);}
.ts-dropdown .active{background:rgba(5,4,252,.14) !important;color:var(--text-hi) !important;}
.ts-dropdown-input{background:transparent !important;color:var(--text-hi) !important;}
.ts-wrapper .item{color:var(--text-hi) !important;}
select.form-select{
  width:100%;background:var(--tint-03);border:1px solid var(--glass-border-strong);color:var(--text-hi);
  clip-path:var(--clip-card-sm);padding:.75rem .9rem;font-family:var(--font-body);
}

.vs-result{margin-top:1.6rem;padding:1.4rem;background:rgba(5,4,252,.06);border:1px solid rgba(5,4,252,.28);
  clip-path:var(--clip-card-sm);animation:reveal-up .5s ease both;}
.vs-result-head{display:flex;align-items:center;gap:.6rem;font-weight:600;color:var(--cyan-400);margin-bottom:.9rem;}
.vs-result-chips{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:.9rem;}
.vs-chip{font-family:var(--font-mono);font-size:.72rem;padding:.35rem .7rem;background:var(--tint-05);
  border:1px solid var(--glass-border-strong);clip-path:var(--clip-card-sm);color:var(--text-hi);}
.vs-result p{margin:0 0 1rem;}
@keyframes reveal-up{from{opacity:0;transform:translateY(10px);}to{opacity:1;transform:translateY(0);}}

/* ---------------- FILTER TABS ---------------- */
.filter-tabs{display:flex;flex-wrap:wrap;gap:.7rem;margin-bottom:2.4rem;}
.filter-tab{
  font-family:var(--font-mono);font-size:.74rem;letter-spacing:.04em;text-transform:uppercase;
  padding:.6rem 1.15rem;background:var(--tint-03);border:1px solid var(--glass-border-strong);
  color:var(--text-mid);cursor:pointer;clip-path:var(--clip-card-sm);transition:all .2s ease;
}
.filter-tab:hover{color:var(--text-hi);border-color:var(--glass-border-strong);}
.filter-tab.active{background:linear-gradient(135deg,var(--neon-400),var(--neon-500));color:#fff;border-color:transparent;}

/* ---------------- HARDWARE & OE SOFTWARE SWITCHER ---------------- */
.hwsw-tabs{display:flex;flex-wrap:wrap;gap:.6rem;margin-bottom:1rem;}
.hwsw-subtabs{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:1.6rem;padding-bottom:1.4rem;border-bottom:1px solid var(--glass-border);}
.hwsw-subtab{
  font-family:var(--font-mono);font-size:.72rem;padding:.45rem .9rem;background:transparent;
  border:1px solid var(--glass-border);color:var(--text-dim);cursor:pointer;clip-path:var(--clip-card-sm);
  transition:all .2s ease;
}
.hwsw-subtab:hover{color:var(--text-hi);border-color:var(--text-mid);}
.hwsw-subtab.active{background:var(--tint-05);color:var(--text-hi);border-color:var(--glass-border-strong);}
.hwsw-tab{
  font-family:var(--font-mono);font-size:.76rem;letter-spacing:.03em;
  padding:.65rem 1.15rem;background:var(--tint-03);border:1px solid var(--glass-border-strong);
  color:var(--text-mid);cursor:pointer;clip-path:var(--clip-card-sm);transition:all .2s ease;
}
.hwsw-tab:hover{color:var(--text-hi);border-color:var(--text-mid);}
.hwsw-tab.active{background:linear-gradient(135deg,var(--cyan-400),var(--cyan-500));color:#fff;border-color:transparent;box-shadow:0 10px 24px -12px var(--cyan-glow);}

.hwsw-panels{position:relative;}
.hwsw-panel{
  display:none;grid-template-columns:.9fr 1.1fr;gap:0;
  background:var(--surface-1);backdrop-filter:blur(16px);border:1px solid var(--glass-border-strong);
  clip-path:var(--clip-card);overflow:hidden;
}
.hwsw-panel.active{display:grid;animation:reveal-up .45s var(--ease-bezier-soft);}
@media (max-width:820px){.hwsw-panel{grid-template-columns:1fr;}}
.hwsw-panel img{width:100%;height:100%;min-height:260px;object-fit:cover;display:block;transition:transform .6s var(--ease-bezier-soft);}
.hwsw-panel:hover img{transform:scale(1.08);}
.hwsw-panel-body{padding:2rem 2.2rem;display:flex;flex-direction:column;align-items:flex-start;gap:.4rem;}
.hwsw-panel-body h3{font-size:1.5rem;margin:.2rem 0 .6rem;}
.hwsw-panel-body p{font-size:.94rem;margin:0 0 1.2rem;}
.hwsw-badges{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:1.4rem;}
.hwsw-badge{
  display:inline-flex;align-items:center;gap:.4rem;font-family:var(--font-mono);font-size:.7rem;
  color:var(--text-mid);background:var(--tint-04);border:1px solid var(--glass-border);
  padding:.4rem .7rem;border-radius:5px;
}
.hwsw-badge i{color:var(--cyan-500);}
.hwsw-badge--stock{color:var(--ok);border-color:rgba(47,168,106,.35);background:rgba(47,168,106,.1);box-shadow:0 0 12px -6px rgba(47,168,106,.6);}
.hwsw-badge--stock i{color:var(--ok);}

/* ---------------- CARDS (spotlight + tilt) ---------------- */
.card-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.4rem;}
@media (max-width:991px){.card-grid{grid-template-columns:repeat(2,1fr);}}
@media (max-width:640px){.card-grid{grid-template-columns:1fr;}}

.offer-card{
  --mx:50%;--my:50%;
  position:relative;background:var(--bg-card);backdrop-filter:blur(14px);
  border:1px solid var(--glass-border);clip-path:var(--clip-card);padding:1.8rem;
  display:none;flex-direction:column;overflow:hidden;transform-style:preserve-3d;
  opacity:0;transform:translateY(18px) scale(.95);
  transition:transform .45s var(--ease-bezier),border-color .25s ease,box-shadow .25s ease,opacity .4s var(--ease-bezier-soft),background-color .4s var(--ease-bezier-soft);
}
.offer-card.is-visible{display:flex;opacity:1;transform:translateY(0) scale(1);}
.offer-card.is-hiding{display:flex;opacity:0;transform:translateY(-10px) scale(.95);pointer-events:none;}
.offer-card::before{
  content:"";position:absolute;inset:0;opacity:0;transition:opacity .3s ease;pointer-events:none;
  background:radial-gradient(220px circle at var(--mx) var(--my), rgba(5,4,252,.16), transparent 65%);
}
.offer-card:hover{border-color:var(--glass-border-strong);box-shadow:var(--shadow-card);}
.offer-card:hover::before{opacity:1;}
.offer-badge{align-self:flex-start;font-family:var(--font-mono);font-size:.64rem;letter-spacing:.08em;text-transform:uppercase;
  color:var(--cyan-400);background:rgba(5,4,252,.1);border:1px solid rgba(5,4,252,.25);padding:.3rem .65rem;margin-bottom:1.1rem;clip-path:var(--clip-card-sm);}
.offer-icon{width:52px;height:52px;display:flex;align-items:center;justify-content:center;font-size:1.35rem;
  background:linear-gradient(135deg,rgba(5,4,252,.18),rgba(5,4,252,.04));border:1px solid rgba(5,4,252,.25);
  color:var(--neon-300);margin-bottom:1.1rem;clip-path:var(--clip-card-sm);
  transition:transform .5s var(--ease-bounce),box-shadow .4s var(--ease-bezier-soft),background .4s ease;}
.offer-card:hover .offer-icon{transform:scale(1.12) rotate(-6deg);box-shadow:0 10px 26px -10px var(--neon-glow);}
.offer-card h3{margin-bottom:.6rem;}
.offer-card p{font-size:.94rem;margin:0 0 1.1rem;}
.offer-specs{list-style:none;margin:0 0 1.4rem;padding:0;display:flex;flex-direction:column;gap:.5rem;}
.offer-specs li{display:flex;align-items:center;gap:.6rem;font-size:.86rem;color:var(--text-mid);}
.offer-specs i{color:var(--accent);font-size:.75rem;}
.offer-cta{margin-top:auto;align-self:flex-start;background:none;border:none;color:var(--text-hi);
  font-family:var(--font-display);font-weight:600;font-size:.92rem;cursor:pointer;display:flex;align-items:center;gap:.5rem;
  padding:0;border-bottom:1px solid var(--glass-border-strong);padding-bottom:.3rem;transition:border-color .2s ease,color .2s ease,gap .2s ease;}
.offer-cta::after{content:"→";transition:transform .2s ease;}
.offer-cta:hover{color:var(--accent);border-color:var(--accent);}
.offer-cta:hover::after{transform:translateX(4px);}

/* ---------------- MARQUEE ---------------- */
.brand-marquee{overflow:hidden;position:relative;-webkit-mask:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
  mask:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);}
.brand-track{display:flex;gap:2.2rem;width:max-content;animation:marquee 36s linear infinite;}
.brand-track:hover{animation-play-state:paused;}
.brand-item{display:flex;align-items:center;gap:.7rem;white-space:nowrap;padding:.6rem .9rem .6rem .6rem;
  background:var(--tint-02);border:1px solid var(--glass-border);clip-path:var(--clip-card-sm);
  transition:border-color .35s var(--ease-bezier-soft),background .35s var(--ease-bezier-soft),transform .4s var(--ease-bounce),box-shadow .4s var(--ease-bezier-soft);}
.brand-item:hover{border-color:var(--glass-border-strong);background:var(--tint-045);transform:translateY(-4px) scale(1.03);box-shadow:var(--shadow-card);}
.brand-mono{
  display:flex;align-items:center;justify-content:center;flex:none;width:38px;height:38px;
  font-family:var(--font-mono);font-weight:700;font-size:.72rem;letter-spacing:.01em;
  clip-path:var(--clip-card-sm);color:var(--brand-mono-fg);
  background:linear-gradient(135deg,var(--neon-400),var(--neon-500));
  box-shadow:0 6px 14px -6px var(--neon-glow);
  transition:transform .5s var(--ease-bounce);
}
.brand-item:hover .brand-mono{transform:rotate(-8deg) scale(1.08);}
.brand-item:nth-child(3n+2) .brand-mono{background:linear-gradient(135deg,var(--cyan-400),var(--cyan-500));box-shadow:0 6px 14px -6px var(--cyan-glow);}
.brand-item:nth-child(3n) .brand-mono{background:linear-gradient(135deg,var(--chrome-100),var(--chrome-500));color:#2B2B2B;box-shadow:0 6px 14px -6px rgba(154,161,173,.35);}
.brand-label{font-family:var(--font-body);font-size:.88rem;font-weight:600;color:var(--text-hi);}
@keyframes marquee{from{transform:translateX(0);}to{transform:translateX(-50%);}}

/* ---------------- SHOP ---------------- */
/* Edge-to-edge bleed carousel: .shop-bleed is a direct child of .section
   (which carries no horizontal padding/max-width of its own), so it spans
   the full viewport with no extra hack needed. The first card is pulled
   back into alignment with the site grid via padding-inline-start that
   mirrors .container's own gutter + centering math at each breakpoint;
   the end padding is intentionally small so trailing cards bleed off the
   right edge (or left edge in RTL) as the row scrolls. Native scroll-snap,
   fixed card width, no visible scrollbar. Card internals (image, badges,
   price, qty, WhatsApp CTA) are untouched — only the outer layout model
   changed from grid to flex-scroll. */
.shop-bleed{width:100%;position:relative;}

/* Floating circular nav arrows, vertically centered over the slider's
   far edges. Deliberately round (not the theme's faceted card-corner
   clip-path) since these are overlay controls, not cards. */
.shop-arrow-float{
  position:absolute;top:50%;transform:translateY(-50%);z-index:5;
  width:3rem;height:3rem;border-radius:50%;flex:none;
  display:flex;align-items:center;justify-content:center;
  background:rgba(6,7,10,.62);backdrop-filter:blur(8px);
  border:1px solid var(--glass-border-strong);color:#fff;cursor:pointer;
  box-shadow:var(--shadow-card);
  transition:background .25s ease,border-color .25s ease,opacity .25s ease,transform .3s var(--ease-bounce);
}
.shop-arrow-float:hover{background:var(--neon-500);border-color:transparent;transform:translateY(-50%) scale(1.08);}
.shop-arrow-float:active{transform:translateY(-50%) scale(.94);}
.shop-arrow-float:disabled{opacity:0;pointer-events:none;}
.shop-arrow-prev{left:1rem;}
.shop-arrow-next{right:1rem;}
@media (max-width:760px){.shop-arrow-float{display:none;}} /* touch swipe covers small screens; avoids covering cards */
.shop-grid{
  display:flex;
  flex-wrap:nowrap;
  gap:1.3rem;
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch;
  overscroll-behavior-x:contain;
  scroll-padding-inline-start:1.4rem;
  padding-block:.4rem 1.2rem;
  /* --shop-gutter defaults to the same gutter+centering math as .container
     at each breakpoint below, so the first card lines up with the section
     heading even before JS runs. main.js then overwrites this custom
     property with a value measured directly off .container's own
     rendered box, which is exact and immune to scrollbar-width/zoom
     rounding differences that the pure vw-based calc() can accumulate. */
  --shop-gutter:max(1.4rem,calc((100vw - var(--container-w)) / 2 + 1.4rem));
  padding-inline-start:var(--shop-gutter);
  padding-inline-end:1.4rem;
  cursor:grab;
  scrollbar-width:none;            /* Firefox */
  -ms-overflow-style:none;         /* legacy Edge/IE */
}
.shop-grid.is-dragging{cursor:grabbing;scroll-snap-type:none;user-select:none;}
.shop-grid::-webkit-scrollbar{display:none;}  /* Chrome/Safari */
@media (min-width:640px){.shop-grid{--shop-gutter:max(2rem,calc((100vw - var(--container-w)) / 2 + 2rem));}}
@media (min-width:1024px){.shop-grid{--shop-gutter:max(2.5rem,calc((100vw - var(--container-w)) / 2 + 2.5rem));}}
@media (min-width:1800px){.shop-grid{--shop-gutter:max(3.5rem,calc((100vw - var(--container-w)) / 2 + 3.5rem));}}
/* Portrait Apple-style card: fixed tall aspect, literal 90° corners
   (border-radius:0 — no clip-path facet here, per this layout's brief)
   but the same background/border pairing as the rest of the UI so it
   still reads as part of the theme. Three fixed-role zones stacked
   with flexbox: a top copy block, a flexible middle that floats the
   product image, and a bottom row pinned to the card's bottom edge. */
.shop-card{
  position:relative;background:var(--bg-card);border:1px solid var(--glass-border);border-radius:0;
  overflow:hidden;transition:border-color .35s var(--ease-bezier-soft),transform .4s var(--ease-bezier),box-shadow .4s var(--ease-bezier-soft),background-color .35s var(--ease-bezier-soft);
  display:flex;flex-direction:column;
  flex:0 0 auto;
  width:320px;
  height:480px;
  scroll-snap-align:start;
}
@media (min-width:900px){.shop-card{width:340px;height:500px;}}
@media (min-width:1400px){.shop-card{width:360px;height:520px;}}
@media (max-width:420px){.shop-card{width:82vw;height:min(500px,128vw);}}
.shop-card:hover{border-color:var(--glass-border-strong);transform:translateY(-6px);box-shadow:var(--shadow-lg);}

.shop-card-top{flex:none;padding:1.3rem 1.3rem 0;display:flex;flex-direction:column;}
.shop-card-top .offer-badge{align-self:flex-start;clip-path:none;margin-bottom:0;}
.shop-card-top h3{margin:.6rem 0 0;font-size:1.05rem;line-height:1.25;}
.shop-card-top p{margin:.5rem 0 0;font-size:.86rem;color:var(--text-mid);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}

.shop-card-img{position:relative;flex:1;min-height:0;display:flex;align-items:center;justify-content:center;padding:.4rem 1.1rem;}
.shop-card-img img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;
  filter:drop-shadow(0 14px 20px rgba(0,0,0,.28));transition:transform .5s var(--ease-bezier);-webkit-user-drag:none;user-drag:none;}
.shop-card:hover .shop-card-img img{transform:scale(1.045) translateY(-2px);}

.shop-card-bottom{flex:none;padding:0 1.3rem 1.3rem;display:flex;flex-direction:column;gap:.7rem;}
.shop-card-bottom .shop-qty{align-self:center;}
.shop-card-bottom .btn-whatsapp{clip-path:none;border-radius:0;} /* card stays rectangular; override the site-wide faceted .btn corner just here */

.shop-stock{position:absolute;top:.8rem;inset-inline-start:.8rem;font-family:var(--font-mono);font-size:.64rem;text-transform:uppercase;
  letter-spacing:.05em;background:rgba(66,209,131,.16);border:1px solid rgba(66,209,131,.4);color:var(--ok);
  padding:.3rem .6rem;z-index:2;backdrop-filter:blur(6px);pointer-events:none;}
.shop-actions{position:absolute;top:.8rem;inset-inline-end:.8rem;z-index:2;display:flex;flex-direction:column;gap:.5rem;
  transform:translateX(8px);opacity:0;transition:transform .4s var(--ease-bezier),opacity .3s ease;}
html[dir="rtl"] .shop-actions{transform:translateX(-8px);}
.shop-card:hover .shop-actions,.shop-card:focus-within .shop-actions{transform:translateX(0);opacity:1;}
.shop-wishlist,.shop-quick{width:2.1rem;height:2.1rem;display:flex;align-items:center;justify-content:center;
  background:rgba(6,7,10,.6);backdrop-filter:blur(8px);border:1px solid var(--glass-border-strong);color:#fff;
  cursor:pointer;transition:background .3s ease,color .3s ease,transform .4s var(--ease-bounce);}
.shop-wishlist:hover,.shop-quick:hover{background:var(--neon-500);color:#fff;border-color:transparent;transform:scale(1.1);}
.shop-wishlist.is-active{background:var(--neon-500);border-color:transparent;}
.shop-wishlist.is-active i{font-weight:900;}
.shop-rating{display:flex;align-items:center;gap:.5rem;margin:.4rem 0 0;}
.shop-rating .stars{display:inline-flex;gap:1px;color:#f5b342;font-size:.72rem;}
.rating-count{font-family:var(--font-mono);font-size:.72rem;color:var(--text-dim);}
.shop-qty{display:flex;align-items:center;gap:0;border:1px solid var(--glass-border-strong);overflow:hidden;flex:none;}
.qty-btn{width:1.9rem;height:1.9rem;border:none;background:var(--tint-04);color:var(--text-hi);cursor:pointer;font-size:.95rem;
  transition:background .25s ease,color .25s ease;line-height:1;}
.qty-btn:hover{background:var(--neon-500);color:#fff;}
.qty-val{width:1.9rem;text-align:center;font-family:var(--font-mono);font-size:.82rem;color:var(--text-hi);}
.shop-note{margin-top:1.6rem;font-size:.82rem;color:var(--text-dim);text-align:center;}

/* Quick view modal */
.quickview{position:fixed;inset:0;z-index:2200;display:flex;align-items:center;justify-content:center;padding:1.4rem;
  opacity:0;pointer-events:none;transition:opacity .3s ease;}
.quickview.open{opacity:1;pointer-events:auto;}
.quickview-backdrop{position:absolute;inset:0;background:var(--overlay-strong);backdrop-filter:blur(6px);}
.quickview-panel{position:relative;max-width:760px;width:100%;max-height:88vh;overflow:auto;background:var(--surface-1-solid);
  border:1px solid var(--glass-border-strong);clip-path:var(--clip-card);padding:2rem;display:grid;grid-template-columns:1fr 1fr;gap:1.6rem;
  transform:translateY(16px) scale(.98);transition:transform .3s cubic-bezier(.2,.8,.2,1);box-shadow:var(--shadow-lg);}
.quickview.open .quickview-panel{transform:translateY(0) scale(1);}
@media (max-width:640px){.quickview-panel{grid-template-columns:1fr;}}
.quickview-close{position:absolute;top:.9rem;right:.9rem;width:2.2rem;height:2.2rem;display:flex;align-items:center;justify-content:center;
  background:var(--tint-05);border:1px solid var(--glass-border-strong);color:var(--text-hi);cursor:pointer;clip-path:var(--clip-card-sm);}
.quickview-img{width:100%;border-radius:0;clip-path:var(--clip-card-sm);object-fit:cover;aspect-ratio:4/3;}
.quickview-body h3{margin-bottom:.7rem;font-size:1.4rem;}

/* ---------------- WHY US / FAQ ----------------
   .why-grid/.why-list(--grid) were the old single-column watermark
   layout; superseded by the asymmetrical .why-grid--asym/.why-stack/
   .why-card system (see the enhancement layer below). Rules kept only
   where still referenced (the reveal-target selector list). */

.faq-title{margin-bottom:1.2rem;}
.faq-wrap{max-width:760px;margin-inline:auto;}
.faq-search{position:relative;margin-bottom:1.4rem;}
.faq-search i{position:absolute;left:1rem;top:50%;transform:translateY(-50%);color:var(--text-dim);}
.faq-search input{width:100%;background:var(--tint-03);border:1px solid var(--glass-border-strong);
  color:var(--text-hi);padding:.85rem 1rem .85rem 2.6rem;font-family:var(--font-body);clip-path:var(--clip-card-sm);}
.faq-empty{display:none;font-size:.9rem;color:var(--text-dim);}
.faq-empty.is-visible{display:block;}
.faq-item{border-bottom:1px solid var(--glass-border);}
.faq-item.is-hidden{display:none;}
.faq-q{width:100%;display:flex;align-items:center;justify-content:space-between;gap:1rem;background:none;border:none;
  color:var(--text-hi);text-align:left;font-family:var(--font-display);font-size:1rem;font-weight:600;padding:1.15rem 0;cursor:pointer;}
.faq-q i{transition:transform .25s ease;color:var(--text-dim);flex:none;}
.faq-q[aria-expanded="true"] i{transform:rotate(180deg);color:var(--accent);}
.faq-a{max-height:0;overflow:hidden;transition:max-height .35s ease;}
.faq-a p{margin:0 0 1.15rem;font-size:.92rem;}

/* ---------------- TESTIMONIALS ---------------- */
.testi-swiper{padding-bottom:.5rem;direction:ltr;}
html[dir="rtl"] .testi-swiper .testi-slide{direction:rtl;}
.testi-slide{
  background:var(--surface-1);backdrop-filter:blur(14px);border:1px solid var(--glass-border);
  clip-path:var(--clip-card);padding:1.8rem;height:100%;display:flex;flex-direction:column;
}
.testi-stars{color:var(--neon-400);font-size:.85rem;margin-bottom:1rem;letter-spacing:.15em;}
.testi-slide p{font-style:italic;color:var(--text-hi);font-size:.98rem;margin:0 0 1.4rem;flex:1;}
.testi-who{display:flex;align-items:center;gap:.8rem;}
.testi-avatar{width:42px;height:42px;border-radius:50%;background:linear-gradient(135deg,var(--neon-400),var(--cyan-500));
  color:#ffffff;font-family:var(--font-mono);font-weight:700;font-size:.82rem;display:flex;align-items:center;justify-content:center;flex:none;}
.testi-name{font-weight:600;font-size:.92rem;}
.testi-role{font-size:.78rem;color:var(--text-dim);}
/* Nav row: just the ECU scrubber now, centered. No card/photo behind it
   here, so unlike the hero it stays in normal flow (base .hcc is just
   position:relative) — nothing needs absolute positioning or RTL mirroring. */
.testi-nav{display:flex;align-items:center;justify-content:center;margin-top:1.8rem;}
.testi-nav .hcc{width:min(70vw,280px);max-width:100%;}
@media (min-width:480px){.testi-nav .hcc{width:300px;}}

/* ---------------- CONTACT ---------------- */
.contact-grid{display:grid;grid-template-columns:.95fr 1.05fr;gap:3rem;}
@media (max-width:900px){.contact-grid{grid-template-columns:1fr;}}
.contact-lead{font-size:1.02rem;margin:1rem 0 1.6rem;}
.contact-links{list-style:none;margin:0 0 1.8rem;padding:0;display:flex;flex-direction:column;gap:.9rem;}
.contact-links a{display:flex;align-items:center;gap:.8rem;font-family:var(--font-mono);font-size:.9rem;color:var(--text-hi);
  transition:color .2s ease;}
.contact-links a:hover{color:var(--accent);}
.contact-links i{width:36px;height:36px;display:flex;align-items:center;justify-content:center;background:var(--tint-04);
  border:1px solid var(--glass-border-strong);clip-path:var(--clip-card-sm);transition:transform .5s var(--ease-bounce),background .35s ease,color .35s ease;}
.contact-links a:hover i{transform:scale(1.12) rotate(-6deg);background:var(--neon-500);color:#fff;border-color:transparent;}
.map-frame{aspect-ratio:16/9;background:var(--tint-02);border:1px solid var(--glass-border);clip-path:var(--clip-card-sm);
  margin-bottom:1.6rem;display:flex;align-items:center;justify-content:center;}
.map-placeholder{display:flex;flex-direction:column;align-items:center;gap:.6rem;color:var(--text-dim);font-size:.85rem;}
.map-placeholder i{font-size:1.5rem;color:var(--accent);}
.social-row{display:flex;gap:.8rem;}
.social-row a{width:40px;height:40px;display:flex;align-items:center;justify-content:center;background:var(--tint-03);
  border:1px solid var(--glass-border-strong);clip-path:var(--clip-card-sm);color:var(--text-hi);
  transition:transform .5s var(--ease-bounce),background .35s var(--ease-bezier-soft),color .35s var(--ease-bezier-soft),box-shadow .4s var(--ease-bezier-soft);}
.social-row a:hover{color:#fff;background:var(--neon-500);border-color:transparent;
  transform:translateY(-4px) scale(1.12) rotate(-8deg);box-shadow:0 10px 22px -10px var(--neon-glow);}
.social-row a:active{transform:translateY(-1px) scale(.96) rotate(0deg);}

.lead-form{
  background:var(--surface-gradient);backdrop-filter:blur(20px);
  border:1px solid var(--glass-border-strong);clip-path:var(--clip-card);padding:2.2rem;position:relative;
}
.lead-form h3{margin-bottom:1.6rem;}
.form-row{position:relative;margin-bottom:1.4rem;}
.form-row--split{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin-bottom:0;}
.form-row--split>div{margin-bottom:1.4rem;}
.form-row label{display:block;font-family:var(--font-mono);font-size:.7rem;text-transform:uppercase;letter-spacing:.06em;
  color:var(--text-dim);margin-bottom:.5rem;}
.form-row input,.form-row select,.form-row textarea{
  width:100%;background:var(--tint-03);border:1px solid var(--glass-border-strong);color:var(--text-hi);
  padding:.85rem .95rem;font-family:var(--font-body);font-size:.95rem;clip-path:var(--clip-card-sm);resize:vertical;
  transition:border-color .2s ease, box-shadow .2s ease;
}
.form-row input:focus,.form-row select:focus,.form-row textarea:focus{
  outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--neon-glow-soft);
}
.form-note{min-height:1.2em;font-size:.86rem;margin-top:1rem;}
.form-note.error{color:#ff6b6b;}
.form-note.success{color:var(--ok);}
.lead-form button[type="submit"]{position:relative;overflow:hidden;}

/* ---------------- FOOTER ---------------- */
/* ---------------- STICKY REVEAL FOOTER ----------------
   The footer is pulled out of normal flow and pinned to the viewport
   bottom (z-index below main). `main` reserves a runway equal to the
   footer's own height (via --footer-h, kept in sync by JS since the
   footer's height changes with language/breakpoint), so the footer only
   becomes visible once that runway scrolls into view at the very end of
   the page — a "reveal from underneath" effect rather than a normal
   in-flow footer. */
main#main{position:relative;z-index:1;background:var(--bg);margin-bottom:var(--footer-h,clamp(220px,32vh,320px));}
.site-footer{
  border-top:1px solid var(--glass-border);padding:3rem 0 2rem;background:var(--footer-bg);
  position:fixed;left:0;right:0;bottom:0;width:100%;z-index:0;overflow:hidden;
}
.footer-parallax-bg{
  position:absolute;inset:-30% -10% -10% -10%;z-index:0;pointer-events:none;will-change:transform;
  background-image:
    url('');
  background-size:cover;background-position:center;
}
.footer-inner{position:relative;z-index:1;display:flex;flex-wrap:wrap;gap:2rem;justify-content:space-between;align-items:center;}
.footer-brand{display:flex;flex-direction:column;align-items:flex-start;flex:none;max-width:100%;}
.footer-logo{display:block;height:30px;width:auto;max-width:100%;filter:drop-shadow(0 0 8px var(--neon-glow-soft));}
.footer-brand p{max-width:32ch;font-size:.86rem;margin:.7rem 0 0;}
.footer-links{display:flex;flex-wrap:wrap;gap:1.6rem;}
.footer-links a{font-size:.86rem;color:var(--text-mid);transition:color .2s ease;}
.footer-links a:hover{color:var(--accent);}
.footer-copy{font-size:.8rem;color:var(--text-dim);margin:0;}

@media (max-width:700px){
  .footer-inner{flex-direction:column;align-items:center;text-align:center;}
  .footer-brand{align-items:center;}
  .footer-links{justify-content:center;}
}

/* ---------------- FLOATING ACTIONS ---------------- */
.back-to-top{
  position:fixed;bottom:1.6rem;left:1.6rem;width:3rem;height:3rem;display:flex;align-items:center;justify-content:center;
  background:var(--surface-1);backdrop-filter:blur(10px);border:1px solid var(--glass-border-strong);color:var(--text-hi);
  clip-path:var(--clip-card-sm);cursor:pointer;opacity:0;pointer-events:none;transform:translateY(10px);
  transition:all .3s ease;z-index:900;
}
.back-to-top.is-visible{opacity:1;pointer-events:auto;transform:translateY(0);}
.back-to-top:hover{border-color:var(--accent);color:var(--accent);}

.fab{position:fixed;bottom:1.6rem;right:1.6rem;width:3.4rem;height:3.4rem;border-radius:50%;display:flex;align-items:center;
  justify-content:center;font-size:1.3rem;color:#fff;z-index:900;box-shadow:0 10px 26px -8px rgba(0,0,0,.5);
  transition:transform .25s ease;}
.fab:hover{transform:scale(1.08);}
.fab-whatsapp{background:linear-gradient(135deg,#25d366,#128c7e);}

/* ---------------- CURSOR GLOW (desktop only) ---------------- */
.cursor-glow{position:fixed;top:0;left:0;width:420px;height:420px;border-radius:50%;pointer-events:none;z-index:1;
  background:radial-gradient(circle, var(--neon-glow-soft), transparent 70%);transform:translate(-50%,-50%);
  opacity:0;transition:opacity .4s ease;will-change:transform;}
.cursor-glow.active{opacity:1;}
@media (hover:none){.cursor-glow{display:none;}}

/* ---------------- GSAP REVEAL HELPERS ---------------- */
.reveal-up{opacity:0;transform:translateY(28px);}
.reveal-fade{opacity:0;}

/* ---------------- MISC ---------------- */
.hero-grid{display:none;} /* legacy hook, superseded by body::after grid */

/* ===================================================================
   ENHANCEMENT LAYER (v4)
   Film-grain noise, the pure-CSS hero HUD/ambient system, static
   (non-magnetic) button hover states, CTA shimmer, a shared "corner
   glow" hover accent, the bento feature grid, the stats ticker, and
   the asymmetrical why-us layout. Every animated effect below no-ops
   under prefers-reduced-motion.
=================================================================== */

/* Film-grain noise — layered onto the existing fixed grid wash so no
   extra DOM node or stacking context is needed. Kept extremely faint
   (this is texture, not pattern) and screened so it never darkens. */
body::after{
  background-image:
    linear-gradient(rgba(var(--grid-line-rgb),.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(var(--grid-line-rgb),.035) 1px, transparent 1px),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:64px 64px,64px 64px,180px 180px;
  mix-blend-mode:normal;
  opacity:1;
}
html[data-theme="dark"] body::after,
:root body::after{
  background-blend-mode:normal, normal, overlay;
}

/* ---- Hero ambient system (replaces the old particle-node canvas) ----
   Pure CSS/SVG: a radial electric-blue glow seeded behind the diagnostic
   card, a faint HUD blueprint grid, a slow vertical scan line, and two
   rows of scrolling hex/CAN-bus telemetry text. No canvas, no WebGL,
   no JS — this is deliberately "quiet" so it reads as instrumentation
   rather than decoration. */
.hero-ambient{
  position:absolute;left:-14%;right:-14%;top:-100px;
  height:clamp(360px,52vw,560px);
  z-index:0;pointer-events:none;overflow:hidden;
}
@media (max-width:991px){.hero-ambient{height:clamp(300px,70vw,420px);left:-8%;right:-8%;top:-70px;}}

.hero-ambient-glow{
  position:absolute;inset:8% 12%;border-radius:50%;
  background:radial-gradient(circle, var(--neon-glow-soft), transparent 68%);
  filter:blur(4px);
}

.hero-hud-grid{
  position:absolute;inset:0;width:100%;height:100%;color:var(--neon-300);opacity:.22;
}

.hero-hud-scan{
  position:absolute;left:6%;right:6%;height:2px;top:0;
  background:linear-gradient(90deg,transparent,var(--cyan-400),var(--neon-400),transparent);
  box-shadow:0 0 12px 1px var(--cyan-glow);
  opacity:.55;
  animation:hud-scan 5.5s ease-in-out infinite;
}
@keyframes hud-scan{
  0%{top:6%;opacity:0;}
  10%{opacity:.55;}
  90%{opacity:.55;}
  100%{top:92%;opacity:0;}
}

.hero-hex-stream{
  position:absolute;left:0;right:0;bottom:6%;display:flex;flex-direction:column;gap:1.4rem;
  font-family:var(--font-mono);font-size:.72rem;letter-spacing:.04em;color:var(--cyan-300,var(--cyan-400));
  -webkit-mask:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);
  mask:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);
}
.hero-hex-row{display:flex;width:max-content;white-space:nowrap;opacity:.28;animation:hex-scroll 34s linear infinite;}
.hero-hex-row--rev{animation-direction:reverse;animation-duration:40s;opacity:.2;}
.hero-hex-row span{padding-right:2.5rem;}
@keyframes hex-scroll{from{transform:translateX(0);}to{transform:translateX(-50%);}}

.hero-badge-float,.scope-panel{position:relative;z-index:2;}

@media (prefers-reduced-motion: reduce){
  .hero-hud-scan,.hero-hex-row{animation:none;}
  .hero-hud-scan{top:50%;opacity:.35;}
}

/* ---- CTA shimmer sweep ---- */
.btn-cta,.btn-whatsapp{position:relative;overflow:hidden;}
.btn-cta::after,.btn-whatsapp::after{
  content:"";position:absolute;top:0;left:-60%;width:40%;height:100%;
  background:linear-gradient(115deg,transparent,rgba(255,255,255,.4),transparent);
  transform:skewX(-18deg);transition:left .7s var(--ease-bezier-soft);pointer-events:none;
}
.btn-cta:hover::after,.btn-whatsapp:hover::after{left:130%;}
@media (prefers-reduced-motion: reduce){
  .btn-cta::after,.btn-whatsapp::after{display:none;}
}

/* ---- Card borders: clean thin low-opacity hairline ----
   Standardizes every card surface onto the same `border-white/10`
   language instead of the mixed --glass-border tokens, then layers a
   hover-revealed corner-bracket glow on top (still no position
   tracking — this is a pure opacity fade). */
.offer-card,.hwsw-panel,.shop-card,.vs-card,
.why-card,.testi-card,.faq-item{
  border-color:rgba(255,255,255,.1) !important;
}

/* ---- Glow/clipping containment fix (site-wide) ----
   Every card that carries a hover glow, corner-bracket, or border-glow
   pseudo-element gets an explicit overflow:hidden — belt-and-braces
   alongside the clip-path facet, since some browsers (older WebKit in
   particular) don't reliably clip a descendant's `filter: drop-shadow`
   to an ancestor's clip-path.
   NOTE: we deliberately use `will-change:transform` rather than a literal
   `transform:translateZ(0)` here — several of these cards (.offer-card's
   entrance animation, .shop-card/.why-card's hover lift) already own the
   `transform` property for real motion, and a competing base-level
   translateZ(0) would win the cascade at rest and fight those states.
   will-change achieves the same GPU-layer promotion (keeps the clip
   crisp, no corner flash/leak mid-transition) without touching the
   transform value itself. backface-visibility is a cheap companion fix
   for the same class of repaint artifact. */
.offer-card,.shop-card,.hwsw-panel,.vs-card,
.why-card,.why-showcase,.testi-slide,.pl-card{
  overflow:hidden;
  will-change:transform;
  backface-visibility:hidden;
  -webkit-backface-visibility:hidden;
}
.hwsw-panel,.shop-card{position:relative;isolation:isolate;}
.hwsw-panel::after,.shop-card::after{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:1;opacity:0;
  transition:opacity .35s var(--ease-bezier-soft);
  background:
    linear-gradient(135deg,var(--neon-400) 0 2px,transparent 2px 22px) top left / 22px 22px no-repeat,
    linear-gradient(135deg,transparent 0 calc(100% - 22px),var(--cyan-400) calc(100% - 2px) 100%) bottom right / 22px 22px no-repeat;
  filter:drop-shadow(0 0 6px var(--neon-glow)) drop-shadow(0 0 6px var(--cyan-glow));
}
.hwsw-panel:hover::after,.shop-card:hover::after{opacity:.85;}

.vs-card{position:relative;}
.vs-card::before{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:1;opacity:0;
  transition:opacity .35s var(--ease-bezier-soft);
  background:
    linear-gradient(135deg,var(--neon-400) 0 2px,transparent 2px 22px) top left / 22px 22px no-repeat,
    linear-gradient(135deg,transparent 0 calc(100% - 22px),var(--cyan-400) calc(100% - 2px) 100%) bottom right / 22px 22px no-repeat;
  filter:drop-shadow(0 0 6px var(--neon-glow)) drop-shadow(0 0 6px var(--cyan-glow));
}
.vs-card:hover::before{opacity:.7;}

/* Offer cards already spend their ::before on the mouse-tracked
   spotlight — add the corner brackets as extra background layers on
   the same pseudo-element instead of introducing a second one. */
.offer-card::before{
  background:
    radial-gradient(220px circle at var(--mx) var(--my), rgba(5,4,252,.16), transparent 65%),
    linear-gradient(135deg,var(--neon-400) 0 2px,transparent 2px 22px) top left / 22px 22px no-repeat,
    linear-gradient(135deg,transparent 0 calc(100% - 22px),var(--cyan-400) calc(100% - 2px) 100%) bottom right / 22px 22px no-repeat;
}
.offer-card::before{opacity:0;}
.offer-card:hover::before{opacity:1;filter:drop-shadow(0 0 6px var(--neon-glow)) drop-shadow(0 0 6px var(--cyan-glow));}

/* ---------------- BENTO FEATURE GRID (Core Services) ----------------
   Only active on the unfiltered "All" view (JS toggles .is-bento) — a
   filtered subset of 1-3 cards falls back to the plain grid below. */
.card-grid.is-bento{grid-auto-flow:dense;}
@media (min-width:768px){
  .card-grid.is-bento .offer-card:nth-of-type(1){
    grid-column:span 2;grid-row:span 2;padding:2.4rem;
  }
  .card-grid.is-bento .offer-card:nth-of-type(1) .offer-icon{width:64px;height:64px;font-size:1.6rem;}
  .card-grid.is-bento .offer-card:nth-of-type(1) h3{font-size:1.6rem;max-width:20ch;}
  .card-grid.is-bento .offer-card:nth-of-type(1) p{font-size:1rem;max-width:42ch;}
}

/* ---------------- STATS TICKER BAND ---------------- */
.stats-ticker{overflow:hidden;position:relative;margin-top:1.4rem;
  -webkit-mask:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
  mask:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);}
.stats-track{display:flex;gap:0;width:max-content;animation:marquee 44s linear infinite reverse;}
.stats-track:hover{animation-play-state:paused;}
.stats-item{display:flex;align-items:baseline;gap:.55rem;white-space:nowrap;
  padding:.5rem 2rem;font-family:var(--font-mono);}
.stats-item b{color:var(--cyan-400);font-size:1rem;}
.stats-item span{color:var(--text-dim);font-size:.72rem;letter-spacing:.05em;text-transform:uppercase;}
.stats-item::after{content:"";width:5px;height:5px;border-radius:50%;background:var(--glass-border-strong);margin-left:2rem;}

/* ---------------- ASYMMETRICAL WHY-US LAYOUT ---------------- */
.why-grid--asym{display:grid;grid-template-columns:.95fr 1.05fr;gap:clamp(2rem,4vw,4rem);align-items:start;}
@media (max-width:900px){.why-grid--asym{grid-template-columns:1fr;}}
.why-showcase{
  position:relative;position:sticky;top:calc(var(--header-h,80px) + 1.6rem);
  border:1px solid rgba(255,255,255,.1);overflow:hidden;clip-path:var(--clip-card);
  padding:clamp(2.2rem,3.5vw,3.2rem);min-height:420px;display:flex;flex-direction:column;justify-content:flex-end;
  background-size:cover;background-position:center;isolation:isolate;
}
@media (max-width:900px){.why-showcase{position:relative;top:0;min-height:320px;}}
.why-showcase::before{content:"";position:absolute;inset:0;z-index:-1;
  background:
    linear-gradient(180deg,rgba(6,7,10,.35) 0%,rgba(6,7,10,.72) 65%,var(--obsidian-950) 100%),
    var(--why-showcase-img);
  background-size:cover;background-position:center;
}
.why-showcase .eyebrow{color:var(--cyan-300,var(--cyan-400));}
.why-showcase h2{color:#fff;font-size:clamp(1.9rem,3vw,2.5rem);margin-bottom:.9rem;}
.why-showcase-lead{color:rgba(255,255,255,.82);font-size:1.02rem;max-width:38ch;margin:0 0 1.6rem;}
.why-showcase-stats{display:flex;gap:1.8rem;flex-wrap:wrap;border-top:1px solid rgba(255,255,255,.16);padding-top:1.2rem;}
.why-showcase-stats div{display:flex;flex-direction:column;}
.why-showcase-stats b{font-family:var(--font-mono);font-size:1.3rem;color:var(--cyan-400);}
.why-showcase-stats span{font-size:.7rem;letter-spacing:.05em;text-transform:uppercase;color:rgba(255,255,255,.66);}

.why-stack{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:1.1rem;}
.why-card{
  display:flex;gap:1.2rem;align-items:flex-start;
  background:var(--surface-1);backdrop-filter:blur(14px);
  border:1px solid rgba(255,255,255,.1);clip-path:var(--clip-card);
  padding:1.6rem 1.7rem;transition:transform .35s var(--ease-bezier),border-color .25s ease,box-shadow .3s ease;
}
.why-card:hover{transform:translateX(4px);border-color:rgba(255,255,255,.2) !important;box-shadow:var(--shadow-card);}
.why-card i{width:46px;height:46px;flex:none;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg,rgba(5,4,252,.18),rgba(5,4,252,.04));border:1px solid rgba(5,4,252,.25);
  color:var(--neon-300);clip-path:var(--clip-card-sm);font-size:1.05rem;}
.why-card h4{margin:0 0 .4rem;font-size:1.05rem;}
.why-card p{margin:0;font-size:.92rem;}


/* ===================================================================
   CONNECTED CIRCUIT PIPELINE — #workflowPipeline (.pl-*)
   Live 4-step workflow track. Built with existing design tokens
   (--obsidian-*, --neon-*, --cyan-*, --clip-card-sm, --font-mono) so it
   drops seamlessly into the industrial-dark theme. Pure CSS/JS, no
   extra dependencies. Motion uses only transform/opacity for 60fps.

   Structure:
     .pl-pipeline > .pl-steps > .pl-step[data-step="1..4"]
       .pl-rail  → node (numbered icon) + connector to the NEXT step
         .pl-connector > .pl-fill (progressive glow) + .pl-packet x2 (ambient)
       .pl-card  → title + copy

   State: JS toggles .pl-pipeline[data-hover="0|1|2|3|4"] and adds
   .is-lit / .is-complete to individual steps — see main.js.
=================================================================== */
.pl-pipeline{
  --pl-accent:var(--brand-200);        /* was off-brand #00f0ff neon cyan — now the lightest brand-blue stop */
  --pl-accent-2:var(--neon-400);
  --pl-track-base:rgba(255,255,255,.1);
  --pl-node-size:52px;
  margin-top:2.75rem;
}

.pl-steps{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:1.4rem;
}

.pl-step{
  display:flex;
  flex-direction:column;
  min-width:0;
}

/* ---- Rail: node + connector, laid out horizontally on desktop ---- */
.pl-rail{
  display:flex;
  align-items:center;
  gap:0;
  margin-bottom:1.1rem;
}

/* ---- Node: numbered/iconed circuit junction ---- */
.pl-node{
  position:relative;
  flex:none;
  width:var(--pl-node-size);
  height:var(--pl-node-size);
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:50%;
  background:var(--obsidian-800);
  border:1.5px solid var(--glass-border-strong);
  color:var(--text-mid);
  font-size:1.05rem;
  z-index:2;
  transition:color .3s ease,border-color .35s ease,background .35s ease,
             box-shadow .35s ease,transform .35s var(--ease-bezier);
}
.pl-node-glow{
  position:absolute;inset:-9px;border-radius:50%;
  background:radial-gradient(circle,var(--pl-accent) 0%,transparent 70%);
  opacity:0;transform:scale(.6);
  transition:opacity .4s ease,transform .4s var(--ease-bezier);
  pointer-events:none;
}

/* Ambient idle pulse — every node breathes gently even with no hover,
   so the pipeline reads as "alive" by default. Staggered per step. */
.pl-node::after{
  content:"";position:absolute;inset:0;border-radius:50%;
  box-shadow:0 0 0 0 var(--cyan-glow);
  animation:pl-idle-pulse 3.2s ease-in-out infinite;
}
.pl-step[data-step="1"] .pl-node::after{animation-delay:0s;}
.pl-step[data-step="2"] .pl-node::after{animation-delay:.5s;}
.pl-step[data-step="3"] .pl-node::after{animation-delay:1s;}
.pl-step[data-step="4"] .pl-node::after{animation-delay:1.5s;}
@keyframes pl-idle-pulse{
  0%{box-shadow:0 0 0 0 rgba(5,4,252,.35);}
  70%{box-shadow:0 0 0 10px rgba(5,4,252,0);}
  100%{box-shadow:0 0 0 0 rgba(5,4,252,0);}
}

/* Lit / active node (progressive glow as the pipeline energizes) */
.pl-step.is-lit .pl-node{
  color:#04141a;
  background:linear-gradient(135deg,var(--pl-accent),var(--pl-accent-2));
  border-color:transparent;
  transform:scale(1.06);
  box-shadow:0 0 0 4px rgba(5,4,252,.14),0 0 18px 2px rgba(5,4,252,.55);
}
.pl-step.is-lit .pl-node-glow{opacity:.55;transform:scale(1);}

/* Full-completion pulse — triggered on every card when step 04 is hovered */
.pl-pipeline.is-complete .pl-node{animation:pl-complete-flash 1.1s ease-in-out;}
@keyframes pl-complete-flash{
  0%{box-shadow:0 0 0 4px rgba(5,4,252,.14),0 0 18px 2px rgba(5,4,252,.55);}
  45%{box-shadow:0 0 0 8px rgba(5,4,252,.22),0 0 30px 8px rgba(5,4,252,.85);}
  100%{box-shadow:0 0 0 4px rgba(5,4,252,.14),0 0 18px 2px rgba(5,4,252,.55);}
}

/* ---- Connector: the glowing track segment between two nodes ---- */
.pl-connector{
  position:relative;
  flex:1 1 auto;
  height:3px;
  margin-inline:2px;
  background:var(--pl-track-base);
  border-radius:2px;
  overflow:hidden;
}
.pl-fill{
  position:absolute;inset-block:0;inset-inline-start:0;
  width:100%;height:100%;
  background:linear-gradient(90deg,var(--pl-accent-2),var(--pl-accent));
  box-shadow:0 0 10px 1px rgba(5,4,252,.75);
  transform:scaleX(0);
  transform-origin:left center;
  transition:transform .55s var(--ease-bezier-soft);
}
html[dir="rtl"] .pl-fill{transform-origin:right center;}

/* Ambient light packets — drift continuously left→right at idle */
.pl-packet{
  position:absolute;top:50%;left:0;
  width:22px;height:100%;
  transform:translate(-100%,-50%);
  background:linear-gradient(90deg,transparent,var(--cyan-400),transparent);
  filter:drop-shadow(0 0 4px var(--cyan-glow));
  opacity:.85;
  animation:pl-packet-flow 3.6s linear infinite;
}
.pl-packet--b{animation-delay:1.8s;}
@keyframes pl-packet-flow{
  0%{transform:translate(-100%,-50%);}
  100%{transform:translate(420%,-50%);}
}
html[dir="rtl"] .pl-packet{
  left:auto;right:0;
  transform:translate(100%,-50%);
  animation-name:pl-packet-flow-rtl;
}
@keyframes pl-packet-flow-rtl{
  0%{transform:translate(100%,-50%);}
  100%{transform:translate(-420%,-50%);}
}

/* When a segment is energized, fade the loose ambient packets — the
   solid fill communicates "active" more clearly than a drifting dot. */
.pl-step.seg-active .pl-packet{opacity:0;}
.pl-step.seg-active .pl-fill{transform:scaleX(1);}

/* ---- Card ---- */
.pl-card{
  position:relative;
  flex:1;
  background:var(--bg-card);
  backdrop-filter:blur(14px);
  border:1px solid var(--glass-border);
  clip-path:var(--clip-card-sm);
  padding:1.4rem 1.5rem 1.6rem;
  transition:border-color .35s ease,box-shadow .35s ease,transform .35s var(--ease-bezier);
}
.pl-step-tag{
  display:inline-block;
  font-family:var(--font-mono);
  font-size:.68rem;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--cyan-400);
  background:rgba(5,4,252,.1);
  border:1px solid rgba(5,4,252,.25);
  padding:.2rem .55rem;
  margin-bottom:.7rem;
  clip-path:var(--clip-card-sm);
}
.pl-card h3{
  margin:0 0 .5rem;
  font-size:1.05rem;
  font-family:var(--font-display);
  color:var(--text-hi);
}
.pl-card p{
  margin:0;
  font-size:.9rem;
  line-height:1.55;
  color:var(--text-mid);
}

/* Card border glow synced to pipeline activation */
.pl-step.is-lit .pl-card{
  border-color:rgba(5,4,252,.4);
  box-shadow:0 0 0 1px rgba(5,4,252,.12),0 18px 40px -24px rgba(5,4,252,.5);
  transform:translateY(-3px);
}
.pl-pipeline.is-complete .pl-card{animation:pl-card-complete 1.1s ease-in-out;}
@keyframes pl-card-complete{
  0%,100%{box-shadow:0 0 0 1px rgba(5,4,252,.12),0 18px 40px -24px rgba(5,4,252,.5);}
  45%{box-shadow:0 0 0 2px rgba(5,4,252,.28),0 22px 50px -20px rgba(5,4,252,.75);}
}

/* =========================== RESPONSIVE =========================== */
/* < 1024px — stack vertically, connectors rotate into a vertical
   circuit track running down the left edge of each card. */
@media (max-width:1023px){
  .pl-steps{grid-template-columns:1fr;gap:0;}
  .pl-step{flex-direction:row;align-items:stretch;}
  .pl-step:last-child .pl-rail{padding-bottom:0;}
  .pl-rail{
    flex-direction:column;
    align-items:center;
    gap:0;
    margin-bottom:0;
    margin-inline-end:1.1rem;
    padding-bottom:1.4rem;
  }
  .pl-connector{
    width:3px;height:auto;flex:1 1 auto;
    margin-inline:0;margin-block:2px;
  }
  .pl-fill{
    inset-inline-start:0;inset-block-start:0;
    width:100%;height:100%;
    background:linear-gradient(180deg,var(--pl-accent-2),var(--pl-accent));
    transform:scaleY(0);
    transform-origin:top center;
  }
  .pl-step.seg-active .pl-fill{transform:scaleY(1);}
  .pl-packet{
    top:0;left:50%;
    width:100%;height:22px;
    transform:translate(-50%,-100%);
    background:linear-gradient(180deg,transparent,var(--cyan-400),transparent);
    animation-name:pl-packet-flow-vert;
  }
  html[dir="rtl"] .pl-packet{
    left:50%;right:auto;
    transform:translate(-50%,-100%);
    animation-name:pl-packet-flow-vert;
  }
  @keyframes pl-packet-flow-vert{
    0%{transform:translate(-50%,-100%);}
    100%{transform:translate(-50%,420%);}
  }
  .pl-card{margin-bottom:1.4rem;}
  .pl-step:last-child .pl-card{margin-bottom:0;}
}

@media (max-width:520px){
  .pl-pipeline{--pl-node-size:44px;}
  .pl-node{font-size:.9rem;}
  .pl-card{padding:1.1rem 1.2rem 1.3rem;}
}

/* Respect reduced-motion: kill drifting packets & flashes, keep the
   instant fill/border feedback so hover is still communicated. */
@media (prefers-reduced-motion: reduce){
  .pl-packet{animation:none;opacity:0;}
  .pl-node::after{animation:none;}
  .pl-pipeline.is-complete .pl-node,
  .pl-pipeline.is-complete .pl-card{animation:none;}
  .pl-fill{transition:none;}
  .pl-node,.pl-card{transition:none;}
}

/* ===================================================================
   PRODUCTION POLISH PATCH — mobile safety margins + vertical rhythm
   Appended last so it wins ties with earlier component rules of equal
   specificity. Covers: (1) a guaranteed 16–20px horizontal safety gutter
   on every card/container/form input at phone widths, so nothing ever
   touches the bezel, and (2) more breathing room between stacked
   sections/cards once grids collapse to a single column. Deliberately
   does NOT touch .shop-grid/.brand-marquee — those are intentional
   edge-to-edge bleed carousels (see their own comments above), not the
   crowding bug this patch targets.
=================================================================== */
@media (max-width:768px){
  /* Explicit, documented floor — belt-and-braces alongside .container's
     existing 1.4rem (22.4px) gutter, which already clears this, but this
     makes the minimum a hard contract rather than an emergent side-effect
     of a rem calculation. */
  .container{padding-inline:max(18px,1.4rem);}

  /* Section rhythm: give stacked sections noticeably more air than the
     desktop 8vw-derived value collapses to on narrow viewports. */
  .section{padding-block:3.25rem;}
  .section-head{margin-bottom:2.2rem;}

  /* Card grids / stacked lists: once these collapse to a single column
     the old 1.4rem gap read as cramped card-to-card — open it up. */
  .card-grid{gap:1.6rem;}
  .why-stack{gap:1.3rem;}
  .contact-grid{gap:2.4rem;}
  .form-row--split{gap:1.2rem;}
  .form-row--split>div{margin-bottom:1.2rem;}
  .form-row{margin-bottom:1.3rem;}

  /* Form inputs/selects: explicit safety margin so focus rings and text
     never crowd the viewport edge inside a full-width stacked form. */
  .form-row input,.form-row select,.form-row textarea,
  input.form-select{padding-inline:1rem;}
}
@media (max-width:480px){
  .offer-card,.vs-card,.compat-widget,.lead-form,.why-card{padding:1.5rem;}
  .hwsw-panel-body{padding:1.6rem 1.4rem;}
}

/* =====================================================================
   NEWS / BLOG — page hero, article grid, filters & pagination
   Built entirely from existing design tokens (obsidian surfaces, brand
   blue #0504FC, --clip-card facets) so it reads as native to the theme
   rather than a bolted-on module.
   ===================================================================== */

/* ---- Sub-page hero band (used by news.html / blog.html) ---- */
.page-hero{
  position:relative;padding:9.5rem 0 3.5rem;overflow:hidden;
  background:
    radial-gradient(closest-side, var(--neon-glow-soft), transparent 70%) -10% -20% / 55% 140% no-repeat,
    var(--obsidian-950);
  border-bottom:1px solid var(--glass-border);
}
.page-hero::after{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:
    linear-gradient(180deg,transparent 0%,var(--obsidian-950) 100%),
    repeating-linear-gradient(90deg,rgba(255,255,255,.025) 0 1px,transparent 1px 64px);
  opacity:.7;
}
.page-hero .container{position:relative;z-index:1;}
.page-hero .eyebrow{color:var(--neon-300);}
.page-hero h1{
  font-family:var(--font-display);color:#fff;font-weight:600;
  font-size:clamp(2.2rem,4.4vw,3.4rem);line-height:1.08;max-width:24ch;margin:0 0 1rem;
}
.page-hero p{color:var(--text-mid);font-size:1.05rem;line-height:1.65;max-width:56ch;margin:0;}
.page-hero-crumbs{
  display:flex;align-items:center;gap:.5rem;margin-bottom:1.2rem;
  font-family:var(--font-mono);font-size:.72rem;letter-spacing:.05em;text-transform:uppercase;color:var(--text-dim);
}
.page-hero-crumbs a{color:var(--text-dim);text-decoration:none;transition:color .25s ease;}
.page-hero-crumbs a:hover{color:var(--neon-300);}
.page-hero-crumbs i{font-size:.6rem;opacity:.6;}

/* ---- Section wrapper for the article listing ---- */
.article-section{padding:4rem 0 6rem;position:relative;}

/* ---- Category filter tabs — reuses .filter-tab, active = brand-500 ---- */
.article-toolbar{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1.2rem;margin-bottom:2.4rem;
}
.article-toolbar .filter-tabs{margin-bottom:0;}
.article-count{font-family:var(--font-mono);font-size:.72rem;letter-spacing:.05em;text-transform:uppercase;color:var(--text-dim);white-space:nowrap;}
.article-count b{color:var(--neon-300);font-weight:600;}

/* ---- Grid ---- */
.article-grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:1.6rem;
}
@media (max-width:1100px){.article-grid{grid-template-columns:repeat(2,1fr);}}
@media (max-width:680px){.article-grid{grid-template-columns:1fr;}}

/* ---- Card ---- */
.article-card{
  position:relative;display:flex;flex-direction:column;background:var(--bg-card);backdrop-filter:blur(14px);
  border:1px solid var(--glass-border);clip-path:var(--clip-card);overflow:hidden;text-decoration:none;
  transition:transform .4s var(--ease-bezier),border-color .3s ease,box-shadow .4s var(--ease-bezier-soft);
  opacity:0;transform:translateY(18px);animation:article-in .5s var(--ease-bezier-soft) forwards;
}
@keyframes article-in{to{opacity:1;transform:translateY(0);}}
.article-card:hover{border-color:var(--glass-border-strong);transform:translateY(-6px);box-shadow:var(--shadow-lg);}
.article-thumb{position:relative;aspect-ratio:16/10;overflow:hidden;flex:none;background:var(--obsidian-800);}
.article-thumb img{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease-bezier);}
.article-card:hover .article-thumb img{transform:scale(1.07);}
.article-thumb::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 55%,rgba(6,6,11,.55) 100%);}
.article-cat{
  position:absolute;top:.9rem;inset-inline-start:.9rem;z-index:2;font-family:var(--font-mono);font-size:.62rem;
  letter-spacing:.08em;text-transform:uppercase;color:#fff;background:var(--brand-500);
  box-shadow:0 0 15px rgba(5,4,252,.55);padding:.35rem .7rem;clip-path:var(--clip-card-sm);
}
.article-body{flex:1;display:flex;flex-direction:column;padding:1.4rem 1.4rem 1.6rem;}
.article-meta{display:flex;align-items:center;gap:.6rem;font-family:var(--font-mono);font-size:.68rem;
  letter-spacing:.04em;text-transform:uppercase;color:var(--text-dim);margin-bottom:.7rem;}
.article-meta i{color:var(--neon-300);}
.article-body h3{color:#fff;font-size:1.08rem;line-height:1.35;margin:0 0 .6rem;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
.article-body p{color:var(--text-mid);font-size:.88rem;line-height:1.55;margin:0 0 1.1rem;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;flex:1;}
.article-readmore{display:inline-flex;align-items:center;gap:.5rem;color:var(--neon-300);font-family:var(--font-mono);
  font-size:.76rem;letter-spacing:.04em;text-transform:uppercase;font-weight:600;}
.article-readmore i{transition:transform .3s var(--ease-bezier);}
.article-card:hover .article-readmore i{transform:translateX(4px);}
html[dir="rtl"] .article-card:hover .article-readmore i{transform:translateX(-4px);}

.article-empty{grid-column:1/-1;text-align:center;padding:3.5rem 1.5rem;color:var(--text-dim);
  border:1px dashed var(--glass-border-strong);clip-path:var(--clip-card);}

/* ---- Pagination ---- */
.pagination{display:flex;align-items:center;justify-content:center;gap:.5rem;margin-top:3rem;flex-wrap:wrap;}
.page-btn{
  min-width:2.4rem;height:2.4rem;padding:0 .5rem;display:inline-flex;align-items:center;justify-content:center;
  background:rgba(255,255,255,.03);border:1px solid var(--glass-border);color:var(--text-mid);
  font-family:var(--font-mono);font-size:.82rem;cursor:pointer;transition:background .25s ease,color .25s ease,border-color .25s ease,transform .25s var(--ease-bezier-soft);
}
.page-btn:hover:not(:disabled):not(.active){border-color:var(--glass-border-strong);color:var(--text-hi);}
.page-btn.active{background:var(--brand-500);color:#fff;border-color:transparent;box-shadow:0 0 15px rgba(5,4,252,.5);}
.page-btn:disabled{opacity:.35;cursor:not-allowed;}
.page-btn--nav{font-size:.78rem;gap:.4rem;padding-inline:.9rem;}

/* =====================================================================
   NEWSLETTER POPUP — luxury dark modal, brand-blue CTA
   Mirrors the existing .quickview open/close pattern for consistency.
   ===================================================================== */
.newsletter-modal{
  position:fixed;inset:0;z-index:2400;display:flex;align-items:center;justify-content:center;padding:1.4rem;
  opacity:0;pointer-events:none;transition:opacity .35s var(--ease-bezier-soft);
}
.newsletter-modal.open{opacity:1;pointer-events:auto;}
.newsletter-backdrop{position:absolute;inset:0;background:var(--overlay-strong);backdrop-filter:blur(8px);}
.newsletter-panel{
  position:relative;width:100%;max-width:460px;background:var(--surface-1-solid);
  border:1px solid var(--glass-border-strong);clip-path:var(--clip-card);
  padding:2.4rem 2.2rem 2.2rem;transform:translateY(24px) scale(.96);
  transition:transform .45s var(--ease-bounce);overflow:hidden;isolation:isolate;
}
.newsletter-modal.open .newsletter-panel{transform:translateY(0) scale(1);}
.newsletter-panel::before{
  content:"";position:absolute;z-index:-1;top:-6rem;inset-inline-end:-6rem;width:16rem;height:16rem;
  background:radial-gradient(closest-side, var(--brand-glow-soft), transparent 72%);pointer-events:none;
}
.newsletter-close{
  position:absolute;top:.9rem;inset-inline-end:.9rem;width:2.2rem;height:2.2rem;display:flex;align-items:center;
  justify-content:center;background:rgba(255,255,255,.05);border:1px solid var(--glass-border);color:var(--text-mid);
  cursor:pointer;transition:background .25s ease,color .25s ease,transform .3s var(--ease-bounce);
}
.newsletter-close:hover{background:var(--brand-500);color:#fff;border-color:transparent;transform:rotate(90deg);}
.newsletter-icon{
  width:52px;height:52px;display:flex;align-items:center;justify-content:center;font-size:1.4rem;
  background:linear-gradient(135deg,rgba(5,4,252,.22),rgba(5,4,252,.05));border:1px solid rgba(5,4,252,.3);
  color:var(--brand-300);margin-bottom:1.2rem;clip-path:var(--clip-card-sm);
}
.newsletter-panel .eyebrow{margin-bottom:.7rem;}
.newsletter-panel h3{color:#fff;font-size:1.5rem;line-height:1.25;margin:0 0 .7rem;max-width:22ch;}
.newsletter-panel p{color:var(--text-mid);font-size:.94rem;line-height:1.6;margin:0 0 1.5rem;}
.newsletter-form{display:flex;flex-direction:column;gap:.9rem;}
.newsletter-field{position:relative;}
.newsletter-field input{
  width:100%;height:3rem;background:rgba(255,255,255,.04);border:1px solid var(--glass-border-strong);
  color:var(--text-hi);font-family:var(--font-body);font-size:.92rem;padding:0 1rem 0 2.6rem;
  transition:border-color .25s ease,background .25s ease;
}
.newsletter-field input::placeholder{color:var(--text-dim);}
.newsletter-field input:focus{outline:none;border-color:var(--brand-400);background:rgba(255,255,255,.06);
  box-shadow:0 0 0 3px rgba(5,4,252,.18);}
.newsletter-field i{position:absolute;top:50%;left:1rem;transform:translateY(-50%);color:var(--text-dim);font-size:.9rem;pointer-events:none;}
html[dir="rtl"] .newsletter-field input{padding:0 2.6rem 0 1rem;}
html[dir="rtl"] .newsletter-field i{left:auto;right:1rem;}
.newsletter-form .btn-cta{width:100%;justify-content:center;border:none;cursor:pointer;}
.newsletter-fineprint{display:flex;align-items:flex-start;gap:.55rem;margin-top:.2rem;font-size:.76rem;line-height:1.5;color:var(--text-dim);}
.newsletter-fineprint i{margin-top:.2rem;color:var(--neon-300);font-size:.7rem;flex:none;}
.newsletter-success{display:none;text-align:center;padding:.6rem 0 .2rem;}
.newsletter-success.show{display:block;}
.newsletter-success i{font-size:2.4rem;color:var(--ok);margin-bottom:.8rem;}
.newsletter-success h3{margin-bottom:.5rem;}
.newsletter-modal.is-success .newsletter-form,
.newsletter-modal.is-success .newsletter-icon,
.newsletter-modal.is-success .newsletter-panel>.eyebrow,
.newsletter-modal.is-success .newsletter-panel>h3,
.newsletter-modal.is-success .newsletter-panel>p,
.newsletter-modal.is-success .newsletter-fineprint{display:none;}

@media (max-width:480px){
  .newsletter-panel{padding:2rem 1.5rem 1.8rem;}
  .newsletter-panel h3{font-size:1.3rem;}
}

/* =====================================================================
   ARTICLE DETAIL PAGE — /articles/*.html
   Long-form reading layout: hero band, TL;DR callout, prose column,
   table of contents, key takeaways, FAQ (reuses .faq-item), related
   articles (reuses .article-card), CTA banner. All built from existing
   design tokens for visual continuity with the rest of the site.
   ===================================================================== */

.article-detail-hero{
  position:relative;padding:9rem 0 3rem;overflow:hidden;
  background:
    radial-gradient(closest-side, var(--neon-glow-soft), transparent 70%) -10% -20% / 55% 140% no-repeat,
    var(--obsidian-950);
  border-bottom:1px solid var(--glass-border);
}
.article-detail-hero .container{position:relative;z-index:1;max-width:900px;}
.article-detail-hero .article-cat{position:static;display:inline-flex;margin-bottom:1rem;}
.article-detail-hero h1{
  font-family:var(--font-display);color:#fff;font-weight:600;
  font-size:clamp(1.9rem,3.6vw,2.75rem);line-height:1.15;margin:0 0 1.1rem;
}
.article-detail-meta{display:flex;flex-wrap:wrap;align-items:center;gap:1.4rem;
  font-family:var(--font-mono);font-size:.76rem;letter-spacing:.03em;color:var(--text-dim);}
.article-detail-meta span{display:inline-flex;align-items:center;gap:.45rem;}
.article-detail-meta i{color:var(--neon-300);}

.article-detail-cover{max-width:900px;margin:0 auto;padding:0 1.4rem;}
@media (min-width:640px){.article-detail-cover{padding:0 2rem;}}
.article-detail-cover img{width:100%;aspect-ratio:21/9;object-fit:cover;clip-path:var(--clip-card);
  border:1px solid var(--glass-border);margin-top:-1.8rem;position:relative;z-index:2;}

.article-detail-body{padding:3.5rem 0 5rem;}
.article-detail-grid{display:grid;grid-template-columns:.72fr 1.6fr;gap:3rem;max-width:1080px;margin:0 auto;align-items:start;}
@media (max-width:900px){.article-detail-grid{grid-template-columns:1fr;}}

/* Sticky mini table-of-contents */
.article-toc{position:sticky;top:calc(var(--header-h,72px) + 1.4rem);border:1px solid var(--glass-border);
  background:var(--bg-card);backdrop-filter:blur(14px);clip-path:var(--clip-card-sm);padding:1.4rem 1.5rem;}
.article-toc h2{font-family:var(--font-mono);font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--text-dim);margin:0 0 .9rem;}
.article-toc ol{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.6rem;counter-reset:toc;}
.article-toc li{counter-increment:toc;}
.article-toc a{display:flex;gap:.6rem;color:var(--text-mid);text-decoration:none;font-size:.86rem;line-height:1.4;transition:color .2s ease;}
.article-toc a::before{content:counter(toc);flex:none;width:1.3rem;height:1.3rem;display:flex;align-items:center;justify-content:center;
  font-family:var(--font-mono);font-size:.68rem;background:rgba(255,255,255,.05);border:1px solid var(--glass-border);color:var(--text-dim);}
.article-toc a:hover{color:var(--text-hi);}
@media (max-width:900px){.article-toc{position:static;margin-bottom:0;}}

/* Prose column */
.article-content{max-width:66ch;}
.article-content h2{color:#fff;font-size:1.5rem;margin:2.4rem 0 1rem;scroll-margin-top:calc(var(--header-h,72px) + 1rem);}
.article-content h2:first-child{margin-top:0;}
.article-content h3{color:#fff;font-size:1.15rem;margin:1.8rem 0 .8rem;}
.article-content p{color:var(--text-mid);font-size:1rem;line-height:1.75;margin:0 0 1.2rem;}
.article-content ul,.article-content ol{color:var(--text-mid);font-size:.98rem;line-height:1.7;margin:0 0 1.3rem;padding-inline-start:1.3rem;}
.article-content li{margin-bottom:.5rem;}
.article-content li::marker{color:var(--neon-300);}
.article-content strong{color:var(--text-hi);}
.article-content a{color:var(--neon-300);text-decoration:underline;text-decoration-color:rgba(104,104,253,.4);text-underline-offset:2px;}
.article-content a:hover{color:var(--neon-200,var(--brand-200));}

/* TL;DR / quick-answer callout — the block AI answer engines &amp; featured
   snippets tend to lift directly, so it states the core answer in one
   tight paragraph before any other content. */
.tldr-box{
  position:relative;background:rgba(5,4,252,.06);border:1px solid rgba(5,4,252,.28);
  border-inline-start:3px solid var(--brand-500);clip-path:var(--clip-card-sm);
  padding:1.3rem 1.5rem;margin:0 0 2.2rem;
}
.tldr-box .tldr-label{display:flex;align-items:center;gap:.5rem;font-family:var(--font-mono);font-size:.68rem;
  letter-spacing:.1em;text-transform:uppercase;color:var(--neon-300);margin-bottom:.5rem;}
.tldr-box p{color:var(--text-hi);font-size:.98rem;line-height:1.65;margin:0;}

/* Key takeaways */
.key-takeaways{list-style:none;margin:0 0 1.3rem;padding:0;display:flex;flex-direction:column;gap:.7rem;}
.key-takeaways li{display:flex;gap:.7rem;align-items:flex-start;color:var(--text-mid);font-size:.96rem;line-height:1.6;}
.key-takeaways i{color:var(--ok);margin-top:.25rem;flex:none;}

/* FAQ section wrapper on article pages */
.article-faq-section{margin-top:2.6rem;padding-top:2.2rem;border-top:1px solid var(--glass-border);}
.article-faq-section .faq-item .faq-q{font-size:.96rem;}

/* Author / E-E-A-T strip */
.article-author{display:flex;align-items:center;gap:.9rem;margin-top:2.6rem;padding-top:1.8rem;border-top:1px solid var(--glass-border);}
.article-author-avatar{width:2.6rem;height:2.6rem;flex:none;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg,rgba(5,4,252,.22),rgba(5,4,252,.05));border:1px solid rgba(5,4,252,.3);
  color:var(--brand-300);clip-path:var(--clip-card-sm);font-size:.95rem;}
.article-author b{display:block;color:var(--text-hi);font-size:.9rem;}
.article-author span{display:block;color:var(--text-dim);font-size:.78rem;margin-top:.15rem;}

/* CTA banner */
.article-cta-banner{
  max-width:1080px;margin:3.5rem auto 0;padding:2.2rem 2rem;display:flex;flex-wrap:wrap;align-items:center;
  justify-content:space-between;gap:1.4rem;background:linear-gradient(135deg,rgba(5,4,252,.14),rgba(5,4,252,.03));
  border:1px solid rgba(5,4,252,.28);clip-path:var(--clip-card);
}
.article-cta-banner h3{color:#fff;font-size:1.2rem;margin:0 0 .3rem;}
.article-cta-banner p{color:var(--text-mid);font-size:.9rem;margin:0;max-width:46ch;}

/* Related articles */
.related-section{max-width:1080px;margin:4rem auto 0;}
.related-section h2{color:#fff;font-size:1.3rem;margin:0 0 1.4rem;}
.related-section .article-grid{grid-template-columns:repeat(3,1fr);gap:1.3rem;}
@media (max-width:900px){.related-section .article-grid{grid-template-columns:1fr;}}

@media (max-width:480px){
  .article-detail-hero{padding-top:8rem;}
  .article-detail-cover img{margin-top:-1.2rem;}
  .article-cta-banner{padding:1.6rem 1.4rem;}
}

/* ===================================================================
   AAA SOLUTIONS — SITE PRELOADER (Animated Brand Mark)
   Inlined SVG in HTML = zero extra network request, so this never
   adds load time. Hard-capped at 2.5s in JS so it can never hang.
=================================================================== */
#aaaPreloader{
  position:fixed;
  inset:0;
  z-index:99999;
  display:flex;
  align-items:center;
  justify-content:center;
  background:#06060b;
  transition:opacity .5s ease;
  will-change:opacity;
}
#aaaPreloader.aaa-preloader--hidden{
  opacity:0;
  pointer-events:none;
}
.aaa-preloader-mark{
  width:min(112px,26vw);
  height:min(112px,26vw);
  filter:drop-shadow(0 0 16px rgba(5,4,252,.5));
}
.aaa-preloader-mark svg{
  width:100%;
  height:100%;
  display:block;
  overflow:visible;
}
html.aaa-loading,
html.aaa-loading body{
  overflow:hidden;
  height:100%;
}

/* Preloader animation keyframes (scoped, won't collide with page content) */
@keyframes aaaPlDraw{
  0%{ stroke-dashoffset:300; opacity:0; }
  15%{ opacity:1; }
  45%{ stroke-dashoffset:0; opacity:1; }
  85%,100%{ stroke-dashoffset:0; opacity:.2; }
}
@keyframes aaaPlFill{
  0%,25%{ fill-opacity:0; opacity:0; }
  45%,85%{ fill-opacity:1; opacity:1; filter:drop-shadow(0 0 4px rgba(5,4,252,.9)); }
  100%{ fill-opacity:0; opacity:0; }
}
@keyframes aaaPlSweep{
  0%,30%{ transform:translateY(120%) skewY(-20deg); opacity:0; }
  55%{ opacity:1; }
  75%,100%{ transform:translateY(-120%) skewY(-20deg); opacity:0; }
}
@keyframes aaaPlNode{
  0%,35%{ transform:scale(0); opacity:0; }
  50%,80%{ transform:scale(1); opacity:1; filter:drop-shadow(0 0 5px #00E5FF); }
  95%,100%{ transform:scale(0); opacity:0; }
}
@keyframes aaaPlSpin{
  0%{ transform:rotate(0deg); opacity:0; }
  20%{ opacity:.8; }
  40%{ transform:rotate(180deg); opacity:.8; }
  55%,100%{ opacity:0; }
}

.aaa-pl-stroke{
  stroke:#00E5FF;
  stroke-width:.9;
  stroke-dasharray:300;
  stroke-dashoffset:300;
  fill:none;
  filter:url(#aaaPreloaderGlow);
  animation:aaaPlDraw 5s cubic-bezier(.4,0,.2,1) infinite;
}
.aaa-pl-fill{
  fill:url(#aaaPreloaderBlue);
  animation:aaaPlFill 5s cubic-bezier(.4,0,.2,1) infinite;
}
.aaa-pl-sweep{
  fill:url(#aaaPreloaderCyan);
  animation:aaaPlSweep 5s ease-in-out infinite;
}
.aaa-pl-node{
  fill:#00E5FF;
  transform-box:fill-box;
  transform-origin:center;
  animation:aaaPlNode 5s ease-in-out infinite;
}
.aaa-pl-reticle{
  transform-box:view-box;
  transform-origin:34.5px 28px;
  animation:aaaPlSpin 5s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce){
  .aaa-pl-stroke,
  .aaa-pl-sweep,
  .aaa-pl-node,
  .aaa-pl-reticle{
    animation:none !important;
    opacity:0 !important;
  }
  .aaa-pl-fill{
    animation:none !important;
    opacity:1 !important;
    fill-opacity:1 !important;
    filter:drop-shadow(0 0 4px rgba(5,4,252,.9));
  }
  #aaaPreloader{
    transition:none;
  }
}