/* ============================================================
   MG COAT — Liquid PCB Plastic Coating
   Minimal dark tech theme · EN / RU / TR / AR / FA
   ============================================================ */

:root {
  /* brand warm — kept ONLY for the wordmark/logo (the deliberate 5% warm) + errors */
  --red: #ff3340;
  --red-deep: #e30613;
  --error: #ff4d4f;
  /* lead accents — trust/water cyan→teal */
  --cyan: #00b7ff;       /* primary accent (azure) */
  --teal: #00e0b8;       /* secondary accent */
  --success: #19e0a0;
  --warning: #ffb020;
  /* warm power/premium accent — pairs with cyan for "trust + power" */
  --gold: #ce7c38;
  --gold-2: #f0a463;

  --bg: #05070a;
  --bg-2: #0b1118;
  --ink: #f4f7fa;
  --text: #aab4c0;
  --muted: #7d8896;

  --glass: rgba(176, 210, 238, .065);     /* cool frosted fill — the glass body */
  --glass-2: rgba(176, 210, 238, .12);    /* brighter on hover */
  --brd: rgba(170, 205, 235, .20);        /* bright glassy edge (catches light) */
  --brd-2: rgba(0, 183, 255, .60);        /* active/hover edge → accent */
  --line: rgba(170, 205, 235, .13);
  --glass-blur: blur(18px) saturate(170%);

  /* layered, soft-falloff depth — reads as expensive glass, not a hard drop */
  --shadow: 0 32px 72px -22px rgba(0, 0, 0, .62), 0 10px 28px -14px rgba(0, 0, 0, .45);
  --shadow-sm: 0 14px 34px -16px rgba(0, 0, 0, .52);

  --radius: 16px;
  --radius-lg: 22px;
  --maxw: 1140px;
  --ease: cubic-bezier(.22, .61, .36, 1);
  --display: "Space Grotesk", Inter, "Noto Sans Thai", "Segoe UI", system-ui, sans-serif;
  --sans: Inter, "Noto Sans Thai", "Segoe UI", system-ui, Arial, sans-serif;
  --mono: "Space Grotesk", "Noto Sans Thai", ui-monospace, "SFMono-Regular", Menlo, monospace;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  color: var(--text);
  background: var(--bg);
  font-family: var(--sans);
  line-height: 1.7;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* very subtle static base glow (fallback behind canvas) */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -3;
  background:
    radial-gradient(700px 480px at 15% 0%, rgba(0, 183, 255, .06), transparent 60%),
    radial-gradient(680px 560px at 90% 10%, rgba(206, 124, 56, .045), transparent 60%),
    linear-gradient(180deg, var(--bg) 0%, var(--bg-2) 100%);
}

/* animated circuit-field canvas */
#fx {
  position: fixed;
  inset: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
  pointer-events: none;
  display: block;
  transition: opacity .4s linear;
}
/* During the self-playing intro the galaxy canvas rises above the site (with a
   dark gradient backdrop) so it reads as a loading screen; afterwards it drops
   back to the page background. */
.fx-intro #fx {
  z-index: 9001;
  background: radial-gradient(125% 90% at 50% 42%, #0a1422 0%, #060912 55%, #05070a 100%);
}

/* Persian & Arabic: Vazirmatn for every role (body, headings, labels) so RTL
   text never falls back to a mismatched system font. Space Grotesk has no
   Persian/Arabic glyphs, so we remap the font variables inside RTL context.
   Latin / LTR content keeps Inter + Space Grotesk unchanged. */
[dir=rtl] {
  --display: Vazirmatn, "Space Grotesk", Inter, "Segoe UI", system-ui, sans-serif;
  --sans: Vazirmatn, Inter, "Segoe UI", system-ui, Arial, sans-serif;
  --mono: Vazirmatn, ui-monospace, "SFMono-Regular", Menlo, monospace;
}
[dir=rtl] body, [dir=rtl] { font-family: var(--sans); }
[dir=rtl] .kicker, [dir=rtl] .lang-caption,
[dir=rtl] .brand-text small { font-family: var(--sans); }

/* slim brand-coloured top loading bar (assets/js/progress.js) */
#mg-progress { position: fixed; top: 0; left: 0; height: 3px; width: 0; z-index: 99999; opacity: 0; pointer-events: none;
  background: linear-gradient(90deg, var(--red, #ff3340), var(--cyan, #54d8ec));
  box-shadow: 0 0 10px rgba(84,216,236,.7), 0 0 4px rgba(255,51,64,.6);
  border-radius: 0 3px 3px 0; transition: width .18s ease, opacity .32s ease; }
[dir=rtl] #mg-progress { left: auto; right: 0; border-radius: 3px 0 0 3px; }

img, picture { max-width: 100%; }
a { color: inherit; }

.container { width: min(var(--maxw), calc(100% - 40px)); margin-inline: auto; }

/* ---------- Skip link ---------- */
.skip-link {
  position: absolute; top: -60px; inset-inline-start: 12px; z-index: 200;
  background: var(--cyan); color: #fff; padding: 10px 16px; border-radius: 10px; text-decoration: none;
  transition: top .2s var(--ease);
}
.skip-link:focus { top: 8px; }

/* ---------- Scroll progress ---------- */
#scroll-progress {
  position: fixed; inset-block-start: 0; inset-inline-start: 0; height: 2px; width: 0;
  background: linear-gradient(90deg, var(--cyan), var(--gold));
  z-index: 9999; transition: width .08s linear;
}

/* ============================================================
   WELCOME INTRO (pinned, scroll-scrubbed)
   ============================================================ */
/* The intro is a self-playing loading screen: while active it is a fixed
   full-screen overlay above the real site; the site sits in normal flow
   underneath and is revealed when the intro dissolves. With no JS / reduced
   motion it degrades to a normal one-screen branded splash. */
#intro {
  position: relative;
  height: 100vh;
}
.fx-intro #intro {
  position: fixed;
  inset: 0;
  height: 100vh;
  z-index: 9002;
  pointer-events: none;
}
/* lock the page under the overlay; a tap/scroll fast-forwards the intro */
html.fx-intro, html.fx-intro body { overflow: hidden; height: 100%; }
.fx-intro .fab-stack, .fx-intro #to-top { display: none !important; }
/* the site emerges cinematically from the galaxy as the intro clears:
   a gentle focus-pull (blur→sharp) with a settling push-in, the header
   easing down a beat later */
main { transition: opacity .95s cubic-bezier(.2,.7,.2,1), transform 1.05s cubic-bezier(.2,.7,.2,1), filter .95s ease; will-change: opacity, transform, filter; }
.site-header { transition: opacity .8s ease .12s, transform .9s cubic-bezier(.2,.7,.2,1) .12s; }
.fx-intro main { opacity: 0; transform: scale(1.055); filter: blur(9px); }
.fx-intro .site-header { opacity: 0; transform: translateY(-14px); }
.intro-done main { opacity: 1; transform: none; filter: none; }
.intro-done .site-header { opacity: 1; transform: none; }
.intro-sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  display: grid;
  place-items: center;
  text-align: center;
  overflow: hidden;
}
.intro-inner {
  position: relative;
  padding: 0 24px;
  will-change: opacity, transform;
}
.intro-logo {
  width: clamp(116px, 21vw, 232px);
  height: auto;
  display: block;
  margin: 0 auto 26px;
  filter: drop-shadow(0 12px 40px rgba(0, 183, 255, .18));
}
.intro-title {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(38px, 8vw, 92px);
  letter-spacing: .12em;
  margin: 0;
  line-height: 1;
  /* glassy chrome fill — bright top highlight fading to cool glass at the base */
  color: var(--ink); /* fallback */
  background: linear-gradient(176deg, #ffffff 0%, #eef6ff 30%, #c3d7e7 56%, #9bbace 78%, #e2eefb 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  /* crisp edge for legibility + soft cool glow = the "glass" depth */
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .35)) drop-shadow(0 10px 30px rgba(120, 185, 255, .28));
}
.intro-title b {
  font-weight: 700;
  color: var(--red); /* fallback */
  background: linear-gradient(176deg, #ff8088 0%, #ff3340 50%, #d11825 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
/* ── animated wordmark: a slow metallic shine sweeps the brand + a soft breathing glow ──
   The ::before re-draws "MGCoat" (same weight/size/spacing → pixel-aligned) and clips a
   travelling white highlight to the letters. On-brand cool glow, not the demo's flat blue. */
.intro-title, .hl-name { position: relative; display: inline-block; }
.intro-title { animation: brandBreath 5s ease-in-out infinite alternate; }
/* Entrance guard: keep the choreographed elements hidden until fx.js reveals
   them, so the wordmark no longer flashes at its final spot then jumps. Only
   active when JS is on AND motion is allowed (the <html>.fx-intro flag, set
   by an early inline script); fx.js then drives their opacity in. */
.fx-intro .intro-logo,
.fx-intro .intro-title,
.fx-intro .intro-sub,
.fx-intro .intro-hint { opacity: 0; }
.intro-title::before, .hl-name::before {
  content: "MGCoat"; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(105deg, transparent 43%, rgba(214, 240, 255, .55) 47%, rgba(255, 255, 255, 1) 50%, rgba(214, 240, 255, .7) 53%, transparent 58%);
  background-size: 300% 100%; background-repeat: no-repeat; background-position: 160% 0;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent; opacity: 0;
  animation: brandShine 8s ease-in-out 1.2s infinite;
}
.hl-name::before { animation-duration: 10s; animation-delay: 2.4s; }
@keyframes brandShine {
  0% { background-position: 160% 0; opacity: 0; }
  5% { opacity: 1; }
  34% { background-position: -60% 0; opacity: 1; }
  40%, 100% { background-position: -60% 0; opacity: 0; }
}
@keyframes brandBreath {
  from { filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .35)) drop-shadow(0 10px 26px rgba(120, 185, 255, .20)); }
  to { filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .35)) drop-shadow(0 12px 34px rgba(120, 185, 255, .42)); }
}
@media (prefers-reduced-motion: reduce) {
  .intro-title { animation: none; }
  .intro-title::before, .hl-name::before { animation: none; opacity: 0; }
}
/* subtle, realistic black smoke — only directly behind the logo, just enough to
   seat it in the particle field (kept small + soft so it reads as a faint shadow) */
.intro-inner::before {
  content: "";
  position: absolute;
  left: 50%; top: 90px;
  width: min(230px, 40vw); aspect-ratio: 1; transform: translate(-50%, -50%);
  background:
    radial-gradient(48% 48% at 50% 50%, rgba(3, 5, 10, .8), rgba(3, 5, 10, .4) 46%, transparent 70%),
    radial-gradient(34% 40% at 60% 60%, rgba(3, 5, 10, .35), transparent 64%),
    radial-gradient(36% 38% at 40% 40%, rgba(3, 5, 10, .3), transparent 62%);
  filter: blur(14px); pointer-events: none; z-index: -1;
  animation: introsmoke 9s var(--ease) infinite;
}
@keyframes introsmoke {
  0%, 100% { opacity: .72; transform: translate(-50%, -50%) scale(1) rotate(0deg); }
  50% { opacity: .9; transform: translate(-50%, -50.5%) scale(1.05) rotate(1.5deg); }
}
/* cinematic vignette: the "theatre curtain" sits a touch closed at the start
   and opens during the entrance, then rests as a faint edge darkening */
