/* ============================================================
   NUBICAST — design system
   Dark, glassy, green-accented. No external assets, no webfonts.
   ============================================================ */

:root {
  /* Accent tones are injected from includes/config.php (header.php inline
     style) — the values below are only fallbacks. Change ACCENT there. */
  --accent:         #cb6018;
  --accent-rgb:     203, 96, 24;
  --accent-alt:     #f49a2e;
  --accent-alt-rgb: 244, 154, 46;
  --accent-bright:  #e48325;
  --accent-deep:    #8e4311;

  --bg:        #08090b;
  --bg-2:      #0c0e11;
  --bg-3:      #121519;
  --panel:     rgba(255, 255, 255, 0.04);
  --panel-2:   rgba(255, 255, 255, 0.07);
  --stroke:    rgba(255, 255, 255, 0.09);
  --stroke-2:  rgba(var(--accent-rgb), 0.35);

  --text:      #edf0f2;
  --text-soft: #b7c0c6;
  --text-dim:  #85909a;

  --grad-accent: linear-gradient(120deg, var(--accent), var(--accent-bright) 55%, var(--accent-alt));
  --shadow-lg: 0 24px 70px -18px rgba(0, 0, 0, 0.65);
  --glow: 0 0 42px -8px rgba(var(--accent-rgb), 0.5);

  --radius: 18px;
  --radius-sm: 12px;

  --font: "Segoe UI Variable Display", "Segoe UI", Inter, Roboto, "Helvetica Neue", system-ui, sans-serif;

  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --header-h: 74px;
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

/* The browser's own [hidden] rule is a bare element default, so any class that
   sets display beats it and the element stays on screen. Every toggle in this
   project uses the attribute, so it is settled once, here. */
[hidden] { display: none !important; }

/* ---------- scrollbars ----------
   Themed everywhere rather than per component: the platform default is a pale
   slab that reads as a rendering fault on a dark page. Thumb only, no track,
   no stepper arrows; it picks up the accent on hover so it still says where it
   is. Firefox gets the two standard properties, everything else the -webkit
   pseudo-elements. */
* { scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, 0.17) transparent; }
::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-corner { background: transparent; }
::-webkit-scrollbar-button { display: none; width: 0; height: 0; }
::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.17);
  border: 3px solid transparent;      /* inset, so the thumb floats clear of the edge */
  background-clip: padding-box;
  border-radius: 999px;
}
::-webkit-scrollbar-thumb:hover {
  background: rgba(var(--accent-rgb), 0.6);
  background-clip: padding-box;
}
::-webkit-scrollbar-thumb:active {
  background: rgba(var(--accent-rgb), 0.85);
  background-clip: padding-box;
}
body {
  font-family: var(--font);
  background: var(--bg);
  color: var(--text);
  line-height: 1.65;
  font-size: 16.5px;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
::selection { background: rgba(var(--accent-rgb),0.35); color: #fff; }

/* subtle global texture + ambient gradients */
body::before {
  content: "";
  position: fixed; inset: 0; z-index: -2; pointer-events: none;
  background:
    radial-gradient(900px 600px at 85% -5%, rgba(var(--accent-rgb),0.10), transparent 60%),
    radial-gradient(800px 600px at -10% 40%, rgba(var(--accent-alt-rgb),0.07), transparent 60%),
    radial-gradient(700px 500px at 70% 110%, rgba(var(--accent-rgb),0.06), transparent 60%);
}
body::after {
  content: "";
  position: fixed; inset: 0; z-index: -1; pointer-events: none; opacity: 0.5;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140' viewBox='0 0 140 140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='0.032'/%3E%3C/svg%3E");
}

.container { width: min(1180px, 92%); margin-inline: auto; }
.container-wide { width: min(1400px, 94%); margin-inline: auto; }

.skip-link {
  position: fixed; top: -60px; left: 16px; z-index: 200;
  background: var(--accent); color: #fff7ee; padding: 10px 18px; border-radius: 10px;
  font-weight: 600; transition: top 0.25s;
}
.skip-link:focus { top: 12px; }

/* ---------- Typography ---------- */
h1, h2, h3, h4 { line-height: 1.12; font-weight: 750; letter-spacing: -0.02em; text-wrap: balance; }
.display {
  font-size: clamp(2.6rem, 6.2vw, 4.6rem);
  font-weight: 800;
  letter-spacing: -0.035em;
}
.h-section { font-size: clamp(1.9rem, 3.6vw, 2.9rem); }
.grad-text {
  background: var(--grad-accent);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.kicker {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 0.8rem; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--accent-bright);
}
.kicker::before {
  content: ""; width: 26px; height: 2px; border-radius: 2px;
  background: var(--grad-accent);
}
.lead { font-size: clamp(1.05rem, 1.6vw, 1.22rem); color: var(--text-soft); max-width: 62ch; }

.section { padding: clamp(72px, 10vw, 130px) 0; position: relative; }
.section-head { max-width: 780px; margin-bottom: clamp(38px, 5vw, 64px); }
.section-head.center { margin-inline: auto; text-align: center; }
.section-head.center .lead { margin-inline: auto; }
.section-head h2 { margin: 14px 0 16px; }

/* ---------- Buttons ---------- */
.btn {
  position: relative; display: inline-flex; align-items: center; gap: 10px;
  padding: 14px 28px; border-radius: 999px;
  font-weight: 650; font-size: 0.98rem; letter-spacing: 0.01em;
  transition: transform 0.35s var(--ease-out), box-shadow 0.35s, background 0.35s, border-color 0.35s;
  will-change: transform;
}
.btn-sm { padding: 9px 18px; font-size: 0.88rem; }
.btn-lg { padding: 17px 36px; font-size: 1.05rem; }
.btn-primary {
  background: var(--grad-accent);
  color: #1a0e04;
  box-shadow: 0 10px 30px -10px rgba(var(--accent-rgb),0.55);
}
.btn-primary:hover { transform: translateY(-3px) scale(1.02); box-shadow: 0 16px 40px -10px rgba(var(--accent-rgb),0.7); }
.btn-ghost {
  border: 1px solid var(--stroke);
  background: var(--panel);
  backdrop-filter: blur(8px);
  color: var(--text);
}
.btn-ghost:hover { border-color: var(--stroke-2); background: var(--panel-2); transform: translateY(-3px); }
.btn:active { transform: translateY(-1px) scale(0.99); }

/* ---------- Scroll progress ---------- */
.scroll-progress {
  position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 120; pointer-events: none;
}
.scroll-progress span {
  display: block; height: 100%; width: 100%;
  background: var(--grad-accent);
  transform-origin: 0 50%; transform: scaleX(0);
}

/* ---------- Header ---------- */
.site-header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  transition: background 0.4s, box-shadow 0.4s, border-color 0.4s;
  border-bottom: 1px solid transparent;
}
.site-header.scrolled {
  background: rgba(8, 9, 11, 0.72);
  backdrop-filter: blur(18px) saturate(1.4);
  -webkit-backdrop-filter: blur(18px) saturate(1.4);
  border-bottom-color: var(--stroke);
  box-shadow: 0 12px 40px -20px rgba(0, 0, 0, 0.7);
}
.header-inner {
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  height: var(--header-h);
}
.brand { display: inline-flex; align-items: center; gap: 11px; }
.brand-mark { width: 34px; height: 34px; color: var(--text); flex: none; }
.brand-word { font-size: 1.42rem; font-weight: 750; letter-spacing: -0.025em; }
.brand-tagline { color: var(--accent-bright); font-size: 0.82rem; letter-spacing: 0.24em; text-transform: uppercase; margin-top: 10px; }
.brand:hover .mark-wave { animation: wavePulse 1.2s ease-in-out infinite; }
.brand:hover .w2 { animation-delay: 0.15s; }
@keyframes wavePulse { 50% { opacity: 0.25; } }

.main-nav ul { display: flex; gap: 6px; align-items: center; }
.nav-link {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 9px 16px; border-radius: 999px;
  font-weight: 570; font-size: 0.97rem; color: var(--text-soft);
  transition: color 0.25s, background 0.25s;
}
.nav-link:hover { color: #fff; background: var(--panel-2); }
.main-nav li.is-active > .nav-link { color: #fff; }
.main-nav li.is-active > .nav-link::after {
  content: ""; position: absolute;
}
.main-nav > ul > li { position: relative; }
.main-nav > ul > li.is-active::after {
  content: ""; position: absolute; left: 18px; right: 18px; bottom: -2px; height: 2px;
  border-radius: 2px; background: var(--grad-accent);
}
.sub-toggle svg { width: 11px; transition: transform 0.3s; }
.has-sub:hover .sub-toggle svg, .has-sub.open .sub-toggle svg { transform: rotate(180deg); }

.sub-menu {
  position: absolute; top: calc(100% + 12px); left: 50%;
  translate: -50% 0;
  min-width: 220px; padding: 8px;
  background: rgba(14, 16, 19, 0.92);
  backdrop-filter: blur(20px);
  border: 1px solid var(--stroke); border-radius: 16px;
  box-shadow: var(--shadow-lg);
  opacity: 0; visibility: hidden; transform: translateY(10px) scale(0.98);
  transition: opacity 0.28s var(--ease-out), transform 0.28s var(--ease-out), visibility 0.28s;
  display: flex; flex-direction: column; gap: 2px;
}
.has-sub:hover .sub-menu, .has-sub:focus-within .sub-menu, .has-sub.open .sub-menu {
  opacity: 1; visibility: visible; transform: translateY(0) scale(1);
}
.sub-menu a {
  display: block; padding: 11px 16px; border-radius: 10px;
  font-size: 0.94rem; color: var(--text-soft);
  transition: background 0.2s, color 0.2s, padding-left 0.2s;
}
.sub-menu a:hover, .sub-menu li.is-active a { background: rgba(var(--accent-rgb),0.12); color: #fff; padding-left: 20px; }

.header-actions { display: flex; align-items: center; gap: 10px; }

.nav-burger { display: none; width: 42px; height: 42px; border-radius: 12px; border: 1px solid var(--stroke); position: relative; z-index: 130; }
.nav-burger span {
  display: block; width: 18px; height: 2px; margin: 4px auto; border-radius: 2px;
  background: var(--text); transition: transform 0.35s var(--ease-out), opacity 0.25s;
}
body.nav-open .nav-burger span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
body.nav-open .nav-burger span:nth-child(2) { opacity: 0; }
body.nav-open .nav-burger span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* ---------- Hero (home) ---------- */
.hero {
  position: relative; min-height: 100svh;
  display: flex; align-items: center;
  padding: calc(var(--header-h) + 40px) 0 60px;
  overflow: hidden;
}
#heroCanvas { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; opacity: 0.85; }
.hero-vignette {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    radial-gradient(1200px 700px at 20% 30%, transparent 30%, rgba(8, 9, 11, 0.55) 100%),
    linear-gradient(180deg, rgba(8, 9, 11, 0.25), transparent 30%, transparent 70%, var(--bg) 100%);
}
.hero-inner {
  position: relative; z-index: 2;
  display: grid; grid-template-columns: 1.1fr 0.9fr; gap: clamp(40px, 5vw, 80px);
  align-items: center;
}
.hero-copy .kicker { margin-bottom: 22px; }
.hero-title { margin-bottom: 8px; }
.hero-rotator {
  display: block; position: relative; height: 1.18em; overflow: hidden;
}
.hero-rotator b {
  position: absolute; inset: 0; font-weight: 800; white-space: nowrap;
  background: var(--grad-accent); -webkit-background-clip: text; background-clip: text; color: transparent;
  transform: translateY(110%); opacity: 0;
  transition: transform 0.7s var(--ease-out), opacity 0.5s;
}
.hero-rotator b.on { transform: translateY(0); opacity: 1; }
.hero-rotator b.off { transform: translateY(-110%); opacity: 0; }
.hero .lead { margin: 22px 0 36px; }
.hero-cta { display: flex; flex-wrap: wrap; gap: 14px; }

.hero-badges { display: flex; flex-wrap: wrap; gap: 22px; margin-top: 46px; }
.hero-badge { display: flex; align-items: center; gap: 10px; font-size: 0.88rem; color: var(--text-dim); }
.hero-badge svg { width: 17px; height: 17px; color: var(--accent-bright); flex: none; }

/* hero device visual */
.hero-visual { position: relative; perspective: 1400px; }
/* preserve-3d: the tilted frame's left half sits behind the z=0 plane where the
   floating decorations live, so the pager dots are lifted via translateZ (below)
   to stay in front for 3D hit-testing. */
.device-stack { position: relative; transform-style: preserve-3d; }
.screen-frame {
  position: relative;
  border-radius: 22px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: linear-gradient(160deg, #131417, #0a0b0d);
  padding: 12px;
  box-shadow: var(--shadow-lg), var(--glow);
  transform: rotateY(-12deg) rotateX(4deg);
  transform-style: preserve-3d; /* lets .screen-foot's translateZ join the 3D scene */
  transition: transform 0.6s var(--ease-out);
  will-change: transform;
}
.screen-inner {
  border-radius: 13px; overflow: hidden; aspect-ratio: 16 / 10;
  background: #050608; position: relative;
  /* draggable slides: keep vertical page-scroll on touch, capture horizontal swipes */
  touch-action: pan-y;
  user-select: none; -webkit-user-select: none;
  cursor: grab;
}
.screen-inner:active { cursor: grabbing; }
.screen-slide {
  position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center; gap: 10px;
  padding: 9%; opacity: 0; transform: scale(1.05);
  transition: opacity 0.8s, transform 1.2s var(--ease-out);
}
.screen-slide.on { opacity: 1; transform: scale(1); }
.screen-slide .ss-kicker { font-size: clamp(0.55rem, 1vw, 0.72rem); letter-spacing: 0.3em; text-transform: uppercase; font-weight: 700; }
.screen-slide .ss-title { font-size: clamp(1.2rem, 2.6vw, 2rem); font-weight: 800; letter-spacing: -0.02em; line-height: 1.05; }
.screen-slide .ss-bar { width: 38%; height: 4px; border-radius: 4px; margin-top: 8px; }
.ss-1 { background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 28%, #0a0908), color-mix(in srgb, var(--accent) 10%, #08090a) 60%); }
.ss-1 .ss-kicker { color: var(--accent-bright); } .ss-1 .ss-bar { background: var(--accent); }
.ss-2 { background: linear-gradient(135deg, color-mix(in srgb, var(--accent-alt) 24%, #0a0908), color-mix(in srgb, var(--accent-alt) 8%, #08090a) 65%); }
.ss-2 .ss-kicker { color: var(--accent-alt); } .ss-2 .ss-bar { background: var(--accent-alt); }
.ss-3 { background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 42%, #0a0908), color-mix(in srgb, var(--accent) 16%, #08090a) 65%); }
.ss-3 .ss-kicker { color: color-mix(in srgb, var(--accent-bright) 65%, #fff); } .ss-3 .ss-bar { background: var(--accent-bright); }
.ss-4 { flex-direction: row; align-items: center; justify-content: space-between; gap: 5%; background: linear-gradient(135deg, #191b20, #0b0c0e 65%); }
.ss-4 .ss-copy { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.ss-4 .ss-kicker { color: var(--accent-bright); } .ss-4 .ss-bar { background: var(--accent); width: 30%; }

/* tiny in-screen preview of a produced retail label */
.mini-label {
  flex: none; width: 41%; align-self: center; overflow: hidden;
  background: #f1f1ee; color: #17181a; border-radius: 7px;
  padding: 4.5% 4% 3.5%;
  box-shadow: 0 10px 28px -10px rgba(0, 0, 0, 0.65);
  display: flex; flex-direction: column; gap: 3px;
  font-family: var(--font); text-align: left; line-height: 1.15;
}
.mini-label .ml-kicker { color: #e2231a; font-size: 6px; font-weight: 800; letter-spacing: 0.2em; text-transform: uppercase; }
.mini-label .ml-title { font-size: 10px; font-weight: 800; letter-spacing: -0.01em; text-transform: uppercase; }
.mini-label .ml-price { font-size: 19px; font-weight: 800; letter-spacing: -0.04em; align-self: flex-end; }
.mini-label .ml-price i { font-style: normal; font-size: 9px; vertical-align: super; }
.mini-label .ml-installment { font-size: 5.5px; color: #8b8d90; align-self: flex-end; margin-top: -2px; }
.mini-label .ml-chips { display: flex; gap: 4px; margin: 4px 0 2px; }
.mini-label .ml-chips i {
  flex: 1; font-style: normal; font-size: 5px; font-weight: 700; text-align: center;
  border: 1px solid #c9c9c4; border-radius: 4px; padding: 3px 0; color: #333;
}
.mini-label .ml-rows { display: flex; flex-direction: column; gap: 3px; border-top: 1px solid #d8d8d3; padding-top: 4px; }
.mini-label .ml-row { display: flex; align-items: center; gap: 4px; font-size: 6px; font-weight: 700; color: #e2231a; text-transform: uppercase; }
.mini-label .ml-row b { flex: none; width: 9px; height: 9px; display: grid; place-items: center; background: #e2231a; color: #fff; border-radius: 2px; font-size: 5.5px; }
.mini-label .ml-row em { font-style: normal; margin-left: auto; color: #17181a; font-size: 7px; font-weight: 800; letter-spacing: -0.02em; }
.mini-label .ml-foot { height: 5px; margin: 4px -6% -5%; background: #e2231a; }
.screen-scan {
  position: absolute; inset: 0; pointer-events: none; mix-blend-mode: overlay; opacity: 0.35;
  background: repeating-linear-gradient(0deg, rgba(255,255,255,0.05) 0 1px, transparent 1px 4px);
}
.screen-foot {
  display: flex; justify-content: center; gap: 6px; padding-top: 12px;
  position: relative; z-index: 3;
  /* float the dots ~30px toward the viewer so every dot sits in front of the
     z=0 decorations in the 3D depth sort — keeps them clickable */
  transform: translateZ(30px);
}
/* pager dots: 3px bar visual, but a 13px-tall clickable hit area */
.screen-foot i {
  width: 26px; height: 13px; border-radius: 3px;
  border-block: 5px solid transparent; background-clip: padding-box;
  background-color: rgba(255,255,255,0.14);
  cursor: pointer; transition: background-color 0.4s;
}
.screen-foot i:hover { background-color: rgba(255,255,255,0.3); }
.screen-foot i.on { background-color: var(--accent-bright); }

/* floating ESL tag */
.esl-float {
  position: absolute; right: -6%; bottom: -12%; pointer-events: none;
  width: clamp(170px, 16vw, 220px);
  border-radius: 14px;
  background: linear-gradient(150deg, #f6f5f2, #e7e5df);
  color: #20211d; padding: 14px 16px;
  border: 1px solid rgba(255, 255, 255, 0.5);
  box-shadow: 0 30px 60px -20px rgba(0, 0, 0, 0.7);
  animation: floatY 5.5s ease-in-out infinite;
  transform: rotate(3deg);
}
.esl-float .esl-name { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: #57584f; }
.esl-float .esl-price { font-size: 1.9rem; font-weight: 800; letter-spacing: -0.03em; line-height: 1.1; }
.esl-float .esl-price small { font-size: 0.95rem; vertical-align: super; }
.esl-float .esl-meta { display: flex; justify-content: space-between; font-size: 0.62rem; color: #6b6c62; margin-top: 6px; }
.esl-float .esl-dot { position: absolute; top: 12px; right: 14px; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); animation: blink 2.2s infinite; }
@keyframes blink { 50% { opacity: 0.25; } }
@keyframes floatY { 50% { transform: rotate(3deg) translateY(-14px); } }

/* cloud chip */
.cloud-float {
  position: absolute; left: -8%; top: -6%; pointer-events: none;
  display: flex; align-items: center; gap: 10px;
  padding: 12px 18px; border-radius: 999px;
  background: rgba(14, 16, 19, 0.85); backdrop-filter: blur(12px);
  border: 1px solid var(--stroke-2);
  font-size: 0.85rem; font-weight: 600; color: var(--text-soft);
  box-shadow: var(--shadow-lg);
  animation: floatY2 6.5s ease-in-out infinite;
}
.cloud-float svg { width: 18px; height: 18px; color: var(--accent-bright); }
@keyframes floatY2 { 50% { transform: translateY(12px); } }

.scroll-hint {
  position: absolute; bottom: 26px; left: 50%; translate: -50% 0; z-index: 3; pointer-events: none;
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  color: var(--text-dim); font-size: 0.72rem; letter-spacing: 0.25em; text-transform: uppercase;
}
.scroll-hint::after {
  content: ""; width: 1px; height: 42px;
  background: linear-gradient(180deg, var(--accent), transparent);
  animation: scrollPulse 2s ease-in-out infinite;
}
@keyframes scrollPulse { 0% { transform: scaleY(0); transform-origin: top; } 50% { transform: scaleY(1); } 100% { transform: scaleY(0); transform-origin: bottom; } }

/* ---------- Reveal animations ---------- */
.reveal { opacity: 0; transform: translateY(34px); transition: opacity 0.9s var(--ease-out), transform 0.9s var(--ease-out); transition-delay: var(--d, 0s); }
.reveal.in { opacity: 1; transform: none; }
.reveal-l { opacity: 0; transform: translateX(-40px); transition: opacity 0.9s var(--ease-out), transform 0.9s var(--ease-out); transition-delay: var(--d, 0s); }
.reveal-l.in { opacity: 1; transform: none; }
.reveal-r { opacity: 0; transform: translateX(40px); transition: opacity 0.9s var(--ease-out), transform 0.9s var(--ease-out); transition-delay: var(--d, 0s); }
.reveal-r.in { opacity: 1; transform: none; }

/* ---------- Stats band ---------- */
.stats-band {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px;
  padding: 26px; border-radius: var(--radius);
  background: var(--panel); border: 1px solid var(--stroke);
  backdrop-filter: blur(10px);
}
.stat { text-align: center; padding: 12px 6px; position: relative; }
.stat + .stat::before {
  content: ""; position: absolute; left: -9px; top: 20%; bottom: 20%; width: 1px;
  background: var(--stroke);
}
.stat b { display: block; font-size: clamp(1.7rem, 3vw, 2.4rem); font-weight: 800; letter-spacing: -0.03em; color: #fff; }
.stat b i { font-style: normal; color: var(--accent-bright); }
.stat span { font-size: 0.85rem; color: var(--text-dim); }
.stat b span { font-size: 1.85rem; }

/* ---------- Cards ---------- */
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px; }

.card {
  position: relative; padding: 34px 30px;
  border-radius: var(--radius);
  background: var(--panel);
  border: 1px solid var(--stroke);
  backdrop-filter: blur(8px);
  transition: transform 0.45s var(--ease-out), border-color 0.4s, background 0.4s, box-shadow 0.45s;
  overflow: hidden;
}
.card::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(420px 220px at var(--mx, 50%) var(--my, 0%), rgba(var(--accent-rgb),0.12), transparent 65%);
  opacity: 0; transition: opacity 0.4s;
}
.card:hover { transform: translateY(-8px); border-color: var(--stroke-2); box-shadow: var(--shadow-lg); }
.card:hover::before { opacity: 1; }
.card h3 { font-size: 1.22rem; margin: 20px 0 10px; }
.card p { color: var(--text-soft); font-size: 0.97rem; }
.card-icon {
  width: 56px; height: 56px; border-radius: 15px;
  display: grid; place-items: center;
  background: linear-gradient(140deg, rgba(var(--accent-rgb),0.16), rgba(var(--accent-alt-rgb),0.08));
  border: 1px solid var(--stroke-2);
  color: var(--accent-bright);
  transition: transform 0.45s var(--ease-out), box-shadow 0.45s;
}
.card-icon svg { width: 26px; height: 26px; }
.card:hover .card-icon { transform: scale(1.08) rotate(-4deg); box-shadow: var(--glow); }
.card-num {
  position: absolute; top: 24px; right: 26px;
  font-size: 0.8rem; font-weight: 700; letter-spacing: 0.1em; color: var(--text-dim); opacity: 0.6;
}

/* ---------- Product duo panels ---------- */
.duo { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; }
.product-panel {
  position: relative; display: flex; flex-direction: column; justify-content: flex-end;
  min-height: 460px; padding: 40px;
  border-radius: 24px; overflow: hidden;
  border: 1px solid var(--stroke);
  transition: transform 0.5s var(--ease-out), border-color 0.4s, box-shadow 0.5s;
}
.product-panel:hover { transform: translateY(-8px); border-color: var(--stroke-2); box-shadow: var(--shadow-lg), var(--glow); }
.product-panel .pp-bg { position: absolute; inset: 0; z-index: 0; transition: transform 1.2s var(--ease-out); }
.product-panel:hover .pp-bg { transform: scale(1.05); }
.pp-signage { background: linear-gradient(150deg, color-mix(in srgb, var(--accent) 18%, #0a0908) 0%, color-mix(in srgb, var(--accent) 7%, #08090a) 55%, #07080a 100%); }
.pp-labels  { background: linear-gradient(150deg, color-mix(in srgb, var(--accent-alt) 16%, #0a0908) 0%, color-mix(in srgb, var(--accent-alt) 6%, #08090a) 55%, #07080a 100%); }
.pp-art { position: absolute; inset: 0; z-index: 1; opacity: 0.9; }
.product-panel .pp-content { position: relative; z-index: 2; }
.product-panel h3 { font-size: clamp(1.5rem, 2.4vw, 2rem); margin: 12px 0 10px; }
.product-panel p { color: var(--text-soft); max-width: 44ch; margin-bottom: 22px; }
.link-arrow {
  display: inline-flex; align-items: center; gap: 9px;
  font-weight: 700; color: var(--accent-bright); font-size: 0.98rem;
}
.link-arrow svg { transition: transform 0.35s var(--ease-out); }
.link-arrow:hover svg, .product-panel:hover .link-arrow svg { transform: translateX(6px); }

/* ---------- Team ---------- */
.team-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }
.team-card {
  text-align: center; padding: 38px 22px 30px;
  border-radius: var(--radius); background: var(--panel);
  border: 1px solid var(--stroke);
  transition: transform 0.45s var(--ease-out), border-color 0.4s, box-shadow 0.45s;
}
.team-card:hover { transform: translateY(-8px); border-color: var(--stroke-2); box-shadow: var(--shadow-lg); }
.avatar {
  width: 96px; height: 96px; margin: 0 auto 18px;
  border-radius: 50%; display: grid; place-items: center;
  font-size: 1.7rem; font-weight: 800; color: #eaf6e2;
  background:
    linear-gradient(var(--bg-3), var(--bg-3)) padding-box,
    conic-gradient(from 210deg, var(--accent), var(--accent-alt), var(--accent-bright), var(--accent)) border-box;
  border: 2.5px solid transparent;
  position: relative;
  transition: transform 0.45s var(--ease-out);
}
.team-card:hover .avatar { transform: scale(1.06) rotate(3deg); }
.team-card h3 { font-size: 1.12rem; }
.team-card .role { color: var(--accent-bright); font-size: 0.85rem; font-weight: 650; letter-spacing: 0.04em; text-transform: uppercase; margin-top: 5px; }
.team-card .t-link {
  display: inline-grid; place-items: center; width: 36px; height: 36px; margin-top: 16px;
  border-radius: 50%; border: 1px solid var(--stroke); color: var(--text-dim);
  transition: color 0.3s, border-color 0.3s, background 0.3s, transform 0.3s;
}
.team-card .t-link:hover { color: #fff; border-color: var(--stroke-2); background: rgba(var(--accent-rgb),0.12); transform: translateY(-3px); }

/* ---------- Logo marquee ---------- */
.marquee-section { padding: 46px 0; border-block: 1px solid var(--stroke); background: rgba(255, 255, 255, 0.015); }
.marquee { overflow: hidden; position: relative; -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); }
.marquee-track { display: flex; gap: 22px; width: max-content; animation: marquee 34s linear infinite; padding-inline: 22px; }
.marquee:hover .marquee-track { animation-play-state: paused; }
.marquee-item {
  flex: none; display: block;
  width: 190px; height: 128px; padding: 12px 22px;
  background: #f5f5f2; border-radius: 16px;
  filter: grayscale(1) opacity(0.82);
  transition: filter 0.35s, transform 0.35s var(--ease-out), box-shadow 0.35s;
}
.marquee-item:hover { filter: none; transform: translateY(-4px); box-shadow: 0 14px 34px -14px rgba(0, 0, 0, 0.6); }
.marquee-item img { display: block; width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; }
@keyframes marquee { to { transform: translateX(-50%); } }

/* ---------- CTA band ---------- */
.cta-band { position: relative; overflow: hidden; }
.cta-box {
  position: relative; text-align: center;
  padding: clamp(60px, 8vw, 100px) clamp(24px, 6vw, 80px);
  border-radius: 28px; overflow: hidden;
  background: linear-gradient(150deg, color-mix(in srgb, var(--accent) 17%, #0a0908), color-mix(in srgb, var(--accent) 6%, #08090a) 60%, color-mix(in srgb, var(--accent-alt) 9%, #08090a));
  border: 1px solid var(--stroke-2);
}
.cta-box::before {
  content: ""; position: absolute; inset: -40%;
  background: conic-gradient(from 0deg, transparent 0 70%, rgba(var(--accent-rgb),0.18) 85%, transparent 100%);
  animation: spinSlow 14s linear infinite;
}
@keyframes spinSlow { to { transform: rotate(360deg); } }
.cta-box > * { position: relative; }
.cta-box h2 { font-size: clamp(1.9rem, 4vw, 3rem); margin-bottom: 14px; }
.cta-box p { color: var(--text-soft); font-size: 1.1rem; margin-bottom: 34px; }

/* ---------- Page hero (subpages) ---------- */
.page-hero {
  position: relative; overflow: hidden;
  padding: calc(var(--header-h) + clamp(70px, 10vw, 120px)) 0 clamp(60px, 8vw, 100px);
  background:
    radial-gradient(800px 420px at 80% 0%, rgba(var(--accent-rgb),0.14), transparent 60%),
    radial-gradient(600px 380px at 8% 100%, rgba(var(--accent-alt-rgb),0.08), transparent 60%),
    linear-gradient(180deg, color-mix(in srgb, var(--accent) 6%, var(--bg)), var(--bg));
}
.page-hero .grid-lines {
  position: absolute; inset: 0; opacity: 0.5; pointer-events: none;
  background-image:
    linear-gradient(rgba(255,255,255,0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.03) 1px, transparent 1px);
  background-size: 54px 54px;
  -webkit-mask-image: radial-gradient(ellipse at 50% 0%, #000 30%, transparent 75%);
  mask-image: radial-gradient(ellipse at 50% 0%, #000 30%, transparent 75%);
}
.breadcrumb { display: flex; gap: 10px; align-items: center; font-size: 0.85rem; color: var(--text-dim); margin-bottom: 22px; }
.breadcrumb a:hover { color: var(--accent-bright); }
.breadcrumb svg { width: 12px; height: 12px; opacity: 0.6; }
.page-hero h1 { font-size: clamp(2.4rem, 5.4vw, 4rem); font-weight: 800; letter-spacing: -0.03em; max-width: 20ch; }
.page-hero .lead { margin-top: 20px; }

/* ---------- Split feature ---------- */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(40px, 6vw, 90px); align-items: center; }
.split .kicker { margin-bottom: 16px; }
.split h2 { margin-bottom: 18px; }
.split p { color: var(--text-soft); margin-bottom: 14px; }
.check-list { margin-top: 20px; display: grid; gap: 13px; }
.check-list li { display: flex; gap: 13px; align-items: flex-start; color: var(--text-soft); }
.check-list li strong { color: var(--text); }
.check-list .tick {
  flex: none; width: 22px; height: 22px; margin-top: 2px; border-radius: 7px;
  display: grid; place-items: center;
  background: rgba(var(--accent-rgb),0.15); border: 1px solid var(--stroke-2); color: var(--accent-bright);
}
.check-list .tick svg { width: 11px; height: 11px; }

/* signage board illustration */
.viz-panel {
  position: relative; border-radius: 24px; overflow: hidden;
  border: 1px solid var(--stroke);
  background: linear-gradient(160deg, color-mix(in srgb, var(--accent) 8%, #0b0c0e), #08090b);
  box-shadow: var(--shadow-lg);
  padding: clamp(24px, 3vw, 44px);
}
.viz-panel svg { width: 100%; height: auto; }

/* ---------- Feature list (compact cards) ---------- */
.feature-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.feature {
  display: flex; gap: 18px; padding: 24px;
  border-radius: var(--radius-sm); background: var(--panel);
  border: 1px solid var(--stroke);
  transition: transform 0.4s var(--ease-out), border-color 0.35s, background 0.35s;
}
.feature:hover { transform: translateY(-5px); border-color: var(--stroke-2); background: var(--panel-2); }
.feature-ico {
  flex: none; width: 44px; height: 44px; border-radius: 12px;
  display: grid; place-items: center; color: var(--accent-bright);
  background: rgba(var(--accent-rgb),0.12); border: 1px solid var(--stroke-2);
}
.feature-ico svg { width: 21px; height: 21px; }
.feature h3 { font-size: 1.02rem; margin-bottom: 6px; }
.feature p { font-size: 0.9rem; color: var(--text-soft); }

/* ---------- Industry tiles ---------- */
.industry-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.industry {
  position: relative; padding: 30px 28px; min-height: 240px;
  display: flex; flex-direction: column; justify-content: flex-end; gap: 8px;
  border-radius: var(--radius); overflow: hidden;
  border: 1px solid var(--stroke);
  background: var(--panel);
  transition: transform 0.45s var(--ease-out), border-color 0.4s, box-shadow 0.45s;
}
.industry:hover { transform: translateY(-7px); border-color: var(--stroke-2); box-shadow: var(--shadow-lg); }
.industry .ind-ico {
  position: absolute; top: 26px; left: 28px;
  width: 52px; height: 52px; border-radius: 14px; display: grid; place-items: center;
  background: rgba(var(--accent-rgb),0.13); border: 1px solid var(--stroke-2); color: var(--accent-bright);
  transition: transform 0.45s var(--ease-out);
}
.industry:hover .ind-ico { transform: scale(1.1) rotate(-5deg); }
.industry .ind-ico svg { width: 25px; height: 25px; }
.industry .ind-watermark {
  position: absolute; right: -14px; top: -6px; font-size: 5.4rem; font-weight: 800;
  color: rgba(255, 255, 255, 0.028); letter-spacing: -0.05em; pointer-events: none; line-height: 1;
}
.industry h3 { font-size: 1.22rem; }
.industry p { color: var(--text-soft); font-size: 0.93rem; }

/* ---------- Pillars (electronic labels) ---------- */
.pillar {
  padding: 36px 32px; border-radius: var(--radius);
  background: linear-gradient(170deg, var(--panel-2), var(--panel));
  border: 1px solid var(--stroke);
  transition: transform 0.45s var(--ease-out), border-color 0.4s, box-shadow 0.45s;
}
.pillar:hover { transform: translateY(-8px); border-color: var(--stroke-2); box-shadow: var(--shadow-lg); }
.pillar .pillar-num {
  font-size: 0.8rem; font-weight: 800; letter-spacing: 0.2em; color: var(--accent-bright);
}
.pillar h3 { font-size: 1.45rem; margin: 12px 0 18px; }
.pillar ul { display: grid; gap: 11px; }
.pillar li { display: flex; gap: 11px; align-items: flex-start; color: var(--text-soft); font-size: 0.96rem; }
.pillar li svg { flex: none; width: 16px; height: 16px; margin-top: 4px; color: var(--accent-bright); }

/* ESL showcase */
.esl-demo {
  display: grid; place-items: center; padding: clamp(30px, 4vw, 60px);
}
.esl-card {
  width: min(360px, 100%);
  border-radius: 18px; padding: 26px 28px;
  background: linear-gradient(150deg, #f7f6f3, #e9e7e1);
  color: #20211d;
  border: 1px solid rgba(255, 255, 255, 0.55);
  box-shadow: 0 40px 80px -30px rgba(0, 0, 0, 0.8);
  position: relative;
  transform: rotate(-2deg);
  transition: transform 0.5s var(--ease-out);
}
.esl-card:hover { transform: rotate(0deg) scale(1.03); }
.esl-card .esl-dot { position: absolute; top: 16px; right: 18px; width: 9px; height: 9px; border-radius: 50%; background: var(--accent); animation: blink 2.2s infinite; }
.esl-card .esl-name { font-weight: 750; font-size: 0.85rem; letter-spacing: 0.08em; text-transform: uppercase; color: #57584f; }
.esl-card .esl-desc { font-size: 0.78rem; color: #6b6c62; margin-top: 2px; }
.esl-card .esl-row { display: flex; align-items: flex-end; justify-content: space-between; margin-top: 16px; }
.esl-card .esl-price { font-size: 2.9rem; font-weight: 800; letter-spacing: -0.04em; line-height: 1; }
.esl-card .esl-price small { font-size: 1.2rem; vertical-align: super; }
.esl-card .esl-old { font-size: 0.95rem; color: #98988e; text-decoration: line-through; }
.esl-card .esl-promo {
  display: inline-block; margin-top: 14px; padding: 5px 12px; border-radius: 7px;
  background: var(--accent); color: #fff4e6; font-size: 0.72rem; font-weight: 800; letter-spacing: 0.1em;
}
.esl-card .esl-bars { display: flex; gap: 3px; margin-top: 18px; }
.esl-card .esl-bars i { width: 3px; border-radius: 2px; background: #20211d; }
.esl-card .esl-bars i:nth-child(odd) { height: 26px; } .esl-card .esl-bars i:nth-child(even) { height: 18px; align-self: flex-end; }
.esl-card .esl-bars i:nth-child(3n) { width: 6px; }

/* ---------- Tools trio ---------- */
.tool-card {
  padding: 36px 32px; border-radius: var(--radius);
  background: var(--panel); border: 1px solid var(--stroke);
  transition: transform 0.45s var(--ease-out), border-color 0.4s, box-shadow 0.45s;
  position: relative; overflow: hidden;
}
.tool-card::after {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px;
  background: var(--grad-accent); transform: scaleX(0); transform-origin: left;
  transition: transform 0.5s var(--ease-out);
}
.tool-card:hover { transform: translateY(-8px); border-color: var(--stroke-2); box-shadow: var(--shadow-lg); }
.tool-card:hover::after { transform: scaleX(1); }
.tool-card .tool-tag { font-size: 0.72rem; font-weight: 800; letter-spacing: 0.18em; text-transform: uppercase; color: var(--accent-bright); }
.tool-card h3 { font-size: 1.4rem; margin: 10px 0 12px; }
.tool-card p { color: var(--text-soft); font-size: 0.97rem; }

/* ---------- Clients page ---------- */
.client-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }
.client-tile {
  aspect-ratio: 16 / 10;
  display: flex; flex-direction: column; align-items: center; text-align: center;
  border-radius: var(--radius); padding: 20px 20px 14px; gap: 8px;
  background: #f5f5f2; border: 1px solid rgba(255, 255, 255, 0.5);
  transition: transform 0.45s var(--ease-out), border-color 0.4s, box-shadow 0.45s, filter 0.45s;
  position: relative; overflow: hidden;
  filter: grayscale(1) opacity(0.88);
}
.client-tile:hover {
  transform: translateY(-7px) scale(1.02);
  border-color: var(--stroke-2);
  box-shadow: var(--shadow-lg), var(--glow);
  filter: none;
}
.client-tile img { flex: 1; min-height: 0; width: 74%; object-fit: contain; mix-blend-mode: multiply; }
.client-sector { font-size: 0.68rem; letter-spacing: 0.16em; text-transform: uppercase; color: #8b8d85; }

/* ---------- Contacts ---------- */
.contact-layout { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: clamp(30px, 4vw, 60px); align-items: start; }
.contact-cards { display: grid; gap: 16px; }
.contact-card {
  display: flex; gap: 18px; align-items: flex-start;
  padding: 26px; border-radius: var(--radius-sm);
  background: var(--panel); border: 1px solid var(--stroke);
  transition: transform 0.4s var(--ease-out), border-color 0.35s;
}
.contact-card:hover { transform: translateX(6px); border-color: var(--stroke-2); }
.contact-card .cc-ico {
  flex: none; width: 48px; height: 48px; border-radius: 13px;
  display: grid; place-items: center; color: var(--accent-bright);
  background: rgba(var(--accent-rgb),0.12); border: 1px solid var(--stroke-2);
}
.contact-card .cc-ico svg { width: 22px; height: 22px; }
.contact-card h3 { font-size: 1.02rem; margin-bottom: 4px; }
.contact-card p, .contact-card a { color: var(--text-soft); font-size: 0.95rem; }
.contact-card a:hover { color: var(--accent-bright); }

.contact-form-wrap {
  padding: clamp(28px, 4vw, 44px);
  border-radius: 24px;
  background: var(--panel); border: 1px solid var(--stroke);
  backdrop-filter: blur(10px);
}
.contact-form-wrap h2 { font-size: 1.6rem; margin-bottom: 6px; }
.contact-form-wrap > p { color: var(--text-soft); margin-bottom: 28px; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.form-field { display: flex; flex-direction: column; gap: 8px; }
.form-field.full { grid-column: 1 / -1; }
.form-field label { font-size: 0.85rem; font-weight: 650; color: var(--text-soft); letter-spacing: 0.03em; }
.form-field input, .form-field textarea, .form-field select {
  font: inherit; color: #8b979f; /*var(--text);*/
  background: rgba(255, 255, 255, 0.045);
  border: 1px solid var(--stroke); border-radius: 12px;
  padding: 14px 16px;
  transition: border-color 0.3s, background 0.3s, box-shadow 0.3s;
}
.form-field textarea { min-height: 150px; resize: vertical; }
.form-field input:focus, .form-field textarea:focus, .form-field select:focus {
  outline: none; border-color: var(--accent);
  box-shadow: 0 0 0 4px rgba(var(--accent-rgb),0.15);
  background: rgba(255, 255, 255, 0.06);
}
.form-field input::placeholder, .form-field textarea::placeholder { color: var(--text-dim); }
/* The native dropdown list is drawn by the OS: without an explicit colour pair
   it renders light-on-light and is unreadable. Applies to every select. */
select option, select optgroup {
  background-color: #14161a;
  color: #edf0f2;
}
.hp-field { position: absolute; left: -9999px; opacity: 0; height: 0; overflow: hidden; }

.form-alert {
  display: flex; gap: 14px; align-items: flex-start;
  padding: 18px 20px; border-radius: 14px; margin-bottom: 24px;
  font-size: 0.95rem;
}
.form-alert svg { flex: none; width: 20px; height: 20px; margin-top: 2px; }
.form-alert.ok { background: rgba(var(--accent-rgb),0.12); border: 1px solid var(--stroke-2); color: #d3ecc3; }
.form-alert.err { background: rgba(220, 90, 90, 0.1); border: 1px solid rgba(220, 90, 90, 0.35); color: #f2c6c6; }

.map-band { margin-top: clamp(50px, 6vw, 80px); }
.map-panel {
  position: relative; border-radius: 24px; overflow: hidden;
  border: 1px solid var(--stroke); background: var(--bg-2);
}
.map-panel svg { width: 100%; height: auto; display: block; }
.map-pin-label {
  position: absolute; left: 50%; top: 38%; translate: -50% 0;
  padding: 10px 18px; border-radius: 999px;
  background: rgba(14, 16, 19, 0.9); backdrop-filter: blur(10px);
  border: 1px solid var(--stroke-2);
  font-size: 0.85rem; font-weight: 650; white-space: nowrap;
  box-shadow: var(--shadow-lg);
}
.map-pin-label b { color: var(--accent-bright); }

/* ---------- Footer ---------- */
.site-footer {
  position: relative; margin-top: clamp(40px, 6vw, 80px);
  border-top: 1px solid var(--stroke);
  background: linear-gradient(180deg, var(--bg-2), #050607);
  overflow: hidden;
}
.footer-glow {
  position: absolute; left: 50%; top: 0; translate: -50% -50%;
  width: 700px; height: 240px; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(var(--accent-rgb),0.14), transparent);
  pointer-events: none;
}
.footer-grid {
  display: grid; grid-template-columns: 1.4fr 0.8fr 1.1fr 1fr; gap: 40px;
  padding: clamp(50px, 7vw, 80px) 0 40px;
}
.footer-brand p { color: var(--text-dim); font-size: 0.93rem; margin: 18px 0; max-width: 34ch; }
.footer-social {
  display: inline-flex; align-items: center; gap: 9px;
  color: var(--text-soft); font-size: 0.9rem; font-weight: 600;
  transition: color 0.3s;
}
.footer-social:hover { color: var(--accent-bright); }
.footer-col h4 { font-size: 0.85rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-dim); margin-bottom: 18px; }
.footer-col ul { display: grid; gap: 11px; }
.footer-col a { color: var(--text-soft); font-size: 0.95rem; transition: color 0.25s, padding-left 0.25s; }
.footer-col a:hover { color: var(--accent-bright); padding-left: 4px; }
.footer-contact li { display: flex; gap: 11px; align-items: flex-start; color: var(--text-soft); font-size: 0.92rem; }
.footer-contact svg { flex: none; margin-top: 4px; color: var(--accent); }
.footer-cta-col p { color: var(--text-dim); font-size: 0.93rem; margin-bottom: 18px; }
.footer-bottom {
  display: flex; justify-content: space-between; gap: 14px; flex-wrap: wrap;
  padding: 24px 0 30px; border-top: 1px solid var(--stroke);
  color: var(--text-dim); font-size: 0.85rem;
}

/* ---------- To top ---------- */
.to-top {
  position: fixed; right: 22px; bottom: 22px; z-index: 90;
  width: 46px; height: 46px; border-radius: 50%;
  display: grid; place-items: center;
  background: rgba(14, 16, 19, 0.85); backdrop-filter: blur(10px);
  border: 1px solid var(--stroke); color: var(--text-soft);
  opacity: 0; visibility: hidden; transform: translateY(14px);
  transition: opacity 0.35s, transform 0.35s, visibility 0.35s, border-color 0.3s, color 0.3s;
}
.to-top.show { opacity: 1; visibility: visible; transform: none; }
.to-top:hover { color: #fff; border-color: var(--stroke-2); }

/* ---------- Responsive ---------- */
@media (max-width: 1024px) {
  .hero-inner { grid-template-columns: 1fr; gap: 70px; }
  .hero-visual { max-width: 560px; }
  .grid-3, .industry-grid, .feature-grid { grid-template-columns: repeat(2, 1fr); }
  .team-grid { grid-template-columns: repeat(2, 1fr); }
  .client-grid { grid-template-columns: repeat(3, 1fr); }
  .stats-band { grid-template-columns: repeat(2, 1fr); }
  .stat:nth-child(odd)::before { display: none; }
  .duo, .split, .contact-layout { grid-template-columns: 1fr; }
  .split .viz-panel { order: -1; }
}
@media (max-width: 860px) {
  /* backdrop-filter on the fixed header turns it into the containing block
     for fixed descendants, which would trap the full-screen nav overlay
     inside the 74px header strip — use a solid background on mobile. */
  .site-header.scrolled {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background: rgba(8, 9, 11, 0.97);
  }
  .main-nav {
    position: fixed; inset: 0; z-index: 110;
    background: rgba(7, 8, 10, 0.96); backdrop-filter: blur(24px);
    display: grid; place-items: center;
    opacity: 0; visibility: hidden; transition: opacity 0.4s, visibility 0.4s;
  }
  body.nav-open .main-nav { opacity: 1; visibility: visible; }
  body.nav-open { overflow: hidden; }
  .main-nav ul { flex-direction: column; gap: 10px; text-align: center; }
  .nav-link { font-size: 1.4rem; padding: 12px 22px; }
  .main-nav > ul > li.is-active::after { display: none; }
  .sub-menu {
    position: static; translate: none; transform: none; opacity: 1; visibility: visible;
    background: none; border: 0; box-shadow: none; min-width: 0; padding: 0;
    display: none;
  }
  .has-sub.open .sub-menu { display: flex; }
  .sub-menu a { font-size: 1.05rem; }
  .nav-burger { display: block; }
  .header-actions .btn-primary { display: none; }
}
@media (max-width: 640px) {
  body { font-size: 15.5px; }
  .grid-3, .grid-2, .industry-grid, .feature-grid, .team-grid { grid-template-columns: 1fr; }
  .client-grid { grid-template-columns: repeat(2, 1fr); }
  .form-grid { grid-template-columns: 1fr; }
  .esl-float { right: 0; bottom: -8%; }
  .cloud-float { left: 0; }
  .footer-grid { grid-template-columns: 1fr; gap: 34px; }
  .stats-band { grid-template-columns: 1fr 1fr; padding: 18px; }
  .product-panel { min-height: 380px; padding: 28px; }
}

/* ---------- Language chooser ---------- */
.lang-switch { position: relative; }
.lang-toggle {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 9px 14px; border-radius: 999px;
  border: 1px solid var(--stroke); background: var(--panel);
  font-size: 0.85rem; font-weight: 650; color: var(--text-soft);
  transition: color 0.25s, border-color 0.25s, background 0.25s;
}
.lang-toggle:hover { color: #fff; border-color: var(--stroke-2); background: var(--panel-2); }
.lang-toggle > svg:first-child { width: 16px; height: 16px; }
.lang-caret { width: 10px; transition: transform 0.3s; }
.lang-switch.open .lang-caret { transform: rotate(180deg); }
.lang-menu {
  position: absolute; top: calc(100% + 12px); inset-inline-end: 0;
  min-width: 190px; padding: 8px; z-index: 130;
  background: rgba(14, 16, 19, 0.94); backdrop-filter: blur(20px);
  border: 1px solid var(--stroke); border-radius: 16px;
  box-shadow: var(--shadow-lg);
  display: flex; flex-direction: column; gap: 2px;
  opacity: 0; visibility: hidden; transform: translateY(10px) scale(0.98);
  transition: opacity 0.28s var(--ease-out), transform 0.28s var(--ease-out), visibility 0.28s;
}
.lang-switch.open .lang-menu { opacity: 1; visibility: visible; transform: none; }
.lang-menu a {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px; border-radius: 10px;
  font-size: 0.92rem; color: var(--text-soft);
  transition: background 0.2s, color 0.2s;
}
.lang-menu a:hover { background: rgba(var(--accent-rgb), 0.12); color: #fff; }
.lang-menu a.is-active { color: #fff; background: rgba(255, 255, 255, 0.05); }
.lang-abbr {
  flex: none; width: 30px; height: 22px; display: grid; place-items: center;
  border-radius: 6px; border: 1px solid var(--stroke);
  font-size: 0.68rem; font-weight: 800; letter-spacing: 0.06em; color: var(--accent-bright);
}
.lang-menu a.is-active .lang-abbr { border-color: var(--stroke-2); background: rgba(var(--accent-rgb), 0.14); }
.lang-name { flex: 1; }
.lang-check { width: 13px; height: 13px; color: var(--accent-bright); flex: none; }
@media (max-width: 640px) {
  .btn-linkedin { display: none; }
  .lang-toggle { padding: 8px 11px; }
}

/* ---------- MDM scrollytelling ----------
   Default (no JS / reduced motion): the section renders as a normal static
   block with everything visible. main.js adds .mdm-active, which pins the
   stage and hands opacity/draw control to the scroll driver. */
.mdm-scrolly {
  position: relative;
  background: linear-gradient(180deg, var(--bg), color-mix(in srgb, var(--accent) 4%, var(--bg)) 55%, var(--bg));
}
.mdm-active { height: 420vh; }
.mdm-stage {
  display: flex; flex-direction: column; align-items: center; gap: 34px;
  padding: clamp(60px, 8vw, 110px) 20px;
}
.mdm-active .mdm-stage {
  position: sticky; top: 0; height: 100vh; overflow: hidden;
  justify-content: flex-start; gap: 0;
  /* header clearance on top; bottom band reserved for the devices title */
  padding: calc(var(--header-h) + 2vh) 0 11vh;
}
.mdm-head { text-align: center; padding: 0 20px; z-index: 2; }
.mdm-active .mdm-head { margin-bottom: 1vh; }
.mdm-badge {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 7px 16px; border-radius: 999px; margin-bottom: 16px;
  border: 1px solid var(--stroke-2); background: rgba(var(--accent-rgb), 0.1);
  font-size: 0.74rem; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--accent-bright);
}
.mdm-badge::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); animation: blink 2.2s infinite; }
.mdm-head h2 { font-size: clamp(2rem, 4.6vw, 3.6rem); font-weight: 800; letter-spacing: -0.03em; }
.mdm-scene { width: min(760px, 92vw); max-height: 78vh; height: auto; overflow: visible; }
/* pinned mode: the scene takes whatever height remains below the headline,
   so the cloud always starts BELOW the text instead of under it */
.mdm-active .mdm-scene { flex: 1 1 auto; min-height: 0; height: 100%; width: auto; max-width: 92vw; max-height: none; }
.mdm-scene g, .mdm-scene path, .mdm-scene circle { transform-box: fill-box; transform-origin: center; }
.mdm-devices-title {
  text-align: center; z-index: 2;
  font-size: clamp(1.1rem, 2vw, 1.5rem); font-weight: 750; letter-spacing: -0.01em;
}
.mdm-active .mdm-devices-title { position: absolute; bottom: 3.5vh; left: 0; right: 0; }
.mdm-card {
  width: min(680px, 92%); padding: clamp(26px, 3.5vw, 42px);
  border-radius: 24px; z-index: 3;
  background: rgba(14, 16, 19, 0.82);
  backdrop-filter: blur(22px) saturate(1.3);
  -webkit-backdrop-filter: blur(22px) saturate(1.3);
  border: 1px solid var(--stroke-2);
  box-shadow: var(--shadow-lg), var(--glow);
}
.mdm-active .mdm-card { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -46%); }
.mdm-card .kicker { margin-bottom: 10px; }
.mdm-card h3 { font-size: clamp(1.5rem, 3vw, 2.2rem); margin-bottom: 12px; }
.mdm-card > p { color: var(--text-soft); margin-bottom: 20px; }
.mdm-feats { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 18px; margin-bottom: 24px; }
.mdm-feats li { display: flex; gap: 10px; align-items: flex-start; font-size: 0.92rem; color: var(--text-soft); }
.mdm-feats li strong { color: var(--text); }
.mdm-feats .tick {
  flex: none; width: 20px; height: 20px; margin-top: 2px; border-radius: 6px;
  display: grid; place-items: center;
  background: rgba(var(--accent-rgb), 0.15); border: 1px solid var(--stroke-2); color: var(--accent-bright);
}
.mdm-feats .tick svg { width: 10px; height: 10px; }
@media (max-width: 640px) {
  .mdm-active { height: 340vh; }
  .mdm-feats { grid-template-columns: 1fr; }
  .mdm-active .mdm-card { max-height: 70vh; overflow: auto; }
}

/* ---------- 3D ESL tag viewer ---------- */
.esl3d-panel { display: flex; flex-direction: column; gap: 8px; }
.esl3d-stage {
  position: relative; display: grid; place-items: center;
  min-height: 380px; perspective: 1150px;
  touch-action: pan-y; user-select: none; -webkit-user-select: none;
  cursor: grab;
}
.esl3d-stage:active { cursor: grabbing; }
.esl3d-tag {
  position: relative; width: min(430px, 84%); aspect-ratio: 420 / 260;
  transform-style: preserve-3d;
  transform: rotateX(-8deg) rotateY(-24deg);
}
.esl3d-tag.snap { transition: transform 0.6s var(--ease-out); }
.esl3d-face {
  position: absolute; inset: 0; border-radius: 13px;
  background: linear-gradient(160deg, #34363b, #232529 60%);
  border: 1px solid rgba(255, 255, 255, 0.12);
  backface-visibility: hidden; -webkit-backface-visibility: hidden;
  display: flex; align-items: center; justify-content: center;
}
/* wide side bezels like the real housing — the LED lives in the frame,
   never over the e-paper */
.esl3d-front { transform: translateZ(9px); padding: 7% 11.5%; }
/* the back plate is a thin flat rim; the boss below stands proud of it */
.esl3d-back  {
  transform: rotateY(180deg) translateZ(9px);
  transform-style: preserve-3d;
  display: block; padding: 0;
  background: linear-gradient(160deg, #2b2d31, #1e2023 65%);
}

/* front: e-paper screen */
.esl3d-led {
  position: absolute; top: 12%; left: 3.6%; width: 3.2%; aspect-ratio: 1 / 2.4;
  border-radius: 999px; background: linear-gradient(180deg, #f7f8f4, #aeb3ab);
  border: 1px solid rgba(0, 0, 0, 0.5);
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.8);
}
.esl3d-screen {
  width: 100%; height: 100%; border-radius: 6px; overflow: hidden;
  background: #f2f1ec; color: #1c1c1c;
  display: flex; flex-direction: column; padding: 3.5% 4.5%;
  font-family: var(--font); line-height: 1.2;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.25), inset 0 2px 8px rgba(0, 0, 0, 0.18);
}
.esl3d-screen .es-row { display: flex; justify-content: space-between; font-size: clamp(8px, 2.6cqw, 13px); font-weight: 800; color: #b5352f; }
.esl3d-screen { container-type: inline-size; }
.es-mid { flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center; gap: 9%; padding: 2% 0; }
.es-qr { height: 100%; max-height: 100%; aspect-ratio: 1; width: auto; }
.es-bracket { width: 5.5%; align-self: stretch; margin: 1.5% 0; border: 3px solid #b5352f; }
.es-bl { border-right: 0; border-radius: 2px 0 0 2px; }
.es-br { border-left: 0; border-radius: 0 2px 2px 0; }
.es-code { text-align: center; font-size: clamp(9px, 3.4cqw, 16px); font-weight: 750; letter-spacing: 0.04em; }
.es-foot { display: flex; justify-content: space-between; align-items: flex-end; gap: 6%; margin-top: 2.5%; }
.es-foot > span:first-child { font-size: clamp(7px, 2.4cqw, 11px); color: #555652; font-weight: 650; letter-spacing: 0.06em; }
.es-barcode {
  flex: 1; max-width: 55%; height: clamp(10px, 4.5cqw, 20px);
  background: repeating-linear-gradient(90deg, #1c1c1c 0 2px, transparent 2px 4px, #1c1c1c 4px 5px, transparent 5px 9px, #1c1c1c 9px 12px, transparent 12px 14px);
}

/* back: housing markings + spec label */
/* Mounting pin. It is a child of the boss, so local z 0 is already the boss's
   top face — the base overlaps into the block and the tip clears the tag edge.
   The ::after plane crosses it so the pin keeps volume at any rotation. */
.esl3d-pin {
  position: absolute; top: -20%; left: 50%; translate: -50% 0;
  width: 2.4%; height: 24%; border-radius: 3px 3px 0 0;
  background: linear-gradient(90deg, #5e6166, #dcdfe3 38%, #8c8f94 70%, #55585d);
  /* sit halfway through the boss's 26px thickness, so the pin comes out of
     the middle of the top edge instead of off the front face */
  transform: translateZ(-13px);
  transform-style: preserve-3d;
}
.esl3d-pin::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  background: linear-gradient(90deg, #4e5156, #b9bcc1 38%, #75787d 70%, #45484d);
  transform: rotateY(90deg);
}
/* raised battery boss (the "bump" on the real housing) */
.ebl-bump {
  position: absolute; inset: 9% 6%;
  display: flex; align-items: center; gap: 3%;
  padding: 4% 4% 4% 2.5%;
  /* the walls carry the same radius (below), so their ends taper along this
     curve instead of poking past it as square corners */
  border-radius: 16px;
  background: linear-gradient(158deg, #3a3c42, #26282c 55%, #1b1d20);
  transform: translateZ(26px);
  transform-style: preserve-3d;
  backface-visibility: hidden; -webkit-backface-visibility: hidden;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.55), 0 6px 22px rgba(0, 0, 0, 0.6);
}
/* Boss walls. Each spans the full edge (corners meet) and bridges exactly
   the 18px gap between the raised face (local z 0) and the back plate
   (local z -18): translateZ(-9) first centres it mid-gap, then the 90deg
   rotation maps its 18px thickness onto the Z axis. */
/* matching radius makes each wall's ends curve inward with the boss corner,
   so the silhouette stays rounded and no square nub sticks out */
.ebl-wall { position: absolute; border-radius: 16px; }
/* gradients read as a rounded fillet rolling off the raised face */
.ebl-w-t { left: 0; right: 0; top: -13px;    height: 26px; transform: translateZ(-13px) rotateX(90deg);
           background: linear-gradient(180deg, #16171a, #303237); }
.ebl-w-b { left: 0; right: 0; bottom: -13px; height: 26px; transform: translateZ(-13px) rotateX(90deg);
           background: linear-gradient(180deg, #2b2d32, #141518); }
.ebl-w-l { top: 0; bottom: 0; left: -13px;   width: 26px;  transform: translateZ(-13px) rotateY(90deg);
           background: linear-gradient(90deg, #16171a, #313338); }
.ebl-w-r { top: 0; bottom: 0; right: -13px;  width: 26px;  transform: translateZ(-13px) rotateY(90deg);
           background: linear-gradient(90deg, #2d2f34, #141518); }

.ebl-side {
  flex: none; width: 13%; align-self: stretch;
  display: flex; flex-direction: column; align-items: center; justify-content: space-between;
  padding: 4% 0 6%; color: rgba(255, 255, 255, 0.42);
}
.ebl-port {
  width: 46%; aspect-ratio: 1; border-radius: 4px;
  border: 2px solid rgba(255, 255, 255, 0.32);
  display: grid; place-items: center;
}
.ebl-port::after { content: ""; width: 22%; height: 46%; border-radius: 1px; background: rgba(255, 255, 255, 0.32); }
.ebl-mark { width: 62%; height: auto; }
.ebl-weee { width: 42%; }

.esl3d-label {
  flex: 1; min-width: 0; border-radius: 4px; background: #f6f6f3; color: #17181a;
  padding: 2.6% 3.4% 2.8%; container-type: inline-size;
  font-family: var(--font); line-height: 1.22;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.4);
}
.ebl-head { display: flex; justify-content: space-between; align-items: baseline; font-size: clamp(8px, 4.6cqw, 17px); }
.ebl-head b { font-weight: 800; }
.ebl-head i { font-style: normal; font-weight: 650; }
.ebl-model {
  margin: 2% 0 2.4%; padding: 1.4% 3%;
  background: #17181a; color: #fff;
  font-size: clamp(7.5px, 4.2cqw, 15px); font-weight: 750; letter-spacing: 0.02em;
}
.ebl-sn { font-size: clamp(6px, 2.7cqw, 10px); color: #3d3e40; }
.ebl-cols { display: flex; justify-content: space-between; gap: 4%; font-size: clamp(6px, 2.7cqw, 10px); color: #3d3e40; }
.ebl-marks {
  display: flex; align-items: center; gap: 3.5%; margin: 2.6% 0 2.2%;
  color: #17181a;
}
.ebl-marks svg { width: 11%; height: auto; flex: none; }
.ebl-marks b { font-size: clamp(6px, 2.9cqw, 11px); font-weight: 800; letter-spacing: -0.02em; }
.ebl-tri {
  flex: none; width: 0; height: 0;
  border-left: 0.35em solid transparent; border-right: 0.35em solid transparent;
  border-bottom: 0.6em solid #17181a; font-size: clamp(6px, 2.9cqw, 11px);
}
.ebl-cert { margin-left: auto; text-align: right; font-size: clamp(4.5px, 2cqw, 8px); color: #3d3e40; line-height: 1.35; }
.ebl-ids { font-size: clamp(4.5px, 2.1cqw, 8px); color: #3d3e40; }
.ebl-foot { display: flex; justify-content: flex-end; margin-top: 1.6%; }
.ebl-foot b { font-size: clamp(7px, 3.4cqw, 13px); font-weight: 800; }

/* slab edges (the tag's thickness) — full span so the corners meet
   instead of leaving see-through gaps at grazing angles */
.esl3d-edge { position: absolute; background: #1a1b1e; border-radius: 13px; }
.es-e-top    { left: 0; right: 0; top: -9px;    height: 18px; transform: rotateX(90deg); }
.es-e-bottom { left: 0; right: 0; bottom: -9px; height: 18px; transform: rotateX(90deg); }
.es-e-left   { top: 0; bottom: 0; left: -9px;   width: 18px;  transform: rotateY(90deg); }
.es-e-right  { top: 0; bottom: 0; right: -9px;  width: 18px;  transform: rotateY(90deg); }

.esl3d-shadow {
  position: absolute; bottom: 8%; left: 50%; translate: -50% 0;
  width: 58%; height: 30px; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(0, 0, 0, 0.55), transparent);
  filter: blur(10px); pointer-events: none;
}

/* viewer ui */
.esl3d-ui { display: flex; justify-content: space-between; align-items: center; gap: 14px; flex-wrap: wrap; }
.esl3d-hint { display: inline-flex; align-items: center; gap: 8px; font-size: 0.82rem; color: var(--text-dim); }
.esl3d-btns { display: flex; gap: 6px; }
.esl3d-btn {
  padding: 8px 18px; border-radius: 999px;
  border: 1px solid var(--stroke); background: var(--panel);
  font-size: 0.85rem; font-weight: 650; color: var(--text-soft);
  transition: color 0.25s, border-color 0.25s, background 0.25s;
}
.esl3d-btn:hover { color: #fff; border-color: var(--stroke-2); }
.esl3d-btn.is-on { color: #fff; border-color: var(--stroke-2); background: rgba(var(--accent-rgb), 0.14); }

/* ---------- AI assistant widget ---------- */
.ai-widget { position: fixed; right: 22px; bottom: 22px; z-index: 140; }

/* launcher */
.ai-launcher {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 13px 22px 13px 16px; border-radius: 999px;
  background: var(--grad-accent); color: #1a0e04;
  font-weight: 700; font-size: 0.94rem;
  box-shadow: 0 12px 34px -10px rgba(var(--accent-rgb), 0.65), var(--shadow-lg);
  transition: transform 0.35s var(--ease-out), box-shadow 0.35s, opacity 0.25s;
}
.ai-launcher:hover { transform: translateY(-3px) scale(1.02); box-shadow: 0 18px 44px -10px rgba(var(--accent-rgb), 0.8); }
.ai-launcher-ico { display: grid; place-items: center; width: 22px; height: 22px; }
.ai-launcher-ico svg { width: 22px; height: 22px; }
.ai-widget.open .ai-launcher { opacity: 0; pointer-events: none; transform: scale(0.9); }

/* panel */
.ai-panel {
  position: absolute; right: 0; bottom: 0;
  width: min(390px, calc(100vw - 32px));
  height: min(560px, calc(100vh - 120px));
  display: flex; flex-direction: column; overflow: hidden;
  border-radius: 20px;
  background: rgba(12, 14, 17, 0.92);
  backdrop-filter: blur(24px) saturate(1.3);
  -webkit-backdrop-filter: blur(24px) saturate(1.3);
  border: 1px solid var(--stroke-2);
  box-shadow: var(--shadow-lg), var(--glow);
  opacity: 0; transform: translateY(16px) scale(0.97); transform-origin: 100% 100%;
  transition: opacity 0.3s var(--ease-out), transform 0.3s var(--ease-out);
}
.ai-panel[hidden] { display: none; }
.ai-widget.open .ai-panel { opacity: 1; transform: none; }

.ai-head {
  display: flex; align-items: center; gap: 11px;
  padding: 15px 14px 15px 17px;
  border-bottom: 1px solid var(--stroke);
  background: rgba(255, 255, 255, 0.03);
}
.ai-avatar {
  flex: none; width: 36px; height: 36px; border-radius: 11px;
  display: grid; place-items: center; color: var(--accent);
  background: rgba(var(--accent-rgb), 0.14); border: 1px solid var(--stroke-2);
}
.ai-avatar svg { width: 21px; height: auto; }
.ai-head-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.25; }
.ai-head-txt strong { font-size: 0.95rem; font-weight: 700; }
.ai-head-txt span { font-size: 0.76rem; color: var(--text-dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ai-icon-btn {
  flex: none; width: 32px; height: 32px; border-radius: 9px;
  display: grid; place-items: center; color: var(--text-dim);
  border: 1px solid transparent;
  transition: color 0.25s, background 0.25s, border-color 0.25s;
}
.ai-icon-btn:hover { color: #fff; background: var(--panel-2); border-color: var(--stroke); }
.ai-icon-btn svg { width: 17px; height: 17px; }

/* message log */
.ai-log {
  flex: 1; min-height: 0; overflow-y: auto;
  padding: 18px 16px; display: flex; flex-direction: column; gap: 12px;
  scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.18) transparent;
}
.ai-log::-webkit-scrollbar { width: 8px; }
.ai-log::-webkit-scrollbar-track { background: transparent; }
.ai-log::-webkit-scrollbar-button { display: none; height: 0; }
.ai-log::-webkit-scrollbar-thumb { background: rgba(255,255,255,.16); border-radius: 8px; }
.ai-log::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,.26); }
.ai-msg { display: flex; }
.ai-msg.ai-user { justify-content: flex-end; }
.ai-bubble {
  max-width: 86%; padding: 11px 15px; border-radius: 16px;
  font-size: 0.91rem; line-height: 1.55; white-space: pre-wrap; overflow-wrap: anywhere;
}
.ai-bot .ai-bubble {
  background: rgba(255, 255, 255, 0.06); border: 1px solid var(--stroke);
  border-bottom-left-radius: 5px; color: var(--text-soft);
}
.ai-user .ai-bubble {
  background: var(--grad-accent); color: #1a0e04; font-weight: 550;
  border-bottom-right-radius: 5px;
}
.ai-bubble.is-err { background: rgba(220, 90, 90, 0.12); border-color: rgba(220, 90, 90, 0.4); color: #f0c8c8; }

/* typing indicator */
.ai-dots { display: inline-flex; gap: 4px; padding: 3px 0; }
.ai-dots i {
  width: 6px; height: 6px; border-radius: 50%; background: var(--accent-bright);
  animation: aiBlink 1.3s ease-in-out infinite;
}
.ai-dots i:nth-child(2) { animation-delay: 0.18s; }
.ai-dots i:nth-child(3) { animation-delay: 0.36s; }
@keyframes aiBlink { 0%, 60%, 100% { opacity: 0.25; transform: translateY(0); } 30% { opacity: 1; transform: translateY(-3px); } }

/* composer */
.ai-form {
  display: flex; align-items: flex-end; gap: 9px;
  padding: 12px 12px 8px; border-top: 1px solid var(--stroke);
}
.ai-form textarea {
  flex: 1; min-width: 0; resize: none; max-height: 110px;
  font: inherit; font-size: 0.91rem; color: var(--text);
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--stroke); border-radius: 13px;
  padding: 11px 14px; line-height: 1.45;
  transition: border-color 0.25s, box-shadow 0.25s;
}
/* hide the native scrollbar (and its stepper arrows) inside the composer —
   the field still scrolls with the wheel and caret */
.ai-form textarea { scrollbar-width: none; -ms-overflow-style: none; }
.ai-form textarea::-webkit-scrollbar { width: 0; height: 0; display: none; }
.ai-form textarea::placeholder { color: var(--text-dim); }
.ai-form textarea:focus {
  outline: none; border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(var(--accent-rgb), 0.16);
}
.ai-send {
  flex: none; width: 40px; height: 40px; border-radius: 12px;
  display: grid; place-items: center;
  background: var(--grad-accent); color: #1a0e04;
  transition: transform 0.25s var(--ease-out), opacity 0.25s;
}
.ai-send:hover { transform: translateY(-2px); }
.ai-send:disabled { opacity: 0.4; pointer-events: none; }
.ai-send svg { width: 18px; height: 18px; }
.ai-note { padding: 0 16px 12px; font-size: 0.68rem; color: var(--text-dim); text-align: center; line-height: 1.4; }

@media (max-width: 560px) {
  /* compact pill hugging the right edge — a full-width bar swallows the page */
  .ai-widget { right: 14px; bottom: 14px; left: auto; }
  .ai-launcher { padding: 10px 17px 10px 13px; font-size: 0.85rem; gap: 8px; }
  .ai-launcher-ico, .ai-launcher-ico svg { width: 19px; height: 19px; }
  /* the panel still spans the screen: it is anchored to the widget's right edge,
     so 100vw minus both 14px gutters lines it up on the left too */
  .ai-panel { width: calc(100vw - 28px); height: min(76vh, calc(100vh - 90px)); }
}
/* the to-top button would sit under the launcher — move it aside */
.ai-widget ~ .to-top, body:has(.ai-widget) .to-top { bottom: 88px; }
@media (max-width: 560px) {
  .ai-widget ~ .to-top, body:has(.ai-widget) .to-top { bottom: 72px; right: 16px; }
}

/* clickable ticket id inside an assistant reply */
.tk-chip {
  display: inline-flex; align-items: center;
  padding: 1px 8px; margin: 0 1px;
  border-radius: 6px; vertical-align: baseline;
  font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
  font-size: 0.86em; font-weight: 650; line-height: 1.5;
  color: var(--accent-bright);
  background: rgba(var(--accent-rgb), 0.14);
  border: 1px solid rgba(var(--accent-rgb), 0.3);
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s, color 0.2s;
}
.tk-chip:hover { background: rgba(var(--accent-rgb), 0.28); border-color: var(--accent); color: #fff; }
.tk-chip:active { transform: translateY(1px); }

/* generated-file download card */
.ai-file {
  display: flex; align-items: center; gap: 13px; width: 100%;
  padding: 12px 14px; border-radius: 15px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--stroke-2);
  transition: transform 0.3s var(--ease-out), background 0.3s, border-color 0.3s;
}
.ai-file:hover {
  transform: translateY(-2px);
  background: rgba(var(--accent-rgb), 0.12);
  border-color: var(--accent);
}
.ai-file-ico {
  position: relative; flex: none; width: 42px; height: 42px;
  display: grid; place-items: center; color: var(--accent-bright);
}
.ai-file-ico svg { width: 34px; height: 34px; }
.ai-file-ico b {
  position: absolute; bottom: 3px; left: 50%; translate: -50% 0;
  padding: 1px 5px; border-radius: 4px;
  background: var(--accent); color: #fff;
  font-size: 0.52rem; font-weight: 800; letter-spacing: 0.06em;
}
.ai-file-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.ai-file-txt strong {
  font-size: 0.87rem; font-weight: 650; color: var(--text);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ai-file-txt small { font-size: 0.72rem; color: var(--text-dim); }
.ai-file-dl {
  flex: none; width: 34px; height: 34px; border-radius: 50%;
  display: grid; place-items: center; color: var(--text-dim);
  border: 1px solid var(--stroke); transition: color 0.3s, border-color 0.3s, background 0.3s;
}
.ai-file:hover .ai-file-dl { color: #fff; border-color: var(--accent); background: rgba(var(--accent-rgb), 0.25); }
.ai-file-dl svg { width: 17px; height: 17px; }

/* one-tap starter questions in the ops assistant */
.ai-suggests { display: flex; flex-wrap: wrap; gap: 6px; padding-top: 2px; }
.ai-suggests button {
  padding: 6px 13px; border-radius: 999px;
  border: 1px solid var(--stroke); background: rgba(255, 255, 255, 0.04);
  font-size: 0.78rem; color: var(--text-soft);
  transition: color 0.25s, border-color 0.25s, background 0.25s;
}
.ai-suggests button:hover {
  color: #fff; border-color: var(--stroke-2); background: rgba(var(--accent-rgb), 0.14);
}

/* ---------- in-chat incident form ---------- */
.ai-report {
  width: 100%; padding: 15px 16px 14px; border-radius: 16px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--stroke-2);
  display: flex; flex-direction: column; gap: 9px;
}
.ai-report-t { font-size: 0.94rem; font-weight: 750; }
.ai-report-i { font-size: 0.84rem; color: var(--text-dim); margin-bottom: 2px; }
.ai-report label { display: flex; flex-direction: column; gap: 5px; }
.ai-report label span { font-size: 0.76rem; font-weight: 650; color: var(--text-soft); letter-spacing: 0.02em; }
.ai-report input, .ai-report textarea {
  font: inherit; font-size: 0.88rem; color: var(--text);
  background: rgba(0, 0, 0, 0.28);
  border: 1px solid var(--stroke); border-radius: 10px;
  padding: 9px 12px; resize: vertical;
  transition: border-color 0.25s, box-shadow 0.25s;
}
.ai-report input:focus, .ai-report textarea:focus {
  outline: none; border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(var(--accent-rgb), 0.16);
}
.ai-report .ai-code {
  font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
  letter-spacing: 0.22em; text-transform: uppercase; font-size: 0.95rem;
}
.ai-report-hint { font-size: 0.7rem; color: var(--text-dim); margin-top: -3px; line-height: 1.4; }


.ai-report select {
  font: inherit; font-size: 0.88rem; color: var(--text);
  background: rgba(0, 0, 0, 0.28);
  border: 1px solid var(--stroke); border-radius: 10px;
  padding: 9px 12px; width: 100%;
  transition: border-color 0.25s, box-shadow 0.25s;
}
.ai-report select:focus {
  outline: none; border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(var(--accent-rgb), 0.16);
}
.ai-report option { background: var(--bg-3); color: var(--text); }

/* step one and step two share the form's own spacing */
.ai-step1, .ai-step2 { display: flex; flex-direction: column; gap: 9px; }

/* which client the code resolved to */
.ai-who {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 11px; border-radius: 10px;
  background: rgba(var(--accent-rgb), 0.1);
  border: 1px solid rgba(var(--accent-rgb), 0.3);
}
.ai-who svg { width: 15px; height: 15px; flex: none; color: var(--accent-bright); }
.ai-who-name { font-size: 0.86rem; font-weight: 700; min-width: 0; overflow: hidden;
               text-overflow: ellipsis; white-space: nowrap; }
.ai-who-change {
  margin-left: auto; flex: none; font: inherit; font-size: 0.74rem;
  color: var(--text-dim); text-decoration: underline; padding: 2px 4px;
}
.ai-who-change:hover { color: var(--accent-bright); }

.ai-report-go { background: var(--grad-accent); color: #1a0e04; }
.ai-report-go:hover { transform: translateY(-2px); }
.ai-report-go:disabled { opacity: 0.55; pointer-events: none; }
.ai-report-err {
  font-size: 0.8rem; line-height: 1.45; padding: 9px 11px; border-radius: 9px;
  background: rgba(220, 90, 90, 0.12); border: 1px solid rgba(220, 90, 90, 0.4); color: #f0c8c8;
}
/* two fields side by side (e-mail + phone) */
.ai-report-row { display: flex; gap: 9px; }
.ai-report-row label { flex: 1; min-width: 0; }

/* attachment picker */
.ai-files { display: flex; flex-direction: column; gap: 7px; }
.ai-files-label { font-size: 0.76rem; font-weight: 650; color: var(--text-soft); letter-spacing: 0.02em; }
.ai-files-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 10px 14px; border-radius: 10px;
  border: 1px dashed var(--stroke-2); background: rgba(var(--accent-rgb), 0.06);
  font-size: 0.84rem; font-weight: 600; color: var(--accent-bright);
  transition: background 0.25s, border-color 0.25s;
}
.ai-files-btn:hover { background: rgba(var(--accent-rgb), 0.14); border-color: var(--accent); }
.ai-files-btn svg { width: 16px; height: 16px; }
.ai-files-hint { font-size: 0.68rem; color: var(--text-dim); line-height: 1.4; }
.ai-files-list { display: flex; flex-direction: column; gap: 6px; }
.ai-files-list li {
  display: flex; align-items: center; gap: 9px;
  padding: 6px 8px; border-radius: 9px;
  background: rgba(0, 0, 0, 0.24); border: 1px solid var(--stroke);
}
.ai-fthumb {
  flex: none; width: 34px; height: 34px; border-radius: 7px; overflow: hidden;
  display: grid; place-items: center;
  background: rgba(255, 255, 255, 0.05); color: var(--accent-bright);
}
.ai-fthumb img { width: 100%; height: 100%; object-fit: cover; }
.ai-fthumb svg { width: 17px; height: 17px; }
.ai-fname {
  flex: 1; min-width: 0; font-size: 0.78rem; color: var(--text-soft);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ai-files-list small { flex: none; font-size: 0.68rem; color: var(--text-dim); }
.ai-fdel {
  flex: none; width: 24px; height: 24px; border-radius: 50%;
  display: grid; place-items: center; color: var(--text-dim);
  transition: color 0.2s, background 0.2s;
}
.ai-fdel:hover { color: #f0c8c8; background: rgba(220, 90, 90, 0.16); }
.ai-fdel svg { width: 12px; height: 12px; }

.ai-report-btns { display: flex; gap: 8px; justify-content: flex-end; margin-top: 3px; }
.ai-report-btns button {
  padding: 9px 17px; border-radius: 999px; font-size: 0.85rem; font-weight: 650;
  transition: transform 0.25s var(--ease-out), background 0.25s, border-color 0.25s, opacity 0.25s;
}
.ai-report-cancel { border: 1px solid var(--stroke); color: var(--text-soft); }
.ai-report-cancel:hover { border-color: var(--stroke-2); color: #fff; }
.ai-report-send { background: var(--grad-accent); color: #1a0e04; }
.ai-report-send:hover { transform: translateY(-2px); }
.ai-report-send:disabled { opacity: 0.55; pointer-events: none; }
.ai-tags {
  display: block; margin-top: 8px; padding-top: 8px;
  border-top: 1px solid var(--stroke);
  font-size: 0.72rem; color: var(--accent-bright); letter-spacing: 0.04em;
}

/* ---------- assistant guided pointer ---------- */
/* a fake cursor the assistant drives across the page to show the visitor
   where the contact form is */
.ai-cursor {
  position: fixed; top: 0; left: 0; z-index: 200; pointer-events: none;
  display: flex; align-items: flex-start; gap: 7px;
  opacity: 0;
  transition: transform 1.15s cubic-bezier(0.5, 0, 0.15, 1), opacity 0.3s;
  will-change: transform;
}
.ai-cursor.on { opacity: 1; }
.ai-cursor svg { width: 25px; height: 25px; flex: none; filter: drop-shadow(0 3px 6px rgba(0, 0, 0, 0.55)); }
.ai-cursor span {
  margin-top: 13px; padding: 5px 11px; border-radius: 999px; white-space: nowrap;
  background: var(--accent); color: #fff;
  font-size: 0.72rem; font-weight: 700; letter-spacing: 0.02em;
  box-shadow: 0 6px 18px -6px rgba(0, 0, 0, 0.7);
}
.ai-cursor.clicking svg { transform: scale(0.82); transition: transform 0.15s; }

.ai-ring {
  position: fixed; z-index: 199; width: 12px; height: 12px; border-radius: 50%;
  border: 2px solid var(--accent); pointer-events: none;
  animation: aiRing 0.6s ease-out forwards;
}
@keyframes aiRing {
  from { transform: translate(-50%, -50%) scale(0.4); opacity: 1; }
  to   { transform: translate(-50%, -50%) scale(5); opacity: 0; }
}

/* nav link lighting up as the pointer "presses" it */
.ai-press { color: #fff !important; background: rgba(var(--accent-rgb), 0.25) !important; border-radius: 999px; }

/* the contact form being framed on arrival */
.is-framed { animation: aiFrame 2.4s ease-out 1; }
@keyframes aiFrame {
  0%   { box-shadow: 0 0 0 0 rgba(var(--accent-rgb), 0); }
  18%  { box-shadow: 0 0 0 4px rgba(var(--accent-rgb), 0.55), var(--glow); }
  70%  { box-shadow: 0 0 0 4px rgba(var(--accent-rgb), 0.45), var(--glow); }
  100% { box-shadow: 0 0 0 0 rgba(var(--accent-rgb), 0); }
}

@media (prefers-reduced-motion: reduce) {
  .ai-cursor { display: none; }
  .is-framed { animation: none; box-shadow: 0 0 0 3px rgba(var(--accent-rgb), 0.5); }
}

/* ---------- RTL (Hebrew) ---------- */
[dir="rtl"] .breadcrumb svg,
[dir="rtl"] .link-arrow svg,
[dir="rtl"] .btn svg { transform: scaleX(-1); }
[dir="rtl"] .link-arrow:hover svg,
[dir="rtl"] .product-panel:hover .link-arrow svg { transform: scaleX(-1) translateX(-6px); }
[dir="rtl"] .scroll-progress span { transform-origin: 100% 50%; }
[dir="rtl"] .sub-menu a:hover,
[dir="rtl"] .sub-menu li.is-active a { padding-left: 16px; padding-right: 20px; }
[dir="rtl"] .footer-col a:hover { padding-left: 0; padding-right: 4px; }
[dir="rtl"] .contact-card:hover { transform: translateX(-6px); }
[dir="rtl"] .stat + .stat::before { left: auto; right: -9px; }
[dir="rtl"] .card-num { right: auto; left: 26px; }
[dir="rtl"] .industry .ind-watermark { right: auto; left: -14px; }
[dir="rtl"] .industry .ind-ico { left: auto; right: 28px; }
/* demo artwork (labels, marquee) is genuine LTR content — keep it that way */
[dir="rtl"] .marquee, [dir="rtl"] .marquee-track { direction: ltr; }
[dir="rtl"] .esl-float, [dir="rtl"] .esl-card, [dir="rtl"] .mini-label { direction: ltr; text-align: left; }
[dir="rtl"] .ai-widget { right: auto; left: 22px; }
[dir="rtl"] .ai-panel { right: auto; left: 0; transform-origin: 0 100%; }
[dir="rtl"] .ai-bot .ai-bubble { border-bottom-left-radius: 16px; border-bottom-right-radius: 5px; }
[dir="rtl"] .ai-user .ai-bubble { border-bottom-right-radius: 16px; border-bottom-left-radius: 5px; }
[dir="rtl"] .ai-send svg, [dir="rtl"] .ai-launcher-ico svg { transform: scaleX(-1); }
@media (max-width: 560px) {
  [dir="rtl"] .ai-widget { left: 14px; right: auto; }
  [dir="rtl"] .ai-panel { left: 0; right: auto; }
  [dir="rtl"] .to-top { left: 16px; right: auto; }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.001s !important; animation-iteration-count: 1 !important; transition-duration: 0.001s !important; }
  .reveal, .reveal-l, .reveal-r { opacity: 1; transform: none; }
  .marquee-track { animation: none; flex-wrap: wrap; width: auto; }
  #heroCanvas { display: none; }
}


/* ---------- admin dialog ----------
   Stands in for confirm() and prompt(), which cannot be styled and announce the
   host name as though the browser were warning about the site. */
.modal {
  position: fixed; inset: 0; z-index: 200;
  display: grid; place-items: center; padding: 20px;
  background: rgba(4, 5, 7, 0.72); backdrop-filter: blur(4px);
  opacity: 0; transition: opacity 0.2s var(--ease-out);
}
.modal.on { opacity: 1; }
.modal-box {
  width: min(460px, 100%);
  background: var(--bg-3); border: 1px solid var(--stroke-2);
  border-radius: 18px; padding: 24px 26px 20px;
  box-shadow: var(--shadow-lg);
  transform: translateY(10px) scale(0.985);
  transition: transform 0.24s var(--ease-out);
}
.modal.on .modal-box { transform: none; }
.modal-t { font-size: 1.02rem; font-weight: 700; line-height: 1.45; margin: 0; }
.modal-note { margin: 9px 0 0; font-size: 0.85rem; line-height: 1.5; color: var(--text-dim); }
.modal-field { display: block; margin-top: 16px; }
.modal-field input,
.modal-field select {
  width: 100%; font: inherit; font-size: 0.95rem; color: var(--text);
  background: rgba(0, 0, 0, 0.3); border: 1px solid var(--stroke);
  border-radius: 11px; padding: 11px 14px;
  transition: border-color 0.2s, box-shadow 0.2s;
}
/* A select left to the operating system is a white box in a dark dialog, so
   the native control is stripped and the arrow drawn as a background image —
   the one part of a <select> that cannot be styled directly. */
.modal-field select {
  -webkit-appearance: none; -moz-appearance: none; appearance: none;
  padding-right: 38px; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%23b7c0c6' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5.5 8l4.5 4.5L14.5 8'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 13px center;
  background-size: 15px 15px;
}
.modal-field select:hover { border-color: rgba(var(--accent-rgb), 0.45); }
/* the list itself is drawn by the browser: give it readable colours */
.modal-field select option,
.modal-field select optgroup { background: #15181c; color: var(--text); }
.modal-field input:focus,
.modal-field select:focus {
  outline: none; border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(var(--accent-rgb), 0.16);
}
.modal-btns { display: flex; justify-content: flex-end; gap: 9px; margin-top: 20px; }
.modal-btns button {
  font: inherit; font-size: 0.86rem; font-weight: 650; cursor: pointer;
  padding: 9px 20px; border-radius: 999px; border: 1px solid transparent;
  transition: filter 0.2s, background 0.2s, border-color 0.2s, color 0.2s;
}
.modal-no { background: none; border-color: var(--stroke); color: var(--text-soft); }
.modal-no:hover { border-color: var(--stroke-2); color: #fff; }
.modal-ok { background: var(--grad-accent); color: #1a0e04; }
.modal-ok:hover { filter: brightness(1.08); }
.modal-ok.danger { background: linear-gradient(120deg, #b3423f, #d2605c); color: #fff; }

/* the agent's new-ticket form, inside the operator chat */
.ops-new select {
  font: inherit; font-size: 0.88rem; color: var(--text);
  background: rgba(0, 0, 0, 0.28);
  border: 1px solid var(--stroke); border-radius: 10px;
  padding: 9px 12px; width: 100%;
}
.ops-new select:focus {
  outline: none; border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(var(--accent-rgb), 0.16);
}
.ops-new option { background: var(--bg-3); color: var(--text); }
.ops-new-full { border: 1px solid var(--stroke); color: var(--text-soft); }
.ops-new-full:hover { border-color: var(--stroke-2); color: #fff; }