.intro-sticky::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 1;
  background: radial-gradient(120% 90% at 50% 42%, transparent 52%, rgba(2, 4, 8, .55) 100%);
  animation: introVignette 4s cubic-bezier(.22, .61, .36, 1) 1 forwards;
}
@keyframes introVignette {
  0%   { opacity: 1; transform: scale(1.18); }
  60%  { opacity: .62; }
  100% { opacity: .42; transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  .intro-sticky::before { animation: none; opacity: .42; transform: none; }
  .intro-sticky::after { animation: none; opacity: 0; }
}
/* a single, realistic light reflection that glides across once on load, then is gone */
.intro-sticky::after {
  content: "";
  position: absolute; inset: -20% -10%; pointer-events: none; z-index: 1;
  background: linear-gradient(100deg, transparent 40%, rgba(255, 255, 255, .03) 45%, rgba(190, 228, 255, .10) 49%, rgba(240, 164, 99, .07) 52%, rgba(255, 255, 255, .03) 56%, transparent 62%);
  transform: translateX(-130%);
  mix-blend-mode: screen; opacity: 0; filter: blur(6px);
  animation: introsweep 1.9s cubic-bezier(.4, 0, .2, 1) 1.5s 1 forwards;
}
@keyframes introsweep {
  0% { transform: translateX(-130%); opacity: 0; }
  18% { opacity: 1; }
  82% { opacity: 1; }
  100% { transform: translateX(130%); opacity: 0; }
}
.intro-sub {
  font-family: var(--mono);
  font-size: clamp(11px, 1.6vw, 14px);
  letter-spacing: .34em;
  text-transform: uppercase;
  color: var(--cyan);
  margin-top: 16px;
}
.intro-hint {
  position: absolute;
  inset-block-end: 38px;
  inset-inline: 0;
  text-align: center;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--muted);
}
.intro-hint span {
  display: block;
  margin-top: 8px;
  font-size: 18px;
  animation: hintbob 1.8s var(--ease) infinite;
}
@keyframes hintbob { 0%,100% { transform: translateY(0); opacity: .5; } 50% { transform: translateY(6px); opacity: 1; } }

/* ============================================================
   HEADER (minimal glass)
   ============================================================ */
.site-header {
  position: sticky; top: 0; z-index: 80;
  background: rgba(5, 7, 10, .78);
  backdrop-filter: saturate(150%) blur(16px);
  -webkit-backdrop-filter: saturate(150%) blur(16px);
  border-bottom: 1px solid rgba(38, 50, 65, .7);
  transition: background .3s var(--ease), border-color .3s;
}
.site-header.scrolled { background: rgba(7, 9, 16, .8); }
.nav { min-height: 70px; display: flex; align-items: center; justify-content: space-between; gap: 16px; }

.brand { display: inline-flex; align-items: center; gap: 11px; text-decoration: none; color: var(--ink); white-space: nowrap; }
.brand img { width: 40px; height: 40px; object-fit: contain; }
.brand-text { display: flex; flex-direction: column; line-height: 1.05; font-family: var(--display); font-weight: 700; font-size: 17px; letter-spacing: .04em; }
.brand-text small {
  font-family: var(--mono); font-weight: 400; font-size: 9.5px; color: var(--muted);
  letter-spacing: .16em; text-transform: uppercase; margin-top: 3px;
}

/* language selector */
.lang-panel {
  display: flex; align-items: center; gap: 4px; flex-wrap: nowrap;
  overflow-x: auto; scrollbar-width: none;
  background: var(--glass); border: 1px solid var(--brd);
  padding: 4px; border-radius: 999px;
}
.lang-panel::-webkit-scrollbar { display: none; }
.lang-caption {
  font-family: var(--mono); font-size: 10px; font-weight: 500; color: var(--muted);
  text-transform: uppercase; letter-spacing: .16em; flex: 0 0 auto; padding-inline: 8px;
}
.lang-btn {
  flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px;
  border: 0; background: transparent; color: var(--text);
  padding: 7px 12px; border-radius: 999px; font: inherit; font-weight: 600; font-size: 13px;
  cursor: pointer; transition: all .2s var(--ease);
}
.lang-btn:hover { color: var(--ink); background: var(--glass-2); }
.lang-btn[aria-pressed="true"] { background: var(--cyan); color: #fff; }

/* brand tooltip */
.brand { position: relative; }
.brand-tip {
  position: absolute; top: calc(100% + 12px); inset-inline-start: 0;
  width: 280px; max-width: 78vw;
  background: rgba(10, 13, 21, .96); border: 1px solid var(--brd); border-radius: 12px;
  padding: 12px 14px; font-family: var(--sans); font-weight: 500; font-size: 12.5px;
  line-height: 1.55; letter-spacing: 0; color: var(--text); box-shadow: var(--shadow);
  opacity: 0; visibility: hidden; transform: translateY(-6px); pointer-events: none;
  transition: opacity .22s var(--ease), transform .22s var(--ease), visibility .22s; z-index: 95;
}
.brand:hover .brand-tip, .brand:focus-visible .brand-tip { opacity: 1; visibility: visible; transform: translateY(0); }

/* primary navigation */
.main-nav { display: flex; align-items: center; gap: 2px; margin-inline: auto; }
.nav-link {
  padding: 8px 10px; border-radius: 9px; font-size: 13px; font-weight: 600;
  color: var(--text); text-decoration: none; white-space: nowrap; border: 1px solid transparent;
  transition: color .28s var(--ease), background .28s var(--ease), border-color .28s var(--ease), box-shadow .28s var(--ease), text-shadow .28s var(--ease);
}
.nav-link:hover { color: var(--ink); background: var(--glass-2); }
.nav-cta { color: var(--ink); border-color: var(--brd); }
.nav-cta:hover { background: var(--cyan); border-color: var(--cyan); color: #fff; }

/* neon glow around the top nav items (About → Contact), smooth */
.main-nav .nav-link:hover {
  color: #eafdff; background: rgba(0, 183, 255, .08);
  border-color: rgba(0, 183, 255, .8);
  box-shadow: 0 0 0 1px rgba(0, 183, 255, .3), 0 0 18px rgba(0, 183, 255, .55), inset 0 0 13px rgba(0, 183, 255, .14);
  text-shadow: 0 0 9px rgba(0, 183, 255, .6);
}
.main-nav .nav-cta:hover {
  color: #fff; background: var(--cyan); border-color: var(--cyan);
  box-shadow: 0 0 0 1px rgba(0, 183, 255, .4), 0 0 18px rgba(0, 183, 255, .6);
  text-shadow: none;
}
/* clicked item: bolder neon that stays (current-section indicator) */
.main-nav .nav-link.active {
  color: #ffffff; background: rgba(0, 183, 255, .13);
  border-color: rgba(0, 183, 255, .95);
  box-shadow: 0 0 0 1px rgba(0, 183, 255, .5), 0 0 24px rgba(0, 183, 255, .72), inset 0 0 16px rgba(0, 183, 255, .2);
  text-shadow: 0 0 11px rgba(0, 183, 255, .85);
}
.main-nav .nav-cta.active {
  color: #fff; background: var(--cyan); border-color: var(--cyan);
  box-shadow: 0 0 0 1px rgba(0, 183, 255, .6), 0 0 26px rgba(0, 183, 255, .8);
  text-shadow: none;
}

/* hamburger */
.nav-toggle {
  display: none; width: 42px; height: 38px; border: 1px solid var(--brd); border-radius: 10px;
  background: var(--glass); cursor: pointer; padding: 0; flex: 0 0 auto;
}
.nav-toggle span { display: block; width: 18px; height: 2px; margin: 3px auto; background: var(--ink); border-radius: 2px; transition: .25s var(--ease); }
.site-header.nav-open .nav-toggle span:nth-child(1) { transform: translateY(5px) rotate(45deg); }
.site-header.nav-open .nav-toggle span:nth-child(2) { opacity: 0; }
.site-header.nav-open .nav-toggle span:nth-child(3) { transform: translateY(-5px) rotate(-45deg); }

/* contact section */
.contact-section .contact-actions { margin: 4px 0 22px; }
.contact-section .social-strip { justify-content: flex-start; padding: 0; margin-top: clamp(22px, 3.4vw, 34px); }

/* WhatsApp order form */
.wa-form { max-width: 560px; margin: 6px 0 26px; }
.wa-form .form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 12px; }
.wa-form .field {
  width: 100%; margin-bottom: 12px; padding: 13px 15px; border-radius: 11px;
  background: var(--glass); border: 1px solid var(--brd); color: var(--ink);
  font: inherit; font-size: 16px; transition: border-color .2s, background .2s;
}
.wa-form .form-grid .field { margin-bottom: 0; }
.wa-form textarea.field { resize: vertical; min-height: 92px; }
.wa-form .field::placeholder { color: var(--muted); }
.wa-form .field:focus { outline: none; border-color: var(--cyan); background: var(--glass-2); }
.wa-form .btn { margin-top: 14px; }
@media (max-width: 560px) { .wa-form .form-grid { grid-template-columns: 1fr; gap: 12px; } .wa-form .form-grid .field { margin-bottom: 0; } }

.lang-section[hidden] { display: none; }

/* ============================================================
   HERO (minimal)
   ============================================================ */
.hero {
  position: relative;
  display: flex; align-items: center;
  min-height: clamp(560px, 84vh, 820px);
  padding: clamp(56px, 8vw, 96px) 0;
}
.hero-grid { position: relative; display: grid; grid-template-columns: 1.1fr .9fr; gap: 52px; align-items: center; }
.hero-logo { width: 200px; max-width: 64%; height: auto; display: block; margin-bottom: 22px; }

/* text-based brand lockup used in the hero (icon + chrome "MG COAT" wordmark) */
.hero-lockup { display: flex; align-items: center; gap: 16px; width: auto; max-width: 100%; margin-bottom: 22px; }
.hero-lockup .hl-mark { width: clamp(64px, 12vw, 92px); height: auto; flex: none; filter: drop-shadow(0 8px 24px rgba(0, 183, 255, .16)); }
.hl-text { display: flex; flex-direction: column; line-height: 1; }
.hl-name {
  font-family: var(--display); font-weight: 700; letter-spacing: .08em;
  font-size: clamp(34px, 6vw, 58px);
  color: var(--ink); /* fallback */
  background: linear-gradient(176deg, #ffffff 0%, #eef6ff 30%, #c3d7e7 56%, #9bbace 78%, #e2eefb 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .35)) drop-shadow(0 8px 22px rgba(120, 185, 255, .22));
}
.hl-name b {
  font-weight: 700; color: var(--red); /* fallback */
  background: linear-gradient(176deg, #ff8088 0%, #ff3340 50%, #d11825 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.hl-text small {
  font-family: var(--mono); font-weight: 400; font-size: clamp(9px, 1.4vw, 12px);
  letter-spacing: .16em; text-transform: uppercase; color: var(--muted); margin-top: 8px;
}

.kicker {
  display: inline-flex; align-items: center; gap: 13px;
  font-family: var(--mono); color: var(--cyan); font-weight: 500; font-size: 12px;
  letter-spacing: .28em; text-transform: uppercase; margin-bottom: 22px;
}
.kicker::before { content: ""; width: 36px; height: 1px; background: linear-gradient(90deg, var(--cyan), var(--gold)); opacity: .9; }

h1 {
  margin: 0; font-family: var(--display);
  font-size: clamp(40px, 5.6vw, 76px); line-height: 1.02; letter-spacing: -.02em; font-weight: 700;
  color: #eef4fa; /* fallback */
  background: linear-gradient(110deg, #c6d6e4 0%, #ffffff 38%, #ffffff 50%, #cfe0ee 62%, #c2d2e0 100%);
  background-size: 220% auto;
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  animation: foilSheen 11s linear infinite;
}
@keyframes foilSheen { to { background-position: 220% center; } }
[dir=rtl] h1 { letter-spacing: 0; line-height: 1.14; }

.lead { font-size: clamp(17px, 1.9vw, 22px); font-weight: 500; color: var(--ink); margin: 22px 0 14px; max-width: 54ch; }
.hero-text { font-size: 16px; color: var(--muted); max-width: 58ch; margin: 0 0 26px; }

.badge-row { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 30px; }
.badge-row span {
  border: 1px solid var(--brd); border-radius: 999px; padding: 7px 13px;
  font-size: 12px; font-weight: 500; color: var(--text); background: var(--glass);
}

.actions { display: flex; gap: 10px; flex-wrap: wrap; }
/* button groups inside content sections must breathe away from the block above
   (e.g. the docs cards) — the hero .actions is unaffected (it isn't in .content) */
.content .actions { margin-top: clamp(24px, 3.4vw, 34px); }
.btn {
  position: relative; overflow: hidden;
  display: inline-flex; align-items: center; justify-content: center; text-decoration: none;
  border: 1px solid var(--brd-2); padding: 13px 22px; border-radius: 10px;
  background: linear-gradient(135deg, rgba(0, 183, 255, .14), rgba(0, 224, 184, .09));
  -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
  color: var(--ink); font-size: 14px; font-weight: 600; cursor: pointer;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18), 0 6px 20px -10px rgba(0, 183, 255, .35);
  transition: transform .2s var(--ease), border-color .2s, background .2s, box-shadow .25s var(--ease);
}
.btn:hover {
  transform: translateY(-2px); border-color: var(--brd-2);
  background: linear-gradient(135deg, rgba(0, 183, 255, .24), rgba(0, 224, 184, .15));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .26), 0 12px 30px -10px rgba(0, 183, 255, .5);
}
.btn.red {
  border: 1px solid rgba(248, 188, 128, .85);
  background: linear-gradient(135deg, rgba(244, 168, 104, .62), rgba(200, 116, 50, .56));
  color: #2a1402; font-weight: 800; text-shadow: 0 1px 0 rgba(255, 220, 180, .35);
  box-shadow: inset 0 1px 0 rgba(255, 240, 224, .5), 0 0 30px rgba(206, 124, 56, .5), 0 10px 26px -10px rgba(206, 124, 56, .65);
}
.btn.red:hover {
  border-color: rgba(255, 205, 150, .95);
  background: linear-gradient(135deg, rgba(250, 184, 120, .74), rgba(210, 126, 58, .66));
  color: #2a1402; text-shadow: 0 1px 0 rgba(255, 220, 180, .4);
  box-shadow: inset 0 1px 0 rgba(255, 244, 230, .6), 0 0 40px rgba(206, 124, 56, .65), 0 12px 30px -10px rgba(206, 124, 56, .8);
}
/* glass shine sweep on hover */
.btn::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, .35) 50%, transparent 65%);
  transform: translateX(-130%); transition: transform .6s var(--ease);
}
.btn:hover::after { transform: translateX(130%); }

.visual-card {
  position: relative; border-radius: var(--radius-lg); overflow: hidden;
  border: 1px solid var(--brd); background: var(--glass); box-shadow: var(--shadow);
}
.visual-card img { display: block; width: 100%; height: auto; }
/* hero video, 20% glassy: 80% video + 20% of the cosmic background showing through */
.visual-card.visual-video { background: transparent; }
.visual-video video { display: block; width: 100%; height: auto; opacity: .8; }

/* cinematic image backdrop for selected sections (dark overlay keeps text legible) */
.has-bg { position: relative; isolation: isolate; }
.has-bg::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(rgba(5, 7, 13, .62), rgba(5, 7, 13, .78)),
    var(--bg-img) center / cover no-repeat;
  background-attachment: scroll, fixed;
}
/* extra readability scrim only behind the text column of the contact CTA */
.has-bg.contact-section::before { background: linear-gradient(rgba(5, 7, 13, .55), rgba(5, 7, 13, .72)), var(--bg-img) center / cover no-repeat; }
/* let the cosmic background glimmer through the image sections so the animation
   stays present all the way down the page */
.has-bg::before { opacity: .86; }

/* ============================================================
   CONTENT SECTIONS (clean / minimal)
   ============================================================ */
.content { padding: clamp(64px, 9vw, 124px) 0; border-top: 1px solid var(--line); position: relative; }
.content.gray { background: rgba(255, 255, 255, .03); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05); }

.section-title {
  font-family: var(--display); font-size: clamp(27px, 3.3vw, 42px); line-height: 1.1;
  letter-spacing: -.02em; margin: 0 0 18px; font-weight: 700; text-wrap: balance;
  color: #eef4fa; /* fallback */
  background: linear-gradient(176deg, #ffffff 0%, #dfeaf3 52%, #b7c7d6 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.section-title::after {
  content: ""; display: block; width: 60px; height: 3px; margin-top: 16px;
  background: linear-gradient(90deg, var(--cyan), var(--gold)); border-radius: 99px;
  box-shadow: 0 0 12px rgba(206, 124, 56, .35);
  transform: scaleX(0); transform-origin: left center;
  transition: transform .7s .12s var(--ease);
}
.section-title.is-visible::after { transform: scaleX(1); }
[dir=rtl] .section-title::after { transform-origin: right center; }
.section-copy { font-size: 16.5px; color: var(--muted); max-width: 78ch; margin: 0 0 34px; }

.text-stack { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px; }
.text-block, .app-card {
  background: var(--glass); border: 1px solid var(--brd); border-radius: var(--radius);
  padding: 26px 24px; position: relative; transition: transform .3s var(--ease), border-color .3s, background .3s;
}
.text-block:hover, .app-card:hover { transform: translateY(-4px); border-color: var(--brd-2); background: var(--glass-2); }
.text-block h3, .app-card h3 { margin: 0 0 9px; font-family: var(--display); font-size: 17px; color: var(--ink); font-weight: 600; }
.text-block p, .app-card p { margin: 0; font-size: 14.5px; color: var(--muted); }

.app-card { border-inline-start: 2px solid transparent; }
.app-card.tapped, .app-card.tapped:hover { border-inline-start-color: var(--cyan); }
.apps { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 16px; }

/* application cards that link to a related guide */
.app-card.app-linked { cursor: pointer; }
.app-card.app-linked:hover { border-inline-start-color: var(--cyan); }
.app-card .app-card-link { position: absolute; inset: 0; z-index: 2; border-radius: inherit; }
.app-card .app-readmore { display: inline-flex; align-items: center; gap: 5px; margin-top: 13px;
  font-family: var(--display); font-size: 12.5px; font-weight: 600; letter-spacing: .2px;
  color: var(--cyan); opacity: .82; transition: opacity .25s var(--ease), gap .25s var(--ease); }
.app-card.app-linked:hover .app-readmore { opacity: 1; gap: 9px; }

/* ---------- Video ---------- */
.video-section { border-top: 1px solid var(--line); }
.video-section .container {
  background: var(--glass); border: 1px solid var(--brd); border-radius: var(--radius-lg);
  padding: clamp(26px, 4vw, 46px);
}
.video-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 36px; align-items: center; }
.video-frame { position: relative; display: block; border-radius: var(--radius); overflow: hidden; aspect-ratio: 16 / 10; border: 1px solid var(--brd); }
.video-frame img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s var(--ease); }
.video-frame:hover img { transform: scale(1.04); }
.video-frame.test-video { aspect-ratio: 9 / 16; max-height: 78vh; background: #000; }
.cat-video { text-align: center; margin: 38px 0 18px; }
.cat-video h2 { margin: 0 0 6px; }
.cat-video p { color: var(--muted); margin: 0 0 16px; }
.video-frame.test-video video { width: 100%; height: 100%; object-fit: cover; display: block; }
.play-circle {
  position: absolute; inset: 0; margin: auto; width: 70px; height: 70px; border-radius: 50%;
  background: var(--cyan); color: #fff; display: grid; place-items: center; font-size: 24px;
  box-shadow: 0 10px 30px rgba(0, 183, 255, .4);
}
.video-link { margin-top: 4px; }

/* ---------- Comparison table ---------- */
.table-wrap {
  overflow-x: auto; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain;
  border-radius: var(--radius); border: 1px solid var(--brd); background: var(--glass);
  scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, .25) transparent;
}
.table-wrap::-webkit-scrollbar { height: 7px; }
.table-wrap::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, .22); border-radius: 99px; }
.table-wrap::-webkit-scrollbar-track { background: transparent; }
table { width: 100%; border-collapse: collapse; min-width: 640px; }
tbody td, thead th { min-width: 150px; }
tbody td:first-child, thead th:first-child { min-width: 130px; }
thead th { text-align: start; padding: 16px 18px; font-family: var(--display); font-size: 13px; font-weight: 600; color: var(--ink); border-bottom: 1px solid var(--brd); }
thead th:nth-child(2) { color: var(--cyan); }
tbody td { padding: 14px 18px; border-top: 1px solid var(--line); font-size: 14px; color: var(--text); vertical-align: top; }
tbody td:first-child { font-weight: 600; color: var(--ink); white-space: nowrap; }
tbody tr:hover td { background: rgba(255, 255, 255, .02); }

/* ---------- Media block (Tests) ---------- */
.media-block { display: grid; grid-template-columns: 1.2fr .8fr; gap: 44px; align-items: start; }
.image-box { border-radius: var(--radius); overflow: hidden; border: 1px solid var(--brd); box-shadow: var(--shadow); position: sticky; top: 96px; }
.image-box img { display: block; width: 100%; height: auto; }
.video-embed { position: relative; width: 100%; aspect-ratio: 16 / 9; background: #000; }
.video-embed iframe, .yt-facade { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; }
.yt-facade { padding: 0; cursor: pointer; background: #000; overflow: hidden; }
.yt-poster { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s cubic-bezier(.2,.7,.2,1), filter .3s ease; }
.yt-facade::after { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse at center, transparent 45%, rgba(0,0,0,.35) 100%); transition: opacity .3s ease; }
.yt-play { position: absolute; left: 50%; top: 50%; width: 72px; height: 50px; transform: translate(-50%,-50%); filter: drop-shadow(0 4px 14px rgba(0,0,0,.5)); transition: transform .2s cubic-bezier(.2,.7,.2,1); z-index: 1; }
.yt-play svg { width: 100%; height: 100%; display: block; }
.yt-play-bg { fill: #212121; opacity: .82; transition: fill .2s ease, opacity .2s ease; }
.yt-facade:hover .yt-poster, .yt-facade:focus-visible .yt-poster { transform: scale(1.05); filter: brightness(1.05); }
.yt-facade:hover .yt-play-bg, .yt-facade:focus-visible .yt-play-bg { fill: #ff0000; opacity: 1; }
.yt-facade:hover .yt-play, .yt-facade:focus-visible .yt-play { transform: translate(-50%,-50%) scale(1.1); }
.yt-facade:focus-visible { outline: 2px solid var(--cyan); outline-offset: -2px; }
.video-cap { margin: 0; padding: 10px 14px; font-size: 13.5px; color: var(--muted); background: var(--glass); text-align: center; }
.video-embed video { position: absolute; inset: 0; width: 100%; height: 100%; background: #000; display: block; }

/* nav "Videos" trigger + videos hub modal */
.nav-video { background: none; border: 0; cursor: pointer; font: inherit; display: inline-flex; align-items: center; gap: 6px; }
.nav-video .nv-ic { width: 18px; height: 18px; opacity: .9; }
.vhub[hidden] { display: none; }
.vhub { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; padding: 20px; }
.vhub-back { position: absolute; inset: 0; background: rgba(4,8,16,.74); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.vhub-panel { position: relative; width: min(940px, 100%); max-height: 90vh; overflow: auto; background: var(--bg-2); border: 1px solid var(--brd); border-radius: var(--radius); box-shadow: var(--shadow); padding: 30px 28px; }
.vhub-x { position: absolute; top: 12px; inset-inline-end: 14px; width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--brd); background: var(--glass); color: var(--ink); font-size: 22px; line-height: 1; cursor: pointer; }
.vhub-x:hover { background: var(--glass-2); }
.vhub-title { margin: 0 0 20px; font-family: var(--display, "Space Grotesk"), sans-serif; font-size: 22px; color: var(--ink); }
.vhub-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 22px; }
.vhub-item { margin: 0; }
.vhub-item .video-embed { border-radius: 12px; overflow: hidden; border: 1px solid var(--brd); }
.vhub-cap { margin: 12px 2px 0; font-size: 14px; font-weight: 500; color: var(--ink); }
/* YouTube items open the video on YouTube (reliable on every device) */
.vhub-yt { display: block; text-decoration: none; }
.vhub-yt .video-embed { cursor: pointer; }
.vhub-yt .yt-poster { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s cubic-bezier(.2,.7,.2,1), filter .3s ease; }
.vhub-yt:hover .yt-poster, .vhub-yt:focus-visible .yt-poster { transform: scale(1.05); filter: brightness(1.06); }
.vhub-yt:hover .yt-play-bg, .vhub-yt:focus-visible .yt-play-bg { fill: #ff0000; opacity: 1; }
.vhub-ytbadge { position: absolute; inset-inline-end: 8px; inset-block-end: 8px; z-index: 2; pointer-events: none;
  font-family: var(--display); font-size: 11px; font-weight: 600; letter-spacing: .03em; color: #fff;
  background: rgba(0,0,0,.62); border-radius: 6px; padding: 4px 8px; }

/* ---------- Statement / Conclusion ---------- */
.statement {
  position: relative; overflow: hidden; border-radius: var(--radius-lg);
  padding: clamp(34px, 5vw, 58px); color: var(--ink);
  background: var(--glass-2); border: 1px solid var(--brd-2);
  margin-block-start: 16px; /* keep the same gap as the cards above it */
}
.statement::after {
  content: ""; position: absolute; inset-block-start: -40%; inset-inline-end: -6%;
  width: 360px; height: 360px;
  background: radial-gradient(circle, rgba(0, 183, 255, .12), transparent 70%); pointer-events: none;
}
.statement h2 { margin: 0 0 12px; font-family: var(--display); font-size: clamp(24px, 3vw, 34px); font-weight: 700; color: var(--ink); }
.statement p { margin: 0; color: var(--text); font-size: 16px; max-width: 80ch; }

/* ---------- Social strip ---------- */
.social-strip { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; padding: 44px 0; }
.social-link {
  display: inline-flex; align-items: center; gap: 10px; text-decoration: none;
  border: 1px solid var(--brd); background: var(--glass); border-radius: 999px;
  padding: 11px 19px; font-weight: 600; font-size: 14px; color: var(--ink);
  transition: transform .2s var(--ease), border-color .2s, background .2s;
}
.social-link svg { width: 21px; height: 21px; }
.social-link:hover { transform: translateY(-2px); background: var(--glass-2); }
.social-link.instagram:hover { border-color: #E1306C; }
.social-link.whatsapp-mini:hover { border-color: #25D366; }

/* ---------- Footer ---------- */
footer { background: #030507; color: var(--text); text-align: center; padding: 30px 18px; font-size: 13.5px; border-top: 1px solid #263241; }

/* ---------- Back to top ---------- */
#to-top {
  position: fixed; inset-block-end: 22px; inset-inline-end: 22px; z-index: 90;
  width: 46px; height: 46px; border-radius: 50%;
  border: 1px solid rgba(0, 183, 255, .4); color: var(--cyan); font-size: 20px; cursor: pointer;
  background: rgba(255, 255, 255, .06);
  backdrop-filter: blur(10px) saturate(140%); -webkit-backdrop-filter: blur(10px) saturate(140%);
  box-shadow: 0 8px 24px rgba(0, 0, 0, .3), 0 0 14px rgba(0, 183, 255, .28), inset 0 1px 0 rgba(255, 255, 255, .12);
  opacity: 0; transform: translateY(10px);
  transition: opacity .3s var(--ease), transform .3s var(--ease), box-shadow .3s var(--ease), background .3s var(--ease);
}
#to-top.show { opacity: 1; transform: translateY(0); }
#to-top:hover { color: #fff; background: rgba(0, 183, 255, .14); box-shadow: 0 10px 28px rgba(0, 0, 0, .35), 0 0 22px rgba(0, 183, 255, .5); }

/* ============================================================
   SCROLL REVEAL
   ============================================================ */
.js-reveal { opacity: 0; transform: translateY(30px); transition: opacity .7s var(--ease), transform .85s var(--ease), clip-path .85s var(--ease); will-change: opacity, transform; }
.js-reveal.is-visible { opacity: 1; transform: none; }
/* reveal flavours — variety reads as crafted, and these are crisper + lighter than a blur */
.js-reveal.rv-scale { transform: translateY(20px) scale(.945); }
.js-reveal.rv-scale.is-visible { transform: none; }
.js-reveal.rv-wipe { transform: translateY(14px); clip-path: inset(0 0 100% 0); }
.js-reveal.rv-wipe.is-visible { transform: none; clip-path: inset(0 0 0 0); }
.text-stack.js-reveal.is-visible > *, .apps.js-reveal.is-visible > *, .badge-row.js-reveal.is-visible > * { animation: rise .6s var(--ease) both; }
@keyframes rise { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
/* parallax depth — media glides slightly slower than the page (set per-frame in JS) */
.px-media { will-change: transform; backface-visibility: hidden; }
/* staggered entrance for grid children */
.js-reveal.is-visible > *:nth-child(2) { animation-delay: .06s; }
.js-reveal.is-visible > *:nth-child(3) { animation-delay: .12s; }
.js-reveal.is-visible > *:nth-child(4) { animation-delay: .18s; }
.js-reveal.is-visible > *:nth-child(5) { animation-delay: .24s; }
.js-reveal.is-visible > *:nth-child(6) { animation-delay: .30s; }
.js-reveal.is-visible > *:nth-child(7) { animation-delay: .36s; }
.js-reveal.is-visible > *:nth-child(8) { animation-delay: .42s; }
.js-reveal.is-visible > *:nth-child(n+9) { animation-delay: .48s; }
.lang-section:not([hidden]) .hero-grid > * { animation: heroIn .8s var(--ease) both; }
.lang-section:not([hidden]) .hero-grid > *:last-child { animation-delay: .12s; }
@keyframes heroIn { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }

/* ============================================================
   UNIFIED GLASS — every surface is frosted over the animated
   background (the silk-veil canvas + base glow show through).
   ============================================================ */
.text-block, .app-card, .visual-card, .table-wrap, .faq-item,
.blog-card, .social-link, .gallery-grid .gal, .statement,
.wa-form .field, .btn, .lang-trigger, .lang-menu, footer {
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
}
/* glass edges catching light: a bright top sheen + soft inner cool glow */
.text-block, .app-card, .faq-item, .blog-card, .table-wrap, .social-link {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .16), inset 0 0 22px rgba(120, 190, 235, .04), var(--shadow-sm);
}
/* luxury detail: a fine cyan→copper hairline inlaid along the top of each card */
.text-block, .app-card, .blog-card { position: relative; }
.text-block::before, .app-card::before, .blog-card::before {
  content: ""; position: absolute; inset-inline: 16px; top: 0; height: 1px; border-radius: 99px;
  background: linear-gradient(90deg, transparent, rgba(0, 183, 255, .55) 35%, rgba(240, 164, 99, .55) 65%, transparent);
  opacity: .55; transition: opacity .4s var(--ease); pointer-events: none;
}
.text-block:hover::before, .app-card:hover::before, .blog-card:hover::before { opacity: 1; }
footer {
  background: rgba(7, 9, 16, .42);
  border-top: 1px solid var(--brd);
}
/* protect lower-end phones: drop the blur on the high-count grids, keep the tint */
@media (max-width: 700px) {
  .app-card, .text-block, .blog-card {
    -webkit-backdrop-filter: none; backdrop-filter: none;
  }
}
/* a glassy surface should never frost itself away for reduced-motion users —
   keep the blur (it's static), just nothing animates */

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1200px) {
  /* group the hamburger with the language switch on the right (logo stays left)
     — the absolute mobile menu leaves 3 flex items, so push the toggle right */
  .nav-toggle { display: block; margin-inline-start: auto; order: 2; }
  .lang-select { order: 3; }
  .main-nav {
    position: absolute; top: 100%; inset-inline: 0; margin: 0;
    flex-direction: column; align-items: stretch; gap: 0;
    background: rgba(7, 9, 16, .97); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
    border-bottom: 1px solid var(--brd); padding: 8px 18px 14px;
    transform-origin: top center;
    transform: translateY(-14px) scale(.98); opacity: 0; visibility: hidden;
    transition: opacity .32s var(--ease), transform .32s var(--ease), visibility .32s;
  }
  .site-header.nav-open .main-nav { transform: translateY(0) scale(1); opacity: 1; visibility: visible; }
  .nav-link { padding: 13px 6px; font-size: 15px; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; }
  .nav-cta { color: var(--cyan); }
  .nav-cta:hover { background: transparent; color: var(--cyan); }
  .lang-panel { margin-inline-start: auto; }
}
@media (max-width: 900px) {
  .hero-grid, .video-layout, .media-block { grid-template-columns: 1fr; }
  .visual-card { max-width: 460px; }
  .image-box { position: static; }
  .brand-text small { display: none; }
}
@media (max-width: 600px) {
  .nav { min-height: 0; padding: 10px 0; gap: 8px; }
  .lang-caption { display: none; }
  .brand-tip { display: none; }
}

/* ============================================================
   ACCESSIBILITY
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
  .js-reveal { opacity: 1; transform: none; filter: none; clip-path: none; }
  .px-media { transform: none !important; }
  .section-title::after { transform: scaleX(1); }
  body::after { animation: none; }
}
::selection { background: rgba(0, 183, 255, .32); color: #fff; }
:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; border-radius: 6px; }

/* ============================================================
   ENTERPRISE UPGRADE — intro acts, stats, floating WhatsApp
   ============================================================ */

/* intro: second-act value line */
.intro-tag {
  font-family: var(--display); font-weight: 500;
  font-size: clamp(13px, 1.9vw, 17px); letter-spacing: .14em; text-transform: uppercase;
  color: var(--text); margin-top: 18px; opacity: 0;
}
[dir=rtl] .intro-tag { letter-spacing: .04em; }

/* intro: thin progress bar */
.intro-progress {
  position: absolute; inset-block-end: 0; inset-inline: 0; height: 2px;
  background: rgba(255,255,255,.06); z-index: 2;
}
.intro-progress i {
  display: block; height: 100%; width: 0;
  background: linear-gradient(90deg, var(--cyan), var(--gold));
  box-shadow: 0 0 12px rgba(84,216,236,.5);
}

/* ---------- Stats band ---------- */
.stats {
  border-top: 1px solid var(--brd); border-bottom: 1px solid var(--brd);
  background: var(--glass);
  -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
}
.stats .container {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px;
  padding: clamp(34px, 5vw, 56px) 0;   /* .container already gives a 20px gutter — align edges with other sections */
}
.stats + .content { border-top: 0; }   /* avoid a doubled 1px seam under the stats band */
.stat { text-align: center; position: relative; }
.stat + .stat::before {
  content: ""; position: absolute; inset-inline-start: -12px; top: 12%; height: 76%;
  width: 1px; background: var(--line);
}
.stat-num {
  font-family: var(--display); font-weight: 700; color: var(--ink);
  font-size: clamp(30px, 4.4vw, 52px); line-height: 1; letter-spacing: -.02em;
  display: inline-flex; align-items: baseline;
}
.stat-num .suf { color: var(--gold); margin-inline-start: 2px; font-size: .7em; }
.stat-label {
  margin-top: 10px; font-size: clamp(12px, 1.4vw, 14px); color: var(--muted);
  font-weight: 500; letter-spacing: .02em;
}
@media (max-width: 720px) {
  .stats .container { grid-template-columns: repeat(2, 1fr); gap: 28px 16px; }
  .stat:nth-child(3)::before, .stat:nth-child(1)::before { display: none; }
}
@media (max-width: 360px) { .stats .container { grid-template-columns: 1fr; } .stat::before { display: none !important; } }

/* ---------- Floating WhatsApp ---------- */
/* ============================================================
   Speed-dial: one button → WhatsApp + Chat (glass + neon)
   ============================================================ */
.fab-stack {
  position: fixed; inset-block-end: 22px; inset-inline-start: 22px; z-index: 95;
  display: flex; flex-direction: column; align-items: flex-start; gap: 13px;
}
.fab-main {
  position: relative; width: 58px; height: 58px; border-radius: 50%; cursor: pointer; isolation: isolate;
  color: var(--cyan); border: 1px solid rgba(0, 183, 255, .5);
  background: rgba(255, 255, 255, .06);
  backdrop-filter: blur(10px) saturate(140%); -webkit-backdrop-filter: blur(10px) saturate(140%);
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 8px 26px rgba(0, 0, 0, .3), 0 0 18px rgba(0, 183, 255, .4), inset 0 1px 0 rgba(255, 255, 255, .14);
  transition: transform .3s var(--ease), box-shadow .3s var(--ease), background .3s var(--ease);
}
.fab-main:hover { transform: scale(1.07); background: rgba(0, 183, 255, .14); box-shadow: 0 12px 32px rgba(0, 0, 0, .35), 0 0 26px rgba(0, 183, 255, .6); }
.fab-i { position: absolute; display: grid; place-items: center; transition: opacity .25s var(--ease), transform .3s var(--ease); }
.fab-i svg { width: 26px; height: 26px; filter: drop-shadow(0 0 6px rgba(0, 183, 255, .55)); }
.fab-i-close { font-size: 21px; line-height: 1; color: #fff; opacity: 0; transform: rotate(-90deg) scale(.5); }
.fab-stack.open .fab-i-chat { opacity: 0; transform: rotate(90deg) scale(.5); }
.fab-stack.open .fab-i-close { opacity: 1; transform: none; }
.fab-main::after {
  content: ""; position: absolute; inset: 0; border-radius: 50%; z-index: -1;
  border: 2px solid var(--cyan); animation: fabPing 2.4s var(--ease) infinite;
}
.fab-stack.open .fab-main::after { animation: none; opacity: 0; }
@keyframes fabPing { 0% { opacity: .55; transform: scale(1); } 70%, 100% { opacity: 0; transform: scale(1.7); } }
.fab-dot {
  position: absolute; inset-block-start: 5px; inset-inline-end: 5px;
  width: 11px; height: 11px; border-radius: 50%; background: #2ee06a;
  border: 2px solid #0b0e16; box-shadow: 0 0 8px rgba(46, 224, 106, .7); transition: opacity .2s var(--ease);
}
.fab-stack.open .fab-dot { opacity: 0; }
/* action rows (icon + label) — hidden until the stack is open */
.fab-action {
  display: inline-flex; align-items: center; gap: 11px; text-decoration: none;
  border: 0; background: none; padding: 0; cursor: pointer;
  opacity: 0; visibility: hidden; transform: translateY(14px) scale(.6); transform-origin: center;
  pointer-events: none; transition: opacity .25s var(--ease), transform .25s var(--ease), visibility .25s;
}
.fab-stack.open .fab-action { opacity: 1; visibility: visible; transform: none; pointer-events: auto; }
.fab-stack.open .fab-chat { transition-delay: .04s; }
.fab-stack.open .fab-wa { transition-delay: .09s; }
.fab-ico {
  order: 0; width: 50px; height: 50px; border-radius: 50%; display: grid; place-items: center; flex: none;
  background: rgba(255, 255, 255, .06);
  backdrop-filter: blur(10px) saturate(140%); -webkit-backdrop-filter: blur(10px) saturate(140%);
  border: 1px solid rgba(255, 255, 255, .2);
  box-shadow: 0 6px 18px rgba(0, 0, 0, .3), inset 0 1px 0 rgba(255, 255, 255, .14);
  transition: transform .25s var(--ease), box-shadow .25s var(--ease);
}
.fab-ico svg { width: 24px; height: 24px; }
.fab-action:hover .fab-ico { transform: scale(1.09); }
.fab-label {
  order: 1; white-space: nowrap; font-size: 12px; font-weight: 600; color: #fff;
  padding: 6px 13px; border-radius: 999px;
  background: rgba(10, 13, 21, .82); border: 1px solid rgba(255, 255, 255, .14);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  box-shadow: 0 4px 14px rgba(0, 0, 0, .3);
}
.fab-wa { color: #2ee06a; }
.fab-wa .fab-ico { border-color: rgba(46, 224, 106, .5); box-shadow: 0 6px 18px rgba(0, 0, 0, .3), 0 0 16px rgba(46, 224, 106, .35), inset 0 1px 0 rgba(255, 255, 255, .14); }
.fab-chat { color: var(--cyan); }
.fab-chat .fab-ico { border-color: rgba(0, 183, 255, .5); box-shadow: 0 6px 18px rgba(0, 0, 0, .3), 0 0 16px rgba(0, 183, 255, .35), inset 0 1px 0 rgba(255, 255, 255, .14); }
.fab-ico svg { fill: currentColor; }
@media (max-width: 600px) { .fab-stack { inset-block-end: 18px; inset-inline-start: 16px; } .fab-main { width: 54px; height: 54px; } .fab-ico { width: 46px; height: 46px; } }
@media (prefers-reduced-motion: reduce) { .fab-main::after { animation: none; } }

/* slightly tighter, more corporate headings */
h1, .intro-title, .section-title, .statement h2 { font-feature-settings: "ss01" 1, "cv01" 1; }

/* ---------- FAQ ---------- */
.faq-list { display: grid; gap: 12px; max-width: 860px; }
.faq-item { background: var(--glass); border: 1px solid var(--brd); border-radius: var(--radius); overflow: hidden; transition: border-color .2s, background .2s; }
.faq-item[open] { border-color: var(--brd-2); background: var(--glass-2); }
.faq-item summary { list-style: none; cursor: pointer; padding: 18px 22px; font-family: var(--display); font-weight: 600; font-size: 16px; color: var(--ink); display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: "+"; color: var(--cyan); font-size: 24px; font-weight: 400; line-height: 1; transition: transform .25s var(--ease); flex: 0 0 auto; }
.faq-item[open] summary::after { transform: rotate(45deg); }
.faq-item p { margin: 0; padding: 0 22px 20px; color: var(--muted); font-size: 15px; }

/* ---------- Gallery ---------- */
.gallery-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; }
.gallery-grid .gal { margin: 0; position: relative; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--brd); background: var(--glass); }
.gallery-grid .gal img { display: block; width: 100%; height: 220px; object-fit: cover; transition: transform .5s var(--ease); }
.gallery-grid .gal:hover img { transform: scale(1.06); }
.gallery-grid figcaption { position: absolute; inset-inline: 0; bottom: 0; padding: 22px 14px 12px; font-size: 13px; font-weight: 600; color: #fff; background: linear-gradient(transparent, rgba(5,7,13,.85)); }
@media (max-width: 600px) { .gallery-grid .gal img { height: 190px; } }

/* ---------- Blog / article ---------- */
.article { padding: clamp(40px, 7vw, 90px) 0 72px; min-height: 70vh; }
.prose { max-width: 760px; }
.crumbs { font-size: 13px; color: var(--muted); margin-bottom: 16px; }
.crumbs a { color: var(--cyan); text-decoration: none; }
.article h1 { font-family: var(--display); font-size: clamp(28px, 4vw, 44px); line-height: 1.14; color: var(--ink); margin: 0 0 10px; font-weight: 700; letter-spacing: -.02em; }
.article-meta { font-family: var(--mono); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin: 0 0 26px; }
.prose .lead-p { font-size: 18.5px; color: var(--ink); line-height: 1.7; }
.prose h2 { font-family: var(--display); font-size: clamp(20px, 2.6vw, 26px); color: var(--ink); margin: 34px 0 10px; font-weight: 600; }
.prose p { color: var(--text); font-size: 16.5px; line-height: 1.8; margin: 0 0 16px; }
.article-cta { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 36px; }
.blog-grid { display: grid; gap: 16px; margin-top: 26px; }
.blog-card { display: block; text-decoration: none; background: var(--glass); border: 1px solid var(--brd); border-radius: var(--radius); padding: 24px; transition: transform .25s var(--ease), border-color .25s, background .25s; }
.blog-card:hover { transform: translateY(-4px); border-color: var(--brd-2); background: var(--glass-2); }
.blog-card h2 { font-family: var(--display); font-size: 19px; color: var(--ink); margin: 0 0 8px; font-weight: 600; }
.blog-card p { color: var(--muted); font-size: 15px; margin: 0 0 12px; }
.blog-more { color: var(--cyan); font-size: 14px; font-weight: 600; }
/* homepage miner / immersion-cooling spotlight */
.mining-spot { padding: 6px 0 30px; }
.mspot-card { display: flex; align-items: center; gap: 18px; text-decoration: none; position: relative; overflow: hidden;
  background: linear-gradient(120deg, rgba(84,216,236,.10), rgba(0,183,255,.04)), var(--glass);
  border: 1px solid var(--brd-2); border-radius: var(--radius); padding: 18px 22px;
  transition: transform .25s var(--ease), border-color .25s, box-shadow .25s; }
.mspot-card:hover { transform: translateY(-3px); border-color: var(--cyan); box-shadow: 0 22px 52px -32px rgba(84,216,236,.6); }
.mspot-ic { flex: 0 0 auto; width: 42px; height: 42px; color: var(--cyan); }
.mspot-ic svg { width: 100%; height: 100%; display: block; }
.mspot-tx { display: flex; flex-direction: column; gap: 4px; flex: 1 1 auto; min-width: 0; }
.mspot-h { font-family: var(--display); font-size: 16.5px; font-weight: 700; color: var(--ink); }
.mspot-p { font-size: 13.5px; color: var(--muted); line-height: 1.5; }
.mspot-cta { flex: 0 0 auto; font-family: var(--display); font-weight: 600; font-size: 14px; color: var(--cyan); white-space: nowrap; }
@media (max-width: 640px) { .mspot-card { flex-wrap: wrap; gap: 12px; } .mspot-ic { width: 36px; height: 36px; } .mspot-cta { order: 3; } }
/* featured / spotlight article */
.blog-card.featured { background: linear-gradient(135deg, rgba(84,216,236,.10), rgba(255,51,64,.06)), var(--glass-2);
  border-color: var(--brd-2); padding: 30px 28px; }
.blog-card.featured::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  box-shadow: 0 0 0 1px rgba(84,216,236,.22) inset, 0 26px 60px -34px rgba(84,216,236,.55); }
.blog-card.featured h2 { font-size: 23px; }
.blog-card.featured p { font-size: 15.5px; }
.blog-badge { display: inline-flex; align-items: center; gap: 6px; margin: 0 0 13px;
  font-family: var(--display); font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  color: #04121a; background: linear-gradient(90deg, var(--cyan), #8be6f5); border-radius: 999px; padding: 5px 12px; }
.blog-badge::before { content: "★"; font-size: 10px; line-height: 1; }
footer a { color: var(--cyan); text-decoration: none; }

/* ---------- Language dropdown ---------- */
.lang-select { position: relative; flex: 0 0 auto; }
.lang-trigger {
  display: inline-flex; align-items: center; gap: 8px; cursor: pointer;
  border: 1px solid var(--brd); background: var(--glass); color: var(--ink);
  padding: 8px 13px; border-radius: 999px; font: inherit; font-weight: 600; font-size: 13px;
  transition: background .2s var(--ease), border-color .2s var(--ease);
}
.lang-trigger:hover { background: var(--glass-2); border-color: var(--brd-2); }

/* attention cue: a ~1s RED neon pulse that draws the eye to the language
   pill once the visitor reaches the hero. Paired with the JS that rolls the
   flag/name preview inside it. */
.lang-select.attract { z-index: 95; }
.lang-select.attract .lang-trigger {
  animation: langAttract 3s var(--ease) both;
  will-change: box-shadow, transform;
}
/* gentle red neon that breathes ~4 times across the 3s window */
@keyframes langAttract {
  0%   { box-shadow: 0 0 0 0 rgba(0, 183, 255, 0);    border-color: var(--brd); transform: scale(1); }
  9%   { box-shadow: 0 0 0 3px rgba(0, 183, 255, .42), 0 0 24px 5px rgba(0, 183, 255, .62); border-color: var(--cyan); transform: scale(1.06); }
  18%  { box-shadow: 0 0 0 2px rgba(0, 183, 255, .20), 0 0 12px 2px rgba(0, 183, 255, .28); border-color: var(--cyan); transform: scale(1); }
  34%  { box-shadow: 0 0 0 3px rgba(0, 183, 255, .40), 0 0 22px 4px rgba(0, 183, 255, .58); border-color: var(--cyan); transform: scale(1.05); }
  46%  { box-shadow: 0 0 0 2px rgba(0, 183, 255, .20), 0 0 12px 2px rgba(0, 183, 255, .28); border-color: var(--cyan); transform: scale(1); }
  62%  { box-shadow: 0 0 0 3px rgba(0, 183, 255, .38), 0 0 22px 4px rgba(0, 183, 255, .54); border-color: var(--cyan); transform: scale(1.05); }
  74%  { box-shadow: 0 0 0 2px rgba(0, 183, 255, .18), 0 0 10px 2px rgba(0, 183, 255, .24); border-color: var(--cyan); transform: scale(1); }
  88%  { box-shadow: 0 0 0 2px rgba(0, 183, 255, .30), 0 0 16px 3px rgba(0, 183, 255, .4);  border-color: var(--cyan); transform: scale(1.03); }
  100% { box-shadow: 0 0 0 0 rgba(0, 183, 255, 0);    border-color: var(--brd); transform: scale(1); }
}

/* soft vertical "roll" of the language label inside the pill */
.lt-view { display: inline-flex; align-items: center; overflow: hidden; }
.lt-label { display: inline-flex; align-items: center; gap: 8px; }
.lt-label.roll { animation: ltRoll .36s cubic-bezier(.22, .9, .3, 1); }
@keyframes ltRoll {
  0%   { transform: translateY(85%);  opacity: 0; }
  55%  { opacity: 1; }
  100% { transform: translateY(0);    opacity: 1; }
}
.lt-flag { font-size: 15px; line-height: 1; }
/* real SVG flags (emoji flags don't render on Windows/desktop) */
.flag { width: 22px; height: 16px; border-radius: 3px; object-fit: cover; display: inline-block;
  vertical-align: middle; box-shadow: 0 0 0 1px rgba(255,255,255,.16), 0 1px 3px rgba(0,0,0,.4); }
.lt-flag .flag, .lt-label .flag { width: 20px; height: 15px; }
.lang-menu .lang-btn .flag { width: 22px; height: 16px; }
.lt-chev { font-size: 10px; color: var(--muted); transition: transform .25s var(--ease); }
.lang-select.open .lt-chev { transform: rotate(180deg); }
.lang-menu {
  position: absolute; top: calc(100% + 8px); inset-inline-end: 0; min-width: 168px;
  display: flex; flex-direction: column; gap: 2px; padding: 6px;
  background: rgba(10, 13, 21, .97); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
  border: 1px solid var(--brd); border-radius: 14px; box-shadow: var(--shadow);
  opacity: 0; visibility: hidden; transform: translateY(-8px) scale(.98); transform-origin: top;
  transition: opacity .2s var(--ease), transform .2s var(--ease), visibility .2s; z-index: 90;
}
.lang-select.open .lang-menu { opacity: 1; visibility: visible; transform: none; }
.lang-menu .lang-btn { width: 100%; justify-content: flex-start; padding: 11px 12px; border-radius: 10px; font-size: 14px; }
.lang-menu .lang-btn span:first-child { font-size: 16px; }
.lang-menu .lang-btn[aria-pressed="true"] { background: var(--cyan); color: #fff; }
/* logical inset-inline-end on .lang-menu already flips correctly for RTL */

.post[hidden] { display: none; }

/* ============================================================
   PREMIUM POLISH — elegant, luxury, minimal
   ============================================================ */
/* soft glow + smoother lift on interactive cards */
.text-block, .app-card, .blog-card, .stat, .faq-item {
  transition: transform .35s var(--ease), border-color .35s var(--ease),
              background .35s var(--ease), box-shadow .35s var(--ease);
}
.app-card:hover, .text-block:hover, .blog-card:hover {
  box-shadow: 0 18px 44px -12px rgba(0, 0, 0, .55), 0 0 24px -8px rgba(0, 183, 255, .28);
}
.blog-card:hover { transform: translateY(-4px); border-color: var(--brd-2); background: var(--glass-2); }

/* always-on 3-D: cards live in real space and bank toward the cursor.
   JS (app.js) drives the per-frame perspective tilt; here we just give a
   snappy, damped follow + a deeper drop-shadow so depth reads as physical. */
.tilt3d {
  transition: transform .18s cubic-bezier(.22, .61, .36, 1), border-color .35s var(--ease),
              background .35s var(--ease), box-shadow .35s var(--ease);
  transform-style: preserve-3d;
  will-change: transform;
}
.tilt3d:hover {
  box-shadow: 0 26px 60px -18px rgba(0, 0, 0, .62), 0 0 30px -10px rgba(0, 183, 255, .3);
}

/* drifting aurora behind the content (very subtle) */
body::after {
  content: ""; position: fixed; inset: -15%; z-index: -2; pointer-events: none;
  background:
    radial-gradient(38% 34% at 18% 26%, rgba(0, 183, 255, .055), transparent 62%),
    radial-gradient(36% 32% at 82% 74%, rgba(206, 124, 56, .04), transparent 62%);
  animation: auroraDrift 26s ease-in-out infinite alternate;
}
@keyframes auroraDrift {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to   { transform: translate3d(0, -2.5%, 0) scale(1.07); }
}

/* faint cinematic film grain */
.grain {
  position: fixed; inset: 0; z-index: 60; pointer-events: none;
  opacity: .04; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
@media (prefers-reduced-motion: reduce) { .grain { display: none; } }

/* application cards: clickable — the red accent now also sticks after a tap (shares the :hover rules above) */
.app-card { cursor: pointer; }

/* ============================================================
   GLOBAL INTERACTIVE NEON — smooth glow on anything clickable
   ============================================================ */
.btn, .nav-link, .lang-trigger, .lang-menu .lang-btn, .nav-toggle, .social-link,
.wa-float, #to-top, .faq-item summary, .video-frame, .gallery-grid .gal,
.blog-card, .app-card, .crumbs a, footer a {
  transition: color .28s var(--ease), background .28s var(--ease),
              border-color .28s var(--ease), box-shadow .28s var(--ease),
              transform .28s var(--ease), text-shadow .28s var(--ease);
}

/* cyan neon halo for bordered controls, tiles and outline buttons */
.lang-trigger:hover,
.lang-menu .lang-btn:hover,
.faq-item summary:hover,
.nav-toggle:hover,
#to-top:hover,
.video-frame:hover,
.gallery-grid .gal:hover,
.btn:not(.red):hover {
  border-color: rgba(0, 183, 255, .6);
  box-shadow: 0 0 0 1px rgba(0, 183, 255, .18), 0 0 15px rgba(0, 183, 255, .34);
  color: var(--ink);
}
.faq-item summary:hover { background: rgba(0, 183, 255, .05); }
.gallery-grid .gal:hover, .video-frame:hover { transform: translateY(-3px); }
#to-top:hover { transform: translateY(-2px); }

/* round whatsapp button keeps its green identity */
.wa-float:hover { box-shadow: 0 0 24px rgba(37, 211, 102, .6), 0 10px 30px rgba(0, 0, 0, .4); }

/* social links glow in their brand colour */
.social-link.instagram:hover { box-shadow: 0 0 0 1px rgba(225, 48, 108, .4), 0 0 15px rgba(225, 48, 108, .4); }
.social-link.whatsapp-mini:hover { box-shadow: 0 0 0 1px rgba(37, 211, 102, .4), 0 0 15px rgba(37, 211, 102, .4); }

/* soft cyan glow on inline text links */
.prose a:hover, footer a:hover, .crumbs a:hover, .section-copy a:hover {
  color: var(--cyan); text-shadow: 0 0 8px rgba(0, 183, 255, .4);
}

/* ============================================================
   APPLICATION CARDS — hover lights the full neon, click keeps one red line
   ============================================================ */
.app-card:hover, .text-block:hover, .blog-card:hover {
  border-color: rgba(0, 183, 255, .62);
  box-shadow: 0 0 0 1px rgba(0, 183, 255, .22), 0 0 20px rgba(0, 183, 255, .42),
              0 16px 40px -12px rgba(0, 0, 0, .5);
}
/* selected card: clean persistent red accent line (single-select via JS) */
.app-card.tapped { border-inline-start-color: var(--cyan); background: rgba(0, 183, 255, .05); }
.app-card.tapped:hover { border-inline-start-color: var(--cyan); }

/* ============================================================
   MORE NEON TOUCHES — comparison rows, stats, form focus
   ============================================================ */
/* comparison table: neon highlight on the hovered row */
.table-wrap tbody tr { transition: background .25s var(--ease), box-shadow .25s var(--ease); }
.table-wrap tbody tr:hover td {
  background: rgba(0, 183, 255, .07); color: var(--ink);
  box-shadow: inset 0 0 20px rgba(0, 183, 255, .05);
}
.table-wrap tbody tr:hover td:first-child {
  color: #eafdff;
  box-shadow: inset 0 0 20px rgba(0, 183, 255, .05), inset 3px 0 0 0 var(--cyan);
}
[dir=rtl] .table-wrap tbody tr:hover td:first-child {
  box-shadow: inset 0 0 20px rgba(0, 183, 255, .05), inset -3px 0 0 0 var(--cyan);
}

/* stats band: subtle lift + glow on hover */
.stat { transition: transform .3s var(--ease); }
.stat:hover { transform: translateY(-3px); }
.stat:hover .stat-num { text-shadow: 0 0 16px rgba(0, 183, 255, .5); }

/* form inputs: cyan neon glow on focus */
.wa-form .field { transition: border-color .25s var(--ease), background .25s var(--ease), box-shadow .25s var(--ease); }
.wa-form .field:focus { box-shadow: 0 0 0 3px rgba(0, 183, 255, .14), 0 0 16px rgba(0, 183, 255, .28); }

/* ============================================================
   Tappable hero badges + info popover
   ============================================================ */
.badge-row span {
  cursor: pointer; user-select: none;
  transition: border-color .25s var(--ease), box-shadow .25s var(--ease), color .25s var(--ease);
}
.badge-row span:hover, .badge-row span:focus-visible {
  border-color: var(--cyan); color: var(--ink);
  box-shadow: 0 0 0 2px rgba(0, 183, 255, .14), 0 0 14px rgba(0, 183, 255, .3);
}
.badge-row span.open { border-color: var(--cyan); color: var(--ink); }
.badge-pop {
  position: absolute; z-index: 96; width: min(300px, 86vw);
  background: rgba(10, 13, 21, .97); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
  border: 1px solid rgba(0, 183, 255, .35); border-radius: 14px; padding: 14px 15px;
  box-shadow: 0 0 0 2px rgba(0, 183, 255, .08), 0 14px 40px rgba(0, 0, 0, .55), 0 0 22px rgba(0, 183, 255, .14);
  opacity: 0; transform: translateY(6px); transition: opacity .22s var(--ease), transform .22s var(--ease);
  pointer-events: none;
}
.badge-pop.show { opacity: 1; transform: none; pointer-events: auto; }
.badge-pop p { margin: 0 0 10px; font-size: 13px; line-height: 1.65; color: var(--text); }
.badge-pop .bp-more {
  display: inline-block; font-size: 12px; font-weight: 600; color: var(--cyan);
  text-decoration: none; cursor: pointer; background: none; border: 0; padding: 0; font-family: inherit;
}
.badge-pop .bp-more:hover { text-shadow: 0 0 10px rgba(0, 183, 255, .6); }

/* ============================================================
   Site assistant — premium chat widget
   ============================================================ */

.assist {
  position: fixed; z-index: 96; inset-block-end: 156px; inset-inline-start: 22px;
  width: min(384px, calc(100vw - 32px)); max-height: min(600px, 76vh);
  display: flex; flex-direction: column;
  background: linear-gradient(180deg, rgba(13, 16, 26, .98), rgba(9, 11, 19, .98));
  backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px);
  border: 1px solid var(--brd-2); border-radius: 20px; overflow: hidden;
  box-shadow: 0 30px 80px rgba(0, 0, 0, .65), 0 0 0 1px rgba(255, 255, 255, .03) inset;
  opacity: 0; transform: translateY(14px) scale(.97); transform-origin: bottom start;
  transition: opacity .28s var(--ease), transform .28s var(--ease);
}
.assist.show { opacity: 1; transform: none; }
/* must beat ".assist { display:flex }" so the panel is truly removed when closed
   (otherwise the invisible panel overlaps and steals clicks from the speed-dial) */
.assist[hidden] { display: none; }
@media (max-width: 600px) { .assist { inset-block-end: 142px; inset-inline-start: 16px; } }

/* header */
.assist-head {
  display: flex; align-items: center; gap: 11px; padding: 13px 14px;
  border-bottom: 1px solid var(--brd); position: relative;
  background:
    radial-gradient(140% 180% at 0% 0%, rgba(0, 183, 255, .22), transparent 55%),
    linear-gradient(90deg, rgba(0, 183, 255, .08), transparent 70%);
}
.assist-av {
  flex: none; width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center;
  background: rgba(255, 255, 255, .04); border: 1px solid rgba(0, 224, 184, .35);
  box-shadow: 0 0 14px rgba(0, 183, 255, .25); overflow: hidden;
}
.assist-av img { width: 30px; height: 30px; object-fit: contain; }
.assist-meta { display: flex; flex-direction: column; line-height: 1.15; min-width: 0; }
.assist-title { font-family: var(--display); font-weight: 700; font-size: 14.5px; letter-spacing: .03em; color: var(--ink); }
.assist-status { font-size: 11px; color: var(--muted); display: inline-flex; align-items: center; gap: 5px; margin-top: 2px; }
.assist-status::before {
  content: ""; width: 7px; height: 7px; border-radius: 50%; background: #2ee06a;
  box-shadow: 0 0 7px rgba(46, 224, 106, .8); animation: liveDot 1.8s var(--ease) infinite;
}
@keyframes liveDot { 0%, 100% { opacity: 1; } 50% { opacity: .4; } }
.assist-close {
  margin-inline-start: auto; flex: none; border: 0; background: rgba(255, 255, 255, .04);
  color: var(--muted); font-size: 14px; cursor: pointer; width: 30px; height: 30px; border-radius: 9px;
  transition: color .2s var(--ease), background .2s var(--ease);
}
.assist-close:hover { color: var(--ink); background: var(--glass-2); }

/* messages */
.assist-body {
  flex: 1; overflow-y: auto; padding: 16px 14px; display: flex; flex-direction: column; gap: 12px;
  min-height: 130px; scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.14) transparent;
}
.assist-body::-webkit-scrollbar { width: 6px; }
.assist-body::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, .12); border-radius: 99px; }
.assist-msg {
  max-width: 84%; padding: 11px 14px; border-radius: 16px; font-size: 13.5px; line-height: 1.7;
  animation: assistPop .32s var(--ease) both; position: relative;
}
@keyframes assistPop { from { opacity: 0; transform: translateY(8px) scale(.97); } to { opacity: 1; transform: none; } }
.assist-msg.bot {
  align-self: flex-start; color: var(--text);
  background: rgba(255, 255, 255, .045); border: 1px solid var(--brd);
  border-start-start-radius: 5px; margin-inline-start: 34px;
}
/* bot avatar dot beside each bot bubble */
.assist-msg.bot::before {
  content: ""; position: absolute; inset-block-start: 0; inset-inline-start: -34px;
  width: 26px; height: 26px; border-radius: 50%;
  background: rgba(0, 183, 255, .12) url("/assets/img/logo-mark.webp") center / 18px no-repeat;
  border: 1px solid rgba(0, 224, 184, .3);
}
.assist-msg.user {
  align-self: flex-end; color: #041014; font-weight: 600; border-start-end-radius: 5px;
  background: linear-gradient(135deg, var(--cyan), var(--teal)); border: 1px solid rgba(0, 224, 184, .5);
  box-shadow: 0 6px 16px rgba(0, 183, 255, .28);
}
.assist-msg .am-links { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 11px; }
.assist-msg .am-link {
  display: inline-block; font-size: 12px; font-weight: 600; cursor: pointer; text-decoration: none;
  color: var(--cyan); border: 1px solid rgba(0, 183, 255, .4); border-radius: 999px; padding: 6px 12px;
  background: rgba(0, 183, 255, .06); font-family: inherit;
  transition: background .22s var(--ease), color .22s var(--ease), box-shadow .22s var(--ease);
}
.assist-msg .am-link:hover { color: #fff; background: var(--cyan); box-shadow: 0 4px 14px rgba(0, 183, 255, .45); }

/* suggested chips */
.assist-chips { display: flex; flex-wrap: wrap; gap: 7px; padding: 0 14px 12px; }
.assist-chip {
  font-size: 12px; font-weight: 500; cursor: pointer; color: var(--text); background: rgba(255, 255, 255, .04);
  border: 1px solid var(--brd); border-radius: 999px; padding: 7px 13px; font-family: inherit;
  transition: border-color .22s var(--ease), color .22s var(--ease), background .22s var(--ease), transform .22s var(--ease);
}
.assist-chip:hover { border-color: var(--cyan); color: #fff; background: rgba(0, 183, 255, .14); transform: translateY(-1px); }

/* input row */
.assist-form { display: flex; gap: 9px; padding: 12px; border-top: 1px solid var(--brd); background: rgba(255, 255, 255, .015); }
.assist-input {
  flex: 1; min-width: 0; border: 1px solid var(--brd); background: rgba(255, 255, 255, .04); color: var(--ink);
  border-radius: 999px; padding: 10px 16px; font: inherit; font-size: 16px; outline: none;
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.assist-input::placeholder { color: var(--muted); }
.assist-input:focus { border-color: rgba(0, 183, 255, .55); box-shadow: 0 0 0 3px rgba(0, 183, 255, .12); }
.assist-send {
  flex: none; width: 42px; height: 42px; border-radius: 50%; border: 0; cursor: pointer; color: #fff; font-size: 15px;
  background: radial-gradient(120% 120% at 30% 20%, #25c8ff, var(--cyan) 55%, #0091d6);
  box-shadow: 0 6px 16px rgba(0, 183, 255, .4); transition: transform .2s var(--ease), box-shadow .2s var(--ease);
}
.assist-send { display: grid; place-items: center; }
.assist-send svg { width: 18px; height: 18px; }
.assist-send:hover { transform: scale(1.06); box-shadow: 0 8px 20px rgba(0, 183, 255, .55); }
[dir=rtl] .assist-send { transform: scaleX(-1); }
[dir=rtl] .assist-send:hover { transform: scaleX(-1) scale(1.06); }

/* typing indicator */
.assist-typing { display: inline-flex; gap: 5px; align-items: center; }
.assist-typing span {
  width: 7px; height: 7px; border-radius: 50%; background: var(--cyan); opacity: .5;
  animation: assistType 1s var(--ease) infinite;
}
.assist-typing span:nth-child(2) { animation-delay: .15s; }
.assist-typing span:nth-child(3) { animation-delay: .3s; }
@keyframes assistType { 0%, 60%, 100% { opacity: .3; transform: translateY(0); } 30% { opacity: 1; transform: translateY(-3px); } }
@media (prefers-reduced-motion: reduce) { .assist-status::before { animation: none; } }

/* tilt-to-scroll toggle (mobile/tablet only; injected by JS when sensors exist) */
.tilt-toggle {
  /* physical left:50% so it stays perfectly centred in both LTR and RTL */
  position: fixed; inset-block-end: 14px; left: 50%; right: auto; transform: translateX(-50%);
  z-index: 94; display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px; border-radius: 999px; cursor: pointer; font: inherit; font-size: 11px; font-weight: 600;
  /* frosted glass — see-through with just a hint of blur */
  color: #fff; background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .22);
  backdrop-filter: blur(3px) saturate(120%); -webkit-backdrop-filter: blur(3px) saturate(120%);
  box-shadow: 0 4px 16px rgba(0, 0, 0, .25), 0 1px 0 rgba(255, 255, 255, .12) inset;
  text-shadow: 0 1px 3px rgba(0, 0, 0, .55);
  transition: color .25s var(--ease), border-color .25s var(--ease), box-shadow .25s var(--ease), background .25s var(--ease);
}
.tilt-toggle svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .5)); }
.tilt-toggle:hover { background: rgba(255, 255, 255, .1); border-color: rgba(255, 255, 255, .32); }
.tilt-toggle.on {
  color: #fff; border-color: rgba(0, 183, 255, .8); background: rgba(0, 183, 255, .14);
  box-shadow: 0 0 0 2px rgba(0, 183, 255, .18), 0 0 18px rgba(0, 183, 255, .45);
}
[dir=rtl] .tilt-toggle { left: 50%; right: auto; }

/* ============================================================
   CINEMATIC MICRO-EFFECTS — cursor spotlight on glass cards + water ripple
   ============================================================ */
/* keep card content above the spotlight layer */
.app-card > *, .blog-card > *, .text-block > * { position: relative; z-index: 1; }
/* spotlight: a soft cyan↔copper glow tracks the cursor across glass cards */
.app-card::after, .blog-card::after, .text-block::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; z-index: 0;
  pointer-events: none; opacity: 0; transition: opacity .4s var(--ease);
  background: radial-gradient(240px circle at var(--mx, 50%) var(--my, 50%),
              rgba(0, 183, 255, .12), rgba(206, 124, 56, .06) 42%, transparent 70%);
}
@media (hover: hover) {
  .app-card:hover::after, .blog-card:hover::after, .text-block:hover::after { opacity: 1; }
}
/* water ripple bloom on buttons (on-brand for a waterproof coating) */
.ripple-ink {
  position: absolute; border-radius: 50%; transform: translate(-50%, -50%) scale(0);
  pointer-events: none; mix-blend-mode: screen; opacity: .55;
  background: radial-gradient(circle, rgba(255, 255, 255, .5), rgba(0, 183, 255, .3) 45%, transparent 70%);
  animation: rippleInk .6s var(--ease) forwards;
}
@keyframes rippleInk { to { transform: translate(-50%, -50%) scale(1); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .ripple-ink { display: none; } }

/* ============================================================
   BEFORE / AFTER SLIDER — drag to compare uncoated vs coated board
   ============================================================ */
.ba-section .container { text-align: center; }
.ba-section .section-copy { max-width: 620px; margin-inline: auto; }
.ba-wrap { max-width: 430px; margin: 30px auto 0; }
.ba-slider {
  position: relative; --pos: 50%;
  border-radius: var(--radius); overflow: hidden;
  border: 1px solid var(--brd); box-shadow: var(--shadow);
  aspect-ratio: 4 / 5; isolation: isolate;
  direction: ltr;            /* keep the wipe geometry identical in every language (incl. RTL) */
  touch-action: pan-y;       /* let vertical scroll pass through, horizontal drives the wipe */
}
.ba-img { position: absolute; inset: 0; }
.ba-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ba-before { clip-path: inset(0 calc(100% - var(--pos)) 0 0); will-change: clip-path; transform: translateZ(0); }
.ba-label {
  position: absolute; top: 12px; z-index: 3; padding: 4px 11px;
  font-family: var(--mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase;
  border-radius: 99px; background: rgba(5, 7, 10, .6); border: 1px solid var(--brd);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); color: var(--ink); pointer-events: none;
}
.ba-lb { inset-inline-start: 12px; }
.ba-la { inset-inline-end: 12px; color: var(--cyan); }
.ba-divider {
  position: absolute; top: 0; bottom: 0; left: var(--pos); width: 2px; z-index: 4;
  transform: translateX(-1px); pointer-events: none;
  background: linear-gradient(var(--cyan), var(--gold)); box-shadow: 0 0 12px rgba(0, 183, 255, .6);
}
.ba-knob {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center;
  /* solid glass look — no live backdrop blur, so dragging stays buttery smooth */
  background: radial-gradient(circle at 50% 35%, rgba(20, 26, 34, .96), rgba(5, 7, 10, .96));
  border: 1px solid var(--brd-2); color: var(--ink); font-size: 13px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .4), 0 0 16px rgba(0, 183, 255, .4);
}
.ba-range { position: absolute; inset: 0; z-index: 5; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: ew-resize; }
.ba-hint .ba-knob { animation: baKnobPulse 1.5s ease; }
@keyframes baKnobPulse {
  0%, 100% { transform: translate(-50%, -50%) scale(1); box-shadow: 0 6px 18px rgba(0,0,0,.4), 0 0 16px rgba(0,183,255,.4); }
  30% { transform: translate(-50%, -50%) scale(1.18); box-shadow: 0 6px 22px rgba(0,0,0,.5), 0 0 26px rgba(0,183,255,.7); }
}
.ba-range:focus-visible + .ba-divider .ba-knob { outline: 2px solid var(--cyan); outline-offset: 2px; }

/* ===== Smart lead-capture widget ===== */
.lead-fab {
  position: fixed; inset-block-end: 22px; inset-inline-end: 22px; z-index: 80;
  display: inline-flex; align-items: center; gap: 8px; padding: 12px 18px;
  border: 1px solid var(--brd); border-radius: 999px; cursor: pointer;
  color: #fff; font: 600 14px/1 var(--display, "Space Grotesk"), sans-serif;
  background: linear-gradient(135deg, #00b7ff, #2bd4a8);
  box-shadow: 0 14px 34px -10px rgba(0,183,255,.55), var(--shadow);
  transition: transform .18s ease, box-shadow .18s ease; -webkit-tap-highlight-color: transparent;
}
.lead-fab:hover { transform: translateY(-2px); box-shadow: 0 20px 44px -10px rgba(0,183,255,.7), var(--shadow); }
.lead-fab svg { flex: 0 0 auto; }
@media (max-width: 560px) { .lead-fab { inset-block-end: 16px; inset-inline-end: 16px; padding: 13px; } .lead-fab-tx { display: none; } }
/* when the lead button is present (homepage only), lift the back-to-top button
   so the two stack vertically at the corner instead of overlapping */
body.has-lead-fab #to-top { inset-block-end: 86px; }
@media (max-width: 560px) { body.has-lead-fab #to-top { inset-block-end: 74px; } }
@media (prefers-reduced-motion: reduce) { .lead-fab { transition: none; } }

.lead-back {
  position: fixed; inset: 0; z-index: 100; display: flex; align-items: center; justify-content: center;
  padding: 20px; background: rgba(4,7,12,.6); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  animation: leadFade .2s ease;
}
.lead-back[hidden] { display: none; }
@keyframes leadFade { from { opacity: 0; } to { opacity: 1; } }
.lead-card {
  position: relative; width: 100%; max-width: 420px; padding: 26px 24px 22px;
  border: 1px solid var(--brd); border-radius: 18px; box-shadow: var(--shadow);
  background: rgba(14,20,30,.78); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
}
.lead-x {
  position: absolute; inset-block-start: 12px; inset-inline-end: 12px; width: 32px; height: 32px;
  border: 1px solid var(--brd); border-radius: 999px; background: var(--glass); color: var(--muted);
  cursor: pointer; font-size: 14px; line-height: 1;
}
.lead-x:hover { color: var(--ink); background: var(--glass-2); }
.lead-h { margin: 0 0 4px; font-family: var(--display, "Space Grotesk"), sans-serif; font-size: 21px; color: var(--ink); }
.lead-sub { margin: 0 0 16px; color: var(--muted); font-size: 13.5px; line-height: 1.55; }
.lead-form { display: flex; flex-direction: column; gap: 10px; }
.lead-in {
  width: 100%; padding: 12px 14px; border: 1px solid var(--brd); border-radius: 11px;
  background: var(--glass); color: var(--ink); font: inherit; font-size: 16px; /* ≥16px stops iOS auto-zoom on focus */
}
.lead-in:focus { outline: none; border-color: var(--cyan); background: var(--glass-2); }
.lead-ta { resize: vertical; min-height: 64px; }
.lead-hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.lead-send { margin-top: 4px; width: 100%; justify-content: center; }
.lead-msg { margin: 10px 0 0; font-size: 13px; min-height: 18px; text-align: center; }